@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Space+Grotesk:wght@400;500;700&display=swap');

:root { --accent:#7C6CFF; --accent2:#38BDF8; --bg:#05060B; --text:#EDEFF7; --muted:#9BA3B5; --app:#7C6CFF; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Space Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:#A5B4FC; text-decoration:none; }
::selection { background:rgba(124,108,255,.4); }
h1,h2,h3 { font-family:'Unbounded',sans-serif; }
.wrap { max-width:1160px; margin:0 auto; padding:0 32px; }

header { position:fixed; top:0; left:0; right:0; z-index:100; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); background:rgba(5,6,11,.6); border-bottom:1px solid rgba(255,255,255,.06); }
header nav { max-width:1160px; margin:0 auto; padding:15px 32px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.logo { font-family:'Unbounded',sans-serif; font-weight:900; font-size:14px; letter-spacing:.02em; color:var(--text); }
.logo span { color:var(--app); }
.nav-right { display:flex; align-items:center; gap:18px; }
.nav-right a { color:var(--muted); font-size:14px; font-weight:500; }
.nav-right a:hover { color:var(--text); }
.nav-right a.lang { color:var(--text); font-size:12px; font-weight:700; padding:6px 14px; border:1px solid rgba(255,255,255,.16); border-radius:999px; }
.nav-right a.lang:hover { border-color:var(--app); }

.hero { position:relative; overflow:hidden; padding:150px 0 60px; }
.hero-glow { position:absolute; top:-220px; left:50%; width:1100px; height:700px; margin-left:-550px; background:radial-gradient(ellipse at center, color-mix(in srgb, var(--app) 24%, transparent), transparent 62%); pointer-events:none; }
.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.app-id { display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.app-id img { width:76px; height:76px; border-radius:18px; border:1px solid rgba(255,255,255,.15); }
.app-id h1 { font-weight:900; font-size:clamp(28px,3.6vw,44px); line-height:1.05; margin:0; text-transform:uppercase; letter-spacing:-.01em; }
.tagline { font-size:clamp(17px,1.9vw,21px); line-height:1.5; color:#C6CCDA; margin:0 0 26px; max-width:520px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.chips span { font-size:12px; font-weight:700; padding:6px 13px; border-radius:999px; border:1px solid color-mix(in srgb, var(--app) 45%, transparent); color:var(--app); }
.store-btns { display:flex; flex-wrap:wrap; gap:12px; }
.store-btns a { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; padding:12px 22px; border-radius:999px; }
.store-btns a.primary { background:linear-gradient(90deg,var(--app),#5B8DEF); color:#fff; box-shadow:0 12px 34px -10px color-mix(in srgb, var(--app) 70%, transparent); }
.store-btns a.primary:hover { transform:translateY(-2px); }
.store-btns a.ghost { color:var(--text); border:1px solid rgba(255,255,255,.18); }
.store-btns a.ghost:hover { border-color:var(--app); }
.store-btns a { transition:transform .2s ease, border-color .2s ease; }
.soon { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--muted); padding:12px 20px; border:1px dashed rgba(255,255,255,.2); border-radius:999px; }

.hero-shot { display:flex; justify-content:center; }
.hero-shot img { width:min(300px,78%); border-radius:30px; border:1px solid rgba(255,255,255,.14); box-shadow:-30px 40px 90px -24px rgba(0,0,0,.8), 0 0 70px -10px color-mix(in srgb, var(--app) 45%, transparent); }
.hero-shot img.frame { border-radius:38px; }

section.block { padding:66px 0; border-top:1px solid rgba(255,255,255,.07); }
.block h2 { font-weight:900; font-size:clamp(24px,3vw,38px); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 12px; }
.block .lead { color:var(--muted); font-size:16px; max-width:620px; margin:0 0 44px; line-height:1.6; }
.section-tag { font-family:'Unbounded',sans-serif; font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--app); margin-bottom:16px; }

.features { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.feature { border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:28px; background:rgba(255,255,255,.02); transition:border-color .2s ease, transform .2s ease; }
.feature:hover { border-color:color-mix(in srgb, var(--app) 45%, transparent); transform:translateY(-3px); }
.feature .ic { width:42px; height:42px; display:flex; align-items:center; justify-content:center; font-size:22px; border-radius:12px; background:color-mix(in srgb, var(--app) 16%, transparent); margin-bottom:16px; }
.feature h3 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; margin:0 0 10px; }
.feature p { font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }

.shots { display:flex; gap:20px; overflow-x:auto; padding:6px 0 22px; scroll-snap-type:x mandatory; }
.shots::-webkit-scrollbar { height:8px; }
.shots::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:99px; }
.shot { flex:0 0 auto; scroll-snap-align:center; }
.shot img { display:block; border:1px solid rgba(255,255,255,.12); border-radius:22px; box-shadow:0 24px 60px -22px rgba(0,0,0,.7); }
.shot.portrait img { height:520px; width:auto; }
.shot.landscape img { height:300px; width:auto; border-radius:16px; }
.shot .cap { margin-top:12px; font-size:12.5px; color:var(--muted); text-align:center; }

.cta { position:relative; overflow:hidden; text-align:center; border-top:1px solid rgba(255,255,255,.07); }
.cta-glow { position:absolute; bottom:-260px; left:50%; width:900px; height:560px; margin-left:-450px; background:radial-gradient(ellipse at center, color-mix(in srgb, var(--app) 18%, transparent), transparent 65%); pointer-events:none; }
.cta-inner { position:relative; padding:100px 32px; }
.cta h2 { font-weight:900; font-size:clamp(24px,3vw,40px); text-transform:uppercase; margin:0 0 20px; }
.cta a.back { display:inline-block; margin-top:8px; font-family:'Unbounded',sans-serif; font-weight:700; font-size:14px; color:var(--text); border-bottom:2px solid var(--app); padding-bottom:6px; }

footer { border-top:1px solid rgba(255,255,255,.07); padding:36px 32px; }
footer .inner { max-width:1160px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
footer p { color:#5A6172; font-size:13px; margin:0; }

[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity:1; transform:translateY(0); }

@media (max-width: 900px) {
  .hero { padding:120px 0 40px; }
  .hero-inner { grid-template-columns:1fr; gap:36px; }
  .hero-shot { order:-1; }
  .features { grid-template-columns:1fr; }
  .shot.portrait img { height:440px; }
  .shot.landscape img { height:240px; }
}