/* ======== CHROME NOIR — Automotive Cinema v4 ======== */
:root{
  --void:#050507; --pane:#0c0c11; --edge:#1d1d26;
  --white:#f4f4f8; --grey:#9a9aa8; --grey2:#5b5b68; --dim:#5b5b68;
  --chrome-a:#e8e9f2; --chrome-b:#8f93b0; --chrome-c:#f8f9ff;
  --au1:#6d5df0; --au2:#2ad4ff; --au3:#ff3d81;
  --acc:#8f7bff;
  --disp:'Unbounded',sans-serif; --body:'Manrope',sans-serif; --mono:'JetBrains Mono',monospace;
  /* motion tokens — one rhythm for the whole site */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
  --fx-dur:1.05s;
  --slide-x:clamp(80px,16vw,220px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--void);color:var(--white);font-family:var(--body);overflow-x:hidden}
body.offscript{--acc:#ff3d5a;--au1:#ff3d5a;--au2:#ff8f6b}
::selection{background:var(--acc);color:#fff}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit;touch-action:manipulation}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---- chrome text: plain white (animated clip-text is banned — it flickers) ---- */
.chrome{color:var(--white)}

/* ---- film grain ---- */
.noise{position:fixed;inset:-120px;z-index:2;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
@media(hover:none){.noise{display:none}}

/* ---- cursor ---- */
.cur{position:fixed;top:0;left:0;z-index:999;pointer-events:none;mix-blend-mode:difference}
.cur b{display:block;width:10px;height:10px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);transition:width .25s,height .25s}
.cur.hov b{width:52px;height:52px}
@media(hover:none){.cur{display:none}}

/* ---- loader gate ---- */
#gate{position:fixed;inset:0;z-index:1000;background:var(--void);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;clip-path:inset(0 0 0 0);transition:clip-path 1s var(--ease-io),visibility 1s}
#gate.open{clip-path:inset(0 0 100% 0);visibility:hidden}
#gate .pct{font-family:var(--disp);font-weight:900;font-size:clamp(56px,12vw,150px);line-height:1}
#gate .mono{color:var(--grey)}

/* ---- global orbit background: scroll = timeline ---- */
#bgOrbit{position:fixed;inset:0;z-index:0;overflow:hidden}
#bgOrbit video{width:100%;height:100%;object-fit:cover;filter:brightness(.85);will-change:contents;transform:translateZ(0)}
#bgOrbit .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,7,.84) 0%,rgba(5,5,7,.62) 26%,rgba(5,5,7,.62) 74%,rgba(5,5,7,.88) 100%),
  radial-gradient(ellipse 120% 90% at 50% 50%,rgba(5,5,7,.1) 25%,rgba(5,5,7,.68) 100%)}
#bgOrbit .meter{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(340px,56vw);height:2px;background:#1b1b22;border-radius:2px;z-index:3}
#bgOrbit .meter i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--au1),var(--au2));transform-origin:left;transform:scaleX(0)}
@media(hover:none){#bgOrbit video{filter:brightness(.7)}}

/* ---- floating glass nav (hides on scroll down, returns on scroll up) ---- */
.pill{position:fixed;top:18px;left:50%;z-index:90;display:flex;align-items:center;gap:4px;
  background:rgba(14,14,20,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:7px;
  transform:translate(-50%,0) translateZ(0);backface-visibility:hidden;
  transition:transform .55s var(--ease)}
.pill.hide{transform:translate(-50%,-180%) translateZ(0)}
.pill a{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;border-radius:999px;color:var(--grey);transition:color .3s,background .3s}
.pill a:hover,.pill a:focus-visible{color:var(--white)}
.pill a.cta{background:var(--acc);color:#fff;font-weight:700}
.pill a.cta:hover{filter:brightness(1.15)}
.pill .logo{font-family:var(--disp);font-weight:900;font-size:12px;color:var(--white);padding:10px 14px;letter-spacing:.06em}
@media(max-width:760px){.pill a:not(.cta):not(.logo){display:none}.pill .logo{display:block}}

/* ---- layers: content rasters on its own GPU layers so the bg video
   can't force text repaints (flicker kill, proven in v3) ---- */
section,footer,.cmq{position:relative;z-index:2;transform:translateZ(0);backface-visibility:hidden}
#fab{position:fixed;z-index:95}

section{padding:0 clamp(18px,5vw,72px)}
.stitle{display:flex;align-items:center;gap:16px;padding-top:clamp(80px,13vh,150px);margin-bottom:clamp(30px,5vh,60px)}
.stitle .idx{font-family:var(--mono);font-size:11px;color:var(--acc)}
.stitle h2{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4.6vw,64px);letter-spacing:-.01em;text-transform:uppercase;line-height:1.05;text-shadow:0 4px 34px rgba(0,0,0,.85),0 1px 8px rgba(0,0,0,.6)}
.stitle .ln{flex:1;height:1px;background:var(--edge)}

/* ================= ENTRANCE CHOREOGRAPHY =================
   Elements slide in from beyond the edge and settle softly.
   transform+opacity only · will-change released after arrival (js). */
.fx{opacity:0;transition:opacity var(--fx-dur) var(--ease),transform var(--fx-dur) var(--ease);will-change:opacity,transform}
.fx[data-fx="up"]{transform:translate3d(0,46px,0)}
.fx[data-fx="fade"]{transform:translate3d(0,0,0)}
.fx[data-fx="left"]{transform:translate3d(calc(var(--slide-x) * -1),0,0)}
.fx[data-fx="right"]{transform:translate3d(var(--slide-x),0,0)}
.fx[data-fx="grow"]{transform:scaleX(0);transform-origin:left}
.fx.in{opacity:1;transform:translate3d(0,0,0)}

/* ================= HERO ================= */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:90px;padding-bottom:40px;overflow:hidden}
.hero .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--grey);margin-bottom:26px}
.hero .kicker em{color:var(--acc);font-style:normal}
.h-line1{font-family:var(--disp);font-weight:900;font-size:clamp(34px,7.2vw,104px);letter-spacing:.02em;text-transform:uppercase;line-height:1;text-shadow:0 6px 44px rgba(0,0,0,.85)}
.videotext{position:relative;width:min(94vw,1400px);margin-top:clamp(4px,1vh,14px)}
.videotext svg{display:block;width:100%;height:auto}
.videotext svg text{font-family:var(--disp);font-weight:900;letter-spacing:.01em}
.videotext .hint{position:absolute;right:4px;bottom:-22px;font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey2)}
/* 3D tilt + glitch live on the inner svg so they never fight the entrance transform */
.videotext svg{transition:transform .4s var(--ease);transform-style:preserve-3d}
.videotext.glitch svg{animation:vtGlitch .38s steps(2)}
@keyframes vtGlitch{
  0%{transform:translate(0,0)}
  25%{transform:translate(-6px,2px) skewX(-1.5deg)}
  50%{transform:translate(5px,-2px)}
  75%{transform:translate(-3px,1px) skewX(1deg)}
  100%{transform:none}
}
.hero-sub{margin-top:30px;max-width:520px;font-size:15px;line-height:1.7;color:#b9b9c6;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn-neo{position:relative;display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:17px 32px;border-radius:999px;background:var(--acc);color:#fff;border:none;transition:transform .25s,box-shadow .3s;box-shadow:0 0 0 0 rgba(143,123,255,.4)}
.btn-neo:hover,.btn-neo:focus-visible{transform:translateY(-2px);box-shadow:0 14px 44px rgba(143,123,255,.45)}
.btn-line{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:16px 26px;border-radius:999px;border:1px solid var(--edge);color:var(--grey);transition:border-color .3s,color .3s}
.btn-line:hover,.btn-line:focus-visible{border-color:var(--acc);color:var(--white)}
.hero-chips{margin-top:46px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chipstat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#b9b9c6;border:1px solid #2a2a36;border-radius:999px;padding:9px 16px;background:rgba(9,9,13,.62)}
.chipstat b{color:var(--white);font-weight:500}
.hero-scrolldown{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--grey2);text-transform:uppercase}

/* ================= CHROME MARQUEE ================= */
.cmq{padding:44px 0;border-top:1px solid #262633;border-bottom:1px solid #262633;overflow:hidden;contain:paint;background:rgba(5,5,7,.5)}
.cmq .track{display:flex;gap:64px;width:max-content;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.cmq .track span{transform:translateZ(0);backface-visibility:hidden}
.cmq span{font-family:var(--disp);font-weight:900;font-size:clamp(22px,3.6vw,46px);text-transform:uppercase;white-space:nowrap}
.cmq span.f{color:var(--white)}
.cmq span.o{color:transparent;-webkit-text-stroke:1px var(--grey2)}

/* ================= SERVICES: aurora-border cards ================= */
.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;padding-bottom:40px}
.svcard{position:relative;border-radius:20px;padding:1px;background:#262633;box-shadow:0 16px 44px rgba(0,0,0,.5)}
.svcard::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;
  background:conic-gradient(from var(--ang,0deg),transparent 0%,var(--au1) 12%,var(--au2) 24%,transparent 38%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s}
.svcard:hover::before{opacity:1;animation:spin 2.6s linear infinite}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin{to{--ang:360deg}}
/* hover lift lives on the inner panel — the card itself belongs to the fx system */
.svcard .in{position:relative;border-radius:19px;background:var(--pane);padding:26px 24px 22px;overflow:hidden;min-height:220px;display:flex;flex-direction:column;z-index:1;transition:transform .4s var(--ease)}
.svcard:hover .in{transform:translateY(-6px)}
.svcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s;z-index:0}
.svcard:hover video{opacity:.3}
/* photo slideshow inside a service card (Photography) */
.svc-slides{position:absolute;inset:0;z-index:0}
.svc-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.svcard:hover .svc-slides img.on{opacity:.32}
.svcard .num{font-family:var(--mono);font-size:10px;color:var(--acc);letter-spacing:.2em}
.svcard h3{position:relative;font-family:var(--disp);font-weight:800;font-size:clamp(17px,1.8vw,23px);text-transform:uppercase;margin-top:12px;line-height:1.2;z-index:1}
.svcard p{position:relative;margin-top:10px;font-size:13px;line-height:1.65;color:var(--grey);z-index:1;flex:1}
.svcard .go{position:relative;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);z-index:1}
/* на тач превью живут сразу: видео автоплеятся по видимости, слайды крутятся сами */
@media(hover:none){
  .svcard video{opacity:.45}
  .svc-slides img.on{opacity:.45}
  .svcard h3,.svcard p{text-shadow:0 2px 12px rgba(0,0,0,.85)}
  .svcard p{color:#c6c6d2}
  .videotext .hint{display:none}
}

/* ================= WORK: endless mixed lanes ================= */
.rows{overflow:hidden;padding-bottom:6px}
.prow{display:flex;gap:14px;width:max-content;padding:7px 0;will-change:transform;cursor:grab;
  transition:opacity .9s var(--ease)}
.prow.lane-prep{opacity:0} /* прячет только JS — без JS ленты видны */
.prow.lane-in{opacity:1}
.prow:active{cursor:grabbing}
.prow .ph{position:relative;flex:0 0 auto;height:clamp(280px,36vh,410px);overflow:hidden;border-radius:14px;background:var(--pane)}
.prow .ph.p4{aspect-ratio:4/5}
.prow .ph.v9{aspect-ratio:9/16}
.prow .ph img,.prow .ph video{width:100%;height:100%;object-fit:cover}
.prow .ph img{transition:transform .7s var(--ease),filter .5s;filter:saturate(.9)}
.prow .ph:hover img{transform:scale(1.06);filter:saturate(1.1)}
.prow .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s}
.prow .ph:hover::after{transform:translateX(120%)}
.prow .ph b{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8);z-index:2}
@media(max-width:700px){.prow .ph{height:52vw}}

/* ================= BENTO stats ================= */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:70px}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}}
.bcell{border:1px solid #262633;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(10,10,15,.85) 55%),rgba(10,10,15,.85);padding:26px 22px;position:relative;overflow:hidden;box-shadow:0 14px 38px rgba(0,0,0,.45)}
.bcell b{font-family:var(--disp);font-weight:900;font-size:clamp(28px,4vw,52px);font-variant-numeric:tabular-nums}
.bcell span{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}

/* ================= SHOP ================= */
.shopgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:20px}
@media(max-width:800px){.shopgrid{grid-template-columns:1fr}}
.prod{display:block;border:1px solid #262633;border-radius:18px;overflow:hidden;background:var(--pane);box-shadow:0 16px 44px rgba(0,0,0,.5);transition:border-color .3s,box-shadow .4s}
.prod:hover{border-color:var(--acc);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.prod .im{aspect-ratio:16/9;overflow:hidden}
.prod img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.prod:hover img{transform:scale(1.05)}
.prod .pb{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:18px 20px}
.prod .pb b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.prod .pb span{font-family:var(--mono);color:var(--acc);white-space:nowrap}
.shopfoot{padding-bottom:70px;font-size:12.5px;color:var(--grey)}
.shopfoot a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}

/* ================= BOOKING (ported configurator — FROZEN logic) ================= */
.booking{padding-bottom:120px}
.book-intro{max-width:520px;margin-bottom:38px;font-size:15px;line-height:1.7;color:#b9b9c6;text-shadow:0 2px 14px rgba(0,0,0,.75)}
fieldset{border:none;margin-bottom:30px}
legend{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-bottom:16px}
.leg-xl{font-size:13px}
.svc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:10px}
@media(max-width:560px){.svc-cards{grid-template-columns:1fr 1fr}}
.scard{position:relative;text-align:left;border:1px solid #262633;border-radius:16px;background:var(--pane);box-shadow:0 10px 30px rgba(0,0,0,.4);padding:26px 18px 20px;overflow:hidden;transition:padding .5s var(--ease),border-color .3s,background .3s,transform .3s}
.scard b{display:block;font-weight:800;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;padding-right:84px;transition:font-size .5s}
.scard small{display:block;margin-top:9px;color:var(--grey);font-size:11.5px;line-height:1.55;max-height:70px;overflow:hidden;transition:max-height .5s,opacity .35s,margin-top .5s}
.scard .tap{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--acc)}
.scard .tap::after{content:'SELECT';animation:tapP 2.2s infinite}
.scard.on .tap::after{content:'✓ LOCKED';animation:none}
@keyframes tapP{0%,100%{opacity:.4}50%{opacity:1}}
.scard:hover{border-color:var(--acc);transform:translateY(-3px)}
.scard.on{border-color:var(--acc);background:rgba(143,123,255,.08)}
.svc-cards.compact .scard{padding:13px 15px 11px}
.svc-cards.compact .scard b{font-size:11px}
.svc-cards.compact .scard small{max-height:0;opacity:0;margin-top:0}
.scard.wild{border-color:rgba(255,61,90,.5)}
.scard.wild .tap{color:#ff3d5a}
.scard.wild .tap::after{content:'★ PITCH IT'}
.scard.wild.on .tap::after{content:'★ IN'}
.scard.wild.on{border-color:#ff3d5a;background:rgba(255,61,90,.09)}
.step{display:none}
.step.show{display:block;animation:stepIn .7s var(--ease)}
/* ---- фокус на заполнении после выбора сервиса ----
   выбранное остаётся ярким, остальные карточки приглушаются,
   раскрывшиеся шаги становятся выделенными панелями */
#bookForm.focused #svcChips .scard:not(.on){opacity:.42;filter:saturate(.5)}
#bookForm.focused #svcChips .scard:not(.on):hover{opacity:.85;filter:none}
#bookForm.focused .step.show{background:rgba(13,13,19,.74);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);border-radius:20px;padding:24px 22px 18px;margin-bottom:26px;box-shadow:0 18px 54px rgba(0,0,0,.5)}
#bookForm.focused .step.show legend{color:var(--white)}
#bookForm.focused .step.show legend::after{content:'';display:inline-block;width:26px;height:1px;background:var(--acc);margin-left:12px;vertical-align:middle}
@keyframes stepIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.optgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:9px}
.optgrid.pkgs{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.optgrid.pkgs{grid-template-columns:1fr}}
.opt{text-align:left;border:1px solid var(--edge);border-radius:14px;background:var(--pane);padding:14px 14px 12px;transition:border-color .3s,background .3s,opacity .3s,transform .3s}
.opt b{display:block;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.opt small{display:block;margin-top:7px;color:var(--grey);font-size:11px;line-height:1.55;max-height:90px;overflow:hidden;transition:max-height .5s,opacity .35s,margin-top .5s}
.opt .note{display:none;margin-top:8px;font-size:10px;line-height:1.5;color:var(--acc)}
.opt.on{border-color:var(--acc);background:rgba(143,123,255,.08)}
.opt.dis{opacity:.22;filter:grayscale(.8)}
.opt.dis .note{display:block}
#pkgGrid .opt:hover:not(.dis){border-color:var(--acc);transform:translateY(-3px)}
#pkgGrid.compact .opt:not(.on) small{max-height:0;opacity:0;margin-top:0}
.step.show .opt{animation:stepIn .6s var(--ease) both}
.step.show .opt:nth-child(2){animation-delay:.08s}
.step.show .opt:nth-child(3){animation-delay:.16s}
.step.show .opt:nth-child(4){animation-delay:.24s}
.frameExtra{display:none;margin-top:12px}
.frameExtra.show{display:block;animation:stepIn .5s var(--ease)}
.rentTog{display:flex;align-items:center;gap:12px;margin-top:12px;width:100%;text-align:left;border:1px solid var(--edge);border-radius:14px;background:var(--pane);padding:13px 16px;font-size:12.5px;transition:border-color .3s,background .3s}
.rentTog i{flex:0 0 34px;height:18px;border:1px solid var(--grey2);border-radius:10px;position:relative;transition:border-color .3s}
.rentTog i::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--grey);transition:left .3s,background .3s}
.rentTog.on{border-color:var(--acc);background:rgba(143,123,255,.07)}
.rentTog.on i::after{left:18px;background:var(--acc)}
.rentTog em{font-style:normal;color:var(--grey)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.fld label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--pane);border:1px solid var(--edge);border-radius:12px;color:var(--white);font-family:var(--body);font-size:14px;padding:14px;outline:none;transition:border-color .3s;-webkit-appearance:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--acc)}
.fld textarea{min-height:110px;resize:vertical}
.fld select option{background:var(--pane);color:var(--white)}
.req{color:var(--acc)}
.sur-wrap{display:none;margin-top:16px;padding:16px;border:1px dashed var(--edge);border-radius:14px}
.sur-wrap.show{display:block;animation:stepIn .5s var(--ease)}
.sur-wrap .sur-q{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.socInputs{margin-top:12px}
.socRow{margin-top:10px;display:none}
.socRow.show{display:block}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.fmt-q{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin:18px 0 10px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:transparent;border:1px solid var(--edge);border-radius:999px;padding:11px 18px;transition:all .3s;color:var(--grey)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.mainFld{margin-top:26px;padding:18px;border:1px solid rgba(143,123,255,.5);border-radius:16px;background:rgba(143,123,255,.05)}
.mainFld label{font-size:11px;letter-spacing:.18em;color:var(--acc)}
.mainFld textarea{min-height:140px;font-size:15px}
.send-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.btn-send{margin-top:0}
.btn-send[disabled]{opacity:.55;cursor:default;transform:none!important;box-shadow:none}
.btn-alt{padding:15px 22px}
.form-note{margin-top:14px;font-size:11.5px;color:var(--grey)}
.fld-err{display:none;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#e04b3a}
.fld-err.show{display:block}
.form-success{margin-top:26px;padding:26px 24px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:18px;background:rgba(143,123,255,.07)}
.form-success b{display:block;font-family:var(--disp);font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.form-success p{font-size:14px;line-height:1.7;color:var(--grey)}
.form-success a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.fld-note{margin-top:7px;font-size:10.5px;line-height:1.5;color:var(--acc)}

/* ================= FOOTER ================= */
footer{padding:90px clamp(18px,5vw,72px) 40px;border-top:1px solid var(--edge);overflow:hidden}
.bigwrap{font-family:var(--disp);font-weight:900;font-size:clamp(44px,10vw,150px);text-transform:uppercase;line-height:.95;margin-bottom:40px;text-shadow:0 6px 44px rgba(0,0,0,.85)}
.f-cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:26px;align-items:flex-end}
.f-cols a.mono{display:block;margin-bottom:12px;color:var(--grey)}
.f-cols a.mono:hover{color:var(--white)}
.f-clock{font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums}
.f-clock span{display:block;font-size:10px;letter-spacing:.22em;color:var(--grey);margin-top:6px;text-transform:uppercase}
.f-base{margin-top:44px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey2)}

/* ---- fab ---- */
#fab{right:20px;bottom:calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#fab .links{display:flex;flex-direction:column;align-items:flex-end;gap:8px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.35s var(--ease)}
#fab.open .links{opacity:1;transform:none;pointer-events:auto}
#fab .links a{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:rgba(14,14,20,.7);backdrop-filter:blur(12px);border:1px solid var(--edge);border-radius:999px;padding:11px 18px;transition:border-color .3s,color .3s}
#fab .links a:hover{border-color:var(--acc)}
#fab .fbtn{width:54px;height:54px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--au1),var(--au2));color:#fff;font-size:20px;box-shadow:0 14px 36px rgba(109,93,240,.4);transition:transform .3s}
#fab .fbtn:hover{transform:scale(1.08)}

/* ---- a11y ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* prefers-reduced-motion intentionally NOT honored site-wide:
   это кинематографический шоурил, движение = продукт. У многих Windows-машин
   «показывать анимацию» выключено ради производительности — сайт при этом
   выглядел мёртвым (в т.ч. у клиента). */

/* ===== mobile pass ===== */
@media(max-width:700px){
  .hero{padding-top:110px}
  .hero-chips{gap:8px}
  .stitle{flex-wrap:wrap}
  .stitle .ln{display:none}
  .bento{gap:10px}
  .bigwrap{font-size:clamp(38px,14vw,72px)}
}

/* ================= FAQ ================= */
.faqgrid{display:grid;gap:10px;padding-bottom:70px;max-width:900px}
.faq{border:1px solid var(--edge);border-radius:16px;background:var(--pane);overflow:hidden;transition:border-color .4s var(--ease)}
.faq:hover{border-color:#2e2e3d}
.faq[open]{border-color:#33334a}
.faq summary{list-style:none;cursor:pointer;padding:20px 54px 20px 22px;position:relative;user-select:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--body);font-size:15.5px;font-weight:600;line-height:1.45;color:var(--white);margin:0;letter-spacing:-.01em}
.faq summary::after{content:'';position:absolute;right:24px;top:50%;width:11px;height:11px;margin-top:-6px;border-right:1.6px solid var(--grey);border-bottom:1.6px solid var(--grey);transform:rotate(45deg);transition:transform .35s var(--ease),border-color .35s}
.faq[open] summary::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--acc)}
.faq summary:hover h3{color:#fff}
.faq p{padding:0 22px 22px;margin:0;font-size:14.5px;line-height:1.75;color:#a8a8b8;max-width:66ch}
@media(max-width:640px){
.faq summary{padding:17px 46px 17px 17px}
.faq summary h3{font-size:14.5px}
.faq p{padding:0 17px 18px;font-size:14px}
}