/* Modern blue gradient theme */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Inter', Arial, 'Noto Sans', sans-serif;
  color: #0f172a;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe 40%, #bfdbfe 100%);
}
:root {
  --blue1:#0ea5e9; /* sky-500 */
  --blue2:#2563eb; /* blue-600 */
  --glass: rgba(255,255,255,.6);
  --border: rgba(255,255,255,.45);
  --shadow: 0 10px 30px rgba(30, 58, 138, .15);
}
.bg::before, .bg::after {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  background: radial-gradient(600px 200px at 10% 10%, rgba(125,211,252,.35), transparent),
              radial-gradient(700px 250px at 90% 60%, rgba(96,165,250,.30), transparent),
              radial-gradient(800px 300px at 40% 100%, rgba(34,211,238,.20), transparent);
  filter: blur(20px);
  z-index: -1;
}
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 20px;
  text-align: center;
}
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; backdrop-filter: blur(10px);
  background: rgba(255,255,255,.45);
  border-bottom: 1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#0f172a; font-weight:600;}
.brand img { filter: drop-shadow(0 2px 8px rgba(37,99,235,.3)); }
.links a { color:#0f172a; text-decoration:none; opacity:.8; margin-left:14px; }
.links a:hover { opacity:1; }

.chip {
  display:inline-block; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border); background: var(--glass);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}
.title { font-size: clamp(32px, 6vw, 60px); margin: 16px auto; line-height: 1.1; }
.grad { background: linear-gradient(90deg, var(--blue1), var(--blue2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 720px; margin: 10px auto 22px; font-size: clamp(16px,2.2vw,20px); opacity:.9; }

.notify { display:flex; gap:10px; max-width:540px; margin: 18px auto 32px; background: var(--glass); padding: 10px; border:1px solid var(--border); border-radius: 18px; backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.notify input { flex:1; padding: 14px 14px; border-radius: 12px; border: none; outline: none; background: transparent; font-size:16px; }
.notify button { padding: 12px 16px; border-radius: 12px; border:0; color:white; font-weight:600; background: linear-gradient(90deg, var(--blue1), var(--blue2)); cursor:pointer; }
.notify button:hover { filter: brightness(1.05); }

.features { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; margin-top: 10px;}
.card { text-align:left; background: var(--glass); border:1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.card h3 { margin: 8px 0; }
.card p { margin: 0; opacity:.85; }

.small { font-size: 14px; opacity: .8; max-width: 760px; margin: 18px auto 0; }
.legal { text-align: left; max-width: 800px; }
.legal h1 { text-align: left; }
.muted { opacity: .75; }

.footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 16px 20px; border-top:1px solid var(--border); background: rgba(255,255,255,.45); }

/* Cookie banner */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px; }
.cookie-inner { margin: 0 auto; max-width: 840px; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 16px; padding: 14px; backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.cookie-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content: space-between; }
.cookie-prefs { margin-top: 10px; padding: 10px; border:1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.6); }
.cookie-prefs label { display:block; margin-bottom:8px; }
.cookie-save { display:flex; gap:10px; margin-top:8px; align-items:center; }
.btn { padding: 10px 14px; border-radius: 10px; border:1px solid var(--border); background: var(--glass); cursor:pointer; }
.btn.primary { background: linear-gradient(90deg, var(--blue1), var(--blue2)); color: white; border: none; }
.btn.outline { background: transparent; }
.link { text-decoration: none; color: #0f172a; opacity:.8; }
.link:hover { opacity:1; }

/* Responsive tweaks */
@media (max-width: 640px) {
  .links { display:none; }
  .footer { flex-direction: column; text-align: center; }
  .notify { flex-direction: column; }
}