/* ============================================================
   Takaful-hibah.com — styles.css
   Theme : Navy + Gold + White
   Font  : Poppins
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
    --navy:        #0d1b2a;
    --navy2:       #112135;
    --navy3:       #162d47;
    --navy-surf:   #1a3350;
    --navy-bdr:    rgba(255,255,255,0.07);
  
    --gold:        #c9a84c;
    --gold-lt:     #e0c06a;
    --gold-dk:     #a88a36;
    --gold-sub:    rgba(201,168,76,0.12);
    --gold-glow:   rgba(201,168,76,0.35);
  
    --white:       #ffffff;
    --off-white:   #f0f5fb;
    --body:        #c8d8e8;
    --muted:       #7a9ab8;
  
    --red:         #e63946;
    --red-sub:     rgba(230,57,70,0.1);
    --green:       #1db954;
    --green-sub:   rgba(29,185,84,0.1);
  
    --nav-h:       64px;
    --r:           16px;
    --r-sm:        8px;
    --max-w:       1140px;
  
    --shadow:      0 24px 64px rgba(0,0,0,0.45);
    --shadow-sm:   0 6px 24px rgba(0,0,0,0.35);
    --shadow-gold: 0 12px 40px rgba(201,168,76,0.3);
  
    --ease:        cubic-bezier(0.4,0,0.2,1);
    --tx:          all 0.28s cubic-bezier(0.4,0,0.2,1);
  }
  
  /* ── RESET ──────────────────────────────────────────────── */
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body {
    font-family:'Poppins',sans-serif;
    background:var(--navy);
    color:var(--body);
    line-height:1.7;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img,video { max-width:100%; height:auto; display:block; }
  a { color:inherit; text-decoration:none; }
  ul,ol { list-style:none; }
  button { font-family:inherit; cursor:pointer; border:none; background:none; }
  input,select,textarea { font-family:inherit; }
  
  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  h1,h2,h3,h4,h5 { line-height:1.2; font-weight:700; color:var(--white); }
  h1 { font-size:clamp(2rem,5vw,3.4rem); font-weight:800; letter-spacing:-0.5px; }
  h2 { font-size:clamp(1.6rem,3.5vw,2.4rem); letter-spacing:-0.3px; }
  h3 { font-size:clamp(1rem,2vw,1.2rem); }
  h4 { font-size:0.9rem; }
  p  { color:var(--body); line-height:1.75; }
  em { color:var(--gold); font-style:normal; font-weight:600; }
  
  .gold { color:var(--gold); }
  
  /* ── LAYOUT ─────────────────────────────────────────────── */
  .container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
  .section   { padding:96px 0; }
  .bg-navy2  { background:var(--navy2); }
  
  .section-header { margin-bottom:52px; }
  .section-header.center { text-align:center; }
  .section-header h2 { margin-top:10px; }
  
  .section-label {
    display:inline-block;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--gold);
    border:1px solid rgba(201,168,76,0.4);
    padding:5px 14px;
    border-radius:100px;
    background:var(--gold-sub);
  }
  
  .section-sub {
    color:var(--muted);
    font-size:0.95rem;
    max-width:560px;
    margin:10px auto 0;
  }
  
  /* ── GRIDS ──────────────────────────────────────────────── */
  .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align: center;}
  
  /* ── BUTTONS ─────────────────────────────────────────────── */
  .btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 28px;
    border-radius:100px;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:0.95rem;
    transition:var(--tx);
    white-space:nowrap;
    cursor:pointer;
    border:none;
  }
  .btn-lg  { padding:16px 36px; font-size:1rem; }
  .btn-full { width:100%; }
  
  .btn-gold {
    background:var(--gold);
    color:var(--navy);
  }
  .btn-gold:hover {
    background:var(--gold-lt);
    transform:translateY(-2px);
    box-shadow:var(--shadow-gold);
  }
  
  .btn-navy {
    background:var(--navy);
    color:var(--gold);
    border:1px solid rgba(201,168,76,0.3);
  }
  .btn-navy:hover {
    background:var(--navy3);
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
  }
  
  .btn-outline {
    background:transparent;
    color:var(--white);
    border:1.5px solid rgba(255,255,255,0.25);
  }
  .btn-outline:hover {
    border-color:var(--gold);
    color:var(--gold);
    transform:translateY(-2px);
  }
  
  .btn-outline-white {
    background:rgba(255,255,255,0.1);
    color:var(--white);
    border:1.5px solid rgba(255,255,255,0.4);
  }
  .btn-outline-white:hover {
    background:rgba(255,255,255,0.2);
    border-color:var(--white);
    transform:translateY(-2px);
  }
  
  /* ── SCROLL REVEAL ──────────────────────────────────────── */
  .reveal {
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.55s ease, transform 0.55s ease;
  }
  .reveal.visible {
    opacity:1;
    transform:translateY(0);
  }
  .reveal-stagger {
    opacity:0;
    transform:translateY(32px);
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal-stagger.visible {
    opacity:1;
    transform:translateY(0);
  }
  
  /* ════════════════════════════════════════════════════════
     NAVBAR
  ════════════════════════════════════════════════════════ */
  .navbar {
    position:fixed;
    top:0; left:0;
    width:100%;
    height:var(--nav-h);
    z-index:9000;
    background:rgba(13,27,42,0.85);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-bottom:1px solid var(--navy-bdr);
    transition:background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .navbar.scrolled {
    background:rgba(10,20,32,0.97);
    box-shadow:0 2px 40px rgba(0,0,0,0.6);
  }
  
  .nav-inner {
    max-width:var(--max-w);
    margin:0 auto;
    height:100%;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  
  .nav-logo {
    display:flex;
    align-items:center;
    gap:9px;
    flex-shrink:0;
  }
  .nav-logo-img {
    height:36px;
    width:auto;
    display:block;
    transition:var(--tx);
  }
  .nav-logo:hover .nav-logo-img { opacity:0.85; }
  
  .nav-links {
    display:flex;
    align-items:center;
    gap:4px;
    flex:1;
    justify-content:center;
  }
  .nav-link {
    padding:7px 14px;
    font-size:0.875rem;
    font-weight:500;
    color:var(--muted);
    border-radius:8px;
    transition:color 0.2s, background 0.2s;
    white-space:nowrap;
  }
  .nav-link:hover { color:var(--white); background:rgba(255,255,255,0.06); }
  .nav-link.active { color:var(--gold); background:var(--gold-sub); }
  
  .nav-right {
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
  }
  .nav-cta { padding:9px 20px; font-size:0.82rem; }
  
  /* Hamburger */
  .hamburger {
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:40px; height:40px;
    border:1px solid var(--navy-bdr);
    border-radius:8px;
    align-items:center;
    transition:var(--tx);
  }
  .hamburger:hover { border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.04); }
  .hamburger span {
    display:block;
    width:18px; height:1.5px;
    background:var(--white);
    border-radius:2px;
    transform-origin:center;
    transition:transform 0.3s var(--ease), opacity 0.3s;
  }
  .hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
  .hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
  
  /* Mobile Drawer */
  .mobile-drawer {
    display:none;
    position:absolute;
    top:100%; left:0;
    width:100%;
    background:rgba(10,20,32,0.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--navy-bdr);
    flex-direction:column;
    padding:20px 24px 28px;
    gap:4px;
    opacity:0;
    transform:translateY(-8px);
    transition:transform 0.3s var(--ease), opacity 0.3s var(--ease);
    pointer-events:none;
  }
  .mobile-drawer.open {
    opacity:1;
    transform:translateY(0);
    pointer-events:all;
  }
  .mob-link {
    display:block;
    padding:12px 14px;
    font-size:0.95rem;
    font-weight:500;
    color:var(--muted);
    border-radius:8px;
    transition:color 0.2s, background 0.2s;
  }
  .mob-link:hover { color:var(--white); background:rgba(255,255,255,0.05); }
  .mob-cta { margin-top:8px; }
  
  /* ════════════════════════════════════════════════════════
     URGENCY STRIP
  ════════════════════════════════════════════════════════ */
  .urgency-strip {
    background:linear-gradient(90deg,#b91c1c,#dc2626,#b91c1c);
    padding:11px 24px;
    text-align:center;
    font-size:0.83rem;
    font-weight:500;
    color:var(--white);
    margin-top:var(--nav-h);
  }
  .urgency-strip strong { font-weight:700; }
  
  /* ════════════════════════════════════════════════════════
     HERO
  ════════════════════════════════════════════════════════ */
  .hero {
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:80px 0 100px;
    overflow:hidden;
    background:var(--navy);
  }
  
  /* Background layers */
  .hero-bg {
    position:absolute; inset:0;
    inset:0;
    background-color: var(--navy);
    pointer-events:none;
  }
  .hero-bg::after {
    content: '';
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 80% 60% at 70% 50%, rgba(22,58,100,0.6) 0%, transparent 70%),
      radial-gradient(ellipse 60% 80% at 20% 80%, rgba(201,168,76,0.06) 0%, transparent 60%),
      linear-gradient(160deg,rgba(13,27,42,0.85) 0%,rgba(17,33,53,0.85) 50%,rgba(13,27,42,0.85) 100%);
    pointer-events:none;
  }
  .hero-grid {
    display: none;
  }
  
  /* Hero layout */
  .hero-layout {
    display:grid;
    grid-template-columns:55% 45%;
    gap:48px;
    align-items:center;
    position:relative;
    z-index:2;
  }

  /* Hero content */
  .hero-content { display:flex; flex-direction:column; align-items:flex-start; }

  /* Hero visual — right column, desktop only */
  .hero-visual {
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .hero-visual-img {
    width:100%;
    max-width:480px;
    object-fit:cover;
    opacity:0;
    display:block;
  }

  /* Burst animation keyframes */
  @keyframes heroBurst {
    0%   { opacity:0; transform:scale(0.82) translateY(22px); filter:blur(8px); }
    55%  { opacity:1; transform:scale(1.04) translateY(-4px); filter:blur(0); }
    75%  { transform:scale(1.04) translateY(0); }
    100% { opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
  }
  .hero-visual.burst-active .hero-visual-img {
    animation:heroBurst 10s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  
  .hero-badge {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--gold-sub);
    border:1px solid rgba(201,168,76,0.35);
    border-radius:100px;
    padding:7px 18px;
    font-size:0.78rem;
    font-weight:500;
    color:var(--gold);
    margin-bottom:22px;
  }
  .badge-dot {
    width:7px; height:7px;
    background:var(--gold);
    border-radius:50%;
    flex-shrink:0;
    animation:dotPulse 2s ease-in-out infinite;
  }
  @keyframes dotPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.5; transform:scale(1.5); }
  }
  
  .hero-content h1 { margin-bottom:18px; }
  
  .hero-sub {
    font-size:1rem;
    color:var(--muted);
    max-width:500px;
    margin-bottom:28px;
  }
  
  .hero-bullets {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:36px;
  }
  .hero-bullets li {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:0.93rem;
    color:var(--body);
  }
  .tick {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px; height:22px;
    background:var(--gold-sub);
    color:var(--gold);
    border:1px solid rgba(201,168,76,0.3);
    border-radius:50%;
    font-size:0.65rem;
    font-weight:700;
    flex-shrink:0;
  }
  
  .hero-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:44px;
  }
  
  .hero-trust {
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
  }
  .trust-item { display:flex; flex-direction:column; align-items:flex-start; }
  .trust-num  { font-size:1.3rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:2px; }
  .trust-lbl  { font-size:0.68rem; color:var(--muted); line-height:1.3; font-weight:500; }
  .trust-divider { width:1px; height:34px; background:rgba(255,255,255,0.1); flex-shrink:0; }

  /* ── OPERATOR MARQUEE ─────────────────────────────────── */
  .operator-marquee {
    width: 100%;
    margin-top: 28px;
  }

  .marquee-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.30);
    margin: 0 0 10px 0;
  }

  /* Clipping viewport with fade edges */
  .marquee-viewport {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }

  /* Single animated element — no sync issues between elements */
  .marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee-scroll 30s linear infinite;
    will-change: transform;
  }

  /* Each set has gap between items + padding-right = gap
     so set width = N×item + N×gap → total = 2× that → -50% lands EXACTLY at set 2 start */
  .marquee-set {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 14px;
    padding-right: 14px;
  }

  .operator-marquee:hover .marquee-track {
    animation-play-state: paused;
  }

  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% / 3)); }
  }

  .marquee-logo-pill {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 8px 18px;
    background: linear-gradient(170deg, #ffffff 0%, #f6f8fb 50%, #eceef3 100%);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(0,0,0,0.07),
      0 1px 0 rgba(0,0,0,0.14),
      0 6px 22px rgba(0,0,0,0.38),
      0 0 0 1px rgba(0,0,0,0.07);
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.22s cubic-bezier(0.4,0,0.2,1);
  }

  .marquee-logo-pill:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(0,0,0,0.07),
      0 3px 0 rgba(0,0,0,0.16),
      0 14px 36px rgba(0,0,0,0.44),
      0 0 0 1px rgba(0,0,0,0.07);
  }

  .marquee-logo-pill img {
    height: 28px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    display: block;
  }

  /* HLMT is a square logo — constrain width */
  .marquee-pill-sq img {
    height: 28px;
    width: 28px;
    max-width: 28px;
  }

  /* ── HERO ANIMATION SYSTEM ────────────────────────────── */
  /* Layer 1: Background */
  .hero-animate .hero-bg,
  .hero-animate .hero-grid {
    opacity:0;
    transform:scale(1.06);
    transition:opacity 1.1s cubic-bezier(0.22,1,0.36,1), transform 1.2s cubic-bezier(0.22,1,0.36,1);
  }
  .hero-animate.active .hero-bg,
  .hero-animate.active .hero-grid {
    opacity:1;
    transform:scale(1.5);
  }
  .hero-animate .hero-grid { transition-delay:0.1s; }
  
  /* Layer 2: Left content */
  .hero-animate .hero-content {
    opacity:0;
    transform:translateX(-36px);
    transition:opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
    transition-delay:0.3s;
  }
  .hero-animate.active .hero-content {
    opacity:1;
    transform:translateX(0);
  }
  
  /* Staggered content children */
  .hero-animate .hero-badge       { opacity:0; transform:translateY(10px); transition:opacity 0.5s ease, transform 0.5s ease; transition-delay:0.55s; }
  .hero-animate .hero-content h1  { opacity:0; transform:translateY(14px); transition:opacity 0.6s ease, transform 0.6s ease; transition-delay:0.65s; }
  .hero-animate .hero-sub         { opacity:0; transform:translateY(12px); transition:opacity 0.55s ease, transform 0.55s ease; transition-delay:0.78s; }
  .hero-animate .hero-bullets     { opacity:0; transform:translateY(10px); transition:opacity 0.55s ease, transform 0.55s ease; transition-delay:0.9s; }
  .hero-animate .hero-actions     { opacity:0; transform:translateY(10px); transition:opacity 0.55s ease, transform 0.55s ease; transition-delay:1.02s; }
  .hero-animate .hero-trust        { opacity:0; transform:translateY(8px);  transition:opacity 0.5s ease, transform 0.5s ease;  transition-delay:1.14s; }
  .hero-animate .operator-marquee  { opacity:0; transform:translateY(8px);  transition:opacity 0.5s ease, transform 0.5s ease;  transition-delay:1.28s; }

  .hero-animate.active .hero-badge,
  .hero-animate.active .hero-content h1,
  .hero-animate.active .hero-sub,
  .hero-animate.active .hero-bullets,
  .hero-animate.active .hero-actions,
  .hero-animate.active .hero-trust,
  .hero-animate.active .operator-marquee {
    opacity:1;
    transform:translateY(0);
  }
  
 

  /* ════════════════════════════════════════════════════════
     PROBLEM SECTION
  ════════════════════════════════════════════════════════ */
/* ── PROBLEM CARD FRAMELESS VERSION ───────────────────── */

.problem-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  position: relative;
  text-align: center;
  overflow: visible;
  transition: all 0.35s ease;
}

.problem-card::before {
  display: none;
}

.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
  border: none;
}

.problem-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 18px;
  display: block;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.28),
    0 0 0 1px rgba(255,255,255,0.04);
  transition: transform 0.4s ease;
}

.problem-card:hover .problem-img {
  transform: scale(1.02);
}

.problem-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.4;
}

.problem-card p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 95%;
}
  
  /* ════════════════════════════════════════════════════════
     COMPARISON TABLE
  ════════════════════════════════════════════════════════ */
  .table-wrap {
    overflow-x:auto;
    border-radius:var(--r);
    border:1px solid rgba(201,168,76,0.2);
    margin-bottom:28px;
    -webkit-overflow-scrolling:touch;
  }
  .comp-table {
    width:100%;
    border-collapse:collapse;
    background:var(--navy2);
    min-width:520px;
  }
  .comp-table thead tr {
    border-bottom:1px solid var(--navy-bdr);
  }
  .comp-table th {
    padding:16px 18px;
    font-size:0.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--muted);
    white-space:nowrap;
  }
  .comp-table th.col-aspect { text-align:left; }
  .comp-table th.col-featured { color:var(--gold); background:rgba(201,168,76,0.06); text-align:center; }
  .comp-table th:not(.col-aspect):not(.col-featured) { text-align:center; }
  
  .comp-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.03); }
  .comp-table tbody tr:last-child { border-bottom:none; }
  .comp-table tbody tr:hover td { background:rgba(201,168,76,0.02); }
  .comp-table tbody tr:hover td.col-featured { background:rgba(201,168,76,0.07); }
  
  .col-aspect { padding:14px 18px; font-size:0.83rem; font-weight:600; color:var(--white); white-space:nowrap; }
  .comp-table td:not(.col-aspect) { padding:12px 18px; text-align:center; }
  .col-featured { background:rgba(201,168,76,0.05); }
  
  .badge {
    display:inline-flex;
    align-items:center;
    padding:4px 11px;
    border-radius:100px;
    font-size:0.72rem;
    font-weight:600;
    white-space:nowrap;
  }
  .badge.green { background:var(--green-sub); color:var(--green); border:1px solid rgba(29,185,84,0.2); }
  .badge.red   { background:var(--red-sub); color:#ff6b78; border:1px solid rgba(230,57,70,0.2); }
  .badge.muted { background:rgba(255,255,255,0.05); color:var(--muted); border:1px solid rgba(255,255,255,0.08); }
  
  .center-cta { text-align:center; margin-top:20px; }
  
 /* ════════════════════════════════════════════════════════
   EDUCATION — FRAMELESS PREMIUM
════════════════════════════════════════════════════════ */

.edu-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 24px 12px;
  position: relative;
  overflow: visible;
  transition: all 0.35s ease;
  text-align: center;
}

.edu-card::after {
  display: none;
}

.edu-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
  border: none;
}

.edu-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 18px;
  line-height: 1;
}

.edu-card h3 {
  margin-bottom: 14px;
  font-size: 1.05rem;
  color: var(--white);
  font-weight: 700;
  position: relative;
}

.edu-card h3::after {
  content: '';
  display: block;
  width: 42px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  );
  opacity: 0.9;
}

.edu-card p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 320px;
  margin: 0 auto;
}
  

/* ════════════════════════════════════════════════════════
   SCENARIO SECTION — FULL BACKGROUND IMAGE
═══════════════════════════════════════════════════════ */

#kenapa {
  position: relative;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

/* Background image layer */
#kenapa::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    url('/images/duithibah.webp') center center / cover no-repeat;

  transform: scale(1.05);
  filter: blur(4px);
}

/* Dark overlay for readability */
#kenapa::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      180deg,
      rgba(5, 15, 28, 0.82) 0%,
      rgba(8, 18, 32, 0.88) 50%,
      rgba(5, 15, 28, 0.92) 100%
    );
}

/* Keep text readable */
#kenapa .section-header,
#kenapa .scenario-grid {
  position: relative;
  z-index: 2;
}

/* Optional: section title brighter */
#kenapa h2 {
  color: var(--white);
}

#kenapa .section-sub {
  color: rgba(255,255,255,0.78);
}


/* ════════════════════════════════════════════════════════
   SCENARIO — BLUR BACKGROUND + FRAMELESS + CENTER CONTENT
═══════════════════════════════════════════════════════ */

.scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.scenario-card {
  position: relative;
  border-radius: var(--r);
  padding: 34px 30px;
  overflow: hidden;
  text-align: center;
  background: transparent;
  border: none;
  box-shadow: none;
  isolation: isolate;
}

/* ensure content above overlay */
.scenario-card > * {
  position: relative;
  z-index: 3;
}

/* IMAGE BACKGROUND LAYER */
.scenario-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.08);
  filter: blur(8px);
}

/* DARK OVERLAY for readability */
.scenario-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0.9;

  background:
    linear-gradient(
      180deg,
      rgba(7, 18, 32, 0.72) 0%,
      rgba(7, 18, 32, 0.82) 50%,
      rgba(7, 18, 32, 0.88) 100%
    );
}

/* LEFT CARD */
.scenario-bad::before {
  background-image: url('/images/masadepan.webp');
}

/* RIGHT CARD */
.scenario-good::before {
  background-image: url('/images/duithibah.webp');
}

/* subtle glow */
.scenario-bad {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 20px 60px rgba(0,0,0,0.28);
}

.scenario-good {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 20px 60px rgba(0,0,0,0.28);
}

/* HEADER CENTER */
.scenario-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sc-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.scenario-header h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.sc-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
}

/* LIST CENTER */
.scenario-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.scenario-list li {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.5;
  text-align: center;
  max-width: 90%;
}

.sc-x {
  color: #ff6b78;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.sc-ok {
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.scenario-cta {
  text-align: center;
  margin-top: 52px;
}
.scenario-cta-sub {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 22px;
}

/* ════════════════════════════════════════════════════════
   BENEFITS — TRUE BENTO GRID + CLEAN CONTENT ALIGNMENT
   Same container height + mixed card sizes + proper text flow
═══════════════════════════════════════════════════════ */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 180px;
  gap: 18px;
  align-items: stretch;
}

/* BASE CARD */
.benefit-item {
  position: relative;
  border-radius: 24px;
  padding: 28px 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: 0.35s ease;
  border: none;
  min-height: unset;
  text-align: left;
}

/* hover */
.benefit-item:hover {
  transform: translateY(-6px);
}

/* content wrapper */
.benefit-item > div:not(.benefit-overlay-content) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  height: 100%;
  position: relative;
  z-index: 2;
}

/* DEFAULT DARK CARD */
.benefit-item {
  background: linear-gradient(
    180deg,
    #4c5568 0%,
    #2e3444 100%
  );
  color: #ffffff;
}

/* LIGHT CARDS */
.benefit-item:nth-child(2),
.benefit-item:nth-child(5),
.benefit-item:nth-child(8) {
  background: #f2f2f2;
  color: #08111d;
}

.benefit-item:nth-child(2) h4,
.benefit-item:nth-child(5) h4,
.benefit-item:nth-child(8) h4,
.benefit-item:nth-child(2) p,
.benefit-item:nth-child(5) p,
.benefit-item:nth-child(8) p {
  color: #08111d;
}

/* GOLD CARDS */
.benefit-item:nth-child(1),
.benefit-item:nth-child(4),
.benefit-item:nth-child(7) {
  background: #f4df00;
  color: #08111d;
}

.benefit-item:nth-child(1) h4,
.benefit-item:nth-child(4) h4,
.benefit-item:nth-child(7) h4,
.benefit-item:nth-child(1) p,
.benefit-item:nth-child(4) p,
.benefit-item:nth-child(7) p {
  color: #08111d;
}

/* ICON */
.ben-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 18px;
  display: block;
}

/* HEADING */
.benefit-item h4 {
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

/* PARAGRAPH */
.benefit-item p {
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
  max-width: 100%;
  color: rgba(255,255,255,0.82);
}

/* better readability for light/gold */
.benefit-item:nth-child(1) p,
.benefit-item:nth-child(2) p,
.benefit-item:nth-child(4) p,
.benefit-item:nth-child(5) p,
.benefit-item:nth-child(7) p,
.benefit-item:nth-child(8) p {
  color: rgba(8,17,29,0.80);
}

/* ═══════════════════════════════
   REAL BENTO SPAN CONTROL
═══════════════════════════════ */

/* Card 1 */
.benefit-item:nth-child(1) {
  grid-column: span 1;
  grid-row: span 1;
}

/* Card 2 — tall */
.benefit-item:nth-child(2) {
  grid-column: span 1;
  grid-row: span 2;
  padding: 32px 28px;
}

/* Card 3 */
.benefit-item:nth-child(3) {
  grid-column: span 1;
  grid-row: span 1;
}

/* Card 4 — tall image */
.benefit-item:nth-child(4) {
  grid-column: span 1;
  grid-row: span 2;
}

/* Card 5 — tall */
.benefit-item:nth-child(5) {
  grid-column: span 1;
  grid-row: span 2;
  padding: 32px 28px;
}

/* Card 6 */
.benefit-item:nth-child(6) {
  grid-column: span 1;
  grid-row: span 1;
}

/* Card 7 — wide horizontal */
.benefit-item:nth-child(7) {
  grid-column: span 2;
  grid-row: span 1;
  justify-content: center;
}

.benefit-item:nth-child(7) > div {
  justify-content: center;
}

/* Card 8 */
.benefit-item:nth-child(8) {
  grid-column: span 1;
  grid-row: span 1;
}

/* IMAGE CARD */
/* ════════════════════════════════════════════════════════
   ADVISOR AUTHORITY CARD — PREMIUM VERSION
   Replace old .benefit-image-card style
═══════════════════════════════════════════════════════ */

.benefit-image-card {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 28px;
  overflow: hidden;
  background: #0b1628;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

/* portrait image */
.benefit-image-card .benefit-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: contrast(1.02) brightness(0.96);
}

/* premium overlay */
.benefit-imageCard::after,
.benefit-image-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(5,12,22,0.02) 0%,
      rgba(5,12,22,0.22) 35%,
      rgba(5,12,22,0.72) 72%,
      rgba(5,12,22,0.92) 100%
    );
  z-index: 1;
}

/* subtle gold accent line */
.benefit-image-card::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 0;
  width: 4px;
  height: calc(100% - 48px);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #d4af37 18%,
    #f4df00 50%,
    #d4af37 82%,
    transparent 100%
  );
  z-index: 3;
  border-radius: 0 3px 3px 0;
  opacity: 0.9;
}

/* content */
.benefit-image-card .benefit-overlay-content {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 30px;
  z-index: 3;
  text-align: left;
}


/* title */
.benefit-image-card .benefit-overlay-content h4 {
  font-size: 1.7rem;
  line-height: 1.08;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
  letter-spacing: -0.02em;
}

/* subtitle */
.benefit-image-card .benefit-overlay-content p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
  max-width: 92%;
  margin: 0;
}

/* hover premium */
.benefit-image-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.34),
    0 0 0 1px rgba(244,223,0,0.06);
}

/* mobile */
@media (max-width: 768px) {
  .benefit-image-card {
    border-radius: 22px;
  }

  .benefit-image-card .benefit-overlay-content {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }

  .benefit-image-card .benefit-overlay-content h4 {
    font-size: 1.25rem;
  }

  .benefit-image-card .benefit-overlay-content p {
    font-size: 0.84rem;
    line-height: 1.6;
  }
}

/* OVERLAY CONTENT */
.benefit-overlay-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
}

.benefit-overlay-content h4 {
  color: #ffffff;
  font-size: 1.4rem;
  margin-bottom: 8px;
  line-height: 1.15;
}

.benefit-overlay-content p {
  color: rgba(255,255,255,0.88);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* MOBILE RESET */
@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .benefit-item,
  .benefit-item:nth-child(1),
  .benefit-item:nth-child(2),
  .benefit-item:nth-child(3),
  .benefit-item:nth-child(4),
  .benefit-item:nth-child(5),
  .benefit-item:nth-child(6),
  .benefit-item:nth-child(7),
  .benefit-item:nth-child(8) {
    grid-column: span 1;
    grid-row: span 1;
    min-height: auto;
    padding: 22px 18px;
  }

  .benefit-item h4 {
    font-size: 1.15rem;
  }

  .benefit-item p {
    font-size: 0.84rem;
    line-height: 1.6;
  }

  .ben-icon {
    font-size: 1.6rem;
    margin-bottom: 14px;
  }
}
/* ════════════════════════════════════════════════════════
   SERVIS SECTION
════════════════════════════════════════════════════════ */
.servis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.servis-card {
  background: var(--navy2);
  border: 1px solid var(--navy-bdr);
  border-radius: 24px;
  padding: 36px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: border-color 0.3s, transform 0.3s;
}
.servis-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-4px);
}
.servis-card-featured {
  border-color: rgba(201,168,76,0.35);
  background: linear-gradient(160deg, rgba(22,36,60,1) 0%, rgba(17,28,48,1) 100%);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.15), 0 24px 60px rgba(0,0,0,0.3);
}

.servis-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.servis-icon-1 { background: rgba(74,144,217,0.12); border: 1px solid rgba(74,144,217,0.2); }
.servis-icon-2 { background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.25); }
.servis-icon-3 { background: rgba(80,200,120,0.1);  border: 1px solid rgba(80,200,120,0.2); }
.servis-icon   { font-size: 1.7rem; }

.servis-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.servis-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.servis-card-featured .servis-tag { color: var(--gold); }

.servis-body h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--white);
  margin: 0;
  line-height: 1.2;
}
.servis-body p {
  font-size: 0.85rem;
  color: var(--body);
  line-height: 1.75;
  margin: 0;
}

.servis-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.servis-list li {
  font-size: 0.82rem;
  color: var(--body);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.servis-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.8rem;
}

.servis-popular-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 100px;
  align-self: flex-start;
}

.servis-cta {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-lt);
  text-decoration: none;
  padding: 12px 0 0;
  border-top: 1px solid var(--navy-bdr);
  transition: color 0.2s, gap 0.2s;
  gap: 4px;
}
.servis-cta:hover { color: var(--gold); gap: 8px; }
.servis-cta-gold  { color: var(--gold); }

/* ════════════════════════════════════════════════════════
   OWNER HERO — PREMIUM PERSONAL BRAND SECTION
   Replace old OWNER section CSS completely
═══════════════════════════════════════════════════════ */

.owner-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 0 100px;
  background: #08111d;
  isolation: isolate;
}

/* Layer 1 — Background */
.owner-bg {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    radial-gradient(
      circle at top right,
      rgba(201,168,76,0.08),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(255,255,255,0.03),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      #08111d 0%,
      #10233d 45%,
      #0d1b2f 100%
    );
}

/* Main wrapper */
.owner-hero-wrap {
  position: relative;
  z-index: 3;
  min-height: 700px;
  display: flex;
  align-items: center;
}

/* Layer 3 — Big Name */
.owner-big-name {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: clamp(7rem, 18vw, 15rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.05);
  z-index: 1;
  user-select: none;
  pointer-events: none;
  text-transform: uppercase;
}

/* Layer 2 — Profile Image */
.owner-profile {
  position: absolute;
  right: 5%;
  bottom: 0;
  z-index: 2;
  width: min(480px, 42vw);
}

.owner-profile img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(
    0 30px 80px rgba(0,0,0,0.35)
  );
}

/* Content */
.owner-copy {
  position: relative;
  z-index: 4;
  max-width: 560px;
  padding-top: 40px;
}

.owner-copy .section-label {
  margin-bottom: 14px;
}

.owner-copy h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 8px;
  line-height: 1.08;
}

.owner-role {
  font-size: 0.95rem;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}

.owner-copy p {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 14px;
  max-width: 95%;
}

/* Mini pills */
.owner-mini-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 30px;
}

.owner-mini-pills span {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.22);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* CTA */
.owner-copy .btn {
  margin-top: 8px;
}

/* subtle gold accent line */
.owner-copy::before {
  content: '';
  position: absolute;
  top: 40px;
  left: -24px;
  width: 4px;
  height: 140px;
  border-radius: 4px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--gold) 20%,
    #f4df00 50%,
    var(--gold) 80%,
    transparent 100%
  );
  opacity: 0.9;
}

/* ════════════════════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .owner-hero {
    padding: 90px 0 70px;
  }

  .owner-hero-wrap {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .owner-big-name {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(5rem, 28vw, 9rem);
    margin-bottom: 0;
    color: rgba(255,255,255,0.08);
    white-space: nowrap;
    letter-spacing: -0.04em;
    z-index: 1;
  }

  .owner-profile {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 320px;
    margin: 50px auto 30px;
    order: 1;
    z-index: 2;
  }

  .owner-copy {
    max-width: 100%;
    padding-top: 0;
    order: 2;
    text-align: center;
  }

  .owner-copy .btn {
    display: block;
    width: fit-content;
    margin: 8px auto 0;
  }

  .owner-copy::before {
    display: none;
  }

  .owner-copy h2 {
    font-size: 2rem;
  }

  .owner-copy p {
    font-size: 0.88rem;
    line-height: 1.7;
    max-width: 100%;
  }

  .owner-mini-pills {
    gap: 8px;
    margin: 22px 0 24px;
    justify-content: center;
  }

  .owner-mini-pills span {
    font-size: 0.7rem;
    padding: 6px 12px;
  }
}


/* ════════════════════════════════════════════════════════
   OWNER HERO — ANIMATION CSS
   Add below owner section CSS
═══════════════════════════════════════════════════════ */

/* LAYER 1 — Background fade */
.owner-bg {
  opacity: 0;
  transition:
    opacity 1.2s cubic-bezier(0.22,1,0.36,1);
}

.owner-active .owner-bg {
  opacity: 1;
}

/* LAYER 2 — Profile image right → left */
.owner-profile {
  opacity: 0;
  transform: translateX(80px);
  transition:
    opacity 0.9s cubic-bezier(0.22,1,0.36,1),
    transform 0.9s cubic-bezier(0.22,1,0.36,1);
  transition-delay: 0.4s;
}

.owner-active .owner-profile {
  opacity: 1;
  transform: translateX(0);
}

/* LAYER 3 — Big name burst */
.owner-big-name {
  opacity: 0;
  transform: scale(0.75);
  filter: blur(8px);
  transition:
    opacity 0.9s ease,
    transform 1s cubic-bezier(0.22,1,0.36,1),
    filter 1s ease;
  transition-delay: 0.7s;
}

.owner-active .owner-big-name {
  opacity: 1;
  transform: scale(2);
  filter: blur(0);
}

/* CONTENT LAYER */
.owner-copy {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  transition-delay: 2s;
}

.owner-active .owner-copy {
  opacity: 1;
  transform: translateY(0);
}

/* Typing effect */
.owner-role {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--gold);
}

.owner-role.typing-active {
  animation:
    ownerTyping 2.2s steps(40, end) forwards,
    ownerCursor 0.8s infinite;
}

@keyframes ownerTyping {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes ownerCursor {
  0%, 50% {
    border-color: var(--gold);
  }
  51%, 100% {
    border-color: transparent;
  }
}
  
  /* ════════════════════════════════════════════════════════
     TESTIMONIALS
  ════════════════════════════════════════════════════════ */
  .testi-card {
    background:var(--navy3);
    border:1px solid var(--navy-bdr);
    border-radius:var(--r);
    padding:26px;
    position:relative;
    transition:var(--tx);
  }
  .testi-card::before {
    content:'\201C';
    position:absolute;
    top:12px; right:18px;
    font-size:4.5rem;
    color:rgba(201,168,76,0.07);
    font-family:Georgia,serif;
    line-height:1;
    pointer-events:none;
  }
  .testi-card:hover { border-color:rgba(201,168,76,0.3); transform:translateY(-4px); box-shadow:var(--shadow-sm); }
  
  .stars { color:var(--gold); font-size:0.85rem; letter-spacing:2px; margin-bottom:12px; }
  .testi-card > p { font-size:0.87rem; color:var(--body); font-style:italic; line-height:1.75; margin-bottom:18px; }
  
  .tc-author { display:flex; align-items:center; gap:11px; }
  .tc-avatar {
    width:44px; height:44px;
    border:2px solid rgba(201,168,76,0.4);
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
  }
  .tc-avatar img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .tc-name { font-size:0.87rem; font-weight:600; color:var(--white); }
  .tc-loc  { font-size:0.72rem; color:var(--muted); }



/* ════════════════════════════════════════════════════════
   TESTIMONIALS — STAGGER ANIMATION CSS
═══════════════════════════════════════════════════════ */

/* initial hidden state */
.testi-card {
  opacity: 0;
  transform: translateY(50px) scale(0.96);
  filter: blur(10px);
  transition:
    opacity 0.85s cubic-bezier(0.22,1,0.36,1),
    transform 0.85s cubic-bezier(0.22,1,0.36,1),
    filter 0.85s ease;
  will-change: transform, opacity;
}

/* active visible state */
.testi-card.testi-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* hover only after loaded */
.testi-card.testi-active:hover {
  transform: translateY(-6px) scale(1.01);
}
  
/* ════════════════════════════════════════════════════════
   OPERATORS — PREMIUM PRICING STYLE
   Replace old .op-card section completely
═══════════════════════════════════════════════════════ */

.operator-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: stretch;
  margin-top: 50px;
}

/* MAIN CARD */
.operator-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: 0.35s ease;
}

/* featured center card */
.featured-card {
  transform: translateY(-18px);
}

.operator-card:hover {
  transform: translateY(-10px);
}

.featured-card:hover {
  transform: translateY(-24px);
}

/* ═══════════════════════════════
   TOP PANEL
═══════════════════════════════ */

.operator-top {
  position: relative;
  z-index: 3;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 18px 18px 0 0;
  transform: skew(-6deg);
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
}

/* inner text fix after skew */
.operator-top h3,
.operator-top p {
  transform: skew(6deg);
}

.operator-top h3 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}

.operator-top p {
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
}

/* top colors */
.top-aia {
  background: linear-gradient(
    135deg,
    #7a0f16 0%,
    #b3121f 38%,
    #d91f2f 72%,
    #ff4b5c 100%
  );
}

.top-pru {
  background: linear-gradient(
    135deg,
    #d62828 0%,     /* deep premium red */
    #ff4d4d 35%,    /* vibrant red */
    #00b8a9 100%    /* turquoise accent */
  );
}

.top-etiqa {
  background: linear-gradient(
    135deg,
    #f7d54a 0%,   /* soft premium gold */
    #f4c430 35%,  /* rich Etiqa yellow */
    #d4a017 70%,  /* deeper luxury gold */
    #b8860b 100%  /* elegant dark gold */
  );
}

.top-ikhlas {
  background: linear-gradient(
    135deg,
    #0b5f3b 0%,     /* deep premium green */
    #0fa36b 45%,    /* vibrant corporate green */
    #38f2a3 100%    /* slight fluorescent premium glow */
  );
}

/* ═══════════════════════════════
   BODY
═══════════════════════════════ */
.operator-logo-img {
  width: 130px;
  height: auto;
  display: block;
  margin: 0 auto 14px;
  object-fit: contain;
}

.operator-logo-wrap {
  width: 118px;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 16px;
  background: radial-gradient(circle at 36% 30%, #ffffff 0%, #f2f2f2 48%, #dcdcdc 100%);
  border-radius: 50%;
  transform: skew(6deg); /* counter parent -6deg skew */
  border: 1.5px solid rgba(255,255,255,0.75);
  box-shadow:
    6px 10px 22px rgba(0,0,0,0.30),
    -2px -3px 8px rgba(255,255,255,0.55),
    inset 3px 3px 7px rgba(255,255,255,0.95),
    inset -3px -3px 9px rgba(0,0,0,0.10);
}

/* Rectangular 3D wrap for horizontal logos */
.top-aia .operator-logo-wrap,
.top-pru .operator-logo-wrap {
  width: 168px;
  height: 84px;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff 0%, #f4f4f4 40%, #e2e2e2 100%);
}

.operator-logo-img {
  max-width: 160px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.10));
  transition: all 0.35s ease;
}

/* Great Eastern logo scale-down — wide 2:1 logo overflows circle wrapper */
.top-greateastern .operator-logo-img {
  max-width: 132px;
  max-height: 50px;
}

/* HLMT logo scale-up — square canvas has tight content, needs more room */
.top-hongleong .operator-logo-img {
  width: 100px;
  height: 100px;
  max-width: none;
  max-height: none;
  transform: translateY(6px);
}

/* Hover effect */

.operator-card:hover .operator-logo-img {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18));
  transform: scale(1.04);
}
.operator-body {
  position: relative;
  flex: 1;
  background: #ffffff;
  padding: 34px 28px;
  min-height: 360px;
  border-radius: 0 0 0 0;
  box-shadow:
    0 14px 40px rgba(0,0,0,0.08);
  z-index: 2;
}

.operator-tag {
  font-size: 1rem;
  font-weight: 700;
  color: #08111d;
  margin-bottom: 26px;
  text-align: center;
}

/* feature list */
.operator-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.operator-features li {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #2a2f38;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* ═══════════════════════════════
   FOOTER CTA
═══════════════════════════════ */

.operator-footer {
  position: relative;
  z-index: 3;
  margin-top: -2px;
  padding: 18px 20px;
  transform: skew(-6deg);
  border-radius: 0 0 16px 16px;
  text-align: center;
  box-shadow:
    0 16px 30px rgba(0,0,0,0.10);
}

.operator-footer a {
  display: inline-block;
  transform: skew(6deg);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
}

/* footer colors */


.footer-aia {
  background: linear-gradient(
    135deg,
    #5c0b11 0%,
    #8f111b 35%,
    #c41728 70%,
    #e93245 100%
  );
}

.footer-pru {
  background: linear-gradient(
    135deg,
    #c91f1f 0%,     /* darker red */
    #e63946 40%,    /* elegant red */
    #00a89a 100%    /* rich turquoise */
  );
}

.footer-etiqa {
  background: linear-gradient(
    135deg,
    #f4c430 0%,
    #d4a017 55%,
    #a87900 100%
  );
}

.footer-ikhlas {
  background: linear-gradient(
    135deg,
    #084d30 0%,     /* darker footer anchor */
    #0c8a58 50%,    /* elegant transition */
    #2be89a 100%    /* premium luminous finish */
  );
}

.top-zurich {
  background: linear-gradient(
    135deg,
    #001a6e 0%,
    #0033a0 45%,
    #1a5fd4 100%
  );
}

.footer-zurich {
  background: linear-gradient(
    135deg,
    #001260 0%,
    #002a8a 50%,
    #1248b8 100%
  );
}

.top-greateastern {
  background: linear-gradient(
    135deg,
    #16187a 0%,
    #212492 28%,
    #ee712a 68%,
    #d52b1e 100%
  );
}

.footer-greateastern {
  background: linear-gradient(
    135deg,
    #0f1060 0%,
    #191b7e 30%,
    #cc5e1e 68%,
    #b52416 100%
  );
}

.top-takafulmalaysia {
  background: linear-gradient(
    135deg,
    #015a2a 0%,
    #018a38 40%,
    #4ea81a 75%,
    #93c021 100%
  );
}

.footer-takafulmalaysia {
  background: linear-gradient(
    135deg,
    #014820 0%,
    #01702e 45%,
    #3d8a14 80%,
    #7aa31b 100%
  );
}

.top-hongleong {
  background: linear-gradient(
    135deg,
    #040d4f 0%,
    #0b1554 35%,
    #c0101e 72%,
    #f4202d 100%
  );
}

.footer-hongleong {
  background: linear-gradient(
    135deg,
    #030a40 0%,
    #091244 38%,
    #a50d19 72%,
    #d41826 100%
  );
}

/* subtle hover glow */
.operator-card:hover .operator-body {
  box-shadow:
    0 24px 60px rgba(0,0,0,0.12);
}

/* ════════════════════════════════════════════════════════
   OPERATOR GRID — PREMIUM MOBILE VERSION
   Smaller width + more breathing space + luxury feel
═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .operator-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 34px;

    /* bagi card tak full lebar sangat */
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }

  /* card jadi lebih compact */
  .operator-card {
    width: 100%;
    padding-top: 34px;
  }

  /* featured reset */
  .featured-card {
    transform: none;
  }

  .featured-card:hover {
    transform: translateY(-6px);
  }

  /* price banner lebih premium */
  .price-banner {
    min-width: 170px;
    top: 4px;
  }

  .price-main {
    font-size: 0.84rem;
    padding: 10px 18px;
    border-radius: 14px;
    font-weight: 800;
  }

  /* top panel lebih compact */
  .operator-top {
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 16px 16px 0 0;
    transform: skew(-4deg);
  }

  .operator-top h3,
  .operator-top p {
    transform: skew(4deg);
  }

  /* logo size balance */
  .operator-logo-wrap {
    width: 92px;
    height: 92px;
    padding: 12px;
    margin-bottom: 10px;
  }

  .top-aia .operator-logo-wrap,
  .top-pru .operator-logo-wrap {
    width: 138px;
    height: 68px;
    border-radius: 12px;
  }

  .operator-logo-img {
    max-width: 130px;
    max-height: 60px;
    object-fit: contain;
  }

  .top-hongleong .operator-logo-img {
    width: 100px;
    height: 120px;
    max-width: none;
    max-height: none;
    transform: translateY(10px);
  }

  /* body lebih kemas */
  .operator-body {
    padding: 22px 18px;
    min-height: auto;
  }

  .operator-tag {
    font-size: 0.88rem;
    margin-bottom: 18px;
  }

  .operator-features {
    gap: 10px;
  }

  .operator-features li {
    font-size: 0.78rem;
    line-height: 1.55;
    gap: 8px;
  }

  /* footer compact */
  .operator-footer {
    padding: 14px 16px;
    border-radius: 0 0 14px 14px;
    transform: skew(-4deg);
  }

  .operator-footer a {
    transform: skew(4deg);
    font-size: 0.80rem;
    letter-spacing: 0.01em;
  }
}


/* extra small devices */
@media (max-width: 480px) {

  .operator-grid {
    max-width: 330px;
    gap: 26px;
  }

  .price-main {
    font-size: 0.78rem;
    padding: 9px 16px;
  }

  .operator-top {
    height: 120px;
    padding: 0 16px;
  }

  .operator-logo-img {
    max-width: 115px;
    max-height: 54px;
  }

  .operator-body {
    padding: 20px 16px;
  }

  .operator-features li {
    font-size: 0.75rem;
  }

  .operator-footer a {
    font-size: 0.78rem;
  }
}
  


/* smooth click scroll target */
html {
  scroll-behavior: smooth;
}

/* CTA footer clickable */
.operator-footer a.operator-cta-link {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;

  position: relative;
  z-index: 5;
}


  /* ════════════════════════════════════════════════════════
     VALUE STACK
  ════════════════════════════════════════════════════════ */
  .value-stack {
    background:var(--navy3);
    border:1px solid rgba(201,168,76,0.2);
    border-radius:var(--r);
    overflow:hidden;
    max-width:760px;
    margin:0 auto 28px;
  }
  
  .value-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 26px;
    border-bottom:1px solid rgba(255,255,255,0.04);
    gap:14px;
    transition:var(--tx);
  }
  .value-item:last-child { border-bottom:none; }
  .value-item:hover { background:rgba(201,168,76,0.04); }
  .value-bonus { background:rgba(201,168,76,0.02); }
  
  .val-check {
    width:24px; height:24px;
    background:var(--gold-sub);
    border:1px solid rgba(201,168,76,0.3);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold);
    font-size:0.65rem;
    font-weight:700;
    flex-shrink:0;
  }
  .val-check.gold { background:rgba(201,168,76,0.15); }
  
  .val-info { flex:1; }
  .val-title { font-size:0.88rem; font-weight:600; color:var(--white); margin-bottom:2px; }
  .val-title.gold { color:var(--gold); }
  .val-sub   { font-size:0.76rem; color:var(--muted); }
  
  .val-price { font-size:0.88rem; font-weight:700; color:var(--muted); text-decoration:line-through; opacity:0.7; white-space:nowrap; }
  .val-price.gold { color:var(--gold); text-decoration:none; opacity:1; }
  
  .value-total {
    background:linear-gradient(135deg,rgba(201,168,76,0.12),rgba(201,168,76,0.04));
    border:1px solid rgba(201,168,76,0.3);
    border-radius:var(--r);
    padding:36px;
    text-align:center;
    max-width:760px;
    margin:0 auto;
  }
  .val-crossed { font-size:0.95rem; color:var(--muted); text-decoration:line-through; margin-bottom:6px; }
  .val-free    { font-size:3rem; font-weight:900; color:var(--gold); letter-spacing:-1px; line-height:1; margin-bottom:6px; }
  .val-caveat  { font-size:0.82rem; color:var(--muted); margin-bottom:22px; }
  
  /* ════════════════════════════════════════════════════════
     FAQ
  ════════════════════════════════════════════════════════ */
  .faq-list {
    max-width:740px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  
  .faq-item {
    background:var(--navy2);
    border:1px solid var(--navy-bdr);
    border-radius:var(--r-sm);
    overflow:hidden;
    transition:border-color 0.25s;
  }
  .faq-item[open] { border-color:rgba(201,168,76,0.35); }
  
  .faq-q {
    width:100%;
    padding:18px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:none;
    border:none;
    text-align:left;
    color:var(--white);
    font-family:'Poppins',sans-serif;
    font-size:0.93rem;
    font-weight:600;
    cursor:pointer;
    list-style:none;
    transition:color 0.2s;
  }
  .faq-q::-webkit-details-marker { display:none; }
  .faq-q::marker { display:none; }
  .faq-q:hover { color:var(--gold); }
  .faq-item[open] .faq-q { color:var(--gold); }
  
  .faq-arrow {
    width:24px; height:24px;
    background:var(--gold-sub);
    border:1px solid rgba(201,168,76,0.25);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold);
    font-size:1.1rem;
    font-weight:300;
    flex-shrink:0;
    transition:var(--tx);
  }
  .faq-item[open] .faq-arrow {
    transform:rotate(45deg);
    background:var(--gold);
    color:var(--navy);
  }
  
  .faq-ans { padding:0 22px 18px; }
  .faq-ans p { font-size:0.86rem; color:var(--muted); line-height:1.75; }
  
/* ════════════════════════════════════════════════════════
   LEAD FORM SECTION — WHITE IMAGE BACKGROUND VERSION
   Premium transformation for bright background image
═══════════════════════════════════════════════════════ */

#testimoni {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      rgba(255,255,255,0.82),
      rgba(255,255,255,0.88)
    ),
    url('/images/Client_6.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#testimoni::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at top right,
      rgba(212,175,55,0.08),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(8,17,29,0.04),
      transparent 30%
    );
  pointer-events: none;
  z-index: 1;
}

#testimoni .container { position: relative; z-index: 2; }

#testimoni .section-label {
  background: rgba(212,175,55,0.12);
  color: #8c6a08;
  border: 1px solid rgba(212,175,55,0.18);
}

#testimoni .section-header h2 {
  color: #08111d;
}

#lead-form {
  position: relative;
  overflow: hidden;

  /* white/light background image */
  background:
    linear-gradient(
      rgba(255,255,255,0.82),
      rgba(255,255,255,0.88)
    ),
    url('/images/Client_6.webp');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;

  padding: 110px 0;
}

/* subtle premium overlay */
#lead-form::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at top right,
      rgba(212,175,55,0.08),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(8,17,29,0.04),
      transparent 30%
    );
  pointer-events: none;
  z-index: 1;
}

#lead-form .container {
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════
   LAYOUT
═══════════════════════════════ */

.lead-layout {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 60px;
  align-items: start;
}

/* ═══════════════════════════════
   LEFT CONTENT
═══════════════════════════════ */

.lead-copy {
  color: #08111d;
}

#lead-form .section-label {
  background: rgba(212,175,55,0.12);
  color: #8c6a08;
  border: 1px solid rgba(212,175,55,0.18);
}

.lead-copy h2 {
  color: #08111d;
  margin-bottom: 18px;
}

.lead-copy p {
  color: #3c4652;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 24px;
}

.lead-copy strong {
  color: #08111d;
  font-weight: 700;
}

/* promises */
.lead-promises {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
  font-weight: 700;
}

.lead-promises li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.90rem;
  color: #2f3945;
  line-height: 1.6;
}

.tick {
  color: #c79a16;
  font-weight: 700;
  flex-shrink: 0;
}

/* trust pills */
.lead-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lead-trust span {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(212,175,55,0.14);
  color: #08111d;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
}

/* ═══════════════════════════════
   FORM BOX
═══════════════════════════════ */

.lead-form-box {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(212,175,55,0.14);
  border-top: 3px solid var(--gold);
  border-radius: 24px;
  padding: 36px 32px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.08),
    0 8px 24px rgba(212,175,55,0.05);
}

/* form header */
.form-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(8,17,29,0.07);
}

.form-header h3 {
  color: #08111d;
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.form-header p {
  color: #7a8490;
  font-size: 0.8rem;
  margin-bottom: 0;
}

/* form group spacing */
.form-group {
  margin-bottom: 14px;
}

/* labels */
.lead-form label {
  display: block;
  color: #4a5260;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}

/* inputs */
.lead-form input,
.lead-form select {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: #f8fafc;
  border: 1.5px solid rgba(8,17,29,0.1);
  color: #08111d;
  border-radius: 10px;
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.lead-form input:hover,
.lead-form select:hover {
  border-color: rgba(8,17,29,0.22);
  background: #ffffff;
}

.lead-form input:focus,
.lead-form select:focus {
  outline: none;
  border-color: var(--gold);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.13);
}

.lead-form input::placeholder {
  color: #b0b8c4;
  font-size: 0.82rem;
}

/* provider selection buttons */
.provider-option span {
  background: #f8fafc;
  border: 1.5px solid rgba(8,17,29,0.1);
  color: #3a424c;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.provider-option:hover span {
  border-color: rgba(201,168,76,0.45);
  background: #ffffff;
}

.provider-option input:checked + span {
  background: linear-gradient(135deg, #f4df00 0%, #d4af37 100%);
  border-color: #d4af37;
  color: #08111d;
  box-shadow: 0 2px 10px rgba(212,175,55,0.25);
}

/* disclaimer */
.form-disclaimer,
.form-helper {
  color: #8a94a0;
  font-size: 0.75rem;
}

/* ── FORM SUCCESS STATE ─────────────────────────────── */
.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 18px;
  min-height: 420px;
}
.form-success.visible {
  display: flex;
}
.form-success-icon {
  width: 72px; height: 72px;
  background: var(--gold-sub);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}
.form-success-title {
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}
.form-success-msg {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.75;
  max-width: 320px;
  margin: 0;
}
.form-reset-btn {
  color: var(--muted);
  font-size: 0.78rem;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-top: 4px;
  font-family: inherit;
}
.form-reset-btn:hover { color: var(--white); }

/* ════════════════════════════════════════════════════════
   LEAD FORM — PREMIUM MOBILE OPTIMIZATION V2
   Smaller centered form + luxury spacing + not full width
═══════════════════════════════════════════════════════ */

/* TABLET */
@media (max-width: 1024px) {
  .lead-layout {
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
  }

  /* left content */
  .lead-copy {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
  }

  .lead-promises {
    align-items: center;
    gap: 14px;
  }

  .lead-promises li {
    justify-content: center;
    text-align: center;
    max-width: 560px;
    font-size: 0.88rem;
  }

  .lead-trust {
    justify-content: center;
    gap: 12px;
  }

  /* smaller centered form */
  .lead-form-box {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;

    padding: 34px 30px;
    border-radius: 24px;

    box-shadow:
      0 30px 70px rgba(0,0,0,0.08),
      0 10px 24px rgba(212,175,55,0.04);
  }
}


/* MOBILE */
@media (max-width: 768px) {
  #lead-form {
    padding: 84px 0;
    background-position: center top;
    background-size: cover;
  }

  .lead-layout {
    gap: 34px;
  }

  /* left copy */
  .lead-copy {
    text-align: center;
    max-width: 100%;
  }

  .lead-copy h2 {
    font-size: clamp(1.7rem, 6vw, 2.2rem);
    line-height: 1.2;
    margin-bottom: 14px;
  }

  .lead-copy p {
    font-size: 0.88rem;
    line-height: 1.75;
    margin-bottom: 24px;
    padding: 0 6px;
  }

  /* promises */
  .lead-promises {
    gap: 12px;
    margin-bottom: 26px;
  }

  .lead-promises li {
    justify-content: center;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.6;
    max-width: 100%;
  }

  /* trust */
  .lead-trust {
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .lead-trust span {
    font-size: 0.72rem;
    padding: 8px 14px;
    border-radius: 999px;
    min-height: 38px;
  }

  /* IMPORTANT:
     form dibuat kecil + center */
  .lead-form-box {
    width: 100%;
    max-width: 430px; /* ini yang kecilkan form */
    margin-left: auto;
    margin-right: auto;

    padding: 28px 20px;
    border-radius: 20px;

    box-shadow:
      0 22px 50px rgba(0,0,0,0.08),
      0 8px 20px rgba(212,175,55,0.04);
  }

  /* form header */
  .form-header {
    text-align: center;
    margin-bottom: 22px;
  }

  .form-header h3 {
    font-size: 1.15rem;
    margin-bottom: 6px;
  }

  .form-header p {
    font-size: 0.78rem;
    line-height: 1.5;
  }

  /* form spacing */
  .form-group {
    margin-bottom: 16px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lead-form label {
    font-size: 0.80rem;
    margin-bottom: 8px;
    display: block;
  }

  .lead-form input,
  .lead-form select {
    height: 48px;
    font-size: 0.82rem;
    border-radius: 12px;
    padding: 0 14px;
  }

  /* provider options */
  .provider-options {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .provider-option span {
    min-height: 48px;
    font-size: 0.76rem;
    border-radius: 12px;
    padding: 12px;
  }

  .form-helper {
    font-size: 0.72rem;
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
  }

  /* CTA */
  .btn-full {
    min-height: 52px;
    font-size: 0.82rem;
    border-radius: 12px;
    margin-top: 8px;
  }

  .form-disclaimer {
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.6;
    margin-top: 12px;
  }
}


/* SMALL MOBILE */
@media (max-width: 480px) {
  #lead-form {
    padding: 70px 0;
  }

  .lead-layout {
    gap: 28px;
  }

  .lead-copy h2 {
    font-size: 1.55rem;
  }

  .lead-copy p {
    font-size: 0.82rem;
    line-height: 1.7;
  }

  .lead-promises li {
    font-size: 0.78rem;
  }

  .lead-trust span {
    font-size: 0.68rem;
    padding: 7px 12px;
  }

  /* lebih kecil lagi untuk phone kecil */
  .lead-form-box {
    max-width: 360px;
    padding: 22px 16px;
    border-radius: 18px;
  }

  .form-header h3 {
    font-size: 1rem;
  }

  .lead-form input,
  .lead-form select {
    height: 44px;
    font-size: 0.78rem;
  }

  .provider-option span {
    min-height: 44px;
    font-size: 0.72rem;
  }

  .btn-full {
    min-height: 48px;
    font-size: 0.78rem;
  }

  .form-disclaimer {
    font-size: 0.66rem;
  }
}

  /* ════════════════════════════════════════════════════════
   PROVIDER OPTIONS — PREMIUM SELECTION BUTTONS
═══════════════════════════════════════════════════════ */

.provider-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.provider-option {
  position: relative;
  cursor: pointer;
}

.provider-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.provider-option span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 56px;
  padding: 14px 16px;

  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 14px;

  background: rgba(255,255,255,0.02);
  color: black;

  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;

  transition: 0.3s ease;
}

/* hover */
.provider-option:hover span {
  border-color: rgba(201,168,76,0.45);
  transform: translateY(-2px);
}

/* active checked */
.provider-option input:checked + span {
  background: linear-gradient(
    135deg,
    #f4df00 0%,
    #d4af37 100%
  );
  color: #08111d;
  border-color: transparent;
  box-shadow:
    0 10px 24px rgba(212,175,55,0.18);
}

/* tick badge on checked */
.provider-option input:checked + span::after {
  content: '✓';
  position: absolute;
  top: 7px;
  right: 9px;
  width: 18px;
  height: 18px;
  background: rgba(0,0,0,0.15);
  color: #08111d;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* disabled state (limit reached) */
.provider-option input:disabled + span {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.provider-option:has(input:disabled):hover span {
  transform: none;
  border-color: rgba(201,168,76,0.22);
}

/* helper text */
.form-helper {
  margin-top: 12px;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.5;
}

/* limit badge next to label */
.provider-limit-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  background: rgba(201,168,76,0.12);
  color: var(--gold);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}

/* limit warning text */
.provider-limit-msg {
  color: #e6b800 !important;
  font-weight: 600;
}

/* mobile — keep 2 columns so 8 items don't scroll forever */
@media (max-width: 768px) {
  .provider-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .provider-option span {
    min-height: 52px;
    font-size: 0.78rem;
    padding: 12px 10px;
  }
}
  
  /* ════════════════════════════════════════════════════════
     FINAL CTA
  ════════════════════════════════════════════════════════ */
  .final-cta {
    position:relative;
    background:linear-gradient(135deg,#a57c2a 0%,#c9a84c 40%,#dab862 70%,#a57c2a 100%);
    padding:96px 24px;
    text-align:center;
    overflow:hidden;
  }
  .final-cta::before {
    content:'';
    position:absolute; inset:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23000000' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events:none;
  }
  
  .fca-content { position:relative; z-index:2; max-width:640px; margin:0 auto; }
  .fca-badge {
    display:inline-block;
    background:rgba(13,27,42,0.25);
    border:1px solid rgba(13,27,42,0.2);
    border-radius:100px;
    padding:6px 18px;
    font-size:0.78rem;
    font-weight:700;
    color:var(--navy);
    letter-spacing:0.05em;
    margin-bottom:18px;
  }
  .fca-content h2 { color:var(--navy); font-size:clamp(1.7rem,3.5vw,2.4rem); margin-bottom:12px; }
  .fca-content p  { color:rgba(13,27,42,0.65); font-size:0.97rem; margin-bottom:32px; }
  
  .fca-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
  
  .fca-trust {
    font-size:0.82rem;
    color:rgba(13,27,42,0.65);
    font-weight:500;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
  }
  
 /* ════════════════════════════════════════════════════════
   FOOTER — FULL PREMIUM VERSION
   Desktop + Mobile Different Background Images
═══════════════════════════════════════════════════════ */

.footer {
  position: relative;
  overflow: hidden;

  /* desktop background */
  background:
    linear-gradient(
      rgba(6, 14, 28, 0.88),
      rgba(6, 14, 28, 0.94)
    ),
    url('/images/herodesktop.webp');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;

  padding: 90px 0 30px;
  color: var(--white);
  border-top: 1px solid rgba(201,168,76,0.12);
}

/* luxury glow overlay */
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at top right,
      rgba(212,175,55,0.08),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(255,255,255,0.03),
      transparent 30%
    );
  pointer-events: none;
  z-index: 1;
}

/* keep content above overlay */
.footer .container {
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════
   FOOTER GRID
═══════════════════════════════ */

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}

/* ═══════════════════════════════
   BRAND SECTION
═══════════════════════════════ */

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-logo {
  font-size: 1.65rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.footer-logo span {
  color: var(--gold);
}

.footer-brand p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.82);
}

/* contacts */
.footer-contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-contacts a {
  text-decoration: none;
  color: rgba(255,255,255,0.84);
  font-size: 0.84rem;
  transition: 0.3s ease;
}

.footer-contacts a:hover {
  color: var(--gold);
}

/* ═══════════════════════════════
   COLUMNS
═══════════════════════════════ */

.footer-col h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 18px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col li {
  list-style: none;
}

.footer-col a {
  text-decoration: none;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.78);
  transition: 0.3s ease;
}

.footer-col a:hover {
  color: var(--gold);
  padding-left: 4px;
}

/* disclaimer */
.footer-disclaimer {
  font-size: 0.82rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.78);
  margin-bottom: 18px;
}

/* ═══════════════════════════════
   BNM CERT
═══════════════════════════════ */

.bnm-cert {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: 14px;
  padding: 14px 16px;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bnm-cert span {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.bnm-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.bnm-sub {
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
}

/* ═══════════════════════════════
   FOOTER BOTTOM
═══════════════════════════════ */

.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

.footer-bottom p {
  font-size: 0.76rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.62);
}
.footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--gold); }
.footer-legal span { color: rgba(255,255,255,0.2); font-size: 0.65rem; }

/* ═══════════════════════════════
   TABLET
═══════════════════════════════ */

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
  }
}

/* ═══════════════════════════════
   MOBILE BACKGROUND VERSION
═══════════════════════════════ */

@media (max-width: 768px) {
  .footer {
    background:
      linear-gradient(
        rgba(6, 14, 28, 0.90),
        rgba(6, 14, 28, 0.96)
      ),
      url('/images/heromobile.webp');

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    padding: 72px 0 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-logo {
    font-size: 1.4rem;
  }

  .footer-brand p,
  .footer-col a,
  .footer-disclaimer {
    font-size: 0.82rem;
  }

  .footer-col h4 {
    margin-bottom: 14px;
  }

  .footer-bottom {
    margin-top: 38px;
    padding-top: 20px;
  }

  .footer-bottom p {
    font-size: 0.72rem;
  }
}

/* ═══════════════════════════════
   SMALL MOBILE
═══════════════════════════════ */

@media (max-width: 480px) {
  .footer {
    background-position: center center;
    padding: 60px 0 22px;
  }

  .footer-logo {
    font-size: 1.28rem;
  }

  .bnm-cert {
    padding: 12px 14px;
  }

  .footer-bottom p {
    font-size: 0.70rem;
    line-height: 1.6;
  }
}
  
  /* ════════════════════════════════════════════════════════
     FLOATING BUTTON
  ════════════════════════════════════════════════════════ */
  .floating-btn {
    position:fixed;
    bottom:28px;
    left:50%;
    transform:translateX(-50%);
    z-index:8000;
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:var(--gold);
    color:var(--navy);
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:0.88rem;
    padding:13px 30px;
    border-radius:100px;
    box-shadow:0 8px 36px rgba(201,168,76,0.5), 0 2px 8px rgba(0,0,0,0.3);
    text-decoration:none;
    white-space:nowrap;
    animation:floatBob 3.5s ease-in-out infinite;
    transition:background 0.25s, box-shadow 0.25s, opacity 0.25s;
  }
  .floating-btn:hover { background:var(--gold-lt); box-shadow:0 12px 48px rgba(201,168,76,0.65); }
  @keyframes floatBob {
    0%,100% { transform:translateX(-50%) translateY(0); }
    50%      { transform:translateX(-50%) translateY(-5px); }
  }
  
  /* ── ULAMA VIDEO SECTION ─────────────────────────────────── */
  .ulama-section {
    position: relative;
    overflow: hidden;
    background: var(--navy2);
  }
  .ulama-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 40% at 50% 0%,
      rgba(201,168,76,0.055) 0%, transparent 65%);
    pointer-events: none;
  }

  /* Each video block — centered single column */
  .ulama-block {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  /* Pill badge */
  .ulama-pill-wrap { display: flex; justify-content: center; }
  .ulama-pill {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 0.04em;
    background: rgba(201,168,76,0.06);
  }
  .ulama-pill.ulama-pill-blue {
    border-color: rgba(74,144,217,0.4);
    color: #7ab8f0;
    background: rgba(74,144,217,0.07);
  }

  /* Headline */
  .ulama-hl {
    font-size: clamp(1.55rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin: 0;
  }
  .ulama-hl em { color: var(--gold); }

  /* Lead paragraph */
  .ulama-lead {
    font-size: 0.97rem;
    color: var(--body);
    line-height: 1.75;
    max-width: 600px;
    margin: 0;
  }

  /* Video facade — full block width */
  .vid-facade {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  }
  .vid-facade:focus-visible { box-shadow: 0 0 0 3px var(--gold); }

  .vid-thumb-bg {
    position: absolute; inset: 0;
    background: linear-gradient(150deg,
      #081827 0%, #0c2240 35%, #112d52 65%, #091c35 100%);
  }
  .vid-thumb-bg.vid-thumb-blue {
    background: linear-gradient(150deg,
      #040d1a 0%, #0a1930 35%, #0f2342 65%, #060f1e 100%);
  }
  .vid-watermark {
    font-size: 10rem; font-weight: 900;
    color: rgba(255,255,255,0.028);
    letter-spacing: -6px;
    user-select: none;
    position: absolute;
    right: 6%; bottom: 2%;
    line-height: 1;
  }

  /* Play button */
  .vid-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 76px; height: 76px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    color: var(--navy);
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    border: none;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease),
                box-shadow 0.25s var(--ease);
    box-shadow: 0 4px 32px rgba(0,0,0,0.45), 0 0 0 8px rgba(255,255,255,0.12);
    animation: vid-pulse 2.6s ease-out infinite;
  }
  .vid-play-btn svg { margin-left: 6px; color: var(--navy); }
  .vid-facade:hover .vid-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--gold);
    box-shadow: 0 8px 40px rgba(201,168,76,0.5), 0 0 0 12px rgba(201,168,76,0.18);
  }
  .vid-facade:hover .vid-play-btn svg { color: var(--navy); }

  @keyframes vid-pulse {
    0%   { box-shadow: 0 4px 32px rgba(0,0,0,0.45), 0 0 0 0   rgba(255,255,255,0.4); }
    70%  { box-shadow: 0 4px 32px rgba(0,0,0,0.45), 0 0 0 22px rgba(255,255,255,0); }
    100% { box-shadow: 0 4px 32px rgba(0,0,0,0.45), 0 0 0 0   rgba(255,255,255,0); }
  }

  /* Thumbnail preview (always visible, first frame of video) */
  .vid-thumb-preview {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border: none;
    pointer-events: none;
  }

  /* Video / iframe after play */
  .vid-facade iframe,
  .vid-facade video:not(.vid-thumb-preview) {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: none;
    background: #000;
    border-radius: 20px;
  }

  /* Caption below video */
  .ulama-cap {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.7;
    max-width: 560px;
    margin: 0;
  }

  /* CTA button row */
  .ulama-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  /* Divider between two video blocks */
  .ulama-divider {
    max-width: 780px;
    margin: 64px auto;
    border: none;
    border-top: 1px solid var(--navy-bdr);
  }

  /* ── ACCESSIBILITY ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal,
  .reveal-stagger {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hero animation fallback */
  .hero-animate .hero-bg,
  .hero-animate .hero-grid,
  .hero-animate .hero-content,
  .hero-animate .hero-badge,
  .hero-animate .hero-content h1,
  .hero-animate .hero-sub,
  .hero-animate .hero-bullets,
  .hero-animate .hero-actions,
  .hero-animate .hero-trust {
    opacity: 1 !important;
    transform: none !important;
  }

  .vid-play-btn {
    animation: none !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 6px rgba(255,255,255,0.1) !important;
  }
}