/* ============================================================================
   AI BOT CODER — shared redesign design system
   The single source of truth for the redesigned site (homepage + inner pages).
   Inner pages: link this AFTER the Google Fonts <link>, do NOT load Bootstrap.
   Tokens/components mirror the homepage (index.html) so every page matches.
   ============================================================================ */

:root{
  --bg:#08090c; --bg2:#0c0e13; --elev:#12151d; --elev2:#171b25;
  --blue:#6ea8fe; --blue-bright:#9cc4ff; --blue-deep:#3b6fd4;
  --ink:#f3f6fc; --muted:#8a93a6; --faint:#5a6276;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --alarm:#ff5d54; --phos:#5ef2b0;
  --display:'Bricolage Grotesque',sans-serif;
  --body:'Hanken Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--blue);color:#04060a}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* grain overlay */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mono{font-family:var(--mono)}
.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:500}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.narrow{max-width:880px}

/* ───────── NAV ───────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(8,9,12,.72);backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--line)}
.nav .brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:1rem;letter-spacing:-.01em}
.nav .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 14px var(--blue);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
.nav .brand b{color:var(--ink)} .nav .brand span{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:30px;font-size:.92rem;color:var(--muted)}
.nav-links a{transition:color .2s} .nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.82rem;font-weight:500;padding:10px 16px;border:1px solid var(--line2);border-radius:100px;color:var(--ink);transition:.25s;white-space:nowrap}
.nav-cta:hover{border-color:var(--blue);background:rgba(110,168,254,.1);box-shadow:0 0 24px rgba(110,168,254,.18)}
.nav-cta .rdot{width:7px;height:7px;border-radius:50%;background:var(--phos);box-shadow:0 0 10px var(--phos);animation:pulse 1.6s infinite}

/* ───────── BUTTONS ───────── */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-weight:500;font-size:.92rem;padding:15px 26px;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:transform .2s,box-shadow .3s,background .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:#04060a;font-weight:700}
.btn-primary:hover{background:var(--blue-bright);box-shadow:0 14px 44px rgba(110,168,254,.4)}
.btn-ghost{border-color:var(--line2);color:var(--ink);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--blue);background:rgba(110,168,254,.08)}
.btn svg{width:17px;height:17px}

/* ───────── PAGE HERO (inner pages) ───────── */
.page-hero{position:relative;padding:170px 0 70px;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 60% at 75% 20%,rgba(110,168,254,.14),transparent 70%),
             radial-gradient(50% 60% at 10% 90%,rgba(59,111,212,.1),transparent 70%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.03em;font-size:clamp(2.6rem,7vw,5.2rem);margin:22px 0 20px;max-width:16ch}
.page-hero p.lead{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:56ch}
.hero-eyebrow{display:flex;align-items:center;gap:14px}
.hero-eyebrow .ln{height:1px;width:54px;background:linear-gradient(90deg,var(--blue),transparent)}

/* ───────── SECTIONS ───────── */
section{position:relative}
.sec{padding:90px 0}
.sec-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:54px;max-width:60ch}
.sec-head h2{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.04;font-size:clamp(2rem,4.4vw,3.4rem);margin-top:16px}
.sec-head p.lead{color:var(--muted);font-size:1.1rem;margin-top:16px}

/* ───────── CARDS / GRID ───────── */
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:linear-gradient(160deg,var(--elev),transparent);border:1px solid var(--line);border-radius:18px;padding:32px;transition:transform .3s,border-color .3s,background .3s}
.card:hover{transform:translateY(-4px);border-color:var(--line2);background:linear-gradient(160deg,var(--elev2),transparent)}
.card .ic{font-family:var(--mono);color:var(--blue);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;display:block}
.card h3{font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:-.01em;margin-bottom:12px}
.card p{color:var(--muted);font-size:1rem}
.card p + p{margin-top:10px}
.card .res{color:var(--ink)} .card .res b{color:var(--blue)}

/* checklist */
.ticks{list-style:none;display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.ticks li::before{content:"→";color:var(--blue);font-family:var(--mono);flex:none}

/* ───────── CTA BAND ───────── */
.cta-band{padding:120px 0;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--line);background:radial-gradient(80% 120% at 50% 120%,rgba(110,168,254,.15),var(--bg) 70%)}
.cta-band h2{font-family:var(--display);font-weight:800;font-size:clamp(2.3rem,6vw,4.6rem);letter-spacing:-.03em;line-height:.97;margin-bottom:20px}
.cta-band p{color:var(--muted);max-width:50ch;margin:0 auto 36px;font-size:1.15rem}

/* ───────── FOOTER ───────── */
footer.site{padding:56px 0 46px;border-top:1px solid var(--line);background:var(--bg2)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:.88rem}
.foot .brand{font-family:var(--mono);font-weight:700;color:var(--ink)}
.foot a{transition:color .2s} .foot a:hover{color:var(--blue)}
.foot-copy{margin-top:18px;color:var(--faint);font-size:.8rem}

/* ───────── ARTICLE / PROSE (blog posts) ───────── */
.prose{max-width:720px;margin:0 auto;font-size:1.12rem;line-height:1.75;color:#cfd6e4}
.prose > p:first-of-type{font-size:1.22rem;color:var(--ink)}
.prose h2{font-family:var(--display);font-weight:700;font-size:1.85rem;letter-spacing:-.02em;color:var(--ink);margin:48px 0 16px}
.prose h3{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--ink);margin:34px 0 12px}
.prose p{margin:0 0 20px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:8px;display:flex;flex-direction:column;gap:10px;list-style:none}
.prose ul li{display:flex;gap:12px;align-items:flex-start}
.prose ul li::before{content:"→";color:var(--blue);font-family:var(--mono);flex:none}
.prose ol{counter-reset:li}
.prose ol li{display:flex;gap:12px;align-items:flex-start}
.prose ol li::before{counter-increment:li;content:counter(li);color:var(--blue);font-family:var(--mono);font-weight:700;flex:none}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--blue-bright)}
.prose strong{color:var(--ink);font-weight:700}
.prose blockquote{border-left:3px solid var(--blue);padding:8px 0 8px 22px;margin:0 0 24px;color:var(--ink);font-family:var(--display);font-size:1.25rem;font-style:italic}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--elev2);padding:2px 7px;border-radius:6px;color:var(--blue-bright)}
.prose hr{border:none;border-top:1px solid var(--line);margin:40px 0}
.prose img{border-radius:12px;margin:26px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.98rem}
.prose th,.prose td{border:1px solid var(--line);padding:11px 14px;text-align:left}
.prose th{background:var(--elev);font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
.article-meta{font-family:var(--mono);font-size:.82rem;color:var(--muted);letter-spacing:.04em}

/* ───────── REVEAL ───────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ───────── RESPONSIVE ───────── */
@media(max-width:900px){
  .nav-links{display:none}
  .grid-3,.grid-2{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav{padding:13px 16px}
  .nav .brand{font-size:.9rem}
  .nav-cta{font-size:.76rem;padding:9px 13px}
  .cta-lbl{display:none}
  .page-hero{padding:130px 0 50px}
  .card{padding:24px}
}