/* ============================================================
   ALLIR — Homepage mockup
   Palet & bahasa visual diambil dari halaman About Us / FAQ /
   Our Store yang sudah disetujui. Struktur konten mengikuti
   Sheet7 pada "Allir Digmar Worksheet".
   ============================================================ */

:root{
  --navy:#0B2A63;
  --navy-deep:#07204D;
  --blue:#0059CC;
  --blue-lit:#1872D8;
  --blue-050:#F5F9FE;
  --blue-100:#E9F2FD;
  --blue-200:#D8EAFC;
  --line:#E4E9F0;
  --ink:#14213D;
  --slate:#5D6B84;
  --slate-lt:#8494AB;
  --wa:#1FAF5A;
  --white:#fff;

  --shadow-sm:0 1px 2px rgba(11,42,99,.06), 0 2px 8px rgba(11,42,99,.05);
  --shadow-md:0 4px 12px rgba(11,42,99,.07), 0 12px 32px rgba(11,42,99,.07);
  --shadow-lg:0 10px 24px rgba(11,42,99,.09), 0 28px 64px rgba(11,42,99,.10);

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --wrap:1180px;
  --gut:clamp(20px,5vw,40px);
  --sec-y:clamp(64px,8vw,112px);

  --f-display:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  color:var(--slate);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--navy);
  line-height:1.18;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}

:focus-visible{
  outline:3px solid var(--blue-lit);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* Terbaca pembaca layar dan mesin pencari, tidak tampil di layar. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

/* ---------- Photo treatment: menyatukan foto lapangan ---------- */
.ph{
  filter:saturate(.9) contrast(1.05) brightness(1.01);
  width:100%;height:100%;object-fit:cover;
}

/* ---------- Eyebrow / label ---------- */
.eyebrow{
  display:inline-block;
  font-family:var(--f-body);
  font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue);
}

.sec-head{max-width:640px;margin-inline:auto;text-align:center;margin-bottom:clamp(36px,5vw,56px)}
.sec-head h2{font-size:clamp(28px,4.2vw,42px);font-weight:800;margin:12px 0 0}
.sec-head p{margin:14px 0 0;font-size:17px;color:var(--slate)}
.sec-head .rule{width:56px;height:4px;border-radius:2px;background:var(--blue);margin:20px auto 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-display);font-weight:700;font-size:15px;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 6px 18px rgba(31,175,90,.28)}
.btn-wa:hover{background:#189A4D;transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,175,90,.34)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(0,89,204,.26)}
.btn-primary:hover{background:#0049A8;transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ============================ HEADER ============================ */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:32px;height:76px}

.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo-mark{width:26px;height:32px;flex:none}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-word{
  font-family:var(--f-display);font-weight:800;font-size:27px;
  color:var(--blue);letter-spacing:-.045em;font-style:italic;
}
.logo-tag{font-size:9.5px;font-weight:600;color:var(--slate-lt);letter-spacing:.02em;margin-top:3px}

.nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav a{
  font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink);
  padding:6px 0;position:relative;transition:color .18s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px;
  background:var(--blue);transform:scaleX(0);transition:transform .22s ease;
}
.nav a:hover{color:var(--blue)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--blue)}
.nav .has-sub::before{
  content:"";position:absolute;right:-14px;top:50%;width:6px;height:6px;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.6;
}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px}
.nav-toggle span+span{margin-top:4px}

@media (max-width:1000px){
  .nav{
    position:absolute;top:76px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:8px var(--gut) 20px;box-shadow:var(--shadow-md);
  }
  .nav[hidden]{display:none}
  .nav a{width:100%;padding:13px 0;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .has-sub::before{right:4px}
  .nav-toggle{display:block;margin-left:auto}
}

/* ============================ HERO ============================ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 82% -8%, #DCEBFB 0%, rgba(220,235,251,0) 62%),
    linear-gradient(178deg,#F7FBFF 0%,#EAF3FD 100%);
}
.hero-in{
  display:grid;grid-template-columns:1.14fr .86fr;gap:0;align-items:stretch;
}
/* Kolom teks tetap lurus dengan grid isi situs, foto lepas sampai tepi layar. */
.hero-copy{
  align-self:center;
  padding-block:clamp(52px,7vw,96px) clamp(64px,8vw,112px);
  padding-inline:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) clamp(22px,3vw,52px);
}

.hero h1{font-size:clamp(36px,5.6vw,60px);font-weight:800;margin:0}
.hero h1 .kw{
  display:block;font-family:var(--f-body);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  margin-bottom:18px;
}
.hero h1 .lead-line{display:block;color:var(--navy)}
/* Garis sorot menempel pada kata-katanya, bukan pada lebar bloknya —
   jadi kalau teksnya pindah baris, garisnya ikut berhenti di ujung kata. */
.hero h1 .accent,
.hero-v3 h1 .accent{
  color:var(--blue);
  background-image:linear-gradient(#A9D0F7,#A9D0F7);
  background-repeat:no-repeat;
  background-position:0 91%;
  background-size:0 .1em;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
  animation:underline .95s cubic-bezier(.22,.61,.36,1) .8s forwards;
}
.hero-sub{font-size:clamp(16px,1.9vw,18.5px);color:var(--slate);margin:22px 0 0;max-width:47ch}

.hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin:26px 0 0;padding:0;list-style:none}
.hero-chips li{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.85);border:1px solid #CFE2F8;
  padding:7px 13px 7px 10px;border-radius:999px;
  font-size:13.2px;font-weight:600;color:var(--navy);
  font-family:var(--f-display);white-space:nowrap;
}
.hero-chips svg{width:14px;height:14px;color:var(--blue);flex:none}
/* Di layar lebar kolom teks tidak muat 4 chip sebaris — disusun 2x2 supaya rapi. */
@media (min-width:901px){
  .hero-chips{display:grid;grid-template-columns:max-content max-content;justify-content:start;justify-items:start;gap:8px 9px}
}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{
  display:flex;align-items:center;gap:8px;margin:22px 0 0;
  font-size:13.5px;color:var(--slate-lt);
}
.hero-note svg{width:15px;height:15px;color:var(--blue-lit);flex:none}

/* Hero media */
.hero-media{position:relative;align-self:stretch;min-height:clamp(360px,46vw,620px)}
.hero-frame{position:absolute;inset:0;overflow:hidden}
.hero-frame .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-frame::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(233,242,253,.92) 0%,rgba(233,242,253,.35) 16%,rgba(233,242,253,0) 38%),
    linear-gradient(196deg,rgba(11,42,99,0) 52%,rgba(7,32,77,.34) 100%);
}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;color:#fff}
.hero-wave svg{display:block;width:100%;height:auto}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .hero-copy{
    padding-inline:var(--gut);
    padding-block:clamp(32px,6vw,48px) clamp(52px,9vw,76px);
  }
  .hero-media{order:-1;min-height:0;aspect-ratio:16/11}
  .hero-frame::after{
    background:linear-gradient(180deg,rgba(11,42,99,0) 55%,rgba(7,32,77,.34) 100%);
  }
}
/* ============================ LAYANAN ============================ */
.sec{padding-block:var(--sec-y)}
.sec-tint{background:var(--blue-050)}

/* Flex, bukan grid: baris terakhir yang tidak penuh ikut ke tengah. */
.svc-grid{
  --g:clamp(16px,2vw,22px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g);
}
.svc{flex:0 1 calc((100% - 4 * var(--g)) / 5);min-width:0}
@media (max-width:1120px){.svc{flex-basis:calc((100% - 2 * var(--g)) / 3)}}
@media (max-width:760px){.svc{flex-basis:calc((100% - var(--g)) / 2)}}
/* Di layar kecil kartu tetap dua kolom dan dibatasi empat — sisanya lewat
   tombol "Lihat Semua Layanan", supaya halaman tidak terlalu panjang. */
@media (max-width:760px){
  .svc-grid > .svc:nth-child(n+5){display:none}
  .svc-body{padding:15px 15px 18px}
  .svc-body h3{font-size:15.5px}
  .svc-body p{font-size:13px;line-height:1.55}
  .svc-img{aspect-ratio:4/3}
}
@media (max-width:340px){.svc{flex-basis:100%}}
.svc{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display:flex;flex-direction:column;
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#CFE2F8}
@media (prefers-reduced-motion:reduce){.svc:hover{transform:none}}
.svc-img{position:relative;aspect-ratio:4/3.15;overflow:hidden;background:var(--blue-100)}
.svc-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,42,99,0) 55%,rgba(11,42,99,.5) 100%);
}
.svc-img .ph{transition:transform .5s ease}
.svc:hover .svc-img .ph{transform:scale(1.05)}
.svc-body{padding:20px 20px 24px;flex:1;display:flex;flex-direction:column}
.svc-body h3{font-size:17px;font-weight:700;margin:0}
.svc-body h3 a{color:var(--navy);transition:color .2s var(--ease)}
.svc:hover .svc-body h3 a{color:var(--blue)}
/* Seluruh kartu bisa diklik lewat tautan judulnya. */
.svc-body h3 a::after{content:"";position:absolute;inset:0;z-index:3}
.svc-body p{font-size:14px;line-height:1.6;margin:9px 0 0;color:var(--slate)}
.svc-more{
  margin-top:auto;padding-top:16px;
  font-family:var(--f-display);font-weight:700;font-size:13.5px;color:var(--blue);
  display:inline-flex;align-items:center;gap:6px;
}
.svc-more svg{width:14px;height:14px;transition:transform .2s ease}
.svc:hover .svc-more svg{transform:translateX(4px)}
.sec-foot{display:flex;justify-content:center;margin-top:clamp(32px,4vw,46px)}

/* ============================ KENAPA ALLIR ============================ */
.why{background:linear-gradient(160deg,var(--navy) 0%,#0A3A8C 55%,var(--blue) 130%);position:relative;overflow:hidden}
.why::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(720px 380px at 88% 6%,rgba(255,255,255,.11),transparent 70%);
}
.why .wrap{position:relative}
.why .sec-head h2{color:#fff}
.why .sec-head p{color:#BFD6F5}
.why .sec-head .eyebrow{color:#7FB2F0}
.why .sec-head .rule{background:#4E93E8}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:clamp(16px,2vw,22px)}
.why-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-lg);padding:30px 26px;
  transition:background .22s ease, transform .22s ease;
}
.why-card:hover{background:rgba(255,255,255,.12);transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.why-card:hover{transform:none}}
.why-ic{
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:rgba(255,255,255,.95);color:var(--blue);margin-bottom:20px;
}
.why-ic svg{width:23px;height:23px}
.why-card h3{color:#fff;font-size:18px;font-weight:700}
.why-card p{color:#C3D8F3;font-size:14.5px;line-height:1.65;margin:10px 0 0}

/* ============================ TENTANG ============================ */
.about-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,68px);align-items:center}
.about-media{position:relative}
.about-frame{aspect-ratio:4/3.3;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);border:6px solid #fff}
.about-badge{
  position:absolute;right:-18px;bottom:-22px;z-index:2;
  background:var(--blue);color:#fff;border-radius:var(--r-md);
  padding:18px 22px;box-shadow:0 12px 30px rgba(0,89,204,.34);
  max-width:210px;
}
.about-badge strong{display:block;font-family:var(--f-display);font-size:15px;font-weight:800;line-height:1.3}
.about-badge span{display:block;font-size:12.5px;color:#CFE3FB;margin-top:5px;line-height:1.5}
.about-copy h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;margin:12px 0 0}
.about-copy p{font-size:16px;line-height:1.75;margin:18px 0 0}
.about-copy p strong{color:var(--navy);font-weight:600}

.guarantee{
  margin:30px 0 0;padding:24px 26px;
  background:var(--blue-050);border:1px solid #DCE9F8;border-radius:var(--r-md);
}
.guarantee h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
.guarantee h3 svg{width:18px;height:18px;color:var(--blue)}
.guarantee ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.guarantee li{position:relative;padding-left:27px;font-size:14.5px;line-height:1.55}
.guarantee li::before{
  content:"";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;
  background:var(--blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E")
    center/12px no-repeat;
  box-shadow:0 2px 6px rgba(0,89,204,.3);
}
@media (max-width:880px){
  .about-in{grid-template-columns:1fr}
  .about-media{max-width:520px;margin-inline:auto;width:100%}
  .about-badge{right:0;bottom:-16px}
}

/* ============================ PORTOFOLIO ============================ */
/* --- Signature: before/after reveal --- */
.ba{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,3.4vw,40px);
  align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-md);
}
.ba-stage{
  position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);
  overflow:hidden;background:#0B2A63;
  touch-action:pan-y;user-select:none;cursor:ew-resize;
}
.ba-layer{position:absolute;inset:0}
.ba-layer .ph{filter:saturate(.94) contrast(1.05)}
.ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-label{
  position:absolute;top:14px;z-index:3;
  font-family:var(--f-display);font-weight:700;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;color:#fff;
  backdrop-filter:blur(6px);
}
.ba-label-b{left:14px;background:rgba(11,42,99,.72)}
.ba-label-a{right:14px;background:rgba(0,89,204,.82)}

.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);
  width:3px;background:#fff;transform:translateX(-50%);z-index:4;
  box-shadow:0 0 0 1px rgba(11,42,99,.18), 0 0 22px rgba(0,0,0,.28);
  pointer-events:none;
}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;
  width:48px;height:48px;transform:translate(-50%,-50%);
  border-radius:50%;background:#fff;
  box-shadow:0 4px 16px rgba(11,42,99,.32);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%230059CC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6M9 6l6 6-6 6' opacity='.001'/%3E%3Cpath d='M14.5 7.5 19 12l-4.5 4.5M9.5 7.5 5 12l4.5 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.ba-range{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;
}
.ba-stage:has(.ba-range:focus-visible) .ba-handle{
  box-shadow:0 0 0 3px var(--blue-lit), 0 0 22px rgba(0,0,0,.28);
}

.ba-copy h3{font-size:clamp(22px,2.7vw,29px);font-weight:800}
.ba-copy > p{font-size:15px;line-height:1.7;margin:14px 0 0}

.lab{
  margin-top:24px;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:var(--blue-050);
}
.lab-head{
  display:flex;align-items:center;gap:9px;
  padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);
}
.lab-head svg{width:17px;height:17px;color:var(--blue);flex:none}
.lab-head strong{font-family:var(--f-display);font-size:13.5px;color:var(--navy);font-weight:700}
.lab-rows{padding:6px 16px 14px}
.lab-row{
  display:grid;grid-template-columns:1fr auto auto auto;
  align-items:center;gap:10px;padding:11px 0;
  border-bottom:1px dashed #D9E5F4;
}
.lab-row:last-child{border-bottom:0}
.lab-row .k{font-size:13.5px;font-weight:500;color:var(--slate)}
.lab-row .v{font-variant-numeric:tabular-nums;font-weight:700;font-size:14.5px}
.lab-row .v-b{color:var(--slate-lt);text-decoration:line-through;text-decoration-thickness:1.5px}
.lab-row .v-a{color:var(--blue);font-size:16px}
.lab-row .arw{width:15px;height:15px;color:var(--slate-lt)}
.lab-note{
  display:block;padding:10px 16px 13px;font-size:11.5px;line-height:1.5;
  color:var(--slate-lt);background:#fff;border-top:1px solid var(--line);
}
@media (max-width:880px){.ba{grid-template-columns:1fr}.ba-stage{aspect-ratio:4/3}}

/* --- Galeri proyek --- */
.gal{
  display:grid;gap:14px;margin-top:clamp(32px,4vw,44px);
  grid-template-columns:repeat(6,1fr);
}
.gal figure{
  position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;
  background:var(--blue-100);box-shadow:var(--shadow-sm);
}
.gal figure:nth-child(1){grid-column:span 2;aspect-ratio:4/3}
.gal figure:nth-child(2){grid-column:span 2;aspect-ratio:4/3}
.gal figure:nth-child(3){grid-column:span 2;aspect-ratio:4/3}
.gal figure:nth-child(4){grid-column:span 3;aspect-ratio:16/8.4}
.gal figure:nth-child(5){grid-column:span 3;aspect-ratio:16/8.4}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 16px 13px;
  font-family:var(--f-display);font-weight:600;font-size:13px;color:#fff;
  background:linear-gradient(180deg,rgba(11,42,99,0),rgba(7,32,77,.82));
}
.gal .ph{transition:transform .55s ease}
.gal figure:hover .ph{transform:scale(1.06)}
@media (max-width:820px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal figure:nth-child(n){grid-column:span 1;aspect-ratio:4/3}
}

/* --- Testimoni --- */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin-top:clamp(32px,4vw,44px)}
.testi{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.testi .quote{width:30px;height:30px;color:var(--blue-200);margin-bottom:6px}
.testi h4{font-size:16px;font-weight:700;margin:0}
.testi p{font-size:14.5px;line-height:1.68;margin:10px 0 0;flex:1}
.testi-by{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.testi-by .testi-av{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--blue-100);color:var(--blue);
  display:grid;place-items:center;line-height:1;
  font-family:var(--f-display);font-weight:800;font-size:15px;
}
.testi-who b{display:block;font-family:var(--f-display);font-size:14px;color:var(--navy);font-weight:700}
.testi-who > span{display:block;font-size:12.5px;color:var(--slate-lt)}

.clients{
  margin-top:clamp(32px,4vw,44px);padding:26px 28px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;align-items:center;gap:clamp(20px,3vw,36px);flex-wrap:wrap;
  justify-content:center;box-shadow:var(--shadow-sm);
}
.clients-lbl{
  font-family:var(--f-display);font-size:12.5px;font-weight:700;color:var(--slate-lt);
  letter-spacing:.1em;text-transform:uppercase;
}
.client-slot{
  width:112px;height:42px;border-radius:8px;
  border:1.5px dashed #CBD8E8;background:var(--blue-050);
  display:grid;place-items:center;
  font-size:11.5px;font-weight:600;color:var(--slate-lt);text-align:center;line-height:1.25;
}

/* ============================ CARA KERJA ============================ */
.steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.steps::before{
  content:"";position:absolute;top:31px;left:8%;right:8%;height:2px;
  background:repeating-linear-gradient(90deg,#C7DCF5 0 8px,transparent 8px 16px);
}
.step{position:relative;text-align:center}
.step-n{
  position:relative;z-index:2;width:62px;height:62px;margin:0 auto;border-radius:50%;
  background:#fff;border:2px solid var(--blue-200);
  display:grid;place-items:center;color:var(--blue);
  box-shadow:0 4px 14px rgba(11,42,99,.09);
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease;
}
.step-n svg{width:25px;height:25px}
.step:hover .step-n{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.step:hover .step-n{transform:none}}
.step-i{
  display:block;font-family:var(--f-display);font-size:11.5px;font-weight:800;
  color:var(--blue-lit);letter-spacing:.1em;margin-top:16px;
}
.step h3{font-size:15px;font-weight:700;margin:6px 0 0;line-height:1.35}
.step p{font-size:13px;line-height:1.55;margin:7px 0 0;color:var(--slate)}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 14px}
  .steps::before{display:none}
}
@media (max-width:420px){.steps{grid-template-columns:1fr}}

/* ============================ FAQ ============================ */
.faq-list{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item[open]{border-color:#CFE2F8;box-shadow:var(--shadow-sm)}
.faq-item summary{
  display:flex;align-items:center;gap:15px;
  padding:19px 22px;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-weight:700;font-size:15.5px;color:var(--navy);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-ic{
  width:36px;height:36px;border-radius:11px;flex:none;
  background:var(--blue-100);color:var(--blue);display:grid;place-items:center;
}
.faq-ic svg{width:17px;height:17px}
.faq-chev{
  margin-left:auto;width:19px;height:19px;flex:none;color:var(--blue);
  transition:transform .25s ease;
}
.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-item .ans{padding:0 22px 22px 73px;font-size:14.8px;line-height:1.72}
@media (max-width:560px){.faq-item .ans{padding-left:22px}}

/* ============================ CTA + FOOTER ============================ */
.cta{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-deep) 0%,#0B3D91 60%,var(--blue) 125%);
  color:#fff;text-align:center;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(620px 340px at 50% 0%,rgba(255,255,255,.13),transparent 68%);
}
.cta .wrap{position:relative}
.cta h2{color:#fff;font-size:clamp(26px,3.9vw,40px);font-weight:800;max-width:19ch;margin-inline:auto}
.cta p{color:#BFD6F5;font-size:17px;margin:18px auto 0;max-width:52ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:32px}
.cta-note{margin:22px 0 0;font-size:13.5px;color:#93B7E6}

.site-foot{background:#071B3F;color:#9BB4D6;padding-block:clamp(48px,6vw,68px) 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,3.4vw,44px)}
.site-foot .logo-word{color:#fff}
.site-foot .logo-tag{color:#6E8DB8}
.foot-about{font-size:14px;line-height:1.7;margin:18px 0 0;max-width:34ch}
.foot-soc{display:flex;gap:9px;margin-top:20px}
.foot-soc a{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:#C6D9F2;transition:background .2s ease,color .2s ease;
}
.foot-soc a:hover{background:var(--blue);color:#fff}
.foot-soc svg{width:17px;height:17px}
.foot-col h4{color:#fff;font-size:14.5px;font-weight:700;letter-spacing:.01em}
.foot-col ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.foot-col a{color:#9BB4D6;font-size:14px;transition:color .18s ease}
.foot-col a:hover{color:#fff}
.foot-contact li{display:flex;gap:11px;font-size:14px;line-height:1.6}
.foot-contact svg{width:16px;height:16px;color:var(--blue-lit);flex:none;margin-top:4px}
.foot-bar{
  margin-top:clamp(34px,4.5vw,52px);padding-block:22px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;
}
.foot-bar .tagline{color:#fff;font-family:var(--f-display);font-weight:700}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Floating WA ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:flex;align-items:center;gap:11px;
  background:var(--wa);color:#fff;
  padding:13px 20px 13px 15px;border-radius:999px;
  font-family:var(--f-display);font-weight:700;font-size:14.5px;
  box-shadow:0 8px 26px rgba(31,175,90,.4);
  transition:transform .2s ease;
}
.wa-float:hover{transform:translateY(-3px)}
.wa-float svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.wa-float:hover{transform:none}}
@media (max-width:520px){
  .wa-float{padding:14px;right:16px;bottom:16px}
  .wa-float span{display:none}
}

/* ---------- Panel catatan mockup (alat review, bukan bagian desain) ---------- */
.rev-btn{
  position:fixed;left:18px;bottom:20px;z-index:95;
  background:var(--navy);color:#fff;border:0;cursor:pointer;
  padding:11px 17px;border-radius:999px;
  font-family:var(--f-display);font-weight:700;font-size:13px;
  box-shadow:0 6px 20px rgba(11,42,99,.32);
  display:inline-flex;align-items:center;gap:8px;
}
.rev-btn svg{width:15px;height:15px}
.rev-panel{
  position:fixed;left:18px;bottom:70px;z-index:96;width:min(390px,calc(100vw - 36px));
  max-height:min(70vh,560px);overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:20px 22px;
}
.rev-panel[hidden]{display:none}
.rev-panel h4{font-size:15px;font-weight:800;margin:0}
.rev-panel h5{font-size:12px;font-weight:700;color:var(--blue);margin:18px 0 0;letter-spacing:.07em;text-transform:uppercase;font-family:var(--f-body)}
.rev-panel ul{margin:9px 0 0;padding-left:18px;display:grid;gap:7px}
.rev-panel li{font-size:13px;line-height:1.55}
.rev-panel .close{position:absolute;top:14px;right:14px;background:none;border:0;cursor:pointer;color:var(--slate-lt);font-size:20px;line-height:1}
@media (max-width:520px){.rev-btn{left:16px;bottom:16px;font-size:12px;padding:10px 14px}}

/* ============================================================
   MOTION
   Satu bahasa gerak: easing yang sama, jarak yang sama, dan
   selalu ada alasannya. Semua dimatikan bila pengguna memilih
   "reduce motion".
   ============================================================ */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.32,.72,.35,1);
}

/* ---------- Reveal saat masuk layar (dengan stagger) ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}

.js .stagger > *{opacity:0;transform:translateY(26px)}
.js .stagger.in > *{
  opacity:1;transform:none;
  transition:opacity .62s var(--ease),transform .62s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}

/* ---------- Urutan masuk hero saat halaman dibuka ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes frameIn{from{opacity:0;transform:translateY(30px) scale(.965)}to{opacity:1;transform:none}}
@keyframes tagIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes underline{from{background-size:0 .1em}to{background-size:100% .1em}}

.hero h1 .kw,
.hero h1 .lead-line,
.hero h1 .accent,
.hero-sub,
.hero-chips,
.hero-actions,
.hero-note{opacity:0;animation:riseIn .8s var(--ease) forwards}
.hero h1 .kw{animation-delay:.05s}
.hero h1 .lead-line{animation-delay:.16s}
/* V1 menjalankan dua animasi sekaligus: baris naik, lalu garis sorot tumbuh.
   Ditulis penuh karena aturan riseIn di atas memakai shorthand `animation`. */
.hero h1 .accent{
  animation:
    riseIn .8s var(--ease) .27s forwards,
    underline .95s cubic-bezier(.22,.61,.36,1) .85s forwards;
}
.hero-sub{animation-delay:.4s}
.hero-chips{animation-delay:.5s}
.hero-actions{animation-delay:.6s}
.hero-note{animation-delay:.7s}

.hero-frame{opacity:0;animation:frameIn 1s var(--ease) .28s forwards}
/* Chip hero menyala satu per satu, lalu bereaksi saat disentuh */
.hero-chips li{
  opacity:0;animation:tagIn .5s var(--ease) forwards;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.hero-chips li:nth-child(1){animation-delay:.56s}
.hero-chips li:nth-child(2){animation-delay:.64s}
.hero-chips li:nth-child(3){animation-delay:.72s}
.hero-chips li:nth-child(4){animation-delay:.8s}
.hero-chips li:hover{transform:translateY(-2px);border-color:#9CC8F5;box-shadow:0 4px 12px rgba(11,42,99,.09)}

/* Gelombang hero mengalir pelan */
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero-wave svg{width:200%;animation:drift 26s linear infinite}

/* ---------- Header mengecil saat digulir ---------- */
.site-head{transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.head-in{transition:height .3s var(--ease)}
.site-head.compact{box-shadow:0 4px 20px rgba(11,42,99,.08)}
.site-head.compact .head-in{height:62px}
.logo-mark,.logo-word,.logo-tag{transition:transform .3s var(--ease),opacity .25s var(--ease)}
.site-head.compact .logo-tag{opacity:0;transform:translateY(-4px)}
.logo:hover .logo-mark{transform:translateY(-2px) rotate(-6deg)}

/* ---------- Tombol ---------- */
.btn{position:relative;overflow:hidden}
.btn > *{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 62%);
  opacity:0;transition:opacity .35s var(--ease);
}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{transition:transform .28s var(--ease)}
.btn:hover svg:last-child{transform:translateX(3px)}

/* ---------- Kartu "Kenapa Allir" ---------- */
.why-ic{transition:transform .35s var(--ease)}
.why-card:hover .why-ic{transform:translateY(-3px) scale(1.06)}

/* ---------- Galeri ---------- */
.gal figcaption{transform:translateY(6px);opacity:.9;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.gal figure:hover figcaption{transform:none;opacity:1}

/* ---------- FAQ: buka dengan halus ---------- */
@keyframes faqIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq-item[open] .ans{animation:faqIn .34s var(--ease-soft)}
.faq-item summary{transition:background .22s var(--ease)}
.faq-item summary:hover{background:var(--blue-050)}
.faq-ic{transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.faq-item[open] .faq-ic{background:var(--blue);color:#fff;transform:scale(1.05)}

/* ---------- Timeline: garis tumbuh, langkah muncul berurutan ---------- */
.js .steps::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.4s var(--ease) .15s}
.js .steps.in::before{transform:scaleX(1)}

/* ---------- Angka hasil uji ---------- */
.lab-row .v-a{transition:color .3s var(--ease)}
.lab-row .arw{transition:transform .4s var(--ease)}
.lab:hover .arw{transform:translateX(3px)}

/* ---------- Tombol WA mengambang ---------- */
@keyframes waPulse{0%{box-shadow:0 8px 26px rgba(31,175,90,.4),0 0 0 0 rgba(31,175,90,.42)}70%{box-shadow:0 8px 26px rgba(31,175,90,.4),0 0 0 14px rgba(31,175,90,0)}100%{box-shadow:0 8px 26px rgba(31,175,90,.4),0 0 0 0 rgba(31,175,90,0)}}
.wa-float{animation:waPulse 3.6s ease-out 2s infinite}
.wa-float:hover{animation-play-state:paused}

/* ---------- Hormati preferensi pengguna ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv,.stagger > *,
  .hero h1 .kw,.hero h1 .lead-line,.hero h1 .accent,
  .hero-sub,.hero-chips,.hero-chips li,.hero-actions,.hero-note,
  .hero-frame{opacity:1;transform:none}
  .hero h1 .accent,
  .hero-v3 h1 .accent{background-size:100% .1em}
  .steps::before{transform:scaleX(1)}
  .hero-wave svg{width:100%}
}

/* ============================================================
   HALAMAN PRODUK (katalog + detail)
   Memakai token yang sama dengan beranda.
   ============================================================ */

/* ---------- Kepala halaman + breadcrumb ---------- */
.page-hero{
  background:linear-gradient(176deg,#F7FBFF 0%,#E9F2FD 100%);
  border-bottom:1px solid var(--line);
  padding-block:clamp(26px,4vw,44px) clamp(30px,4.5vw,52px);
}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--slate-lt);margin:0 0 16px}
.crumb a{color:var(--slate);font-weight:500}
.crumb a:hover{color:var(--blue)}
.crumb .sep{opacity:.5}
.crumb [aria-current]{color:var(--navy);font-weight:600}
.page-hero h1{font-size:clamp(28px,4vw,42px);font-weight:800}
.page-hero .lede{font-size:16.5px;margin:14px 0 0;max-width:62ch}

.search-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;max-width:560px}
.search-field{position:relative;flex:1 1 260px}
.search-field svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--slate-lt)}
.search-field input{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  padding:14px 16px 14px 45px;border-radius:999px;
  border:1px solid var(--line);background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.search-field input::placeholder{color:var(--slate-lt)}
.search-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,89,204,.15)}

/* ---------- Kategori ---------- */
.cat-strip{--g:14px;display:flex;flex-wrap:wrap;gap:var(--g);justify-content:center}
.cat-card{
  flex:0 1 calc((100% - 5 * var(--g)) / 6);min-width:0;
  position:relative;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CFE2F8}
.cat-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--blue-100)}
.cat-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,42,99,0) 50%,rgba(11,42,99,.55) 100%)}
.cat-media .ph{transition:transform .5s var(--ease)}
.cat-card:hover .cat-media .ph{transform:scale(1.06)}
.cat-body{padding:13px 14px 15px}
.cat-body strong{display:block;font-family:var(--f-display);font-size:14px;font-weight:700;color:var(--navy);line-height:1.3}
.cat-body em{display:block;font-style:normal;font-size:12px;color:var(--slate-lt);margin-top:4px;line-height:1.45}
@media (max-width:1000px){.cat-card{flex-basis:calc((100% - 2 * var(--g)) / 3)}}
@media (max-width:560px){.cat-card{flex-basis:calc((100% - var(--g)) / 2)}}

/* ---------- Tata letak katalog ---------- */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(22px,3vw,38px);align-items:start}
@media (max-width:940px){.shop-layout{grid-template-columns:1fr}}

.facets{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px;box-shadow:var(--shadow-sm);position:sticky;top:96px;
}
@media (max-width:940px){.facets{position:static}}
.facet+.facet{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.facet h3{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);font-family:var(--f-body)}
.facet ul{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:10px}
.facet label{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;color:var(--slate)}
.facet label:hover{color:var(--navy)}
.facet input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue);flex:none;cursor:pointer}
.facet .count{margin-left:auto;font-size:12px;color:var(--slate-lt);font-variant-numeric:tabular-nums}
.price-row{display:flex;align-items:center;gap:8px;margin-top:13px}
.price-row input{
  width:100%;min-width:0;font:inherit;font-size:13.5px;padding:9px 11px;
  border:1px solid var(--line);border-radius:9px;color:var(--ink);
}
.price-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,89,204,.14)}
.price-row span{color:var(--slate-lt)}

.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line);
}
.toolbar .count{font-size:14px;color:var(--slate)}
.toolbar .count b{color:var(--navy);font-weight:700}
.toolbar .spacer{margin-left:auto}
.select{
  font:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer;
}
.select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,89,204,.14)}

/* ---------- Kartu produk ---------- */
.prod-grid{--g:16px;display:flex;flex-wrap:wrap;gap:var(--g)}
.prod-card{
  flex:0 1 calc((100% - 3 * var(--g)) / 4);min-width:0;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.prod-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#CFE2F8}
@media (max-width:1180px){.prod-card{flex-basis:calc((100% - 2 * var(--g)) / 3)}}
@media (max-width:760px){.prod-card{flex-basis:calc((100% - var(--g)) / 2)}}
@media (max-width:420px){.prod-card{flex-basis:100%}}

/* Kotak foto produk — sengaja placeholder, menunggu foto katalog asli */
.prod-thumb{
  position:relative;aspect-ratio:1/1;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--blue-050) 55%,var(--blue-100) 100%);
  border-bottom:1px solid var(--line);
}
.prod-thumb .ic{width:52px;height:52px;color:#9EC4EE}
.prod-thumb .cap{
  position:absolute;bottom:10px;left:0;right:0;text-align:center;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9EC4EE;font-weight:700;
}
.prod-thumb .ph{position:absolute;inset:0}
.prod-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--f-display);font-size:10.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;color:#fff;background:var(--blue);
}
.prod-badge.is-hot{background:#E4572E}
.prod-badge.is-promo{background:#12A150}

.prod-body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.prod-cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-lit)}
.prod-body h3{font-size:14.5px;font-weight:700;margin:7px 0 0;line-height:1.4}
.prod-body h3 a{color:var(--navy)}
.prod-card:hover .prod-body h3 a{color:var(--blue)}
.prod-spec{font-size:12.5px;color:var(--slate);margin:7px 0 0;line-height:1.5}
.prod-foot{margin-top:auto;padding-top:14px;display:flex;align-items:flex-end;gap:10px}
.prod-price{display:block;font-family:var(--f-display);font-weight:800;font-size:16.5px;color:var(--navy);font-variant-numeric:tabular-nums}
.prod-was{display:block;font-size:12px;color:var(--slate-lt);text-decoration:line-through;margin-bottom:2px}
.prod-cart{
  margin-left:auto;width:38px;height:38px;flex:none;border-radius:11px;
  display:grid;place-items:center;border:1px solid var(--line);
  background:#fff;color:var(--blue);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.prod-cart svg{width:17px;height:17px}
.prod-cart:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-2px)}

/* ---------- Paginasi ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:clamp(30px,4vw,44px)}
.pager a,.pager span{
  min-width:40px;height:40px;padding:0 12px;border-radius:11px;
  display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:14px;
  border:1px solid var(--line);background:#fff;color:var(--navy);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.pager a:hover{border-color:var(--blue);color:var(--blue)}
.pager [aria-current]{background:var(--blue);border-color:var(--blue);color:#fff}
.pager .gap{border:0;background:none;color:var(--slate-lt)}

/* ---------- Detail produk ---------- */
.pd{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.pd{grid-template-columns:1fr}}

.pd-main{
  position:relative;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--blue-050) 55%,var(--blue-100) 100%);
  display:grid;place-items:center;
}
.pd-main .ic{width:110px;height:110px;color:#9EC4EE}
.pd-main .cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9EC4EE;font-weight:700}
.pd-thumbs{--g:11px;display:flex;gap:var(--g);margin-top:12px}
.pd-thumbs button{
  flex:1 1 0;aspect-ratio:1/1;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--line);
  background:radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--blue-050) 100%);
  display:grid;place-items:center;color:#A9CDF2;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.pd-thumbs button svg{width:22px;height:22px}
.pd-thumbs button:hover{transform:translateY(-2px)}
.pd-thumbs button[aria-current="true"]{border-color:var(--blue);color:var(--blue)}

.pd-buy h1{font-size:clamp(24px,3.2vw,34px);font-weight:800;margin:10px 0 0}
.pd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px;font-size:13.5px;color:var(--slate)}
.pd-stars{display:flex;align-items:center;gap:5px;color:#F0A202}
.pd-stars svg{width:15px;height:15px}
.pd-stock{display:inline-flex;align-items:center;gap:7px;color:#12A150;font-weight:600}
.pd-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

.pd-price{display:flex;align-items:baseline;gap:12px;margin-top:20px;flex-wrap:wrap}
.pd-price .now{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3.6vw,36px);color:var(--blue);font-variant-numeric:tabular-nums}
.pd-price .was{font-size:16px;color:var(--slate-lt);text-decoration:line-through}
.pd-price .off{font-size:12px;font-weight:800;color:#E4572E;background:#FDECE6;padding:4px 10px;border-radius:999px}
.pd-note{font-size:13px;color:var(--slate-lt);margin:8px 0 0}

.pd-desc{font-size:15px;line-height:1.72;margin:20px 0 0}
.pd-key{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.pd-key li{position:relative;padding-left:27px;font-size:14.5px;line-height:1.55}
.pd-key li::before{
  content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;
  background:var(--blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E")
    center/11px no-repeat;
}

.qty-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;overflow:hidden}
.qty button{
  width:42px;height:46px;border:0;background:none;cursor:pointer;color:var(--navy);
  font-size:19px;line-height:1;transition:background .18s var(--ease),color .18s var(--ease);
}
.qty button:hover{background:var(--blue-050);color:var(--blue)}
.qty input{
  width:52px;height:46px;border:0;text-align:center;font:inherit;font-weight:700;
  color:var(--navy);font-variant-numeric:tabular-nums;background:none;
}
.qty input:focus{outline:none}

.pd-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:16px}
.pd-trust{
  display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line);
}
.pd-trust div{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--slate);font-weight:500}
.pd-trust svg{width:18px;height:18px;color:var(--blue);flex:none}

/* ---------- Tab deskripsi ---------- */
.tabs{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);padding-top:clamp(28px,3.5vw,40px)}
.tablist{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line)}
.tablist button{
  border:0;background:none;cursor:pointer;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--slate);
  padding:13px 18px;transition:color .2s var(--ease);
}
.tablist button::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;
  background:var(--blue);transform:scaleX(0);transition:transform .24s var(--ease);
}
.tablist button:hover{color:var(--navy)}
.tablist button[aria-selected="true"]{color:var(--blue)}
.tablist button[aria-selected="true"]::after{transform:scaleX(1)}
.tabpanel{padding-top:26px;max-width:78ch;animation:faqIn .32s var(--ease-soft)}
.tabpanel[hidden]{display:none}
.tabpanel p{font-size:15px;line-height:1.75;margin:0 0 15px}
.tabpanel h4{font-size:16px;font-weight:700;margin:24px 0 10px}
.spec-table{width:100%;border-collapse:collapse;font-size:14.5px}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table th{
  text-align:left;padding:13px 16px 13px 0;font-weight:600;color:var(--slate);
  width:220px;vertical-align:top;
}
.spec-table td{padding:13px 0;color:var(--navy);font-weight:500}

/* ---------- Ajakan pasang ---------- */
.cross{
  margin-top:clamp(40px,5vw,64px);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,34px);
  background:linear-gradient(140deg,var(--navy) 0%,#0B3D91 70%,var(--blue) 130%);
  border-radius:var(--r-xl);padding:clamp(26px,3.4vw,40px);color:#fff;
}
.cross-ic{
  width:60px;height:60px;border-radius:18px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;
}
.cross-ic svg{width:28px;height:28px}
.cross-txt{flex:1 1 300px}
.cross-txt h3{color:#fff;font-size:clamp(19px,2.4vw,24px);font-weight:800}
.cross-txt p{color:#BFD6F5;font-size:14.5px;line-height:1.65;margin:9px 0 0}

/* ============================================================
   HALAMAN LAYANAN (daftar + detail)
   ============================================================ */

/* ---------- Kartu layanan melebar ---------- */
.svc-row{display:grid;gap:clamp(16px,2vw,22px)}
.svc-wide{
  position:relative;
  display:grid;grid-template-columns:300px 1fr;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.svc-wide:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CFE2F8}
.svc-wide-media{position:relative;overflow:hidden;background:var(--blue-100);min-height:240px}
.svc-wide-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,42,99,.22),rgba(11,42,99,0) 62%)}
.svc-wide-media .ph{position:absolute;inset:0;transition:transform .55s var(--ease)}
.svc-wide:hover .svc-wide-media .ph{transform:scale(1.05)}

.svc-wide-body{padding:clamp(22px,2.8vw,32px);display:flex;flex-direction:column}
.svc-wide-body h3{font-size:clamp(19px,2.2vw,23px);font-weight:800}
/* Judul adalah tautannya, dan tautan itu melebar menutupi seluruh kartu —
   jadi klik di mana pun pada kartu ikut terbaca, bukan hanya di tombol. */
.svc-wide-body h3 a{color:var(--navy);transition:color .2s var(--ease)}
.svc-wide-body h3 a::after{content:"";position:absolute;inset:0;z-index:4}
.svc-wide:hover .svc-wide-body h3 a{color:var(--blue)}
/* Tombol tinggal tampilan; keadaan hover-nya ikut kartu. */
.svc-wide:hover .svc-wide-foot .btn-primary{background:#0049A8;transform:translateY(-2px)}
.svc-wide:has(h3 a:focus-visible){outline:3px solid var(--blue-lit);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .svc-wide:hover .svc-wide-foot .btn-primary{transform:none}
}
.svc-wide-lede{font-size:15px;line-height:1.7;margin:11px 0 0}
.svc-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.svc-points li{position:relative;padding-left:26px;font-size:14px;line-height:1.55;color:var(--slate)}
.svc-points li::before{
  content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;
  background:var(--blue-100)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230059CC' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E")
    center/11px no-repeat;
}
.svc-wide-foot{
  margin-top:auto;padding-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.svc-quote{font-size:13px;color:var(--slate-lt);line-height:1.5;flex:1 1 190px}
.svc-quote strong{display:block;color:var(--navy);font-family:var(--f-display);font-size:14px;font-weight:700}
@media (max-width:860px){
  .svc-wide{grid-template-columns:1fr}
  .svc-wide-media{min-height:0;aspect-ratio:16/9}
}

/* ---------- Hero halaman layanan ---------- */
.lyn-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,58px);align-items:center}
.lyn-hero h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;margin:12px 0 0}
.lyn-lede{font-size:clamp(15.5px,1.8vw,17.5px);line-height:1.7;margin:18px 0 0;max-width:52ch}
.lyn-frame{position:relative;aspect-ratio:4/3.2;border-radius:var(--r-xl);overflow:hidden;border:6px solid #fff;box-shadow:var(--shadow-lg)}
@media (max-width:900px){
  .lyn-hero{grid-template-columns:1fr}
  .lyn-hero .lyn-media{order:-1;max-width:520px;margin-inline:auto;width:100%}
}

/* ---------- Kartu masalah ---------- */
.prob-grid{--g:16px;display:flex;flex-wrap:wrap;gap:var(--g)}
.prob{
  flex:0 1 calc((100% - 3 * var(--g)) / 4);min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 22px;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),border-color .22s var(--ease);
}
.prob:hover{transform:translateY(-4px);border-color:#CFE2F8}
.prob-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--blue-100);color:var(--blue);margin-bottom:16px}
.prob-ic svg{width:21px;height:21px}
.prob h3{font-size:16px;font-weight:700}
.prob p{font-size:13.8px;line-height:1.62;margin:9px 0 0}
@media (max-width:1000px){.prob{flex-basis:calc((100% - var(--g)) / 2)}}
@media (max-width:520px){.prob{flex-basis:100%}}

/* ---------- Lingkup pekerjaan ---------- */
.scope{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);
  background:var(--blue-050);border:1px solid #DCE9F8;border-radius:var(--r-xl);
  padding:clamp(26px,3.4vw,42px);
}
.scope h3{font-size:clamp(19px,2.2vw,23px);font-weight:800}
.scope p{font-size:14.8px;line-height:1.7;margin:12px 0 0}
@media (max-width:800px){.scope{grid-template-columns:1fr}}

/* ---------- Cara biaya dihitung ---------- */
.cost-grid{--g:16px;display:flex;flex-wrap:wrap;gap:var(--g)}
.cost{
  flex:0 1 calc((100% - 3 * var(--g)) / 4);min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 22px;box-shadow:var(--shadow-sm);
}
.cost-n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--blue);color:#fff;font-family:var(--f-display);font-weight:800;font-size:14px;
  margin-bottom:15px;
}
.cost h3{font-size:15.5px;font-weight:700}
.cost p{font-size:13.6px;line-height:1.6;margin:8px 0 0}
@media (max-width:1000px){.cost{flex-basis:calc((100% - var(--g)) / 2)}}
@media (max-width:520px){.cost{flex-basis:100%}}

/* ---------- Area layanan ---------- */
.area-chips{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;list-style:none}
.area-chips li{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px 9px 12px;
  font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--navy);
}
.area-chips li::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--blue-lit);flex:none;
}

/* ============================================================
   V2 — HERO MOSAIK
   Foto lapangan mengelilingi logo, seperti banner allir.id.
   Tiap ubin menuju halaman layanannya.
   ============================================================ */

.hero-v2{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 520px at 78% -10%, #DCEBFB 0%, rgba(220,235,251,0) 62%),
    linear-gradient(178deg,#F7FBFF 0%,#E9F2FD 100%);
  padding-block:clamp(28px,3.4vw,48px) clamp(44px,5.5vw,76px);
}
/* Mosaik sengaja lepas dari kolom isi — melebar hampir setepi layar. */
.hero-v2-in{width:100%;padding-inline:clamp(12px,1.6vw,26px)}

.mosaic{
  display:grid;gap:clamp(9px,1vw,14px);
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,clamp(150px,15.5vw,268px));
  grid-template-areas:
    "pompa  tangki kuras  survey"
    "jalur  center center survey"
    "jalur  filter media  testair";
}
.m-pompa{grid-area:pompa}
.m-jalur{grid-area:jalur}
.m-tangki{grid-area:tangki}
.m-kuras{grid-area:kuras}
.m-center{grid-area:center}
.m-survey{grid-area:survey}
.m-filter{grid-area:filter}
.m-media{grid-area:media}
.m-testair{grid-area:testair}

.mtile{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-md);background:var(--blue-100);
  box-shadow:var(--shadow-sm);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),opacity .34s var(--ease);
}
.mtile .ph{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
}
.mtile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,42,99,0) 42%,rgba(7,32,77,.78) 100%);
  transition:background .34s var(--ease);
}
.mtile-label{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:16px 15px 14px;
  display:flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(12.5px,1.15vw,15px);color:#fff;line-height:1.3;
  text-shadow:0 1px 8px rgba(7,32,77,.5);
}
.mtile-label svg{
  width:16px;height:16px;flex:none;
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}

/* Ubin yang disorot menonjol, sisanya mundur sedikit. */
.mosaic:hover .mtile{opacity:.62}
.mosaic:hover .mtile:hover{opacity:1}
.mtile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);z-index:3}
.mtile:hover .ph{transform:scale(1.07)}
.mtile:hover::after{background:linear-gradient(180deg,rgba(0,89,204,.12) 30%,rgba(7,32,77,.86) 100%)}
.mtile:hover .mtile-label svg{opacity:1;transform:none}
.mtile:focus-visible{outline:3px solid var(--blue);outline-offset:3px;opacity:1}
.mosaic:hover .mtile:focus-visible{opacity:1}

/* Ubin tengah — logo dan janji utama */
.m-center{
  display:grid;place-items:center;text-align:center;
  padding:clamp(16px,2vw,26px);
  background:linear-gradient(145deg,var(--blue) 0%,#0A47A8 100%);
  border-radius:var(--r-md);box-shadow:var(--shadow-md);
  overflow:hidden;position:relative;
}
.m-center::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(420px 240px at 50% 0%,rgba(255,255,255,.18),transparent 70%);
}
.m-center-in{position:relative;z-index:1;margin:0;font-family:var(--f-display);letter-spacing:normal}
.m-center .logo-word{color:#fff;font-size:clamp(30px,3.6vw,46px);line-height:1}
.m-center-tag{
  display:block;margin-top:10px;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(10.5px,1.05vw,13.5px);
  letter-spacing:.11em;text-transform:uppercase;color:#CFE3FB;line-height:1.5;
}

/* Logo dan tagline diukur dari tinggi ubinnya sendiri, bukan dari lebar layar,
   supaya proporsinya tetap sama di semua ukuran. min() dengan cqw menjaga
   teks tidak melebar keluar saat ubinnya pendek dan lebar. */
@supports (container-type: size){
  .m-center{container-type:size;padding:clamp(7px,1vw,13px)}
  .m-center-in{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    height:100%;gap:4cqh;
  }
  .m-center .logo-word{font-size:min(57cqh,35cqw);line-height:.84}
  .m-center-tag{margin-top:0;font-size:min(9.7cqh,5.3cqw);line-height:1.38}
}
.m-center-wave{position:absolute;left:0;right:0;bottom:-2px;z-index:0;color:rgba(255,255,255,.16)}
.m-center-wave svg{display:block;width:100%;height:auto}

@media (max-width:1000px){
  .mosaic{
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,clamp(146px,20vw,215px));
    grid-template-areas:
      "pompa   tangki  kuras"
      "jalur   center  survey"
      "filter  media   testair";
  }
}
@media (max-width:640px){
  /* Logo tetap di tengah, dikepung foto di atas dan di bawahnya. */
  .mosaic{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:
      repeat(2,clamp(120px,32vw,158px))
      clamp(126px,33vw,168px)
      repeat(2,clamp(120px,32vw,158px));
    grid-template-areas:
      "pompa  tangki"
      "kuras  jalur"
      "center center"
      "filter media"
      "survey testair";
  }
  
}

/* Sakelar versi mockup — alat bantu review, bukan bagian desain */
.ver-switch{
  position:fixed;left:18px;bottom:66px;z-index:95;
  display:inline-flex;align-items:center;gap:4px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:5px;box-shadow:var(--shadow-md);
}
.ver-switch .lbl{
  font-family:var(--f-body);font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--slate-lt);
  padding:0 8px 0 9px;
}
.ver-switch button{
  font-family:var(--f-display);font-weight:700;font-size:12.5px;
  color:var(--navy);padding:7px 13px;border-radius:999px;
  border:0;background:none;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.ver-switch button:hover{background:var(--blue-050);color:var(--blue)}
.ver-switch button[aria-pressed="true"]{background:var(--blue);color:#fff}
@media (max-width:560px){
  .ver-switch{left:16px;right:16px;bottom:60px;justify-content:center}
  .ver-switch .lbl{display:none}
}

/* ============================================================
   V3 — HERO TANPA FOTO
   Hanya logo, judul, dan janji utama.
   ============================================================ */
.hero-v3{
  position:relative;overflow:hidden;text-align:center;
  background:
    radial-gradient(760px 460px at 50% -12%, #DCEBFB 0%, rgba(220,235,251,0) 66%),
    linear-gradient(178deg,#F7FBFF 0%,#E9F2FD 100%);
  padding-block:clamp(64px,10vw,132px) clamp(88px,11vw,150px);
}
.hero-v3-in{max-width:820px;margin-inline:auto;position:relative;z-index:1}
.hero-v3-mark{
  display:inline-flex;align-items:center;gap:14px;
  margin-bottom:clamp(24px,3vw,36px);
}
.hero-v3-mark svg{width:clamp(46px,5.5vw,68px);height:auto}
.hero-v3-mark .logo-word{font-size:clamp(52px,7.5vw,96px);line-height:.9}
.hero-v3 h1{font-size:clamp(30px,4.8vw,54px);font-weight:800}
.hero-v3 h1 .kw{
  display:block;font-family:var(--f-body);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:18px;
}
.hero-v3 h1 .accent{color:var(--blue)}
.hero-v3-tag{
  display:inline-block;margin-top:6px;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(12px,1.3vw,15px);letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate-lt);
}
.hero-v3-sub{font-size:clamp(16px,1.9vw,19px);margin:22px auto 0;max-width:56ch}
.hero-v3 .hero-chips{justify-content:center;margin-top:30px}
.hero-v3 .hero-actions{justify-content:center;margin-top:32px}
.hero-v3 .hero-note{justify-content:center;margin-top:24px}
@media (min-width:901px){
  .hero-v3 .hero-chips{display:flex;grid-template-columns:none}
}