:root{
    --abyss:#03060f;
    --deep:#061426;
    --cyan:#22d3ee;
    --aqua:#5eead4;
    --gold:#f5b73d;
    --ink:#e8f4ff;
    --muted:#7f9bb5;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--abyss);
    color:var(--ink);
    font-family:"Inter","Helvetica Neue",Arial,sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  canvas#scene{
    position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;
  }
  .vignette{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(3,6,15,.75) 85%);
  }
  /* scrim yang menguat saat scroll — 3D jadi latar, teks tetap terbaca */
  .scrim{
    position:fixed;inset:0;z-index:2;pointer-events:none;
    background:var(--abyss);opacity:0;will-change:opacity;
  }
  /* scrim kiri khusus hero, supaya paragraf tetap kontras */
  .herofade{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(100deg, rgba(3,6,15,.92) 0%, rgba(3,6,15,.62) 34%, transparent 62%);
  }
  .grain{
    position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .content{position:relative;z-index:3}

  /* ---------- NAV ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:20;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 6vw;
    transition:background .4s ease, backdrop-filter .4s ease, padding .4s ease;
  }
  nav.solid{
    background:rgba(3,6,15,.90);
    backdrop-filter:blur(22px);
    border-bottom:1px solid rgba(94,234,212,.10);
    padding:14px 6vw;
  }
  .logo{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.22em;font-size:13px}
  .logo .orb{
    width:26px;height:26px;border-radius:50%;
    background:conic-gradient(from 210deg,var(--cyan),var(--aqua),var(--gold),var(--cyan));
    filter:blur(.3px);
    box-shadow:0 0 22px rgba(34,211,238,.55);
    animation:spin 9s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .navlinks{display:flex;gap:34px;font-size:12.5px;letter-spacing:.13em;color:var(--muted)}
  .navlinks a{color:inherit;text-decoration:none;position:relative;transition:color .3s}
  .navlinks a::after{
    content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
    background:var(--cyan);transition:width .35s ease;
  }
  .navlinks a:hover{color:var(--ink)}
  .navlinks a:hover::after{width:100%}
  .navcta{
    border:1px solid rgba(94,234,212,.35);border-radius:100px;
    padding:9px 20px;font-size:12px;letter-spacing:.13em;
    color:var(--aqua);text-decoration:none;
    transition:all .35s ease;
  }
  .navcta:hover{background:var(--aqua);color:var(--abyss);box-shadow:0 0 28px rgba(94,234,212,.5)}
  @media(max-width:820px){.navlinks{display:none}}

  /* ---------- HERO ---------- */
  header{
    min-height:100vh;display:flex;flex-direction:column;
    justify-content:center;padding:110px 6vw 0;
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:11px;letter-spacing:.34em;color:var(--aqua);
    margin-bottom:26px;text-transform:uppercase;
  }
  .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--aqua);
    box-shadow:0 0 12px var(--aqua);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

  h1{
    font-size:clamp(2.6rem,8.4vw,7.2rem);
    line-height:.94;font-weight:200;letter-spacing:-.035em;
    max-width:16ch;
  }
  h1 .strong{font-weight:800}
  h1 .grad{
    background:linear-gradient(100deg,var(--cyan) 0%,var(--aqua) 42%,var(--gold) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .sub{
    margin-top:30px;max-width:52ch;font-size:clamp(.95rem,1.5vw,1.12rem);
    line-height:1.75;color:var(--muted);font-weight:300;
  }
  .actions{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap}
  .btn{
    padding:15px 34px;border-radius:100px;font-size:13px;letter-spacing:.1em;
    text-decoration:none;transition:all .4s cubic-bezier(.16,1,.3,1);
    display:inline-flex;align-items:center;gap:10px;
  }
  .btn-p{
    background:linear-gradient(100deg,var(--cyan),var(--aqua));
    color:#03131a;font-weight:700;
    box-shadow:0 10px 44px rgba(34,211,238,.32);
  }
  .btn-p:hover{transform:translateY(-3px);box-shadow:0 16px 60px rgba(34,211,238,.55)}
  .btn-s{border:1px solid rgba(255,255,255,.16);color:var(--ink)}
  .btn-s:hover{border-color:var(--aqua);background:rgba(94,234,212,.07)}

  .scrollcue{
    position:absolute;bottom:38px;left:6vw;
    font-size:10.5px;letter-spacing:.3em;color:var(--muted);
    display:flex;align-items:center;gap:12px;
  }
  .scrollcue .line{width:52px;height:1px;background:linear-gradient(90deg,var(--aqua),transparent);
    animation:slide 2.2s ease-in-out infinite}
  @keyframes slide{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(14px);opacity:.4}}

  /* ---------- MARQUEE ---------- */
  .marquee{
    overflow:hidden;white-space:nowrap;padding:26px 0;
    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(255,255,255,.07);
    background:rgba(6,20,38,.32);backdrop-filter:blur(8px);
  }
  .marquee-track{display:inline-flex;gap:56px;animation:march 34s linear infinite}
  .marquee span{
    font-size:13px;letter-spacing:.26em;color:var(--muted);
    display:inline-flex;align-items:center;gap:56px;
  }
  .marquee i{width:5px;height:5px;border-radius:50%;background:var(--gold);display:inline-block;font-style:normal}
  @keyframes march{to{transform:translateX(-50%)}}

  /* ---------- SECTIONS ---------- */
  section{padding:150px 6vw;position:relative}
  .label{
    font-size:11px;letter-spacing:.32em;color:var(--gold);
    text-transform:uppercase;margin-bottom:20px;
  }
  h2{
    font-size:clamp(1.9rem,4.4vw,3.5rem);font-weight:200;
    letter-spacing:-.025em;line-height:1.12;max-width:19ch;
  }
  h2 b{font-weight:700;color:var(--aqua)}
  .lead{margin-top:22px;max-width:56ch;color:var(--muted);line-height:1.8;font-weight:300}

  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;margin-top:66px}
  .card{
    position:relative;padding:38px 32px;border-radius:20px;
    background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
    border:1px solid rgba(255,255,255,.085);
    backdrop-filter:blur(16px);
    overflow:hidden;
    transition:transform .55s cubic-bezier(.16,1,.3,1), border-color .55s, box-shadow .55s;
  }
  .card::before{
    content:"";position:absolute;inset:0;opacity:0;transition:opacity .55s;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(34,211,238,.14),transparent 62%);
  }
  .card:hover{transform:translateY(-9px);border-color:rgba(94,234,212,.4);box-shadow:0 26px 70px rgba(0,0,0,.55)}
  .card:hover::before{opacity:1}
  .card .num{
    font-size:11px;letter-spacing:.2em;color:var(--cyan);opacity:.65;margin-bottom:22px;
  }
  .card h3{font-size:1.3rem;font-weight:600;margin-bottom:14px;letter-spacing:-.01em}
  .card p{color:var(--muted);font-size:.92rem;line-height:1.75;font-weight:300}
  .card .tags{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
  .card .tags em{
    font-style:normal;font-size:10.5px;letter-spacing:.09em;
    padding:5px 11px;border-radius:100px;color:var(--muted);
    border:1px solid rgba(255,255,255,.1);
  }

  /* ---------- STATS ---------- */
  .stats{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px;margin-top:60px;
  }
  .stat{
    padding:40px 26px;border-radius:18px;text-align:center;
    background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.07);
    backdrop-filter:blur(12px);
  }
  .stat .n{
    font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:200;letter-spacing:-.04em;
    background:linear-gradient(100deg,var(--cyan),var(--gold));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .stat .t{margin-top:10px;font-size:11px;letter-spacing:.19em;color:var(--muted);text-transform:uppercase}

  /* ---------- CTA ---------- */
  .cta{
    text-align:center;padding:180px 6vw;
    background:radial-gradient(ellipse at 50% 50%,rgba(34,211,238,.09),transparent 66%);
  }
  .cta h2{margin:0 auto;max-width:16ch}
  .cta .lead{margin:22px auto 0}

  footer{
    padding:56px 6vw;border-top:1px solid rgba(255,255,255,.07);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;
    font-size:11.5px;letter-spacing:.13em;color:var(--muted);
    background:rgba(3,6,15,.72);backdrop-filter:blur(14px);
  }

  /* ---------- REVEAL ---------- */
  .rv{opacity:0;transform:translateY(38px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
  .rv.in{opacity:1;transform:none}

  /* ---------- CURSOR ---------- */
  .cursor{
    position:fixed;width:26px;height:26px;border-radius:50%;
    border:1px solid rgba(94,234,212,.55);pointer-events:none;z-index:50;
    transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s;
    mix-blend-mode:screen;
  }
  .cursor.big{width:62px;height:62px;background:rgba(94,234,212,.09)}
  @media(hover:none){.cursor{display:none}}

  /* ---------- FPS ---------- */
  .fps{
    position:fixed;bottom:14px;right:14px;z-index:60;
    font-family:ui-monospace,Menlo,monospace;font-size:10.5px;
    color:var(--muted);background:rgba(3,6,15,.62);
    padding:6px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
    letter-spacing:.06em;
  }

/* ================= MOBILE ================= */
@media (max-width:820px){
  .herofade{
    background:linear-gradient(180deg,
      rgba(3,6,15,.58) 0%,
      rgba(3,6,15,.88) 38%,
      rgba(3,6,15,.92) 72%,
      rgba(3,6,15,.70) 100%);
  }
  header{padding:96px 7vw 0}
  h1{max-width:100%}
  .sub{margin-top:22px}
  .actions{gap:12px;margin-top:34px}
  .btn{width:100%;justify-content:center;padding:16px 26px}
  section{padding:96px 7vw}
  .grid{margin-top:44px;gap:16px}
  .card{padding:30px 24px}
  .cta{padding:110px 7vw}
  .scrollcue{left:7vw;bottom:26px}
  footer{flex-direction:column;gap:12px}
}
@media (max-width:420px){
  .marquee span{font-size:11px}
}

/* ================= AKSESIBILITAS ================= */
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
  .logo .orb{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
a:focus-visible, .btn:focus-visible{
  outline:2px solid var(--aqua);
  outline-offset:4px;
  border-radius:100px;
}

/* ================= KONTAK ================= */
.contactrow{
  margin-top:34px;
  display:flex;align-items:center;justify-content:center;
  gap:22px;flex-wrap:wrap;
  font-size:13px;letter-spacing:.06em;
}
.contactrow a{
  color:var(--muted);text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;
  transition:color .3s;
}
.contactrow a:hover{color:var(--aqua)}
.contactrow svg{opacity:.75}
.contactrow .sep{
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.22);
}
.footlinks{display:flex;gap:24px;flex-wrap:wrap}
.footlinks a{color:var(--muted);text-decoration:none;transition:color .3s}
.footlinks a:hover{color:var(--aqua)}
@media (max-width:820px){
  .contactrow{gap:14px;flex-direction:column}
  .contactrow .sep{display:none}
}