/* ============================================================================
   GenZi Labs — labs.css
   Lapisan tipis di atas stylesheet situs induk (style.css).
   Tujuan: mewarisi bahasa visual genzicorp.com apa adanya, lalu menambah
   hanya komponen yang memang baru untuk halaman GenZi Labs.
   Dimuat SETELAH style.css, jadi aturan di sini menang pada spesifisitas yang
   sama. Semua override pada elemen bawaan memakai selektor turunan
   (.hero …, .site-foot …) supaya tetap menang atas aturan responsif induk.
   ========================================================================== */

/* Token lokal: teks sekunder yang lebih gelap agar lolos kontras AA pada
   ukuran kecil, dan ungu untuk teks interaktif (hover/fokus) yang tetap
   memenuhi rasio 4.5:1 — ungu brand #9C75E5 hanya untuk elemen non-teks. */
:root{--muted-strong:#6f6880;--purple-ink:#6b4bbd}

/* ---------- 1. Ikon SVG (menggantikan glyph panah yang tidak ada di subset font Manrope) ---------- */
.ico{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.button .ico{width:11px;height:11px;stroke-width:2.2}
.card-top .ico{width:11px;height:11px;color:#b9adcb}

/* ---------- 2. Header ---------- */
.header-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.brand-tag{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:#6b5a9e;background:#f2ecff;border:1px solid #e7dcfb;border-radius:999px;
  padding:5px 10px;margin-left:8px;align-self:center;line-height:1}
header .main-nav{font-weight:600;color:#4d4b57}
header .main-nav a{position:relative;padding:13px 0}
header .main-nav a:hover{color:var(--purple-ink)}

.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:44px;height:44px;padding:0;background:#fff;border:1px solid #e8e2f0;border-radius:12px;
  cursor:pointer;transition:border-color .2s,box-shadow .2s}
.nav-toggle:hover{border-color:#d9cbf3;box-shadow:0 8px 18px #9d86dd21}
.nav-toggle-bar{display:block;width:18px;height:2px;border-radius:2px;background:#5a4a86;
  transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child{transform:translateY(3px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child{transform:translateY(-3px) rotate(-45deg)}

.mobile-nav{display:none}
@media(max-width:760px){
  header{height:78px}
  header .main-nav{display:none}
  .nav-toggle{display:flex}
  .mobile-nav{display:grid;gap:2px;margin:0 12px 8px;padding:14px;
    border:1px solid #ece4f8;border-radius:20px;background:rgba(255,255,255,.97);
    backdrop-filter:blur(18px);box-shadow:0 20px 44px #6b5aa826;position:relative;z-index:25}
  .mobile-nav[hidden]{display:none}
  .mobile-nav a{font-size:14px;font-weight:600;padding:13px 10px;border-radius:12px}
  .mobile-nav a:hover{background:#f7f3ff;color:var(--purple-ink)}
  .mobile-nav .button{margin-top:10px;color:#fff}
  .mobile-nav .button:hover{background:linear-gradient(115deg,#8e59db,#7562e3)}
}
@media(max-width:620px){
  .brand-tag{font-size:8.5px;padding:4px 8px;letter-spacing:1px;margin-left:6px}
  .header-cta{display:none}
  .hero .eyebrow{font-size:9.5px;letter-spacing:1.3px}
  .hero .hero-bottom{font-size:8px}
  .ecosystem .card-top{font-size:9.5px;letter-spacing:1.2px}
  .faq summary{min-height:34px}
  .site-foot .foot-cols a{display:inline-block;padding:5px 0}
  .section-cta .button,.contact .button{font-size:12.5px}
}

/* ---------- 3. Hero ---------- */
/* Proporsi hero disesuaikan dengan panjang judul Labs (3 baris) supaya ukuran
   judul tetap besar seperti situs induk tanpa menabrak visual kanan. */
.hero .hero-copy{max-width:min(720px,53%)}
.hero h1{font-size:clamp(28px,3.7vw,56px);line-height:1.14;letter-spacing:-2.4px;
  font-weight:600;margin:26px 0 20px}
.hero .hero-copy>p{max-width:392px;color:var(--muted-strong)}
.hero .hero-copy>p.hero-micro{max-width:392px;font-size:11.5px;line-height:1.7;color:var(--muted-strong);
  margin:18px 0 0;display:flex;align-items:center;gap:8px}
.hero .hero-copy>p.hero-micro::before{content:"";width:5px;height:5px;border-radius:50%;
  background:#a082e2;flex:0 0 5px}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.button.ghost{background:#fff;color:#5a4a86;border:1px solid #e4daf5;box-shadow:0 10px 24px #9d86dd12}
.button.ghost:hover{box-shadow:0 12px 26px #aaa0e53d;border-color:#d5c6f2}
.button.ghost span{background:#f3eeff;color:#8462cd}

/* Visual kaca 3D: PNG punya alpha asli -> tanpa mix-blend-mode. */
.hero .eyebrow{color:var(--muted-strong)}
.hero .hero-bottom{color:var(--muted-strong)}
.hero .hero-art{width:47%}
.hero .hero-art img{width:86%;max-width:620px;mix-blend-mode:normal;object-fit:contain;
  filter:drop-shadow(0 24px 38px #a9a0de38);transform:rotate(4deg)}
.hero .hero-art picture{display:block}

@media(max-width:900px){
  .hero .hero-copy{max-width:50%}
  .hero h1{font-size:clamp(28px,4.3vw,40px);letter-spacing:-1.9px}
  .hero .hero-copy>p{max-width:340px}
  .hero .hero-art{width:48%}
  .hero .hero-art img{width:84%}
}
@media(min-width:621px) and (max-width:1279px){
  .hero .hero-art{width:46%}
  .hero .hero-art img{transform:translateX(5%) rotate(4deg)}
  .hero .hero-copy{max-width:min(640px,56%)}
  .hero h1{font-size:clamp(28px,3.9vw,50px);letter-spacing:-2.2px}
}
@media(max-width:620px){
  .hero .hero-copy{max-width:100%}
  .hero h1{font-size:clamp(26px,6.9vw,33px);letter-spacing:-1.4px;margin:22px 0 18px}
  .hero-actions{gap:10px}
  .hero-actions .button{flex:1 1 100%;justify-content:space-between}
  .hero .hero-copy>p.hero-micro{margin-top:16px}
  .hero .hero-art{width:100%}
  .hero .hero-art img{width:88%}
  .hero .tag1{right:10px}
  .hero .tag2{left:12px}
}

/* ---------- 4. Konteks berjalan (panel editorial) ---------- */
.inprogress{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:38px;align-items:center;
  margin:20px 56px 50px;padding:44px 48px;border:1px solid #e8dcfa;border-radius:26px;
  background:radial-gradient(ellipse at 10% 0%,#f2ebff 0,transparent 60%),
    radial-gradient(ellipse at 94% 100%,#edf2ff 0,transparent 55%),#fdfcff}
.ip-label{display:inline-flex;align-items:center;gap:9px;font-size:9.5px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:#6b5a9e}
.ip-label::before{content:"";width:6px;height:6px;border-radius:50%;background:#9c75e5;
  box-shadow:0 0 0 4px #efe6ff;flex:0 0 6px}
.inprogress h2{margin:16px 0 14px;font-size:clamp(24px,2.7vw,34px);letter-spacing:-1.5px;
  line-height:1.24;max-width:620px}
.inprogress p{margin:0;color:var(--muted);max-width:580px}
.ip-side{display:flex;flex-direction:column;align-items:flex-start;
  padding-left:34px;border-left:1px solid #ece3fb}
.ip-num{font-size:64px;font-weight:600;letter-spacing:-3px;color:#3f3b4d;line-height:1}
.ip-unit{font-size:12.5px;font-weight:600;color:#5a4a86;margin-top:6px}
.ip-meta{font-size:10px;letter-spacing:.6px;color:var(--muted-strong);margin-top:14px}
@media(max-width:900px){
  .inprogress{margin:20px 15px 44px;padding:34px 30px;gap:28px;grid-template-columns:minmax(0,1fr) 190px}
  .ip-side{padding-left:26px}
  .ip-num{font-size:52px}
}
@media(max-width:620px){
  .inprogress{margin:20px 0 40px;padding:28px 22px;grid-template-columns:1fr;gap:24px}
  .inprogress h2{letter-spacing:-1.1px}
  .ip-side{padding-left:0;padding-top:22px;border-left:0;border-top:1px solid #ece3fb;width:100%}
  .ip-num{font-size:44px;letter-spacing:-2px}
}

/* ---------- 5. Tantangan (3 kartu) ---------- */
.challenge-card h3{margin:18px 0 10px}
.challenge-card>p{max-width:360px}

/* ---------- 6. Program (5 kartu, desktop 2 kolom) ---------- */
.cards.program-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.labs-card{display:flex;flex-direction:column}
.labs-card .card-top{align-items:center}
.labs-card h3{margin:18px 0 10px}
.labs-card>p{max-width:440px}
.labs-card:last-child{grid-column:1 / -1}
.labs-card:last-child>p{max-width:640px}

.card-details{margin-top:auto;padding-top:16px;border-top:1px solid #f0ecf8}
.card-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;padding:6px 0;font-size:10.5px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--muted-strong);transition:color .2s}
.card-details summary::-webkit-details-marker{display:none}
.card-details summary:hover,.card-details summary:focus-visible{color:var(--purple-ink)}
.card-details .chev{width:8px;height:8px;flex:0 0 auto;margin-right:4px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .2s ease}
.card-details[open] .chev{transform:rotate(-135deg)}
.card-details ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.card-details li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.7;color:var(--muted)}
.card-details li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;
  border-radius:50%;background:#b9a6e4}

.section-cta{margin:30px 0 0;display:flex;justify-content:center}
.section-note{margin:22px auto 0;max-width:760px;text-align:center;
  font-size:11.5px;line-height:1.85;color:var(--muted-strong)}

@media(max-width:760px){
  .cards.program-grid{grid-template-columns:1fr;gap:16px}
  .labs-card:last-child{grid-column:auto}
}
@media(max-width:620px){
  .section-cta .button{width:100%;justify-content:space-between}
}

/* ---------- 7. Perjalanan pendampingan (6 tahap, desktop 3 kolom) ---------- */
.steps.steps-6{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
.steps .step-out{display:block;margin-top:12px;font-size:11px;line-height:1.75;color:var(--muted-strong)}
.steps .step-out b{font-weight:700;color:#6b5a9e}
.process-note{margin:28px 0 0;font-size:11.5px;line-height:1.8;color:var(--muted-strong);text-align:center}
@media(max-width:1150px){.steps.steps-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}}
@media(max-width:620px){
  .steps.steps-6{grid-template-columns:1fr;gap:22px}
  .steps.steps-6 .step-out{grid-column:2}
}
@supports (grid-template-columns:subgrid){
  @media(max-width:620px){.steps.steps-6 .step-out{grid-column:2}}
}

/* ---------- 8. Fokus Hermes ---------- */
.focus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:44px;align-items:center;
  margin:50px 56px;padding:46px 48px;border:1px solid #e8dcfa;border-radius:26px;
  background:radial-gradient(ellipse at 6% 10%,#f4eeff 0,transparent 58%),
    radial-gradient(ellipse at 96% 94%,#eef2ff 0,transparent 55%),#fdfcff}
.focus h2{margin:16px 0 14px;font-size:clamp(25px,2.9vw,38px);letter-spacing:-1.7px;line-height:1.2;max-width:540px}
.focus-copy>p{margin:0;color:var(--muted);max-width:520px}
.focus-points{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.focus-points li{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;color:#4d4b57}
.focus-points li::before{content:"";width:16px;height:16px;border-radius:50%;flex:0 0 16px;
  background:linear-gradient(135deg,#b79cf0,#8fa6ff);box-shadow:inset 0 0 0 4.5px #fdfcff}
.focus-note{margin:0;padding-top:18px;border-top:1px solid #ece3fb;
  font-size:11.5px;line-height:1.85;color:var(--muted-strong)}
@media(max-width:1024px){
  .focus{grid-template-columns:1fr;gap:28px;margin:44px 15px;padding:34px 30px}
  .focus h2{letter-spacing:-1.3px}
}
@media(max-width:620px){
  .focus{margin:36px 0;padding:28px 22px}
  .focus h2{letter-spacing:-1.1px}
}

/* ---------- 9. Contoh pilot (daftar ilustratif) ---------- */
.illustration-note{display:flex;width:fit-content;align-items:center;gap:8px;margin:0 auto 22px;padding:7px 15px;
  border:1px solid #e7dcfb;border-radius:999px;background:#f4f0fd;
  font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:#6b5a9e}
.illustration-note .ico{width:13px;height:13px;color:#8a76c4}

.pilot-list{max-width:900px;margin:0 auto;text-align:left}
.pilot-list>div{display:grid;grid-template-columns:minmax(170px,230px) minmax(0,1fr);gap:26px;
  align-items:baseline;padding:18px 0;border-bottom:1px solid #ece6f7}
.pilot-list>div:first-child{border-top:1px solid #ece6f7}
.pilot-list b{font-size:12.5px;font-weight:700;color:#3f3b4d}
.pilot-list p{margin:0;font-size:13px;line-height:1.75;color:var(--muted)}
@media(max-width:620px){
  .pilot-list>div{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .pilot-list p{font-size:12.5px}
}

/* ---------- 10. Hasil yang disiapkan (4 kartu) ---------- */
.cards.outcome-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;text-align:left}
.outcome-card h3{margin:0 0 10px;font-size:15px}
.outcome-card p{margin:0;font-size:12.5px;line-height:1.75}
@media(max-width:1150px){.cards.outcome-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cards.outcome-grid{grid-template-columns:1fr;gap:14px}}

/* ---------- 11. CTA penutup ---------- */
.cta-panel .cta-side{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
.cta-panel .cta-micro{font-size:11.5px;line-height:1.8;color:var(--muted-strong);margin:0;max-width:330px}
.cta-panel .button{align-self:stretch;justify-content:space-between}
@media(min-width:901px){.cta-panel .button{align-self:flex-start;min-width:280px}}
@media(max-width:620px){.cta-panel .cta-micro{max-width:none}}

/* ---------- 12. Footer ---------- */
.site-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start;
  padding:46px 20px 34px;font-size:11px;color:var(--muted-strong)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid #f2edfa;padding-bottom:24px}
.foot-top .brand{font-size:26px;letter-spacing:-1.3px;gap:5px}
.foot-top p{margin:0;text-align:right;line-height:1.8}
.foot-top small{font-size:9px;letter-spacing:.4px;color:#756d80}

.site-foot .foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  font-size:11px;max-width:660px;color:var(--muted-strong)}
.site-foot h4{margin:0 0 12px;font-size:9.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted-strong)}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-foot li{margin:0}
.site-foot .foot-cols a{color:#5f596e;font-weight:600;display:inline-flex;align-items:center}
.site-foot .foot-cols a:hover{color:var(--purple-ink)}
.site-foot .foot-cols a[aria-current="page"]{color:var(--purple-ink)}

.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid #f2edfa;padding-top:22px;font-size:10.5px;color:#756d80}
.foot-bottom a{font-weight:600;color:var(--muted-strong)}
.foot-bottom a:hover{color:var(--purple-ink)}

@media(max-width:900px){
  .site-foot .foot-cols{max-width:none}
}
@media(max-width:620px){
  .site-foot{padding:34px 20px 28px;gap:22px}
  .foot-top{flex-direction:column;align-items:flex-start;gap:14px}
  .foot-top p{text-align:left}
  .site-foot .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- 13. Motion & cetak ---------- */
@media(prefers-reduced-motion:reduce){
  .nav-toggle-bar,.service,.card-details .chev{transition:none}
  .service:hover{transform:none}
}
@media print{
  header,.mobile-nav,.hero-art,.cta-panel,.contact,.faq,.section-cta{display:none}
}

/* ============================================================
   9. Area sentuh & ketebalan label (audit mobile 390px)
   ------------------------------------------------------------
   Induk memakai teks 8px/7px untuk label mikro hero dan baris
   summary FAQ yang hanya 17px tinggi. Pada layar sentuh itu
   terlalu rapat, jadi dinaikkan di sini tanpa mengubah desktop.
   ============================================================ */
.faq summary{display:block;padding:8px 0;min-height:30px}
.faq summary::marker{font-size:12px}
.site-foot .foot-cols a{display:inline-block;padding:3px 0}

@media(max-width:620px){
  .faq details{padding:12px 4px 16px}
  .faq summary{padding:8px 0}
}

/* ============================================================
   10. Penyelarasan judul (audit keluarga desain 2026-11-03)
   ------------------------------------------------------------
   - h2 panel editorial disamakan dengan situs induk (38px/-1.6px)
   - pada lebar menengah, judul seksi + paragrafnya ditumpuk agar
     judul tidak terjepit jadi 4 baris
   ============================================================ */
/* Catatan: h2 panel editorial dibiarkan memakai clamp milik situs induk
   (24px -> 34px). Judulnya lebih panjang daripada h2 induk, sehingga 34px
   tetap 2 baris di desktop; font, bobot, dan warna tetap sama. */

@media(max-width:1100px){
  .process .section-heading{display:block}
  .process .section-heading>p{max-width:620px;margin:10px 0 0}
}

/* Target sentuh (audit live 390px, 2026-11-03):
   tautan footer ekosistem dan baris FAQ dinaikkan agar >= 24px. */
.faq summary{min-height:36px}
.site-foot .foot-cols a{display:inline-block;padding:6px 0}
@media(max-width:620px){
  .faq summary{min-height:36px}
  .site-foot .foot-cols a{padding:6px 0}
}