/* =========================================================================
   CV MANUNGGAL — shared inner-page stylesheet (matches the Home theme)
   Light editorial · merah/putih/hitam · Space Grotesk + Inter + IBM Plex Mono
   ========================================================================= */
:root{
  --bg:#0B0E13; --bg-2:#12161D; --surface:#161B22;
  --dot:rgba(255,255,255,.045);
  --ink-900:#F2F4F7; --ink-700:#C7CDD6; --ink-500:#9098A4; --ink-400:#6B7480;
  --ink-200:#3A434F; --line:#252C35; --line-2:#1C222A;
  --red:#F24A42; --red-600:#E2231A; --red-050:#2A1311; --red-glow:rgba(242,74,66,.22);
  --wa:#25D366; --wa-dark:#1EBE5A;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --fs-body:clamp(1.08rem,1rem + .3vw,1.2rem);
  --fs-lead:clamp(1.22rem,1.08rem + .6vw,1.48rem);
  --fs-h3:clamp(1.55rem,1.25rem + 1.25vw,2.15rem);
  --fs-h2:clamp(2.15rem,1.55rem + 2.4vw,3.5rem);
  --fs-h1:clamp(2.7rem,1.85rem + 3.4vw,4.6rem);
  --container:1240px; --gutter:clamp(1.25rem,4vw,3rem);
  --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sh-card:0 1px 2px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.55);
  --sh-hover:0 20px 48px rgba(0,0,0,.6);
  --header-h:108px;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;color:var(--ink-700);background-color:var(--bg);background-image:radial-gradient(var(--dot) 1px,transparent 1.5px);background-size:23px 23px;background-position:center;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* bg-lift hanya untuk Home — sembunyikan di halaman dalam (CSS-nya ada di home.css) */
.bg-lift{display:none}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink-900);line-height:1.1;font-weight:700;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.overline{font-family:var(--font-mono);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.lead{font-size:var(--fs-lead);color:var(--ink-500);line-height:1.55}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:.85rem 1.5rem;border-radius:var(--r-pill);cursor:pointer;border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .25s,background .2s,border-color .2s}
.btn--red{background:var(--red);color:#fff;box-shadow:0 10px 26px var(--red-glow)}
.btn--red:hover{background:var(--red-600);box-shadow:0 14px 32px var(--red-glow)}
.btn--ghost{background:transparent;color:var(--ink-900);border-color:var(--ink-200)}
.btn--ghost:hover{border-color:var(--ink-900);background:var(--bg-2)}
.btn--wa{background:var(--wa);color:#06311a;box-shadow:0 10px 26px rgba(37,211,102,.26)}
.btn--wa:hover{background:var(--wa-dark)}
.btn svg{width:19px;height:19px;flex:none}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:100;display:flex;align-items:center;transition:background .3s,box-shadow .3s}
.site-header.is-stuck,.site-header.solid{background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom-color:var(--line);box-shadow:0 4px 20px rgba(14,17,22,.05)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem}
.brand img{height:92px;width:auto}
.nav__list{display:flex;gap:1.5rem;list-style:none}
.nav__link{font-size:.9rem;font-weight:500;color:var(--ink-700);position:relative;padding:.3rem 0;transition:color .2s}
.nav__link::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav__link:hover,.nav__link.is-active{color:var(--ink-900)}

.nav-toggle{display:none;background:none;border:0;color:var(--ink-900);cursor:pointer;padding:.6rem;margin:-.2rem}
/* header transparan di atas hero gelap (sub-page non-solid): nav tetap PUTIH spt Home */
.site-header:not(.solid):not(.is-stuck) .nav__link{color:rgba(255,255,255,.9)}
.site-header:not(.solid):not(.is-stuck) .nav__link:hover,.site-header:not(.solid):not(.is-stuck) .nav__link.is-active{color:#fff}
.site-header:not(.solid):not(.is-stuck) .nav-toggle{color:#fff}

/* page hero */
.page-hero{position:relative;padding-top:calc(var(--header-h) + 5rem);padding-bottom:3.5rem;overflow:hidden;color:#E7EAF1;
  background:
    radial-gradient(55% 78% at 5% 102%,rgba(226,35,26,.32),transparent 60%),
    radial-gradient(46% 70% at 102% 26%,rgba(46,78,150,.34),transparent 58%),
    linear-gradient(162deg,#12161F 0%,#0A0C12 56%,#0B0E16 100%)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(85% 75% at 70% 20%,#000,transparent 80%);mask-image:radial-gradient(85% 75% at 70% 20%,#000,transparent 80%)}
.page-hero__inner{position:relative;z-index:1;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.crumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:rgba(255,255,255,.55);text-transform:uppercase;margin-bottom:1rem}
.crumb a:hover{color:var(--red)}
.page-hero h1{font-size:var(--fs-h1);font-weight:700;margin:.6rem 0 1rem;max-width:18ch;color:#fff}
.page-hero .lead{max-width:60ch;color:rgba(231,234,241,.74)}
.page-hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.page-hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.page-hero .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.page-hero .terms{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.page-hero .term{display:inline-flex;align-items:center;gap:.55rem;font-size:.86rem;font-weight:500;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);padding:.55rem .95rem;border-radius:var(--r-pill);backdrop-filter:blur(6px)}
.page-hero .term svg{width:16px;height:16px;color:var(--red);flex:none}

/* sections */
.section{padding-block:clamp(2.6rem,5.5vh,4.2rem);position:relative}
.section--alt{background-color:var(--bg-2);background-image:radial-gradient(var(--dot) 1px,transparent 1.5px);background-size:23px 23px;background-position:center}
.section + .section{border-top:1px solid var(--line)}
.section--alt + .section,.section + .section--alt{border-top:0}
.section-head{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:3rem}
.section-head__no{font-family:var(--font-mono);font-weight:500;font-size:.95rem;color:var(--red);padding-top:.5rem;white-space:nowrap}
.section-head__main{max-width:62ch}
.section-head h2{font-size:var(--fs-h2);margin:.5rem 0 .7rem}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);transition:transform .35s var(--ease),box-shadow .35s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.svc-card{padding:1.7rem 1.6rem;display:flex;flex-direction:column}
.svc-card__img{display:block;width:calc(100% + 3.2rem);height:172px;object-fit:cover;margin:-1.7rem -1.6rem 1.3rem;border-bottom:1px solid var(--line)}
.svc-card__no{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-300)}
.svc-card h3{font-size:1.18rem;margin:.5rem 0 .5rem}
.svc-card p{font-size:.92rem;color:var(--ink-500);flex:1}
.svc-card__meta{margin-top:1.1rem;font-family:var(--font-mono);font-size:.72rem;color:var(--red);letter-spacing:.03em}
.icard{padding:1.7rem}
.icard__icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--red-050);color:var(--red);margin-bottom:1.1rem}
.icard__icon svg{width:24px;height:24px}
.icard h3{font-size:1.12rem;margin-bottom:.5rem}
.icard p{font-size:.92rem;color:var(--ink-500)}

/* chips / categories */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;color:var(--ink-500);border:1px solid var(--line);border-radius:var(--r-pill);padding:.42rem .9rem;background:#fff}

/* category list cards */
.catlist{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.catlist .card{padding:1.6rem}
.catlist h3{font-size:1.1rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.catlist h3 .n{font-family:var(--font-mono);font-size:.7rem;color:var(--red)}
.catlist p{font-size:.9rem;color:var(--ink-500)}

/* brand wall */
.brandwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.2rem}
.brandwall__chip{min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem 1.4rem;box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s}

.brandwall__chip img{height:52px;width:auto;max-width:78%;object-fit:contain}
.brandwall__name{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:#0E1116;text-align:center;line-height:1.2}

/* panel engineering block */
.panelblk{display:grid;grid-template-columns:1.25fr 1fr;gap:2.2rem;align-items:center;padding:2.2rem;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-card)}
.panelblk h3{font-size:var(--fs-h3);margin:.4rem 0 .6rem}
.panelblk__specs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.panelblk__spec{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-500);border:1px solid var(--line);border-radius:var(--r-pill);padding:.4rem .85rem}
.panelblk ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.panelblk li{display:flex;align-items:center;gap:.7rem;font-size:.95rem;color:var(--ink-700);font-weight:500}
.panelblk li svg{width:20px;height:20px;color:var(--red);flex:none}

/* prose */
.prose{max-width:72ch}
.prose p{margin-bottom:1.1rem;color:var(--ink-700)}
.prose h2{font-size:var(--fs-h3);margin:2rem 0 .8rem}
.prose ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin:1rem 0}
.prose ul li{display:flex;gap:.7rem;align-items:flex-start}
.prose ul li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--red-050);flex:none;margin-top:.18rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2231A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:center}

/* steps / process */
.steps{counter-reset:s;display:flex;flex-direction:column;gap:1rem}
.step{display:flex;gap:1.2rem;align-items:flex-start;padding:1.2rem 1.4rem;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.step__no{font-family:var(--font-mono);font-weight:500;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--red-050);color:var(--red);flex:none}
.step h3{font-size:1.05rem;margin-bottom:.25rem}
.step p{font-size:.92rem;color:var(--ink-500)}

/* faq */
.faq{max-width:840px;display:flex;flex-direction:column;gap:.7rem}
.faq__item{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
.faq__item summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink-900)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary .ic{width:22px;height:22px;flex:none;color:var(--red);transition:transform .3s var(--ease)}
.faq__item[open] summary .ic{transform:rotate(45deg)}
.faq__item .a{padding:0 1.3rem 1.2rem;color:var(--ink-500);font-size:.94rem;line-height:1.65}

/* stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.stat{text-align:center;padding:1.5rem 1rem}
.stat__num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.1rem,4vw,3rem);color:var(--ink-900);line-height:1}
.stat__num .s{color:var(--red)}
.stat dd,.stat__label{margin-top:.5rem;color:var(--ink-500);font-size:.9rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:2.4rem;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:1.4rem}
.contact-row{display:flex;gap:.9rem;align-items:flex-start}
.contact-row__ic{width:42px;height:42px;border-radius:12px;background:var(--red-050);color:var(--red);display:grid;place-items:center;flex:none}
.contact-row__ic svg{width:20px;height:20px}
.contact-row b{display:block;font-family:var(--font-display);font-size:1rem;margin-bottom:.15rem}
.contact-row span,.contact-row a{font-size:.92rem;color:var(--ink-500)}
.contact-row a:hover{color:var(--red)}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:2rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);margin-bottom:.4rem}
.field input,.field textarea{width:100%;font-family:var(--font-body);font-size:.95rem;color:var(--ink-900);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:.8rem .9rem;transition:border-color .2s,background .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red);background:#fff}
.field textarea{min-height:120px;resize:vertical}
.map-ph{height:240px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(135deg,var(--bg-2),#fff);display:grid;place-items:center;text-align:center;gap:.5rem;color:var(--ink-400)}
.map-ph svg{width:34px;height:34px;color:var(--red)}

/* footer */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding-block:3.5rem 2rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:2rem}
.site-footer h5{font-family:var(--font-display);font-size:.95rem;color:var(--ink-900);margin-bottom:1rem}
.site-footer ul{list-style:none}.site-footer li{margin-bottom:.5rem}
.site-footer a{color:var(--ink-500);font-size:.9rem;transition:color .2s}.site-footer a:hover{color:var(--red)}
.social{display:flex;gap:.6rem;margin-top:1rem;list-style:none}
.social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--ink-200);display:grid;place-items:center;color:var(--ink-500)}
.social a:hover{border-color:var(--red);color:var(--red)}.social svg{width:18px;height:18px}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-400)}

/* cta band */
.ctaband{padding-block:1rem 5rem}
.cta{background:var(--ink-900);border-radius:var(--r-xl);padding:clamp(2.5rem,6vw,4.5rem);text-align:center;color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,var(--red-glow),transparent 70%);top:-120px;right:-80px}
.cta .overline{color:var(--red);position:relative}
.cta h2{color:#fff;font-size:var(--fs-h2);margin:.6rem 0 1rem;position:relative}
.cta p{color:#C7CDD6;margin-bottom:1.8rem;position:relative}
.cta .btn{position:relative}

/* blueprint visuals */
.bp{display:block;width:100%;height:auto}
.bp-sheet{fill:rgba(255,255,255,.55);stroke:var(--line);stroke-width:1}
.bp-grid{stroke:#e3e8ef;stroke-width:.5;fill:none}
.bp-line{fill:none;stroke:#1b2330;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.bp-thin{fill:none;stroke:#4a5360;stroke-width:.6}
.bp-dim{fill:none;stroke:#aab2bd;stroke-width:.6}
.bp-red{stroke:var(--red)}
.bp-txt{font-family:var(--font-mono);font-size:9px;fill:#5b6675;letter-spacing:.03em}
/* blueprint terang saat di dalam page-hero gelap */
.page-hero .bp-sheet{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.12)}
.page-hero .bp-grid{stroke:rgba(255,255,255,.05)}
.page-hero .bp-line{stroke:rgba(216,226,238,.92)}
.page-hero .bp-thin{stroke:rgba(150,165,185,.55)}
.page-hero .bp-txt{fill:rgba(184,196,212,.66)}
.bp-txt-r{fill:var(--red)}
.bp-line,.bp-thin{stroke-dasharray:1;stroke-dashoffset:1;animation:bpdraw 1.2s var(--ease) forwards}
@keyframes bpdraw{to{stroke-dashoffset:0}}
.bp-fade{opacity:0;animation:bpfade .7s ease forwards}
@keyframes bpfade{to{opacity:1}}
.bp .d1{animation-delay:.15s}.bp .d2{animation-delay:.5s}.bp .d3{animation-delay:.85s}.bp .d4{animation-delay:1.25s}.bp .d5{animation-delay:1.65s}
@media(prefers-reduced-motion:reduce){.bp-line,.bp-thin{stroke-dashoffset:0;animation:none}.bp-fade{opacity:1;animation:none}}

/* pricing */
.pricing-cat{margin-top:2.6rem}
.pricing-cat__label{display:flex;align-items:center;gap:.8rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);margin-bottom:1.5rem}
.pricing-cat__label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.pricing-cat__label::after{content:"";flex:1;height:1px;background:var(--line)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;display:flex;flex-direction:column;box-shadow:var(--sh-card);transition:transform .35s var(--ease),box-shadow .35s}

.price-card.is-feat{border:2px solid var(--red)}
.price-card__tag{align-self:flex-start;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red);background:var(--red-050);padding:.25rem .6rem;border-radius:var(--r-pill);margin-bottom:.9rem}
.price-card h3{font-size:1.25rem;margin-bottom:.4rem}
.price-card__desc{font-size:.88rem;color:var(--ink-500);margin-bottom:1.2rem;min-height:2.6em}
.price-card__price{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.price-card__amt{font-family:var(--font-display);font-weight:700;font-size:2.1rem;color:var(--ink-900);line-height:1}
.price-card__amt small{font-size:.5em;color:var(--ink-500);font-weight:600}
.price-card__amt.is-konsul{font-size:1.4rem}
.price-card__pre{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);display:block;margin-bottom:.25rem}
.price-card__per{font-size:.82rem;color:var(--ink-400)}
.price-card__feat{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.2rem;flex:1}
.price-card__feat li{display:flex;gap:.6rem;font-size:.9rem;color:var(--ink-700)}
.price-card__feat li svg{width:18px;height:18px;color:var(--red);flex:none;margin-top:.12rem}
.price-card__note{font-family:var(--font-mono);font-size:.72rem;color:var(--red);background:var(--red-050);padding:.55rem .75rem;border-radius:10px;margin-bottom:1.2rem;line-height:1.45}
.price-card .btn{width:100%;justify-content:center;margin-top:auto}
@media(max-width:980px){.price-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.price-grid{grid-template-columns:1fr}}

/* floating WhatsApp button */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:96;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 10px 28px rgba(37,211,102,.45);transition:transform .25s var(--ease),box-shadow .25s}

.wa-float svg{width:30px;height:30px}
100%{transform:scale(1.7);opacity:0}}
@media(max-width:980px){.wa-float{right:16px;bottom:78px;width:52px;height:52px}.wa-float svg{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){}

/* theme toggle */

/* ===== DARK MODE ===== */
body{background:#0B0E13}
.page-hero{background:linear-gradient(180deg,#10151c 0%,#0B0E13 72%)}
.form,.faq__item,.panelblk,.step{background:var(--surface)}
.field input,.field textarea{background:#0E1218;border-color:var(--line);color:var(--ink-900)}
.map-ph{background:linear-gradient(135deg,var(--bg-2),#0E1218)}
.cta{background:#161B22;border:1px solid var(--line)}
.ghostnum{background:#13181f}
.bp-sheet{fill:#e9edf2}
.site-header.is-stuck,.site-header.solid{background:rgba(11,14,19,.85);border-bottom-color:var(--line)}
.site-header.nav-open,.site-header.nav-open .nav{background:#0B0E13;border-bottom-color:var(--line)}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(22px)}
.no-gsap [data-reveal]{opacity:1;transform:none}
.wa-sticky{display:none}

@media(max-width:980px){
  .grid-3,.catlist{grid-template-columns:1fr 1fr}
  .grid-2,.contact-grid,.panelblk{grid-template-columns:1fr;gap:1.4rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .site-header .btn--red{display:none}.nav-toggle{display:block;position:relative;z-index:210}
  .site-header.nav-open .nav-toggle{color:#fff}
  .brand img{height:62px}
  :root{--header-h:84px}
  .nav{position:fixed;inset:0;width:100vw;height:100dvh;background:#0B0E13;
    transform:translateX(100%);transition:transform .4s var(--ease);z-index:200;display:flex;flex-direction:column;justify-content:flex-start;
    padding:calc(var(--header-h) + .6rem) var(--gutter) 2rem;overflow-y:auto}
  .nav__list{flex-direction:column;gap:0;width:100%}
  .nav__link{display:block;font-size:1.35rem;font-family:var(--font-display);font-weight:600;color:#fff;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav__link::after{display:none}
  .site-header.nav-open .nav{transform:translateX(0)}
  .site-header.nav-open{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:transparent!important}
  .nav-backdrop{position:fixed;inset:0;background:rgba(6,8,12,.55);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:190}
  .site-header.nav-open .nav-backdrop{opacity:1;visibility:visible}
  .section-head{flex-direction:column;gap:.4rem}
  .wa-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:.7rem var(--gutter);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  body{padding-bottom:76px}
  .wa-float{display:none}
  .wa-sticky .btn{width:100%;justify-content:center}
}
@media(max-width:600px){.grid-3,.catlist,.stats-grid,.footer-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  *{animation-iteration-count:1!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .card:hover,.price-card:hover,.brandwall__chip:hover,.wa-float:hover{transform:none!important}

}

@media (hover:hover) and (pointer:fine){
  .nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
  .card:hover{transform:translateY(-6px);box-shadow:var(--sh-hover)}
  .card:hover::before{transform:scaleX(1)}
  .brandwall__chip:hover{transform:translateY(-5px);box-shadow:var(--sh-hover)}
  .price-card:hover{transform:translateY(-6px);box-shadow:var(--sh-hover)}
  .wa-float:hover{transform:scale(1.08);box-shadow:0 14px 34px rgba(37,211,102,.55)}
}

/* §1 respons di pointer-down - Apple: scale(.97) 100ms */
.btn:active,.wa-float:active,.nav-toggle:active,.faq__item summary:active{transform:scale(.97);transition:transform 100ms ease-out}
.btn,.wa-float,.nav-toggle{-webkit-tap-highlight-color:transparent}
.site-header.is-stuck::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;pointer-events:none;background:linear-gradient(to bottom,rgba(10,12,18,.55),transparent)}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

@media (prefers-reduced-transparency:reduce){
  .site-header.is-stuck,.site-header.nav-open,.site-header.nav-open .nav,.nav-backdrop,.glass{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-contrast:more){
  :root{--line:#6B7480;--ink-500:#C7CDD6;--ink-400:#9098A4}
  .site-header.is-stuck,.card,.price-card,.brandwall__chip{background:var(--bg)!important;border:1px solid var(--line)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media(prefers-reduced-motion:reduce){.btn:active{transform:scale(.99)}}

/* ==========================================================================
   v4 — SISTEM MATERIAL & TIPOGRAFI APPLE
   Menggantikan tambal-warna v3. Semua nilai di bawah adalah pilihan sadar.
   ========================================================================== */
:root{
  /* §12 TANGGA MATERIAL — berat material menyandi hierarki, bukan warna acak */
  --mat-1:rgba(255,255,255,.040);   /* kartu biasa            */
  --mat-2:rgba(255,255,255,.065);   /* mengambang: chrome     */
  --mat-3:rgba(255,255,255,.095);   /* menonjol / aktif       */
  --edge:rgba(255,255,255,.085);    /* tepi atas: cahaya menangkap material */
  --edge-2:rgba(255,255,255,.14);
  --hair:rgba(255,255,255,.055);    /* garis rambut, bukan border 1px pekat */

  /* Bayangan sadar-konteks (§12): lebih berat di atas konten sibuk */
  --sh-card:0 1px 2px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.40);
  --sh-hover:0 2px 8px rgba(0,0,0,.5),0 22px 60px rgba(0,0,0,.55);
  --sh-media:0 4px 14px rgba(0,0,0,.55),0 28px 70px rgba(0,0,0,.6);

  /* Tinta pada permukaan TERANG — inversi penuh, bukan tambalan */
  --ink-inv-900:#0B0E13; --ink-inv-700:#252B33; --ink-inv-500:#5B6675; --ink-inv-400:#7A8493;

  /* §15 TRACKING SPESIFIK-UKURAN — satu nilai untuk semua ukuran pasti salah di suatu tempat */
  --tr-display:-.045em; --tr-h1:-.032em; --tr-h2:-.024em; --tr-h3:-.015em;
  --tr-body:0em; --tr-small:.006em;
}

/* --- §15 Tipografi: tracking mengetat saat ukuran membesar, leading berbanding terbalik --- */
h1{letter-spacing:var(--tr-h1);line-height:1.02}
h2{letter-spacing:var(--tr-h2);line-height:1.07}
h3{letter-spacing:var(--tr-h3);line-height:1.18}
h1,h2,h3{font-optical-sizing:auto;text-wrap:balance}
p,li{letter-spacing:var(--tr-body);text-wrap:pretty}
.hero__giant{letter-spacing:var(--tr-display)}
/* Teks kecil butuh tracking POSITIF supaya terbaca (§15) */
.overline,.hero__since,.crumb,.ind-cat,.shot__tag,.bento-i .cap,.price-card__pre,.price-card__tag{letter-spacing:var(--tr-small)}
/* §15 hierarki dari bobot+ukuran+leading sebagai satu set — bukan ukuran saja */
strong,b{font-weight:650}

/* --- §12 Permukaan naik: material + tepi atas cerah, bukan kotak putih --- */
.card,.price-card,.ind-card,.statcard,.bento-i,.brandwall__chip,.hero__card,.hero__filter,.faq__item,.panelblk{
  background:var(--mat-1);
  border:1px solid var(--hair);
  border-top-color:var(--edge);
  box-shadow:var(--sh-card);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
/* Permukaan lebih besar terbaca lebih tebal (§12) */
.hero__card,.hero__filter{
  background:var(--mat-2);border-top-color:var(--edge-2);
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  box-shadow:var(--sh-2,var(--sh-hover))}
/* Kartu yang memuat foto: bayangan lebih berat supaya terpisah dari konten sibuk */
.bento-i:has(img),.shot{box-shadow:var(--sh-media);border-color:var(--hair)}

/* --- REGRESI v3 DIPERBAIKI: teks terang di atas kartu putih --- */
/* FAQ dan blok panel murni teks -> jadikan material gelap, bukan slab putih */
.faq__item{background:var(--mat-1)}
.faq__item summary{color:var(--ink-900)}
.faq__item[open]{background:var(--mat-2);border-top-color:var(--edge-2)}
.panelblk{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.panelblk h3{color:var(--ink-900)}
.panelblk li,.panelblk p{color:var(--ink-700)}

/* Permukaan yang MEMANG harus terang karena memuat logo/ilustrasi terang:
   dibalik sepenuhnya (§12 inversi), bukan ditambal. */
.brand-chip{background:#fff;border:1px solid rgba(0,0,0,.06);border-top-color:rgba(255,255,255,.9);
  box-shadow:var(--sh-media);backdrop-filter:none;-webkit-backdrop-filter:none}
.statcard--mid{background:#F2F4F7;border-color:rgba(0,0,0,.08);backdrop-filter:none;-webkit-backdrop-filter:none}
.statcard--mid,.statcard--mid *{color:var(--ink-inv-900)}
.statcard--mid .statcard__lab,.statcard--mid small,.statcard--mid span{color:var(--ink-inv-500)}
.ind-cat{background:var(--mat-2);color:var(--ink-700);border:1px solid var(--hair)}
.hero__select option{color:var(--ink-inv-900);background:#fff}

/* --- §12 Vibrancy: teks di atas material butuh kontras & bobot lebih, bukan abu rata --- */
.hero__card,.hero__filter,.faq__item{--_vib:1}
.hero__card h2,.hero__filter label,.faq__item summary{font-weight:600;letter-spacing:.004em}
.hero__card p,.faq__item p{color:var(--ink-700)}

/* --- CELAH BENTO DIPERBAIKI ---
   Luas total sel dulu 27 di grid 4 kolom. 27 tidak habis dibagi 4, jadi selalu
   tersisa satu lubang; grid-auto-flow:dense hanya menyamarkannya. Kartu statistik
   utama dilebarkan jadi 2 kolom -> luas 28 = tepat 7 baris, nol lubang. */
.bento-card--red{grid-column:span 2}
@media(max-width:860px){.bento-card--red{grid-column:span 2}}

/* --- Hover di atas material: material menebal, bukan sekadar naik --- */
@media (hover:hover) and (pointer:fine){
  .card:hover,.price-card:hover,.ind-card:hover,.statcard:hover,.bento-i:hover,.brandwall__chip:hover{
    background:var(--mat-2);border-top-color:var(--edge-2)}
  .faq__item:hover{background:var(--mat-2)}
}

/* --- §14 Sinyal aksesibilitas disesuaikan dengan token material baru --- */
@media (prefers-reduced-transparency:reduce){
  .card,.price-card,.ind-card,.statcard,.bento-i,.brandwall__chip,.hero__card,.hero__filter,.faq__item,
  .site-header.is-stuck,.site-header.nav-open,.site-header.nav-open .nav,.nav-backdrop{
    background:#12161D!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .brand-chip,.statcard--mid{background:#fff!important}
}
@media (prefers-contrast:more){
  :root{--hair:rgba(255,255,255,.34);--edge:rgba(255,255,255,.42);--edge-2:rgba(255,255,255,.55);
        --ink-500:#C7CDD6;--ink-400:#AEB6C2}
  .card,.price-card,.ind-card,.statcard,.bento-i,.brandwall__chip,.hero__card,.hero__filter,.faq__item,.site-header.is-stuck{
    background:#0E131B!important;border:1px solid var(--hair)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* --- KONTRAS WCAG AA (Langkah 11, terukur bukan ditebak) ---
   Putih di atas --red #F24A42 hanya 3.6:1. Merah brand yang lebih dalam
   #E2231A memberi 4.68:1 — lolos AA tanpa mengubah identitas warnanya.
   --red tetap terang untuk aksen teks di atas gelap (rasio tinggi di sana). */
:root{--ink-400:#7E8794;--btn-red:#E2231A;--btn-red-hover:#C4121B}
.btn--red{background:var(--btn-red)}
.btn--red:hover{background:var(--btn-red-hover);box-shadow:0 14px 32px rgba(226,35,26,.28)}
.bento-card--red{background:var(--btn-red)}

/* ==========================================================================
   v5 — SEKSI TERANG: irama terang/gelap
   Semua komponen sudah memakai token, jadi membalik token DI DALAM satu seksi
   membalik seluruh isinya sekaligus. Tidak ada komponen yang perlu ditulis ulang.
   ========================================================================== */
.section--light{
  --bg:#EDF1F6; --bg-2:#E2E8F1; --surface:#FFFFFF;
  --ink-900:#0B0E13; --ink-700:#242A32; --ink-500:#525C6B; --ink-400:#66707E;
  --ink-200:#C7CDD6; --line:#D5DBE4; --line-2:#E3E8EF;
  --red:#D51A15;                       /* merah lebih dalam supaya kontras di terang */
  --dot:rgba(20,30,50,.06);
  --hair:rgba(11,14,19,.10);
  --edge:rgba(255,255,255,.95);        /* tepi atas terang tetap "cahaya menangkap material" */
  --edge-2:#FFFFFF;
  --mat-1:#FFFFFF; --mat-2:#FFFFFF; --mat-3:#F4F7FA;
  --sh-card:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.08);
  --sh-hover:0 2px 8px rgba(16,24,40,.09),0 20px 48px rgba(16,24,40,.13);
  --sh-media:0 4px 14px rgba(16,24,40,.12),0 26px 60px rgba(16,24,40,.16);
  background-color:var(--bg);
  background-image:radial-gradient(var(--dot) 1px,transparent 1.5px);
  background-size:23px 23px;
  color:var(--ink-700);
  position:relative;
}
.section--light h1,.section--light h2,.section--light h3,.section--light h4{color:var(--ink-900)}
.section--light .overline{color:var(--red)}

/* §12 tepi lembut, bukan potongan keras — material berganti, bukan dinding */
.section--light::before,.section--light::after{
  content:"";position:absolute;left:0;right:0;height:64px;pointer-events:none;z-index:0}
.section--light::before{top:0;background:linear-gradient(to bottom,rgba(10,12,18,.16),transparent)}
.section--light::after{bottom:0;background:linear-gradient(to top,rgba(10,12,18,.16),transparent)}
.section--light > *{position:relative;z-index:1}

/* Kartu di seksi terang: putih dengan garis rambut gelap, bukan material tembus */
.section--light .card,.section--light .ind-card,.section--light .price-card,
.section--light .statcard,.section--light .brandwall__chip{
  background:#fff;border:1px solid var(--hair);border-top-color:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--sh-card)}
.section--light .ind-cat{background:#fff;color:var(--ink-700);border:1px solid var(--hair)}
.section--light .btn--ghost{border-color:var(--hair);color:var(--ink-900)}
.section--light .btn--ghost:hover{background:#fff;border-color:var(--ink-900)}

/* Blueprint di seksi terang: kertas terang, tinta gelap — seperti cetak biru sungguhan */
.section--light .bp-sheet{fill:#F7F9FC}
.section--light .bp-line,.section--light .bp-thin{stroke:#2A323D}
.section--light .ind-bp text{fill:#2A323D}
.section--light .ind-bp .lbl,.section--light .ind-bp [fill="#5b6675"]{fill:#3A4350!important}

@media (hover:hover) and (pointer:fine){
  .section--light .card:hover,.section--light .ind-card:hover,.section--light .price-card:hover,
  .section--light .statcard:hover,.section--light .brandwall__chip:hover{background:#fff;box-shadow:var(--sh-hover)}
}
@media (prefers-contrast:more){
  .section--light{--hair:rgba(11,14,19,.45);--ink-500:#3A4350;--ink-400:#3A4350}
}

/* ==========================================================================
   v5b — IRAMA SELANG-SELING: putih <-> abu terang
   Hero tetap gelap (dramanya di situ), badan halaman jadi terang bergantian,
   penutup kembali gelap. Terang = informasi, gelap = pementasan.
   ========================================================================== */
.section--light,.section--light-2{
  --bg:#FFFFFF; --bg-2:#F4F7FA; --surface:#FFFFFF;
  --ink-900:#0B0E13; --ink-700:#242A32; --ink-500:#4E5765; --ink-400:#606A78;
  --ink-200:#C7CDD6; --line:#DDE3EB; --line-2:#E8EDF3;
  --red:#D51A15;
  --dot:rgba(20,30,50,.055);
  --hair:rgba(11,14,19,.10); --edge:rgba(255,255,255,.95); --edge-2:#FFFFFF;
  --mat-1:#FFFFFF; --mat-2:#FFFFFF; --mat-3:#F4F7FA;
  --sh-card:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.07);
  --sh-hover:0 2px 8px rgba(16,24,40,.08),0 20px 48px rgba(16,24,40,.12);
  --sh-media:0 4px 14px rgba(16,24,40,.11),0 26px 60px rgba(16,24,40,.15);
  color:var(--ink-700); position:relative;
}
.section--light{background-color:#FFFFFF;background-image:none}
.section--light-2{
  background-color:#EEF2F7;
  background-image:radial-gradient(var(--dot) 1px,transparent 1.5px);
  background-size:23px 23px}

.section--light h1,.section--light h2,.section--light h3,.section--light h4,
.section--light-2 h1,.section--light-2 h2,.section--light-2 h3,.section--light-2 h4{color:var(--ink-900)}
.section--light .overline,.section--light-2 .overline{color:var(--red)}

/* Kartu: di atas PUTIH butuh garis rambut; di atas ABU boleh putih polos */
.section--light .card,.section--light .ind-card,.section--light .price-card,.section--light .statcard,
.section--light .brandwall__chip,.section--light .faq__item,
.section--light-2 .card,.section--light-2 .ind-card,.section--light-2 .price-card,
.section--light-2 .statcard,.section--light-2 .brandwall__chip,.section--light-2 .faq__item{
  background:#fff;border:1px solid var(--hair);border-top-color:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--sh-card)}
.section--light .card,.section--light .price-card,.section--light .faq__item{background:#FBFCFE}
.section--light .ind-cat,.section--light-2 .ind-cat{background:#fff;color:var(--ink-700);border:1px solid var(--hair)}
.section--light .btn--ghost,.section--light-2 .btn--ghost{border-color:var(--hair);color:var(--ink-900)}
.section--light .btn--ghost:hover,.section--light-2 .btn--ghost:hover{background:#fff;border-color:var(--ink-900)}
.section--light .brand-chip,.section--light-2 .brand-chip{border-color:var(--hair);box-shadow:var(--sh-card)}
.section--light .faq__item summary,.section--light-2 .faq__item summary{color:var(--ink-900)}

/* Blueprint di terang: kertas terang, tinta gelap */
.section--light .bp-sheet,.section--light-2 .bp-sheet{fill:#F7F9FC}
.section--light .bp-line,.section--light .bp-thin,
.section--light-2 .bp-line,.section--light-2 .bp-thin{stroke:#2A323D}
.section--light .ind-bp text,.section--light-2 .ind-bp text{fill:#2A323D}

/* §12 tepi lembut hanya di batas TERANG<->GELAP, bukan antar seksi terang */
.section--light-2 + .section--light,.section--light + .section--light-2{border-top:1px solid rgba(11,14,19,.06)}
.hero + *,.statband + .section--light,.statband + .section--light-2{position:relative}
.statband + .section--light::before,.statband + .section--light-2::before{
  content:"";position:absolute;left:0;right:0;top:0;height:72px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,12,18,.14),transparent)}

@media (hover:hover) and (pointer:fine){
  .section--light .card:hover,.section--light .ind-card:hover,.section--light .price-card:hover,
  .section--light .statcard:hover,.section--light .brandwall__chip:hover,.section--light .bento-i:hover,
  .section--light-2 .card:hover,.section--light-2 .ind-card:hover,.section--light-2 .price-card:hover,
  .section--light-2 .statcard:hover,.section--light-2 .brandwall__chip:hover,.section--light-2 .bento-i:hover{
    background:#fff;box-shadow:var(--sh-hover)}
}
@media (prefers-contrast:more){
  .section--light,.section--light-2{--hair:rgba(11,14,19,.45);--ink-500:#333B46;--ink-400:#333B46}
}

/* ==========================================================================
   v9 — INVERSI TINTA OTOMATIS PADA PERMUKAAN TERANG
   Dibangkitkan dengan memindai setiap selektor yang menetapkan latar terang
   (luminansi > .62) di site.css dan seluruh CSS inline halaman. Ini menutup
   kelas bug 'teks terang di atas kartu terang' secara menyeluruh, bukan satu
   per satu -- sebab kelas bug itu sudah muncul tiga kali di v3, v4, dan v9.
   ========================================================================== */
.chip,.ecomp,.faq__item,.field input:focus,.field textarea:focus,.form,.ind-card,.ind-cat,.panelblk,.section--light,.section--light .brandwall__chip:hover,.section--light .btn--ghost:hover,.section--light .card,.section--light .faq__item,.section--light .ind-cat,.section--light .price-card,.section--light .statcard:hover,.section--light-2 .btn--ghost:hover,.section--light-2 .ind-cat,.statcard--mid,.step,.term{color:var(--ink-inv-900)}
.chip *,.ecomp *,.faq__item *,.field input:focus *,.field textarea:focus *,.form *,.ind-card *,.ind-cat *,.panelblk *,.section--light *,.section--light .brandwall__chip:hover *,.section--light .btn--ghost:hover *,.section--light .card *,.section--light .faq__item *,.section--light .ind-cat *,.section--light .price-card *,.section--light .statcard:hover *,.section--light-2 .btn--ghost:hover *,.section--light-2 .ind-cat *,.statcard--mid *,.step *,.term *{color:inherit}
.chip p,.chip li,.chip small,.chip span:not(.suffix),.ecomp p,.ecomp li,.ecomp small,.ecomp span:not(.suffix),.faq__item p,.faq__item li,.faq__item small,.faq__item span:not(.suffix),.field input:focus p,.field input:focus li,.field input:focus small,.field input:focus span:not(.suffix),.field textarea:focus p,.field textarea:focus li,.field textarea:focus small,.field textarea:focus span:not(.suffix),.form p,.form li,.form small,.form span:not(.suffix),.ind-card p,.ind-card li,.ind-card small,.ind-card span:not(.suffix),.ind-cat p,.ind-cat li,.ind-cat small,.ind-cat span:not(.suffix),.panelblk p,.panelblk li,.panelblk small,.panelblk span:not(.suffix),.section--light p,.section--light li,.section--light small,.section--light span:not(.suffix),.section--light .brandwall__chip:hover p,.section--light .brandwall__chip:hover li,.section--light .brandwall__chip:hover small,.section--light .brandwall__chip:hover span:not(.suffix),.section--light .btn--ghost:hover p,.section--light .btn--ghost:hover li,.section--light .btn--ghost:hover small,.section--light .btn--ghost:hover span:not(.suffix),.section--light .card p,.section--light .card li,.section--light .card small,.section--light .card span:not(.suffix),.section--light .faq__item p,.section--light .faq__item li,.section--light .faq__item small,.section--light .faq__item span:not(.suffix),.section--light .ind-cat p,.section--light .ind-cat li,.section--light .ind-cat small,.section--light .ind-cat span:not(.suffix),.section--light .price-card p,.section--light .price-card li,.section--light .price-card small,.section--light .price-card span:not(.suffix),.section--light .statcard:hover p,.section--light .statcard:hover li,.section--light .statcard:hover small,.section--light .statcard:hover span:not(.suffix),.section--light-2 .btn--ghost:hover p,.section--light-2 .btn--ghost:hover li,.section--light-2 .btn--ghost:hover small,.section--light-2 .btn--ghost:hover span:not(.suffix),.section--light-2 .ind-cat p,.section--light-2 .ind-cat li,.section--light-2 .ind-cat small,.section--light-2 .ind-cat span:not(.suffix),.statcard--mid p,.statcard--mid li,.statcard--mid small,.statcard--mid span:not(.suffix),.step p,.step li,.step small,.step span:not(.suffix),.term p,.term li,.term small,.term span:not(.suffix){color:var(--ink-inv-700)}
.chip h1,.chip h2,.chip h3,.chip h4,.chip b,.chip strong,.ecomp h1,.ecomp h2,.ecomp h3,.ecomp h4,.ecomp b,.ecomp strong,.faq__item h1,.faq__item h2,.faq__item h3,.faq__item h4,.faq__item b,.faq__item strong,.field input:focus h1,.field input:focus h2,.field input:focus h3,.field input:focus h4,.field input:focus b,.field input:focus strong,.field textarea:focus h1,.field textarea:focus h2,.field textarea:focus h3,.field textarea:focus h4,.field textarea:focus b,.field textarea:focus strong,.form h1,.form h2,.form h3,.form h4,.form b,.form strong,.ind-card h1,.ind-card h2,.ind-card h3,.ind-card h4,.ind-card b,.ind-card strong,.ind-cat h1,.ind-cat h2,.ind-cat h3,.ind-cat h4,.ind-cat b,.ind-cat strong,.panelblk h1,.panelblk h2,.panelblk h3,.panelblk h4,.panelblk b,.panelblk strong,.section--light h1,.section--light h2,.section--light h3,.section--light h4,.section--light b,.section--light strong,.section--light .brandwall__chip:hover h1,.section--light .brandwall__chip:hover h2,.section--light .brandwall__chip:hover h3,.section--light .brandwall__chip:hover h4,.section--light .brandwall__chip:hover b,.section--light .brandwall__chip:hover strong,.section--light .btn--ghost:hover h1,.section--light .btn--ghost:hover h2,.section--light .btn--ghost:hover h3,.section--light .btn--ghost:hover h4,.section--light .btn--ghost:hover b,.section--light .btn--ghost:hover strong,.section--light .card h1,.section--light .card h2,.section--light .card h3,.section--light .card h4,.section--light .card b,.section--light .card strong,.section--light .faq__item h1,.section--light .faq__item h2,.section--light .faq__item h3,.section--light .faq__item h4,.section--light .faq__item b,.section--light .faq__item strong,.section--light .ind-cat h1,.section--light .ind-cat h2,.section--light .ind-cat h3,.section--light .ind-cat h4,.section--light .ind-cat b,.section--light .ind-cat strong,.section--light .price-card h1,.section--light .price-card h2,.section--light .price-card h3,.section--light .price-card h4,.section--light .price-card b,.section--light .price-card strong,.section--light .statcard:hover h1,.section--light .statcard:hover h2,.section--light .statcard:hover h3,.section--light .statcard:hover h4,.section--light .statcard:hover b,.section--light .statcard:hover strong,.section--light-2 .btn--ghost:hover h1,.section--light-2 .btn--ghost:hover h2,.section--light-2 .btn--ghost:hover h3,.section--light-2 .btn--ghost:hover h4,.section--light-2 .btn--ghost:hover b,.section--light-2 .btn--ghost:hover strong,.section--light-2 .ind-cat h1,.section--light-2 .ind-cat h2,.section--light-2 .ind-cat h3,.section--light-2 .ind-cat h4,.section--light-2 .ind-cat b,.section--light-2 .ind-cat strong,.statcard--mid h1,.statcard--mid h2,.statcard--mid h3,.statcard--mid h4,.statcard--mid b,.statcard--mid strong,.step h1,.step h2,.step h3,.step h4,.step b,.step strong,.term h1,.term h2,.term h3,.term h4,.term b,.term strong{color:var(--ink-inv-900)}

/* ==========================================================================
   v9 — DUA PERBAIKAN KETERBACAAN YANG TERSISA
   1) .ghostnum memakai var(--ink-900) sebagai LATAR. Token itu dulu tinta gelap;
      setelah palet gelap dipromosikan ia jadi tinta TERANG -- jadi kartunya
      berubah putih sementara teksnya tetap putih. Latar dipakukan eksplisit.
   2) .brandwall__chip terseret sapuan material v4 menjadi kartu gelap, padahal
      labelnya #0E1116 (gelap) -> rasio 1,02. Dinding logo harus TERANG: logo
      merek adalah PNG gelap-di-atas-putih, jadi chip terang membuatnya menyatu
      alih-alih tampak seperti stiker yang ditempel.
   ========================================================================== */
.ghostnum{background:#13181F!important;color:#fff!important}
.ghostnum *{color:#fff}
.ghostnum .ghost{color:rgba(255,255,255,.10)}

.brandwall__chip{
  background:#fff!important;
  border:1px solid rgba(11,14,19,.10)!important;
  border-top-color:#fff!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 1px 2px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.30)!important;
  border-radius:18px}
.brandwall__chip img{height:44px;max-width:72%;object-fit:contain;filter:none}
.brandwall__name{color:#141A22!important;font-size:.86rem;letter-spacing:.004em}
@media (hover:hover) and (pointer:fine){
  .brandwall__chip:hover{background:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.4),0 22px 52px rgba(0,0,0,.42)!important}
}
@media (prefers-contrast:more){.brandwall__chip{border-color:rgba(11,14,19,.5)!important}}

/* v9: .panelblk sudah dibuat transparan di v4, jadi ia TIDAK boleh ikut
   inversi tinta -- ia duduk di atas latar gelap. Inversi otomatis memindainya
   dari aturan lama background:#fff dan salah menghitamkan teksnya. */
.panelblk,.panelblk *{color:var(--ink-700)}
.panelblk h1,.panelblk h2,.panelblk h3,.panelblk h4,.panelblk b,.panelblk strong{color:var(--ink-900)}
.panelblk .lead,.panelblk p,.panelblk li{color:var(--ink-700)}
.panelblk__spec,.panelblk .panelblk__spec{color:var(--ink-500)}

/* v9: chip spesifikasi panel -- latar & tinta dipakukan berpasangan supaya
   tidak bisa lagi terpisah saat token berubah peran. */
.panelblk__spec{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.14)!important;
  color:#D6DCE5!important;-webkit-backdrop-filter:none;backdrop-filter:none}

/* v9: .step juga sudah ditimpa jadi var(--surface) gelap -- keluarkan dari
   inversi tinta, sama seperti .panelblk. Pola bug yang sama: aturan latar lama
   #fff masih ada di berkas, jadi pemindai menganggapnya permukaan terang. */
.step,.step *{color:var(--ink-700)}
.step h1,.step h2,.step h3,.step h4,.step b,.step strong{color:var(--ink-900)}
.step p,.step li,.step small{color:var(--ink-700)}

.sedge--bot{height:84px}}

/* ==========================================================================
   v12 — PERBAIKAN WARNA YANG TERBAWA PEMBALIKAN PALET
   --red-050 dulu merah SANGAT MUDA (#FDECEB) untuk latar chip. Setelah palet
   gelap dipromosikan ia jadi #2A1311 (merah sangat gelap) -- jadi nomor merah
   di atasnya nyaris tak terlihat. Pasangan latar+tinta dipakukan eksplisit.
   ========================================================================== */
.step__no{background:rgba(242,74,66,.16)!important;color:#FF7A72!important;
  border:1px solid rgba(242,74,66,.30)!important;font-weight:600}
.process-step__no{color:#FF7A72}
.price-card__tag,.ind-spec,.shot__tag{color:#FF8078}
.price-card__tag{background:rgba(242,74,66,.14);border:1px solid rgba(242,74,66,.26)}

/* Kartu CTA di bento: teksnya putih (inline style), jadi kartunya WAJIB gelap.
   Di seksi terang ia sempat jadi putih -> teks putih di atas putih, hilang. */
.bento-card:has(.bento-cta),.bento-i:has(.bento-cta){
  background:#12161D!important;border-color:rgba(255,255,255,.10)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.bento-card:has(.bento-cta) *,.bento-i:has(.bento-cta) *{color:#fff!important}
.bento-cta{color:#fff!important;display:inline-flex;align-items:center;gap:.5rem}

/* v12 — .panelblk__spec harus sadar konteks.
   Di v9 ia dipakukan untuk latar GELAP. Di beranda ia berada di dalam
   .section--light (putih), jadi tinta terangnya jadi tak terbaca (1,38).
   Pasangan latar+tinta kini ditentukan per konteks, bukan satu nilai global. */
.section--light .panelblk__spec,.section--light-2 .panelblk__spec{
  background:rgba(11,14,19,.05)!important;border:1px solid rgba(11,14,19,.14)!important;
  color:#3A4350!important}
.section--light .panelblk,.section--light-2 .panelblk{color:var(--ink-700)}
.section--light .panelblk h1,.section--light .panelblk h2,.section--light .panelblk h3,
.section--light-2 .panelblk h1,.section--light-2 .panelblk h2,.section--light-2 .panelblk h3{color:var(--ink-900)}
.section--light .panelblk p,.section--light .panelblk li,.section--light .panelblk .lead,
.section--light-2 .panelblk p,.section--light-2 .panelblk li,.section--light-2 .panelblk .lead{color:var(--ink-700)}

/* v12 — kartu bento yang MEMANG gelap harus tetap gelap di seksi terang.
   Aturan "kartu putih di seksi terang" (v5) menimpanya, sementara teksnya tetap
   putih -> rasio 1,00. Varian --dark dan --red dikunci beserta tintanya. */
.section--light .bento-card--dark,.section--light-2 .bento-card--dark,
.bento-i.bento-card--dark{background:#12161D!important;border-color:rgba(255,255,255,.10)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.bento-card--dark,.bento-card--dark *{color:#fff!important}
.bento-card--dark .lead,.bento-card--dark small,.bento-card--dark .bento-card__lab{color:rgba(255,255,255,.72)!important}
.section--light .bento-card--red,.section--light-2 .bento-card--red,
.bento-i.bento-card--red{background:var(--btn-red,#E2231A)!important;border-color:rgba(255,255,255,.16)!important}
.bento-card--red,.bento-card--red *{color:#fff!important}

/* ==========================================================================
   v14 — SKALA TIPOGRAFI DIPASANG
   Token --fs-h1/h2/h3/body sudah ada di :root sejak awal tapi TIDAK PERNAH
   diterapkan ke elemennya. Akibatnya seluruh judul merender 16px -- sama besar
   dengan teks isi, sehingga halaman terasa datar tanpa jenjang.
   §15: hierarki dibangun dari ukuran + bobot + leading sebagai satu set.
   ========================================================================== */
body{font-size:var(--fs-body)}
h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:var(--tr-h1)}
h2{font-size:var(--fs-h2);line-height:1.07;letter-spacing:var(--tr-h2)}
h3{font-size:var(--fs-h3);line-height:1.18;letter-spacing:var(--tr-h3)}
.lead{font-size:var(--fs-lead);line-height:1.55}

/* Komponen yang memang butuh ukuran sendiri tetap menang (kelas > elemen).
   Ditegaskan di sini supaya jelas ini pilihan, bukan kecelakaan. */
.hero__giant{font-size:clamp(3.8rem,16.5vw,14rem);line-height:.8;letter-spacing:var(--tr-display)}
.card h3,.divisi-card h3,.price-card h3,.ind-card h3,.inst-card h3,.bento-card h3{
  font-size:1.12rem;line-height:1.25;letter-spacing:-.014em}
.spek__ch h3{font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.14}
.faq__item summary{font-size:1rem}

/* ==========================================================================
   v15 — TARGET SENTUH (§10)
   Terukur di 390px: .hero__select hanya 23,8px tinggi -- padahal itu kendali
   utama pencari prospek di situs ini. Apple menaruh tap target di ~44px dan
   menambah hysteresis di sekitarnya. Diperbesar HANYA untuk penunjuk kasar,
   supaya tata letak desktop tidak ikut melar.
   ========================================================================== */
@media (pointer:coarse){
  .hero__select,.hero__input{min-height:44px;padding-top:.5rem;padding-bottom:.5rem}
  .hero__filter-tab{min-height:44px;display:inline-flex;align-items:center}
  .bento-cta,.wa-sticky a,.social a{min-height:44px;display:inline-flex;align-items:center}
  .social a{min-width:44px;justify-content:center}
  .faq__item summary{min-height:52px}
  .nav-toggle{min-width:46px;min-height:46px}
  /* hysteresis: area sentuh melebar tanpa menggeser tata letak */
  .btn::after,.hero__filter-tab::after{content:"";position:absolute;inset:-6px;border-radius:inherit}
  .btn,.hero__filter-tab{position:relative}
}

/* ==========================================================================
   v16 — PERBAIKAN TAMPILAN HP
   Gejala di HP asli: seluruh halaman "mengecil paksa" dan menu off-canvas
   ikut terlihat menggantung di kanan dengan teks terpotong.
   Terukur di 390px: clientWidth 390 tapi scrollWidth 489 -> overflow 99px NYATA.
   Sebabnya `body{overflow-x:hidden}` TIDAK memotong keturunan position:fixed,
   dan `html` sendiri `overflow-x: visible`. Dua elemen fixed melewati batas:
   .bg-lift (lebar 62vw) dan .nav off-canvas (translateX(100%)).
   Karena dokumen lebih lebar dari layar, Safari melebarkan layout viewport dan
   mengecilkan semuanya -- lalu menu yang seharusnya di luar layar jadi terlihat.
   ========================================================================== */
html{overflow-x:clip}                 /* clip, BUKAN hidden: tidak membuat scroll container,
                                          tapi memotong kontribusi overflow keturunan fixed */
body{overflow-x:clip}

/* .bg-lift dikunci agar tidak pernah melewati tepi kanan */
.bg-lift{right:0;max-width:min(440px,46vw)}
@media(max-width:760px){
  .bg-lift{width:46vw;max-width:46vw;opacity:.42}
}


/* Bar WhatsApp lengket menutupi akhir konten -> beri ruang di bawah.
   Tinggi bar + safe-area iPhone. */
@media(max-width:980px){
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .wa-sticky{padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px))}
}

/* Hero di HP: blueprint memakan lebih dari separuh layar sehingga teks terdesak.
   Dikecilkan supaya judul dan paragraf punya ruang baca. */
@media(max-width:760px){
  .hero__stage{height:32vh;min-height:210px;margin:.8rem 0}
  .hero__intro{font-size:.8rem;line-height:1.7;max-width:none}
  .hero__deck{font-size:clamp(1.05rem,4.4vw,1.5rem)}
  .hero{padding-bottom:1.5rem}
}

/* v16 — menu mobile: HANYA menambahkan pointer-events.
   Aturan transform asli situs DIBIARKAN UTUH -- ia tidak pernah terbukti rusak.
   Dugaan saya sebelumnya keliru: transisi CSS tidak pernah maju di pane
   pratinjau ini (document.hidden=true, rAF mati), jadi setiap pengukuran
   "menu tidak masuk layar" adalah artefak alat, bukan cacat situs.
   Yang ditambahkan hanya ini: menu tertutup tidak boleh menangkap sentuhan. */
@media(max-width:980px){
  .nav{pointer-events:none}
  .site-header.nav-open .nav{pointer-events:auto}
}

/* ==========================================================================
   v16 — CAPTION FOTO HARUS PUTIH, APA PUN SEKSINYA
   Galeri panel duduk di .section--light (putih), jadi aturan inversi tinta
   otomatis (v9) ikut menghitamkan <b> dan <span> di dalam figcaption --
   padahal caption itu berada DI ATAS gradien gelap pada foto.
   Hasilnya teks gelap di atas gelap: rasio 1,00. Dikunci putih di sini.
   Kelas bug yang sama juga mengenai caption bento, jadi ikut dikunci.
   ========================================================================== */
.pgal-i figcaption,.pgal-i figcaption *,
.bento-i .cap,.bento-i .cap *,
.shot__cap,.shot__cap *{color:#fff!important}
.pgal-tag,.bento-i .cap .k{color:rgba(255,255,255,.78)!important}
.pgal-i figcaption b,.bento-i .cap b{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* --- v20: bilah atas TIDAK PERNAH putih ---------------------------------
   Audler: "kemudian scrolling ada yang berubah di taskbar no 2 menjadi warna
   putih." Aturan `.site-header.is-stuck{background:rgba(255,255,255,.85)}`
   adalah sisa dari palet TERANG yang dipakai situs ini sebelum jadi gelap.
   Aturan gelap penggantinya memang ada, tapi ia hanya menang kalau tidak ada
   blok media (prefers-contrast / prefers-reduced-transparency) yang ikut
   menimpanya dengan !important. Dikunci di sini supaya tidak ada jalur apa pun
   yang bisa mengembalikannya jadi putih. */
.site-header.is-stuck,.site-header.solid{
  background:rgba(11,14,19,.88)!important;
  border-bottom:1px solid rgba(150,170,200,.14)!important;
  box-shadow:0 6px 18px -12px rgba(0,0,0,.7)!important}
.site-header.is-stuck .nav__link,.site-header.solid .nav__link{color:rgba(255,255,255,.86)}
.site-header.is-stuck .nav__link:hover,.site-header.solid .nav__link:hover{color:#fff}
.site-header.is-stuck .nav-toggle,.site-header.solid .nav-toggle{color:#fff}

/* ==========================================================================
   v21 — BILAH ATAS: TRANSPARAN DI LAYAR PEMBUKA, PUTIH SETELAH LEWAT
   Audric: "pas baru buka website itu seperti ini, tapi ketika sudah masuk
   melewati section layar awal baru berubah menjadi putih."

   Bugnya dulu bukan pada warnanya, melainkan pada AMBANG-nya: kelas .is-stuck
   dipasang setelah digulir 20px. Di antara 20px itu dan ujung hero, bilahnya
   sudah berwarna; dan di setiap jeda sebelum kelasnya terpasang, ia transparan
   di atas isi TERANG -- itulah tabrakan logo yang difoto Audric dua kali.

   Ambangnya sekarang diikat ke hero itu sendiri lewat IntersectionObserver:
   selama hero masih terlihat, bilahnya transparan -- dan hero selalu gelap,
   jadi tidak ada latar terang yang bisa ditabrak. Begitu hero habis, bilahnya
   jadi putih pekat. Nol pekerjaan per frame.
   ========================================================================== */
/* Keadaan pembuka: menumpang di atas hero gelap */
/* (permukaan bilah dipindah ke ::before, lihat blok v21b) */
.site-header:not(.is-stuck):not(.solid):not(.nav-open) .nav__link{color:rgba(255,255,255,.88)!important}
.site-header:not(.is-stuck):not(.solid):not(.nav-open) .nav__link:hover{color:#fff!important}
.site-header:not(.is-stuck):not(.solid):not(.nav-open) .nav-toggle{color:#fff!important}

/* Setelah hero lewat -- dan di seluruh halaman dalam, yang isinya mulai dari
   atas sehingga tidak pernah punya layar pembuka gelap untuk ditumpangi. */
.site-header.is-stuck::after{display:none}

@media (min-width:981px){
  .site-header.is-stuck .nav__link,.site-header.solid .nav__link{color:#2A323D!important}
  .site-header.is-stuck .nav__link:hover,.site-header.solid .nav__link:hover,
  .site-header.is-stuck .nav__link.is-active{color:#0E1116!important}
}
.site-header.is-stuck .nav-toggle,.site-header.solid .nav-toggle{color:#1A2029!important}

/* Panel off-canvas HP selalu gelap, jadi tintanya selalu terang -- tanpa
   syarat ini, tinta gelap bilah ikut terbawa dan terukur 1,49:1. */
@media (max-width:980px){
  .site-header .nav__link,.site-header.nav-open .nav__link{color:rgba(255,255,255,.92)!important}
  .site-header.nav-open .nav-toggle{color:#FFFFFF!important}
}
.site-header .brand{color:var(--red)}

/* ==========================================================================
   v21b — PERALIHAN BILAH ATAS DIBUAT MULUS
   Audric: "perubahan taskbarnya kurang seamless."

   Sebabnya bukan durasi. Sebabnya bilah itu BERGANTI WARNA, bukan DATANG.
   Latar melompat dari transparan ke putih pekat dalam satu langkah, sementara
   warna teks berpindah di durasi yang lain (0,2s vs 0,3s) dan garis bawahnya
   muncul seketika tanpa transisi sama sekali. Tiga hal berubah, tiga jadwal
   berbeda -- mata membaca itu sebagai kedipan, bukan perpindahan.

   §12 "Materialize, don't just fade": permukaan kaca harus terbaca sebagai
   material yang TIBA, bukan sekadar opacity yang naik. Jadi permukaan putihnya
   dipisah ke lapisan sendiri (::before) yang turun dari atas sambil memudar
   masuk, sementara logo dan tautan tidak ikut bergerak sedikit pun.
   §14: perpindahan terang/gelap diredakan, tidak dilompati.

   Semua properti yang berubah kini memakai SATU durasi dan SATU kurva.
   ========================================================================== */
.site-header{background:transparent!important;border-bottom:0!important;
  box-shadow:none!important;position:fixed}
.site-header::before{content:"";position:absolute;inset:0;z-index:0;
  background:#FFFFFF;
  border-bottom:1px solid rgba(16,20,28,.10);
  box-shadow:0 6px 20px -14px rgba(10,14,22,.5);
  /* Geser pendek saja (-14px), bukan setinggi bilahnya. translateY(-100%)
     berarti 108px perjalanan -- itu terbaca sebagai sesuatu yang TERBANG masuk,
     bukan permukaan yang mengendap. Opacity yang mengerjakan sebagian besar
     pekerjaan; geseran kecil ini cuma memberi arah. */
  opacity:0;transform:translateY(-14px);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
  pointer-events:none}
.site-header.is-stuck::before,.site-header.solid::before{opacity:1;transform:none}
/* Isi bilah duduk DI ATAS permukaan itu dan tidak ikut bergerak. */
.site-header > *{position:relative;z-index:1}

/* Satu jadwal untuk semua yang ikut berubah warna. */
.site-header .nav__link,.site-header .nav-toggle,.site-header .brand{
  transition:color .42s var(--ease),transform 140ms var(--ease),opacity .42s var(--ease)}

/* ==========================================================================
   v21c — LAPISAN PERMANEN SEUKURAN LAYAR DIBERESKAN
   Terukur setelah arus berjalan dihentikan, tiga hal ini masih menyisa dan
   ketiganya hidup sepanjang waktu meski tidak pernah terlihat:

   1. `.nav-backdrop` memakai `blur(20px) saturate(1.8)` menutup 390x844 --
      selebar layar penuh, ADA TERUS di DOM, padahal hanya berguna selama menu
      terbuka. Blur seluas layar adalah lapisan komposit termahal yang bisa
      dimiliki sebuah halaman.
   2. `.nav` (panel off-canvas) juga 390x844 dan hanya digeser keluar layar
      dengan transform -- artinya lapisannya tetap dirasterisasi.
   3. `.marquee` memakai mask gradien; mask memaksa langkah komposit tambahan.
      Diganti dua lapis gradien biasa yang cuma dicat, bukan dikomposit.
   ========================================================================== */
.nav-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:rgba(6,9,14,.62)}
.site-header.nav-open .nav-backdrop{
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

@media (max-width:980px){
  /* visibility membuat peramban boleh melepas lapisannya saat tertutup;
     transform saja tidak cukup. Ditunda supaya transisi keluar tetap terlihat. */
  .nav{visibility:hidden;transition:transform .32s var(--ease),visibility 0s linear .32s}
  .site-header.nav-open .nav{visibility:visible;transition:transform .32s var(--ease),visibility 0s}
}

.marquee{-webkit-mask-image:none!important;mask-image:none!important;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:9%;
  z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.section--light .marquee::before,.brands .marquee::before{
  background:linear-gradient(90deg,var(--bg),transparent)}