/* ==========================================================================
   KLARYTEE — marketing site
   Graph-native project management with AI you can trust.
   Design system mirrored from the Klarytee product frontend:
   Poppins type · indigo #6366f1 / blue #3b82f6 / cyan gradient ·
   light-first body, dark slate→indigo hero · rounded-xl/2xl surfaces.
   ========================================================================== */

:root{
  /* brand */
  --indigo:#6366f1; --indigo-600:#4f46e5; --indigo-950:#312e81;
  --blue:#3b82f6; --blue-600:#2563eb; --cyan:#22d3ee;
  --green:#10b981; --amber:#f59e0b; --red:#ef4444; --rose:#f43f5e;

  /* light surfaces (product light theme) */
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#fbfbfd;
  --fg:#0f172a; --muted:#64748b; --faint:#94a3b8;
  --border:#e6e8ec; --border-2:#eef0f3;

  /* dark hero */
  --slate-900:#0f172a; --slate-950:#0b0e14;

  /* type */
  --sans:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --grad:linear-gradient(100deg,var(--indigo) 0%,var(--blue) 55%,var(--cyan) 100%);
  --grad-soft:linear-gradient(135deg,#eef2ff 0%,#eff6ff 50%,#ecfeff 100%);

  --r-lg:.5rem; --r-xl:.75rem; --r-2xl:1rem; --r-3xl:1.5rem; --r-full:9999px;
  --sh-sm:0 1px 2px rgba(15,23,42,.06);
  --sh-md:0 4px 16px rgba(15,23,42,.07);
  --sh-lg:0 12px 34px rgba(15,23,42,.10);
  --sh-xl:0 24px 60px rgba(15,23,42,.14);
  --sh-indigo:0 14px 40px rgba(99,102,241,.30);

  --maxw:1160px;
  --pad:clamp(1.15rem,5vw,2.25rem);
  --nav-h:70px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px)}
body{
  font-family:var(--sans); background:var(--bg); color:var(--fg);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:rgba(99,102,241,.22)}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:6px}

/* icons reference the hidden <symbol> sprite */
.ico{ width:1em;height:1em; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ------------------------------- layout -------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; }
.section{ padding-block:clamp(3.75rem,8vw,6.5rem); position:relative; }
.center{ text-align:center; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--indigo); }

h1,h2,h3,h4{ font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.eyebrow{ font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--indigo); }
.sec-h{ font-size:clamp(1.85rem,4vw,2.6rem); margin-top:.55rem; }
.sec-sub{ font-size:clamp(1.02rem,1.3vw,1.15rem); color:var(--muted); max-width:58ch; margin-top:1rem; line-height:1.65; }
.center .sec-sub{ margin-inline:auto; }

/* --------------------------------- pills ------------------------------- */
.pill{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600;
  padding:.4rem .85rem; border-radius:var(--r-full); background:rgba(99,102,241,.08);
  color:var(--indigo-600); border:1px solid rgba(99,102,241,.18); width:fit-content; }
.pill--dark{ background:rgba(129,140,248,.12); color:#c7d2fe; border-color:rgba(129,140,248,.28);
  backdrop-filter:blur(6px); }
.pill__dot{ width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(16,185,129,.18); }

/* -------------------------------- buttons ------------------------------ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.4rem; border-radius:var(--r-xl); border:1px solid transparent; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:.98rem; line-height:1; color:#fff;
  background:var(--blue); box-shadow:var(--sh-md);
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, background .2s; }
.btn .ico{ width:1.05em;height:1.05em; stroke-width:2.2; transition:transform .2s; }
.btn:hover{ background:var(--blue-600); transform:translateY(-2px); box-shadow:var(--sh-lg); }
.btn:hover .ico{ transform:translateX(3px); }
.btn:active{ transform:scale(.985); }
.btn--indigo{ background:var(--indigo); box-shadow:var(--sh-indigo); }
.btn--indigo:hover{ background:var(--indigo-600); }
.btn--light{ background:#fff; color:var(--slate-900); box-shadow:var(--sh-lg); }
.btn--light:hover{ background:#fff; transform:translateY(-2px); box-shadow:var(--sh-xl); }
.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--border); box-shadow:none; }
.btn--ghost:hover{ background:var(--surface); border-color:#d7dbe2; box-shadow:var(--sh-sm); }
.btn--ghost-d{ background:rgba(255,255,255,.06); color:#e7eaf0; border-color:rgba(255,255,255,.16); box-shadow:none; }
.btn--ghost-d:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); box-shadow:none; }
.btn--sm{ padding:.55rem 1rem; font-size:.86rem; }
.btn--lg{ padding:.95rem 1.7rem; font-size:1.05rem; }
.btn--block{ width:100%; }

/* ==================================================================== NAV */
.nav{ position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:60;
  background:rgba(246,247,249,.72); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, background .25s; }
.nav.scrolled{ border-bottom-color:var(--border); background:rgba(246,247,249,.9); }
.nav__inner{ max-width:var(--maxw); height:100%; margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:1.5rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.16rem;
  letter-spacing:-.02em; margin-right:auto; }
.brand__mark{ width:30px;height:30px; border-radius:9px; background:var(--grad);
  display:grid; place-items:center; box-shadow:var(--sh-indigo); }
.brand__mark .ico{ color:#fff; width:18px;height:18px; stroke-width:2.3; }
.nav__links{ display:flex; gap:1.6rem; font-size:.94rem; font-weight:500; color:var(--muted); }
.nav__links a:hover{ color:var(--fg); }
.nav__cta{ display:inline-flex; }
.nav__burger{ display:none; width:42px;height:42px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav__burger span{ width:18px;height:2px;background:var(--fg); border-radius:2px; transition:.25s; }
.nav__mobile{ display:none; flex-direction:column; gap:.35rem; padding:1rem var(--pad) 1.4rem;
  background:var(--surface); border-bottom:1px solid var(--border); }
.nav__mobile a{ padding:.7rem .4rem; font-weight:500; color:var(--fg); border-radius:var(--r-lg); }
.nav__mobile a:hover{ background:var(--bg); }

/* ================================================================== HERO */
.hero{ position:relative; padding-top:calc(var(--nav-h) + clamp(3rem,7vw,5.5rem));
  padding-bottom:clamp(3.5rem,8vw,6rem); overflow:hidden; color:#e7eaf0;
  background:radial-gradient(1200px 600px at 15% -10%,#312e81 0%,transparent 55%),
             radial-gradient(1000px 620px at 100% 0%,#1e3a8a 0%,transparent 50%),
             linear-gradient(180deg,#0f172a 0%,#111a37 55%,#0f172a 100%); }
.hero__glow{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero__glow span{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.hero__glow .g1{ width:420px;height:420px; background:rgba(99,102,241,.55); top:-120px; left:-60px; }
.hero__glow .g2{ width:360px;height:360px; background:rgba(34,211,238,.32); bottom:-140px; right:6%; }
.hero__glow .g3{ width:300px;height:300px; background:rgba(59,130,246,.30); top:30%; right:34%; }
.hero__grid{ position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:linear-gradient(rgba(148,163,184,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,184,.09) 1px,transparent 1px);
  background-size:52px 52px; mask-image:radial-gradient(80% 60% at 50% 20%,#000 40%,transparent 100%); }
.hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero h1{ font-size:clamp(2.35rem,5.4vw,3.7rem); line-height:1.06; margin-top:1.15rem; color:#fff; }
.hero__sub{ margin-top:1.35rem; font-size:clamp(1.05rem,1.5vw,1.22rem); color:#b9c2d6;
  max-width:36ch; line-height:1.6; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.hero__trust{ margin-top:2.1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1.4rem;
  font-size:.86rem; color:#8b96ad; }
.hero__trust b{ color:#cbd4e6; font-weight:600; }
.hero__trust .sep{ width:4px;height:4px;border-radius:50%;background:#3b4a67; }

/* hero visual: dependency graph → cascade */
.hero__viz{ position:relative; }
.viz-card{ background:rgba(17,24,44,.72); border:1px solid rgba(129,140,248,.22);
  border-radius:var(--r-2xl); box-shadow:0 30px 80px rgba(2,6,23,.55); backdrop-filter:blur(10px);
  overflow:hidden; }
.viz-card__bar{ display:flex; align-items:center; gap:.55rem; padding:.75rem 1rem;
  border-bottom:1px solid rgba(148,163,184,.12); }
.viz-card__dots{ display:flex; gap:.35rem; }
.viz-card__dots i{ width:10px;height:10px;border-radius:50%;background:#31415f; }
.viz-card__title{ font-size:.78rem; color:#9fb0cc; margin-left:.35rem; font-weight:500; }
.viz-card__chip{ margin-left:auto; font-size:.68rem; font-weight:600; padding:.24rem .6rem;
  border-radius:var(--r-full); background:rgba(16,185,129,.14); color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }
.viz-svg{ width:100%; height:auto; display:block; }
.viz-note{ display:flex; align-items:flex-start; gap:.6rem; padding:.9rem 1rem;
  border-top:1px solid rgba(148,163,184,.12); font-size:.82rem; color:#c6d0e4; }
.viz-note .ico{ color:var(--cyan); width:16px;height:16px; margin-top:2px; }
.viz-note b{ color:#fff; font-weight:600; }

/* logo strip */
.logos{ padding-block:clamp(2rem,4vw,2.75rem); border-bottom:1px solid var(--border); }
.logos__label{ text-align:center; font-size:.78rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); }
.logos__row{ margin-top:1.3rem; display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem 2.6rem;
  color:#aeb6c4; font-weight:600; }
.logos__row span{ display:inline-flex; align-items:center; gap:.5rem; font-size:1.05rem; opacity:.75; }
.logos__row .ico{ width:20px;height:20px; }

/* ============================================================= PROBLEM */
.problem{ background:var(--surface); border-block:1px solid var(--border); }
.problem__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.problem__list{ margin-top:1.6rem; display:grid; gap:.9rem; }
.problem__list li{ list-style:none; display:flex; gap:.75rem; align-items:flex-start; font-size:1.02rem; color:#334155; }
.problem__list .x{ flex:none; width:26px;height:26px; border-radius:8px; display:grid; place-items:center;
  background:rgba(239,68,68,.1); color:var(--red); }
.problem__list .x .ico{ width:15px;height:15px; stroke-width:2.4; }
.quote-card{ background:var(--grad-soft); border:1px solid var(--border-2); border-radius:var(--r-2xl);
  padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--sh-md); }
.quote-card p{ font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:600; line-height:1.3; letter-spacing:-.02em; }
.quote-card .em{ color:var(--indigo-600); }
.quote-card cite{ display:block; margin-top:1.2rem; font-style:normal; font-size:.92rem; color:var(--muted); font-weight:500; }

/* ============================================================ FEATURES */
.grid-bento{ margin-top:clamp(2rem,4vw,3rem); display:grid; grid-template-columns:repeat(6,1fr);
  gap:1.1rem; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl);
  padding:clamp(1.35rem,2.4vw,1.8rem); box-shadow:var(--sh-sm);
  transition:transform .25s, box-shadow .25s, border-color .25s; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:#d9dee7; }
.card__ico{ width:44px;height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--grad-soft); color:var(--indigo-600); margin-bottom:1.05rem; }
.card__ico .ico{ width:22px;height:22px; stroke-width:1.9; }
.card h3{ font-size:1.14rem; }
.card p{ margin-top:.55rem; color:var(--muted); font-size:.96rem; line-height:1.6; }
.card--span3{ grid-column:span 3; }
.card--span2{ grid-column:span 2; }
.card--feature{ grid-column:span 3; background:linear-gradient(150deg,#0f172a,#1e2547);
  color:#e7eaf0; border-color:rgba(129,140,248,.2); }
.card--feature .card__ico{ background:rgba(129,140,248,.16); color:#c7d2fe; }
.card--feature h3{ color:#fff; }
.card--feature p{ color:#aab4cc; }
.tagrow{ margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{ font-size:.74rem; font-weight:600; padding:.3rem .65rem; border-radius:var(--r-full);
  background:rgba(99,102,241,.08); color:var(--indigo-600); border:1px solid rgba(99,102,241,.16); }
.card--feature .tag{ background:rgba(129,140,248,.14); color:#c7d2fe; border-color:rgba(129,140,248,.24); }

/* ============================================================== VIEWS */
.views{ background:var(--surface); border-block:1px solid var(--border); }
.tabs{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.tab{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.05rem; border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface-2); color:var(--muted); font-weight:600;
  font-size:.9rem; cursor:pointer; transition:.2s; }
.tab .ico{ width:17px;height:17px; }
.tab:hover{ color:var(--fg); border-color:#d7dbe2; }
.tab.active{ background:var(--fg); color:#fff; border-color:var(--fg); box-shadow:var(--sh-md); }
.tab.active .ico{ color:#fff; }
.view-stage{ margin-top:1.8rem; border:1px solid var(--border); border-radius:var(--r-3xl);
  background:linear-gradient(180deg,#fff,#fafbfc); box-shadow:var(--sh-lg); overflow:hidden; }
.view-stage__bar{ display:flex; align-items:center; gap:.5rem; padding:.8rem 1.1rem; border-bottom:1px solid var(--border-2); background:#fff; }
.view-stage__bar i{ width:11px;height:11px;border-radius:50%; }
.view-stage__bar i:nth-child(1){ background:#ff5f57; } .view-stage__bar i:nth-child(2){ background:#febc2e; } .view-stage__bar i:nth-child(3){ background:#28c840; }
.view-stage__bar span{ margin-left:.6rem; font-size:.82rem; color:var(--muted); font-weight:500; }
.view-panel{ display:none; padding:clamp(1.1rem,2.5vw,1.9rem); }
.view-panel.active{ display:block; }
.view-panel__head{ display:flex; align-items:flex-start; gap:.85rem; margin-bottom:1.2rem; }
.view-panel__ico{ width:40px;height:40px;border-radius:11px; background:var(--grad-soft); color:var(--indigo-600);
  display:grid;place-items:center; flex:none; }
.view-panel__ico .ico{ width:20px;height:20px; }
.view-panel h3{ font-size:1.2rem; } .view-panel__head p{ color:var(--muted); font-size:.94rem; margin-top:.25rem; }

/* mini graph view */
.mini-graph{ width:100%; height:auto; border-radius:var(--r-xl); background:#0f172a; }
/* mini table */
.mtable{ width:100%; border-collapse:collapse; font-size:.9rem; }
.mtable th{ text-align:left; padding:.6rem .8rem; color:var(--faint); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); }
.mtable td{ padding:.7rem .8rem; border-bottom:1px solid var(--border-2); }
.mtable tr:last-child td{ border-bottom:none; }
.stat{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.82rem;
  padding:.2rem .6rem; border-radius:var(--r-full); }
.stat--ontrack{ background:rgba(16,185,129,.1); color:#059669; }
.stat--risk{ background:rgba(245,158,11,.12); color:#b45309; }
.stat--late{ background:rgba(239,68,68,.1); color:#dc2626; }
.bar{ height:7px; border-radius:var(--r-full); background:var(--border); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:var(--r-full); background:var(--grad); }
/* mini kanban */
.kanban{ display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; }
.kcol__h{ font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
  display:flex; align-items:center; gap:.45rem; margin-bottom:.7rem; }
.kcol__h b{ margin-left:auto; background:var(--bg); border-radius:var(--r-full); padding:.05rem .5rem; color:var(--faint); font-weight:600; }
.kcard{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:.75rem .85rem;
  box-shadow:var(--sh-sm); margin-bottom:.65rem; }
.kcard p{ font-size:.88rem; font-weight:500; }
.kcard .meta{ margin-top:.55rem; display:flex; align-items:center; gap:.4rem; font-size:.74rem; color:var(--faint); }
.avatar{ width:20px;height:20px;border-radius:50%; background:var(--grad); color:#fff; font-size:.62rem; font-weight:700;
  display:grid;place-items:center; }
.dot-pri{ width:8px;height:8px;border-radius:50%; }
/* mini matrix */
.matrix{ position:relative; display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr);
  gap:2px; aspect-ratio:16/9; background:var(--border); border-radius:var(--r-xl); overflow:hidden; }
.mq{ background:var(--surface-2); position:relative; padding:.7rem; }
.mq span{ font-size:.72rem; font-weight:600; color:var(--faint); }
.mq--do span{ color:#059669; } .mq--plan span{ color:var(--indigo-600); }
.node{ position:absolute; padding:.28rem .6rem; border-radius:var(--r-full); font-size:.74rem; font-weight:600;
  box-shadow:var(--sh-sm); white-space:nowrap; }

/* ============================================================= HOW-TO */
.steps{ margin-top:clamp(2rem,4vw,3rem); display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; counter-reset:s; }
.step{ position:relative; padding-top:.4rem; }
.step__n{ width:44px;height:44px; border-radius:12px; background:var(--fg); color:#fff; font-weight:700;
  display:grid; place-items:center; font-size:1.05rem; margin-bottom:1.1rem; box-shadow:var(--sh-md); }
.step:nth-child(1) .step__n{ background:var(--indigo); } .step:nth-child(2) .step__n{ background:var(--blue); }
.step:nth-child(3) .step__n{ background:linear-gradient(135deg,var(--blue),var(--cyan)); }
.step h3{ font-size:1.18rem; } .step p{ margin-top:.5rem; color:var(--muted); line-height:1.6; }
.step__line{ position:absolute; top:22px; left:56px; right:-.7rem; height:2px;
  background:repeating-linear-gradient(90deg,var(--border) 0 8px,transparent 8px 15px); }
.steps .step:last-child .step__line{ display:none; }

/* ============================================================= TRUST/AI */
.ai{ background:linear-gradient(160deg,#0f172a 0%,#1a2148 60%,#0f172a 100%); color:#e7eaf0; overflow:hidden; }
.ai__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:center; }
.ai h2{ color:#fff; } .ai .sec-sub{ color:#aab4cc; }
.ai__points{ margin-top:1.7rem; display:grid; gap:1.05rem; }
.ai__point{ display:flex; gap:.85rem; align-items:flex-start; }
.ai__point .ck{ flex:none; width:26px;height:26px;border-radius:8px; background:rgba(16,185,129,.16); color:#6ee7b7;
  display:grid;place-items:center; }
.ai__point .ck .ico{ width:15px;height:15px; stroke-width:2.6; }
.ai__point b{ color:#fff; font-weight:600; } .ai__point p{ color:#9fb0cc; font-size:.95rem; margin-top:.15rem; }
/* AI preview card */
.ai-card{ background:rgba(17,24,44,.75); border:1px solid rgba(129,140,248,.24); border-radius:var(--r-2xl);
  box-shadow:0 30px 80px rgba(2,6,23,.5); overflow:hidden; backdrop-filter:blur(10px); }
.ai-card__bar{ display:flex; align-items:center; gap:.55rem; padding:.85rem 1.1rem; border-bottom:1px solid rgba(148,163,184,.14); }
.ai-card__bar .ico{ color:#c7d2fe; width:18px;height:18px; } .ai-card__bar b{ font-size:.9rem;color:#fff; }
.ai-card__body{ padding:1.1rem; display:grid; gap:.75rem; }
.ai-prompt{ background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.14); border-radius:var(--r-xl);
  padding:.75rem .9rem; font-size:.9rem; color:#cbd4e6; }
.ai-prompt span{ color:#7c8aa8; }
.ai-diff{ border:1px solid rgba(148,163,184,.16); border-radius:var(--r-xl); overflow:hidden; }
.ai-diff__row{ display:flex; align-items:center; gap:.6rem; padding:.6rem .85rem; font-size:.85rem;
  border-bottom:1px solid rgba(148,163,184,.1); }
.ai-diff__row:last-child{ border-bottom:none; }
.ai-diff__row .ico{ width:15px;height:15px; }
.ai-diff__row.add{ background:rgba(16,185,129,.08); color:#6ee7b7; } .ai-diff__row.add .ico{ color:#6ee7b7; }
.ai-diff__row.move{ background:rgba(245,158,11,.08); color:#fcd34d; } .ai-diff__row.move .ico{ color:#fcd34d; }
.ai-diff__row.keep{ color:#aab4cc; }
.ai-actions{ display:flex; gap:.6rem; }

/* =============================================================== STATS */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:clamp(2rem,4vw,2.6rem); }
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl);
  padding:1.6rem 1.4rem; text-align:center; box-shadow:var(--sh-sm); }
.stat-card b{ font-size:clamp(2rem,4vw,2.7rem); font-weight:700; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.03em; }
.stat-card span{ display:block; margin-top:.35rem; color:var(--muted); font-size:.92rem; font-weight:500; }

/* =============================================================== CTA */
.cta-final{ position:relative; overflow:hidden; }
.cta-box{ position:relative; border-radius:var(--r-3xl); padding:clamp(2.5rem,6vw,4.5rem) var(--pad);
  text-align:center; color:#fff; overflow:hidden;
  background:radial-gradient(700px 340px at 20% 0%,#4f46e5 0%,transparent 60%),
             radial-gradient(700px 400px at 100% 100%,#0891b2 0%,transparent 55%),
             linear-gradient(135deg,#312e81,#1e3a8a); box-shadow:var(--sh-xl); }
.cta-box h2{ font-size:clamp(1.9rem,4.4vw,3rem); color:#fff; }
.cta-box p{ margin:1rem auto 0; max-width:52ch; color:#cdd6ee; font-size:1.08rem; }
.cta-box__btns{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }
.cta-box__fine{ margin-top:1.35rem; font-size:.85rem; color:#a9b4d6; }

/* ============================================================== FOOTER */
.footer{ background:var(--slate-950); color:#9fb0cc; padding-block:clamp(3rem,5vw,4rem) 2rem; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.footer .brand{ color:#fff; margin-bottom:1rem; }
.footer__blurb{ font-size:.92rem; line-height:1.6; max-width:34ch; color:#8b96ad; }
.footer h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:#6b7893; margin-bottom:1rem; font-weight:600; }
.footer__col a{ display:block; padding:.32rem 0; font-size:.93rem; color:#aeb8ca; }
.footer__col a:hover{ color:#fff; }
.footer__bottom{ margin-top:2.5rem; padding-top:1.6rem; border-top:1px solid rgba(148,163,184,.12);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; font-size:.86rem; color:#7c8aa8; }
.footer__social{ display:flex; gap:.7rem; }
.footer__social a{ width:36px;height:36px; border-radius:10px; border:1px solid rgba(148,163,184,.16);
  display:grid; place-items:center; color:#aeb8ca; transition:.2s; }
.footer__social a:hover{ color:#fff; border-color:rgba(148,163,184,.4); background:rgba(148,163,184,.08); }

/* ============================================================ REVEAL */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal].d1{ transition-delay:.08s } [data-reveal].d2{ transition-delay:.16s }
[data-reveal].d3{ transition-delay:.24s } [data-reveal].d4{ transition-delay:.32s }

/* =========================================================== RESPONSIVE */
@media (max-width:960px){
  .hero__inner{ grid-template-columns:1fr; } .hero__viz{ order:2; max-width:520px; }
  .problem__grid,.ai__grid{ grid-template-columns:1fr; }
  .grid-bento{ grid-template-columns:repeat(2,1fr); }
  .card--span3,.card--span2,.card--feature{ grid-column:span 2; }
  .steps{ grid-template-columns:1fr; } .step__line{ display:none; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .kanban{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .nav__links,.nav__cta{ display:none; } .nav__burger{ display:flex; }
  .grid-bento{ grid-template-columns:1fr; }
  .card--span3,.card--span2,.card--feature{ grid-column:span 1; }
  .stats{ grid-template-columns:1fr 1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; gap:1.6rem; }
  .hero__trust{ gap:.4rem .9rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  [data-reveal]{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}