@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:        #16101f;
  --ink-2:      #201731;
  --amethyst:   #9b6bd1;
  --quartz:     #e8a5c4;
  --citrine:    #e8b923;
  --paper:      #f3ecf9;
  --muted:      #9c8fb0;
  --line:       rgba(243,236,249,0.12);
  --display: 'Fredoka', sans-serif;
  --body:    'Nunito', sans-serif;
  --mono:    'Space Mono', monospace;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background:
    radial-gradient(ellipse 80% 50% at 15% -10%, rgba(155,107,209,0.25), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 10%, rgba(232,165,196,0.15), transparent 60%),
    var(--ink);
  color: var(--paper);
  font-family: var(--body);
  min-height: 100vh;
}

a{ color: inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--display); margin:0; }

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px clamp(20px, 5vw, 60px);
  border-bottom: 1px solid var(--line);
}
.nav .brand{
  font-family: var(--display); font-weight:700; font-size: 1.3rem;
  display:flex; align-items:center; gap:10px;
}
.nav .brand .gem{
  width: 20px; height:20px;
  background: linear-gradient(135deg, var(--quartz), var(--amethyst));
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.nav ul{ display:flex; gap: clamp(14px, 3vw, 32px); list-style:none; margin:0; padding:0; }
.nav a{
  font-weight:600; font-size:0.95rem; color: var(--muted);
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover, .nav a.active{ color: var(--paper); border-color: var(--citrine); }

.hero{
  padding: clamp(50px, 10vw, 100px) clamp(20px, 5vw, 60px) 40px;
  text-align:center;
}
.hero .eyebrow{
  font-family: var(--mono); font-size:0.8rem; letter-spacing: 0.15em;
  color: var(--citrine); text-transform:uppercase;
}
.hero h1{
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
  margin: 14px auto 18px;
  max-width: 14ch;
  background: linear-gradient(135deg, var(--paper) 40%, var(--quartz));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p{
  color: var(--muted); font-size: 1.1rem; max-width: 46ch; margin: 0 auto 30px;
}

.facet{
  clip-path: polygon(50% 0%, 93% 22%, 100% 55%, 78% 100%, 22% 100%, 0% 55%, 7% 22%);
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--display); font-weight:600; font-size:1rem;
  padding: 12px 26px;
  background: linear-gradient(135deg, var(--amethyst), var(--quartz));
  color: var(--ink);
  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
  border:none; cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.08); }
.btn.ghost{
  background: transparent; color: var(--paper);
  border: 1px solid var(--line); clip-path:none;
}

.section{ padding: 40px clamp(20px,5vw,60px) 80px; max-width: 1200px; margin: 0 auto; }
.section-head{ margin-bottom: 30px; }
.section-head .eyebrow{
  font-family: var(--mono); font-size:0.75rem; color: var(--citrine); letter-spacing:.12em; text-transform:uppercase;
}
.section-head h2{ font-size: clamp(1.6rem, 4vw, 2.2rem); margin-top:6px; }

.grid{
  display:grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.gem-card{
  position:relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  clip-path: polygon(12% 0%, 100% 0%, 100% 88%, 88% 100%, 0% 100%, 0% 12%);
  padding: 22px 20px 20px;
  transition: transform .18s ease, border-color .18s ease;
}
.gem-card:hover{ transform: translateY(-4px); border-color: var(--amethyst); }
.gem-card .swatch{
  width: 34px; height:34px; margin-bottom:14px;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.gem-card h3{ font-size:1.15rem; margin-bottom:4px; }
.gem-card .sub{ color: var(--muted); font-size:0.85rem; margin-bottom:14px; }
.gem-card .stat{
  display:flex; justify-content:space-between; font-family: var(--mono);
  font-size: 0.78rem; color: var(--muted); padding: 6px 0; border-top: 1px dashed var(--line);
}
.gem-card .stat span:last-child{ color: var(--paper); }
.gem-card .meaning{
  margin-top: 12px; font-size: 0.9rem; color: var(--paper); line-height:1.4;
}

footer{
  padding: 30px clamp(20px,5vw,60px); text-align:center;
  color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line);
}

.quiz-card{
  background: var(--ink-2); border: 1px solid var(--line);
  clip-path: polygon(4% 0%, 100% 0%, 100% 96%, 96% 100%, 0% 100%, 0% 4%);
  padding: 30px clamp(20px,4vw,40px); max-width: 640px; margin: 0 auto;
}
.quiz-step{ display:none; }
.quiz-step.active{ display:block; }
.quiz-step h3{ font-size:1.3rem; margin-bottom: 18px; }
.option-btn{
  display:block; width:100%; text-align:left;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--paper);
  font-family: var(--body); font-weight:600; font-size:0.95rem;
  padding: 14px 16px; margin-bottom: 10px; cursor:pointer;
  border-radius: 8px; transition: border-color .15s, background .15s;
}
.option-btn:hover{ border-color: var(--citrine); background: rgba(232,185,35,0.08); }
.quiz-progress{ font-family: var(--mono); font-size:0.75rem; color: var(--muted); margin-bottom: 14px; }
.result-card{
  border-top: 1px dashed var(--line); margin-top:20px; padding-top:20px;
}
.result-card h3{ color: var(--citrine); }

@media (max-width: 560px){
  .nav ul{ gap: 14px; font-size: 0.85rem; }
}