:root { --bg:#070d12; --panel:#0d171d; --panel-2:#111f26; --ink:#edf5ef; --muted:#91a7a3; --dim:#5d7774; --line:rgba(185,218,208,.17); --cyan:#34e4d2; --orange:#ff713f; --lime:#d9f16e; --display:'Barlow Condensed',sans-serif; --body:'Manrope',sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--bg); font-family:var(--body); line-height:1.5; overflow-x:hidden; } body:before { content:''; position:fixed; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(circle at 12% 0%,rgba(255,113,63,.12),transparent 28%),radial-gradient(circle at 87% 50%,rgba(52,228,210,.08),transparent 30%); } a { color:inherit; text-decoration:none; } button,input,textarea,select { font:inherit; } .section-shell { width:min(1180px,calc(100% - 64px)); margin:0 auto; }
.site-header { width:min(1280px,calc(100% - 64px)); min-height:84px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:25px; position:relative; z-index:5; } .brand { display:flex; align-items:center; gap:12px; } .brand-mark { display:grid; place-items:center; width:38px; height:38px; color:var(--bg); background:var(--cyan); font-size:13px; font-weight:900; transform:skew(-9deg); box-shadow:4px 4px 0 rgba(52,228,210,.18); } .brand strong { display:block; font:800 18px/1 var(--display); letter-spacing:.12em; } .brand small { display:block; margin-top:5px; color:var(--dim); font-size:9px; letter-spacing:.18em; } .header-actions { display:flex; align-items:center; gap:25px; } .language-switcher { display:flex; align-items:center; gap:6px; color:var(--dim); font-size:10px; font-weight:800; letter-spacing:.12em; } .language-switcher button { padding:4px 2px; color:var(--dim); border:0; background:transparent; cursor:pointer; font:inherit; letter-spacing:inherit; } .language-switcher button[aria-pressed=true],.language-switcher button:hover { color:var(--cyan); } .mini-link { color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:.12em; } .mini-link span { margin-left:7px; font-size:15px; }
.hero { padding:22px 0 90px; } .hero-art { position:relative; min-height:645px; overflow:hidden; border:1px solid rgba(52,228,210,.34); background:#10191e; box-shadow:25px 25px 0 rgba(0,0,0,.2); } .hero-art img { display:block; width:100%; height:645px; object-fit:cover; object-position:center; } .hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,10,14,.91) 0%,rgba(3,10,14,.62) 34%,rgba(3,10,14,.12) 68%,rgba(3,10,14,.45) 100%),linear-gradient(0deg,rgba(3,10,14,.82),transparent 35%); } .hero-grid { position:absolute; inset:0; opacity:.2; background:linear-gradient(90deg,transparent 49.8%,rgba(52,228,210,.33) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(52,228,210,.22) 50%,transparent 50.2%); background-size:160px 160px; mask-image:linear-gradient(90deg,black,transparent 68%); } .hero-content { position:absolute; top:50%; left:clamp(27px,6vw,80px); width:min(520px,70%); transform:translateY(-50%); } .eyebrow { margin:0; color:var(--cyan); font-size:11px; font-weight:800; letter-spacing:.19em; } .pulse-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(255,113,63,.15); vertical-align:1px; } h1,h2 { margin:0; font-family:var(--display); font-weight:900; line-height:.82; letter-spacing:-.02em; text-transform:uppercase; } h1 { margin:22px 0 25px; font-size:clamp(84px,12vw,165px); } h1 em,h2 em { color:var(--cyan); font-style:normal; } .hero-lead { max-width:465px; margin:0 0 28px; color:#c0d0c9; font-size:15px; } .hero-button { display:inline-flex; align-items:center; gap:20px; padding:14px 18px; color:var(--bg); background:var(--cyan); font-size:11px; font-weight:900; letter-spacing:.12em; transition:transform .2s,background .2s; } .hero-button:hover { background:#b4f8ef; transform:translateY(-2px); } .hero-button span { font-size:20px; } .hero-stamp { position:absolute; top:28px; right:28px; display:flex; align-items:center; gap:11px; color:var(--cyan-soft); font-size:9px; letter-spacing:.12em; text-align:right; } .hero-stamp b { color:var(--orange); font:800 45px/1 var(--display); } .hero-caption { position:absolute; right:23px; bottom:20px; left:23px; display:flex; justify-content:space-between; color:rgba(237,245,239,.62); font-size:9px; letter-spacing:.14em; } 
.download-section { padding:0 0 118px; } .section-kicker { display:flex; align-items:center; gap:15px; margin-bottom:27px; } .section-kicker > span:first-child { color:var(--orange); font:800 30px/1 var(--display); } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:38px; } h2 { font-size:clamp(59px,7vw,95px); } .section-heading p { max-width:325px; margin:0 0 5px; color:var(--muted); font-size:14px; } .download-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; } .download-card { display:flex; align-items:center; gap:18px; min-height:148px; padding:25px; border:1px solid var(--line); background:linear-gradient(135deg,rgba(17,31,38,.94),rgba(8,18,23,.9)); transition:transform .2s,border-color .2s,background .2s; } .download-card:hover { transform:translateY(-4px); border-color:var(--cyan); background:linear-gradient(135deg,rgba(26,61,65,.96),rgba(8,18,23,.92)); } .download-card-primary { border-color:rgba(52,228,210,.55); background:linear-gradient(135deg,rgba(20,72,73,.82),rgba(8,18,23,.94)); } .download-icon { display:grid; place-items:center; width:54px; height:54px; color:var(--cyan); border:1px solid currentColor; font-size:25px; } .download-copy { flex:1; } .download-copy small { display:block; margin-bottom:4px; color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:.15em; } .download-copy strong { display:block; font:700 29px/1 var(--display); letter-spacing:.04em; } .download-copy span { display:block; margin-top:9px; color:var(--muted); font-size:11px; } .download-copy span b { color:var(--cyan); } .download-arrow { color:var(--cyan); font-size:25px; } .download-note { margin:15px 0 0; color:var(--dim); font-size:11px; }
.feedback-section { padding:0 0 100px; border-top:1px solid var(--line); padding-top:76px; } .feedback-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:70px; } .feedback-intro h2 { margin-top:4px; } .feedback-intro p { max-width:325px; margin:27px 0 0; color:var(--muted); font-size:14px; } .feedback-box { padding:26px; border:1px solid var(--line); background:rgba(13,23,29,.84); } label { display:block; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.13em; } input,textarea,select { display:block; width:100%; margin-top:8px; padding:12px 13px; color:var(--ink); border:1px solid var(--line); outline:none; border-radius:0; background:#071217; font-size:14px; letter-spacing:0; } textarea { min-height:106px; resize:vertical; } input:focus,textarea:focus,select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(52,228,210,.08); } .form-row { display:grid; grid-template-columns:1.2fr .65fr; gap:14px; margin-bottom:15px; } .form-actions { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:15px; } .form-actions > span { color:var(--dim); font-size:11px; } .form-actions button { padding:12px 15px; color:var(--bg); border:0; background:var(--cyan); cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.13em; transition:transform .2s,background .2s; } .form-actions button:hover { background:#b4f8ef; transform:translateY(-2px); } .form-actions button b { margin-left:8px; font-size:14px; } .form-status { min-height:20px; margin:11px 0 0; color:var(--cyan); font-size:11px; } .comment-list { display:grid; gap:9px; margin-top:25px; } .comment { padding:14px 15px; border:1px solid var(--line); background:rgba(255,255,255,.02); } .comment-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } .comment-person { display:flex; align-items:center; gap:8px; } .avatar { display:grid; place-items:center; width:26px; height:26px; color:var(--bg); border-radius:50%; background:var(--lime); font-size:10px; font-weight:900; } .comment-name { font-size:12px; font-weight:800; } .comment-date { color:var(--dim); font-size:10px; } .stars { color:var(--orange); font-size:11px; letter-spacing:2px; } .comment p { margin:8px 0 0 34px; color:var(--muted); font-size:12px; } .empty-comments { padding:16px; color:var(--dim); border:1px dashed var(--line); font-size:12px; text-align:center; }
.site-footer { display:flex; align-items:center; justify-content:space-between; min-height:88px; color:var(--dim); border-top:1px solid var(--line); font-size:10px; letter-spacing:.12em; } .site-footer a { color:var(--cyan); font-size:18px; }
@media (max-width:760px) { .section-shell,.site-header { width:calc(100% - 36px); } .site-header { min-height:74px; } .brand strong { font-size:15px; } .mini-link { display:none; } .hero { padding-top:12px; padding-bottom:65px; } .hero-art,.hero-art img { min-height:590px; height:590px; } .hero-content { top:auto; bottom:55px; left:25px; width:calc(100% - 50px); transform:none; } h1 { font-size:clamp(82px,24vw,130px); } .hero-stamp { top:22px; right:18px; } .hero-caption { right:15px; bottom:15px; left:15px; flex-wrap:wrap; gap:8px; } .section-heading,.feedback-layout { display:grid; grid-template-columns:1fr; gap:25px; } .download-grid { grid-template-columns:1fr; } .download-card { min-height:127px; padding:20px; } .download-copy strong { font-size:26px; } .feedback-section { padding-top:60px; } .feedback-box { padding:18px; } }
@media (max-width:440px) { .language-switcher { font-size:9px; } .hero-art,.hero-art img { min-height:555px; height:555px; } .hero-content { bottom:48px; } .hero-lead { font-size:13px; } .form-row { grid-template-columns:1fr; gap:14px; } .site-footer { align-items:flex-start; flex-wrap:wrap; gap:10px; padding:24px 0; } }

/* Hero adjustment: smaller title, moved upward, with the marked labels removed. */
.hero-content { top:18%; left:clamp(42px,8vw,105px); transform:none; }
.hero-content h1 { margin:0 0 25px; font-size:clamp(52px,6vw,82px); }
@media (max-width:760px) { .hero-content { top:16%; bottom:auto; left:25px; transform:none; } .hero-content h1 { font-size:clamp(48px,13vw,70px); } }
@media (max-width:440px) { .hero-content { top:15%; bottom:auto; } }

/* Download strip inspired by the requested store-badge layout. */
.download-section { width:100%; max-width:none; padding:86px 32px 82px; background:radial-gradient(ellipse at center top,rgba(52,228,210,.13),transparent 46%),linear-gradient(180deg,#0b171d,#071015); border-top:1px solid rgba(52,228,210,.3); border-bottom:1px solid rgba(52,228,210,.28); }
.download-section .section-kicker { display:none; }
.download-section .section-heading { display:block; width:min(1180px,100%); margin:0 auto 31px; text-align:center; }
.download-section .section-heading h2 { font-size:clamp(38px,5vw,67px); line-height:.9; letter-spacing:.01em; }
.download-section .section-heading p { max-width:610px; margin:15px auto 0; color:rgba(237,245,239,.64); font-size:13px; }
.download-grid { display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; gap:16px; width:min(750px,100%); margin:0 auto; }
.download-card { flex:1 1 300px; min-height:92px; max-width:360px; padding:14px 16px; gap:13px; border:2px solid rgba(255,255,255,.88); border-radius:8px; background:rgba(3,9,13,.8); box-shadow:0 7px 0 rgba(0,0,0,.15); }
.download-card-primary { border-color:rgba(255,255,255,.88); background:rgba(3,9,13,.88); }
.download-card:hover { border-color:var(--cyan); background:rgba(15,35,40,.96); }
.download-icon { width:40px; height:40px; flex:0 0 40px; border:0; color:var(--cyan); font-size:23px; }
.download-copy small { margin-bottom:2px; color:rgba(255,255,255,.82); font-size:9px; letter-spacing:.11em; }
.download-copy strong { font-size:25px; color:#fff; }
.download-copy span { margin-top:4px; color:rgba(237,245,239,.7); font-size:10px; }
.download-arrow { color:#fff; font-size:22px; }
.download-free-title { position:relative; width:min(880px,100%); margin:31px auto 0; padding:13px 0 10px; color:#f4fbf7; font:700 clamp(30px,4.4vw,57px)/1 var(--display); letter-spacing:.02em; text-align:center; text-shadow:0 0 18px rgba(52,228,210,.23); }
.download-free-title:before,.download-free-title:after { content:''; position:absolute; right:0; left:0; height:1px; background:linear-gradient(90deg,transparent,rgba(52,228,210,.76),transparent); }
.download-free-title:before { top:0; }.download-free-title:after { bottom:0; }
.download-free-title span { color:var(--cyan); }
.download-note { width:min(750px,100%); margin:15px auto 0; color:rgba(237,245,239,.5); text-align:center; }
@media (max-width:760px) { .download-section { padding:68px 18px 64px; } .download-section .section-heading p { font-size:12px; } .download-grid { gap:11px; } .download-card { flex-basis:100%; max-width:430px; } .download-free-title { margin-top:25px; } }

/* Full-screen hero background. */
.site-header { position:absolute; top:0; right:0; left:0; width:100%; padding:0 clamp(22px,7vw,100px); }
.hero.section-shell { width:100%; max-width:none; margin:0; padding:0; }
.hero-art { min-height:100svh; height:100svh; border:0; box-shadow:none; }
.hero-art img { width:100%; height:100svh; object-fit:cover; object-position:center center; }
.hero-art:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(3,8,12,.48),transparent 22%,transparent 78%,rgba(3,8,12,.32)); }
.hero-downloads { position:absolute; right:0; bottom:19%; left:0; z-index:3; display:flex; justify-content:center; gap:15px; padding:0 24px; }
.store-badge { display:flex; align-items:center; gap:11px; width:min(300px,42vw); min-height:70px; padding:9px 13px; color:#fff; border:2px solid rgba(255,255,255,.94); border-radius:8px; background:rgba(0,0,0,.84); box-shadow:0 4px 0 rgba(0,0,0,.28); transition:transform .2s,background .2s,border-color .2s; }
.store-badge:hover { transform:translateY(-3px); border-color:var(--cyan); background:rgba(4,17,20,.95); }
.store-badge-icon { display:grid; place-items:center; width:41px; height:41px; flex:0 0 41px; border-radius:8px; color:#071015; font:900 22px/1 var(--display); }
.android-badge-icon { background:#35df8b; }.windows-badge-icon { background:#54b7ff; }
.store-badge-copy { flex:1; min-width:0; }.store-badge-copy small { display:block; color:rgba(255,255,255,.82); font-size:9px; font-weight:700; letter-spacing:.11em; }.store-badge-copy strong { display:block; margin-top:2px; font:700 clamp(21px,2vw,29px)/1 var(--display); letter-spacing:.02em; white-space:nowrap; }.store-badge-arrow { font-size:24px; }
@media (max-width:760px) { .site-header { padding:0 18px; } .hero-art,.hero-art img { min-height:100svh; height:100svh; } }
@media (max-width:760px) { .hero-downloads { bottom:17%; flex-direction:column; align-items:center; gap:9px; padding:0 18px; } .store-badge { width:min(340px,100%); min-height:61px; } .store-badge-icon { width:34px; height:34px; flex-basis:34px; font-size:18px; } .store-badge-copy strong { font-size:23px; } }

.header-left { display:flex; align-items:center; gap:24px; }
.header-socials { display:flex; align-items:center; gap:9px; }
.header-socials a { display:grid; place-items:center; width:60px; height:60px; color:var(--ink); border:1px solid rgba(255,255,255,.28); border-radius:50%; background:rgba(3,10,14,.52); transition:color .2s, border-color .2s, background .2s, transform .2s; }
.header-socials a:hover { color:var(--cyan); border-color:var(--cyan); background:rgba(3,10,14,.86); transform:translateY(-2px); }
.header-socials svg { width:30px; height:30px; fill:currentColor; }
@media (max-width:760px) { .header-left { gap:12px; } .header-socials { gap:7px; } .header-socials a { width:54px; height:54px; } .header-socials svg { width:27px; height:27px; } }

/* Larger display typography for the top navigation controls. */
.language-switcher,
.mini-link { font-family:var(--display); font-size:20px; font-weight:800; letter-spacing:.1em; }
.mini-link span { font-size:30px; }