/* cp.css - shared tokens, chrome, nav, buttons for CP home concepts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --font-disp:'Space Grotesk',system-ui,sans-serif;
  --font-sans:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* dark system */
  --ink:#ECF1F8; --ink-2:#A9B4C6; --ink-3:#717D92; --ink-4:#4B5468;
  --charcoal:#0D1016; --charcoal-2:#12161F; --charcoal-3:#1A1F2B;
  --navy:#0B1426; --navy-2:#0F1D38; --navy-3:#16284B;
  --cobalt:#2E63E6; --cobalt-2:#4E86FF; --cobalt-3:#7AA6FF; --cobalt-deep:#1C44B5;
  --steel:#8893A6;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.17);
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.085); --glass-line:rgba(255,255,255,.16);
  --gold:#C8A04A; --teal:#36BBA6;

  /* light system (Concept D) */
  --paper:#ECEFF5; --paper-2:#FFFFFF; --paper-3:#F6F8FC;
  --ink-d:#141A24; --ink-d3:#7A8599;
  --line-d:rgba(18,26,42,.12); --line-d2:rgba(18,26,42,.20);

  /* motion */
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --ease-soft:cubic-bezier(0.4,0,0.2,1);
  --dur-fast:120ms; --dur:220ms; --dur-slow:420ms;
}

/* ---------- base type helpers ---------- */
.cp *{box-sizing:border-box;}
.cp{font-family:var(--font-sans);}
.disp{font-family:var(--font-disp);}
.mono{font-family:var(--font-mono);}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cobalt-2);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow .rule{height:1px;width:34px;background:linear-gradient(90deg,var(--cobalt-2),transparent);display:inline-block;}

/* ---------- browser chrome ---------- */
.chrome{
  height:42px; display:flex; align-items:center; gap:14px; padding:0 16px;
  background:var(--charcoal-2); border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.chrome.light{background:#E2E6EE;border-bottom:1px solid var(--line-d);}
.lights{display:flex;gap:8px;}
.lights i{width:12px;height:12px;border-radius:50%;display:block;}
.lights i:nth-child(1){background:#ED6A5E;}
.lights i:nth-child(2){background:#F4BE4F;}
.lights i:nth-child(3){background:#61C554;}
.urlbar{
  flex:1; max-width:420px; margin:0 auto; height:26px; border-radius:7px;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; color:var(--ink-3); letter-spacing:.02em;
}
.chrome.light .urlbar{background:rgba(18,26,42,.04);border:1px solid var(--line-d);color:#6A7488;}
.urlbar svg{width:11px;height:11px;opacity:.7;}
.chrome-spacer{width:54px;flex:0 0 auto;}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:16px;}
.seal{
  width:42px;height:42px;border:1.5px solid var(--line-2);border-radius:8px;
  display:grid;place-items:center;font-family:var(--font-disp);font-weight:700;
  font-size:15px;letter-spacing:.04em;color:var(--ink);position:relative;
}
.seal::after{content:"";position:absolute;left:9px;right:9px;bottom:8px;height:2px;background:var(--cobalt);border-radius:2px;}
.brand-txt b{font-family:var(--font-disp);font-weight:600;font-size:14px;letter-spacing:.16em;color:var(--ink);text-transform:uppercase;display:block;line-height:1;}
.brand-txt span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase;}
.navlinks{display:flex;align-items:center;gap:38px;}
.navlink{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:500;position:relative;}
.navlink.active{color:var(--ink);}
.navlink.active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--cobalt);}
.nav.light .brand-txt b{color:var(--ink-d);}
.nav.light .brand-txt span{color:var(--ink-d3);}
.nav.light .seal{border-color:var(--line-d2);color:var(--ink-d);}
.nav.light .navlink{color:#54607A;}
.nav.light .navlink.active{color:var(--ink-d);}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  height:50px;padding:0 26px;border-radius:8px;display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  border:1px solid transparent;transition:transform .18s,box-shadow .18s,background .18s;white-space:nowrap;
}
.btn svg{width:15px;height:15px;}
.btn-primary{background:var(--cobalt);color:#fff;box-shadow:0 8px 30px rgba(46,99,230,.40);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn-primary.d{background:var(--cobalt);color:#fff;box-shadow:0 10px 30px rgba(46,99,230,.30);}
.btn-ghost.d{color:var(--ink-d);border-color:var(--line-d2);}

/* ---------- name treatment ---------- */
.name-solid{font-family:var(--font-disp);font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:.9;}
.name-outline{font-family:var(--font-disp);font-weight:700;color:transparent;letter-spacing:-.03em;line-height:.9;-webkit-text-stroke:1.4px rgba(236,241,248,.34);}

/* ---------- ai assistant shared ---------- */
.pulse{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(54,187,166,.55);animation:pulse 2.4s infinite;flex:0 0 auto;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(54,187,166,.5)}70%{box-shadow:0 0 0 9px rgba(54,187,166,0)}100%{box-shadow:0 0 0 0 rgba(54,187,166,0)}}
.wave{display:flex;align-items:center;gap:3px;height:16px;}
.wave i{width:2.5px;border-radius:2px;background:var(--cobalt-2);display:block;}

/* progress dots */
.dots{display:flex;align-items:center;gap:9px;}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);display:block;}
.dots i.on{width:22px;border-radius:4px;background:var(--cobalt);}

/* scroll cue text */
.scrollcue{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:14px;}

/* hero shells */
.hero{position:relative;width:100%;flex:1 1 auto;overflow:hidden;}
.frame{width:1440px;height:900px;display:flex;flex-direction:column;background:var(--charcoal);overflow:hidden;font-family:var(--font-sans);}