/* The public landing page shares Turbo's quieter green surfaces and controls. */
:root { --green:#50ce8b; --line:#2b4235; }
.site-icon { width:20px; height:20px; flex:none; vertical-align:middle; }
.container { width:min(1280px,calc(100% - 72px)); }
.button { clip-path:none; border:1px solid transparent; border-radius:10px; min-height:52px; padding:0 22px; gap:10px; font-weight:750; }
.button:hover { background:#6bdd9e; transform:translateY(-2px); }
.button-secondary { background:#17271e; border-color:#46624f; color:#d2e7d9; }
.button-secondary:hover { background:#233e2d; border-color:#78aa8b; }
.button .site-icon { width:18px; height:18px; }
.site-header { background:#0b120eeb; backdrop-filter:blur(18px); }
.hero { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:12px; padding:52px 0 85px; min-height:700px; isolation:isolate; }
.hero-copy { position:relative; z-index:2; padding:0; width:auto; }
.hero h1 { font-size:clamp(46px,5.25vw,74px); line-height:1.03; letter-spacing:-.065em; max-width:none; margin-top:25px; }
.hero-copy p { max-width:440px; font-size:15px; color:#b0c2b6; margin-top:25px; }
.hero-eyebrow { font-size:9px; letter-spacing:.12em; color:#a0bbaa; }
.hero-eyebrow span { border-radius:5px; padding:3px 7px; border-color:#486c55; }
.hero-actions { gap:10px; flex-wrap:wrap; margin-top:28px; }
.hero-meta { font-size:10px; letter-spacing:0; color:#88a391; margin-top:16px; }
.hero-how { display:inline-flex; align-items:center; gap:10px; margin-top:24px; font-size:12px; color:#c2d5c9; }
.hero-how svg { width:16px; }
.hero-how:hover { color:#84dba7; }
.hero-visual { position:relative; inset:auto; width:100%; height:550px; min-width:0; }
.hero-visual:before { inset:7% 0 0; border:1px solid #36594566; border-radius:48% 48% 24px 24px; background:radial-gradient(ellipse at 50% 65%,#32845638,transparent 70%); filter:none; }
.mascot { inset:0 auto auto -5%; width:110%; height:100%; object-fit:contain; transform:none; filter:drop-shadow(0 20px 30px #0007); }
.orbit { width:100%; height:90%; inset:8% 0 auto; transform:rotate(-25deg) scaleY(.65); border-color:#6aa77c33; }
.orbit-two { width:110%; height:110%; inset:0 -5% auto; }
.speed-word { font-size:clamp(80px,10vw,142px); top:80px; right:0; -webkit-text-stroke:1px #a4d8b626; transform:rotate(-12deg); }
.speed-line { display:none; }
.floating-tag { left:-8px; bottom:12px; transform:none; border-radius:12px; background:#15251eeb; border-color:#53755f; padding:15px 18px; backdrop-filter:blur(14px); }
.floating-tag .tag-icon { display:grid; place-items:center; width:38px; height:38px; background:#254c35; border-radius:10px; }
.tag-icon svg { width:24px; height:24px; }
.floating-tag small { font-size:13px; letter-spacing:-.02em; color:#d2eee0; }
.hero-game-chip { position:absolute; right:0; top:62px; display:flex; align-items:center; gap:8px; padding:10px 13px; font-size:10px; color:#c0dbc9; background:#15291fef; border:1px solid #496c54; border-radius:10px; transform:rotate(4deg); }
.hero-game-chip svg { color:#79ce9a; }
.hero-bottom { bottom:20px; color:#789384; }
.hero-bottom a { border-color:#3c5d48; width:34px; height:34px; }
.section { padding-block:90px; }
.section-head { margin-bottom:30px; align-items:end; }
.section h2 { letter-spacing:-.06em; }
.section-aside p { color:#b0c5b7; }
.catalog-count { display:flex; gap:20px; background:#14251b; border:1px solid #35523e; padding:11px 17px; border-radius:9px; color:#abc6b5; }
.catalog-count > span { display:flex; align-items:center; gap:9px; }
.catalog-count b { color:#89ddaa; font-size:19px; }
.catalog-shell { background:linear-gradient(140deg,#132219,#0d1711); border:1px solid #2d4936; border-radius:20px; padding:22px; }
.game-tools { border:0; margin:0 0 18px; padding:0; gap:16px; }
.game-tabs { background:#0b160f; border:1px solid #2e4a38; border-radius:10px; padding:4px; gap:3px; }
.game-tabs button { display:flex; align-items:center; justify-content:center; gap:8px; border-radius:7px; padding:10px 15px; color:#9fbcaa; font-size:12px; }
.game-tabs button svg { width:17px; height:17px; }
.game-tabs button[aria-pressed=true] { color:#e1f4e9; border-color:#4b795b; background:#254b33; }
.game-tabs button:focus-visible { outline:0; box-shadow:inset 0 -2px #acd9bb; }
.game-search { width:270px; min-height:45px; padding:10px 14px; border-radius:10px; background:#0c180f; border-color:#34513d; }
.game-search input { font-size:12px; }
.catalog-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; color:#8da797; padding:0 1px 17px; }
.site-game-grid { gap:14px; grid-template-columns:repeat(6,minmax(0,1fr)); min-height:0; }
.site-game { display:block; overflow:hidden; border:1px solid #334b3c; border-radius:11px; background:#16271d; padding:6px; animation:catalog-appear .3s both; animation-delay:var(--card-delay,0ms); transition:transform .2s,border-color .2s,background .2s; }
.site-game-art { aspect-ratio:4/5; border:0; border-radius:7px; }
.site-game-art:after { display:none; }
.site-game-copy { padding:10px 7px 8px; }
.site-game strong { margin:0; font-size:12px; font-weight:700; line-height:1.4; height:2.8em; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.site-game small { color:#8cb39b; font-size:10px; margin-top:6px; }
.site-game:hover { transform:translateY(-4px); border-color:#729981; background:#1e3527; }
.site-game:hover .site-game-art { transform:none; }
.site-game:focus-visible { outline:2px solid #a6d4b7; outline-offset:3px; }
.site-game-grid.is-apps { grid-template-columns:repeat(4,minmax(0,1fr)); }
.site-app { display:flex; padding:14px; gap:12px; }
.site-app .site-game-art { width:48px; height:48px; border:1px solid #395543; background:#1c3228; border-radius:10px; }
.site-app .site-game-art img { padding:7px; }
.site-app .site-game-copy { padding:0; }
.site-app strong { height:auto; }
.catalog-more { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:44px; margin-top:20px; border:1px solid #49654f; border-radius:9px; background:#203a29; color:#d4e7db; font-size:12px; }
.catalog-more[hidden] { display:none; }
.catalog-more:hover { background:#2b4c36; }
.games-note { margin-top:22px; padding:17px 0 0; border-top:1px solid #2a4433; font-size:11px; gap:16px; }
.games-note a { font-size:11px; }
.route-layout { gap:64px; grid-template-columns:1fr 1.1fr; }
.route-card { transform:none; border-radius:20px; border-color:#44614e; background:linear-gradient(145deg,#1b3024,#0f1b14); box-shadow:0 24px 70px #0004; }
.route-card-heading { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid #34513e; }
.route-card-heading > span { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; }
.route-card-heading > span svg { color:#82caa0; }
.route-card-heading small { font-size:8px; letter-spacing:.12em; color:#94b19e; border:1px solid #415d4a; border-radius:5px; padding:4px 6px; }
.route-card-body { padding:24px; }
.route-source { padding:17px; border-radius:12px; font-size:15px; gap:14px; border-color:#4b6b56; background:#223e2d; }
.device-icon { width:44px; height:44px; border-radius:10px; background:#14261a; color:#a6dfbb; }
.device-icon svg { width:25px; height:25px; }
.route-source small { font-size:10px; margin-top:5px; color:#abc9b6; }
.route-fork { gap:16px; padding-top:39px; }
.route-branch:before { background:#5c7c67; }
.boosted:before { background:#68ca8b; box-shadow:none; }
.boosted:after { content:""; position:absolute; left:calc(50% - 2px); top:-36px; width:5px; height:5px; border-radius:50%; background:#a9f5c4; box-shadow:0 0 12px #58cc88; animation:route-packet 2.6s linear infinite; }
.route-branch > small { font-size:8px; letter-spacing:.04em; min-height:22px; margin:0; }
.route-node { min-height:144px; padding:18px 8px; display:flex; flex-direction:column; gap:7px; border-radius:12px; background:#14241a; }
.boosted .route-node { background:linear-gradient(145deg,#234f32,#183b27); border-color:#4b8e61; color:#d2f7df; }
.route-node > img { width:44px; height:44px; object-fit:contain; }
.route-node > svg { width:33px; height:33px; margin:5px 0 6px; color:#9bb9a7; }
.route-node b { font-size:14px; }
.route-node > span { font-size:9px; line-height:1.3; color:#a0beac; font-weight:400; }
.route-destination { display:flex; align-items:center; justify-content:center; gap:8px; padding-top:14px; margin-top:17px; font-size:10px; text-transform:none; color:#adc6b7; }
.route-destination svg { width:17px; height:17px; }
.route-note { display:flex; align-items:center; justify-content:center; gap:8px; font-size:10px; padding-top:18px; margin-top:23px; color:#a3bdaa; }
.route-note svg { width:16px; height:16px; color:#7bcd99; }
.feature-mini > svg { flex:none; width:34px; height:34px; padding:7px; background:#1b3424; border:1px solid #38583f; color:#8bd3a6; border-radius:8px; }
.download-section { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; position:relative; border:1px solid #466b51; border-radius:24px; padding:52px 52px 96px; overflow:hidden; background:radial-gradient(ellipse at 85% 40%,#2c614033,transparent 60%),#14251a; }
.download-copy { position:relative; z-index:2; }
.download-copy h2 { font-size:clamp(36px,4vw,56px); margin-top:20px; letter-spacing:-.06em; }
.download-copy > .button { margin-top:22px; font-size:11px; }
.download-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:26px; }
.download-actions .button { margin:0; font-size:11px; }
.download-github { margin-left:8px; }
.download-trust { margin-top:14px; color:#adc4b5; font-size:11px; }
.download-meta { color:#82a38f; margin-top:12px; }
.download-mark { position:relative; inset:auto; width:100%; height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:none; font-style:normal; line-height:1.5; }
.download-mark img { width:220px; height:220px; object-fit:contain; position:relative; filter:drop-shadow(0 12px 30px #0005); }
.download-mark > span { font-size:9px; font-weight:600; letter-spacing:.2em; color:#9bbda7; margin-top:12px; position:relative; }
.brand-orbit { position:absolute; width:280px; height:280px; border:1px solid #659d7744; border-radius:50%; box-shadow:0 0 0 25px #699c7108,0 0 0 50px #699c7106; }
.github-star { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:10px; min-height:56px; border-top:1px solid #35543e; background:#102217; color:#c4decd; font-size:11px; padding:14px 20px; }
.github-star > svg:first-child { color:#a4c88f; }
.github-star:hover { color:#fff; background:#1b3323; }
.github-star > svg:last-child { width:16px; }
.game-official-site { display:flex; align-items:center; gap:10px; margin:18px 0; font-size:13px; color:#9bdbb3; }
.game-official-site[hidden] { display:none; }
@keyframes route-packet { 0% {transform:translateY(0);opacity:0;} 20% {opacity:1;} 90% {opacity:1;} 100% {transform:translateY(32px);opacity:0;} }
@keyframes catalog-appear { from {opacity:0;transform:translateY(8px);} to {opacity:1;transform:translateY(0);} }
@media(max-width:1100px) {
  .container { width:calc(100% - 48px); }
  .hero { gap:0; min-height:650px; }
  .hero h1 { font-size:clamp(42px,5.4vw,60px); }
  .hero-visual { height:510px; }
  .hero-game-chip { display:none; }
  .hero-eyebrow { font-size:8px; }
  .site-game-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .site-game-grid.is-apps { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .route-layout { gap:32px; }
  .download-section { padding:38px 32px 90px; }
  .download-copy .button { padding:0 15px; }
}
@media(max-width:860px) {
  .hero { grid-template-columns:1fr 1fr; padding-top:38px; min-height:590px; }
  .hero h1 { font-size:42px; }
  .hero-copy p { font-size:13px; }
  .hero-copy p br { display:none; }
  .hero-eyebrow { flex-wrap:wrap; gap:6px; max-width:280px; }
  .hero-visual { height:470px; }
  .hero-visual .mascot { height:94%; top:5%; width:120%; left:-10%; }
  .floating-tag { left:0; bottom:14px; padding:12px; gap:9px; }
  .floating-tag i { display:none; }
  .floating-tag small { font-size:11px; }
  .game-tools { flex-wrap:wrap; }
  .game-search { width:100%; }
  .route-layout { grid-template-columns:1fr; gap:35px; }
  .route-copy > p { max-width:620px; }
  .route-card { max-width:600px; width:100%; justify-self:center; }
  .download-section { grid-template-columns:1.5fr 1fr; }
  .download-mark img { width:170px; height:170px; }
  .brand-orbit { width:220px; height:220px; }
  .download-github { margin-left:0; }
}
@media(max-width:640px) {
  .container { width:calc(100% - 32px); }
  .hero { display:flex; flex-direction:column; align-items:stretch; padding:34px 0 65px; gap:12px; }
  .hero-copy { width:100%; }
  .hero h1 { font-size:clamp(40px,9.5vw,58px); max-width:520px; }
  .hero-eyebrow { max-width:none; }
  .hero-actions { margin-top:22px; }
  .hero-visual { width:100%; height:360px; max-width:420px; align-self:center; }
  .hero-visual .mascot { width:100%; height:100%; inset:0; }
  .hero-visual:before { inset:8% 6% 0; }
  .floating-tag { left:2px; bottom:0; }
  .speed-word { top:70px; }
  .hero-how { margin-top:16px; }
  .hero-bottom { font-size:7px; gap:10px; }
  .section { padding-block:58px; }
  .section-head { gap:20px; }
  .catalog-shell { padding:13px; border-radius:15px; }
  .game-tabs { width:100%; display:flex; gap:2px; }
  .game-tabs button { flex:1; min-width:0; font-size:10px; padding:10px 5px; gap:5px; }
  .game-tabs button svg { width:14px; height:14px; }
  .catalog-caption { font-size:9px; }
  .site-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .site-game-grid.is-apps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-app { display:flex; flex-direction:column; align-items:start; padding:12px; }
  .site-app .site-game-copy { width:100%; }
  .games-note { flex-direction:column; align-items:start; gap:12px; }
  .route-card-heading { padding:17px; }
  .route-card-body { padding:16px; }
  .route-source { font-size:13px; padding:13px; }
  .route-branch > small { font-size:7px; }
  .route-node b { font-size:12px; }
  .route-node > span { font-size:8px; }
  .route-fork { gap:10px; }
  .download-section { grid-template-columns:1fr; padding:30px 24px 100px; }
  .download-copy h2 { font-size:38px; }
  .download-mark { height:190px; margin-top:25px; }
  .download-mark img { width:155px; height:155px; }
  .brand-orbit { width:180px; height:180px; }
  .github-star { font-size:10px; gap:8px; }
  .download-trust { line-height:1.7; }
}
@media(prefers-reduced-motion:reduce) { .boosted:after { animation:none; display:none; } .site-game,.hero *,.button { transition:none; animation:none; } }