/* ============================================================
   AI Work Bay — "AI at Work" design system v2
   Single file · no webfonts · no frameworks · mobile-first
   ============================================================ */
:root{
  --ink:#101c28; --ink-2:#33475c; --muted:#5a7089;
  --brand:#5a3fd4; --brand-2:#7c5cff; --brand-dark:#3d27a0;
  --navy:#120b2e; --bg:#ffffff; --bg-soft:#eef4f9; --bg-soft-2:#e3edf6;
  --line:#d7e3ee; --accent:#ffb020; --green:#177245;
  --radius:14px; --max:1140px;
  --shadow-sm:0 1px 2px rgba(8,24,38,.06),0 4px 14px rgba(8,24,38,.06);
  --shadow-md:0 6px 24px rgba(8,24,38,.12),0 2px 6px rgba(8,24,38,.08);
  --grad-hero:radial-gradient(1100px 480px at 85% -10%,rgba(255,176,32,.20),transparent 60%),radial-gradient(900px 520px at 8% 0%,rgba(10,125,224,.35),transparent 55%),linear-gradient(160deg,#1d1450 0%,#5a3fd4 58%,#7c5cff 100%);
  --grad-btn:linear-gradient(180deg,var(--brand-2),var(--brand));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.65;background:var(--bg);-webkit-font-smoothing:antialiased}
::selection{background:#ddd2ff}
a{color:var(--brand)} a:hover{color:var(--brand-dark)}
img{max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(8,24,38,.02)}
.site-header .wrap{display:flex;align-items:center;gap:20px;min-height:66px}
.logo{font-weight:800;font-size:1.22rem;color:var(--ink);text-decoration:none;white-space:nowrap;letter-spacing:-.02em}
.logo span{color:var(--brand)}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.main-nav a{color:var(--ink-2);text-decoration:none;font-weight:600;padding:6px 2px;border-bottom:2px solid transparent}
.main-nav a:hover{color:var(--brand);border-color:var(--accent)}
.btn{display:inline-block;background:var(--grad-btn);color:#fff!important;padding:.6em 1.2em;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:var(--shadow-sm);border:1px solid rgba(7,63,116,.25);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);color:#fff!important}
.btn.ghost{background:#fff;color:var(--brand)!important;border:2px solid var(--brand);box-shadow:none}
.btn.ghost:hover{background:var(--bg-soft)}
.btn.light{background:#fff;color:var(--brand-dark)!important;border-color:#fff}
.nav-toggle{display:none;margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.45em .75em;font:inherit;cursor:pointer}
@media (max-width:840px){
  .nav-toggle{display:block}
  .main-nav{display:none;position:absolute;left:0;right:0;top:66px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md)}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;padding:14px 20px;gap:10px}
  .header-cta{display:none}
}

/* ---------- Hero ---------- */
.hero{background:var(--grad-hero);color:#efeaff;padding:74px 0 84px;text-align:center;position:relative;overflow:hidden}
.hero h1{font-size:2.65rem;line-height:1.12;margin:.15em auto .35em;max-width:880px;color:#fff;animation:rise .6s ease both}
.hero p.lede{font-size:1.16rem;color:#ddd2ff;max-width:740px;margin:0 auto 1.4em;animation:rise .6s .08s ease both}
.hero .kicker{color:var(--accent)}
.hero .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:rise .6s .16s ease both}
.hero .trust{margin-top:1.3em;color:#bdb0ea;font-size:.95rem;animation:rise .6s .24s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero h1,.hero p.lede,.hero .cta-row,.hero .trust{animation:none}}

/* ---------- Sections & cards ---------- */
section{padding:52px 0}
.section-head{max-width:740px}
.section-head h2{font-size:1.75rem;margin:.15em 0 .3em}
.section-head p{color:var(--muted)}
.kicker{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);margin:0}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:24px}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:#fff;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card h3{margin:.35em 0 .4em;font-size:1.13rem;line-height:1.35}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--brand)}
.card p{color:var(--muted);margin:.2em 0 1em}
.card .more{margin-top:auto;font-weight:700;text-decoration:none}
.card .meta-line{font-size:.85rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chips a{border:1px solid var(--line);border-radius:999px;padding:.5em 1.05em;text-decoration:none;color:var(--ink-2);font-weight:600;background:#fff;box-shadow:var(--shadow-sm);transition:all .15s ease}
.chips a:hover{border-color:var(--brand);color:#fff;background:var(--brand)}
.split{display:grid;gap:30px;grid-template-columns:1fr 1fr;align-items:center}
@media (max-width:840px){.split{grid-template-columns:1fr}.hero h1{font-size:2rem}}
.alt{background:var(--bg-soft)}
.callout{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow-sm)}
.newsletter{background:var(--grad-hero);color:#efeaff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-md)}
.newsletter h2{color:#fff;margin-top:0}
.newsletter p{color:#ddd2ff}
.newsletter form{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.newsletter input{flex:1;min-width:220px;padding:.7em .9em;border:1px solid transparent;border-radius:10px;font:inherit}

/* ---------- Calculator ---------- */
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:26px}
.calc label{display:block;font-weight:700;margin-top:14px}
.calc input[type=number]{width:100%;padding:.65em .8em;margin-top:.35em;border:1px solid var(--line);border-radius:10px;font:inherit}
.calc input[type=range]{width:100%;margin-top:.4em;accent-color:var(--brand)}
.calc .out{background:var(--bg-soft);border-radius:12px;padding:18px 20px;margin-top:20px;text-align:center}
.calc .big{font-size:2rem;font-weight:800;color:var(--brand-dark);line-height:1.1}

/* ---------- Article ---------- */
.breadcrumbs{font-size:.9rem;color:var(--muted);padding-top:24px}
.breadcrumbs a{color:var(--muted)}
article.post{max-width:790px;margin:0 auto;padding-bottom:24px}
article.post h1{font-size:2.15rem;line-height:1.18;margin:.3em 0 .4em}
article.post h2{font-size:1.52rem;margin-top:1.7em}
article.post h3{font-size:1.18rem;margin-top:1.3em}
.byline{display:flex;gap:8px 16px;flex-wrap:wrap;color:var(--muted);font-size:.92rem;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:10px}
.toc{border:1px solid var(--line);border-radius:12px;padding:16px 22px;background:var(--bg-soft);margin:20px 0}
.toc strong{display:block;margin-bottom:6px}
.toc ol{margin:0;padding-left:1.2em}
table{border-collapse:collapse;width:100%;margin:20px 0;font-size:.96rem;box-shadow:var(--shadow-sm);border-radius:10px;overflow:hidden}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--bg-soft-2)}
tbody tr:nth-child(even) td,table tr:nth-child(even) td{background:#f8fbfe}
.verdict{background:#edf7ee;border:1px solid #cde6cd;border-left:5px solid var(--green);border-radius:12px;padding:16px 20px;margin:16px 0}
.faq details{border:1px solid var(--line);border-radius:12px;padding:13px 18px;margin:10px 0;background:#fff}
.faq summary{font-weight:700;cursor:pointer}
.related{margin-top:38px}

/* ---------- Footer ---------- */
.site-footer{background:linear-gradient(180deg,#171038,var(--navy));color:#c3d5e6;margin-top:48px}
.site-footer a{color:#e9f2f9;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-grid{display:grid;gap:28px;grid-template-columns:2fr 1fr 1fr 1fr;padding:42px 0 12px}
@media (max-width:840px){.footer-grid{grid-template-columns:1fr 1fr}}
.site-footer h4{color:#fff;margin:.2em 0 .6em}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-base{border-top:1px solid #223a52;padding:16px 0 24px;font-size:.92rem;color:#8fa9bf}