/* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    a { text-decoration: none; }

    /* ── BASE ── */
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1a1a2e;
      line-height: 1.7;
      overflow-x: hidden;
    }

    /* ── CANVAS BG ── */
    #bg-canvas {
      position: fixed; top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0; pointer-events: none;
    }

    nav, .container, footer { position: relative; z-index: 1; }

    /* ══════════════════════════════════════
       NAV — Premium
    ══════════════════════════════════════ */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(0,0,0,0.07);
      padding: 0 2rem;
      display: flex; align-items: center; gap: 14px; height: 62px;
      box-shadow: 0 1px 24px rgba(0,0,0,0.06);
      transition: box-shadow 0.3s ease;
    }
    nav.scrolled {
      box-shadow: 0 4px 32px rgba(0,0,0,0.12);
      background: rgba(255,255,255,0.96);
    }

    /* Logo pill */
    .nav-logo {
      width: 36px; height: 36px;
      background: linear-gradient(135deg, #1565c0, #42a5f5);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 800; color: #fff;
      box-shadow: 0 2px 10px rgba(21,101,192,0.35);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      flex-shrink: 0;
    }
    .nav-logo:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(21,101,192,0.5); }

    /* Brand name + tagline */
    .nav-brand { display: flex; flex-direction: column; line-height: 1.1; }
    .nav-name  { font-size: 15px; font-weight: 700; color: #0f172a; letter-spacing: -0.2px; }
    .nav-tag   { font-size: 10px; color: #94a3b8; font-weight: 500; letter-spacing: 0.03em; }

    .nav-spacer { flex: 1; }

    /* Pill nav links */
    .nav-links { display: flex; gap: 2px; background: #f1f5f9; padding: 4px; border-radius: 12px; }
    .nav-link {
      font-size: 13px; font-weight: 500; color: #64748b;
      padding: 6px 14px; border-radius: 8px;
      cursor: pointer; transition: all 0.18s ease;
      white-space: nowrap;
    }
    .nav-link:hover, .nav-link.active {
      background: #fff;
      color: #1565c0;
      box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    }

    /* CTA button in nav */
    .nav-cta {
      display: flex; align-items: center; gap: 6px;
      background: linear-gradient(135deg, #1565c0, #1e88e5);
      color: #fff; font-size: 13px; font-weight: 600;
      padding: 8px 18px; border-radius: 10px;
      box-shadow: 0 2px 10px rgba(21,101,192,0.3);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
      white-space: nowrap;
    }
    .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(21,101,192,0.4); }

    /* ── LAYOUT ── */
    .container { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.5rem; }

    /* ══════════════════════════════════════
       SCROLL REVEAL
    ══════════════════════════════════════ */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-left  { opacity: 0; transform: translateX(-32px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
    .reveal-left.visible  { opacity: 1; transform: translateX(0); }
    .reveal-right { opacity: 0; transform: translateX(32px);  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
    .reveal-right.visible { opacity: 1; transform: translateX(0); }
    .reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1); }
    .reveal-scale.visible { opacity: 1; transform: scale(1); }

    /* Stagger delay helpers */
    .d1 { transition-delay: 0.05s; }
    .d2 { transition-delay: 0.12s; }
    .d3 { transition-delay: 0.19s; }
    .d4 { transition-delay: 0.26s; }
    .d5 { transition-delay: 0.33s; }
    .d6 { transition-delay: 0.40s; }

    /* ══════════════════════════════════════
       BIODATA
    ══════════════════════════════════════ */
    .biodata {
      background: linear-gradient(145deg, #0a1628 0%, #0c2a5e 55%, #1a1a3e 100%);
      border-radius: 24px; margin-bottom: 2rem;
      padding: 2rem;
      display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
      position: relative; overflow: hidden;
      box-shadow: 0 6px 0 #061029, 0 10px 0 #061029, 0 20px 50px rgba(0,0,50,0.45);
      border: 1px solid rgba(147,197,253,0.1);
    }
    .biodata::before {
      content: ''; position: absolute; top: -60px; left: -60px;
      width: 260px; height: 260px; border-radius: 50%;
      background: radial-gradient(circle, rgba(59,130,246,0.14) 0%, transparent 70%);
      pointer-events: none;
    }
    .biodata::after {
      content: ''; position: absolute; bottom: -80px; right: -40px;
      width: 300px; height: 300px; border-radius: 50%;
      background: radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%);
      pointer-events: none;
    }

    /* ── LEFT COLUMN ── */
    .bio-left {
      display: flex; flex-direction: column; align-items: center;
      gap: 12px; flex-shrink: 0; position: relative; z-index: 2;
      min-width: 220px;
    }
    .bio-photo-wrap { position: relative; flex-shrink: 0; }
    .bio-photo {
      width: 200px; height: 200px; border-radius: 50%;
      background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      border: 3px solid rgba(147,197,253,0.35);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; position: relative;
      box-shadow: 0 0 0 6px rgba(59,130,246,0.15), 0 12px 40px rgba(0,0,0,0.5);
      cursor: default;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .bio-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      border-radius: 50%;
      display: block;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      -ms-interpolation-mode: bicubic;
    }
    .bio-photo-ring {
      position: absolute; inset: -12px; border-radius: 50%;
      border: 2px solid transparent; pointer-events: none;
      border-top-color: rgba(96,165,250,0.6); border-right-color: rgba(167,139,250,0.3);
      animation: iconRing 5s linear infinite;
    }
    .bio-photo-ring2 {
      position: absolute; inset: -22px; border-radius: 50%;
      border: 1px solid transparent; pointer-events: none;
      border-bottom-color: rgba(96,165,250,0.2); border-left-color: rgba(167,139,250,0.15);
      animation: iconRing 9s linear infinite reverse;
    }
    .bio-online {
      position: absolute; bottom: 12px; right: 12px;
      width: 20px; height: 20px; border-radius: 50%;
      background: #4ade80; box-shadow: 0 0 12px #4ade80;
      border: 3px solid #0a1628; z-index: 3;
      animation: heroDot 2.5s ease-in-out infinite;
    }
    .bio-name-under {
      font-size: 14px; font-weight: 700; color: #fff; text-align: center;
      text-shadow: 0 0 14px rgba(99,179,255,0.3);
    }
    .bio-role-under {
      display: flex; align-items: center; gap: 5px;
      font-size: 11px; color: rgba(147,197,253,0.65); text-align: center;
    }
    .bio-role-dot { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 5px #4ade80; flex-shrink: 0; }

    /* ── RIGHT COLUMN ── */
    .bio-info { flex: 1; min-width: 260px; position: relative; z-index: 2; }
    .bio-card-header { margin-bottom: 1rem; }
    .bio-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
      color: rgba(147,197,253,0.5); text-transform: uppercase; margin-bottom: 8px;
    }
    .bio-header-divider {
      width: 36px; height: 2px;
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      border-radius: 2px; box-shadow: 0 0 8px rgba(99,102,241,0.5);
    }
    .bio-rows { display: flex; flex-direction: column; gap: 6px; }
    .bio-row {
      display: flex; align-items: center;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(147,197,253,0.1);
      border-radius: 10px; padding: 10px 14px;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .bio-row:hover {
      background: rgba(59,130,246,0.08);
      border-color: rgba(147,197,253,0.25);
    }
    .bio-row-content { flex: 1; min-width: 0; }
    .bio-row-label {
      font-size: 10px; font-weight: 600; color: rgba(147,197,253,0.5);
      text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 2px;
    }
    .bio-row-value { font-size: 13px; color: #e2eeff; font-weight: 500; line-height: 1.4; }

    @media (max-width: 640px) {
      .biodata { flex-direction: column; align-items: center; }
      .bio-left { width: 100%; }
      .bio-info { width: 100%; }
    }
    .hero {
      background: linear-gradient(145deg, #0a1628 0%, #0c2a5e 45%, #1a1a3e 100%);
      border-radius: 28px; text-align: center;
      position: relative; overflow: hidden; margin-bottom: 2.5rem;
      box-shadow: 0 6px 0 #061029, 0 10px 0 #061029, 0 20px 60px rgba(0,0,50,0.55);
    }
    .hero::before {
      content: ''; position: absolute; top: -80px; left: -80px;
      width: 320px; height: 320px; border-radius: 50%;
      background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, transparent 70%);
      animation: heroOrb1 7s ease-in-out infinite; pointer-events: none; z-index: 0;
    }
    .hero::after {
      content: ''; position: absolute; bottom: -100px; right: -60px;
      width: 380px; height: 380px; border-radius: 50%;
      background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
      animation: heroOrb2 9s ease-in-out infinite; pointer-events: none; z-index: 0;
    }
    @keyframes heroOrb1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,20px) scale(1.1)} }
    @keyframes heroOrb2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,-30px) scale(1.08)} }
    .hero-orb-mid {
      position: absolute; top: 50%; left: 60%; transform: translate(-50%,-50%);
      width: 260px; height: 260px; border-radius: 50%;
      background: radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%);
      animation: heroOrb3 11s ease-in-out infinite; pointer-events: none; z-index: 0;
    }
    @keyframes heroOrb3 { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-45%,-55%) scale(1.15)} }
    .hero-sparkle {
      position: absolute; width: 3px; height: 3px; border-radius: 50%;
      background: rgba(147,197,253,0.75); pointer-events: none; z-index: 1;
      animation: heroSpkl var(--dur) ease-in-out infinite var(--delay);
    }
    @keyframes heroSpkl { 0%,100%{opacity:0;transform:translateY(0) scale(0)} 50%{opacity:1;transform:translateY(-18px) scale(1)} }
    .hero-scanline {
      position: absolute; left:0; right:0; height:1px;
      background: linear-gradient(90deg, transparent 0%, rgba(99,179,255,0.12) 30%, rgba(147,197,253,0.22) 50%, rgba(99,179,255,0.12) 70%, transparent 100%);
      pointer-events: none; z-index: 1; animation: scanMove 8s linear infinite;
    }
    @keyframes scanMove { 0%{top:-2px;opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{top:100%;opacity:0} }
    .hero-inner { position: relative; z-index: 2; padding: 2.5rem 2rem 2rem; }
    .hero h1 {
      font-size: 2.6rem; font-weight: 800; color: #fff;
      margin-bottom: 0.5rem; position: relative; z-index: 1;
      letter-spacing: -0.5px; line-height: 1.2;
      text-shadow: 0 0 40px rgba(99,179,255,0.4);
    }
    .hero-title-glow {
      display: inline-block;
      background: linear-gradient(90deg, #93c5fd, #c4b5fd, #93c5fd);
      background-size: 200% auto;
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      animation: gradShiftHero 5s linear infinite;
    }
    @keyframes gradShiftHero { 0%{background-position:0% center} 100%{background-position:200% center} }
    .hero p { font-size: 1rem; color: rgba(148,197,253,0.85); margin-bottom: 0; position: relative; z-index: 1; line-height: 1.6; }
    .hero-divider {
      width: 60px; height: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      border-radius: 3px; margin: 1.4rem auto 1.6rem;
      box-shadow: 0 0 12px rgba(99,102,241,0.6); position: relative; z-index: 1;
    }
    .hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; position: relative; z-index: 1; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,0.07); border: 1px solid rgba(147,197,253,0.2);
      color: rgba(147,197,253,0.9); font-size: 12px; font-weight: 600;
      padding: 7px 16px; border-radius: 50px; backdrop-filter: blur(4px);
      transition: background 0.2s, border-color 0.2s;
    }
    .hero-badge:hover { background: rgba(255,255,255,0.12); border-color: rgba(147,197,253,0.4); }
    .hero-badge i { font-size: 14px; opacity: 0.85; }
    .hero-badge-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #4ade80; box-shadow: 0 0 7px #4ade80;
      animation: heroDot 2s ease-in-out infinite;
    }
    @keyframes heroDot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:0.7} }
    .hero-stats {
      display: flex; justify-content: center; flex-wrap: wrap; margin-top: 0;
      position: relative; z-index: 1;
      border-top: 1px solid rgba(147,197,253,0.1); border-bottom: 1px solid rgba(147,197,253,0.1);
    }
    .hero-stat {
      padding: 16px 30px; text-align: center;
      border-right: 1px solid rgba(147,197,253,0.1); flex: 1; min-width: 120px;
    }
    .hero-stat:last-child { border-right: none; }
    .hero-stat-num { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 5px; text-shadow: 0 0 20px rgba(99,179,255,0.5); }
    .hero-stat-lbl { font-size: 10px; color: rgba(147,197,253,0.65); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
    .hero-bottom {
      padding: 1.6rem 2rem;
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
      position: relative; z-index: 2;
    }

    /* ══════════════════════════════════════
       STATS GRID
    ══════════════════════════════════════ */
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 2.5rem; }
    .stat-card {
      background: linear-gradient(145deg, #0a1628 0%, #0c2a5e 60%, #1a1a3e 100%);
      border-radius: 14px; padding: 1.25rem 1rem; text-align: center;
      border: 1px solid rgba(147,197,253,0.15); position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      box-shadow: 0 4px 0 #061029, 0 8px 20px rgba(0,0,0,0.35);
    }
    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 0 #3b82f6, 0 10px 0 #3b82f6, 0 18px 30px rgba(59,130,246,0.25);
      border-color: rgba(147,197,253,0.4);
    }
    .stat-number { font-size: 24px; font-weight: 700; color: #93c5fd; margin-bottom: 4px; text-shadow: 0 0 16px rgba(99,179,255,0.4); }
    .stat-label  { font-size: 12px; color: rgba(147,197,253,0.65); }

    /* ══════════════════════════════════════
       SECTION TITLE
    ══════════════════════════════════════ */
    .section-title {
      font-size: 19px; font-weight: 700; color: #0f172a;
      -webkit-text-fill-color: #0f172a;
      margin-bottom: 1.25rem; display: flex; align-items: center; gap: 10px;
    }
    .section-title::before {
      content: ''; display: inline-block; flex-shrink: 0;
      width: 4px; height: 20px;
      background: linear-gradient(to bottom, #1e88e5, #64b5f6);
      border-radius: 4px;
    }

    /* ══════════════════════════════════════
       INFO BLOCK
    ══════════════════════════════════════ */
    .info-block {
      background: linear-gradient(145deg, #0a1628 0%, #0c2a5e 60%, #1a1a3e 100%);
      border: 1px solid rgba(147,197,253,0.15); border-radius: 16px;
      padding: 1.75rem; margin-bottom: 1.5rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      box-shadow: 0 4px 0 #061029, 0 8px 24px rgba(0,0,0,0.3);
    }
    .info-block:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 0 #3b82f6, 0 8px 0 #3b82f6, 0 16px 30px rgba(59,130,246,0.2);
      border-color: rgba(147,197,253,0.4);
    }
    .info-header { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
    .info-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
    .ic-blue   { background: rgba(59,130,246,0.2);  color: #93c5fd; }
    .ic-teal   { background: rgba(20,184,166,0.2);  color: #5eead4; }
    .ic-purple { background: rgba(139,92,246,0.2);  color: #c4b5fd; }
    .ic-indigo { background: rgba(99,102,241,0.2);  color: #a5b4fc; }
    .info-label { font-size: 11px; font-weight: 600; color: rgba(147,197,253,0.55); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 3px; }
    .info-title { font-size: 16px; font-weight: 600; color: #e2eeff; }
    .info-body  { font-size: 14px; color: rgba(148,197,253,0.78); line-height: 1.75; }
    .info-body strong { color: #ffffff; font-weight: 600; }

    /* ══════════════════════════════════════
       AGE CHART
    ══════════════════════════════════════ */
    .age-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; }
    .age-card {
      background: rgba(255,255,255,0.04); border-radius: 10px; padding: 14px;
      text-align: center; border: 1px solid rgba(147,197,253,0.13);
      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
      box-shadow: 0 2px 0 #061029, 0 4px 10px rgba(0,0,0,0.2);
    }
    .age-card:hover {
      transform: translateY(-4px); background: rgba(59,130,246,0.1);
      box-shadow: 0 2px 0 #3b82f6, 0 6px 0 #3b82f6, 0 12px 20px rgba(59,130,246,0.2);
      border-color: rgba(147,197,253,0.3);
    }
    .age-pct      { font-size: 20px; font-weight: 700; color: #93c5fd; text-shadow: 0 0 14px rgba(99,179,255,0.4); }
    .age-range    { font-size: 11px; color: rgba(147,197,253,0.6); margin: 4px 0 8px; }
    .age-bar-wrap { height: 5px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
    .age-bar      { height: 5px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); border-radius: 4px; }

    /* ══════════════════════════════════════
       FEATURE CHIPS
    ══════════════════════════════════════ */
    .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
    .feat-chip {
      background: rgba(255,255,255,0.04); border-radius: 10px;
      padding: 10px 14px; display: flex; align-items: center; gap: 10px;
      border: 1px solid rgba(147,197,253,0.13);
      transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
      box-shadow: 0 2px 0 #061029, 0 3px 8px rgba(0,0,0,0.18);
    }
    .feat-chip:hover {
      transform: translateY(-3px); background: rgba(59,130,246,0.1);
      box-shadow: 0 2px 0 #3b82f6, 0 5px 0 #3b82f6, 0 10px 16px rgba(59,130,246,0.18);
      border-color: rgba(147,197,253,0.32);
    }
    .feat-dot  { width: 8px; height: 8px; border-radius: 50%; background: #60a5fa; flex-shrink: 0; box-shadow: 0 0 6px rgba(96,165,250,0.6); }
    .feat-name { font-size: 13px; color: rgba(147,197,253,0.85); }

    /* ══════════════════════════════════════
       CTA CARDS — E-Commerce & Informasi
    ══════════════════════════════════════ */
    .cta-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 2.5rem; }
    @media (max-width: 600px) { .cta-cards { grid-template-columns: 1fr; } }

    .cta-card {
      position: relative; border-radius: 22px; padding: 2rem 1.75rem 1.5rem;
      overflow: hidden; text-decoration: none;
      display: flex; flex-direction: column; gap: 0;
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
    }
    .cta-card:hover  { transform: translateY(-8px); }
    .cta-card:active { transform: translateY(2px); }

    /* Shine overlay */
    .cta-card::before {
      content: ''; position: absolute; inset: 0; border-radius: 22px;
      background: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, transparent 55%, rgba(255,255,255,0.04) 100%);
      pointer-events: none; z-index: 1;
    }
    /* Inner border */
    .cta-card::after {
      content: ''; position: absolute; inset: 1px; border-radius: 21px;
      border: 1px solid rgba(255,255,255,0.15); pointer-events: none; z-index: 1;
      transition: border-color 0.3s;
    }
    .cta-card:hover::after { border-color: rgba(255,255,255,0.3); }

    /* E-Commerce card */
    .cta-card-ecom {
      background: linear-gradient(145deg, #0a1628 0%, #0c2a5e 55%, #1a1a3e 100%);
      box-shadow: 0 6px 0 #04080f, 0 12px 0 #04080f, 0 22px 40px rgba(0,0,30,0.55);
    }
    .cta-card-ecom:hover { box-shadow: 0 10px 0 #04080f, 0 18px 0 #3b82f6, 0 32px 50px rgba(59,130,246,0.3); }

    /* Informasi card */
    .cta-card-info {
      background: linear-gradient(145deg, #150d2e 0%, #2a1060 55%, #1a0d3e 100%);
      box-shadow: 0 6px 0 #060010, 0 12px 0 #060010, 0 22px 40px rgba(10,0,40,0.55);
    }
    .cta-card-info:hover { box-shadow: 0 10px 0 #060010, 0 18px 0 #8b5cf6, 0 32px 50px rgba(139,92,246,0.3); }

    /* Icon circle */
    .cta-card-icon {
      width: 72px; height: 72px; border-radius: 20px; margin-bottom: 1.2rem;
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 2; flex-shrink: 0;
    }
    .cta-card-ecom .cta-card-icon {
      background: radial-gradient(circle at 35% 35%, rgba(96,165,250,0.35), rgba(30,136,229,0.15));
      box-shadow: 0 0 0 1px rgba(96,165,250,0.25), 0 0 24px rgba(59,130,246,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    }
    .cta-card-info .cta-card-icon {
      background: radial-gradient(circle at 35% 35%, rgba(167,139,250,0.35), rgba(109,40,217,0.15));
      box-shadow: 0 0 0 1px rgba(167,139,250,0.25), 0 0 24px rgba(139,92,246,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    }
    .cta-card-icon svg { width: 38px; height: 38px; position: relative; z-index: 1; }

    /* Ring dalam ikon — seperti hero logo */
    .cta-card-icon::before {
      content: ''; position: absolute; inset: -7px; border-radius: 26px;
      border: 2px solid transparent; pointer-events: none;
    }
    .cta-card-ecom .cta-card-icon::before {
      border-top-color: rgba(96,165,250,0.6); border-right-color: rgba(167,139,250,0.3);
      animation: iconRing 4s linear infinite;
    }
    .cta-card-info .cta-card-icon::before {
      border-top-color: rgba(167,139,250,0.6); border-right-color: rgba(96,165,250,0.3);
      animation: iconRing 5s linear infinite;
    }
    .cta-card-icon::after {
      content: ''; position: absolute; inset: -13px; border-radius: 32px;
      border: 1px solid transparent; pointer-events: none;
    }
    .cta-card-ecom .cta-card-icon::after {
      border-bottom-color: rgba(96,165,250,0.25); border-left-color: rgba(167,139,250,0.15);
      animation: iconRing 7s linear infinite reverse;
    }
    .cta-card-info .cta-card-icon::after {
      border-bottom-color: rgba(167,139,250,0.25); border-left-color: rgba(96,165,250,0.15);
      animation: iconRing 8s linear infinite reverse;
    }
    @keyframes iconRing { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

    /* wrap — no margin needed, icon has its own */
    .cta-icon-wrap { position: relative; display: inline-flex; margin-bottom: 1.2rem; z-index: 2; }
    .cta-icon-ring { display: none; }

    /* Badge "NEW" / "HOT" */
    .cta-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
      padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
      position: relative; z-index: 2; width: fit-content;
    }
    .badge-blue   { background: rgba(59,130,246,0.25); color: #93c5fd; border: 1px solid rgba(59,130,246,0.4); }
    .badge-purple { background: rgba(139,92,246,0.25); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.4); }
    .badge-dot { width: 5px; height: 5px; border-radius: 50%; animation: heroDot 2s ease-in-out infinite; }
    .badge-blue   .badge-dot { background: #60a5fa; box-shadow: 0 0 5px #60a5fa; }
    .badge-purple .badge-dot { background: #a78bfa; box-shadow: 0 0 5px #a78bfa; }

    /* Card heading */
    .cta-card-heading {
      font-size: 20px; font-weight: 800; margin-bottom: 8px;
      position: relative; z-index: 2; letter-spacing: -0.3px; line-height: 1.2;
    }
    .cta-card-ecom .cta-card-heading { color: #ffffff; }
    .cta-card-info .cta-card-heading { color: #ffffff; }

    /* Tagline */
    .cta-card-desc {
      font-size: 13px; line-height: 1.65; margin-bottom: 1.5rem;
      position: relative; z-index: 2;
    }
    .cta-card-ecom .cta-card-desc { color: rgba(147,197,253,0.78); }
    .cta-card-info .cta-card-desc { color: rgba(196,181,253,0.78); }

    /* Perks list */
    .cta-perks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1.5rem; position: relative; z-index: 2; }
    .cta-perk  { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
    .cta-perk-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .cta-card-ecom .cta-perk-dot { background: #60a5fa; box-shadow: 0 0 5px #60a5fa; }
    .cta-card-info .cta-perk-dot { background: #a78bfa; box-shadow: 0 0 5px #a78bfa; }
    .cta-card-ecom .cta-perk { color: rgba(147,197,253,0.85); }
    .cta-card-info .cta-perk { color: rgba(196,181,253,0.85); }

    /* CTA button inside card */
    .cta-card-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 13px 20px; border-radius: 12px;
      font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
      position: relative; z-index: 2; transition: gap 0.2s ease;
      margin-top: auto;
    }
    .cta-card:hover .cta-card-btn { gap: 12px; }
    .cta-card-ecom .cta-card-btn {
      background: linear-gradient(135deg, #1e88e5, #1565c0);
      color: #fff; box-shadow: 0 4px 0 #0d3a8a, 0 8px 18px rgba(21,101,192,0.4);
    }
    .cta-card-info .cta-card-btn {
      background: linear-gradient(135deg, #7c3aed, #5b21b6);
      color: #fff; box-shadow: 0 4px 0 #2e0d7a, 0 8px 18px rgba(109,40,217,0.4);
    }

    /* Decorative orb */
    .cta-card-orb {
      position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    }
    .cta-card-ecom .cta-card-orb { width:180px;height:180px;top:-50px;right:-50px; background:radial-gradient(circle,rgba(59,130,246,0.15) 0%,transparent 70%); }
    .cta-card-info .cta-card-orb { width:180px;height:180px;top:-50px;right:-50px; background:radial-gradient(circle,rgba(139,92,246,0.15) 0%,transparent 70%); }

    /* ══════════════════════════════════════
       ABOUT BOX
    ══════════════════════════════════════ */
    .about-box {
      background: linear-gradient(145deg, #0a1628 0%, #0c2a5e 60%, #1a1a3e 100%);
      border: 1px solid rgba(147,197,253,0.15); border-radius: 16px;
      padding: 1.75rem; margin-bottom: 2rem;
      display: flex; gap: 1.5rem; align-items: flex-start;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      box-shadow: 0 4px 0 #061029, 0 8px 24px rgba(0,0,0,0.3);
    }
    .about-box:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 0 #3b82f6, 0 8px 0 #3b82f6, 0 18px 32px rgba(59,130,246,0.22);
      border-color: rgba(147,197,253,0.4);
    }
    .about-accent { width: 4px; min-height: 90px; background: linear-gradient(to bottom, #3b82f6, #8b5cf6); border-radius: 4px; flex-shrink: 0; box-shadow: 0 0 10px rgba(59,130,246,0.4); }
    .about-text   { font-size: 14px; color: rgba(148,197,253,0.82); line-height: 1.8; }
    .about-text strong { color: #ffffff; font-weight: 600; }

    /* ══════════════════════════════════════
       CTA BAR
    ══════════════════════════════════════ */
    .cta-bar {
      background: linear-gradient(90deg, #1e40af, #1565c0, #1976d2);
      border-radius: 16px; padding: 1.75rem 2rem; margin-bottom: 0;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 5px 0 #0d2860, 0 8px 0 #0d2860, 0 16px 32px rgba(13,71,161,0.35);
    }
    .cta-bar:hover { transform: translateY(-4px); box-shadow: 0 5px 0 #0d2860, 0 10px 0 #0d2860, 0 22px 40px rgba(13,71,161,0.4); }
    .cta-text { color: #fff; font-size: 16px; font-weight: 600; }
    .cta-sub  { color: rgba(180,210,255,0.85); font-size: 13px; margin-top: 3px; }
    .cta-btn {
      background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4);
      color: #fff; padding: 10px 22px; border-radius: 10px;
      font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s;
    }
    .cta-btn:hover { background: rgba(255,255,255,0.27); }

    /* ══════════════════════════════════════
       CONTACT SECTION
    ══════════════════════════════════════ */
    .contact-section {
      margin-top: 2.5rem; padding: 56px 30px 50px;
      background: linear-gradient(145deg, #0a1628 0%, #0c2a5e 45%, #1a1a3e 100%);
      border-radius: 28px; text-align: center; position: relative; overflow: hidden;
      box-shadow: 0 6px 0 #061029, 0 10px 0 #061029, 0 20px 60px rgba(0,0,50,0.55);
    }
    .contact-section::before {
      content: ''; position: absolute; top: -80px; left: -80px;
      width: 320px; height: 320px; border-radius: 50%;
      background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, transparent 70%);
      animation: orbFloat1 7s ease-in-out infinite; pointer-events: none;
    }
    .contact-section::after {
      content: ''; position: absolute; bottom: -100px; right: -60px;
      width: 380px; height: 380px; border-radius: 50%;
      background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
      animation: orbFloat2 9s ease-in-out infinite; pointer-events: none;
    }
    @keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,20px) scale(1.1)} }
    @keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,-30px) scale(1.08)} }
    .contact-sparkle {
      position: absolute; width: 4px; height: 4px; border-radius: 50%;
      background: rgba(147,197,253,0.7); pointer-events: none;
      animation: sparkleAnim var(--dur) ease-in-out infinite var(--delay);
    }
    @keyframes sparkleAnim { 0%,100%{opacity:0;transform:translateY(0) scale(0)} 50%{opacity:1;transform:translateY(-20px) scale(1)} }
    .contact-title {
      font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 8px;
      position: relative; z-index: 1; text-shadow: 0 0 30px rgba(99,179,255,0.5); letter-spacing: -0.5px;
    }
    .contact-title-accent {
      display: inline-block;
      background: linear-gradient(90deg, #60a5fa, #a78bfa, #60a5fa);
      background-size: 200% auto;
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      animation: gradShift 4s linear infinite;
    }
    @keyframes gradShift { 0%{background-position:0% center} 100%{background-position:200% center} }
    .contact-subtitle { color: rgba(148,197,253,0.8); font-size: 14px; margin-bottom: 10px; position: relative; z-index: 1; }
    .contact-divider {
      width: 60px; height: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      border-radius: 3px; margin: 14px auto 36px; position: relative; z-index: 1;
      box-shadow: 0 0 12px rgba(99,102,241,0.6);
    }
    .contact-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 16px; max-width: 680px; margin: 0 auto; position: relative; z-index: 1;
    }
    .contact-card {
      position: relative; border-radius: 20px; padding: 26px 16px 20px;
      color: white; font-weight: 700; font-size: 13px;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      cursor: pointer; text-decoration: none; overflow: hidden;
      transform-style: preserve-3d;
      transition: transform 0.4s cubic-bezier(.17,.67,.35,1.3), box-shadow 0.4s ease;
    }
    .contact-card::before {
      content: ''; position: absolute; inset: 0; border-radius: 20px;
      background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%, rgba(255,255,255,0.04) 100%);
      pointer-events: none;
    }
    .contact-card::after {
      content: ''; position: absolute; inset: 1px; border-radius: 19px;
      border: 1px solid rgba(255,255,255,0.15); pointer-events: none; transition: border-color 0.3s;
    }
    .contact-card:hover { transform: translateY(-10px) rotateX(6deg) rotateY(-3deg) scale(1.04); }
    .contact-card:hover::after { border-color: rgba(255,255,255,0.3); }
    .contact-card:active { transform: translateY(2px) scale(0.97); }
    .contact-card-logo {
      width: 56px; height: 56px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
      box-shadow: 0 4px 14px rgba(0,0,0,0.25);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .contact-card:hover .contact-card-logo { transform: translateZ(10px) scale(1.1); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
    .contact-card-logo svg { width: 30px; height: 30px; }
    .contact-card-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; opacity: 0.95; }

    .card-youtube   { background: linear-gradient(145deg,#c0392b,#ff0000,#e53935); box-shadow: 0 8px 0 #7b1a1a, 0 14px 30px rgba(255,0,0,0.3); }
    .card-youtube:hover   { box-shadow: 0 12px 0 #7b1a1a, 0 22px 40px rgba(255,0,0,0.45); }
    .card-instagram { background: linear-gradient(145deg,#6a0572,#c13584,#e1306c,#fd5949,#f77737); box-shadow: 0 8px 0 #5a0060, 0 14px 30px rgba(193,53,132,0.35); }
    .card-instagram:hover { box-shadow: 0 12px 0 #5a0060, 0 22px 40px rgba(193,53,132,0.5); }
    .card-whatsapp  { background: linear-gradient(145deg,#128c3e,#25d366,#20ba5a); box-shadow: 0 8px 0 #0a5c28, 0 14px 30px rgba(37,211,102,0.3); }
    .card-whatsapp:hover  { box-shadow: 0 12px 0 #0a5c28, 0 22px 40px rgba(37,211,102,0.45); }
    .card-gmail     { background: linear-gradient(145deg,#b23124,#ea4335,#d93025); box-shadow: 0 8px 0 #7a1f17, 0 14px 30px rgba(234,67,53,0.3); }
    .card-gmail:hover     { box-shadow: 0 12px 0 #7a1f17, 0 22px 40px rgba(234,67,53,0.45); }
    .card-portfolio { background: linear-gradient(145deg,#1e3a7b,#2563eb,#1d4ed8); box-shadow: 0 8px 0 #0f2050, 0 14px 30px rgba(37,99,235,0.35); }
    .card-portfolio:hover { box-shadow: 0 12px 0 #0f2050, 0 22px 40px rgba(37,99,235,0.5); }
    .card-tiktok {
      background: linear-gradient(145deg,#0a0a0a,#111,#1a1a2e);
      box-shadow: 0 8px 0 #000, 0 14px 30px rgba(0,0,0,0.5);
      border: 1px solid rgba(105,201,208,0.2);
    }
    .card-tiktok:hover { box-shadow: 0 12px 0 #000, 0 22px 40px rgba(105,201,208,0.28); border-color: rgba(105,201,208,0.45); }

    .contact-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,0.07); border: 1px solid rgba(99,179,255,0.25);
      color: rgba(147,197,253,0.85); font-size: 11px; padding: 6px 16px; border-radius: 20px;
      margin-top: 32px; position: relative; z-index: 1;
    }
    .contact-badge-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #4ade80; box-shadow: 0 0 8px #4ade80;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:0.7} }

    /* ── FOOTER ── */
    footer { text-align: center; padding: 2rem; font-size: 12px; color: #94a3b8; }

    /* ── REDUCE MOTION ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition: none !important; animation: none !important; }
      .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 600px) {
      .hero h1 { font-size: 1.7rem; }
      .hero-stat { padding: 12px 16px; }
      .hero-stat-num { font-size: 1.2rem; }
      nav .nav-links { display: none; }
      nav .nav-cta { display: none; }
      .cta-bar { flex-direction: column; text-align: center; }
      .contact-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .contact-title { font-size: 24px; }
      .contact-section { padding: 40px 20px; }
    }