:root {
    --bg: #05050a;
    --panel: #0b1020;
    --text: #f8f8fc;
    --muted: #b8bfd2;
    --purple: #9b3cff;
    --blue: #347bff;
    --green: #26dfb0;
    --red: #ff587d;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  button, a { font: inherit; }
  .hero {
    position: relative;
    min-height: min(850px, 100svh);
    overflow: hidden;
    isolation: isolate;
    display: grid;
    place-items: center;
    padding: 56px 24px 100px;
    background:
      radial-gradient(ellipse at 11% 43%, rgba(116, 31, 255, .28), transparent 35%),
      radial-gradient(ellipse at 88% 48%, rgba(0, 102, 255, .24), transparent 36%),
      radial-gradient(ellipse at 50% 100%, rgba(105, 20, 180, .12), transparent 38%),
      #05050a;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .2;
    background-image: linear-gradient(rgba(110,130,180,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(110,130,180,.08) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 75%, transparent);
  }
  .glow-line { position:absolute; height:2px; left:0; right:0; top:8%; background:linear-gradient(90deg,transparent,#8e27ff 20%,#3d8aff 80%,transparent); filter:blur(2px); opacity:.75; }
  .device {
    position: absolute;
    border: 1px solid rgba(157, 177, 223, .4);
    background: linear-gradient(145deg, #101827, #03060d 70%);
    box-shadow: 0 0 0 5px rgba(7, 9, 17, .9), 0 0 45px rgba(88, 43, 255, .22), inset 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
  }
  .device-left {
    width: min(36vw, 510px); height: 500px; left: -52px; top: 15%;
    border-radius: 24px; transform: perspective(1100px) rotateY(8deg) rotateZ(-1deg);
  }
  .device-right {
    width: min(36vw, 540px); height: 500px; right: -55px; top: 18%;
    border-radius: 24px; transform: perspective(1100px) rotateY(-7deg) rotateZ(1deg);
  }
  .device-topbar { height: 42px; display:flex; align-items:center; gap:7px; padding:0 13px; background:#101522; border-bottom:1px solid #1d2a40; color:#aab7ce; font-size:10px; }
  .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
  .dot.red { background:#ff5b65; } .dot.yellow { background:#ffca55; } .dot.green { background:#31d99a; }
  .top-label { margin-left:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .device-content { padding:16px 15px; }
  .ticker { font-size:11px; color:#c0cce0; }
  .price { font-size:23px; font-weight:750; margin-top:4px; letter-spacing:-.04em; }
  .change { color:var(--green); font-size:10px; }
  .timeframes { display:flex; gap:6px; margin:13px 0 9px; }
  .timeframes span { font-size:9px; color:#8d9bb4; border:1px solid #25314a; border-radius:4px; padding:4px 6px; }
  .timeframes .selected { background:#4923a8; color:#fff; border-color:#8248ff; }
  .chart { width:100%; display:block; border-top:1px solid #202b40; background:linear-gradient(180deg,rgba(17,28,48,.28),rgba(3,7,15,.4)); }
  .indicators { border-top:1px solid #263047; margin-top:10px; padding-top:7px; color:#8392ac; font-size:9px; }
  .bars { height:35px; display:flex; align-items:end; gap:3px; margin-top:5px; }
  .bars i { flex:1; background:#18bda0; opacity:.8; min-width:2px; }
  .bars i:nth-child(3n) { background:#a638da; }
  .bars i:nth-child(4n) { background:#e64f79; }
  .screen-glow { position:absolute; bottom:-55px; left:10%; right:10%; height:70px; border-radius:50%; background:#6d25ff; filter:blur(45px); opacity:.38; }
  .phone {
    position:absolute; z-index:2; width:195px; height:385px; left:17%; bottom:6%; padding:8px;
    border:2px solid #6f6b91; border-radius:30px; background:#020307;
    box-shadow:0 0 0 4px #10101b, 0 0 35px rgba(144,58,255,.38), 0 28px 60px #000;
    transform:rotate(-2deg);
  }
  .phone-inner { height:100%; overflow:hidden; border-radius:22px; background:linear-gradient(#090d18,#05080e); padding:17px 11px 10px; position:relative; }
  .notch { position:absolute; width:68px; height:15px; border-radius:20px; background:#000; top:5px; left:50%; transform:translateX(-50%); }
  .phone-status { display:flex; justify-content:space-between; font-size:8px; color:#dbe3f4; margin-bottom:20px; }
  .phone-price { font-size:22px; font-weight:750; margin-top:7px; }
  .phone .chart { margin-top:14px; }
  .phone-stats { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:10px; }
  .phone-stats div { background:#111a2a; border:1px solid #25334b; padding:7px 5px; border-radius:7px; font-size:8px; color:#a8b7cc; }
  .phone-stats strong { display:block; color:#f2f5fb; font-size:10px; margin-top:3px; }
  .hero-copy { width:min(740px, 58vw); text-align:center; position:relative; z-index:3; padding:30px 22px; }
  .eyebrow { display:inline-flex; align-items:center; gap:9px; color:#bfa7ff; font-size:11px; letter-spacing:.2em; font-weight:800; text-transform:uppercase; margin-bottom:20px; }
  .eyebrow::before,.eyebrow::after { content:""; width:25px; height:1px; background:linear-gradient(90deg,transparent,#9b4bff); }
  .eyebrow::after { transform:rotate(180deg); }
  h1 { font-size:clamp(36px, 4.4vw, 68px); line-height:1.04; letter-spacing:-.055em; margin:0; font-weight:850; text-shadow:0 3px 35px rgba(255,255,255,.08); }
  h1 span { color:#fff; }
  .tagline { margin:19px 0 0; font-size:clamp(19px,2.2vw,30px); font-weight:550; letter-spacing:.015em; color:#e0d8ff; }
  .underline { height:2px; width:150px; margin:22px auto 24px; background:linear-gradient(90deg,transparent,#b342ff,#398dff,transparent); box-shadow:0 0 18px #8d37ff; }
  .description { max-width:540px; margin:0 auto; color:#c5ccdc; font-size:clamp(14px,1.15vw,17px); line-height:1.8; }
  .enter-button { display:inline-flex; align-items:center; justify-content:center; gap:15px; margin-top:34px; min-width:205px; padding:17px 27px; border-radius:999px; border:1px solid transparent; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.08em; background:linear-gradient(#10111c,#10111c) padding-box,linear-gradient(105deg,#d13bff,#477dff) border-box; box-shadow:0 0 20px rgba(150,46,255,.25), inset 0 0 20px rgba(65,70,160,.1); transition:transform .2s ease, box-shadow .2s ease; }
  .enter-button:hover { transform:translateY(-3px); box-shadow:0 0 30px rgba(150,46,255,.45),0 0 55px rgba(35,102,255,.2); }
  .enter-button:focus-visible { outline:3px solid #fff; outline-offset:5px; }
  .enter-button svg { width:19px; height:19px; }
  .fineprint { color:#7f8ba2; font-size:11px; margin-top:18px; }
  .scroll-cue { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#a2aec4; font-size:10px; letter-spacing:.16em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; }
  .scroll-cue span { width:1px; height:23px; background:linear-gradient(#9b4bff,transparent); }
  .intro { padding:78px 24px 90px; background:#090b13; border-top:1px solid #191c2b; }
  .intro-inner { max-width:1000px; margin:auto; text-align:center; }
  .intro h2 { font-size:clamp(27px,3vw,42px); letter-spacing:-.04em; margin:0 0 12px; }
  .intro p { max-width:700px; margin:0 auto; color:var(--muted); line-height:1.8; }
  .features { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:34px; text-align:left; }
  .feature { padding:22px; border:1px solid #242a3c; border-radius:15px; background:linear-gradient(145deg,#111827,#0a0d16); }
  .feature .icon { color:#bd7aff; font-size:23px; }
  .feature h3 { margin:12px 0 6px; font-size:16px; }
  .feature p { font-size:13px; line-height:1.7; }
  footer { padding:24px; text-align:center; color:#68758c; font-size:11px; background:#05050a; }
  @media (max-width:1000px) {
    .hero { min-height:760px; }
    .device-left { left:-150px; width:45vw; opacity:.68; }
    .device-right { right:-170px; width:46vw; opacity:.68; }
    .hero-copy { width:min(680px,80vw); }
    .phone { left:7%; bottom:4%; transform:scale(.84) rotate(-2deg); transform-origin:bottom left; }
  }
  @media (max-width:650px) {
    .hero { min-height:760px; padding:60px 15px 105px; }
    .device-left { width:78vw; height:360px; left:-48vw; top:8%; opacity:.3; }
    .device-right { width:78vw; height:360px; right:-50vw; top:13%; opacity:.34; }
    .device-content { padding:10px; }
    .phone { width:130px; height:260px; left:3%; bottom:3%; transform:rotate(-3deg); opacity:.75; }
    .phone-inner { padding:15px 7px 7px; }
    .phone-price { font-size:16px; }
    .phone-stats { display:none; }
    .hero-copy { width:100%; padding:30px 5px; }
    .eyebrow { font-size:9px; letter-spacing:.13em; }
    h1 { font-size:clamp(36px,10vw,52px); }
    .tagline { font-size:21px; }
    .description { font-size:14px; max-width:390px; }
    .enter-button { min-width:175px; padding:15px 22px; }
    .fineprint { max-width:270px; margin:16px auto 0; line-height:1.6; }
    .features { grid-template-columns:1fr; }
    .intro { padding:60px 18px; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }