/* AI 101 — styles.css */
:root{
  --bg: #0b1020;
  --panel: #0f172a;
  --text: #e5e7eb;
  --muted: #a1a1aa;
  --accent: #34d399;
  --accent-2:#60a5fa;
  --ring: #93c5fd;
  --shadow: 0 10px 30px rgba(0,0,0,.3);
  --radius: 14px;
  --maxw: 1180px;
  --gap: 1.25rem;
}

*{box-sizing: border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  background: radial-gradient(1200px 700px at 20% -10%, #1f2937 0%, var(--bg) 50%);
  color: var(--text);
  line-height: 1.6;
}

img{max-width:100%;height:auto;display:block}

.site-header{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--gap);
  padding: .75rem 1rem;
  background: rgba(15,23,42,.75); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--text); font-weight:700}
.brand img{filter: drop-shadow(0 6px 12px rgba(52,211,153,.25))}
.site-nav{display:flex; gap:1rem; margin-left:auto; flex-wrap:wrap}
.site-nav a{color:var(--text); text-decoration:none; opacity:.85}
.site-nav a:hover,.site-nav a:focus{opacity:1; text-underline-offset: 6px; text-decoration: underline}

.nav-toggle{display:none; margin-left:auto; font-size:1.25rem; background:none; border:1px solid rgba(255,255,255,.2); color:var(--text); padding:.4rem .6rem; border-radius:10px}

.hero{max-width:var(--maxw); margin:2rem auto; display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; padding:0 1rem}
.lead{font-size:1.2rem; color:#d1d5db}
.cta-row{display:flex; gap:.75rem; margin:.75rem 0 1.25rem}
.button{display:inline-block; padding:.7rem 1rem; border-radius:10px; border:1px solid rgba(255,255,255,.15); text-decoration:none; color:var(--text)}
.button.primary{background: linear-gradient(180deg, var(--accent), var(--accent-2)); color:#081018; font-weight:700}
.button.ghost{background: transparent}

.meta{color:var(--muted); font-size:.9rem}

.content{max-width:var(--maxw); margin:3rem auto; padding:0 1rem}
.two-col{display:grid; gap:2rem; grid-template-columns:1.1fr .9fr}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); padding:1rem; border-radius:var(--radius); box-shadow:var(--shadow)}
.glossary{display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem}
.glossary dt{font-weight:700}
.glossary dd{margin:0; color:#d1d5db}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.tile{padding:1rem; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); background:rgba(255,255,255,.03)}
.callouts{counter-reset: step; padding-left:1.2rem}
.callouts li{margin:.5rem 0}

.accordion{border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:.5rem 1rem; background:rgba(255,255,255,.02)}
.accordion summary{cursor:pointer; font-weight:700}
.accordion pre{background:#0a0f1d; padding:1rem; border-radius:10px; overflow:auto}

.checklist{margin:0; padding-left:1rem}
.checklist li{margin:.3rem 0}

.tutorials{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.tutorial{padding:1rem; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); background:rgba(255,255,255,.03)}

.qa{border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:.5rem 1rem; background:rgba(255,255,255,.02); margin:.5rem 0}
.tip{border-left:4px solid var(--accent); padding-left:.75rem; color:#e2e8f0; font-style:italic}

.site-footer{max-width:var(--maxw); margin:4rem auto 2rem; padding:0 1rem; border-top:1px solid rgba(255,255,255,.08)}
.newsletter{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; padding-top:1rem}
.newsletter input{flex:1; min-width:240px; padding:.65rem .8rem; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:#0a0f1d; color:var(--text)}
.newsletter button{padding:.65rem .9rem; border-radius:10px; border:0}
.form-note{min-height:1.2rem; color:var(--muted)}
.small{color:var(--muted); font-size:.9rem}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; text-align:left}
  .two-col{grid-template-columns:1fr}
  .grid-3, .tutorials{grid-template-columns:1fr; }
  .site-nav{display:none; position:absolute; right:1rem; top:3.1rem; background:#0b1223; padding:.6rem; border-radius:10px; border:1px solid rgba(255,255,255,.1)}
  .nav-toggle{display:block}
  .site-nav.open{display:flex; flex-direction:column; align-items:flex-start}
}

/* Focus styles */
:focus{outline: 2px solid var(--ring); outline-offset: 3px}