:root{
    --bg:#050505;
    --fg:#f6f6f6;
    --muted:#a3a3a3;
    --line:rgba(255,255,255,.12);
    --accent:#a78bfa;
    --accent2:#FF9BD2;
    --shadow: 0 25px 80px rgba(0,0,0,.6);
    --radius: 28px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:var(--bg);
    color:var(--fg);
    line-height:1.35;
    overflow-x:hidden;
  }

  /* Smooth background layers (cross-fade) */
  .bgLayer{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:0;
    transition: opacity 900ms ease;
    will-change: opacity;
  }
  .bgLayer.on{opacity:1}
  .bgA{background: radial-gradient(circle at 20% 20%, rgba(167,139,250,.28), rgba(0,0,0,0) 52%),
                radial-gradient(circle at 80% 35%, rgba(255,155,210,.18), rgba(0,0,0,0) 55%),
                linear-gradient(180deg, rgba(10,10,10,1), rgba(5,5,5,1));}
  .bgB{background: radial-gradient(circle at 30% 30%, rgba(255,155,210,.22), rgba(0,0,0,0) 54%),
                radial-gradient(circle at 70% 40%, rgba(167,139,250,.20), rgba(0,0,0,0) 60%),
                linear-gradient(180deg, rgba(8,8,8,1), rgba(5,5,5,1));}
  .bgC{background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.10), rgba(0,0,0,0) 50%),
                radial-gradient(circle at 18% 55%, rgba(167,139,250,.18), rgba(0,0,0,0) 55%),
                linear-gradient(180deg, rgba(7,7,7,1), rgba(5,5,5,1));}
  .bgD{background: radial-gradient(circle at 75% 30%, rgba(255,155,210,.20), rgba(0,0,0,0) 56%),
                radial-gradient(circle at 30% 60%, rgba(167,139,250,.16), rgba(0,0,0,0) 60%),
                linear-gradient(180deg, rgba(6,6,6,1), rgba(5,5,5,1));}

  /* Subtle noise */
  body::before{
    content:"";
    position:fixed;inset:0;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
    opacity:.35;
    z-index:1;
  }

  a{color:inherit;text-decoration:none}

  /* Sticky + snap experience */
  .snapRoot{
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
  }
  .snapSection{
    min-height:160vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding:0;
    display:grid;
    align-items:stretch;
  }
  #keynote.snapSection{
    min-height:100vh;
  }
  #keynote .snapSticky{
    padding:100px 22px;
  }
  #contact.snapSection{
    min-height:80vh;
  }
  #contact .snapSticky{
    padding:60px 22px;
  }
  .snapSticky{
    position:sticky;
    top:0;
    min-height:100vh;
    display:grid;
    align-content:center;
    padding:100px 22px;
  }
  .snapInner{width:min(1180px,100%);margin:0 auto}

  .wrap{position:relative;z-index:2}

  /* Top bar */
  .topbar{
    position:fixed;top:0;left:0;right:0;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 22px;
    z-index:60;
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(5,5,5,.75), rgba(5,5,5,0));
  }
  .brand{
    display:flex;align-items:center;gap:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:600;
    font-size:12px;
    opacity:.9;
  }
  .brand img{width:100px;height:36px;object-fit:contain}
  .dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 24px rgba(167,139,250,.55)}
  .topbar .cta{display:flex;align-items:center;gap:10px}
  .pill{
    display:inline-flex;align-items:center;gap:10px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.03);
    font-size:13px;
    color:rgba(246,246,246,.92);
    transition: transform .18s ease, background .18s ease;
  }
  .pill:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}

  /* Hero */
  header{
    min-height:100vh;
    padding:120px 22px 80px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .blobs{position:absolute;inset:-40vh -20vw;z-index:0;filter: blur(55px);opacity:.32}
  .blob{position:absolute;border-radius:999px;aspect-ratio:1/1}
  .blob.b1{width:min(58vw,820px);left:8vw;top:10vh;background:radial-gradient(circle at 30% 30%, rgba(167,139,250,.85), rgba(167,139,250,0) 60%)}
  .blob.b2{width:min(55vw,760px);right:5vw;top:18vh;background:radial-gradient(circle at 50% 50%, rgba(255,155,210,.75), rgba(255,155,210,0) 60%)}
  .blob.b3{width:min(60vw,880px);left:22vw;bottom:-6vh;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,0) 65%)}
  .hero-stars{position:absolute;inset:0;z-index:1;pointer-events:none}
  .hero-stars img{position:absolute;opacity:.6;mix-blend-mode:screen}
  .hero-stars .star-left{left:10%;top:20%;width:120px;height:120px;animation:float 8s ease-in-out infinite}
  .hero-stars .star-right{right:15%;top:30%;width:100px;height:100px;animation:float 10s ease-in-out infinite .5s}
  .hero-stars .planet{left:50%;top:50%;transform:translate(-50%,-50%);width:min(70vw,900px);height:auto;opacity:.4;mix-blend-mode:screen;animation:planetFloat 12s ease-in-out infinite 1s;z-index:0}
  @keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}
  @keyframes planetFloat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}}

  .hero{width:min(1100px,100%);text-align:left;position:relative;z-index:2}

  .kicker{
    display:inline-flex;align-items:center;gap:10px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.03);
    font-size:13px;
    color:rgba(246,246,246,.9);
    margin-bottom:22px;
  }

  .h1{font-size: clamp(44px, 7.2vw, 112px);font-weight:800;letter-spacing:-0.05em;line-height:.9}
  .gradient-text {
    -webkit-text-fill-color: transparent;
    color: rgba(0, 0, 0, 0);
    background: linear-gradient(rgb(255, 175, 208), rgb(255, 117, 215)) text;
  }

  .subheads{margin-top:18px;display:grid;gap:10px}
  .subheads h2{font-size: clamp(20px, 2.4vw, 34px);font-weight:500;letter-spacing:-0.02em;color: rgba(246,246,246,.95)}

  .lead{margin-top:18px;width:min(760px,100%);font-size:16px;color:var(--muted)}

  .actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:14px 18px;border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    font-weight:600;font-size:14px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn.primary{
    border-color: rgba(167,139,250,.55);
    background: linear-gradient(135deg, rgba(167,139,250,.95), rgba(255,155,210,.35));
    box-shadow: 0 18px 55px rgba(167,139,250,.25);
  }
  .btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.06)}
  .btn.primary:hover{box-shadow: 0 24px 70px rgba(167,139,250,.32)}

  .scrollHint{
    position:absolute;left:22px;bottom:24px;
    display:flex;align-items:center;gap:10px;
    font-size:12px;color:rgba(246,246,246,.7);
    letter-spacing:.18em;text-transform:uppercase;
    z-index:3;
  }

  /* Withdrawal notifications */
  .withdrawal-notifications{
    position:absolute;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    display:flex;
    flex-direction:column;
    gap:12px;
    pointer-events:none;
    max-width:320px;
  }
  .withdrawal-card{
    background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.15);
    border-radius:16px;
    padding:14px 16px;
    backdrop-filter:blur(12px);
    box-shadow:0 8px 32px rgba(0,0,0,.4);
    display:flex;
    align-items:center;
    gap:12px;
    opacity:0;
    transform:translateX(100px);
    transition:opacity .5s ease, transform .5s ease;
    pointer-events:auto;
  }
  .withdrawal-card.show{
    opacity:1;
    transform:translateX(0);
  }
  .withdrawal-card.fade-out{
    opacity:0;
    transform:translateX(100px);
  }
  .withdrawal-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent2));
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    font-size:16px;
    color:#fff;
    flex-shrink:0;
    border:2px solid rgba(255,255,255,.2);
    overflow:hidden;
    position:relative;
  }
  .withdrawal-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
  }
  .withdrawal-info{
    flex:1;
    min-width:0;
  }
  .withdrawal-name{
    font-size:13px;
    font-weight:600;
    color:rgba(246,246,246,.95);
    margin-bottom:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .withdrawal-details{
    font-size:11px;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .withdrawal-amount{
    font-size:14px;
    font-weight:700;
    color:#FF9BD2;
    margin-left:auto;
    flex-shrink:0;
  }
  .arrow{
    width:18px;height:18px;display:inline-grid;place-items:center;
    border:1px solid var(--line);border-radius:999px;
    background:rgba(255,255,255,.03);
    animation:bounce 1.6s ease-in-out infinite;
  }
  @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

  /* Marquee */
  .marquee{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.02);
    overflow:hidden;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .marqueeTrack{display:flex;gap:36px;padding:24px 0;width:max-content;animation: marquee 22s linear infinite}
  .marqueeTrack span{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,246,246,.75);white-space:nowrap}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* Content blocks */
  .sectionTitle{display:grid;gap:10px;margin-bottom:60px}
  .sectionTitle h3{font-size: clamp(28px, 3.2vw, 56px);font-weight:800;letter-spacing:-0.04em;line-height:.95}
  .sectionTitle p{color:var(--muted);max-width:780px}

  .district{display:grid;grid-template-columns: 1.1fr .9fr;gap:28px;align-items:stretch;margin:60px 0}
  .district.flip{grid-template-columns: .9fr 1.1fr}

  .panel{
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: var(--shadow);
    overflow:hidden;
    position:relative;
    transform: translateZ(0);
  }

  .media{
    min-height: 360px;
    position:relative;
    background: radial-gradient(circle at 30% 30%, rgba(167,139,250,.55), rgba(0,0,0,0) 55%),
                radial-gradient(circle at 70% 60%, rgba(255,155,210,.45), rgba(0,0,0,0) 55%),
                linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  }
  .media img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:.85;
    mix-blend-mode:screen;
  }
  .media video{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
    opacity:.85;
  }
  .media::after{content:"";position:absolute;inset:0;background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);opacity:.7}
  .media .label{
    position:absolute;left:18px;top:18px;
    display:inline-flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:999px;
    border:1px solid var(--line);
    background:rgba(0,0,0,.25);
    font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:rgba(246,246,246,.86);
    backdrop-filter: blur(10px);
  }

  .copy{padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px}
  .copy h4{font-size: 22px;letter-spacing:-.02em;font-weight:700}
  .copy p{color:var(--muted)}

  .meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;padding-top:18px}
  .chip{font-size:12px;color:rgba(246,246,246,.8);border:1px solid var(--line);background:rgba(255,255,255,.03);padding:9px 12px;border-radius:999px}

  /* Registration form */
  .reg-form{
    margin-top:32px;
    display:grid;
    gap:16px;
  }
  .form-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:16px;
  }
 form{
    display:flex;
    flex-direction:column;

  }
 form label{
    font-size:13px;
    color:rgba(246,246,246,.85);
    font-weight:500;
  }
 form input{
    padding:14px 18px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    color:var(--fg);
    font-size:14px;
    font-family:inherit;
    transition: border-color .18s ease, background .18s ease;
  }
 form input:focus{
    outline:none;
    border-color:rgba(167,139,250,.5);
    background:rgba(255,255,255,.06);
  }
 form input::placeholder{
    color:var(--muted);
  }
  @media (max-width: 640px){
    .form-row{
      grid-template-columns:1fr;
    }
  }

  /* Traffic card (Nibiru-style) */
  .traffic{
    margin-top:60px;
    padding:32px 28px 30px;
    border-radius:32px;
    border:1px solid rgba(255,155,210,.6);
    background:
      radial-gradient(circle at 0% 0%, rgba(255,255,255,.12), rgba(0,0,0,0) 55%),
      linear-gradient(180deg, rgba(15,15,15,1), rgba(5,5,5,1));
    box-shadow:0 25px 80px rgba(0,0,0,.7);
    position:relative;
    overflow:hidden;
  }
  .traffic::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 0%, rgba(255,155,210,.28), rgba(0,0,0,0) 60%);
    opacity:.7;
    pointer-events:none;
  }
  .traffic-inner{position:relative;z-index:1}
  .traffic-title{
    font-size:22px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.9;
    margin-bottom:8px;
  }
  .traffic-number{
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight:800;
    letter-spacing:-0.04em;
    margin-bottom:4px;
    color:#FF9BD2;
  }
  .traffic-caption{
    font-size:14px;
    color:var(--muted);
    margin-bottom:26px;
  }
  .traffic-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap:18px;
  }
  .traffic-item{
    border-radius:24px;
    padding:20px;
    background:radial-gradient(circle at 0% 0%, rgba(255,255,255,.1), rgba(0,0,0,0) 55%),
               linear-gradient(180deg, rgba(25,25,25,1), rgba(10,10,10,1));
    border:1px solid rgba(255,255,255,.12);
    text-align:center;
  }
  .traffic-metric{
    font-size:20px;
    font-weight:700;
    margin-bottom:6px;
  }
  .traffic-label{
    font-size:13px;
    color:var(--muted);
  }

  /* PARTNER LOGOS */
  .logosRow{
    display:flex;
    flex-wrap:wrap;
    gap:18px 32px;
    align-items:center;
    margin-top:8px;
  }
  .logoItem img{
    height:26px;
    width:auto;
    opacity:.9;
    filter:brightness(1.1);
  }
  .logosNote{
    font-size:12px;
    color:var(--muted);
    margin-top:14px;
    max-width:520px;
  }

  /* Logo tiles grid */
  .logosGrid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap:16px;
    padding:24px;
    min-height:360px;
  }
  .logoTile{
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
  }
  .logoTile:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,.2);
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  }
  .logoTile img{
    max-width:100%;
    max-height:40px;
    width:auto;
    height:auto;
    opacity:.9;
    filter:brightness(1.1);
  }

  /* Footer */
  footer{border-top:1px solid var(--line);padding:80px 22px;color:rgba(246,246,246,.65);scroll-snap-align:start;scroll-snap-stop:always}
  .foot{width:min(1180px,100%);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;font-size:13px}

  /* Reveal animations */
  .reveal{opacity:0;transform: translateY(14px);transition: opacity .7s ease, transform .7s ease;will-change: transform, opacity}
  .reveal.in{opacity:1;transform: translateY(0)}

  /* Responsive */
  @media (max-width: 940px){
    .district, .district.flip{grid-template-columns:1fr}
    .media{min-height:300px}
    .scrollHint{display:none}
    .logosRow{gap:14px 22px}
    .logoItem img{height:22px}
    .logosGrid{
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap:12px;
      padding:20px;
    }
    .logoTile{padding:16px}
    .logoTile img{max-height:32px}
    .withdrawal-notifications{
      right:16px;
      max-width:280px;
    }
    .withdrawal-card{
      padding:12px 14px;
    }
    .withdrawal-avatar{
      width:38px;
      height:38px;
      font-size:14px;
    }
  }
  @media (max-width: 520px){
    .snapSection{min-height:140vh;}
    header{padding-top:110px}
    .topbar{padding:16px 16px}
    .snapSticky{padding:96px 16px}
    footer{padding:54px 16px}
    .traffic{padding:26px 20px}
    .logosGrid{
      grid-template-columns: repeat(2, 1fr);
      gap:10px;
      padding:16px;
    }
    .logoTile{padding:12px}
    .logoTile img{max-height:28px}
    .withdrawal-notifications{
      display:none;
    }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .bgLayer{transition:none}
    .reveal{transition:none;opacity:1;transform:none}
    .marqueeTrack{animation:none}
  }