/* Branded ASL Homework Helper */
:root {
  --brand:#6C5CE7; /* indigo */
  --accent:#00C2A8; /* teal */
  --bg:#f6f8fb;
  --ink:#1f2a44;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 Inter, Arial, Helvetica, sans-serif;background:var(--bg);color:var(--ink)}
header{position:sticky;top:0;z-index:20;background:var(--brand);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.header-inner{max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:18px;justify-content:space-between;padding:12px 20px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px}
nav a{color:#fff;text-decoration:none;margin:0 10px;font-weight:700;opacity:.95}
nav a:hover{opacity:1;text-decoration:underline}
.hero{background:linear-gradient(135deg, rgba(108,92,231,.08), rgba(0,194,168,.08));padding:56px 20px;text-align:center}
.hero h1{margin:0 0 12px;font-size:34px}
.hero p{max-width:760px;margin:0 auto 20px;color:#2e3a5e}
.cta{display:inline-block;background:var(--brand);color:#fff;padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:800;margin:6px 8px}
.cta.secondary{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.section{max-width:1140px;margin:28px auto;padding:0 20px}
h2.section-title{margin:6px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{background:var(--card);border-radius:14px;box-shadow:0 8px 24px rgba(31,42,68,.06);padding:16px 16px 18px}
.card h3{margin:8px 0 8px}
.card p{margin:4px 0 12px;color:#40507a}
.card a.button{display:inline-block;background:#f7f9ff;border:2px solid var(--brand);color:var(--brand);text-decoration:none;font-weight:800;padding:8px 12px;border-radius:10px}
.card a.button:hover{background:#fff}
iframe{width:100%;height:268px;border:none;border-radius:12px}
.footer{background:#0f1424;color:#cfd6ea;text-align:center;padding:26px;margin-top:40px}
.breadcrumbs{font-size:14px;color:#6b7a99;margin-bottom:8px}
.lesson{max-width:920px;margin:24px auto;background:#fff;padding:20px;border-radius:14px;box-shadow:0 8px 24px rgba(31,42,68,.06)}
.quiz{margin-top:18px}
.hint-btn{background:var(--accent);color:#0b1a2b;border:none;padding:9px 12px;border-radius:10px;font-weight:800;cursor:pointer}
.smartbar{margin-top:16px;background:#eef4ff;padding:12px;border-radius:12px;border:1px solid #dfe8ff}
.icon{font-size:28px}
.small{font-size:14px;color:#6b7a99}