/* ===== VISUALFIX5: definitive visual adjustments ===== */

/* Headline gradient — ultra-visible on dark bg */
.headline-gradient, .apply-hero-gradient{display:inline-block;background-image:linear-gradient(90deg,#8b5cf6 0%, #3b82f6 45%, #06b6d4 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent!important;background-size:100% 100%;background-repeat:no-repeat;text-shadow:0 6px 28px rgba(59,130,246,.35),0 1px 0 rgba(0,0,0,.25);}

/* Force any H1 secondary span to show gradient if marked */
h1 .apply-hero-gradient{display:inline-block;background-image:linear-gradient(90deg,#8b5cf6 0%, #3b82f6 45%, #06b6d4 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent!important;background-size:100% 100%;background-repeat:no-repeat;text-shadow:0 6px 28px rgba(59,130,246,.35),0 1px 0 rgba(0,0,0,.25);}

/* Logo badge for header/footer */
.logo-badge{
  width: 2.25rem; height: 2.25rem; display:grid; place-items:center;
  border-radius:.9rem; color:#fff; font-weight:800;
  background: linear-gradient(135deg,#4f46e5 0%, #7c3aed 55%, #9d4edd 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(109,40,217,.28);
}

/* CTA buttons — vivid blue-purple with shine */
.btn-cta-blue{--from:#22d3ee;--via:#3b82f6;--to:#8b5cf6;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:48px;padding:1rem 1.25rem;border-radius:14px;font-weight:800;color:#f8fafc;letter-spacing:.2px;text-decoration:none;background-image:linear-gradient(90deg,var(--from),var(--via),var(--to));background-color:#3b82f6;box-shadow:0 10px 28px rgba(59,130,246,.30),inset 0 1px 0 rgba(255,255,255,.16);-webkit-appearance:none;-webkit-text-fill-color:#f8fafc;transition:transform .15s ease,box-shadow .25s ease,filter .2s ease,opacity .15s ease;}
.btn-cta-blue::after{
  content:""; position:absolute; left:-150%; top:-60%; width:200%; height:220%;
  transform:rotate(20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  mix-blend-mode: screen; filter:blur(2px); opacity:0; transition: transform .6s ease, opacity .3s ease;
}
.btn-cta-blue:hover{ transform: translateY(-1px); filter:saturate(1.1);
  box-shadow: 0 18px 44px rgba(99,102,241,.38), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-cta-blue:hover::after{ transform: translateX(120%) rotate(20deg); opacity:.6; }
.btn-cta-blue:active{ transform: translateY(0) scale(.995); }

/* Price: label visible (no strike). Only the number is crossed thin red, larger & bold */
.price-old-label{ color:#a3a3a3; font-weight:700; margin-right:.35rem; }
.price-old-number{position:relative;display:inline-block;color:#b0b0b0;font-weight:800;font-size:1.1em;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(239,68,68,.9);} .price-old-number::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(239,68,68,.9);transform:translateY(-50%);}


/* ==== VISUALFIX4: stronger gradients, logo badge, vivid CTA, price styles ==== */

/* Hero title gradient (stronger contrast on very dark bg) */
.hero-text-gradient{
  display:inline;
  background-image: linear-gradient(90deg,#7c3aed 0%, #3b82f6 40%, #06b6d4 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent !important; -webkit-text-fill-color:transparent !important;
  text-shadow: 0 4px 24px rgba(59,130,246,.35), 0 1px 0 rgba(0,0,0,.2);
}

/* Logo badge (header & footer) */
.logo-badge{
  width: 2.25rem; height: 2.25rem;
  display:grid; place-items:center;
  border-radius: .9rem;
  color:#fff; font-weight:800;
  background: linear-gradient(135deg,#4f46e5 0%, #7c3aed 55%, #9d4edd 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
              0 10px 24px rgba(109,40,217,.28);
}

/* CTA button (pricing) — colorful blue variant with interactive shine */
.btn-cta-blue{--from:#22d3ee;--via:#3b82f6;--to:#8b5cf6;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:48px;padding:1rem 1.25rem;border-radius:14px;font-weight:800;color:#f8fafc;letter-spacing:.2px;text-decoration:none;background-image:linear-gradient(90deg,var(--from),var(--via),var(--to));background-color:#3b82f6;box-shadow:0 10px 28px rgba(59,130,246,.30),inset 0 1px 0 rgba(255,255,255,.16);-webkit-appearance:none;-webkit-text-fill-color:#f8fafc;transition:transform .15s ease,box-shadow .25s ease,filter .2s ease,opacity .15s ease;}
.btn-cta-blue::after{
  content:""; position:absolute; inset:-40% -120% auto -120%;
  height:200%; transform:rotate(20deg);
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.25), rgba(255,255,255,0));
  mix-blend-mode: screen; filter: blur(2px);
  transition: transform .6s ease, opacity .3s ease;
  opacity:.0;
}
.btn-cta-blue:hover{ transform: translateY(-1px); filter:saturate(1.08);
  box-shadow: 0 16px 40px rgba(99,102,241,.36), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-cta-blue:hover::after{ transform: translateX(80%); opacity:.65; }
.btn-cta-blue:active{ transform: translateY(0) scale(.995); }

/* Old price: label visible (no strike), number crossed thin red, a bit larger & bolder */
.price-old-label{ color:#9ca3af; font-weight:700; margin-right:.35rem; }
.price-old-number{position:relative;display:inline-block;color:#b0b0b0;font-weight:800;font-size:1.1em;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(239,68,68,.9);} .price-old-number::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(239,68,68,.9);transform:translateY(-50%);}


/* ==== E-POIN VISUALFIX3 ADDITIONS ==== */

/* === HERO TITLE gradient fallback === */
.hero-text-gradient{
  display:inline;
  background-image: linear-gradient(90deg,#4f46e5 0%, #3b82f6 40%, #06b6d4 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent !important; -webkit-text-fill-color:transparent !important;
}


/* === PRICING CTA unified blue === */
.btn-cta-blue{--from:#22d3ee;--via:#3b82f6;--to:#8b5cf6;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:48px;padding:1rem 1.25rem;border-radius:14px;font-weight:800;color:#f8fafc;letter-spacing:.2px;text-decoration:none;background-image:linear-gradient(90deg,var(--from),var(--via),var(--to));background-color:#3b82f6;box-shadow:0 10px 28px rgba(59,130,246,.30),inset 0 1px 0 rgba(255,255,255,.16);-webkit-appearance:none;-webkit-text-fill-color:#f8fafc;transition:transform .15s ease,box-shadow .25s ease,filter .2s ease,opacity .15s ease;}
.btn-cta-blue:hover{ transform: translateY(-1px); filter:saturate(1.05);
  box-shadow: 0 14px 36px rgba(59,130,246,.36), inset 0 1px 0 rgba(255,255,255,.20); }
.btn-cta-blue:active{ transform: translateY(0) scale(.995); }
.btn-cta-blue:focus-visible{ outline: 3px solid rgba(59,130,246,.55); outline-offset: 2px; }


/* === Old price striking emphasis === */
.price-old{
  color:#a1a1aa;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(239,68,68,.7);
  font-weight:600;
}
.price-old-label{ color:#9ca3af; font-weight:600; margin-right:.35rem; }


/* === Hero aurora background overlay === */
.hero-aurora{ position:relative; isolation:isolate; }
.hero-aurora::before,
.hero-aurora::after{
  content:""; position:absolute; z-index:-1; filter:blur(60px); opacity:.55; pointer-events:none;
}
.hero-aurora::before{ width:46rem; height:46rem; border-radius:50%;
  left:-14rem; top:-8rem;
  background: radial-gradient(60% 60% at 50% 50%, rgba(124,58,237,.55), transparent 70%),
              radial-gradient(50% 50% at 30% 30%, rgba(16,185,129,.5), transparent 70%); }
.hero-aurora::after{ width:54rem; height:54rem; border-radius:50%;
  right:-18rem; bottom:-6rem;
  background: radial-gradient(60% 60% at 50% 50%, rgba(59,130,246,.55), transparent 70%),
              radial-gradient(50% 50% at 70% 70%, rgba(217,70,239,.45), transparent 70%); }

html.no-js .reveal{opacity:1!important;transform:none!important}
:root { color-scheme: dark; }
    /* rapikan offset anchor untuk header fixed */
    section[id]{ scroll-margin-top: 96px; }

    .glass { backdrop-filter: saturate(160%) blur(10px); background: rgba(2,6,23,.5); }
    .reveal { opacity: 0; transform: translateY(10px); }
    .reveal.on { opacity: 1; transform: none; transition: all .7s ease; transition-delay: var(--d, 0s); }

    header .nav-link { color: rgb(226 232 240 / 1);}
    header .nav-link:hover { color: rgb(165 180 252 / 1);}

    #mobileMenu .backdrop { opacity: 0; transition: opacity .25s ease; }
    #mobileMenu[data-open="true"] .backdrop { opacity: 1; }
    #mobileMenu .panel { transform: translateY(-12px); opacity: 0; transition: all .3s cubic-bezier(.2,.7,.3,1); }
    #mobileMenu[data-open="true"] .panel { transform: translateY(0); opacity: 1; }

    .focus-ring { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,.5); }

    .stat-card{ position:relative; overflow:hidden }
    .stat-card::after{
      content:""; position:absolute; inset:-1px; border-radius:1rem;
      background: radial-gradient(600px circle at var(--mx,50%) -10%, rgba(99,102,241,.18), transparent 40%);
      opacity:0; transition:opacity .2s ease; pointer-events:none;
    }
    .stat-card:hover::after{ opacity:1; }

    /* ===== Harga Cards Polished ===== */
    .price-card{
      position:relative; overflow:hidden; border-radius:1rem;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .price-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 60px -25px rgba(99,102,241,.45); }
    .price-card .ribbon{
      position:absolute; top:12px; right:-32px; transform:rotate(15deg);
      background:linear-gradient(90deg,#22d3ee,#6366f1); color:#0b1220;
      font-weight:800; font-size:.7rem; letter-spacing:.08em;
      padding:.35rem 2.2rem; border-radius:.5rem; box-shadow:0 8px 24px rgba(2,6,23,.5);
      pointer-events:none;
    }
    @media (max-width: 767px){
      .ribbon{ display:none; }
    }
    .chip-laris{ display:inline-flex; align-items:center; gap:.4rem; font-size:.65rem; font-weight:800; letter-spacing:.06em; padding:.2rem .55rem; border-radius:.5rem; background:linear-gradient(90deg,#22d3ee,#6366f1); color:#0b1220; }

    .price-card::before{
      content:""; position:absolute; inset:-1px; z-index:0; border-radius:1rem;
      background:linear-gradient(90deg,#06b6d4,#6366f1,#d946ef,#84cc16,#06b6d4);
      background-size:200% 200%;
      filter:blur(12px); opacity:.25; transform:translateZ(0);
      animation: borderflow 10s linear infinite;
    }
    .price-inner{ position:relative; z-index:1; }
    .btn-cta{ position:relative; overflow:hidden; }
    .btn-cta::after{
      content:""; position:absolute; inset:0; transform: translateX(-120%);
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
      animation: none;
    }
    .btn-cta:hover::after{ animation: shine .8s ease; }

    /* PROMO strip */
    .promo-strip{ overflow:hidden; border-radius:.75rem; }
    .promo-strip .top{
      background: linear-gradient(90deg,#22c55e,#16a34a);
      color:#052e16; font-weight:900; text-transform:uppercase; letter-spacing:.06em;
    }
    .promo-strip .bot{ background: rgba(22,163,74,.12); }

    /* countdown */
    .promo-chip{
      display:inline-flex; align-items:center; gap:.5rem;
      border:1px solid rgba(16,185,129,.35);
      background: radial-gradient(120% 120% at 50% 0%, rgba(16,185,129,.18), rgba(16,185,129,.08));
      padding:.45rem .8rem; border-radius:.75rem;
      animation: pulseg 1.6s ease-in-out infinite;
    }
    .promo-chip .emoji{ filter: drop-shadow(0 0 6px rgba(16,185,129,.45)); }
    .promo-countdown{ font-variant-numeric: tabular-nums; letter-spacing:.06em; font-weight:900; font-size: clamp(1.125rem, 3.6vw, 1.875rem); color:#ecfeff; text-shadow: 0 0 10px rgba(16,185,129,.75), 0 0 24px rgba(16,185,129,.5); }
    .promo-deadline{ color:#d1fae5; }

    .i-tip{
      display:inline-flex; align-items:center; justify-content:center;
      width:16px; height:16px; margin-left:.35rem; font-size:10px; font-weight:800;
      border-radius:9999px; border:1px solid rgba(148,163,184,.5);
      color:#e2e8f0; background:rgba(148,163,184,.1); cursor:help; position:relative;
    }
    .i-tip:focus-visible{ outline:2px solid rgba(99,102,241,.6); }
    .i-tip::before{
      content: attr(data-tip);
      position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
      width: min(260px, 80vw); padding:.5rem .6rem; border-radius:.5rem;
      background: rgba(15,23,42,.95); color:#e2e8f0; font-size:.75rem; line-height:1.2rem;
      border:1px solid rgba(148,163,184,.3); box-shadow:0 6px 20px rgba(0,0,0,.35);
      opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:30;
    }
    .i-tip::after{
      content:""; position:absolute; bottom:118%; left:50%; transform:translateX(-50%);
      width:8px; height:8px; background:rgba(15,23,42,.95); border-left:1px solid rgba(148,163,184,.3); border-top:1px solid rgba(148,163,184,.3);
      rotate:45deg; opacity:0; transition:opacity .15s ease; z-index:29;
    }
    .i-tip:hover::before, .i-tip:hover::after, .i-tip:focus-visible::before, .i-tip:focus-visible::after{ opacity:1; }

    .tilt { transform-style: preserve-3d; }

    .demo-btn{
      position:relative; border:1px solid rgba(255,255,255,.08); background:rgba(148,163,184,.06);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
      isolation:isolate;
    }
    .demo-btn::before{
      content:""; position:absolute; inset:-1px; border-radius:0.75rem;
      background:linear-gradient(90deg,#22d3ee,#6366f1,#d946ef,#84cc16,#22d3ee);
      background-size:200% 200%; z-index:-1; filter:blur(10px); opacity:0; transition:opacity .2s linear;
      animation:borderflow 8s linear infinite;
    }
    .demo-btn:hover{
      transform: translateY(-1px);
      border-color: transparent;
      box-shadow:0 10px 30px -15px rgba(99,102,241,.45);
      background:rgba(148,163,184,.10);
    }
    .demo-btn:hover::before{ opacity:.5; }

    .preview-card{
      position:relative; overflow:hidden; border-radius:1rem;
      transition: box-shadow .2s ease, transform .2s ease;
    }
    .preview-card::before{
      content:""; position:absolute; inset:-1px; border-radius:1rem; z-index:0;
      background: conic-gradient(from 180deg, #22d3ee, #6366f1, #d946ef, #84cc16, #22d3ee);
      background-size:200% 200%; filter: blur(10px); opacity:0; transition:opacity .25s ease;
      animation:borderflow 10s linear infinite;
    }
    .preview-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 60px -25px rgba(99,102,241,.45); }
    .preview-card:hover::before{ opacity:.35; }
    .preview-inner{ position:relative; z-index:1; }

    .title-rainbow{
      background:linear-gradient(90deg,#e5e7eb,#fff,#e5e7eb);
      -webkit-background-clip:text; background-clip:text; color:transparent;
      position:relative; display:inline-block;
    }
    .title-rainbow::after{
      content:""; position:absolute; inset:0;
      background:linear-gradient(90deg,#22d3ee,#6366f1,#d946ef,#84cc16,#22d3ee);
      background-size:200% 200%; filter:blur(24px); opacity:.35; border-radius:1rem;
      z-index:-1; transform:translateY(40%);
      animation:borderflow 10s linear infinite;
    }

    .title-aurora{
      position:relative; display:inline-flex; align-items:center; justify-content:center;
      font-weight:900; letter-spacing:.01em;
      background:linear-gradient(90deg,#f0f9ff,#fff,#e9d5ff,#a7f3d0,#f0f9ff);
      -webkit-background-clip:text; background-clip:text; color:transparent;
      filter: drop-shadow(0 6px 22px rgba(99,102,241,.45)) drop-shadow(0 0 8px rgba(34,211,238,.28));
      padding-inline: .25rem;
    }
    .title-aurora::before{
      content:""; position:absolute; inset:-16px -28px -10px; z-index:-1;
      background: radial-gradient(120% 180% at 50% -10%, rgba(99,102,241,.38), rgba(34,211,238,.18) 35%, transparent 70%);
      filter: blur(22px);
      border-radius:2rem;
      animation: aurora 6s ease-in-out infinite;
    }
    .title-aurora::after{
      content:""; position:absolute; left:8%; right:8%; bottom:-6px; height:3px; border-radius:9999px;
      background:linear-gradient(90deg,#22d3ee,#6366f1,#d946ef,#84cc16,#22d3ee);
      background-size:200% 200%; animation:borderflow 5s linear infinite;
      box-shadow: 0 0 20px rgba(99,102,241,.45), 0 0 8px rgba(34,211,238,.35);
    }
    .title-aurora .sheen{
      position:absolute; inset:-4px; width:32%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
      mix-blend-mode:screen; pointer-events:none;
      animation: sheen 4.5s ease-in-out infinite;
    }

    .btn-demo{
      position:relative; display:inline-flex; align-items:center; gap:.65rem;
      border-radius:0.9rem; padding:.16rem;
      background:linear-gradient(90deg,#22d3ee,#6366f1,#d946ef,#84cc16,#22d3ee);
      background-size:200% 200%; animation:borderflow 6s linear infinite;
      box-shadow: 0 14px 40px -12px rgba(99,102,241,.55);
      transform: translateZ(0);
      will-change: transform, filter;
      isolation:isolate;
    }
    .btn-demo > span{
      position:relative; z-index:2;
      display:inline-flex; align-items:center; gap:.65rem;
      border-radius:.78rem; padding:.7rem 1.15rem;
      background:
        radial-gradient(60% 100% at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), rgba(255,255,255,.06) 40%, rgba(255,255,255,.04) 70%),
        rgba(3,7,18,.65);
      color:#fff; font-weight:800; font-size:.98rem; letter-spacing:.01em;
      backdrop-filter:saturate(160%) blur(6px);
      transition: transform .2s ease;
    }
    .btn-demo .spark{
      position:absolute; inset:-1px; border-radius:.9rem; z-index:1; overflow:hidden; pointer-events:none;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .btn-demo .spark::after{
      content:""; position:absolute; inset:0; transform: translateX(-120%);
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
      animation:none;
    }
    .btn-demo::before{
      content:""; position:absolute; inset:-6px; border-radius:1rem; z-index:0; opacity:.35;
      background:radial-gradient(80% 120% at var(--mx,50%) var(--my,50%), rgba(99,102,241,.55), transparent 60%);
      filter: blur(14px);
      transition: opacity .2s ease;
    }
    .btn-demo:hover{ transform:translateY(-1px) scale(1.01); filter: saturate(1.1); }
    .btn-demo:hover .spark::after{ animation: shine .9s ease; }
    .btn-demo:hover::before{ opacity:.6; }
    .btn-demo:active{ transform:translateY(0) scale(.99); }
    .btn-demo svg{ transition: transform .25s ease; }
    .btn-demo:hover svg{ transform: translateY(-1px) rotate(-8deg); }
    .btn-demo .ripple{
      position:absolute; width:12px; height:12px; border-radius:9999px; pointer-events:none;
      background: radial-gradient(circle, rgba(255,255,255,.55), transparent 60%);
      left: var(--rx); top: var(--ry);
      animation: ripple .6s ease-out forwards;
      z-index:1;
    }

    @keyframes softZoomIn {
      0%   { opacity: 0; transform: translateY(6px) scale(.985); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes subtlePop {
      0%   { opacity: 0; transform: translateY(2px) scale(.98); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .title-calm{
      display:inline-block;
      font-weight:800;
      letter-spacing:.005em;
      line-height:1.2;
      color:#e5e7eb;
      text-shadow:none;
      animation: softZoomIn .6s ease-out both;
    }
    .title-calm::after{
      content:"";
      display:block;
      width:128px; height:3px;
      margin:.5rem auto 0;
      border-radius:9999px;
      background:linear-gradient(90deg,#22d3ee,#6366f1);
      opacity:.6;
    }
    .title-calm .sheen{ display:none !important; }

    .btn-demo-soft{
      position:relative; display:inline-flex; align-items:center; gap:.6rem;
      border-radius:.9rem; padding:.16rem;
      background: rgba(148,163,184,.08);
      border:1px solid rgba(255,255,255,.08);
      box-shadow: 0 8px 28px -18px rgba(0,0,0,.7);
      transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
      animation: subtlePop .35s ease-out both;
      will-change: transform;
      isolation:isolate;
    }
    .btn-demo-soft > span{
      position:relative; z-index:2;
      display:inline-flex; align-items:center; gap:.6rem;
      border-radius:.78rem; padding:.7rem 1.15rem;
      background:
        radial-gradient(80% 120% at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), rgba(255,255,255,0) 45%),
        rgba(3,7,18,.75);
      color:#fff; font-weight:800; font-size:.98rem; letter-spacing:.01em;
      backdrop-filter:saturate(160%) blur(4px);
      transition: transform .18s ease;
      text-shadow:none;
    }
    .btn-demo-soft:hover{
      transform: translateY(-1px);
      background: rgba(148,163,184,.12);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 12px 36px -22px rgba(0,0,0,.75);
    }
    .btn-demo-soft:hover > span{ transform: translateY(-1px); }
    .btn-demo-soft:active{ transform: translateY(0); }
    .btn-demo-soft .spark{ display:none; }
    .btn-demo-soft svg{ transition: transform .2s ease; }
    .btn-demo-soft:hover svg{ transform: translateY(-1px); }
    .btn-demo-soft .ripple{
      position:absolute; width:10px; height:10px; border-radius:9999px; pointer-events:none;
      background: radial-gradient(circle, rgba(255,255,255,.35), transparent 60%);
      left: var(--rx); top: var(--ry);
      animation: ripple .6s ease-out forwards;
      z-index:1;
    }

    @media (prefers-reduced-motion: reduce){
      .btn-demo, .btn-demo-soft, .title-aurora, .title-aurora::after, .btn-cta, .title-calm { animation: none !important; }
    }

    /* ============================
       OVERLAY: SIMULASI POIN SISWA
       ============================ */
    #simulasiOverlay{ transition: opacity .25s ease; }
    #simulasiOverlay[data-open="true"]{ opacity:1; }
    #simulasiOverlay:not([data-open="true"]){ opacity:0; }

    /* badge range (1–20, dst) */
    .range-pill{
      display:flex; align-items:center; justify-content:center;
      min-width:4.75rem; height:2.25rem; padding:0 .8rem;
      border-radius:0.75rem; font-weight:800; letter-spacing:.3px;
      color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.28);
    }
    .level-1{background:linear-gradient(135deg,#0f5132,#22c55e);}
    .level-2{background:linear-gradient(135deg,#7c3e06,#f59e0b);}
    .level-3{background:linear-gradient(135deg,#7c2d12,#fb923c);}
    .level-4{background:linear-gradient(135deg,#7f1d1d,#ef4444);}
    .level-5{background:linear-gradient(135deg,#881337,#fb7185);}
    .level-6{background:linear-gradient(135deg,#450a0a,#dc2626);}

    /* list jenjang */
    .jenjang-list .jenjang-item{
      --accent:#22c55e;
      display:flex; align-items:center; gap:12px;
      padding:14px 16px;
      border-radius:14px;
      border:1px solid rgba(148,163,184,.2);
      background:linear-gradient(180deg,#0b1220,#0f172a);
      box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.25);
      border-left:6px solid var(--accent);
    }
    .jenjang-item[data-level="1"]{ --accent:#22c55e; }
    .jenjang-item[data-level="2"]{ --accent:#f59e0b; }
    .jenjang-item[data-level="3"]{ --accent:#fb923c; }
    .jenjang-item[data-level="4"]{ --accent:#ef4444; }
    .jenjang-item[data-level="5"]{ --accent:#f43f5e; }
    .jenjang-item[data-level="6"]{ --accent:#dc2626; }
    .jenjang-icon{
      margin-left:auto; width:36px; height:36px; border-radius:9999px;
      display:flex; align-items:center; justify-content:center;
      background:rgba(255,255,255,.06); color:var(--accent);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
    }

    /* ====== (BARU) Gaya untuk "Detail Aturan & Poin" ====== */
    .rule-card{
      border:1px solid rgba(226,232,240,.12);
      background-color:rgba(2,6,23,.6);
      border-radius:.75rem; padding:1.25rem;
      box-shadow:0 4px 10px rgba(0,0,0,.25);
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
      cursor:pointer;
    }
    .rule-card:hover{
      transform:translateY(-6px);
      box-shadow:0 16px 32px -12px rgba(99,102,241,.45);
      border-color:rgba(99,102,241,.35);
      background-color:rgba(2,6,23,.75);
    }
    .point-badge{
      padding:.25rem .75rem; border-radius:9999px; font-weight:800;
      display:inline-flex; align-items:center; gap:.35rem; color:white;
    }
    .point-badge.pelanggaran{ background:#ef4444; }
    .point-badge.prestasi{ background-image:linear-gradient(135deg,#22c55e,#16a34a); }
    .point-badge.penghargaan{ background-image:linear-gradient(135deg,#10b981,#059669); }
    .filter-btn{
      transition:all .2s;
    }
    .filter-btn.active{
      background-color:#1d4ed8; color:white;
      box-shadow:0 4px 6px -1px rgb(0 0 0 / .25), 0 2px 4px -2px rgb(0 0 0 / .25);
    }
    .chart-container{ max-height:400px; }

    /* === (BARU) Chip harga bulanan agar lebih muncul === */
    .price-chip{
      display:inline-flex; align-items:center; gap:.35rem;
      padding:.2rem .6rem; border-radius:.6rem;
      font-weight:900; letter-spacing:.02em;
      background:linear-gradient(90deg,#22d3ee,#6366f1);
      color:#0b1220;
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 6px 18px -6px rgba(99,102,241,.55), inset 0 0 0 1px rgba(255,255,255,.25);
      transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
      white-space:nowrap;
    }
    .price-chip:hover{
      transform: translateY(-1px);
      box-shadow:0 10px 26px -10px rgba(99,102,241,.65);
      filter:saturate(1.1);
    }
    .price-chip b{ color:inherit; }
@supports (-webkit-touch-callout:none){.apply-hero-gradient{-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block;}}

/* === Injected SEO/UI polish === */
/* Brighter elegant gradient for hero subtitle */
.apply-hero-gradient{
  background-image: linear-gradient(90deg,#7dd3fc 0%, #60a5fa 45%, #a78bfa 100%) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 12px rgba(99,102,241,.35), 0 0 2px rgba(255,255,255,.4);
}

/* Interactive feature cards */
.feature-card{
  position: relative;
  border-radius: 1rem;
  background: rgba(2,6,23,.75);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: linear-gradient(120deg, rgba(125,211,252,.35), rgba(99,102,241,.35), rgba(168,85,247,.35));
  filter: blur(12px); opacity: .0; transition: opacity .25s ease;
}
.feature-card:hover{ transform: translateY(-3px); border-color: rgba(125,211,252,.45);
  box-shadow: 0 20px 60px -30px rgba(99,102,241,.55);
}
.feature-card:hover::before{ opacity:.45; }
.feature-card .icon-wrap{ background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(99,102,241,.12)); }

/* Price card button spacing */
.price-card .btn-cta-blue{ margin-top: 1rem; }


/* === Added: Navbar dropdown + hover contrast === */
header .nav-link{position:relative; display:inline-flex; align-items:center; gap:.25rem;}
header .nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, rgba(99,102,241,.9), rgba(59,130,246,.9));
  opacity:0; transform: translateY(2px); transition: all .2s ease;
}
header .nav-link:hover::after{ opacity:1; transform: translateY(0); }

/* Dropdown panel pointer-events fix */
.group:hover > .group-hover\:visible{ pointer-events:auto; }


/* === Elegant colorful nav hovers === */
header .nav-link{position:relative; display:inline-flex; align-items:center; padding:6px 2px;}
header .nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg,#06B6D4,#6366F1,#7C3AED,#3B82F6);
  opacity:0; transform: translateY(2px); transition: all .22s ease;
  border-radius:2px;
}
header .nav-link:hover::after{ opacity:1; transform: translateY(0); }
header .nav-link:hover{ filter:saturate(1.15); }

/* === Dropdown menu (stacks downward) === */
.dropdown .dropdown-menu{
  position:absolute; right:0; top:calc(100% + 12px);
  min-width: 220px; padding:10px;
  background: rgba(15, 23, 42, .96);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  opacity:0; transform: translateY(-6px);
  visibility:hidden; transition: all .18s ease;
  pointer-events:none;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  opacity:1; transform: translateY(0);
  visibility:visible; pointer-events:auto;
}
.dropdown-menu .dropdown-item{
  display:block; padding:10px 12px; margin:2px 0; border-radius:10px;
  color:#E2E8F0; text-decoration:none;
  transition: all .18s ease;
}
.dropdown-menu .dropdown-item:hover{
  background: linear-gradient(90deg, rgba(124,58,237,.18), rgba(59,130,246,.18));
  color:white;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

/* === Login CTA (purple pill like screenshot) === */
.btn-login{
  background: linear-gradient(180deg, #6D5EFc, #5B5BD6);
  color:#fff; box-shadow: 0 10px 22px rgba(109,94,252,.28), inset 0 1px 0 rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.12);
}
.btn-login:hover{ filter:saturate(1.05); transform: translateY(-1px); box-shadow: 0 16px 36px rgba(109,94,252,.34), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-login:active{ transform: translateY(0); }
.btn-login:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(99,102,241,.45); }


/* === Active nav state (scrollspy) === */
header .nav-link.is-active{ color:#fff !important; filter:saturate(1.15); text-shadow:0 0 10px rgba(6,182,212,.35); }
header .nav-link.is-active::after{
  opacity:1; transform: translateY(0); height:3px;
  background: linear-gradient(90deg,#06B6D4,#6366F1,#8B5CF6,#3B82F6);
}

/* === Back-to-top: smaller on mobile === */
@media (max-width: 640px){
  #toTop{ width: 2.5rem !important; height: 2.5rem !important; right: 1rem !important; bottom: 1rem !important; }
  #toTop svg{ width: 1.1rem !important; height: 1.1rem !important; }
}

/* === Nav spacing tweak === */
@media (min-width: 768px){
  header nav.hidden.md\:flex .nav-link{ margin-left:.25rem; margin-right:.25rem; }
}

/* === Hero landing animation for main title === */
@keyframes glow-rise{
  0%{ opacity:0; transform: translateY(12px); filter: blur(4px); }
  60%{ opacity:1; transform: translateY(0); filter: blur(0); }
  100%{ opacity:1; }
}
.hero-landing{ animation: glow-rise .75s cubic-bezier(.2,.7,.3,1) .1s both; }
.hero-landing-delay{ animation: glow-rise .75s cubic-bezier(.2,.7,.3,1) .25s both; }


/* === Mobile menu: single-column items (clean & readable) === */
@media (max-width: 768px){
  #mobileMenu .panel > a.nav-mobile{ display:block; width:100%; box-sizing:border-box; }
  #mobileMenu .panel .mt-2{ margin-top:.5rem; } /* Bantuan box spacing */
}


/* === Back-to-top: smaller on mobile (strong override) === */
@media (max-width: 640px){
  #toTop{ width:2.5rem !important; height:2.5rem !important; right:0.75rem !important; bottom:0.75rem !important; }
  #toTop svg{ width:1rem !important; height:1rem !important; }
}


/* === Active nav state (gradient underline 3px + brighter text) === */
header .nav-link.is-active{ color:#fff !important; filter:saturate(1.15); }
header .nav-link.is-active::after{
  opacity:1; transform: translateY(0); height:3px;
  background: linear-gradient(90deg,#06B6D4,#6366F1,#8B5CF6,#3B82F6);
}

/* active appears 'lit' like hover */
header .nav-link.is-active:hover::after{ opacity:1; }