:root{
  --bg:#06111f;
  --bg-deep:#020814;
  --surface:#0a1d36;
  --surface-soft:#102a4a;
  --primary:#2f88ff;
  --primary-2:#35d9ff;
  --accent:#27e0a3;
  --warning:#ffb020;
  --text:#f6fbff;
  --muted:#a8b7ca;
  --line:rgba(255,255,255,.12);
  --card:rgba(255,255,255,.075);
  --shadow:0 30px 90px rgba(0,0,0,.35);
  --radius:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,sans-serif;
  background:
    radial-gradient(circle at 20% 5%,rgba(47,136,255,.32),transparent 34%),
    radial-gradient(circle at 80% 15%,rgba(53,217,255,.18),transparent 30%),
    linear-gradient(180deg,#041024 0%,#071527 42%,#06101d 100%);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.header{
  position:fixed;top:0;left:0;width:100%;z-index:999;
  background:rgba(3,12,27,.7);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:.35s ease;
}
.header.scrolled{background:rgba(2,8,20,.96);box-shadow:0 12px 45px rgba(0,0,0,.28)}
.header .container{height:82px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.logo a{font-weight:800;font-size:25px;letter-spacing:.3px;display:flex;align-items:center}
.logo img{height:56px;width:auto;object-fit:contain;border-radius:10px}
.highlight,.accent{color:var(--primary-2)}
.navbar ul{display:flex;align-items:center;gap:6px;list-style:none}
.navbar a{padding:12px 16px;border-radius:999px;font-weight:600;font-size:14px;color:#d9e7f8;transition:.25s ease}
.navbar a:hover,.navbar a.active{background:rgba(47,136,255,.14);color:#fff}
.mobile-btn{display:none;font-size:24px;color:#fff}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border-radius:14px;font-weight:700;font-size:14px;
  border:1px solid transparent;transition:.25s ease;cursor:pointer;
}
.primary-btn{background:linear-gradient(135deg,var(--primary),#1766e9);box-shadow:0 16px 42px rgba(47,136,255,.32);color:#fff}
.primary-btn:hover{transform:translateY(-3px);box-shadow:0 20px 52px rgba(47,136,255,.45)}
.secondary-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.secondary-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
.hero{
  min-height:100vh;padding:150px 0 80px;position:relative;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(3,11,27,.96) 0%,rgba(5,19,43,.78) 50%,rgba(4,15,35,.75) 100%),
    url('../img/pattern-bg.png') center/cover no-repeat;
}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(2,8,20,.65));pointer-events:none}
.hero-content{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.08fr;gap:54px;align-items:center}
.eyebrow{
  display:inline-flex;gap:10px;align-items:center;
  color:#aee7ff;border:1px solid rgba(97,194,255,.25);
  padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.06);
  font-size:13px;font-weight:700;margin-bottom:20px;
}
.hero h1,.page-hero h1{font-size:clamp(42px,6vw,76px);line-height:1.05;letter-spacing:-2.2px;margin-bottom:24px}
.hero p,.page-hero p{color:#d6e4f3;font-size:17px;max-width:650px}
.hero-cta{display:flex;gap:14px;margin:32px 0 32px;flex-wrap:wrap}
.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.metric{
  padding:16px;border-radius:18px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12)
}
.metric strong{display:block;font-size:25px;color:#fff}
.metric span{font-size:12px;color:#a9bad0}
.hero-visual{position:relative}
.hero-visual img{filter:drop-shadow(0 35px 65px rgba(0,0,0,.45));animation:float 7s ease-in-out infinite}
.floating-card{
  position:absolute;padding:14px 16px;border-radius:16px;background:rgba(10,29,54,.88);
  border:1px solid rgba(110,191,255,.25);box-shadow:var(--shadow);font-size:13px;font-weight:700;
}
.float-one{top:30px;left:-10px;animation:float 6s ease-in-out infinite}
.float-two{right:10px;bottom:70px;animation:float 7s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
section{padding:96px 0}
.section-kicker{font-size:13px;font-weight:800;color:#6fd7ff;text-transform:uppercase;letter-spacing:1.7px;margin-bottom:10px}
.section-title{font-size:clamp(30px,4vw,48px);line-height:1.15;text-align:center;margin-bottom:14px;letter-spacing:-1px}
.section-subtitle{text-align:center;color:var(--muted);max-width:760px;margin:0 auto 44px}
.partners{padding:38px 0;background:rgba(255,255,255,.98);color:#111827}
.partners .section-title{font-size:18px;color:#5b6472;margin-bottom:26px}
.partner-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center}
.logo-item{
  height:88px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #eef2f7;box-shadow:0 12px 35px rgba(9,30,66,.08);padding:18px;
  filter:grayscale(.08);transition:.25s ease;
}
.logo-item:hover{transform:translateY(-4px);filter:grayscale(0);box-shadow:0 18px 45px rgba(9,30,66,.14)}
.logo-item img{max-height:58px;max-width:100%;width:auto;object-fit:contain}
.logo-item img[src*="indosat"]{max-height:70px}
.logo-item img[src*="telkom"]{max-height:72px}
.logo-item img[src*="smartfren"]{max-height:62px}
.logo-item img[src*="moratelindo"]{max-height:58px}
.logo-item img[src*="conversant"]{max-height:56px}
.logo-item img[src*="liveperson"]{max-height:52px}
.logo-item.placeholder{font-weight:800;color:#1a2942;letter-spacing:.4px}
.light-section{background:linear-gradient(180deg,#f7fbff 0%,#ecf4ff 100%);color:#0b1830}
.dark-section{background:linear-gradient(180deg,rgba(4,14,31,.88),rgba(6,16,31,.94));color:#fff}
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;
}
.split h2{font-size:clamp(30px,4vw,50px);line-height:1.15;margin-bottom:18px}
.split p{color:var(--muted);margin-bottom:18px}
.light-section .split p,.light-section .card p,.light-section .section-subtitle{color:#5d6a7c}
.visual-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08)}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  position:relative;padding:28px;border-radius:24px;background:var(--card);
  border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.16);
  transition:.3s ease;overflow:hidden;
}
.light-section .card{background:#fff;border-color:#e7eef8;box-shadow:0 20px 45px rgba(9,30,66,.08)}
.card:before{content:"";position:absolute;top:-70px;right:-70px;width:150px;height:150px;background:radial-gradient(circle,rgba(53,217,255,.18),transparent 65%);transition:.3s ease}
.card:hover{transform:translateY(-8px);border-color:rgba(71,166,255,.45)}
.icon{
  width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(47,136,255,.25),rgba(53,217,255,.16));
  border:1px solid rgba(107,191,255,.25);font-size:24px;color:#72dfff;margin-bottom:20px;
}
.card h3{font-size:21px;margin-bottom:10px;color:inherit}
.card p{color:#b7c7da;font-size:14.5px;margin-bottom:18px}
.link{font-weight:800;color:#65d7ff}
.link i{margin-left:6px;transition:.25s ease}
.link:hover i{transform:translateX(5px)}
.product-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.product-card img{width:100%;height:220px;object-fit:cover}
.product-card .product-body{padding:24px}
.product-card .chips{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}
.chip{padding:7px 10px;border-radius:999px;background:rgba(47,136,255,.12);border:1px solid rgba(47,136,255,.25);font-size:12px;color:#bde8ff;font-weight:700}
.light-section .chip{color:#1462bd;background:#edf6ff;border-color:#d5e9ff}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{
  padding:28px;border-radius:24px;background:rgba(255,255,255,.07);
  border:1px solid var(--line);position:relative;
}
.step-number{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:20px}
.step p{color:#b9c9dc;font-size:14px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat-item{text-align:center;padding:34px 20px;border-radius:24px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.stat-number{font-size:48px;font-weight:800;line-height:1;color:#72dfff}
.stat-item p{color:#b9c9dc;margin-top:10px}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testimonial{padding:28px;border-radius:24px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.testimonial p{color:#d8e6f7;margin-bottom:18px}
.author{font-weight:800;color:#6fe1ff}
.accordion{max-width:900px;margin:0 auto;display:grid;gap:14px}
.accordion-item{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.06);overflow:hidden}
.light-section .accordion-item{background:#fff;border-color:#e4edf8}
.accordion-header{width:100%;padding:20px 24px;text-align:left;background:transparent;border:0;color:inherit;font:inherit;font-weight:800;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.accordion-header:after{content:"+";font-size:24px;color:#6edfff}
.accordion-item.active .accordion-header:after{content:"−"}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .35s ease}
.accordion-content p{padding:0 24px 20px;color:#b9c9dc}
.light-section .accordion-content p{color:#5d6a7c}
.cta{padding:92px 0;background:linear-gradient(135deg,#0c2f68,#0799d6);position:relative;overflow:hidden}
.cta:before{content:"";position:absolute;inset:0;background:url('../img/pattern-bg.png') center/cover;opacity:.2}
.cta-inner{position:relative;text-align:center;max-width:850px}
.cta h2{font-size:clamp(32px,4vw,54px);line-height:1.1;margin-bottom:16px}
.cta p{color:#e1f3ff;margin-bottom:28px}
.footer{background:#020814;color:#cfdbeb;padding:70px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px}
.footer h3,.footer h4{color:#fff;margin-bottom:14px}
.footer p,.footer a{color:#a8b7ca;font-size:14px}
.footer ul{list-style:none;display:grid;gap:8px}
.footer a:hover{color:#6edfff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding-top:20px;text-align:center;color:#75869e;font-size:13px}
.page-hero{
  padding:155px 0 88px;background:
  linear-gradient(90deg,rgba(4,13,31,.96),rgba(7,28,59,.86)),
  url('../img/pattern-bg.png') center/cover no-repeat;
}
.page-hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.breadcrumb{color:#9db0c7;font-size:13px;margin-bottom:18px}
.breadcrumb a{color:#68ddff}
.hero-product-img{border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.15);box-shadow:var(--shadow)}
.feature-list{display:grid;gap:12px;margin:22px 0}
.feature-list li{list-style:none;display:flex;gap:12px;color:#d5e5f7}
.feature-list li:before{content:"✓";width:24px;height:24px;border-radius:8px;background:rgba(39,224,163,.16);color:#48e6b1;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-weight:800}
.light-section .feature-list li{color:#324157}
.modules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.benefit-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.benefit{padding:22px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.light-section .benefit{background:#fff;border-color:#e4edf8}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px}
.form-card,.info-card{padding:32px;border-radius:28px;background:rgba(255,255,255,.07);border:1px solid var(--line);box-shadow:var(--shadow)}
.form-group{display:grid;gap:8px;margin-bottom:16px}
label{font-weight:700;color:#e9f4ff}
input,textarea,select{
  width:100%;padding:15px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(3,13,29,.7);color:#fff;font:inherit;outline:none;transition:.25s ease;
}
input:focus,textarea:focus,select:focus{border-color:rgba(82,188,255,.75);box-shadow:0 0 0 4px rgba(47,136,255,.14)}
textarea{min-height:140px;resize:vertical}
.contact-list{display:grid;gap:18px;margin-top:22px}
.contact-item{display:flex;gap:14px;align-items:flex-start}
.contact-item i{color:#6edfff;margin-top:4px}
.map-placeholder{height:290px;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#eaf5ff,#cce7ff);display:flex;align-items:center;justify-content:center;color:#0b1830;font-weight:800;position:relative}
.map-placeholder:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(13,84,155,.08) 1px,transparent 1px),linear-gradient(0deg,rgba(13,84,155,.08) 1px,transparent 1px);background-size:28px 28px}
.map-placeholder span{position:relative;background:#fff;padding:12px 18px;border-radius:999px;box-shadow:0 12px 30px rgba(9,30,66,.14)}
.video-preview{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;border:1px solid rgba(255,255,255,.13)}
.play-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;background:rgba(47,136,255,.9);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 0 0 18px rgba(47,136,255,.15)}
.reveal{opacity:0;transform:translateY(28px);transition:.75s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.table-wrap{overflow:auto;border-radius:22px;border:1px solid rgba(255,255,255,.12)}
table{width:100%;border-collapse:collapse;min-width:720px;background:rgba(255,255,255,.05)}
th,td{padding:16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.09)}
th{color:#fff;background:rgba(47,136,255,.18)}
td{color:#c6d7ea}
.whatsapp-float{
  position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;
  background:#25D366;color:white;display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 45px rgba(37,211,102,.35);font-size:28px;z-index:777
}
@media (max-width:1000px){
  .hero-content,.page-hero .container,.split,.contact-grid{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .steps,.stats-grid,.partner-logos{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .logo img{height:46px}
  .mobile-btn{display:block}
  .navbar{position:fixed;top:82px;left:0;right:0;background:rgba(2,8,20,.98);border-bottom:1px solid rgba(255,255,255,.08);transform:translateY(-130%);transition:.35s ease;box-shadow:0 30px 60px rgba(0,0,0,.35)}
  .navbar.open{transform:translateY(0)}
  .navbar ul{flex-direction:column;align-items:stretch;padding:22px;width:min(100%,420px);margin:0 auto}
  .navbar a{display:block;text-align:center}
  .hero{padding-top:130px}
  .hero h1,.page-hero h1{font-size:42px}
  .cards-grid,.modules-grid,.benefit-row,.testimonial-grid{grid-template-columns:1fr}
  .hero-metrics{grid-template-columns:1fr}
  .partner-logos{grid-template-columns:1fr 1fr}
  .stats-grid,.steps{grid-template-columns:1fr}
  section{padding:72px 0}
  .footer-grid{grid-template-columns:1fr}
}