:root{
/* VISOR BRAND COLORS */
--bg:#000000;
--bg2:#050816;
--bg3:#081022;
--bg4:#0A1330;

--panel:#001B5B;
--panel-light:#0F2A66;

--primary:#00B4FF;
--primary-dark:#0088CC;
--primary-light:#5CCFFF;

--silver:#C7CEDB;
--white:#FFFFFF;

--text:#FFFFFF;
--text-soft:#D6E2F5;

--border:rgba(255,255,255,.08);
--radius:18px;
}

/* =========================
RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Segoe UI',sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
overflow-x:hidden;
}

.container{
width:min(1200px,92%);
margin:auto;
}

/* =========================
NAVBAR
========================= */

.navbar{
position:sticky;
top:0;
z-index:1000;
background:rgba(0,0,0,.88);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(0, 179, 255, 0.577);
}

.navbar-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 0;
}

.logo{
display:flex;
align-items:center;
gap:12px;
font-weight:700;
font-size:1.05rem;
}

.logo img{
width:50px;
height:50px;
border-radius:50%;
object-fit:cover;
}

.logo .accent{
color:var(--primary);
}

nav{
display:flex;
gap:28px;
}

nav a{
color:#fff;
text-decoration:none;
font-weight:500;
transition:.3s;
}

nav a:hover{
color:var(--primary);
}
.menu-checkbox{ display:none; }
.menu-icon{ display:none; font-size:28px; color:white; cursor:pointer; }
@media (max-width:768px){
.menu-icon{ display:block; }
.nav-menu{ display:none; position:absolute; top:100%; left:0; width:100%; background:#0b1020; padding:16px; flex-direction:column; gap:14px; z-index:999; }
.menu-checkbox:checked ~ .nav-menu{ display:flex; }
.navbar-inner{ position:relative; }
}

/* =========================
BUTTON
========================= */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
border-radius:999px;
font-weight:600;
text-decoration:none;
transition:all .3s ease;
cursor:pointer;
}

.btn-primary,
.btn-mulai{
background:linear-gradient(135deg,#00B4FF,#0088CC);
color:#fff;
border:none;
box-shadow:
0 8px 24px rgba(0,180,255,.28),
0 0 20px rgba(0,180,255,.18);
}
.btn-block{
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  min-width: 365px;
  background:linear-gradient(135deg,#00B4FF,#0088CC);
color:#fff;
border: 1px solid var();
box-shadow:
0 8px 24px rgba(0,180,255,.28),
0 0 20px rgba(0,180,255,.18);

}

.btn-primary:hover,
.btn-mulai:hover{
transform:translateY(-2px) scale(1.02);
box-shadow:0 14px 36px rgba(0,180,255,.45);
}

.btn-ghost{
border:1px solid rgba(255,255,255,.15);
color:#fff;
background:transparent;
}

.btn-ghost:hover{
border-color:var(--primary);
color:var(--primary);
}

/* =========================
HERO (PENARIK UTAMA)
========================= */

.hero{
position:relative;
overflow:hidden;
min-height:100vh;
display:flex;
align-items:center;
padding:100px 0 80px;

/* GAMBAR FULL KIRI + KANAN */
background:
linear-gradient(rgba(0,0,0,.78), rgba(5,8,22,.88)),
url('/static/bg3.jpg') center center / cover no-repeat;
}

/* GRID AI */
.hero::before{
content:'';
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(0,180,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,180,255,.06) 1px, transparent 1px);

background-size:40px 40px;
pointer-events:none;
}

/* GLOW BIRU */
.hero::after{
content:'';
position:absolute;
width:520px;
height:520px;
top:-160px;
right:-120px;

background:radial-gradient(
circle,
rgba(0,180,255,.32) 0%,
rgba(0,180,255,.10) 35%,
transparent 70%
);

pointer-events:none;
}

/* TRANSISI KE BAWAH */
.hero-bottom-fade{
position:absolute;
left:0;
right:0;
bottom:-1px;
height:120px;

background:linear-gradient(
to bottom,
rgba(5,8,22,0) 0%,
rgba(5,8,22,.95) 100%
);

pointer-events:none;
}

.hero .container{
position:relative;
z-index:2;
}

/* LAYOUT */
.hero-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:48px;
align-items:center;
}

.badge{
display:inline-block;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#fff;
padding:8px 16px;
border-radius:999px;
font-size:.85rem;
font-weight:600;
margin-bottom:22px;
}

.hero-copy h1{
font-size:clamp(2.8rem,5vw,5rem);
line-height:1.02;
font-weight:800;
letter-spacing:-0.03em;
margin-bottom:20px;

background:linear-gradient(180deg,#FFFFFF 0%, #CFE8FF 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-copy p{
color:var(--text-soft);
font-size:1.05rem;
margin-bottom:34px;
max-width:620px;
}

.hero-actions{
display:flex;
gap:16px;
flex-wrap:wrap;
}

/* =========================
DASHBOARD PREMIUM
========================= */

.hero-panel{
background:rgba(0,27,91,.72);
border:1px solid rgba(92,207,255,.18);
border-radius:28px;
padding:24px;
backdrop-filter:blur(18px);

box-shadow:
0 24px 60px rgba(0,0,0,.55),
0 0 40px rgba(0,180,255,.16);
}

.panel-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.live-dot{
background:rgba(0,180,255,.15);
color:#ef0808;
padding:6px 12px;
border-radius:999px;
font-size:.85rem;
font-weight:700;
}

.panel-stats{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-bottom:20px;
}

.fitur-card1{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:18px;
}

.fitur-card1 strong{
display:block;
font-size:1.8rem;
margin-bottom:6px;
}

.fitur-card1 span{
color:var(--text-soft);
}

.panel-alert{
background:rgba(0,180,255,.10);
border:1px solid rgba(0,180,255,.18);
border-radius:16px;
padding:16px;
color:#D6F4FF;
}

.panel-alert small{
display:block;
margin-top:6px;
opacity:.8;
}

/* =========================
CCTV PREVIEW
========================= */

.cctv-preview{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:24px;
}

.cctv-preview img{
width:100%;
height:150px;
object-fit:cover;
border-radius:16px;
border:1px solid rgba(255,255,255,.08);
transition:transform .35s ease, box-shadow .35s ease;
}

.cctv-preview img:hover{
transform:scale(1.03);
box-shadow:0 12px 28px rgba(0,0,0,.35);
}

/* =========================
SECTION (NYAMBUNG KE HERO)
========================= */

.section{
position:relative;
padding:90px 0;
background:linear-gradient(
180deg,
#050816 0%,
#081022 100%
);
}

.section-alt{
background:linear-gradient(
180deg,
#081022 0%,
#0A1330 100%
);
}

.eyebrow{
display:block;
text-align:center;
color:var(--silver);
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:16px;
}

.section h2{
text-align:center;
font-size:clamp(1.8rem,3vw,3rem);
max-width:720px;
margin:0 auto 42px;
color:#fff;
}

/* =========================
GRID
========================= */

.fitur-grid,
.langkah-grid,
.testimoni-grid,
.problem-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

/* =========================
CARD
========================= */

.fitur-card,
.langkah-card,
.testimoni-card,
.problem-card,
.compat-item,
.harga-card{
background:rgba(0,27,91,.55);
border:1px solid rgba(199,206,219,.12);
border-radius:22px;
padding:26px;
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
backdrop-filter:blur(10px);
}
.harga-card{
  background:rgba(0,27,91,.55);
border:1px solid rgba(199,206,219,.12);
border-radius:22px;
max-width: 400px;
margin: 0 auto;
padding:16px;
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
backdrop-filter:blur(10px);
justify-content: center;
}

.fitur-card:hover,
.langkah-card:hover,
.testimoni-card:hover,
.problem-card:hover,
.compat-item:hover,
.contact-card:hover,
.harga-card:hover{
transform:translateY(-8px);
border-color:rgba(0,180,255,.35);
box-shadow:
0 20px 40px rgba(0,0,0,.35),
0 0 30px rgba(0,180,255,.12);
}

.fitur-icon{
font-size:1.8rem;
margin-bottom:14px;
}

.fitur-card h3,
.langkah-card h3,
.problem-card h3{
margin-bottom:10px;
}

.fitur-card p,
.langkah-card p,
.problem-card p{
color:var(--text-soft);
}

.harga-list{
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
.harga-list li{
  list-style: none;
  margin-bottom: 14px;
  padding-left: 0;
}
.harga-badge {
  background:rgba(0,180,255,.15);
color:#f8f5f5;
padding:6px 12px;
border-radius:999px;
font-size:.85rem;
font-weight:700;

}
.price{ display:flex; align-items:flex-end; gap:6px; margin:12px 0 18px; }
.price-main{ font-size:3rem; font-weight:800; line-height:1; color:#ffffff; }
.price-period{ font-size:1rem; font-weight:500; color:#cbd5e1; margin-bottom:6px; }

/* =========================
LANGKAH
========================= */

.langkah-no{
display:inline-flex;
width:40px;
height:40px;
border-radius:50%;
align-items:center;
justify-content:center;
background:#000000;
color:var(--primary);
font-weight:700;
margin-bottom:16px;
}

/* =========================
WHATSAPP
========================= */

.wa-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:48px;
align-items:center;
}

.wa-copy p{
color:var(--text-soft);
}

.wa-features{
list-style:none;
margin-top:24px;
}

.wa-features li{
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}

.wa-preview{
background:#0B141A;
border-radius:26px;
padding:24px;
border:1px solid rgba(255,255,255,.06);
box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.wa-header{
color:#25D366;
font-weight:700;
margin-bottom:18px;
}

.wa-bubble{
background:#202C33;
color:#E9EDEF;
padding:18px;
border-radius:18px 18px 18px 6px;
}

/* =========================
CONTACT
========================= */
.contact-card{
  transition: transform .3s ease, box-shadow .3s ease;
  transform:translateY(-8px);
border-color:rgba(7, 193, 72, 0.35);
box-shadow:
0 20px 40px rgba(0,0,0,.35),
0 0 30px rgba(0,180,255,.12);

}
.contact-badge{
  background:rgba(0,180,255,.15);
color:hsl(0, 13%, 94%);
padding:6px 12px;
border-radius:999px;
font-size:.85rem;
font-weight:700;

}
.contact-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
margin-top:24px;
}

.contact-list{
list-style:none;
margin:18px 0 24px;
}

.contact-list li{
padding:12px 0;
border-bottom:1px solid rgba(239, 6, 6, 0.08);
}
.social-list img{
  width: 50px;
  height: 50px;
}
.social-list{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:18px; }
.social-list li{ margin:0; }
.social-list a{ display:flex; align-items:center; gap:14px; text-decoration:none; color:#ffffff; font-weight:600; font-size:16px; line-height:1; }
.social-list a:hover{ color:#4f8cff; transform:translateX(4px); transition:.25s; }
.social-list img{ width:32px; height:32px; object-fit:contain; display:block; flex-shrink:0; }

.contact-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 180,255,25);
}
/* =========================
KOMPATIBILITAS
========================= */

.compat-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:32px;
}

.compat-item{
text-align:center;
font-weight:700;
}

/* =========================
FOOTER
========================= */

.footer{
background:#000000;
border-top:1px solid rgba(0,180,255,.12);
padding:64px 0 40px;
margin-top: 60px;
}

.footer-grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:32px;
}

.footer-brand p{
  line-height: 1.7;
margin-top:14px;
color:var(--text-soft);
max-width:340px;
}

.footer-col h4{
color:var(--silver);
margin-bottom:16px;
}

.footer-col a{
display:block;
margin-bottom:10px;
color:var(--text-soft);
text-decoration:none;
transition:.25s;
}
.footer-col a:hover{color: #4f8cff;}
.footer-brand{text-align: center;}
.footer-brand .logo{justify-content: center;}
.footer-col{padding-top: 20px; }
.footer-h4{font-size: 18px;}
.footer-col a{padding: 6px 0; font-size: 15px;}
.footer-bottom{
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: block;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  gap: 12px;
  color: 94a3b8;
  font-size: 14px;
  @media(max-width:768px){
    .footer-bottom{flex-direction: column;text-align: center;gap: 8px; font-size: 13px;}
  }
}

.footer-col a:hover{
color:var(--primary);
}

/* =========================
ANIMASI
========================= */

.fade-up{
animation:fadeUp .8s ease both;
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* =========================
RESPONSIVE
========================= */

/* TABLET */
@media (max-width: 992px){

.hero-grid,
.wa-grid,
.contact-grid{
grid-template-columns:1fr;
}

.fitur-grid,
.langkah-grid,
.testimoni-grid,
.problem-grid,
.compat-grid{
grid-template-columns:1fr 1fr;
}

.cctv-preview{
grid-template-columns:repeat(2,1fr);
}

.hero-copy{
text-align:center;
}

.hero-copy p{
margin-left:auto;
margin-right:auto;
}

.hero-actions{
justify-content:center;
}

.footer-grid{
grid-template-columns:1fr 1fr;
}
}

/* HP */
@media (max-width: 640px){

.navbar-inner{
padding:14px 0;
}

.logo img{
width:44px;
height:44px;
}

nav{
display:none;
}

.hero{
min-height:auto;
padding:72px 0 56px;
}

.hero-copy h1{
font-size:2.2rem;
}

.hero-copy p{
font-size:.96rem;
}

.hero-actions{
flex-direction:column;
align-items:stretch;
}

.btn{
width:100%;
}

.fitur-grid,
.langkah-grid,
.testimoni-grid,
.problem-grid,
.compat-grid,
.contact-grid,
.cctv-preview,
.panel-stats{
grid-template-columns:1fr;
}

.hero::after{
width:320px;
height:320px;
top:-120px;
right:-120px;
} 
.footer-grid{ grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;}
.footer-brand{ grid-column: 1 / -1; text-align: center; margin-bottom: 8px;}
}