/* M78 Labs — shared stylesheet untuk halaman solusi (industri/pabrik). Selaras dgn homepage. */
:root{ --paper:#F5F8FB; --white:#fff; --tint:#EAF0F6; --ink:#1B2A3A; --ink-2:#33475B; --muted:#5F7186; --faint:#98A7B8; --line:#DCE4EE;
  --blue:#5E7E9E; --blue-dk:#3F5D7C; --blue-hi:#8AA7C2; --glow:#B4C8DC; --yolk:#E4B24A; --pine:#1B2A3A;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --shadow:0 24px 60px -30px rgba(20,32,46,.34); --shadow-sm:0 10px 30px -18px rgba(20,32,46,.22); --maxw:min(1560px,94vw); --gutter:clamp(1.2rem,4vw,3rem); }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:74px; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.66; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:linear-gradient(rgba(46,62,78,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(46,62,78,.04) 1px,transparent 1px); background-size:34px 34px,34px 34px; }
h1,h2,h3{ margin:0; letter-spacing:-.02em; }
a{ color:inherit; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.ey{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-dk); font-weight:600; margin:0 0 1rem; }
.h2{ font-size:clamp(1.9rem,4vw,2.9rem); font-weight:800; line-height:1.07; max-width:26ch; text-wrap:balance; }
.lead-p{ font-size:1.14rem; color:var(--muted); max-width:62ch; margin:1rem 0 2.6rem; } .lead-p b{ color:var(--ink); }
section.block{ padding-block:clamp(3.2rem,6.5vw,6rem); }
html.js .reveal{ opacity:0; transform:translateY(24px) scale(.986); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.08s; } .d2{ transition-delay:.16s; } .d3{ transition-delay:.24s; }
.scrollbar{ position:fixed; top:0; left:0; height:3px; width:100%; background:var(--yolk); transform:scaleX(0); transform-origin:0 50%; z-index:100; will-change:transform; }

.topbar{ background:var(--ink); color:#C7D6E4; text-align:center; padding:.62rem 1rem; font-size:clamp(.76rem,1.6vw,.9rem); line-height:1.5; }
.topbar b.hl{ color:var(--yolk); font-weight:700; }
.nav{ position:sticky; top:0; z-index:40; background:rgba(245,248,251,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav .wrap{ max-width:none; }
.nav .row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; }
.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); } .brand svg{ width:30px; height:30px; display:block; } .brand b{ font-size:.86rem; letter-spacing:.2em; font-weight:800; }
.nav-right{ display:flex; align-items:center; gap:1.6rem; } .nav-links{ display:none; gap:1.6rem; }
@media (min-width:880px){ .nav-links{ display:flex; } }
.nav-links a{ font-size:.87rem; font-weight:600; color:var(--muted); text-decoration:none; } .nav-links a:hover{ color:var(--ink); }
.btn-sm{ font-size:.82rem; font-weight:700; color:#fff; background:var(--ink); padding:.6rem 1.15rem; border-radius:10px; text-decoration:none; white-space:nowrap; transition:background .16s,transform .16s; } .btn-sm:hover{ background:var(--blue-dk); transform:translateY(-1px); }
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-size:.96rem; font-weight:700; color:#fff; background:var(--blue); padding:.9rem 1.6rem; border-radius:12px; text-decoration:none; box-shadow:0 14px 30px -16px rgba(94,126,158,.6); transition:background .16s,transform .16s; }
.btn:hover{ background:var(--blue-dk); transform:translateY(-2px); } .btn .arw{ transition:transform .16s; } .btn:hover .arw{ transform:translateX(3px); }

.crumbs{ font-size:.82rem; color:var(--muted); padding-top:1.4rem; } .crumbs a{ color:var(--blue-dk); text-decoration:none; font-weight:600; } .crumbs a:hover{ text-decoration:underline; } .crumbs span{ color:var(--faint); margin:0 .4rem; }

.hero{ position:relative; overflow:hidden; padding-block:clamp(2.4rem,5vw,4.2rem);
  background:radial-gradient(60% 60% at 84% 6%,rgba(180,200,220,.2),transparent 70%),radial-gradient(46% 46% at 2% 100%,rgba(228,178,74,.08),transparent 70%); }
.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-dk); font-weight:600; background:var(--white); border:1px solid var(--line); padding:.45rem .85rem; border-radius:999px; box-shadow:var(--shadow-sm); margin-bottom:1.4rem; }
.eyebrow .pin{ width:7px; height:7px; border-radius:50%; background:var(--yolk); box-shadow:0 0 0 4px rgba(228,178,74,.16); }
.hero h1{ font-size:clamp(2.05rem,4.6vw,3.4rem); line-height:1.06; font-weight:800; text-wrap:balance; max-width:20ch; } .hero h1 em{ font-style:normal; color:var(--blue); }
.hero .sub{ font-size:1.16rem; color:var(--muted); max-width:60ch; margin:1.3rem 0 1.9rem; } .hero .sub b{ color:var(--ink-2); font-weight:600; }
.hproof{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.6rem; } .hproof span{ font-family:var(--mono); font-size:.66rem; color:var(--muted); background:var(--white); border:1px solid var(--line); border-radius:999px; padding:.4rem .74rem; } .hproof span b{ color:var(--blue-dk); font-weight:700; }

.band{ background:var(--white); border-block:1px solid var(--line); } .band-tint{ background:linear-gradient(180deg,var(--tint),var(--paper)); }
.dark{ color:#E4EDF4; background:var(--pine); background-image:radial-gradient(50% 80% at 12% 0%,rgba(180,200,220,.14),transparent 60%),radial-gradient(45% 90% at 100% 100%,rgba(228,178,74,.10),transparent 60%); }
.dark .ey{ color:var(--glow); } .dark .h2{ color:#fff; }

/* problem list */
.plist{ display:grid; gap:1rem; margin-top:1rem; } @media (min-width:760px){ .plist{ grid-template-columns:repeat(2,1fr); } }
.pitem{ background:var(--white); border:1px solid var(--line); border-left:3px solid var(--yolk); border-radius:12px; padding:1.3rem 1.4rem; box-shadow:var(--shadow-sm); }
.pitem b{ display:block; color:var(--ink); font-weight:700; margin-bottom:.3rem; } .pitem p{ margin:0; color:var(--muted); font-size:.96rem; }

/* solution steps */
.flow{ display:grid; gap:1.3rem; margin-top:1rem; } @media (min-width:720px){ .flow{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1060px){ .flow{ grid-template-columns:repeat(3,1fr); } }
.fstep{ padding:1.6rem 1.4rem; border-radius:16px; background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.fstep .idx{ font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--blue); }
.fstep h3{ font-size:1.14rem; font-weight:800; margin:.5rem 0 .4rem; } .fstep p{ margin:0; color:var(--muted); font-size:.95rem; }

/* impact stats (dark) */
.proof-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem 1rem; } @media (min-width:820px){ .proof-grid{ grid-template-columns:repeat(3,1fr); } }
.stat{ border-left:2px solid rgba(180,200,220,.5); padding-left:1rem; } .stat b{ display:block; font-size:clamp(1.3rem,2.8vw,1.9rem); font-weight:800; color:#fff; line-height:1.05; } .stat span{ display:block; margin-top:.45rem; font-size:.88rem; color:#AEC1D4; max-width:30ch; }

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.4rem; } .tags .tl{ flex-basis:100%; font-family:var(--mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--faint); margin-bottom:.15rem; } .tag{ font-family:var(--mono); font-size:.62rem; font-weight:600; color:var(--blue-dk); background:var(--tint); border:1px solid var(--line); border-radius:6px; padding:.28rem .5rem; }

/* related solusi */
.related{ display:grid; gap:1.1rem; margin-top:1rem; } @media (min-width:760px){ .related{ grid-template-columns:repeat(3,1fr); } }
.rcard{ display:block; text-decoration:none; background:var(--white); border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.4rem; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s,border-color .2s; }
.rcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(94,126,158,.4); }
.rcard .rk{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-dk); font-weight:700; }
.rcard h3{ font-size:1.1rem; font-weight:800; margin:.5rem 0 .35rem; color:var(--ink); } .rcard p{ margin:0; color:var(--muted); font-size:.92rem; } .rcard .go{ display:inline-block; margin-top:.7rem; color:var(--blue); font-weight:700; font-size:.9rem; }

.faq-list{ display:grid; gap:.8rem; max-width:62rem; margin-top:1rem; }
.faq-item{ border:1px solid var(--line); border-radius:13px; background:var(--white); overflow:hidden; } .faq-item summary{ cursor:pointer; list-style:none; padding:1.1rem 1.4rem; font-weight:700; font-size:1.04rem; display:flex; justify-content:space-between; gap:1rem; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; color:var(--blue); font-weight:700; font-size:1.5rem; line-height:1; } .faq-item[open] summary::after{ content:"–"; } .faq-item .ans{ padding:0 1.4rem 1.2rem; color:var(--muted); font-size:.98rem; }

.invite{ text-align:center; } .invite h2{ font-size:clamp(1.9rem,4.6vw,3.1rem); font-weight:800; color:#fff; line-height:1.06; max-width:22ch; margin:0 auto 1rem; text-wrap:balance; } .invite h2 em{ font-style:normal; color:var(--yolk); }
.invite p{ color:#AEC1D4; font-size:1.14rem; max-width:50ch; margin:0 auto 2.4rem; } .invite .btn{ background:var(--yolk); color:#3a2e08; box-shadow:0 16px 40px -16px rgba(228,178,74,.5); } .invite .btn:hover{ background:#fff; color:var(--pine); } .invite .fine{ display:block; margin-top:1.2rem; font-family:var(--mono); font-size:.72rem; color:#8098AE; }

footer{ background:#101A24; color:#90A0B4; padding-block:2.6rem 3.2rem; } .foot{ display:flex; flex-wrap:wrap; gap:1rem 2.5rem; justify-content:space-between; align-items:center; font-size:.84rem; } .foot .fb{ display:flex; align-items:center; gap:.55rem; color:#fff; font-weight:800; letter-spacing:.16em; font-size:.82rem; } .foot a{ color:var(--glow); text-decoration:none; } .foot a:hover{ color:#fff; }

a:focus-visible,.btn:focus-visible,.btn-sm:focus-visible,summary:focus-visible{ outline:3px solid rgba(94,126,158,.5); outline-offset:3px; border-radius:6px; }

.cmodal{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:1.2rem; }
.cmodal.open{ display:flex; }
.cmodal .bg{ position:absolute; inset:0; background:rgba(20,32,46,.55); backdrop-filter:blur(4px); }
.cmodal .card{ position:relative; z-index:1; width:min(440px,94vw); max-height:92vh; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 40px 90px -30px rgba(20,32,46,.55); padding:2rem 1.8rem; text-align:center; }
.cmodal h3{ font-size:1.4rem; font-weight:800; margin-bottom:.4rem; }
.cmodal .lead{ color:var(--muted); font-size:.95rem; margin:0 0 1.3rem; }
.cmodal .x{ position:absolute; top:.9rem; right:.9rem; width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--paper); color:var(--muted); cursor:pointer; }
.cform{ display:grid; gap:.55rem; text-align:left; }
.cform input,.cform textarea{ width:100%; font:inherit; font-size:.92rem; padding:.7rem .85rem; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); }
.cform input:focus,.cform textarea:focus{ outline:none; border-color:var(--blue); background:#fff; }
.cform textarea{ resize:vertical; min-height:72px; }
.cform .submit{ margin-top:.2rem; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.8rem; border:none; border-radius:11px; background:var(--blue); color:#fff; font-weight:700; font-size:.98rem; cursor:pointer; } .cform .submit:hover{ background:var(--blue-dk); } .cform .submit:disabled{ opacity:.6; cursor:default; }
.csuccess{ display:none; color:#2E7D4F; font-weight:700; padding:1.2rem .4rem; } .csuccess.show{ display:block; }
.cnote{ font-size:.78rem; color:var(--muted); margin:.9rem 0 0; display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap; } .cnote b{ color:var(--ink); font-family:var(--mono); } .cnote .copy{ font-family:var(--mono); font-size:.68rem; font-weight:700; color:var(--blue-dk); background:#fff; border:1px solid var(--line); border-radius:8px; padding:.4rem .7rem; cursor:pointer; } .cnote .copy.done{ color:#2E7D4F; border-color:#9FD3B4; }
.cwarn{ font-size:.74rem; color:var(--muted); margin:.7rem 0 0; line-height:1.45; text-align:left; } .cwarn b{ color:var(--ink-2); }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } html.js .reveal{ opacity:1; transform:none; transition:none; } }