:root {
  --bg:#0b0f14; /* near-black blue */
  --panel:#111827; /* slate-900 */
  --muted:#9ca3af; /* gray-400 */
  --text:#e5e7eb; /* gray-200 */
  --accent:#22d3ee; /* cyan-400 */
  --accent-2:#a78bfa; /* violet-400 */
  --ring: rgba(34,211,238,.35);
  --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
  --radius:22px;
}

* { box-sizing:border-box }
html,body { height:100% }
body {
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";
  background:radial-gradient(1200px 800px at 80% -10%, rgba(167,139,250,.15), transparent 60%),
             radial-gradient(900px 600px at -10% 20%, rgba(34,211,238,.12), transparent 55%),
             var(--bg);
  color:var(--text);
  line-height:1.6;
}
a { color:var(--accent) }

/* Layout containers */
.container { max-width:1100px; margin:0 auto; padding:0 20px }

/* Header */
header {
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(11,15,20,.85), rgba(11,15,20,.55));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 0 }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit }
.brand-mark { width:36px; height:36px; border-radius:12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 8px 30px rgba(167,139,250,.25);
}
.brand-title { font-weight:800; letter-spacing:.6px }
.nav-links { display:flex; gap:18px; align-items:center }
.nav-links a { color:var(--text); text-decoration:none; opacity:.85 }
.nav-links a:hover { opacity:1 }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:700;
  padding:12px 18px; border-radius:14px; background:var(--accent); color:#001217;
  box-shadow:0 10px 30px var(--ring);
}
.btn:hover { filter:brightness(1.05) }
.btn-outline { background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.12) }
.btn-outline:hover { border-color: rgba(255,255,255,.25) }

/* Hero */
.hero { padding:72px 0 36px }
.hero-inner { display:grid; grid-template-columns: 1.1fr .9fr; gap:38px; align-items:center }
.h1 { font-size: clamp(32px, 5vw, 52px); line-height:1.1; margin:0 0 10px; font-weight:900 }
.lead { font-size: clamp(16px, 2.2vw, 20px); color:var(--muted); margin:0 0 26px }
.cta-row { display:flex; gap:14px; flex-wrap:wrap }
.hero-card { border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-radius: var(--radius); padding:24px }
.hero-card h3 { margin:0 0 6px }
.hero-bullets { display:grid; gap:12px; margin:16px 0 0 }
.hero-bullets li { list-style:none; display:flex; gap:10px; align-items:flex-start; color:var(--muted) }
.badge { display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px;
  background:#0e1726; border:1px solid rgba(255,255,255,.08); color:var(--muted); font-size:12px }

/* Sections */
.section { padding:42px 0 }
.section h2 { font-size: clamp(22px, 3.4vw, 32px); margin:0 0 14px }
.k-cards { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px }
.card { border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); padding:20px }
.card h3 { margin:.2rem 0 .35rem 0 }
.card p { margin:0; color:var(--muted) }

/* Lessons */
.lessons { display:grid; grid-template-columns: repeat(5, 1fr); gap:14px }
.lesson { border:1px solid rgba(255,255,255,.08); border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  padding:16px; text-decoration:none; color:inherit }
.lesson:hover { border-color: rgba(255,255,255,.18) }
.lesson small { color:var(--muted) }

/* Subscribe */
.subscribe { display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:center }
form .row { display:flex; gap:10px; flex-wrap:wrap }
input[type="email"] { flex:1 1 280px; padding:14px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--text) }
input[type="email"]::placeholder { color:#778 }
.disclaimer { color:var(--muted); font-size:13px }

/* Notice / disclaimer block */
.notice { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border-left:4px solid var(--danger); border-radius:12px; padding:16px 16px 16px 14px; }

.brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px; /* optional, can remove if you want sharp edges */
}

/* Footer */
footer { padding:36px 0; border-top:1px solid rgba(255,255,255,.08); color:var(--muted) }
footer a { color:var(--muted) }

/* Responsive tweaks */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .k-cards{grid-template-columns:1fr}
  .lessons{grid-template-columns:repeat(2,1fr)}
  .subscribe{grid-template-columns:1fr}
}
@media (max-width:520px){
  .lessons{grid-template-columns:1fr}
}