/* ==========================================================================
   LL2 GROUP — Design System
   One stylesheet, no dependencies. Fast, quirky, mobile-first.
   ========================================================================== */

/* ----- Design tokens ---------------------------------------------------- */
:root{
  /* palette */
  --ink:        #0a0e17;   /* near-black navy */
  --ink-2:      #10161f;
  --ink-3:      #171f2b;
  --surface:    #131a24;
  --surface-2:  #1b2430;
  --line:       #263140;
  --line-soft:  #1d2733;
  --text:       #e9eef5;
  --text-dim:   #9fb0c3;
  --text-mute:  #6d7f93;

  /* brand accents */
  --lime:       #c8fa4b;   /* electric signature */
  --lime-deep:  #a6e017;
  --cyan:       #46e6d9;
  --violet:     #8b7bff;
  --coral:      #ff7a59;
  --gold:       #ffd166;

  --accent:     var(--lime);
  --accent-ink: #0a0e17;

  /* type */
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;

  /* geometry */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --maxw: 1200px;
  --gut:  clamp(20px, 5vw, 48px);

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --slow: cubic-bezier(.16,1,.3,1);

  --shadow: 0 24px 60px -24px rgba(0,0,0,.7);
  --glow: 0 0 0 1px rgba(200,250,75,.25), 0 18px 50px -18px rgba(200,250,75,.35);
}

/* ----- Reset-ish -------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }
body{
  margin:0; font-family:var(--sans); background:var(--ink); color:var(--text);
  line-height:1.6; font-size:17px; letter-spacing:.1px;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ line-height:1.05; margin:0 0 .4em; font-weight:800; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
::selection{ background:var(--lime); color:var(--accent-ink); }

/* fluid type scale */
h1{ font-size:clamp(2.4rem, 6.2vw, 5.2rem); }
h2{ font-size:clamp(1.9rem, 4.2vw, 3.3rem); }
h3{ font-size:clamp(1.3rem, 2.4vw, 1.8rem); }
.lead{ font-size:clamp(1.05rem, 1.6vw, 1.3rem); color:var(--text-dim); }
.eyebrow{
  font:600 .8rem/1 var(--mono); letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:.6em; margin-bottom:1rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); display:inline-block; }

/* ----- Layout ----------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(60px, 9vw, 130px); position:relative; }
.section--tight{ padding-block:clamp(40px,6vw,80px); }
.grid{ display:grid; gap:clamp(18px,3vw,30px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr;} }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.measure{ max-width:640px; }
.measure-lg{ max-width:820px; }

/* ----- Buttons ---------------------------------------------------------- */
.btn{
  --bg:var(--accent); --fg:var(--accent-ink);
  display:inline-flex; align-items:center; gap:.55em; padding:.85em 1.5em;
  background:var(--bg); color:var(--fg); border:1px solid transparent; border-radius:100px;
  font-weight:700; font-size:.98rem; letter-spacing:.01em; position:relative;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--glow); }
.btn:active{ transform:translateY(0); }
.btn .arw{ transition:transform .25s var(--ease); }
.btn:hover .arw{ transform:translate(3px,-3px); }
.btn--ghost{ --bg:transparent; --fg:var(--text); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--accent); box-shadow:none; color:var(--text); }
.btn--dark{ --bg:var(--ink); --fg:var(--text); border:1px solid var(--line); }
.btn--lg{ padding:1.05em 1.9em; font-size:1.05rem; }
.btn--sm{ padding:.6em 1.05em; font-size:.85rem; }

/* ----- Header ----------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100; backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--ink) 78%, transparent);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.site-header.scrolled{ border-color:var(--line-soft); background:color-mix(in srgb,var(--ink) 92%, transparent); }
.nav{ display:flex; align-items:center; gap:1.4rem; height:74px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:900; letter-spacing:-.03em; font-size:1.35rem; }
.brand .mark{ width:34px; height:34px; flex:0 0 auto; }
.brand b{ color:var(--accent); }
.nav__links{ display:flex; align-items:center; gap:.3rem; margin-left:1rem; }
.nav__links > li{ position:relative; }
.nav__links a.top, .nav__links button.top{
  display:inline-flex; align-items:center; gap:.35em; padding:.55em .8em; border-radius:10px;
  color:var(--text-dim); font-weight:600; font-size:.94rem; background:none; border:none;
  transition:color .2s, background .2s;
}
.nav__links a.top:hover, .nav__links button.top:hover,
.nav__links li.open > .top{ color:var(--text); background:var(--surface); }
.nav__links a.active{ color:var(--accent); }
.caret{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .25s; }
.nav__links li.open .caret{ transform:rotate(-135deg) translateY(-1px); }
.mega{
  position:absolute; top:calc(100% + 10px); left:0; min-width:280px; padding:.6rem;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); display:grid; gap:.15rem;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.22s var(--ease);
}
.nav__links li.open .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega a{ display:flex; gap:.75rem; align-items:flex-start; padding:.6rem .7rem; border-radius:10px; transition:background .18s; }
.mega a:hover{ background:var(--surface); }
.mega .ic{ font-size:1.1rem; line-height:1.4; }
.mega .t{ font-weight:700; font-size:.95rem; color:var(--text); }
.mega .d{ font-size:.8rem; color:var(--text-mute); }
.nav__spacer{ margin-left:auto; }
.nav__cta{ display:flex; align-items:center; gap:.6rem; }
.nav__burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); position:relative; }
.nav__burger span{ position:absolute; left:12px; right:12px; height:2px; background:var(--text); transition:.3s var(--ease); }
.nav__burger span:nth-child(1){ top:15px; } .nav__burger span:nth-child(2){ top:21px; } .nav__burger span:nth-child(3){ top:27px; }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ opacity:0; }
body.menu-open .nav__burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1024px){
  .nav__links, .nav__cta .btn--ghost{ display:none; }
  .nav__burger{ display:block; }
  .nav__spacer{ margin-left:auto; }
}

/* mobile drawer */
.drawer{
  position:fixed; inset:74px 0 0; z-index:99; background:var(--ink); padding:var(--gut);
  transform:translateX(100%); transition:transform .35s var(--slow); overflow-y:auto;
  display:flex; flex-direction:column; gap:.4rem;
}
body.menu-open .drawer{ transform:translateX(0); }
.drawer a{ padding:.9rem 0; border-bottom:1px solid var(--line-soft); font-size:1.15rem; font-weight:700; }
.drawer .sub{ font-size:.95rem; font-weight:500; color:var(--text-dim); padding-left:1rem; }
.drawer .grp{ font:600 .75rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); padding:1.2rem 0 .3rem; }
.drawer .btn{ margin-top:1rem; justify-content:center; }

/* ----- Hero & decorative ------------------------------------------------ */
.glowbg{ position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.blob--lime{ width:520px; height:520px; background:radial-gradient(circle,var(--lime),transparent 70%); }
.blob--cyan{ width:440px; height:440px; background:radial-gradient(circle,var(--cyan),transparent 70%); }
.blob--violet{ width:480px; height:480px; background:radial-gradient(circle,var(--violet),transparent 70%); }
.gridlines{ position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0,#000,transparent 75%); }

.hero{ position:relative; padding-block:clamp(70px,11vw,150px) clamp(50px,8vw,110px); overflow:hidden; }
.hero h1{ max-width:14ch; }
.hero .lead{ max-width:52ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,60px); margin-top:3.2rem; padding-top:2rem; border-top:1px solid var(--line-soft); }
.stat b{ display:block; font-size:clamp(1.8rem,3.4vw,2.8rem); font-weight:900; letter-spacing:-.03em; color:var(--text); }
.stat b .u{ color:var(--accent); }
.stat span{ color:var(--text-mute); font-size:.9rem; }

/* highlight text */
.hl{ position:relative; color:var(--accent); }
.hl-underline{ background:linear-gradient(transparent 62%, color-mix(in srgb,var(--lime) 40%,transparent) 0); }
.txt-cyan{ color:var(--cyan);} .txt-violet{ color:var(--violet);} .txt-coral{ color:var(--coral);} .txt-gold{ color:var(--gold);}

/* ----- Cards ------------------------------------------------------------ */
.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px); position:relative; overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover{ transform:translateY(-4px); border-color:var(--line); box-shadow:var(--shadow); }
.card .ic{ width:52px; height:52px; display:grid; place-items:center; border-radius:14px;
  background:color-mix(in srgb,var(--accent) 14%, transparent); color:var(--accent); font-size:1.5rem; margin-bottom:1.1rem; }
.card h3{ margin-bottom:.4rem; }
.card p{ color:var(--text-dim); font-size:.98rem; margin-bottom:0; }
.card--link::after{ content:"→"; position:absolute; top:24px; right:24px; color:var(--text-mute); transition:.25s var(--ease); }
.card--link:hover::after{ color:var(--accent); transform:translate(3px,-3px); }
.card--feature{ background:linear-gradient(160deg,var(--surface-2),var(--surface)); }
.card--accent{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.card--accent .ic{ background:rgba(10,14,23,.12); color:var(--accent-ink); }
.card--accent p{ color:rgba(10,14,23,.75); }
.card__tag{ font:600 .72rem/1 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
  display:inline-block; margin-bottom:.9rem; }

/* pill / chips */
.pill{ display:inline-flex; align-items:center; gap:.5em; padding:.4em .9em; border-radius:100px;
  background:var(--surface); border:1px solid var(--line); font-size:.82rem; color:var(--text-dim); font-weight:600; }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent); }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* ----- Marquee ---------------------------------------------------------- */
.marquee{ overflow:hidden; border-block:1px solid var(--line-soft); padding-block:1.4rem; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee__row{ display:flex; gap:3.5rem; width:max-content; animation:scroll 32s linear infinite; }
.marquee:hover .marquee__row{ animation-play-state:paused; }
.marquee__row span{ font-weight:800; font-size:1.15rem; color:var(--text-mute); letter-spacing:-.01em; display:inline-flex; align-items:center; gap:1rem; white-space:nowrap; }
.marquee__row span::after{ content:"✦"; color:var(--accent); font-size:.8rem; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ----- Split / feature rows -------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:center; }
.split--reverse .split__media{ order:2; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split--reverse .split__media{ order:0; } }
.panel{ background:linear-gradient(160deg,var(--surface-2),var(--ink-2)); border:1px solid var(--line-soft);
  border-radius:var(--r-xl); padding:clamp(24px,4vw,44px); }

/* list checks */
.checks li{ display:flex; gap:.8rem; padding:.55rem 0; color:var(--text-dim); align-items:flex-start; }
.checks li::before{ content:"✓"; color:var(--accent-ink); background:var(--accent); width:22px; height:22px; flex:0 0 auto;
  border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:900; margin-top:2px; }

/* numbered steps */
.steps{ counter-reset:s; display:grid; gap:1.2rem; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start; padding:1.4rem 0; border-top:1px solid var(--line-soft); }
.step::before{ counter-increment:s; content:"0" counter(s); font:800 1.4rem/1 var(--mono); color:var(--accent); }
.step h3{ margin-bottom:.25rem; } .step p{ color:var(--text-dim); margin:0; }

/* stats band */
.band{ background:var(--accent); color:var(--accent-ink); }
.band .stat b{ color:var(--accent-ink); } .band .stat span{ color:rgba(10,14,23,.7); }

/* ----- Tables ----------------------------------------------------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r); }
table{ width:100%; border-collapse:collapse; min-width:560px; }
th,td{ text-align:left; padding:1rem 1.2rem; border-bottom:1px solid var(--line-soft); font-size:.95rem; }
th{ font:700 .78rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); }
tbody tr:hover{ background:var(--surface); } tr:last-child td{ border-bottom:none; }

/* ----- Accordion (FAQ) -------------------------------------------------- */
.acc{ border-top:1px solid var(--line-soft); }
.acc__item{ border-bottom:1px solid var(--line-soft); }
.acc__q{ display:flex; justify-content:space-between; align-items:center; gap:1rem; width:100%; text-align:left;
  background:none; border:none; color:var(--text); padding:1.4rem 0; font-size:1.1rem; font-weight:700; }
.acc__q .plus{ position:relative; width:20px; height:20px; flex:0 0 auto; }
.acc__q .plus::before,.acc__q .plus::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--accent); }
.acc__q .plus::before{ width:100%; height:2px; } .acc__q .plus::after{ width:2px; height:100%; transition:transform .3s; }
.acc__item.open .plus::after{ transform:rotate(90deg); }
.acc__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.acc__a p{ color:var(--text-dim); padding-bottom:1.4rem; margin:0; }

/* ----- Forms ------------------------------------------------------------ */
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.85rem; font-weight:600; color:var(--text-dim); margin-bottom:.45rem; }
.input,.select,textarea.input{
  width:100%; padding:.9em 1.1em; background:var(--ink-2); border:1px solid var(--line);
  border-radius:12px; color:var(--text); font:inherit; transition:border-color .2s, box-shadow .2s;
}
.input:focus,.select:focus,textarea.input:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.input::placeholder{ color:var(--text-mute); }
.form-note{ font-size:.82rem; color:var(--text-mute); }
.alert{ padding:.85rem 1.1rem; border-radius:12px; font-size:.9rem; font-weight:600; display:none; align-items:center; gap:.6rem; margin-bottom:1rem; }
.alert.show{ display:flex; }
.alert--err{ background:color-mix(in srgb,var(--coral) 15%,transparent); border:1px solid color-mix(in srgb,var(--coral) 40%,transparent); color:#ffb3a1; }
.alert--ok{ background:color-mix(in srgb,var(--lime) 12%,transparent); border:1px solid color-mix(in srgb,var(--lime) 35%,transparent); color:var(--lime); }

/* ----- Login shell ------------------------------------------------------ */
.auth{ min-height:calc(100vh - 74px); display:grid; grid-template-columns:1.1fr .9fr; }
@media (max-width:900px){ .auth{ grid-template-columns:1fr; } .auth__aside{ display:none; } }
.auth__aside{ position:relative; overflow:hidden; padding:var(--gut); display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(160deg,var(--ink-2),var(--ink)); border-right:1px solid var(--line-soft); }
.auth__form{ display:flex; align-items:center; justify-content:center; padding:var(--gut); }
.auth__card{ width:100%; max-width:420px; }

/* ----- Blog ------------------------------------------------------------- */
.post{ display:grid; gap:0; }
.post-card{ display:flex; flex-direction:column; height:100%; }
.post-card .thumb{ aspect-ratio:16/10; border-radius:var(--r); overflow:hidden; margin-bottom:1.1rem; position:relative; }
.post-card .thumb .g{ position:absolute; inset:0; }
.post-card .meta{ font:600 .74rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin-bottom:.6rem; display:flex; gap:.7rem; }
.post-card h3{ font-size:1.25rem; margin-bottom:.5rem; }
.post-card:hover h3{ color:var(--accent); }
.post-card p{ color:var(--text-dim); font-size:.95rem; }
.article{ max-width:740px; margin-inline:auto; }
.article p{ font-size:1.1rem; color:var(--text-dim); }
.article h2{ margin-top:2.2rem; } .article h3{ margin-top:1.8rem; color:var(--text); }
.article blockquote{ margin:2rem 0; padding:1.2rem 1.6rem; border-left:3px solid var(--accent);
  background:var(--surface); border-radius:0 var(--r) var(--r) 0; font-size:1.2rem; color:var(--text); font-weight:600; }
.article a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ----- Team ------------------------------------------------------------- */
.person .ph{ aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; margin-bottom:1rem; position:relative; display:grid; place-items:center; }
.person .ph .initials{ font:900 2.6rem/1 var(--sans); color:rgba(255,255,255,.9); letter-spacing:-.03em; }
.person h3{ font-size:1.15rem; margin-bottom:.15rem; }
.person .role{ color:var(--accent); font-size:.9rem; font-weight:600; }
.person .bio{ color:var(--text-mute); font-size:.88rem; margin-top:.5rem; }

/* ----- Page header ------------------------------------------------------ */
.page-head{ position:relative; padding-block:clamp(60px,9vw,120px) clamp(30px,5vw,56px); overflow:hidden; }
.page-head h1{ max-width:16ch; } .page-head .lead{ max-width:56ch; }
.crumbs{ font:600 .8rem/1 var(--mono); letter-spacing:.1em; color:var(--text-mute); margin-bottom:1.4rem; display:flex; gap:.5rem; }
.crumbs a:hover{ color:var(--accent); }

/* ----- CTA block -------------------------------------------------------- */
.cta-block{ position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--ink-3),var(--ink-2)); border:1px solid var(--line);
  padding:clamp(36px,6vw,72px); text-align:center; }
.cta-block h2{ max-width:18ch; margin-inline:auto; }
.cta-block .hero__cta{ justify-content:center; }

/* ----- Footer ----------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line-soft); background:var(--ink-2); padding-block:clamp(48px,7vw,84px) 2rem; }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:clamp(24px,4vw,40px); }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-col h4{ font:700 .76rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); margin-bottom:1.1rem; }
.foot-col a{ display:block; color:var(--text-dim); padding:.32rem 0; font-size:.94rem; transition:color .2s; }
.foot-col a:hover{ color:var(--accent); }
.foot-brand p{ color:var(--text-mute); font-size:.92rem; max-width:32ch; margin-top:1rem; }
.foot-addr{ font-size:.9rem; color:var(--text-dim); margin-top:1.2rem; line-height:1.7; }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  margin-top:clamp(36px,5vw,56px); padding-top:1.6rem; border-top:1px solid var(--line-soft);
  font-size:.84rem; color:var(--text-mute); }
.foot-bottom .legal{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.disclaimer{ font-size:.78rem; color:var(--text-mute); line-height:1.6; margin-top:1.4rem; max-width:70ch; }

/* ----- Reveal animation ------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--slow), transform .7s var(--slow); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }

/* ----- Utilities -------------------------------------------------------- */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2.5rem}
.mb-0{margin-bottom:0}.gap-sm{gap:.6rem}
.flex{display:flex}.wrap-f{flex-wrap:wrap}.items-c{align-items:center}.justify-c{justify-content:center}.between{justify-content:space-between}
.dim{color:var(--text-dim)}.mute{color:var(--text-mute)}
.badge{ display:inline-flex; gap:.4em; align-items:center; padding:.35em .8em; border-radius:8px; font:700 .74rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.badge--lime{ background:color-mix(in srgb,var(--lime) 15%,transparent); color:var(--lime); }
.badge--cyan{ background:color-mix(in srgb,var(--cyan) 15%,transparent); color:var(--cyan); }
.badge--violet{ background:color-mix(in srgb,var(--violet) 15%,transparent); color:var(--violet); }
.hr{ height:1px; background:var(--line-soft); border:0; margin-block:clamp(30px,5vw,60px); }
.kpi{ font:800 clamp(2rem,4vw,3.4rem)/1 var(--sans); letter-spacing:-.03em; }
.mono{ font-family:var(--mono); }