/* ============================================================
   rixxityfi OÜ — Design System
   Aesthetic: "Amber Signal" — violet-black ground, molten amber primary,
   electric violet secondary, warm rose accent, bone-white type.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  --bg:            #0A0910;
  --bg-2:          #100E18;
  --bg-3:          #161320;
  --ink:           #F4F0EA;
  --ink-dim:       #A8A2B4;
  --ink-faint:     #7C7690;

  --gold:          #FFB13D;
  --gold-deep:     #E89A22;
  --violet:          #8B6BFF;
  --rose:         #FF6A8A;

  --line:          rgba(255,255,255,.09);
  --line-soft:     rgba(255,255,255,.055);
  --line-strong:   rgba(255,255,255,.16);
  --surface:       rgba(255,255,255,.028);
  --surface-2:     rgba(255,255,255,.05);

  --ff-display: 'Syne', 'Trebuchet MS', sans-serif;
  --ff-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --pad-x: clamp(20px, 5vw, 56px);
  --sec-y: clamp(76px, 10vw, 148px);
  --maxw: 1260px;

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);

  /* the header sits ABOVE the drawer so its close button stays reachable */
  --z-bg: 0; --z-body: 10; --z-drawer: 70; --z-head: 80; --z-overlay: 90; --z-top: 100;
}

/* ---------- MOTION POLICY ----------------------------------------------
   Client requirement: animation must ALWAYS run, even when the operating
   system reports "reduce motion" (Windows > Settings > Accessibility >
   Visual effects > Animation effects = Off).

   Therefore this stylesheet contains NO `prefers-reduced-motion` query.
   Every animation and transition below is declared unconditionally, so the
   OS setting cannot switch it off. Smooth in-page scrolling is driven from
   JavaScript (assets/js/main.js) rather than CSS `scroll-behavior`, because
   browsers silently disable that property under reduce-motion.

   Do not add a `@media (prefers-reduced-motion: reduce)` block here: using
   `revert` inside one resets animation-duration to 0s and kills the motion.
   ----------------------------------------------------------------------- */
html{ scroll-behavior:auto; }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin:0; }
ul[class],ol[class]{ list-style:none; padding:0; }
img,svg{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

body{
  font-family:var(--ff-body);
  font-size:16.5px;
  line-height:1.65;
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--gold); color:#0A0910; }

/* Scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2A2536; border-radius:99px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#423B52; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ============================================================
   ATMOSPHERE — фон, сетка, зерно, свечение курсора
   ============================================================ */
.atmos{ position:fixed; inset:0; z-index:var(--z-bg); pointer-events:none; overflow:hidden; contain:strict; }

.atmos__grid{
  position:absolute; inset:-80px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 26%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 26%, #000 0%, transparent 78%);
  /* transform-only animation: composited, no per-frame repaint */
  animation:gridDrift 26s linear infinite;
  will-change:transform;
}
@keyframes gridDrift{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(72px,72px,0);} }

.atmos__glow{
  position:absolute; border-radius:50%;
  filter:blur(80px);
  opacity:.5;
  transform:translateZ(0);
  will-change:transform;
}
.atmos__glow--a{ width:52vw; height:52vw; left:-14vw; top:-16vw; background:radial-gradient(circle, rgba(255,177,61,.16), transparent 65%); animation:floatA 22s ease-in-out infinite; }
.atmos__glow--b{ width:46vw; height:46vw; right:-12vw; top:18vh; background:radial-gradient(circle, rgba(139,107,255,.18), transparent 65%); animation:floatB 28s ease-in-out infinite; }
.atmos__glow--c{ width:38vw; height:38vw; left:28vw; bottom:-16vw; background:radial-gradient(circle, rgba(255,106,138,.10), transparent 65%); animation:floatA 34s ease-in-out infinite reverse; }
@keyframes floatA{ 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(6vw,7vh,0) scale(1.12);} }
@keyframes floatB{ 0%,100%{ transform:translate3d(0,0,0) scale(1);} 50%{ transform:translate3d(-7vw,5vh,0) scale(1.08);} }

.atmos__grain{
  position:absolute; inset:-40px;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(1) infinite;
  will-change:transform;
}
@keyframes grainShift{
  0%{ transform:translate3d(0,0,0);}   20%{ transform:translate3d(-14px,8px,0);}
  40%{ transform:translate3d(11px,-12px,0);} 60%{ transform:translate3d(-8px,-9px,0);}
  80%{ transform:translate3d(13px,6px,0);}  100%{ transform:translate3d(0,0,0);}
}

/* Курсор-свечение */
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; pointer-events:none; z-index:1; opacity:0;
  background:radial-gradient(circle, rgba(255,177,61,.075), transparent 62%);
  transition:opacity .5s ease;
  will-change:transform;
}
.cursor-glow.on{ opacity:1; }
@media (hover:none){ .cursor-glow{ display:none; } }

/* Прогресс скролла */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:var(--z-top);
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--gold), var(--violet) 55%, var(--rose));
  box-shadow:0 0 14px rgba(255,177,61,.5);
}

/* Переход между страницами */
.page-wipe{
  position:fixed; inset:0; z-index:var(--z-overlay); pointer-events:none;
  background:linear-gradient(120deg, #070610, #141122);
  transform:translateY(100%);
}
.page-wipe.out{ animation:wipeOut .72s var(--e-out) forwards; }
.page-wipe.in{ animation:wipeIn .6s var(--e-io) forwards; }
@keyframes wipeOut{ from{ transform:translateY(0);} to{ transform:translateY(-100%);} }
@keyframes wipeIn{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
main{ position:relative; z-index:var(--z-body); }
section{ position:relative; }
.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:clamp(56px,7vw,96px); }

.rule{
  height:1px; border:0; width:100%;
  background:linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,.display{
  font-family:var(--ff-display);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:.98;
  text-wrap:balance;
}
.h-xxl{ font-size:clamp(2.65rem, 6.5vw, 5.4rem); }
.h-xl { font-size:clamp(2.3rem, 5.6vw, 4.3rem); line-height:1.02; }
.h-lg { font-size:clamp(1.85rem, 3.6vw, 2.9rem); line-height:1.06; }
.h-md { font-size:clamp(1.3rem, 2.1vw, 1.72rem); line-height:1.14; letter-spacing:-.025em; }
.h-sm { font-size:clamp(1.08rem, 1.5vw, 1.24rem); line-height:1.24; letter-spacing:-.02em; font-weight:700; }

.lede{
  font-size:clamp(1.02rem, 1.42vw, 1.22rem);
  color:var(--ink-dim);
  line-height:1.72;
  max-width:60ch;
  font-weight:400;
}
.muted{ color:var(--ink-dim); }
.faint{ color:var(--ink-faint); }
.acid{ color:var(--gold); }
.blue{ color:var(--violet); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.eyebrow::before{
  content:''; width:7px; height:7px; background:var(--gold);
  box-shadow:0 0 10px var(--gold);
  animation:blip 2.4s var(--e-io) infinite;
}
@keyframes blip{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.25; transform:scale(.6);} }
.eyebrow--alt{ color:var(--violet); }
.eyebrow--alt::before{ background:var(--violet); box-shadow:0 0 10px var(--violet); }

.mono{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.06em; }
.caret::after{
  content:'_'; color:var(--gold); animation:caret 1.05s steps(2) infinite; margin-left:2px;
}
@keyframes caret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* «Раскрывающиеся» строки заголовка */
.reveal-line{ display:block; overflow:hidden; padding-bottom:.06em; }
.reveal-line > span{
  display:block;
  transform:translateY(105%) rotate(3deg);
  animation:lineUp 1.05s var(--e-out) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes lineUp{ to{ transform:translateY(0) rotate(0); } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px; border-radius:99px; cursor:pointer;
  font-family:var(--ff-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  border:1px solid transparent; overflow:hidden; isolation:isolate;
  transition:color .3s var(--e-out), border-color .3s var(--e-out), box-shadow .3s var(--e-out), transform .18s var(--e-out);
  will-change:transform;
}
.btn:active{ transform:scale(.975); }
.btn__i{ transition:transform .35s var(--e-out); flex:none; }
.btn:hover .btn__i{ transform:translateX(4px); }

.btn--primary{ background:var(--gold); color:#0A0910; box-shadow:0 8px 34px -12px rgba(255,177,61,.65); }
.btn--primary::before{
  content:''; position:absolute; inset:0; z-index:-1; background:#fff;
  transform:translateY(101%); transition:transform .42s var(--e-out);
}
.btn--primary:hover{ box-shadow:0 12px 44px -10px rgba(255,177,61,.85); }
.btn--primary:hover::before{ transform:translateY(0); }

.btn--ghost{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
.btn--ghost::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .42s var(--e-out);
}
.btn--ghost:hover{ color:#0A0910; border-color:var(--ink); }
.btn--ghost:hover::before{ transform:translateY(0); }

.btn--sm{ min-height:42px; padding:0 18px; font-size:.7rem; }

/* Текстовая ссылка со стрелкой */
.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); position:relative; padding-bottom:3px;
}
.link-arrow::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--e-out);
}
.link-arrow:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
.link-arrow svg{ transition:transform .35s var(--e-out); }
.link-arrow:hover svg{ transform:translate(4px,-4px); }

/* ============================================================
   HEADER
   ============================================================ */
.head{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-head);
  transition:transform .5s var(--e-out), background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.head.scrolled{
  background:rgba(7,8,11,.72);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--line);
}
.head.hidden{ transform:translateY(-102%); }
.head__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:76px;
}
.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand__mark{ width:34px; height:34px; flex:none; }
.brand__mark .bm-ring{ transform-origin:50% 50%; animation:spin 9s linear infinite; }
.brand__mark .bm-ring2{ transform-origin:50% 50%; animation:spin 6s linear infinite reverse; }
.brand__mark .bm-core{ transform-origin:50% 50%; animation:corePulse 2.6s var(--e-io) infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes corePulse{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(.68); opacity:.65;} }
.brand__name{
  font-family:var(--ff-display); font-weight:800; font-size:1.14rem; letter-spacing:-.045em;
}
.brand__name b{ color:var(--gold); font-weight:800; }
.brand__suffix{ font-family:var(--ff-mono); font-size:.6rem; color:var(--ink-faint); letter-spacing:.16em; }

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  position:relative; padding:9px 14px; border-radius:99px;
  font-size:.86rem; font-weight:500; color:var(--ink-dim);
  transition:color .25s ease;
}
.nav a:hover{ color:var(--ink); }
.nav a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .4s var(--e-out);
}
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.head__cta{ display:flex; align-items:center; gap:12px; flex:none; }

.burger{
  display:none; width:46px; height:46px; border-radius:12px; flex:none;
  background:var(--surface); border:1px solid var(--line); cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  transition:border-color .3s ease, background .3s ease;
}
.burger:hover{ border-color:var(--line-strong); }
.burger span{ display:block; width:17px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .38s var(--e-out), opacity .2s ease; }
.burger.open span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* Мобильное меню */
.drawer{
  position:fixed; inset:0; z-index:var(--z-drawer);
  background:rgba(6,7,10,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center;
  padding:100px var(--pad-x) 48px;
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .68s var(--e-out);
  visibility:hidden;
}
.drawer.open{ clip-path:circle(150% at calc(100% - 46px) 46px); visibility:visible; }
.drawer a{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(1.9rem,8vw,2.9rem); padding:11px 0;
  display:flex; align-items:baseline; gap:14px;
  opacity:0; transform:translateY(26px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out), color .25s ease;
  border-bottom:1px solid var(--line-soft);
}
.drawer a span{ font-family:var(--ff-mono); font-size:.62rem; color:var(--gold); letter-spacing:.16em; }
.drawer.open a{ opacity:1; transform:translateY(0); }
.drawer a:hover{ color:var(--gold); }
.drawer__foot{ margin-top:36px; display:flex; flex-wrap:wrap; gap:10px 22px; font-family:var(--ff-mono); font-size:.76rem; color:var(--ink-dim); }
.drawer__foot a{ font-family:var(--ff-mono); font-size:.76rem; padding:0; border:0; letter-spacing:.04em; }

@media (max-width:1000px){
  .nav{ display:none; }
  .head__cta .btn{ display:none; }
  .burger{ display:flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:clamp(122px,15vh,178px); padding-bottom:clamp(60px,8vw,110px); position:relative; }
.hero__grid{
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.hero__copy > *+*{ margin-top:22px; }
.hero__badges{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:99px; border:1px solid var(--line);
  background:var(--surface); font-family:var(--ff-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);
  transition:border-color .3s ease, color .3s ease, transform .3s var(--e-out);
}
.chip:hover{ border-color:var(--gold); color:var(--ink); transform:translateY(-2px); }
.chip__dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); flex:none; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.hero__art{ position:relative; }
.hero__art svg{ width:100%; height:auto; overflow:visible; }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  /* Text leads on small screens: the headline and the call to action must be
     reachable without scrolling past a full-height illustration. */
  .hero__art{ max-width:430px; margin:clamp(30px,7vw,48px) auto 0; }
  .hero__copy > *+*{ margin-top:18px; }
}

/* ============================================================
   МЕЛКИЕ АНИМИРОВАННЫЕ ДЕТАЛИ (декор)
   ============================================================ */
.deco{ position:absolute; pointer-events:none; z-index:1; }

/* вращающееся пунктирное кольцо */
.deco-ring{ width:110px; height:110px; border-radius:50%; border:1px dashed rgba(255,177,61,.32); animation:spin 18s linear infinite; }
.deco-ring::after{
  content:''; position:absolute; top:-4px; left:50%; width:7px; height:7px; margin-left:-3.5px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold);
}
.deco-ring--sm{ width:64px; height:64px; animation-duration:11s; }
.deco-ring--alt{ border-color:rgba(139,107,255,.34); }
.deco-ring--alt::after{ background:var(--violet); box-shadow:0 0 12px var(--violet); }

/* пульсирующая сетка точек */
.deco-dots{ display:grid; grid-template-columns:repeat(5,7px); gap:11px; }
.deco-dots i{ width:3px; height:3px; border-radius:50%; background:var(--ink-faint); animation:dotPulse 3.4s var(--e-io) infinite; }
@keyframes dotPulse{ 0%,100%{ opacity:.2; transform:scale(.7);} 50%{ opacity:1; transform:scale(1.35); } }

/* крестики */
.deco-cross{ width:16px; height:16px; animation:spinSlow 12s linear infinite; }
.deco-cross::before,.deco-cross::after{
  content:''; position:absolute; background:rgba(255,177,61,.5); border-radius:2px;
}
.deco-cross::before{ left:50%; top:0; width:1.5px; height:100%; margin-left:-.75px; }
.deco-cross::after{ top:50%; left:0; height:1.5px; width:100%; margin-top:-.75px; }
@keyframes spinSlow{ to{ transform:rotate(180deg); } }

/* эквалайзер */
.deco-bars{ display:flex; align-items:flex-end; gap:4px; height:26px; }
.deco-bars i{ width:3px; border-radius:2px; background:linear-gradient(to top, var(--gold), rgba(255,177,61,.15)); animation:eq 1.4s var(--e-io) infinite; }
.deco-bars i:nth-child(1){ height:40%; animation-delay:0s }
.deco-bars i:nth-child(2){ height:78%; animation-delay:.16s }
.deco-bars i:nth-child(3){ height:55%; animation-delay:.32s }
.deco-bars i:nth-child(4){ height:95%; animation-delay:.48s }
.deco-bars i:nth-child(5){ height:62%; animation-delay:.64s }
@keyframes eq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }

/* орбита */
.deco-orbit{ width:86px; height:86px; border-radius:50%; border:1px solid var(--line); }
.deco-orbit i{ position:absolute; inset:0; animation:spin 7s linear infinite; }
.deco-orbit i::after{
  content:''; position:absolute; top:-3px; left:50%; margin-left:-3px;
  width:6px; height:6px; border-radius:50%; background:var(--violet); box-shadow:0 0 10px var(--violet);
}
.deco-orbit i:nth-child(2){ animation-duration:11s; animation-direction:reverse; }
.deco-orbit i:nth-child(2)::after{ background:var(--rose); box-shadow:0 0 10px var(--rose); }

/* сканирующая линия */
.deco-scan{ width:120px; height:60px; overflow:hidden; }
.deco-scan::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  animation:scanY 3.2s var(--e-io) infinite;
}
@keyframes scanY{ 0%{ top:0; opacity:0 } 15%{opacity:1} 85%{opacity:1} 100%{ top:100%; opacity:0 } }

/* «уголки» */
.deco-brackets{ width:54px; height:54px; }
.deco-brackets::before,.deco-brackets::after{
  content:''; position:absolute; width:16px; height:16px; border:1px solid var(--gold); opacity:.6;
}
.deco-brackets::before{ left:0; top:0; border-right:0; border-bottom:0; animation:brk 3s var(--e-io) infinite; }
.deco-brackets::after{ right:0; bottom:0; border-left:0; border-top:0; animation:brk 3s var(--e-io) infinite .4s; }
@keyframes brk{ 0%,100%{ transform:translate(0,0); opacity:.6 } 50%{ transform:translate(-4px,-4px); opacity:1 } }
.deco-brackets::after{ animation-name:brk2; }
@keyframes brk2{ 0%,100%{ transform:translate(0,0); opacity:.6 } 50%{ transform:translate(4px,4px); opacity:1 } }

/* парящий квадрат */
.deco-float{ width:44px; height:44px; border:1px solid var(--line-strong); border-radius:12px; animation:floaty 6.5s var(--e-io) infinite; }
.deco-float--tilt{ transform:rotate(14deg); }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-14px) rotate(12deg);} }

/* «мигающий» статус */
.pulse-dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; }
.pulse-dot::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--gold);
  animation:pulseRing 2s var(--e-out) infinite;
}
@keyframes pulseRing{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(3.6); opacity:0 } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.022), transparent);
  padding-block:18px;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{ display:flex; width:max-content; animation:marq 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee--rev .marquee__track{ animation-direction:reverse; animation-duration:44s; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marquee__item{
  display:inline-flex; align-items:center; gap:14px; padding-inline:22px;
  font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-dim); white-space:nowrap;
}
.marquee__item svg{ color:var(--gold); flex:none; }

/* ============================================================
   CARDS
   ============================================================ */
.grid{ display:grid; gap:clamp(14px,1.6vw,20px); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.card{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  padding:clamp(22px,2.6vw,32px);
  transition:border-color .4s var(--e-out), transform .45s var(--e-out), background .4s ease;
  will-change:transform;
}
.card::before{
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,177,61,.10), transparent 62%);
  transition:opacity .4s ease;
}
.card:hover::before{ opacity:1; }
.card:hover{ border-color:var(--line-strong); transform:translateY(-5px); }
.card > *{ position:relative; }

/* кликабельная карточка-услуга */
.svc{ display:flex; flex-direction:column; cursor:pointer; min-height:100%; }
.svc:hover{ border-color:rgba(255,177,61,.42); }
.svc__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.svc__num{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.2em; color:var(--ink-faint); }
.svc__icon{ width:52px; height:52px; flex:none; color:var(--gold); }
.svc__title{ margin-top:22px; }
.svc__price{
  font-family:var(--ff-display); font-weight:800; font-size:clamp(1.9rem,3.2vw,2.5rem);
  letter-spacing:-.028em; margin-top:14px; color:var(--ink);
  display:flex; align-items:baseline; gap:8px;
}
.svc__price small{ font-family:var(--ff-mono); font-size:.66rem; font-weight:400; letter-spacing:.14em; color:var(--ink-faint); text-transform:uppercase; }
.svc__desc{ color:var(--ink-dim); font-size:.95rem; margin-top:12px; }
.svc__list{ margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.svc__list li{ display:flex; gap:10px; font-size:.9rem; color:var(--ink-dim); align-items:flex-start; }
.svc__list li svg{ color:var(--gold); flex:none; margin-top:4px; }
.svc__go{
  margin-top:auto; padding-top:26px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.svc__go i{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,177,61,.36);
  display:grid; place-items:center; transition:background .35s var(--e-out), transform .35s var(--e-out), color .35s ease;
}
.svc:hover .svc__go i{ background:var(--gold); color:#0A0910; transform:rotate(45deg); }
.svc__ribbon{
  position:absolute; top:18px; right:-34px; transform:rotate(45deg);
  background:var(--gold); color:#0A0910; font-family:var(--ff-mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; padding:5px 40px; font-weight:700;
}

/* ============================================================
   ЧИСЛА / СТАТИСТИКА
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ background:var(--bg-2); padding:clamp(22px,2.4vw,30px); position:relative; overflow:hidden; }
.stat::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .8s var(--e-out);
}
.stat.in::after{ transform:scaleX(1); }
.stat__n{ font-family:var(--ff-display); font-weight:800; font-size:clamp(2rem,3.6vw,2.9rem); letter-spacing:-.03em; line-height:1; }
.stat__l{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:10px; }

/* ============================================================
   PROCESS
   ============================================================ */
.steps{ display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:88px 1fr; gap:clamp(18px,3vw,42px);
  padding-block:clamp(24px,3vw,34px); border-top:1px solid var(--line);
  position:relative;
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step__n{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.18em; color:var(--gold);
  display:flex; align-items:flex-start; gap:10px;
}
.step__b{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(14px,3vw,42px); align-items:start; }
@media (max-width:820px){
  .step{ grid-template-columns:1fr; gap:12px; }
  .step__b{ grid-template-columns:1fr; }
}
.step::after{
  content:''; position:absolute; left:0; top:-1px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .9s var(--e-out);
}
.step.in::after{ transform:scaleX(1); }

/* ============================================================
   ACCORDION
   ============================================================ */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--ff-display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(1.02rem,1.7vw,1.24rem); color:var(--ink);
  transition:color .3s ease;
}
.acc__btn:hover{ color:var(--gold); }
.acc__ic{ position:relative; width:22px; height:22px; flex:none; }
.acc__ic::before,.acc__ic::after{
  content:''; position:absolute; left:50%; top:50%; background:currentColor; border-radius:2px;
  transition:transform .42s var(--e-out), opacity .3s ease;
}
.acc__ic::before{ width:14px; height:1.6px; margin:-.8px 0 0 -7px; }
.acc__ic::after{ width:1.6px; height:14px; margin:-7px 0 0 -.8px; }
.acc__item.open .acc__ic::after{ transform:rotate(90deg); opacity:0; }
.acc__item.open .acc__btn{ color:var(--gold); }
.acc__p{ overflow:hidden; height:0; transition:height .5s var(--e-out); }
.acc__p > div{ padding-bottom:26px; color:var(--ink-dim); max-width:74ch; }

/* ============================================================
   ТАБЛИЦЫ / СПИСКИ
   ============================================================ */
.deliver{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.deliver__row{ background:var(--bg-2); padding:18px 22px; display:flex; gap:14px; align-items:flex-start; }
.deliver__row svg{ flex:none; margin-top:3px; }
.ok svg{ color:var(--gold); }
.no svg{ color:var(--rose); }
.no span{ color:var(--ink-faint); }

.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:8px; border:1px solid var(--line); color:var(--ink-dim);
  background:var(--surface); transition:.3s var(--e-out);
}
.tag:hover{ color:var(--gold); border-color:rgba(255,177,61,.4); transform:translateY(-2px); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  border:1px solid var(--line); padding:clamp(38px,6vw,80px);
  background:linear-gradient(150deg, rgba(255,177,61,.09), rgba(139,107,255,.07) 52%, rgba(255,255,255,.015));
  text-align:center;
}
.cta::after{
  content:''; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, transparent 0 78%, rgba(255,177,61,.16) 88%, transparent 100%);
  animation:spin 14s linear infinite; pointer-events:none;
}
.cta > *{ position:relative; z-index:1; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; }

/* ============================================================
   FORM
   ============================================================ */
.form{ display:grid; gap:16px; }
.field{ position:relative; display:grid; gap:8px; }
.field label{
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  transition:color .3s ease;
}
.field:focus-within label{ color:var(--gold); }
.field input,.field select,.field textarea{
  width:100%; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:15px 16px; font-size:.96rem; color:var(--ink);
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.field textarea{ resize:vertical; min-height:140px; }
.field input::placeholder,.field textarea::placeholder{ color:#6A6478; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,177,61,.13);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239AA3B2' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px;
}
.field select option{ background:#100E18; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:.85rem; color:var(--ink-dim); cursor:pointer; }
.check input{ width:18px; height:18px; accent-color:var(--gold); flex:none; margin-top:2px; cursor:pointer; }
.form__note{ font-family:var(--ff-mono); font-size:.7rem; color:var(--ink-faint); letter-spacing:.05em; }
.form__msg{
  display:none; padding:14px 16px; border-radius:var(--r-sm);
  border:1px solid rgba(255,177,61,.4); background:rgba(255,177,61,.08);
  font-size:.9rem; color:var(--gold);
}
.form__msg.show{ display:block; animation:popIn .5s var(--e-out); }
@keyframes popIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* контактные «плитки» */
.contact-tile{
  display:flex; gap:16px; align-items:center; padding:22px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  transition:border-color .35s var(--e-out), transform .35s var(--e-out), background .35s ease;
}
.contact-tile:hover{ border-color:rgba(255,177,61,.42); transform:translateY(-3px); background:var(--surface-2); }
.contact-tile__ic{
  width:46px; height:46px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:rgba(255,177,61,.1); color:var(--gold); border:1px solid rgba(255,177,61,.22);
}
.contact-tile__l{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.contact-tile__v{ font-weight:600; font-size:1rem; margin-top:3px; word-break:break-word; }

/* ============================================================
   LEGAL
   ============================================================ */
.legal{ max-width:78ch; }
.legal h2{ font-size:clamp(1.3rem,2.3vw,1.7rem); margin-top:52px; margin-bottom:14px; }
.legal h3{ font-size:1.06rem; margin-top:28px; margin-bottom:10px; font-family:var(--ff-body); font-weight:700; letter-spacing:-.01em; }
.legal p{ color:var(--ink-dim); margin-bottom:14px; }
.legal ul{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:9px; }
.legal ul li{ position:relative; padding-left:22px; color:var(--ink-dim); }
.legal ul li::before{
  content:''; position:absolute; left:0; top:.62em; width:7px; height:1.5px; background:var(--gold);
}
.legal a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.legal strong{ color:var(--ink); }

.toc{
  border:1px solid var(--line); border-radius:var(--r); padding:22px 24px;
  background:var(--surface); position:sticky; top:100px;
}
.toc h4{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; font-weight:500; }
.toc a{ display:block; padding:6px 0; font-size:.88rem; color:var(--ink-dim); transition:color .25s ease, padding-left .25s var(--e-out); }
.toc a:hover{ color:var(--gold); padding-left:6px; }
.legal-layout{ display:grid; grid-template-columns:260px 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
@media (max-width:900px){ .legal-layout{ grid-template-columns:1fr; } .toc{ position:static; } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative; z-index:var(--z-body);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(255,177,61,.028));
  padding-top:clamp(52px,6vw,80px);
  overflow:hidden;
}
.foot__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,44px); }
@media (max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }
.foot h5{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; font-weight:500; }
.foot ul{ display:grid; gap:10px; list-style:none; padding:0; margin:0; }
.foot ul a{ color:var(--ink-dim); font-size:.92rem; transition:color .25s ease, transform .25s var(--e-out); display:inline-block; }
.foot ul a:hover{ color:var(--gold); transform:translateX(4px); }
.foot__bot{
  margin-top:clamp(38px,5vw,58px); padding-block:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between;
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.08em; color:var(--ink-faint);
}
.foot__word{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-.05em;
  font-size:clamp(3rem,15vw,11rem); line-height:1; text-align:center; padding-bottom:.06em;
  background:linear-gradient(180deg, rgba(255,255,255,.09), transparent 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-top:clamp(30px,4vw,50px); user-select:none; pointer-events:none;
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.r{ opacity:0; transform:translateY(28px); transition:opacity .85s var(--e-out), transform .85s var(--e-out); transition-delay:var(--d,0s); will-change:transform,opacity; }
.r.in{ opacity:1; transform:none; }
.r-l{ opacity:0; transform:translateX(-34px); transition:opacity .9s var(--e-out), transform .9s var(--e-out); transition-delay:var(--d,0s); }
.r-l.in{ opacity:1; transform:none; }
.r-r{ opacity:0; transform:translateX(34px); transition:opacity .9s var(--e-out), transform .9s var(--e-out); transition-delay:var(--d,0s); }
.r-r.in{ opacity:1; transform:none; }
.r-s{ opacity:0; transform:scale(.94); transition:opacity .9s var(--e-out), transform .9s var(--e-out); transition-delay:var(--d,0s); }
.r-s.in{ opacity:1; transform:none; }

/* появление при загрузке */
.load{ opacity:0; transform:translateY(18px); animation:loadIn .95s var(--e-out) forwards; animation-delay:var(--d,0s); }
@keyframes loadIn{ to{ opacity:1; transform:none; } }

/* ============================================================
   SVG-ИЛЛЮСТРАЦИИ — общие анимации
   ============================================================ */
.art-draw{ stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); animation:draw 2.4s var(--e-out) forwards; animation-delay:var(--d,.2s); }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.art-spin{ transform-origin:center; animation:spin var(--dur,24s) linear infinite; }
.art-spin-rev{ transform-origin:center; animation:spin var(--dur,18s) linear infinite reverse; }
.art-pulse{ transform-origin:center; animation:artPulse var(--dur,3s) var(--e-io) infinite; animation-delay:var(--d,0s); }
@keyframes artPulse{ 0%,100%{ opacity:.35; transform:scale(.92);} 50%{ opacity:1; transform:scale(1.06);} }
.art-float{ animation:artFloat var(--dur,6s) var(--e-io) infinite; animation-delay:var(--d,0s); }
@keyframes artFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
.art-dash{ stroke-dasharray:5 7; animation:dashRun 1.6s linear infinite; }
@keyframes dashRun{ to{ stroke-dashoffset:-24; } }
.art-blink{ animation:artBlink var(--dur,2.4s) var(--e-io) infinite; animation-delay:var(--d,0s); }
@keyframes artBlink{ 0%,100%{ opacity:.18 } 50%{ opacity:1 } }
.art-trace{ stroke-dasharray:26 300; animation:trace 3.6s linear infinite; animation-delay:var(--d,0s); }
@keyframes trace{ to{ stroke-dashoffset:-326; } }
.art-rise{ animation:artRise var(--dur,4.4s) var(--e-io) infinite; animation-delay:var(--d,0s); }
@keyframes artRise{ 0%{ transform:translateY(10px); opacity:0 } 20%,75%{ opacity:1 } 100%{ transform:translateY(-16px); opacity:0 } }
.art-wave{ transform-origin:center; animation:artWave 3.4s var(--e-out) infinite; animation-delay:var(--d,0s); }
@keyframes artWave{ 0%{ transform:scale(.25); opacity:.9 } 100%{ transform:scale(1.5); opacity:0 } }

/* ============================================================
   UTIL
   ============================================================ */
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-s{ margin-top:14px } .mt{ margin-top:26px } .mt-l{ margin-top:44px } .mt-xl{ margin-top:clamp(44px,6vw,76px) }
.sec-head{ display:grid; gap:18px; max-width:70ch; }
.sec-head--center{ justify-items:center; text-align:center; margin-inline:auto; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nowrap{ white-space:nowrap; }

/* хлебные крошки */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.crumbs a{ transition:color .25s ease; }
.crumbs a:hover{ color:var(--gold); }
.crumbs span{ color:var(--line-strong); }

/* «прайс-бокс» на странице услуги */
.pricebox{
  border:1px solid rgba(255,177,61,.28); border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,177,61,.09), rgba(255,255,255,.015));
  padding:clamp(24px,3vw,34px); position:relative; overflow:hidden;
}
.pricebox::after{
  content:''; position:absolute; right:-30px; top:-30px; width:150px; height:150px; border-radius:50%;
  border:1px dashed rgba(255,177,61,.28); animation:spin 22s linear infinite;
}
.pricebox__p{ font-family:var(--ff-display); font-weight:800; font-size:clamp(3rem,6vw,4.4rem); letter-spacing:-.03em; line-height:1; }
.pricebox__meta{ display:grid; gap:12px; margin-top:22px; }
.pricebox__meta div{ display:flex; justify-content:space-between; gap:14px; font-size:.88rem; padding-bottom:11px; border-bottom:1px solid var(--line); }
.pricebox__meta dt{ color:var(--ink-faint); font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.pricebox__meta dd{ margin:0; text-align:right; font-weight:600; }

/* варианты внутри пакета */
.variant{
  border:1px solid var(--line); border-radius:var(--r); padding:24px;
  background:var(--surface); position:relative; overflow:hidden;
  transition:border-color .4s var(--e-out), transform .4s var(--e-out), background .4s ease;
}
.variant:hover{ border-color:rgba(255,177,61,.4); transform:translateY(-4px); background:var(--surface-2); }
.variant__k{ display:flex; align-items:center; gap:12px; }
.variant__ic{ width:40px; height:40px; flex:none; color:var(--gold); }
.variant__t{ font-family:var(--ff-display); font-weight:700; font-size:1.08rem; letter-spacing:-.02em; }
.variant p{ color:var(--ink-dim); font-size:.92rem; margin-top:12px; }
.variant__line{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .55s var(--e-out);
}
.variant:hover .variant__line{ transform:scaleX(1); }

/* care-plans */
.plan{ border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,2.6vw,32px); background:var(--surface); position:relative; overflow:hidden; transition:.45s var(--e-out); }
.plan:hover{ transform:translateY(-5px); border-color:var(--line-strong); }
.plan--hot{ border-color:rgba(255,177,61,.34); background:linear-gradient(165deg, rgba(255,177,61,.075), rgba(255,255,255,.014)); }
.plan__p{ font-family:var(--ff-display); font-weight:800; font-size:clamp(2.1rem,3.4vw,2.7rem); letter-spacing:-.028em; margin-top:10px; }
.plan__p small{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.12em; color:var(--ink-faint); font-weight:400; }

/* ============================================================
   COOKIE NOTICE
   ============================================================ */
.ck{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:var(--z-top);
  transform:translateY(140%); opacity:0;
  transition:transform .7s var(--e-out), opacity .5s ease;
}
.ck.show{ transform:translateY(0); opacity:1; }
.ck__in{
  max-width:760px; margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  padding:16px 20px; border-radius:var(--r);
  border:1px solid var(--line-strong);
  background:rgba(11,13,18,.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 22px 60px -20px rgba(0,0,0,.9);
}
.ck__t{ font-size:.84rem; color:var(--ink-dim); flex:1 1 320px; line-height:1.6; }
.ck__t a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.ck__a{ display:flex; gap:10px; flex:none; }

/* ============================================================
   NAV DROPDOWN
   ============================================================ */
.dd{ position:relative; }
.dd__btn{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  background:none; border:0; padding:9px 14px; border-radius:99px;
  font-family:var(--ff-body); font-size:.86rem; font-weight:500; color:var(--ink-dim);
  transition:color .25s ease;
}
.dd__btn svg{ transition:transform .35s var(--e-out); opacity:.7; }
.dd:hover .dd__btn, .dd:focus-within .dd__btn{ color:var(--ink); }
.dd:hover .dd__btn svg, .dd:focus-within .dd__btn svg{ transform:rotate(180deg); }

.dd__menu{
  position:absolute; top:calc(100% + 12px); left:50%; width:268px;
  transform:translateX(-50%) translateY(-8px) scale(.97);
  opacity:0; visibility:hidden; pointer-events:none;
  padding:8px; border-radius:var(--r);
  border:1px solid var(--line-strong);
  background:rgba(11,13,18,.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.95);
  transition:opacity .32s var(--e-out), transform .38s var(--e-out), visibility .32s;
}
.dd:hover .dd__menu, .dd:focus-within .dd__menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.dd__menu::before{ content:''; position:absolute; left:0; right:0; top:-14px; height:14px; }
.dd__menu a{
  display:flex; flex-direction:column; gap:2px; padding:11px 14px; border-radius:10px;
  transition:background .25s ease, transform .3s var(--e-out);
}
.dd__menu a::after{ display:none; }
.dd__menu a:hover{ background:rgba(255,177,61,.09); transform:translateX(3px); }
.dd__menu a b{ font-size:.92rem; font-weight:600; color:var(--ink); }
.dd__menu a em{ font-style:normal; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; color:var(--gold); }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.cmp-wrap{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg-2);
  -webkit-overflow-scrolling:touch;
}
.cmp{ width:100%; min-width:660px; border-collapse:collapse; font-size:.9rem; }
.cmp thead th{
  position:sticky; top:0; z-index:2;
  background:#161320; text-align:left; padding:20px 22px;
  font-family:var(--ff-display); font-weight:700; letter-spacing:-.02em; font-size:1rem;
  border-bottom:1px solid var(--line-strong);
}
.cmp thead th em{
  display:block; font-style:normal; font-family:var(--ff-mono); font-weight:400;
  font-size:.68rem; letter-spacing:.14em; color:var(--gold); margin-top:5px;
}
.cmp thead th:first-child{
  font-family:var(--ff-mono); font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}
.cmp tbody th{
  text-align:left; font-weight:500; color:var(--ink); padding:15px 22px;
  border-bottom:1px solid var(--line-soft); font-family:var(--ff-body); font-size:.9rem;
  letter-spacing:0;
}
.cmp tbody td{
  padding:15px 22px; border-bottom:1px solid var(--line-soft);
  font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.04em;
}
.cmp tbody tr{ transition:background .3s ease; }
.cmp tbody tr:hover{ background:rgba(255,177,61,.045); }
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp td.y{ color:var(--gold); }
.cmp td.n{ color:var(--ink-faint); }
.cmp tbody td:nth-child(3){ background:rgba(255,177,61,.035); }

/* ordered list inside legal pages */
.legal ol.legal-ol{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:11px; counter-reset:lo; }
.legal ol.legal-ol li{ position:relative; padding-left:38px; color:var(--ink-dim); counter-increment:lo; }
.legal ol.legal-ol li::before{
  content:counter(lo); position:absolute; left:0; top:.15em;
  width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  font-family:var(--ff-mono); font-size:.68rem; color:var(--gold);
  border:1px solid rgba(255,177,61,.3); background:rgba(255,177,61,.07);
}
.legal code{
  font-family:var(--ff-mono); font-size:.82em; padding:2px 7px; border-radius:6px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--gold);
}
.cmp code{ font-family:var(--ff-mono); font-size:.9em; color:var(--gold); }

/* ---- extra illustration motions (hero "chaos to system") ---- */
.art-jitter{
  transform-box:fill-box; transform-origin:center;
  animation:artJitter var(--dur,3.6s) var(--e-io) infinite;
  animation-delay:var(--d,0s);
}
@keyframes artJitter{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  25%{ transform:translate(4px,-5px) rotate(-4deg); }
  50%{ transform:translate(-5px,3px) rotate(3.5deg); }
  75%{ transform:translate(3px,4px) rotate(-2deg); }
}
.art-sweep{ animation:artSweep var(--dur,4.2s) var(--e-io) infinite; animation-delay:var(--d,0s); }
@keyframes artSweep{
  0%{ transform:translateY(0); opacity:0; }
  12%,78%{ opacity:1; }
  100%{ transform:translateY(158px); opacity:0; }
}

/* dropdown opened by click / focus (touch + keyboard), not only hover */
.dd.open .dd__btn{ color:var(--ink); }
.dd.open .dd__btn svg{ transform:rotate(180deg); }
.dd.open .dd__menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}

/* unit suffix inside a big stat number */
.stat__n{ display:flex; align-items:baseline; gap:8px; flex-wrap:nowrap; }
.stat__n small{
  font-family:var(--ff-mono); font-weight:400; font-size:.3em;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
}

/* gentler blink for data bars — a deep fade reads as a colour shift on the
   violet ground, which made the uptime chart look multi-coloured */
.art-blink--soft{ animation-name:artBlinkSoft; }
@keyframes artBlinkSoft{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }