/* Tokens mirror apps/mobile/src/theme/index.ts */
:root {
  --primary: #11b5a4;
  --primary-dark: #0c8f82;
  --primary-soft: #ddf6f3;
  --navy: #18334b;
  --navy-soft: #5b7088;
  --muted: #8497ab;
  --bg: #f6f9fc;
  --card: #fff;
  --border: #e3eaf1;
  --gold: #ffc857;
  --gold-soft: #fff3d6;
  --correct: #1fa36a;
  --correct-soft: #e1f5eb;
  --wrong: #e5594f;
  --wrong-soft: #fde8e6;
  --r-card: 18px;
  --r-btn: 14px;
  --shadow: 0 1px 4px rgba(24, 51, 75, .04);
  --shadow-lg: 0 24px 60px rgba(24, 51, 75, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--navy); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 8px; }

.container { width: min(100% - 32px, 1080px); margin-inline: auto; }
.narrow { width: min(100% - 32px, 760px); }
.ic { width: 20px; height: 20px; flex: none; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(246, 249, 252, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav__in { display: flex; align-items: center; gap: 28px; height: 68px; }
.nav__logo img { height: 46px; width: auto; }
.nav__links { display: flex; gap: 28px; margin-left: 12px; font-weight: 700; font-size: 15px; color: var(--navy-soft); }
.nav__links a { padding: 8px 0; transition: color .2s; }
.nav__links a:hover { color: var(--primary-dark); }
.nav__cta { margin-left: auto; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 800; border-radius: var(--r-btn); border: 0; cursor: pointer; min-height: 48px; padding: 0 24px; transition: transform .15s var(--ease), background .2s; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 4px 0 var(--primary-dark); }
.btn--primary:hover { background: #14c4b2; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }

/* ---------- Store badges ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { position: relative; display: inline-flex; align-items: center; gap: 12px; min-width: 190px; height: 58px; padding: 0 20px 0 16px; background: var(--navy); color: #fff; border-radius: 14px; transition: transform .15s var(--ease), background .2s; }
.store svg { width: 30px; height: 30px; flex: none; }
.store small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em; opacity: .8; line-height: 1.1; }
.store strong { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; }
a.store:hover { background: #21435f; }
.store--soon { background: #fff; color: var(--navy-soft); border: 1.5px dashed #c5d2de; cursor: default; }
.store--soon svg { opacity: .55; }
.store__soon { position: absolute; top: -10px; right: -8px; background: var(--gold); color: #6b4a00; font-size: 12px; font-weight: 800; padding: 3px 11px; border-radius: 99px; box-shadow: 0 2px 6px rgba(24, 51, 75, .15); transform: rotate(4deg); }
.stores--center { justify-content: center; }
.stores--dark .store { background: #fff; color: var(--navy); }
.stores--dark a.store:hover { background: var(--primary-soft); }
.stores--dark .store--soon { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .5); }

/* ---------- Hero ---------- */
.hero { padding: 48px 0 24px; background: radial-gradient(800px 420px at 90% 0%, var(--primary-soft), transparent 65%); overflow: hidden; }
.hero__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-soft); color: var(--primary-dark); font-size: 13px; font-weight: 800; padding: 8px 16px; border-radius: 99px; }
.hero h1 { font-size: clamp(36px, 5.6vw, 58px); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; margin: 20px 0 16px; }
.accent { color: var(--primary); }
.lead { font-size: 18px; color: var(--navy-soft); max-width: 460px; }
.hero .stores { margin-top: 28px; }
.hero__note { margin-top: 14px; font-size: 13px; color: var(--muted); font-weight: 600; }

.hero__art { position: relative; display: grid; place-items: center; min-height: 520px; }

.piko-float { position: absolute; z-index: 2; width: 190px; right: -6px; bottom: 6px; filter: drop-shadow(0 10px 14px rgba(24, 51, 75, .18)); }
.bubble { position: absolute; z-index: 3; left: -4px; top: 70px; background: #fff; border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 13px; font-weight: 800; box-shadow: 0 8px 24px rgba(24, 51, 75, .12); animation: bob 5s ease-in-out .6s infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- Sections ---------- */
.section { padding: 64px 0 8px; }
.h2 { text-align: center; font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.sub { text-align: center; color: var(--navy-soft); font-size: 16px; margin: 8px 0 32px; }

/* Tracks */
.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.track { display: flex; align-items: center; gap: 18px; padding: 24px; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); }
.track--mint { background: linear-gradient(135deg, #e8f8f6, #fff); }
.track--gold { background: linear-gradient(135deg, var(--gold-soft), #fff); }
.track img { width: 132px; height: 132px; flex: none; }
.track h3 { font-size: 24px; font-weight: 800; }
.track__meta { color: var(--navy-soft); font-size: 14.5px; margin: 6px 0 12px; font-weight: 600; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills span { background: #fff; border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px; color: var(--navy-soft); }

/* Features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat { padding: 22px 20px; }
.feat__ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 14px; }
.feat__ic svg { width: 26px; height: 26px; }
.feat h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.feat p { font-size: 14.5px; color: var(--navy-soft); }
.c-teal { background: var(--primary-soft); color: var(--primary-dark); }
.c-gold { background: var(--gold-soft); color: #b07c00; }
.c-green { background: var(--correct-soft); color: var(--correct); }
.c-red { background: var(--wrong-soft); color: var(--wrong); }
.c-blue { background: #e4f0ff; color: #2f6fe0; }
.c-violet { background: #eee9ff; color: #7c4ddb; }

/* Piko */
.piko { margin-top: 64px; }
.piko__in { background: var(--navy); color: #fff; border-radius: 28px; padding: 44px 40px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: center; }
.piko__in h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.piko__in > div > p { color: #bcd0e1; font-size: 16px; max-width: 400px; }
.moods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mood { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-card); padding: 14px 8px 12px; text-align: center; font-size: 12.5px; font-weight: 700; color: #dbe7f2; }
.mood img { width: 84px; height: 84px; margin: 0 auto 4px; }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.step { padding: 24px 22px; position: relative; }
.step::before { counter-increment: s; content: counter(s); width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 14px; }
.step h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.step p { font-size: 14.5px; color: var(--navy-soft); }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; font-weight: 800; font-size: 16px; min-height: 52px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--muted); transition: transform .25s var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { padding: 0 20px 18px; color: var(--navy-soft); font-size: 15px; }

/* CTA */
.cta-wrap { margin-top: 72px; }
.cta { position: relative; background: var(--primary); color: #fff; border-radius: 28px; padding: 48px 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; overflow: hidden; }
.cta h2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.cta p { margin: 6px 0 24px; font-size: 17px; color: #e6fbf8; }
.cta img { width: 190px; height: 190px; margin-block: -20px; }

/* Footer */
.footer { padding: 40px 0 32px; }
.footer__in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer__brand img { height: 40px; width: auto; }
.footer__tag { font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.footer__links { display: flex; gap: 24px; font-size: 14px; font-weight: 700; color: var(--navy-soft); }
.footer__links a:hover { color: var(--primary-dark); }
.footer__copy { width: 100%; font-size: 12.5px; color: var(--muted); font-weight: 600; padding-top: 18px; border-top: 1px solid var(--border); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .nav__links { display: none; }
  .hero__in { grid-template-columns: 1fr; text-align: center; }
  .lead { margin-inline: auto; }
  .hero .stores { justify-content: center; }
  .hero__art { min-height: 500px; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .piko__in { grid-template-columns: 1fr; text-align: center; padding: 36px 24px; }
  .piko__in > div > p { margin-inline: auto; }
  .steps { grid-template-columns: 1fr; }
  .step { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; }
  .step::before { grid-row: span 2; margin: 0; }
}
@media (max-width: 680px) {
  .tracks, .features { grid-template-columns: 1fr; }
  .track { flex-direction: column; text-align: center; }
  .pills { justify-content: center; }
  .moods { grid-template-columns: repeat(2, 1fr); }
  .nav__logo img { height: 40px; }
  .cta { grid-template-columns: 1fr; text-align: center; padding: 36px 22px 24px; }
  .cta img { order: -1; margin: -10px auto 0; width: 150px; height: 150px; }
  .stores { justify-content: center; }
  .store { flex: 1 1 100%; }
  .piko-float { width: 150px; right: -4px; }
  .bubble { left: 0; top: 40px; }
  .footer__in { justify-content: center; text-align: center; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Piko SVG animation ---------- */
.piko-float { height: auto; overflow: visible; }
.pk-p * { transform-box: view-box; }

/* butun bedenin nefesi / yungul atilmasi */
.pk-body-bob   { transform-origin: 640px 1150px; animation: pk-bob 4s ease-in-out infinite; }
.pk-head       { transform-origin: 610px 700px;  animation: pk-headTilt 4s ease-in-out infinite; }
.pk-wing-wave  { transform-origin: 912px 790px;  animation: pk-wave 4s ease-in-out infinite; }
.pk-wing-left  { transform-origin: 350px 770px;  animation: pk-wingIdle 4s ease-in-out infinite; }
.pk-scarf-tail { transform-origin: 488px 720px;  animation: pk-tailSway 4s ease-in-out infinite; }
.pk-tuft       { transform-origin: 560px 185px;  animation: pk-tuftSway 4s ease-in-out infinite; }
.pk-brows      { animation: pk-brows 4s ease-in-out infinite; }
.pk-cheek      { animation: pk-blush 4s ease-in-out infinite; }
.pk-eye-l      { transform-origin: 450px 482px;  animation: pk-blink 6s linear infinite; }
.pk-eye-r      { transform-origin: 776px 452px;  animation: pk-blink 6s linear infinite; }
.pk-hi         { animation: pk-hi 4s ease-out infinite; opacity: 0; }
.pk-hi2        { animation-delay: .12s; }
.pk-hi3        { animation-delay: .24s; }

@keyframes pk-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  12%      { transform: translateY(-10px) scale(.995, 1.01); }
  25%      { transform: translateY(0) scale(1.008, .992); }
  37%      { transform: translateY(-8px) scale(.996, 1.008); }
  50%      { transform: translateY(0) scale(1, 1); }
  75%      { transform: translateY(-4px) scale(1, 1.004); }
}
@keyframes pk-headTilt {
  0%, 100% { transform: rotate(0deg); }
  15%      { transform: rotate(3.5deg); }
  30%      { transform: rotate(2deg); }
  45%      { transform: rotate(3.5deg); }
  65%      { transform: rotate(-1.5deg); }
  82%      { transform: rotate(0.5deg); }
}
@keyframes pk-wave {
  0%, 100% { transform: rotate(0deg); }
  8%       { transform: rotate(16deg); }
  16%      { transform: rotate(-8deg); }
  24%      { transform: rotate(16deg); }
  32%      { transform: rotate(-8deg); }
  40%      { transform: rotate(14deg); }
  50%      { transform: rotate(0deg); }
  70%      { transform: rotate(4deg); }
  85%      { transform: rotate(-2deg); }
}
@keyframes pk-wingIdle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-6deg); }
  50%      { transform: rotate(2deg); }
  75%      { transform: rotate(-3deg); }
}
@keyframes pk-tailSway {
  0%, 100% { transform: rotate(0deg); }
  14%      { transform: rotate(-4deg); }
  28%      { transform: rotate(3deg); }
  42%      { transform: rotate(-3deg); }
  58%      { transform: rotate(2deg); }
  78%      { transform: rotate(-1deg); }
}
@keyframes pk-tuftSway {
  0%, 100% { transform: rotate(0deg); }
  10%      { transform: rotate(-7deg); }
  22%      { transform: rotate(5deg); }
  34%      { transform: rotate(-5deg); }
  48%      { transform: rotate(3deg); }
  62%      { transform: rotate(0deg); }
}
@keyframes pk-brows {
  0%, 100% { transform: translateY(0); }
  10%, 42% { transform: translateY(-12px); }
  55%      { transform: translateY(0); }
}
@keyframes pk-blush {
  0%, 100% { opacity: .7; }
  20%, 40% { opacity: 1; }
}
@keyframes pk-blink {
  0%, 44%, 49%, 88%, 91.5%, 95%, 100% { transform: scaleY(1); }
  46.5%    { transform: scaleY(.08); }
  90%      { transform: scaleY(.08); }
  93.5%    { transform: scaleY(.08); }
}
@keyframes pk-hi {
  0%       { opacity: 0; transform: translate(0, 0); }
  8%       { opacity: 1; }
  40%      { opacity: 1; transform: translate(10px, -6px); }
  52%, 100% { opacity: 0; transform: translate(18px, -10px); }
}

@media (prefers-reduced-motion: reduce) {
  .pk-p * { animation: none !important; }
  .pk-hi { opacity: 0; }
}

/* ---------- App screens (recreated from apps/mobile; native px, scaled) ---------- */
.phone { position: relative; z-index: 1; padding: 8px; background: var(--navy); border-radius: 40px; box-shadow: var(--shadow-lg); }
.phone::before { content: ""; position: absolute; z-index: 5; top: 14px; left: 50%; width: 56px; height: 6px; margin-left: -28px; background: #0e2236; border-radius: 9px; }
.shot { --s: .75; position: relative; width: calc(360px * var(--s)); height: calc(760px * var(--s)); border-radius: 32px; overflow: hidden; background: var(--bg); }
.app { position: absolute; top: 0; left: 0; width: 360px; height: 760px; transform: scale(var(--s)); transform-origin: top left; background: var(--bg); color: var(--navy); font-family: "Nunito", system-ui, sans-serif; overflow: hidden; line-height: 1.35; }
.app * { box-sizing: border-box; }
.app svg.s { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-body { padding: 36px 16px 0; display: flex; flex-direction: column; gap: 16px; }
.ap-body--hdr { padding-top: 0; }
.ap-hdr { display: flex; align-items: center; height: 52px; padding: 30px 8px 0; box-sizing: content-box; }
.ap-hdr b { flex: 1; text-align: center; font-size: 19px; font-weight: 700; }
.ap-hdr i { width: 52px; display: grid; place-items: center; height: 48px; }
.ap-title { font-size: 24px; line-height: 31px; font-weight: 800; }
.ap-h2 { font-size: 19px; line-height: 26px; font-weight: 700; }
.ap-h3 { font-size: 16px; line-height: 22px; font-weight: 700; }
.ap-sm { font-size: 13px; line-height: 18px; font-weight: 600; }
.ap-cap { font-size: 12px; line-height: 16px; font-weight: 600; }
.ap-soft { color: var(--navy-soft); }
.ap-row { display: flex; align-items: center; }
.ap-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 16px; box-shadow: 0 1px 4px rgba(24, 51, 75, .04); }
.ap-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--primary-soft); color: var(--primary-dark); font-size: 12px; font-weight: 600; }
.ap-badge--gold { background: var(--gold-soft); color: #7a5800; }
.ap-streak { display: flex; align-items: center; gap: 4px; background: var(--gold-soft); border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: #7a5800; }
.ap-streak svg.s { width: 18px; height: 18px; fill: #e8730c; stroke: #e8730c; }
.ap-bar { height: 8px; border-radius: 8px; background: var(--border); overflow: hidden; }
.ap-bar i { display: block; height: 100%; border-radius: 8px; background: var(--primary); }
.ap-bar--ok i { background: var(--correct); }
.ap-bar--no i { background: var(--wrong); }
.ap-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 14px; background: var(--primary); color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 4px 0 var(--primary-dark); }
.ap-btn--soft { background: var(--primary-soft); color: var(--primary-dark); box-shadow: none; }
.ap-btn--ghost { background: transparent; color: var(--navy-soft); box-shadow: none; }
.ap-btn svg.s { width: 20px; height: 20px; }
.ap-tiles { display: flex; gap: 8px; }
.ap-tile { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.ap-tile .ti { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 4px; }
.ap-tile .ti svg.s { width: 18px; height: 18px; }
.ap-tile b { font-size: 19px; line-height: 26px; font-weight: 700; }
.ap-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 66px; background: #fff; border-top: 1px solid var(--border); display: flex; padding-top: 6px; }
.ap-tabs div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 14px; }
.ap-tabs div.on { color: var(--primary); }
.ap-tabs div.on svg.s { fill: currentColor; }
.ap-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px 16px; background: #fff; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.ap-piko { flex: none; object-fit: contain; }

/* question options (QuestionView.tsx) */
.ap-q { display: flex; flex-direction: column; gap: 16px; }
.ap-opts { display: flex; flex-direction: column; gap: 8px; }
.ap-opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px; border-radius: 18px; border: 2px solid var(--border); background: #fff; font-size: 15px; }
.ap-opt .lt { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); color: var(--navy-soft); font-size: 13px; font-weight: 600; display: grid; place-items: center; flex: none; }
.ap-opt .tx { flex: 1; }
.ap-opt .tg { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: #fff; }
.ap-opt--ok { border-color: var(--correct); background: var(--correct-soft); }
.ap-opt--ok .lt { background: var(--correct); color: #fff; }
.ap-opt--ok .tg { color: var(--correct); }
.ap-opt--no { border-color: var(--wrong); background: var(--wrong-soft); }
.ap-opt--no .lt { background: var(--wrong); color: #fff; }
.ap-opt--no .tg { color: var(--wrong); }
.ap-opt .lt svg.s { width: 18px; height: 18px; stroke-width: 2.6; }

/* showcase section */
.shots { display: flex; justify-content: center; gap: 28px; }
.shots figure { margin: 0; text-align: center; flex: none; }
.shots .shot { --s: .8; }
.shots figcaption { margin-top: 18px; max-width: 290px; }
.shots figcaption b { display: block; font-size: 18px; font-weight: 800; }
.shots figcaption span { display: block; font-size: 14.5px; color: var(--navy-soft); margin-top: 2px; }
.shots figure:nth-child(2) { margin-top: 28px; }
.shots-note { text-align: center; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 22px; }
@media (max-width: 1000px) {
  .shots { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 16px 12px; margin-inline: -16px; scrollbar-width: none; }
  .shots figure { scroll-snap-align: center; }
  .shots figure:nth-child(2) { margin-top: 0; }
  .shots::before, .shots::after { content: ""; flex: 0 0 1px; }
}
@media (max-width: 680px) {
  .hero__art .shot { --s: .7; }
}

/* hero: keep mascot + bubble beside the phone, not over the UI */
.piko-float { width: 160px; right: -28px; bottom: 0; }
.bubble { left: auto; right: calc(50% + 160px); top: 300px; border-radius: 16px 16px 4px 16px; white-space: nowrap; }
@media (max-width: 940px) { .piko-float { right: calc(50% - 250px); } }
@media (max-width: 680px) { .bubble { display: none; } .piko-float { width: 120px; right: calc(50% - 190px); } }

/* restored: shared landing card (was removed with the old phone mock) */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow); }
.app { text-align: left; }

/* ---------- iPhone frame, shorter screens ---------- */
.phone { padding: 9px; background: #17181c; border-radius: 50px; box-shadow: 0 0 0 1.5px #3a3d45 inset, 0 0 0 2px #0b0c0e, var(--shadow-lg); }
.phone::before { display: none; }
.shot { height: calc(660px * var(--s)); border-radius: 41px; }
.app { height: 660px; }
.shot::before { content: ""; position: absolute; z-index: 6; top: 9px; left: 50%; width: 76px; height: 22px; margin-left: -38px; background: #000; border-radius: 99px; }
.shot::after { content: ""; position: absolute; z-index: 6; bottom: 7px; left: 50%; width: 92px; height: 4px; margin-left: -46px; background: var(--navy); border-radius: 9px; }
.sb { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 6px 24px 0 28px; font-size: 12.5px; font-weight: 800; color: var(--navy); }
.sb-r { display: flex; align-items: center; gap: 5px; }
.ap-body { padding-top: 54px; }
.ap-hdr { padding-top: 44px; }
.ap-body--hdr { padding-top: 8px !important; }
.ap-foot { padding-bottom: 26px; }
.ap-tabs { height: 80px; padding-bottom: 14px; }
.bubble { top: 70px; }

/* tighten question screen so the explanation clears the footer button */
.ap-body--hdr { gap: 10px; }
.ap-body--hdr .ap-card[style*="wrong-soft"] { padding: 12px 14px; }
.ap-body--hdr .ap-card[style*="wrong-soft"] > div[style*="margin-top"] { margin-top: 7px !important; }
.ap-hdr { padding-top: 42px; }
.ap-foot { padding: 10px 16px 24px; }

/* ---------- hover: colour only, no movement ---------- */
a.store:hover { transform: none; }
.btn:active { transform: none; }

/* ---------- hero mascot + bubble: livelier motion ---------- */
.piko-float { width: 150px; right: calc(50% - 279px); bottom: 0; }
.bubble { top: 70px; right: calc(50% + 128px); overflow: hidden; transform-origin: 100% 100%; animation: bubblePop 7s var(--ease) infinite; }
.bubble::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(17, 181, 164, .18) 50%, transparent 65%); transform: translateX(-120%); animation: shimmer 7s ease-in-out infinite; }
.bubble .flex { display: inline-block; transform-origin: 20% 80%; animation: flex 7s ease-in-out infinite; }
@keyframes bubblePop {
  0% { opacity: 0; transform: scale(.2) rotate(-8deg); }
  8% { opacity: 1; transform: scale(1.14) rotate(3deg); }
  13% { transform: scale(.96) rotate(-2deg); }
  18%, 80% { opacity: 1; transform: scale(1) rotate(0) translateY(0); }
  45% { transform: scale(1) translateY(-4px); }
  88% { opacity: 1; transform: scale(1.04) rotate(2deg); }
  96%, 100% { opacity: 0; transform: scale(.3) rotate(-6deg); }
}
@keyframes shimmer { 0%, 20% { transform: translateX(-120%); } 38%, 100% { transform: translateX(120%); } }
@keyframes flex { 0%, 16%, 100% { transform: none; } 22% { transform: rotate(-24deg) scale(1.3); } 28% { transform: rotate(14deg) scale(1.15); } 34% { transform: rotate(-12deg) scale(1.25); } 40% { transform: none; } }

.twinkle { position: absolute; z-index: 3; width: 16px; height: 16px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: twinkle 3.2s ease-in-out infinite; }
.t1 { right: calc(50% - 300px); bottom: 150px; }
.t2 { right: calc(50% - 330px); bottom: 100px; width: 11px; height: 11px; animation-delay: 1.1s; background: var(--primary); }
.t3 { right: calc(50% - 270px); bottom: 190px; width: 12px; height: 12px; animation-delay: 2s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(.4) rotate(90deg); } }

/* two-column range where there is not enough room right of the phone: nudge the phone left */
@media (min-width: 941px) and (max-width: 1180px) {
  .hero__art .mock { transform: translateX(-60px); }
  .piko-float { width: 110px; right: 0; }
  .bubble { right: calc(50% + 100px); }
  .t1 { right: 12px; } .t2 { right: 0; } .t3 { right: 40px; }
}
@media (max-width: 940px) { .piko-float { right: calc(50% - 279px); } }
@media (max-width: 680px) {
  .hero__art .mock { transform: translateX(-34px); }
  .piko-float { width: 92px; right: 0; }
  .bubble { display: none; }
  .t1 { right: 6px; bottom: 120px; } .t2 { right: 0; bottom: 90px; } .t3 { right: 40px; bottom: 150px; }
}

/* mid widths: bubble sits above the (shifted) phone instead of beside it */
@media (min-width: 941px) and (max-width: 1180px) {
  .hero__art { min-height: 600px; }
  .bubble { top: 0; right: auto; left: calc(50% - 205px); }
}

/* ---------- Footer buttons, social, modals ---------- */
.footer__links button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.footer__links button:hover { color: var(--primary-dark); }
.social { display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); color: var(--navy-soft); transition: color .2s, border-color .2s; }
.social a:hover { color: var(--primary-dark); border-color: var(--primary); }
.social svg { width: 20px; height: 20px; }

.modal { border: 0; padding: 0; background: transparent; width: min(100% - 32px, 560px); max-height: calc(100dvh - 48px); color: var(--navy); }
.modal::backdrop { background: rgba(24, 51, 75, .5); backdrop-filter: blur(3px); }
.modal__box { position: relative; background: var(--card); border-radius: 22px; padding: 28px 24px 24px; box-shadow: var(--shadow-lg); max-height: calc(100dvh - 48px); overflow-y: auto; }
.modal__box h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; padding-right: 36px; }
.modal__box h3 { font-size: 16px; font-weight: 800; margin: 18px 0 4px; }
.modal__box p, .modal__list { font-size: 15px; color: var(--navy-soft); }
.modal__box a { color: var(--primary-dark); font-weight: 700; }
.modal__date { font-size: 13px !important; color: var(--muted) !important; font-weight: 700; }
.modal__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.modal__list b { color: var(--navy); }
.modal__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg); color: var(--navy-soft); font-size: 22px; line-height: 1; cursor: pointer; }
.modal__x:hover { background: var(--primary-soft); color: var(--primary-dark); }

/* ---------- Scrollbars ---------- */
html, .modal__box { scrollbar-color: #11b5a4 transparent; scrollbar-width: thin; }
html { scrollbar-width: auto; }
::-webkit-scrollbar { width: 12px; height: 12px; }
.modal__box::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #11b5a4; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

/* CMS brand variant */
.hero--compact .hero__in { padding-block: 32px; }
.hero--compact h1 { font-size: clamp(28px, 4.5vw, 40px); }
section[hidden] { display: none !important; }

/* ---------- screen mockups (pre-rendered device images) ---------- */
.mock { display: block; width: 380px; max-width: 100%; height: auto; position: relative; z-index: 1; }
.shots .mock { width: 360px; }
.shots figcaption { margin-top: -6px; margin-inline: auto; }
@media (max-width: 680px) { .hero__art .mock { width: 300px; } .shots .mock { width: 300px; } }
.hero__art .mock { width: 300px; }
@media (max-width: 680px) { .hero__art .mock { width: 250px; } }