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

:root {
  --bg: #080818;
  --bg2: #0d0d2b;
  --purple: #7c3aed;
  --cyan: #06b6d4;
  --gold: #f59e0b;
  --pink: #ec4899;
  --text: #f1f5f9;
  --text2: #94a3b8;
  --card: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.08);
  --radius: 20px;
  --glow-purple: 0 0 40px rgba(124,58,237,0.3);
  --glow-cyan: 0 0 40px rgba(6,182,212,0.3);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Animated background orbs */
.orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: float 20s infinite ease-in-out;
}
.orb1 { width:500px;height:500px;background:var(--purple);top:-100px;left:-100px;animation-delay:0s; }
.orb2 { width:400px;height:400px;background:var(--cyan);bottom:-100px;right:-100px;animation-delay:-7s; }
.orb3 { width:300px;height:300px;background:var(--pink);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s; }

@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-30px) scale(1.05); }
  66% { transform: translate(-20px,20px) scale(0.95); }
}

/* Layout */
.container { max-width:1100px;margin:0 auto;padding:0 20px;position:relative;z-index:1; }

/* Nav */
nav {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8,8,24,0.8);
}
.nav-inner { display:flex;align-items:center;justify-content:space-between; }
.logo {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}
.nav-links { display:flex;gap:24px;list-style:none; }
.nav-links a { color:var(--text2);text-decoration:none;font-size:14px;font-weight:500;transition:color 0.2s; }
.nav-links a:hover { color:var(--text); }

/* Card */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  padding: 32px;
  transition: border-color 0.3s, transform 0.3s;
}
.card:hover { border-color:rgba(124,58,237,0.3); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.3s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  color: white;
  box-shadow: var(--glow-purple);
}
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 0 60px rgba(124,58,237,0.5); }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color:var(--purple);color:var(--purple); }
.btn-lg { padding:18px 40px;font-size:18px; }

/* Hero */
.hero {
  padding: 100px 0 80px;
  text-align: center;
}
.hero-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: 50px;
  font-size: 13px;
  color: var(--purple);
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}
.hero h1 {
  font-size: clamp(36px,6vw,72px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 50%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  font-size: clamp(16px,2vw,20px);
  color: var(--text2);
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.6;
}
.hero-stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-top: 48px;
  flex-wrap: wrap;
}
.stat { text-align:center; }
.stat-num { font-size:28px;font-weight:800;color:var(--text); }
.stat-label { font-size:13px;color:var(--text2);margin-top:4px; }

/* Steps */
.steps { padding:80px 0; }
.section-title { font-size:clamp(28px,4vw,40px);font-weight:800;text-align:center;margin-bottom:12px; }
.section-sub { text-align:center;color:var(--text2);font-size:16px;margin-bottom:48px; }
.steps-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px; }
.step-num {
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;margin-bottom:16px;
}
.step-title { font-size:18px;font-weight:700;margin-bottom:8px; }
.step-desc { color:var(--text2);font-size:15px;line-height:1.6; }

/* Types preview */
.types-preview { padding:0 0 80px; }
.types-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px; }
.type-card {
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;
  transition:all 0.3s;cursor:pointer;text-decoration:none;color:var(--text);
}
.type-card:hover { transform:translateY(-4px);box-shadow:var(--glow-purple); }
.type-emoji { font-size:36px;margin-bottom:12px; }
.type-code { font-size:13px;font-weight:700;color:var(--purple);letter-spacing:2px;margin-bottom:4px; }
.type-name { font-size:20px;font-weight:700;margin-bottom:8px; }
.type-desc { font-size:14px;color:var(--text2);line-height:1.5; }
.type-percent { font-size:12px;color:var(--text2);margin-top:12px; }

/* Ad placeholder */
.ad-block {
  min-height:90px;
  background:rgba(255,255,255,0.02);
  border:1px dashed rgba(255,255,255,0.08);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.2);
  font-size:13px;
  margin:40px 0;
}

/* Footer */
footer {
  border-top:1px solid var(--border);
  padding:40px 0;
  text-align:center;
  color:var(--text2);
  font-size:14px;
}
footer a { color:var(--text2);text-decoration:none; }
footer a:hover { color:var(--text); }

/* TEST PAGE */
.test-page { padding:40px 0 80px; }
.progress-wrap { margin-bottom:40px; }
.progress-info { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; }
.progress-label { font-size:14px;color:var(--text2); }
.progress-num { font-size:14px;font-weight:700;color:var(--purple); }
.progress-bar { height:6px;background:rgba(255,255,255,0.08);border-radius:50px;overflow:hidden; }
.progress-fill { height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:50px;transition:width 0.4s ease; }

.question-wrap { max-width:700px;margin:0 auto;text-align:center; }
.question-category { font-size:12px;font-weight:700;letter-spacing:2px;color:var(--purple);margin-bottom:16px; }
.question-text { font-size:clamp(20px,3vw,28px);font-weight:700;line-height:1.4;margin-bottom:40px; }

.answers { display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:700px;margin:0 auto; }
.answer-btn {
  background:var(--card);
  border:2px solid var(--border);
  border-radius:var(--radius);
  padding:24px 20px;
  font-size:16px;
  font-weight:500;
  color:var(--text);
  cursor:pointer;
  transition:all 0.2s;
  text-align:center;
  line-height:1.4;
}
.answer-btn:hover {
  border-color:var(--purple);
  background:rgba(124,58,237,0.1);
  transform:translateY(-2px);
  box-shadow:var(--glow-purple);
}
.answer-btn.selected {
  border-color:var(--cyan);
  background:rgba(6,182,212,0.1);
}

.test-nav { display:flex;justify-content:center;gap:16px;margin-top:40px; }

@media(max-width:600px) {
  .answers { grid-template-columns:1fr; }
  .hero { padding:60px 0 40px; }
  .nav-links { display:none; }
}

/* RESULT PAGE */
.result-page { padding:60px 0 80px; }
.result-card {
  max-width:700px;margin:0 auto;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
}
.result-top {
  padding:48px 40px 32px;
  text-align:center;
  border-bottom:1px solid var(--border);
}
.result-emoji { font-size:64px;margin-bottom:16px; }
.result-code { font-size:13px;font-weight:700;letter-spacing:3px;color:var(--text2);margin-bottom:8px; }
.result-name { font-size:clamp(28px,5vw,40px);font-weight:900;margin-bottom:16px; }
.result-desc { font-size:16px;color:var(--text2);line-height:1.7;max-width:500px;margin:0 auto; }

.result-body { padding:40px; }

.axes { display:grid;gap:20px;margin-bottom:40px; }
.axis-labels { display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;font-weight:600; }
.axis-bar { height:8px;background:rgba(255,255,255,0.08);border-radius:50px;overflow:hidden;position:relative; }
.axis-fill { height:100%;border-radius:50px;background:linear-gradient(90deg,var(--purple),var(--cyan));transition:width 0.8s ease; }

.famous { margin-bottom:40px; }
.famous-title { font-size:16px;font-weight:700;margin-bottom:16px; }
.famous-list { display:flex;flex-wrap:wrap;gap:8px; }
.famous-tag {
  padding:6px 14px;background:rgba(124,58,237,0.1);
  border:1px solid rgba(124,58,237,0.2);border-radius:50px;
  font-size:13px;color:var(--text2);
}

.result-actions { display:flex;gap:12px;flex-wrap:wrap; }

@keyframes fadeUp {
  from { opacity:0;transform:translateY(20px); }
  to { opacity:1;transform:translateY(0); }
}
.fade-up { animation:fadeUp 0.5s ease forwards; }