:root{
    --bg:#fbfaf6;
    --paper:#ffffff;
    --ink:#21140c;
    --muted:#6f665e;
    --brown:#5b2b0d;
    --brown-2:#7a3f12;
    --gold:#f1ad00;
    --gold-2:#ffc83d;
    --green:#6f8a22;
    --line:#eadfc8;
    --shadow:0 18px 45px rgba(74,46,18,.10);
    --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Manrope",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.top-progress{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--brown));width:0;z-index:1000}
.hero{min-height:760px;background:radial-gradient(circle at 86% 5%,rgba(241,173,0,.16),transparent 23%),linear-gradient(180deg,#fffdf8 0%,#fbfaf6 100%);overflow:hidden;border-bottom:1px solid var(--line)}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--brown);font-size:24px;box-shadow:inset 0 0 0 1px rgba(91,43,13,.15)}
.brand strong{display:block;font-family:"Plus Jakarta Sans";font-size:18px;letter-spacing:.5px}
.brand small{display:block;color:var(--muted);font-size:11px;margin-top:-2px}
.nav-links{display:flex;gap:26px;font-size:14px;font-weight:700}
.nav-links a{position:relative}
.nav-links a:after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:var(--gold);transition:.25s}
.nav-links a:hover:after{width:100%}
.menu-toggle{display:none;border:0;background:transparent;font-size:25px;color:var(--brown);cursor:pointer}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:64px 0 90px}
.eyebrow,.section-heading>span,.mini-label{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800;color:var(--brown)}
.eyebrow:before,.section-heading>span:before,.mini-label:before{content:"";width:28px;height:3px;border-radius:99px;background:var(--gold)}
.hero h1{font-family:"Plus Jakarta Sans";font-size:clamp(58px,7vw,92px);line-height:.95;margin:24px 0 14px;letter-spacing:-.045em}.hero h1 span{color:var(--brown)}
.hero-subtitle{font-weight:700;max-width:650px;color:#352a22;margin:0 0 24px}
.hero-band{display:inline-block;background:linear-gradient(90deg,var(--gold),#f7c445);color:white;font-weight:800;text-transform:uppercase;padding:10px 18px;border-radius:10px;box-shadow:0 8px 22px rgba(241,173,0,.25)}
.hero-kicker{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;font-size:15px}.hero-kicker span{color:var(--gold)}
.hero-actions{display:flex;gap:12px;margin-top:30px}.btn{padding:13px 19px;border-radius:13px;font-weight:800;font-size:14px;transition:.25s}.btn-primary{background:var(--brown);color:white;box-shadow:0 10px 25px rgba(91,43,13,.20)}.btn-primary:hover{transform:translateY(-2px);background:#492108}.btn-ghost{border:1px solid var(--line);background:white}.btn-ghost:hover{border-color:var(--gold);color:var(--brown)}
.hero-visual{position:relative;min-height:500px}.quote-card{position:relative;width:min(430px,92%);margin-left:auto;background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:22px;padding:26px 28px 24px;box-shadow:var(--shadow);backdrop-filter:blur(8px);z-index:5}.quote-mark{position:absolute;top:3px;left:19px;font-family:serif;font-size:64px;color:var(--brown);opacity:.9}.quote-card p{position:relative;margin:16px 0 0 28px;font-size:18px;line-height:1.55;font-weight:700}
.village-scene{position:absolute;left:0;right:0;bottom:0;height:310px}.sun{position:absolute;right:80px;top:25px;width:58px;height:58px;border-radius:50%;background:rgba(241,173,0,.18)}.cloud{position:absolute;width:78px;height:26px;border-radius:50px;background:#eee0c8;opacity:.75}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:32px;height:32px;left:12px;top:-13px}.cloud:after{width:42px;height:42px;right:7px;top:-18px}.c1{right:5px;top:20px}.c2{left:38px;top:80px;transform:scale(.7)}
.hill{position:absolute;left:-10%;width:120%;border-radius:50% 50% 0 0/100% 100% 0 0}.hill-back{height:145px;bottom:44px;background:#b9c442;transform:rotate(-3deg)}.hill-front{height:135px;bottom:0;background:linear-gradient(160deg,#87a23b,#7f9631);transform:rotate(2deg)}
.house{position:absolute;width:82px;height:58px;background:#fffdf7;border:2px solid #6b3a13;bottom:82px;z-index:2;box-shadow:0 9px 20px rgba(65,40,13,.12)}.house:before{content:"";position:absolute;left:-8px;top:-36px;border-left:48px solid transparent;border-right:48px solid transparent;border-bottom:38px solid #4d250e}.house i{position:absolute;left:31px;bottom:0;width:20px;height:29px;background:#7b3e16}.h1{left:38px;transform:scale(.78)}.h2{left:165px}.h3{right:95px;transform:scale(.92)}
.tower{position:absolute;right:16px;bottom:86px;width:74px;height:108px;background:#fff8e8;border:2px solid #6b3a13;z-index:3}.tower:before{content:"";position:absolute;left:-9px;top:-34px;border-left:46px solid transparent;border-right:46px solid transparent;border-bottom:36px solid #4d250e}.tower:after{content:"";position:absolute;left:31px;top:-63px;width:3px;height:29px;background:#4d250e}.tower span{position:absolute;left:34px;top:-62px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:24px solid var(--gold)}
.tree{position:absolute;bottom:66px;width:9px;height:42px;background:#5b2b0d;z-index:4}.tree:before{content:"";position:absolute;width:36px;height:48px;border-radius:50% 50% 45% 45%;background:#bc8a12;left:-14px;top:-35px}.t1{left:10px}.t2{left:275px;transform:scale(.8)}.t3{right:175px;transform:scale(.7)}
.signal{position:absolute;z-index:6;color:var(--gold);font-size:40px;font-weight:900;transform:rotate(-90deg)}.s1{left:89px;bottom:169px}.s2{left:208px;bottom:185px}.s3{right:120px;bottom:179px}
.section{padding:92px 0}.section-heading{max-width:780px;margin:0 auto 48px;text-align:center}.section-heading h2{font-family:"Plus Jakarta Sans";font-size:clamp(32px,4vw,48px);line-height:1.15;margin:14px 0}.section-heading p{color:var(--muted);margin:0}.section-heading.compact{margin-bottom:36px}.section-heading.left{text-align:left;margin:0 0 30px}.section-heading.left>span{justify-content:flex-start}
.architecture-grid{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:28px;align-items:start}.level-card,.core-column,.dashboard-card,.citizen-card,.multi-device{background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 11px 32px rgba(67,44,20,.07)}.level-card{padding:0 22px 21px}.level-title{margin:0 -22px 20px;padding:11px 17px;border-radius:23px 23px 0 0;display:flex;justify-content:center;gap:9px;align-items:center;text-transform:uppercase;color:white;letter-spacing:.04em}.level-kabupaten,.level-desa{background:linear-gradient(90deg,#4b230b,#6a3510)}.level-kecamatan{background:linear-gradient(90deg,#e7a100,#f3bd1c)}.level-subtitle{font-size:13px;font-weight:800;text-align:center}.level-card ul,.module-card ul,.advantages-card ul{padding:0;margin:17px 0 0;list-style:none}.level-card li{position:relative;padding:6px 0 6px 25px;font-size:13px}.level-card li:before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:900}.api-chip{display:inline-block;margin-top:16px;background:var(--brown);color:white;border-radius:999px;padding:5px 10px;font-size:10px;font-weight:800;float:right}.vertical-flow{text-align:center;color:var(--brown);font-size:26px;line-height:38px}.citizen-card{text-align:center;padding:18px}.citizen-card .people{font-size:30px;letter-spacing:-6px;margin-bottom:6px}.citizen-card strong,.citizen-card span{display:block}.citizen-card span{font-size:12px;color:var(--muted)}
.core-column{padding:20px}.panel-title{background:linear-gradient(90deg,var(--gold),#f4bd1f);color:white;text-align:center;font-weight:900;text-transform:uppercase;padding:10px 14px;border-radius:14px;margin-bottom:14px;box-shadow:0 7px 18px rgba(241,173,0,.23)}.core-panel{border:1px solid var(--line);border-radius:19px;overflow:hidden}.core-panel h3,.database-card h3{text-align:center;text-transform:uppercase;font-family:"Plus Jakarta Sans";font-size:17px;margin:0;padding:17px;border-bottom:1px solid var(--line)}.core-item{display:flex;gap:13px;padding:15px;border-bottom:1px solid #efe6d7}.core-item:last-child{border-bottom:0}.core-icon{width:39px;height:39px;display:grid;place-items:center;flex:0 0 39px;border-radius:11px;background:#fff1c6;color:var(--brown);font-weight:900}.core-item strong{display:block;font-size:13px}.core-item small{display:block;color:var(--muted);line-height:1.35;margin-top:3px}.data-flow{text-align:center;font-size:24px;color:var(--brown);height:36px}.database-card{border:1px solid var(--line);border-radius:19px;padding-bottom:22px;text-align:center}.db-icon{width:100px;margin:25px auto 16px;display:grid;gap:4px}.db-icon span{height:28px;background:linear-gradient(180deg,#f6c532,#d99800);border-radius:50%/35%;border:1px solid #d29100;box-shadow:0 7px 0 #bf7f00}.database-card p{font-size:12px;margin:24px 0 0;color:var(--muted)}.database-card p strong{color:var(--ink)}
.dashboard-card{padding:16px;margin-bottom:18px}.dashboard-card h3{text-align:center;text-transform:uppercase;font-family:"Plus Jakarta Sans";font-size:15px;margin:0 0 14px}.device-mockup{display:flex;justify-content:center;align-items:end;gap:8px}.laptop{width:76%}.screen{height:125px;background:#102237;border:5px solid #2c251f;border-radius:9px 9px 3px 3px;padding:5px}.screen-top{display:flex;gap:3px}.screen-top i{width:4px;height:4px;border-radius:50%;background:#d4b15d}.mini-layout{display:grid;grid-template-columns:22% 1fr;height:100px;margin-top:5px}.sidebar-mini{background:rgba(255,255,255,.05);border-radius:4px}.content-mini{padding:7px}.kpi-row{display:flex;gap:4px}.kpi-row b{height:13px;flex:1;border-radius:3px;background:#1e6b88}.chart-row{height:51px;display:flex;align-items:end;gap:6px;padding:8px 4px 0}.chart-row span{height:var(--h);flex:1;background:#dca315;border-radius:2px 2px 0 0}.table-lines{display:grid;gap:3px}.table-lines i{height:3px;background:rgba(255,255,255,.22)}.keyboard{height:8px;background:#423a32;border-radius:0 0 20px 20px}.phone{width:42px;height:88px;border:5px solid #2b241e;border-radius:9px;background:#f6f0e4;padding:13px 5px 6px;position:relative}.phone .notch{position:absolute;top:2px;left:11px;width:13px;height:3px;border-radius:4px;background:#655b54}.phone i{display:block;height:12px;border-radius:3px;background:#d9b11a;margin-bottom:5px}.device-mockup.amber .screen{background:#f3f0e9}.device-mockup.amber .sidebar-mini{background:#d99f07}.device-mockup.amber .kpi-row b{background:#f0bf35}.device-mockup.amber .chart-row span{background:#5d91ac}.device-mockup.amber .table-lines i{background:#d2c7b9}.device-mockup.brown .screen{background:#fbfaf7}.device-mockup.brown .sidebar-mini{background:#4f270e}.device-mockup.brown .kpi-row b{background:#c8a163}.device-mockup.brown .chart-row span{background:#7f9e6a}.device-mockup.brown .table-lines i{background:#ddd2c4}.dashboard-tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:12px}.dashboard-tags span{font-size:10px;font-weight:800}.dashboard-tags span:not(:last-child):after{content:"•";color:var(--gold);margin-left:5px}.multi-device{padding:14px;text-align:center}.multi-device>strong{font-size:12px;text-transform:uppercase}.multi-device>div{display:flex;justify-content:space-around;margin-top:8px}.multi-device span{display:grid;font-size:18px}.multi-device small{font-size:8px;color:var(--muted);margin-top:3px}
.modules-section{background:#fff}.modules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.module-card{border:1px solid var(--line);border-radius:21px;padding:21px;min-height:240px;background:linear-gradient(180deg,#fff 0%,#fffdf8 100%);transition:.25s}.module-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#dfc17e}.module-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--brown);color:white;font-size:25px;box-shadow:0 9px 19px rgba(91,43,13,.2)}.module-card:nth-child(2n) .module-icon{background:var(--gold);color:var(--brown)}.module-card:nth-child(3n) .module-icon{background:#8da600}.module-card h3{text-transform:uppercase;font-size:14px;margin:16px 0 7px}.module-card li{font-size:12px;color:#4f4841;padding:4px 0 4px 13px;position:relative}.module-card li:before{content:"•";position:absolute;left:0;color:var(--gold)}
.tech-section{background:linear-gradient(180deg,#fbfaf6,#f5efe4)}.split-section{display:grid;grid-template-columns:1.25fr .75fr;gap:35px;align-items:stretch}.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.tech-item{background:white;border:1px solid var(--line);border-radius:17px;padding:16px;display:flex;align-items:center;gap:11px}.tech-icon{width:46px;height:46px;flex:0 0 46px;border-radius:12px;border:2px solid var(--brown);display:grid;place-items:center;font-weight:900;color:var(--brown);font-size:12px}.tech-item strong,.tech-item small{display:block}.tech-item strong{font-size:13px}.tech-item small{font-size:10px;color:var(--muted)}.advantages-card{border-radius:25px;background:#fff;border:1px solid var(--line);padding:30px;box-shadow:var(--shadow)}.advantages-card h2{font-family:"Plus Jakarta Sans";font-size:29px;line-height:1.2;margin:14px 0}.advantages-card li{padding:7px 0 7px 26px;position:relative;font-size:13px}.advantages-card li:before{content:"✓";position:absolute;left:0;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#e9f1d9;color:#51670d;font-size:10px;font-weight:900}.brand-panel{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);margin-top:20px;padding-top:20px}.brand-mark.big{width:58px;height:58px;flex:0 0 58px}.brand-panel strong,.brand-panel small{display:block}.brand-panel strong{font-family:"Plus Jakarta Sans";font-size:17px}.brand-panel small{font-size:9px;color:var(--muted);line-height:1.35}
.values-strip{background:#4b230b;color:white;padding:17px 0}.values-grid{display:grid;grid-template-columns:repeat(5,1fr);text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.04em;text-align:center}.values-grid span{padding:7px;border-right:1px solid rgba(255,255,255,.12)}.values-grid span:last-child{border-right:0}
footer{background:#2c1608;color:#f7ead7;padding:21px 0}.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12px}.footer-inner p{margin:0;color:#d9c9b8}.footer-inner a{font-weight:800}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}
@media (max-width:1000px){.hero-grid,.architecture-grid,.split-section{grid-template-columns:1fr}.hero{min-height:auto}.hero-visual{min-height:470px}.architecture-grid{gap:40px}.levels-column,.dashboard-column{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.vertical-flow{display:none}.citizen-card,.panel-title{grid-column:1/-1}.dashboard-column .panel-title,.multi-device{grid-column:1/-1}.modules-grid{grid-template-columns:repeat(2,1fr)}.core-column{max-width:650px;margin-inline:auto}.split-section{gap:55px}.advantages-card{max-width:650px}}
@media (max-width:720px){.container{width:min(100% - 26px,1180px)}.nav-links{display:none;position:absolute;left:13px;right:13px;top:72px;background:white;border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:var(--shadow);z-index:20;flex-direction:column;gap:12px}.nav-links.open{display:flex}.menu-toggle{display:block}.hero-grid{padding-top:35px;gap:30px}.hero h1{font-size:50px}.hero-subtitle{font-size:14px}.hero-band{font-size:11px}.hero-actions{flex-direction:column;align-items:flex-start}.hero-visual{min-height:390px}.quote-card{width:100%;padding:20px}.quote-card p{font-size:14px}.village-scene{height:250px;transform:scale(.84);transform-origin:bottom center}.section{padding:68px 0}.section-heading{margin-bottom:34px}.section-heading h2{font-size:31px}.levels-column,.dashboard-column,.modules-grid,.tech-grid{grid-template-columns:1fr}.dashboard-column .panel-title,.multi-device,.citizen-card{grid-column:auto}.modules-grid{gap:12px}.module-card{min-height:auto}.values-grid{grid-template-columns:1fr 1fr}.values-grid span{border-bottom:1px solid rgba(255,255,255,.12)}.footer-inner{flex-direction:column;align-items:flex-start}}

/* SIDABILOHA official logo integration */
.brand-logo-mark{width:54px;height:54px;object-fit:cover;object-position:center;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(74,46,18,.10);padding:2px;flex:0 0 54px}
.hero-brand-logo{width:min(430px,88%);height:auto;margin:20px 0 24px;mix-blend-mode:multiply}
.brand-panel{justify-content:center}
.brand-panel-logo{width:min(280px,100%);height:auto;mix-blend-mode:multiply}
@media (max-width:720px){.brand-logo-mark{width:46px;height:46px;flex-basis:46px}.hero-brand-logo{width:min(340px,92%);margin:16px 0 20px}.brand strong{font-size:16px}.brand small{font-size:10px}}