/* ============================================================
   NEXT LAYER TECHNOLOGY — site.css
   Layered-depth cinematic system
   ============================================================ */

:root{
  /* base surfaces — warm espresso, each step is a "layer" */
  --l0:#0C0906;
  --l1:#130F0A;
  --l2:#1B1510;
  --l3:#261E17;
  --line:rgba(255,236,214,.09);
  --line-2:rgba(255,236,214,.17);

  /* type — warm cream, never pure white */
  --ink:#F8F1E7;
  --ink-2:#CDBBA7;
  --ink-3:#968573;

  /* brand accents — lamplight, ember, clay */
  --honey:#EFAE4E;
  --ember:#E2724F;
  --clay:#DD8A85;
  --glow:#E98F4C;          /* midpoint, for gradients */
  --on-accent:#241002;     /* text that sits on a filled accent */
  --accent:var(--honey);
  --accent-2:var(--ember);

  --f-display:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--l0);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:var(--on-accent)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- overlays ---------- */
.grain{
  position:fixed;inset:-120%;z-index:9998;pointer-events:none;opacity:.05;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-5%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(5%,3%)}100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 40%,transparent 40%,rgba(8,5,2,.58) 100%);
}
.cursor-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;z-index:1;pointer-events:none;
  margin:-260px 0 0 -260px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent) 0%,transparent 62%);
  transition:opacity .5s;mix-blend-mode:screen;
}
body.has-pointer .cursor-glow{opacity:1}

/* ============================================================
   INTRO
   ============================================================ */
.intro{
  position:fixed;inset:0;z-index:10000;background:var(--l0);
  display:grid;place-items:center;gap:26px;grid-auto-flow:row;
  transition:opacity .8s var(--ease),visibility .8s;
}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
.intro__stack{position:relative;width:96px;height:78px}
.intro__plane{
  position:absolute;left:50%;width:calc(76px - var(--i) * 10px);height:18px;border-radius:6px;
  transform:translate(-50%,0) translateY(calc(38px - var(--i)*17px)) scaleX(.3);
  background:linear-gradient(90deg,var(--honey),var(--ember));
  opacity:0;filter:blur(6px);
  animation:planeIn .9s var(--ease) forwards;
  animation-delay:calc(var(--i) * .13s);
  box-shadow:0 0 34px color-mix(in srgb,var(--honey) 40%,transparent);
}
@keyframes planeIn{to{opacity:1;filter:blur(0);transform:translate(-50%,0) translateY(calc(38px - var(--i)*17px)) scaleX(1)}}
.intro__word{
  display:flex;gap:.5em;font-family:var(--f-display);font-weight:600;
  font-size:clamp(20px,3vw,30px);letter-spacing:.24em;
}
.intro__word span{opacity:0;transform:translateY(14px);animation:wordIn .8s var(--ease) forwards}
.intro__word span:nth-child(1){animation-delay:.44s}
.intro__word span:nth-child(2){animation-delay:.54s;color:var(--ink-3)}
@keyframes wordIn{to{opacity:1;transform:none}}
.intro__bar{width:180px;height:2px;background:rgba(255,236,214,.1);overflow:hidden;border-radius:2px}
.intro__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--honey),var(--ember));animation:barIn 1.25s var(--ease-io) .35s forwards}
@keyframes barIn{to{width:100%}}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;gap:28px;
  padding:18px var(--pad);
  transition:background .45s var(--ease),backdrop-filter .45s,border-color .45s,padding .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:color-mix(in srgb,var(--l0) 72%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
  padding-block:12px;
}
.nav__brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{width:34px;height:34px;display:block}
.brand-mark svg{width:100%;height:100%;overflow:visible}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.bm-t{fill:var(--honey)}
.bm-m{fill:var(--glow)}
.bm-l{fill:var(--ember);opacity:.85}
.brand-mark rect{transition:transform .5s var(--ease);transform-origin:center}
.nav__brand:hover .bm-t{transform:translateY(-2px)}
.nav__brand:hover .bm-l{transform:translateY(2px)}
.brand-type{display:flex;flex-direction:column;line-height:1.05}
.brand-type b{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:-.01em}
.brand-type i{font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

.nav__links{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--ink-2)}
.nav__links a{position:relative;padding:4px 0;transition:color .3s}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--accent);transition:width .4s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}

.nav__burger{
  display:none;width:40px;height:40px;margin-left:auto;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;gap:6px;align-items:center;
}
.nav__burger i{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:890;background:var(--l0);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.drawer.open{opacity:1;visibility:visible}
.drawer a{
  font-family:var(--f-display);font-size:clamp(28px,7vw,44px);font-weight:600;letter-spacing:-.02em;
  padding:10px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.drawer.open a{opacity:1;transform:none}
.drawer.open a:nth-child(1){transition-delay:.06s}
.drawer.open a:nth-child(2){transition-delay:.11s}
.drawer.open a:nth-child(3){transition-delay:.16s}
.drawer.open a:nth-child(4){transition-delay:.21s}
.drawer.open a:nth-child(5){transition-delay:.26s}
.drawer.open a:nth-child(6){transition-delay:.31s}

/* ============================================================
   BUTTONS / TYPE PRIMITIVES
   ============================================================ */
.btn{
  --bg:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:100px;font-size:14px;font-weight:500;letter-spacing:.01em;
  border:1px solid var(--line-2);overflow:hidden;isolation:isolate;
  transition:color .35s,border-color .35s,transform .35s var(--ease);
  will-change:transform;
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn--primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:var(--on-accent);border-color:transparent;font-weight:600}
.btn--primary::before{background:#fff;}
.btn--ghost:hover{color:var(--on-accent);border-color:transparent}
.btn--sm{padding:9px 18px;font-size:13px}
.nav__cta{flex-shrink:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
}
.eyebrow i{width:22px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);display:block}

.h2{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(30px,4.4vw,58px);line-height:1.06;letter-spacing:-.03em;margin:0 0 22px;
  max-width:19ch;text-wrap:balance;
}
.h2.big{font-size:clamp(34px,6vw,76px);max-width:22ch}
.contact .h2,.contact .lede{max-width:none;margin-inline:auto}
.lede{font-size:clamp(15px,1.25vw,19px);color:var(--ink-2);max-width:60ch;margin:0 0 26px;line-height:1.7}

/* reveal primitives */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.split .wd{display:inline-block;white-space:nowrap}
.split .ch{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.split.in .ch{opacity:1;transform:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:120px var(--pad) 90px;overflow:hidden;isolation:isolate;
}
.hero__media{position:absolute;inset:-8% 0;z-index:-3;will-change:transform}
.hero__video,.hero__canvas{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero__video{opacity:0;transition:opacity 1.2s var(--ease)}
.hero__video.ready{opacity:.5}
.hero__video.ready ~ .hero__canvas{opacity:.45}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,9,6,.86) 0%,rgba(12,9,6,.40) 38%,rgba(12,9,6,.9) 100%),
    radial-gradient(90% 70% at 15% 30%,color-mix(in srgb,var(--honey) 17%,transparent),transparent 70%),
    radial-gradient(70% 60% at 88% 72%,color-mix(in srgb,var(--ember) 15%,transparent),transparent 70%);
}
.hero__planes{position:absolute;inset:0;z-index:-1;pointer-events:none}
.plane{
  position:absolute;border-radius:26px;border:1px solid rgba(255,236,214,.08);
  backdrop-filter:blur(2px);will-change:transform;
  background:linear-gradient(140deg,rgba(255,236,214,.05),rgba(255,236,214,0));
}
.plane--1{width:34vw;height:21vw;right:-9vw;top:10%;transform:rotate(-11deg);opacity:.55}
.plane--2{width:24vw;height:15vw;right:26vw;top:58%;transform:rotate(7deg);opacity:.4}
.plane--3{width:17vw;height:11vw;right:-4vw;top:72%;transform:rotate(-4deg);opacity:.3}

.hero__inner{
  position:relative;z-index:2;width:100%;max-width:1500px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(20px,3vw,48px);align-items:center;
}
.hero__col{min-width:0}

/* layered device cluster */
.hero__devices{position:relative;height:min(74svh,660px);min-width:0}
.hdev{position:absolute;will-change:transform}
.hdev--front{right:4%;top:50%;translate:0 -50%;width:min(268px,62%);z-index:2}
.hdev--front .phone{transform:rotate(-4deg)}
.hdev--back{right:38%;top:48%;translate:0 -50%;width:min(206px,48%);z-index:1;opacity:.85}
.hdev--back .phone{transform:rotate(6deg)}
.hero__devices .phone{width:100%}
.hero__devices .phone__frame{border-radius:36px;padding:7px}
.hero__devices .phone__screen{border-radius:29px}
.hero__devices .phone__reflect{border-radius:36px}
.hero__devices .phone__notch{height:15px;top:11px}
.hero__title{
  font-family:var(--f-display);font-weight:600;margin:0 0 26px;
  font-size:clamp(42px,6.6vw,96px);line-height:.94;letter-spacing:-.045em;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .w{
  display:inline-block;transform:translateY(110%);opacity:0;
  transition:transform 1.05s var(--ease),opacity .8s var(--ease);
}
.hero.lit .hero__title .w{transform:none;opacity:1}
.hero__title .line:nth-child(1) .w:nth-child(1){transition-delay:.05s}
.hero__title .line:nth-child(1) .w:nth-child(2){transition-delay:.11s}
.hero__title .line:nth-child(1) .w:nth-child(3){transition-delay:.17s}
.hero__title .line:nth-child(2) .w:nth-child(1){transition-delay:.23s}
.hero__title .line:nth-child(2) .w:nth-child(2){transition-delay:.29s}
.grad{
  background:linear-gradient(100deg,var(--honey) 0%,var(--glow) 45%,var(--ember) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:gradSlide 9s ease-in-out infinite alternate;
}
@keyframes gradSlide{to{background-position:100% 0}}
.hero__sub{font-size:clamp(15px,1.35vw,20px);color:var(--ink-2);max-width:46ch;margin:0 0 34px;transition-delay:.35s}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;transition-delay:.45s}

.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);margin-top:56px;transition-delay:.55s}
.hero__stats li{display:flex;flex-direction:column;gap:2px}
.hero__stats b{font-family:var(--f-display);font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.03em}
.hero__stats span{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

.hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
}
.hero__scroll i{width:1px;height:44px;background:linear-gradient(180deg,var(--ink-3),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--honey);animation:scrollDot 2.1s var(--ease-io) infinite}
@keyframes scrollDot{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  border-block:1px solid var(--line);padding:16px 0;overflow:hidden;
  background:linear-gradient(180deg,var(--l1),var(--l0));
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{
  display:flex;align-items:center;gap:34px;width:max-content;
  animation:marq 42s linear infinite;
  font-family:var(--f-display);font-size:clamp(15px,1.6vw,22px);font-weight:500;
  color:var(--ink-3);letter-spacing:-.01em;white-space:nowrap;
}
.marquee__track em{font-style:normal;color:var(--honey);font-size:.6em}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   LAYERS / CARDS
   ============================================================ */
.layers{padding:clamp(90px,13vw,180px) 0 clamp(70px,9vw,120px);position:relative}
.sechead{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:end}
.sechead .h2{margin-bottom:0;max-width:15ch}
.sechead__aside{padding-bottom:8px}
.sechead .lede{margin-bottom:0}
@media (max-width:900px){.sechead{grid-template-columns:1fr;align-items:start}.sechead .h2{margin-bottom:20px}}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px}
.card{
  position:relative;padding:32px 28px 26px;border-radius:20px;overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,var(--l2),var(--l1));
  border:1px solid var(--line);
  transition:transform .6s var(--ease),border-color .5s;
  will-change:transform;
}
.card:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.card__glow{
  position:absolute;inset:-1px;z-index:-1;opacity:0;transition:opacity .55s;
  background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%);
}
.card:hover .card__glow{opacity:1}
.card::before{
  content:"";position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5;
}
.card__idx{font-family:var(--f-display);font-size:12px;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:22px}
.card h3{font-family:var(--f-display);font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.02em;margin:0 0 12px}
.card p{color:var(--ink-2);font-size:14.5px;margin:0 0 26px;line-height:1.65}
.card__go{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--accent);font-weight:500}
.card__go i{font-style:normal;transition:transform .4s var(--ease)}
.card:hover .card__go i{transform:translateX(5px)}

/* ============================================================
   SHOWCASE (sticky phone + stepped copy)
   ============================================================ */
.showcase{position:relative;padding:clamp(60px,9vw,120px) 0;overflow:clip}
.showcase__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.orb{
  position:absolute;top:22%;left:-10%;width:56vw;height:56vw;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 17%,transparent),transparent 62%);
  filter:blur(40px);
}
.showcase--rev .orb{left:auto;right:-14%}

.showcase__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.showcase--rev .showcase__stage{order:2}

.showcase__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center}
.showcase__copy{display:flex;flex-direction:column;gap:0;padding-block:14vh}
.step{
  min-height:78vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.14;transform:translateY(20px) scale(.99);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.step.active{opacity:1;transform:none}
.step .btn{align-self:flex-start;margin-top:10px}

/* phone */
.phone{position:relative;width:min(300px,72vw);aspect-ratio:9/19.5;will-change:transform;transform-style:preserve-3d}
.phone__glow{
  position:absolute;inset:-16%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent),transparent 62%);
  filter:blur(34px);animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.09);opacity:1}}
.phone__frame{
  position:relative;height:100%;border-radius:44px;padding:9px;
  background:linear-gradient(160deg,#3B3229,#15100B 42%,#2F2720);
  box-shadow:0 44px 90px -24px rgba(6,3,1,.85),0 0 0 1px rgba(255,236,214,.10) inset;
}
.phone__notch{
  position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:33%;height:20px;border-radius:99px;background:#0A0704;z-index:3;
}
.phone__screen{
  position:relative;height:100%;border-radius:36px;overflow:hidden;background:#0A0705;
}
.phone__screen video,.phone__screen canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone__screen video{opacity:0;z-index:2;transition:opacity .8s var(--ease)}
.phone__screen video.ready{opacity:1}
.phone__reflect{
  position:absolute;inset:0;border-radius:44px;pointer-events:none;z-index:4;
  background:linear-gradient(128deg,rgba(255,240,220,.16) 0%,transparent 26%,transparent 72%,rgba(255,240,220,.07) 100%);
  mix-blend-mode:overlay;
}

/* ============================================================
   SCRUB SECTION
   ============================================================ */
.scrub{height:320vh;position:relative}
.scrub__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.scrub__video,.scrub__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scrub__video{opacity:0;z-index:1;transition:opacity 1s}
.scrub__video.ready{opacity:.75}
.scrub__video.ready ~ .scrub__canvas{opacity:.3}
.scrub__sticky::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(80% 70% at 50% 50%,transparent 20%,rgba(12,9,6,.84) 100%);
}
.scrub__overlay{position:relative;z-index:3;text-align:center;padding-inline:var(--pad)}
.scrub__title{
  font-family:var(--f-display);font-weight:600;margin:0 0 18px;
  font-size:clamp(38px,9vw,120px);line-height:.95;letter-spacing:-.045em;
}
.scrub__title .sw{display:inline-block;opacity:.18;transition:opacity .5s var(--ease),transform .6s var(--ease);transform:translateY(.1em)}
.scrub__title .sw.on{opacity:1;transform:none}
.scrub__title .sw:nth-child(2){color:var(--honey)}
.scrub__title .sw:nth-child(3){color:var(--ember)}
.scrub__sub{color:var(--ink-2);font-size:clamp(14px,1.2vw,18px);max-width:44ch;margin:0 auto}

/* ============================================================
   CRM
   ============================================================ */
.crm{padding:clamp(90px,13vw,170px) 0;position:relative;background:linear-gradient(180deg,var(--l0),var(--l1),var(--l0))}
.crm__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,90px);align-items:center}
.ticks{display:flex;flex-direction:column;gap:11px;margin:0 0 32px}
.ticks li{display:flex;align-items:center;gap:11px;color:var(--ink-2);font-size:15px}
.ticks li::before{
  content:"";width:17px;height:17px;border-radius:50%;flex-shrink:0;
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
}
.crm__visual{perspective:1400px;will-change:transform}
.stackcards{position:relative;height:min(430px,64vw);transform:rotateX(11deg) rotateY(-13deg);transform-style:preserve-3d}
.sc{
  position:absolute;left:0;right:0;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--l3),var(--l1));
  box-shadow:0 30px 60px -22px rgba(6,3,1,.8);
}
.sc--3{top:0;height:66%;transform:translateZ(-70px) translateY(-16px) scale(.92);opacity:.4}
.sc--2{top:8%;height:70%;transform:translateZ(-34px) translateY(-8px) scale(.96);opacity:.7}
.sc--1{top:16%;height:74%;padding:24px;display:flex;flex-direction:column;gap:13px}
.sc--1 b{font-family:var(--f-display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.sc--1 .row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-style:normal}
.sc--1 .row u{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line-2);flex-shrink:0}
.sc--1 .row:first-of-type u{background:var(--accent);border-color:var(--accent)}
.sc--1 .row em{font-style:normal;font-size:14px;color:var(--ink-2)}

/* ============================================================
   WHY
   ============================================================ */
.why{padding:clamp(90px,13vw,170px) 0;border-top:1px solid var(--line)}
.why__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:60px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.why__item{background:var(--l0);padding:clamp(26px,3.4vw,46px);transition:background .5s}
.why__item:hover{background:var(--l1)}
.why__item span{font-family:var(--f-display);font-size:12px;letter-spacing:.2em;color:var(--honey);display:block;margin-bottom:20px}
.why__item h3{font-family:var(--f-display);font-size:clamp(18px,1.9vw,24px);font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.why__item p{color:var(--ink-2);font-size:14.5px;margin:0;line-height:1.7}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{position:relative;padding:clamp(100px,15vw,200px) 0;text-align:center;overflow:hidden}
.contact__aura{
  position:absolute;bottom:-40%;left:50%;transform:translateX(-50%);
  width:120vw;height:90vh;pointer-events:none;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--honey) 22%,transparent),color-mix(in srgb,var(--ember) 13%,transparent) 42%,transparent 70%);
  filter:blur(30px);
}
.contact__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.mailto{
  display:inline-flex;align-items:center;gap:14px;margin-top:22px;
  font-family:var(--f-display);font-size:clamp(17px,2.6vw,34px);font-weight:500;letter-spacing:-.02em;
  padding-bottom:8px;border-bottom:1px solid var(--line-2);
  transition:border-color .4s,color .4s;will-change:transform;
}
.mailto i{font-style:normal;transition:transform .45s var(--ease);color:var(--honey)}
.mailto:hover{border-bottom-color:var(--honey)}
.mailto:hover i{transform:translateX(8px)}
.contact__note{margin-top:34px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--line);padding:44px 0;background:var(--l1)}
.foot__inner{display:flex;flex-wrap:wrap;align-items:center;gap:22px;justify-content:space-between}
.foot__links{display:flex;flex-wrap:wrap;gap:24px;font-size:14px;color:var(--ink-2)}
.foot__links a:hover{color:var(--ink)}
.foot__copy{font-size:12.5px;color:var(--ink-3);margin:0;width:100%}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .cards{grid-template-columns:1fr}
  .showcase__grid{grid-template-columns:1fr;gap:0}
  .showcase--rev .showcase__stage{order:0}
  .showcase__stage{height:auto;position:static;padding-block:20px 44px}
  .showcase__copy{padding-block:0}
  .step{min-height:auto;opacity:1;transform:none;padding-block:34px}
  .crm__inner{grid-template-columns:1fr}
  .why__grid{grid-template-columns:1fr}
  .scrub{height:220vh}
}
@media (max-width:1100px){
  .hero__inner{grid-template-columns:1fr;gap:40px}
  .hero__devices{height:min(50svh,420px);order:2}
  .hdev--front{right:50%;translate:38% -50%}
  .hdev--back{right:50%;translate:-52% -50%}
}
@media (max-width:820px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .plane{display:none}
  .hero{min-height:auto;padding-top:104px}
  .hero__stats{gap:22px;margin-top:40px}
  .hero__stats li{min-width:calc(50% - 22px)}
  .hero__scroll{display:none}
  .stackcards{transform:none}
}
@media (max-width:560px){
  .hero__devices{height:340px}
  .hdev--front{width:180px}
  .hdev--back{width:140px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.split .ch,.hero__title .w,.step,.scrub__title .sw{opacity:1!important;transform:none!important}
  .grain{display:none}
  .cursor-glow{display:none}
  .scrub{height:auto}
  .scrub__sticky{position:static;height:auto;min-height:70svh}
  .showcase__stage{position:static;height:auto}
  .step{opacity:1}
}