:root {
  --ink: #f6f7fb;
  --muted: #9ba7bb;
  --line: rgba(186, 214, 255, 0.13);
  --blue: #43d9ff;
  --lime: #86ff34;
  --violet: #a86cff;
  --bg: #020812;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.nav {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(24px, 5vw, 80px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(2,8,18,.7);
  backdrop-filter: blur(22px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.04em; width: fit-content; }
.brand-mark { position: relative; display: flex; align-items: end; gap: 2px; width: 22px; height: 23px; padding: 4px; border: 1px solid rgba(107,226,255,.5); border-radius: 6px; background: linear-gradient(140deg, rgba(55,211,255,.25), rgba(133,255,52,.05)); box-shadow: 0 0 20px rgba(67,217,255,.18); }
.brand-mark i { display: block; width: 3px; border-radius: 4px; background: linear-gradient(180deg,var(--blue),var(--lime)); }
.brand-mark i:nth-child(1) { height: 7px; }.brand-mark i:nth-child(2) { height: 14px; }.brand-mark i:nth-child(3) { height: 10px; }
.nav-links { display: flex; gap: 40px; color: #b9c3d3; font-size: 14px; }
.nav-links a, .nav-download { transition: color .25s, opacity .25s; }
.nav-links a:hover { color: white; }
.nav-download { justify-self: end; padding: 10px 19px; border: 1px solid rgba(126,255,55,.35); border-radius: 999px; color: #a1ff72; font-size: 14px; background: rgba(126,255,55,.06); }
.nav-download:hover { color: white; border-color: var(--lime); }

.hero {
  position: relative;
  min-height: 900px;
  padding: 170px clamp(24px,5vw,80px) 100px;
  display: grid;
  grid-template-columns: minmax(420px, .82fr) minmax(600px, 1.3fr);
  gap: 28px;
  align-items: center;
  isolation: isolate;
}
.hero::before { content:""; position:absolute; inset:0; z-index:-3; background: radial-gradient(circle at 54% 47%, #0d2a4f 0, #061324 28%, #020812 64%); }
.hero::after { content:""; position:absolute; inset:0; z-index:-2; opacity:.22; background-image: linear-gradient(rgba(112,170,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(112,170,255,.06) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
.hero-glow { position: absolute; z-index:-1; border-radius:50%; filter: blur(70px); opacity:.25; }
.hero-glow-one { width:340px;height:340px;right:7%;top:16%;background:#2e8dff; }
.hero-glow-two { width:290px;height:290px;right:32%;bottom:8%;background:#7b37ff; }
.hero-copy { position: relative; z-index:2; padding-left: clamp(0px,3vw,38px); }
.eyebrow, .kicker { display:flex; align-items:center; gap:10px; color:#b6ff8d; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; }
.eyebrow span { width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime); }
h1 { margin:25px 0 28px; font-size:clamp(64px,7vw,112px); line-height:.88; letter-spacing:-.07em; font-weight:750; }
h1 em, h2 em { font-style:normal; color:transparent; -webkit-text-stroke: 1px rgba(221,235,255,.52); }
.hero-copy > p { max-width:540px; margin:0; color:#aeb8c9; font-size:18px; line-height:1.65; }
.hero-actions { margin-top:36px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.download-button { display:grid; grid-template-columns:40px 1fr 30px; align-items:center; gap:12px; min-width:286px; padding:13px 16px; color:#051006; border:1px solid #b8ff91; border-radius:13px; background:linear-gradient(100deg,#a0ff67,#6ffb2d); box-shadow:0 16px 50px rgba(116,255,50,.18),inset 0 1px 0 rgba(255,255,255,.55); transition:transform .25s, box-shadow .25s; }
.download-button:hover { transform:translateY(-3px);box-shadow:0 22px 60px rgba(116,255,50,.28); }
.download-button span:nth-child(2) { font-size:14px;font-weight:750;line-height:1.2; }
.download-button small { display:block;font-size:10px;font-weight:600;opacity:.62;margin-bottom:3px; }
.download-button b {font-size:22px;font-weight:500;text-align:center;}
.apple { position:relative;width:34px;height:34px!important;font-size:0!important;border-radius:50%;background:#071108; }
.apple::after {content:"♫";position:absolute;inset:0;display:grid;place-items:center;color:#8dff4e;font-size:18px;}
.download-note { color:#78869b;font-size:12px; }
.hero-product { position:relative; min-width:0; transform:translateX(4%); }
.product-halo { position:absolute;inset:8% 8%;background:radial-gradient(circle,#2278d8 0,rgba(78,34,198,.5) 35%,transparent 67%);filter:blur(55px);opacity:.65; }
.product-frame { position:relative; padding:8px;border:1px solid rgba(130,216,255,.37);border-radius:28px;background:linear-gradient(140deg,rgba(82,198,255,.25),rgba(112,73,255,.06));box-shadow:0 40px 120px rgba(0,0,0,.52),0 0 90px rgba(34,123,255,.13);transform:perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.product-frame::after {content:"";position:absolute;inset:8px;border-radius:21px;box-shadow:inset 0 0 35px rgba(86,233,255,.1);pointer-events:none;}
.product-frame img { display:block;width:100%;height:auto;border-radius:21px; }
.format-pill { position:absolute;right:8%;bottom:-17px;padding:11px 17px;border:1px solid rgba(106,222,255,.34);border-radius:999px;background:rgba(4,22,42,.74);backdrop-filter:blur(16px);color:#acd9ed;font-size:11px;letter-spacing:.06em;box-shadow:0 12px 30px rgba(0,0,0,.3); }
.scroll-hint { position:absolute;left:clamp(24px,8vw,125px);bottom:48px;display:flex;gap:17px;align-items:center;color:#617086;font-size:11px;text-transform:uppercase;letter-spacing:.16em; }
.scroll-hint b {display:grid;place-items:center;width:34px;height:34px;border:1px solid #223249;border-radius:50%;color:#94a7c0;}

.section { padding:130px clamp(24px,7.5vw,120px); }
.section-heading { display:flex;justify-content:space-between;align-items:end;margin-bottom:65px; }
h2 { margin:17px 0 0;font-size:clamp(48px,5vw,78px);line-height:.98;letter-spacing:-.055em; }
.features { background:#050c17;position:relative; }
.features::before { content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(55,139,255,.05),transparent);pointer-events:none; }
.feature-grid { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.feature-card { position:relative;min-height:350px;padding:38px 38px 42px;border-right:1px solid var(--line);transition:background .3s; }
.feature-card:last-child {border-right:0;}.feature-card:hover{background:rgba(67,217,255,.035);}
.feature-number { color:#45536a;font:11px ui-monospace,monospace;letter-spacing:.1em; }
.feature-icon { margin:54px 0 35px;width:62px;height:62px;display:grid;place-items:center;border:1px solid rgba(78,218,255,.28);border-radius:17px;color:#84ff4d;font-size:27px;background:radial-gradient(circle at 30% 20%,rgba(69,206,255,.22),rgba(50,251,141,.04));box-shadow:inset 0 0 28px rgba(34,179,255,.08); }
.feature-card h3 { font-size:21px;letter-spacing:-.025em;margin:0 0 15px; }
.feature-card p { color:#7f8ca1;line-height:1.65;font-size:14px;margin:0;max-width:330px; }

.interface { min-height:820px;display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:70px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 45%,#101d3b 0,#050b15 42%,#020812 73%); }
.interface::before {content:"";position:absolute;width:540px;height:540px;border:1px solid rgba(86,156,255,.11);border-radius:50%;right:8%;top:15%;box-shadow:0 0 100px rgba(67,130,255,.05);}
.interface-copy {position:relative;z-index:3;}
.interface-copy p {color:#8896aa;line-height:1.7;max-width:430px;margin:28px 0;}
.theme-switch {display:inline-flex;padding:4px;border:1px solid #1f3048;border-radius:999px;background:#07101e;color:#78869b;font-size:12px;}
.theme-switch span {padding:9px 15px;border-radius:999px;display:flex;align-items:center;gap:8px;}
.theme-switch span i {width:7px;height:7px;border-radius:50%;background:#c3cbd7;}
.theme-switch .active {color:#b9ff95;background:#13231d;}.theme-switch .active i{background:var(--lime);box-shadow:0 0 9px var(--lime);}
.interface-showcase {position:relative;height:570px;z-index:2;}
.shot {position:absolute;padding:5px;border-radius:20px;border:1px solid rgba(118,201,255,.28);box-shadow:0 35px 80px rgba(0,0,0,.52);overflow:hidden;}
.shot img {width:100%;height:auto;display:block;border-radius:15px;}
.shot-light {width:72%;right:18%;top:5%;transform:rotate(-5deg);opacity:.65;}
.shot-dark {width:82%;right:-2%;top:18%;transform:rotate(3deg);background:#102650;}

.requirements {background:#050c16;}
.requirements-card {padding:70px;display:grid;grid-template-columns:1fr 1.25fr;gap:80px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(120deg,rgba(13,37,65,.65),rgba(5,12,22,.75));box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.requirements-card h2 {font-size:clamp(40px,4vw,64px);}
.requirements-card dl {margin:0;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;}
.requirements-card dl div {padding:20px 26px;border-left:1px solid var(--line);}
.requirements-card dt {color:#6c7b91;font-size:11px;text-transform:uppercase;letter-spacing:.13em;margin-bottom:14px;}
.requirements-card dd {margin:0;color:#d5dbe5;font-size:14px;line-height:1.55;}

.download-section { min-height:700px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 50%,#102b43 0,#06101d 32%,#020812 65%); }
.download-section::before {content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(108,209,255,.12) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle,black,transparent 68%);}
.download-orbit {position:absolute;border:1px solid rgba(83,199,255,.1);border-radius:50%;}
.orbit-one{width:480px;height:480px;}.orbit-two{width:650px;height:650px;border-color:rgba(127,87,255,.08);}
.download-symbol {position:relative;width:86px;height:86px;display:grid;place-items:center;border:1px solid rgba(95,224,255,.45);border-radius:25px;background:linear-gradient(140deg,rgba(54,187,255,.25),rgba(124,65,255,.18));box-shadow:0 0 65px rgba(50,170,255,.22);transform:rotate(-8deg);margin-bottom:34px;}
.download-symbol span {font-size:39px;color:#8dff4b;transform:rotate(8deg);text-shadow:0 0 20px rgba(127,255,59,.55);}
.download-section .kicker,.download-section h2,.download-section p,.download-section .download-button,.download-section .download-note{position:relative;z-index:2;}
.download-section h2 {font-size:clamp(58px,7vw,100px);margin:14px 0 18px;}
.download-section p {color:#8c99ad;font-size:16px;max-width:520px;line-height:1.6;margin:0 0 30px;}
.download-button-large {min-width:315px;text-align:left;margin-bottom:16px;}

footer {height:110px;padding:0 clamp(24px,7.5vw,120px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid var(--line);color:#536177;font-size:12px;background:#020812;}
footer .brand {font-size:17px;color:#d8deea;}footer .brand-mark{transform:scale(.8);transform-origin:left center;}footer p{margin:0;}footer>span{justify-self:end;}

@media (max-width: 1100px) {
  .hero { grid-template-columns:1fr; padding-top:145px; }
  .hero-copy {padding-left:0;}
  .hero-product {transform:none;margin-top:20px;}
  .scroll-hint {display:none;}
  .feature-grid {grid-template-columns:repeat(2,1fr);}
  .feature-card:nth-child(2) {border-right:0;}
  .feature-card:nth-child(-n+2) {border-bottom:1px solid var(--line);}
  .interface {grid-template-columns:1fr;gap:40px;}
  .interface-showcase {height:540px;}
  .requirements-card {grid-template-columns:1fr;gap:40px;}
}
@media (max-width: 760px) {
  .nav {height:66px;grid-template-columns:1fr auto;padding:0 20px;}.nav-links{display:none;}.nav-download{font-size:12px;padding:8px 14px;}
  .hero {min-height:auto;padding:120px 20px 80px;}
  h1 {font-size:clamp(58px,17vw,82px);}.hero-copy>p{font-size:16px;}.hero-actions{align-items:flex-start;flex-direction:column;}.download-button{width:100%;}
  .product-frame {border-radius:17px;padding:5px;transform:none;}.product-frame img{border-radius:12px;}.product-frame::after{inset:5px;border-radius:12px;}.format-pill{display:none;}
  .section {padding:90px 20px;}.section-heading{display:block;margin-bottom:40px;}
  .feature-grid{grid-template-columns:1fr;}.feature-card{min-height:auto;border-right:0;border-bottom:1px solid var(--line);padding:30px 10px;}.feature-card:last-child{border-bottom:0;}.feature-icon{margin:35px 0 24px;}
  .interface {min-height:auto;}.interface-showcase{height:330px;margin:0 -15px;}.shot-light{width:80%;right:15%;}.shot-dark{width:90%;right:-2%;}
  .requirements-card{padding:35px 24px;border-radius:20px;}.requirements-card dl{grid-template-columns:1fr;}.requirements-card dl div{border-left:0;border-top:1px solid var(--line);padding:22px 0;}
  .download-section{min-height:650px;}.orbit-one{width:340px;height:340px}.orbit-two{width:500px;height:500px}
  footer {height:auto;padding:35px 20px;grid-template-columns:1fr;gap:18px;text-align:left;}footer>span{justify-self:start;}
}

@media (prefers-reduced-motion: no-preference) {
  .product-frame {animation:float 7s ease-in-out infinite;}
  .download-symbol {animation:pulse 5s ease-in-out infinite;}
  @keyframes float {50%{transform:perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(-10px)}}
  @keyframes pulse {50%{box-shadow:0 0 90px rgba(50,170,255,.38);transform:rotate(-3deg) scale(1.03)}}
}