/* ============================================================
   SULO GROWTH SYSTEMS
   Frosted-glass surface system · Levo-Studio motion language
   Tokens are binding — see design-system/sulo-growth/MASTER.md

   Two standing overrides from the original Modernist brief:
     · no chroma accent (accent === ink)
     · no ink outlines anywhere; every surface is frosted glass
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Ground is a soft luminance field, not a flat fill. Glass blurs what is
     BEHIND it, so a perfectly flat ground gives backdrop-filter nothing to
     work with and every panel collapses into a grey rectangle. The radial
     washes below are what make the glass legible as glass. */
  --ground:    #eeecea;
  --ground-hi: #fbfaf9;
  --ink:       #201e1d;
  --accent:    #201e1d;            /* no chroma — accent IS ink */
  --ink-70:    rgba(32,30,29,.70);
  --ink-muted: rgba(32,30,29,.65);  /* 4.9:1 on ground — verified */
  --dark:      #171615;
  --on-dark:   #f3f2f2;
  --on-dark-78:rgba(243,242,242,.78);
  --on-dark-60:rgba(243,242,242,.60);

  /* Glass. Separation comes from the rim + shadow, never from an outline. */
  --glass:      rgba(255,255,255,.55);
  --glass-2:    rgba(255,255,255,.40);
  --glass-rim:  rgba(255,255,255,.80);
  --glass-rim-2:rgba(255,255,255,.55);
  --glass-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 18px 44px rgba(32,30,29,.10), 0 2px 8px rgba(32,30,29,.05);
  --glass-shadow-lg:0 1px 0 rgba(255,255,255,.85) inset, 0 34px 80px rgba(32,30,29,.16), 0 4px 12px rgba(32,30,29,.06);
  --blur: blur(24px) saturate(140%);

  --dglass:     rgba(255,255,255,.075);
  --dglass-rim: rgba(255,255,255,.16);
  --dglass-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 28px 70px rgba(0,0,0,.50);

  /* Radius — glass implies it. Nothing is square any more. */
  --r-xl:28px; --r:20px; --r-sm:14px; --r-xs:10px; --r-pill:999px;

  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;

  --t-display: clamp(3rem, 8.5vw, 7rem);
  --t-h1:      clamp(2.6rem, 6.2vw, 5.2rem);
  --t-h2:      clamp(1.85rem, 3.3vw, 2.9rem);
  --t-h3:      clamp(1.1rem, 1.55vw, 1.45rem);
  --t-body:    clamp(1rem, 1.05vw, 1.125rem);
  --t-meta:    .8125rem;
  --t-numeral: clamp(2.6rem, 6vw, 5rem);

  /* The three Levo easings, lifted verbatim */
  --e-entrance:cubic-bezier(.22,.61,.36,1);
  --e-reveal:  cubic-bezier(.22,1,.36,1);
  --e-hover:   cubic-bezier(.4,0,.2,1);

  --gutter: 20px;
  --maxw: 1440px;
  --nav-h: 70px;
  --z-nav: 100;
}
@media (min-width:768px){ :root { --gutter:40px; } }
@media (min-width:1280px){ :root { --gutter:64px; } }

/* ---------- RESET ---------- */
*,*::before,*::after { box-sizing:border-box; }
html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
}
body {
  margin:0;
  color:var(--ink);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:var(--t-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* The luminance field. Fixed so panels reveal different tones as you scroll. */
  background-color:var(--ground);
  background-image:
    radial-gradient(78% 52% at 8% -6%,  rgba(255,255,255,.95), transparent 62%),
    radial-gradient(62% 46% at 98% 4%,  rgba(255,255,255,.80), transparent 58%),
    radial-gradient(70% 55% at 88% 62%, rgba(32,30,29,.055),   transparent 60%),
    radial-gradient(58% 44% at 4% 88%,  rgba(32,30,29,.05),    transparent 58%);
  background-attachment:fixed;
  /* clip, not hidden: hidden forces overflow-y:auto and turns <body> into a
     scroll container, which breaks position:sticky in WebKit. */
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
button,input,textarea { font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol { margin:0; }
ul,ol { list-style:none; padding:0; }
a { color:inherit; text-decoration:none; }

:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:var(--r-xs); }
.where :focus-visible, .poster :focus-visible, .wcard :focus-visible { outline-color:var(--on-dark); }

.skip-link {
  position:absolute; left:var(--gutter); top:-100px; z-index:200;
  background:var(--ink); color:var(--ground);
  padding:12px 20px; border-radius:var(--r-pill);
  font-weight:600; font-size:var(--t-meta);
  letter-spacing:.14em; text-transform:uppercase;
  transition:top .18s var(--e-hover);
}
.skip-link:focus { top:12px; }
.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;
}

/* ---------- GLASS ---------- */
.glass {
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim);
  border-radius:var(--r);
  box-shadow:var(--glass-shadow);
}
.glass--sm { border-radius:var(--r-sm); }
.glass--quiet { background:var(--glass-2); border-color:var(--glass-rim-2); }
.glass--dark {
  background:var(--dglass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--dglass-rim);
  border-radius:var(--r);
  box-shadow:var(--dglass-shadow);
  color:var(--on-dark);
}
/* Without backdrop-filter a 55%-white panel over a dark region drops under 4.5:1. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass       { background:rgba(255,255,255,.95); }
  .glass--quiet{ background:rgba(255,255,255,.92); }
  .glass--dark { background:rgba(23,22,21,.95); }
}

/* ---------- LAYOUT ---------- */
.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:var(--s-7); }
@media (min-width:1024px){ .section { padding-block:var(--s-8); } }

.kicker {
  font-size:var(--t-meta); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:var(--s-3);
}
.h2 { font-size:var(--t-h2); font-weight:700; line-height:1.08; letter-spacing:-.022em; max-width:20ch; }
.lede { max-width:64ch; color:var(--ink-70); }

.sec-head { display:grid; gap:var(--s-3); margin-bottom:var(--s-6); }
@media (min-width:900px){
  .sec-head { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-6); align-items:end; }
}

/* ---------- BUTTONS — pill glass, no outline ---------- */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  min-height:50px; padding:13px 24px;
  background:var(--ink); color:var(--ground);
  border:1px solid transparent; border-radius:var(--r-pill);
  font-size:var(--t-meta); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(32,30,29,.22);
  transition:transform .2s var(--e-hover), box-shadow .2s var(--e-hover), background .16s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(32,30,29,.28); }
.btn:active { transform:translateY(0); }
.btn svg { flex:none; }
.btn--ghost {
  background:var(--glass); color:var(--ink);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-color:var(--glass-rim);
  box-shadow:var(--glass-shadow);
}
.btn--ghost:hover { background:rgba(255,255,255,.72); }
.btn--light { background:var(--on-dark); color:var(--dark); box-shadow:0 8px 22px rgba(0,0,0,.35); }
.btn[disabled] { opacity:.45; cursor:not-allowed; transform:none; }

/* ---------- NAV · iOS "Liquid Glass" ----------
   Four things separate real iOS glass from a blurred div:
     1. It is genuinely transparent — tint ~.30, not ~.55. Content must be
        readable THROUGH it, not merely near it.
     2. saturate() and brightness() above 1. Apple's glass amplifies what is
        behind it; a plain blur reads as frosted plastic instead.
     3. A specular rim that VARIES around the edge — bright where the light
        is, gone on the opposite side. A uniform 1px border is the single
        biggest tell of fake glass.
     4. Two inner highlights: a hard top edge and a soft bottom bounce, so
        the pill reads as a lens with thickness, not a flat sheet.
   ---------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:100;padding-top:12px}
.nav__inner{
  position:relative;
  width:calc(100% - var(--gutter)*2);max-width:var(--maxw);margin-inline:auto;
  min-height:var(--nav-h);padding:10px 12px 10px 20px;
  display:flex;align-items:center;gap:var(--s-4);
  border-radius:var(--r-pill);border:0;
  background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.22));
  -webkit-backdrop-filter:blur(30px) saturate(190%) brightness(1.07);
  backdrop-filter:blur(30px) saturate(190%) brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 10px 34px rgba(32,30,29,.10),
    0 2px 8px rgba(32,30,29,.05);
  transition:background .3s var(--e-hover), box-shadow .3s var(--e-hover);
}
/* The varying specular rim. Masking border-box XOR content-box leaves a 1px
   ring, filled with a directional gradient so the light has a source rather
   than surrounding the pill evenly. */
.nav__inner::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.45) 22%,
    rgba(255,255,255,.08) 46%,
    rgba(255,255,255,.10) 62%,
    rgba(255,255,255,.60) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
/* Glass over a bright top-of-page is nearly invisible, so it firms up once
   there is content behind it — the same move iOS makes on scroll. */
.nav[data-scrolled="true"] .nav__inner{
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.38));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(255,255,255,.25),
    0 14px 42px rgba(32,30,29,.14),
    0 3px 10px rgba(32,30,29,.06);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav__inner{background:rgba(255,255,255,.95)}
}
.lockup{display:flex;align-items:center;gap:10px;margin-right:auto}
.lockup__txt{font-size:.75rem;font-weight:700;line-height:1.15;letter-spacing:.1em;text-transform:uppercase}
.lockup__txt span{display:block;color:var(--ink-muted);font-weight:600}
.nav__links{display:none;gap:var(--s-2)}
@media(min-width:1024px){.nav__links{display:flex}}
/* Controls inside the pill are their own small lenses */
.nav__links a{
  font-size:var(--t-meta);font-weight:500;letter-spacing:.05em;
  padding:8px 14px;border-radius:var(--r-pill);
  transition:background .16s ease,color .14s,box-shadow .16s ease;
}
.nav__links a:hover{background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.nav__links a[aria-current=true]{
  background:rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 3px rgba(32,30,29,.07);
}
.nav__cta{display:none;min-height:44px;padding:11px 20px}
@media(min-width:640px){.nav__cta{display:inline-flex}}
.nav__toggle{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  border:0;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.35), 0 2px 8px rgba(32,30,29,.08);
  transition:background .16s ease,transform .2s var(--e-hover);
}
.nav__toggle:hover{background:rgba(255,255,255,.72);transform:translateY(-1px)}
@media(min-width:1024px){.nav__toggle{display:none}}


/* ---------- NAV over dark sections ----------
   Authentic glass is transparent enough that ink text over the dark .where
   and .poster panels measured 2.33:1. iOS handles this by flipping the glass
   to its dark variant when the content behind it is dark; the nav does the
   same, driven by an IntersectionObserver on those two sections. Without
   this, real transparency is simply not accessible on a page with dark bands. */
.nav[data-over="dark"] .nav__in,
.nav[data-over="dark"] .nav__inner{
  background:linear-gradient(180deg, rgba(28,27,26,.52), rgba(28,27,26,.38));
  -webkit-backdrop-filter:blur(30px) saturate(180%) brightness(.92);
  backdrop-filter:blur(30px) saturate(180%) brightness(.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 14px 42px rgba(0,0,0,.34),
    0 3px 10px rgba(0,0,0,.20);
}
.nav[data-over="dark"] .nav__in::before,
.nav[data-over="dark"] .nav__inner::before{
  background:linear-gradient(135deg,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.20) 24%,
    rgba(255,255,255,.04) 48%, rgba(255,255,255,.06) 64%, rgba(255,255,255,.30) 100%);
}
.nav[data-over="dark"]{ color:var(--on-dark); }
.nav[data-over="dark"] .lock__t,
.nav[data-over="dark"] .lockup__txt{ color:var(--on-dark); }
.nav[data-over="dark"] .lock__t span,
.nav[data-over="dark"] .lockup__txt span{ color:var(--on-dark-60); }
.nav[data-over="dark"] .lock svg path,
.nav[data-over="dark"] .lockup svg path{ stroke:var(--on-dark); }
.nav[data-over="dark"] .nav__l a,
.nav[data-over="dark"] .nav__links a{ color:var(--on-dark); }
.nav[data-over="dark"] .nav__l a:hover,
.nav[data-over="dark"] .nav__links a:hover{ background:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.24); }
.nav[data-over="dark"] .nav__l a[aria-current=true],
.nav[data-over="dark"] .nav__links a[aria-current="true"]{
  background:rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.nav[data-over="dark"] .btn{ background:var(--on-dark); color:var(--dark); box-shadow:0 8px 22px rgba(0,0,0,.35); }
.nav[data-over="dark"] .burger,
.nav[data-over="dark"] .nav__toggle{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.14), 0 2px 8px rgba(0,0,0,.24);
}
.nav[data-over="dark"] .burger svg path,
.nav[data-over="dark"] .nav__toggle svg path{ stroke:var(--on-dark); }
.nav[data-over="dark"] :focus-visible{ outline-color:var(--on-dark); }

/* ---------- HERO ---------- */
.hero { padding-block:var(--s-6) var(--s-7); }
@media (min-width:1024px){ .hero { padding-block:var(--s-7) var(--s-8); } }
.hero__grid { display:grid; gap:var(--s-6); }
@media (min-width:1024px){ .hero__grid { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start; } }
.hero__h1 {
  font-size:var(--t-h1); font-weight:800; line-height:1.0; letter-spacing:-.035em;
  max-width:14ch; margin-bottom:var(--s-3); text-wrap:balance;
}
.hero__sub { max-width:52ch; color:var(--ink-70); margin-bottom:var(--s-5); }

/* ---------- FORMS — glass fields, no outline ---------- */
.gate { max-width:540px; }
.gate__row { display:flex; flex-wrap:wrap; gap:var(--s-1); }
.field { flex:1 1 240px; min-width:0; display:flex; flex-direction:column; gap:7px; }
.field label {
  font-size:var(--t-meta); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-muted);
}
.input {
  width:100%; min-height:50px; padding:13px 16px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--ink);
  border:1px solid var(--glass-rim); border-radius:var(--r-sm);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 4px 14px rgba(32,30,29,.06);
  font-size:1rem;
  transition:background .16s ease, box-shadow .2s var(--e-hover);
}
.input::placeholder { color:var(--ink-muted); }
.input:hover { background:rgba(255,255,255,.78); }
.input[aria-invalid="true"] {
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 2px var(--ink) inset, 0 4px 14px rgba(32,30,29,.10);
}
textarea.input { resize:vertical; min-height:112px; }
.field__err { font-size:var(--t-meta); font-weight:600; color:var(--ink); }
.field__err:empty { display:none; }
.hint { font-size:var(--t-meta); color:var(--ink-muted); margin-top:var(--s-2); }
.gate[data-expanded="true"] .gate__start { display:none; }
.gate__more { display:none; margin-top:var(--s-3); }
.gate[data-expanded="true"] .gate__more { display:grid; gap:var(--s-3); }
.gate[data-sent="true"] .gate__form { display:none; }
.gate__ok { display:none; align-items:flex-start; gap:12px; padding:var(--s-3); border-radius:var(--r-sm); }
.gate[data-sent="true"] .gate__ok { display:flex; }

/* ---------- METRICS — redesigned as glass tiles, not ruled cells ---------- */
.stats { display:grid; gap:var(--s-2); margin-top:var(--s-6); }
@media (min-width:560px){ .stats { grid-template-columns:repeat(3,1fr); } }
.stat {
  padding:var(--s-3);
  border-radius:var(--r-sm);
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim-2);
  box-shadow:var(--glass-shadow);
  display:flex; flex-direction:column; gap:4px;
  transition:transform .38s var(--e-reveal), box-shadow .38s var(--e-reveal);
}
.stat:hover { transform:translateY(-3px); box-shadow:var(--glass-shadow-lg); }
.stat__n {
  font-size:clamp(1.6rem,2.6vw,2.1rem); font-weight:800; letter-spacing:-.03em;
  line-height:1; font-variant-numeric:tabular-nums;
}
.stat__l { font-size:var(--t-meta); color:var(--ink-70); }

/* ---------- HERO ART ---------- */
.hero__art { position:relative; }
.artframe {
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--r-xl);
  background:
    radial-gradient(90% 70% at 20% 12%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(155deg, #262423, var(--dark) 60%);
  box-shadow:0 30px 80px rgba(32,30,29,.28), 0 1px 0 rgba(255,255,255,.12) inset;
}
.artframe::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(243,242,242,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(243,242,242,.055) 1px, transparent 1px);
  background-size:46px 46px;
}
.artframe__glass { position:absolute; left:7%; top:13%; right:7%; overflow:hidden; z-index:1; }
.hero__lead {
  position:absolute; right:5%; bottom:8%; z-index:1;
  padding:13px 15px; max-width:236px;
  display:flex; align-items:flex-start; gap:10px;
  font-size:var(--t-meta); line-height:1.35;
  animation:tagFloat 7s ease-in-out infinite;
}
.hero__lead strong { display:block; font-weight:700; }
.hero__lead span { color:var(--ink-70); }

/* ---------- MOCKUP CHROME ---------- */
.browser { border-radius:var(--r); overflow:hidden; }
.browser__bar { display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:1px solid rgba(255,255,255,.45); }
.browser__dots { display:flex; gap:5px; flex:none; }
.browser__dots i { width:8px; height:8px; border-radius:50%; background:rgba(32,30,29,.2); }
.browser__url {
  flex:1; min-width:0; font-size:11px; color:var(--ink-70);
  background:rgba(255,255,255,.55); border-radius:var(--r-pill); padding:5px 11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.browser__body { padding:var(--s-3); display:grid; gap:10px; }
.browser--dark .browser__bar { border-bottom-color:rgba(243,242,242,.12); }
.browser--dark .browser__dots i { background:rgba(243,242,242,.28); }
.browser--dark .browser__url { background:rgba(243,242,242,.08); color:var(--on-dark-60); }

.bar { height:8px; border-radius:var(--r-pill); background:rgba(32,30,29,.14); }
.bar--wide{width:88%} .bar--mid{width:62%} .bar--short{width:38%}
.bar--tall{height:12px}
.bar--solid { background:rgba(32,30,29,.52); }
.browser--dark .bar, .screen .bar { background:rgba(243,242,242,.16); }
.browser--dark .bar--solid, .screen .bar--solid { background:rgba(243,242,242,.58); }
.chip-btn {
  display:inline-block; padding:7px 14px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--ground);
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- 03 · ARGUMENT — glass rows, no rules ---------- */
.arg { display:grid; gap:var(--s-2); }
.arg__row {
  display:grid; gap:var(--s-2);
  padding:var(--s-4);
  border-radius:var(--r);
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim-2);
  box-shadow:var(--glass-shadow);
  transition:transform .38s var(--e-reveal), box-shadow .38s var(--e-reveal);
}
.arg__row:hover { transform:translateY(-3px); box-shadow:var(--glass-shadow-lg); }
@media (min-width:900px){
  .arg__row { grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr); gap:var(--s-5); align-items:start; padding:var(--s-5); }
}
.arg__n {
  font-size:var(--t-numeral); font-weight:800; line-height:.8; letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg, var(--ink), rgba(32,30,29,.35));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (min-width:900px){ .arg__n { min-width:2.2ch; } }
.arg__h { font-size:var(--t-h3); font-weight:700; line-height:1.2; max-width:22ch; }
.arg__b { color:var(--ink-70); max-width:52ch; }

/* ---------- 04 · LOOP — glass cells ---------- */
.loop { display:grid; gap:var(--s-2); }
@media (min-width:640px){ .loop { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .loop { grid-template-columns:repeat(5,1fr); } }
.loop__cell {
  padding:var(--s-3);
  border-radius:var(--r-sm);
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim-2);
  box-shadow:var(--glass-shadow);
  display:flex; flex-direction:column; gap:var(--s-2); min-height:186px;
  transition:transform .38s var(--e-reveal), box-shadow .38s var(--e-reveal);
}
.loop__cell:hover { transform:translateY(-4px); box-shadow:var(--glass-shadow-lg); }
.loop__n {
  font-size:var(--t-meta); font-weight:700; letter-spacing:.14em;
  color:var(--ink-muted); font-variant-numeric:tabular-nums;
}
.loop__h { font-size:var(--t-h3); font-weight:700; line-height:1.2; }
.loop__b { font-size:.9375rem; color:var(--ink-70); margin-top:auto; }
.loop__note {
  margin-top:var(--s-4); font-size:var(--t-h3); font-weight:700;
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 22px; border-radius:var(--r-pill);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim); box-shadow:var(--glass-shadow);
}
.loop__note svg { animation:levo-nudge 1.8s ease-in-out infinite; }

/* ---------- 05 · WHAT WE BUILD ---------- */
.build { display:grid; gap:var(--s-3); }
@media (min-width:700px){ .build { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .build { grid-template-columns:repeat(3,1fr); } }
.cell {
  position:relative; overflow:hidden; min-height:330px;
  display:flex; flex-direction:column;
  border-radius:var(--r);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim);
  box-shadow:var(--glass-shadow);
  transition:transform .38s var(--e-reveal), box-shadow .38s var(--e-reveal);
}
.cell:hover { transform:translateY(-4px); box-shadow:var(--glass-shadow-lg); }
.cell__inner { position:relative; z-index:1; padding:var(--s-3); display:flex; flex-direction:column; gap:var(--s-2); height:100%; }
.cell__icon {
  width:44px; height:44px; flex:none; border-radius:var(--r-xs);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.62); border:1px solid var(--glass-rim);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 4px 12px rgba(32,30,29,.07);
}
.cell__h { font-size:var(--t-h3); font-weight:700; line-height:1.2; }
.cell__b { font-size:.9375rem; color:var(--ink-70); max-width:36ch; }
.cell__preview {
  margin-top:auto; padding:var(--s-2); display:grid; gap:8px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.42);
  border:1px solid var(--glass-rim-2);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
.cell__preview .row { display:flex; align-items:center; gap:8px; }
.cell__preview .label {
  font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-70);
}
.mini-input { flex:1; height:26px; border-radius:var(--r-xs); background:rgba(255,255,255,.75); border:1px solid rgba(32,30,29,.12); }
.dot-live { width:8px; height:8px; border-radius:50%; background:var(--ink); flex:none; animation:levo-pulse 2s ease-in-out infinite; }

/* ---------- 06 · WHERE IT SHOWS UP ---------- */
.where {
  position:relative; overflow:hidden;
  color:var(--on-dark);
  border-radius:var(--r-xl);
  margin-inline:var(--gutter); padding-inline:0;
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(160deg, #232120, var(--dark) 58%);
  box-shadow:0 34px 90px rgba(32,30,29,.30);
}
.where > .wrap { padding-inline:clamp(var(--s-3), 5vw, var(--s-7)); max-width:none; }
.where .kicker { color:var(--on-dark-60); }
.where .h2 { color:var(--on-dark); }
.where__grid { display:grid; gap:var(--s-6); }
@media (min-width:1000px){ .where__grid { grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:var(--s-8); align-items:start; } }
.where__steps { display:grid; gap:var(--s-2); }
.where__step {
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  opacity:1;
  transition:opacity .3s ease, background .3s ease, transform .38s var(--e-reveal);
}
/* Dimming is opt-in: only scroll-animations.js sets data-enhanced, and it only
   runs if the page is interactive. CSS default stays fully readable. */
.where__steps[data-enhanced="true"] .where__step { opacity:.45; }
.where__steps[data-enhanced="true"] .where__step[data-active="true"] {
  opacity:1; background:rgba(255,255,255,.10); transform:translateX(4px);
}
.where__step h3 { font-size:var(--t-h3); font-weight:700; margin-bottom:8px; }
.where__step p { color:var(--on-dark-78); max-width:46ch; }
.where__stepn { font-size:var(--t-meta); font-weight:700; letter-spacing:.14em; color:var(--on-dark-60); margin-bottom:10px; font-variant-numeric:tabular-nums; }
.where__sticky { position:relative; }
@media (min-width:1000px){ .where__sticky { position:sticky; top:calc(var(--nav-h) + 44px); } }
.phone {
  position:relative; margin-inline:auto;
  width:min(292px,80vw); aspect-ratio:9/19.5;
  border-radius:46px; padding:12px;
  background:rgba(255,255,255,.09);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 34px 90px rgba(0,0,0,.60), 0 1px 0 rgba(255,255,255,.16) inset;
}
.phone__screen { position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden; background:#0f0e0e; }
.phone__notch { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:78px; height:22px; border-radius:var(--r-pill); background:#0a0909; z-index:3; }
.screen { position:absolute; inset:0; padding:40px 14px 14px; display:grid; gap:10px; align-content:start; opacity:0; visibility:hidden; }
.screen[data-active="true"] { opacity:1; visibility:visible; }
.screen__t { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-60); }
.bubble { padding:9px 12px; border-radius:var(--r-sm); font-size:11px; line-height:1.4; background:rgba(243,242,242,.12); color:var(--on-dark); max-width:82%; }
.bubble--me { margin-left:auto; background:rgba(243,242,242,.80); color:var(--dark); }
.callrow { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid rgba(243,242,242,.12); font-size:11px; color:var(--on-dark); }
.callrow span:last-child { margin-left:auto; color:var(--on-dark-60); font-variant-numeric:tabular-nums; }

/* ---------- 07 · CHATBOT IN SITU ---------- */
.situ__frame {
  position:relative; overflow:hidden; aspect-ratio:16/10;
  border-radius:var(--r-xl);
  background:
    radial-gradient(70% 60% at 78% 8%, rgba(255,255,255,.13), transparent 58%),
    linear-gradient(150deg, #242221, var(--dark) 62%);
  box-shadow:0 30px 80px rgba(32,30,29,.26);
}
@media (max-width:700px){ .situ__frame { aspect-ratio:4/5; } }
.situ__frame::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(243,242,242,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(243,242,242,.05) 1px, transparent 1px);
  background-size:46px 46px;
}
.situ__site { position:absolute; inset:0; padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-2); color:var(--on-dark); z-index:1; }
.situ__brand { font-size:var(--t-meta); font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.situ__hl { font-size:clamp(1.25rem,2.6vw,2rem); font-weight:700; line-height:1.1; max-width:16ch; }
.situ__widget { position:absolute; right:var(--s-3); bottom:var(--s-3); width:min(300px,78%); padding:var(--s-2); display:grid; gap:8px; z-index:2; }
.situ__whead { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-78); padding-bottom:8px; border-bottom:1px solid rgba(243,242,242,.14); }
.typing { display:inline-flex; gap:4px; align-items:center; padding:4px 0; }
.typing i { width:5px; height:5px; border-radius:50%; background:var(--on-dark-60); animation:blip 1.25s infinite ease-in-out; }
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
@keyframes blip { 0%,60%,100%{opacity:.28;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }
.illus { display:inline-flex; align-items:center; gap:7px; margin-top:var(--s-3); font-size:var(--t-meta); color:var(--ink-muted); }

/* ---------- 08 · STEPS ---------- */
.steps { display:grid; gap:var(--s-3); }
@media (min-width:900px){ .steps { grid-template-columns:repeat(3,1fr); } }
.step {
  padding:var(--s-4); border-radius:var(--r);
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim-2); box-shadow:var(--glass-shadow);
  transition:transform .38s var(--e-reveal), box-shadow .38s var(--e-reveal);
}
.step:hover { transform:translateY(-4px); box-shadow:var(--glass-shadow-lg); }
.step__w {
  display:inline-block; margin-bottom:var(--s-2); padding:5px 12px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.55);
  border:1px solid var(--glass-rim-2);
  font-size:var(--t-meta); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-70);
}
.step__h { font-size:var(--t-h3); font-weight:700; margin-bottom:8px; }
.step__b { color:var(--ink-70); font-size:.9375rem; max-width:40ch; }

/* ---------- 09 · WORK ---------- */
.rail { display:flex; gap:var(--s-3); overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px var(--s-3); scrollbar-width:thin; }
.rail::-webkit-scrollbar { height:3px; }
.rail::-webkit-scrollbar-track { background:rgba(32,30,29,.08); border-radius:var(--r-pill); }
.rail::-webkit-scrollbar-thumb { background:rgba(32,30,29,.4); border-radius:var(--r-pill); }
.wcard {
  flex:0 0 min(420px,84vw); scroll-snap-align:start;
  position:relative; overflow:hidden; min-height:410px;
  display:flex; flex-direction:column;
  border-radius:var(--r);
  color:var(--on-dark);
  background:
    radial-gradient(85% 65% at 18% 6%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(158deg, #262423, var(--dark) 62%);
  box-shadow:0 24px 60px rgba(32,30,29,.26), 0 1px 0 rgba(255,255,255,.12) inset;
  transition:transform .38s var(--e-reveal), box-shadow .38s var(--e-reveal);
}
.wcard:hover { transform:translateY(-4px); box-shadow:0 34px 80px rgba(32,30,29,.34), 0 1px 0 rgba(255,255,255,.14) inset; }
.wcard__in { position:relative; z-index:1; padding:var(--s-3); display:flex; flex-direction:column; gap:var(--s-2); height:100%; }
.wcard__tag {
  align-self:flex-start; padding:6px 13px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.wcard__h { font-size:var(--t-h3); font-weight:700; }
.wcard__b { font-size:.9375rem; color:var(--on-dark-78); max-width:36ch; }
.wcard__metric {
  margin-top:auto; padding-top:var(--s-2);
  font-size:1.15rem; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.wcard__mock { margin-top:var(--s-2); padding:var(--s-2); display:grid; gap:7px; }
.wcard .bar { background:rgba(243,242,242,.18); }
.wcard .bar--solid { background:rgba(243,242,242,.58); }

.railnav { display:flex; gap:var(--s-1); margin-top:var(--s-2); }
.railbtn {
  width:50px; height:50px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim); box-shadow:var(--glass-shadow);
  cursor:pointer; transition:transform .2s var(--e-hover), background .16s ease;
}
.railbtn:hover:not([disabled]) { background:rgba(255,255,255,.8); transform:translateY(-2px); }
.railbtn[disabled] { opacity:.35; cursor:not-allowed; }

.reels { display:grid; gap:var(--s-3); margin-top:var(--s-6); }
@media (min-width:700px){ .reels { grid-template-columns:repeat(3,1fr); } }
.reel {
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r);
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim); box-shadow:var(--glass-shadow);
  transition:transform .38s var(--e-reveal), box-shadow .38s var(--e-reveal);
}
.reel:hover { transform:translateY(-4px); box-shadow:var(--glass-shadow-lg); }
.reel__frame { position:relative; aspect-ratio:9/16; background:var(--dark); }
.reel__link { position:absolute; inset:0; display:block; }
.reel__link img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reel__play {
  position:absolute; left:var(--s-2); bottom:var(--s-2);
  display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:8px 13px; border-radius:var(--r-pill);
  background:rgba(23,22,21,.62);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(243,242,242,.24); color:var(--on-dark);
  font-size:var(--t-meta); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:background .2s var(--e-hover);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .reel__play { background:rgba(23,22,21,.92); } }
.reel__link:hover .reel__play { background:var(--ink); }
.reel__ph {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-end; gap:6px; padding:var(--s-3);
  color:var(--on-dark-60); font-size:var(--t-meta);
  background-image:
    linear-gradient(to right, rgba(243,242,242,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(243,242,242,.06) 1px, transparent 1px);
  background-size:30px 30px;
}
.reel__cap { padding:var(--s-2) var(--s-3); font-size:var(--t-meta); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- 10 · TESTIMONIALS ---------- */
.quotes { display:grid; gap:var(--s-3); }
@media (min-width:800px){ .quotes { grid-template-columns:repeat(2,1fr); } }
.quote {
  padding:var(--s-4); border-radius:var(--r);
  display:flex; flex-direction:column; gap:var(--s-3);
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim); box-shadow:var(--glass-shadow);
  transition:transform .38s var(--e-reveal), box-shadow .38s var(--e-reveal);
}
.quote:hover { transform:translateY(-4px); box-shadow:var(--glass-shadow-lg); }
.quote blockquote { font-size:clamp(1.05rem,1.6vw,1.28rem); font-weight:500; line-height:1.42; max-width:38ch; }
.quote figcaption { margin-top:auto; font-size:var(--t-meta); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); }

/* ---------- 11 · ABOUT ---------- */
.about__grid { display:grid; gap:var(--s-3); }
@media (min-width:900px){ .about__grid { grid-template-columns:repeat(3,1fr); } }
.about__pt {
  padding:var(--s-4); border-radius:var(--r);
  background:var(--glass-2); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim-2); box-shadow:var(--glass-shadow);
  transition:transform .38s var(--e-reveal), box-shadow .38s var(--e-reveal);
}
.about__pt:hover { transform:translateY(-4px); box-shadow:var(--glass-shadow-lg); }
.about__pt h3 { font-size:var(--t-h3); font-weight:700; margin-bottom:8px; }
.about__pt p { color:var(--ink-70); font-size:.9375rem; max-width:34ch; }

/* ---------- 12 · POSTER CLOSE ---------- */
.poster {
  position:relative; overflow:hidden;
  color:var(--on-dark);
  border-radius:var(--r-xl);
  margin:var(--s-6) var(--gutter);
  padding-block:var(--s-8);
  background:
    radial-gradient(70% 60% at 14% 4%, rgba(255,255,255,.13), transparent 58%),
    linear-gradient(155deg, #242221, #101010 65%);
  box-shadow:0 40px 100px rgba(32,30,29,.34);
}
.poster::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(243,242,242,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(243,242,242,.05) 1px, transparent 1px);
  background-size:64px 64px;
}
.poster > .wrap { max-width:none; padding-inline:clamp(var(--s-3), 5vw, var(--s-7)); }
.poster__panel { position:relative; padding:clamp(var(--s-4), 5vw, var(--s-7)); max-width:1080px; }
.poster__t { font-size:var(--t-display); font-weight:800; line-height:.98; letter-spacing:-.04em; max-width:15ch; text-wrap:balance; }

/* ---------- 13 · CONTACT ---------- */
.contact__grid { display:grid; gap:var(--s-6); }
@media (min-width:900px){ .contact__grid { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--s-8); } }
.form { display:grid; gap:var(--s-3); }
.form__summary { display:none; padding:var(--s-3); border-radius:var(--r-sm); }
.form__summary[data-show="true"] { display:block; }
.form__summary h3 { font-size:var(--t-meta); font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; }
.form__summary a { text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.form__summary li + li { margin-top:4px; }
.form__ok { display:none; align-items:flex-start; gap:12px; padding:var(--s-3); border-radius:var(--r-sm); }
.form[data-sent="true"] .form__ok { display:flex; }
.form[data-sent="true"] .form__fields { display:none; }
.form__fields { display:grid; gap:var(--s-3); }

/* ---------- 14 · FOOTER ---------- */
.foot { padding-block:var(--s-5) var(--s-6); }
.foot__in {
  display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center;
  padding:var(--s-3) var(--s-4); border-radius:var(--r-pill);
  background:var(--glass-2); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-rim-2); box-shadow:var(--glass-shadow);
}
@media (max-width:640px){ .foot__in { border-radius:var(--r); } }
.foot__meta { margin-left:auto; font-size:var(--t-meta); color:var(--ink-muted); }
.foot__links { display:flex; gap:var(--s-3); flex-wrap:wrap; }
.foot__links a { font-size:var(--t-meta); font-weight:500; transition:color .14s; }
.foot__links a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   MOTION — transcribed from levo-studio.com
   See levo-motion-reference.html for the full catalogue.
   ============================================================ */
@keyframes levo-hero-in {
  0% { opacity:0; transform:translateY(28px); filter:blur(8px); }
  to { opacity:1; transform:translateY(0);    filter:blur(0);   }
}
@keyframes levo-nudge { 0%,to{transform:translateX(0)} 50%{transform:translateX(5px)} }
@keyframes levo-pulse {
  0%,to { box-shadow:0 0 0 0 rgba(32,30,29,.35); opacity:.9; }
  50%   { box-shadow:0 0 0 5px rgba(32,30,29,0); opacity:1; }
}
@keyframes tagFloat { 0%,to{transform:translateY(-2px)} 50%{transform:translate(3px,2px)} }

/* Load entrance — hero children, 120ms flat stagger, exactly as Levo */
.hero-in > * { animation:levo-hero-in 1.05s var(--e-entrance) both; }
.hero-in > :first-child  { animation-delay:.08s }
.hero-in > :nth-child(2) { animation-delay:.20s }
.hero-in > :nth-child(3) { animation-delay:.32s }
.hero-in > :nth-child(4) { animation-delay:.44s }
.hero-in > :nth-child(5) { animation-delay:.56s }
.hero__art { animation:levo-hero-in 1.15s var(--e-entrance) both; animation-delay:.42s; }

/* Scroll entrance — same keyframe, applied when a section enters view.
   Levo's own page is short enough to reveal everything on load; a 14-section
   page needs an entry trigger or the motion happens off-screen. Content is
   visible by default and only hidden once JS confirms it can animate it. */
[data-reveal].is-armed { opacity:0; transform:translateY(28px); filter:blur(8px); }
[data-reveal].is-in {
  opacity:1; transform:translateY(0); filter:blur(0);
  transition:opacity .62s var(--e-entrance), transform .9s var(--e-entrance), filter .9s var(--e-entrance);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .hero-in > *, .hero__art { animation:none; opacity:1; transform:none; filter:none; }
  [data-reveal].is-armed { opacity:1; transform:none; filter:none; }
  .typing i { animation:none; opacity:.6; }
}