:root{    --bg: #0e0e0e;    --text: #ffffff;    --accent: #ffd700;    --gray: #88888891;        --font-main: 'Inter', system-ui, -apple-system, sans-serif;    --fs-h: clamp(2.5rem, 10vw, 6rem);    --fs-p: clamp(0.9rem, 2vw, 1.1rem);    --fw-bold: 900;    --fw-reg: 400;}*{margin: 0;padding: 0; box-sizing: border-box;}body{background: var(--bg);color: var(--text);     font-family: var(--font-main);overflow: hidden;     touch-action: none;       -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}.viewport{position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;}.space-grid{position: absolute;top: -50vh;left: -50vw;width: 200vw;height: 200vh;    background-image:         linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);    background-size: 80px 80px;    background-position: center center;opacity: var(--gridOp, 0);transform: scale(var(--gridScale, 1)) translateZ(0);    pointer-events: none;    will-change: transform, opacity;}.camera-roll{position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;     transform-origin: 50% 50%;    z-index: 10;transform: rotateZ(var(--rollZ, 0deg)) translateZ(0);    will-change: transform;}.page-wrapper{position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;    transform-origin: 50% 50%;    will-change: transform, opacity, filter;}#wrap-1{transform: scale(var(--p1Scale, 1)) rotateZ(0deg) translateZ(0);opacity: var(--p1Op, 1);filter: blur(calc(var(--p1Blur, 0) * 1px));visibility: var(--p1Vis, visible);}#wrap-3{transform: scale(var(--p3Scale, 0.05)) rotateZ(180deg) translateZ(0);opacity: var(--p3Op, 0);filter: blur(calc(var(--p3Blur, 20) * 1px));visibility: var(--p3Vis, hidden);}.page{width: 100%;position: relative;    will-change: transform;}#level-1{transform: translateY(calc(var(--p1Y, 0) * 1px)) translateZ(0);}#level-3{transform: translateY(calc(var(--p3Y, 0) * 1px)) translateZ(0);}.screen{width: 100%;height: 100vh;display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    text-align: center;padding: 2rem;}.hero-screen{background: transparent;    z-index: 1;}.content-screen{background: var(--bg);position: relative;    z-index: 10; }.container{width: 100%;    max-width: 900px;}.network-canvas{position: absolute;top: 0;left: 0;width: 100%;height: 100vh;     z-index: 1;    pointer-events: none;background: #050505;transform: translateY(calc(var(--canvasY, 0) * 1px)) translateZ(0);    will-change: transform;}.shutter{position: absolute;top: 0;left: 0;width: 100%;height: 90vh;background: var(--bg);    z-index: 5;transform: translateY(calc(var(--shutterY, -100) * 1%)) translateZ(0);opacity: var(--shutterOp, 1);    will-change: transform, opacity;    pointer-events: none;}h1{    font-size: var(--fs-h);    font-weight: var(--fw-bold);    text-transform: uppercase;    line-height: 0.9;    letter-spacing: normal;    margin-bottom: 2rem;color: #ffffff;}h2{    font-size: calc(var(--fs-h) * 0.6);    font-weight: var(--fw-bold);    text-transform: uppercase;    margin-bottom: 1.5rem;color: #ffffff;}p{    font-size: var(--fs-p);    font-weight: var(--fw-reg);    line-height: 1.6;color: rgba(255,255,255,0.7);margin: 0 auto;}.subtitle-container{position: relative;height: 1.5em;width: 100%;display: flex;    align-items: center;    justify-content: center;}.subtitle{position: absolute;    font-size: var(--fs-p);    text-transform: uppercase;    letter-spacing: 0.2rem;color: var(--accent);opacity: 0;transform: translateY(20px);transition: opacity 0.5s ease, transform 0.5s ease;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}.subtitle.active{opacity: 1;transform: translateY(0);    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}.accent-hint{    margin-top: 3rem;    font-size: 0.7rem;    text-transform: uppercase;    letter-spacing: 0.4em;opacity: 0.3;}#screen-expertise{position: relative;overflow: hidden;}.expertise-bg-wrapper{position: absolute;top: 0;left: 0;width: 100%;height: 100%;    z-index: 1;overflow: hidden;}.sliding-bg-img{width: 100%;height: 100%;    object-fit: cover;opacity: 0.25;transform: translateY(-100%);    will-change: transform;    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1);}#screen-expertise.shutter-closed .sliding-bg-img{transform: translateY(0);}#screen-expertise .container{position: relative;    z-index: 10;    pointer-events: all;}.accent-text{    margin-top: 2rem;    font-size: 0.8rem;    text-transform: uppercase;    letter-spacing: 0.3em;color: var(--gray);opacity: 0.85; font-weight: 500;   -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}#screen-expertise .modern-title,#screen-expertise .two-column-layout{    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;opacity: 0;transform: translateY(30px);    transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.5s;}#screen-expertise.shutter-closed .modern-title,#screen-expertise.shutter-closed .two-column-layout{    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;opacity: 1;transform: translateY(0);}.two-column-layout{display: flex;    align-items: flex-start;gap: 4rem;width: 100%;}.column{flex: 1;    text-align: left;}.column p{    margin-left: 0;}.wave-text span{display: inline-block;transition: transform 0.2s ease, color 0.2s ease;    will-change: transform;}@media (max-width: 900px){    .two-column-layout{        flex-direction: column;gap: 2rem;}    .column{        text-align: center;}    .column p{margin: 0 auto 1.5rem auto;}}.tunnel-container{position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;    pointer-events: none;     z-index: 50; }.tunnel-frame{position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;background: transparent;}#frame-2{opacity: var(--f2Op, 0);transform: scale(var(--f2Scale, 1)) translateZ(0);visibility: var(--f2Vis, hidden);    will-change: transform, opacity;}#frame-4{opacity: var(--f4Op, 0);transform: scale(var(--f4Scale, 1)) translateZ(0);visibility: var(--f4Vis, hidden);    will-change: transform, opacity;}.tunnel-slide{position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    text-align: center;opacity: 0;visibility: hidden;transform: scale(0.8) translateZ(0);    will-change: transform, opacity;}.tunnel-slide.active{    pointer-events: all;}.fly-through-container{position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;overflow: hidden;perspective: none;}.fly-item{position: absolute;top: 50%;left: 50%;        will-change: transform, opacity, filter;opacity: 0;visibility: hidden;display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    text-align: center;}.fly-item.title-item h2{     font-size: clamp(3rem, 6vw, 5rem);     margin-bottom: 0.5rem;     text-shadow: 0 4px 20px rgba(0,0,0,0.8);}.fly-item.title-item p{     font-size: 1.5rem;     text-shadow: 0 2px 10px rgba(0,0,0,0.8);color: var(--accent);}.fly-item.icon-item img{width: 15vw;     max-width: 150px;     min-width: 80px;height: auto;filter: drop-shadow(0 0 20px rgba(67, 67, 67, 0.2));}.fly-item.photo-item .case-photo{width: 60vw;     max-width: 900px;    aspect-ratio: 16 / 9;height: auto;    background-size: contain;    background-repeat: no-repeat;     background-position: center;    border-radius: 8px;display: flex;     align-items: flex-end;     justify-content: center;    padding-bottom: 1rem;     font-weight: bold;     font-size: 1.2rem;position: relative;    }.fly-item.photo-item .case-photo::before,.fly-item.photo-item .case-photo::after{display: none;}.fly-item.photo-item .case-photo span{    border-radius: 4px;    backdrop-filter: blur(4px);color: #fff;}@keyframes rotate-border{    to{transform: rotate(360deg);}}.fly-item.text-item span{    font-size: clamp(1.5rem, 3vw, 3rem);     font-weight: bold;     text-transform: uppercase;     letter-spacing: 4px;color: rgba(255,255,255,0.8);     text-shadow: 0 5px 15px rgba(0,0,0,0.5);}.card-column{display: flex;    justify-content: center;    align-items: center;perspective: 1000px;}.tool-card{width: 100%;    max-width: 450px;height: 480px; background: #171717;    border-radius: 12px;    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255,255,255,0.1);position: relative;overflow: hidden;padding: 1px; transition: transform 0.3s ease, box-shadow 0.3s ease;}.tool-card:hover{transform: translateY(-5px);    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255,255,255,0.2);}.tool-card::before{content: "";position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: linear-gradient(90deg, transparent, var(--accent), transparent);animation: rotation_border 3000ms infinite linear;    animation-play-state: paused;opacity: 0;transition: opacity 0.3s ease;    z-index: 0;}.tool-card:hover::before, .tool-card.loading::before{opacity: 0.5;    animation-play-state: running;}@keyframes rotation_border{    0%{transform: rotate(0deg);}    100%{transform: rotate(360deg);}}.tool-content{position: relative;background: #111;    border-radius: 11px;padding: 1.5rem;    z-index: 1;display: flex;    flex-direction: column;gap: 1.5rem;height: 100%;}.input-container{display: flex;background: white;    border-radius: 1rem;background: linear-gradient(173deg, #23272f 0%, #14161a 100%);    box-shadow: 10px 10px 20px #0e1013, -10px -10px 40px #383e4b;padding: 0.3rem;gap: 0.3rem;}.tool-input{    border-radius: 0.8rem;background: #23272f;    box-shadow: inset 5px 5px 10px #0e1013, inset -5px -5px 10px #383e4b, 0px 0px 100px rgba(255, 212, 59, 0), 0px 0px 100px rgba(255, 102, 0, 0);width: 100%;    flex-basis: 100%;padding: 1rem;border: 1px solid transparent;color: white;transition: all 0.2s ease-in-out;    font-family: var(--font-main);}.tool-input:focus{border: 1px solid #ffd43b;outline: none;    box-shadow: inset 0px 0px 10px rgba(255, 102, 0, 0.5), inset 0px 0px 10px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5);}@media (max-width: 500px){    .input-container{ flex-direction: column;}    .tool-input{ border-radius: 0.8rem;}}.tool-btn{background: linear-gradient(145deg, #ffdf00, #d4af37);color: #000;border: none;    border-radius: 0.5rem;padding: 0.8rem 1.5rem;    padding-right: 20px;    padding-left: 5px;    font-weight: bold;cursor: pointer;    text-transform: uppercase;    letter-spacing: 1px;position: relative;overflow: hidden;        box-shadow:         0 4px 0 #b89600,         0 8px 15px rgba(0,0,0,0.4),         inset 0 1px 1px rgba(255,255,255,0.8),         inset 0 -1px 2px rgba(0,0,0,0.2); transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease;}.tool-btn:hover{filter: brightness(1.1);    box-shadow:         0 4px 0 #b89600,        0 12px 20px  rgba(255, 166, 0, 0.5),         inset 0 1px 1px rgba(255,255,255,0.9),        inset 0 -1px 2px rgba(0,0,0,0.2);}.tool-btn:active, .tool-card.loading .tool-btn{    transform: translateY(4px);    box-shadow:         0 0px 0 #b89600,         0 2px 5px rgba(0,0,0,0.6),         inset 0 2px 5px rgba(0,0,0,0.5),         inset 0 -1px 1px rgba(255,255,255,0.2);filter: brightness(0.9);}.tool-card.loading .tool-btn{    pointer-events: none; }.result-area{position: relative;flex: 1;    min-height: 0; background: #0a0a0a;    border-radius: 0.5rem;padding: 1rem;    overflow-y: auto;    font-family: var(--font-main);    font-size: 0.9rem;color: var(--accent);    text-align: left;    box-shadow: inset 0 0 10px #000;}.result-area::-webkit-scrollbar{width: 8px;}.result-area::-webkit-scrollbar-track{background: rgba(0, 0, 0, 0.5);    border-radius: 4px;}.result-area::-webkit-scrollbar-thumb{background: var(--accent);    border-radius: 4px;}.result-area::-webkit-scrollbar-thumb:hover{background: #e6c200;}.typed-result{    white-space: pre-wrap;    word-wrap: break-word;margin: 0;    line-height: 1.5;}.hand-container{position: absolute;inset: 0;display: flex;    justify-content: center;    align-items: center;    z-index: 10;transition: opacity 0.5s ease;}.🤚{    --skin-color: #E4C560;    --tap-speed: 0.6s;    --tap-stagger: 0.1s;position: relative;width: 80px;height: 60px;    margin-left: 80px;transition: --tap-speed 0.3s;}.tool-card.loading .🤚{    --tap-speed: 0.2s;     --tap-stagger: 0.03s;}.🤚:before{content: '';display: block;width: 180%;height: 75%;position: absolute;top: 70%;right: 20%; background-color: black; border-radius: 40px 10px;filter: blur(10px);opacity: 0.3;}.🌴{display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0; background-color: var(--skin-color); border-radius: 10px 40px;}.👍{position: absolute;width: 120%;height: 38px; background-color: var(--skin-color);bottom: -18%;right: 1%; transform-origin: calc(100% - 20px) 20px;transform: rotate(-20deg);    border-radius: 30px 20px 20px 10px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); border-left: 2px solid rgba(0, 0, 0, 0.1);}.👍:after{width: 20%;height: 60%;content: ''; background-color: rgba(255, 255, 255, 0.3);position: absolute;bottom: -8%;left: 5px; border-radius: 60% 10% 10% 30%; border-right: 2px solid rgba(0, 0, 0, 0.05);}.👉{position: absolute;width: 80%;height: 35px; background-color: var(--skin-color);bottom: 32%;right: 64%; transform-origin: 100% 20px; animation-duration: calc(var(--tap-speed) * 2);    animation-timing-function: ease-in-out; animation-iteration-count: infinite;transform: rotate(10deg);}.👉:before{content: '';position: absolute;width: 140%;height: 30px; background-color: var(--skin-color);bottom: 8%;right: 65%; transform-origin: calc(100% - 20px) 20px;transform: rotate(-60deg); border-radius: 20px;}.👉:nth-child(1){ animation-delay: 0;filter: brightness(70%); animation-name: tap-upper-1;}.👉:nth-child(2){ animation-delay: var(--tap-stagger);filter: brightness(80%); animation-name: tap-upper-2;}.👉:nth-child(3){ animation-delay: calc(var(--tap-stagger) * 2);filter: brightness(90%); animation-name: tap-upper-3;}.👉:nth-child(4){ animation-delay: calc(var(--tap-stagger) * 3);filter: brightness(100%); animation-name: tap-upper-4;}@keyframes tap-upper-1{ 0%, 50%, 100%{transform: rotate(10deg) scale(0.4);} 40%{transform: rotate(50deg) scale(0.4);}}@keyframes tap-upper-2{ 0%, 50%, 100%{transform: rotate(10deg) scale(0.6);} 40%{transform: rotate(50deg) scale(0.6);}}@keyframes tap-upper-3{ 0%, 50%, 100%{transform: rotate(10deg) scale(0.8);} 40%{transform: rotate(50deg) scale(0.8);}}@keyframes tap-upper-4{ 0%, 50%, 100%{transform: rotate(10deg) scale(1);} 40%{transform: rotate(50deg) scale(1);}}.success-indicator{position: absolute;inset: 0;display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    z-index: 11;opacity: 0;transform: translateY(20px);transition: opacity 0.4s ease, transform 0.4s ease;    pointer-events: none;}.tool-card.success-stage-1 .success-indicator{opacity: 1;transform: translateY(0);}.tool-card.success-stage-1 .hand-container,.tool-card.typing .hand-container{opacity: 0;    pointer-events: none;}.tool-card.typing .success-indicator{opacity: 0;transform: translateY(-20px);}.success-indicator .emoji{    font-size: 4rem;filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));}.success-indicator .ok-text{    font-size: 1rem;color: rgba(255,255,255,0.5);    margin-top: 0.5rem;}.l3-bg{position: absolute;top: -10%;left: -10%;width: 120%;height: 120%;    background-size: cover;    background-position: center;    background-repeat: no-repeat;    z-index: -1;opacity: 0.3;    pointer-events: none;    will-change: transform;}.l3-bg::after{content: "";position: absolute;inset: 0;background: radial-gradient(circle at center, rgba(14,14,14,0.4) 0%, rgba(5,5,5,0.9) 100%);}.parallax-content{    will-change: transform;}.unified-anim{opacity: 0;transform: translateY(30px);transition: opacity 0.6s ease, transform 0.6s ease;}.screen.active .unified-anim,.tunnel-slide.active .unified-anim{opacity: 1;transform: translateY(0);}.screen.active .modern-title.unified-anim, .tunnel-slide.active .modern-title.unified-anim{ transition-delay: 0.1s;}.screen.active .subtitle-text.unified-anim, .tunnel-slide.active .subtitle-text.unified-anim{ transition-delay: 0.2s;}.screen.active .desc-text.unified-anim, .tunnel-slide.active .desc-text.unified-anim{ transition-delay: 0.3s;}.screen.active .card-column.unified-anim, .tunnel-slide.active .feedback-form.unified-anim, .tunnel-slide.active .reviews-column.unified-anim{ transition-delay: 0.4s;}@media (max-width: 900px){    .reverse-mobile{        flex-direction: column-reverse;}}@media (max-width: 768px){    :root{        --fs-h: 3rem;}    .screen{padding: 1.5rem;}}.reveal-text{opacity: 0;transform: translateY(20px);transition: opacity 1.2s cubic-bezier(0.2, 1, 0.3, 1),                 transform 1.2s cubic-bezier(0.2, 1, 0.3, 1);}.reveal-text.active{opacity: 1;transform: translateY(0);}.feedback-form{display: flex;    flex-direction: column;gap: 1.5rem;    margin-top: 2rem;    align-items: flex-start;}.rating-container{display: flex;    align-items: center;gap: 1rem;position: relative;}.rating-tooltip{    font-size: 0.9rem;color: #ff4444;opacity: 0;transform: translateX(-10px);transition: opacity 0.3s ease, transform 0.3s ease;    font-weight: bold;position: absolute;left: 100%;    white-space: nowrap;    pointer-events: none;}.rating-tooltip.show{opacity: 1;transform: translateX(10px);}.radio{display: flex;    justify-content: center;gap: 10px;    flex-direction: row-reverse;}.radio > input{position: absolute;appearance: none;}.radio > label{cursor: pointer;    font-size: 30px;position: relative;display: inline-block;transition: transform 0.3s ease;}.radio > label > svg{fill: #666;transition: fill 0.3s ease;}.radio >label::before,.radio >label::after{content: "";position: absolute;width: 6px;height: 6px;    background-color: #ff9e0b;    border-radius: 50%;opacity: 0;transform: scale(0);transition: transform 0.4s ease, opacity 0.4s ease;animation: particle-explosion 1s ease-out;}.radio >label::before{top: -15px;left: 50%;transform: translateX(-50%) scale(0);}.radio >label::after{bottom: -15px;left: 50%;transform: translateX(-50%) scale(0);}.radio >label:hover::before,.radio >label:hover::after{opacity: 1;transform: translateX(-50%) scale(1.5);}.radio >label:hover{transform: scale(1.2);animation: pulse 0.6s infinite alternate;}.radio >label:hover > svg,.radio >label:hover ~ label > svg{fill: #ff9e0b;filter: drop-shadow(0 0 15px rgba(255, 158, 11, 0.9));animation: shimmer 1s ease infinite alternate;}.radio >input:checked + label > svg,.radio >input:checked + label ~ label > svg{fill: #ff9e0b;filter: drop-shadow(0 0 15px rgba(255, 158, 11, 0.9));animation: pulse 0.8s infinite alternate;}@keyframes pulse{    0%{transform: scale(1);}    100%{transform: scale(1.1);}}@keyframes particle-explosion{    0%{opacity: 0;transform: scale(0.5);}    50%{opacity: 1;transform: scale(1.2);}    100%{opacity: 0;transform: scale(0.5);}}@keyframes shimmer{    0%{filter: drop-shadow(0 0 10px rgba(255, 158, 11, 0.5));}    100%{filter: drop-shadow(0 0 20px rgba(255, 158, 11, 1));}}.radio >input:checked +label:hover > svg,.radio >input:checked +label:hover ~ label > svg{fill: #e58e09;}.radio >label:hover > svg,.radio >label:hover ~ label > svg{fill: #ff9e0b;}.radioinput:checked ~ label svg{fill: #ffa723;}.reviews-column{display: flex;    justify-content: center;    align-items: center;width: 100%;}.reviews-container{display: flex;    flex-direction: column;gap: 1rem;width: 100%;    max-width: 450px;height: 480px;    overflow-y: auto;padding: 10px;}.reviews-container::-webkit-scrollbar{width: 8px;}.reviews-container::-webkit-scrollbar-track{background: rgba(0, 0, 0, 0.5); border-radius: 4px;}.reviews-container::-webkit-scrollbar-thumb{background: var(--accent); border-radius: 4px;}.reviews-container::-webkit-scrollbar-thumb:hover{background: #e6c200;}.empty-reviews{color: rgba(255,255,255,0.5);    font-size: 1.2rem;    text-align: center;    margin-top: 50%;transform: translateY(-50%);}.review-card{background: linear-gradient(145deg, #1c1f26, #14161a);    border-radius: 12px;padding: 1.2rem;    box-shadow:         0 4px 6px rgba(0, 0, 0, 0.6),         inset 0 1px 1px rgba(255, 255, 255, 0.1);display: flex;    flex-direction: column;gap: 0.5rem;opacity: 0;transform: translateY(20px);animation: reviewDropIn 0.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;}@keyframes reviewDropIn{    to{opacity: 1;transform: translateY(0);}}.review-stars{color: #ff9e0b;    font-size: 1.2rem;    letter-spacing: 2px;}.review-text{    font-size: 1rem;color: var(--text);    line-height: 1.4;    word-wrap: break-word;}.contact-cards-container{display: flex;gap: 2rem;    margin-top: 3rem;    justify-content: center;    flex-wrap: wrap;width: 100%;}.contact-card-wrapper{    text-decoration: none;display: block;transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);}.contact-card-wrapper:hover{transform: scale(1.05) rotate(-1deg);}.contact-card{    --card-accent: #22c55e;    --card-accent-op: rgba(34, 197, 94, 0.2);    --card-glow: rgba(34, 197, 94, 0.1);width: 320px;color: white;    border-radius: 1.5rem;border: 1px solid var(--card-accent-op);background: linear-gradient(to top right, #0F0F0F, #0B0B0B);    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);position: relative;overflow: hidden;    backdrop-filter: blur(12px);transition: all 0.7s ease;    z-index: 10;}.contact-card.gmail{    --card-accent: #eade35;    --card-accent-op: rgba(234, 195, 53, 0.2);    --card-glow: rgba(231, 234, 53, 0.1);}.contact-card.telegram{    --card-accent: #0088cc;    --card-accent-op: rgba(0, 136, 204, 0.2);    --card-glow: rgba(0, 136, 204, 0.1);}.contact-card-wrapper:hover .contact-card{    box-shadow: 0 0 30px var(--card-glow);}.card-overlay{position: absolute;inset: 0;    z-index: 0;overflow: hidden;}.card-overlay-grad{position: absolute;inset: 0;background: linear-gradient(to top right, var(--card-accent-op), transparent);opacity: 0.4;transition: opacity 0.5s;}.contact-card-wrapper:hover .card-overlay-grad{opacity: 0.6;}.card-circle-bg{position: absolute;bottom: -80px;left: -80px;width: 192px;height: 192px;    border-radius: 50%;background: linear-gradient(to top right, var(--card-accent-op), transparent);filter: blur(48px);opacity: 0.3;transition: all 0.7s;}.contact-card-wrapper:hover .card-circle-bg{opacity: 0.5;transform: scale(1.1);}.card-ping{position: absolute;top: 40px;left: 40px;width: 64px;height: 64px;    border-radius: 50%;background: var(--card-accent-op);filter: blur(20px);animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;}.card-ping-delay{position: absolute;bottom: 64px;right: 64px;width: 48px;height: 48px;    border-radius: 50%;background: var(--card-accent-op);filter: blur(15px);animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite 1s;}.card-shine{position: absolute;inset: 0;background: linear-gradient(90deg, transparent, var(--card-accent-op), transparent);transform: skewX(-12deg) translateX(100%);transition: transform 1s;}.contact-card-wrapper:hover .card-shine{transform: skewX(-12deg) translateX(-200%);}.card-content{padding: 2rem;position: relative;    z-index: 10;display: flex;    flex-direction: column;    align-items: center;}.icon-box{position: relative;    margin-bottom: 1.5rem;}.icon-ping{position: absolute;inset: 0;    border-radius: 50%;border: 2px solid var(--card-accent-op);animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;}.icon-pulse{position: absolute;inset: 0;    border-radius: 50%;border: 1px solid var(--card-accent-op);animation: pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s;}.icon-main{padding: 1.5rem;    border-radius: 50%;    backdrop-filter: blur(8px);border: 1px solid var(--card-accent-op);background: linear-gradient(to bottom right, rgba(0,0,0,0.8), rgba(17,24,39,0.6));    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);transition: all 0.5s;display: flex;    align-items: center;    justify-content: center;}.contact-card-wrapper:hover .icon-main{transform: rotate(12deg) scale(1.1);    box-shadow: 0 0 20px var(--card-accent-op);}.icon-main img{width: 32px;height: 32px;transition: transform 0.7s;}.contact-card-wrapper:hover .icon-main img{transform: rotate(1080deg);}.card-title{    margin-bottom: 1rem;transition: transform 0.3s;}.contact-card-wrapper:hover .card-title{transform: scale(1.05);}.card-title p{    font-size: 1.875rem;    font-weight: bold;background: linear-gradient(to right, var(--card-accent), #ffffff, var(--card-accent));    background-size: 200% auto;    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;animation: shimmer-text 3s linear infinite;}@keyframes shimmer-text{    to{ background-position: 200% center;}}.card-description{display: flex;    flex-direction: column;gap: 0.25rem;}.card-description p{color: rgba(255, 255, 255, 0.8);    font-size: 0.875rem;    line-height: 1.5;margin: 0;}.card-divider{    margin-top: 1.5rem;width: 33.33%;height: 2px;background: linear-gradient(to right, transparent, var(--card-accent), transparent);    border-radius: 9999px;transition: all 0.5s;}.contact-card-wrapper:hover .card-divider{width: 50%;height: 3px;    box-shadow: 0 0 10px var(--card-accent);}.card-dots{display: flex;gap: 0.5rem;    margin-top: 1rem;opacity: 0.6;transition: opacity 0.3s;}.contact-card-wrapper:hover .card-dots{opacity: 1;}.dot{width: 0.5rem;height: 0.5rem;background: var(--card-accent);    border-radius: 50%;animation: bounce 1s infinite;}.dot:nth-child(2){ animation-delay: 0.1s;}.dot:nth-child(3){ animation-delay: 0.2s;}@keyframes ping{    75%, 100%{transform: scale(2);opacity: 0;}}@keyframes pulse{    0%, 100%{transform: scale(1);opacity: 1;}    50%{transform: scale(1.1);opacity: 0.5;}}@keyframes bounce{    0%, 100%{transform: translateY(0);}    50%{transform: translateY(-100%);}}/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.modal-content {
  width: 100%;
  max-width: 400px;
  background: #171717;
  border-radius: 12px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255,255,255,0.1);
  padding: 1px;
  transform: translateY(0);
  transition: transform 0.3s ease;
}
.modal-overlay.hidden .modal-content {
  transform: translateY(20px);
}
.modal-inner {
  background: #111;
  border-radius: 11px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.captcha-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 65px;
}
.privacy-container.input-container {
  padding: 1rem;
  display: flex;
  align-items: center;
}
.checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #fff;
  user-select: none;
}
.checkbox-container input {
  display: none;
}
.checkmark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #23272f;
  box-shadow: inset 2px 2px 5px #0e1013, inset -2px -2px 5px #383e4b;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}
.checkbox-container input:checked ~ .checkmark {
  background: var(--accent);
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);
}
.checkbox-container input:checked ~ .checkmark:after {
  content: "";
  position: absolute;
  left: 8px; top: 4px;
  width: 6px; height: 12px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.checkbox-container a {
  color: var(--accent);
  text-decoration: none;
}
.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.modal-actions .tool-btn {
  flex: 1;
  text-align: center;
  padding: 0.8rem;
}
.btn-secondary {
  background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
  color: #fff;
  box-shadow: 0 4px 0 #1a1a1a, 0 8px 15px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 2px rgba(0,0,0,0.2);
}
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.modal-content {
  width: 100%;
  max-width: 400px;
  background: #171717;
  border-radius: 12px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255,255,255,0.1);
  padding: 1px;
  transform: translateY(0);
  transition: transform 0.3s ease;
}
.modal-overlay.hidden .modal-content {
  transform: translateY(20px);
}
.modal-inner {
  background: #111;
  border-radius: 11px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.captcha-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 65px;
}
.privacy-container.input-container {
  padding: 1rem;
  display: flex;
  align-items: center;
}
.checkbox-container {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #fff;
  user-select: none;
}
.checkbox-container input {
  display: none;
}
.checkmark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #23272f;
  box-shadow: inset 2px 2px 5px #0e1013, inset -2px -2px 5px #383e4b;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}
.checkbox-container input:checked ~ .checkmark {
  background: var(--accent);
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);
}
.checkbox-container input:checked ~ .checkmark:after {
  content: "";
  position: absolute;
  left: 8px; top: 4px;
  width: 6px; height: 12px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.checkbox-container a {
  color: var(--accent);
  text-decoration: none;
}
.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.modal-actions .tool-btn {
  flex: 1;
  text-align: center;
  padding: 0.8rem;
}
.btn-secondary {
  background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
  color: #fff;
  box-shadow: 0 4px 0 #1a1a1a, 0 8px 15px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 2px rgba(0,0,0,0.2);
}
.btn-secondary:hover {
  filter: brightness(1.2);
  box-shadow: 0 4px 0 #1a1a1a, 0 12px 20px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 2px rgba(0,0,0,0.2);
}
.btn-secondary:active {
  box-shadow: 0 0px 0 #1a1a1a, 0 2px 5px rgba(0,0,0,0.6), inset 0 2px 5px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.1);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* Animated Mouse Hint */
.scroll-hint-mouse {
    position: fixed;
    bottom: clamp(15px, 4vh, 40px);
    right: clamp(15px, 4vw, 40px);
    width: clamp(100px, 15vw, 250px);
    height: auto;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    pointer-events: none;
}

.scroll-hint-mouse svg {
    width: 100%;
    height: auto;
    display: block;
}

.scroll-hint-mouse.show {
    opacity: 0.8;
    visibility: visible;
}

.wheel-animation {
  animation: spinWheel 4.5s infinite;
}

@keyframes spinWheel {
  0%, 10% { 
    transform: translateY(0); 
    animation-timing-function: ease-out; 
  }
  15% { 
    transform: translateY(-40px); 
    animation-timing-function: cubic-bezier(0.65, 0, 0.15, 1); 
  }
  75% { 
    transform: translateY(2100px); 
  }
  100% { 
    transform: translateY(2100px); 
  }
}

.speed-lines-visibility {
  animation: speedLinesVisibility 4.5s infinite;
  opacity: 0;
}

@keyframes speedLinesVisibility {
  0%, 25% { opacity: 0; }
  35%, 55% { opacity: 1; }
  65%, 100% { opacity: 0; }
}

.speed-lines-moving {
  animation: speedLinesMove 0.2s linear infinite;
}

@keyframes speedLinesMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(400px); }
}