/* ============================================================
   Beauty — Apple-style landing
   SF Pro · white / #f5f5f7 / black panels · big bold type
   ============================================================ */

:root {
  --bg:     #FFFFFF;
  --gray:   #F5F5F7;
  --ink:    #1D1D1F;
  --soft:   #6E6E73;
  --hair:   #D2D2D7;
  --accent: #C08A82;          /* warm rose, used sparingly */
  --accent-ink: #A86F66;

  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Inter", "Segoe UI", system-ui, sans-serif;
  --shell: 1024px;
  --wide: 1180px;
  --ease: cubic-bezier(.28, .11, .32, 1);
}

[data-theme="dark"] {
  --bg:     #000000;
  --gray:   #161617;
  --ink:    #F5F5F7;
  --soft:   #86868B;
  --hair:   #2A2A2C;
  --accent: #E0A39A;
  --accent-ink: #E9B4AC;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sf);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}
a { color: inherit; text-decoration: none; }
svg { display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.022em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: #fff; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--hair) 70%, transparent);
}
.nav__inner { max-width: var(--wide); margin-inline: auto; height: 52px; padding-inline: 26px; display: flex; align-items: center; gap: 26px; }
.nav__brand { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.nav__links { display: flex; gap: 28px; margin: 0 auto; }
.nav__links a { font-size: .8rem; color: var(--soft); transition: color .25s; }
.nav__links a:hover { color: var(--ink); }
.nav__tools { display: flex; align-items: center; gap: 16px; }
.lang { display: inline-flex; gap: 7px; }
.lang__btn { border: 0; background: none; cursor: pointer; font-family: var(--sf); font-size: .76rem; color: var(--soft); padding: 0; transition: color .25s; }
.lang__btn.is-active { color: var(--ink); }
.theme-toggle { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: transform .4s var(--ease), border-color .25s; }
.theme-toggle:hover { transform: rotate(18deg); border-color: var(--accent); }
.theme-toggle .i-moon { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-moon { display: block; }

/* ---------- panels ---------- */
.panel { background: var(--bg); padding: clamp(64px, 11vw, 130px) 26px; }
.panel--gray { background: var(--gray); }
.panel--dark { background: #000; --bg: #000; --ink: #F5F5F7; --soft: #86868B; --hair: #2A2A2C; color: var(--ink); }

/* ---------- shared headings ---------- */
.eyebrow { font-size: 1.25rem; font-weight: 600; color: var(--accent); margin-bottom: 6px; letter-spacing: -.01em; }
.kicker { font-size: 1.05rem; font-weight: 600; color: var(--accent); margin-bottom: 14px; }
.band-title { max-width: 16ch; margin: 0 auto; text-align: center; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.07; }
.band-sub { text-align: center; color: var(--soft); font-size: 1.2rem; margin: 18px auto 0; }

/* chevron links */
.linkrow { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.chev { color: var(--accent-ink); font-size: 1.2rem; font-weight: 400; display: inline-flex; align-items: center; gap: 3px; }
.chev::after { content: "›"; font-size: 1.3em; line-height: 0; transition: transform .25s var(--ease); }
.chev:hover { text-decoration: underline; }
.chev:hover::after { transform: translateX(3px); }

/* ---------- hero ---------- */
.hero { text-align: center; padding-top: clamp(56px, 8vw, 90px); padding-bottom: 0; }
.hero__copy { max-width: 800px; margin-inline: auto; }
.hero__title { font-size: clamp(4rem, 13vw, 8.5rem); font-weight: 700; letter-spacing: -.04em; line-height: .95; }
.hero__tagline { font-size: clamp(1.5rem, 3.6vw, 2.6rem); font-weight: 600; margin-top: 14px; letter-spacing: -.02em; }
.hero__sub { font-size: 1.22rem; color: var(--soft); max-width: 38ch; margin: 20px auto 26px; }
.hero__visual { margin-top: clamp(36px, 6vw, 70px); display: flex; justify-content: center; }
.hero__img { width: 100%; max-width: 980px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 26px; box-shadow: 0 50px 90px -55px rgba(0,0,0,.55); }

/* ---------- device & tiles (placeholders for real imagery) ---------- */
.device { display: flex; flex-direction: column; align-items: center; }
.device .device__screen {
  width: 250px; aspect-ratio: 9 / 19; border-radius: 38px;
  border: 9px solid #1d1d1f; background: linear-gradient(165deg, #f0e7e3, #eef0ec 55%, #fbfbfd);
  box-shadow: 0 40px 70px -40px rgba(0,0,0,.45);
}
[data-theme="dark"] .device .device__screen { border-color: #2c2c2e; background: linear-gradient(165deg, #2a2422, #232325 55%, #1c1c1e); }
.device--lg .device__screen { width: clamp(260px, 34vw, 330px); }
.device figcaption { margin-top: 16px; color: var(--soft); font-size: .98rem; }

.tile {
  width: 100%; max-width: 720px; margin-inline: auto; aspect-ratio: 16 / 11; border-radius: 26px;
  background:
    radial-gradient(110% 80% at 78% 16%, rgba(192,138,130,.5), transparent 58%),
    radial-gradient(120% 90% at 16% 92%, rgba(140,154,134,.5), transparent 60%),
    linear-gradient(160deg, #efe7e2, #f3f3f1);
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.5);
}
.panel--dark .tile { background:
    radial-gradient(110% 80% at 78% 16%, rgba(224,163,154,.5), transparent 58%),
    radial-gradient(120% 90% at 16% 92%, rgba(140,154,134,.42), transparent 60%),
    linear-gradient(160deg, #211c1a, #19191b); }

/* ---------- spotlight ---------- */
.spotlight { text-align: center; }
.spotlight__copy { max-width: 720px; margin-inline: auto; }
.spotlight__title { font-size: clamp(2.4rem, 6.2vw, 4.6rem); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
.spotlight__sub { font-size: 1.32rem; color: var(--soft); max-width: 40ch; margin: 22px auto 0; }
.spotlight__visual { margin-top: clamp(38px, 6vw, 72px); }

/* ---------- two-up tiles ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: var(--wide); margin-inline: auto; }
.bigtile { background: var(--bg); border-radius: 26px; padding: 44px 40px 0; text-align: center; overflow: hidden; display: flex; flex-direction: column; }
[data-theme="dark"] .bigtile { background: #1c1c1e; }
.bigtile__head h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-top: 8px; }
.bigtile__visual { margin-top: 30px; border-radius: 18px 18px 0 0; aspect-ratio: 16 / 10; box-shadow: none; }

/* ---------- feature grid ---------- */
.features .band-title { margin-bottom: clamp(40px, 6vw, 70px); }
.fgrid { max-width: var(--wide); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fcard { background: var(--gray); border-radius: 20px; padding: 34px 30px; transition: transform .4s var(--ease); }
.panel--gray .fcard { background: var(--bg); }
[data-theme="dark"] .panel--gray .fcard { background: #1c1c1e; }
.fcard:hover { transform: translateY(-6px); }
.fcard__ic { color: var(--accent); display: block; margin-bottom: 18px; }
.fcard__ic svg { width: 40px; height: 40px; }
.fcard h4 { font-size: 1.3rem; margin-bottom: 8px; }
.fcard p { color: var(--soft); font-size: 1rem; }

/* ---------- steps ---------- */
.steps .band-title { margin-bottom: clamp(40px, 6vw, 66px); }
.steps__row { max-width: var(--wide); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stepc { text-align: center; }
.stepc__no { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font-size: 1.25rem; font-weight: 600; }
.stepc h4 { font-size: 1.22rem; margin-bottom: 6px; }
.stepc p { color: var(--soft); font-size: 1rem; }

/* ---------- gallery ---------- */
.gallery .band-title { margin-bottom: clamp(40px, 6vw, 66px); }
.gallery__row { max-width: var(--wide); margin-inline: auto; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gallery__row::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; }
.shot figcaption { margin-top: 16px; color: var(--soft); font-size: .98rem; font-weight: 600; }

/* ---------- pricing ---------- */
.pricing .band-sub { margin-bottom: clamp(40px, 6vw, 60px); }
.plans { max-width: var(--wide); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan { background: var(--bg); border: 1px solid var(--hair); border-radius: 22px; padding: 40px 32px; display: flex; flex-direction: column; position: relative; }
[data-theme="dark"] .plan { background: #1c1c1e; border-color: transparent; }
.plan--feature { border-color: var(--accent); }
.plan__tag { position: absolute; top: 22px; right: 24px; font-size: .78rem; font-weight: 600; color: var(--accent); }
.plan__name { font-size: 1.4rem; margin-bottom: 16px; }
.plan__price { font-size: 3rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.plan__cur { font-size: 1.5rem; vertical-align: super; }
.plan__dec { font-size: 1.6rem; color: var(--soft); }
.plan__per { color: var(--soft); margin: 12px 0 24px; font-size: .96rem; }
.plan__list { display: grid; gap: 12px; margin-bottom: 30px; flex: 1; }
.plan__list li { position: relative; padding-left: 24px; color: var(--soft); font-size: .98rem; }
.plan__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 11px; height: 6px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.plan .btn { width: 100%; justify-content: center; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sf); font-size: 1rem; font-weight: 500; padding: 13px 26px; border-radius: 980px; cursor: pointer; transition: all .3s var(--ease); }
.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--accent-ink); }
.btn--line { border: 1px solid var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--bg); }

/* ---------- final cta ---------- */
.cta { text-align: center; }
.cta__inner { max-width: 760px; margin-inline: auto; }
.cta__title { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.cta__sub { color: var(--soft); font-size: 1.2rem; margin: 18px 0 38px; }
.badges { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 12px; border: 1px solid currentColor; padding: 11px 22px; border-radius: 12px; color: var(--ink); transition: all .3s var(--ease); }
.badge:hover { background: var(--ink); color: #000; }
.badge span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.badge small { font-size: .6rem; opacity: .7; }
.badge strong { font-size: 1.06rem; font-weight: 600; }

/* ---------- footer ---------- */
.footer { padding: 44px 26px; border-top: 1px solid var(--hair); }
.footer__inner { max-width: var(--wide); margin-inline: auto; }
.footer__fine { color: var(--soft); font-size: .82rem; padding-bottom: 18px; border-bottom: 1px solid var(--hair); max-width: 70ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: 12px 26px; padding: 18px 0; }
.footer__links a { font-size: .82rem; color: var(--soft); transition: color .25s; }
.footer__links a:hover { color: var(--ink); }
.footer__copy { color: var(--soft); font-size: .82rem; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .duo { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .steps__row { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .gallery__row { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .plans { grid-template-columns: 1fr; max-width: 440px; }
  .plan--feature { order: -1; }
  .nav__links { display: none; }
}
@media (max-width: 520px) {
  .fgrid { grid-template-columns: 1fr; }
  .gallery__row { grid-template-columns: 1fr; }
  .linkrow { gap: 18px; }
}

/* ---------- stock imagery (Pexels, free license) ---------- */
.tile.tile--scan    { background: center/cover url('https://images.pexels.com/photos/7670759/pexels-photo-7670759.jpeg?auto=compress&cs=tinysrgb&w=1200'); }
.tile.tile--expiry  { background: center/cover url('https://images.pexels.com/photos/9774782/pexels-photo-9774782.jpeg?auto=compress&cs=tinysrgb&w=1200'); }
.tile.tile--advice  { background: center/cover url('https://images.pexels.com/photos/17891765/pexels-photo-17891765.jpeg?auto=compress&cs=tinysrgb&w=1200'); }
.tile.tile--diary   { background: center/cover url('https://images.pexels.com/photos/8076226/pexels-photo-8076226.jpeg?auto=compress&cs=tinysrgb&w=1000'); }
.tile.tile--barcode { background: center/cover url('https://images.pexels.com/photos/4889710/pexels-photo-4889710.jpeg?auto=compress&cs=tinysrgb&w=1000'); }

/* ---------- in-app screen mockups (real Beauty UI, no external assets) ---------- */
/* Each shot is a bare, full-bleed app screen (no phone bezel) — App-Store-preview style. */
.scr {
  width: clamp(198px, 62vw, 236px); aspect-ratio: 9 / 19.5;
  border-radius: 32px; overflow: hidden; container-type: inline-size;
  position: relative; display: flex; flex-direction: column;
  text-align: left; font-size: 4.4cqw; line-height: 1.25; letter-spacing: 0.05cqw;
  color: #2B1B2A; background: #FFF5F9;
  box-shadow: 0 28px 50px -30px rgba(43,27,42,.55), 0 6px 16px -10px rgba(43,27,42,.22);
  /* Beauty brand palette */
  --p: #F0398A; --p2: #FF7EC2; --p700: #D62E76;
  --surf: #fff; --surf2: #FCE9F1; --soft: #9A8190; --border: #F6D7E6;
  --violet: #A76BFF; --mint: #55D6C2; --peach: #FF8C6B; --gold: #E3A53B;
}
[data-theme="dark"] .scr { box-shadow: 0 28px 55px -28px rgba(0,0,0,.7); }
/* status bar */
.scr__status { display: flex; align-items: center; justify-content: space-between;
  padding: 3.333cqw 6.667cqw 1.429cqw; font-size: 3.81cqw; font-weight: 700; color: #2B1B2A; flex: 0 0 auto; }
.scr__batt { width: 7.143cqw; height: 3.81cqw; border: 0.476cqw solid currentColor; border-radius: 0.952cqw; position: relative; opacity: .85; }
.scr__batt::before { content: ""; position: absolute; inset: 0.476cqw; right: 1.905cqw; background: currentColor; border-radius: 0.476cqw; }
.scr__batt::after { content: ""; position: absolute; right: -1.19cqw; top: 0.952cqw; width: 0.714cqw; height: 1.905cqw; background: currentColor; border-radius: 0 0.476cqw 0.476cqw 0; }
/* body scroll area */
.scr__body { flex: 1 1 auto; overflow: hidden; padding: 0.952cqw 6.667cqw 3.81cqw; }
.scr__h1 { font-size: 7.143cqw; font-weight: 800; letter-spacing: -0.095cqw; margin: 1.905cqw 0 4.286cqw; }
.scr__sub { color: var(--soft); font-size: 4.048cqw; margin: -2.857cqw 0 4.762cqw; }
.scr__sec { font-size: 4.762cqw; font-weight: 800; margin: 5.238cqw 0 3.333cqw; }
/* filter chips */
.scr__chips { display: flex; gap: 2.857cqw; margin-bottom: 5.238cqw; }
.chip { font-size: 4.048cqw; font-weight: 700; padding: 1.905cqw 5.238cqw; border-radius: 475.714cqw;
  background: var(--surf); color: var(--soft); border: 0.476cqw solid var(--border); }
.chip--on { background: var(--p); color: #fff; border-color: transparent; box-shadow: 0 1.905cqw 4.762cqw -1.905cqw rgba(240,57,138,.6); }
/* product list cards */
.pcard { display: flex; align-items: center; gap: 4.286cqw; background: var(--surf);
  border-radius: 7.619cqw; padding: 3.81cqw; margin-bottom: 4.286cqw; box-shadow: 0 3.81cqw 7.619cqw -5.714cqw rgba(240,57,138,.5); }
.pthumb { width: 19.048cqw; height: 19.048cqw; border-radius: 5.714cqw; flex: 0 0 auto; }
.pcard__t { flex: 1 1 auto; min-width: 0; }
.pcard__name { font-size: 4.524cqw; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__brand { font-size: 3.81cqw; color: var(--soft); margin-top: 0.476cqw; }
.pcard__meta { display: flex; align-items: center; gap: 1.905cqw; margin-top: 1.905cqw; font-size: 3.571cqw; color: var(--soft); }
.dot { width: 2.381cqw; height: 2.381cqw; border-radius: 50%; flex: 0 0 auto; }
.pill { font-size: 3.333cqw; font-weight: 800; padding: 0.952cqw 2.857cqw; border-radius: 475.714cqw; }
.pill--warn { background: #FFEAE0; color: #C9541F; }
.pill--ok { background: #E6F8F3; color: #178A73; }
/* thumb gradients (product image fallbacks) */
.g-rose { background: linear-gradient(150deg, #FF9CC4, #F0398A); }
.g-violet { background: linear-gradient(150deg, #C6A4FF, #A76BFF); }
.g-mint { background: linear-gradient(150deg, #8FEAD9, #55D6C2); }
.g-peach { background: linear-gradient(150deg, #FFB79E, #FF8C6B); }
.g-gold { background: linear-gradient(150deg, #F3CE86, #E3A53B); }
/* FAB */
.fab { position: absolute; right: 5.714cqw; bottom: 21.905cqw; display: flex; align-items: center; gap: 2.381cqw;
  background: var(--p); color: #fff; font-size: 4.286cqw; font-weight: 700; padding: 3.81cqw 6.19cqw;
  border-radius: 475.714cqw; box-shadow: 0 3.81cqw 8.571cqw -2.857cqw rgba(240,57,138,.7); }
.fab svg { width: 5.714cqw; height: 5.714cqw; }
/* bottom tab bar */
.scr__tabs { flex: 0 0 auto; display: flex; justify-content: space-around; align-items: center;
  padding: 2.857cqw 2.857cqw 4.286cqw; background: rgba(255,255,255,.9); border-top: 0.476cqw solid var(--border); backdrop-filter: blur(2.857cqw); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 0.952cqw; font-size: 3.095cqw; font-weight: 600; color: var(--soft); }
.tab svg { width: 7.143cqw; height: 7.143cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab--on { color: var(--p); }
.tab--scan svg { width: 7.143cqw; height: 7.143cqw; }
.tab--scan .tab__ring { display: flex; align-items: center; justify-content: center; width: 12.381cqw; height: 12.381cqw;
  border-radius: 50%; background: var(--p); color: #fff; box-shadow: 0 2.857cqw 5.714cqw -1.905cqw rgba(240,57,138,.7); margin-top: -3.81cqw; }
.tab--scan .tab__ring svg { stroke-width: 2; }
/* app bar (detail) */
.scr__bar { display: flex; align-items: center; gap: 3.81cqw; padding: 1.905cqw 5.714cqw 2.857cqw; flex: 0 0 auto; }
.scr__bar svg { width: 7.619cqw; height: 7.619cqw; stroke: #2B1B2A; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* product detail hero */
.hero-thumb { width: 45.714cqw; height: 45.714cqw; border-radius: 10.476cqw; margin: 1.905cqw auto 5.714cqw; box-shadow: 0 7.619cqw 12.381cqw -6.667cqw rgba(240,57,138,.6); }
.scr__pname { font-size: 7.143cqw; font-weight: 800; text-align: center; letter-spacing: -0.095cqw; }
.scr__pmeta { text-align: center; color: var(--soft); font-size: 4.048cqw; margin: 1.429cqw 0 4.286cqw; }
.badges { display: flex; justify-content: center; gap: 2.857cqw; margin-bottom: 5.714cqw; }
.infocard { background: var(--surf); border-radius: 6.667cqw; padding: 4.286cqw 5.238cqw; margin-bottom: 4.286cqw; box-shadow: 0 3.81cqw 7.619cqw -6.19cqw rgba(240,57,138,.5); }
.inforow { display: flex; justify-content: space-between; font-size: 4.048cqw; padding: 1.429cqw 0; }
.inforow + .inforow { border-top: 0.476cqw solid var(--border); }
.inforow b { font-weight: 700; }
.ing { display: flex; flex-wrap: wrap; gap: 1.905cqw; margin-top: 2.381cqw; }
.ing span { font-size: 3.571cqw; background: var(--surf2); color: #7a5a6d; padding: 0.952cqw 3.333cqw; border-radius: 475.714cqw; }
.ai { background: linear-gradient(150deg, #FFF0F6, #FCE0EE); border: 0.476cqw solid var(--border); }
.ai__h { display: flex; align-items: center; gap: 2.381cqw; font-size: 4.286cqw; font-weight: 800; color: var(--p700); margin-bottom: 1.905cqw; }
.ai__h svg { width: 5.714cqw; height: 5.714cqw; fill: var(--p); }
.ai p { font-size: 3.81cqw; color: #6b4a5c; }
.cta { margin: 1.905cqw 6.667cqw 5.714cqw; text-align: center; font-size: 4.762cqw; font-weight: 800; color: #fff;
  padding: 5.238cqw; border-radius: 7.619cqw; background: linear-gradient(135deg, #FF7EC2, #F0398A); box-shadow: 0 4.762cqw 9.524cqw -3.81cqw rgba(240,57,138,.7); }
/* scan (camera) screen */
.scr--cam { background: #15101A; color: #F6EEF4; }
.scr--cam .scr__status { color: #F6EEF4; }
.seg { display: flex; gap: 1.905cqw; margin: 2.857cqw 6.667cqw 0; padding: 1.429cqw; background: rgba(255,255,255,.1); border-radius: 475.714cqw; flex: 0 0 auto; }
.seg span { flex: 1; text-align: center; font-size: 4.048cqw; font-weight: 700; padding: 2.381cqw; border-radius: 475.714cqw; color: #d7c9d3; }
.seg .on { background: #fff; color: #2B1B2A; }
.view { flex: 1 1 auto; margin: 5.714cqw 9.524cqw; border-radius: 8.571cqw; position: relative;
  background: radial-gradient(120% 90% at 50% 40%, #3a2740, #1b1320); overflow: hidden; }
.view::after { content: ""; position: absolute; left: 18%; right: 18%; top: 30%; bottom: 30%;
  border: 0.952cqw solid rgba(255,122,184,.9); border-radius: 5.714cqw; box-shadow: 0 0 10.476cqw rgba(240,57,138,.5); }
.scanline { position: absolute; left: 18%; right: 18%; top: 50%; height: 0.952cqw; background: linear-gradient(90deg, transparent, #FF7EC2, transparent); }
.view__hint { position: absolute; left: 0; right: 0; bottom: 5.714cqw; text-align: center; font-size: 3.81cqw; color: #e9dbe4; }
.shutter { flex: 0 0 auto; display: flex; justify-content: center; padding: 2.857cqw 0 7.619cqw; }
.shutter i { width: 16.19cqw; height: 16.19cqw; border-radius: 50%; background: #fff; border: 1.429cqw solid rgba(255,255,255,.4); box-shadow: 0 0 0 0.952cqw #15101A inset; }
/* recommendation cards */
.rec { display: flex; gap: 3.81cqw; align-items: flex-start; border-radius: 7.143cqw; padding: 4.286cqw 4.762cqw; margin-bottom: 3.81cqw;
  background: var(--surf); box-shadow: 0 3.81cqw 7.619cqw -6.19cqw rgba(240,57,138,.5); }
.rec__ic { width: 12.381cqw; height: 12.381cqw; border-radius: 4.286cqw; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.rec__ic svg { width: 6.667cqw; height: 6.667cqw; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rec__t { flex: 1; min-width: 0; }
.rec__t b { font-size: 4.286cqw; font-weight: 700; }
.rec__t p { font-size: 3.81cqw; color: var(--soft); margin-top: 0.952cqw; }
/* keep mockups light regardless of site theme (screenshots don't flip) */
[data-theme="dark"] .scr { color: #2B1B2A; background: #FFF5F9; }
[data-theme="dark"] .scr--cam { background: #15101A; color: #F6EEF4; }

/* ---- welcome / onboarding screen ---- */
.scr--welcome { background: linear-gradient(160deg, #FF8FC7, #F0398A 58%, #D62E76); color: #fff; }
.scr--welcome .scr__status { color: #fff; }
.wl { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3.4cqw; padding: 0 9cqw; }
.wl__mark { width: 22cqw; height: 22cqw; border-radius: 30%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; box-shadow: 0 8cqw 18cqw -8cqw rgba(0,0,0,.35); }
.wl__mark svg { width: 12cqw; height: 12cqw; fill: #fff; }
.wl__brand { font-size: 12cqw; font-weight: 800; letter-spacing: -0.4cqw; }
.wl__tag { font-size: 4.6cqw; line-height: 1.4; opacity: .95; }
.wl__btn { margin-top: 2cqw; background: #fff; color: #D62E76; font-weight: 800; font-size: 4.6cqw; padding: 4cqw 13cqw; border-radius: 999cqw; box-shadow: 0 8cqw 16cqw -8cqw rgba(0,0,0,.3); }
.wl__dots { position: absolute; left: 0; right: 0; bottom: 6cqw; display: flex; justify-content: center; gap: 2cqw; }
.wl__dots i { width: 2cqw; height: 2cqw; border-radius: 999cqw; background: rgba(255,255,255,.5); }
.wl__dots i.on { width: 6cqw; background: #fff; }

/* ---- quiz screen ---- */
.qz__prog { display: flex; gap: 1.6cqw; margin: 1cqw 0 5cqw; }
.qz__prog i { height: 1.6cqw; flex: 1; border-radius: 999cqw; background: var(--border); }
.qz__prog i.on { background: var(--p); }
.qz__q { font-size: 6cqw; font-weight: 800; letter-spacing: -0.1cqw; line-height: 1.2; margin-bottom: 5cqw; }
.opt { display: flex; align-items: center; gap: 3.5cqw; background: var(--surf); border: 0.5cqw solid var(--border); border-radius: 5.5cqw; padding: 4.2cqw 4.5cqw; margin-bottom: 3cqw; font-size: 4.5cqw; font-weight: 600; }
.opt .rad { width: 5cqw; height: 5cqw; border-radius: 50%; border: 0.7cqw solid var(--border); flex: 0 0 auto; }
.opt--on { border-color: var(--p); background: #FFF0F6; color: var(--p700); box-shadow: 0 6cqw 14cqw -10cqw rgba(240,57,138,.55); }
.opt--on .rad { border-color: var(--p); background: var(--p); box-shadow: inset 0 0 0 1.4cqw #fff; }

/* ---------- App Store / Google Play badges ---------- */
.dl { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .dl { justify-content: center; margin-top: 4px; }
.badge { display: inline-flex; align-items: center; gap: 11px; background: var(--ink); color: var(--bg); border-radius: 14px; padding: 11px 20px; transition: transform .25s var(--ease), opacity .25s; }
.badge:hover { transform: translateY(-2px); opacity: .92; }
.badge svg { width: 24px; height: 24px; flex: 0 0 auto; fill: currentColor; }
.badge__t { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.badge__t small { font-size: .62rem; opacity: .82; letter-spacing: .02em; }
.badge__t b { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }