/* Landing page palette and typography follow the game. */
.landing { --text-primary:#e8ecff; --text-secondary:#a3abcf; --neon-cyan:#00e0c6; background:#0f1226; color:var(--text-primary); }
.landing a { -webkit-tap-highlight-color:transparent; }
.landing .site-header { position:relative; inset:auto; max-width:1180px; margin:auto; padding:24px 32px; display:flex; justify-content:space-between; background:none; border:0; backdrop-filter:none; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#e8ecff; font-size:25px; font-weight:750; line-height:1.15; }
.brand img { border-radius:11px; }
.brand small { display:block; color:#9aa4ca; font-size:9px; letter-spacing:2px; margin-top:5px; }
.landing .header-controls { gap:4px; padding:4px; background:#1a1f3d; border:1px solid #ffffff0d; border-radius:30px; }
.landing .lang-toggle { border:0; border-radius:24px; color:#a3abcf; background:none; padding:8px 14px; font-size:12px; box-shadow:none; }
.landing .lang-toggle.active { background:#303a67; color:white; }
.landing #hero { min-height:auto; max-width:1180px; padding:54px 32px 64px; margin:auto; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; text-align:left; align-items:center; overflow:visible; }
.landing .hero-content { max-width:650px; min-width:0; position:relative; z-index:1; padding:0; background:none; text-align:left; }
.eyebrow { font-size:10px; letter-spacing:2px; font-weight:650; color:#9daef8; display:flex; align-items:center; gap:10px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#00e0c6; }
.app-identity { display:flex; align-items:center; gap:18px; margin:30px 0 25px; }
.app-identity img { border-radius:21px; box-shadow:0 12px 40px #0004; }
.app-identity>span { font-size:44px; font-weight:750; line-height:1; letter-spacing:-2px; }
.app-identity small { display:block; font-size:10px; letter-spacing:3px; font-weight:500; margin-top:12px; color:#a3abcf; }
html[data-lang="ja"] .brand-sub { display:none; }
html[data-lang="ja"] .brand { font-size:20px; }
html[data-lang="ja"] .app-identity>span { font-size:36px; letter-spacing:-1px; }
.hero-heading { font-size:clamp(40px,4.7vw,64px); line-height:1.12; letter-spacing:-2.8px; max-width:620px; margin-bottom:24px; white-space:pre-line; text-wrap:balance; }
html[data-lang="ja"] .hero-heading { font-size:clamp(34px,3.6vw,48px); letter-spacing:-1.5px; line-height:1.5; }
.landing .hero-description { font-family:inherit; font-size:16px; line-height:1.9; color:#a3abcf; margin:0; max-width:475px; }
.landing .cta-buttons { justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:24px; margin:30px 0 15px; }
.landing .btn-primary { display:inline-flex; justify-content:center; align-items:center; gap:20px; background:#6c8cff; border:1px solid #809bff; border-radius:12px; color:#0c1436; font-family:inherit; font-weight:750; font-size:14px; letter-spacing:0; padding:15px 22px; box-shadow:0 8px 30px #4264ed20; text-transform:none; }
.landing .btn-primary:hover { background:#8ba3ff; box-shadow:0 8px 32px #4264ed40; }
.text-link { display:inline-flex; gap:15px; align-items:center; color:#d0d8ff; text-decoration:none; font-size:13px; }
.text-link:hover { color:#00e0c6; }
.availability { font-size:11px; color:#969fc4; }
.hero-visual { position:relative; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; isolation:isolate; }
.hero-visual::before { content:''; position:absolute; inset:5% -15%; background:radial-gradient(ellipse,#3858c540,transparent 68%); z-index:-2; }
.phone { width:258px; padding:7px; border:1px solid #66739970; border-radius:39px; background:linear-gradient(140deg,#3a4262,#171b33 45%,#404964); transform:rotate(5deg); box-shadow:15px 30px 70px #0006; }
.phone img { display:block; width:100%; height:auto; border-radius:32px; }
.hero-visual figcaption { font-size:10px; color:#909bc2; margin-top:26px; }
.orbit { position:absolute; width:420px; height:420px; border:1px solid #6c8cff22; border-radius:50%; z-index:-1; }
.orbit-two { width:520px; height:520px; border-style:dashed; border-color:#6c8cff16; }
.floating-digit { position:absolute; color:#91a4fa; font-family:Menlo,monospace; z-index:1; }
.digit-one { left:0; top:18%; font-size:27px; transform:rotate(-10deg); }
.digit-two { right:4%; bottom:14%; color:#00e0c6; font-size:48px; }
.number-strip { white-space:nowrap; overflow:hidden; text-align:center; font-family:Menlo,monospace; font-size:35px; letter-spacing:13px; color:#8295ed25; padding:20px 0; border-bottom:1px solid #ffffff0a; }
.number-strip span { color:#00e0c680; }
.stats { max-width:1116px; margin:0 auto; padding:38px 0; display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #ffffff0a; }
.stats>div { display:flex; flex-direction:column; align-items:center; gap:5px; border-right:1px solid #ffffff10; }
.stats>div:last-child { border:0; }
.stats strong { color:#e8ecff; font-family:Menlo,monospace; font-size:30px; font-weight:500; }
.stats span { font-size:12px; color:#9ba6cd; }
.landing #features { max-width:1180px; padding:90px 32px; }
.section-heading { text-align:center; margin-bottom:40px; }
.section-heading>.eyebrow { justify-content:center; color:#00cbb6; }
.landing .section-title { background:none; -webkit-text-fill-color:initial; color:#e8ecff; font-family:inherit; font-size:34px; letter-spacing:-1px; margin:14px 0 12px; text-wrap:balance; }
.section-heading>p { color:#a3abcf; font-size:14px; }
.landing .features-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.landing .feature-card { padding:0; border:1px solid #ffffff0c; border-radius:20px; background:#181d36; backdrop-filter:none; transition:none; }
.landing .feature-card:hover { transform:none; background:#181d36; box-shadow:none; border-color:#ffffff1c; }
.landing .feature-card::before { display:none; }
.feature-copy { padding:26px 24px 24px; min-height:250px; }
.feature-top { display:flex; gap:14px; align-items:center; margin-bottom:20px; }
.step-number { font:12px Menlo,monospace; color:#00e0c6; }
.feature-top .eyebrow { font-size:9px; letter-spacing:1.5px; }
.landing .feature-title { color:#e8ecff; font-size:21px; line-height:1.4; letter-spacing:-.5px; margin-bottom:12px; }
.landing .feature-desc { font-size:13px; line-height:1.9; color:#a3abcf; }
.screen-window { margin:0 30px; height:295px; overflow:hidden; border:1px solid #ffffff16; border-bottom:0; border-radius:22px 22px 0 0; box-shadow:0 0 30px #0003; }
.screen-window img { width:100%; height:auto; display:block; }
.screens-note { color:#909bc2; font-size:11px; text-align:center; margin-top:22px; }
.landing #download { margin:0 32px 70px; padding:65px 24px; border:1px solid #6c8cff22; border-radius:24px; background:radial-gradient(ellipse at 50% 0%,#283e774d,transparent 75%),#151a32; }
.landing .download-container { max-width:780px; }
.download-icon { border-radius:23px; margin-bottom:25px; box-shadow:0 8px 40px #0004; }
.steps { display:flex; justify-content:center; align-items:center; gap:18px; font-size:11px; color:#a3abcf; margin-bottom:20px; }
.steps>span:nth-child(even) { color:#00e0c6; }
.landing .download-title { color:#e8ecff; font-family:inherit; letter-spacing:-1px; font-size:36px; }
.landing .download-subtitle { font-size:14px; margin-bottom:26px; }
.landing footer { background:none; border-top:1px solid #ffffff0a; padding:28px 32px; }
.landing .footer-content { max-width:1116px; justify-content:space-between; gap:20px; }
.footer-brand { color:#e8ecff; font-size:25px; font-weight:700; text-decoration:none; }
.landing .footer-text,.landing .footer-link { font-size:11px; color:#969fc4; }
.landing :focus-visible { outline:2px solid #00e0c6; outline-offset:5px; }
@media(min-width:1240px) { .landing #download { max-width:1116px; margin-left:auto; margin-right:auto; } }
@media(max-width:960px) { .landing #hero { gap:20px; } .phone { width:230px; } .orbit { width:330px; height:330px; } .orbit-two { width:390px; height:390px; } .digit-one { left:-5px; font-size:22px; } .feature-copy { padding:22px 18px; min-height:300px; } .screen-window { margin:0 18px; height:240px; } }
@media(max-width:700px) { .landing .site-header { padding:18px 22px; } .landing #hero { grid-template-columns:1fr; padding:35px 24px 35px; gap:40px; } .hero-heading { font-size:48px; } html[data-lang="ja"] .hero-heading { font-size:36px; } .app-identity { margin:25px 0; } html[data-lang="ja"] .brand { font-size:15px; } html[data-lang="ja"] .app-identity { gap:14px; } html[data-lang="ja"] .app-identity img { width:64px; height:64px; border-radius:17px; } html[data-lang="ja"] .app-identity>span { font-size:26px; } .landing .hero-description { font-size:14px; } .landing .cta-buttons { flex-direction:row; align-items:center; gap:20px; } .landing .btn { width:auto; } .hero-visual { margin-top:8px; } .phone { width:230px; } .digit-one { left:calc(50% - 155px); } .digit-two { right:calc(50% - 155px); } .orbit-two { width:340px; height:340px; } .stats { margin:0 20px; padding:28px 0; } .stats strong { font-size:23px; } .stats span { font-size:10px; } .number-strip { font-size:25px; } .landing #features { padding:60px 22px; } .landing .section-title { font-size:28px; } .landing .features-grid { grid-template-columns:1fr; } .feature-copy { min-height:0; padding:25px; } .screen-window { margin:0 auto; width:240px; height:290px; } .landing #download { margin:0 20px 40px; padding:45px 18px; } .landing .download-title { font-size:28px; } .landing .footer-content { justify-content:center; } .footer-brand { width:100%; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }