/* GolpoTwist brand colors from the app's existing DESIGN.md. */
:root { --paper:#13110f; --ink:#e8e2d6; --muted:#cfc5b5; --accent:#e0b26b; --surface:#221f1b; --surface-raised:#2b2722; --line:#4d463c; }
.hero { grid-template-columns:1.2fr .8fr; gap:64px; }
.hero h1 { font-size:clamp(48px,6vw,76px); }
.bangla-line { color:var(--accent); font-size:24px; line-height:1.65; margin-top:24px; }
.story-preview { max-width:350px; justify-self:center; }
.story-preview img { border-radius:18px; border:1px solid var(--line); }
.story-preview figcaption { text-align:center; color:var(--muted); font-size:12px; margin-top:16px; }
.button-primary { color:#2a1c05; }
.button-primary:hover { background:#f6dead; }
.use-cases>h2 { margin-bottom:36px; }
.use-case-grid h3 { margin-bottom:12px; }
.screenshot-grid { gap:32px 20px; }
.screenshot-grid img { border:1px solid var(--line); }
.site-footer { flex-wrap:wrap; }
.site-footer nav { flex-wrap:wrap; }
@media(max-width:640px) { .hero { grid-template-columns:1fr; gap:36px; } .story-preview { max-width:300px; } .bangla-line { font-size:22px; } .site-footer nav { gap:16px; } }