:root {
  --bg: #09090a;
  --bg-soft: #111113;
  --card: rgba(20,20,22,.78);
  --card-2: #151516;
  --text: #f4f1eb;
  --muted: #a7a4a0;
  --line: rgba(255,255,255,.09);
  --gold: #d1a451;
  --gold-hi: #f0ca78;
  --gold-soft: rgba(209,164,81,.14);
  --shadow: 0 30px 80px rgba(0,0,0,.44);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 80% 10%, rgba(209,164,81,.08), transparent 24rem),
    linear-gradient(180deg, #09090a 0%, #0c0c0d 55%, #09090a 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display:block; max-width:100%; }

.ambient { position:fixed; inset:auto; pointer-events:none; filter: blur(90px); opacity:.3; z-index:-1; }
.ambient-one { width:380px; height:380px; right:-120px; top:340px; background:rgba(195,148,63,.12); }
.ambient-two { width:320px; height:320px; left:-120px; top:1100px; background:rgba(120,120,120,.07); }

.topbar {
  width:min(1180px, calc(100% - 36px));
  margin:18px auto 0;
  height:68px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--line);
  background:rgba(11,11,12,.72);
  backdrop-filter: blur(18px);
  border-radius:18px;
  position:sticky;
  top:14px;
  z-index:20;
}

.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.14em; }
.brand img { border-radius:10px; box-shadow:0 8px 25px rgba(0,0,0,.4); }
.brand span span { color:var(--gold-hi); }
nav { display:flex; gap:26px; align-items:center; color:#c7c3bd; font-size:.95rem; }
nav a { transition:.2s ease; }
nav a:hover { color:white; }
.nav-cta { border:1px solid rgba(209,164,81,.35); padding:10px 14px; border-radius:10px; color:var(--gold-hi); background:var(--gold-soft); }

main { width:min(1180px, calc(100% - 36px)); margin:0 auto; }
.hero {
  min-height:720px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:60px;
  padding:92px 0 78px;
}
.eyebrow { color:var(--gold-hi); font-size:.76rem; letter-spacing:.22em; font-weight:800; margin:0 0 18px; }
h1 { margin:0; font-size:clamp(3rem, 6vw, 5.7rem); line-height:.96; letter-spacing:-.055em; max-width:760px; }
h1 span { color:#c9c5be; font-weight:600; }
.hero-text { color:var(--muted); font-size:1.12rem; line-height:1.72; max-width:660px; margin:26px 0 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.btn { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; border-radius:12px; border:1px solid var(--line); font-weight:750; transition:.2s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-gold { background:linear-gradient(135deg,#c99743,#e0b869); color:#111; border-color:#d7af62; box-shadow:0 12px 36px rgba(209,164,81,.16); }
.btn-ghost { background:rgba(255,255,255,.025); color:#ddd8d0; }

.hero-logo { display:flex; justify-content:center; }
.logo-frame {
  width:min(520px, 100%);
  aspect-ratio:1;
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(209,164,81,.18);
  box-shadow:var(--shadow), 0 0 80px rgba(209,164,81,.07);
  position:relative;
}
.logo-frame::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 45px rgba(255,213,126,.035); pointer-events:none; }
.logo-frame img { width:100%; height:100%; object-fit:cover; }

.section { padding:110px 0 80px; }
.section-heading { max-width:700px; margin-bottom:34px; }
.section-heading h2, .about-copy h2 { margin:0; font-size:clamp(2.2rem,4vw,3.6rem); letter-spacing:-.04em; }
.section-heading > p:last-child, .about-copy > p:last-child { color:var(--muted); line-height:1.7; font-size:1.03rem; }

.app-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.app-card {
  padding:30px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(22,22,24,.94),rgba(15,15,17,.95));
  border:1px solid var(--line);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  transition:.25s ease;
}
.app-card:hover { transform:translateY(-5px); border-color:rgba(209,164,81,.22); box-shadow:0 24px 70px rgba(0,0,0,.34); }
.app-icon, .download-badge {
  width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  font-weight:900; letter-spacing:-.04em; color:#17130d;
  background:linear-gradient(145deg,#e5c37b,#ad7d33);
  box-shadow:inset 0 1px rgba(255,255,255,.38);
}
.app-icon-nexa, .download-badge-nexa { background:linear-gradient(145deg,#ece8df,#7d7973); color:#161616; }
.app-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:24px 0 10px; }
.pill { font-size:.75rem; color:#d9d5ce; border:1px solid var(--line); border-radius:999px; padding:7px 10px; }
.status-dot { font-size:.78rem; color:#aaa59e; }
.status-dot i { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--gold-hi); margin-right:6px; box-shadow:0 0 12px rgba(240,202,120,.45); }
.app-card h3 { margin:10px 0 12px; font-size:1.8rem; letter-spacing:-.025em; }
.app-card > p { color:var(--muted); line-height:1.65; min-height:78px; }
.app-features { display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 26px; }
.app-features span { padding:7px 9px; border-radius:8px; background:rgba(255,255,255,.04); color:#bab6af; font-size:.78rem; }
.download-link { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:20px; font-weight:750; color:#e7c985; }
.download-link strong { font-size:1.25rem; }

.about-band {
  margin:60px 0 20px;
  padding:42px;
  border:1px solid rgba(209,164,81,.18);
  border-radius:28px;
  background:linear-gradient(120deg,rgba(209,164,81,.10),rgba(255,255,255,.025) 45%,rgba(255,255,255,.01));
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:40px;
  align-items:center;
}
.about-copy { max-width:720px; }
.about-mark { display:flex; justify-content:flex-end; }
.about-mark img { width:min(260px,100%); border-radius:24px; box-shadow:0 26px 55px rgba(0,0,0,.34); }

.downloads { padding-bottom:120px; }
.download-list { display:grid; gap:12px; }
.download-row {
  display:grid;
  grid-template-columns:58px 1fr auto;
  align-items:center;
  gap:18px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.02);
  transition:.2s ease;
}
.download-row:hover { border-color:rgba(209,164,81,.26); background:rgba(209,164,81,.045); transform:translateX(3px); }
.download-row > div:nth-child(2) { display:flex; flex-direction:column; gap:5px; }
.download-row strong { font-size:1.02rem; }
.download-row span { color:var(--muted); font-size:.88rem; }
.download-button { color:var(--gold-hi)!important; font-weight:750; display:flex; align-items:center; gap:9px; }
.download-button b { font-size:1.15rem; }

footer {
  width:min(1180px, calc(100% - 36px));
  margin:0 auto 30px;
  padding:22px 0 8px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#807d78;
  font-size:.86rem;
}
.footer-brand { display:flex; align-items:center; gap:9px; color:#c6c2bb; letter-spacing:.12em; }
.footer-brand img { border-radius:8px; }

.download-row { cursor: default; }
a.download-row { cursor: pointer; }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 840px) {
  nav a:not(.nav-cta) { display:none; }
  .topbar { height:62px; }
  .hero { grid-template-columns:1fr; min-height:auto; padding:76px 0 40px; gap:42px; }
  .hero-copy { text-align:center; }
  .hero-text { margin-left:auto; margin-right:auto; }
  .hero-actions { justify-content:center; }
  .hero-logo { order:-1; }
  .logo-frame { width:min(440px, 86vw); border-radius:26px; }
  .app-grid { grid-template-columns:1fr; }
  .about-band { grid-template-columns:1fr; padding:30px; }
  .about-mark { justify-content:flex-start; }
}

@media (max-width: 560px) {
  .topbar, main, footer { width:min(100% - 22px, 1180px); }
  .brand { font-size:.9rem; }
  .brand img { width:38px; height:38px; }
  .nav-cta { padding:9px 11px; font-size:.82rem; }
  .hero { padding-top:56px; }
  h1 { font-size:clamp(2.7rem,14vw,4rem); }
  .section { padding:78px 0 50px; }
  .app-card { padding:22px; }
  .download-row { grid-template-columns:48px 1fr; }
  .download-badge { width:48px; height:48px; border-radius:13px; }
  .download-button { grid-column:2; justify-self:start; }
  footer { flex-direction:column; gap:12px; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none!important; animation:none!important; }
  .reveal { opacity:1; transform:none; }
}
