:root{
    --blue-deep:      #06304A;   /* header/footer, gelap seperti baja tergores malam */
    --blue-primary:   #0B5C82;   /* biru utama */
    --blue-fresh:     #17A2C9;   /* biru segar / aksen */
    --blue-bg-light:  #EAF7FB;   /* latar terang menyegarkan */
    --spark-orange:   #FF7A29;   /* percikan las — satu-satunya aksen hangat */
    --steel-gray:     #45525C;   /* teks sekunder */
    --white:          #FFFFFF;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:'Inter', sans-serif;
    color:var(--steel-gray);
    background:var(--white);
    overflow-x:hidden;
  }
  h1,h2,h3,h4,.display-font{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  a{ text-decoration:none; }

  /* Fokus keyboard tetap terlihat */
  a:focus-visible, button:focus-visible, .btn:focus-visible{
    outline:3px solid var(--spark-orange);
    outline-offset:2px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }

  /* ===== Navbar ===== */
  .navbar-blm{
    background:var(--blue-deep);
    padding-top:.9rem; padding-bottom:.9rem;
    transition:padding .25s ease, box-shadow .25s ease;
  }
  .navbar-blm.scrolled{
    padding-top:.45rem; padding-bottom:.45rem;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
  }
  .navbar-brand-blm{
    font-family:'Oswald',sans-serif;
    font-weight:700; color:var(--white)!important;
    font-size:1.15rem; line-height:1.1; text-transform:uppercase;
  }
  .navbar-brand-blm small{
    display:block; font-family:'Inter',sans-serif; text-transform:none;
    font-weight:400; font-size:.68rem; color:var(--blue-fresh); letter-spacing:.03em;
  }
  .nav-link-blm{
    color:rgba(255,255,255,.85)!important; font-weight:500; font-size:.92rem;
    margin:0 .35rem;
  }
  .nav-link-blm:hover{ color:var(--white)!important; }
  .btn-spark{
    background:var(--spark-orange); color:var(--white); font-weight:600;
    border:none; padding:.5rem 1.15rem; border-radius:4px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-spark:hover{ color:var(--white); transform:translateY(-2px); box-shadow:0 8px 18px rgba(255,122,41,.35); }
  .btn-outline-fresh{
    border:1.5px solid rgba(255,255,255,.55); color:var(--white); font-weight:500;
    padding:.5rem 1.15rem; border-radius:4px; transition:background .15s ease, border-color .15s ease;
  }
  .btn-outline-fresh:hover{ background:rgba(255,255,255,.12); border-color:var(--white); color:var(--white); }

  /* ===== Hero: bidang biru dipotong seperti pelat baja ===== */
  .hero{
    position:relative;
    background:
      radial-gradient(1200px 600px at 85% -10%, rgba(79,209,232,.35), transparent 60%),
      linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-primary) 55%, var(--blue-fresh) 100%);
    padding:5.5rem 0 7rem;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
    color:var(--white);
  }
  .hero .eyebrow{
    color:var(--spark-orange); font-weight:700; letter-spacing:.12em; font-size:.8rem;
  }
  .hero h1{
    font-size:clamp(2rem, 4.2vw, 3.3rem); font-weight:700; line-height:1.08;
  }
  .hero p.lead-blm{ color:rgba(255,255,255,.85); font-size:1.05rem; max-width:34rem; }

   .hero-stats{
    display:flex; gap:2.2rem; margin-top:2.2rem; flex-wrap:wrap;
  }
  .hero-stats .num{ font-family:'Oswald',sans-serif; font-size:1.9rem; font-weight:700; color:var(--white); }
  .hero-stats .lbl{ font-size:.78rem; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.05em; }

    /* ===== Section umum ===== */
  section{ padding:4.5rem 0; }
  .bg-fresh-light{ 
    background:var(--blue-bg-light); 
  }
  .eyebrow-sm{
    color:var(--blue-fresh); 
    font-weight:700; 
    font-size:.78rem; 
    letter-spacing:.1em;
  }
  .section-title{ 
    font-size:clamp(1.5rem,2.6vw,2.2rem); 
    color:var(--blue-deep); font-weight:700; }
  .section-lead{ 
    color:var(--steel-gray); 
    max-width:40rem; }

  /* ===== Kartu layanan ===== */
  .card-service{
    background:var(--white); 
    border:1px solid #E1EEF3; 
    border-radius:10px;
    padding:1.9rem 1.6rem; 
    height:100%;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card-service:hover{
    transform:translateY(-6px); 
    box-shadow:0 16px 30px rgba(11,92,130,.12); 
    border-color:var(--blue-fresh);
  }
  .service-icon{
    width:52px; height:52px; 
    border-radius:9px;
    background:linear-gradient(135deg, var(--blue-primary), var(--blue-fresh));
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color:var(--white); 
    font-size:1.4rem;
    margin-bottom:1rem;
  }
  .card-service h3{ 
    font-size:1.05rem; 
    color:var(--blue-deep); 
    margin-bottom:.5rem; }
  .card-service p{ 
    font-size:.92rem; 
    margin-bottom:0; 
  }

  /* ===== Tentang + statistik ===== */
  .about-frame{
    background:linear-gradient(160deg, var(--blue-primary), var(--blue-deep));
    border-radius:14px; 
    padding:3px; 
    position:relative;
  }
  .about-frame-inner{
    background:var(--blue-bg-light); 
    border-radius:10px; 
    min-height:320px;
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color:var(--blue-primary);
  }
  .about-frame-inner i{ 
    font-size:4.5rem; opacity:.55; 
  }
  .stat-row{ 
    display:flex; 
    gap:0; 
    border-top:1px solid #E1EEF3; 
    margin-top:2rem; }
  .stat-item{ 
    flex:1; 
    padding:1.1rem 0; 
    text-align:center; 
    border-right:1px solid #E1EEF3; 
  }
  .stat-item:last-child{ 
    border-right:none; 
  }
  .stat-item .num{ 
    font-family:'Oswald',sans-serif; 
    font-weight:700; 
    font-size:1.7rem; 
    color:var(--blue-primary); 
  }
  .stat-item .lbl{ 
    font-size:.78rem; 
    color:var(--steel-gray); 
  }

  /* ===== Galeri proyek ===== */
  .gallery-item{
    position:relative; 
    border-radius:10px; 
    overflow:hidden; 
    aspect-ratio:4/3;
    background:linear-gradient(135deg, 
    var(--blue-primary), 
    var(--blue-deep));
    display:flex; 
    align-items:center; 
    justify-content:center; 
    color:rgba(255,255,255,.5);
  }
 
  /* ===== Testimoni ===== */
  .testi-card{
    background:var(--blue-deep); border-radius:12px; padding:2.2rem;
    color:rgba(255,255,255,.9); height:100%;
  }
  .testi-card i.bi-quote{ color:var(--blue-fresh); font-size:1.6rem; }
  .testi-name{ color:var(--white); font-weight:600; margin-bottom:0; }
  .testi-role{ color:rgba(255,255,255,.6); font-size:.82rem; }
  .carousel-indicators [data-bs-target]{ background-color:var(--blue-fresh); }

  /* ===== CTA percikan ===== */
  .cta-band{
    background:linear-gradient(120deg, var(--spark-orange), #FF9552);
    border-radius:16px; padding:2.8rem; color:var(--white);
  }

  /* ===== Kontak ===== */
  .contact-card{
    background:var(--white); border:1px solid #E1EEF3; border-radius:12px; padding:2rem;
  }
  .form-control:focus{ border-color:var(--blue-fresh); box-shadow:0 0 0 .2rem rgba(23,162,201,.18); }
  .contact-info-item{ display:flex; gap:.9rem; margin-bottom:1.2rem; }
  .contact-info-item i{
    width:42px; height:42px; border-radius:8px; background:var(--blue-bg-light); color:var(--blue-primary);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem;
  }
  .map-placeholder{
    background:var(--blue-bg-light); border-radius:10px; min-height:220px;
    display:flex; align-items:center; justify-content:center; color:var(--blue-primary); flex-direction:column; gap:.5rem;
  }

  /* ===== Footer ===== */
  footer{ background:var(--blue-deep); color:rgba(255,255,255,.7); padding:3rem 0 1.4rem; }
  footer h5{ color:var(--white); font-size:.95rem; }
  footer a{ color:rgba(255,255,255,.65); }
  footer a:hover{ color:var(--spark-orange); }
  .footer-divider{ border-color:rgba(255,255,255,.12); margin:2rem 0 1.2rem; }
  .social-ic{
    width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center; color:var(--white);
    transition:background .15s ease;
  }
  .social-ic:hover{ background:var(--spark-orange); color:var(--white); }

  /* ===== Tombol WhatsApp mengambang ===== */
  .wa-float{
    position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%;
    background:#25D366; color:var(--white); display:flex; align-items:center; justify-content:center;
    font-size:1.7rem; box-shadow:0 10px 24px rgba(0,0,0,.25); z-index:1040;
    transition:transform .15s ease;
  }
  .wa-float:hover{ color:var(--white); transform:scale(1.08); }

  @media (max-width:767.98px){
    .hero{ padding:4rem 0 5.5rem; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); text-align:center; }
    .hero p.lead-blm{ margin-left:auto; margin-right:auto; }
    .hero-stats{ justify-content:center; }
    .stat-row{ flex-wrap:wrap; }
    .stat-item{ flex:1 1 50%; border-right:none; border-bottom:1px solid #E1EEF3; }
  }