/* ==========================================================================
   LIGHT MODE — latar putih, rapi & profesional
   Dipakai halaman <body class="page-white"> (index.html).
   Tema dasar dark-tech; berkas ini menyesuaikan warna agar kontras tetap
   tinggi di atas putih TANPA menghilangkan aksen cahaya (glow ungu/cyan/emas).
   Dimuat SETELAH styles.css agar menang pada cascade.
   ========================================================================== */

body.page-white{
  color-scheme:light;
  --bg:#ffffff; --bg-2:#f6f8fc; --bg-3:#eef2f8;
  --panel:rgba(15,23,42,.035); --panel-2:rgba(15,23,42,.06);
  --border:rgba(15,23,42,.12); --border-strong:rgba(15,23,42,.22);
  --text:#0b1220; --text-2:#27334a; --muted:#4b5a70;
  --brand-ink:#5b3fd6; --brand-soft:rgba(91,75,214,.12);
  --success:#0e9f6e; --danger:#dc2626; --gold:#8a5207;
  --grad-gold:linear-gradient(135deg,#f4d488 0%,#c69a3e 55%,#9a6f18 100%);
  --grad-brand:linear-gradient(135deg,#5b4bd6 0%,#9333ea 55%,#0891b2 130%);
  --grad-heading:linear-gradient(105deg,#0f172a 12%,#5b4bd6 58%,#0e7490 100%);
  --shadow-sm:0 14px 32px -24px rgba(15,23,42,.20);
  --shadow:0 26px 60px -32px rgba(15,23,42,.28);
  --shadow-glow:0 40px 90px -55px rgba(91,75,214,.30);
  background:#ffffff;
}

/* Scrollbar & seleksi */
body.page-white ::-webkit-scrollbar-track{background:#fff}
body.page-white ::-webkit-scrollbar-thumb{border-color:#fff;background:rgba(15,23,42,.18)}
body.page-white ::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.30)}
body.page-white ::selection{background:rgba(91,75,214,.25);color:#0f172a}

/* Section: gradien gelap -> putih bersih (glow lembut tetap di hero) */
body.page-white .finder-section,
body.page-white .capability-section,
body.page-white .workflow-section,
body.page-white .advantage-section,
body.page-white .compare-section,
body.page-white .package-section,
body.page-white .testimonial-section,
body.page-white .cta-section,
body.page-white .logo-strip{
  background-image:none; background-color:#ffffff;
}
body.page-white .hero{
  background:
    radial-gradient(900px 480px at 78% -8%,rgba(109,94,252,.14),transparent 68%),
    radial-gradient(700px 420px at 4% 14%,rgba(34,211,238,.12),transparent 66%),
    radial-gradient(1200px 600px at 50% 115%,rgba(15,23,42,.22),transparent 62%),
    radial-gradient(1000px 260px at 50% -8%,rgba(15,23,42,.10),transparent 70%),
    linear-gradient(180deg,#ffffff 0%,#f6f8fc 68%,#ffffff 100%);
}
body.page-white .hero::before{
  background-image:
    linear-gradient(to right,rgba(15,23,42,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(15,23,42,.05) 1px,transparent 1px);
}

/* Header & menu mobile */
body.page-white .site-header{background:rgba(255,255,255,.82)}
body.page-white .site-header.is-scrolled{background:rgba(255,255,255,.95);border-bottom-color:var(--border);box-shadow:0 20px 40px -34px rgba(15,23,42,.45)}
body.page-white .mobile-nav{background:rgba(255,255,255,.98)}

/* Kartu & panel: batas lembut + isian putih agar terbaca di atas putih */
body.page-white .visual-card,
body.page-white .stats-row,
body.page-white .hero-proof,
body.page-white .capability-item,
body.page-white .workflow-card,
body.page-white .advantage-card,
body.page-white .advantage-mini,
body.page-white .compare-table,
body.page-white .package-card,
body.page-white .testimonial-card,
body.page-white .finder-box,
body.page-white .service-note,
body.page-white .order-step,
body.page-white .contact-direct__item,
body.page-white .cta-trust span,
body.page-white .paket-card,
body.page-white .order-summary,
body.page-white .visual-card-task,
body.page-white .visual-card-chat{
  background-color:#ffffff; background-image:none; box-shadow:var(--shadow-sm);
}
body.page-white .package-card.featured{
  background-image:linear-gradient(180deg,rgba(217,178,106,.12),rgba(217,178,106,.02));
  border-color:rgba(180,130,20,.45);
}
body.page-white .progress{background:rgba(15,23,42,.08)}
body.page-white .compare-head{background:rgba(15,23,42,.04)}
body.page-white .empty-state{background:rgba(15,23,42,.03)}
body.page-white .agent-console{background:rgba(91,75,214,.07)}

/* Teks terang (hardcoded) -> gelap pekat agar jelas di atas putih */
body.page-white .service-category{color:#3f4b60}
body.page-white .service-count{color:#0b1220}
body.page-white .service-card p{color:#2b3a52}
body.page-white .role-tags span{color:#2b3a52}
body.page-white .role-card__title{color:#0b1220}
body.page-white .role-card__num{color:#0b1220}
body.page-white .role-card__cat{color:#3f4b60}
body.page-white .role-card__guarantee{color:#0b1220}
body.page-white .section-heading p{color:#41506a}
body.page-white .package-tag{color:#41506a}
body.page-white .package-description{color:#3f4b60}
body.page-white .package-price span{color:#41506a}
body.page-white .package-price small{color:#41506a}
body.page-white .cta-hint{color:#41506a}
body.page-white .capability-item p{color:#41506a}
body.page-white .workflow-card p{color:#41506a}
body.page-white .check-list p{color:#41506a}
body.page-white .advantage-card-head, body.page-white .advantage-card-foot{color:#41506a}
body.page-white .advantage-card-foot span{color:#41506a}
body.page-white .advantage-mini small{color:#41506a}
body.page-white .compare-row:not(.compare-head) > span:nth-child(2){color:#41506a}
body.page-white .compare-note{color:#41506a}
body.page-white .package-disclaimer{color:#41506a}
body.page-white .visual-kicker{color:#41506a}
body.page-white .progress-row{color:#41506a}
body.page-white .hero-lead{color:#41506a}
body.page-white .console-line{color:#1e293b}
body.page-white .console-prompt{color:#0e7490}

/* Judul & angka bergradien -> versi gelap agar tetap terbaca di putih */
body.page-white h1, body.page-white h2, body.page-white h3, body.page-white h4{color:var(--text)}
body.page-white .hero-copy .hero-title{
  background-image:linear-gradient(110deg,#1e40af 0%,#1d4ed8 42%,#22c55e 43%,#16a34a 100%);
  filter:drop-shadow(0 0 12px rgba(29,78,216,.4));
}
body.page-white .hero-copy h1 span,
body.page-white .catalog-hero h1 span{
  background-image:linear-gradient(105deg,#0f172a 12%,#5b4bd6 58%,#0e7490 100%);
}
body.page-white .hero-copy .hero-lead-strong{
  background-image:none;
  -webkit-text-fill-color:#111111; color:#111111;
  font-size:1.75rem;
  text-shadow:none;
}
body.page-white .visual-score,
body.page-white .stats-row strong,
body.page-white .workflow-number{
  background-image:linear-gradient(105deg,#0f172a 12%,#5b4bd6 58%,#0e7490 100%);
}

/* Avatar stack & chat (ikon lingkaran gelap -> terang) */
body.page-white .avatar-stack span{border-color:#fff;background:#e2e8f0;color:#334155}
body.page-white .avatar-stack span:nth-child(2){background:rgba(91,75,214,.12);color:#4338ca}
body.page-white .chat-bubble{background:rgba(91,75,214,.10);color:#3730a3}

/* ===== Kartu layanan (service-card): DARK BIRU full + lampu/glow hidup ===== */
@keyframes light-breathe{0%,100%{opacity:.5}50%{opacity:.9}}
body.page-white .service-card{
  border:3px solid rgba(201,162,39,.85);
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(var(--cat),.3), transparent 58%),
    linear-gradient(165deg, #182352 0%, #111a3f 55%, #0b1130 100%);
  box-shadow:
    inset 0 0 0 6px rgba(201,162,39,.14),
    0 20px 46px -28px rgba(8,12,40,.95),
    inset 0 1px 0 rgba(255,255,255,.07);
}
body.page-white .service-card h3{
  font-weight:800;
  background-image:linear-gradient(100deg,#ffffff 0%,#eafeff 45%,#9df3ff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 10px rgba(34,211,238,.55));
}
body.page-white .service-card .service-category{font-weight:700;color:rgba(226,232,255,.85)}
body.page-white .service-card .service-count{font-weight:800;color:#ffffff}
body.page-white .service-card p{font-weight:600;color:rgba(208,217,240,.96)}
body.page-white .service-card .role-tags span{font-weight:700;color:#e6ebff;background:rgba(var(--cat),.2)}
body.page-white .service-card .hero-featured__price span{font-weight:700;color:rgba(208,217,240,.82)}
body.page-white .service-card .hero-featured__price strong{font-weight:800}
body.page-white .service-card .text-link{color:#a9c9ff}
body.page-white .service-card::before{
  background: radial-gradient(closest-side, rgba(var(--cat),.7), transparent 76%);
  opacity:.5;
  animation: light-breathe 4.5s ease-in-out infinite;
}
body.page-white .service-card:hover, body.page-white .service-card.is-active{
  border-color:rgba(247,201,72,1);
  box-shadow:
    inset 0 0 0 8px rgba(201,162,39,.2),
    0 32px 74px -40px rgba(var(--cat),.95),
    0 0 38px -6px rgba(247,201,72,.9),
    inset 0 1px 0 rgba(255,255,255,.14);
}
body.page-white .service-card:hover::before, body.page-white .service-card.is-active::before{opacity:1}
body.page-white .service-icon{color:#fff;border:1.5px solid rgba(var(--cat),.65);background:rgba(var(--cat),.24);box-shadow:0 0 24px -4px rgba(var(--cat),.95)}

/* Kartu peran (role-card): badan gelap -> putih beraksen kategori */
body.page-white .role-card{
  background:radial-gradient(130% 90% at 88% -12%,var(--rc-wash),transparent 58%),linear-gradient(180deg,#ffffff 0%,#f8fafc 115%);
}
body.page-white .role-card:hover{
  background:radial-gradient(130% 95% at 88% -12%,var(--rc-wash),transparent 55%),linear-gradient(180deg,#ffffff 0%,#f1f5f9 115%);
}

/* Logo industri (teks redup gelap) */
body.page-white .logo-list strong{color:rgba(15,23,42,.42)}
body.page-white .logo-list strong:hover{color:#0f172a;text-shadow:none}

/* Tombol outline/ghost kontras di putih */
body.page-white .button-outline{background:rgba(15,23,42,.02);border-color:var(--border-strong);color:var(--text);-webkit-backdrop-filter:none;backdrop-filter:none}
body.page-white .button-outline:hover{background:rgba(91,75,214,.08);color:#4338ca}
body.page-white .button-ghost{color:var(--text-2)}
body.page-white .button-ghost:hover{background:rgba(15,23,42,.04);color:var(--text)}
body.page-white .text-link{color:#4338ca}
body.page-white .text-link:hover{color:#312e81}

/* Kartu CTA, langkah pesan & kontak langsung: gelap -> putih beraksen emas */
body.page-white .cta-inner{
  background:linear-gradient(135deg,rgba(91,75,214,.08),rgba(14,116,144,.05) 62%,rgba(217,178,106,.05));
  border:1px solid rgba(180,130,20,.32);
  box-shadow:var(--shadow-glow),var(--shadow);
}
body.page-white .cta-inner p{color:#334155}
body.page-white .order-step{background:rgba(217,178,106,.05)}
body.page-white .order-step:hover{background:rgba(217,178,106,.10)}
body.page-white .contact-direct__item{background:rgba(15,23,42,.02)}
body.page-white .contact-direct__item:hover{background:rgba(217,178,106,.08)}
body.page-white .contact-direct__label{color:#a16207}
body.page-white .order-step__num{color:#a16207}

/* Form input & label */
body.page-white .contact-form label{color:#334155}
body.page-white .contact-form input, body.page-white .contact-form textarea{
  background:rgba(15,23,42,.02);border-color:var(--border-strong);color:var(--text);
}
body.page-white .contact-form input:focus, body.page-white .contact-form textarea:focus{background:#fff}
body.page-white .contact-form input::placeholder, body.page-white .contact-form textarea::placeholder{color:#94a3b8}

/* Footer: PUTIH bersih (area di atas Parent Company) — hanya kartu Parent Company yang HITAM PEKAT */
body.page-white .site-footer{background:#ffffff;border-top:1px solid rgba(180,130,20,.28)}
body.page-white .footer-grid p, body.page-white .footer-grid h3,
body.page-white .footer-grid span, body.page-white .footer-bottom{color:#64748b}
body.page-white .footer-grid a{color:#334155}
body.page-white .footer-grid a:hover{color:#0f172a}
body.page-white .footer-grid strong, body.page-white .footer-brand strong{color:#0f172a}
body.page-white .footer-grid small{color:#64748b}
body.page-white .footer-brand .brand-mark{filter:none}
body.page-white .footer-grid .footer-btn{color:#0f172a}
body.page-white .footer-btn--wa{background:rgba(8,145,178,.1);border-color:rgba(8,145,178,.45)}
body.page-white .footer-btn--mail{background:rgba(91,75,214,.1);border-color:rgba(91,75,214,.45)}
body.page-white .footer-btn--cta{background:linear-gradient(135deg,rgba(217,178,106,.18),rgba(109,94,252,.12));border-color:rgba(160,120,30,.55)}
body.page-white .footer-btn--cta span{color:#a16207}

/* Kartu Parent Company: HITAM PEKAT, semua tulisan PUTIH JELAS */
body.page-white .footer-about__card{
  background:#000000;
  border-top:0;
  padding:16px 18px;
  border-radius:14px;
  box-shadow:0 22px 46px -30px rgba(0,0,0,.75);
}
body.page-white .footer-about__label{color:#ffffff}
body.page-white .footer-about__text{color:#ffffff}
body.page-white .footer-about__text strong{color:#ffffff}
body.page-white .footer-about__ceo{border-top-color:rgba(255,255,255,.35)}
body.page-white .footer-about__team{border-top-color:rgba(255,255,255,.35)}
body.page-white .footer-about__card p,
body.page-white .footer-about__card strong,
body.page-white .footer-about__label,
body.page-white .footer-about__text,
body.page-white .footer-about__ceo-label,
body.page-white .footer-about__ceo-name,
body.page-white .footer-about__ceo-org{color:#ffffff !important}
body.page-white .footer-about__ceo-photo{border-color:rgba(255,255,255,.4)}

/* Modal konsultasi: kotak gelap -> putih, teks gelap, aksen emas */
body.page-white .konsul-modal__backdrop{background:rgba(15,23,42,.45)}
body.page-white .konsul-modal__box{
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid rgba(180,130,20,.45);
  box-shadow:0 40px 90px -30px rgba(15,23,42,.35),0 18px 50px -20px rgba(217,178,106,.4);
}
body.page-white .konsul-modal__box h3{color:#0f172a}
body.page-white .konsul-modal__eyebrow{color:#a16207}
body.page-white .konsul-modal__guarantee{color:#8a5207;background:rgba(217,178,106,.10)}
body.page-white .konsul-modal__grid .benefit-title{color:#a16207}
body.page-white .konsul-modal__close{background:rgba(15,23,42,.03)}

/* Tombol ghost WA & close di light mode */
body.page-white .btn-ghost-wa{background:rgba(15,23,42,.02);border-color:var(--border-strong);color:var(--text)}
body.page-white .konsultasi-close{color:var(--text-2)}
body.page-white .konsultasi-close:hover{color:var(--text)}


/* ==========================================================================
   GARIS EMAS pada SEMUA kotak + teks tebal & jelas (premium)
   Kotak premium/featured dibuat lebih menonjol (garis emas lebih tebal & glow).
   ========================================================================== */

/* 1) Bingkai emas seragam untuk semua kotak/panel utama */
body.page-white .capability-item,
body.page-white .workflow-card,
body.page-white .advantage-card,
body.page-white .advantage-mini,
body.page-white .compare-table,
body.page-white .testimonial-card,
body.page-white .finder-box,
body.page-white .service-note,
body.page-white .konsultasi-card,
body.page-white .order-summary,
body.page-white .faq-item,
body.page-white .stats-row,
body.page-white .hero-proof,
body.page-white .cta-inner{
  border:1.5px solid rgba(201,162,39,.5);
}

/* 2) Paket: garis emas mengelilingi; yang FEATURED (premium) lebih tebal & bersinar */
body.page-white .package-card{
  border:1.5px solid rgba(201,162,39,.5);
}
body.page-white .package-card.featured{
  border:2.5px solid rgba(201,162,39,.9);
  box-shadow:0 40px 90px -50px rgba(201,162,39,.85),0 0 0 1px rgba(201,162,39,.3),0 0 34px -10px rgba(201,162,39,.55);
}
body.page-white .package-card h3{font-weight:800;color:#0b1220}
body.page-white .package-card li{font-weight:600}
body.page-white .package-card.featured h3{color:#8a5207}

/* 3) Kartu peran (role-card): garis emas mengelilingi + judul tebal */
body.page-white .role-card{
  border:1.5px solid rgba(201,162,39,.5);
}
body.page-white .role-card__title{font-weight:800}
body.page-white .role-card__strength{font-weight:600}
body.page-white .role-card__guarantee{font-weight:700}

/* 4) Tebalkan teks di dalam kotak agar jelas & premium */
body.page-white .capability-item h3,
body.page-white .workflow-card h3,
body.page-white .advantage-card-head strong,
body.page-white .testimonial-author strong,
body.page-white .order-step h3,
body.page-white .konsultasi-head h2{font-weight:800;color:#0b1220}
body.page-white .capability-item p,
body.page-white .workflow-card p,
body.page-white .testimonial-card p,
body.page-white .order-step p,
body.page-white .konsultasi-field label,
body.page-white .check-list strong{font-weight:600}

/* 5) Kartu kontak langsung & langkah pesan: garis emas + teks tebal */
body.page-white .contact-direct__item,
body.page-white .order-step{
  border:1.5px solid rgba(201,162,39,.5);
}
body.page-white .contact-direct__item a{font-weight:800}
body.page-white .order-step h3{font-weight:800}

/* 6) Panel visual hero & stats: garis emas tipis premium */
body.page-white .visual-card,
body.page-white .stats-row{
  border:1.5px solid rgba(201,162,39,.45);
}


/* ===== PERKECIL KOTAK LAYANAN (rapi & desain tetap utuh) =====
   Hanya mengurangi padding/ikon/gap — warna, garis emas, glow & layout tidak diubah. */

/* Grid katalog 39 layanan: kolom lebih ramping + gap lebih rapat */
body.page-white .service-grid{
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(12px,1.4vw,16px);
}

/* Badan kotak katalog: padding lebih kecil */
body.page-white .service-card{
  padding:clamp(14px,1.6vw,18px);
}

/* Ikon, label, tag, judul & deskripsi agar proporsional dengan kotak kecil */
body.page-white .service-icon{
  width:40px;height:40px;margin-bottom:.7rem;border-radius:13px;font-size:1.05rem;
}
body.page-white .service-card-top{margin-bottom:.45rem}
body.page-white .role-tags{margin:.6rem 0 .7rem}
body.page-white .role-tags span{padding:.25rem .5rem;font-size:.7rem}
body.page-white .service-card h3{font-size:1rem;margin-bottom:.35em}
body.page-white .service-card p{font-size:.86rem}

/* Kotak unggulan di hero (di bawah tombol Jelajahi) */
body.page-white .hero-featured__grid{gap:.5rem}
body.page-white .hero-featured .service-card{
  padding:clamp(12px,1.4vw,16px);
}
body.page-white .hero-featured .service-icon{
  width:30px;height:30px;margin-bottom:.5rem;border-radius:10px;font-size:.9rem;
}
body.page-white .hero-featured .service-category{font-size:.54rem}



/* ===== PERKECIL ISI KOTAK UNGGULAN (Tenaga AI Asisten Pribadi, Keuangan, dll) =====
   Hanya scope .hero-featured — tag/deskripsi/harga/tombol lebih ringkas. */
body.page-white .hero-featured .service-card h3{
  font-size:.95rem; line-height:1.2; margin-bottom:.3em;
}
body.page-white .hero-featured .hero-featured__price{
  margin:0 0 .45rem; padding:.32rem .55rem;
}
body.page-white .hero-featured .hero-featured__price strong{font-size:.9rem}
body.page-white .hero-featured .service-card > p:not(.hero-featured__price){
  font-size:.76rem; line-height:1.45; margin-bottom:.6rem;
}
body.page-white .hero-featured .role-tags{
  gap:.28rem; margin:.5rem 0 .6rem;
}
body.page-white .hero-featured .role-tags span{
  padding:.18rem .42rem; font-size:.6rem; line-height:1.35;
}
body.page-white .hero-featured__actions{
  gap:.35rem; padding-top:.2rem; margin-top:auto;
}
body.page-white .hero-featured__actions .btn-gold,
body.page-white .hero-featured__actions .btn-wa{
  padding:.45rem .55rem; font-size:.66rem;
}
body.page-white .hero-featured .service-count{
  padding:.12rem .45rem; font-size:.6rem;
}



/* ==========================================================================
   MOBILE / HP — 1 layar scroll muat 2 kotak (atau 1,5 kotak)
   Kuncinya: deskripsi & tag dibatasi barisnya, tombol 2 baris (bukan 3),
   ikon/padding lebih ringkas → tinggi kotak ± setengah layar HP.
   PLUS: hero lead menyesuaikan agar muat di layar HP.
   ========================================================================== */
@media (max-width: 760px){
  /* Hero: teks lead diperkecil agar seimbang (imbang) dgn kartu mini di sebelahnya */
  body.page-white .hero-copy .hero-lead-strong{
    font-size:.9rem; line-height:1.45;
  }
  /* ---------- KOTAK UNGGULAN (Tenaga AI Asisten Pribadi, Keuangan, dll) ---------- */
  body.page-white .hero-featured__grid{grid-template-columns:1fr; gap:.6rem}
  body.page-white .hero-featured .service-card{padding:.6rem .7rem}

  body.page-white .hero-featured .service-icon{
    width:26px;height:26px;margin-bottom:.35rem;border-radius:8px;font-size:.78rem;
  }
  body.page-white .hero-featured .service-card-top{margin-bottom:.3rem}
  body.page-white .hero-featured .service-category{font-size:.5rem}
  body.page-white .hero-featured .service-count{
    font-size:.54rem;padding:.1rem .4rem;
  }

  /* Judul: tampil penuh seperti versi laptop (tanpa potongan) */
  body.page-white .hero-featured .service-card h3{
    font-size:.9rem; line-height:1.18; margin-bottom:.25em;
  }

  /* Harga: satu baris ringkas */
  body.page-white .hero-featured .hero-featured__price{
    margin:0 0 .3rem; padding:.22rem .45rem;
  }
  body.page-white .hero-featured .hero-featured__price strong{font-size:.8rem}

  /* Deskripsi: tampil penuh seperti versi laptop (tanpa potongan) */
  body.page-white .hero-featured .service-card > p:not(.hero-featured__price){
    font-size:.72rem; line-height:1.4; margin-bottom:0;
  }

  /* Tag peran: tampil semua seperti versi laptop (tanpa potongan) */
  body.page-white .hero-featured .role-tags{
    gap:.25rem; margin:.4rem 0; flex-wrap:wrap;
  }
  body.page-white .hero-featured .role-tags span{
    padding:.14rem .4rem; font-size:.58rem; line-height:1.3;
  }

  /* Tombol: baris 1 = Konsultasikan (penuh), baris 2 = WA + Email (sejajar)
     → dari 3 baris jadi 2 baris, hemat tinggi */
  body.page-white .hero-featured__actions{gap:.35rem; padding-top:.35rem; flex-wrap:wrap}
  body.page-white .hero-featured__actions [data-idx-konsul]{flex:1 1 100%}
  body.page-white .hero-featured__actions .btn-wa,
  body.page-white .hero-featured__actions .btn-gold--alt{flex:1 1 0}
  body.page-white .hero-featured__actions .btn-gold,
  body.page-white .hero-featured__actions .btn-wa{
    padding:.48rem .5rem; font-size:.68rem;
  }

  /* ---------- KATALOG 39 LAYANAN ---------- */
  body.page-white .service-grid{grid-template-columns:1fr; gap:.6rem}
  body.page-white .service-card{padding:.7rem .8rem}
  body.page-white .service-icon{
    width:34px;height:34px;margin-bottom:.45rem;border-radius:11px;font-size:.95rem;
  }
  body.page-white .service-card-top{margin-bottom:.35rem}
  body.page-white .service-card h3{font-size:.95rem}
  /* Deskripsi katalog: tampil penuh seperti versi laptop (tanpa potongan) */
  body.page-white .service-grid .service-card > p{
    font-size:.8rem; line-height:1.45; margin-bottom:.6rem;
  }
  body.page-white .service-grid .role-tags{
    margin:.4rem 0;
  }
  body.page-white .service-grid .role-tags span{
    padding:.14rem .4rem; font-size:.58rem;
  }
  body.page-white .service-grid .btn-gold{
    padding:.55rem .8rem; font-size:.74rem;
  }

  /* ---------- KESELAMATAN: tanpa scroll horizontal, teks tidak meluber ---------- */
  body.page-white .service-card,
  body.page-white .hero-featured .service-card{
    overflow:hidden; max-width:100%;
  }
  body.page-white .service-card h3,
  body.page-white .hero-featured .service-card h3{
    overflow-wrap:break-word; word-break:break-word;
  }
  body.page-white .role-tags span{white-space:normal}
}