:root{
      /* Light, dominan putih */
      --bg:#ffffff; --text:#0f172a; --muted:#475569;
      --primary:#0f62fe; --primary2:#3d7afe; --accent:#10b981;
      --card:#ffffff; --card2:#f8fafc;
      --line:#e2e8f0; --ring:rgba(15,98,254,.35);
      --shadow:0 10px 30px rgba(2,6,23,.08);
      --r:18px; --max:1200px; --tap:44px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
    body{
      /* BACKGROUND IMAGE */
      background:#fff url('/assets/suprapress.jpeg') no-repeat center/cover fixed;
      position:relative;
    }
    /* overlay supaya teks tetap terbaca */
    body::before{
      content:""; position:fixed; inset:0;
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86) 20%, rgba(255,255,255,.9));
      pointer-events:none; z-index:-1;
    }
    a{color:var(--primary);text-decoration:none}
    a:hover{color:var(--primary2);text-decoration:underline}
    a,button{min-height:var(--tap)}
    img{max-width:100%;height:auto}

    .container{max-width:var(--max);margin:0 auto;/* padding:16px 20px; */}

    /* NAV */
    header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
    .nav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
    .brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;-webkit-tap-highlight-color: transparent}
    .logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#8e61ff)}
    .brand-name{font-weight:900;letter-spacing:.2px}

    .menu{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
    .menu a{color:#0f172a}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:14px;font-weight:800;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);-webkit-tap-highlight-color: transparent}
    .btn.primary{background:var(--primary);color:#fff;border-color:transparent}
    .btn.ghost{background:#fff;color:#0f172a}
    .btn.small{padding:10px 12px;border-radius:12px;height: 50px;}

    /* Hamburger */
    .ham{display:none; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; line-height:0}
    .ham svg{width:22px;height:22px}

    /* Mobile menu drawer */
    .drawer{display:none}
    .drawer.open{display:block}
    .drawer .menu{flex-direction:column; align-items:flex-start; gap:10px; padding:12px 0}
    .drawer .menu a, .drawer .menu .btn{width:100%}

    /* HERO */
    .hero{/* padding:44px 0 24px; *//* padding: 16px 20px; */margin-top: 10px;}
    .hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
    .card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding: 20px;}
    .hero .left{padding:26px;}
    .hero h1{margin:0 0 8px;font-size:36px;letter-spacing:.2px;line-height:1.2}
    .hero p.lead{margin:0 0 16px;color:var(--muted);font-size:17px}
    .hero .cta{display:flex;gap:10px;flex-wrap:wrap}
    .hero .right{overflow:hidden}
    .panel{padding:20px;margin: 21px 0px 0px 0px;}
    .kicker{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef2ff;border:1px solid #dbe4ff;color:#334155;font-size:12px;margin-bottom:10px}
    .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;color:#0f172a;font-size:13px}
    .badges .b{border:1px dashed var(--line);padding:7px 10px;border-radius:10px;background:#fff}

    section{/* padding:28px 0; */padding: 0 16px;}
    h2{margin:0 0 8px;font-size:24px;padding-top: 15px;}
    .muted{color:var(--muted);/* text-align: center; */}

    .features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .demo-grid{grid-template-columns:repeat(4,1fr)}
    .feat{padding:16px;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
    .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#f8fafc;border:1px solid var(--line)}
    .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
    .step{padding:16px}
    .step .num{font-weight:800;font-size: 30px;color:#2563eb;margin-bottom:6px}
    /*.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}*/
    .pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:stretch}
    .price-card{padding:16px;display:flex;flex-direction:column}
    .price-card h3{margin:0 0 8px}
    .price{font-size:22px;font-weight:900;margin:6px 0 10px}
    .incl{margin:8px 0 0;padding-left:18px}
    .incl li{margin:4px 0}
    .footcard{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
    .note{font-size:13px;color:#64748b}
    .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .faq{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .faq .q{padding:16px}
    .heroimg{aspect-ratio: 16/16;width:100%;display:block;object-fit:cover;border-radius:calc(var(--r) - 2px);border:1px solid var(--line);padding: 14px;}
    footer{border-top:1px solid var(--line);/* margin-top:24px; */padding: 0 16px;}
    .footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap: 15px;padding:20px 0}
    .copy{color:#64748b;font-size:13px;text-align:center;padding:10px 0 24px}
    .pill{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#0f172a;font-size:12px}

    /* Responsive */
    @media (max-width: 1100px){ .demo-grid{grid-template-columns:repeat(3,1fr)} }
    @media (max-width: 980px){
      .hero-grid{grid-template-columns:1fr}
      .features{grid-template-columns:1fr 1fr}
      .steps{grid-template-columns:1fr 1fr}
      .pricing{grid-template-columns:1fr}
      .two{grid-template-columns:1fr}
      .faq{grid-template-columns:1fr}
      .footgrid{grid-template-columns:1fr 1fr}
      .demo-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 720px){
      .menu{display:none}
      .ham{display:inline-flex}
      .drawer{border-top:1px solid var(--line);background:#fff}
      .hero h1{font-size:28px}
    }
    @media (max-width: 560px){
      .features{grid-template-columns:1fr}
      .steps{grid-template-columns:1fr}
      .footgrid{grid-template-columns:1fr}
      .demo-grid{grid-template-columns:1fr}
    }
    :focus{outline:2px solid var(--ring); outline-offset:2px}

    /* Pastikan bagian atas gambar terlihat (logo SUPRAPRESS nongol) */
.heroimg{ object-position: top center; }  /* sebelumnya default center */
/* Background halaman: fokus di bagian atas foto */
body{ background-position: top center; }
.heroimg{ object-position: 50% 0%; } /* 0% = paling atas */


/* === NAV VISIBILITY FIXES === */
header.nav{
  position: sticky;
  top: 0;
  z-index: 9999; /* naikin biar di atas semua */
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
header.nav .nav-row{
  min-height: 56px; /* pastikan tinggi minimal */
}

/* Hamburger harus muncul di mobile */
@media (max-width: 720px){
  .menu{ display: none; }
  .ham{ display: inline-flex; }   /* pastikan tombolnya kelihatan */
}

/* Drawer biar tidak “di belakang” konten lain */
.drawer{
  position: fixed;
  top: 56px;       /* sama dengan tinggi nav-row */
  left: 0; right: 0;
  z-index: 9998;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: none;   /* default tertutup */
}
.drawer.open{ display:block; }

/* Pastikan overlay background tidak menutupi apapun */
body{ position: relative; z-index: 0; }
body::before{ z-index: -1; } /* sudah ada, ini hanya menegaskan */

/* 1) Pastikan atribut [hidden] benar-benar menyembunyikan, dan bisa di-override saat .open */
[hidden]{display:none !important;}
.drawer.open[hidden]{display:block !important;} /* jaga-jaga bila attr belum kehapus */

/* 2) Layering yang pasti: tombol, header, drawer, konten */
.ham{position:relative; z-index:10001;}     /* tombol selalu bisa diklik */
header.nav{z-index:10000;}                  /* nav di atas konten */
.drawer{
  position: fixed;
  left: 0; right: 0;
  top: 56px;                                /* sama dgn tinggi .nav-row */
  z-index: 9999;                            /* di bawah header, di atas konten */
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: none;                            /* default tertutup */
}
.drawer.open{ display:block; }

/* 3) Tinggi minimal bar nav biar tidak “0” di beberapa device */
header.nav .nav-row{ min-height: 56px; }

/* 4) Di mobile: sembunyikan menu utama, munculkan hamburger */
@media (max-width: 720px){
  .menu{ display:none; }
  .ham{ display:inline-flex; }
}

header.nav{ z-index:10000 }
.ham{ z-index:10001 }
.drawer{ position:fixed; top:56px; left:0; right:0; z-index:9999 }
[hidden]{ display:none !important }
.drawer.open[hidden]{ display:block !important }

/* === NAV & DRAWER OVERRIDES (paksa tampil) === */
header.nav{ position:sticky; top:0; z-index:10000; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
header.nav .nav-row{ min-height:56px; }
.ham{ display:none; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; line-height:0; pointer-events:auto; position:relative; z-index:10001; }

@media (max-width:720px){
  .menu{ display:none; }
  .ham{ display:inline-flex; }
}

/* Drawer sekarang sibling header → fixed full width, selalu di atas konten */
#drawer{
  position:fixed; left:0; right:0; top:56px;
  background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  z-index:9999; display:none;
}
#drawer.open{ display:block !important; }
#drawer[hidden]{ display:none !important; }
#drawer.open[hidden]{ display:block !important; } /* override attr hidden */
#drawer .menu{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:12px 20px; }
#drawer .menu a, #drawer .menu .btn{ width:100%; }


:root{ --navH:56px; }

/* Header di atas konten, tombol bisa diklik */
header.nav{ position:sticky; top:0; z-index:10000; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
header.nav .nav-row{min-height:var(--navH);padding: 14px;}
.ham{ display:none; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; line-height:0; position:relative; z-index:10001; pointer-events:auto; }
@media (max-width:720px){
  .menu{ display:none; }
  .ham{ display:inline-flex; }
}

/* === Drawer: hanya ini yang ngatur === */
#drawer{
  position:fixed;
  left:0;
  right:0;
  top:var(--navH);
  /* height:calc(100vh - var(--navH)); */
  overflow:auto;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
  z-index:9999;
  display:none !important;  /* default tertutup */
}
#drawer.open{ display:block !important; }   /* paksa muncul */
#drawer[hidden]{ display:none !important; } /* jaga konsisten */

#drawer .menu{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding: 22px 20px;
  text-align: center;
}
#drawer .menu a, #drawer .menu .btn{width:100%;padding: 10px;}

/* Pastikan overlay body tidak menutupi apa pun */
body{ position:relative; z-index:0; }
body::before{ z-index:-1; }

.card.panel h2 {
    /* text-align: center; */
}

/* Follow Us Social Icons */
#follow a svg { 
  color: #374151; /* default abu-abu gelap */
  transition: color .25s ease;
}

/* Hover warna sesuai brand */
#follow a[aria-label="WhatsApp"] svg { color:#25D366; }     /* WA hijau */
#follow a[aria-label="Facebook"] svg { color:#1877F2; }    /* FB biru */
#follow a[aria-label="X (Twitter)"] svg { color:#000000; } /* X hitam */
#follow a[aria-label="Instagram"] svg { 
  color:#E1306C; /* fallback pink IG */
}
/* Bisa pakai gradien IG kalau mau fancy */
#follow a[aria-label="Instagram"]:hover svg {
  color:transparent;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
  -webkit-background-clip:text;
  background-clip:text;
}

#follow a[aria-label="YouTube"] svg { color:#FF0000; }     /* YT merah */
#follow a[aria-label="Telegram"] svg { color:#229ED9; }   /* Telegram biru */
#follow a[aria-label="LinkedIn"] svg { color:#0A66C2; }   /* LinkedIn biru tua */


  .nav-row {
  display: flex;
  align-items: center;     /* <== ini kuncinya */
  justify-content: space-between;
  height: 64px;            /* tinggi navbar, bisa kamu ubah */
}

.menu {
  display: flex;
  align-items: center;     /* biar teks di <a> rata tengah vertikal */
  gap: 24px;
}

.menu a {
  display: inline-flex;    /* biar bisa ikut aturan flex centering */
  align-items: center;     /* teks pas di tengah vertikal */
  height: 100%;            /* penuh tinggi navbar */
  text-decoration: none;
  color: #111;
  font-weight: 500;
  padding: 0 4px;          /* kasih napas dikit */
}

/* === DESKTOP ONLY === */
@media (min-width: 981px) {
  .nav-row {
    display: flex;
    align-items: center;     /* sejajarkan logo, menu, tombol */
    justify-content: space-between;
    height: 64px;            /* tinggi navbar desktop */
  }

  .menu {
    display: flex;
    align-items: center;     /* biar link di tengah vertikal */
    gap: 24px;
  }

  .menu a {
    display: inline-flex;
    align-items: center;     /* teks rata tengah vertikal */
    height: 100%;
    text-decoration: none;
    color: #111;
    font-weight: 500;
    padding: 0 4px;
  }
}

/* ===== VARIABEL TINGGI NAV ===== */
:root { --navH: 56px; }                    /* mobile */
@media (min-width: 981px) { :root { --navH: 64px; } }  /* desktop */

/* ===== MOBILE (<=980px) — amanin tampilan ===== */
@media (max-width: 980px){
  .nav-row{
    min-height: var(--navH);
    height: auto;                /* jangan paksa height di mobile */
    align-items: center;
  }
  .menu{ display: none; }        /* menu hilang (pakai drawer) */
  .ham{ display: inline-flex; }  /* tombol hamburger muncul */
  .menu a{
    display: inline;             /* balikin default text flow */
    height: auto;                /* hilangkan height:100% yg bikin aneh */
    align-items: normal;
    padding: 0 4px;
  }
}

/* ===== DESKTOP (>=981px) — center vertikal link menu ===== */
@media (min-width: 981px){
  .ham{ display: none; }         /* sembunyikan hamburger */
  .menu{
    display: flex;
    align-items: center;         /* TEKS RATa TENGAH VERTIKAL */
    gap: 24px;
  }
  .nav-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--navH);         /* tinggi navbar desktop */
  }
  .menu a{
    display: inline-flex;
    align-items: center;         /* ini yang bikin pas di tengah */
    height: var(--navH);         /* samain dgn tinggi navbar */
    padding: 0 4px;
    text-decoration: none;
    color: #111;
    font-weight: 500;
  }
}


/* ====== SP Pledge Section ====== */
:root{
  --sp-bg: var(--card, #ffffff);
  --sp-text: var(--text, #0f172a);
  --sp-muted: var(--muted, #475569);
  --sp-brand: var(--primary, #0f62fe);
  --sp-brand-soft: var(--ring, rgba(15,98,254,.15));
  --sp-line: var(--line, #e2e8f0);
  --sp-radius: var(--r, 18px);
  --sp-shadow: var(--shadow, 0 10px 30px rgba(2,6,23,.08));
  --sp-max: var(--max, 1100px);
}

.sp-pledge{
  padding: clamp(32px, 5vw, 25px) 11px;
  /* background: transparent; */
}

.sp-pledge__container{
  max-width: var(--sp-max);
  margin: 0 auto;
}

.sp-pledge__panel{
  background: var(--sp-bg);
  color: var(--sp-text);
  border: 1px solid var(--sp-line);
  border-radius: calc(var(--sp-radius) + 2px);
  padding: clamp(20px, 4vw, 36px);
  box-shadow: var(--sp-shadow);
  text-align: center;
}

.sp-pledge__title{
  margin: 0 0 10px 0;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.2;
  letter-spacing: .2px;
}

.sp-pledge__bullets{
  margin: 10px auto 18px auto;
  padding: 0;
  list-style: none;
  max-width: 900px;
  text-align: left;
}

.sp-pledge__bullets li{
  position: relative;
  margin: 0 0 10px 0;
  padding-left: 28px;
  font-size: clamp(14px, 2.2vw, 16px);
  color: var(--sp-muted);
  line-height: 1.65;
}
.sp-pledge__bullets li::before{
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--sp-brand);
  box-shadow: 0 0 0 6px var(--sp-brand-soft);
}

.sp-pledge__cta{
  margin: 16px auto 0 auto;
  max-width: 900px;
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: 1.75;
}

.sp-pledge__cta em{
  color: var(--sp-muted);
}

/* kecilkan padding di layar sangat kecil */
@media (max-width: 420px){
  .sp-pledge__panel{ padding: 18px; }
}