/* ============================================================
   VANZA VOICE - v2, light-first
   Taste source: vanzastudio.com + /real-estate
   em = accent color, never italic · h2 weight 500 · btn r16
   ============================================================ */

:root{
  --bg:#F4F5F7;
  --bg-2:#ECEDF0;
  --ink:#14151A;
  --ink-2:#565963;
  --muted:#9A9DA6;
  --line:rgba(20,21,26,.12);
  --line-2:rgba(20,21,26,.07);
  --accent:#FF4A1C;
  --accent-deep:#E63A0E;
  --on-accent:#fff;
  --dark:#0B0C0E;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-sans:'Hanken Grotesk',system-ui,sans-serif;
  --maxw:1280px;
  --pad:clamp(20px,4.5vw,64px);
  --r:20px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
em{font-style:normal;color:var(--accent)}
::selection{background:var(--accent);color:#fff}

/* ---------- type ---------- */
.h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(34px,4.6vw,62px);
  line-height:1.02;
  letter-spacing:-.03em;
}
.muted-lead{
  margin-top:22px;
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.55;
  color:var(--ink-2);
  max-width:46ch;
}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-sans);font-size:14px;font-weight:600;
  padding:14px 26px;border-radius:16px;
  border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s;
}
.btn--lg{padding:17px 32px;font-size:15px}
.btn--accent{
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 10px 28px -12px rgba(255,74,28,.6);
}
.btn--accent:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(255,74,28,.7)}
.btn--ghost{
  background:rgba(255,255,255,.55);color:var(--ink);
  border-color:rgba(1,1,1,.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
}
.btn--ghost:hover{background:#fff;border-color:rgba(1,1,1,.18);transform:translateY(-2px)}

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.is-in{opacity:1;transform:none}
/* fade-only reveal for elements that host absolutely-positioned children:
   a transform would make this element their containing block DURING the
   animation and hand them back to .hero AFTER it - the hero video visibly
   jumped from 82% of the cell to 82% of the section. Opacity does not
   create a containing block, so the geometry is stable from first paint. */
html.js .reveal.reveal--flat{transform:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:16px var(--pad);
  display:flex;align-items:center;gap:26px;
}
.nav.is-scrolled{
  background:rgba(244,245,247,.85);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 var(--line-2);
}
.nav__logo{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.logo-mark{height:19px;width:auto;display:block}
.nav__sub{
  font-family:var(--font-display);font-weight:500;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
  padding-left:12px;border-left:1px solid var(--line);
  line-height:1;
}
.nav__links{display:flex;gap:24px;margin-left:auto}
.nav__links a{
  position:relative;
  font-size:14px;font-weight:500;color:var(--ink-2);
  transition:color .25s;
}
.nav__links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;
  background:var(--accent);
  transition:right .35s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav__cta{padding:11px 20px}
.nav__burger{display:none;flex-direction:column;gap:6px;padding:8px;margin-left:auto}
.nav__burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
.nav__burger.is-open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.navmenu{
  position:fixed;inset:0;z-index:40;
  background:rgba(244,245,247,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.navmenu.is-open{opacity:1;pointer-events:auto}
.navmenu__links{display:flex;flex-direction:column;align-items:center;gap:24px}
.navmenu__links a{font-family:var(--font-display);font-size:26px;font-weight:500;color:var(--ink)}
.navmenu__cta{margin-top:12px}

/* ============================================================
   HERO (light)
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(140px,17vh,200px) 0 clamp(40px,6vw,72px);
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;pointer-events:none;
  width:60vmax;height:60vmax;right:-26vmax;top:-26vmax;
  background:radial-gradient(closest-side,rgba(255,74,28,.10),transparent 70%);
}
.hero__inner{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(40px,6vw,90px);
  align-items:center;
}
.hero__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(42px,6.4vw,84px);
  line-height:1;letter-spacing:-.035em;
}
.hero__sub{
  margin-top:clamp(20px,2.6vw,28px);
  font-size:clamp(16px,1.6vw,20px);
  line-height:1.55;color:var(--ink-2);
  max-width:44ch;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.4vw,38px)}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  margin-top:clamp(30px,4vw,44px);
}
.hero__trust li{
  position:relative;padding-left:20px;
  font-size:14px;color:var(--ink-2);
}
.hero__trust li::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--accent);
}

/* maskotka - bleeds off the right/top/bottom of the hero so those edges are
   never seen; only the left edge sits inside the layout, so only it is
   feathered into the page background. */
/* maskotka - the clip's own grey backdrop is lifted to the page colour by
   #botLift, so its right/top edges dissolve; only the left edge sits inside
   the layout and gets feathered. The fade must finish before x=35% of the
   frame - that is where the robot starts, and fading over him blurs him. */
.hero__copy{position:relative;z-index:1}
.hero__bot{position:static;align-self:stretch;min-height:clamp(420px,44vw,560px)}
.botvideo{
  position:absolute;
  top:0;
  height:82%;
  width:auto;
  aspect-ratio:16/9;
  right:clamp(-460px,-21vw,-110px);
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  filter:url(#botLift);
  /* left fade ends at 31% (robot starts at 35%); bottom fade starts at 96%
     (his soles sit at 95.5%) - both stop short of him on purpose */
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0,#000 31%),
    linear-gradient(180deg,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent 0,#000 31%),
    linear-gradient(180deg,#000 90%,transparent 100%);
  mask-composite:intersect;
}

/* phone (unused since the mascot took the hero, kept for the demo slots) */
.hero__phone{justify-self:center}
/* an actual device: a brushed metal rail around an inset screen, with the
   volume and power keys on the sides - without them it reads as a flat card */
.phone{
  position:relative;
  width:clamp(240px,22vw,300px);
  aspect-ratio:9/18.6; /* iPhone 15 Pro body is 70.6 x 146.6 mm = 9:18.7 */
  padding:9px;
  border-radius:clamp(38px,3.2vw,48px);
  background:linear-gradient(148deg,#4c505a 0%,#23252b 18%,#101115 46%,#0d0e11 62%,#2b2e35 86%,#5a5f6a 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 60px 110px -40px rgba(20,21,26,.5),
    0 26px 50px -26px rgba(20,21,26,.4);
  isolation:isolate;
}
/* volume keys (left) - one strip with a gap reads as two buttons */
.phone::before{
  content:'';position:absolute;left:-2.5px;top:21%;
  width:2.5px;height:20%;
  border-radius:2px 0 0 2px;
  background:linear-gradient(180deg,#565a64 0 42%,transparent 42% 52%,#565a64 52% 100%);
}
/* power key (right) */
.phone::after{
  content:'';position:absolute;right:-2.5px;top:29%;
  width:2.5px;height:13%;
  border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,#565a64,#3a3d45);
}
.phone__screen{
  position:relative;height:100%;
  border-radius:clamp(31px,2.6vw,40px);
  overflow:hidden;
  background:#08090B;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.85);
}
.phone__notch{
  position:absolute;z-index:3;top:12px;left:50%;transform:translateX(-50%);
  width:36%;height:22px;border-radius:999px;
  background:#000;
}
.phone__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.phone__fallback{
  position:absolute;inset:0;z-index:2;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;
  text-align:center;
  background:
    radial-gradient(120% 70% at 50% 8%,rgba(255,74,28,.16),transparent 60%),
    linear-gradient(180deg,#131417,#0A0A0C);
  color:rgba(255,255,255,.8);
  font-family:var(--font-display);font-weight:500;font-size:14px;letter-spacing:.02em;
  padding:24px;
}
.phone.is-empty .phone__fallback{display:flex}
.phone.is-empty .phone__video{display:none}
.phone__pulse{
  width:54px;height:54px;border-radius:50%;
  background:var(--accent);
  position:relative;
}
.phone__pulse::before,.phone__pulse::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,74,28,.55);
  animation:ring 2.4s var(--ease) infinite;
}
.phone__pulse::after{animation-delay:1.2s}
@keyframes ring{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(2.3);opacity:0}
}

/* stats strip */
.hero__stats{
  max-width:var(--maxw);margin:clamp(56px,8vw,96px) auto 0;
  padding:clamp(24px,3vw,34px) var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,3vw,40px);
  border-top:1px solid var(--line-2);
  /* the numbers are set at different sizes, so sit them on one baseline
     instead of letting each cell align to the top of the row */
  align-items:baseline;
}
.hero__stats li{display:flex;align-items:baseline;gap:14px;justify-content:center}
.hero__stats b{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;
  color:var(--ink);
}
/* a lone digit carries far less optical mass than "24/7" or "<2 sek."
   (27px wide vs 89 and 141), so it needs to be set larger to read equal */
.hero__stats b.solo{font-size:clamp(38px,4.6vw,60px);letter-spacing:-.04em}
.hero__stats span{font-size:14px;color:var(--muted)}
/* the animated number lives in a <span> too - keep it at the <b>'s size/colour,
   not the label's 14px grey; tabular figures so width doesn't jitter counting */
.hero__stats b .count{font-size:inherit;color:inherit;font-variant-numeric:tabular-nums}

/* ============================================================
   SECTIONS - shared rhythm
   ============================================================ */
.demo,.how,.can,.pricing,.contact,.faq{
  padding-block:clamp(90px,12vw,170px);
}
.demo__inner,.how__inner,.can__inner,.pricing__inner,.contact__inner,.faq__inner,.versus__inner{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
}

/* ============================================================
   DEMO
   ============================================================ */
.demo{padding-top:clamp(70px,9vw,120px)}
.demo__head{margin-bottom:clamp(36px,5vw,64px)}
.demo__main{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  background:#0c0d10;
  aspect-ratio:16/9;
  box-shadow:0 40px 80px -40px rgba(20,21,26,.5),0 2px 6px -2px rgba(20,21,26,.2);
}
.demo__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.demo__fallback{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;color:rgba(255,255,255,.75);
  background:
    radial-gradient(90% 70% at 50% 15%,rgba(255,74,28,.12),transparent 65%),
    linear-gradient(180deg,#141518,#0B0C0E);
  font-family:var(--font-display);font-weight:500;
  padding:24px;font-size:15px;
}
.demo__main.is-empty .demo__fallback{display:flex}
.demo__main.is-empty .demo__video{display:none}
.demo__play{
  width:66px;height:66px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:20px;
  box-shadow:0 18px 44px -12px rgba(255,74,28,.6);
}

/* ============================================================
   HOW - three airy steps
   ============================================================ */
/* the section is a tall runway; the stage pins to the viewport and the
   steps walk forward as you scroll through it */
.how{padding-block:0}
.how__outer{position:relative;height:300vh}
.how__stage{
  position:sticky;top:0;
  height:100vh;min-height:640px;
  display:flex;align-items:center;
}
.how__inner{
  width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,90px);
  align-items:center;
}
/* the steps ride a reel: the active one is parked in the middle of the
   window, its neighbours slide out through the top and bottom and dissolve
   into the mask. JS drives the reel transform and each step's opacity/scale
   continuously from scroll, so it reads as one wheel rather than a toggle. */
.how__track{
  position:relative;
  margin-top:clamp(28px,3.6vw,44px);
  height:clamp(300px,32vw,400px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
}
.how__reel{position:absolute;left:0;right:0;top:0;will-change:transform}

.hstep{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,2.2vw,32px);
  align-items:start;
  padding-block:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line);
  transform-origin:0 50%;
  opacity:.18;
}
.hstep__no{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(40px,4.4vw,62px);line-height:.9;
  letter-spacing:-.04em;
  color:var(--line-2);
  transition:color .45s var(--ease);
}
.hstep.is-active .hstep__no{color:var(--accent)}
.hstep h3{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(20px,2.2vw,27px);letter-spacing:-.02em;
}
.hstep p{
  margin-top:10px;
  font-size:15.5px;line-height:1.55;color:var(--ink-2);
  max-width:38ch;
}

/* the phone plays the story: call -> conversation -> booked */
.how__right{justify-self:center}
.phone--how{width:clamp(224px,20vw,262px)}

/* status bar */
.statusbar{
  position:absolute;z-index:4;top:14px;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;
  color:#fff;
}
.statusbar__time{font-family:var(--font-display);font-weight:500;font-size:12.5px;letter-spacing:.01em}
/* one SVG for signal + wifi + battery: stays crisp at any size, unlike the
   gradient-and-clip-path fakes it replaced */
.statusbar__ico{height:11px;width:auto;color:#fff;display:block}

.phase{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  padding:64px 22px 30px;text-align:center;
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(255,74,28,.14),transparent 62%),
    linear-gradient(180deg,#15161a,#08090B);
  opacity:0;transform:scale(1.03);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.phase.is-on{opacity:1;transform:none}

/* --- 01: incoming call --- */
.call__head{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:8px}
.call__avatar{
  width:74px;height:74px;border-radius:50%;margin-bottom:10px;
  background:linear-gradient(160deg,#2c2e35,#191a1e);
  border:1px solid rgba(255,255,255,.1);
  position:relative;
}
.call__avatar::after{
  content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1.5px solid rgba(255,74,28,.6);
  animation:ring 2.4s var(--ease) infinite;
}
.call__who{
  font-family:var(--font-display);font-weight:500;
  font-size:19px;color:#fff;letter-spacing:-.01em;
}
.call__what{font-size:12.5px;color:rgba(255,255,255,.45)}
.call__actions{
  margin-top:auto;
  display:flex;gap:46px;
}
.cbtn{display:flex;flex-direction:column;align-items:center;gap:9px}
.cbtn__ico{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  position:relative;
}
.cbtn em{font-style:normal;font-size:11px;color:rgba(255,255,255,.5)}
.cbtn--no .cbtn__ico{background:#E5484D}
.cbtn--yes .cbtn__ico{background:#2FBF5B}
/* handset glyph */
.cbtn__ico::before{
  content:'';width:19px;height:19px;
  background:#fff;
  -webkit-mask:var(--handset) center/contain no-repeat;
  mask:var(--handset) center/contain no-repeat;
}
:root{
  --handset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4.1.8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}
.cbtn--no .cbtn__ico::before{transform:rotate(135deg)}

/* --- 02: in call --- */
.call__head--live{margin-top:6px;gap:4px}
.call__who--sm{font-size:15px}
.call__timer{font-size:12.5px;color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums}
.eq{display:flex;align-items:center;gap:3px;height:56px;margin-top:24px}
.eq i{
  width:3px;border-radius:2px;background:var(--accent);
  height:10px;
  animation:eqBar 1s var(--ease) infinite alternate;
}
.eq i:nth-child(2n){animation-duration:.72s}
.eq i:nth-child(3n){animation-duration:1.24s}
.eq i:nth-child(4n){animation-duration:.9s}
.eq i:nth-child(5n){animation-duration:1.4s}
.eq i:nth-child(odd){animation-delay:-.4s}
@keyframes eqBar{from{height:6px;opacity:.5}to{height:46px;opacity:1}}
.bubble{
  margin-top:18px;
  padding:11px 14px;border-radius:14px 14px 14px 4px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  font-size:12px;line-height:1.5;color:rgba(255,255,255,.72);
  text-align:left;
}
.pad{
  margin-top:auto;margin-bottom:20px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;
}
.pad__k{display:flex;flex-direction:column;align-items:center;gap:7px}
.pad__k i{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.09);
  display:grid;place-items:center;
  position:relative;
}
.pad__k em{font-style:normal;font-size:9.5px;color:rgba(255,255,255,.38)}
.ico-mute::before{
  content:'';width:13px;height:13px;border-radius:3px 3px 5px 5px;
  background:rgba(255,255,255,.75);
}
.ico-keys::before{
  content:'';width:13px;height:13px;
  background:
    radial-gradient(circle,rgba(255,255,255,.75) 1.2px,transparent 1.3px) 0 0/4.4px 4.4px;
}
.ico-spk::before{
  content:'';width:13px;height:13px;
  background:rgba(255,255,255,.75);
  clip-path:polygon(0 33%,33% 33%,66% 0,66% 100%,33% 66%,0 66%);
}
.cbtn--end{margin-bottom:2px}
.cbtn--end .cbtn__ico{width:48px;height:48px}

/* --- 03: booked --- */
.done__title{
  align-self:flex-start;margin-top:2px;
  font-family:var(--font-display);font-weight:500;
  font-size:17px;color:#fff;
}
.cal{width:100%;margin-top:20px;display:flex;flex-direction:column;gap:2px;text-align:left}
.cal__row{display:grid;grid-template-columns:38px 1fr;gap:9px;align-items:stretch}
.cal__row span{
  font-size:10.5px;color:rgba(255,255,255,.35);padding-top:7px;
  font-variant-numeric:tabular-nums;
}
.cal__row i{
  font-style:normal; /* <i> is a layout box here, never a slant */
  border-top:1px solid rgba(255,255,255,.08);
  min-height:38px;
}
.cal__row--new i{
  border-top:0;border-radius:9px;
  padding:9px 11px;
  background:rgba(255,74,28,.14);
  border-left:2.5px solid var(--accent);
  display:flex;flex-direction:column;gap:3px;
  animation:slotIn .6s var(--ease) both;
}
.cal__row--new b{font-family:var(--font-display);font-weight:500;font-size:12.5px;color:#fff}
.cal__row--new em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.5);line-height:1.4}
@keyframes slotIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.toast{
  margin-top:auto;width:100%;
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  text-align:left;
}
.toast__ico{
  flex:none;width:28px;height:28px;border-radius:8px;
  background:var(--accent);position:relative;
}
.toast__ico::before{
  content:'';position:absolute;inset:0;margin:auto;
  width:13px;height:9px;
  border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;
  transform:rotate(-45deg) translate(1px,-2px);
}
.toast__txt{display:flex;flex-direction:column;gap:1px}
.toast__txt b{font-family:var(--font-display);font-weight:500;font-size:12px;color:#fff}
.toast__txt em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.45)}

/* ============================================================
   CAN - six tiles
   ============================================================ */
.can__grid{
  margin-top:clamp(36px,5vw,64px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px);
}
.ctile{
  position:relative;isolation:isolate;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(24px,2.4vw,32px);
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.ctile > *{position:relative;z-index:1}
/* glow under the cursor - JS feeds --mx/--my per tile */
.ctile::before{
  content:'';position:absolute;inset:0;z-index:0;
  border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,74,28,.09),transparent 68%);
  opacity:0;transition:opacity .45s var(--ease);
}
/* and the same spotlight riding the 1px border */
.ctile::after{
  content:'';position:absolute;inset:-1px;z-index:0;
  border-radius:inherit;padding:1px;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(255,74,28,.65),transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .45s var(--ease);
  pointer-events:none;
}
.ctile:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(20,21,26,.3)}
.ctile:hover::before,.ctile:hover::after{opacity:1}

.ctile__no{
  position:absolute;top:clamp(22px,2.2vw,28px);right:clamp(22px,2.2vw,28px);
  font-family:var(--font-display);font-size:11.5px;
  color:var(--muted);letter-spacing:.12em;
  transition:color .4s var(--ease);
}
.ctile:hover .ctile__no{color:var(--accent)}

.ctile__ico{
  width:26px;height:26px;
  fill:none;stroke:var(--ink);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .4s var(--ease),transform .5s var(--ease);
}
.ctile:hover .ctile__ico{stroke:var(--accent);transform:translateY(-2px)}
.ctile__dot{fill:var(--ink);stroke:none;transition:fill .4s var(--ease)}
.ctile:hover .ctile__dot{fill:var(--accent)}
/* the moving parts of each glyph nudge on hover */
.ctile__tip{transition:transform .5s var(--ease);transform-origin:center}
.ctile:hover .ctile__tip{transform:translateX(1.5px)}

.ctile h3{
  margin-top:clamp(30px,3.6vw,46px);
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(18px,1.75vw,22px);
  line-height:1.15;letter-spacing:-.02em;
}
.ctile p{
  margin-top:9px;
  font-size:14.5px;line-height:1.55;color:var(--ink-2);
}

/* ============================================================
   WHO - one typographic statement
   ============================================================ */
.who{
  position:relative;overflow:hidden;
  /* meets the section above at its own colour, so there is no step at the seam */
  background:linear-gradient(180deg,
    var(--bg) 0%,var(--bg-2) 26%,var(--bg-2) 74%,var(--bg) 100%);
  padding-block:clamp(130px,17vw,210px);
  min-height:clamp(680px,94vh,1000px);
  display:flex;align-items:center;
}
/* and the dust dissolves before it reaches either edge */
.who__canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
}
/* a pool of clean background under the copy - the dust must never fight the words */
.who::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 66% 56% at 50% 50%,
    var(--bg-2) 0%,rgba(236,237,240,.92) 34%,rgba(236,237,240,.6) 62%,transparent 100%);
}
.who__inner{
  position:relative;z-index:1;
  width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  text-align:center;
}
.who__l1,.who__l2{
  font-family:var(--font-display);font-weight:500;
  line-height:1.18;letter-spacing:-.03em;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.who__l1{font-size:clamp(22px,2.6vw,36px);color:var(--muted)}
.who__l2{
  margin-top:.3em;
  font-size:clamp(34px,5.4vw,72px);
  color:var(--ink);
  max-width:20ch;margin-inline:auto;
}
/* the three beats land one after another, once the section is on screen */
.who.is-in .who__l1{opacity:1;transform:none}
.who.is-in .who__l2{opacity:1;transform:none;transition-delay:.5s}

/* the counter: industries rolling past too fast to read them all - that is
   the point, the list has no end */
.roll{
  margin-top:clamp(28px,3.6vw,48px);
  height:1.5em;overflow:hidden;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(21px,2.5vw,34px);letter-spacing:-.02em;
  color:var(--accent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent);
  opacity:0;transition:opacity .6s var(--ease);
}
.who.is-in .roll{opacity:1;transition-delay:1.05s}
.roll__track{display:flex;flex-direction:column}
.roll__track span{height:1.5em;line-height:1.5em;flex:none}
.who.is-in .roll__track{animation:rollUp 4.8s linear 1.05s infinite}
/* 12 items, duplicated once - so one loop is exactly half the track */
@keyframes rollUp{to{transform:translateY(-50%)}}

/* ============================================================
   VERSUS
   ============================================================ */
.versus{
  background:var(--bg);
  padding-block:clamp(90px,12vw,170px);
}
/* room above the cards for the maskotka to sit on the right one */
.vcards{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(90px,11vw,150px);
}
.vcard{
  position:relative;
  border-radius:20px;
  padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
/* the dead one recedes, ours steps forward */
.vcard--old{background:var(--bg-2);border-color:var(--line-2)}
.vcard--new{
  background:#fff;
  box-shadow:0 30px 60px -34px rgba(20,21,26,.32);
  overflow:visible; /* the dangling legs sit in front of the card front */
}
@media (hover:hover) and (pointer:fine){
  .vcard--new:hover{transform:translateY(-6px);box-shadow:0 42px 80px -38px rgba(20,21,26,.4)}
  .vcard--old:hover{transform:translateY(-3px);border-color:var(--line)}
  /* he reacts to the lift he is sitting on */
  .vcard--new:hover .vcard__bot{transform:translateY(-4px) rotate(-1.2deg)}
}

.vcard__top{display:flex;align-items:center;gap:14px}
.vcard__ico{
  width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;flex:none;
  transition:transform .5s var(--ease),background .5s var(--ease);
}
.vcard__ico svg{
  width:22px;height:22px;
  fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.vcard--old .vcard__ico{background:rgba(20,21,26,.05)}
.vcard--old .vcard__ico svg{stroke:var(--muted)}
.vcard--old .vcard__ico circle{fill:var(--muted);stroke:none}
.vcard--new .vcard__ico{background:rgba(255,74,28,.1)}
.vcard--new .vcard__ico svg{stroke:var(--accent)}
.vcard__name{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(17px,1.7vw,21px);letter-spacing:-.02em;
}
.vcard--old .vcard__name{color:var(--ink-2)}
.vcard--new .vcard__name{color:var(--ink)}
.vcard__lead{
  margin-top:clamp(18px,2vw,24px);
  font-size:14.5px;line-height:1.5;color:var(--ink-2);
  /* both leads reserve the same right column so they wrap to two lines in
     sync - on the right that column also clears the dangling boots */
  padding-right:clamp(150px,17vw,200px);
}
.vcard--old .vcard__lead{color:var(--ink-2);opacity:.78}

.vlist{
  margin-top:clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column;gap:clamp(14px,1.6vw,18px);
}
.vlist li{
  display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;
  transition:transform .45s var(--ease);
}
/* on hover the rows step in one after another, and each icon lights up */
@media (hover:hover) and (pointer:fine){
  .vcard--new:hover .vlist li{transform:translateX(4px)}
  .vcard--new:hover .vlist li:nth-child(2){transition-delay:.04s}
  .vcard--new:hover .vlist li:nth-child(3){transition-delay:.08s}
  .vcard--new:hover .vlist li:nth-child(4){transition-delay:.12s}
}
.vlist__txt{display:flex;flex-direction:column;gap:3px}
.vlist__txt b{
  font-family:var(--font-display);font-weight:500;
  font-size:15.5px;letter-spacing:-.01em;
}
.vlist__txt em{font-style:normal;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
/* the dead card recedes through colour, not through being unreadable:
   --muted on --bg-2 is only 2.3:1, well under the 4.5:1 minimum */
.vcard--old .vlist__txt b{color:var(--ink-2)}
.vcard--old .vlist__txt em{color:var(--ink-2);opacity:.78}
.vcard--new .vlist__txt b{color:var(--ink)}

/* one drawn glyph per line instead of a row of identical ticks */
.vico{
  width:20px;height:20px;margin-top:1px;
  fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease);
}
.vico__dot{stroke:none}
.vcard--old .vico{stroke:var(--muted)}
.vcard--old .vico__dot{fill:var(--muted)}
.vcard--new .vico{stroke:var(--accent)}
.vcard--new .vico__dot{fill:var(--accent)}
@media (hover:hover) and (pointer:fine){
  .vcard--new:hover .vcard__ico{transform:scale(1.06) rotate(-3deg);background:rgba(255,74,28,.16)}
  .vcard--new:hover .vico{transform:scale(1.12)}
}

/* Sits on the card's top edge. The image runs from head to the tips of the
   dangling feet; the seat line (where his weight rests) is at 64.6% of its
   height. Pinning bottom:100% would hang him above the card - instead push him
   down by the leg portion (35.4% of his height) so the seat lands on the edge
   and the legs overlap the card front. bottom:100% keeps that contact fixed
   at any card size. */
.vcard__bot{
  --bot-w:clamp(160px,18vw,244px);
  position:absolute;
  bottom:100%;
  right:clamp(8px,1.4vw,22px);
  width:var(--bot-w);
  height:auto;
  /* the ledge line - where his hips AND spread hands both rested in the
     original render - is at 62.3% of the image height (the widest row).
     Landing that line on the card top puts butt and hands on the edge;
     the -3px settles him just onto the surface rather than balanced on it. */
  margin-bottom:calc(var(--bot-w) * (924/560) * -0.354 - 3px);
  pointer-events:none;z-index:2;
  opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.vcard__bot.is-in{opacity:1;transform:none}

/* ============================================================
   PRICING - two rows
   ============================================================ */
.pricing__rows{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--line)}
.prow{
  display:grid;grid-template-columns:52px 1fr auto;
  align-items:start;gap:18px;
  border-bottom:1px solid var(--line);
  padding:clamp(22px,3vh,32px) 4px;
  transition:padding-left .4s var(--ease);
}
.prow__no{
  font-family:var(--font-display);font-size:13px;
  color:var(--muted);letter-spacing:.06em;
  padding-top:6px;
  transition:color .3s var(--ease);
}
.prow__body h3{transition:color .3s var(--ease)}
/* hover: row nudges in, number + heading warm up, price accents */
@media (hover:hover) and (pointer:fine){
  .prow:hover{padding-left:14px}
  .prow:hover .prow__no{color:var(--accent)}
  .prow:hover .prow__val b{color:var(--accent)}
}
.prow__body h3{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(21px,2.6vw,34px);letter-spacing:-.025em;
}
.prow__body p{
  margin-top:10px;
  font-size:15.5px;line-height:1.55;color:var(--ink-2);
  max-width:52ch;
}
.prow__tag{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
  white-space:nowrap;
}
/* the price column: the number carries the row, the tag captions it */
.prow__val{
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
  padding-top:4px;
}
.prow__val b{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;
  color:var(--ink);white-space:nowrap;
  transition:color .3s var(--ease);
}
.pricing__talk{
  margin-top:clamp(26px,3.4vw,40px);
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(20px,3vw,48px);flex-wrap:wrap;
}
.pricing__talk .btn{flex:none}
.pricing__note{
  font-size:15px;line-height:1.6;color:var(--muted);
  max-width:62ch;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--bg-2)}
.contact__inner{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,90px);
  align-items:start;
}
.contact__left{position:sticky;top:120px}
.contact__mail{
  display:inline-block;
  margin-top:clamp(24px,3vw,34px);
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(17px,1.8vw,21px);
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
  transition:color .25s;
}
.contact__mail:hover{color:var(--accent)}

.contact__form{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:calc(var(--r) + 6px);
  box-shadow:0 30px 70px -40px rgba(20,21,26,.25);
  padding:clamp(26px,3.2vw,40px);
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.field{display:flex;flex-direction:column;gap:7px}
.field:nth-child(-n+5){grid-column:auto}
.field:nth-of-type(n+4){grid-column:1/-1}
.field label{
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);
}
.field label span{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.field input,.field textarea{
  font:inherit;font-size:15px;color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:13px 15px;
  width:100%;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.field textarea{resize:vertical;min-height:60px}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(255,74,28,.1);
  background:#fff;
}
.contact__submit{grid-column:1/-1;width:100%;margin-top:2px}
.contact__note{grid-column:1/-1;text-align:center;color:var(--muted);font-size:13.5px}
.contact__note.is-ok{color:#1a9c4b;font-weight:600}
.contact__note.is-err{color:var(--accent-deep);font-weight:600}
.contact__fine{grid-column:1/-1;text-align:center;font-size:12.5px;color:var(--muted)}
.contact__fine a{text-decoration:underline}

/* ============================================================
   FAQ
   ============================================================ */
/* two columns: heading + contact prompt on the left, accordion on the right */
.faq__inner{
  display:grid;grid-template-columns:0.82fr 1.18fr;
  gap:clamp(40px,7vw,110px);
  align-items:start;
}
.faq__aside{position:sticky;top:clamp(90px,12vh,130px)}
.faq__sub{
  margin-top:clamp(16px,2vw,22px);
  font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);
}
.faq__contact{
  margin-top:clamp(26px,3.4vw,40px);
  font-size:15px;line-height:1.6;color:var(--muted);
  max-width:34ch;
}
.faq__contact a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.faq__contact a:hover{color:var(--accent-deep)}

.faq__list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(17px,1.9vw,21px);letter-spacing:-.01em;
  padding-block:clamp(18px,2.2vw,24px);
  transition:color .25s var(--ease),padding-left .35s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
/* hover: the question nudges in and warms up, the + fills orange and grows */
@media (hover:hover) and (pointer:fine){
  .qa:not([open]) summary:hover{color:var(--ink);padding-left:8px}
  .qa:not([open]) summary:hover .qa__ic::before,
  .qa:not([open]) summary:hover .qa__ic::after{background:var(--accent)}
  .qa:not([open]) summary:hover .qa__ic{transform:scale(1.14)}
}
.qa__ic{
  position:relative;flex:none;
  width:26px;height:26px;
  transition:transform .35s var(--ease);
}
.qa__ic::before,.qa__ic::after{
  content:'';position:absolute;left:50%;top:50%;
  width:14px;height:1.5px;background:var(--ink-2);
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease),background .25s;
}
.qa__ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] summary{color:var(--accent)}
.qa[open] .qa__ic::before,.qa[open] .qa__ic::after{background:var(--accent)}
.qa[open] .qa__ic::after{transform:translate(-50%,-50%) rotate(0deg)}
.qa p{
  color:var(--ink-2);font-size:15.5px;line-height:1.6;
  padding-bottom:clamp(18px,2.2vw,24px);
  max-width:64ch;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--line-2);background:var(--bg)}
.footer__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(26px,3.4vw,40px) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.footer__brand{display:flex;align-items:center;gap:14px}
.footer__logo .logo-mark{height:15px;color:var(--ink)}
.footer__tag{color:var(--ink-2);font-size:13.5px}
.footer__tag a{border-bottom:1px solid var(--line);transition:color .25s,border-color .25s}
.footer__tag a:hover{color:var(--accent);border-color:var(--accent)}
.footer__meta{display:flex;align-items:center;gap:20px;color:var(--muted);font-size:13.5px}
.footer__meta a{color:var(--ink-2);transition:color .25s}
.footer__meta a:hover{color:var(--accent)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:52px}
  /* single column: nothing beside it, so centre it and fade both sides */
  .hero__bot{order:-1;position:relative;justify-self:stretch;align-self:auto;min-height:clamp(300px,58vw,400px)}
  .botvideo{
    top:50%;
    transform:translateY(-50%);
    height:auto;
    width:calc(100% + var(--pad) * 2);
    right:calc(-1 * var(--pad));
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  }
  .hero__phone{order:-1;justify-self:start}
  .phone{width:clamp(210px,30vw,250px)}
  /* no runway on narrow screens: unpin it and show every step at once */
  .how{padding-block:clamp(90px,12vw,150px)}
  .how__outer{height:auto}
  .how__stage{position:static;height:auto;min-height:0;display:block}
  .how__inner{grid-template-columns:1fr;gap:clamp(40px,8vw,64px)}
  .how__right{order:-1}
  /* no reel on narrow screens: flatten the window and show every step */
  .how__track{height:auto;-webkit-mask-image:none;mask-image:none;margin-top:clamp(28px,5vw,40px)}
  .how__reel{position:static;transform:none!important} /* JS still writes it; ignore it here */
  .hstep{opacity:1!important;scale:1!important}
  .hstep__no{color:var(--accent)}
  .hstep{padding-block:clamp(20px,3vw,28px);border-top:1px solid var(--line)}
  .hstep p{max-width:56ch}
  .contact__left{position:static}
}
@media (max-width:860px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .contact__inner{grid-template-columns:1fr}
  /* stack: heading above, questions below - unpin the aside */
  .faq__inner{grid-template-columns:1fr;gap:clamp(32px,6vw,48px)}
  .faq__aside{position:static}
  .faq__contact{max-width:none}
  .can__grid{grid-template-columns:repeat(2,1fr)}
  /* stacked: he would sit on our card and land on the automat above it */
  .vcards{grid-template-columns:1fr;gap:16px;margin-top:clamp(44px,7vw,64px)}
  .vcard__bot{display:none}
  .contact__form{grid-template-columns:1fr}
  .field:nth-child(-n+5){grid-column:1/-1}
}
@media (max-width:640px){
  .hero__stats{grid-template-columns:1fr;gap:14px;justify-items:start}
  .hero__stats li{justify-content:flex-start}
  .hero__actions .btn{width:100%}
  .can__grid{grid-template-columns:1fr}
  .prow{grid-template-columns:38px 1fr;grid-template-rows:auto auto}
  /* price drops under the text, becomes a left-aligned baseline pair */
  .prow__val{grid-column:2;flex-direction:row;align-items:baseline;gap:12px;padding-top:2px}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none}
  .who__l1,.who__l2,.roll{opacity:1;transform:none}
  .who{min-height:0}
  .how__outer{height:auto}
  .how__stage{position:static;height:auto;min-height:0}
  .how__track{height:auto;-webkit-mask-image:none;mask-image:none}
  .how__reel{position:static;transform:none!important}
  .hstep{opacity:1!important;scale:1!important}
  .hstep__no{color:var(--accent)}
  .phase{position:static;opacity:1;transform:none}
  .how__right .phone--how{height:auto;aspect-ratio:auto}
}