:root {
  --midnight: #0d0820;
  --ink: #151027;
  --deep: #24104d;
  --purple: #5516b8;
  --violet: #8b3dff;
  --gold: #f2c14e;
  --gold-hi: #ffd76a;
  --blue: #2478ff;
  --green: #25c968;
  --ivory: #faf4e7;
  --lavender: #d8d1ed;
  --muted: #6f6684;
  --white: #ffffff;
  --border: rgba(77, 55, 119, .15);
  --shadow: 0 24px 70px rgba(23, 10, 57, .18);
  --radius: 28px;
  --container: 1360px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Inter, "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 9999; background: #fff; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { left: 8px; }

.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.section { padding: 112px 0; position: relative; }
.section-dark { background: var(--midnight); color: var(--white); }
.section-light { background: #fff; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(13, 8, 32, .86);
  backdrop-filter: blur(20px);
  border-color: rgba(255,255,255,.08);
}
.nav-shell { width: min(calc(100% - 40px), 1440px); margin: 0 auto; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; min-width: 218px; }
.brand img { width: 52px; height: 52px; border-radius: 15px; box-shadow: 0 0 28px rgba(139,61,255,.32); }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: 1.05rem; letter-spacing: .12em; }
.brand-copy small { font-size: .62rem; letter-spacing: .18em; color: #d8d1ed; margin-top: 5px; }
.desktop-nav { display: flex; align-items: center; gap: 30px; color: #eee9ff; font-size: .94rem; }
.desktop-nav a { position: relative; padding: 28px 0; }
.desktop-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 18px; height: 2px; background: var(--gold); transition: .25s ease; }
.desktop-nav a:hover::after, .desktop-nav a.active::after { left: 0; right: 0; }
.nav-actions { display: flex; align-items: center; gap: 10px; }

.btn { border: 0; border-radius: 999px; padding: 13px 20px; font-weight: 800; letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid rgba(36,120,255,.45); outline-offset: 3px; }
.btn-large { padding: 16px 27px; }
.btn-primary { background: linear-gradient(135deg, var(--violet), var(--purple)); color: #fff; box-shadow: 0 12px 32px rgba(85,22,184,.34); }
.btn-primary:hover { box-shadow: 0 16px 42px rgba(85,22,184,.46); }
.btn-gold { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); color: #2b1a00; box-shadow: 0 10px 30px rgba(242,193,78,.24); }
.btn-outline { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.btn-outline-dark { background: #fff; color: var(--deep); border: 1px solid rgba(36,16,77,.18); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.14); }

.menu-toggle { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: none; place-items: center; padding: 10px; }
.menu-toggle span { width: 22px; height: 2px; background: #fff; display: block; margin: 3px auto; }
.mobile-menu { background: rgba(13,8,32,.98); border-top: 1px solid rgba(255,255,255,.08); padding: 18px 24px 26px; color: #fff; }
.mobile-menu a { display: block; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.mobile-menu .btn { width: 100%; margin-top: 18px; }

.hero { min-height: 920px; display: flex; align-items: center; position: relative; overflow: hidden; padding: 130px 0 70px; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,8,32,.96) 0%, rgba(13,8,32,.82) 42%, rgba(13,8,32,.38) 100%), url('../images/hero-ambient.jpg') center/cover; z-index: -3; transform: scale(1.08); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 180px; background: linear-gradient(transparent, #120b29); z-index: -1; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(3px); opacity: .45; z-index: -2; }
.orb-a { width: 380px; height: 380px; background: radial-gradient(circle, rgba(139,61,255,.68), transparent 70%); top: 15%; right: 19%; animation: drift 8s ease-in-out infinite; }
.orb-b { width: 310px; height: 310px; background: radial-gradient(circle, rgba(242,193,78,.45), transparent 70%); bottom: 12%; right: 2%; animation: drift 10s ease-in-out infinite reverse; }
@keyframes drift { 50% { transform: translate3d(0,-14px,0) scale(1.04); } }
.hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr); gap: 58px; align-items: center; }
.hero-copy { max-width: 720px; position: relative; z-index: 3; }
.eyebrow { color: var(--gold-hi); font-size: .76rem; letter-spacing: .22em; font-weight: 900; margin-bottom: 18px; }
.eyebrow.dark { color: #6b35d0; }
.hero h1 { font-size: clamp(3.2rem, 5.3vw, 6.3rem); line-height: .98; letter-spacing: -.055em; margin: 0 0 28px; max-width: 820px; }
.hero h1 span, .speech-copy h2 span, .final-copy h2 span { color: var(--gold-hi); }
.hero-lead { font-size: 1.19rem; line-height: 1.75; color: #e1daf1; max-width: 690px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 18px; }
.text-link { color: #d8d1ed; background: none; border: 0; padding: 0; font-size: .95rem; }
.text-link strong { color: #fff; }
.store-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.store-badge { min-width: 155px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); padding: 10px 15px; border-radius: 14px; color: #fff; }
.store-badge.muted { opacity: .68; }
.store-badge span:not(.store-icon) { display: grid; line-height: 1.05; }
.store-badge small { color: #bdb5d2; font-size: .68rem; }
.store-badge strong { font-size: .86rem; margin-top: 4px; }
.store-icon { font-size: 1.45rem; }
.hero-art { position: relative; min-height: 690px; display: grid; place-items: center; }
.hero-phone-card { position: absolute; right: 2%; top: 4%; width: 61%; height: 91%; border-radius: 56px; overflow: hidden; transform: rotate(3deg); box-shadow: 0 45px 100px rgba(0,0,0,.43), 0 0 0 1px rgba(255,255,255,.1); animation: floatPhone 6.5s ease-in-out infinite; }
.hero-phone { width: 100%; height: 100%; object-fit: cover; object-position: 57% 50%; }
@keyframes floatPhone { 50% { transform: rotate(2.2deg) translateY(-8px); } }
.hero-lion { position: absolute; width: 62%; left: -3%; bottom: -2%; z-index: 2; filter: drop-shadow(0 30px 24px rgba(0,0,0,.28)); }
.floating-glyph { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 20px; position: absolute; z-index: 3; font-size: 2.2rem; font-weight: 900; box-shadow: 0 18px 40px rgba(0,0,0,.25); animation: glyphFloat 5s ease-in-out infinite; }
.glyph-purple { background: linear-gradient(135deg,#8b3dff,#4710b2); color:#ffe176; right: 5%; top: 5%; }
.glyph-blue { background: linear-gradient(135deg,#25a8ff,#1953df); color:#dff6ff; right: 0; bottom: 10%; animation-delay: .7s; }
.glyph-green { background: linear-gradient(135deg,#28e27a,#0a9c4d); color:#e7ffe9; left: 33%; top: 5%; animation-delay: 1.2s; }
.glyph-gold { background: linear-gradient(135deg,#ffd45c,#d89400); color:#fff7c4; left: 40%; bottom: 4%; animation-delay: 1.7s; }
@keyframes glyphFloat { 50% { transform: translateY(-8px) rotate(2deg); } }

.value-strip { background: #120b29; color: #fff; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); padding: 25px 0; }
.value-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.value-grid article { display: flex; gap: 13px; align-items: center; padding: 10px 22px; border-right: 1px solid rgba(255,255,255,.08); }
.value-grid article:last-child { border-right: 0; }
.value-grid strong, .value-grid small { display: block; }
.value-grid small { color: #a9a0bf; margin-top: 2px; }
.value-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; font-weight: 900; }
.value-icon.purple { background:#5a1fc4; } .value-icon.blue { background:#1e70db; } .value-icon.green { background:#18a95c; } .value-icon.gold { background:#c99315; }

.section-heading { max-width: 790px; margin-bottom: 62px; }
.section-heading.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-heading h2, .feature-copy h3, .speech-copy h2, .mascot-copy h2, .resources-copy h2, .faq-intro h2, .final-copy h2 { font-size: clamp(2.5rem,4.2vw,4.6rem); line-height: 1.04; letter-spacing: -.045em; margin: 0 0 18px; }
.section-heading p { font-size: 1.08rem; color: var(--muted); margin: 0; }
.section-dark .section-heading p { color: #bdb5d2; }

.language-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.language-card { padding: 30px; min-height: 385px; border-radius: 28px; color: #fff; position: relative; overflow: hidden; isolation: isolate; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.language-card::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 15% 10%, rgba(255,255,255,.2), transparent 34%); z-index:-1; }
.language-card:hover { transform: translateY(-8px); box-shadow: 0 30px 80px rgba(22,10,52,.2); }
.purple-card { background: linear-gradient(150deg,#7a2ce5,#391078); }
.blue-card { background: linear-gradient(150deg,#27a9ff,#1651ce); }
.green-card { background: linear-gradient(150deg,#23cf76,#08783d); }
.gold-card { background: linear-gradient(150deg,#f8c648,#bd7f05); }
.language-glyph { width: 76px; height: 76px; border-radius: 20px; background: rgba(255,255,255,.14); display:grid; place-items:center; font-size:2.55rem; margin-bottom: 26px; }
.language-kicker { font-size:.67rem; letter-spacing:.17em; font-weight:900; opacity:.8; }
.language-card h3 { font-size: 1.65rem; margin: 7px 0 14px; }
.language-card p { color: rgba(255,255,255,.82); margin-bottom: 22px; }
.card-link { position:absolute; left:30px; right:30px; bottom:26px; border:0; background:transparent; color:#fff; text-align:left; font-weight:800; padding:0; }
.card-link span { float:right; transition: transform .2s ease; }
.card-link:hover span { transform: translateX(4px); }
.language-detail { max-width: 760px; margin: 30px auto 0; border: 1px solid var(--border); background: #fff; border-radius: 18px; padding: 20px 24px; box-shadow: 0 16px 44px rgba(32,15,75,.08); display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:start; }
.language-detail .detail-label { grid-row: span 2; color: var(--purple); font-size:.65rem; font-weight:900; letter-spacing:.14em; writing-mode: vertical-rl; transform: rotate(180deg); }
.language-detail strong { font-size: 1.2rem; }
.language-detail p { margin:4px 0 0; color:var(--muted); }


.global-proof { display:inline-flex; align-items:center; gap:11px; margin-top:10px; padding:10px 14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.055); border-radius:999px; color:#fff; transition:background .2s ease, transform .2s ease, border-color .2s ease; }
.global-proof > span { font-size:1.25rem; }
.global-proof strong { font-size:.82rem; }
.global-proof small { color:#bdb5d2; font-size:.72rem; }
.global-proof:hover { transform:translateY(-2px); background:rgba(255,255,255,.085); border-color:rgba(242,193,78,.35); }

.app-languages-section { background:linear-gradient(145deg,#140b2d 0%,#24104d 56%,#100921 100%); color:#fff; overflow:hidden; isolation:isolate; }
.app-languages-section .section-heading h2 span { color:var(--gold-hi); }
.app-languages-section .section-heading p { color:#c7bfd9; }
.language-glow { position:absolute; border-radius:50%; filter:blur(10px); pointer-events:none; z-index:-1; }
.language-glow-a { width:520px; height:520px; left:-240px; top:-170px; background:radial-gradient(circle,rgba(139,61,255,.28),transparent 68%); }
.language-glow-b { width:440px; height:440px; right:-160px; bottom:-160px; background:radial-gradient(circle,rgba(242,193,78,.15),transparent 68%); }
.global-language-stat { max-width:820px; margin:-18px auto 42px; display:flex; align-items:center; justify-content:center; gap:25px; padding:20px 26px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.055); border-radius:22px; backdrop-filter:blur(12px); }
.global-language-stat div { display:flex; align-items:baseline; gap:9px; }
.global-language-stat strong { font-size:2rem; color:var(--gold-hi); line-height:1; }
.global-language-stat span { color:#d8d1ed; font-size:.82rem; font-weight:750; }
.global-language-stat b { color:#7c699e; font-size:1.3rem; }
.source-language-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }
.source-language-card { min-width:0; min-height:88px; border-radius:18px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.055); color:#fff; padding:13px 15px; display:flex; align-items:center; gap:12px; text-align:left; transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.source-language-card .flag { font-size:2rem; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.22)); }
.source-language-card > span:last-child { min-width:0; display:grid; }
.source-language-card strong { font-size:.9rem; white-space:normal; }
.source-language-card small { color:#aaa0c2; font-size:.73rem; margin-top:2px; }
.source-language-card:hover { transform:translateY(-3px); background:rgba(255,255,255,.085); border-color:rgba(255,215,106,.25); }
.source-language-card.selected { background:linear-gradient(135deg,rgba(139,61,255,.24),rgba(242,193,78,.10)); border-color:rgba(255,215,106,.62); box-shadow:0 16px 38px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.04); }
.source-language-message { max-width:980px; margin:30px auto 0; display:flex; align-items:center; gap:15px; padding:18px 20px; border-radius:18px; background:#fff; color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.22); }
.source-language-message .message-icon { width:46px; height:46px; display:grid; place-items:center; flex:0 0 auto; border-radius:14px; background:linear-gradient(135deg,var(--green),#10a856); color:#fff; font-weight:950; }
.source-language-message div:last-child { display:grid; gap:2px; }
.source-language-message span { color:#6730c5; font-size:.65rem; letter-spacing:.13em; font-weight:900; }
.source-language-message strong { font-size:.96rem; line-height:1.45; }

.feature-row { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: 80px; align-items: center; margin: 90px 0 150px; }
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse .feature-visual { order: 2; }
.feature-row.reverse .feature-copy { order: 1; }
.feature-copy { max-width: 560px; }
.feature-copy .number { color: var(--gold-hi); font-weight:900; letter-spacing:.15em; }
.feature-copy h3 { font-size: clamp(2.3rem,3.3vw,3.7rem); margin-top: 9px; }
.feature-copy p { color: #bdb5d2; font-size: 1.07rem; }
.check-list { list-style:none; padding:0; margin:25px 0 0; display:grid; gap:12px; }
.check-list li { position:relative; padding-left:30px; color:#eee9ff; }
.check-list li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:900; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.chips span { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:#eee9ff; border-radius:999px; padding:8px 13px; font-size:.82rem; }
.feature-visual { position:relative; min-height: 600px; display:grid; place-items:center; }
.screenshot-frame img { width: 70%; height: 640px; object-fit: cover; object-position:center; border-radius: 44px; box-shadow: 0 35px 80px rgba(0,0,0,.43); border:1px solid rgba(255,255,255,.12); }
.screenshot-frame.wide img { object-position: 58% 50%; }
.visual-badge { position:absolute; right:7%; bottom:8%; border-radius:999px; padding:10px 15px; font-weight:900; font-size:.78rem; color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.visual-badge.purple { background:#6d20da; } .visual-badge.blue { background:#1d74e9; }
.poster-frame img { width: 60%; max-height: 680px; object-fit:cover; border-radius:32px; box-shadow:0 35px 90px rgba(0,0,0,.38); }
.showcase-frame { min-height: 400px; }
.showcase-frame img { width:100%; border-radius:24px; box-shadow:0 28px 72px rgba(0,0,0,.36); }

.journey-section { background: linear-gradient(180deg,#fff 0%,#f9f5ff 100%); }
.journey-track { display:grid; grid-template-columns: repeat(13, auto); align-items:center; justify-content:center; gap:10px; }
.journey-step { text-align:center; min-width:110px; }
.journey-step span { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; margin:0 auto 10px; background:linear-gradient(135deg,var(--violet),var(--purple)); color:#fff; font-weight:900; box-shadow:0 8px 24px rgba(85,22,184,.2); }
.journey-step strong, .journey-step small { display:block; }
.journey-step small { color:var(--muted); margin-top:2px; }
.journey-line { width:45px; height:2px; background:linear-gradient(90deg,#b79de9,#f2c14e); }

.speech-section { overflow:hidden; }
.speech-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:80px; align-items:center; }
.speech-art { min-height:680px; position:relative; display:grid; place-items:center; }
.speech-phone-wrap { width:64%; height:650px; border-radius:45px; overflow:hidden; box-shadow:0 38px 90px rgba(0,0,0,.45); transform:rotate(-2deg); }
.speech-phone-wrap img { width:100%; height:100%; object-fit:cover; object-position:center; }
.speech-lion { width:58%; position:absolute; left:-1%; bottom:-2%; filter:drop-shadow(0 26px 28px rgba(0,0,0,.3)); }
.speech-copy h2 { margin-top:0; }
.speech-copy > p { color:#bdb5d2; font-size:1.08rem; max-width:620px; }
.speech-cards { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:30px; }
.speech-cards article { display:flex; gap:13px; padding:18px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.05); border-radius:18px; transition:background .2s ease, transform .2s ease; }
.speech-cards article:hover { background:rgba(255,255,255,.08); transform:translateY(-3px); }
.speech-cards article > span { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#5c24ba; color:#fff; flex:0 0 auto; }
.speech-cards strong, .speech-cards small { display:block; }
.speech-cards small { color:#aea5c2; margin-top:2px; }
.wave { position:absolute; border:1px solid rgba(139,61,255,.18); border-radius:50%; width:620px; height:620px; left:-180px; top:90px; }
.wave-two { width:780px; height:780px; left:-260px; top:10px; opacity:.5; }

.feature-depth { background:#fbfafc; }
.mini-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.mini-grid article { background:#fff; border:1px solid var(--border); border-radius:18px; padding:20px; min-height:160px; transition:transform .2s ease, box-shadow .2s ease; }
.mini-grid article:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(36,16,77,.08); }
.mini-grid article > span { min-width:46px; height:46px; padding:0 10px; display:inline-grid; place-items:center; border-radius:13px; background:#f0e7ff; color:#5621b2; font-weight:900; margin-bottom:14px; }
.mini-grid strong, .mini-grid small { display:block; }
.mini-grid small { color:var(--muted); margin-top:4px; }

.mascot-section { background:var(--ivory); overflow:hidden; padding-bottom:70px; }
.mascot-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; }
.mascot-art { position:relative; min-height:600px; display:grid; place-items:center; }
.mascot-art::before { content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(242,193,78,.45),transparent 67%); }
.mascot-art img { width:88%; position:relative; filter:drop-shadow(0 25px 25px rgba(91,55,4,.18)); }
.mascot-copy p { color:#5e556e; font-size:1.08rem; max-width:670px; }
.mascot-points { display:grid; gap:14px; margin-top:28px; }
.mascot-points article { display:flex; gap:15px; align-items:center; padding:16px 18px; background:rgba(255,255,255,.6); border:1px solid rgba(93,68,27,.1); border-radius:18px; }
.mascot-points article > span { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--deep); color:var(--gold-hi); font-weight:900; }
.mascot-points strong, .mascot-points small { display:block; }
.mascot-points small { color:#70667b; }
.mascot-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px; }
.mascot-strip div { background:rgba(255,255,255,.7); border:1px solid rgba(93,68,27,.09); border-radius:22px; overflow:hidden; position:relative; min-height:235px; display:grid; place-items:end center; }
.mascot-strip img { width:90%; max-height:205px; object-fit:contain; object-position:bottom; }
.mascot-strip span { width:100%; text-align:center; background:#fff8e7; padding:9px; font-size:.7rem; letter-spacing:.16em; font-weight:900; color:#5f3e05; }

.resources-section { background:linear-gradient(135deg,#0d0820,#1c0d3b 60%,#25105a); }
.resources-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:68px; align-items:center; }
.coming-badge { display:inline-block; background:rgba(242,193,78,.14); color:var(--gold-hi); border:1px solid rgba(242,193,78,.35); border-radius:999px; padding:8px 12px; font-size:.7rem; font-weight:900; letter-spacing:.13em; margin-bottom:22px; }
.resources-copy p { color:#bdb5d2; font-size:1.08rem; }
.resource-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.resource-tags span { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:#eee9ff; border-radius:999px; padding:8px 13px; font-size:.82rem; }
.resources-art img { border-radius:26px; box-shadow:0 32px 80px rgba(0,0,0,.35); }

.progress-section { background:#fff; }
.results-stage { min-height:680px; position:relative; overflow:hidden; border-radius:34px; background:linear-gradient(135deg,#130a2c 0%,#281057 48%,#0f0823 100%); box-shadow:var(--shadow); border:1px solid rgba(77,55,119,.18); isolation:isolate; }
.results-stage::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 22% 35%,rgba(139,61,255,.28),transparent 28%),radial-gradient(circle at 82% 56%,rgba(36,120,255,.18),transparent 30%),linear-gradient(115deg,transparent 0 46%,rgba(255,255,255,.025) 46% 47%,transparent 47% 100%); z-index:-1; }
.results-ambient { position:absolute; width:480px; height:480px; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(242,193,78,.16),rgba(139,61,255,.08) 45%,transparent 70%); filter:blur(4px); }
.result-device { position:absolute; border-radius:35px; padding:38px 12px 12px; background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.16); box-shadow:0 28px 70px rgba(0,0,0,.4); transition:transform .28s ease, box-shadow .28s ease; }
.result-device:hover { box-shadow:0 34px 86px rgba(0,0,0,.5); }
.result-device img { width:100%; height:100%; object-fit:cover; border-radius:25px; }
.result-device .device-label { position:absolute; top:12px; left:15px; color:#d8d1ed; font-size:.58rem; letter-spacing:.12em; font-weight:900; }
.result-device-home { width:30%; height:590px; left:8%; bottom:-26px; transform:rotate(-4deg); }
.result-device-home:hover { transform:rotate(-2.5deg) translateY(-6px); }
.result-device-home img { object-position:57% 50%; }
.result-device-test { width:23%; height:525px; left:40%; top:72px; transform:rotate(1.5deg); }
.result-device-test:hover { transform:rotate(.5deg) translateY(-6px); }
.result-device-results { width:23%; height:525px; right:9%; top:82px; transform:rotate(4deg); }
.result-device-results:hover { transform:rotate(2.5deg) translateY(-6px); }
.score-orbit { position:absolute; display:grid; place-items:center; text-align:center; width:112px; height:112px; border-radius:50%; background:rgba(255,255,255,.96); box-shadow:0 18px 50px rgba(0,0,0,.25); border:4px solid rgba(255,215,106,.35); z-index:5; }
.score-orbit strong,.score-orbit span { display:block; }
.score-orbit strong { color:#3d187f; font-size:1.05rem; }
.score-orbit span { color:#776c86; font-size:.65rem; }
.score-a { left:33%; top:56px; }
.score-b { right:4%; bottom:54px; border-color:rgba(37,201,104,.35); }
.score-c { left:62%; bottom:32px; width:128px; height:128px; border-color:rgba(36,120,255,.35); }
.progress-benefits { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px; }
.progress-benefits div { padding:20px; border:1px solid var(--border); border-radius:16px; background:#fbf9ff; }
.progress-benefits strong, .progress-benefits small { display:block; }
.progress-benefits small { color:var(--muted); margin-top:4px; }

.reviews-section { background:#140b2c; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.review-card { border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.05); border-radius:22px; padding:28px; min-height:240px; }
.stars { color:var(--gold-hi); letter-spacing:.08em; }
.review-card blockquote { font-size:1.18rem; line-height:1.6; margin:20px 0; color:#f2edff; }
.review-card > span { color:#9f96b6; font-size:.84rem; }

.premium-section { background:linear-gradient(180deg,#fbf9ff,#fff); }
.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }
.price-card { background:#fff; border:1px solid var(--border); border-radius:24px; padding:28px; min-height:360px; display:flex; flex-direction:column; box-shadow:0 14px 40px rgba(36,16,77,.06); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.price-card:hover, .price-card.is-targeted { transform:translateY(-7px); box-shadow:0 24px 60px rgba(36,16,77,.13); border-color:rgba(139,61,255,.35); }
.price-card.lifetime { border-color:rgba(242,193,78,.55); background:linear-gradient(180deg,#fffdf6,#fff); }
.plan-label { color:#6730c5; font-size:.66rem; font-weight:900; letter-spacing:.15em; }
.price-card.lifetime .plan-label { color:#9a6a00; }
.price-card h3 { font-size:1.8rem; margin:9px 0 18px; }
.price-placeholder { border-radius:14px; padding:14px; background:#f6f2fb; color:#6e6580; font-weight:800; margin-bottom:17px; }
.price-card p { color:var(--muted); flex:1; }
.price-card .btn { width:100%; margin-top:20px; }
.activation-note { margin:28px auto 0; max-width:950px; border:1px solid rgba(85,22,184,.13); background:#f7f1ff; border-radius:20px; padding:18px 22px; display:flex; align-items:center; gap:16px; }
.activation-note img { width:56px; height:56px; border-radius:16px; }
.activation-note p { margin:3px 0 0; color:#6a6079; }

.purchase-flow { background:#fbfafc; }
.purchase-steps { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:18px; align-items:center; }
.purchase-steps article { background:#fff; border:1px solid var(--border); border-radius:22px; padding:25px; display:flex; gap:16px; min-height:150px; }
.purchase-steps article > span { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--deep); color:var(--gold-hi); font-weight:900; flex:0 0 auto; }
.purchase-steps h3 { margin:1px 0 5px; }
.purchase-steps p { margin:0; color:var(--muted); }
.purchase-arrow { font-size:2rem; color:#8e76bc; }
.manage-note { text-align:center; color:var(--muted); margin-top:24px; }

.faq-section { background:var(--ivory); }
.faq-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; align-items:start; }
.faq-intro { position:sticky; top:120px; }
.faq-intro p { color:#665b73; }
.faq-intro img { max-width:380px; margin:25px auto 0; }
.accordion details { border-bottom:1px solid rgba(36,16,77,.14); }
.accordion summary { list-style:none; cursor:pointer; padding:22px 42px 22px 0; font-weight:850; font-size:1.04rem; position:relative; }
.accordion summary::-webkit-details-marker { display:none; }
.accordion summary::after { content:"+"; position:absolute; right:4px; top:19px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#efe4ff; color:#5e24b4; }
.accordion details[open] summary::after { content:"−"; }
.accordion details p { margin:-5px 42px 22px 0; color:#675d76; }

.final-cta { padding:110px 0; position:relative; overflow:hidden; isolation:isolate; }
.final-bg { position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,8,32,.96),rgba(13,8,32,.72) 56%,rgba(13,8,32,.4)),url('../images/hero-ambient.jpg') center/cover; z-index:-1; }
.final-grid { display:grid; grid-template-columns:1fr .7fr; align-items:center; gap:30px; }
.final-copy p { color:#d0c8e1; font-size:1.08rem; }
.final-art { min-height:420px; display:grid; place-items:end center; }
.final-art img { width:92%; filter:drop-shadow(0 25px 25px rgba(0,0,0,.3)); }

.site-footer { background:#090514; color:#fff; padding:54px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.4fr .7fr .7fr; gap:40px; align-items:start; }
.footer-brand { display:flex; gap:14px; align-items:center; }
.footer-brand img { width:62px; height:62px; border-radius:18px; }
.footer-brand div { display:grid; }
.footer-brand strong { letter-spacing:.12em; }
.footer-brand small { color:#9e95b4; margin-top:4px; }
.footer-links { display:grid; gap:10px; color:#c9c2d8; font-size:.9rem; }
.footer-links a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:38px; padding-top:18px; display:flex; justify-content:space-between; color:#7f758f; font-size:.78rem; }

.modal-backdrop { position:fixed; inset:0; background:rgba(5,2,12,.78); backdrop-filter:blur(12px); z-index:1000; padding:28px; overflow:auto; }
.modal-backdrop[hidden] { display:none; }
.premium-modal { width:min(1450px,94vw); margin:2vh auto; background:#fff; border-radius:30px; padding:38px; position:relative; box-shadow:0 40px 120px rgba(0,0,0,.42); }
.modal-close { position:absolute; right:18px; top:16px; width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background:#f7f4fb; font-size:1.75rem; line-height:1; color:#3d3053; }
.modal-heading { max-width:770px; margin:0 auto 28px; text-align:center; }
.modal-heading h2 { font-size:clamp(2.1rem,4vw,4rem); margin:0 0 8px; line-height:1; }
.modal-heading p { color:var(--muted); }
.modal-pricing { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.modal-plan { text-align:left; border:1px solid var(--border); background:#fff; border-radius:20px; padding:22px; min-height:150px; transition:.2s ease; }
.modal-plan:hover, .modal-plan.selected { border-color:#8b3dff; box-shadow:0 16px 40px rgba(85,22,184,.12); transform:translateY(-3px); }
.modal-plan.lifetime { border-color:rgba(242,193,78,.55); }
.modal-plan span, .modal-plan strong, .modal-plan small { display:block; }
.modal-plan span { font-size:.65rem; letter-spacing:.12em; color:#6730c5; font-weight:900; }
.modal-plan strong { font-size:1.35rem; margin:6px 0 4px; }
.modal-plan small { color:var(--muted); }
.prototype-checkout { max-width:930px; margin:28px auto 0; border-top:1px solid var(--border); padding-top:24px; }
.prototype-checkout label { font-weight:800; display:block; margin-bottom:8px; }
.checkout-row { display:grid; grid-template-columns:1fr auto; gap:10px; }
.checkout-row input { border:1px solid #cfc5dd; border-radius:999px; padding:15px 18px; min-width:0; font-size:16px; }
.checkout-status { color:var(--muted); font-size:.82rem; margin:9px 0 0; }
.checkout-status.success { color:#0e8b45; font-weight:800; }
.modal-note { max-width:930px; margin:22px auto 0; background:#f8f3ff; border-radius:18px; padding:16px; display:flex; align-items:center; gap:14px; }
.modal-note img { width:48px; height:48px; border-radius:14px; }
.modal-note p { margin:0; color:#61566f; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.08s; } .reveal-delay-2 { transition-delay:.16s; } .reveal-delay-3 { transition-delay:.24s; }

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

@media (max-width: 1180px) {
  .desktop-nav { display:none; }
  .menu-toggle { display:block; }
  .hero-grid { grid-template-columns:1fr 1fr; }
  .hero h1 { font-size:clamp(3rem,5vw,5rem); }
  .language-grid, .pricing-grid { grid-template-columns:1fr 1fr; }
  .source-language-grid { grid-template-columns:repeat(4,1fr); }
  .mini-grid { grid-template-columns:repeat(3,1fr); }
  .journey-track { grid-template-columns:1fr; max-width:620px; margin:auto; }
  .journey-line { width:2px; height:28px; margin:auto; }
  .journey-step { display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto; text-align:left; min-width:0; width:100%; }
  .journey-step span { grid-row:1 / span 2; margin:0 12px 0 0; }
  .modal-pricing { grid-template-columns:1fr 1fr; }
}

@media (max-width: 900px) {
  .section { padding:82px 0; }
  .desktop-only { display:none; }
  .brand { min-width:0; }
  .hero { min-height:auto; padding-top:130px; }
  .hero-grid, .speech-grid, .mascot-grid, .resources-grid, .faq-grid, .final-grid { grid-template-columns:1fr; }
  .hero-copy { text-align:center; margin:auto; }
  .hero-lead { margin-left:auto; margin-right:auto; }
  .hero-actions, .store-row { justify-content:center; }
  .hero-art { min-height:660px; max-width:700px; margin:0 auto; width:100%; }
  .hero-phone-card { width:58%; right:5%; }
  .hero-lion { width:59%; left:0; }
  .value-grid { grid-template-columns:1fr 1fr; }
  .value-grid article:nth-child(2) { border-right:0; }
  .value-grid article:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.08); }
  .feature-row, .feature-row.reverse { grid-template-columns:1fr; gap:32px; margin:70px 0 110px; }
  .feature-row.reverse .feature-visual, .feature-row.reverse .feature-copy { order:initial; }
  .feature-copy { max-width:720px; margin:auto; text-align:center; }
  .check-list { max-width:440px; margin:24px auto 0; text-align:left; }
  .chips { justify-content:center; }
  .feature-visual { min-height:500px; }
  .screenshot-frame img { height:560px; width:min(75%,440px); }
  .speech-art { min-height:610px; max-width:660px; width:100%; margin:auto; }
  .speech-copy { text-align:center; }
  .speech-copy > p { margin-left:auto; margin-right:auto; }
  .speech-cards { text-align:left; }
  .mini-grid { grid-template-columns:1fr 1fr; }
  .mascot-art { min-height:520px; }
  .mascot-art img { width:min(88%,620px); }
  .mascot-copy { text-align:center; }
  .mascot-points { max-width:650px; margin:28px auto 0; text-align:left; }
  .resources-copy { text-align:center; }
  .resource-tags { justify-content:center; }
  .progress-benefits { grid-template-columns:1fr 1fr; }
  .source-language-grid { grid-template-columns:repeat(3,1fr); }
  .global-language-stat { flex-wrap:wrap; }
  .results-stage { min-height:620px; }
  .result-device-home { width:34%; left:3%; }
  .result-device-test { width:28%; left:36%; }
  .result-device-results { width:28%; right:4%; }
  .review-grid { grid-template-columns:1fr; }
  .purchase-steps { grid-template-columns:1fr; }
  .purchase-arrow { transform:rotate(90deg); text-align:center; }
  .faq-intro { position:static; text-align:center; }
  .faq-intro img { max-width:280px; }
  .final-copy { text-align:center; }
  .final-art { min-height:360px; }
  .final-art img { width:min(80%,540px); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
}

@media (max-width: 620px) {
  .container, .nav-shell { width:min(calc(100% - 24px), var(--container)); }
  .nav-shell { min-height:70px; }
  .brand img { width:44px; height:44px; border-radius:13px; }
  .brand-copy small { display:none; }
  .nav-actions .btn-gold { display:none; }
  .hero { padding-top:110px; }
  .hero h1 { font-size:clamp(2.8rem,13vw,4rem); }
  .hero-lead { font-size:1rem; }
  .hero-actions .btn { width:100%; }
  .hero-art { min-height:520px; }
  .hero-phone-card { width:66%; height:86%; right:1%; top:3%; border-radius:38px; }
  .hero-lion { width:67%; left:-5%; bottom:0; }
  .floating-glyph { width:52px; height:52px; border-radius:15px; font-size:1.6rem; }
  .glyph-green { left:25%; } .glyph-gold { left:26%; }
  .value-grid { grid-template-columns:1fr; }
  .value-grid article { border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .value-grid article:last-child { border-bottom:0; }
  .section-heading { margin-bottom:42px; }
  .section-heading h2, .speech-copy h2, .mascot-copy h2, .resources-copy h2, .faq-intro h2, .final-copy h2 { font-size:clamp(2.25rem,11vw,3.4rem); }
  .language-grid, .pricing-grid, .mini-grid, .speech-cards, .mascot-strip, .progress-benefits, .modal-pricing { grid-template-columns:1fr; }
  .source-language-grid { grid-template-columns:1fr 1fr; }
  .source-language-card { min-height:82px; }
  .global-language-stat { display:grid; grid-template-columns:1fr auto 1fr; text-align:center; gap:14px; }
  .global-language-stat div { display:grid; justify-items:center; gap:4px; }
  .global-language-stat .wide { grid-column:1 / -1; }
  .global-language-stat b:nth-of-type(2) { display:none; }
  .source-language-message { align-items:flex-start; }
  .results-stage { min-height:auto; padding:34px 18px 28px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .results-ambient,.score-orbit { display:none; }
  .result-device { position:relative; width:auto; height:auto; inset:auto; transform:none !important; border-radius:25px; padding:34px 8px 8px; }
  .result-device-home { grid-column:1 / -1; max-width:310px; justify-self:center; }
  .result-device-test,.result-device-results { width:100%; }
  .result-device img { height:auto; border-radius:18px; }
  .result-device-home img { max-height:520px; object-fit:cover; }

  .language-card { min-height:350px; }
  .feature-visual { min-height:410px; }
  .screenshot-frame img { height:470px; width:82%; border-radius:32px; }
  .poster-frame img { width:76%; }
  .speech-art { min-height:480px; }
  .speech-phone-wrap { height:490px; width:72%; }
  .speech-lion { width:66%; left:-7%; }
  .mascot-art { min-height:390px; }
  .mascot-strip div { min-height:260px; }
  .mascot-strip img { max-height:225px; }
  .resources-art img, .results-stage { border-radius:18px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
  .footer-bottom { flex-direction:column; gap:8px; }
  .premium-modal { width:96vw; padding:26px 18px; border-radius:24px; margin:1vh auto; }
  .modal-backdrop { padding:10px; }
  .checkout-row { grid-template-columns:1fr; }
  .checkout-row .btn { width:100%; }
}

/* V3 — dedicated purchase-page architecture + mobile refinement */
#languages, #app-languages, #features, #how-it-works, #premium, #faq, #download { scroll-margin-top: 92px; }

.premium-teaser { overflow: hidden; }
.premium-teaser-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:64px; align-items:center; }
.premium-teaser-copy { max-width:820px; }
.premium-teaser-copy h2 { font-size:clamp(2.6rem,4.8vw,5rem); line-height:1.02; letter-spacing:-.05em; margin:0 0 22px; }
.premium-teaser-copy > p { color:#c8bfdc; font-size:1.08rem; max-width:760px; }
.premium-options { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 18px; }
.premium-options span { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.065); color:#fff; border-radius:999px; padding:10px 15px; font-weight:800; }
.premium-route-note { font-size:.88rem !important; color:#9f95b9 !important; }
.premium-teaser-art { min-height:340px; display:grid; place-items:center; position:relative; }
.premium-teaser-art img { width:min(74%,300px); position:relative; z-index:2; border-radius:28%; box-shadow:0 28px 80px rgba(0,0,0,.34); }
.premium-halo { position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(139,61,255,.56),rgba(242,193,78,.16) 40%,transparent 72%); filter:blur(4px); }

@media (max-width:900px) {
  .premium-teaser-grid { grid-template-columns:1fr; text-align:center; gap:24px; }
  .premium-teaser-copy { margin:auto; }
  .premium-teaser-copy > p { margin-left:auto; margin-right:auto; }
  .premium-options { justify-content:center; }
  .premium-teaser-art { min-height:260px; }
  .premium-teaser-art img { width:min(54%,250px); }
}

@media (max-width:620px) {
  .section { padding:70px 0; }
  .nav-shell { gap:10px; }
  .brand { gap:9px; }
  .brand-copy strong { font-size:.95rem; letter-spacing:.09em; }
  .mobile-menu { padding:14px 18px 22px; }
  .mobile-menu a { min-height:44px; display:flex; align-items:center; }
  .hero { padding:98px 0 54px; }
  .hero-copy { max-width:100%; }
  .eyebrow { font-size:.7rem; letter-spacing:.18em; }
  .hero h1 { font-size:clamp(2.65rem,12vw,3.75rem); line-height:1; margin-bottom:20px; }
  .global-proof { width:100%; max-width:360px; margin-left:auto; margin-right:auto; text-align:left; }
  .store-row { width:100%; }
  .store-badge { flex:1 1 150px; min-width:0; }
  .hero-art { min-height:480px; margin-top:8px; }
  .hero-phone-card { width:68%; height:84%; right:0; top:4%; border-radius:34px; }
  .hero-lion { width:68%; left:-8%; bottom:2%; }
  .glyph-purple { right:1%; top:2%; }
  .glyph-blue { right:0; bottom:8%; }
  .glyph-green { left:22%; top:4%; }
  .glyph-gold { left:24%; bottom:3%; }
  .section-heading p { font-size:1rem; }
  .language-card { padding:24px; min-height:330px; }
  .source-language-grid { gap:10px; }
  .source-language-card { padding:12px 10px; min-height:78px; }
  .source-language-card strong { font-size:.9rem; }
  .source-language-card small { font-size:.74rem; }
  .feature-row, .feature-row.reverse { margin:52px 0 80px; }
  .feature-visual { min-height:380px; }
  .screenshot-frame img { height:430px; width:86%; }
  .speech-art { min-height:450px; }
  .speech-phone-wrap { height:455px; width:76%; }
  .speech-lion { width:68%; left:-9%; }
  .mini-grid { gap:12px; }
  .mini-card { padding:20px; }
  .mascot-art { min-height:350px; }
  .mascot-points article { align-items:flex-start; }
  .results-stage { padding:24px 12px; gap:12px; }
  .result-device { padding:28px 6px 6px; }
  .premium-teaser-copy h2 { font-size:clamp(2.3rem,11vw,3.3rem); }
  .premium-options { gap:8px; }
  .premium-options span { flex:1 1 calc(50% - 8px); text-align:center; padding:10px 8px; }
  .premium-teaser-art { min-height:220px; }
  .premium-teaser-art img { width:min(58%,220px); }
  .faq-intro img { max-width:220px; }
  .final-art { min-height:300px; }
}

@media (max-width:420px) {
  .container, .nav-shell { width:min(calc(100% - 20px), var(--container)); }
  .brand img { width:42px; height:42px; }
  .menu-toggle { width:44px; height:44px; }
  .hero { padding-top:92px; }
  .hero h1 { font-size:clamp(2.45rem,12.6vw,3.25rem); }
  .hero-lead { line-height:1.65; }
  .hero-art { min-height:440px; }
  .hero-phone-card { width:70%; height:82%; }
  .hero-lion { width:70%; }
  .floating-glyph { width:46px; height:46px; font-size:1.4rem; border-radius:13px; }
  .source-language-grid { grid-template-columns:1fr 1fr; }
  .global-language-stat { grid-template-columns:1fr 1fr; }
  .global-language-stat b { display:none; }
  .global-language-stat .wide { grid-column:1 / -1; }
  .results-stage { grid-template-columns:1fr; }
  .result-device-home, .result-device-test, .result-device-results { grid-column:1; width:min(100%,310px); max-width:310px; justify-self:center; }
  .result-device img { max-height:500px; object-fit:cover; }
  .store-row { display:grid; grid-template-columns:1fr; }
  .store-badge { width:100%; }
  .premium-options span { flex-basis:100%; }
  .footer-links { gap:10px; }
}

/* V4 — requested mobile composition refinements */
@media (max-width:620px) {
  /* App languages: three language cards per row. */
  .source-language-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .source-language-card {
    min-height:104px;
    padding:10px 6px;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    text-align:center;
  }
  .source-language-card .flag { font-size:1.65rem; }
  .source-language-card > span:last-child { justify-items:center; }
  .source-language-card strong { font-size:.76rem; line-height:1.15; }
  .source-language-card small { font-size:.67rem; line-height:1.1; }

  /* Learning journey: 1+2, 3+4, 5+6, then 7 centered on its own row. */
  .journey-track {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    max-width:100%;
    align-items:stretch;
  }
  .journey-line { display:none; }
  .journey-step {
    width:100%;
    min-width:0;
    min-height:96px;
    padding:14px 12px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    grid-template-rows:auto auto;
    align-content:center;
    text-align:left;
    border:1px solid rgba(85,22,184,.11);
    border-radius:17px;
    background:#fff;
    box-shadow:0 10px 28px rgba(36,16,77,.055);
  }
  .journey-step span {
    width:38px;
    height:38px;
    grid-row:1 / span 2;
    margin:0 10px 0 0;
    align-self:center;
  }
  .journey-step strong { align-self:end; line-height:1.15; }
  .journey-step small { align-self:start; line-height:1.25; }
  .journey-step:last-child {
    grid-column:1 / -1;
    width:calc(50% - 6px);
    justify-self:center;
  }

  /* Feature-depth cards: center glyph, title and supporting copy. */
  .mini-grid article {
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .mini-grid article > span { margin:0 auto 14px; }
  .mini-grid strong,
  .mini-grid small { text-align:center; }

  /* Mascot expressions: keep all four cubs on one row. */
  .mascot-strip {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
  }
  .mascot-strip div {
    min-height:150px;
    border-radius:15px;
  }
  .mascot-strip img {
    width:100%;
    max-height:118px;
  }
  .mascot-strip span {
    padding:7px 2px;
    font-size:.52rem;
    letter-spacing:.08em;
  }

  /* Progress showcase: all three app screens remain on one row. */
  .results-stage {
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
    gap:7px;
    padding:22px 8px 18px;
  }
  .result-device-home,
  .result-device-test,
  .result-device-results {
    grid-column:auto;
    width:100%;
    max-width:none;
    justify-self:stretch;
  }
  .result-device {
    padding:24px 4px 4px;
    border-radius:17px;
  }
  .result-device .device-label {
    top:8px;
    left:6px;
    right:5px;
    font-size:.42rem;
    letter-spacing:.045em;
    line-height:1.05;
    white-space:normal;
  }
  .result-device img {
    width:100%;
    max-height:none;
    border-radius:12px;
    object-fit:cover;
  }
  .result-device-home img { max-height:none; }
}

@media (max-width:420px) {
  .source-language-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .source-language-card { min-height:100px; padding:9px 4px; }
  .source-language-card .flag { font-size:1.5rem; }
  .source-language-card strong { font-size:.7rem; }
  .source-language-card small { font-size:.62rem; }

  .journey-track { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .journey-step { min-height:92px; padding:12px 9px; grid-template-columns:36px minmax(0,1fr); }
  .journey-step span { width:33px; height:33px; margin-right:7px; font-size:.82rem; }
  .journey-step strong { font-size:.82rem; }
  .journey-step small { font-size:.68rem; }
  .journey-step:last-child { width:calc(50% - 4.5px); }

  .mascot-strip { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .mascot-strip div { min-height:126px; border-radius:12px; }
  .mascot-strip img { max-height:98px; }
  .mascot-strip span { padding:6px 1px; font-size:.46rem; letter-spacing:.04em; }

  .results-stage { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:18px 5px 14px; }
  .result-device-home,
  .result-device-test,
  .result-device-results {
    grid-column:auto;
    width:100%;
    max-width:none;
  }
  .result-device { padding:21px 3px 3px; border-radius:14px; }
  .result-device .device-label { top:7px; left:4px; right:3px; font-size:.37rem; letter-spacing:.02em; }
  .result-device img { max-height:none; border-radius:9px; }
}

/* LIVE LINKS V1 — clickable store badges + mobile-only direct Android download */
.store-badge {
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}
a.store-badge:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.store-download-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 155px;
}
.store-download-group .store-badge {
  width: 100%;
  min-width: 0;
}
.direct-android-download {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 8px;
  color: #d8d1ed;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.direct-android-download:hover {
  color: #fff;
}

@media (max-width: 620px) {
  .store-download-group {
    flex: 1 1 150px;
    min-width: 0;
  }
  .direct-android-download {
    display: inline-flex;
  }
}

@media (max-width: 420px) {
  .store-download-group {
    width: 100%;
  }
}