/* ═══════════════════════════════════════════════════════
   Billables AI — concept redesign
   Design by Din. Content and imagery from billables.ai;
   layout system borrows Aave's discipline: white paper,
   one saturated accent, pill geometry, huge negative space.
   ═══════════════════════════════════════════════════════ */

:root{
  --orange:#EE6B0B;
  --orange-deep:#C9560A;
  --orange-lift:#FF7E1F;
  --tint:#FFF1E4;
  --tint-2:#FFE3CB;

  --ink:#1A1512;
  --ink-2:#5D524C;
  --ink-3:#9A8F88;
  --line:rgba(26,21,18,.10);
  --line-2:rgba(26,21,18,.06);

  --paper:#FFFFFF;
  --paper-warm:#FBF7F3;
  --dark:#171310;

  --r-pill:999px;
  --r-card:24px;
  --r-lg:32px;
  --r-xl:44px;

  --shell:min(1240px, 100% - 2 * var(--gutter));
  --gutter:clamp(1.25rem, 0.6rem + 3vw, 4rem);

  --sans:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6rem; overflow-x:clip}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--paper-warm);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
h1,h2,h3{margin:0; font-weight:500; letter-spacing:-.045em; line-height:1.02}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

.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}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 12px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px; border-radius:6px}

.shell{width:var(--shell); margin-inline:auto}

/* ── Ambient field ─────────────────────────────────── */
.field{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.field__blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.field__blob--a{width:52vw; height:52vw; left:-14vw; top:-10vw;
  background:radial-gradient(circle at 40% 40%, #FFD9B4, rgba(255,217,180,0) 68%)}
.field__blob--b{width:44vw; height:44vw; right:-12vw; top:22vh;
  background:radial-gradient(circle at 50% 50%, #FFE7CF, rgba(255,231,207,0) 70%)}
.field__grain{position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  background-size:140px}

/* ── Buttons ───────────────────────────────────────── */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:transparent;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; height:2.875rem; padding:0 1.375rem;
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  border:1px solid var(--bd); border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg); cursor:pointer;
  overflow:hidden; isolation:isolate;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .3s, color .3s, border-color .3s;
}
.btn span{position:relative; z-index:2}
.btn::before{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:var(--orange-lift);
  transform:translateY(101%); transition:transform .55s var(--ease-out);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px - 12px rgba(238,107,11,.55)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(0)}

.btn--solid{--bg:var(--orange); --fg:#fff}
.btn--outline{--bg:transparent; --fg:var(--ink); --bd:var(--line)}
.btn--outline:hover{--fg:#fff; border-color:transparent}
.btn--ghost{--bg:transparent; --fg:var(--ink); padding:0 .875rem}
.btn--ghost::before{display:none}
.btn--ghost:hover{--fg:var(--orange); transform:none; box-shadow:none}
.btn--light{--bg:#fff; --fg:var(--dark)}
.btn--light:hover{--fg:#fff}
.btn--lg{height:3.375rem; padding:0 1.875rem; font-size:1rem}

.link-arrow{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9375rem; color:var(--orange)}
.link-arrow::after{content:"→"; transition:transform .4s var(--ease-out)}
.link-arrow:hover::after{transform:translateX(5px)}

/* ── Nav ───────────────────────────────────────────── */
.nav{position:fixed; inset:0 0 auto; z-index:100; transition:padding .5s var(--ease)}
.nav__inner{
  width:var(--shell); margin-inline:auto; margin-top:1rem;
  display:flex; align-items:center; gap:1.5rem;
  padding:.6rem .6rem .6rem 1.375rem;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,0); border:1px solid transparent;
  transition:background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s;
}
.nav.is-stuck .nav__inner{
  background:rgba(255,255,255,.82);
  border-color:var(--line-2);
  box-shadow:0 10px 40px - 22px rgba(26,21,18,.4);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
}
.nav__logo img{height:23px; width:auto}
.nav__links{display:flex; gap:.25rem; margin-left:auto}
.nav__links a{
  position:relative; padding:.5rem .75rem; font-size:.9375rem; font-weight:500; color:var(--ink-2);
  border-radius:var(--r-pill); transition:color .3s, background-color .3s;
}
.nav__links a:hover{color:var(--ink); background:rgba(26,21,18,.045)}
.nav__cta{display:flex; align-items:center; gap:.25rem}
.nav__burger{display:none; width:2.75rem; height:2.75rem; margin-left:auto; background:none; border:0; cursor:pointer; position:relative}
.nav__burger span{position:absolute; left:.75rem; width:1.25rem; height:1.5px; background:var(--ink); transition:transform .4s var(--ease-out), opacity .3s}
.nav__burger span:nth-child(1){top:1.1rem}
.nav__burger span:nth-child(2){top:1.55rem}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.225rem) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-.225rem) rotate(-45deg)}
.nav__drawer[hidden]{display:none}
.nav__drawer{
  width:var(--shell); margin:.5rem auto 0; padding:1rem; display:grid; gap:.25rem;
  background:rgba(255,255,255,.94); backdrop-filter:blur(18px);
  border:1px solid var(--line-2); border-radius:var(--r-card);
  box-shadow:0 20px 50px - 30px rgba(26,21,18,.5);
}
.nav__drawer a:not(.btn){padding:.75rem .5rem; font-weight:500; border-bottom:1px solid var(--line-2)}
.nav__drawer .btn{margin-top:.5rem}

/* ── Shared type ───────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .875rem .4rem .625rem; margin-bottom:1.75rem;
  font-size:.8125rem; font-weight:600; letter-spacing:-.005em; color:var(--orange-deep);
  background:var(--tint); border:1px solid rgba(238,107,11,.16); border-radius:var(--r-pill);
}
.dot{width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(238,107,11,.5); animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(238,107,11,.45)} 70%{box-shadow:0 0 0 9px rgba(238,107,11,0)} 100%{box-shadow:0 0 0 0 rgba(238,107,11,0)}}

.rail-label{
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:1.25rem;
}
.h2{font-size:clamp(2.125rem, 1.3rem + 3.6vw, 4.25rem); line-height:1.02}
.h2--light{color:#fff}
.h3{font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem); line-height:1.08}
.fine{font-size:.8125rem; color:var(--ink-3); line-height:1.6}

/* ── Hero ──────────────────────────────────────────── */
.hero{padding:clamp(8rem, 6rem + 8vw, 12rem) 0 clamp(3rem, 2rem + 4vw, 6rem); text-align:center}
.hero__title{
  font-size:clamp(2.5rem, 1.1rem + 6.1vw, 5.75rem);
  line-height:1.05; letter-spacing:-.05em; max-width:16ch; margin-inline:auto;
}
.hero__title .line{display:block; overflow:hidden; padding:.06em 0 .16em; margin-bottom:-.16em}
.hero__title .line > i{display:block; font-style:normal}
.hero__title em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; color:var(--orange)}
.hero__sub{
  max-width:34rem; margin:1.75rem auto 0;
  font-size:clamp(1rem, .95rem + .3vw, 1.1875rem); line-height:1.55; color:var(--ink-2);
}
.hero__actions{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:2.25rem}

.hero__stage{position:relative; isolation:isolate; margin-top:clamp(3.5rem, 2rem + 6vw, 6.5rem)}
.hero__glow{
  /* Watercolour wash behind the product frame. Multiply drops the PNG's
     white ground so only the pigment lands on the paper. */
  position:absolute; left:50%; top:62%; transform:translate(-50%,-50%);
  width:min(52rem, 96%); max-width:none; opacity:.5; z-index:0; pointer-events:none;
  mix-blend-mode:multiply; filter:blur(10px);
}
.hero__frame{
  position:relative; z-index:2; border-radius:var(--r-lg); overflow:hidden;
  background:#fff; border:1px solid var(--line-2);
  box-shadow:0 60px 120px - 60px rgba(26,21,18,.42), 0 8px 24px - 14px rgba(26,21,18,.18);
}
.hero__frame img{width:100%}

.chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1.125rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
  border:1px solid var(--line-2); box-shadow:0 18px 40px - 20px rgba(26,21,18,.4);
  font-size:.8125rem; font-weight:600; color:var(--ink-2); white-space:nowrap;
}
.chip b{font-size:1.125rem; font-weight:700; color:var(--orange); letter-spacing:-.03em}
.chip small{font-size:.75rem; font-weight:500; color:var(--ink-3)}
.chip--1{left:-3.5%; top:14%}
.chip--2{right:-3.5%; top:34%}
.chip--3{left:-1.5%; bottom:11%}
.tick{width:16px; height:16px; border-radius:50%; background:#2BA24C; position:relative; flex:none}
.tick::after{content:""; position:absolute; left:5px; top:3.5px; width:4px; height:7px; border:solid #fff; border-width:0 1.6px 1.6px 0; transform:rotate(45deg)}
[data-float]{animation:bob 7s var(--ease) infinite}
[data-float="2"]{animation-duration:8.5s; animation-delay:-2s}
[data-float="3"]{animation-duration:9.5s; animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)}}

/* ── Awards ────────────────────────────────────────── */
.awards{width:var(--shell); margin-inline:auto; padding:clamp(2rem,1.5rem + 2vw,3.5rem) 0}
.awards__shelf{
  padding:clamp(1.75rem,1.25rem + 1.5vw,2.75rem) 0; border-radius:var(--r-xl);
  background:var(--dark); text-align:center; overflow:hidden;
}
.awards .rail-label{margin-bottom:1.75rem; color:rgba(255,255,255,.42)}
.awards img{height:clamp(3rem,2.5rem + 1.6vw,4.25rem); width:auto; opacity:.92}
.awards .marquee__track{gap:clamp(2.5rem,5vw,5rem)}

/* ── Marquee ───────────────────────────────────────── */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex; align-items:center; gap:clamp(2rem,4vw,4.5rem); width:max-content;
  animation:slide var(--dur,42s) linear infinite}
.marquee--slow .marquee__track{--dur:56s}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.marquee__track--cards{gap:1.25rem; align-items:stretch}

/* ── Statement ─────────────────────────────────────── */
.statement{width:var(--shell); margin-inline:auto; padding:clamp(4rem,3rem + 6vw,9rem) 0; text-align:center}
.statement__text{
  max-width:22ch; margin-inline:auto; font-weight:500;
  font-size:clamp(1.875rem, .9rem + 4.3vw, 4.25rem); line-height:1.06; letter-spacing:-.045em;
}
.statement__text em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--orange)}
.statement__text .w{color:rgba(26,21,18,.14); transition:color .35s var(--ease)}
.statement__text .w.on{color:var(--ink)}
.statement__text em .w.on{color:var(--orange)}

/* ── Spotlight ─────────────────────────────────────── */
.spotlight{padding:clamp(2rem,1rem + 3vw,4rem) 0}
.spotlight__head{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,5rem); align-items:end; margin-bottom:clamp(2.5rem,2rem + 2vw,4rem)}
.spotlight__aside p{font-size:1.0625rem; line-height:1.6; color:var(--ink-2); margin-bottom:1.75rem; max-width:38ch}
.spotlight__media{
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 60px 120px - 70px rgba(201,86,10,.6);
}
.spotlight__media img{width:100%}

/* ── How it works — sticky stack ───────────────────── */
.how{padding:clamp(4rem,3rem + 5vw,8rem) 0}
.how__intro{margin-bottom:clamp(2.5rem,2rem + 3vw,5rem)}
.stack{display:grid; gap:clamp(1rem,2vw,1.5rem)}
.panel{
  position:sticky; top:calc(6rem + var(--i) * 1.25rem);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,3.5rem); align-items:center;
  padding:clamp(1.75rem,1.25rem + 2vw,3.25rem);
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:0 40px 90px - 60px rgba(26,21,18,.45);
}
.panel__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; margin-right:.625rem; vertical-align:middle;
  font-size:.75rem; font-weight:700; letter-spacing:.02em;
  color:var(--orange); background:var(--tint); border-radius:50%;
}
.panel__kicker{display:flex; align-items:center; font-size:.8125rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1rem}
.panel__title{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.25rem); margin-bottom:1rem}
.panel__copy{font-size:1rem; line-height:1.62; color:var(--ink-2); margin-bottom:1.75rem; max-width:42ch}
.panel__media{border-radius:var(--r-lg); overflow:hidden; background:var(--tint)}
.panel__media img{width:100%; transition:transform 1.1s var(--ease-out)}
.panel:hover .panel__media img{transform:scale(1.035)}

/* ── Stats ─────────────────────────────────────────── */
.stats{padding:clamp(4rem,3rem + 5vw,8rem) 0}
.stats__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem)}
.stat{
  padding:clamp(1.75rem,1.25rem + 1.5vw,2.5rem);
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-lg);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s;
}
.stat:hover{transform:translateY(-6px); border-color:rgba(238,107,11,.35); box-shadow:0 40px 70px - 50px rgba(238,107,11,.7)}
.stat__label{font-size:.8125rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.stat__num{display:flex; align-items:baseline; font-size:clamp(3.5rem,2.5rem + 4vw,6rem); font-weight:500; letter-spacing:-.05em; line-height:1; color:var(--orange); margin:1.5rem 0 .5rem}
.stat__num i{font-style:normal; font-size:.5em}
.stat__cap{font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.875rem}
.stat__copy{font-size:.9375rem; line-height:1.6; color:var(--ink-2)}
.stat sup{color:var(--ink-3)}
.stats__foot{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between; margin-top:2rem}

/* ── Testimonials ──────────────────────────────────── */
.voices{padding:clamp(4rem,3rem + 5vw,8rem) 0}
.voices__head{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:end; justify-content:space-between; margin-bottom:clamp(2.5rem,2rem + 2vw,4rem)}
.quote{
  flex:none; width:min(26rem, 78vw); margin:0; display:flex; flex-direction:column; justify-content:space-between;
  padding:2rem; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-lg);
  transition:border-color .4s, box-shadow .4s, transform .4s var(--ease-out);
}
.quote:hover{border-color:rgba(238,107,11,.3); box-shadow:0 30px 60px - 45px rgba(238,107,11,.65); transform:translateY(-4px)}
.quote blockquote{margin:0 0 1.75rem; font-size:1rem; line-height:1.62; color:var(--ink); letter-spacing:-.012em}
.quote blockquote::before{content:"“"; font-family:var(--serif); font-size:2.75rem; line-height:0; color:var(--tint-2); display:block; margin-bottom:1.25rem}
.quote figcaption{display:flex; flex-direction:column; gap:1rem}
.quote figcaption img{height:1.75rem; width:auto; max-width:11rem; object-fit:contain; object-position:left}
.quote figcaption span{display:flex; flex-direction:column; font-size:.8125rem; color:var(--ink-3); line-height:1.5}
.quote figcaption b{font-size:.9375rem; font-weight:600; color:var(--ink); letter-spacing:-.015em}

/* ── Security ──────────────────────────────────────── */
.secure{
  position:relative; margin:clamp(2rem,2vw,4rem) var(--gutter); padding:clamp(3rem,2rem + 5vw,7rem) 0;
  background:var(--dark); border-radius:var(--r-xl); overflow:hidden; color:#fff;
}
.secure::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 82% 8%, rgba(238,107,11,.42), transparent 62%),
             radial-gradient(50% 70% at 6% 96%, rgba(238,107,11,.2), transparent 60%);
}
.secure > .shell{position:relative; width:min(1240px, 100% - 2 * clamp(1.5rem,1rem + 3vw,4.5rem))}
.secure__head{display:grid; grid-template-columns:1.4fr .6fr; gap:2rem; align-items:center; margin-bottom:clamp(2.5rem,2rem + 3vw,5rem)}
.secure__lede{max-width:36ch; margin:1.5rem 0 2rem; font-size:1.0625rem; line-height:1.6; color:rgba(255,255,255,.68)}
.secure__badge{width:min(11rem,100%); justify-self:end; opacity:.9}
.secure__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem)}
.scard{
  padding:2rem; border-radius:var(--r-lg);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  transition:background-color .4s, border-color .4s, transform .5s var(--ease-out);
}
.scard:hover{background:rgba(255,255,255,.08); border-color:rgba(238,107,11,.45); transform:translateY(-5px)}
.scard svg{width:2.5rem; height:2.5rem; margin-bottom:1.5rem; color:var(--orange-lift)}
.scard svg [stroke]{stroke:currentColor}
.scard h3{font-size:1.25rem; margin-bottom:.75rem}
.scard p{font-size:.9375rem; line-height:1.62; color:rgba(255,255,255,.66)}

/* ── Integrations ──────────────────────────────────── */
.integrate{padding:clamp(4rem,3rem + 5vw,8rem) 0}
.integrate .shell{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,5rem); align-items:center}
.integrate__copy p{margin:1.5rem 0 2.25rem; font-size:1.0625rem; line-height:1.6; color:var(--ink-2); max-width:40ch}

.orbit{position:relative; aspect-ratio:1; display:grid; place-items:center}
.orbit__ring{position:absolute; border-radius:50%; border:1px dashed rgba(26,21,18,.13)}
.orbit__ring--1{width:58%; height:58%; animation:spin 44s linear infinite}
.orbit__ring--2{width:88%; height:88%; animation:spin 70s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit__core{
  width:clamp(4rem,8vw,5.5rem); aspect-ratio:1; display:grid; place-items:center;
  border-radius:50%; background:#fff; border:1px solid var(--line-2);
  box-shadow:0 20px 50px - 22px rgba(238,107,11,.65); z-index:3;
}
.orbit__core img{width:64%}
.orbit__icons{position:absolute; inset:0}
.orbit__icons li{
  position:absolute; left:50%; top:50%; width:clamp(2.5rem,4.4vw,3.25rem); aspect-ratio:1;
  margin:calc(clamp(2.5rem,4.4vw,3.25rem) / -2);
  display:grid; place-items:center; border-radius:16px;
  background:#fff; border:1px solid var(--line-2);
  box-shadow:0 12px 28px - 18px rgba(26,21,18,.5);
  transform:rotate(var(--a)) translateX(var(--r, 0px)) rotate(calc(var(--a) * -1));
  transition:transform .5s var(--ease-out), box-shadow .4s;
  animation:fadeIn .7s var(--ease-out) both; animation-delay:var(--d,0s);
}
.orbit__icons li:hover{box-shadow:0 20px 40px - 18px rgba(238,107,11,.7)}
.orbit__icons li img{width:66%; border-radius:6px}
@keyframes fadeIn{from{opacity:0; transform:rotate(var(--a)) translateX(calc(var(--r, 0px) * .82)) rotate(calc(var(--a) * -1)) scale(.7)}}
.orbit__note{position:absolute; bottom:-.5rem; font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}

/* ── Backers ───────────────────────────────────────── */
.backers{padding:clamp(3rem,2rem + 4vw,6rem) 0; text-align:center}
.backers h2{max-width:22ch; margin-inline:auto}
.backers > .shell > p{max-width:44ch; margin:1.25rem auto 3rem; color:var(--ink-2); line-height:1.6}
.backers__row{display:flex; flex-wrap:wrap; gap:clamp(2rem,5vw,4.5rem); align-items:center; justify-content:center; margin-bottom:2.5rem}
.backers__row img{height:clamp(1.5rem,1.2rem + 1vw,2.125rem); width:auto; opacity:.55; filter:grayscale(1); transition:opacity .4s, filter .4s}
.backers__row img:hover{opacity:1; filter:none}

/* ── FAQ ───────────────────────────────────────────── */
.faq{padding:clamp(4rem,3rem + 5vw,8rem) 0}
.faq .h2{margin-bottom:clamp(2rem,1.5rem + 2vw,3.5rem)}
.faq__list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:clamp(1.25rem,1rem + .8vw,1.875rem) 0; cursor:pointer; list-style:none;
  font-size:clamp(1.0625rem,1rem + .5vw,1.5rem); font-weight:500; letter-spacing:-.03em;
  transition:color .3s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--orange)}
.qa summary i{position:relative; flex:none; width:2.25rem; height:2.25rem; border-radius:50%; border:1px solid var(--line); transition:background-color .4s, border-color .4s, transform .5s var(--ease-out)}
.qa summary i::before,.qa summary i::after{content:""; position:absolute; left:50%; top:50%; background:var(--ink); transition:transform .45s var(--ease-out), background-color .3s}
.qa summary i::before{width:11px; height:1.5px; transform:translate(-50%,-50%)}
.qa summary i::after{width:1.5px; height:11px; transform:translate(-50%,-50%)}
.qa[open] summary i{background:var(--orange); border-color:var(--orange); transform:rotate(180deg)}
.qa[open] summary i::before,.qa[open] summary i::after{background:#fff}
.qa[open] summary i::after{transform:translate(-50%,-50%) scaleY(0)}
.qa__body{overflow:hidden}
.qa__body p{max-width:62ch; padding-bottom:1.875rem; font-size:1rem; line-height:1.68; color:var(--ink-2)}
.qa[open] .qa__body{animation:open .5s var(--ease-out)}
@keyframes open{from{opacity:0; transform:translateY(-8px)}}

/* ── CTA band ──────────────────────────────────────── */
.band{padding:clamp(2rem,1rem + 3vw,4rem) 0; background:var(--orange); color:#fff; overflow:hidden}
.marquee--band .marquee__track{--dur:30s; gap:1.5rem}
.marquee--band span{font-size:clamp(1.5rem,1rem + 2.4vw,3rem); font-weight:500; letter-spacing:-.04em; white-space:nowrap}
.band__dot{width:.5rem; height:.5rem; border-radius:50%; background:rgba(255,255,255,.6); flex:none}
.band .marquee{-webkit-mask-image:none; mask-image:none}

/* ── Footer ────────────────────────────────────────── */
.foot{position:relative; overflow:hidden; background:var(--dark); color:#fff; padding:clamp(3.5rem,3rem + 4vw,7rem) 0 2.5rem}
.foot > .shell{position:relative; z-index:1}
.foot__top{padding-bottom:clamp(3rem,2rem + 3vw,5rem); border-bottom:1px solid rgba(255,255,255,.1)}
.foot__title{font-size:clamp(2rem,1.2rem + 3.4vw,4rem); line-height:1.03}
.foot__lede{margin:1.25rem 0 2rem; color:rgba(255,255,255,.6); max-width:38ch; line-height:1.6}
.foot__mark{
  position:absolute; right:-3%; bottom:-1.5rem; z-index:0;
  width:min(58rem, 82%); max-width:none; opacity:.075; filter:invert(1); pointer-events:none;
}
.signup{display:flex; flex-wrap:wrap; gap:.625rem; align-items:center; position:relative; max-width:32rem}
.signup input{
  flex:1 1 15rem; height:2.875rem; padding:0 1.25rem; font-size:.9375rem; font-family:inherit; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill);
  transition:border-color .3s, background-color .3s;
}
.signup input::placeholder{color:rgba(255,255,255,.35)}
.signup input:focus{outline:none; border-color:var(--orange); background:rgba(255,255,255,.1)}
.signup__msg{flex-basis:100%; font-size:.8125rem; color:var(--orange-lift); min-height:1.1rem}

.foot__grid{display:grid; grid-template-columns:repeat(5,1fr); gap:2rem; padding:clamp(2.5rem,2rem + 2vw,4rem) 0}
.foot__grid h3{font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:1.25rem}
.foot__grid li{margin-bottom:.75rem}
.foot__grid a{font-size:.9375rem; color:rgba(255,255,255,.72); transition:color .3s}
.foot__grid a:hover{color:var(--orange-lift)}
.foot__base{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-top:2rem; border-top:1px solid rgba(255,255,255,.1); font-size:.8125rem; color:rgba(255,255,255,.42)}
.foot__credit a{color:rgba(255,255,255,.72); text-decoration:underline; text-underline-offset:3px}
.foot__credit a:hover{color:var(--orange-lift)}

/* ── Reveal system ─────────────────────────────────── */
[data-reveal]{opacity:0; transform:translateY(24px); filter:blur(6px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay:calc(var(--d, 0) * 90ms)}
[data-reveal].in{opacity:1; transform:none; filter:none}
[data-split] .line > i{transform:translateY(105%); transition:transform 1.05s var(--ease-out); transition-delay:calc(var(--d,0) * 105ms)}
[data-split].in .line > i{transform:none}

/* ── Responsive ────────────────────────────────────── */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:block}
  .spotlight__head{grid-template-columns:1fr; align-items:start}
  .panel{grid-template-columns:1fr; position:static}
  .panel__media{order:-1}
  .stats__grid{grid-template-columns:1fr}
  .secure__head{grid-template-columns:1fr}
  .secure__badge{justify-self:start; width:9rem}
  .secure__grid{grid-template-columns:1fr}
  .integrate .shell{grid-template-columns:1fr}
  .orbit{max-width:30rem; margin-inline:auto; width:100%}
    .foot__mark{display:none}
  .foot__grid{grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem}
}
@media (max-width:640px){
  .chip--1{left:-1%; top:-2.5%; transform:scale(.85)}
  .chip--2{right:-1%; top:auto; bottom:-2.5%; transform:scale(.85)}
  .chip--3{display:none}
  .hero__actions .btn{flex:1 1 100%}
  .quote{padding:1.5rem}
  .foot__grid{grid-template-columns:1fr}
  .stats__foot .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-reveal]{opacity:1; transform:none; filter:none}
  [data-split] .line > i{transform:none}
  .statement__text .w{color:var(--ink)}
  .statement__text em .w{color:var(--orange)}
}

/* ═══════════════════════════════════════════════════════
   Craft layer — intro, cursor, magnetism, live hero,
   scrubbed panels. Everything here is additive; the page
   is complete and legible without any of it.
   ═══════════════════════════════════════════════════════ */

/* ── Intro curtain ─────────────────────────────────────
   Driven entirely by CSS. If the stylesheet loads the curtain
   always clears, whether or not motion.js ever runs. */
.intro{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:var(--dark); pointer-events:none;
  animation:introWipe .95s cubic-bezier(.76,0,.24,1) .5s forwards;
}
.intro__mark{width:clamp(3rem, 2.5rem + 2vw, 4.5rem); animation:introMark 1.45s var(--ease-out) forwards}
@keyframes introWipe{to{transform:translate3d(0,-101%,0); visibility:hidden}}
@keyframes introMark{
  0%{opacity:0; transform:scale(.55)}
  32%{opacity:1; transform:scale(1)}
  55%{opacity:1; transform:scale(1)}
  100%{opacity:0; transform:scale(1) translateY(-1.5rem)}
}
/* The headline waits for the curtain rather than racing it. */
[data-split] .line > i{transition-delay:calc(1.05s + var(--d, 0) * 105ms)}

/* ── Cursor ────────────────────────────────────────────
   Only ever attached on a fine pointer; the native cursor
   is never removed on touch or for keyboard users. */
.cur{position:fixed; left:0; top:0; z-index:400; pointer-events:none; opacity:0; transition:opacity .3s}
.cur.on{opacity:1}
.cur__dot,.cur__ring{position:absolute; border-radius:50%; transform:translate(-50%,-50%)}
.cur__dot{width:6px; height:6px; background:var(--orange)}
.cur__ring{
  width:34px; height:34px; border:1px solid rgba(238,107,11,.55);
  transition:width .35s var(--ease-out), height .35s var(--ease-out),
             background-color .35s, border-color .35s;
}
.cur.is-hot .cur__ring{width:58px; height:58px; background:rgba(238,107,11,.1); border-color:rgba(238,107,11,.8)}
.cur.is-hot .cur__dot{opacity:0}
body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor summary{cursor:none}

/* ── Magnetic buttons ──────────────────────────────────
   The pull replaces the hover lift, so the two never fight
   over the same transform. */
.btn--magnetic,.btn--magnetic:hover{transform:translate3d(var(--mx,0px), var(--my,0px), 0)}

/* ── Live capture sequence ─────────────────────────────── */
.capture{
  position:absolute; z-index:4; right:-4%; top:22%; width:min(23.5rem, 46%);
  text-align:left;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.capture.is-out{opacity:0; transform:translateY(10px) scale(.97)}
.capture__src{
  display:inline-flex; align-items:center; gap:.5rem; margin:0 0 .625rem 0;
  padding:.375rem .75rem;
  font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  box-shadow:0 10px 24px -16px rgba(26,21,18,.5);
}
.capture__src em{font-style:normal}
.capture__pulse{
  width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none;
  animation:pulse 1.6s var(--ease) infinite;
}
.capture__card{
  padding:1rem 1.125rem .875rem; border-radius:20px;
  background:#fff; border:1px solid var(--line-2);
  box-shadow:0 34px 70px -30px rgba(26,21,18,.55), 0 4px 14px -8px rgba(26,21,18,.16);
}
.capture__row{display:flex; align-items:center; gap:.5rem}
.capture__dot{width:1.25rem; height:1.25rem; border-radius:50%; background:var(--orange); flex:none}
.capture__row b{
  flex:1; min-width:0; font-size:.875rem; font-weight:700; letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.capture__row i{
  font-style:normal; font-size:.875rem; font-weight:700; color:var(--orange); flex:none;
  transition:opacity .3s, transform .3s var(--ease-out);
}
.capture__row i.is-pending{opacity:0; transform:translateY(4px)}
.capture__matter{margin:.375rem 0 .5rem 1.75rem; font-size:.75rem; font-weight:600; color:var(--ink-3)}
.capture__narr{
  margin-left:1.75rem; min-height:3.2em; font-size:.8125rem; line-height:1.6; color:var(--ink-2);
}
.caret{
  display:inline-block; width:2px; height:1em; margin-left:1px; vertical-align:-.14em;
  background:var(--orange); animation:blink 1s steps(2) infinite;
}
.caret.is-done{display:none}
@keyframes blink{50%{opacity:0}}
.capture__foot{
  margin:.75rem 0 0; padding-top:.625rem; border-top:1px solid var(--line-2);
  font-size:.6875rem; color:var(--ink-3);
}

.chip--3{opacity:0; transition:opacity .35s var(--ease-out), transform .35s var(--ease-out)}
.chip--3.is-on{opacity:1}
#hoursToday{transition:color .3s}
#hoursToday.is-bump{color:var(--orange-lift)}

/* ── Scrubbed panels ───────────────────────────────────── */
.panel{overflow:hidden}
.panel__rail{
  position:absolute; left:0; top:0; height:2px; width:100%; transform-origin:0 50%;
  background:var(--orange); transform:scaleX(var(--p, 0));
}
.panel__media img{transform:scale(calc(1.07 - var(--p, 0) * .07))}
.panel:hover .panel__media img{transform:scale(calc(1.1 - var(--p, 0) * .07))}

.stat__num{font-variant-numeric:tabular-nums}
.chip b{font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .capture{position:static; width:auto; margin:1.25rem auto 0; max-width:26rem}
  .chip--3{display:none}
}

@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  [data-split] .line > i{transition-delay:0s}
  .cur{display:none}
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:auto}
  .capture.is-out{opacity:1; transform:none}
  .chip--3{opacity:1}
  .caret{display:none}
  .panel__media img{transform:none}
  .panel__rail{transform:scaleX(1)}
}