/* Premium mobile-first: putih + biru muda */
:root{--primary:#2A8CFF;--secondary:#2A8CFF;--ink:#0b1220;--muted:rgba(11,18,32,.7);--line:rgba(11,18,32,.12);--shadow:0 12px 30px rgba(11,18,32,.08);--shadow2:0 10px 18px rgba(11,18,32,.10);--radius:18px}
*{box-sizing:border-box}html,body{height:100%}
body{font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff}
.site-header .navbar{background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand-logo{width:34px;height:34px}.brand-name{font-weight:800;letter-spacing:.2px}
.nav-link{font-weight:600}.nav-link:hover{color:var(--primary)}
.dropdown-menu{border-radius:14px;box-shadow:var(--shadow2);border:1px solid var(--line)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;box-shadow:0 8px 18px rgba(42,140,255,.22)}
.btn-outline-primary{border-color:rgba(42,140,255,.45);color:var(--primary)}.btn-outline-primary:hover{background:rgba(42,140,255,.08);border-color:rgba(42,140,255,.65);color:var(--primary)}
.hero{overflow:hidden;background:radial-gradient(800px 300px at 20% 0%,rgba(126,211,255,.25),transparent 60%),radial-gradient(700px 260px at 90% 10%,rgba(42,140,255,.18),transparent 60%)}
.py-lg-6{padding-top:5.5rem!important;padding-bottom:5.5rem!important}
.eyebrow{display:inline-flex;gap:.5rem;padding:.45rem .75rem;border:1px solid rgba(42,140,255,.25);border-radius:999px;background:rgba(255,255,255,.75);font-weight:600;font-size:.9rem}
.hero-card{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.hero-img{width:100%;height:420px;object-fit:cover;display:block}
.hero-badge{position:absolute;bottom:14px;left:14px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(10px);border-radius:14px;padding:.7rem .85rem}
.badge-title{font-weight:800}.badge-text{color:var(--muted);font-size:.9rem}
.trust{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem}.trust-item{color:var(--muted);font-weight:600;display:flex;align-items:center;gap:.45rem}
.dot{width:8px;height:8px;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:50%}
.section-title{font-weight:900}.section-text{color:var(--muted);line-height:1.7}
.section.alt{background:linear-gradient(180deg,rgba(42,140,255,.05),rgba(126,211,255,.04));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.img-stack{position:relative;min-height:360px}.img-stack img{position:absolute;width:78%;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);object-fit:cover}
.stack-a{left:0;top:0;height:320px}.stack-b{right:0;bottom:0;height:280px}
.stat{border:1px solid var(--line);border-radius:var(--radius);padding:1rem;background:rgba(255,255,255,.85);box-shadow:0 10px 22px rgba(11,18,32,.05)}
.stat-num{font-weight:900}.stat-label{color:var(--muted)}
.service-card{height:100%;border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.9);box-shadow:0 10px 20px rgba(11,18,32,.05);padding:1.1rem}
.service-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(42,140,255,.10);color:var(--primary);font-weight:900;margin-bottom:.75rem}
.service-title{font-weight:800}.service-text{color:var(--muted);margin-top:.35rem}
.product-card{text-decoration:none;color:inherit;display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 12px 30px rgba(11,18,32,.06);transition:transform .18s ease,box-shadow .18s ease;height:100%}
.product-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(11,18,32,.10)}
.product-media{position:relative}.product-media img{width:100%;height:210px;object-fit:cover;display:block}
.product-badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(10px);border-radius:999px;padding:.25rem .6rem;font-size:.8rem;font-weight:800}
.product-body{padding:1rem 1.05rem 1.1rem}.product-cat{color:rgba(11,18,32,.55);font-weight:700;font-size:.85rem}
.product-name{font-weight:900;margin-top:.15rem}.product-short{color:var(--muted);margin-top:.35rem;line-height:1.55}
.product-cta{margin-top:.75rem;color:var(--primary);font-weight:800}
.step-card{height:100%;border-radius:var(--radius);border:1px solid var(--line);background:#fff;box-shadow:0 10px 20px rgba(11,18,32,.05);padding:1.1rem}
.step-num{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,rgba(42,140,255,.12),rgba(126,211,255,.12));font-weight:900;margin-bottom:.65rem}
.step-title{font-weight:900}.step-text{color:var(--muted);margin-top:.25rem}
.pill{display:inline-flex;padding:.45rem .75rem;border:1px solid rgba(42,140,255,.25);border-radius:999px;background:rgba(255,255,255,.85);font-weight:700;margin:.25rem .35rem .25rem 0}
.value-card{border-radius:var(--radius);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);padding:1.2rem}
.value-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width:768px){.value-grid{grid-template-columns:1fr 1fr}}
.value-title{font-weight:900}.value-text{color:var(--muted);margin-top:.25rem}
.cta-box{border-radius:var(--radius);border:1px solid rgba(42,140,255,.22);background:linear-gradient(180deg,rgba(42,140,255,.08),rgba(126,211,255,.06));box-shadow:var(--shadow);padding:1.2rem}
.cta-title{font-weight:900}.cta-text{color:var(--muted);margin:.35rem 0 1rem}
.gallery-tile{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 20px rgba(11,18,32,.05);background:#fff}
.gallery-tile img{width:100%;height:160px;object-fit:cover;display:block}
.contact-card,.form-card,.spec-card{border-radius:var(--radius);border:1px solid var(--line);background:#fff;box-shadow:0 10px 20px rgba(11,18,32,.05);padding:1.1rem}
.form-card{box-shadow:var(--shadow);padding:1.2rem}.form-title{font-weight:900;margin-bottom:.75rem}
.contact-card a{color:var(--primary);text-decoration:none;font-weight:800}.contact-card a:hover{text-decoration:underline}
.page-hero{background:radial-gradient(760px 260px at 20% 0%,rgba(126,211,255,.22),transparent 60%),radial-gradient(700px 240px at 90% 10%,rgba(42,140,255,.16),transparent 60%);border-bottom:1px solid var(--line)}
.page-title{font-weight:900}.page-sub{color:var(--muted)}
.filter-bar{background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:16px;padding:.65rem;box-shadow:0 10px 20px rgba(11,18,32,.05)}
.slider{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.slider-track{display:flex;transition:transform .25s ease}.slider-track.dragging{transition:none}
.slide{min-width:100%}.slide img{width:100%;height:420px;object-fit:cover;display:block}
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.85);backdrop-filter:blur(10px);font-size:28px;display:grid;place-items:center;box-shadow:0 10px 18px rgba(11,18,32,.10)}
.slider-btn.prev{left:12px}.slider-btn.next{right:12px}
.slider-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:8px}
.slider-dots button{width:9px;height:9px;border-radius:999px;border:none;background:rgba(11,18,32,.25)}
.slider-dots button.active{background:linear-gradient(135deg,var(--primary),var(--secondary))}
.slider-hint{position:absolute;right:12px;bottom:12px;color:rgba(255,255,255,.85);font-weight:700;font-size:.82rem;text-shadow:0 2px 10px rgba(11,18,32,.45)}
.spec-title{font-weight:900;margin-bottom:.5rem}.spec-list{margin:0;padding-left:1.15rem;color:var(--muted)}.spec-list li{margin:.25rem 0}
.note{color:var(--muted)}code{background:rgba(42,140,255,.08);padding:.08rem .35rem;border-radius:8px}
.site-footer{background:#0b0f17;color:rgba(255,255,255,.85)}
.footer-logo{filter:brightness(0) invert(1)}.footer-brand{font-weight:900;color:#fff}
.footer-tagline{color:rgba(255,255,255,.7);font-size:.95rem}
.footer-desc{color:rgba(255,255,255,.72);line-height:1.7}
.footer-title{color:#fff;font-weight:900;margin-bottom:.65rem}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin:.35rem 0;color:rgba(255,255,255,.7)}
.footer-links a{color:rgba(255,255,255,.75);text-decoration:none}
.footer-links a:hover{color:#fff;text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65)}


/* --- Layout refinement (mobile + desktop) --- */
.navbar .container{padding-top:.15rem;padding-bottom:.15rem}
.hero .display-5{letter-spacing:-.4px}
@media (max-width: 576px){
  .hero .display-5{font-size:2.05rem}
  .hero .lead{font-size:1.05rem}
  .eyebrow{width:100%;justify-content:center;text-align:center}
  .trust{justify-content:center}
}
@media (min-width: 992px){
  .hero .display-5{font-size:3rem}
  .hero .lead{max-width: 52ch}
}

/* Hero image height adaptive */
.hero-img{height: clamp(280px, 42vw, 520px) !important}

/* Modal premium */
.info-modal{
  border-radius: 18px;
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: 0 18px 60px rgba(11,18,32,.18);
  overflow: hidden;
  background:
    radial-gradient(520px 220px at 10% 0%, rgba(126,211,255,.20), transparent 55%),
    radial-gradient(520px 220px at 90% 10%, rgba(42,140,255,.14), transparent 55%),
    #fff;
}
.info-modal-brand{font-weight:900;line-height:1.05}
.info-modal-sub{color: rgba(11,18,32,.65); font-size:.92rem; margin-top:.1rem}
.info-alert{
  border-radius: 16px;
  padding: .9rem 1rem;
  background: rgba(42,140,255,.07);
  border: 1px solid rgba(42,140,255,.18);
}
.info-alert-title{font-weight:900}
.info-alert-text{color: rgba(11,18,32,.70); margin-top:.15rem}
.info-point{color: rgba(11,18,32,.72); margin:.35rem 0}
.info-contact a{color: var(--primary); text-decoration:none; font-weight:800}
.info-contact a:hover{text-decoration:underline}


/* =========================
   Premium V3 Layer
   ========================= */
:root{
  --glass: rgba(255,255,255,.74);
  --glassLine: rgba(11,18,32,.10);
}

.section-pad{padding: 1.2rem 0;}
@media (min-width: 768px){ .section-pad{padding: 1.8rem 0;} }

/* Navbar glass + scroll shadow */
.navbar-glass{
  background: var(--glass) !important;
  border-bottom: 1px solid var(--glassLine) !important;
}
.brand-name-wrap{display:flex;flex-direction:column;line-height:1.05}
.brand-sub{font-size:.78rem;color:rgba(11,18,32,.55);font-weight:700;max-width: 34ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbar .btn{border-radius: 14px}

/* Hero typography: more “expensive” */
.hero .display-5{
  font-weight: 900 !important;
  letter-spacing: -0.6px;
}
.hero .lead{
  color: rgba(11,18,32,.72) !important;
  line-height: 1.7;
}
.hero-card{box-shadow: 0 22px 70px rgba(11,18,32,.12) !important;}
.hero-badge{box-shadow: 0 14px 26px rgba(11,18,32,.12) !important;}

/* Cards: softer but deeper shadow */
.service-card, .product-card, .stat, .step-card, .value-card, .cta-box, .contact-card, .form-card, .spec-card{
  border-color: rgba(11,18,32,.10) !important;
}
.product-card{box-shadow: 0 22px 70px rgba(11,18,32,.08) !important;}
.product-card:hover{box-shadow: 0 28px 90px rgba(11,18,32,.12) !important;}

/* Clients strip */
.clients-card{
  border-radius: 20px;
  border: 1px solid rgba(11,18,32,.10);
  background: linear-gradient(180deg, rgba(42,140,255,.08), rgba(126,211,255,.05));
  box-shadow: 0 18px 60px rgba(11,18,32,.08);
  padding: 1.1rem 1.1rem;
}
.clients-title{font-weight: 900; letter-spacing: -.2px}
.clients-sub{color: rgba(11,18,32,.65); margin-top: .15rem}
.clients-logos{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:flex-start;align-items:center}
.clients-logos img{
  height: 34px; width: auto; opacity:.88;
  filter: grayscale(1) contrast(1.05);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 14px;
  padding: .35rem .55rem;
}

/* Testimonials */
.quote-card{
  height:100%;
  border-radius: 20px;
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(11,18,32,.08);
  padding: 1.15rem 1.15rem;
}
.quote-mark{font-size: 2.2rem; font-weight: 900; color: rgba(42,140,255,.45); line-height: 1}
.quote-text{color: rgba(11,18,32,.74); line-height: 1.75; margin-top: .35rem}
.quote-by{margin-top: .9rem; font-weight: 900; color: rgba(11,18,32,.60); font-size: .9rem}

/* Quotation card (product detail) */
.quotation-card{
  border-radius: 20px;
  border: 1px solid rgba(42,140,255,.18);
  background: linear-gradient(180deg, rgba(42,140,255,.07), rgba(126,211,255,.05));
  box-shadow: 0 18px 60px rgba(11,18,32,.07);
  padding: 1.1rem 1.1rem;
}
.quotation-title{font-weight: 900; letter-spacing: -.2px}
.quotation-text{color: rgba(11,18,32,.72); line-height: 1.7; margin-top: .35rem}
.quotation-badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.75rem}
.q-badge{
  display:inline-flex; align-items:center;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(42,140,255,.22);
  background: rgba(255,255,255,.70);
  font-weight: 800;
  font-size: .85rem;
  color: rgba(11,18,32,.70);
}

/* Floating WA */
.float-wa{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1080;
  display:flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
  color: #0b1220;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(11,18,32,.12);
  border-radius: 999px;
  padding: .55rem .65rem;
  box-shadow: 0 18px 60px rgba(11,18,32,.18);
  backdrop-filter: blur(10px);
}
.float-wa:hover{transform: translateY(-1px); box-shadow: 0 22px 80px rgba(11,18,32,.22);}
.float-wa-dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 0 0 6px rgba(42,140,255,.12);
}
.float-wa-text{font-weight: 900; letter-spacing: -.2px}
.float-wa-icon{
  width: 34px; height: 34px;
  border-radius: 999px;
  display:grid; place-items:center;
  font-weight: 900;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

/* Footer spacing & premium feel */
.site-footer{background:#070a10 !important;}

.navbar-glass.scrolled{box-shadow: 0 14px 40px rgba(11,18,32,.12) !important;}


/* =========================
   Responsive System V4
   (rapi di HP / Laptop / PC)
   ========================= */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
img{max-width:100%;height:auto}

/* Section rhythm (consistent spacing across devices) */
.section .container{padding-top: clamp(2.4rem, 4.2vw, 4.6rem); padding-bottom: clamp(2.4rem, 4.2vw, 4.6rem);}
.hero .container{padding-top: clamp(2.8rem, 5.4vw, 5.8rem); padding-bottom: clamp(2.8rem, 5.4vw, 5.8rem);}
.page-hero .container{padding-top: clamp(2.3rem, 4.5vw, 4.6rem); padding-bottom: clamp(2.0rem, 4.0vw, 4.0rem);}

/* Typography scaling */
.section-title{font-size: clamp(1.45rem, 2.2vw, 2.05rem)}
.section-text{font-size: clamp(1rem, 1.25vw, 1.05rem)}
.hero .display-5{font-size: clamp(2.05rem, 4.2vw, 3.25rem)}
.hero .lead{font-size: clamp(1.02rem, 1.5vw, 1.15rem)}

/* Navbar brand safety */
.brand-flex{min-width:0}
.brand-name-wrap{min-width:0}
.brand-name{white-space:nowrap}
.brand-sub{min-width:0}
@media (max-width: 991.98px){
  .brand-sub{display:none !important;}
  .navbar-brand{max-width: 70%}
}

/* Buttons: stacked on mobile, inline on desktop */
.hero .btn-lg{border-radius: 16px}
@media (max-width: 575.98px){
  .hero .d-flex.flex-column.flex-sm-row{flex-direction:column !important}
  .hero .btn-lg{width:100%}
  .eyebrow{width:100%; justify-content:center; text-align:center}
  .trust{justify-content:center}
}

/* Hero image: fixed aspect to keep neat everywhere */
.hero-card{aspect-ratio: 16 / 11}
.hero-img{height:100% !important; width:100% !important}

/* Portfolio tiles consistent */
.gallery-tile{aspect-ratio: 1 / 1}
.gallery-tile img{height:100% !important}

/* Product cards consistent height */
.product-media{aspect-ratio: 16 / 10}
.product-media img{height:100% !important}
.product-body{display:flex;flex-direction:column}
.product-short{flex:1}

/* Clients logos center nicely */
.clients-logos{justify-content:center}
@media (min-width: 992px){
  .clients-logos{justify-content:flex-start}
}

/* Modal width on mobile */
@media (max-width: 575.98px){
  .modal-dialog{margin: .75rem}
}

/* Slider aspect to prevent jump */
.slider{aspect-ratio: 16 / 11}
.slide img{height:100% !important}