:root {
  --bg:       #0d0d1a;
  --surface:  #13132a;
  --surface2: #1a1a35;
  --pink:     #ff6eb4;
  --lavender: #b8a9ff;
  --cyan:     #6ef0ff;
  --white:    #f0eeff;
  --gray:     #7a7a9a;
  --border:   rgba(184,169,255,0.15);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--white);
  overflow-x: hidden;
}

/* scanlines */
body::before {
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:999;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
  );
}

/* grid background */
.grid-bg {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(110,240,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,240,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding: 16px 48px;
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(13,13,26,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  display:flex; align-items:center; gap:12px;
  font-family:'Fredoka One',cursive; font-size:1.6rem;
  color: var(--white);
}
.nav-logo img {
  width:44px; height:44px; object-fit:contain;
  filter: drop-shadow(0 0 12px rgba(255,110,180,0.6));
  animation: float 3s ease-in-out infinite;
  mix-blend-mode: screen;
}
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a {
  text-decoration:none; font-weight:700; font-size:0.9rem;
  color: var(--gray); letter-spacing:0.08em; text-transform:uppercase;
  transition:color 0.2s;
}
.nav-links a:hover { color: var(--cyan); }
.nav-cta {
  background: linear-gradient(135deg, var(--pink), var(--lavender)) !important;
  color: var(--bg) !important;
  padding: 9px 22px; border-radius:6px;
  font-weight:800 !important; text-transform:none !important;
  letter-spacing:0 !important; font-size:0.9rem !important;
  transition: opacity 0.2s, transform 0.2s !important;
}
.nav-cta:hover { opacity:0.85; transform:translateY(-1px); }

/* ── HERO ── */
.hero {
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:120px 48px 80px;
  text-align:center;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(110,240,255,0.08);
  border: 1px solid rgba(110,240,255,0.25);
  color: var(--cyan);
  border-radius:4px; padding:6px 16px;
  font-family:'Space Mono',monospace; font-size:0.75rem;
  letter-spacing:0.1em; margin-bottom:32px;
  animation: fadeUp 0.6s ease both;
}
.hero-logo {
  width:220px; margin-bottom:24px;
  filter: drop-shadow(0 0 40px rgba(255,110,180,0.45));
  animation: fadeUp 0.6s 0.05s ease both, float 4s ease-in-out infinite;
  mix-blend-mode: screen;
}
.hero h1 {
  font-family:'Fredoka One',cursive;
  font-size: clamp(3rem,8vw,6.5rem);
  line-height:1.05; margin-bottom:10px;
  animation: fadeUp 0.6s 0.1s ease both;
  color: var(--white);
}
.hero h1 .pink { color: var(--pink); }
.hero-sub {
  font-family:'Space Mono',monospace;
  font-size:0.95rem; color: var(--gray);
  margin-bottom:48px; letter-spacing:0.05em;
  animation: fadeUp 0.6s 0.2s ease both;
}
.hero-buttons {
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  animation: fadeUp 0.6s 0.3s ease both;
}

/* ── BUTTONS ── */
.btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  color: var(--bg); border:none; padding:14px 32px;
  border-radius:6px; font-family:'Nunito',sans-serif;
  font-weight:800; font-size:1rem; cursor:pointer;
  transition:opacity 0.2s, transform 0.2s;
  box-shadow: 0 0 24px rgba(255,110,180,0.3);
}
.btn-primary:hover { opacity:0.85; transform:translateY(-2px); }
.btn-ghost {
  background:transparent; color:var(--lavender);
  border:1px solid rgba(184,169,255,0.4);
  padding:14px 32px; border-radius:6px;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:1rem;
  cursor:pointer; transition:background 0.2s, transform 0.2s;
}
.btn-ghost:hover { background:rgba(184,169,255,0.08); transform:translateY(-2px); }

/* ── SHARED ── */
section { position:relative; z-index:1; }
.section-inner { max-width:1100px; margin:0 auto; }
.section-label {
  font-family:'Space Mono',monospace; font-size:0.75rem;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--cyan);
  margin-bottom:12px;
}
.section-title {
  font-family:'Fredoka One',cursive;
  font-size:clamp(2rem,4vw,3rem); margin-bottom:48px; color:var(--white);
}
.section-title .pink { color:var(--pink); }

/* ── ABOUT ── */
.about { padding:100px 48px; background:var(--surface); }
.about-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.about-text p {
  color: rgba(240,238,255,0.7); line-height:1.75; font-size:1rem; margin-bottom:20px;
  font-family:'Space Mono',monospace; letter-spacing:0.02em;
}
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stat-box {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px; padding:24px 20px; text-align:center;
  transition:border-color 0.3s;
}
.stat-box:hover { border-color:rgba(255,110,180,0.4); }
.stat-num {
  font-family:'Fredoka One',cursive; font-size:2.8rem;
  color:var(--pink); line-height:1; margin-bottom:6px;
}
.stat-label { font-size:0.85rem; color:var(--gray); font-weight:700; letter-spacing:0.05em; }

/* ── TEAM ── */
.team { padding:100px 48px; }
.team-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px;
}
.member-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px; padding:32px 20px; text-align:center;
  transition:transform 0.3s, border-color 0.3s;
}
.member-card:hover { transform:translateY(-5px); border-color:rgba(255,110,180,0.4); }
.member-avatar {
  width:72px; height:72px; border-radius:50%;
  margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
  border:2px solid rgba(255,110,180,0.3);
  background: var(--surface2);
}
.member-name {
  font-family:'Fredoka One',cursive; font-size:1.2rem;
  color:var(--white); margin-bottom:6px;
}
.member-role {
  font-family:'Space Mono',monospace; font-size:0.7rem;
  color:var(--pink); letter-spacing:0.1em; text-transform:uppercase;
  margin-bottom:10px;
}
.member-desc { font-size:0.82rem; color:var(--gray); line-height:1.5; }

/* ── CTA ── */
.cta-section {
  padding:100px 48px; text-align:center;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-section h2 {
  font-family:'Fredoka One',cursive;
  font-size:clamp(2rem,5vw,3.5rem); margin-bottom:16px;
}
.cta-section h2 .pink { color:var(--pink); }
.cta-desc {
  font-family:'Space Mono',monospace;
  font-size:0.85rem; color:var(--gray);
  margin-bottom:40px;
  line-height:1.8;
  min-height:2.4em;
}
.cta-section .btn-primary { font-size:1.05rem; padding:16px 40px; }

/* ── FOOTER ── */
footer {
  position:relative; z-index:1;
  border-top:1px solid var(--border);
  padding:32px 48px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  background:var(--bg);
}
.footer-logo {
  font-family:'Fredoka One',cursive; font-size:1.3rem;
  color:var(--white); display:flex; align-items:center; gap:10px;
}
.footer-logo img { width:32px; object-fit:contain; mix-blend-mode:screen; }
.footer-flag {
  font-family:'Space Mono',monospace; font-size:0.8rem; color:var(--gray);
}
.footer-flag span { color:var(--pink); }

/* ── ANIMATIONS ── */
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-5px); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  nav { padding:14px 20px; }
  .nav-links { display:none; }
  .hero, .about, .team, .cta-section { padding:60px 20px; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
  footer { flex-direction:column; align-items:flex-start; padding:28px 20px; }
}