/* =====================================================
   PT Wireless Indonesia (WIN) — Network & Internet Service Provider
   Token system:
   Color   : --navy #0A1128 (dasar jaringan/gelap), --navy-2 #131B3A, --cyan #00D9FF
             (aksen sinyal/koneksi), --paper #F4F7FB, --ink #0A1128, --grey #5A6478
   Type    : Display = "Plus Jakarta Sans" (geometris modern SaaS), Body = "Plus Jakarta Sans",
             Aksen angka/teknis = "JetBrains Mono"
   Shape   : diagram node-jaringan (titik terhubung garis), glow cyan, kartu glass-ish
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --navy:#0A1128;
  --navy-2:#131B3A;
  --navy-3:#1B2650;
  --cyan:#00D9FF;
  --cyan-deep:#00A8C9;
  --paper:#F4F7FB;
  --paper-2:#E8EDF5;
  --ink:#0A1128;
  --grey:#5A6478;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; line-height:1.25; margin:0 0 .5em; color:var(--ink);}
p{margin:0 0 1em; color:var(--grey);}
a{color:var(--navy); text-decoration:none;}
a:hover{color:var(--cyan-deep);}
img,svg{max-width:100%; display:block;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; z-index:999;}
.skip-link:focus{left:16px; top:16px;}

/* ===== Header ===== */
header.site-header{background:var(--navy); border-bottom:1px solid #22305E; position:sticky; top:0; z-index:50;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:#fff;}
.logo:hover{color:#fff;}
.logo .mark{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg, var(--cyan), var(--navy-3)); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{font-size:14px; font-weight:500; color:#AEB8D6;}
.nav-links a:hover{color:var(--cyan);}
.btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--cyan); color:var(--navy);
  padding:12px 24px; font-weight:700; font-size:13.5px; border:1px solid var(--cyan); border-radius:8px;
  transition:.15s ease;
}
.btn:hover{background:#fff; border-color:#fff;}
.btn-outline{background:transparent; color:#fff; border:1px solid #3A4670;}
.btn-outline:hover{border-color:var(--cyan); color:var(--cyan);}

/* ===== Hero ===== */
.hero{position:relative; padding:70px 0 60px; background:var(--navy); overflow:hidden;}
.hero-network-bg{position:absolute; inset:0; opacity:.5; z-index:0;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; position:relative; z-index:1;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.05em; color:var(--cyan); font-weight:500; margin-bottom:18px; background:rgba(0,217,255,.08); border:1px solid rgba(0,217,255,.25); padding:6px 14px; border-radius:999px;}
.hero h1{color:#fff; font-size:42px; max-width:560px;}
.hero .lede{color:#AEB8D6; font-size:16px; max-width:500px; margin:16px 0 30px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px;}
.hero-stats{display:flex; gap:30px; flex-wrap:wrap;}
.hstat b{display:block; font-family:'JetBrains Mono',monospace; font-size:22px; color:var(--cyan);}
.hstat span{font-size:11px; color:#7C87A8; text-transform:uppercase; letter-spacing:.04em;}

/* ===== Sections ===== */
section{padding:64px 0;}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head .eyebrow{background:rgba(0,168,201,.08); border-color:rgba(0,168,201,.25); color:var(--cyan-deep);}
.section-head h2{font-size:28px;}
.section-head.center{max-width:640px; margin-left:auto; margin-right:auto; text-align:center;}

/* ===== Layanan cards (glass-ish on dark) ===== */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.svc-card{background:#fff; border:1px solid var(--paper-2); border-radius:14px; padding:26px; transition:.15s;}
.svc-card:hover{border-color:var(--cyan); box-shadow:0 16px 32px -22px rgba(0,168,201,.35);}
.svc-card .icon{width:44px; height:44px; border-radius:10px; background:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.svc-card h3{font-size:16.5px; margin-bottom:8px;}
.svc-card p{font-size:13px; margin:0;}

/* ===== Network diagram section ===== */
.network-section{background:var(--navy); border-radius:20px; padding:56px 40px; position:relative; overflow:hidden;}
.network-section .section-head h2, .network-section .section-head p{color:#fff;}
.network-section .section-head p{color:#AEB8D6;}
.network-visual{position:relative; z-index:1;}

/* ===== Keunggulan / stat band ===== */
.stat-band{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--paper-2); border:1px solid var(--paper-2); border-radius:14px; overflow:hidden;}
.stat-item{background:#fff; padding:28px 20px; text-align:center;}
.stat-item b{display:block; font-family:'JetBrains Mono',monospace; font-size:26px; color:var(--navy);}
.stat-item span{font-size:12px; color:var(--grey); text-transform:uppercase; letter-spacing:.03em;}

/* ===== Keunggulan grid ===== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.adv-card{padding:26px; border-radius:14px; background:var(--paper-2);}
.adv-card .icon{width:42px; height:42px; border-radius:10px; background:var(--cyan); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.adv-card h3{font-size:16.5px; margin-bottom:8px;}
.adv-card p{font-size:13.5px; margin:0;}

/* ===== CTA band ===== */
.cta-band{background:linear-gradient(135deg, var(--navy), var(--navy-3)); border-radius:20px; padding:56px 40px; text-align:center; position:relative; overflow:hidden;}
.cta-band h2{color:#fff; font-size:28px; position:relative; z-index:1;}
.cta-band p{color:#AEB8D6; position:relative; z-index:1;}
.cta-band .inner-cta{position:relative; z-index:1;}

/* ===== Footer ===== */
footer{background:var(--navy); color:#7C87A8; padding:52px 0 26px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:38px;}
.footer-grid .logo{color:#fff;}
.footer-grid h5{font-size:14px; color:#fff; margin-bottom:14px;}
.footer-grid a{display:block; font-size:13.5px; color:#7C87A8; margin-bottom:10px;}
.footer-grid a:hover{color:var(--cyan);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#4E587A; border-top:1px solid #22305E; padding-top:20px; flex-wrap:wrap; gap:10px;}

/* ===== Responsive ===== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero h1{font-size:30px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:1fr;}
  .stat-band{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr; gap:24px;}
  .nav-links{display:none;}
}

a:focus-visible, button:focus-visible, .btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important;} }