/* ==========================================================================
       TOKENS
       ========================================================================== */
    :root {
      --bg: #07080A;
      --surface: rgba(16, 19, 15, 0.72);
      --surface-solid: #10130F;
      --elevated: #171B15;
      --text: #F5F4F0;
      --muted: #A9ACA4;
      --dim: #3A3E37;
      --gold: #D4AF37;
      --gold-light: #F0D57A;
      --gold-deep: #8F7524;
      --border: rgba(255, 255, 255, 0.09);
      --border-gold: rgba(212, 175, 55, 0.38);
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    }

    @property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

    html {
      background: var(--bg);
      color: var(--text);
      font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      scroll-behavior: smooth;
      scroll-padding-top: 84px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    body, button, input, select, textarea {
      font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    body {
      background: transparent;
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
      position: relative;
    }
    /* clip (bukan hidden) agar elemen sticky tetap berfungsi dan ghost monogram tidak memicu scroll horizontal */
    main { overflow-x: clip; }
    ::selection { background: var(--gold); color: var(--bg); }

    .zio-container {
      width: 100%;
      max-width: 1180px;
      margin-inline: auto;
      padding-inline: 14px;
    }
    @media (min-width: 640px) { .zio-container { padding-inline: 28px; } }
    @media (min-width: 1024px) { .zio-container { padding-inline: 32px; } }

    /* ==========================================================================
       LATAR BERGERAK: aurora emas, sapuan cahaya, grain, vignette
       Hanya memakai transform/opacity agar ringan di perangkat mobile.
       ========================================================================== */
    .bg-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); pointer-events: none; contain: strict; transform: translateZ(0); }

    .aurora {
      position: absolute; inset: -15%;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
    .aurora span { position: absolute; display: block; border-radius: 50%; will-change: transform; }

    .aurora .a1 {
      width: 70vmax; height: 70vmax; left: -12%; top: -18%;
      background: radial-gradient(closest-side, rgba(212,175,55,0.30), rgba(212,175,55,0.10) 50%, transparent 72%);
      animation: drift-1 26s ease-in-out infinite alternate;
    }
    .aurora .a2 {
      width: 62vmax; height: 62vmax; right: -18%; top: 22%;
      background: radial-gradient(closest-side, rgba(143,117,36,0.30), rgba(76,92,48,0.12) 55%, transparent 72%);
      animation: drift-2 34s ease-in-out infinite alternate;
    }
    .aurora .a3 {
      width: 54vmax; height: 54vmax; left: 18%; bottom: -28%;
      background: radial-gradient(closest-side, rgba(240,213,122,0.16), rgba(212,175,55,0.07) 55%, transparent 72%);
      animation: drift-3 42s ease-in-out infinite alternate;
    }
    @keyframes drift-1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(14vw, 12vh, 0) scale(1.18); } }
    @keyframes drift-2 { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-16vw, -10vh, 0) scale(0.92); } }
    @keyframes drift-3 { from { transform: translate3d(0,0,0) scale(0.95); } to { transform: translate3d(10vw, -14vh, 0) scale(1.2); } }

    .sweep {
      position: absolute; top: -10%; bottom: -10%; left: -100%; width: 200%;
      background: linear-gradient(112deg, transparent 38%, rgba(240,213,122,0.055) 50%, transparent 62%);
      animation: sweep 16s ease-in-out infinite alternate;
      will-change: transform;
    }
    @keyframes sweep { from { transform: translate3d(0,0,0); } to { transform: translate3d(50%,0,0); } }

    .vignette {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 90% 70% at 50% 28%, transparent 38%, rgba(3,4,3,0.72) 100%);
    }
    .grain {
      position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
      contain: strict; transform: translateZ(0);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* Progres scroll */
    .scroll-progress {
      position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
      background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold));
      transform: scaleX(0); transform-origin: 0 50%; will-change: transform; pointer-events: none;
    }

    .anim-paused, .anim-paused::before, .anim-paused::after { animation-play-state: paused !important; }

    /* ==========================================================================
       TIPOGRAFI
       ========================================================================== */
    .h1 { font-size: clamp(2.1rem, 4.6vw, 3.55rem); line-height: 1.07; letter-spacing: -0.03em; font-weight: 700; }
    .h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; }
    .eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 11px; border-radius: 999px;
      font-size: 10.5px; font-weight: 600; letter-spacing: 0.045em; color: var(--gold-light);
      background: rgba(212, 175, 55, 0.08);
      border: 1px solid rgba(212, 175, 55, 0.28);
    }
    @media (min-width: 640px) {
      .hero-badge { gap: 8px; padding: 6px 13px; font-size: 12px; letter-spacing: 0.06em; }
    }
    .hero-recap {
      display: grid; gap: 14px;
      padding-top: 22px;
      border-top: 1px solid var(--border);
    }
    .hero-recap-item {
      position: relative;
      padding-left: 16px;
    }
    .hero-recap-item::before {
      content: '';
      position: absolute; left: 0; top: 7px;
      width: 6px; height: 6px;
      background: var(--gold);
      transform: rotate(45deg);
      box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
    }

    .gold-text {
      background: linear-gradient(100deg, #B8902A 0%, #F6E08F 28%, #D4AF37 52%, #FFF3C2 74%, #B8902A 100%);
      background-size: 260% 100%;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: shimmer 7s linear infinite;
    }
    @keyframes shimmer { from { background-position: 0% 50%; } to { background-position: -260% 50%; } }

    /* Reveal kata pada H1 */
    .hl { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
    .hw { display: inline-block; }
    .js .hw { transform: translateY(112%); animation: rise 900ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 75ms + 160ms); }
    @keyframes rise { to { transform: translateY(0); } }

    /* ==========================================================================
       HEADER
       ========================================================================== */
    .site-header {
      position: sticky; top: 0; z-index: 60;
      background: transparent; border-bottom: 1px solid transparent;
      transition: background-color 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
    }
    .site-header.is-scrolled, .site-header.is-menu-open {
      background: rgba(7, 8, 10, 0.92);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-bottom-color: var(--border);
    }
    .nav-link { position: relative; padding: 4px 0; transition: color 160ms ease; }
    .nav-link::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
      background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 240ms var(--ease-out);
    }
    .nav-link:hover { color: var(--text); }
    .nav-link[aria-current="true"] { color: var(--text); }
    .nav-link[aria-current="true"]::after, .nav-link:hover::after { transform: scaleX(1); }
    /* Logo ZG asli (PNG transparan dari foto logo) */
    .logo-img { height: 30px; width: auto; aspect-ratio: 330 / 166; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(212,175,55,0.35)); }
    @media (min-width: 640px) { .logo-img { height: 34px; } }

    .wordmark { font-weight: 800; letter-spacing: 0.14em; white-space: nowrap; }

    /* ==========================================================================
       TOMBOL
       ========================================================================== */
    .btn {
      position: relative; overflow: hidden; isolation: isolate;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; padding: 0 24px; border-radius: 8px;
      font-weight: 600; font-size: 16px; line-height: 1;
      transition: transform 180ms var(--ease-out), border-color 180ms ease, background-color 180ms ease, color 180ms ease;
    }
    .btn:active { transform: scale(0.98); }
    .btn-gold {
      color: #15130A; font-weight: 700;
      background: linear-gradient(110deg, #C9A22E 0%, #F3DC8B 45%, #D4AF37 70%, #B8902A 100%);
      background-size: 220% 100%; background-position: 0% 50%;
      box-shadow: 0 0 0 1px rgba(240,213,122,0.35), 0 10px 30px -10px rgba(212,175,55,0.55);
      transition: background-position 600ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 240ms ease;
    }
    .btn-gold:hover { background-position: 100% 50%; box-shadow: 0 0 0 1px rgba(255,243,194,0.55), 0 14px 40px -10px rgba(212,175,55,0.7); }
    .btn-gold::after {
      content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
      transform: skewX(-20deg); animation: sheen 5.5s ease-in-out infinite;
    }
    @keyframes sheen { 0%, 62% { left: -60%; } 100% { left: 160%; } }
    .btn-ghost { color: var(--text); background: rgba(255,255,255,0.03); border: 1px solid var(--border); }
    .btn-ghost:hover { border-color: var(--border-gold); background: rgba(212,175,55,0.07); }
    .btn-sm { min-height: 42px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
    @media (max-width: 420px) { .btn-sm { padding: 0 12px; font-size: 14px; } }

    a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 6px; }

    /* ==========================================================================
       PERMUKAAN, BORDER BERGERAK, SPOTLIGHT
       ========================================================================== */
    .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }

    .glow-border {
      border: 1px solid transparent; border-radius: 14px;
      background:
        linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
        conic-gradient(from var(--ang), rgba(255,255,255,0.08) 0 55%, var(--gold-deep) 70%, var(--gold-light) 85%, rgba(255,255,255,0.08) 100%) border-box;
      animation: spin-ang 8s linear infinite;
    }
    @keyframes spin-ang { to { --ang: 360deg; } }

    .spot { position: relative; }
    .spot::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
      background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(212,175,55,0.14), transparent 60%);
      transition: opacity 260ms ease;
    }
    @media (hover: hover) { .spot:hover::before { opacity: 1; } }

    /* Placeholder visual: sengaja diberi label agar tidak dianggap bukti asli */
    .ph {
      position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
      text-align: center; padding: 20px; color: var(--muted); font-size: 13px;
      background:
        linear-gradient(120deg, rgba(212,175,55,0.10), rgba(143,117,36,0.04) 45%, rgba(212,175,55,0.12)),
        var(--surface-solid);
      background-size: 220% 220%, auto;
      animation: ph-shift 12s ease-in-out infinite alternate;
    }
    .ph::before { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(212,175,55,0.35); border-radius: 8px; pointer-events: none; }
    .ph-tag { font-size: 11px; letter-spacing: 0.16em; font-weight: 700; color: var(--gold); border: 1px solid var(--border-gold); padding: 3px 10px; border-radius: 999px; }
    @keyframes ph-shift { from { background-position: 0% 0%, 0 0; } to { background-position: 100% 100%, 0 0; } }

    /* ==========================================================================
       REVEAL SAAT SCROLL
       ========================================================================== */
    .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
    .js .reveal.is-visible { opacity: 1; transform: none; }
    .js .reveal-x { opacity: 0; transform: translateX(-22px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
    .js .reveal-x.is-visible { opacity: 1; transform: none; }

    [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

    .hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, transparent); transform: scaleX(0); transition: transform 1200ms var(--ease-out); }
    .hairline.is-visible { transform: scaleX(1); }
    html:not(.js) .hairline { transform: none; }

    /* ==========================================================================
       VISUAL HERO: POTRET CUTOUT ZIO GOLD & DOCK KANAL
       Memadukan halo emas hangat, arch editorial, dan gradasi bawah transparan
       agar subjek PNG menyatu alami dengan latar obsidian (#07080A).
       ========================================================================== */
    .hero-stage {
      position: relative;
      max-width: 430px;
      margin-inline: auto;
      isolation: isolate;
    }
    @media (min-width: 1024px) {
      .hero-stage { max-width: 460px; margin-right: 0; }
    }
    .hero-arch {
      position: absolute;
      inset: 11% 6% 12%;
      z-index: 0;
      border-radius: 220px 220px 20px 20px;
      border: 1px solid rgba(212, 175, 55, 0.24);
      background:
        radial-gradient(ellipse 76% 68% at 52% 34%, rgba(212, 175, 55, 0.22) 0%, rgba(143, 117, 36, 0.08) 52%, rgba(16, 19, 15, 0.55) 100%);
      box-shadow:
        inset 0 1px 0 rgba(246, 224, 143, 0.22),
        0 24px 60px -20px rgba(0, 0, 0, 0.85);
      pointer-events: none;
    }
    .hero-halo {
      position: absolute;
      width: 78%;
      aspect-ratio: 1 / 1;
      left: 11%;
      top: 8%;
      z-index: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(240, 213, 122, 0.24) 0%, rgba(212, 175, 55, 0.09) 46%, transparent 72%);
      filter: blur(18px);
      pointer-events: none;
      animation: pulse-halo 7s ease-in-out infinite alternate;
    }
    @keyframes pulse-halo {
      from { transform: scale(0.96); opacity: 0.82; }
      to { transform: scale(1.05); opacity: 1; }
    }
    .hero-portrait-wrap {
      position: relative;
      z-index: 1;
      pointer-events: none;
      user-select: none;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0,0,0,0.45) 90%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 76%, rgba(0,0,0,0.45) 90%, transparent 100%);
    }
    .hero-portrait {
      width: 100%;
      height: auto;
      display: block;
      filter: url(#hero-gold-tone) drop-shadow(0 0 10px rgba(212, 175, 55, 0.08)) drop-shadow(0 20px 38px rgba(0, 0, 0, 0.86));
      transform: translateZ(0);
    }
    .hero-dock {
      position: relative;
      z-index: 2;
      margin-top: -64px;
      background:
        linear-gradient(rgba(14, 17, 14, 0.88), rgba(10, 12, 10, 0.94)) padding-box,
        conic-gradient(from var(--ang), rgba(255,255,255,0.10) 0 55%, var(--gold-deep) 70%, var(--gold-light) 85%, rgba(255,255,255,0.10) 100%) border-box;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.85);
    }
    @media (max-width: 639px) {
      .hero-stage { max-width: 100%; }
      .hero-portrait-wrap { max-width: 288px; margin-inline: auto; }
      .hero-arch { max-width: 316px; margin-inline: auto; inset: 10% 0 14%; }
      .hero-dock { margin-top: -50px; }
    }
    .live-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--gold-light);
      box-shadow: 0 0 10px rgba(240, 213, 122, 0.9);
      flex-shrink: 0;
    }


    /* ==========================================================================
       FOKUS KOMUNITAS
       ========================================================================== */
    .focus-item { position: relative; padding: 28px 4px 30px; }
    .focus-item::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, var(--gold), rgba(212,175,55,0.1));
      transform: scaleX(0); transform-origin: 0 50%; transition: transform 1100ms var(--ease-out) 120ms;
    }
    .focus-item.is-visible::before { transform: scaleX(1); }
    html:not(.js) .focus-item::before { transform: none; }
    .focus-item:last-child { border-bottom: 1px solid var(--border); }
    .idx { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(212,175,55,0.7); font-variant-numeric: tabular-nums; transition: color 320ms ease; }
    @media (hover: hover) { .focus-item:hover .idx { color: rgba(212,175,55,0.9); } }
    .statement-ghost { position: absolute; width: min(70vw, 560px); opacity: 0.05; pointer-events: none; }


    /* ==========================================================================
       FAQ
       ========================================================================== */
    .faq-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms cubic-bezier(0.4, 0, 0.2, 1); }
    .faq-content[aria-hidden="false"] { grid-template-rows: 1fr; }
    .faq-inner { overflow: hidden; }
    .faq-icon { transition: transform 220ms ease; }
    button[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
    .faq-item { transition: background-color 220ms ease; }

    /* ==========================================================================
       CTA STICKY MOBILE
       ========================================================================== */
    .sticky-cta { position: fixed; left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 70; transform: translateY(160%); transition: transform 360ms var(--ease-out); }
    .sticky-cta.show { transform: translateY(0); }
    @media (min-width: 768px) { .sticky-cta { display: none; } }

    /* ==========================================================================
       REDUCED MOTION
       ========================================================================== */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .aurora span, .sweep, .gold-text, .btn-gold::after, .glow-border, .ph, .marquee-track, .hero-halo { animation: none !important; }
      .marquee-track { flex-wrap: wrap; width: auto; }
      .marquee-group[aria-hidden="true"] { display: none; }
      .js .hw, .js .reveal, .js .reveal-x { transform: none !important; opacity: 1 !important; animation: none !important; transition: none !important; }
      .hairline, .focus-item::before { transform: none !important; transition: none !important; }
      .js .statement { height: auto; }
      .js .statement-pin { position: static; height: auto; padding-block: 72px; }
      .sw { color: var(--text); transition: none; }
      .sw.key { color: var(--gold-light); }
      [data-parallax] { transform: none !important; }
      .scroll-progress { display: none; }
    }
  

    /* ==========================================================================
       MULTI-PAGE EXTENSIONS: INPUTS, PILL TABS, TOAST NOTICE
       Follows exact Zio Gold surface, border, and gold token system.
       ========================================================================== */
    .h3 {
      font-size: clamp(1.22rem, 1.9vw, 1.55rem);
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.02em;
    }
    .hero-social-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.03);
      color: var(--muted);
      transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms var(--ease-out);
    }
    .hero-social-btn:hover {
      color: var(--gold-light);
      border-color: var(--border-gold);
      background: rgba(212, 175, 55, 0.09);
      transform: translateY(-1px);
    }
    .hero-social-btn:focus-visible {
      outline: none;
      border-color: var(--border-gold);
      box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
    }
    .social-title-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      border: 1px solid rgba(212, 175, 55, 0.28);
      background: rgba(212, 175, 55, 0.07);
      color: var(--gold-light);
      flex-shrink: 0;
    }
    .security-warn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid rgba(240, 213, 122, 0.36);
      background: rgba(212, 175, 55, 0.11);
      color: var(--gold-light);
      flex-shrink: 0;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    /* ==========================================================================
       HERO TYPO (TYPOGRAPHIC STATEMENT TANPA FOTO)
       Riset: tipografi raksasa + satu CTA + trust signals + bg interaktif.
       Animasi jaringan geometri, teks HTML asli, reduced-motion aman.
       ========================================================================== */
    .hero-typo { overflow: hidden; isolation: isolate; }
    .hero-market-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: 0.54;
      transform: perspective(1100px) rotateX(4deg) rotateY(-7deg) scale(1.14) translate3d(-48px, 26px, 0);
      transform-origin: center;
      animation: hero-geometry-pan 16s ease-in-out infinite alternate;
      will-change: transform;
    }
    .hero-geometry-base {
      fill: none;
      stroke: rgba(212, 175, 55, 0.1);
      stroke-width: 0.8;
      vector-effect: non-scaling-stroke;
    }
    .hero-geometry-plane-mid {
      fill: none;
      stroke: url(#hero-geometry-line);
      stroke-width: 0.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .hero-geometry-plane-mid path:nth-child(2n) {
      opacity: 0.7;
    }
    .hero-geometry-plane-mid path:nth-child(3n) {
      opacity: 0.52;
    }
    .hero-geometry-nodes {
      fill: rgba(240, 213, 122, 0.7);
    }
    @keyframes hero-geometry-pan {
      from { transform: perspective(1100px) rotateX(4deg) rotateY(-7deg) scale(1.14) translate3d(-48px, 26px, 0); }
      to { transform: perspective(1100px) rotateX(-4deg) rotateY(7deg) scale(1.14) translate3d(48px, -26px, 0); }
    }
    /* Sejajar persis dengan .zio-container (navbar & semua section lain) */
    .hero-wide {
      width: 100%;
      max-width: 1180px;
      margin-inline: auto;
      padding-inline: 14px;
    }
    @media (min-width: 640px) { .hero-wide { padding-inline: 28px; } }
    @media (min-width: 1024px) { .hero-wide { padding-inline: 32px; } }

    .hero-headline {
      font-size: clamp(2.05rem, 4.1vw, 3.3rem);
      line-height: 1.12;
      letter-spacing: -0.03em;
      font-weight: 700;
      max-width: 24ch;
    }
    .hero-layout { display: grid; gap: 34px; }
    .hero-copy { min-width: 0; }
    @media (min-width: 960px) {
      .hero-layout {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        align-items: center;
        gap: clamp(36px, 5vw, 72px);
      }
      .hero-headline { font-size: clamp(2.3rem, 3.8vw, 3.3rem); }
    }

    .hero-spot {
      position: absolute;
      top: 0;
      left: 0;
      width: 620px;
      height: 620px;
      margin: -310px 0 0 -310px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(243, 220, 139, 0.06) 0%, rgba(212, 175, 55, 0.032) 42%, transparent 70%);
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      transition: opacity 500ms ease;
      will-change: transform;
    }
    .hero-typo.spot-on .hero-spot { opacity: 1; }

    .hero-stars {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .hero-stars span {
      position: absolute;
      left: var(--px);
      top: var(--py);
      width: var(--ps);
      height: var(--ps);
      border-radius: 50%;
      background: #E8D9A0;
      opacity: 0.14;
      animation: hero-twinkle 5.5s ease-in-out var(--pd) infinite alternate;
    }
    @keyframes hero-twinkle {
      from { opacity: 0.08; }
      to { opacity: 0.34; }
    }
    .hero-typo.anim-paused .hero-stars span { animation-play-state: paused; }
    @media (max-width: 639px) {
      .hero-stars span:nth-child(3n) { display: none; }
      .hero-market-backdrop { opacity: 0.38; }
    }

    .hero-channels {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .hero-market {
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 18px;
      text-align: left;
      border: 1px solid rgba(212, 175, 55, 0.22);
      border-radius: 12px;
      background: linear-gradient(145deg, rgba(16, 19, 15, 0.96), rgba(8, 10, 9, 0.98));
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }
    .hero-market-head {
      display: flex;
      align-items: center;
    }
    .hero-market-head {
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 13px;
      border-bottom: 1px solid var(--border);
    }
    .hero-market-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }
    .hero-market-title-group { min-width: 0; }
    .hero-market-kicker {
      display: block;
      margin-bottom: 4px;
      color: var(--gold);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.16em;
    }
    .hero-market-title-group h2 {
      color: var(--text);
      font-size: 13px;
      font-weight: 650;
      line-height: 1.35;
    }
    .hero-market-title-group h2 span {
      color: var(--muted);
    }
    .hero-market-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--gold-light);
      font-size: 10px;
      font-weight: 600;
      white-space: nowrap;
      transition: color 160ms ease;
    }
    .hero-market-link:hover { color: var(--text); }
    .hero-market-link:focus-visible {
      outline: 1px solid var(--gold-light);
      outline-offset: 3px;
      border-radius: 2px;
    }
    .hero-market-quote {
      min-height: 76px;
      padding-block: 8px;
      border-bottom: 1px solid var(--border);
    }
    .hero-market-quote .tradingview-widget-container,
    .hero-market-quote .tradingview-widget-container__widget {
      width: 100%;
      min-height: 58px;
    }
    .hero-market-chart {
      height: 244px;
      margin-top: 10px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: #0a0c0a;
    }
    .hero-market-chart .tradingview-widget-container,
    .hero-market-chart .tradingview-widget-container__widget {
      width: 100%;
      height: 100%;
    }
    .hero-market-chart iframe,
    .hero-market-quote iframe {
      display: block;
      width: 100%;
      border: 0;
    }
    .hero-market-info {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 1px solid rgba(212, 175, 55, 0.35);
      border-radius: 50%;
      background: rgba(212, 175, 55, 0.08);
      color: var(--gold-light);
      cursor: help;
    }
    .hero-market-info svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
    }
    .hero-market-info:hover,
    .hero-market-info:focus-visible,
    .hero-market-info.is-open {
      border-color: var(--gold-light);
      background: rgba(212, 175, 55, 0.16);
      outline: none;
    }
    .hero-market-tooltip {
      position: absolute;
      right: -2px;
      bottom: calc(100% + 9px);
      z-index: 5;
      width: min(250px, calc(100vw - 48px));
      padding: 9px 11px;
      border: 1px solid var(--border-gold);
      border-radius: 7px;
      background: #10130f;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
      color: var(--text);
      font-size: 11px;
      font-weight: 500;
      line-height: 1.5;
      text-align: left;
      opacity: 0;
      visibility: hidden;
      transform: translateY(4px);
      transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
      pointer-events: none;
    }
    .hero-market-info.is-open .hero-market-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    @media (max-width: 420px) {
      .hero-market { padding: 13px; }
      .hero-market-head { align-items: flex-start; }
      .hero-market-chart { height: 210px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-spot { display: none; }
      .hero-stars span { animation: none; opacity: 0.18; }
      .hero-market-backdrop { transform: none; animation: none; will-change: auto; }
    }

    .zio-input {
      width: 100%;
      min-height: 46px;
      padding: 10px 14px;
      border-radius: 8px;
      background: rgba(10, 12, 10, 0.82);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 14px;
      line-height: 1.5;
      transition: border-color 180ms ease, box-shadow 180ms ease;
    }
    .zio-input::placeholder { color: rgba(169, 172, 164, 0.58); }
    .zio-input:focus {
      outline: none;
      border-color: var(--border-gold);
      box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
    }
    select.zio-input {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23D4AF37' stroke-width='1.8'%3E%3Cpath d='M5 8l5 5 5-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 38px;
    }

    .pill-tab {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0 15px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
    }
    .pill-tab:hover {
      color: var(--text);
      border-color: var(--border-gold);
    }
    .pill-tab[aria-pressed="true"],
    .pill-tab[aria-selected="true"] {
      color: #15130A;
      background: linear-gradient(110deg, #C9A22E 0%, #F3DC8B 50%, #D4AF37 100%);
      border-color: rgba(240, 213, 122, 0.55);
    }

    .zio-toast {
      position: fixed;
      right: 16px;
      bottom: 78px;
      z-index: 85;
      width: min(400px, calc(100vw - 32px));
      background: rgba(14, 17, 14, 0.96);
      border-color: var(--border-gold);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.9);
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px);
      transition: opacity 220ms ease, transform 220ms var(--ease-out);
    }
    @media (min-width: 768px) {
      .zio-toast { bottom: 22px; }
    }
    .zio-toast.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* ==========================================================================
       FOOTER RESPONSIVE GRID: FULL SECTION WIDTH + EQUAL SPACE-BETWEEN
       ========================================================================== */
    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
      padding-bottom: 44px;
      width: 100%;
    }
    @media (min-width: 640px) {
      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 40px;
        padding-bottom: 48px;
      }
    }
    @media (min-width: 960px) {
      .footer-grid {
        grid-template-columns: minmax(220px, 330px) max-content max-content minmax(210px, 256px);
        justify-content: space-between;
        column-gap: 32px;
        row-gap: 40px;
      }
    }

    .footer-bottom {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      width: 100%;
    }
    @media (min-width: 860px) {
      .footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }

    .about-layout {
      display: grid;
      gap: 36px;
    }
    .about-intro {
      display: grid;
      align-content: start;
      gap: 14px;
      min-width: 0;
    }
    .about-intro .eyebrow { margin-bottom: 0; }
    .about-lead {
      max-width: 52ch;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.7;
    }
    .about-footer {
      display: grid;
      justify-items: start;
      gap: 12px;
      margin-top: 8px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }
    .about-footer p span {
      color: var(--gold-light);
      font-weight: 600;
    }
    .about-footer a {
      color: var(--gold-light);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    .about-footer a:hover { color: var(--text); }
    .social-channels {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      column-gap: 40px;
    }
    .social-channel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px 20px;
      padding: 18px 0;
      border-bottom: 1px solid var(--border);
    }
    .social-channel > div:first-child {
      min-width: 0;
    }
    .social-channel .mb-3 {
      margin-bottom: 0;
    }
    .social-channel .social-title-icon {
      color: var(--gold-light);
    }
    .social-channel-description {
      margin: 6px 0 0 30px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }
    .social-channel-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--gold-light);
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      transition: color 180ms ease;
    }
    .social-channel-link svg {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
    }
    .social-channel-link:hover {
      color: var(--text);
    }
    .social-telegram {
      grid-column: 1 / -1;
      display: grid;
      justify-items: center;
      margin-top: 24px;
      padding-block: 28px;
      border-top: 1px solid var(--border-gold);
      text-align: center;
    }
    .social-telegram-content {
      display: grid;
      justify-items: center;
      gap: 14px;
    }
    .social-telegram-content > div {
      display: grid;
      justify-items: center;
      gap: 12px;
    }
    .social-telegram .live-dot {
      flex: 0 0 auto;
    }
    .social-telegram-heading {
      display: grid;
      justify-items: center;
      gap: 8px;
    }
    .social-telegram-heading .social-title-icon svg {
      width: 26px;
      height: 26px;
    }
    .social-telegram-description {
      max-width: 62ch;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }
    .social-telegram-link {
      color: var(--gold-light);
      font-weight: 600;
      transition: color 180ms ease;
    }
    .social-telegram-link:hover {
      color: var(--text);
    }
    @media (min-width: 640px) {
      .social-channels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 520px) {
      .social-channel {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 16px 0;
      }
      .social-channel-link {
        margin-left: 30px;
      }
      .social-telegram {
        justify-items: center;
      }
    }
    .about-timeline {
      position: relative;
      display: grid;
      align-content: start;
      min-width: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .about-timeline-principle {
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }
    .about-timeline-principle span {
      color: var(--gold-light);
      font-weight: 600;
    }
    .about-timeline-item {
      position: relative;
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 16px;
      padding: 0 0 20px;
    }
    .about-timeline-item:not(:last-child) {
      margin-bottom: 18px;
      border-bottom: 1px solid var(--border);
    }
    .about-timeline-date {
      padding-top: 2px;
      color: var(--gold-light);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.5;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .about-timeline-item h3 {
      margin-bottom: 4px;
      color: var(--text);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.45;
    }
    .about-timeline-item p {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }
    @media (min-width: 960px) {
      .about-layout {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        align-items: start;
        gap: clamp(40px, 7vw, 96px);
      }
    }
    @media (max-width: 520px) {
      .about-timeline-item {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 12px;
      }
      .about-timeline-item:not(:last-child) {
        margin-bottom: 15px;
        padding-bottom: 16px;
      }
      .about-timeline-item p { font-size: 12px; }
    }

/* Tailwind CSS v3.4.17 (Precompiled) */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Onest,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.relative{position:relative}.sticky{position:sticky}.z-\[2\]{z-index:2}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.mb-3\.5{margin-bottom:.875rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}.mb-9{margin-bottom:2.25rem}.mt-0\.5{margin-top:.125rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-\[4\/3\]{aspect-ratio:4/3}.h-11{height:2.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-\[17px\]{height:17px}.h-\[68px\]{height:68px}.h-auto{height:auto}.min-h-\[200px\]{min-height:200px}.w-11{width:2.75rem}.w-4{width:1rem}.w-44{width:11rem}.w-5{width:1.25rem}.w-\[17px\]{width:17px}.w-full{width:100%}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-\[58ch\]{max-width:58ch}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize-y{resize:vertical}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-2{row-gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-3\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.875rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.875rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-\[color\:var\(--border\)\]>:not([hidden])~:not([hidden]){border-color:var(--border)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[color\:var\(--border\)\]{border-color:var(--border)}.border-\[color\:var\(--border-gold\)\]{border-color:var(--border-gold)}.bg-\[\#080A08\]{--tw-bg-opacity:1;background-color:rgb(8 10 8/var(--tw-bg-opacity,1))}.bg-\[\#090B09\]{--tw-bg-opacity:1;background-color:rgb(9 11 9/var(--tw-bg-opacity,1))}.bg-\[rgba\(16\2c 19\2c 15\2c 0\.92\)\]{background-color:rgba(16,19,15,.92)}.bg-\[rgba\(212\2c 175\2c 55\2c 0\.08\)\]{background-color:rgba(212,175,55,.08)}.bg-\[rgba\(212\2c 175\2c 55\2c 0\.12\)\]{background-color:rgba(212,175,55,.12)}.bg-black\/30{background-color:rgba(0,0,0,.3)}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-12{padding-bottom:3rem}.pb-14{padding-bottom:3.5rem}.pb-2\.5{padding-bottom:.625rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pr-4{padding-right:1rem}.pt-1{padding-top:.25rem}.pt-10{padding-top:2.5rem}.pt-14{padding-top:3.5rem}.pt-2{padding-top:.5rem}.pt-2\.5{padding-top:.625rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[11px\]{font-size:11px}.text-\[15px\]{font-size:15px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-\[color\:var\(--gold\)\]{color:var(--gold)}.text-\[color\:var\(--gold-light\)\]{color:var(--gold-light)}.text-\[color\:var\(--muted\)\]{color:var(--muted)}.text-\[color\:var\(--text\)\]{color:var(--text)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.accent-\[\#D4AF37\]{accent-color:#d4af37}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:border-\[color\:var\(--border-gold\)\]:hover{border-color:var(--border-gold)}.hover\:bg-white\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\:text-\[color\:var\(--gold-light\)\]:hover{color:var(--gold-light)}.hover\:text-\[color\:var\(--text\)\]:hover{color:var(--text)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:mb-10{margin-bottom:2.5rem}.sm\:mb-12{margin-bottom:3rem}.sm\:mb-7{margin-bottom:1.75rem}.sm\:mb-8{margin-bottom:2rem}.sm\:mb-9{margin-bottom:2.25rem}.sm\:mt-8{margin-top:2rem}.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:gap-5{gap:1.25rem}.sm\:gap-6{gap:1.5rem}.sm\:gap-8{gap:2rem}.sm\:p-10{padding:2.5rem}.sm\:p-12{padding:3rem}.sm\:p-6{padding:1.5rem}.sm\:p-7{padding:1.75rem}.sm\:p-8{padding:2rem}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:py-24{padding-top:6rem;padding-bottom:6rem}.sm\:py-4{padding-top:1rem;padding-bottom:1rem}.sm\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.sm\:pb-16{padding-bottom:4rem}.sm\:pb-20{padding-bottom:5rem}.sm\:pt-14{padding-top:3.5rem}.sm\:pt-16{padding-top:4rem}.sm\:pt-7{padding-top:1.75rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-\[13px\]{font-size:13px}.sm\:text-\[15\.5px\]{font-size:15.5px}.sm\:text-\[15px\]{font-size:15px}.sm\:text-\[16\.5px\]{font-size:16.5px}.sm\:text-\[16px\]{font-size:16px}.sm\:text-\[21px\]{font-size:21px}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:w-80{width:20rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:pb-12{padding-bottom:3rem}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-28{top:7rem}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:flex{display:flex}.lg\:inline-flex{display:inline-flex}.lg\:hidden{display:none}.lg\:h-\[74px\]{height:74px}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-end{align-items:flex-end}.lg\:gap-10{gap:2.5rem}.lg\:gap-12{gap:3rem}.lg\:gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}}@media (min-width:1280px){.xl\:gap-7{gap:1.75rem}}