:root{
  --bg:#f4f4f2;
  --paper:#ffffff;
  --ink:#111214;
  --ink-2:#3a3c42;
  --muted:#6b6d74;
  --line:rgba(17,18,20,.09);
  --line-2:rgba(17,18,20,.16);
  --accent:#2f4bff;
  --accent-soft:rgba(47,75,255,.08);
  --r:16px;
  --r-in:10px;
  --ease:cubic-bezier(.22,.8,.2,1);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 32px}

/* top bar */
.bar{position:sticky;top:0;z-index:20;background:rgba(244,244,242,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{font-weight:600;letter-spacing:-.01em;text-decoration:none;font-size:15px}
.brand span{color:var(--muted);font-weight:400}
.nav{display:flex;gap:6px;align-items:center}
.nav a,.nav button{font:inherit;font-size:14px;text-decoration:none;color:var(--ink-2);padding:7px 14px;border-radius:999px;border:1px solid transparent;background:none;cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);white-space:nowrap}
.nav a:hover,.nav button:hover{background:rgba(17,18,20,.05)}
.nav a.on{border-color:var(--line-2);color:var(--ink)}
.nav .cta{background:var(--ink);color:#fff}
.nav .cta:hover{background:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:15px;font-weight:500;text-decoration:none;padding:12px 14px 12px 20px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;transition:background .35s var(--ease),border-color .35s var(--ease),transform .2s var(--ease);white-space:nowrap}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn:active{transform:scale(.98)}
.btn .ic{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.14);font-size:13px;transition:transform .35s var(--ease)}
.btn:hover .ic{transform:translate(2px,-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost .ic{background:rgba(17,18,20,.06)}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.ghost:hover .ic{background:rgba(255,255,255,.14)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.eyebrow i{width:7px;height:7px;border-radius:99px;background:var(--accent);display:inline-block}

h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.05}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink-2);max-width:60ch}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
p+p{margin-top:14px}

/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* footer */
.foot{border-top:1px solid var(--line);padding:40px 0 56px;margin-top:40px}
.foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.foot h3{font-size:clamp(26px,3vw,36px)}
.foot .links{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:760px){
  .wrap{padding:0 20px}
  .nav a.hide-m{display:none}
}

/* ===== navy + soft neon (28.10) ===== */
:root{
  --bg:#f1f3f8;
  --navy:#0b1f5c;
  --navy-2:#132f7d;
  --accent:#1f45c9;
  --accent-soft:rgba(31,69,201,.08);
  --glow:64,112,255;
  --line:rgba(11,31,92,.10);
  --line-2:rgba(11,31,92,.20);
}
body{background:radial-gradient(1200px 600px at 85% -10%,rgba(var(--glow),.10),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(11,31,92,.06),transparent 60%),var(--bg);background-attachment:fixed}
.bar{background:rgba(241,243,248,.8);border-bottom-color:rgba(11,31,92,.12)}
.eyebrow{color:var(--navy-2)}
.eyebrow i{background:rgb(var(--glow));box-shadow:0 0 0 0 rgba(var(--glow),.5);animation:jc-dot 3.6s ease-in-out infinite}
@keyframes jc-dot{0%,100%{box-shadow:0 0 0 0 rgba(var(--glow),0)}50%{box-shadow:0 0 10px 3px rgba(var(--glow),.55)}}

/* soft neon edge: a pseudo layer that only fades its opacity, so it stays cheap */
.btn,.nav .cta,.neon{position:relative;isolation:isolate}
.btn::after,.nav .cta::after,.neon::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px rgba(var(--glow),.55),0 0 22px 2px rgba(var(--glow),.38);opacity:.15;animation:jc-neon 6s ease-in-out infinite alternate}
@keyframes jc-neon{0%{opacity:.12}100%{opacity:.85}}
.btn:nth-of-type(2)::after{animation-delay:-3s}

.btn{background:var(--navy);border-color:var(--navy)}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{background:rgba(255,255,255,.6);color:var(--navy);border:1.5px solid rgba(31,69,201,.45)}
.btn.ghost .ic{background:var(--accent-soft);color:var(--accent)}
.btn.ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.nav .cta{background:var(--navy)}
.nav a.on{border-color:rgba(31,69,201,.45);color:var(--navy)}
.nav a:hover{background:var(--accent-soft)}

/* links inside text: navy underline that thickens on hover */
main p a,main li a,.contact a{color:var(--navy-2);text-decoration:underline;text-decoration-color:rgba(31,69,201,.35);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:text-decoration-color .3s var(--ease),color .3s var(--ease)}
main p a:hover,main li a:hover,.contact a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* dark blocks become navy, with the same slow glow on the edge */
html body .card.dark,html body .demo,html body .story .pull,html body .door.dark{background:linear-gradient(140deg,var(--navy) 0%,var(--navy-2) 100%);border-color:transparent;position:relative;isolation:isolate}
html body .card.dark::after,html body .demo::after,html body .story .pull::after,html body .door.dark::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(var(--glow),.55),0 0 34px 0 rgba(var(--glow),.30);opacity:.2;animation:jc-neon 7s ease-in-out infinite alternate}

/* light cards: navy hairline, glow outline on hover */
html body .card,html body .feature,html body .tile,html body .door{border-color:rgba(11,31,92,.12);transition:border-color .5s var(--ease),box-shadow .6s var(--ease),transform .5s var(--ease)}
html body .card:not(.dark):hover,html body .feature:hover,html body .tile:hover,html body .door:not(.dark):hover{border-color:rgba(31,69,201,.45);box-shadow:0 0 0 3px rgba(var(--glow),.08),0 18px 40px -24px rgba(11,31,92,.35)}

/* headings: short navy underline on section titles */
.mark{background:linear-gradient(transparent 62%,rgba(var(--glow),.22) 62%);padding:0 .08em}
.free{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;padding:5px 11px;border-radius:999px;color:var(--navy);border:1.5px solid rgba(31,69,201,.5);background:rgba(var(--glow),.08)}
.free::before{content:"";width:6px;height:6px;border-radius:9px;background:rgb(var(--glow));animation:jc-dot 3.6s ease-in-out infinite}
.note-free{margin-top:12px;font-size:14px;color:var(--navy-2)}

@media (prefers-reduced-motion:reduce){
  .btn::after,.nav .cta::after,.neon::after,html body .card.dark::after,html body .demo::after,html body .story .pull::after,html body .door.dark::after{animation:none;opacity:.5}
  .eyebrow i,.free::before{animation:none}
}