:root{--blue:#142f9b;--blue2:#0d216f;--red:#d71920;--ink:#17243a;--muted:#69778d;--line:#e5eaf2;--pale:#f4f6fb}
*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:"DM Sans",sans-serif;background:#fff}a{text-decoration:none;color:inherit}.wrap{max-width:1200px;margin:auto;padding:0 28px}
.topline{height:5px;background:linear-gradient(90deg,var(--red) 0 29%,var(--blue) 29% 100%)}
header{height:90px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo img{width:285px;max-width:56vw;height:auto;display:block}.header-note{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#78839a}
.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;background:radial-gradient(circle at 78% 42%,#294db6 0,#1a379e 35%,#101f68 78%);color:#fff;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:30px;padding:62px 58px;min-height:565px;box-shadow:0 24px 60px #142f9b20}
.hero:before{content:"";position:absolute;z-index:-1;width:700px;height:700px;border:1px solid #ffffff18;border-radius:50%;right:-250px;top:-390px;box-shadow:0 0 0 70px #ffffff07,0 0 0 145px #ffffff04}.hero:after{content:"";position:absolute;z-index:-1;width:340px;height:340px;border-radius:50%;background:#4d70db18;filter:blur(2px);left:42%;bottom:-230px}
.copy{position:relative;z-index:2;max-width:560px;padding:8px 0}.tag{display:inline-flex;align-items:center;gap:9px;border:1px solid #ffffff42;border-radius:30px;padding:10px 15px;color:#edf1ff;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;background:#ffffff08;backdrop-filter:blur(8px)}.tag i{width:7px;height:7px;border-radius:50%;background:#ff656b;box-shadow:0 0 0 5px #ff656b25}
h1{font:800 clamp(40px,4.7vw,61px)/1.055 Manrope;letter-spacing:-.06em;margin:27px 0 20px;max-width:560px}h1 span{color:#ff777c}.hero-subtitle{font-size:10px;font-weight:800;letter-spacing:.17em;color:#b8c8ff;margin:-5px 0 17px}.copy p{max-width:485px;color:#dbe4ff;line-height:1.9;font-size:14px;margin:0}
.actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}.btn{padding:15px 20px;border-radius:10px;font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:9px;transition:.2s;white-space:nowrap}.red{background:linear-gradient(135deg,#e51d27,#c9141d);color:#fff;box-shadow:0 10px 25px #a50f1b45}.red:hover{background:#f12d34;transform:translateY(-2px)}.outline{border:1px solid #ffffff66;color:#fff}.outline:hover{background:#ffffff13}
.hero-image{position:relative;z-index:1;min-width:0;padding:24px 0 14px 12px}.hero-image:before{content:"";position:absolute;inset:34px 0 54px 22px;border-radius:24px;background:linear-gradient(145deg,#f8fbff 0%,#e8f1ff 55%,#dce8ff 100%);box-shadow:0 26px 70px #06134555;border:1px solid #ffffffa8}.hero-image img{position:relative;width:112%;max-width:none;margin-left:-5%;display:block;object-fit:contain;border-radius:16px;filter:drop-shadow(0 18px 24px #06134530)}.image-caption{position:relative;display:flex;justify-content:space-between;gap:10px;margin:0 2px 0 22px;padding-top:13px;color:#e4eaff;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.trust{display:grid;grid-template-columns:repeat(3,1fr);padding:20px 8px;margin-top:20px;border:1px solid var(--line);border-radius:15px}.trust div{text-align:center;border-right:1px solid var(--line);padding:6px 12px}.trust div:last-child{border:0}.trust b{font:700 12px Manrope;color:var(--blue2)}.trust small{display:block;font-size:10px;color:#8390a3;margin-top:5px}
section.products{padding:75px 0;text-align:center}.overline{color:var(--red);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}h2{font:800 clamp(28px,3vw,38px)/1.2 Manrope;letter-spacing:-.04em;color:var(--blue2);margin:12px 0}.intro{max-width:620px;margin:0 auto;color:var(--muted);font-size:13px;line-height:1.8}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:34px;text-align:left}.card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s}.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,47,155,.12)}.card img{width:100%;height:210px;object-fit:contain;background:#fff;display:block;padding:0}.card-body{padding:18px}.card small{font-size:9px;color:var(--red);font-weight:800;letter-spacing:.16em}.card h3{font:700 15px Manrope;color:var(--blue2);margin:8px 0}.card p{font-size:11px;color:#758298;line-height:1.75;margin:0}
.brands{background:var(--pale);padding:60px 0;text-align:center}.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:28px}.brand{min-height:55px;border:1px solid #e5eaf2;background:white;border-radius:8px;display:grid;place-items:center;padding:10px 6px;font:800 11px Manrope;color:#263d77}.brand:nth-child(4n){color:var(--red)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;padding:75px 0}.about-photo{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;overflow:hidden}.about-photo img{width:100%;display:block;border-radius:10px}.about p{font-size:13px;color:var(--muted);line-height:1.9}.points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.points span{font-size:11px;font-weight:700;color:#3d4c65}.points span:before{content:"✓";color:var(--red);font-weight:900;margin-right:8px}
.contact{background:#f1f4fb;padding:52px 0}.contact-box{background:white;border:1px solid var(--line);border-radius:16px;padding:32px 35px;display:flex;align-items:center;justify-content:space-between;gap:25px}.contact-box h2{font-size:24px;margin:8px 0}.contact-box p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}
/* ===== [CHANGE 3] Contact buttons sejajar (horizontal), tidak atas-bawah ===== */
.contact-actions{display:flex;gap:10px;flex-wrap:nowrap;align-items:center}
.contact-actions .btn{flex:0 0 auto;white-space:nowrap}
.blue{background:var(--blue);color:#fff}
footer{background:#101d52;color:#fff;padding:27px 0}.foot{display:flex;align-items:center;justify-content:space-between;gap:20px}.foot img{width:230px;max-width:55vw;display:block}.copyright{font-size:10px;color:#b1bddf}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding:45px 36px;gap:18px}.hero-image{margin-top:0;padding:10px 0 8px}.hero-image:before{inset:24px 0 45px 10px}.hero-image img{width:105%;margin-left:-2%}.image-caption{margin-left:12px}.about{grid-template-columns:1fr}.brand-grid{grid-template-columns:repeat(4,1fr)}.contact-box{align-items:flex-start;flex-direction:column}}
@media(max-width:580px){.wrap{padding:0 16px}header{height:74px}.header-note{display:none}.hero{padding:34px 22px 28px;border-radius:18px;gap:22px;min-height:0}.hero h1{font-size:42px}.hero-subtitle{font-size:8px;letter-spacing:.12em}.copy p{font-size:13px}.hero-image{padding:4px 0 4px}.hero-image:before{inset:20px 0 39px 5px;border-radius:16px}.hero-image img{width:108%;margin-left:-4%;border-radius:10px}.image-caption{font-size:7px;margin-left:8px;padding-top:9px}.trust{grid-template-columns:1fr;padding:8px 15px}.trust div{border:0;border-bottom:1px solid var(--line);padding:12px}.trust div:last-child{border:0}.products{padding:58px 0!important}.cards{grid-template-columns:1fr}.card img{height:190px}.brand-grid{grid-template-columns:repeat(3,1fr);gap:7px}.brand{font-size:9px;min-height:48px}.about{padding:58px 0;gap:25px}.points{grid-template-columns:1fr}.contact-box{padding:25px 21px}.contact-actions{width:100%;flex-wrap:nowrap;gap:8px}.contact-actions .btn{flex:1 1 0;padding:13px 6px;font-size:10px;justify-content:center}}
@media(prefers-reduced-motion:reduce){.floating-contact a,.floating-contact a span{transition:none}}

/* ===== [CHANGE 1] Floating contact buttons diperbesar + Instagram ===== */
.floating-contact{position:fixed;right:24px;bottom:24px;z-index:9999;display:flex;flex-direction:column;gap:14px}
.floating-contact a{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 28px rgba(16,32,68,.30);transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s;position:relative}
.floating-contact a:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 14px 34px rgba(16,32,68,.40)}
.floating-contact a svg{width:30px;height:30px;display:block}
.floating-contact .float-wa{background:#20b96b}
.floating-contact .float-email{background:var(--blue)}
.floating-contact .float-ig{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.floating-contact a span{position:absolute;right:74px;white-space:nowrap;background:#14233b;color:#fff;font:600 11px "DM Sans",sans-serif;padding:9px 12px;border-radius:7px;opacity:0;visibility:hidden;transform:translateX(5px);transition:.18s ease;pointer-events:none}
.floating-contact a:hover span,.floating-contact a:focus-visible span{opacity:1;visibility:visible;transform:translateX(0)}
.floating-contact a:focus-visible{outline:3px solid #ff777c;outline-offset:3px}
@media(max-width:580px){
 .floating-contact{right:14px;bottom:16px;gap:10px}
 .floating-contact a{width:54px;height:54px}
 .floating-contact a svg{width:26px;height:26px}
 .floating-contact a span{right:64px;font-size:10px;padding:7px 10px}
}

/* ============ PARALLAX & SCROLL REVEAL (additive only) ============ */
[data-parallax]{will-change:transform}
.hero-image{will-change:transform}
.hero{position:relative}
.hero:before,.hero:after{will-change:transform;transform:translate3d(0,var(--px-orb,0),0)}
.applications{position:relative}
.applications:before,.applications:after{will-change:transform;transform:translate3d(0,var(--px-bg,0),0)}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.40s}
.reveal.d6{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hero:before,.hero:after{transform:none!important}}

/* Mobile spacing fix: About TSP section */
@media (max-width: 580px) {
  .about {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    padding: 54px 16px !important;
    gap: 26px;
    margin-left: auto;
    margin-right: auto;
  }
  .about > div,
  .about-photo {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .about-photo {
    padding: 10px;
    border-radius: 14px;
  }
  .about-photo img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  .about h2,
  .about p {
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .points {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}