:root{--bg:#F3F5F8;--surface:#fff;--ink:#0E1B2C;--muted:#53627A;--line:#D3DBE6;--accent:#1D4F91;--accent-ink:#fff;--amber:#D9962B;--deep:#0E1B2C;--deep-ink:#E7ECF3;--deep-mute:#9AA8BC;--tint:#DCE6F3;--glow1:rgba(29,79,145,.2);--glow2:rgba(217,150,43,.18);--wa:#168A4A;--wa2:#22B05F;--g1:#1D4F91;--g2:#3FA0D0;
--head:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--body:"Source Serif 4",Georgia,"Times New Roman",serif;--maxw:1140px;--r:12px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B1420;--surface:#122033;--ink:#E7ECF3;--muted:#9AA8BC;--line:#243750;--accent:#6AA2E8;--accent-ink:#0B1420;--tint:#1B3350;--deep:#070D15;--glow1:rgba(106,162,232,.22);--glow2:rgba(217,150,43,.14);--wa:#2DBE6C;--wa2:#6BDB9B;--g1:#4F8FD9;--g2:#7AD0E6;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0B1420;--surface:#122033;--ink:#E7ECF3;--muted:#9AA8BC;--line:#243750;--accent:#6AA2E8;--accent-ink:#0B1420;--tint:#1B3350;--deep:#070D15;--glow1:rgba(106,162,232,.22);--glow2:rgba(217,150,43,.14);--wa:#2DBE6C;--wa2:#6BDB9B;--g1:#4F8FD9;--g2:#7AD0E6;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.7;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
a{color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
h1,h2,h3,h4{font-family:var(--head);line-height:1.12;letter-spacing:-.025em;margin:0}
h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:700}h3{font-size:1.3rem;font-weight:700}
p{margin:0}.mute{color:var(--muted)}
section{padding:5rem 0}
.btn{display:inline-block;font-family:var(--head);font-weight:700;padding:.8rem 1.4rem;border-radius:10px;text-decoration:none;background:linear-gradient(135deg,var(--g1),var(--g2));color:var(--accent-ink);transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn.wa{background:linear-gradient(135deg,var(--wa),var(--wa2));color:#fff}.btn.light{background:#fff;color:#0E1B2C}.btn.i{display:inline-flex;align-items:center;gap:.55rem}.wi{width:1.3em;height:1.3em;flex:none;fill:currentColor}.btn.light .wi{color:#168A4A}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.inl{color:var(--accent);text-underline-offset:3px}
/* hero */
.hero{position:relative;overflow:hidden;padding:4.5rem 0 5.5rem;background-image:radial-gradient(60% 85% at 88% 8%,var(--glow1),transparent 70%),radial-gradient(55% 75% at 4% 95%,var(--glow2),transparent 70%),linear-gradient(160deg,var(--bg) 0%,var(--tint) 100%);border-bottom:1px solid var(--line)}
.hg{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:800}
.hero .lead{font-size:1.2rem;color:var(--muted);margin:1.4rem 0 2rem;max-width:56ch}
.hours{margin-top:1rem;font-size:.95rem;color:var(--muted)}
.tests{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;box-shadow:0 22px 44px -30px rgba(14,27,44,.5)}
.tests h2{font-size:1.05rem;margin-bottom:1rem}
.tests ol{list-style:none;margin:0;padding:0;counter-reset:t}
.tests li{counter-increment:t;display:grid;grid-template-columns:2rem 1fr 1.8rem;align-items:center;gap:.8rem;padding:.85rem 0;border-top:1px solid var(--line);line-height:1.4}
.tests li::before{content:counter(t);font-family:var(--head);font-weight:800;color:var(--accent);font-size:1.4rem;line-height:1}
.tests li span{display:block;color:var(--muted);font-size:.9rem}
.ck{display:block;width:1.8rem;height:1.8rem;flex:none}
/* animasi ringan (CSS/SVG, tanpa library JS) */
.chart{position:absolute;left:-2.2rem;top:-2.6rem;z-index:2;display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.45rem .95rem .45rem .5rem;font-family:var(--head);font-weight:700;font-size:.85rem;line-height:1.25;box-shadow:0 16px 30px -18px rgba(14,27,44,.6)}
.chart small{display:block;font-weight:500;color:var(--muted);font-size:.75rem}
.bars{width:84px;height:59px;flex:none}
.bars rect{fill:#4F8FD9;transform-box:fill-box;transform-origin:bottom;animation:grow 3.6s cubic-bezier(.2,.8,.2,1) infinite}
.bars rect:nth-of-type(2){animation-delay:.2s}.bars rect:nth-of-type(3){animation-delay:.4s}.bars rect:nth-of-type(4){animation-delay:.6s}
.bars path{fill:none;stroke:var(--amber);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:140;animation:draw 3.6s ease infinite}
@keyframes grow{0%{transform:scaleY(0)}22%,86%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes draw{0%,28%{stroke-dashoffset:140}58%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:140}}
.pulse{position:relative;width:150px;height:150px;margin-top:1.5rem}
.pulse i{position:absolute;inset:0;margin:auto;border:3px solid #4F8FD9;border-radius:50%;width:20px;height:20px;opacity:0;animation:ring 3s ease-out infinite}
.pulse i:nth-child(2){animation-delay:1s}.pulse i:nth-child(3){animation-delay:2s}
.pulse b{position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;background:var(--amber)}
@keyframes ring{0%{width:20px;height:20px;opacity:.9}100%{width:150px;height:150px;opacity:0}}
/* layanan */
.lede{max-width:62ch;margin-top:.6rem}
.svg6{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem;margin-top:2.5rem}
.sv{grid-column:span 2;display:flex;flex-direction:column;gap:.85rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.sv.w{grid-column:span 3}
.sv .ic{width:64px;height:64px;padding:.6rem;border-radius:14px;background:linear-gradient(135deg,var(--tint),var(--surface));border:1px solid var(--line);color:var(--accent)}
.sv h3 a{text-decoration:none}.sv h3 a:hover{text-decoration:underline}
.sv p{color:var(--muted);font-size:.98rem}
.sv .go{margin-top:auto;font-family:var(--head);font-weight:700;color:var(--accent);text-underline-offset:3px}
.sv.hot{background:linear-gradient(135deg,#1D4F91,#2B7CC4 60%,#3FB0C8);border:0;color:#fff}
.sv.hot.k{background:linear-gradient(135deg,#0E1B2C,#173A63 55%,#1D4F91)}.sv.hot p{color:rgba(255,255,255,.92)}.sv.hot .ic{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:#fff}
.sv.hot .kw li{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}.sv.hot .go{color:#fff}
/* siapa kami */
.about{color:#E7ECF3;background:radial-gradient(60% 90% at 100% 0%,rgba(63,176,200,.4),transparent 60%),radial-gradient(55% 80% at 0% 100%,rgba(217,150,43,.26),transparent 60%),linear-gradient(135deg,#0E1B2C 0%,#173A63 55%,#1D4F91 100%)}
.ag{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:start}
.about p{color:rgba(231,236,243,.84)}.about h2,.about h3{color:#fff}.about h3{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:1.2rem}
.about .big{font-family:var(--head);font-size:1.3rem;color:#fff;margin-top:1rem;line-height:1.4}
.about .inl{color:#BBD6FA}
/* pengalaman */
.exp3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:2.5rem 0}
.exp3 div{border-top:2px solid var(--accent);padding-top:1rem}.exp3 h3{font-size:1.1rem;margin-bottom:.6rem}.exp3 p{color:var(--muted);font-size:.98rem}
/* layanan berdampingan */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.col{display:flex;flex-direction:column;gap:1rem;min-width:0}
.duo .gband{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.2rem}
.sl{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.si{position:relative;display:grid;grid-template-columns:56px 1fr;gap:1rem;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem 1.1rem 1.4rem;overflow:hidden}
.si::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.col.k .si::before{background:linear-gradient(180deg,#F3C060,#D0663A)}
.col.n .si::before{background:linear-gradient(180deg,#1D4F91,#3FB0C8)}
.si .ic{width:56px;height:56px;padding:.5rem;border-radius:14px;color:#fff}
.col.k .si .ic{background:linear-gradient(135deg,#0E1B2C,#1D4F91)}
.col.n .si .ic{background:linear-gradient(135deg,#1D4F91,#3FB0C8)}
.si h3{font-size:1.1rem}.si h3 a{text-decoration:none}.si h3 a:hover{text-decoration:underline;color:var(--accent)}
.si p{color:var(--muted);font-size:.95rem;line-height:1.55;margin-top:.3rem}
@media (max-width:900px){.duo{grid-template-columns:1fr}}
/* grup layanan */
.gband{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;padding:clamp(1.8rem,4vw,3rem);border-radius:22px;color:#fff}
.gband>div{max-width:68ch}
.gb-kons{background:radial-gradient(60% 110% at 100% 0%,rgba(217,150,43,.5),transparent 60%),linear-gradient(135deg,#0E1B2C,#173A63 55%,#1D4F91)}
.gb-non{background:radial-gradient(60% 110% at 100% 0%,rgba(63,176,200,.55),transparent 60%),radial-gradient(50% 90% at 0% 100%,rgba(217,150,43,.25),transparent 60%),linear-gradient(135deg,#1D4F91,#2B7CC4 60%,#3FB0C8)}
.gband h2{color:#fff}.gband p{margin-top:.7rem;color:rgba(255,255,255,.92)}
.gband .inl{color:#fff}
.eyebrow{font-family:var(--head);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:.5rem}
.grp .svg6{margin-top:1.25rem}
.grp+.grp{padding-top:0}
/* klien */
.clients{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.cc{flex:0 1 calc(25% - .75rem);min-width:0;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1rem 1.1rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;overflow:hidden}
.cc::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#1D4F91,#3FB0C8,#D9962B)}
.lgo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:100%;height:84px;border-radius:10px;overflow:hidden;position:relative}
.lgo.has-img{background:#fff;padding:.5rem}.lgo.has-img .mono{display:none}
.lgo img{display:block;max-width:100%;max-height:68px;width:auto;height:auto;object-fit:contain;position:static}
.mono{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:1.25rem;color:#fff;background:linear-gradient(135deg,#1D4F91,#3FB0C8)}
.cc:nth-child(3n+2) .mono{background:linear-gradient(135deg,#0E1B2C,#1D4F91)}
.cc:nth-child(3n) .mono{background:linear-gradient(135deg,#E8923F,#D0663A)}
.cc b{display:block;font-family:var(--head);font-weight:700;font-size:.98rem;line-height:1.3;margin-top:.25rem;overflow-wrap:anywhere}
.cc small{display:block;color:var(--muted);font-size:.82rem;font-family:var(--head);line-height:1.3;margin-top:auto}
.cc a{text-decoration:none}.cc a:hover b{color:var(--accent);text-decoration:underline}
/* portfolio */
.wh{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.pf2{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.pc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pc-main{display:flex;flex-direction:column}
.pc-h{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding:.9rem 1.4rem;color:#fff;font-family:var(--head);font-weight:500;font-size:.92rem}
.pc-h b{font-weight:700}
.g1{background:linear-gradient(135deg,#1D4F91,#2B7CC4 55%,#3FB0C8)}
.g2{background:linear-gradient(135deg,#0E1B2C,#173A63 60%,#1D4F91)}
.g3{background:linear-gradient(135deg,#F3C060,#E8923F 55%,#D0663A);color:#2A1706}
.g4{background:linear-gradient(135deg,#1F6F66,#1F9E8C 55%,#79CDAE)}
.pc-b{display:flex;flex-direction:column;gap:.85rem;padding:1.4rem;flex:1}
.pc h3{font-size:1.2rem}.pc h3 a{text-decoration:none}.pc h3 a:hover{text-decoration:underline}
.pc p{color:var(--muted);font-size:.98rem}.pc p.sub{font-family:var(--head);font-weight:500;color:var(--accent);font-size:1.02rem}
.kw{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.kw li{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:.15rem .75rem;font-family:var(--head);font-size:.84rem;font-weight:500;color:var(--muted)}
.kw a{text-decoration:none;color:var(--accent)}.kw a:hover{text-decoration:underline}
.more{margin-top:auto;font-family:var(--head);font-weight:700;color:var(--accent);text-underline-offset:3px}
.pc.feat{grid-column:1/-1;display:grid;grid-template-columns:1.15fr .85fr}
.side{color:#fff;padding:1.8rem;display:flex;flex-direction:column;gap:1.1rem;justify-content:center}
.side h4{margin:0;font-family:var(--head);font-size:1.1rem}
.side ol{list-style:none;margin:0;padding:0;counter-reset:q;display:grid;gap:.9rem}
.side li{counter-increment:q;display:grid;grid-template-columns:1.6rem 1fr;gap:.6rem;line-height:1.4;font-size:.95rem}
.side li::before{content:counter(q);font-family:var(--head);font-weight:800;font-size:1.3rem;line-height:1.1;opacity:.85}
.side b{display:block;font-family:var(--head)}.side span{opacity:.92}
/* faq */
.faq{max-width:820px;margin-top:2rem;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;font-family:var(--head);font-weight:700;font-size:1.08rem;line-height:1.35;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:1rem;font-size:1.5rem;color:var(--accent);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--muted);padding:0 2rem 1.3rem 0}
/* bantuan */
.help{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;padding:clamp(2rem,5vw,3.8rem);border-radius:24px;color:#fff;background:radial-gradient(70% 90% at 100% 0%,rgba(63,176,200,.55),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(217,150,43,.38),transparent 60%),linear-gradient(135deg,#0E1B2C,#1D4F91)}
.help h2{color:#fff}.help p{margin-top:.7rem;color:rgba(255,255,255,.88);max-width:44ch}
.help .btn{margin-top:1.5rem}.help .hrs{font-size:.92rem;margin-top:1rem}
.chat{display:grid;gap:.7rem;padding:1.2rem;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);font-size:.97rem}
.ch{display:flex;flex-direction:column;padding-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.2);font-family:var(--head)}.ch small{color:rgba(255,255,255,.78)}
.msg{max-width:90%;padding:.7rem .95rem;border-radius:14px;line-height:1.45;background:#fff;color:#0E1B2C;border-top-left-radius:4px;display:flex;gap:.6rem;align-items:center}
.chips{justify-self:end;display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.chips span{background:#DCF8C6;color:#10301c;border-radius:99px;padding:.3rem .85rem;font-family:var(--head);font-weight:500;font-size:.9rem}
/* form kontak */
.cf{display:grid;gap:.75rem}
.cf .r2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.cf label{display:grid;gap:.3rem;font-family:var(--head);font-weight:500;font-size:.86rem;color:rgba(255,255,255,.9)}
.cf label i{font-style:normal;color:rgba(255,255,255,.65);font-weight:400}
.cf input,.cf select,.cf textarea{width:100%;font:inherit;font-family:var(--body);font-size:.97rem;color:#0E1B2C;background:#fff;border:1px solid transparent;border-radius:10px;padding:.6rem .8rem;line-height:1.4}
.cf textarea{resize:vertical;min-height:84px}
.cf input::placeholder,.cf textarea::placeholder{color:#6B7A90}
.cf input:focus-visible,.cf select:focus-visible,.cf textarea:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.cf .btn{margin-top:.25rem;justify-content:center;width:100%;border:0;cursor:pointer;font-size:1rem}
.cf .nt{font-size:.85rem;color:rgba(255,255,255,.78);display:flex;gap:.45rem;align-items:center}
.cf .nt .ck{width:1.2em;height:1.2em;flex:none}
@media (max-width:520px){.cf .r2{grid-template-columns:1fr}}
/* responsif */
@media (max-width:900px){
 section{padding:3.8rem 0}
 .hg,.ag{grid-template-columns:1fr;gap:2rem}
 .svg6, .sv,.sv.w{grid-column:auto}
 .cc{flex-basis:calc(50% - .5rem)}
 .chart{left:.8rem}.tests{margin-top:2.6rem}
}
@media (max-width:400px){.cc{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.bars rect,.bars path,.pulse i{animation:none}.bars rect{transform:none}.bars path{stroke-dashoffset:0}.pulse i{opacity:.35;width:90px;height:90px}}