:root{
  --white:#FFFFFF;
  --border:#D8DEDE;
  --teal:#C90019;
  --dark:#15201F;
  --muted:#667174;
  --light:#F1F7F6;
  --bg:#FFFFFF;
  --radius:6px;
}
[data-theme="dark"]{
  --white:#081011;
  --bg:#081011;
  --dark:#FFFFFF;
  --border:#292929;
  --muted:#7b7b7b;
  --light:#1a2e2b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;transition:background-color .45s ease, color .45s ease}
body, .navbar, .section, .section .container, .feature-card, .project-card, .quality-card, .step, .faq-item, .badge, .pill, .footer, .footer-top, .footer-bottom, .stats{transition:background-color .45s ease, color .45s ease, border-color .45s ease}
img{transition:filter .45s ease}
body{
  font-family:'Google Sans Flex',system-ui,sans-serif;
  color:var(--dark);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
}
/* JUDUL SECTION saja -> Mozilla Text | Judul dalam card & body -> Google Sans Flex */
.hero-title,
.section-header h2,
.content-block h2,
.process-left h2,
.cta-inner h2{
  font-family:'Mozilla Text',sans-serif;
  font-weight:600;
}
.hero-title span, .section-header h2 span, .content-block h2 span, .process-left h2 span, .cta-inner h2 span{
  font-family:'Mozilla Text',sans-serif;
  font-weight:600;
}
body,
p, li, a, span, small, h3, h4, blockquote, cite, strong,
.badge, .pill, .muted, .hero-desc,
.feature-card h3, .feature-card p,
.project-card h3, .project-card p,
.step h4, .step p,
.quality-img span, .quality-card p,
.faq-q strong, .faq-q small,
.testimonial-text blockquote, .testimonial-text cite,
.stat strong, .stat span,
.footer-col strong, .footer-col a,
.nav-menu a, .btn-primary{
  font-family:'Google Sans Flex',system-ui,sans-serif;
  font-weight:400;
}
.feature-card h3, .project-card h3, .step h4, .quality-img span, .faq-q strong, .stat strong, .testimonial-text blockquote{font-weight:700}
.badge, .muted, .hero-desc, .feature-card p, .project-card p, .step p, .quality-card p, .faq-q small, .stat span, .footer-col a, .footer-brand p{font-weight:400}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1440px;margin:0 auto;padding:0 32px}
@media(min-width:1440px){.container{padding:0 70px}}
/* Kunci lebar halaman fix 1440px — zoom out / layar besar tidak melebar */
.hero,.section,.footer{max-width:1440px;margin-left:auto;margin-right:auto;box-sizing:border-box}

/* Navbar — background blur */
.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:48px;padding:24px 64px;max-width:1440px;margin:0 auto;min-height:90px;box-sizing:border-box}
.nav-menu{display:flex;gap:48px;flex:1;justify-content:center;align-items:center}
.nav-menu a{font-size:16px;color:var(--dark);position:relative;padding-bottom:4px}
.nav-menu a.active,.nav-menu a:hover{color:var(--teal)}
.nav-actions{display:flex;align-items:center;gap:12px}
.lang-dropdown{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;border:none;border-radius:6px;padding:4px 8px;background:transparent;cursor:pointer;font-size:14px;color:var(--dark)}
.lang-btn .flag-navbar{width:25.06px;height:16.71px;display:block;border-radius:2px;object-fit:cover}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:140px;background:#fff;border:none;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:4px;padding:4px;z-index:60;opacity:0;transform:translateY(-8px) scale(0.98);pointer-events:none;visibility:hidden;transition:opacity .22s ease, transform .22s ease, visibility .22s}
.lang-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;visibility:visible}
.lang-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;background:none;border:none;border-radius:4px;cursor:pointer;font-size:14px;text-align:left;color:var(--dark)}
.lang-menu button:not(:last-child){border-bottom:1px solid var(--border)}
/* Projects dropdown — same behavior as language menu */
.has-dropdown{position:relative}
.dropdown-toggle{display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-family:'Google Sans Flex',system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.6;color:var(--dark);padding:0 0 4px;margin:0}
.dropdown-toggle:hover{color:var(--teal)}
.dropdown-toggle i{font-size:16px;transition:transform .25s ease}
.has-dropdown.open .dropdown-toggle i,.m-drop-toggle.open i{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:calc(100% + 12px);left:50%;min-width:240px;background:#fff;border:none;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:4px;padding:4px;z-index:60;opacity:0;transform:translate(-50%,-8px) scale(.98);pointer-events:none;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s}
.dropdown-menu.open{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto;visibility:visible}
.dropdown-menu a{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:4px;font-size:14px;color:var(--dark);white-space:nowrap}
.dropdown-menu a:not(:last-child){border-bottom:1px solid var(--border)}
.dropdown-menu a:hover{background:rgba(227,39,53,0.1);color:var(--teal)}
.m-dropdown{display:flex;flex-direction:column}
.m-drop-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;font-size:16px;color:var(--dark);padding:0;text-align:left}
.m-drop-toggle i{font-size:18px;transition:transform .25s ease}
.m-submenu{display:flex;flex-direction:column;gap:4px;max-height:0;overflow:hidden;transition:max-height .3s ease}
.m-submenu.open{max-height:320px}
.m-submenu a{font-size:15px;color:var(--muted);padding:12px 0 12px 16px}
.m-submenu a:not(:last-child){border-bottom:1px solid var(--border)}
.lang-menu button:hover{background:rgba(227,39,53,0.1)}
.lang-menu button.active{background:rgba(227,39,53,0.1);color:var(--teal)}
.lang-menu img{width:25.06px;height:16.71px;border-radius:2px;object-fit:cover}
.btn-primary{background:var(--teal);color:#fff;padding:12px 20px;border-radius:4px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:background-color .2s ease, border-color .2s ease, color .2s ease;border:1px solid var(--teal);cursor:pointer}
.nav-actions .btn-primary{padding:8px 20px}
.btn-primary:hover{background:#9E0014;border-color:#9E0014}
.btn-large{padding:12px 20px;font-size:16px}
.hamburger{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--dark)}
.mobile-menu{display:flex;flex-direction:column;gap:16px;padding:16px 24px;border-top:1px solid var(--border);background:#fff;position:absolute;top:100%;left:0;right:0;z-index:51;opacity:0;transform:translateY(-10px);pointer-events:none;visibility:hidden;transition:opacity .28s ease, transform .28s ease, visibility .28s}
.mobile-menu a{font-size:16px;opacity:0;transform:translateY(-6px);transition:opacity .25s ease, transform .25s ease}
.mobile-menu.open{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}
.mobile-menu.open a{opacity:1;transform:translateY(0)}
.mobile-menu.open a:nth-child(1){transition-delay:.04s}
.mobile-menu.open a:nth-child(2){transition-delay:.08s}
.mobile-menu.open a:nth-child(3){transition-delay:.12s}
.mobile-menu.open a:nth-child(4){transition-delay:.16s}
.mobile-menu.open a:nth-child(5){transition-delay:.20s}
.mobile-menu.open a:nth-child(6){transition-delay:.24s}
.mobile-overlay{position:fixed;inset:0;background:rgba(8,16,17,0.2);backdrop-filter:blur(1px);opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s;z-index:40;pointer-events:none}
.mobile-overlay.open{opacity:1;visibility:visible;pointer-events:auto}

/* Badge & text */
.badge{display:inline-flex;width:fit-content;max-width:fit-content;align-self:flex-start;border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-size:16px;color:var(--muted);background:#fff;letter-spacing:.02em}
.section-header .badge,.cta-inner .badge{align-self:center}
.testimonial-text .badge{align-self:flex-start}
.text-teal{color:var(--teal)}
.muted{color:var(--muted)}
.center{text-align:center}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--white);padding:0 70px}
.hero-bg{position:absolute;inset:0;background:url('../images/hero-bg.webp') no-repeat right center;background-size:cover;pointer-events:none;transform:translateX(360px);-webkit-mask-image:linear-gradient(to left, black 45%, transparent 92%);mask-image:linear-gradient(to left, black 45%, transparent 92%);animation:heroFadeIn 1.8s ease both;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
/* v2.1.0: hero pakai <img> responsive — background CSS hanya fallback saat slot kosong */
.hero-bg:has(img){background:none}
.hero-bg-default{background:url('../images/hero-bg.webp') no-repeat right center;background-size:cover}
@keyframes heroFadeIn{from{opacity:0}to{opacity:1}}
.hero-bg::before{content:'';position:absolute;inset:0}
.hero-container::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 61% 29%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%) center/cover no-repeat,linear-gradient(to right, var(--white) 0%, transparent 100%) left top/55% 100% no-repeat;pointer-events:none}
[data-theme="dark"] .hero-container::after{background:radial-gradient(circle at 61% 29%, rgba(21,32,31,.45) 0%, rgba(21,32,31,0) 70%) center/cover no-repeat,linear-gradient(to right, var(--white) 0%, transparent 100%) left top/55% 100% no-repeat}
.hero-container{position:relative;z-index:1;display:flex;align-items:center;gap:64px;padding:100px 32px;border-left:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.hero-content{flex:1;min-width:0;max-width:586px;display:flex;flex-direction:column;gap:24px;align-items:flex-start;position:relative;z-index:1}
.hero-center{align-items:center;text-align:center;max-width:800px;margin:0 auto}
.hero-content.hero-center .badge,.hero-content.hero-center .btn-primary{align-self:center}
/* Project documentation carousel — auto-run, pause on hover */
.hero-container{flex-wrap:wrap}
.doc-carousel{flex:1 1 100%;overflow:hidden;margin-top:16px;position:relative;z-index:1}
.doc-track{display:flex;gap:16px;width:max-content;padding-right:16px;animation:docScroll 32s linear infinite}
.doc-carousel:hover .doc-track{animation-play-state:paused}
.doc-track img{width:240px;height:300px;object-fit:cover;border-radius:6px;flex-shrink:0}
@keyframes docScroll{to{transform:translateX(-50%)}}
@media(max-width:768px){
  .doc-track img{width:170px;height:210px}
}
.hero-center .hero-title,.hero-center .hero-desc{text-align:center}
.hero-center .hero-desc{max-width:750px}
.hero-content .btn-primary{width:fit-content;align-self:flex-start}
.hero-title{font-family:'Mozilla Text',sans-serif;font-weight:600;font-size:48px;line-height:1.2;color:var(--dark)}
.hero-desc{font-size:18px;color:var(--muted);line-height:1.7}
.hero-bullets{list-style:none;display:flex;flex-direction:column;gap:4px}
.hero-bullets li{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:18px}
.hero-bullets i{color:var(--teal);font-size:20px;flex-shrink:0}



/* Sections */
.section{padding:0 70px;background:var(--white)}
.section .container{padding:100px 32px;border-left:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:64px}
.two-col{display:flex;align-items:center;gap:64px}
.illustration-card{width:100%;max-width:586px;flex:1 1 586px;height:auto;position:relative;overflow:hidden;border-radius:6px;background:transparent}
.content-block{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.content-block p{font-size:18px;line-height:1.75em;color:var(--muted)}
.content-block h2,.section-header h2,.process-left h2{font-family:'Mozilla Text',sans-serif;font-size:40px;line-height:1.2}
.content-block h2{font-size:40px}
.process-left h2{font-size:40px;line-height:1.2}
.cards-4{display:flex;gap:24px}
.feature-card{flex:1;border:1px solid var(--border);border-radius:6px;padding:24px;display:flex;flex-direction:column;gap:12px;background:#fff}
.icon-box{width:48px;height:48px;background:rgba(227,39,53,0.1);border-radius:6px;display:grid;place-items:center;overflow:hidden}
.icon-box img{width:48px;height:48px;display:block;object-fit:contain}
.feature-card h3{font-size:20px;font-weight:700}
.feature-card p{color:var(--muted);font-size:16px;line-height:1.7}

/* Projects */
.section-header{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.section-header p{max-width:670px;font-size:18px}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.project-card{flex:1;border:1px solid var(--border);border-radius:6px;padding:24px;display:flex;flex-direction:column;gap:12px}
.project-img{height:285px;overflow:hidden;border-radius:6px;background:#f0f0f0}
.project-img img{width:100%;height:100%;object-fit:cover}
.pill{border:1px solid var(--border);border-radius:100px;padding:8px 16px;font-size:14px;display:inline-flex;align-items:center;gap:8px;width:fit-content;color:var(--teal);background:#fff}
.pill i{font-size:18px}
.pill img{width:18px;height:18px;display:block;object-fit:contain;flex-shrink:0}
.project-card h3{font-size:20px;font-weight:700}
.project-card p{color:var(--muted);font-size:16px;line-height:1.7}
.link-arrow{color:var(--teal);font-size:16px;display:flex;align-items:center;gap:6px;font-weight:600}
.link-arrow:hover{gap:10px}

/* Global — 1:1 Figma #2815:37596 outer 0 70, #2815:37597 top container 100 32 50 (1px 1px 0px), stats #2815:41034 — top border global-top dihapus biar divider tunggal dari Projects */
.section.global{padding:0 70px}
.section.global .global-top{padding:100px 32px 50px;display:flex;flex-direction:column;gap:64px;border-left:1px solid var(--border);border-right:1px solid var(--border);border-top:none}
.map-wrap{position:relative}
.map-bg{position:relative;width:100%;max-width:1216px;height:500px;margin:0 auto;border-radius:12px;overflow:hidden;background:transparent;border:none}
.map-img{position:absolute;left:8.04%;top:15.09%;width:83.9%;height:69.6%;display:block;object-fit:contain;pointer-events:none}
.map-flags{position:absolute;inset:0}
.map-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#C90019;border:2px solid #fff;transform:translate(-50%,-50%);z-index:2;animation:mapPulse 2.2s infinite}
@keyframes mapPulse{0%{box-shadow:0 0 0 0 rgba(201,0,25,.55)}70%{box-shadow:0 0 0 14px rgba(201,0,25,0)}100%{box-shadow:0 0 0 0 rgba(201,0,25,0)}}
@media(prefers-reduced-motion:reduce){.map-dot{animation:none}}
.map-flags .flag-badge{transform:translate(10px,calc(-50% + var(--mynur-nudge,0px)));z-index:3}
.map-flags .flag-badge[data-side="left"]{transform:translate(calc(-100% - 10px),-50%)}
.map-flags .flag-badge[data-side="bottom"]{transform:translate(10px,10px)}
.map-flags .flag-badge[data-side="top"]{transform:translate(10px,calc(-100% - 10px))}
.flag-badge{position:absolute;background:#1E1E1E;color:#fff;border-radius:100px;padding:6px 12px;font-size:12px;display:inline-flex;align-items:center;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,.2);white-space:nowrap;transform:translate(0,0)}
.flag-carousel{display:none;width:100%;max-width:none;margin:16px 0 0;overflow:hidden}
.flag-carousel-track{display:flex;gap:10px;width:max-content;overflow:visible;padding:4px 0 8px;scrollbar-width:none}
.flag-carousel-track::-webkit-scrollbar{display:none}
.flag-carousel .flag-badge{position:static;flex:0 0 auto;scroll-snap-align:start}
@keyframes flagScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.flag-icon{width:26px;height:17px;display:block;object-fit:cover;border-radius:2px;flex-shrink:0}
.flag-badge i{font-style:normal;font-size:18px}
.stats{display:flex;max-width:1440px;margin:0 auto;box-sizing:border-box;border-left:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border);border-top:none;border-radius:0;overflow:hidden}
.stat{flex:1;padding:32px;display:flex;flex-direction:column;gap:12px;text-align:center;background:#fff}
.stat:last-child{border-right:none}
.stat strong{font-family:'Mozilla Text',sans-serif;font-size:40px;font-weight:600;color:var(--teal);line-height:1.2}
.stat span{color:var(--muted);font-size:18px}

/* Testimonial */
.testimonial .testimonial-container{flex-direction:row;align-items:stretch;gap:64px}
.testimonial-text{flex:1;display:flex;flex-direction:column;gap:24px;justify-content:center;padding:100px 32px}
.testimonial-text blockquote{font-family:'Mozilla Text',sans-serif;font-size:26px;font-weight:600;line-height:1.5}
.testimonial-text blockquote .text-teal{font-weight:600}
.testimonial-text cite{font-size:20px;font-weight:700;font-style:normal}
.testimonial-text cite span{font-weight:500;color:var(--muted);font-size:16px}
.testimonial-img{flex:1;min-height:476px;overflow:hidden;border-radius:6px;background:#f0f0f0}
.testimonial-img img{width:100%;height:100%;object-fit:cover}

/* Process — override .section .container (column) */
.section .process-container{flex-direction:row;gap:64px;align-items:flex-start}
.process-left{width:586px;flex-shrink:0;display:flex;flex-direction:column;gap:24px;position:sticky;top:100px;height:fit-content;order:1;align-items:flex-start}
.process-left p{font-size:18px;line-height:1.75em;color:var(--muted)}
.process-left .btn-primary{width:fit-content;align-self:flex-start}
.process-steps{flex:1;display:flex;flex-direction:column;gap:16px;order:2}
.section .process-container{justify-content:space-between}
.step{display:flex;gap:12px;border:1px solid var(--border);border-radius:6px;padding:24px;background:#fff}
.step-num{width:48px;height:48px;flex-shrink:0;background:rgba(227,39,53,0.1);border-radius:6px;display:grid;place-items:center;font-weight:700;font-size:20px;color:var(--teal)}
.step h4{font-size:20px;font-weight:700;margin-bottom:6px}
.step p{color:var(--muted);font-size:16px;line-height:1.7}

/* Quality — 4 card horizontal sesuai Figma */
.quality-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.quality-card{border:1px solid var(--border);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.quality-img{height:285px;position:relative;overflow:hidden;background:#eee}
.quality-img img{width:100%;height:100%;object-fit:cover}
.quality-img span{position:absolute;left:24px;bottom:24px;color:#fff;font-size:20px;font-weight:700;line-height:1.2;text-shadow:none;max-width:227px}
.quality-card p{padding:16px 24px 24px;color:var(--muted);font-size:16px;line-height:1.7}

/* CTA Dark — #081011 dominan + radial #C90019 */
.cta-dark{background:radial-gradient(ellipse at 50% 135%, rgba(201,0,25,0.45) 0%, rgba(201,0,25,0) 60%), #081011;padding:0 70px}
.cta-inner{max-width:1300px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center;padding:100px 32px;border-left:1px solid #2E3835;border-right:1px solid #2E3835;box-sizing:border-box}
.badge-dark{background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
.cta-inner h2{color:#fff;font-family:'Mozilla Text',sans-serif;font-size:40px;line-height:1.2;max-width:none;white-space:nowrap}
/* Stepper — model Figma 2921-55892: lingkaran kaca + badge angka + label, garis atas-bawah full */
.timeline-stepper{position:relative;width:100%;max-width:none;margin:0 auto;padding:40px 0 24px;overflow:visible}
.timeline-stepper::before,.timeline-stepper::after{content:'';position:absolute;left:-32px;right:-32px;height:1px;background:#292929;pointer-events:none}
.timeline-stepper::before{top:0}
.timeline-stepper::after{bottom:0}
.timeline-glow{position:absolute;top:0;left:0;height:1px;width:0;opacity:0;background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.55) 25%, rgba(255,255,255,.55) 75%, rgba(255,255,255,0));transition:opacity .3s ease,left .3s ease,width .3s ease;pointer-events:none;z-index:2}
.timeline-glow.glow-bottom{top:auto;bottom:0}
.timeline-glow.on{opacity:1}
.stepper-steps{display:flex;justify-content:space-between;gap:16px;position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 48px}
.stepper-step{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;cursor:pointer}
.step-circle{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.15);backdrop-filter:blur(18.75px);-webkit-backdrop-filter:blur(18.75px);border:1px solid #7B7B7B;color:#fff;display:grid;place-items:center;position:relative;transition:all .3s ease;flex-shrink:0}
.step-circle i{font-size:22px;position:absolute;opacity:0.9}
.step-circle img{width:28px;height:28px;display:block;object-fit:contain;position:absolute}
.step-circle span{font-size:14px;font-weight:700;line-height:1;position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:#fff;color:#15201F;display:grid;place-items:center;align-content:center;border:1px solid #7B7B7B;transition:all .3s ease}
.stepper-step:hover .step-circle,
.stepper-step.active .step-circle{background:var(--teal);border-color:rgba(201,0,25,0.9);color:#fff;box-shadow:0 0 0 4px rgba(201,0,25,0.25),0 8px 28px rgba(201,0,25,0.5)}
.stepper-step.active .step-circle i{color:#fff}
.stepper-step:hover .step-circle span,
.stepper-step.active .step-circle span{background:var(--teal);color:#fff;border-color:var(--teal)}
.step-label{font-size:18px;color:#7B7B7B;text-align:center;white-space:nowrap;transition:color .25s}
.stepper-step:hover .step-label,
.stepper-step.active .step-label{color:#fff}
@media(max-width:768px){
  .timeline-stepper{padding:24px 24px;max-width:560px;width:100%;margin:0 auto;overflow:visible}
  .timeline-stepper::before,.timeline-stepper::after{left:-16px;right:-16px}
  .timeline-glow{display:none}
  .stepper-steps{flex-direction:column;gap:34px;align-items:center;position:relative;z-index:1}
  .stepper-step{flex-direction:column;align-items:center;gap:10px;flex:none;text-align:center;width:100%}
  .step-circle{width:60px;height:60px;position:relative;z-index:2}
  .step-circle i{font-size:24px}
  .step-circle span{width:20px;height:20px;font-size:14px;bottom:-2px;right:-2px}
  .step-label{font-size:18px;white-space:normal;line-height:1.4;text-align:center;max-width:220px;background:rgba(255,255,255,0.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2);color:#fff;padding:6px 14px;border-radius:100px;position:relative;z-index:2}
}
.cta-desc{color:rgba(242,247,246,.65);max-width:790px;font-size:18px;line-height:1.7}
.cta-btns{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}

/* FAQ */
.faq-list{max-width:744px;margin:0 auto;width:100%;display:flex;flex-direction:column}
.faq-item{border:none;border-bottom:1px solid var(--border);background:#fff}
.faq-item:last-child{border-bottom:1px solid var(--border)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:32px;text-align:left;background:none;border:none;cursor:pointer}
.faq-q strong{font-size:20px;font-weight:700;line-height:1.2;display:block;margin-bottom:8px}
.faq-q small{color:var(--muted);font-size:16px;font-weight:500;line-height:1.7;display:block}
.faq-q i{font-size:24px;flex-shrink:0;color:var(--teal);margin-top:4px;transition:transform .3s ease}
.faq-item.open .faq-q i{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;opacity:0;padding:0 32px;color:var(--muted);font-size:16px;line-height:1.7;transition:max-height .35s ease, opacity .3s ease, padding .3s ease}
.faq-item.open .faq-a{max-height:300px;opacity:1;padding:0 32px 32px}

/* Quotation Form — gaya sama seperti FAQ (badge/title/deskripsi + jarak 744px) */
.quote-form{max-width:744px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field label span{font-size:16px;font-weight:700;color:var(--dark);line-height:1.5}
.field label small{font-weight:400;color:var(--muted);font-size:14px}
.field input,.field select,.field textarea{font-family:'Google Sans Flex',system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.5;color:var(--dark);background:#fff;border:1px solid var(--border);border-radius:6px;padding:12px 16px;width:100%;box-sizing:border-box}
.field textarea{resize:vertical;min-height:130px}
.field select{padding-right:40px;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C90019' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.8}
.field select option{color:#15201F}
.quote-submit{align-self:center;margin-top:8px}
.btn-primary:disabled{opacity:.6;cursor:wait}
.form-error{color:#C90019;font-size:14px;text-align:center;margin:0}
@media(max-width:768px){
  .form-row{grid-template-columns:1fr}
}

/* Quote success modal */
.modal-overlay{position:fixed;inset:0;z-index:80;background:rgba(8,16,17,0.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-box{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:40px 32px;max-width:420px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 24px 60px rgba(0,0,0,0.2);transform:translateY(16px) scale(0.98);transition:transform .3s ease}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-icon{width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:30px}
.modal-box h3{font-family:'Mozilla Text',sans-serif;font-size:24px;font-weight:600;color:var(--dark)}
.modal-box p{color:var(--muted);font-size:16px;line-height:1.7}
[data-theme="dark"] .modal-box{border-color:var(--border)}

/* Dark mode overrides — background 081011, text 15201F→#fff, border D8DEDE→2E3835 */
[data-theme="dark"] body{background:var(--white);color:var(--dark)}
[data-theme="dark"] .navbar{background:rgba(8,16,17,0.85);border-color:var(--border)}
[data-theme="dark"] .section{background:var(--white)}
[data-theme="dark"] .section .container,
[data-theme="dark"] .section.global .global-top,
[data-theme="dark"] .stats,
[data-theme="dark"] .footer-top,
[data-theme="dark"] .footer-bottom{border-color:var(--border);background:var(--white)}
[data-theme="dark"] .feature-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .quality-card,
[data-theme="dark"] .step,
[data-theme="dark"] .pill{background:transparent;border-color:var(--border)}
[data-theme="dark"] .stat{background:transparent;border-color:var(--border)}
[data-theme="dark"] .badge{background:transparent;border-color:var(--border);color:var(--muted)}
[data-theme="dark"] .faq-item{background:transparent;border-color:var(--border)}
[data-theme="dark"] .faq-q strong{color:#fff}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{background-color:transparent;border-color:var(--border);color:#fff}
[data-theme="dark"] .stat strong{color:#fff}
/* Invert SVG logo ke putih di dark mode — bullet & numbering tetap hijau, flag & map tidak ikut */
[data-theme="dark"] .logo img,
[data-theme="dark"] .footer-brand img{filter:brightness(0) invert(1)}
[data-theme="dark"] .hero-bullets img{filter:none}
[data-theme="dark"] .step-num{color:var(--teal);background:rgba(227,39,53,0.1)}
[data-theme="dark"] .icon-box{background:rgba(227,39,53,0.1)}
[data-theme="dark"] .map-bg{background:transparent}
[data-theme="dark"] .mobile-menu{background:var(--white);border-color:var(--border)}
[data-theme="dark"] .lang-menu{background:var(--white);border-color:var(--border)}
[data-theme="dark"] .lang-menu button:not(.active){color:#fff}
[data-theme="dark"] .dropdown-menu{background:var(--white)}
[data-theme="dark"] .dropdown-menu a{color:#fff}
[data-theme="dark"] .m-drop-toggle{color:var(--dark)}
[data-theme="dark"] .theme-toggle{background:#081011;border-color:var(--border);color:#fff}
[data-theme="dark"] .theme-toggle:hover{background:rgba(227,39,53,0.1)}
[data-theme="dark"] .hero-title{color:var(--dark)}

/* Footer — sesuai Figma #2815:41201 padding 0 70, Container 64 32 32 */
.footer{background:var(--white);padding:0 70px}
.footer-top{display:flex;gap:32px;padding:64px 32px 32px;border-left:1px solid var(--border);border-right:1px solid var(--border);border-top:none}
.footer-brand{flex:1.4;max-width:388px;display:flex;flex-direction:column;gap:12px}
.footer-brand p{color:var(--muted);font-size:16px;line-height:1.5;max-width:302px}
.footer-col{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.footer-col strong{font-size:16px;font-weight:700}
.footer-col a{color:var(--muted);font-size:16px}
.footer-col a:hover{color:var(--teal)}
.footer-bottom{padding:32px;border-left:1px solid var(--border);border-right:1px solid var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;justify-content:flex-start;align-items:center;max-width:1440px;margin:0 auto;box-sizing:border-box}
.footer-bottom p{color:var(--muted);font-size:16px;text-align:left}

/* Floating theme toggle — kotak 6px, bisa klik tanpa perubahan tema */
.theme-toggle{position:fixed;right:16px;bottom:24px;z-index:60;width:48px;height:48px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--dark);display:grid;place-items:center;font-size:22px;box-shadow:0 8px 24px rgba(0,0,0,.12);cursor:pointer}
.theme-toggle:hover{background:rgba(227,39,53,0.1)}
/* Floating WhatsApp — di atas theme toggle, tanpa fungsi */
.wa-float{position:fixed;right:16px;bottom:84px;z-index:60;width:48px;height:48px;border-radius:50%;border:1px solid #25D366;background:#25D366;color:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 8px 24px rgba(0,0,0,.12);cursor:pointer}
@media(max-width:768px){.theme-toggle{right:12px;bottom:16px;width:44px;height:44px;font-size:20px}.wa-float{right:12px;bottom:72px;width:44px;height:44px;font-size:22px}}

/* Animations — diperlambat biar terlihat */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 1s cubic-bezier(0.22,1,0.36,1), transform 1s cubic-bezier(0.22,1,0.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:.18s}
.delay-2{transition-delay:.36s}
.delay-3{transition-delay:.54s}

/* Testimoni carousel: viewport + track geser + dot navigasi */
.testi-viewport{overflow:hidden}
.testi-track{display:flex;height:100%;transition:transform .6s ease}
.testi-slide{flex:0 0 100%;display:flex;flex-direction:row;align-items:stretch;gap:64px;min-width:0}
.testi-dots{display:flex;gap:8px;justify-content:center;padding-bottom:8px}
.testi-dot{width:10px;height:10px;border-radius:50%;border:none;background:var(--border);cursor:pointer;padding:0;transition:background .3s,width .3s}
.testi-dot.active{background:var(--teal,#C90019);width:28px;border-radius:5px}

/* Responsive */
@media(max-width:1100px){
  .hero-bg{background-position:center;transform:none}
  .cards-4{flex-wrap:wrap}
  .feature-card{flex:1 1 45%;min-width:260px}
  .project-grid{grid-template-columns:1fr}
  .testimonial .testimonial-container{flex-direction:column}
  .testi-slide{flex-direction:column}
  .section .process-container{flex-direction:column}
  .process-left{width:100%;position:static}
  .quality-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{flex-wrap:wrap}
}
@media(max-width:768px){
  .nav-inner{padding:16px 20px;gap:16px}
  .nav-menu{display:none}
  .nav-actions .btn-primary{display:none}
  .hamburger{display:block}
  .hero{padding:0 16px}
  .hero-container{padding:32px 16px;gap:24px}
  .hero-title{font-size:32px}
  .section{padding:0 16px}
  .section.global{padding:0 16px}
  .footer{padding:0 16px}
  .section .container{padding:32px 16px;gap:24px}
  .section.global .global-top{padding:32px 16px}
  .hero-bg::before{background:var(--white);opacity:.6}
  .map-bg{height:fit-content;min-height:0;overflow:visible}
  .map-img{width:100%;height:auto;position:relative;left:auto;top:auto}
  .map-flags{display:none}
  .flag-carousel{display:block;overflow:hidden}
  .flag-carousel-track{width:max-content;overflow:visible;scroll-snap-type:none;animation:flagScroll 16s linear infinite}
  .flag-carousel:hover .flag-carousel-track{animation-play-state:paused}
  .flag-badge{font-size:12px;padding:6px 10px}
  .quality-grid{grid-template-columns:1fr}
  .two-col{flex-direction:column}
  .illustration-card{width:100%;max-width:100%}
  .cards-4{flex-direction:column}
  .stats{flex-direction:column}
  .stat{border:none}
  .cta-dark{padding:0 16px}
  .cta-inner{padding:60px 16px}
  .cta-inner h2{font-size:32px;white-space:normal}
  .footer-top{flex-direction:column;padding:40px 16px}
}