/* ====== Ahza Multi Niaga — Premium Theme v2 ====== */
:root{
  --bg:#070E1C;
  --navy-900:#091327;
  --navy-800:#0C1B33;
  --navy-700:#11254A;
  --blue:#4F8CFF;
  --blue-deep:#1E5BD6;
  --blue-soft:#9CC0FF;
  --teal:#2DD4BF;
  --violet:#A78BFA;
  --gold:#F6C667;
  --gold-deep:#D99A1E;
  --ink:#0C1726;
  --slate-700:#33425A;
  --slate-500:#61708A;
  --slate-400:#94A2B8;
  --line:#E5EAF2;
  --line-soft:#EEF2F8;
  --paper:#FFFFFF;
  --mist:#F5F8FD;
  --mist-2:#ECF2FB;
  --glass:rgba(255,255,255,.06);
  --glass-line:rgba(255,255,255,.12);
  --radius:18px;
  --radius-lg:26px;
  --radius-xl:32px;
  --shadow-sm:0 2px 10px rgba(9,19,39,.06);
  --shadow-md:0 24px 50px -22px rgba(9,19,39,.30);
  --shadow-lg:0 50px 100px -36px rgba(7,14,28,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1200px;
  --font-d:'Sora',system-ui,sans-serif;
  --font-b:'Manrope',system-ui,sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-b); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:clip; line-height:1.6; font-size:16px;
}
h1,h2,h3,h4,h5{ font-family:var(--font-d); font-weight:700; line-height:1.08; letter-spacing:-.025em; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* grain overlay */
.grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-deep); }
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--gold); border-radius:2px; }
.eyebrow.on-dark{ color:var(--blue-soft); }
.eyebrow .num{ font-variant-numeric:tabular-nums; color:var(--gold-deep); }

/* ====== Buttons ====== */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:600; font-size:15px; padding:15px 28px; border-radius:14px; cursor:pointer; border:1px solid transparent; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s; white-space:nowrap; position:relative; }
.btn svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{ background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; box-shadow:0 16px 30px -14px rgba(30,91,214,.8); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(30,91,214,.9); }
.btn-gold{ background:linear-gradient(135deg,#FBD78B,var(--gold)); color:#4a3408; box-shadow:0 16px 30px -14px rgba(246,198,103,.8); }
.btn-gold:hover{ transform:translateY(-2px); }
.btn-ghost{ background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.2); backdrop-filter:blur(8px); }
.btn-ghost:hover{ background:rgba(255,255,255,.14); }
.btn-outline{ background:var(--paper); color:var(--blue-deep); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--blue); background:var(--mist); }
.btn-lg{ padding:17px 32px; font-size:16px; }

/* ====== Nav ====== */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; transition:.35s var(--ease); padding:22px 0; }
.nav .inner{ display:flex; align-items:center; gap:34px; }
.nav.scrolled{ padding:12px 0; }
.nav.scrolled .inner{ background:rgba(255,255,255,.82); backdrop-filter:blur(16px) saturate(1.2); box-shadow:var(--shadow-sm); border:1px solid var(--line-soft); border-radius:16px; padding:10px 16px 10px 18px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:40px; height:40px; }
.brand .txt{ font-family:var(--font-d); font-weight:700; font-size:18px; color:#fff; letter-spacing:-.01em; transition:color .3s; line-height:1.05; white-space:nowrap; }
.brand .txt small{ display:block; font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-soft); }
.nav.scrolled .brand .txt{ color:var(--ink); }
.nav.scrolled .brand .txt small{ color:var(--blue-deep); }
.nav .links{ display:flex; gap:6px; margin-left:auto; }
.nav .links a{ font-size:14.5px; font-weight:600; color:rgba(255,255,255,.8); transition:.25s; padding:8px 14px; border-radius:10px; white-space:nowrap; }
.nav .links a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nav.scrolled .links a{ color:var(--slate-700); }
.nav.scrolled .links a:hover{ color:var(--blue-deep); background:var(--mist); }
.nav .cta-wrap{ display:flex; gap:12px; align-items:center; }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
.nav.scrolled .nav-toggle span{ background:var(--ink); }

/* ====== Hero ====== */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; background:var(--bg); color:#fff; overflow:hidden; padding:160px 0 90px; isolation:isolate; }
.hero-layer{ position:absolute; inset:0; will-change:transform; z-index:0; }
.aurora{ position:absolute; border-radius:50%; filter:blur(80px); }
.a1{ width:620px; height:620px; background:radial-gradient(circle,rgba(79,140,255,.55),transparent 70%); top:-180px; right:-120px; }
.a2{ width:520px; height:520px; background:radial-gradient(circle,rgba(45,212,191,.32),transparent 70%); bottom:-200px; left:-140px; }
.a3{ width:420px; height:420px; background:radial-gradient(circle,rgba(246,198,103,.22),transparent 70%); top:30%; left:38%; }
.grid-lines{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(circle at 60% 35%,#000,transparent 78%); }
.hero .container{ position:relative; z-index:5; display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center; }
.badge-pill{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.06); border:1px solid var(--glass-line); padding:8px 15px 8px 12px; border-radius:999px; font-size:13px; font-weight:600; color:#D7E3F7; backdrop-filter:blur(8px); }
.badge-pill .star{ width:18px; height:18px; color:var(--gold); }
.badge-pill b{ color:#fff; }
.hero-copy h1{ font-size:clamp(36px,4.8vw,62px); margin:24px 0 0; letter-spacing:-.03em; }
.hero-copy h1 .hl{ position:relative; background:linear-gradient(120deg,var(--gold),#FBD78B); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-copy .lead{ margin-top:22px; font-size:18px; line-height:1.6; color:#AFC0DC; max-width:520px; }
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-trust{ margin-top:40px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hero-trust .stat-mini b{ font-family:var(--font-d); font-size:24px; color:#fff; display:block; line-height:1; }
.hero-trust .stat-mini span{ font-size:12.5px; color:#8194B4; }
.hero-trust .vr{ width:1px; height:36px; background:rgba(255,255,255,.14); }

/* hero app window mockup */
.hero-visual{ position:relative; will-change:transform; perspective:1400px; }
.app-window{ background:#0E1A30; border:1px solid var(--glass-line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg); transform:rotateY(-9deg) rotateX(3deg); transform-style:preserve-3d; }
.aw-bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.07); }
.aw-bar .dot{ width:10px; height:10px; border-radius:50%; }
.aw-bar .d1{ background:#FF5F57; } .aw-bar .d2{ background:#FEBC2E; } .aw-bar .d3{ background:#28C840; }
.aw-bar .url{ margin-left:12px; font-size:11px; color:#7286A6; font-family:var(--font-b); background:rgba(255,255,255,.05); padding:5px 12px; border-radius:7px; flex:1; }
.aw-body{ display:grid; grid-template-columns:64px 1fr; min-height:340px; }
.aw-side{ border-right:1px solid rgba(255,255,255,.06); padding:18px 0; display:flex; flex-direction:column; align-items:center; gap:18px; }
.aw-side .si{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:#6E83A6; }
.aw-side .si.act{ background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; box-shadow:0 8px 18px -8px rgba(79,140,255,.8); }
.aw-side .si svg{ width:19px; height:19px; }
.aw-main{ padding:22px 22px 24px; color:#fff; }
.aw-main .h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.aw-main .h b{ font-family:var(--font-d); font-size:15px; }
.aw-main .h .live{ display:inline-flex; align-items:center; gap:7px; font-size:11px; color:#9FE6C9; background:rgba(45,212,191,.12); padding:5px 11px; border-radius:999px; }
.aw-main .h .live i{ width:7px; height:7px; border-radius:50%; background:#2DD4BF; box-shadow:0 0 0 0 rgba(45,212,191,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(45,212,191,0); } 100%{ box-shadow:0 0 0 0 rgba(45,212,191,0); } }
.kpis{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kpi{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:14px; }
.kpi .lab{ font-size:11px; color:#8194B4; display:flex; align-items:center; gap:7px; }
.kpi .lab .ic{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; }
.kpi .val{ font-family:var(--font-d); font-weight:700; font-size:20px; margin-top:8px; letter-spacing:-.02em; }
.kpi .delta{ font-size:11px; margin-top:3px; }
.kpi .up{ color:#5BE3B0; } .kpi .down{ color:#FF9B8A; }
.aw-chart{ margin-top:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:16px; }
.aw-chart .ct{ font-size:11px; color:#8194B4; margin-bottom:10px; display:flex; justify-content:space-between; }
.bars{ display:flex; align-items:flex-end; gap:7px; height:72px; }
.bars i{ flex:1; background:linear-gradient(var(--blue-soft),var(--blue)); border-radius:5px 5px 2px 2px; opacity:.92; }
.bars i.hot{ background:linear-gradient(#FBD78B,var(--gold)); }
.float-chip{ position:absolute; background:rgba(255,255,255,.97); color:var(--ink); border-radius:14px; box-shadow:var(--shadow-md); padding:12px 15px; display:flex; align-items:center; gap:11px; backdrop-filter:blur(8px); z-index:6; }
.float-chip .ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; }
.float-chip b{ font-family:var(--font-d); font-size:13.5px; display:block; line-height:1.2; }
.float-chip span{ font-size:11px; color:var(--slate-500); }
.fc-a{ top:-22px; right:24px; }
.fc-a .ic{ background:linear-gradient(135deg,#16A34A,#15803D); color:#fff; }
.fc-b{ bottom:30px; left:-34px; }
.fc-b .ic{ background:#FEF3E0; color:var(--gold-deep); }

.hero-wave{ position:absolute; bottom:-1px; left:0; right:0; z-index:4; line-height:0; }

/* ====== Sector strip ====== */
.logos{ padding:34px 0; background:var(--paper); border-bottom:1px solid var(--line-soft); position:relative; z-index:2; }
.logos .lab{ text-align:center; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-400); font-weight:700; margin-bottom:20px; }
.logos .row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.logos .item{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:600; font-size:14.5px; color:var(--slate-700); background:var(--mist); border:1px solid var(--line-soft); padding:11px 18px; border-radius:12px; transition:.25s; }
.logos .item:hover{ border-color:var(--blue); color:var(--blue-deep); transform:translateY(-2px); }
.logos .item svg{ width:20px; height:20px; color:var(--blue); }

/* ====== Sections ====== */
.section{ padding:108px 0; position:relative; }
.section.mist{ background:var(--mist); }
.section.navy{ background:var(--bg); color:#fff; overflow:hidden; isolation:isolate; }
.sec-head{ max-width:660px; }
.sec-head.center{ margin:0 auto; text-align:center; }
.sec-head h2{ font-size:clamp(30px,3.6vw,46px); margin-top:16px; }
.sec-head p{ margin-top:18px; font-size:17.5px; color:var(--slate-500); }
.section.navy .sec-head p{ color:#AFC0DC; }

/* ====== Services bento ====== */
.bento{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:56px; }
.svc{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-xl); padding:34px; overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.svc::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,var(--ac,transparent),transparent 45%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .45s; pointer-events:none; }
.svc:hover{ transform:translateY(-7px); box-shadow:var(--shadow-md); }
.svc:hover::after{ opacity:1; }
.svc.feat{ grid-column:span 2; display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center; }
.svc .glow{ position:absolute; width:240px; height:240px; border-radius:50%; filter:blur(60px); top:-80px; right:-50px; opacity:0; transition:opacity .45s; background:var(--ac); }
.svc:hover .glow{ opacity:.35; }
.svc .ico{ width:62px; height:62px; border-radius:17px; display:grid; place-items:center; margin-bottom:22px; position:relative; }
.svc .ico svg{ width:30px; height:30px; }
.svc .num{ position:absolute; top:32px; right:34px; font-family:var(--font-d); font-weight:700; font-size:15px; color:var(--line); letter-spacing:.05em; }
.svc h3{ font-size:23px; }
.svc.feat h3{ font-size:30px; }
.svc p{ margin-top:12px; color:var(--slate-500); font-size:15px; }
.svc ul{ list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:11px; }
.svc ul li{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; color:var(--slate-700); font-weight:500; }
.svc ul li svg{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; color:var(--accent); }
.svc .tag{ display:inline-flex; align-items:center; gap:6px; margin-bottom:16px; font-family:var(--font-d); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background:var(--tint); color:var(--accent); }
/* per-service accents */
.svc.s1{ --accent:var(--blue-deep); --tint:#E7F0FE; --ac:var(--blue); }
.svc.s2{ --accent:#0E9E73; --tint:#E3F7F0; --ac:var(--teal); }
.svc.s3{ --accent:var(--gold-deep); --tint:#FEF3E0; --ac:var(--gold); }
.svc.s4{ --accent:#6D44C9; --tint:#F0EBFD; --ac:var(--violet); }
.svc .ico{ background:var(--tint); color:var(--accent); }
.svc .num{ color:color-mix(in srgb,var(--accent) 22%, var(--line)); }

/* mini UI preview inside featured */
.svc-preview{ background:linear-gradient(160deg,#0E1A30,#0A1424); border-radius:20px; padding:20px; color:#fff; box-shadow:var(--shadow-md); }
.sp-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.sp-row b{ font-family:var(--font-d); font-size:13px; }
.sp-row .pill{ font-size:10px; background:rgba(79,140,255,.18); color:var(--blue-soft); padding:4px 10px; border-radius:999px; }
.sp-bal{ font-family:var(--font-d); font-weight:700; font-size:26px; letter-spacing:-.02em; }
.sp-bal small{ font-size:13px; color:#8194B4; font-weight:500; font-family:var(--font-b); }
.sp-bars{ display:flex; align-items:flex-end; gap:6px; height:60px; margin-top:16px; }
.sp-bars i{ flex:1; background:linear-gradient(var(--blue-soft),var(--blue)); border-radius:4px; }
.sp-list{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.sp-item{ display:flex; align-items:center; gap:10px; font-size:12px; }
.sp-item .av{ width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:var(--teal); }
.sp-item .nm{ flex:1; color:#C6D4EA; }
.sp-item .amt{ font-family:var(--font-d); font-weight:600; color:#fff; }

/* ====== Keunggulan ====== */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.feature-list{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:36px; }
.feat{ display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.04); border:1px solid var(--glass-line); border-radius:18px; padding:22px; transition:.3s; }
.feat:hover{ background:rgba(255,255,255,.07); transform:translateY(-3px); }
.feat .fi{ width:48px; height:48px; border-radius:13px; background:linear-gradient(135deg,rgba(79,140,255,.25),rgba(79,140,255,.05)); border:1px solid rgba(79,140,255,.25); display:grid; place-items:center; }
.feat .fi svg{ width:23px; height:23px; color:var(--gold); }
.feat .fx b{ font-family:var(--font-d); font-size:16px; display:block; }
.feat .fx span{ font-size:13.5px; color:#AFC0DC; line-height:1.55; }
.why-visual{ position:relative; }
.why-visual .panel{ background:rgba(255,255,255,.05); border:1px solid var(--glass-line); border-radius:var(--radius-xl); padding:30px; backdrop-filter:blur(6px); }
.why-visual .panel .hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.why-visual .panel .hd b{ font-family:var(--font-d); font-size:16px; }
.donut{ width:200px; height:200px; margin:0 auto; }
.why-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
.why-stats .ws{ text-align:center; background:rgba(255,255,255,.05); border:1px solid var(--glass-line); border-radius:14px; padding:16px 8px; }
.why-stats .ws b{ font-family:var(--font-d); font-size:22px; display:block; color:var(--gold); }
.why-stats .ws span{ font-size:11px; color:#AFC0DC; }

/* ====== Stats ====== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:50px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-sm); }
.stat{ text-align:center; padding:38px 20px; border-right:1px solid var(--line-soft); }
.stat:last-child{ border-right:none; }
.stat b{ font-family:var(--font-d); font-size:clamp(36px,4.2vw,52px); background:linear-gradient(135deg,var(--blue),var(--blue-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.03em; }
.stat .plus{ -webkit-text-fill-color:var(--gold-deep); }
.stat .lab{ margin-top:10px; font-size:14.5px; color:var(--slate-500); font-weight:600; }

/* ====== Process ====== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:56px; position:relative; }
.steps::before{ content:""; position:absolute; top:34px; left:12%; right:12%; height:2px; background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px); z-index:0; }
.step{ position:relative; z-index:1; text-align:center; }
.step .n{ width:70px; height:70px; margin:0 auto 20px; border-radius:20px; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--font-d); font-weight:700; font-size:24px; color:var(--blue-deep); box-shadow:var(--shadow-sm); transition:.35s var(--ease); }
.step:hover .n{ border-color:transparent; background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; transform:translateY(-5px) rotate(-4deg); box-shadow:0 18px 30px -14px rgba(30,91,214,.7); }
.step h4{ font-size:18px; }
.step p{ margin-top:9px; font-size:14px; color:var(--slate-500); }

/* ====== CTA ====== */
.cta{ position:relative; overflow:hidden; border-radius:var(--radius-xl); background:linear-gradient(135deg,#1E5BD6,#0B1B38); color:#fff; padding:70px 56px; text-align:center; isolation:isolate; }
.cta .orb-c{ position:absolute; border-radius:50%; filter:blur(80px); z-index:-1; }
.cta .oc1{ width:380px; height:380px; background:rgba(246,198,103,.45); top:-150px; right:-60px; }
.cta .oc2{ width:420px; height:420px; background:rgba(79,140,255,.55); bottom:-200px; left:-80px; }
.cta .gl{ position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%); }
.cta h2{ font-size:clamp(30px,3.8vw,46px); }
.cta p{ margin:18px auto 32px; max-width:540px; color:#D5E2F5; font-size:17px; }
.cta .actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ====== Footer ====== */
.footer{ background:var(--navy-900); color:#9FB0CC; padding:76px 0 30px; }
.footer .grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:40px; }
.footer .brand .txt{ color:#fff; }
.footer .about{ margin-top:18px; font-size:14px; max-width:310px; line-height:1.75; }
.footer h5{ font-family:var(--font-d); color:#fff; font-size:14px; letter-spacing:.03em; margin-bottom:18px; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer ul li a{ font-size:14px; transition:.2s; }
.footer ul li a:hover{ color:#fff; padding-left:4px; }
.footer .contact-item{ display:flex; gap:11px; align-items:flex-start; font-size:14px; margin-bottom:14px; }
.footer .contact-item svg{ width:18px; height:18px; color:var(--blue); flex:0 0 auto; margin-top:2px; }
.footer .bottom{ margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; }

/* ====== Reveal ====== */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } .hero-layer{ transform:none!important; } .app-window{ transform:none; } }

/* ====== Responsive ====== */
@media (max-width:1000px){
  .hero .container{ grid-template-columns:1fr; gap:48px; }
  .hero-visual{ max-width:520px; margin:0 auto; width:100%; }
  .app-window{ transform:none; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .svc.feat{ grid-template-columns:1fr; }
  .footer .grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1024px){
  .nav .links, .nav .cta-wrap .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .nav .links.open{ display:flex; position:absolute; top:calc(100% + 8px); left:16px; right:16px; flex-direction:column; background:#fff; padding:16px; gap:6px; box-shadow:var(--shadow-md); border-radius:16px; border:1px solid var(--line); }
  .nav .links.open a{ color:var(--slate-700); }
}
@media (max-width:760px){
  .bento{ grid-template-columns:1fr; }
  .svc.feat{ grid-column:span 1; }
  .feature-list{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(2){ border-right:none; } .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line-soft); }
  .steps{ grid-template-columns:1fr 1fr; } .steps::before{ display:none; }
  .footer .grid{ grid-template-columns:1fr; }
  .cta{ padding:48px 26px; }
  .section{ padding:76px 0; }
  .float-chip{ display:none; }
}
@media (max-width:440px){ .hero-trust{ gap:14px; } .hero-trust .vr{ display:none; } }

/* Fix: angka mini-stat hero ikut ukuran <b> (24px), jangan kekecilan ke aturan .stat-mini span (12.5px utk label) */
.hero-trust .stat-mini b span{ font-size:inherit; }
/* Fix: angka di panel Ringkasan Sistem ikut ukuran <b> (22px), bukan kekecilan ke aturan .ws span (11px utk label) */
.why-stats .ws b span{ font-size:inherit; }