:root{
  --navy-980:#020811;
  --navy-950:#03101f;
  --navy-900:#061a2d;
  --navy-850:#08243a;
  --navy-800:#0b3150;
  --blue:#008fda;
  --sky:#4cc9ff;
  --orange:#ff9800;
  --orange-2:#ff6b00;
  --white:#fff;
  --ink:#06111d;
  --muted:#b8c7d8;
  --dark-muted:#516171;
  --light:#f4f8fc;
  --line:rgba(255,255,255,.14);
  --dark-line:rgba(6,17,29,.12);
  --container:1180px;
  --radius:24px;
  --shadow:0 22px 60px rgba(2,8,17,.24);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--navy-980);color:var(--white);line-height:1.58;overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(var(--container),calc(100% - 40px));margin:0 auto}.topbar{position:fixed;left:0;right:0;top:0;z-index:1000;border-bottom:1px solid transparent;transition:.25s}.topbar.scrolled{background:rgba(2,8,17,.88);backdrop-filter:blur(16px);border-color:var(--line);box-shadow:0 12px 26px rgba(0,0,0,.25)}.topbar-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:inline-flex;align-items:center;gap:13px;min-width:240px}.brand-logo{width:50px;height:50px;object-fit:contain}.brand-copy strong{display:block;font-size:17px;font-weight:950;letter-spacing:.1px;line-height:1.05}
.brand-copy small{
  display:block;
  color:#ffc46b;
  font-weight:800;
  font-size:10px;
  letter-spacing:.45px;
  text-transform:uppercase;
  line-height:1.15;
  max-width:240px;
}.nav{display:flex;align-items:center;gap:4px}.nav a{padding:11px 14px;border-radius:999px;color:#e7eef7;font-size:14px;font-weight:800;transition:.2s}.nav a:hover,.nav a.active{background:var(--orange);color:var(--navy-980)}.top-cta{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:var(--navy-980);font-weight:950;padding:12px 18px;border-radius:999px;box-shadow:0 14px 30px rgba(255,152,0,.2);white-space:nowrap}.menu-toggle{display:none;width:45px;height:45px;border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:12px}.menu-toggle span{display:block;width:22px;height:2px;background:#fff;margin:5px auto}.hero-product{min-height:100vh;padding:138px 0 86px;position:relative;display:grid;align-items:center;overflow:hidden;background:radial-gradient(circle at 75% 18%,rgba(0,143,218,.18),transparent 30%),linear-gradient(135deg,var(--navy-980),var(--navy-900) 62%,#001222)}.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.76),transparent 80%)}.orange-slab{position:absolute;right:-85px;top:0;width:260px;height:100%;background:linear-gradient(180deg,var(--orange),var(--orange-2));transform:skewX(-14deg);opacity:.96;box-shadow:0 0 80px rgba(255,152,0,.25)}.hero-product-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}.breadcrumb{color:#93a9bf;font-size:13px;font-weight:800;letter-spacing:.4px;margin-bottom:18px}.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--orange);font-weight:950;text-transform:uppercase;letter-spacing:2.3px;font-size:12px;margin:0 0 15px}.eyebrow:before{content:"";width:32px;height:3px;background:var(--orange);border-radius:3px}.eyebrow.dark{color:#d46f00}.eyebrow.dark:before{background:#d46f00}.hero-copy h1{font-size:clamp(48px,7vw,92px);line-height:.94;letter-spacing:-3.5px;margin:0;font-weight:950;max-width:850px}.hero-lead{font-size:20px;color:#d9e6f5;max-width:710px;margin:26px 0 0}.hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:13px 23px;
  border-radius:999px;
  font-weight:950;
  border:1px solid transparent;
  transition:.2s;
  white-space: nowrap;
}.btn:hover{transform:translateY(-3px)}.btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:var(--navy-980);box-shadow:0 14px 34px rgba(255,152,0,.23)}.btn-outline{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}.trust-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.trust-strip span{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);padding:8px 12px;border-radius:999px;color:#d6e4f4;font-weight:800;font-size:13px}.hero-visual{position:relative}.product-window{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);border-radius:30px;overflow:hidden;box-shadow:var(--shadow);transform:perspective(1000px) rotateY(-6deg) rotateX(2deg)}.window-head{height:48px;display:flex;align-items:center;gap:9px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(2,8,17,.38)}.window-head span{width:12px;height:12px;border-radius:50%;background:#fff;opacity:.45}.window-head b{margin-left:8px;color:#dceafa;font-size:13px;letter-spacing:.7px}.floating-spec{position:absolute;background:rgba(2,8,17,.8);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}.floating-spec strong{display:block;color:var(--orange);font-size:25px;line-height:1}.floating-spec span{color:var(--muted);font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:1px}.spec-a{left:-80px;bottom:-65px}.spec-b{right:-70px;top:-50px}.sticky-tabs{position:sticky;top:82px;z-index:800;background:rgba(3,16,31,.94);border-top:1px solid var(--line);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.tabs-scroll{display:flex;gap:5px;overflow:auto;padding:9px 0}.tabs-scroll a{white-space:nowrap;padding:10px 15px;border-radius:999px;color:#dce8f5;font-weight:850;font-size:14px}.tabs-scroll a:hover{background:rgba(255,152,0,.18);color:#ffc46b}.section{padding:105px 0;position:relative}.section-sm{padding:78px 0}.section-light{background:var(--light);color:var(--ink)}.section-navy{background:linear-gradient(135deg,var(--navy-950),var(--navy-850));color:#fff}.section-head{text-align:center;max-width:830px}.section-head h2,.split-intro h2,.feature-main h2{font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-1.8px;margin:0 0 18px;font-weight:950}.section-head p,.intro-panel p,.feature-main p{font-size:18px;color:var(--muted);margin:0}.section-light .section-head p,.section-light .intro-panel p{color:var(--dark-muted)}.split-intro{display:grid;grid-template-columns:.94fr 1.06fr;gap:50px;align-items:start}.intro-panel{background:#fff;border:1px solid var(--dark-line);border-radius:var(--radius);padding:34px;box-shadow:0 14px 40px rgba(6,17,29,.08)}.intro-panel p + p{margin-top:16px}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}.stat-row article{background:#fff;border:1px solid var(--dark-line);padding:24px;border-radius:22px;box-shadow:0 14px 30px rgba(6,17,29,.06)}.stat-row span,.solution-body span,.detail-card span{display:inline-flex;color:#d46f00;font-weight:950;letter-spacing:1px;margin-bottom:8px}.stat-row strong{display:block;font-size:18px;margin-bottom:6px}.stat-row p{color:var(--dark-muted);margin:0}.solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}.solution-card{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:25px;overflow:hidden;transition:.25s;box-shadow:0 18px 45px rgba(0,0,0,.14)}.solution-card:hover{transform:translateY(-7px);border-color:rgba(255,152,0,.45)}.solution-media{aspect-ratio:1.25/1;background:rgba(255,255,255,.05);display:grid;place-items:center;padding:20px}.solution-media img{height:100%;width:100%;object-fit:contain}.solution-body{padding:22px}.solution-body h3{font-size:22px;line-height:1.1;margin:0 0 10px}.solution-body p{color:var(--muted);font-size:15px;margin:0 0 14px}.solution-body b{color:var(--orange);font-size:13px}.feature-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}.feature-main p{margin-bottom:28px}.feature-list{display:grid;gap:16px}.feature-item{display:flex;gap:18px;padding:24px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.055)}.feature-item>span{width:43px;height:43px;border-radius:13px;background:var(--orange);color:var(--navy-980);display:grid;place-items:center;flex:0 0 auto;font-weight:950}.feature-item strong{font-size:20px}.feature-item p{color:var(--muted);margin:6px 0 0}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.timeline-step{position:relative;background:#fff;border:1px solid var(--dark-line);padding:28px;border-radius:24px;box-shadow:0 16px 38px rgba(6,17,29,.08)}.timeline-step span{font-size:35px;font-weight:950;color:#d46f00}.timeline-step h3{font-size:20px;margin:8px 0}.timeline-step p{color:var(--dark-muted);margin:0}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}.project-grid.large{grid-template-columns:repeat(3,1fr);margin-top:0}.project-tile{overflow:hidden;border-radius:25px;border:1px solid var(--line);background:rgba(255,255,255,.055);box-shadow:0 18px 45px rgba(0,0,0,.13)}.section-light .project-tile{background:#fff;border-color:var(--dark-line)}.project-tile img{width:100%;aspect-ratio:1.35/1;object-fit:cover}.project-tile div{padding:20px}.project-tile strong{display:block;font-size:18px;line-height:1.2}.project-tile span{display:block;color:var(--muted);margin-top:6px}.section-light .project-tile span{color:var(--dark-muted)}.contact-strip{background:linear-gradient(135deg,var(--navy-900),var(--navy-800));position:relative;overflow:hidden}.contact-strip:after{content:"";position:absolute;right:-70px;top:-20px;width:220px;height:200px;background:var(--orange);transform:skewX(-15deg);opacity:.9}.contact-strip-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:30px}.contact-strip h2{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:0 0 10px}.contact-strip p{color:#d9e5f3;margin:0}.page-hero{padding:150px 0 90px;background:radial-gradient(circle at 82% 22%,rgba(0,143,218,.18),transparent 30%),linear-gradient(135deg,var(--navy-980),var(--navy-850));position:relative;overflow:hidden}.page-hero:after{content:"";position:absolute;right:-90px;top:0;height:100%;width:230px;background:linear-gradient(180deg,var(--orange),var(--orange-2));transform:skewX(-14deg)}.page-hero .container{position:relative;z-index:1}.page-hero h1{font-size:clamp(42px,6vw,74px);line-height:.98;letter-spacing:-2.8px;max-width:900px;margin:0;font-weight:950}.service-detail-grid{display:grid;gap:22px}.detail-card{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:center;background:#fff;border:1px solid var(--dark-line);border-radius:26px;padding:22px;box-shadow:0 14px 40px rgba(6,17,29,.08)}.detail-card img{width:100%;border-radius:20px;background:#eef5fb}.detail-card h2{font-size:34px;margin:0 0 10px}.detail-card p{color:var(--dark-muted);font-size:18px}.contact-page-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px}.contact-box,.contact-form{background:#fff;border:1px solid var(--dark-line);border-radius:26px;padding:32px;box-shadow:0 14px 40px rgba(6,17,29,.08)}.contact-box h2{font-size:32px;margin:0 0 22px}.contact-row{display:flex;gap:16px;padding:17px 0;border-bottom:1px solid var(--dark-line)}.contact-row:last-child{border-bottom:0}.contact-row>span{width:42px;height:42px;background:var(--orange);border-radius:13px;display:grid;place-items:center}.contact-row strong{display:block}.contact-row p{margin:4px 0 0;color:var(--dark-muted)}.contact-form label{display:block;font-weight:850;margin-bottom:16px}.contact-form input,.contact-form textarea{margin-top:8px;width:100%;border:1px solid var(--dark-line);border-radius:15px;padding:14px 15px;font:inherit}.form-note{font-size:13px;color:var(--dark-muted)}.footer{background:var(--navy-980);border-top:1px solid var(--line);padding:34px 0;color:#dce8f5}.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.footer-brand img{width:42px;height:42px}.footer-links{display:flex;gap:16px;flex-wrap:wrap}.footer-links a{color:#c6d7e8;font-weight:800}.footer p{color:#93a9bf;margin:0}.backtop{position:fixed;right:18px;bottom:18px;z-index:1000;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:var(--navy-980);font-weight:950;box-shadow:0 12px 28px rgba(0,0,0,.24);opacity:0;pointer-events:none;transition:.2s}.backtop.visible{opacity:1;pointer-events:auto}.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease, transform .65s ease}.reveal.show{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}code{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:2px 6px;border-radius:8px}.section-light code{background:#eaf2fa;border-color:#d8e3ef}@media(max-width:1050px){.top-cta{display:none}.hero-product-grid,.split-intro,.feature-layout,.contact-page-grid{grid-template-columns:1fr}.solution-grid,.stat-row,.timeline{grid-template-columns:repeat(2,1fr)}.project-grid,.project-grid.large{grid-template-columns:repeat(2,1fr)}.orange-slab{opacity:.45}.hero-visual{max-width:660px}}@media(max-width:760px){.container{width:min(100% - 28px,var(--container))}.topbar-inner{height:72px}.menu-toggle{display:block}.nav{position:absolute;left:14px;right:14px;top:78px;display:none;flex-direction:column;align-items:stretch;background:rgba(2,8,17,.96);border:1px solid var(--line);border-radius:20px;padding:12px}.nav.open{display:flex}.nav a{padding:14px 16px}.brand{min-width:auto}.brand-copy small{display:none}.hero-product{padding:122px 0 60px}.hero-product-grid{gap:34px}.hero-copy h1{letter-spacing:-2px}.hero-lead{font-size:17px}.product-window{transform:none}.floating-spec{display:none}.sticky-tabs{top:72px}.section{padding:74px 0}.section-sm{padding:58px 0}.solution-grid,.stat-row,.timeline,.project-grid,.project-grid.large{grid-template-columns:1fr}.detail-card{grid-template-columns:1fr}.contact-strip-inner{align-items:flex-start;flex-direction:column}.footer-grid{align-items:flex-start;flex-direction:column}.page-hero{padding:120px 0 70px}.page-hero:after{opacity:.25}}

/* =========================================================
   Refresh Animation Pack - Berlian Automation
   Aman untuk website statis. Bisa dihapus kalau ingin ringan.
   ========================================================= */
html{scroll-behavior:smooth}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 15% 20%,rgba(255,152,0,.08),transparent 26%),radial-gradient(circle at 85% 10%,rgba(0,143,218,.08),transparent 28%),radial-gradient(circle at 60% 85%,rgba(255,255,255,.045),transparent 25%);animation:bgBreath 9s ease-in-out infinite alternate}.topbar{animation:dropHeader .55s ease both}.brand-logo{filter:drop-shadow(0 0 0 rgba(255,152,0,0));animation:logoBreathe 3.8s ease-in-out infinite}.grid-lines{animation:gridDrift 18s linear infinite}.orange-slab{animation:slabGlow 4.5s ease-in-out infinite}.hero-copy .eyebrow,.hero-copy h1,.hero-lead,.hero-actions,.trust-strip{animation:heroRise .7s ease both}.hero-copy h1{animation-delay:.08s}.hero-lead{animation-delay:.16s}.hero-actions{animation-delay:.24s}.trust-strip{animation-delay:.32s}.product-window{animation:floatWindow 6s ease-in-out infinite, windowGlow 4s ease-in-out infinite}.product-window img{transition:transform .55s ease}.product-window:hover img{transform:scale(1.035)}.floating-spec{animation:floatSpec 5.2s ease-in-out infinite}.spec-b{animation-delay:.7s}.btn{position:relative;overflow:hidden;transform:translateZ(0)}.btn::before{content:"";position:absolute;inset:-2px;left:-130%;width:80%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-22deg);transition:left .65s ease}.btn:hover::before{left:145%}.solution-card,.project-tile,.timeline-step,.stat-row article,.feature-item,.detail-card,.contact-box,.contact-form{transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease}.solution-card:hover,.project-tile:hover,.timeline-step:hover,.stat-row article:hover,.feature-item:hover,.detail-card:hover{transform:translateY(-8px);box-shadow:0 24px 65px rgba(0,0,0,.18)}.section-light .timeline-step:hover,.section-light .stat-row article:hover,.section-light .project-tile:hover,.section-light .detail-card:hover{box-shadow:0 22px 60px rgba(6,17,29,.13)}.project-tile img{transition:transform .55s ease, filter .55s ease}.project-tile:hover img{transform:scale(1.055);filter:saturate(1.1) contrast(1.05)}.timeline-step span,.solution-body span,.stat-row span{position:relative}.timeline-step span::after,.solution-body span::after,.stat-row span::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;background:var(--orange);border-radius:9px;transform:scaleX(.35);transform-origin:left;transition:transform .3s ease}.timeline-step:hover span::after,.solution-card:hover .solution-body span::after,.stat-row article:hover span::after{transform:scaleX(1)}.feature-item>span{animation:checkPulse 2.8s ease-in-out infinite}.tabs-scroll a{transition:background .2s ease,color .2s ease,transform .2s ease}.tabs-scroll a:hover{transform:translateY(-2px)}.tabs-scroll a.active-tab{background:rgba(255,152,0,.22);color:#ffc46b}.progress-line{position:fixed;left:0;top:0;height:4px;width:0;background:linear-gradient(90deg,var(--orange),#ffd08a);z-index:5000;box-shadow:0 0 18px rgba(255,152,0,.45)}.reveal{will-change:opacity,transform}.reveal.show{animation:revealPop .65s ease both}.section-head.reveal.show h2{animation:headlineAccent .8s ease both}.contact-strip:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.08) 45%,transparent 70%);transform:translateX(-120%);animation:stripSweep 6s ease-in-out infinite}.backtop{animation:softPulse 2.6s ease-in-out infinite}
@keyframes bgBreath{from{opacity:.65;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}@keyframes dropHeader{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes logoBreathe{0%,100%{filter:drop-shadow(0 0 0 rgba(255,152,0,0));transform:scale(1)}50%{filter:drop-shadow(0 0 16px rgba(255,152,0,.28));transform:scale(1.025)}}@keyframes gridDrift{from{background-position:0 0}to{background-position:90px 90px}}@keyframes slabGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,152,0,0));opacity:.92}50%{filter:drop-shadow(0 0 28px rgba(255,152,0,.2));opacity:1}}@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes floatWindow{0%,100%{transform:perspective(900px) rotateY(-7deg) rotateX(3deg) translateY(0)}50%{transform:perspective(900px) rotateY(-7deg) rotateX(3deg) translateY(-14px)}}@keyframes windowGlow{0%,100%{box-shadow:0 24px 80px rgba(0,0,0,.32)}50%{box-shadow:0 30px 95px rgba(255,152,0,.16)}}@keyframes floatSpec{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes checkPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,152,0,.0)}50%{box-shadow:0 0 0 9px rgba(255,152,0,.09)}}@keyframes revealPop{0%{opacity:0;transform:translateY(24px) scale(.985)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes headlineAccent{0%{letter-spacing:-2.8px}50%{letter-spacing:-1.2px}100%{letter-spacing:-1.8px}}@keyframes stripSweep{0%,38%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}@keyframes softPulse{0%,100%{box-shadow:0 12px 28px rgba(0,0,0,.24)}50%{box-shadow:0 12px 34px rgba(255,152,0,.42)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.progress-line{display:none}}

.contact-form textarea {
  resize: none;
  height: 190px;
  overflow-y: auto;
}

/* Anchor offset untuk halaman services agar tidak tertutup header fixed */
.detail-card {
  scroll-margin-top: 230px;
}

/* =========================================================
   Contact Icon Fix
   Supaya icon Address, Email, Phone, Instagram tampil jelas
   ========================================================= */

.contact-row > .contact-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255, 152, 0, .14) !important;
  color: var(--orange) !important;
  border: 1px solid rgba(255, 152, 0, .28) !important;

  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.contact-row > .contact-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  stroke: currentColor !important;
  color: var(--orange) !important;
}

.contact-row > .contact-icon svg path,
.contact-row > .contact-icon svg rect,
.contact-row > .contact-icon svg circle {
  stroke: currentColor !important;
}

.contact-row > .contact-icon svg circle[fill="currentColor"] {
  fill: currentColor !important;
  stroke: none !important;
}

/* =========================================================
   GLOBAL MOBILE WIDTH FIX
   Mencegah halaman melebar kiri-kanan di HP
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
}

main,
header,
footer,
section {
  max-width: 100%;
}

/* =========================================================
   FIX TOPBAR AGAR SELALU IKUT LAYAR HP
   ========================================================= */

.topbar {
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
}

/* =========================================================
   MOBILE FIX
   ========================================================= */

@media (max-width: 760px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    position: relative !important;
  }

  main,
  header,
  footer,
  section,
  .page-hero,
  .section,
  .section-light,
  .section-navy,
  .footer {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .container {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
    overflow: visible !important;
  }

  .topbar-inner {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    height: 72px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .brand {
    min-width: 0 !important;
    max-width: calc(100% - 58px) !important;
    flex: 1 1 auto !important;
  }

  .brand-logo {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
  }

  .brand-copy {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brand-copy strong {
    font-size: 15px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand-copy small {
    display: none !important;
  }

  .menu-toggle {
    position: relative !important;
    display: inline-flex !important;
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    flex: 0 0 45px !important;

    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.06) !important;

    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;

    transform: none !important;
    cursor: pointer !important;
    z-index: 1300 !important;
  }

  .menu-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    min-height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border-radius: 999px !important;
  }

  .nav {
    position: fixed !important;
    top: 78px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    z-index: 1200 !important;
  }

  .page-hero h1,
  .hero-copy h1,
  .split-intro h2,
  .section-head h2,
  .feature-main h2 {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .intro-panel,
  .contact-box,
  .contact-form,
  .timeline-step,
  .feature-item,
  .detail-card {
    max-width: 100% !important;
  }

  .btn {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .intro-panel .btn {
    width: 100% !important;
  }
}

/* =========================================================
   MOBILE FOOTER BRAND FIX
   Supaya tulisan Berlian Automation di footer tidak kepotong
   ========================================================= */

@media (max-width: 760px) {

  .footer .footer-brand {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .footer .footer-brand img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;
  }

  .footer .footer-brand .brand-copy {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .footer .footer-brand .brand-copy strong {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.1 !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .footer .footer-brand .brand-copy small {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .footer-links {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px 20px !important;
  }

  .footer p {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* =========================================================
   ANDROID MOBILE HERO TEXT FIX
   Mencegah judul/paragraf hero hilang saat scroll di Android
   ========================================================= */

@media (max-width: 760px) {
  .hero-product-grid,
  .hero-copy {
    position: relative !important;
    z-index: 5 !important;
  }

  .hero-copy,
  .hero-copy .breadcrumb,
  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy .hero-lead,
  .hero-copy .hero-actions,
  .hero-copy .trust-strip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .grid-lines,
  .orange-slab {
    z-index: 0 !important;
  }

  .hero-product {
    transform: none !important;
    backface-visibility: hidden !important;
  }
}

/* =========================================================
   FINAL MOBILE HERO CLIP FIX - ANDROID CHROME
   Mengatasi judul hero yang terlihat terpotong di Android
   ========================================================= */

@media (max-width: 760px) {
  .hero-product {
    min-height: auto !important;
    height: auto !important;
    padding-top: 118px !important;
    padding-bottom: 56px !important;
    display: block !important;
    align-items: initial !important;
    overflow: visible !important;
  }

  .hero-product .container,
  .hero-product-grid,
  .hero-copy,
  .hero-copy * {
    overflow: visible !important;
  }

  .hero-product-grid {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    padding-top: 0 !important;
  }

  .hero-copy {
    position: relative !important;
    z-index: 5 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  .hero-copy .breadcrumb {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }

  .hero-copy .eyebrow {
    margin-bottom: 22px !important;
  }

  .hero-copy h1 {
    display: block !important;
    font-size: clamp(38px, 11.4vw, 43px) !important;
    line-height: 1.18 !important;
    letter-spacing: -1.1px !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    padding-top: .12em !important;
    padding-bottom: .08em !important;
    max-width: 100% !important;
    overflow: visible !important;
    transform: none !important;
    text-rendering: geometricPrecision !important;
  }

  .hero-lead {
    font-size: 17px !important;
    line-height: 1.68 !important;
    margin-top: 0 !important;
    margin-bottom: 26px !important;
  }

  .hero-actions {
    margin-top: 22px !important;
    gap: 12px !important;
  }

  .hero-actions .btn {
    padding: 15px 20px !important;
    font-size: 15px !important;
  }

  .trust-strip {
    margin-top: 28px !important;
  }

  .grid-lines,
  .orange-slab {
    pointer-events: none !important;
  }

  .orange-slab {
    transform: skewX(-14deg) !important;
    animation: none !important;
  }
}

/* =========================================================
   HOME GALLERY ACTION BUTTON
   Tombol menuju halaman gallery otomatis
   ========================================================= */

.gallery-home-action {
  text-align: center;
  margin-top: 34px;
}

@media (max-width: 760px) {
  .gallery-home-action {
    margin-top: 28px;
  }

  .gallery-home-action .btn {
    width: 100%;
  }
}