/* ============================================================
   VizStudio — tambahan di atas tema QuickBoard
   ============================================================ */

/* Font mengikuti pilarinformatika.com: Hanken Grotesk (utama), Inter (fallback) */
:root{
  --font-sans:"Hanken Grotesk","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
body,button,input,select,textarea{font-family:var(--font-sans);}

.app{padding-bottom:0;}
.container-wide{max-width:1180px;}

/* ===== topbar situs ===== */
.site-topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(226,232,240,.7);
}
.site-topbar-inner{
  max-width:1180px;margin:auto;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:0;}
.brand-logo{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,#0b1220,#1d4ed8 80%);
  color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px;
  box-shadow:0 4px 12px rgba(29,78,216,.28);
}
.brand-text{font-weight:900;font-size:15px;letter-spacing:-.3px;line-height:1.05;}
.brand-sub{display:block;font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.3px;margin-top:1px;}
.navlinks{display:flex;align-items:center;gap:4px;}
.navlink{
  font-size:12px;font-weight:700;color:var(--muted);text-decoration:none;
  padding:8px 11px;border-radius:var(--r-full);transition:all .15s var(--ease);
}
.navlink:hover{background:var(--bg-subtle);color:var(--text);}
.btn-cta-sm{
  font-size:12px;font-weight:800;text-decoration:none;
  padding:9px 14px;border-radius:var(--r-full);color:#fff;
  background:linear-gradient(135deg,#1e3a5f,#2563eb);
  box-shadow:0 4px 12px rgba(29,78,216,.25);
  transition:transform .15s var(--ease),box-shadow .15s;
}
.btn-cta-sm:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(29,78,216,.30);}
@media(max-width:620px){
  .navlinks .navlink{display:none;}
  .brand-sub{display:none;}
}

/* ===== hero landing ===== */
.landing-hero{
  position:relative;overflow:hidden;color:#fff;
  padding:64px 16px 58px;
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(59,130,246,.45), transparent 62%),
    radial-gradient(700px 380px at 8% 110%, rgba(14,116,144,.35), transparent 60%),
    linear-gradient(135deg,#080d18 0%,#0e1a2e 48%,#122a52 100%);
}
.landing-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  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:42px 42px;
  mask-image:radial-gradient(circle at 50% 20%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 20%,#000 0%,transparent 72%);
}
.landing-hero-inner{max-width:1100px;margin:auto;position:relative;z-index:1;}
.eyebrow{
  display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:2px;
  color:#93c5fd;text-transform:uppercase;margin-bottom:14px;
}
.eyebrow.dark{color:var(--blue);}
.landing-hero h1{
  margin:0;font-size:clamp(30px,5.2vw,52px);line-height:1.06;letter-spacing:-1.4px;
  font-weight:900;max-width:820px;
}
.landing-hero h1 span{
  background:linear-gradient(90deg,#93c5fd,#67e8f9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.landing-hero p{
  margin:18px 0 0;max-width:620px;font-size:14px;line-height:1.65;
  color:rgba(226,232,240,.82);
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;}
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:800;text-decoration:none;
  padding:12px 20px;border-radius:var(--r-full);
  color:#0b1220;background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform .15s var(--ease),box-shadow .15s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.34);}
.btn-primary.light{background:#fff;color:#0b1220;}
.btn-ghost{
  display:inline-flex;align-items:center;
  font-size:13px;font-weight:800;text-decoration:none;
  padding:12px 20px;border-radius:var(--r-full);
  color:#e2e8f0;border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.06);
  transition:all .15s var(--ease);
}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:40px;}
.hero-stats b{display:block;font-size:22px;font-weight:900;letter-spacing:-.5px;line-height:1;}
.hero-stats span{display:block;font-size:10.5px;font-weight:700;color:rgba(226,232,240,.62);margin-top:5px;text-transform:uppercase;letter-spacing:.6px;}

/* ===== section ===== */
.section-block{max-width:1100px;margin:52px auto;padding:0 16px;}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  margin-bottom:20px;flex-wrap:wrap;
}
.section-head h2{margin:6px 0 0;font-size:clamp(21px,3vw,28px);font-weight:900;letter-spacing:-.6px;}
.section-head p{margin:0;max-width:360px;font-size:12.5px;line-height:1.55;color:var(--muted);}

/* ===== kartu klien ===== */
.client-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:620px){.client-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.client-grid{grid-template-columns:repeat(3,1fr);}}
.client-card{
  position:relative;overflow:hidden;text-decoration:none;color:var(--text);
  background:var(--card);border:1px solid var(--stroke);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--shadow);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.client-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
}
.client-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent);}
.client-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;}
.client-logo{
  width:46px;height:46px;border-radius:14px;flex:none;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#fff;display:grid;place-items:center;font-weight:900;font-size:16px;
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%, transparent);
}
.client-logo.lg{width:56px;height:56px;border-radius:18px;font-size:20px;}
.client-tag{
  font-size:9.5px;font-weight:900;letter-spacing:.7px;text-transform:uppercase;
  color:var(--accent);background:var(--bg-subtle);
  border:1px solid var(--stroke);padding:4px 9px;border-radius:var(--r-full);
}
.client-card h3{margin:14px 0 0;font-size:16px;font-weight:900;letter-spacing:-.3px;}
.client-card p{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--muted);min-height:36px;}
.client-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:12px;font-weight:800;color:var(--accent);
}
.client-link span{transition:transform .15s var(--ease);}
.client-card:hover .client-link span{transform:translateX(4px);}

/* ===== layanan ===== */
.services-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:620px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.services-grid{grid-template-columns:repeat(4,1fr);}}
.service-card{
  background:var(--card);border:1px solid var(--stroke);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.service-icon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-size:12px;font-weight:900;margin-bottom:12px;
}
.service-icon.blue{background:var(--blue-bg);color:var(--blue);}
.service-icon.green{background:var(--green-bg);color:var(--green);}
.service-icon.orange{background:var(--orange-bg);color:var(--orange);}
.service-icon.purple{background:var(--purple-bg);color:var(--purple);}
.service-card h3{margin:0;font-size:14px;font-weight:900;}
.service-card p{margin:7px 0 0;font-size:12px;line-height:1.55;color:var(--muted);}

/* ===== proses ===== */
.steps{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr);}}
.step{
  background:var(--card);border:1px solid var(--stroke);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow-sm);position:relative;
}
.step-num{
  width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(135deg,#1e3a5f,#2563eb);color:#fff;
  font-size:12px;font-weight:900;margin-bottom:10px;
}
.step h3{margin:0;font-size:14px;font-weight:900;}
.step p{margin:7px 0 0;font-size:12px;line-height:1.55;color:var(--muted);}

/* ===== CTA band ===== */
.cta-band{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:26px;border-radius:var(--r-xl);color:#fff;
  background:
    radial-gradient(500px 220px at 90% -30%, rgba(147,197,253,.5), transparent 60%),
    linear-gradient(135deg,#0e1a2e,#1d4ed8 120%);
  box-shadow:var(--shadow-lg);
}
.cta-band h2{margin:0;font-size:clamp(19px,2.6vw,24px);font-weight:900;letter-spacing:-.5px;}
.cta-band p{margin:6px 0 0;font-size:12.5px;color:rgba(226,232,240,.78);}

/* ===== footer ===== */
.site-footer{
  max-width:1100px;margin:56px auto 26px;padding:18px 16px 0;
  border-top:1px solid var(--stroke);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:11.5px;color:var(--muted);
}

/* ============================================================
   HALAMAN KLIEN
   ============================================================ */
.client-page{max-width:1200px;}
.client-topbar .left{min-width:0;}
.client-switch{
  font:inherit;font-size:12px;font-weight:700;
  padding:9px 12px;border-radius:var(--r-sm);
  border:1px solid var(--stroke);background:var(--card);color:var(--text);
  box-shadow:var(--shadow-sm);cursor:pointer;max-width:240px;
}
.client-switch:focus{outline:2px solid var(--accent);outline-offset:1px;}

.hero-brand{
  background:linear-gradient(135deg,var(--accent2) 0%,var(--accent) 100%);
  color:#fff;border-color:transparent;position:relative;overflow:hidden;
  padding:22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.hero-brand::before{
  content:"";position:absolute;top:-60px;right:-40px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,transparent 68%);
  border-radius:50%;pointer-events:none;
}
.hero-brand h2{margin:6px 0 0;font-size:22px;font-weight:900;letter-spacing:-.5px;}
.hero-brand p{margin:6px 0 0;font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.5;}
.hero-brand-sub{opacity:.72;font-size:11.5px !important;}
.hero-brand-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none;}
.demo-badge{
  display:inline-block;font-size:9.5px;font-weight:900;letter-spacing:1px;
  padding:4px 10px;border-radius:var(--r-full);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  color:#fff;
}
.hero-brand .pill{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px;}
@media(min-width:640px){.kpi-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1000px){.kpi-grid{grid-template-columns:repeat(5,1fr);}}
.stat-card.accent-brand::before{background:var(--accent);}
.stat-card .delta{
  display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-size:11px;font-weight:900;margin-top:8px;
  padding:3px 8px;border-radius:var(--r-full);
}
.stat-card .delta.up{background:#d1fae5;color:#065f46;}
.stat-card .delta.down{background:#fecaca;color:#7f1d1d;}
.stat-card .delta span{font-weight:600;color:var(--muted);font-size:10px;}

/* charts */
.chart-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px;}
@media(min-width:880px){.chart-grid{grid-template-columns:1fr 1fr;}}
.chart-card{padding:16px;}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.chart-head h3{margin:0;font-size:14px;font-weight:900;letter-spacing:-.2px;}
.chart-tag{
  font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);background:var(--bg-subtle);border:1px solid var(--stroke);
  padding:3px 8px;border-radius:var(--r-full);white-space:nowrap;
}
.chart-box{position:relative;height:280px;}
@media(max-width:560px){.chart-box{height:240px;}}

/* insight */
.insight-card{
  padding:20px;position:relative;
  border-left:4px solid var(--accent);
  background:linear-gradient(135deg,var(--bg-subtle) 0%,var(--card) 70%);
  display:flex;flex-direction:column;justify-content:center;
}
.insight-badge{
  align-self:flex-start;font-size:9.5px;font-weight:900;letter-spacing:1px;
  color:var(--accent);background:var(--bg);border:1px solid var(--stroke);
  padding:4px 10px;border-radius:var(--r-full);margin-bottom:12px;
}
.insight-card h3{margin:0;font-size:15px;font-weight:900;letter-spacing:-.2px;}
.insight-card p{margin:8px 0 0;font-size:12.5px;line-height:1.65;color:var(--muted);}

/* tabel */
.table-card{padding:16px;margin-top:14px;}
.table-card .tbl{min-width:520px;}

/* catatan demo */
.demo-note{
  margin:16px 2px 0;font-size:11.5px;line-height:1.55;color:var(--muted);
  background:var(--bg-subtle);border:1px solid var(--stroke);
  border-radius:var(--r-md);padding:12px 14px;
}
.demo-note code{
  background:var(--bg);border:1px solid var(--stroke);border-radius:6px;
  padding:1px 5px;font-size:11px;
}

@media(max-width:560px){
  .hero-brand{flex-direction:column;align-items:flex-start;}
  .hero-brand-side{flex-direction:row;align-items:center;}
  .hero-brand h2{font-size:19px;}
  .client-topbar .sub{display:none;}
  .client-switch{max-width:160px;font-size:11px;padding:8px 9px;}
}