:root { --ink: #f9f7ff; --muted: #b7b1ce; --night: #0b0b20; --card: #171632; --violet: #7258f6; --pink: #ef4ea7; --cyan: #47d9e9; --amber: #ffc34d; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ink); background: var(--night); font: 400 16px/1.6 "DM Sans", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -3; background: linear-gradient(120deg, #0b0b20 20%, #13103b 54%, #170d31); }
.page-glow { position: fixed; z-index: -2; width: 42rem; height: 42rem; border-radius: 50%; filter: blur(85px); opacity: .22; pointer-events: none; }.glow-one { top: -21rem; left: -18rem; background: var(--violet); }.glow-two { right: -17rem; top: 28rem; background: var(--pink); }
.nav { width: min(1180px, calc(100% - 40px)); height: 84px; margin: auto; display: flex; align-items: center; justify-content: space-between; }.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 1.1rem "Space Grotesk", sans-serif; }.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, var(--violet), var(--pink)); font-size: .75rem; }.nav-links { display: flex; align-items: center; gap: 28px; }.nav-links a { color: var(--muted); text-decoration: none; font-weight: 600; }.nav-links a:hover { color: white; }.hub-link { padding: 9px 15px; border: 1px solid #ffffff2b; border-radius: 999px; }.menu-button { display: none; color: white; background: transparent; border: 0; font-size: 1.25rem; }.mobile-menu { position: absolute; top: 72px; left: 20px; right: 20px; z-index: 10; padding: 20px; border: 1px solid #ffffff18; border-radius: 18px; background: #171632f2; box-shadow: 0 20px 40px #0006; }.mobile-menu a { display: block; padding: 10px; color: var(--ink); text-decoration: none; }
.hero { width: min(1180px, calc(100% - 40px)); min-height: 680px; margin: auto; display: grid; grid-template-columns: 1.03fr .97fr; gap: 30px; align-items: center; padding: 52px 0 70px; }.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; color: #d9d3f8; letter-spacing: .13em; font-size: .72rem; font-weight: 700; }.eyebrow span { width: 28px; height: 2px; background: linear-gradient(90deg, var(--pink), var(--violet)); }.hero h1, h2 { margin: 0; font-family: "Space Grotesk", sans-serif; line-height: 1.04; letter-spacing: -.055em; }.hero h1 { font-size: clamp(3.2rem, 6vw, 5.75rem); }.hero h1 em, h2 em { font-style: normal; background: linear-gradient(100deg, #c6b9ff, #ff88cc 62%, #ffd77b); -webkit-background-clip: text; background-clip: text; color: transparent; }.hero-text { max-width: 540px; margin: 24px 0 30px; color: var(--muted); font-size: 1.08rem; }.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }.store-button { display: inline-flex; align-items: center; gap: 11px; padding: 10px 18px; border-radius: 13px; color: white; text-decoration: none; background: white; color: #121027; box-shadow: 0 14px 28px #0004; transition: transform .2s, box-shadow .2s; }.store-button:hover { transform: translateY(-3px); box-shadow: 0 20px 35px #0006; }.store-button i { font-size: 1.65rem; }.store-button span { display: grid; line-height: 1.1; font-weight: 700; }.store-button small { font-size: .55rem; letter-spacing: .08em; }.text-button { color: #ddd7fa; font-weight: 700; text-decoration: none; }.text-button i { margin-left: 6px; }.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 32px; color: #c6c0db; font-size: .83rem; }.trust-row i { margin-right: 5px; color: var(--cyan); }
.phone-wrap { position: relative; display: grid; place-items: center; min-height: 600px; }.phone { position: relative; z-index: 1; width: 282px; padding: 12px 11px 16px; overflow: hidden; border: 7px solid #302e4b; border-radius: 38px; background: linear-gradient(155deg, #21184f, #0d1234 70%); box-shadow: 0 30px 60px #0008, inset 0 0 18px #b192ff26; }.phone-top, .app-top, .progress { display: flex; align-items: center; justify-content: space-between; }.phone-top { padding: 0 8px 13px; font-size: .65rem; }.app-top { gap: 6px; font-size: .72rem; }.back-circle { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #ffffff16; }.stars { padding: 5px 7px; border-radius: 8px; background: #ffc343; color: #482800; font-weight: 700; }.progress { margin: 13px 3px 10px; color: #d2cce7; font-size: .64rem; }.progress b { color: #7de8fa; }.crossword { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 10px; border-radius: 17px; background: #070a25b8; }.cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 3px; color: #fff; background: #383866; font: 700 .74rem "Space Grotesk", sans-serif; }.cell:empty { background: transparent; }.cell.purple { background: #7258f6; }.cell.blue { background: #3fa6dd; }.cell.green { background: #59ca99; }.cell.orange { background: #f2a54c; }.cell.pink { background: #dc63b9; }.clue-card { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-top: 12px; padding: 10px; border: 1px solid #ffffff16; border-radius: 12px; background: #ffffff0c; }.clue-card p { margin: 0; font-size: .62rem; line-height: 1.25; }.clue-card i { color: var(--amber); font-size: .75rem; }.clue-number { padding: 4px; border-radius: 5px; background: #7258f6; font-size: .6rem; }.keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 13px; }.keys span { width: 18px; padding: 5px 0; border-radius: 4px; background: #303159; text-align: center; font-size: .51rem; font-weight: 700; }.orbit { position: absolute; width: 430px; height: 430px; border: 1px solid #bcb3ff21; border-radius: 50%; }.orbit-a { transform: rotate(-25deg) scaleY(.55); }.orbit-b { width: 530px; height: 530px; transform: rotate(55deg) scaleY(.38); border-color: #ff83cf1c; }.float-card { position: absolute; z-index: 2; display: grid; grid-template-columns: auto auto; column-gap: 5px; align-items: center; padding: 10px 13px; border: 1px solid #ffffff25; border-radius: 12px; background: #211d45e8; box-shadow: 0 15px 30px #0005; font-size: .9rem; }.float-card strong { font-size: .7rem; }.float-card small { grid-column: 2; color: var(--muted); font-size: .58rem; }.float-streak { top: 125px; right: 7%; }.float-daily { bottom: 96px; left: 5%; }
.feature-section, .language-section, .download-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }.feature-section { padding: 105px 0; }.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 40px; }.section-heading h2, .language-copy h2, .download-section h2 { font-size: clamp(2.45rem, 5vw, 4.3rem); }.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.feature-card { min-height: 244px; padding: 25px; border: 1px solid #ffffff12; border-radius: 20px; background: linear-gradient(145deg, #201e42b8, #15152d99); transition: transform .25s, border-color .25s; }.feature-card:hover { transform: translateY(-6px); border-color: #ffffff3a; }.feature-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 34px; border-radius: 13px; font-size: 1.05rem; }.violet { background: #7258f633; color: #b4a7ff; }.pink { background: #ef4ea733; color: #ff9ace; }.cyan { background: #47d9e933; color: #8cecf6; }.amber { background: #ffc34d33; color: #ffdb83; }.feature-card h3 { margin: 0 0 8px; font: 700 1.1rem "Space Grotesk", sans-serif; }.feature-card p, .language-copy > p, .download-section p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.language-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 65px; align-items: center; padding: 90px 0; border-top: 1px solid #ffffff14; }.language-copy > p:last-child { max-width: 450px; margin-top: 22px; }.language-cloud { display: flex; flex-wrap: wrap; gap: 10px; }.language-cloud span { padding: 11px 15px; border: 1px solid #ffffff16; border-radius: 999px; background: #ffffff0a; color: #e6e1f7; font-size: .88rem; }.language-cloud span:nth-child(2n) { transform: translateY(13px); }.download-section { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 60px; margin-bottom: 80px; padding: 50px; overflow: hidden; border-radius: 25px; background: linear-gradient(115deg, #6f50f2, #d548a0 62%, #f29c59); }.download-section .eyebrow { color: #fff; }.download-section .eyebrow span { background: white; }.download-section p { color: #fbe9fa; margin-top: 9px; }.store-button.light { background: #fff; }
footer { width: min(1180px, calc(100% - 40px)); margin: auto; padding: 28px 0 40px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ffffff14; color: var(--muted); font-size: .8rem; } footer p { margin: 0; } footer > a:last-child { color: var(--muted); }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }.reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 35px; text-align: center; }.hero-copy { display: grid; justify-items: center; }.trust-row { justify-content: center; }.phone-wrap { min-height: 555px; }.feature-grid { grid-template-columns: repeat(2, 1fr); }.language-section { grid-template-columns: 1fr; gap: 35px; }.language-copy { text-align: center; }.language-copy .eyebrow { justify-content: center; }.language-copy > p:last-child { margin-left: auto; margin-right: auto; }.language-cloud { justify-content: center; }.download-section { text-align: center; flex-direction: column; }.download-section .eyebrow { justify-content: center; } }
@media (max-width: 590px) { .nav { height: 72px; width: min(100% - 28px, 1180px); }.nav-links { display: none; }.menu-button { display: block; }.hero, .feature-section, .language-section, .download-section, footer { width: min(100% - 28px, 1180px); }.hero { min-height: auto; padding-top: 42px; }.hero h1 { font-size: 3.35rem; }.hero-text { font-size: .98rem; }.phone-wrap { min-height: 510px; transform: scale(.9); margin: -10px -25px; }.feature-section { padding: 70px 0; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: auto; }.section-heading { display: block; }.section-heading h2 { margin-top: 12px; }.language-section { padding: 65px 0; }.download-section { width: min(100% - 28px, 1180px); margin-top: 15px; padding: 36px 22px; }.download-section h2 { font-size: 2.6rem; } footer { flex-wrap: wrap; gap: 14px; } }