@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Inter:wght@300;400;600&display=swap');

:root{
  --bg: #0e0f14;
  --bg-soft: #121522;
  --card: rgba(255,255,255,0.06);
  --card-strong: rgba(255,255,255,0.12);
  --text: #e8ecf1;
  --muted: #a7b0be;
  --primary: #7a7fff;
  --primary-2: #4de1d3;
  --accent: #ff6aa2;
  --warning: #ffd166;
  --success: #43d787;
  --danger: #ff5d5d;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 28px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background:
    radial-gradient(1200px 800px at 80% 0%, rgba(122,127,255,0.15), transparent 60%),
    radial-gradient(900px 700px at 0% 30%, rgba(77,225,211,0.15), transparent 60%),
    linear-gradient(180deg, #0e0f14, #0c0d12 80%);
  color: var(--text);
  line-height: 1.65;
}

.container{width: min(1200px, 92%); margin: 0 auto}

a{color: var(--primary); text-decoration: none}
a:hover{color: var(--primary-2)}

.nav{
  position: sticky; top:0; z-index: 1000;
  backdrop-filter: blur(14px);
  background: rgba(10,11,17,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px; color: var(--text); font-weight:700;
  letter-spacing: 0.3px;
}
.brand img{width:36px;height:36px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,0.12)}
.nav ul{display:flex; gap:18px; list-style:none; padding:0; margin:0}
.nav a.btn{
  padding:10px 16px; border-radius: 999px; border:1px solid rgba(255,255,255,0.1);
  color: var(--text); background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.nav a.btn:hover{border-color: var(--primary); box-shadow: 0 6px 20px rgba(122,127,255,0.2)}

.hero{
  padding: 72px 0 40px;
}
.hero .wrap{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items:center;
}
.hero h1{
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.08; margin: 0 0 14px;
  letter-spacing: -0.5px;
}
.hero p{font-size: clamp(16px, 1.6vw, 18px); color: var(--muted)}
.hero .cta{display:flex; gap:14px; margin-top: 18px}
.btn{
  border:0; cursor:pointer; font-weight:600; color:#0b0c12;
  padding: 12px 18px; border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 26px rgba(122,127,255,0.35);
}
.btn.alt{background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)); color: var(--text); border:1px solid rgba(255,255,255,0.12)}
.btn.warn{background: linear-gradient(135deg, var(--warning), #ffc857)}
.btn:active{transform: translateY(1px)}

.hero .image{
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero img{width:100%; height:420px; object-fit:cover; border-radius: 20px}

.section{padding: 40px 0}
.section h2{
  font-family: Poppins, Inter, sans-serif;
  font-size: clamp(24px, 3.5vw, 36px);
  margin: 0 0 16px;
}

.grid{
  display:grid; gap: 20px;
}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
.grid.cols-2{grid-template-columns: repeat(2, 1fr)}
@media (max-width: 900px){
  .hero .wrap{grid-template-columns: 1fr}
  .grid.cols-3{grid-template-columns: 1fr}
  .grid.cols-2{grid-template-columns: 1fr}
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card img{
  width:100%; height: 220px; object-fit: cover; border-radius: 14px; margin-bottom: 12px
}
.card .meta{display:flex; gap:12px; align-items:center; color: var(--muted); font-size: 14px}

.kicker{
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--primary-2); font-weight: 700
}

.beginners{
  display:grid; gap: 16px; grid-template-columns: 1.3fr 0.7fr;
}
@media (max-width: 900px){ .beginners{grid-template-columns:1fr} }
.beginners .panel{
  background: linear-gradient(180deg, rgba(77,225,211,0.14), rgba(255,255,255,0.03));
  border:1px solid rgba(77,225,211,0.25);
  border-radius: var(--radius);
  padding: 18px;
}
.fact{
  background: linear-gradient(180deg, rgba(255,106,162,0.18), rgba(255,255,255,0.03));
  border:1px solid rgba(255,106,162,0.25);
  border-radius: var(--radius);
  padding: 18px; color: #ffeef5;
}

.post-hero{
  padding: 56px 0 20px;
}
.post-hero img{
  width:100%; height: 380px; object-fit:cover; border-radius: 18px; border:1px solid rgba(255,255,255,0.08)
}
.post{
  max-width: 820px; margin: 0 auto; padding: 0 0 40px;
}
.post h1{font-family: Poppins, Inter, sans-serif; font-size: clamp(28px, 4vw, 46px); margin: 0 0 10px}
.post .byline{color: var(--muted); font-size: 14px; margin-bottom: 18px}
.post p{font-size: 18px; color: var(--text)}
.post blockquote{
  border-left: 4px solid var(--primary-2);
  margin: 16px 0; padding: 8px 14px; color: #eaf6f4; background: rgba(77,225,211,0.08); border-radius: 8px
}
.post ul{padding-left: 20px}

.footer{
  padding: 24px 0 46px; margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
}
.footer .grid{grid-template-columns: 1.2fr 1fr 1fr}
.footer a{color: var(--text)}
.footer .legal a{
  color: var(--muted); font-size: 14px;
  border:1px solid rgba(255,255,255,0.08); padding:8px 12px; border-radius: 999px; display:inline-block; margin-right:8px
}
.footer .social{display:flex; gap:12px}
.icon{
  width:20px; height:20px; display:inline-block; vertical-align:middle; fill: currentColor
}
.footer small{color: var(--muted)}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
  padding: 8px 12px; border-radius: 999px; border:1px solid rgba(255,255,255,0.1)
}
.badge .dot{width:8px; height:8px; border-radius:50%; background: var(--success)}

.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #11131b; color: var(--text);
  border-top:1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -8px 22px rgba(0,0,0,0.35);
}
.cookie-banner .inner{
  width: min(1100px, 95%); margin: 0 auto; padding: 16px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
}
.cookie-actions{display:flex; gap: 10px; flex-wrap: wrap}
.cookie-actions .btn{padding:10px 14px}
.cookie-config{
  display:none; padding: 12px; margin-top: 8px; border:1px dashed rgba(255,255,255,0.2); border-radius: 10px;
}
.cookie-config label{display:flex; align-items:center; gap:10px; margin: 6px 0}

.contact-card{
  background: linear-gradient(180deg, rgba(122,127,255,0.16), rgba(255,255,255,0.03));
  border:1px solid rgba(122,127,255,0.25);
  border-radius: var(--radius);
  padding: 18px;
}
.contact-info .row{display:flex; gap: 12px; align-items:center; margin: 8px 0}
.contact-form input, .contact-form textarea{
  width:100%; background: rgba(255,255,255,0.06); color: var(--text);
  border:1px solid rgba(255,255,255,0.14); border-radius: 12px;
  padding: 12px 14px; outline:none
}
.contact-form textarea{min-height: 140px; resize: vertical}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 700px){ .contact-form .row{grid-template-columns:1fr} }

.modal{
  position: fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.6); z-index: 10000;
}
.modal .box{
  background: #12131c; border:1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 22px; width: min(520px, 92%);
  text-align:center
}

.badge-reg{
  font-size: 12px; color: var(--muted);
  border:1px dashed rgba(255,255,255,0.2); padding:6px 10px; border-radius: 999px; display:inline-block
}

/* About team grid */
.team-grid{display:grid; gap: 18px; grid-template-columns: repeat(3, 1fr)}
@media (max-width: 1000px){ .team-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .team-grid{grid-template-columns: 1fr} }
.team-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 14px; text-align:center
}
.team-card img{
  border-radius: 12px; width: 400px; height: 400px; max-width: 100%; object-fit: cover; border:1px solid rgba(255,255,255,0.12)
}
.team-card h3{margin: 10px 0 4px}
.team-card p{margin: 4px 0}

/* Utility */
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.muted{color: var(--muted)}
.center{text-align:center}