/* ═══════════════════════════════════════════
   ТРОЙКА STUDIO — PRODUCTION CSS
   Optimized: minimal backdrop-filter, GPU layers
   ═══════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;cursor:none}
:root{
    --black:#000;--off-black:#0a0a0a;--dark:#111;
    --grey-900:#1a1a1a;--grey-800:#222;--grey-700:#333;
    --grey-500:#666;--grey-400:#888;--grey-200:#bbb;
    --white:#f0f0f0;
    --font-code:'JetBrains Mono',monospace;
    --font-heading:'Cormorant Garamond',serif;
    --font-body:'DM Sans',sans-serif;
    --ease-expo:cubic-bezier(0.16,1,0.3,1);
    --nav-h:68px;
    --lamp-glow:0;
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--black);color:var(--white);overflow-x:hidden;line-height:1.6;cursor:none}
a{color:var(--white);text-decoration:none;cursor:none}
button{cursor:none;border:none;background:none;color:inherit;font-family:inherit}
input,select,textarea,label,option{cursor:none}
ul{list-style:none}
::selection{background:var(--white);color:var(--black)}

/* ═══════════ CURSOR ═══════════ */
.cursor{position:fixed;width:7px;height:7px;background:var(--white);border-radius:50%;pointer-events:none;z-index:100001;transform:translate(-50%,-50%);transition:width .15s,height .15s;mix-blend-mode:difference;will-change:left,top}
.cursor.hover{width:14px;height:14px}
@media(hover:none){.cursor{display:none}*{cursor:auto!important}}

/* ═══════════ TORUS CANVAS ═══════════ */
#torus-bg{position:fixed;inset:0;z-index:0;will-change:transform}

/* ═══════════ LAMP GLOW ═══════════ */
.lamp-glow{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse 55% 55% at 50% 50%,rgba(240,240,240,calc(var(--lamp-glow)*0.07)) 0%,rgba(240,240,240,calc(var(--lamp-glow)*0.025)) 30%,transparent 65%);
    will-change:opacity;
}

/* ═══════════ FIXED BUTTONS ═══════════ */
.fixed-left-btns,.fixed-right-btns{position:fixed;bottom:20px;z-index:9000;display:flex;gap:8px}
.fixed-left-btns{left:20px}
.fixed-right-btns{right:20px}
.fixed-btn{
    width:40px;height:40px;border-radius:50%;
    border:1px solid rgba(240,240,240,0.08);
    background:rgba(10,10,10,0.7);
    display:flex;align-items:center;justify-content:center;
    color:var(--grey-500);transition:border-color .4s,color .4s;padding:0;
}
.fixed-btn:hover{border-color:rgba(240,240,240,0.25);color:var(--white)}
.fixed-btn.active{color:var(--white);border-color:rgba(240,240,240,0.2)}

/* Contact Panel */
.contact-panel{
    position:absolute;bottom:52px;right:0;
    background:rgba(17,17,17,0.97);border:1px solid rgba(240,240,240,0.08);
    border-radius:14px;padding:16px 18px;min-width:220px;
    opacity:0;transform:translateY(10px) scale(0.95);
    pointer-events:none;transition:all .3s var(--ease-expo);
}
.contact-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.contact-panel__title{font-size:.78rem;color:var(--grey-500);letter-spacing:.08em;margin-bottom:12px;text-transform:uppercase}
.contact-panel__item{
    display:flex;align-items:center;gap:10px;padding:10px 12px;
    border:1px solid rgba(240,240,240,0.06);border-radius:10px;
    font-size:.85rem;color:var(--grey-200);transition:all .3s;margin-bottom:6px;
}
.contact-panel__item:last-child{margin-bottom:0}
.contact-panel__item:hover{border-color:rgba(240,240,240,0.2);color:var(--white);background:rgba(240,240,240,0.03)}

/* ═══════════ NAV ═══════════ */
.nav{
    position:fixed;top:0;left:0;right:0;height:var(--nav-h);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 clamp(16px,3vw,40px);
    background:rgba(0,0,0,0.82);
    z-index:1000;border-bottom:1px solid rgba(240,240,240,0.04);
    transform:translateY(-100%);transition:transform .6s var(--ease-expo);
}
.nav.visible{transform:translateY(0)}
.nav__back{display:flex;align-items:center;padding:8px;border:1px solid rgba(240,240,240,0.1);border-radius:8px;transition:border-color .3s}
.nav__back:hover{border-color:var(--white)}
.nav__center-logo{position:absolute;left:50%;transform:translateX(-50%)}
.nav__center-logo a{display:flex}
.nav__links-inner{display:flex;gap:32px}
.nav__link{font-size:.82rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-400);position:relative;padding:4px 0;transition:color .3s}
.nav__link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--white);transition:width .4s var(--ease-expo)}
.nav__link:hover,.nav__link.active{color:var(--white)}
.nav__link.active::after,.nav__link:hover::after{width:100%}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav__burger span{display:block;width:22px;height:1.5px;background:var(--white);transition:transform .3s,opacity .3s}
.nav__burger.open span:nth-child(1){transform:rotate(45deg) translate(4px,5px)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-5px)}

/* ═══════════ PAGES ═══════════ */
.spa-page{display:none;position:relative;z-index:2;min-height:100vh}
.spa-page.active{display:block;animation:pageIn .8s var(--ease-expo) both}
@keyframes pageIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════ HERO ═══════════ */
.hero{width:100%;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.hero__cubes{position:absolute;inset:0;perspective:800px;pointer-events:none}
.cube{position:absolute;transform-style:preserve-3d;animation:cubeFloat 14s cubic-bezier(.45,0,.55,1) infinite}
.cube--1{width:50px;height:50px;top:15%;left:8%;--s:25px}
.cube--2{width:35px;height:35px;top:65%;right:12%;animation-delay:-5s;--s:17px}
.cube--3{width:70px;height:70px;bottom:18%;left:55%;animation-delay:-9s;--s:35px}
.cube__face{position:absolute;width:100%;height:100%;border:1px solid rgba(240,240,240,0.06);background:rgba(240,240,240,0.015)}
.cube__face--front{transform:translateZ(var(--s))}.cube__face--back{transform:rotateY(180deg) translateZ(var(--s))}
.cube__face--right{transform:rotateY(90deg) translateZ(var(--s))}.cube__face--left{transform:rotateY(-90deg) translateZ(var(--s))}
.cube__face--top{transform:rotateX(90deg) translateZ(var(--s))}.cube__face--bottom{transform:rotateX(-90deg) translateZ(var(--s))}
@keyframes cubeFloat{0%,100%{transform:rotateX(0) rotateY(0) translateY(0)}25%{transform:rotateX(90deg) rotateY(45deg) translateY(-25px)}50%{transform:rotateX(180deg) rotateY(180deg) translateY(8px)}75%{transform:rotateX(270deg) rotateY(270deg) translateY(-18px)}}
.hero__code{position:relative;z-index:2;display:flex;align-items:center;transition:opacity .8s var(--ease-expo),transform 1s var(--ease-expo)}
.hero__code.fade-out{opacity:0;transform:scale(.92) rotateX(8deg)}
.hero__pre{font-family:var(--font-code);font-size:clamp(.9rem,2.8vw,1.5rem);color:var(--white);white-space:pre;line-height:1.8;letter-spacing:.02em}
.hero__cursor{display:inline-block;font-family:var(--font-code);font-size:clamp(.9rem,2.8vw,1.5rem);color:var(--white);animation:blink 1s step-end infinite;margin-left:-2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero__logo{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px;opacity:0;transform:perspective(600px) rotateY(-30deg) scale(.8);transition:opacity 1.2s var(--ease-expo),transform 1.2s var(--ease-expo);pointer-events:none}
.hero__logo.visible{opacity:1;transform:perspective(600px) rotateY(0) scale(1);pointer-events:auto}
.logo-svg{width:clamp(90px,18vw,160px);height:auto;filter:drop-shadow(0 0 30px rgba(240,240,240,0.08))}
.hero__studio-name{font-family:var(--font-heading);font-size:clamp(1.3rem,3.5vw,2.2rem);font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.hero__tagline{font-family:var(--font-body);font-size:clamp(.7rem,1.3vw,.95rem);color:var(--grey-400);letter-spacing:.15em;margin-bottom:20px}
.hero__nav{display:flex;gap:16px;opacity:0;transform:translateY(20px);transition:opacity .8s .4s var(--ease-expo),transform .8s .4s var(--ease-expo)}
.hero__logo.visible .hero__nav{opacity:1;transform:translateY(0)}
.hero__nav-link{display:flex;align-items:center;gap:8px;padding:12px 24px;border:1px solid rgba(240,240,240,0.12);border-radius:12px;font-size:.88rem;font-weight:500;letter-spacing:.04em;transition:all .4s var(--ease-expo)}
.hero__nav-link:hover{background:rgba(240,240,240,0.06);border-color:rgba(240,240,240,0.3);transform:translateY(-2px)}
.hero__nav-link svg{opacity:0;transform:translateX(-6px);transition:all .3s var(--ease-expo)}
.hero__nav-link:hover svg{opacity:1;transform:translateX(0)}
.hero__nav-link--continue{padding:14px 40px;border-color:rgba(240,240,240,0.25);font-size:.95rem;letter-spacing:.08em}
.hero__nav-link--continue:hover{background:rgba(240,240,240,0.1);border-color:rgba(240,240,240,0.5)}

/* ═══════════ INNER PAGES ═══════════ */
.page-content{padding-top:var(--nav-h);min-height:100vh}
.section__container{max-width:1200px;margin:0 auto;padding:80px clamp(16px,4vw,60px)}
.section__title{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.2rem);font-weight:600;letter-spacing:.04em;text-align:center;margin-bottom:16px}
.section__subtitle{text-align:center;color:var(--grey-400);font-size:1rem;margin-bottom:60px}
.reveal-up{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.reveal-up.revealed{opacity:1;transform:translateY(0)}

/* ═══════════ ABOUT — SCROLL SNAP ═══════════ */
.snap-container{height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth;position:relative;z-index:1}
.snap-page{min-height:100vh;min-height:100dvh;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 30px) clamp(16px,4vw,60px) 80px;position:relative}
.snap-page__inner{max-width:1200px;margin:0 auto;width:100%}
.snap-page__scroll-hint{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--grey-500);font-size:.72rem;letter-spacing:.1em;animation:hintPulse 2s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.4}50%{opacity:1}}
.snap-footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,4vw,60px);border-top:1px solid rgba(240,240,240,0.04)}
.snap-footer p{font-size:.74rem;color:var(--grey-500);font-family:var(--font-code)}
.snap-footer a{font-size:.74rem;color:var(--grey-500);transition:color .3s}
.snap-footer a:hover{color:var(--white)}

/* Cards */
.cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.skill-card,.team-card{background:rgba(26,26,26,0.85);border:1px solid rgba(240,240,240,0.06);border-radius:16px;padding:36px 26px;text-align:center;transition:transform .5s var(--ease-expo),border-color .4s,box-shadow .4s}
.skill-card:hover,.team-card:hover{transform:translateY(-6px);border-color:rgba(240,240,240,0.15);box-shadow:0 20px 50px rgba(0,0,0,0.5)}
.skill-card__icon{margin-bottom:20px}
.skill-card h3,.team-card h3{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;margin-bottom:12px}
.skill-card p,.team-card p{color:var(--grey-400);font-size:.88rem;line-height:1.7}
.team-card__avatar{width:72px;height:72px;border-radius:50%;border:2px solid rgba(240,240,240,0.12);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:var(--grey-800)}
.team-card__initial{font-family:var(--font-heading);font-size:1.8rem;font-weight:600}
.team-card h3{font-size:1.4rem}
.team-card__role{display:block;font-size:.75rem;color:var(--grey-500);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.process-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;position:relative}
.process-timeline::before{content:'';position:absolute;top:36px;left:15%;width:70%;height:1px;background:linear-gradient(90deg,transparent,var(--grey-700),transparent)}
.process-step{text-align:center}
.process-step__number{font-family:var(--font-code);font-size:2.8rem;font-weight:700;color:var(--grey-800);margin-bottom:16px;transition:color .4s}
.process-step:hover .process-step__number{color:var(--grey-500)}
.process-step h3{font-family:var(--font-heading);font-size:1.4rem;font-weight:600;margin-bottom:12px}
.process-step p{color:var(--grey-400);font-size:.88rem;line-height:1.7;max-width:300px;margin:0 auto}

/* ═══════════ PORTFOLIO ═══════════ */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.portfolio-card{background:rgba(17,17,17,0.9);border:1px solid rgba(240,240,240,0.06);border-radius:16px;overflow:hidden;transition:transform .5s var(--ease-expo),border-color .4s,box-shadow .5s}
.portfolio-card:hover{transform:translateY(-4px) scale(1.005);border-color:rgba(240,240,240,0.12);box-shadow:0 24px 60px rgba(0,0,0,0.5)}
.portfolio-card__header{padding:24px 24px 0}
.portfolio-card__header h3{font-family:var(--font-heading);font-size:1.3rem;font-weight:600;margin-bottom:8px}
.portfolio-card__short-desc{color:var(--grey-400);font-size:.85rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.portfolio-card__tags{padding:14px 24px;display:flex;flex-wrap:wrap;gap:6px}
.portfolio-card__tag{font-family:var(--font-code);font-size:.68rem;padding:3px 9px;border:1px solid var(--grey-700);border-radius:20px;color:var(--grey-400)}
.portfolio-card__footer{padding:14px 24px 20px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(240,240,240,0.04)}
.portfolio-card__client{font-size:.8rem;color:var(--grey-500)}
.portfolio-card__expand{font-size:.8rem;color:var(--grey-200);background:none;border:1px solid rgba(240,240,240,0.1);border-radius:8px;padding:6px 14px;transition:all .3s}
.portfolio-card__expand:hover{color:var(--white);border-color:rgba(240,240,240,0.3)}

/* ═══════════ PROJECT DETAIL MODAL ═══════════ */
.modal--project{max-width:640px}
.modal--project .modal__body{padding:40px 36px}
.proj-modal__title{font-family:var(--font-heading);font-size:1.6rem;font-weight:600;margin-bottom:12px}
.proj-modal__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.proj-modal__desc{font-size:.88rem;color:var(--grey-300);line-height:1.85;white-space:pre-line;margin-bottom:28px}
.proj-modal__photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.proj-modal__photo-wrap{display:flex;flex-direction:column;gap:6px}
.proj-modal__photo{width:100%;border-radius:12px;border:1px solid rgba(240,240,240,0.06);transition:transform .3s,border-color .3s}
.proj-modal__photo:hover{transform:scale(1.02);border-color:rgba(240,240,240,0.15)}
.proj-modal__photo-label{font-size:.72rem;color:var(--grey-600);text-align:center;letter-spacing:.05em}
.proj-modal__links{display:flex;gap:10px;flex-wrap:wrap}
.proj-modal__link{
    display:inline-flex;align-items:center;gap:6px;
    padding:10px 20px;border:1px solid rgba(240,240,240,0.12);border-radius:10px;
    font-size:.85rem;color:var(--grey-200);transition:all .3s;
}
.proj-modal__link:hover{border-color:rgba(240,240,240,0.3);color:var(--white);background:rgba(240,240,240,0.03)}
.proj-modal__link--secondary{border-color:rgba(240,240,240,0.06);color:var(--grey-400)}

/* ═══════════ FULLSCREEN IMAGE VIEWER ═══════════ */
.image-viewer{
    position:fixed;inset:0;z-index:100000;
    background:rgba(0,0,0,0.92);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .3s;
}
.image-viewer.visible{opacity:1;pointer-events:auto}
.image-viewer__close{
    position:absolute;top:20px;right:24px;
    font-size:2rem;color:var(--grey-400);background:none;border:none;
    transition:color .3s;z-index:1;
}
.image-viewer__close:hover{color:var(--white)}
.image-viewer__img{max-width:90vw;max-height:85vh;border-radius:8px;object-fit:contain}

@media(max-width:600px){
    .proj-modal__photos{grid-template-columns:1fr}
    .modal--project .modal__body{padding:28px 20px}
    .proj-modal__links{flex-direction:column}
    .proj-modal__link{justify-content:center}
}

/* ═══════════ PRICING ═══════════ */
.pricing-tabs{display:flex;justify-content:center;gap:4px;margin-bottom:44px;background:var(--grey-900);border-radius:12px;padding:4px;max-width:460px;margin-left:auto;margin-right:auto}
.pricing-tab{flex:1;padding:11px 20px;font-size:.85rem;font-weight:500;letter-spacing:.04em;border-radius:10px;color:var(--grey-400);transition:all .3s var(--ease-expo)}
.pricing-tab.active{background:var(--white);color:var(--black)}
.pricing-tab:hover:not(.active){color:var(--white)}
.pricing-panel{display:none}.pricing-panel.active{display:block;animation:panelIn .6s var(--ease-expo)}
@keyframes panelIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.pricing-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:36px}
.pricing-card{background:rgba(26,26,26,0.9);border:1px solid rgba(240,240,240,0.06);border-radius:16px;padding:28px 20px;position:relative;transition:transform .5s var(--ease-expo),border-color .4s,box-shadow .5s}
.pricing-card:hover{transform:translateY(-4px);border-color:rgba(240,240,240,0.15);box-shadow:0 16px 50px rgba(0,0,0,0.4)}
.pricing-card--accent{border-color:rgba(240,240,240,0.2);background:rgba(34,34,34,0.95)}
.pricing-card__badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-family:var(--font-code);font-size:.68rem;padding:3px 12px;background:var(--white);color:var(--black);border-radius:20px;font-weight:500}
.pricing-card__head{margin-bottom:20px}
.pricing-card__head h3{font-family:var(--font-heading);font-size:1.3rem;font-weight:600;margin-bottom:6px}
.pricing-card__price{font-family:var(--font-code);font-size:1.2rem;font-weight:700}
.pricing-card__price span{font-size:.82rem;font-weight:400;color:var(--grey-500)}
.pricing-card__old-price{font-family:var(--font-code);font-size:.85rem;color:var(--grey-500);text-decoration:line-through;opacity:.6;margin-bottom:4px}
.pricing-card__discount{display:inline-block;font-family:var(--font-code);font-size:.68rem;padding:2px 10px;background:rgba(80,220,80,0.15);color:#5d5;border:1px solid rgba(80,220,80,0.2);border-radius:12px;margin-left:8px;font-weight:600;text-decoration:none}
.pricing-card__features{margin-top:16px}
.pricing-card__features li{padding:7px 0;font-size:.83rem;color:var(--grey-400);border-bottom:1px solid rgba(240,240,240,0.03);line-height:1.5}
.pricing-card__features li:last-child{border-bottom:none}
.pricing-card__features li::before{content:'—';margin-right:8px;color:var(--grey-700)}
.maintenance-block{border:1px solid var(--grey-700);border-radius:16px;padding:28px;margin-top:16px;background:rgba(26,26,26,0.6)}
.maintenance-block__header{margin-bottom:20px}
.maintenance-block__header h4{font-family:var(--font-heading);font-size:1.2rem;font-weight:600;margin-bottom:6px}
.maintenance-block__header em{font-size:.82rem;color:var(--grey-500);font-style:italic}
.maintenance-block table{width:100%;border-collapse:collapse;margin-bottom:16px}
.maintenance-block th,.maintenance-block td{padding:10px 14px;text-align:left;font-size:.85rem;border-bottom:1px solid rgba(240,240,240,0.06)}
.maintenance-block th{font-family:var(--font-code);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey-500)}
.maintenance-block td:last-child,.maintenance-block th:last-child{font-family:var(--font-code);font-weight:500;text-align:right}
.maintenance-block__note{font-size:.8rem;color:var(--grey-500);line-height:1.7}

/* Footer */
.footer-mini{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:24px clamp(16px,4vw,60px);border-top:1px solid rgba(240,240,240,0.04);max-width:1200px;margin:0 auto}
.footer-mini p{font-size:.78rem;color:var(--grey-500)}
.footer-mini a{font-size:.78rem;color:var(--grey-500);transition:color .3s}
.footer-mini a:hover{color:var(--white)}

/* Cookie */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;padding:0 clamp(16px,4vw,60px) 20px;transform:translateY(100%);transition:transform .6s var(--ease-expo),visibility 0s .6s;visibility:hidden;pointer-events:none}
.cookie-banner.visible{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .6s var(--ease-expo),visibility 0s}
.cookie-banner__content{max-width:1200px;margin:0 auto;background:rgba(26,26,26,0.97);border:1px solid rgba(240,240,240,0.08);border-radius:14px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.cookie-banner__content p{font-size:.82rem;color:var(--grey-400)}
.cookie-banner__content p a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.cookie-banner__actions{display:flex;gap:8px;flex-shrink:0}
.cookie-banner__accept{padding:9px 22px;background:var(--white);color:var(--black);font-size:.82rem;font-weight:500;border-radius:9px;transition:opacity .3s}
.cookie-banner__accept:hover{opacity:.85}
.cookie-banner__decline{padding:9px 18px;border:1px solid var(--grey-700);border-radius:9px;font-size:.82rem;color:var(--grey-400);transition:border-color .3s,color .3s}
.cookie-banner__decline:hover{border-color:var(--white);color:var(--white)}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s var(--ease-expo);padding:20px}
.modal-overlay.visible{opacity:1;pointer-events:auto}
.modal{background:var(--dark);border:1px solid rgba(240,240,240,0.08);border-radius:18px;max-width:600px;width:100%;max-height:80vh;overflow:hidden;transform:scale(.92) translateY(24px);transition:transform .5s var(--ease-expo);position:relative}
.modal-overlay.visible .modal{transform:scale(1) translateY(0)}
.modal__close{position:absolute;top:14px;right:18px;font-size:1.7rem;color:var(--grey-400);z-index:2;transition:color .3s;line-height:1}
.modal__close:hover{color:var(--white)}
.modal__body{padding:36px 32px;overflow-y:auto;max-height:80vh}
.modal__body h2{font-family:var(--font-heading);font-size:1.6rem;font-weight:600;margin-bottom:6px}
.modal__date{font-size:.78rem;color:var(--grey-500);margin-bottom:24px}
.modal__body h3{font-family:var(--font-heading);font-size:1.1rem;font-weight:600;margin:20px 0 8px}
.modal__body p{font-size:.88rem;color:var(--grey-400);line-height:1.7}
.modal__body ul{margin:8px 0;padding-left:18px}
.modal__body ul li{list-style:disc;font-size:.88rem;color:var(--grey-400);line-height:1.8}
.modal__body a{color:var(--white);text-decoration:underline;text-underline-offset:3px}

/* ═══════════ ORDER BUTTON ON CARDS ═══════════ */
.pricing-card__order{
    display:block;width:100%;margin-top:18px;padding:11px 0;
    border:1px solid rgba(240,240,240,0.15);border-radius:10px;
    font-size:.85rem;font-weight:500;letter-spacing:.04em;
    color:var(--white);background:transparent;
    transition:all .3s var(--ease-expo);
}
.pricing-card__order:hover{background:rgba(240,240,240,0.08);border-color:rgba(240,240,240,0.35)}
.pricing-card--accent .pricing-card__order{background:var(--white);color:var(--black);border-color:var(--white)}
.pricing-card--accent .pricing-card__order:hover{opacity:.85}

/* ═══════════ ORDER WIZARD ═══════════ */
.modal--order{max-width:520px}
.modal--order .modal__body{padding:40px 36px}
.order-step__num{font-family:var(--font-code);font-size:.7rem;color:var(--grey-500);letter-spacing:.15em;margin-bottom:8px}
.order-step h2{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;margin-bottom:6px}
.order-step__hint{font-size:.85rem;color:var(--grey-400);margin-bottom:28px}
.order-options{display:flex;gap:12px}
.order-options--vertical{flex-direction:column}
.order-option{
    flex:1;padding:18px 16px;border:1px solid rgba(240,240,240,0.08);
    border-radius:12px;background:rgba(26,26,26,0.8);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    color:var(--white);transition:all .3s var(--ease-expo);text-align:center;
}
.order-option:hover{border-color:rgba(240,240,240,0.25);background:rgba(34,34,34,0.9)}
.order-option.selected{border-color:var(--white);background:rgba(240,240,240,0.06)}
.order-option__icon{color:var(--grey-400)}.order-option.selected .order-option__icon{color:var(--white)}
.order-option__label{font-size:.92rem;font-weight:500}
.order-option__price{font-family:var(--font-code);font-size:.78rem;color:var(--grey-400)}
.order-option__tag{font-family:var(--font-code);font-size:.62rem;padding:2px 8px;background:rgba(240,240,240,0.1);border-radius:8px;color:var(--grey-200)}
.order-option--wide{flex-direction:row;justify-content:space-between;align-items:center;padding:16px 20px;gap:12px}
.order-option--wide .order-option__label{text-align:left}
.order-back{margin-top:20px;font-size:.82rem;color:var(--grey-500);transition:color .3s;background:none;border:none;padding:6px 0}
.order-back:hover{color:var(--white)}

/* Maintenance info — minimalist */
.order-maint-info{border:1px solid rgba(240,240,240,0.06);border-radius:14px;padding:20px 22px;margin-bottom:24px;background:rgba(20,20,20,0.5)}
.order-maint-info__title{font-family:var(--font-code);font-size:.7rem;color:var(--grey-500);letter-spacing:.12em;margin-bottom:14px;text-transform:uppercase}
.order-maint-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.order-maint-item{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--grey-300);padding:9px 0;border-bottom:1px solid rgba(240,240,240,0.03)}
.order-maint-item:nth-last-child(-n+2){border-bottom:none}
.order-maint-item__dot{width:4px;height:4px;border-radius:50%;background:var(--grey-500);flex-shrink:0}
.order-option--recommended{border-color:rgba(80,220,80,0.25)!important;background:rgba(80,220,80,0.04)!important}
.order-option--recommended:hover{border-color:rgba(80,220,80,0.4)!important}
.order-option--recommended.selected{border-color:rgba(80,220,80,0.5)!important;background:rgba(80,220,80,0.08)!important}
.order-option__left{display:flex;flex-direction:column;gap:2px}
.order-option__sublabel{font-size:.72rem;color:var(--grey-500)}
.order-option--recommended .order-option__sublabel{color:rgba(80,220,80,0.7)}

/* Phone input with country selector */
.phone-input-wrap{display:flex;gap:0;border:1px solid rgba(240,240,240,0.08);border-radius:10px;overflow:hidden;transition:border-color .3s}
.phone-input-wrap:focus-within{border-color:rgba(240,240,240,0.3)}
.country-select{
    display:flex;align-items:center;gap:5px;padding:12px 10px 12px 14px;
    background:rgba(26,26,26,0.9);border:none;border-right:1px solid rgba(240,240,240,0.06);
    color:var(--white);font-size:.85rem;white-space:nowrap;flex-shrink:0;
}
.country-select:hover{background:rgba(34,34,34,1)}
.country-select__flag{font-size:1.1rem}
.country-select__code{font-family:var(--font-code);font-size:.82rem;color:var(--grey-200)}
.country-dropdown{
    background:rgba(17,17,17,0.98);border:1px solid rgba(240,240,240,0.1);
    border-radius:10px;max-height:0;overflow:hidden;
    transition:max-height .3s var(--ease-expo);
    margin-top:4px;
}
.country-dropdown.open{max-height:240px;overflow-y:auto}
.country-option{
    display:flex;align-items:center;gap:8px;padding:10px 14px;
    font-size:.85rem;color:var(--grey-300);transition:background .2s;
}
.country-option:hover{background:rgba(240,240,240,0.06);color:var(--white)}
.country-option__flag{font-size:1rem}
.country-option__name{flex:1}
.country-option__code{font-family:var(--font-code);font-size:.78rem;color:var(--grey-500)}
.phone-input-wrap input[type="tel"]{
    flex:1;padding:12px 14px;border:none;border-radius:0;
    background:transparent;color:var(--white);font-size:.9rem;
    font-family:var(--font-code);outline:none;min-width:0;
}
.phone-input-wrap input[type="tel"]::placeholder{color:var(--grey-700)}

/* Summary */
.order-summary{border:1px solid rgba(240,240,240,0.06);border-radius:12px;padding:16px 20px;margin-bottom:24px;background:rgba(26,26,26,0.5);font-size:.82rem;color:var(--grey-400);line-height:1.8}
.order-summary strong{color:var(--white);font-weight:500}

/* Form */
.order-form{display:flex;flex-direction:column;gap:14px}
.order-field{display:flex;flex-direction:column;gap:4px}
.order-field label{font-size:.78rem;color:var(--grey-500);letter-spacing:.06em}
.order-field input{
    padding:12px 16px;border:1px solid rgba(240,240,240,0.08);border-radius:10px;
    background:rgba(26,26,26,0.8);color:var(--white);font-size:.9rem;
    font-family:var(--font-body);outline:none;transition:border-color .3s;
}
.order-field input::placeholder{color:var(--grey-700)}
.order-field input:focus{border-color:rgba(240,240,240,0.3)}
.order-field__hint{font-size:.78rem;color:var(--grey-500);margin:4px 0 0}
.order-contact-method{display:flex;gap:8px;margin-bottom:4px}
.order-method{flex:1;padding:10px;border:1px solid rgba(240,240,240,0.08);border-radius:10px;font-size:.85rem;color:var(--grey-400);transition:all .3s}
.order-method:hover{border-color:rgba(240,240,240,0.2);color:var(--white)}
.order-method.active{border-color:var(--white);color:var(--white);background:rgba(240,240,240,0.06)}
.order-checkbox{display:flex;align-items:flex-start;gap:10px;font-size:.8rem;color:var(--grey-400);line-height:1.5;margin:6px 0}
.order-checkbox input{display:none}
.order-checkbox__mark{
    width:18px;height:18px;flex-shrink:0;border:1px solid rgba(240,240,240,0.15);
    border-radius:4px;display:flex;align-items:center;justify-content:center;
    transition:all .3s;margin-top:1px;
}
.order-checkbox input:checked~.order-checkbox__mark{background:var(--white);border-color:var(--white)}
.order-checkbox input:checked~.order-checkbox__mark::after{content:'✓';font-size:.7rem;color:var(--black);font-weight:700}
.order-checkbox a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.order-submit{
    padding:14px;border:none;border-radius:12px;
    background:var(--white);color:var(--black);
    font-size:.95rem;font-weight:600;letter-spacing:.04em;
    transition:all .3s var(--ease-expo);margin-top:4px;
}
.order-submit:hover:not(:disabled){opacity:.85;transform:translateY(-1px)}
.order-submit:disabled{opacity:.35;cursor:none}
.order-error{font-size:.8rem;color:#e55;text-align:center;min-height:20px}
.order-success{font-size:.9rem;color:#5d5;text-align:center;padding:16px;border:1px solid rgba(80,220,80,0.2);border-radius:12px;background:rgba(80,220,80,0.05)}

/* Noise overlay */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px}

/* ═══════════ HAPTIC VISUAL ═══════════ */
@keyframes vibrate{
    0%{transform:translate(0,0) scale(1)}
    15%{transform:translate(-2px,0) scale(0.97)}
    30%{transform:translate(2px,0) scale(0.97)}
    45%{transform:translate(-1px,0) scale(0.99)}
    60%{transform:translate(1px,0) scale(1.01)}
    75%{transform:translate(-1px,0) scale(1)}
    100%{transform:translate(0,0) scale(1)}
}
.haptic{animation:vibrate .25s ease-out}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1024px){.pricing-cards{grid-template-columns:repeat(2,1fr)}}

@media(max-width:768px){
    .nav__links-inner{position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(0,0,0,0.97);flex-direction:column;align-items:center;padding:32px 16px;gap:24px;transform:translateY(-120%);transition:transform .5s var(--ease-expo);border-bottom:1px solid rgba(240,240,240,0.06)}
    .nav__links-inner.open{transform:translateY(0)}
    .nav__burger{display:flex}
    .hero__nav{flex-direction:column;width:80%;max-width:300px}
    .hero__nav-link{justify-content:center}
    .cookie-banner__content{flex-direction:column;text-align:center}
    .footer-mini{flex-direction:column;text-align:center;gap:8px}

    /* ══ SNAP ОСТАЁТСЯ, контент влезает ══ */
    .snap-page{padding:calc(var(--nav-h) + 10px) 14px 36px}
    .snap-page__scroll-hint{bottom:38px;font-size:.6rem}
    .snap-footer{flex-direction:column;gap:4px;text-align:center}
    .snap-footer p,.snap-footer a{font-size:.65rem}

    /* Грид → 1 колонка, минимум gap */
    .cards-row{grid-template-columns:1fr;gap:8px;margin-top:14px}
    .process-timeline{grid-template-columns:1fr;gap:8px;margin-top:14px}
    .process-timeline::before{display:none}
    .pricing-cards,.portfolio-grid{grid-template-columns:1fr}

    /* Заголовки */
    .section__title{font-size:1.3rem;margin-bottom:8px}
    .section__subtitle{font-size:.78rem;margin-bottom:14px}

    /* ══ Skill карточки — горизонтальные чтобы влезали ══ */
    .skill-card{padding:10px 12px;display:flex;flex-direction:row;align-items:center;gap:12px;text-align:left;border-radius:12px}
    .skill-card__icon{margin-bottom:0;flex-shrink:0}
    .skill-card__icon svg{width:30px;height:30px}
    .skill-card h3{font-size:.9rem;margin-bottom:2px}
    .skill-card p{font-size:.72rem;line-height:1.4}

    /* ══ Team карточки — горизонтальные ══ */
    .team-card{padding:10px 12px;display:flex;flex-direction:row;align-items:center;gap:12px;text-align:left;border-radius:12px}
    .team-card__avatar{width:40px;height:40px;margin:0;flex-shrink:0}
    .team-card__initial{font-size:1rem}
    .team-card h3{font-size:.88rem;margin-bottom:1px}
    .team-card__role{font-size:.58rem;margin-bottom:3px}
    .team-card p{font-size:.7rem;line-height:1.35}

    /* ══ Process — inline compact ══ */
    .process-step{text-align:left;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:rgba(26,26,26,0.85);border:1px solid rgba(240,240,240,0.06);border-radius:12px}
    .process-step__number{font-size:1.3rem;margin-bottom:0;line-height:1;flex-shrink:0;min-width:26px}
    .process-step h3{font-size:.88rem;margin-bottom:2px}
    .process-step p{font-size:.72rem;line-height:1.35;max-width:none}

    /* ══ Прайс компактнее ══ */
    .pricing-card{padding:14px 12px;border-radius:12px}
    .pricing-card__head{margin-bottom:10px}
    .pricing-card__head h3{font-size:1rem;margin-bottom:2px}
    .pricing-card__price{font-size:.88rem}
    .pricing-card__old-price{font-size:.72rem}
    .pricing-card__discount{font-size:.58rem;padding:2px 6px}
    .pricing-card__features{margin-top:8px}
    .pricing-card__features li{padding:3px 0;font-size:.73rem}
    .pricing-card__order{padding:8px 12px;font-size:.75rem}
    .pricing-card__badge{font-size:.58rem;padding:2px 8px}
    .pricing-tabs{margin-bottom:20px}
    .pricing-tab{padding:8px 10px;font-size:.73rem}
    .maintenance-block{padding:14px 12px}
    .maintenance-block__header h4{font-size:.9rem}
    .maintenance-block th,.maintenance-block td{padding:6px 8px;font-size:.72rem}
    .portfolio-card{padding:16px 14px}
}

/* ══ iPhone 16 Pro Max / 17 Pro Max ══ */
@media(max-width:440px){
    .snap-page{padding:calc(var(--nav-h) + 8px) 12px 32px}
    .section__title{font-size:1.2rem}
    .cards-row,.process-timeline{gap:7px;margin-top:12px}
}

/* ══ iPhone 16 Pro (402pt) ══ */
@media(max-width:410px){
    .hero__pre,.hero__cursor{font-size:.72rem}
    .snap-page{padding:calc(var(--nav-h) + 6px) 12px 30px}
    .section__title{font-size:1.15rem;margin-bottom:6px}
    .cards-row,.process-timeline{gap:6px;margin-top:10px}
    .skill-card,.team-card{padding:8px 10px;gap:10px}
    .skill-card__icon svg{width:26px;height:26px}
    .skill-card h3,.team-card h3{font-size:.84rem}
    .skill-card p,.team-card p{font-size:.68rem;line-height:1.3}
    .team-card__avatar{width:36px;height:36px}
    .team-card__initial{font-size:.9rem}
    .team-card__role{font-size:.55rem}
    .process-step{padding:8px 10px;gap:8px}
    .process-step__number{font-size:1.15rem;min-width:22px}
    .process-step h3{font-size:.84rem}
    .process-step p{font-size:.68rem;line-height:1.3}
    .snap-page__scroll-hint{bottom:32px;font-size:.55rem}
    .snap-footer p,.snap-footer a{font-size:.6rem}
    /* Прайс */
    .pricing-tab{padding:7px 7px;font-size:.68rem}
    .pricing-card{padding:12px 10px}
    .pricing-card__head h3{font-size:.9rem}
    .pricing-card__price{font-size:.84rem}
    .pricing-card__features li{font-size:.7rem;padding:2px 0}
    .pricing-card__order{padding:7px 10px;font-size:.72rem}
    .order-options:not(.order-options--vertical){flex-direction:column}
    .modal--order .modal__body{padding:20px 14px}
    .order-maint-grid{grid-template-columns:1fr}
    .contact-panel{right:-10px;min-width:200px}
}

/* ══ iPhone 16 (393pt) ══ */
@media(max-width:395px){
    .snap-page{padding:calc(var(--nav-h) + 4px) 10px 28px}
    .section__title{font-size:1.1rem}
    .cards-row,.process-timeline{gap:5px;margin-top:8px}
    .skill-card,.team-card{padding:7px 8px;gap:8px;border-radius:10px}
    .skill-card__icon svg{width:24px;height:24px}
    .skill-card h3,.team-card h3{font-size:.8rem}
    .skill-card p,.team-card p{font-size:.65rem}
    .team-card__avatar{width:32px;height:32px}
    .team-card__initial{font-size:.82rem}
    .process-step{padding:7px 8px;gap:7px;border-radius:10px}
    .process-step__number{font-size:1.05rem;min-width:20px}
    .process-step h3{font-size:.8rem}
    .process-step p{font-size:.65rem}
    .snap-page__scroll-hint{bottom:26px}
}

/* ══ iPhone SE / 13 mini (375pt) ══ */
@media(max-width:380px){
    .snap-page{padding:calc(var(--nav-h) + 2px) 8px 24px}
    .section__title{font-size:1rem;margin-bottom:5px}
    .cards-row,.process-timeline{gap:4px;margin-top:6px}
    .skill-card,.team-card{padding:6px 7px;gap:7px}
    .skill-card__icon svg{width:22px;height:22px}
    .skill-card h3,.team-card h3{font-size:.76rem}
    .skill-card p,.team-card p{font-size:.62rem;line-height:1.25}
    .team-card__avatar{width:28px;height:28px}
    .process-step{padding:6px 7px;gap:6px}
    .process-step__number{font-size:.95rem}
    .process-step h3{font-size:.76rem}
    .process-step p{font-size:.62rem}
}