:root {
      --bg: #090713;
      --bg-2: #100c20;
      --panel: rgba(255, 255, 255, .055);
      --panel-2: rgba(255, 255, 255, .085);
      --stroke: rgba(255, 255, 255, .12);
      --text: #f8f6ff;
      --muted: #a9a3bc;
      --pink: #f14bdf;
      --purple: #8b4cff;
      --blue: #69a7ff;
      --peach: #ffb68f;
      --radius: 28px;
      --shadow: 0 30px 90px rgba(0, 0, 0, .45);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; overflow-x: clip; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 70% -10%, rgba(88, 111, 255, .18), transparent 34%),
        radial-gradient(circle at 15% 17%, rgba(212, 60, 255, .12), transparent 26%),
        var(--bg);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .25;
      background-image: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, black, transparent 75%);
    }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    img { max-width: 100%; display: block; }
    .container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

    .nav-wrap {
      position: fixed;
      top: 18px;
      left: 0;
      right: 0;
      z-index: 50;
    }

    .nav {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px 10px 16px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(11, 8, 24, .74);
      box-shadow: 0 12px 45px rgba(0,0,0,.25);
      backdrop-filter: blur(20px);
      border-radius: 22px;
    }

    .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.02em; }
    .brand img { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 0 30px rgba(125, 80, 255, .35); }
    .brand-name { font-size: 20px; }
    .brand-name span { color: #b7b0ca; font-weight: 550; }
    .nav-links { display: flex; align-items: center; gap: 30px; color: #c2bdd1; font-size: 14px; font-weight: 600; }
    .nav-links a { transition: color .2s ease; }
    .nav-links a:hover { color: #fff; }

    .button {
      min-height: 48px;
      padding: 0 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 0;
      border-radius: 15px;
      color: #fff;
      font-weight: 750;
      letter-spacing: -.01em;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .button:hover { transform: translateY(-2px); }
    .button-primary {
      background: linear-gradient(120deg, var(--pink), var(--purple) 48%, var(--blue));
      box-shadow: 0 14px 35px rgba(147, 75, 255, .28);
    }
    .button-ghost { background: rgba(255,255,255,.075); border: 1px solid var(--stroke); }
    .button-small { min-height: 46px; padding-inline: 19px; font-size: 14px; }
    .mobile-toggle { display: none; width: 46px; height: 46px; padding: 0; }

    .hero {
      min-height: 900px;
      padding: 165px 0 100px;
      position: relative;
      display: flex;
      align-items: center;
    }

    .hero::after {
      content: "";
      position: absolute;
      width: 760px;
      height: 760px;
      right: -250px;
      top: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99, 107, 255, .22), rgba(236, 67, 222, .08) 42%, transparent 70%);
      filter: blur(10px);
      pointer-events: none;
    }

    .hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 78px; align-items: center; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 12px;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 999px;
      background: rgba(255,255,255,.05);
      color: #d7d1e7;
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #79ffac; box-shadow: 0 0 16px #79ffac; }
    h1, h2, h3, p { margin-top: 0; }
    h1 {
      margin: 26px 0 24px;
      font-size: clamp(54px, 6.1vw, 86px);
      line-height: .98;
      letter-spacing: -.068em;
      max-width: 660px;
    }

    .gradient-text {
      color: transparent;
      background: linear-gradient(100deg, #fff 6%, #f5a8ff 45%, #82bdff 84%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .hero-copy > p { max-width: 560px; color: var(--muted); font-size: 18px; line-height: 1.7; }
    .hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
    .store-icon { width: 20px; height: 20px; }

    .store-badges { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
    .store-badge {
      width: 210px;
      min-height: 70px;
      padding: 11px 18px;
      display: flex;
      align-items: center;
      gap: 15px;
      color: #fff;
      background: #030303;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 18px;
      box-shadow: 0 12px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
      user-select: none;
    }
    .store-badge svg { flex: 0 0 auto; width: 38px; height: 38px; }
    .store-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
    .store-name { font-size: 19px; font-weight: 800; letter-spacing: -.025em; white-space: nowrap; }
    .store-status { margin-top: 6px; color: #aaa; font-size: 13px; font-weight: 650; letter-spacing: .03em; }

    .people-row { margin-top: 38px; display: flex; align-items: center; gap: 14px; color: #aaa4bb; font-size: 13px; }
    .people { display: flex; }
    .people span {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 2px solid #110d20;
      margin-left: -8px;
      background: linear-gradient(140deg, #ff9bcf, #7248f4);
      color: white;
      font-size: 11px;
      font-weight: 800;
    }
    .people span:first-child { margin-left: 0; background: linear-gradient(140deg, #64caff, #5d49ff); }
    .people span:nth-child(2) { background: linear-gradient(140deg, #ffbe73, #ef4e9b); }
    .people span:nth-child(3) { background: linear-gradient(140deg, #9bffac, #4c70e8); }
    .people span:nth-child(4) { background: #fff; color: #29223f; }

    .hero-stage { min-height: 620px; position: relative; perspective: 1200px; }
    .phone {
      position: absolute;
      overflow: hidden;
      border: 8px solid #191428;
      border-radius: 42px;
      background: #181426;
      box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.18);
    }

    .phone::before {
      content: "";
      position: absolute;
      top: 11px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      width: 84px;
      height: 22px;
      background: #08070e;
      border-radius: 99px;
    }

    .phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .phone-main { width: 330px; height: 650px; left: 145px; top: -8px; transform: rotate(2deg); z-index: 3; }
    .phone-back { width: 276px; height: 560px; left: -25px; top: 86px; transform: rotate(-8deg); opacity: .85; filter: saturate(.85); }
    .phone-mini { width: 236px; height: 470px; right: -26px; top: 105px; transform: rotate(9deg); opacity: .72; }

    .float-card {
      position: absolute;
      z-index: 8;
      padding: 14px 18px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(14,10,29,.76);
      box-shadow: 0 20px 50px rgba(0,0,0,.36);
      backdrop-filter: blur(16px);
      font-size: 13px;
      font-weight: 700;
      animation: hover 5s ease-in-out infinite;
    }
    .float-card.live { right: -12px; top: 45px; }
    .float-card.chat { left: 18px; bottom: 12px; animation-delay: -2.5s; }
    .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: #ff4773; box-shadow: 0 0 14px #ff4773; }
    @keyframes hover { 50% { transform: translateY(-9px); } }

    .marquee { border-block: 1px solid rgba(255,255,255,.075); overflow: hidden; background: rgba(255,255,255,.018); }
    .marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
    .marquee-group { display: flex; align-items: center; gap: 52px; padding: 22px 26px; color: #7f7990; font-size: 13px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
    .marquee-group span::before { content: "✦"; margin-right: 52px; color: #d65bff; }
    @keyframes marquee { to { transform: translateX(-50%); } }

    section { padding: 130px 0; position: relative; }
    .section-kicker { color: #ca78ff; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
    .section-title { max-width: 760px; font-size: clamp(38px, 5vw, 64px); line-height: 1.06; letter-spacing: -.052em; margin-bottom: 22px; }
    .section-lead { max-width: 630px; color: var(--muted); font-size: 18px; line-height: 1.7; }

    .feature-grid { margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .feature-card {
      position: relative;
      min-height: 560px;
      padding: 36px;
      overflow: hidden;
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    }
    .feature-card.wide { grid-column: 1 / -1; min-height: 590px; }
    .feature-number { color: #77718a; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
    .feature-card h3 { max-width: 470px; margin: 24px 0 14px; font-size: clamp(28px, 3vw, 42px); line-height: 1.06; letter-spacing: -.04em; }
    .feature-card p { max-width: 460px; color: var(--muted); line-height: 1.65; }

    .phone-window {
      position: absolute;
      overflow: hidden;
      border-radius: 34px 34px 0 0;
      border: 7px solid #1e1930;
      border-bottom: 0;
      background: #171224;
      box-shadow: 0 24px 70px rgba(0,0,0,.4);
    }
    .phone-window img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .live-card { background: radial-gradient(circle at 90% 10%, rgba(255,111,184,.16), transparent 30%), linear-gradient(145deg,#151026,#0e0b19); }
    .live-card .phone-window { width: 292px; height: 415px; right: 38px; bottom: 0; }
    .community-card { background: radial-gradient(circle at 85% 15%, rgba(97,144,255,.16), transparent 34%), linear-gradient(145deg,#121126,#0e0b19); }
    .community-card .phone-window { width: 292px; height: 410px; right: 25px; bottom: 0; transform: rotate(3deg); }

    .wide-copy { position: relative; z-index: 3; max-width: 480px; }
    .wide .phone-window.one { width: 280px; height: 500px; right: 315px; bottom: -70px; transform: rotate(-5deg); }
    .wide .phone-window.two { width: 280px; height: 510px; right: 48px; bottom: -15px; transform: rotate(5deg); }
    .wide { background: radial-gradient(circle at 72% 32%, rgba(226,76,255,.24), transparent 32%), radial-gradient(circle at 92% 64%, rgba(91,157,255,.2), transparent 35%), linear-gradient(145deg,#151025,#0d0b17); }

    .culture { background: linear-gradient(180deg, transparent, rgba(255,255,255,.018), transparent); }
    .culture-grid { margin-top: 70px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; }
    .culture-card { min-height: 450px; border: 1px solid var(--stroke); border-radius: var(--radius); overflow: hidden; background: var(--panel); position: relative; }
    .culture-card.visual { min-height: 660px; }
    .culture-card.visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .culture-card.visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,7,19,.98), transparent 56%); }
    .visual-copy { position: absolute; z-index: 2; left: 38px; bottom: 34px; right: 38px; }
    .visual-copy h3 { font-size: 34px; letter-spacing: -.04em; margin-bottom: 10px; }
    .visual-copy p { color: #c4bed1; line-height: 1.6; margin-bottom: 0; }
    .culture-stack { display: grid; gap: 22px; }
    .mini-feature { padding: 34px; display: flex; flex-direction: column; justify-content: space-between; min-height: 319px; }
    .mini-feature h3 { font-size: 30px; letter-spacing: -.035em; margin: 0 0 12px; }
    .mini-feature p { margin: 0; color: var(--muted); line-height: 1.65; }
    .feature-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(145deg, rgba(242,74,220,.28), rgba(91,150,255,.25)); border: 1px solid rgba(255,255,255,.15); font-size: 26px; }

    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 66px; }
    .step { padding: 30px; border: 1px solid var(--stroke); border-radius: 24px; background: var(--panel); }
    .step span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #fff; color: #151020; font-weight: 850; }
    .step h3 { font-size: 22px; letter-spacing: -.025em; margin: 30px 0 12px; }
    .step p { color: var(--muted); line-height: 1.65; margin-bottom: 0; }

    .safety-card {
      padding: 54px;
      border-radius: 34px;
      border: 1px solid var(--stroke);
      background: linear-gradient(135deg, rgba(132,70,255,.15), rgba(255,255,255,.035));
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 60px;
      align-items: center;
    }
    .safety-list { display: grid; gap: 15px; }
    .safety-item { padding: 18px; display: flex; gap: 14px; border-radius: 18px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); }
    .check { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(123,255,174,.13); color: #7bffae; font-weight: 900; }
    .safety-item strong { display: block; margin-bottom: 4px; }
    .safety-item small { color: var(--muted); line-height: 1.45; }

    .faq-list { margin-top: 58px; max-width: 860px; }
    details { border-top: 1px solid var(--stroke); }
    details:last-child { border-bottom: 1px solid var(--stroke); }
    summary { list-style: none; cursor: pointer; padding: 25px 2px; display: flex; justify-content: space-between; gap: 20px; font-size: 18px; font-weight: 720; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; color: #b881ff; font-size: 24px; font-weight: 400; transition: transform .2s; }
    details[open] summary::after { transform: rotate(45deg); }
    details p { padding: 0 48px 24px 2px; color: var(--muted); line-height: 1.7; margin: 0; }

    .final-cta {
      margin-bottom: 48px;
      padding: 80px 32px;
      text-align: center;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 38px;
      background: radial-gradient(circle at 50% 0%, rgba(236,76,229,.35), transparent 40%), radial-gradient(circle at 90% 100%, rgba(87,153,255,.24), transparent 42%), #141022;
    }
    .final-cta img { width: 88px; height: 88px; margin: 0 auto 28px; border-radius: 25px; box-shadow: 0 18px 50px rgba(128,76,255,.35); }
    .final-cta h2 { font-size: clamp(40px, 5vw, 66px); letter-spacing: -.055em; margin-bottom: 16px; }
    .final-cta p { color: #c2bccf; font-size: 18px; }
    .final-actions { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
    .final-actions .store-badge { text-align: left; }

    footer { padding: 0 0 42px; }
    .footer-row { padding-top: 28px; border-top: 1px solid var(--stroke); display: flex; justify-content: space-between; align-items: center; gap: 24px; color: #827c91; font-size: 13px; }
    .footer-links { display: flex; gap: 22px; }
    .footer-contact {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 14px;
      color: #cfc9da;
      border: 1px solid var(--stroke);
      border-radius: 999px;
      background: rgba(255,255,255,.035);
      transition: color .2s ease, border-color .2s ease, background .2s ease;
    }
    .footer-contact:hover { color: #fff; border-color: rgba(184,129,255,.55); background: rgba(184,129,255,.09); }
    .footer-contact svg { width: 16px; height: 16px; color: #b881ff; }

    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.in { opacity: 1; transform: none; }

    @media (max-width: 1080px) {
      .hero-grid { grid-template-columns: 1fr; }
      .hero-copy { text-align: center; }
      .hero-copy h1, .hero-copy > p { margin-inline: auto; }
      .hero-actions, .store-badges, .people-row { justify-content: center; }
      .hero-stage { width: min(680px, 100%); margin: 10px auto 0; }
      .feature-grid { grid-template-columns: 1fr; }
      .feature-card.wide { grid-column: auto; }
      .wide { min-height: 720px !important; }
      .wide-copy { max-width: 100%; }
      .wide .phone-window.one { left: 80px; right: auto; }
      .wide .phone-window.two { right: 80px; }
      .culture-grid { grid-template-columns: 1fr; }
      .culture-stack { grid-template-columns: 1fr 1fr; }
      .safety-card { grid-template-columns: 1fr; }
    }

    @media (max-width: 760px) {
      .container { width: min(100% - 28px, 620px); }
      .nav-wrap { top: 10px; }
      .nav-links { display: none; position: absolute; top: 80px; left: 14px; right: 14px; padding: 22px; flex-direction: column; align-items: stretch; gap: 18px; border-radius: 20px; background: rgba(13,9,27,.96); border: 1px solid var(--stroke); }
      .nav-links.open { display: flex; }
      .nav > .button-small { display: none; }
      .mobile-toggle { display: inline-flex; }
      .brand-name { font-size: 17px; }
      .hero { min-height: 0; padding-top: 130px; }
      .hero-grid { gap: 46px; }
      h1 { font-size: clamp(48px, 15vw, 68px); }
      .hero-copy > p { font-size: 16px; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .store-badges { flex-direction: column; align-items: stretch; }
      .store-badge { width: 100%; justify-content: center; }
      .people-row { flex-direction: column; }
      .hero-stage { min-height: 510px; transform: scale(.86); transform-origin: top center; margin-bottom: -70px; }
      .phone-main { left: 50%; transform: translateX(-50%) rotate(2deg); width: 294px; height: 580px; }
      .phone-back { left: -115px; }
      .phone-mini { right: -120px; }
      .float-card.live { right: -20px; }
      section { padding: 90px 0; }
      .section-title { font-size: 40px; }
      .feature-grid { margin-top: 45px; }
      .feature-card { min-height: 650px; padding: 26px; }
      .live-card .phone-window, .community-card .phone-window { left: 50%; right: auto; transform: translateX(-50%); }
      .wide { min-height: 910px !important; }
      .wide .phone-window.one { left: 4px; width: 240px; height: 470px; bottom: 20px; }
      .wide .phone-window.two { right: -20px; width: 240px; height: 470px; bottom: 10px; }
      .culture-stack, .steps { grid-template-columns: 1fr; }
      .culture-card.visual { min-height: 570px; }
      .safety-card { padding: 30px 22px; gap: 35px; }
      .final-cta { padding: 60px 22px; }
      .final-actions { flex-direction: column; }
      .footer-row { flex-direction: column; text-align: center; }
      .footer-links { flex-wrap: wrap; justify-content: center; }
      .footer-contact { justify-content: center; }
    }

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