:root { /* deep plum / warm ink — pairs with --mauve, not blue-navy */ --navy: #2a1a24; --navy-mid: #3d2630; --navy-light: #5c3d4d; --parchment: #f0ebe3; --titanium: #e4ddd4; --card-white: #f7f3ee; --mauve: #9d6e7e; --mauve-deep: #7a5262; --mauve-pale: #e8d5dc; --amber: #c49a3c; --text-dark: #2a2420; --text-mid: #6b5f58; --text-light: #9e948c; --border: #cfc8be; --shot-well: #d4cdc4; --shot-well-2:#c9c0b4; --display: 'VT323', monospace; --mono: 'Share Tech Mono', monospace; --body: 'DM Sans', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* JA/KO: stricter punctuation/line rules only. Do NOT use word-break: keep-all on — it inherits everywhere and can blow past the viewport min-width on phones, forcing pinch-zoom-out. */ html[lang="ja"], html[lang="ko"] { line-break: strict; } /* Japanese page: readable body copy (load Zen Kaku Gothic New on ja page only) */ html[lang="ja"] body, html[lang="ja"] .hero-sub, html[lang="ja"] .how-desc, html[lang="ja"] .ws-desc, html[lang="ja"] .ws-list li, html[lang="ja"] .game-desc, html[lang="ja"] .deck-sub, html[lang="ja"] .cta-sub, html[lang="ja"] .nav-links a, html[lang="ja"] .stat-label, html[lang="ja"] .foot-links a, html[lang="ja"] .foot-credit, html[lang="ja"] .hero-title, html[lang="ja"] .s-title, html[lang="ja"] .ws-title, html[lang="ja"] .how-name, html[lang="ja"] .cta-title, html[lang="ja"] .deck-name, html[lang="ja"] .stat-num { font-family: "Zen Kaku Gothic New", sans-serif; } html[lang="ja"] .nav-logo { font-family: var(--display), monospace; } html[lang="ja"] .foot-logo { font-family: var(--display), monospace; } /* Japanese: CJK needs looser line-height & tracking than VT323/Latin defaults */ html[lang="ja"] .hero-title { line-height: 1.22; letter-spacing: 0.06em; } html[lang="ja"] .ws-title { line-height: 1.12; letter-spacing: 0.05em; } html[lang="ja"] .s-title { line-height: 1.18; letter-spacing: 0.04em; } html[lang="ja"] .how-name { line-height: 1.2; letter-spacing: 0.04em; } html[lang="ja"] .cta-title { line-height: 1.12; letter-spacing: 0.05em; } html[lang="ja"] .deck-name { letter-spacing: 0.06em; } /* Korean page: Noto Sans KR (load on ko page only) */ html[lang="ko"] body, html[lang="ko"] .hero-sub, html[lang="ko"] .how-desc, html[lang="ko"] .ws-desc, html[lang="ko"] .ws-list li, html[lang="ko"] .game-desc, html[lang="ko"] .deck-sub, html[lang="ko"] .cta-sub, html[lang="ko"] .nav-links a, html[lang="ko"] .stat-label, html[lang="ko"] .foot-links a, html[lang="ko"] .foot-credit, html[lang="ko"] .hero-title, html[lang="ko"] .s-title, html[lang="ko"] .ws-title, html[lang="ko"] .how-name, html[lang="ko"] .cta-title, html[lang="ko"] .deck-name, html[lang="ko"] .stat-num { font-family: "Noto Sans KR", sans-serif; } html[lang="ko"] .nav-logo { font-family: var(--display), monospace; } html[lang="ko"] .foot-logo { font-family: var(--display), monospace; } html[lang="ko"] .hero-title { line-height: 1.22; letter-spacing: 0.04em; } html[lang="ko"] .ws-title { line-height: 1.12; letter-spacing: 0.03em; } html[lang="ko"] .s-title { line-height: 1.18; letter-spacing: 0.02em; } html[lang="ko"] .how-name { line-height: 1.2; letter-spacing: 0.03em; } html[lang="ko"] .cta-title { line-height: 1.12; letter-spacing: 0.03em; } html[lang="ko"] .deck-name { letter-spacing: 0.05em; } html[lang="ko"] .decks .s-title span { color: var(--mauve); } body { background: var(--titanium); color: var(--text-dark); font-family: var(--body); font-weight: 300; overflow-x: hidden; overflow-wrap: break-word; } body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); pointer-events: none; z-index: 999; } /* ── NAV ── */ nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(228,221,212,0.93); backdrop-filter: blur(14px); z-index: 100; } .nav-logo { font-family: var(--display); font-size: 28px; color: var(--navy); letter-spacing: 0.12em; text-decoration: none; line-height: 1; } .nav-logo span { color: var(--mauve); } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { font-family: var(--mono); font-size: 11px; color: var(--text-mid); text-decoration: none; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.2s; } .nav-links a:hover { color: var(--navy); } .nav-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; } .lang-switch { display: inline-flex; align-items: center; gap: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .lang-switch > .lang-switch__item + .lang-switch__item { border-left: 1px solid var(--border); } .lang-switch a.lang-switch__item, .lang-switch span.lang-switch__item { display: inline-block; padding: 7px 9px; text-decoration: none; color: var(--text-mid); } .lang-switch a.lang-switch__item:hover { color: var(--navy); background: rgba(255,255,255,0.4); } .lang-switch__item--active { background: var(--navy); color: var(--parchment) !important; } .store-cluster { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nav-cta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 22px; background: var(--navy); color: var(--parchment); text-decoration: none; transition: all 0.2s; } .nav-cta:hover { background: var(--navy-light); } .btn-play-soon { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mid); border: 1px dashed var(--border); padding: 8px 14px; border-radius: 4px; background: rgba(255,255,255,0.25); } .btn-play-soon--on-dark { color: rgba(240,235,227,0.55); border-color: rgba(240,235,227,0.2); background: rgba(0,0,0,0.2); } .hero-store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; } .footer-store-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-bottom: 8px; } /* ── HERO ── */ .hero { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 61px); border-bottom: 1px solid var(--border); } .hero-left { padding: 80px 56px 80px 48px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); } .hero-tag { font-family: var(--mono); font-size: 10px; color: var(--mauve); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; opacity: 0; animation: fadeUp 0.6s 0.1s forwards; } .hero-tag::before { content: ''; width: 20px; height: 1px; background: var(--mauve); } .hero-title { font-family: var(--display); font-size: clamp(72px, 8.5vw, 124px); line-height: 0.9; color: var(--navy); letter-spacing: 0.03em; margin-bottom: 28px; opacity: 0; animation: fadeUp 0.6s 0.2s forwards; } .hero-title em { color: var(--mauve); font-style: normal; } .hero-sub { font-size: 15px; line-height: 1.75; color: var(--text-mid); max-width: 400px; margin-bottom: 44px; opacity: 0; animation: fadeUp 0.6s 0.3s forwards; } .hero-sub strong { color: var(--text-dark); font-weight: 500; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.6s 0.4s forwards; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--navy); color: var(--parchment); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: all 0.2s; } .btn-primary:hover { background: var(--navy-light); } .btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: transparent; border: 1px solid var(--border); color: var(--text-mid); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: all 0.2s; } .btn-secondary:hover { border-color: var(--navy); color: var(--navy); } .hero-stats { display: flex; gap: 36px; margin-top: 52px; padding-top: 36px; border-top: 1px solid var(--border); opacity: 0; animation: fadeUp 0.6s 0.5s forwards; } .stat-num { font-family: var(--display); font-size: 36px; color: var(--navy); display: block; line-height: 1; } .stat-label { font-family: var(--mono); font-size: 9px; color: var(--text-light); letter-spacing: 0.18em; text-transform: uppercase; display: block; margin-top: 2px; } /* Hero right — screenshot 1: home screen */ .hero-right { background: linear-gradient(165deg, #3d2633 0%, var(--navy) 45%, #161018 100%); display: flex; align-items: center; justify-content: center; padding: 60px 48px; position: relative; overflow: hidden; } .hero-right::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 65% 85% at 50% 52%, rgba(255,255,255,0.09) 0%, transparent 58%), radial-gradient(circle at 30% 70%, rgba(157,110,126,0.16) 0%, transparent 52%), radial-gradient(circle at 78% 18%, rgba(196,154,60,0.1) 0%, transparent 42%); } .bracket { position: absolute; width: 22px; height: 22px; } .bracket.tl { top: 20px; left: 20px; border-top: 1px solid rgba(240,235,227,0.2); border-left: 1px solid rgba(240,235,227,0.2); } .bracket.tr { top: 20px; right: 20px; border-top: 1px solid rgba(240,235,227,0.2); border-right: 1px solid rgba(240,235,227,0.2); } .bracket.bl { bottom: 20px; left: 20px; border-bottom: 1px solid rgba(240,235,227,0.2); border-left: 1px solid rgba(240,235,227,0.2); } .bracket.br { bottom: 20px; right: 20px; border-bottom: 1px solid rgba(240,235,227,0.2); border-right: 1px solid rgba(240,235,227,0.2); } .hero-watermark { position: absolute; bottom: -20px; right: -10px; font-family: var(--display); font-size: 180px; color: rgba(255,255,255,0.025); pointer-events: none; letter-spacing: 0.05em; line-height: 1; } .phone-wrap { position: relative; opacity: 0; animation: fadeUp 0.8s 0.3s forwards; z-index: 1; filter: drop-shadow(0 28px 48px rgba(0,0,0,0.55)) drop-shadow(0 0 1px rgba(255,255,255,0.12)); } .phone-shell { width: 240px; background: #1a1418; border-radius: 38px; padding: 10px; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 48px rgba(255,255,255,0.06), 0 40px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1); transform: perspective(900px) rotateY(-6deg) rotateX(2deg); transition: transform 0.5s ease, box-shadow 0.35s ease; } .phone-shell:hover { transform: perspective(900px) rotateY(-1deg) rotateX(0deg); box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 56px rgba(255,255,255,0.1), 0 48px 90px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.12); } .phone-screen { border-radius: 29px; overflow: hidden; aspect-ratio: 9/19.5; } .phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; } /* screenshot placeholder style */ .ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #2a1f26; font-family: var(--mono); font-size: 10px; color: rgba(240,235,227,0.25); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 16px; } .ph svg { opacity: 0.2; } .ph-label { line-height: 1.5; } /* inline phone — smaller, used in how-it-works */ .phone-inline { width: 160px; flex-shrink: 0; background: #1a1418; border-radius: 28px; padding: 7px; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 0 0 2px rgba(0,0,0,0.22), 0 20px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08); } .phone-inline .phone-screen { border-radius: 22px; } /* phone on light bg */ .phone-inline-light { width: 160px; flex-shrink: 0; background: #c8bfb4; border-radius: 28px; padding: 7px; border: 1px solid rgba(42,36,32,0.16); box-shadow: 0 0 0 2px rgba(255,255,255,0.35), 0 20px 48px rgba(26,37,64,0.18), inset 0 1px 0 rgba(255,255,255,0.5); } .phone-inline-light .phone-screen { border-radius: 22px; } .phone-inline-light .ph { background: #c8c0b5; color: rgba(42,36,32,0.3); } /* ── SHARED SECTION ── */ section { border-bottom: 1px solid var(--border); } .section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 52px; } .s-num { font-family: var(--mono); font-size: 10px; color: var(--text-light); letter-spacing: 0.2em; } .s-title { font-family: var(--display); font-size: clamp(52px, 5vw, 72px); color: var(--navy); letter-spacing: 0.04em; line-height: 1; } .s-rule { flex: 1; height: 1px; background: var(--border); align-self: center; } /* ── HOW IT WORKS ── */ /* 3 steps, each with a screenshot beside the copy */ .how { padding: 96px 48px; background: var(--parchment); } .how-steps { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); } .how-step { display: grid; grid-template-columns: 1fr 200px; gap: 0; border-bottom: 1px solid var(--border); transition: background 0.25s; } .how-step:last-child { border-bottom: none; } .how-step:hover { background: var(--card-white); } .how-step.reverse { grid-template-columns: 200px 1fr; } .how-copy { padding: 40px 40px; display: flex; flex-direction: column; justify-content: center; } .how-step.reverse .how-copy { border-left: 1px solid var(--border); } .how-step:not(.reverse) .how-copy { border-right: 1px solid var(--border); } .how-tag { font-family: var(--mono); font-size: 10px; color: var(--mauve); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; display: block; } .how-name { font-family: var(--display); font-size: 52px; color: var(--navy); letter-spacing: 0.03em; margin-bottom: 12px; line-height: 1; } .how-desc { font-size: 14px; line-height: 1.75; color: var(--text-mid); } .how-shot { display: flex; align-items: center; justify-content: center; padding: 28px 24px; background: linear-gradient(180deg, var(--shot-well) 0%, var(--shot-well-2) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(26,37,64,0.06); } .how-step.reverse .how-shot { background: linear-gradient(180deg, var(--shot-well) 0%, var(--shot-well-2) 100%); } /* small phone in how-it-works */ .phone-sm { width: 120px; flex-shrink: 0; background: #1a1418; border-radius: 22px; padding: 6px; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 0 0 2px rgba(0,0,0,0.25), 0 14px 36px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08); } .phone-sm-light { width: 120px; flex-shrink: 0; background: #c8bfb4; border-radius: 22px; padding: 6px; border: 1px solid rgba(42,36,32,0.18); box-shadow: 0 0 0 2px rgba(255,255,255,0.35), 0 14px 36px rgba(26,37,64,0.22), inset 0 1px 0 rgba(255,255,255,0.55); } .phone-sm .phone-screen, .phone-sm-light .phone-screen { border-radius: 17px; } .phone-sm .ph { background: #2a1f26; font-size: 9px; } .phone-sm-light .ph { background: #c4bdb5; color: rgba(42,36,32,0.3); font-size: 9px; } /* ── WORD SCOPE ── */ /* screenshot 4: the word scope detail screen, beside the copy */ .wordscope { padding: 96px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; background: var(--titanium); } .ws-left { padding-right: 64px; display: flex; flex-direction: column; justify-content: center; } .ws-right { border-left: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 48px; background: linear-gradient(200deg, #452d38 0%, var(--navy) 52%, #161018 100%); position: relative; overflow: hidden; } .ws-right::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 60%), radial-gradient(circle at 60% 40%, rgba(157,110,126,0.14) 0%, transparent 55%); } .ws-badge { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 12px; border: 1px solid var(--mauve); color: var(--mauve); margin-bottom: 16px; } .ws-title { font-family: var(--display); font-size: clamp(72px, 7vw, 100px); color: var(--navy); line-height: 0.88; letter-spacing: 0.03em; margin-bottom: 22px; } .ws-title span { color: var(--mauve); } .ws-desc { font-size: 15px; line-height: 1.78; color: var(--text-mid); margin-bottom: 28px; } .ws-list { list-style: none; display: flex; flex-direction: column; gap: 11px; } .ws-list li { font-family: var(--mono); font-size: 11px; color: var(--text-mid); letter-spacing: 0.06em; display: flex; align-items: center; gap: 10px; } .ws-list li::before { content: '→'; color: var(--mauve); } /* phone in ws right panel */ .ws-phone { width: 200px; background: #1a1418; border-radius: 32px; padding: 8px; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 40px rgba(255,255,255,0.05), 0 32px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1); position: relative; z-index: 1; filter: drop-shadow(0 22px 40px rgba(0,0,0,0.45)); transform: perspective(900px) rotateY(6deg) rotateX(1deg); transition: transform 0.5s, box-shadow 0.35s ease; } .ws-phone:hover { transform: perspective(900px) rotateY(1deg) rotateX(0deg); box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 52px rgba(255,255,255,0.08), 0 36px 78px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.12); } .ws-phone .phone-screen { border-radius: 25px; } .ws-phone .ph { font-size: 9px; } /* ── MATCH GAME ── */ /* screenshot 5 or 6: game/achievement screen */ .game-section { padding: 96px 48px; background: var(--parchment); display: grid; grid-template-columns: 200px 1fr; gap: 0; align-items: center; } .game-shot { display: flex; align-items: center; justify-content: center; padding: 40px; border-right: 1px solid var(--border); background: linear-gradient(180deg, #e8e2d8 0%, var(--shot-well) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset -1px 0 0 rgba(26,37,64,0.04); } .game-copy { padding: 40px 48px; } .game-copy .s-title { margin-bottom: 0; } .game-desc { font-size: 15px; line-height: 1.75; color: var(--text-mid); margin-top: 18px; max-width: 480px; } .phone-game { width: 130px; background: #c8bfb4; border-radius: 24px; padding: 6px; border: 1px solid rgba(42,36,32,0.18); box-shadow: 0 0 0 2px rgba(255,255,255,0.38), 0 14px 40px rgba(26,37,64,0.22), inset 0 1px 0 rgba(255,255,255,0.55); } .phone-game .phone-screen { border-radius: 19px; } .phone-game .ph { background: #c4bdb5; color: rgba(42,36,32,0.3); font-size: 9px; } /* ── DECKS ── */ .decks { padding: 80px 48px; background: var(--titanium); } .decks .s-title { letter-spacing: 0.1em; } html[lang="ja"] .decks .s-title span { color: var(--mauve); } .deck-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; } .deck-chip { display: flex; flex-direction: column; gap: 6px; padding: 18px 24px; border: 1px solid var(--border); background: var(--card-white); transition: all 0.2s; min-width: 140px; } .deck-chip:hover { border-color: var(--mauve); background: var(--mauve-pale); } .deck-name { font-family: var(--display); font-size: 28px; color: var(--navy); letter-spacing: 0.08em; line-height: 1; } .deck-sub { font-family: var(--mono); font-size: 10px; color: var(--text-light); letter-spacing: 0.1em; } /* ── LANGUAGES ── */ .langs { padding: 80px 48px; background: var(--parchment); } .lang-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; } .lang-pill { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--border); color: var(--text-mid); background: var(--card-white); cursor: default; } /* ── FOOTER CTA ── */ .footer-cta { padding: 120px 48px; background: var(--navy); text-align: center; position: relative; overflow: hidden; border-bottom: none; } .footer-cta::before { content: 'WORDDEX'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--display); font-size: 240px; color: rgba(255,255,255,0.025); pointer-events: none; white-space: nowrap; letter-spacing: 0.1em; } .cta-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mauve); margin-bottom: 16px; position: relative; } .cta-title { font-family: var(--display); font-size: clamp(72px, 9vw, 120px); color: var(--parchment); letter-spacing: 0.04em; margin-bottom: 40px; line-height: 0.9; position: relative; } .cta-btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 40px; background: var(--parchment); color: var(--navy); text-decoration: none; font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; transition: all 0.2s; position: relative; } .cta-btn:hover { background: #fff; } .cta-sub { font-family: var(--mono); font-size: 10px; color: rgba(240,235,227,0.3); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 28px; position: relative; } /* ── FOOTER ── */ footer { background: var(--navy-mid); padding: 28px 48px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.05); } .foot-logo { font-family: var(--display); font-size: 24px; color: rgba(240,235,227,0.35); letter-spacing: 0.15em; text-decoration: none; line-height: 1; } .foot-links { display: flex; gap: 24px; list-style: none; } .foot-links a { font-family: var(--mono); font-size: 10px; color: rgba(240,235,227,0.3); text-decoration: none; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.2s; } .foot-links a:hover { color: rgba(240,235,227,0.7); } .foot-credit { font-family: var(--mono); font-size: 10px; color: rgba(240,235,227,0.25); letter-spacing: 0.08em; } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ── MOBILE ── */ @media (max-width: 900px) { nav { padding: 16px 24px; flex-wrap: wrap; gap: 12px; } .nav-links { display: none; } .nav-right { width: 100%; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; } .store-cluster { flex: none; justify-content: flex-start; min-width: 0; } .lang-switch { flex-shrink: 0; } .hero { grid-template-columns: 1fr; min-height: auto; } .hero-left { padding: 56px 24px; border-right: none; } .hero-right { display: flex; padding: 40px 24px 56px; border-top: 1px solid var(--border); } .hero-right .bracket, .hero-right .hero-watermark { display: none; } .hero-right .phone-wrap { margin: 0 auto; } .hero-right .phone-shell { width: min(220px, 82vw); transform: none; } .hero-right .phone-shell:hover { transform: none; } .how { padding: 64px 24px; } .how-step, .how-step.reverse { grid-template-columns: 1fr; } .how-step.reverse .how-copy { order: 1; } .how-step.reverse .how-shot { order: 2; } .how-shot { display: flex; padding: 32px 24px 40px; border-top: 1px solid var(--border); } .how-step:not(.reverse) .how-copy, .how-step.reverse .how-copy { border: none; } .wordscope { grid-template-columns: 1fr; padding: 64px 24px; row-gap: 48px; } .ws-left { padding-right: 0; } .ws-right { display: flex; padding: 48px 24px 56px; border-left: none; border-top: 1px solid var(--border); } .ws-right .ws-phone { width: min(200px, 78vw); transform: none; } .ws-right .ws-phone:hover { transform: none; } .game-section { grid-template-columns: 1fr; padding: 64px 24px; } .game-copy { order: 1; padding: 0 0 8px 0; } .game-shot { display: flex; order: 2; padding: 40px 24px 48px; border-right: none; border-top: 1px solid var(--border); } .decks { padding: 64px 24px; } .langs { padding: 64px 24px; } .footer-cta { padding: 80px 24px; } footer { padding: 24px; flex-direction: column; gap: 16px; text-align: center; } }