:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --primary: #38bdf8;
  --primary-light: #7dd3fc;
  --text: #f8fafc;
  --dim: #94a3b8;
  --border: #334155;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; }

.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }

nav { background:rgba(15,23,42,0.92); backdrop-filter:blur(12px); position:sticky; top:0; z-index:100; border-bottom:1px solid var(--border); padding:1rem 0; }
.nav-inner { display:flex; justify-content:space-between; align-items:center; }
.brand { font-family:'Outfit'; font-size:1.9rem; font-weight:800; color:var(--primary); text-decoration:none; }
.nav-links a { color:var(--dim); margin-left:1.8rem; font-weight:500; text-decoration:none; }
.nav-links a:hover { color:var(--primary-light); }

.hero { padding:7rem 0 5rem; text-align:center; }
h1 { font-family:'Outfit'; font-size:clamp(2.8rem,8vw,4.8rem); color:var(--primary); margin-bottom:1rem; }
.subtitle { color:var(--dim); font-size:1.3rem; max-width:780px; margin:0 auto 3rem; }

.tools-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; margin:3rem 0; }
.tool-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:2rem; text-align:center; transition:0.25s; }
.tool-card:hover { transform:translateY(-6px); border-color:var(--primary); box-shadow:0 12px 32px rgba(0,0,0,0.3); }
.tool-card i { font-size:3.2rem; color:var(--primary); margin-bottom:1.2rem; }

.ad-slot { background:var(--surface); padding:1.5rem; border-radius:12px; margin:3rem 0; text-align:center; }

footer { border-top:1px solid var(--border); padding:4rem 0 2rem; text-align:center; color:var(--dim); font-size:0.95rem; }
.legal-links a { margin:0 1rem; color:var(--dim); text-decoration:none; }
.legal-links a:hover { color:var(--primary); }

/* Cookie banner & legal modal styles (same as previous) */
#cookie-banner { /* ... copy from earlier messages ... */ }
#legal-modal, .legal-modal { /* ... copy from earlier messages ... */ }