:root{
  --ink:#0b1324;
  --ink-2:#121c33;
  --ink-3:#1b2740;
  --line:rgba(255,255,255,.08);
  --paper:#f6f7f9;
  --text:#1b2334;
  --muted:#5d6779;
  --accent:#f97316;
  --accent-2:#fb923c;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
.wrap{width:min(1120px,92vw);margin-inline:auto}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,19,36,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand-mark{
  width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#ea580c);
  font-weight:800;color:#fff;font-size:18px;
}
.brand-text{font-weight:700;letter-spacing:.08em;font-size:15px}
.brand-text b{color:var(--accent)}
.nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav a{color:#c9d2e3;text-decoration:none;font-size:14.5px;font-weight:500}
.nav a:hover{color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:12px 20px;border-radius:999px;
  font-weight:700;font-size:14.5px;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  border:1px solid transparent;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),#ea580c);color:#fff;box-shadow:0 10px 24px rgba(249,115,22,.28)}
.btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-wa{background:#22c55e;color:#04220f}
.btn-lg{padding:16px 28px;font-size:16px}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(1000px 500px at 12% -10%,rgba(249,115,22,.20),transparent 60%),
    radial-gradient(800px 400px at 92% 8%,rgba(56,130,246,.18),transparent 60%),
    var(--ink);
  color:#fff;padding:76px 0 60px;
}
.eyebrow{
  display:inline-block;margin:0 0 18px;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-2);font-weight:700;
  border:1px solid rgba(249,115,22,.4);border-radius:999px;padding:6px 14px;
}
.hero h1{font-size:clamp(28px,4.6vw,50px);line-height:1.15;margin:0 0 20px;font-weight:800;letter-spacing:-.02em}
.hero h1 span{color:var(--accent-2)}
.lead{font-size:clamp(15px,1.7vw,18px);color:#c3cddf;max-width:66ch;margin:0 0 30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.hero-facts{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  border-top:1px solid var(--line);padding-top:26px;
}
.hero-facts li{display:flex;flex-direction:column}
.hero-facts b{font-size:22px;color:#fff}
.hero-facts span{font-size:13.5px;color:#9fabc2}

/* ---------- band ---------- */
.band{background:#fff;border-bottom:1px solid #e7eaef}
.band-inner{padding:18px 0;text-align:center}
.band p{margin:0;font-size:14px;color:var(--muted);letter-spacing:.02em}
.band strong{color:var(--ink)}

/* ---------- sections ---------- */
.section{padding:70px 0}
.section-title{font-size:clamp(22px,3vw,34px);margin:0 0 12px;font-weight:800;letter-spacing:-.01em}
.section-sub{color:var(--muted);max-width:70ch;margin:0 0 36px}
.section-dark{background:var(--ink);color:#fff}
.section-dark .section-title{color:#fff}
.grid{display:grid;gap:20px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.extra{margin-top:20px}

.card{
  background:#fff;border:1px solid #e5e8ee;border-radius:var(--radius);
  padding:26px 24px;box-shadow:0 2px 10px rgba(16,24,40,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(16,24,40,.10);border-color:#d8dde6}
.card h3{margin:10px 0 10px;font-size:19px}
.card p{margin:0;color:var(--muted);font-size:14.5px}
.card.featured{border-color:var(--accent);box-shadow:0 14px 34px rgba(249,115,22,.16)}
.tag{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#6b7688;background:#eef1f6;
  border-radius:999px;padding:5px 11px;
}
.tag-accent{background:rgba(249,115,22,.14);color:#c2410c}

.panel{background:#fff;border:1px solid #e5e8ee;border-radius:var(--radius);padding:26px 24px}
.panel h3{margin:0 0 10px;font-size:18px}
.panel p{margin:0;color:var(--muted);font-size:14.5px}

.feature{padding:22px 22px;border-radius:var(--radius);background:var(--ink-2);border:1px solid var(--line)}
.feature h3{margin:0 0 8px;font-size:17px;color:#fff}
.feature p{margin:0;font-size:14.5px;color:#aeb9cd}

/* ---------- CTA ---------- */
.section-cta{background:linear-gradient(120deg,#111c33,#1c2b47);color:#fff}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-inner h2{margin:0 0 8px;font-size:clamp(20px,2.6vw,30px)}
.cta-inner p{margin:0;color:#b9c4d8;max-width:60ch}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px}
.faq details{background:#fff;border:1px solid #e5e8ee;border-radius:14px;padding:16px 20px}
.faq summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;color:var(--muted);font-size:14.5px}

/* ---------- contact ---------- */
.section-contact{background:#fff;border-top:1px solid #e7eaef}
.contact-card{background:var(--paper);border:1px solid #e5e8ee;border-radius:var(--radius);padding:24px}
.contact-card h3{margin:0 0 12px;font-size:16px;color:var(--ink)}
.contact-card p{margin:0 0 6px;font-size:15px;color:var(--muted)}
.contact-card a{color:#c2410c;font-weight:600;text-decoration:none}
.contact-card a:hover{text-decoration:underline}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#9fabc2;padding:44px 0 24px}
.footer-inner{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
.footer-inner p{margin:10px 0 0;font-size:14px;max-width:52ch}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{color:#c9d2e3;text-decoration:none;font-size:14px}
.footer-links a:hover{color:#fff}
.footer-bottom{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.footer-bottom p{margin:0;font-size:12.5px;color:#78849c}

@media (max-width:820px){
  .nav{gap:14px}
  .nav a:not(.btn){display:none}
  .hero{padding:56px 0 44px}
  .section{padding:54px 0}
}

.hlink{color:inherit;text-decoration:none}
.hlink:hover{color:#c2410c}
.input{width:100%;padding:11px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;font-size:14.5px}

.artikel{max-width:76ch}
.artikel h2{font-size:clamp(19px,2.4vw,25px);margin:34px 0 10px}
.artikel p,.artikel li{color:#3d4759;font-size:15.5px}
.artikel ul,.artikel ol{padding-left:22px}
.artikel li{margin:6px 0}