/* ==========================================================================
   SALESDAD.COM — Design System
   White-dominant tone. Brand palette per brief:
     navy #101827 · blue #1463B4 · white #F4F7FB · AI accent #36B7A0 · grey #64748B
   Dark surfaces are used sparingly: the footer and the CTA band only.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --navy:#101827;
  --blue:#1463B4;
  --blue-bright:#2C8AE8;
  --blue-deep:#0d3f73;
  --ai:#36B7A0;
  --ai-bright:#4BE0C4;
  --ai-ink:#1C8E7C;
  --white:#F4F7FB;
  --grey:#64748B;

  /* Surfaces — white-led */
  --bg:#FFFFFF;
  --bg-alt:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#EFF4FA;
  --band-bg:#F1F5FA;      /* tinted band — reads clearly against white */
  --footer-bg:#E7EEF7;    /* one step deeper again, to anchor the page foot */
  --hero-tint-a:rgba(44,138,232,.13);
  --hero-tint-b:rgba(54,183,160,.10);
  --hero-base:#FFFFFF;
  --grid-line:rgba(16,24,39,.055);
  --orb-opacity:.34;

  /* Ink */
  --text:#101827;
  --text-soft:#4D596B;
  --text-mute:#64748B; /* brief's cool grey — 4.76:1 on white */
  --line:rgba(16,24,39,.09);
  --line-soft:rgba(16,24,39,.055);

  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --radius-xl:32px;

  --shadow-s:0 1px 2px rgba(16,24,39,.04), 0 2px 8px rgba(16,24,39,.035);
  --shadow:0 4px 12px rgba(16,24,39,.055), 0 18px 40px -16px rgba(16,24,39,.12);
  --shadow-l:0 10px 30px rgba(16,24,39,.07), 0 40px 80px -32px rgba(16,24,39,.2);
  --glow-blue:0 0 0 1px rgba(44,138,232,.22), 0 16px 40px -16px rgba(20,99,180,.45);
  --glow-ai:0 0 0 1px rgba(54,183,160,.26), 0 16px 40px -16px rgba(54,183,160,.42);

  --max:1200px;
  --gutter:clamp(20px, 5vw, 48px);
  --section-y:clamp(64px, 9vw, 128px);

  --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease:cubic-bezier(.22,.78,.3,1);
}

/* Light is the default for everyone. Dark applies only when the visitor asks for it
   via the header toggle (which sets data-theme="dark"), never from the OS setting. */
:root[data-theme="dark"]{
  --bg:#0B111D;
  --bg-alt:#101827;
  --surface:#141E33;
  --surface-2:#192541;
  --band-bg:#0E1626;
  --footer-bg:#080D16;
  --hero-base:#0C1320;
  --hero-tint-a:rgba(44,138,232,.28);
  --hero-tint-b:rgba(54,183,160,.18);
  --grid-line:rgba(234,240,250,.05);
  --orb-opacity:.5;
  --text:#EAF0FA;
  --text-soft:#B9C6DC;
  --text-mute:#8A9AB5;
  --line:rgba(234,240,250,.12);
  --line-soft:rgba(234,240,250,.07);
  --ai-ink:#4BE0C4;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 6px 18px rgba(0,0,0,.42);
  --shadow-l:0 20px 60px rgba(0,0,0,.55);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:rgba(44,138,232,.18)}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px;border-radius:6px}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4{line-height:1.1;letter-spacing:-.035em;font-weight:680;color:var(--text)}
h1{font-size:clamp(2.45rem, 1.3rem + 4.3vw, 4.4rem);letter-spacing:-.045em}
h2{font-size:clamp(1.9rem, 1.15rem + 2.6vw, 3.05rem);letter-spacing:-.04em}
h3{font-size:clamp(1.18rem, 1.02rem + .6vw, 1.5rem)}
h4{font-size:1.02rem;letter-spacing:-.02em}
p{color:var(--text-soft)}
strong{font-weight:620;color:var(--text)}

.lede{font-size:clamp(1.05rem,.98rem + .42vw,1.26rem);line-height:1.62;color:var(--text-soft);max-width:62ch}
.muted{color:var(--text-mute)}
.small{font-size:.86rem;line-height:1.6}

.grad{
  background:linear-gradient(104deg,#2C8AE8 0%,#1463B4 42%,#17876F 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.grad-ai{
  background:linear-gradient(104deg,#1C8E7C 0%,#1463B4 55%,#2C8AE8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root[data-theme="dark"] .grad-ai{background:linear-gradient(104deg,#4BE0C4,#36B7A0 50%,#2C8AE8);-webkit-background-clip:text;background-clip:text}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(48px,6vw,84px)}
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){ .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)} }

.head{max-width:66ch;margin-bottom:clamp(32px,4vw,56px)}
.head--center{margin-inline:auto;text-align:center}
.head h2{margin-bottom:16px}

/* ---------- 5. Eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:620;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);
  padding:7px 14px;border-radius:999px;
  background:linear-gradient(180deg,rgba(44,138,232,.1),rgba(44,138,232,.04));
  border:1px solid rgba(44,138,232,.2);
  margin-bottom:22px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ai);box-shadow:0 0 0 4px rgba(54,183,160,.16);
  animation:pulse 2.4s var(--ease) infinite;
}
.eyebrow--ai{color:var(--ai-ink);background:linear-gradient(180deg,rgba(54,183,160,.12),rgba(54,183,160,.04));border-color:rgba(54,183,160,.28)}
/* On light heroes and bands, "--light" matches the default treatment. */
.eyebrow--light{color:var(--blue);background:linear-gradient(180deg,rgba(44,138,232,.1),rgba(44,138,232,.04));border-color:rgba(44,138,232,.2)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  background:var(--blue);color:#fff;
  font-weight:600;font-size:.95rem;letter-spacing:-.012em;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .32s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0)}

.btn--primary{
  background:linear-gradient(135deg,#2C8AE8,#1463B4 62%,#0d4f94);
  box-shadow:var(--glow-blue);
}
.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,#36B7A0,#2C8AE8 55%,#1463B4);
  opacity:0;transition:opacity .35s var(--ease);
}
.btn--primary:hover::after{opacity:1}

.btn--ai{background:linear-gradient(135deg,#36B7A0,#1C8E7C 70%,#157666);color:#fff;box-shadow:var(--glow-ai)}

.btn--ghost{
  background:transparent;color:var(--text);
  border-color:var(--line);
}
.btn--ghost:hover{border-color:rgba(44,138,232,.45);background:rgba(44,138,232,.05);color:var(--blue)}

/* Default = for use on a dark surface (the CTA band keeps its dark gradient). */
.btn--onDark{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.26);backdrop-filter:blur(12px)}
.btn--onDark:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
/* Heroes and bands are light now, so the same markup gets a light treatment there. */
.hero .btn--onDark,
.band .btn--onDark{background:var(--surface);color:var(--text);border-color:var(--line);box-shadow:var(--shadow-s);backdrop-filter:none}
.hero .btn--onDark:hover,
.band .btn--onDark:hover{border-color:rgba(44,138,232,.45);color:var(--blue);background:var(--surface)}

.btn--lg{padding:17px 32px;font-size:1.01rem}
.btn--block{width:100%}

.link{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--blue);font-weight:600;font-size:.93rem;
  transition:gap .3s var(--ease),color .3s var(--ease);
}
.link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.link:hover{gap:11px}
.link--ai{color:var(--ai-ink)}

/* ---------- 7. Header ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:var(--bg); /* fallback where color-mix is unsupported */
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:var(--line-soft);
  box-shadow:0 1px 20px rgba(16,24,39,.045);
}
.nav{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:76px}

.brand{display:flex;align-items:center;gap:11px;font-weight:720;letter-spacing:-.04em;font-size:1.16rem;flex:none;color:var(--text)}
/* Official emblem is portrait (≈126×277) — fix the height, let width follow. */
.brand__mark{height:34px;width:auto;flex:none}
.brand__name span{color:var(--blue)}

.nav__menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__link{
  position:relative;padding:9px 14px;border-radius:10px;
  font-size:.93rem;font-weight:540;color:var(--text-soft);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav__link:hover,.nav__link.is-active{color:var(--text);background:var(--surface-2)}
.nav__link.is-active{color:var(--blue);font-weight:600}

.has-drop{position:relative}
.nav__trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer}
.nav__trigger svg{width:13px;height:13px;transition:transform .3s var(--ease);opacity:.65}
.has-drop:hover .nav__trigger svg,.has-drop.is-open .nav__trigger svg{transform:rotate(180deg)}

.drop{
  position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;
  width:min(440px,86vw);padding:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.has-drop:hover .drop,.has-drop.is-open .drop{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.drop__item{display:flex;gap:13px;padding:13px;border-radius:var(--radius);transition:background .22s var(--ease)}
.drop__item:hover{background:var(--surface-2)}
.drop__ic{
  width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(44,138,232,.14),rgba(44,138,232,.04));
  color:var(--blue);border:1px solid rgba(44,138,232,.18);
}
.drop__ic svg{width:18px;height:18px}
.drop__ic--ai{background:linear-gradient(140deg,rgba(54,183,160,.16),rgba(54,183,160,.04));color:var(--ai-ink);border-color:rgba(54,183,160,.2)}
.drop__t{font-weight:620;font-size:.94rem;letter-spacing:-.02em;margin-bottom:2px}
.drop__d{font-size:.82rem;color:var(--text-mute);line-height:1.5}

.nav__cta{display:flex;align-items:center;gap:10px;flex:none}
.themeBtn{
  width:40px;height:40px;display:grid;place-items:center;flex:none;
  border-radius:12px;border:1px solid var(--line);background:transparent;cursor:pointer;
  color:var(--text-soft);transition:background .25s,color .25s,border-color .25s;
}
.themeBtn:hover{background:var(--surface-2);color:var(--text)}
.themeBtn svg{width:18px;height:18px}
/* Icon swap applies to every theme toggle — header and in-menu alike. */
[data-theme-toggle] .moon{display:none}
:root[data-theme="dark"] [data-theme-toggle] .sun{display:none}
:root[data-theme="dark"] [data-theme-toggle] .moon{display:block}

/* In-menu rows — hidden on desktop, where the header controls are used instead. */
.nav__themeRow,.nav__ctaRow{display:none}
.nav__themeBtn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
}
.nav__themeBtn svg{width:18px;height:18px;flex:none;color:var(--text-mute)}
.nav__themeBtn .nav__themeState{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--text-mute);font-weight:500}

.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;width:20px;height:2px;border-radius:2px;background:var(--text);transition:transform .34s var(--ease),opacity .2s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1040px){
  .burger{display:block}

  .nav__menu{
    position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;gap:3px;
    padding:14px var(--gutter) calc(26px + env(safe-area-inset-bottom,0px));margin:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-l);
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;
    transition:clip-path .45s var(--ease),opacity .3s;
    max-height:calc(100dvh - 76px);overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav__menu.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}

  /* Full-width rows with a comfortable tap target — not inline pills. */
  .nav__link{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;min-height:52px;padding:14px 16px;border-radius:14px;
    font-size:1.04rem;font-weight:560;letter-spacing:-.02em;
  }
  .nav__link.is-active{background:rgba(44,138,232,.1)}
  .nav__link:active{background:var(--surface-2)}

  .has-drop{width:100%}
  .nav__trigger{width:100%}
  .nav__trigger svg{width:16px;height:16px;opacity:.8}

  /* Submenu: indented and rule-marked so the hierarchy is legible. */
  .drop{
    position:static;translate:none;width:100%;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:transparent;
    margin:2px 0 8px 16px;padding:2px 0 2px 12px;
    border-left:2px solid var(--line);
    display:none;
  }
  .has-drop.is-open .drop{display:flex;flex-direction:column;gap:3px}
  .drop__item{align-items:center;gap:13px;padding:11px 14px;min-height:50px;border-radius:12px}
  .drop__ic{width:34px;height:34px;border-radius:10px}
  .drop__ic svg{width:17px;height:17px}
  .drop__t{font-size:.97rem;margin-bottom:0}
  .drop__d{display:none}          /* titles alone keep the menu short */

  /* Push the burger to the far right; it is the only header control left. */
  .nav__cta{margin-left:auto}
  .nav__cta .btn{display:none}
  .nav__cta .themeBtn{display:none}

  /* The primary CTA is hidden in the header at this width, so it lives here. */
  .nav__ctaRow{display:block;margin-top:14px}
  .nav__ctaRow .btn{width:100%;padding:16px 24px;font-size:1rem}

  /* Theme toggle moves into the menu too. */
  .nav__themeRow{
    display:block;margin-top:14px;padding-top:6px;
    border-top:1px solid var(--line);
  }
  .nav__themeBtn{min-height:52px;padding:14px 16px;font-size:1.04rem;font-weight:560}
}

/* ---------- 8. Hero (light) ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(130px,16vw,190px) clamp(72px,9vw,120px);
  background:
    radial-gradient(1100px 620px at 80% -10%, var(--hero-tint-b), transparent 62%),
    radial-gradient(980px 560px at 8% 2%, var(--hero-tint-a), transparent 60%),
    var(--hero-base);
  color:var(--text);
  border-bottom:1px solid var(--line);
}
.hero p{color:var(--text-soft)}
.hero .lede{color:var(--text-soft)}
.hero__grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 85% 65% at 50% 28%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 28%,#000 25%,transparent 78%);
}
.hero__orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:var(--orb-opacity)}
.hero__orb--a{width:520px;height:520px;top:-180px;left:-120px;background:radial-gradient(circle,#2C8AE8,transparent 68%);animation:float 18s var(--ease) infinite}
.hero__orb--b{width:460px;height:460px;bottom:-200px;right:-90px;background:radial-gradient(circle,#36B7A0,transparent 68%);animation:float 22s var(--ease) infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(42px,-34px) scale(1.12)}}

.hero__inner{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,68px);align-items:center}
@media (max-width:1040px){.hero__inner{grid-template-columns:minmax(0,1fr)}}
.hero h1{margin-bottom:22px;max-width:16ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.hero__note{display:flex;align-items:center;gap:10px;margin-top:30px;font-size:.88rem;color:var(--text-mute)}
.hero__note svg{width:16px;height:16px;color:var(--ai-ink);flex:none}

.hero--inner{padding-block:clamp(126px,14vw,168px) clamp(56px,7vw,92px)}
.hero--inner .hero__inner{grid-template-columns:minmax(0,1fr)}
.hero--inner h1{max-width:20ch}
.hero--ai{
  background:
    radial-gradient(1000px 600px at 82% 0%, rgba(54,183,160,.16), transparent 60%),
    radial-gradient(900px 520px at 6% 10%, rgba(44,138,232,.11), transparent 58%),
    var(--hero-base);
}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--text-mute);margin-bottom:20px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb span{opacity:.6}

/* On a phone the orbs are wider than the viewport, so the whole hero reads as
   solid blue. Drop them and soften the wash to keep the tone near-white. */
@media (max-width:860px){
  .hero__orb{display:none}
  .hero{
    background:
      radial-gradient(620px 380px at 95% -6%, rgba(54,183,160,.05), transparent 62%),
      radial-gradient(560px 340px at 0% 2%, rgba(44,138,232,.055), transparent 60%),
      var(--hero-base);
  }
  .hero--ai{
    background:
      radial-gradient(620px 380px at 95% 0%, rgba(54,183,160,.07), transparent 62%),
      radial-gradient(560px 340px at 0% 4%, rgba(44,138,232,.04), transparent 60%),
      var(--hero-base);
  }
  .hero__grid-bg{opacity:.55}
}

/* ---------- 9. Console (light card) ---------- */
.console{
  position:relative;border-radius:var(--radius-xl);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-l);
  padding:18px;
  animation:rise .9s var(--ease) both .25s;
}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
.console__bar{display:flex;align-items:center;gap:7px;padding:0 4px 15px;border-bottom:1px solid var(--line-soft);margin-bottom:15px}
.console__dot{width:10px;height:10px;border-radius:50%;background:rgba(16,24,39,.14)}
.console__dot:nth-child(1){background:#ff5f57}.console__dot:nth-child(2){background:#febc2e}.console__dot:nth-child(3){background:#28c840}
.console__title{margin-left:8px;font-size:.76rem;color:var(--text-mute);font-weight:560;letter-spacing:.02em}

.chat{display:flex;flex-direction:column;gap:12px;min-height:268px}
.bubble{
  padding:13px 16px;border-radius:16px;font-size:.9rem;line-height:1.55;max-width:90%;
  animation:bubbleIn .6s var(--ease) both;
}
@keyframes bubbleIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.bubble--user{
  align-self:flex-end;border-bottom-right-radius:5px;
  background:linear-gradient(135deg,#2C8AE8,#1463B4);
  color:#fff;box-shadow:0 10px 24px -12px rgba(20,99,180,.6);
}
.bubble--ai{
  align-self:flex-start;border-bottom-left-radius:5px;
  background:var(--surface-2);border:1px solid var(--line-soft);
  color:var(--text-soft);width:100%;
}
.bubble--ai b{color:var(--ai-ink);font-weight:620}
.bubble__meta{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ai-ink);font-weight:620}
.bubble__meta i{width:6px;height:6px;border-radius:50%;background:var(--ai);box-shadow:0 0 0 3px rgba(54,183,160,.18)}

.barlist{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.barrow{display:grid;grid-template-columns:minmax(72px,88px) 1fr 46px;align-items:center;gap:11px;font-size:.78rem;color:var(--text-mute)}
.bartrack{height:7px;border-radius:999px;background:rgba(16,24,39,.08);overflow:hidden}
.barfill{height:100%;border-radius:999px;background:linear-gradient(90deg,#2C8AE8,#36B7A0);width:0;transition:width 1.3s var(--ease)}
.barrow b{text-align:right;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.barrow--warn .barfill{background:linear-gradient(90deg,#F59E0B,#EF6C57)}

.typing{display:inline-flex;gap:4px;align-items:center;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ai);opacity:.4;animation:typing 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.console__foot{
  display:flex;align-items:center;gap:9px;margin-top:16px;padding:11px 14px;
  border-radius:14px;background:var(--surface);border:1px solid var(--line-soft);
  font-size:.83rem;color:var(--text-mute);
}
.console__foot svg{width:15px;height:15px;color:var(--ai-ink);flex:none}

/* ---------- 10. Cards ---------- */
.card{
  position:relative;padding:clamp(22px,2.4vw,30px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  box-shadow:var(--shadow-s);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .42s var(--ease);
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(44,138,232,.08), transparent 65%);
  opacity:0;transition:opacity .4s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-l);border-color:rgba(44,138,232,.28)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:10px}
.card p{font-size:.94rem;line-height:1.62}
.card--ai:hover{border-color:rgba(54,183,160,.36)}
.card--ai::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(54,183,160,.1), transparent 65%)}

.card__ic{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,rgba(44,138,232,.13),rgba(44,138,232,.035));
  border:1px solid rgba(44,138,232,.18);color:var(--blue);
  transition:transform .42s var(--ease);
}
.card:hover .card__ic{transform:scale(1.06) rotate(-4deg)}
.card__ic svg{width:22px;height:22px}
.card__ic--ai{background:linear-gradient(140deg,rgba(54,183,160,.15),rgba(54,183,160,.035));border-color:rgba(54,183,160,.2);color:var(--ai-ink)}

.card--wide{grid-column:span 2}
@media (max-width:640px){.card--wide{grid-column:auto}}

.tag{
  display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:660;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
  padding:5px 11px;border-radius:999px;background:rgba(44,138,232,.09);
  border:1px solid rgba(44,138,232,.16);margin-bottom:16px;
}
.tag--ai{color:var(--ai-ink);background:rgba(54,183,160,.09);border-color:rgba(54,183,160,.18)}

/* ---------- 11. Checklist ---------- */
.checks{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;color:var(--text-soft);line-height:1.55}
.checks svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--blue)}
.checks--ai svg{color:var(--ai-ink)}

/* ---------- 12. Solutions split ---------- */
.split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
@media (max-width:980px){.split{grid-template-columns:minmax(0,1fr)}}
.sol{
  display:flex;flex-direction:column;position:relative;
  padding:clamp(26px,2.6vw,34px);border-radius:var(--radius-xl);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-s);overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.sol::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,#2C8AE8,#1463B4);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.sol:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:rgba(44,138,232,.26)}
.sol:hover::after{transform:scaleX(1)}
.sol--ai::after{background:linear-gradient(90deg,#36B7A0,#1C8E7C)}
.sol--ai:hover{border-color:rgba(54,183,160,.34)}
.sol__h{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:680;color:var(--blue);margin-bottom:12px}
.sol--ai .sol__h{color:var(--ai-ink)}
.sol h3{margin-bottom:12px}
.sol p{font-size:.94rem}
.sol .checks{flex:1}
.sol .link{margin-top:24px}

/* ---------- 13. Band (light tinted section) ---------- */
.band{
  position:relative;overflow:hidden;color:var(--text);
  background:var(--band-bg);
  border-block:1px solid var(--line);
}
/* Two plain white sections in a row still need a seam between them.
   Bands are excluded — they already carry their own border-block. */
.section:not(.band) + .section:not(.band){border-top:1px solid var(--line-soft)}
.band p{color:var(--text-soft)}
.band__mesh{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 460px at 15% 15%, rgba(44,138,232,.09), transparent 60%),
    radial-gradient(700px 440px at 88% 82%, rgba(54,183,160,.08), transparent 60%);
}
.band__inner{position:relative}
.band .card{background:var(--surface)}

/* ---------- 14. Steps ---------- */
.steps{display:grid;gap:clamp(16px,2vw,20px);grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1040px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{position:relative;padding:26px 22px;border-radius:var(--radius-l);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);transition:transform .4s var(--ease),border-color .4s var(--ease)}
.step:hover{transform:translateY(-4px);border-color:rgba(44,138,232,.28)}
.step__n{
  font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.06em;
  color:var(--blue);display:block;margin-bottom:14px;
}
.step h4{margin-bottom:8px;font-size:1.06rem}
.step p{font-size:.88rem;line-height:1.6}

/* ---------- 15. Prompt chips ---------- */
.prompts{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:999px;font-size:.89rem;font-weight:500;
  background:var(--surface);border:1px solid var(--line);color:var(--text-soft);
  box-shadow:var(--shadow-s);
  transition:transform .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ai);flex:none}
.chip:hover{transform:translateY(-2px);border-color:rgba(54,183,160,.4);color:var(--text)}

/* ---------- 16. Ask list ---------- */
.asks{display:flex;flex-direction:column;gap:14px}
.ask{
  padding:22px 24px;border-radius:var(--radius-l);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-s);
  transition:box-shadow .36s var(--ease),border-color .36s var(--ease),transform .36s var(--ease);
}
.ask:hover{box-shadow:var(--shadow);border-color:rgba(54,183,160,.32);transform:translateX(5px)}
.ask__q{display:flex;gap:11px;align-items:flex-start;font-weight:620;color:var(--text);margin-bottom:7px;font-size:1rem;letter-spacing:-.02em}
.ask__q svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--ai-ink)}
.ask__a{font-size:.9rem;color:var(--text-soft);padding-left:29px;line-height:1.6}

/* ---------- 17. Industry cards ---------- */
.ind{
  position:relative;padding:clamp(24px,2.5vw,32px);border-radius:var(--radius-l);
  background:var(--surface);border:1px solid var(--line);overflow:hidden;
  box-shadow:var(--shadow-s);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .42s var(--ease);
}
.ind::before{
  content:"";position:absolute;top:0;right:0;width:160px;height:160px;pointer-events:none;
  background:radial-gradient(circle at 100% 0,rgba(44,138,232,.1),transparent 70%);
  opacity:0;transition:opacity .45s var(--ease);
}
.ind:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(44,138,232,.28)}
.ind:hover::before{opacity:1}
.ind__ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(140deg,rgba(44,138,232,.13),rgba(54,183,160,.07));border:1px solid var(--line);color:var(--blue)}
.ind__ic svg{width:21px;height:21px}
.ind h3{font-size:1.16rem;margin-bottom:9px}
.ind p{font-size:.92rem}

/* ---------- 18. Journey flow ---------- */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
.flow__node{
  padding:11px 20px;border-radius:999px;font-weight:600;font-size:.9rem;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
}
.flow__node:last-child{background:linear-gradient(135deg,#2C8AE8,#1463B4);color:#fff;border-color:transparent;box-shadow:var(--glow-blue)}
.flow__arrow{color:var(--text-mute);flex:none;display:grid;place-items:center}
.flow__arrow svg{width:16px;height:16px}

/* ---------- 19. Feature rows ---------- */
.rows{display:flex;flex-direction:column;gap:2px}
.row{
  display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:flex-start;
  padding:22px;border-radius:var(--radius);
  transition:background .3s var(--ease);
}
.row:hover{background:var(--surface-2)}
.row__ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(44,138,232,.13),rgba(44,138,232,.035));border:1px solid rgba(44,138,232,.16);color:var(--blue)}
.row__ic svg{width:20px;height:20px}
.row__ic--ai{background:linear-gradient(140deg,rgba(54,183,160,.14),rgba(54,183,160,.035));border-color:rgba(54,183,160,.18);color:var(--ai-ink)}
.row h4{margin-bottom:5px;font-size:1.04rem}
.row p{font-size:.92rem}

/* ---------- 20. CTA band (one of the two dark accents) ---------- */
.cta{
  position:relative;overflow:hidden;text-align:center;color:#fff;
  border-radius:var(--radius-xl);
  padding:clamp(44px,6vw,80px) clamp(24px,4vw,64px);
  background:linear-gradient(140deg,#0d4f94 0%,#1463B4 38%,#17876f 100%);
  box-shadow:0 30px 70px -34px rgba(20,99,180,.5);
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 72%);
}
.cta__in{position:relative;max-width:68ch;margin-inline:auto}
.cta h2{color:#fff;margin-bottom:16px}
.cta p{color:rgba(255,255,255,.86);font-size:1.06rem}
.cta__actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:32px}
.cta .btn--primary{background:#fff;color:#0d4f94;box-shadow:0 18px 40px -16px rgba(0,0,0,.4)}
.cta .btn--primary::after{background:linear-gradient(135deg,#fff,#E3F2FF)}
.cta__note{margin-top:22px;font-size:.9rem;color:rgba(255,255,255,.78)}

/* ---------- 21. Forms ---------- */
.form{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:680px){.form{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.84rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
.field label .req{color:#D14A3E;margin-left:2px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:12px;
  background:var(--bg-alt);border:1px solid var(--line);
  font-size:.95rem;color:var(--text);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.field textarea{resize:vertical;min-height:124px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--text-mute);opacity:.85}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue-bright);
  box-shadow:0 0 0 4px rgba(44,138,232,.13);
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px;
}
.field__err{font-size:.78rem;color:#D14A3E;display:none}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#D14A3E;box-shadow:0 0 0 4px rgba(209,74,62,.11)}

.consent{display:flex;gap:11px;align-items:flex-start;grid-column:1/-1}
.consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--blue);cursor:pointer}
.consent label{font-size:.86rem;font-weight:450;color:var(--text-soft);line-height:1.55}
.consent a{color:var(--blue);font-weight:560;text-decoration:underline;text-underline-offset:3px}

.formNote{grid-column:1/-1;font-size:.8rem;color:var(--text-mute);line-height:1.6}
.formNote a{color:var(--blue);font-weight:560;text-decoration:underline;text-underline-offset:3px}
.formMsg{
  grid-column:1/-1;display:none;padding:16px 18px;border-radius:14px;font-size:.92rem;
  background:rgba(54,183,160,.08);border:1px solid rgba(54,183,160,.26);color:var(--text);
}
.formMsg.is-on{display:flex;gap:11px;align-items:flex-start;animation:bubbleIn .5s var(--ease)}
.formMsg svg{width:19px;height:19px;flex:none;color:var(--ai-ink);margin-top:2px}
.formMsg a{color:var(--blue);font-weight:560;text-decoration:underline;text-underline-offset:3px}
.formMsg code{font-family:var(--mono);font-size:.86em;background:rgba(16,24,39,.06);padding:1px 5px;border-radius:5px}
.formMsg--error{background:rgba(209,74,62,.07);border-color:rgba(209,74,62,.28)}
.formMsg--error svg{color:#D14A3E}

.btn[disabled]{opacity:.62;cursor:not-allowed;transform:none}
.spinner{
  width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 21b. WhatsApp floating button ---------- */
.wa{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90;
  display:flex;align-items:center;gap:0;
  height:56px;padding:0 16px;border-radius:999px;
  background:#25D366;color:#fff;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.55), 0 2px 8px rgba(16,24,39,.14);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),gap .32s var(--ease);
}
.wa svg{width:28px;height:28px;flex:none}
.wa__label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-weight:620;font-size:.93rem;letter-spacing:-.015em;
  transition:max-width .4s var(--ease);
}
.wa:hover,.wa:focus-visible{transform:translateY(-3px);box-shadow:0 14px 34px -8px rgba(37,211,102,.65), 0 2px 8px rgba(16,24,39,.16);gap:10px}
.wa:hover .wa__label,.wa:focus-visible .wa__label{max-width:190px}
.wa::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  box-shadow:0 0 0 0 rgba(37,211,102,.5);
  animation:waPing 2.6s var(--ease) infinite;
}
@keyframes waPing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%,100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){.wa::after{animation:none}}
@media (max-width:560px){
  .wa{height:52px;padding:0 13px}
  .wa svg{width:26px;height:26px}
  .wa:hover .wa__label,.wa:focus-visible .wa__label{max-width:0}
  .wa:hover,.wa:focus-visible{gap:0}
}

.contactGrid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:980px){.contactGrid{grid-template-columns:minmax(0,1fr)}}
.infoCard{padding:clamp(24px,2.6vw,32px);border-radius:var(--radius-l);background:var(--surface-2);border:1px solid var(--line)}
.infoItem{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.infoItem:last-child{border-bottom:0;padding-bottom:0}
.infoItem svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--blue)}
.infoItem h4{font-size:.9rem;margin-bottom:3px}
.infoItem p,.infoItem a{font-size:.9rem;color:var(--text-soft)}
.infoItem p + p{margin-top:3px}
.infoItem a{font-weight:560;transition:color .25s var(--ease)}
.infoItem a:hover{color:var(--blue)}
.infoItem .muted{font-weight:400;font-size:.82rem}

/* ---------- 22. Note ---------- */
.note{
  display:flex;gap:13px;align-items:flex-start;
  padding:18px 22px;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--blue);
  font-size:.92rem;color:var(--text-soft);line-height:1.62;
}
.note--ai{border-left-color:var(--ai)}
.note svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--blue)}
.note--ai svg{color:var(--ai-ink)}
.band .note{background:var(--surface)}

/* ---------- 23. Footer ---------- */
.footer{
  background:var(--footer-bg);color:var(--text-soft);
  padding-block:clamp(52px,6vw,78px) 0;position:relative;overflow:hidden;
  border-top:1px solid var(--line);
}
.footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 400px at 15% 0%,rgba(44,138,232,.07),transparent 62%),
             radial-gradient(700px 360px at 90% 10%,rgba(54,183,160,.06),transparent 60%);
}
.footer__in{position:relative}
.footer__top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(28px,4vw,48px);padding-bottom:48px}
@media (max-width:900px){.footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer__top{grid-template-columns:minmax(0,1fr)}}
.footer .brand{color:var(--text);margin-bottom:18px}
.footer .brand__name span{color:var(--blue)}
.footer__blurb{font-size:.9rem;line-height:1.65;color:var(--text-mute);max-width:42ch}
.footer__tag{font-size:.84rem;font-weight:620;letter-spacing:.04em;color:var(--ai-ink);margin-bottom:14px}
.footer h4{color:var(--text);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:17px;font-weight:660}
.footer__list li{margin-bottom:11px}
.footer__list a{font-size:.9rem;color:var(--text-mute);transition:color .25s var(--ease),padding-left .25s var(--ease);display:inline-block}
.footer__list a:hover{color:var(--blue);padding-left:4px}
.footer__bot{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding-block:24px;border-top:1px solid var(--line);font-size:.84rem;color:var(--text-mute);
}
.footer__bot a:hover{color:var(--blue)}
.footer__legal{display:flex;flex-wrap:wrap;gap:18px}
.social{display:flex;gap:9px;margin-top:20px}
.social a{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--text-soft);
  transition:background .25s,color .25s,transform .25s var(--ease),border-color .25s;
}
.social a:hover{background:var(--blue);color:#fff;transform:translateY(-2px);border-color:var(--blue)}
.social svg{width:16px;height:16px}

/* Footer in dark theme */
:root[data-theme="dark"] .footer{color:#B9C9E0}
:root[data-theme="dark"] .footer .brand{color:#fff}
:root[data-theme="dark"] .footer .brand__name span{color:var(--ai-bright)}
:root[data-theme="dark"] .footer h4{color:#fff}
:root[data-theme="dark"] .footer__tag{color:var(--ai-bright)}
:root[data-theme="dark"] .footer::before{
  background:radial-gradient(900px 400px at 15% 0%,rgba(44,138,232,.14),transparent 62%),
             radial-gradient(700px 360px at 90% 10%,rgba(54,183,160,.1),transparent 60%);
}
:root[data-theme="dark"] .social a{background:rgba(255,255,255,.06)}

/* ---------- 24. Prose / tables ---------- */
.prose{max-width:76ch}
.prose h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem;margin:28px 0 10px}
.prose p{margin-bottom:14px}
.prose ul{list-style:disc;padding-left:22px;margin-bottom:18px}
.prose ul li{margin-bottom:9px;color:var(--text-soft)}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft)}
th{background:var(--surface-2);font-weight:650;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-mute)}
tr:last-child td{border-bottom:0}

/* ---------- 25. Reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}

/* ---------- 26. Utilities ---------- */
.sr{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:14px;top:-60px;z-index:200;padding:11px 18px;border-radius:10px;background:var(--blue);color:#fff;font-weight:600;font-size:.9rem;transition:top .25s var(--ease)}
.skip:focus{top:14px}
.center{text-align:center}
.mt1{margin-top:12px}.mt2{margin-top:22px}.mt3{margin-top:32px}.mt4{margin-top:44px}
.mb2{margin-bottom:22px}.mb3{margin-bottom:32px}
.divider{height:1px;background:var(--line);margin-block:clamp(36px,5vw,64px)}