:root {
  --night: #080b12;
  --night-soft: #10151e;
  --ink: #11151d;
  --muted: #86909d;
  --line: rgba(255,255,255,.11);
  --lime: #c9f56a;
  --violet: #8b73ff;
  --blue: #6f99ff;
  --paper: #f5f6f8;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.shell { width: min(100% - 40px, 1040px); margin: 0 auto; }
.ambient { position: fixed; z-index: -2; width: 410px; height: 410px; border-radius: 50%; filter: blur(110px); opacity: .23; pointer-events: none; }
.ambient-a { top: 9vh; left: -250px; background: var(--violet); }
.ambient-b { right: -260px; bottom: 2vh; background: var(--lime); }
.topbar { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid rgba(255,255,255,.09); color: white; background: rgba(8,11,18,.88); backdrop-filter: blur(17px); }
.topbar .shell { display: flex; align-items: center; justify-content: space-between; height: 69px; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 9px; font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .9px; }
.brand-badge { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: var(--night); background: var(--lime); font-size: 10px; letter-spacing: -1px; box-shadow: 0 4px 18px rgba(201,245,106,.23); }
.brand-badge.small { width: 23px; height: 23px; border-radius: 7px; font-size: 8px; }
.topbar-status { display: flex; align-items: center; gap: 7px; color: #8f9aaa; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; }
.topbar-status i, .panel-live i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(201,245,106,.12), 0 0 14px var(--lime); }
.page-shell { padding: 70px 0 76px; }
.intro { max-width: 640px; margin: 0 auto 28px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #8c96a3; font-size: 9px; font-weight: 700; letter-spacing: 2px; }
.eyebrow b { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--lime); transform: rotate(45deg); }
h1 { margin: 18px 0 13px; color: var(--night); font-family: "Space Grotesk", sans-serif; font-size: clamp(44px, 9vw, 76px); line-height: .92; letter-spacing: -4px; }
h1 span { color: #98d530; }
.intro-copy { max-width: 440px; margin: 0 auto; color: #7e8792; font-size: 13px; line-height: 1.65; }
.download-panel { position: relative; width: min(100%, 560px); margin: 0 auto; padding: 27px; border-radius: 26px; color: white; background: radial-gradient(circle at 88% 8%, rgba(108,139,255,.22), transparent 35%), linear-gradient(145deg, #131923, #080b12 74%); box-shadow: 0 28px 80px rgba(8, 11, 18, .2), inset 0 1px 0 rgba(255,255,255,.12); overflow: hidden; }
.download-panel::before { content: ""; position: absolute; right: -104px; bottom: -132px; width: 330px; height: 330px; border: 1px solid rgba(201,245,106,.19); border-radius: 50%; box-shadow: 0 0 0 30px rgba(201,245,106,.03), 0 0 0 60px rgba(201,245,106,.03), 0 0 0 90px rgba(201,245,106,.03); }
.panel-glow { position: absolute; top: -120px; left: -80px; width: 210px; height: 210px; border-radius: 50%; background: rgba(139,115,255,.25); filter: blur(50px); }
.panel-header, .panel-foot, .update-line, .app-overview, .main-download { position: relative; z-index: 1; }
.panel-header { display: flex; align-items: center; justify-content: space-between; }
.panel-kicker, .panel-live { color: #8b96a4; font-size: 8px; font-weight: 700; letter-spacing: 1.6px; }
.panel-live { display: flex; align-items: center; gap: 7px; color: var(--lime); }
.app-overview { display: flex; align-items: center; gap: 17px; margin: 34px 0 25px; }
.app-icon-frame { width: 77px; height: 77px; padding: 4px; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: rgba(255,255,255,.08); box-shadow: 0 14px 32px rgba(0,0,0,.2); }
.app-icon-frame img { display: block; width: 100%; height: 100%; border-radius: 17px; object-fit: cover; }
.app-overview h2 { margin: 0 0 5px; font-family: "Space Grotesk", sans-serif; font-size: 28px; letter-spacing: -1.2px; }
.app-overview p { margin: 0; color: #8c96a3; font-size: 11px; }
.update-line { display: flex; justify-content: space-between; margin-bottom: 13px; padding-top: 17px; border-top: 1px solid var(--line); color: #798492; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; }
.update-line strong { color: #dbe1e8; font-size: 9px; letter-spacing: .7px; }
.main-download { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 15px; border: 1px solid rgba(201,245,106,.42); border-radius: 14px; color: var(--night); background: var(--lime); box-shadow: 0 13px 26px rgba(139,188,36,.14); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.main-download:hover { transform: translateY(-2px); background: #d9fa82; box-shadow: 0 17px 31px rgba(139,188,36,.25); }
.main-download-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: var(--lime); background: var(--night); font-size: 19px; }
.main-download span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; }
.main-download small { color: #5f721e; font-size: 7px; letter-spacing: 1.3px; }
.main-download b { margin-left: auto; font-size: 19px; }
.panel-foot { display: flex; justify-content: space-between; padding-top: 16px; color: #83909d; font-size: 9px; }
.panel-foot span:first-child { color: #b5c0c9; }
.check { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 4px; border-radius: 50%; color: var(--night); background: var(--lime); font-style: normal; font-size: 9px; }
.quick-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; width: min(100%, 560px); margin: 16px auto 0; }
.quick-link { display: flex; align-items: center; gap: 10px; padding: 14px 13px; border: 1px solid #e1e5e8; border-radius: 15px; background: rgba(255,255,255,.88); box-shadow: 0 11px 24px rgba(28,37,46,.045); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.quick-link:hover { transform: translateY(-2px); border-color: #cbd2d8; box-shadow: 0 15px 30px rgba(28,37,46,.09); }
.quick-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; color: white; font-size: 14px; font-weight: 700; }
.tutorial .quick-icon { background: #ff4457; }
.channel .quick-icon { background: #15bf70; }
.quick-link > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: #242c34; font-size: 10px; font-weight: 700; white-space: nowrap; }
.quick-link small { color: #99a2aa; font-size: 7px; letter-spacing: 1px; }
.quick-link b { margin-left: auto; color: #a3adb5; font-size: 14px; }
.info-strip { display: flex; align-items: center; gap: 13px; width: min(100%, 560px); margin: 16px auto 0; padding: 16px 17px; border: 1px dashed #d6dce0; border-radius: 15px; background: rgba(255,255,255,.46); }
.info-symbol { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #5d7b18; background: #e6f5c8; font-size: 15px; }
.info-strip strong { display: block; margin-bottom: 3px; font-family: "Space Grotesk", sans-serif; font-size: 12px; }
.info-strip p { margin: 0; color: #919ba4; font-size: 9px; }
.coming-soon { margin-left: auto; color: #96a0a8; font-size: 7px; font-weight: 700; letter-spacing: 1.1px; }
.legal-note { max-width: 560px; margin: 21px auto 0; color: #a5adb5; font-size: 9px; line-height: 1.6; text-align: center; }
.footer { border-top: 1px solid #e3e7e9; background: rgba(255,255,255,.45); }
.footer .shell { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 24px 0; color: #a0a8af; font-size: 9px; }
.footer-brand { color: #35404b; font-size: 11px; }
@media (max-width: 560px) {
  .shell { width: min(100% - 28px, 1040px); }
  .page-shell { padding: 53px 0 56px; }
  .topbar .shell { height: 62px; }
  h1 { font-size: 51px; letter-spacing: -3px; }
  .intro-copy { font-size: 12px; }
  .download-panel { padding: 22px 18px 19px; border-radius: 22px; }
  .app-overview { margin: 28px 0 22px; }
  .app-icon-frame { width: 66px; height: 66px; border-radius: 18px; }
  .app-icon-frame img { border-radius: 13px; }
  .app-overview h2 { font-size: 24px; }
  .quick-links { grid-template-columns: 1fr; }
  .quick-link { padding: 13px; }
  .footer .shell { align-items: flex-start; flex-direction: column; }
}