@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--font-heading:'Space Grotesk',sans-serif;--font-body:'Inter',sans-serif;--btn-radius:12px;--btn-text:var(--btn-text-dark,#050508);--btn-bg:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));--nav-bg:rgba(10,10,15,0.7);--bg-primary:#0A0A0F;--bg-secondary:#12121A;--accent-cyan:#00F0FF;--accent-purple:#7B2FFF;--text-primary:#F5F5F7;--text-muted:#8892A4;--glass-bg:rgba(255,255,255,0.03);--glass-border:rgba(255,255,255,0.08);--success:#00FF88;--error:#FF4466}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
body{background-image:radial-gradient(ellipse 80% 50% at 50% -20%,color-mix(in srgb,var(--accent-purple) 15%,transparent),transparent),radial-gradient(ellipse 60% 40% at 90% 10%,color-mix(in srgb,var(--accent-cyan) 8%,transparent),transparent)}
h1,h2,h3,h4{font-family:var(--font-heading);margin:0;letter-spacing:-0.02em}
p{margin:0;line-height:1.6}
a{color:var(--accent-cyan);text-decoration:none}
a:hover{color:#5FF6FF}
::selection{background:var(--accent-purple);color:#fff}
.dot-grid{background-image:radial-gradient(rgba(255,255,255,0.06) 1px,transparent 1px);background-size:28px 28px}
.container{max-width:1240px;margin:0 auto;padding:0 32px}
.glass{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:16px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);font-size:13px;color:var(--text-muted);font-weight:500}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-cyan);box-shadow:0 0 8px var(--accent-cyan)}
.grad-text{background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--btn-radius);font-weight:600;font-size:15px;cursor:pointer;border:none;transition:transform .2s ease,box-shadow .2s ease;font-family:var(--font-body)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--btn-bg);color:var(--btn-text);box-shadow:0 0 24px color-mix(in srgb,var(--accent-cyan) 25%,transparent)}
.btn-primary:hover{box-shadow:0 0 32px color-mix(in srgb,var(--accent-purple) 45%,transparent)}
.btn-ghost{background:var(--glass-bg);color:var(--text-primary);border:1px solid var(--glass-border)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--accent-cyan) 40%,transparent);color:var(--accent-cyan)}
.section{padding:120px 0}
.eyebrow{color:var(--accent-cyan);font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:16px;display:block}
.muted{color:var(--text-muted)}
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));z-index:9999;box-shadow:0 0 10px var(--accent-cyan)}
.tilt-card{transition:transform .15s ease,border-color .2s ease;transform-style:preserve-3d;will-change:transform}
.tilt-card:hover{border-color:color-mix(in srgb,var(--accent-cyan) 35%,transparent)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{display:flex;gap:64px;animation:marquee 28s linear infinite;width:max-content}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.caret{animation:blink 1s step-start infinite}
input,textarea,select{font-family:var(--font-body);background:rgba(255,255,255,0.03);border:1px solid var(--glass-border);color:var(--text-primary);border-radius:10px;padding:14px 16px;font-size:15px;outline:none;transition:border-color .2s ease}
input:focus,textarea:focus,select:focus{border-color:var(--accent-cyan)}
input::placeholder,textarea::placeholder{color:#5a6378}
.stat-num{font-family:var(--font-heading);font-weight:700;font-size:48px;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));-webkit-background-clip:text;background-clip:text;color:transparent}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--bg-secondary);border-radius:8px}
:root[data-theme="light"]{--nav-bg:rgba(250,250,252,0.8);--bg-primary:#F7F8FB;--bg-secondary:#EEF0F5;--accent-cyan:#0088A3;--accent-purple:#6420E0;--text-primary:#12131A;--text-muted:#5A6275;--glass-bg:rgba(255,255,255,0.7);--glass-border:rgba(18,19,26,0.1);--success:#00A35C;--error:#D6224A}
:root[data-theme="light"] input::placeholder,:root[data-theme="light"] textarea::placeholder{color:#9AA1B2}
:root[data-theme="light"]{--btn-text:var(--btn-text-light,#fff)}

/* =====================================================================
   Responsif — tablet (≤1024px) & ponsel (≤640px)
   Awalan :root membuat aturan ini menang atas style di tiap halaman.
   ===================================================================== */
html{-webkit-text-size-adjust:100%}
img{max-width:100%}
:root .herocta{display:flex;gap:16px;flex-wrap:wrap}

@media (max-width:1024px){
  :root .container{padding:0 24px}
  :root .section{padding:96px 0}
  :root .pgh1{font-size:40px}
  :root .heroh1{font-size:52px}
  :root .sectitle{font-size:34px}
  /* grid 3 kolom -> 2 kolom */
  :root .prodgrid,:root .grid3,:root .solgrid,:root .csrow2,:root .featgrid,:root .related,:root .teamgrid{grid-template-columns:repeat(2,1fr)}
  :root .statsgrid,:root .specs{grid-template-columns:repeat(2,1fr)}
  :root .pricegrid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  :root .pdhead{grid-template-columns:1fr;gap:32px;padding:24px 24px 48px}
  :root .ctwrap{grid-template-columns:1fr;gap:32px}
  :root .storygrid{grid-template-columns:1fr;gap:32px}
  :root .herogrid{grid-template-columns:1fr}
  :root .compare{overflow-x:auto;-webkit-overflow-scrolling:touch}
  :root .comptable{min-width:560px}
  :root .comptable th,:root .comptable td{padding:12px 10px}
  :root .comptable th:first-child,:root .comptable td:first-child{position:sticky;left:0;z-index:1;background:var(--bg-primary);text-align:left}
}

@media (max-width:640px){
  :root .container{padding:0 16px}
  :root .section{padding:72px 0}
  :root .pghero{padding:48px 0 28px}
  :root .pgh1{font-size:32px;line-height:1.15}
  :root .heroh1{font-size:40px}
  :root .sectitle{font-size:28px;line-height:1.2}
  :root .subcopy{font-size:16px}
  :root .eyebrow{font-size:12px}
  :root .btn{padding:13px 22px;font-size:15px}
  :root .herocta{gap:12px}
  :root .herocta .btn{flex:1 1 auto}
  /* semua grid kartu -> 1 kolom */
  :root .prodgrid,:root .grid3,:root .solgrid,:root .csrow2,:root .featgrid,:root .related,:root .teamgrid,:root .bloggrid{grid-template-columns:1fr}
  :root .statsgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  :root .statcard{padding:24px 12px}
  :root .stat-num{font-size:34px}
  :root .specs{grid-template-columns:1fr 1fr}
  :root .specitem{padding:18px}
  :root .pricecard{padding:28px 22px}
  :root .priceval{font-size:36px}
  :root .cscard{min-width:260px;padding:24px}
  :root .testcard{width:280px;padding:22px}
  :root .ctaband,:root .careerband{padding:48px 20px}
  :root .faqq{font-size:15px;gap:16px}
  /* produk & filter */
  :root .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
  :root .filters::-webkit-scrollbar{display:none}
  :root .chip{flex-shrink:0;white-space:nowrap;padding:9px 16px;font-size:13px}
  :root .toolbar input{min-width:0;width:100%}
  :root .tabrow,:root .billtoggle{width:100%;max-width:100%}
  :root .tabbtn,:root .billbtn{flex:1;text-align:center;padding:10px 12px;font-size:13px}
  /* detail produk & blog */
  :root .pdhead{padding:16px 16px 40px}
  :root .pdh1{font-size:32px}
  :root .arth1{font-size:28px}
  :root .artwrap{padding:20px 0 72px}
  :root .artbody p{font-size:15.5px}
  :root .pdcta{padding:56px 0}
  /* tentang */
  :root .tlitem{grid-template-columns:1fr;gap:6px;padding:22px 0}
  :root .avatar{width:72px;height:72px}
  /* kontak */
  :root .formcard{padding:24px 18px}
  :root .sidecard{padding:24px 18px}
  :root .field2{grid-template-columns:1fr;gap:0}
  :root .optgrid{gap:8px}
  :root .optcard{padding:12px 8px;font-size:13px}
  :root .formnav{gap:12px}
  :root .formnav .btn{flex:1}
  :root .successbox{padding:40px 12px}
  :root .chatbubble{width:50px;height:50px;right:16px;bottom:16px;font-size:20px}
  :root input,:root textarea,:root select{font-size:16px} /* cegah zoom otomatis di iOS */
}

/* Teks persetujuan kecil di bawah form + kotak verifikasi Turnstile */
.form-consent{font-size:12px;line-height:1.5;color:var(--text-muted);margin-top:16px}
.form-consent a{color:var(--accent-cyan)}
.ts-box:not(:empty){margin-top:16px}