/* ═══════════════════════════════════════════════
   K·LONGEVITY & AGING TECH
   Dark Tech + Pink Glow · Premium Design System
═══════════════════════════════════════════════ */

:root {
  /* Core palette */
  --pink:       #ff6b9d;
  --pink2:      #f953c6;
  --pink-glow:  rgba(255,107,157,.35);
  --pink-light: rgba(255,107,157,.1);
  --g1:         #43e97b;
  --g2:         #38f9d7;
  --g-glow:     rgba(67,233,123,.3);
  --gold:       #f9c846;
  --purple:     #a855f7;

  /* Dark bg system */
  --dark:       #0a0a12;
  --dark2:      #12121e;
  --dark3:      #1a1a2e;
  --card-bg:    rgba(255,255,255,.04);
  --card-border:rgba(255,107,157,.18);
  --glass:      rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.1);

  /* Text */
  --text:       #f0f0f8;
  --text2:      rgba(240,240,248,.55);
  --text3:      rgba(240,240,248,.35);

  /* Shadows */
  --shadow-pink: 0 8px 40px rgba(255,107,157,.25);
  --shadow-green:0 8px 40px rgba(67,233,123,.2);
  --shadow-card: 0 4px 30px rgba(0,0,0,.4);

  /* Radius */
  --radius:     20px;
  --radius-sm:  12px;
  --radius-xs:  8px;

  /* Fonts */
  --font-body:    'Space Grotesk', 'Inter', sans-serif;
  --font-display: 'Cormorant Garamond', serif;

  --transition: all .35s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--dark);
  min-height: 100vh;
  color: var(--text);
  overflow-x: hidden;
}

/* ══════════ HEADER ══════════ */
.site-header {
  background: rgba(10,10,18,.92);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,107,157,.15);
  position: sticky; top: 0; z-index: 100;
  padding: 0 2rem;
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.header-logo {
  display: flex; align-items: center; gap: 6px;
}
.logo-k {
  font-family: var(--font-body);
  font-size: 1.4rem; font-weight: 800;
  background: linear-gradient(135deg, var(--pink), var(--g1));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.logo-text {
  font-size: .85rem; font-weight: 700;
  color: rgba(255,255,255,.85); letter-spacing: .08em;
}
.logo-tag {
  font-size: .6rem; font-weight: 700; letter-spacing: .12em;
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  color: #fff; padding: .2rem .55rem; border-radius: 50px;
  text-transform: uppercase;
}
.header-nav { display: flex; gap: 1.8rem; }
.header-nav a {
  text-decoration: none; color: var(--text2);
  font-size: .85rem; font-weight: 500;
  transition: var(--transition); letter-spacing: .02em;
}
.header-nav a:hover { color: var(--pink); }

/* ══════════ APP CONTAINER ══════════ */
.app-container {
  max-width: 800px; margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
  min-height: calc(100vh - 68px);
}

/* ══════════ STEP SYSTEM ══════════ */
.step { display: none; }
.step.active { display: block; animation: fadeSlideUp .5s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════ LANDING ══════════ */
.landing-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,107,157,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,107,157,.04) 1px, transparent 1px);
  background-size: 50px 50px;
}
.landing-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  animation: orbFloat 10s ease-in-out infinite alternate;
}
.orb1 { width:700px;height:700px; background:radial-gradient(circle,rgba(255,107,157,.25),transparent); top:-300px;left:-200px; }
.orb2 { width:500px;height:500px; background:radial-gradient(circle,rgba(67,233,123,.2),transparent); bottom:-150px;right:-100px; animation-delay:-4s; }
.orb3 { width:400px;height:400px; background:radial-gradient(circle,rgba(168,85,247,.2),transparent); top:40%;left:55%; animation-delay:-7s; }
@keyframes orbFloat {
  0%  { transform:translate(0,0) scale(1); }
  100%{ transform:translate(30px,-30px) scale(1.08); }
}

.landing-content {
  text-align: center; padding: 4rem 1rem 2rem;
  max-width: 680px; margin: 0 auto;
}
.tech-bar {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  color: var(--text2); text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.tech-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--g1));
  box-shadow: 0 0 8px var(--pink-glow);
  animation: dotPulse 1.5s ease-in-out infinite alternate;
}
@keyframes dotPulse {
  from { opacity:.5; transform:scale(1); }
  to   { opacity:1; transform:scale(1.3); }
}
.badge-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, rgba(255,107,157,.12), rgba(67,233,123,.08));
  border: 1px solid rgba(255,107,157,.35);
  color: var(--pink); font-size: .78rem; font-weight: 700;
  padding: .45rem 1.2rem; border-radius: 50px;
  margin-bottom: 1.8rem; letter-spacing: .05em;
  animation: badgePop .6s cubic-bezier(.34,1.56,.64,1) .2s both;
  box-shadow: 0 0 20px rgba(255,107,157,.15);
}
@keyframes badgePop {
  from { opacity:0; transform:scale(.7) translateY(10px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.landing-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 600; line-height: 1.08;
  color: var(--text); margin-bottom: .8rem;
  animation: titleReveal .9s ease .3s both;
}
.landing-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink2) 40%, var(--g1) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(255,107,157,.4));
}
.title-sub {
  display: block; font-family: var(--font-body);
  font-size: clamp(.9rem, 2.5vw, 1.1rem);
  font-weight: 500; color: var(--text2);
  letter-spacing: .06em; font-style: normal;
  margin-top: .5rem;
  -webkit-text-fill-color: initial;
  background: none;
  filter: none;
}
@keyframes titleReveal {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.landing-desc {
  font-size: 1rem; color: var(--text2);
  line-height: 1.85; margin-bottom: 2.5rem;
  animation: titleReveal .9s ease .4s both;
}
.landing-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin-bottom: 2.5rem; flex-wrap: wrap;
  animation: titleReveal .9s ease .5s both;
}
.stat { text-align: center; }
.stat-num {
  display: block; font-size: 1.6rem; font-weight: 800;
  background: linear-gradient(135deg, var(--pink), var(--g1));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-label { font-size: .68rem; color: var(--text3); font-weight: 600; letter-spacing: .04em; margin-top: 2px; }
.stat-divider { width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, rgba(255,107,157,.3), transparent); }
.cta-row {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1.5rem;
  animation: titleReveal .9s ease .6s both;
}

/* ══════════ BUTTONS ══════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: .6rem;
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink2) 50%, #c026d3 100%);
  color: #fff; font-weight: 700; font-size: 1rem;
  padding: 1rem 2.4rem; border-radius: 50px;
  border: none; cursor: pointer;
  box-shadow: 0 6px 35px rgba(255,107,157,.5), 0 0 0 1px rgba(255,107,157,.2);
  transition: var(--transition); letter-spacing: .02em;
  text-decoration: none;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 12px 50px rgba(255,107,157,.65), 0 0 0 1px rgba(255,107,157,.3);
}
.btn-primary:disabled {
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.3);
  box-shadow: none; cursor: not-allowed;
}
.btn-large { font-size: 1.1rem; padding: 1.1rem 2.8rem; }
.pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }
@keyframes pulseGlow {
  0%,100%{ box-shadow: 0 6px 35px rgba(255,107,157,.5); }
  50%    { box-shadow: 0 6px 55px rgba(255,107,157,.8), 0 0 0 10px rgba(255,107,157,.1); }
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--glass); color: var(--text);
  border: 1px solid var(--glass-border); font-weight: 600; font-size: .95rem;
  padding: .95rem 2rem; border-radius: 50px;
  cursor: pointer; transition: var(--transition);
  text-decoration: none; letter-spacing: .02em;
}
.btn-ghost:hover {
  border-color: var(--g1); color: var(--g1);
  background: rgba(67,233,123,.08);
  box-shadow: 0 4px 20px rgba(67,233,123,.2);
}
.btn-back {
  background: var(--glass); border: 1px solid var(--glass-border);
  width: 38px; height: 38px; border-radius: 50%;
  cursor: pointer; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition); margin-bottom: 1.5rem;
}
.btn-back:hover { background: var(--pink); color: #fff; border-color: var(--pink); box-shadow: 0 4px 16px var(--pink-glow); }
.powered-by { font-size: .78rem; color: var(--text3); animation: titleReveal .9s ease .7s both; }
.powered-by a { color: var(--pink); text-decoration: none; }
.powered-by a:hover { text-decoration: underline; }

/* ══════════ QUIZ CARD ══════════ */
.quiz-card {
  background: var(--dark2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--shadow-card), 0 0 60px rgba(255,107,157,.06);
}
.quiz-progress { margin-bottom: 1.5rem; }
.progress-bar {
  height: 3px; background: rgba(255,255,255,.08);
  border-radius: 50px; overflow: hidden; margin-bottom: .6rem;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--pink2), var(--g1));
  border-radius: 50px; transition: width .6s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px var(--pink-glow);
}
.progress-label { font-size: .72rem; color: var(--text3); font-weight: 600; letter-spacing: .04em; }
.step-tag {
  display: inline-block;
  font-size: .65rem; font-weight: 800; letter-spacing: .15em;
  color: var(--pink); text-transform: uppercase;
  margin-bottom: .8rem;
  padding: .25rem .75rem;
  border: 1px solid rgba(255,107,157,.25);
  border-radius: 50px;
  background: rgba(255,107,157,.08);
}
.quiz-title {
  font-family: var(--font-display);
  font-size: 1.85rem; font-weight: 600;
  color: var(--text); line-height: 1.3; margin-bottom: .6rem;
}
.quiz-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--pink), var(--g1));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.quiz-sub { font-size: .88rem; color: var(--text2); margin-bottom: 2rem; line-height: 1.6; }

/* ══════════ CONCERN GRID ══════════ */
.concern-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem; margin-bottom: 2rem;
}
.concern-btn {
  display: flex; align-items: center; gap: .7rem;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm); padding: .85rem 1.1rem;
  cursor: pointer; font-size: .88rem; font-weight: 500;
  color: var(--text2); text-align: left;
  transition: var(--transition); font-family: var(--font-body);
}
.concern-btn:hover {
  border-color: var(--pink); color: var(--text);
  background: rgba(255,107,157,.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255,107,157,.15);
}
.concern-btn.selected {
  border-color: var(--pink); color: var(--text);
  background: linear-gradient(135deg, rgba(255,107,157,.15), rgba(249,83,198,.08));
  box-shadow: 0 4px 24px rgba(255,107,157,.25), inset 0 0 0 1px rgba(255,107,157,.2);
}
.concern-icon { font-size: 1.2rem; flex-shrink: 0; }

/* ══════════ IMAGE SELECT GRID ══════════ */
.image-select-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: .8rem; margin-bottom: 2rem;
}
.img-option {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  cursor: pointer; transition: var(--transition);
}
.img-option span {
  font-size: .72rem; font-weight: 600; color: var(--text2); text-align: center;
}
.img-swatch {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,.1);
  overflow: hidden; transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.img-option.selected .img-swatch {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,107,157,.25), 0 8px 30px rgba(255,107,157,.3);
}
.img-option.selected span { color: var(--pink); }
.img-option:hover .img-swatch { transform: translateY(-3px); border-color: rgba(255,107,157,.5); }

/* Skin type swatches */
.oily-swatch  { background: linear-gradient(135deg, #ffd6a0,#ffb347); }
.combo-swatch { background: linear-gradient(135deg, #ffd6a0 50%,#f5e6d3 50%); }
.normal-swatch{ background: linear-gradient(135deg, #fce4d6,#f9c9b0); }
.dry-swatch   { background: linear-gradient(135deg, #ffe5cc,#f0d9c5); }
.skin-visual  { position:absolute; inset:0; }
.shine-overlay{ position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.6) 0%,transparent 60%); }
.pore-dot { width:6px;height:6px;background:rgba(0,0,0,.25);border-radius:50%;position:absolute; }
.pore-dot:nth-child(1){top:35%;left:40%;}
.pore-dot:nth-child(2){top:55%;left:30%;}
.pore-dot:nth-child(3){top:45%;left:60%;}
.t-zone { position:absolute;top:0;left:35%;width:30%;height:60%;background:rgba(255,200,100,.4);border-radius:0 0 50% 50%; }
.normal-visual{ background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.4),transparent); }
.flake { position:absolute;width:8px;height:4px;background:rgba(255,255,255,.7);border-radius:50%;top:40%;left:35%; }
.f2{ top:60%;left:55%;width:6px; }
.sensitivity-vis{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
.face-circle{ width:60%;height:60%;border-radius:50%; }
.calm{ background:radial-gradient(circle,#fce4d6,#f9c9b0); }
.slight{ background:radial-gradient(circle,#ffcba4,#ffb07c); }
.moderate{ background:radial-gradient(circle,#ffaaaa,#ff8888); }
.very-sensitive{ background:radial-gradient(circle,#ff7777,#ff4444); }
.s1{background:linear-gradient(135deg,#fff5f0,#fce4d6);}
.s2{background:linear-gradient(135deg,#fff0ea,#ffd6c2);}
.s3{background:linear-gradient(135deg,#ffe0d8,#ffbdad);}
.s4{background:linear-gradient(135deg,#ffc0bd,#ff9999);}
.lines-swatch{ background:linear-gradient(135deg,#fce4d6,#f9c9b0); }
.wrinkle-vis{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; }
.line{ width:70%;height:2px;border-radius:50px;background:rgba(160,100,60,.3); }
.l2{ width:55%; } .l3{ width:40%; }
.w2 .line{ background:rgba(150,90,50,.45); }
.w3 .line{ background:rgba(130,70,40,.6);height:3px; }
.tone-swatch{ position:relative; }
.t-even{background:linear-gradient(135deg,#fce4d6,#f9c9b0);}
.t-mild{background:linear-gradient(135deg,#fcd0b0,#f9b888);}
.t-moderate{background:linear-gradient(135deg,#f0c0a0,#e8a878);}
.t-severe{background:linear-gradient(135deg,#e8b090,#d89060);}
.spot{ position:absolute;background:rgba(120,60,20,.35);border-radius:50%; }
.sp1{width:22%;height:22%;top:25%;left:30%;}
.sp2{width:16%;height:16%;top:55%;left:55%;}
.sp3{width:12%;height:12%;top:40%;left:65%;}
.eye-swatch{ background:linear-gradient(135deg,#fce4d6,#f9c9b0); }
.eye-vis{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.eye-shape{ width:55%;height:30%;background:#3b3b5c;border-radius:50%;position:relative; }
.puff-line{ position:absolute;width:60%;height:3px;background:rgba(180,130,110,.5);border-radius:50px;top:60%; }
.crow1,.crow2{ position:absolute;width:18%;height:2px;background:rgba(120,70,50,.4);border-radius:50px; }
.crow1{transform:rotate(30deg);top:38%;right:18%;}
.crow2{transform:rotate(15deg);top:48%;right:16%;}
.dark-shadow{ background:#2a1a2e; }
.pore-swatch{ position:relative; }
.ps0{background:linear-gradient(135deg,#fce4d6,#f9c9b0);}
.ps1{background:linear-gradient(135deg,#fcd0b0,#f9b888);}
.ps2{background:linear-gradient(135deg,#f8c0a0,#f0a878);}
.ps3{background:linear-gradient(135deg,#f0b090,#e89060);}
.p-dot{ width:7px;height:7px;border-radius:50%;background:rgba(100,50,20,.3);position:absolute; }
.p-dot.b{ width:10px;height:10px;background:rgba(90,40,15,.4); }
.p-dot.lg{ width:14px;height:14px;background:rgba(80,30,10,.5); }
.ps1 .p-dot:nth-child(1){top:35%;left:30%;}
.ps1 .p-dot:nth-child(2){top:55%;left:55%;}
.ps2 .p-dot:nth-child(1){top:25%;left:25%;}
.ps2 .p-dot:nth-child(2){top:50%;left:50%;}
.ps2 .p-dot:nth-child(3){top:65%;left:30%;}
.ps3 .p-dot:nth-child(1){top:20%;left:20%;}
.ps3 .p-dot:nth-child(2){top:40%;left:50%;}
.ps3 .p-dot:nth-child(3){top:60%;left:25%;}
.ps3 .p-dot:nth-child(4){top:35%;left:65%;}

/* ══════════ LIFESTYLE ══════════ */
.lifestyle-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: .6rem; margin-bottom: 1.5rem;
}
.lifestyle-check input { display: none; }
.lc-card {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  background: var(--card-bg); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm); padding: .9rem .4rem;
  cursor: pointer; transition: var(--transition);
  text-align: center; font-size: .78rem; font-weight: 600; color: var(--text2);
}
.lc-icon { font-size: 1.4rem; }
.lifestyle-check input:checked + .lc-card {
  border-color: var(--pink);
  background: rgba(255,107,157,.1);
  color: var(--pink);
  box-shadow: 0 4px 20px rgba(255,107,157,.2);
}
.lc-card:hover { border-color: rgba(255,107,157,.4); transform: translateY(-2px); }
.age-selector { margin-bottom: 2rem; }
.age-label { font-size: .82rem; font-weight: 700; color: var(--text2); margin-bottom: .75rem; letter-spacing: .04em; }
.age-btns { display: flex; gap: .5rem; }
.age-btn {
  flex: 1; padding: .65rem; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.1); background: var(--card-bg);
  font-size: .9rem; font-weight: 700; color: var(--text2);
  cursor: pointer; transition: var(--transition); font-family: var(--font-body);
}
.age-btn.selected {
  border-color: var(--pink); background: rgba(255,107,157,.12); color: var(--pink);
  box-shadow: 0 4px 20px rgba(255,107,157,.2);
}
.age-btn:hover { border-color: rgba(255,107,157,.4); color: var(--text); }

/* ══════════ LOADING ══════════ */
.loading-screen {
  min-height: 72vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
}
.ai-scanner {
  position: relative; width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2.5rem;
}
.scanner-ring {
  position: absolute; border-radius: 50%;
  border: 2px solid transparent;
  animation: scanSpin 2s linear infinite;
}
.r1{ width:140px;height:140px;border-top-color:var(--pink);animation-duration:2s; }
.r2{ width:100px;height:100px;border-top-color:var(--g1);animation-duration:1.4s;animation-direction:reverse; }
.r3{ width:60px;height:60px;border-top-color:var(--purple);animation-duration:1s; }
@keyframes scanSpin { to{ transform:rotate(360deg); } }
.scanner-core {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--pink), var(--g1));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 35px rgba(255,107,157,.6);
  animation: coreBreath 1.5s ease-in-out infinite alternate;
}
@keyframes coreBreath {
  from{ transform:scale(.88);box-shadow:0 0 20px rgba(255,107,157,.4); }
  to  { transform:scale(1.1); box-shadow:0 0 50px rgba(255,107,157,.8); }
}
.scanner-icon { font-size: 1.5rem; }
.loading-title {
  font-family: var(--font-display); font-size: 2rem; font-weight: 600;
  color: var(--text); margin-bottom: 1.5rem;
}
.loading-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--pink), var(--g1));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.loading-steps { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 2rem; min-width: 300px; }
.load-step {
  display: flex; align-items: center; gap: .75rem;
  font-size: .85rem; color: var(--text2); padding: .6rem 1rem;
  border-radius: var(--radius-xs); transition: var(--transition);
}
.load-step.active { color: var(--pink); background: rgba(255,107,157,.1); font-weight: 700; }
.load-step.done   { color: var(--g1); }
.loading-bar-wrap {
  width: 260px; height: 4px; background: rgba(255,255,255,.08);
  border-radius: 50px; overflow: hidden;
}
.loading-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--pink), var(--pink2), var(--g1));
  border-radius: 50px; transition: width .3s ease;
  box-shadow: 0 0 8px var(--pink-glow);
}

/* ══════════ RESULTS ══════════ */
.results-container { max-width: 100%; }

/* Hero */
.result-hero {
  background: linear-gradient(135deg, #1a0a1e 0%, #0a1220 60%, #0a180e 100%);
  border: 1px solid rgba(255,107,157,.2);
  border-radius: var(--radius); padding: 2.5rem;
  text-align: center; margin-bottom: 1.2rem;
  position: relative; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.result-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,107,157,.15) 0%, transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(67,233,123,.12) 0%, transparent 50%),
    radial-gradient(circle at 60% 80%, rgba(168,85,247,.1) 0%, transparent 40%);
}
.result-hero > * { position: relative; z-index: 1; }
.skin-type-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,107,157,.15); border: 1px solid rgba(255,107,157,.35);
  color: var(--pink); padding: .35rem 1rem; border-radius: 50px;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  margin-bottom: 1rem;
}
.result-hero h2 {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 600;
  color: var(--text); margin-bottom: .6rem;
}
.result-hero h2 em { font-style: italic; color: var(--pink); }
.result-hero p { font-size: .92rem; color: var(--text2); line-height: 1.75; }
.score-row {
  display: flex; gap: .8rem; margin-top: 1.8rem;
  justify-content: center; flex-wrap: wrap;
}
.score-item {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm); padding: .9rem 1.2rem; text-align: center; min-width: 85px;
}
.score-val {
  font-size: 1.8rem; font-weight: 800;
  background: linear-gradient(135deg, var(--pink), var(--g1));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.score-lbl { font-size: .66rem; color: var(--text3); font-weight: 700; letter-spacing: .05em; margin-top: 3px; text-transform: uppercase; }

/* Bio-Age Card */
.bio-age-card {
  background: linear-gradient(135deg, #1a0a1e, #0a1a0e);
  border: 1px solid rgba(255,107,157,.25);
  border-radius: var(--radius); padding: 2rem;
  margin-bottom: 1.2rem; text-align: center;
  box-shadow: 0 8px 40px rgba(255,107,157,.12);
}
.bio-age-title {
  font-family: var(--font-display); font-size: 1.3rem; color: var(--text); margin-bottom: .5rem;
}
.bio-age-num {
  font-size: 3.5rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--pink), var(--pink2), var(--g1));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(255,107,157,.4));
  margin-bottom: .3rem;
}
.bio-age-unit { font-size: .85rem; color: var(--text3); margin-bottom: .8rem; }
.bio-age-desc { font-size: .83rem; color: var(--text2); line-height: 1.7; max-width: 480px; margin: 0 auto 1rem; }
.longevity-tips { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: .8rem; }
.tip-tag {
  background: rgba(255,107,157,.1); color: var(--pink);
  font-size: .72rem; font-weight: 700;
  padding: .28rem .75rem; border-radius: 50px;
  border: 1px solid rgba(255,107,157,.22);
}

/* Section headers */
.section-header {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.8rem 0 1rem;
}
.section-header h3 {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; color: var(--text);
}
.section-tag {
  background: linear-gradient(135deg, var(--pink), var(--g1));
  color: #fff; font-size: .65rem; font-weight: 800;
  padding: .22rem .7rem; border-radius: 50px; letter-spacing: .06em;
}

/* Ingredient cards */
.ingredient-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; margin-bottom: 1.2rem; }
.ingredient-card {
  background: var(--dark2); border-radius: var(--radius-sm);
  padding: 1.3rem 1rem; text-align: center;
  border: 1px solid rgba(255,107,157,.15);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  transition: var(--transition); position: relative; overflow: hidden;
}
.ingredient-card::before {
  content:''; position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pink),var(--pink2),var(--g1));
  opacity:0; transition:var(--transition);
}
.ingredient-card:hover::before { opacity:1; }
.ingredient-card:hover { transform:translateY(-4px); border-color:rgba(255,107,157,.35); box-shadow:0 12px 40px rgba(255,107,157,.15); }
.ingr-icon { font-size:2rem;margin-bottom:.55rem;display:block;filter:drop-shadow(0 2px 8px rgba(255,107,157,.3)); }
.ingr-ferment-badge {
  display:inline-block; background:rgba(67,233,123,.1); border:1px solid rgba(67,233,123,.25);
  color:var(--g1); font-size:.6rem;font-weight:800;padding:.15rem .55rem;border-radius:50px;
  letter-spacing:.05em;margin-bottom:.45rem;
}
.ingr-name { font-weight:700;font-size:.85rem;color:var(--text);margin-bottom:.3rem;line-height:1.3; }
.ingr-source {
  font-size:.68rem;font-weight:700;margin-bottom:.45rem;
  background:linear-gradient(135deg,var(--pink),var(--g1));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  display:block;line-height:1.5;
}
.ingr-desc { font-size:.74rem;color:var(--text2);line-height:1.6;text-align:left; }

/* Advertisement Inquiry */
.ad-inquiry-section {
  background: linear-gradient(135deg, rgba(255,107,157,.08), rgba(67,233,123,.05));
  border: 1px solid rgba(255,107,157,.2);
  border-radius: var(--radius); padding: 2rem; margin-bottom: 1.2rem;
  box-shadow: 0 4px 30px rgba(255,107,157,.08);
}
.ad-inquiry-inner { display:flex;gap:1.5rem;align-items:flex-start; }
.ad-inquiry-icon {
  font-size:2.5rem;flex-shrink:0;width:60px;height:60px;
  background:rgba(255,107,157,.12);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,107,157,.25);
}
.ad-inquiry-text { flex:1; }
.ad-inquiry-label {
  font-size:.65rem;font-weight:800;letter-spacing:.14em;
  color:var(--pink);text-transform:uppercase;margin-bottom:.3rem;
  display:flex;align-items:center;gap:.4rem;
}
.ad-inquiry-label::before {
  content:'';display:inline-block;width:16px;height:2px;
  background:linear-gradient(90deg,var(--pink),var(--g1));border-radius:2px;
}
.ad-inquiry-title {
  font-family:var(--font-display);font-size:1.45rem;font-weight:600;
  color:var(--text);margin-bottom:.45rem;
}
.ad-inquiry-desc { font-size:.83rem;color:var(--text2);line-height:1.7;margin-bottom:.9rem; }
.ad-inquiry-email {
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,var(--pink),var(--g1));
  color:#fff;font-weight:700;font-size:.85rem;
  padding:.55rem 1.3rem;border-radius:50px;text-decoration:none;
  box-shadow:0 4px 20px rgba(255,107,157,.35);transition:var(--transition);
}
.ad-inquiry-email:hover { transform:translateY(-2px);box-shadow:0 8px 30px rgba(255,107,157,.5); }
@media(max-width:500px){
  .ad-inquiry-inner{flex-direction:column;align-items:center;text-align:center;}
  .ad-inquiry-label{justify-content:center;}
}

/* Ritual Timeline */
.ritual-timeline { display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.5rem; }
.ritual-step {
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--dark2);border-radius:var(--radius-sm);
  padding:1.1rem;border:1px solid rgba(255,255,255,.07);
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  transition:var(--transition);
}
.ritual-step:hover { border-color:rgba(255,107,157,.25);transform:translateX(3px); }
.ritual-num {
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--pink),var(--g1));
  color:#fff;font-weight:800;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(255,107,157,.35);
}
.ritual-info { flex:1; }
.ritual-step-name { font-weight:700;font-size:.88rem;color:var(--text);margin-bottom:.2rem; }
.ritual-detail { font-size:.78rem;color:var(--text2);line-height:1.55; }
.ritual-time {
  font-size:.68rem;font-weight:700;
  background:rgba(67,233,123,.1);color:var(--g1);
  padding:.2rem .6rem;border-radius:50px;
  border:1px solid rgba(67,233,123,.2);white-space:nowrap;
}

/* CTA */
.result-cta-section {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink2) 40%, #7c3aed 100%);
  border-radius: var(--radius); padding: 2.2rem;
  text-align: center; margin-top: 2rem;
  box-shadow: 0 16px 60px rgba(255,107,157,.4);
  position: relative; overflow: hidden;
}
.result-cta-section::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.15),transparent 50%);
}
.result-cta-section > * { position:relative;z-index:1; }
.result-cta-section h3 { font-family:var(--font-display);font-size:1.9rem;color:#fff;margin-bottom:.5rem; }
.result-cta-section p { font-size:.9rem;color:rgba(255,255,255,.8);margin-bottom:1.5rem;line-height:1.7; }
.btn-white {
  background:#fff;color:var(--pink);border:none;font-weight:800;font-size:.95rem;
  padding:.9rem 2rem;border-radius:50px;cursor:pointer;transition:var(--transition);
  box-shadow:0 4px 24px rgba(0,0,0,.2);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-body);
}
.btn-white:hover { transform:translateY(-2px);box-shadow:0 8px 35px rgba(0,0,0,.25); }
.btn-outline-white {
  background:rgba(255,255,255,.15);color:#fff;
  border:2px solid rgba(255,255,255,.45);font-weight:700;font-size:.9rem;
  padding:.85rem 1.8rem;border-radius:50px;cursor:pointer;transition:var(--transition);
  font-family:var(--font-body);
}
.btn-outline-white:hover { background:rgba(255,255,255,.25); }

/* Footer */
.site-footer {
  background: var(--dark2);
  border-top: 1px solid rgba(255,107,157,.12);
  padding: 2rem 1.5rem;
}
.footer-inner { max-width:800px;margin:0 auto;text-align:center; }
.footer-brand { display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:1rem; }
.footer-links { display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem; }
.footer-links a { font-size:.82rem;color:var(--text2);text-decoration:none;transition:var(--transition); }
.footer-links a:hover { color:var(--pink); }
.footer-copy { font-size:.75rem;color:var(--text3); }

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:600px){
  .quiz-card{ padding:1.5rem; }
  .image-select-grid{ grid-template-columns:repeat(2,1fr); }
  .ingredient-grid{ grid-template-columns:repeat(2,1fr); }
  .lifestyle-grid{ grid-template-columns:repeat(2,1fr); }
  .concern-grid{ grid-template-columns:1fr; }
  .landing-stats{ gap:.8rem; }
  .age-btns{ flex-wrap:wrap; }
  .score-row{ gap:.5rem; }
  .header-nav{ display:none; }
  .cta-row{ flex-direction:column;align-items:center; }
  .landing-title{ font-size:2.4rem; }
}
@media(max-width:400px){
  .ingredient-grid{ grid-template-columns:1fr 1fr; }
}