:root {
  color-scheme: light;
  --plum-950: #2d0d30;
  --plum-900: #4b164c;
  --plum-800: #65215e;
  --berry-600: #c52f62;
  --berry-500: #e34d77;
  --gold-400: #ffcf69;
  --gold-200: #ffe9ad;
  --ink: #261d28;
  --muted: #706574;
  --paper: #fffafb;
  --surface: #ffffff;
  --line: #eadde8;
  --success: #247453;
  --shadow: 0 26px 80px rgba(56, 12, 58, 0.16);
  --soft-shadow: 0 12px 34px rgba(56, 12, 58, 0.1);
  font-family: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; overflow-x: clip; scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 207, 105, 0.25), transparent 26rem),
    radial-gradient(circle at 100% 100%, rgba(227, 77, 119, 0.14), transparent 32rem),
    var(--paper);
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

.consent-banner {
  position: fixed;
  z-index: 1000;
  right: 22px;
  bottom: 22px;
  width: min(430px, calc(100% - 32px));
  padding: 20px;
  border: 1px solid rgba(255, 207, 105, .42);
  border-radius: 22px 22px 22px 7px;
  color: white;
  background: rgba(45, 13, 48, .97);
  box-shadow: var(--shadow);
}
.consent-banner[hidden] { display: none; }
.consent-banner p { margin: 0; color: rgba(255,255,255,.84); line-height: 1.5; }
.consent-banner strong { color: var(--gold-400); }
.consent-banner div { display: flex; gap: 10px; margin-top: 16px; }
.consent-banner button { flex: 1; min-height: 42px; padding: 8px 12px; border-radius: 12px; font-weight: 700; }
.consent-secondary { border: 1px solid rgba(255,255,255,.3); color: white; background: transparent; }
.consent-primary { border: 0; color: var(--plum-950); background: var(--gold-400); }

.legal-page {
  width: min(820px, calc(100% - 36px));
  margin: 0 auto;
  padding: 56px 0 84px;
}
.legal-page > a { color: var(--berry-600); font-weight: 700; text-decoration: none; }
.legal-page h1 { margin-top: 32px; font-size: clamp(2.3rem, 7vw, 4.3rem); }
.legal-page h2 { margin: 36px 0 8px; font: 700 1.5rem/1.2 "Playfair Display", serif; }
.legal-page p { color: var(--muted); line-height: 1.75; }

.site-shell {
  width: min(100%, 1180px);
  min-width: 0;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 28px;
}

.topbar {
  min-height: 86px;
  display: grid;
  grid-template-columns: 48px 1fr 110px;
  align-items: center;
  gap: 16px;
}

.brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--plum-900);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-logo {
  width: auto;
  height: 48px;
  object-fit: contain;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px 13px 13px 4px;
  color: white;
  background: linear-gradient(145deg, var(--plum-900), var(--berry-600));
  box-shadow: 0 8px 20px rgba(75, 22, 76, 0.22);
  font: 700 1.3rem/1 "Playfair Display", serif;
}

.brand-copy b {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 3px 7px;
  margin-left: 3px;
  border-radius: 99px;
  color: var(--plum-950);
  background: var(--gold-400);
  font-size: 0.78rem;
}

.back-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--plum-900);
  background: rgba(255, 255, 255, 0.74);
  font-size: 1.35rem;
  transition: transform 180ms ease, border-color 180ms ease;
}

.back-button:hover { transform: translateX(-2px); border-color: var(--berry-500); }
.back-button[hidden] { visibility: hidden; }

.step-label {
  justify-self: end;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.progress-track {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #f0e5ee;
}

.progress-value {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--berry-500), var(--plum-900));
  transition: width 360ms cubic-bezier(.2,.8,.2,1);
}

#app {
  flex: 1;
  min-width: 0;
  padding: 46px 0 54px;
  outline: 0;
}

.quiz-layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 680px) minmax(260px, 1fr);
  align-items: start;
  gap: 52px;
  animation: rise 380ms ease both;
}

.quiz-panel {
  position: relative;
  min-width: 0;
  min-height: 520px;
  padding: clamp(28px, 4.5vw, 58px);
  border: 1px solid rgba(101, 33, 94, 0.1);
  border-radius: 34px 34px 34px 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.quiz-aside {
  position: sticky;
  top: 30px;
  overflow: hidden;
  border-radius: 180px 180px 28px 28px;
  background: var(--plum-900);
  color: white;
  box-shadow: var(--soft-shadow);
}

.quiz-aside img {
  width: 100%;
  aspect-ratio: 4/4.8;
  object-fit: cover;
  object-position: center 28%;
  opacity: 0.88;
  mix-blend-mode: screen;
}

.aside-copy { padding: 6px 30px 30px; }
.aside-copy p { margin: 0; color: rgba(255,255,255,.84); line-height: 1.55; }
.aside-copy strong { color: var(--gold-400); }

.eyebrow {
  margin: 0 0 12px;
  color: var(--berry-600);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1, h2, h3 { color: var(--plum-950); }
h1 {
  max-width: 690px;
  margin: 0;
  font: 700 clamp(2.15rem, 6vw, 4.6rem)/0.98 "Playfair Display", serif;
  letter-spacing: -0.045em;
}

.question-title { font-size: clamp(2rem, 4.5vw, 3.55rem); line-height: 1.03; }
.lead { max-width: 610px; margin: 20px 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }
.lead strong { color: var(--plum-900); }

.intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 26px 0 0;
  padding: 10px 14px;
  border: 1px solid #f1d7e3;
  border-radius: 99px;
  color: var(--plum-800);
  background: #fff2f6;
  font-size: 0.88rem;
  font-weight: 600;
}

.intro-badge::before { content: "✓"; color: var(--success); font-weight: 800; }

.primary-button, .offer-cta {
  width: 100%;
  min-height: 58px;
  margin-top: 28px;
  border: 0;
  border-radius: 17px 17px 17px 5px;
  color: white;
  background: linear-gradient(135deg, var(--berry-600), var(--plum-900));
  box-shadow: 0 14px 28px rgba(197, 47, 98, 0.23);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.primary-button:hover, .offer-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(197,47,98,.3); }
.primary-button:focus-visible, .option-card:focus-visible, .offer-cta:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 3px; }
.primary-button[disabled] { cursor: not-allowed; opacity: .46; transform: none; }

.microcopy { margin: 13px 0 0; color: var(--muted); text-align: center; font-size: 0.82rem; }

.options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.options-grid.is-single { grid-template-columns: 1fr; }
.options-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.option-card {
  position: relative;
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 19px 19px 19px 6px;
  color: var(--ink);
  background: var(--surface);
  text-align: left;
  font-weight: 600;
  line-height: 1.3;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.option-card:hover { transform: translateY(-2px); border-color: #d79cbb; box-shadow: var(--soft-shadow); }
.option-card[aria-pressed="true"] { border-color: var(--berry-500); background: #fff0f5; box-shadow: 0 0 0 3px rgba(227,77,119,.09); }
.option-card[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--berry-600);
  font-size: .78rem;
}

.option-visual {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border-radius: 14px 14px 14px 4px;
  background: #f5eaf1;
}

.option-visual img { width: 100%; height: 100%; object-fit: cover; }
.option-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff0f5;
  font-size: 1.5rem;
}

.option-copy small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; line-height: 1.35; }

.range-card {
  margin-top: 34px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px 24px 24px 8px;
  background: linear-gradient(145deg, white, #fff5f8);
}

.range-value { display: flex; align-items: baseline; justify-content: center; gap: 7px; color: var(--plum-900); }
.range-value strong { font: 700 4.2rem/1 "Playfair Display", serif; }
.range-value span { color: var(--muted); font-size: 1rem; font-weight: 700; }
input[type="range"] { width: 100%; margin: 30px 0 8px; accent-color: var(--berry-600); }
.range-limits { display: flex; justify-content: space-between; color: var(--muted); font-size: .82rem; }

.story-card {
  overflow: hidden;
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: 24px 24px 24px 8px;
  background: #fff;
}
.story-card img { width: 100%; max-height: 440px; object-fit: cover; }
.story-card-copy { padding: 24px; }
.story-card-copy p { margin: 0; color: var(--muted); line-height: 1.55; }

.result-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 30px;
}
.result-strip article { padding: 18px 12px; border-radius: 16px; background: #f8eef5; text-align: center; }
.result-strip strong { display: block; color: var(--plum-900); font-size: 1.25rem; }
.result-strip span { color: var(--muted); font-size: .82rem; }

.gallery { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.gallery img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px 16px 16px 5px; }

.loading-panel { max-width: 700px; margin: 0 auto; text-align: center; }
.loading-orbit { position: relative; width: 92px; height: 92px; margin: 20px auto 34px; }
.loading-orbit::before { content:""; position:absolute; inset:0; border: 3px solid #f2dce7; border-top-color: var(--berry-600); border-radius:50%; animation: spin 1s linear infinite; }
.loading-orbit span { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--gold-400); }
.loading-orbit span:nth-child(1){top:8px;right:10px}.loading-orbit span:nth-child(2){right:2px;bottom:18px}.loading-orbit span:nth-child(3){left:10px;bottom:3px}
.analysis-list { width: min(100%, 420px); display:grid; gap:12px; margin: 34px auto 0; text-align:left; }
.analysis-list span { padding: 14px 16px; border-radius: 12px; color: var(--muted); background:#f7edf4; }
.analysis-list .is-done { color: var(--success); background:#edf8f2; }

.bmi-meter { margin: 28px 0 0; }
.bmi-bar { position:relative; height:13px; border-radius:99px; background:linear-gradient(90deg,#77b9e8 0 23%,#55b989 23% 47%,#f3be57 47% 72%,#e66a70 72%); }
.bmi-dot { position:absolute; top:50%; width:27px; height:27px; transform:translate(-50%,-50%); border:5px solid white; border-radius:50%; background:var(--plum-950); box-shadow:0 4px 10px rgba(0,0,0,.2); }
.bmi-labels { display:flex; justify-content:space-between; margin-top:10px; color:var(--muted); font-size:.72rem; }

.attention-list { display:grid; gap:10px; margin:26px 0 0; padding:0; list-style:none; }
.attention-list li { display:flex; gap:12px; padding:15px; border-radius:14px; background:#faf1f6; line-height:1.45; }
.attention-list li::before { content:"✦"; color:var(--berry-600); }

.offer-page { width:min(100%, 980px); margin:0 auto; animation:rise 420ms ease both; }
.offer-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:center; padding:clamp(26px,5vw,62px); border-radius:38px 38px 38px 12px; color:white; background:linear-gradient(145deg,var(--plum-950),var(--plum-800)); box-shadow:var(--shadow); }
.offer-hero h1 { color:white; }
.offer-hero .eyebrow { color:var(--gold-400); }
.offer-hero .lead { color:rgba(255,255,255,.78); }
.offer-product { position:relative; }
.offer-product::before { content:""; position:absolute; inset:10% -6% -4% 8%; border-radius:50%; background:var(--berry-500); filter:blur(50px); opacity:.34; }
.offer-product img { position:relative; width:100%; border-radius:24px; transform:rotate(2deg); box-shadow:0 25px 50px rgba(0,0,0,.28); }
.offer-price { display:flex; align-items:flex-end; gap:10px; margin-top:22px; }
.offer-price strong { color:var(--gold-400); font:700 2.7rem/1 "Playfair Display",serif; }
.offer-price span { color:rgba(255,255,255,.72); font-size:.86rem; }
.offer-cta { display:inline-flex; align-items:center; justify-content:center; margin-top:22px; min-height:58px; padding:0 24px; color:var(--plum-950); background:var(--gold-400); text-decoration:none; }
.offer-cta:hover { box-shadow:0 18px 36px rgba(255,207,105,.18); }

.offer-section { margin-top:24px; padding:clamp(26px,5vw,54px); border:1px solid var(--line); border-radius:30px 30px 30px 10px; background:white; box-shadow:var(--soft-shadow); }
.section-heading { margin:0; font:700 clamp(1.7rem,4vw,2.7rem)/1.05 "Playfair Display",serif; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }
.benefit-grid article { padding:22px; border-radius:20px; background:#f8eef5; }
.benefit-grid b { display:block; margin-bottom:8px; color:var(--plum-900); }
.benefit-grid p { margin:0; color:var(--muted); line-height:1.5; }
.offer-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:26px; }
.offer-gallery img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px 16px 16px 5px; }
.bonus-banner { width:100%; margin-top:26px; border-radius:22px; }
.guarantee-row { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:28px; }
.guarantee-row img { width:100%; }
.legal-note { margin:24px 0 0; color:var(--muted); font-size:.8rem; line-height:1.55; }

.footer-note { display:flex; justify-content:center; gap:18px; padding:18px 0 28px; color:var(--muted); font-size:.78rem; }
.footer-note a { color:var(--plum-800); }

@keyframes rise { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
@keyframes spin { to { transform:rotate(360deg) } }

@media (max-width: 820px) {
  .site-shell { padding:0 18px; }
  .topbar { min-height:74px; grid-template-columns:42px 1fr 58px; }
  .brand-copy { font-size:.95rem; }
  .step-label { font-size:.75rem; }
  #app { padding:28px 0 36px; }
  .quiz-layout { grid-template-columns:1fr; gap:22px; }
  .quiz-aside { display:none; }
  .quiz-panel { min-height:0; padding:28px 20px; border-radius:26px 26px 26px 8px; }
  h1 { font-size:clamp(2.2rem,11vw,3.5rem); }
  .question-title { font-size:clamp(2rem,9vw,2.8rem); }
  .options-grid, .options-grid.is-three { grid-template-columns:1fr; }
  .options-grid.is-visual-mobile { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .options-grid.is-visual-mobile .option-card { flex-direction:column; align-items:stretch; padding:10px; }
  .options-grid.is-visual-mobile .option-visual { width:100%; height:auto; aspect-ratio:4/5; background:#f8f0f5; }
  .options-grid.is-visual-mobile .option-visual img { object-fit:contain; object-position:center; }
  .options-grid.is-visual-mobile .option-copy { padding:5px 4px 8px; }
  .gallery { overflow:visible; grid-template-columns:repeat(3,minmax(0,1fr)); padding-bottom:0; }
  .gallery.is-pair { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery.is-pair img { height:auto; aspect-ratio:4/5; object-fit:contain; background:#f8f0f5; }
  .offer-hero { grid-template-columns:1fr; gap:28px; border-radius:28px 28px 28px 8px; }
  .offer-product { order:-1; width:min(88%,360px); margin:0 auto; }
  .benefit-grid { grid-template-columns:1fr; }
  .offer-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; padding-bottom:0; }
  .guarantee-row { grid-template-columns:96px 1fr; }
  .footer-note { flex-direction:column; align-items:center; gap:6px; text-align:center; }
}

@media (max-width: 430px) {
  .brand-mark { width:34px; height:34px; }
  .brand { gap:8px; }
  .brand-copy b { min-width:30px; padding:2px 6px; }
  .step-label { max-width:52px; text-align:right; }
  .range-card { padding:22px 16px; }
  .range-value strong { font-size:3.4rem; }
  .result-strip { grid-template-columns:1fr; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery.is-results img:last-child { grid-column:1 / -1; width:min(56%,220px); justify-self:center; }
  .bmi-labels span:nth-child(2) { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}