@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');


:root{
  --navy-950:#234B72;
  --navy-900:#2A567F;
  --navy-800:#33638F;
  --steel-600:#6E93B5;
  --steel-300:#B7D0E4;
  --steel-100:#E9F1F8;
  --paper:#F8FAFC;
  --white:#FFFFFF;
  --ink:#243244;
  --slate:#66788F;
  --amber-500:#F2A93B;
  --amber-600:#DC9020;
  --amber-100:#FDEFD9;
  --line-dark:rgba(233,241,248,.18);
  --line-light:rgba(36,50,68,.08);
  --radius:6px;
  --maxw:1920px;
  --ff-display:'Space Grotesk', sans-serif;
  --ff-body:'Inter', sans-serif;
  --ff-mono:'IBM Plex Mono', monospace;
}

   /* Reset dasar & gaya body */
    * {margin: 0; padding: 0; box-sizing: border-box;font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;}

#home, #solutions, #projects,#services,#Partner, #about {
  scroll-margin-top: 75px; /* tinggi navbar + 10px, untuk menbuka lik dan header tidak terpotong*/
}

/* ===== DARK MODE OVERRIDES ===== */
body[data-theme="dark"]{
  --paper:#234B72;
  --white:#234B72;
  --ink:#EDF1F5;
  --slate:#9DB0C6;
  --line-light:rgba(230,238,246,.12);
  --navy-800:#E7ECF2;
}
body[data-theme="dark"] .partner-cell:hover{background:rgba(242,169,59,.16);}
body[data-theme="dark"] .solcard:hover,
body[data-theme="dark"] .proj:hover{box-shadow:0 14px 30px -18px rgba(0,0,0,.55);}
body[data-theme="dark"] .about-visual{border:1px solid var(--line-dark);}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--navy-950); /* samain dengan hero */
  
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
 .wrap{max-width:var(--maxw);margin: 0 auto;padding:0 32px;}

@media (max-width:640px){.wrap{padding:0 20px;}}

h1,h2,h3,h4{font-family:var(--ff-display);margin:0;letter-spacing:-0.01em;}
p{margin:0;line-height:1.6;}

.eyebrow{font-family:var(--ff-mono);font-size:18px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55;Display:inline-block;}

/* Buttons */
.btn{
  font-family:var(--ff-body);
  font-weight:600;
  font-size:14.5px;
  padding: 12px 12px;
  border-radius:var(--radius);
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg,#F7C169,var(--amber-500));
  color:#2E1E08;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px -6px rgba(242,169,59,.55);
}
.btn-primary:hover{background:linear-gradient(180deg,#F2A93B,var(--amber-600));transform:translateY(-1px);box-shadow:0 8px 20px -6px rgba(242,169,59,.65);}
.btn-ghost{background:transparent;color:var(--steel-100);border-color:var(--line-dark);}
.btn-ghost:hover{border-color:var(--steel-300);background:rgba(255,255,255,.04);}
.btn:focus-visible{outline:2px solid var(--amber-500);outline-offset:2px;}

/*===== HEADER / UTILITY CONTROLS ===== */
header{
  position:sticky; top:0; z-index:50;
  width: 100%; /* TAMBAH */
  background:rgba(38, 114, 189, 0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}

.wrap{
  max-width: 1280px; /* ganti dari 1920px jadi 1280px biar tetap di tengah */
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}

.brand{display:flex;align-items:center;gap:11px;font-family:var(--ff-display);font-weight:700;font-size:17px;color:rgb(255, 255, 255);flex-shrink:0;
      text-shadow: 
          0px 0px 20px #000000,
          0px 0px 15px rgba(2, 2, 2, 0.9);

          }
.brand img{height: 52px;width: auto;}
.brand-mark{
  width:34px;height:34px;border-radius:7px;
  background:linear-gradient(135deg,var(--amber-500),#C97D1C);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-mono);font-weight:600;font-size:13px;color:#2E1E08;
}
.brand small{display:block;font-family:var(--ff-mono);font-weight:500;font-size:10px;letter-spacing:.12em;color:var(--steel-300);margin-top:10px;}
.brand logo{display:block;font-family:var(--ff-mono);font-weight:500;font-size:8px;letter-spacing:.08em;color:white;margin-top:2px;margin-left:70px;}



/* ===== NAVBAR ===== */
    .navbar {
      background: #072b4f;       /* slate-800 */
      /*background-image: url('../Images/WalktoFactory_Header.png');
      */background-position: top;
      background-size: bottom;
      padding: 0.75rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;           /* biar rapi kalau isi kelebihan */
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      position: sticky;
      top: 0;
      z-index: 50;
     
    }


.navcta {
    display: flex;
    margin-left:auto;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== HAMBURGER TOGGLE ===== */
.hamburger {
      background: transparent;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      color: white;
      font-size: 1.8rem;
      padding: 0.2rem 0.7rem;
      cursor: pointer;
      transition: 0.2s ease;
      display: none;    /* disembunyikan di desktop */
      line-height: 1;
/*      margin-left:auto; */
}

.hamburger:hover {
    background: #1d52a8;
    border-color: #94a3b8;
}
.hamburger:active {
    transform: scale(0.95);
}


    /* Menu navigasi (daftar link) */
    .nav-menu {
      display: flex;
      align-items: center;
      gap: 1rem;
      list-style: none;
      transition: all 0.3s ease;
     
    }

    .nav-menu li a {
      color: #e2e8f0;
      text-decoration: none;
      font-size: 1.05rem;
      font-weight: 500;
      text-shadow: 
          1px 1px 1px #000,
          1px 1px 1px rgba(0,0,0,0.5);
      padding: 0.4rem 0.2rem;
      border-bottom: 2px solid transparent;
      transition: 0.2s;
    }
    .nav-menu li a:hover {
      color: #ffffff;
      border-bottom-color: #38bdf8;
    }


    /* ----- RESPONSIVE : layar mengecil (≤ 768px) ----- */

    @media screen and (max-width: 1075px) {
      .navbar {
        padding: 0.75rem 1.25rem;
      }

      /* Tampilkan tombol hamburger */
      .hamburger {
        display: block;
      }

      /* Ubah menu menjadi kolom, disembunyikan default */
      .nav-menu {
        display:none;
        flex-direction: column;
        align-items: stretch;
        order: 3;  /* biar muncul di bawah hamburger */
        width: 100%;
        gap: 0;
        background: #1d52a8;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0.25s, margin 0.2s;
        margin-top: 0;
        border-top: 1px solid rgba(255,255,255,0.05);
        border-radius: 0 0 12px 12px;
      }

      /* Saat menu aktif (class 'show' ditambahkan via JS) */
      .nav-menu.show {
        display: flex;
        max-height: 400px;       /* cukup untuk menampung 4-5 item */
        opacity: 1;
        visibility: visible;
        margin-top: 0.75rem;
        padding: 0.5rem 0 0.75rem 0;
      }

      .nav-menu li {
        padding: 0.4rem 0.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.04);
      }
      .nav-menu li:last-child {
        border-bottom: none;
      }

      .nav-menu li a {
        display: block;
        padding: 0.5rem 0.2rem;
        font-size: 1.1rem;
        border-bottom: none;
      }
      .nav-menu li a:hover {
        border-bottom: none;
        background: rgba(56, 189, 248, 0.08);
        border-radius: 6px;
        padding-left: 0.6rem;
      }

        /* Sembunyikan tombol aksi (btn-outline) di mobile, 
         atau bisa juga dimasukkan ke dalam menu. 
         Saya pilih tetap tampil di bawah menu jika diperlukan */
      .nav-actions {
        margin-left: 0;
        margin-top: 0.5rem;
        justify-content: flex-start;
        padding: 0 0.5rem;
        flex-wrap: wrap;
      }
      .btn-outline {
        font-size: 0.9rem;
        padding: 0.3rem 1rem;
      }

      /* jika ingin aksi tetap di sebelah kanan atas (di samping hamburger) 
         kita bisa tambahkan flex agar tidak turun, tapi saya biarkan di dalam menu 
         biar konsisten. Jika ingin aksi tetap di header, beri class khusus.
         Saya akan pindahkan .nav-actions ke dalam .nav-menu supaya rapi.
      */
      .nav-menu .nav-actions {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255,255,255,0.08);
        justify-content: center;
      }
      /* tapi karena nav-actions ada di dalam dan di luar, 
         kita duplikasi secara visual? lebih baik kita pindahkan 
         elemen .nav-actions ke dalam .nav-menu pada html agar responsive.
         Saya akan tata ulang struktur HTML-nya agar lebih bersih. 
         Lihat bagian HTML di bawah.
      */
    }

    /* Tambahan untuk layar sangat kecil */
    @media screen and (max-width: 480px) {
      .navbar-brand {
        font-size: 1.2rem;
      }
      .hamburger {
        font-size: 1.5rem;
        padding: 0.1rem 0.6rem;
      }
    }






.utility{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.lang-switch{
  display:flex;background:rgba(255,255,255,.06);border:1px solid var(--line-dark);
  border-radius:20px;padding:3px;gap:2px;
}
.lang-switch button{
  background:none;border:none;color:var(--steel-300);font-family:var(--ff-mono);
  font-size:11px;font-weight:600;padding:6px 11px;border-radius:16px;cursor:pointer;letter-spacing:.03em;
}
.lang-switch button.active{background:var(--amber-500);color:#2E1E08;}
.theme-toggle{
  background: var(--navy-950);border:1px solid var(--line-dark);color:var(--steel-100);
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--steel-300);}
.menu-btn{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;}
@media (max-width:920px){
  .navlinks{display:none;}
  .navcta .btn-ghost{display:none;}
  .menu-btn{display:block;}
}

/* ===== HERO ===== */
/* Bungkus hero harus full width */
.hero, .hero-section, #home {
  width: 100%;
  background: var(--navy-950) !important; /* biru tua #234B72 */
  position: relative;
  overflow: hidden;
  margin-top: 0px; /* biar menempel ke atas */
  padding-top: 40px; /* beri jarak atas untuk konten */
  padding-right: 0px; /* biar menempel ke kanan */
  }

/* Isinya yang di tengah */
.hero .wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.hero::before{
  
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line-dark) 1px, transparent 1px),linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
  opacity:.6;
}

.hero-inner{position:relative;z-index:1;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;}}
.hero .eyebrow{color:var(--steel-300 );margin-bottom:22px;}
.hero h1{font-size:clamp(34px,4.4vw,54px);line-height:1.06;font-weight:700;color:#ffffff;max-width:640px;}
.hero h1 em{font-style:normal;color:var(--amber-500);}

.hero p.lede{margin-top:22px;font-size:17px;color:var(--steel-300);max-width:520px;line-height:1.7;}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}

 .schematic--light{
      background:#FFFFFF;
      border:1px solid #E6EEF8;
      border-radius:20px;
      box-shadow:0 20px 60px rgba(15,42,77,.08), 0 2px 10px rgba(15,42,77,.04);
      padding:14px 16px 12px;
      position:relative; overflow:hidden;
    }
    .schematic--light::before{
      content:""; position:absolute; inset:0;
      background-image:radial-gradient(#D9E6F8 1px, transparent 1px);
      background-size:18px 18px; opacity:.45; pointer-events:none;
    }
    .schem-top{
      display:flex; justify-content:space-between; align-items:center;
      font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.08em; color:#6B86A6;
      position:relative; z-index:1;
    }
    .schem-top b{color:#0F2A4D; font-weight:600}
    .live-dot{width:7px;height:7px;background:#10B981;border-radius:50%;display:inline-block;margin-right:6px;animation:livePulse 2s infinite}
    @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
    .flow-wrap{position:relative; z-index:1; margin:12px 0 8px}
    .node-row{display:flex; gap:8px; margin-top:10px}
    .node-card{flex:1; background:#fff; border:1px solid #EEF3FB; border-radius:14px; padding:10px; box-shadow:0 4px 14px rgba(15,42,77,.04); transition:.25s}
    .node-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(15,42,77,.10)}
    .node-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;margin-bottom:8px}
    .eff .node-icon{background:#FFF7E6; color:#F59E0B; border:1px solid #FFEAC1}
    .sec .node-icon{background:#EFF6FF; color:#3B82F6; border:1px solid #D6E6FF}
    .saf .node-icon{background:#ECFDF5; color:#10B981; border:1px solid #C6F6E0}
    .node-label{font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:#6B86A6}
    .node-title{font-weight:700; font-size:13px; color:#0F2A4D}
    .node-sub{font-size:10.5px; color:#7A93B3; margin-top:4px}
    @keyframes dashFlow{to{stroke-dashoffset:-40}} @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  

/* ===== DIVIDER ===== */

.divider{display:flex;align-items:center;gap:16px;padding:40px 0 20px;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.1em;color:var(--slate)}
.divider .tag{border:1px solid var(--line-light);border-radius:4px;padding:4px 9px;color:var(--navy-800);font-weight:600;}
.divider .rule{flex:1;height:1px;background:var(--line-light);position:relative;}
.divider .rule::before{content:"";position:absolute;left:0;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--amber-500);}
.divider .rule::after{content:"";position:absolute;right:0;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--amber-500);}

.divider.on-dark{color:var(--steel-300);}
.divider.on-dark .tag{border-color:var(--line-dark);color:var(--steel-100);}
.divider.on-dark .rule{background:var(--line-dark);}

section{width:100%;max-width:100%;display:block;position:relative;overflow:hidden;padding:0 0 80px;}
.section-head{max-width:640px;margin-bottom:5px;}
.section-head h2{font-size:clamp(26px,3vw,36px);margin-top:14px;line-height:1.2;}
.section-head p{margin-top:14px;color:var(--slate);font-size:15.5px;}


/* ===== ANIMATIONS PICS===== 

.frame { position:absolute; opacity:0; animation: cycle 9s infinite; }
.frame:nth-child(2){ animation-delay: 1.5s; }
.frame:nth-child(3){ animation-delay: 3s; }
.frame:nth-child(4){ animation-delay: 4.5s; }
.frame:nth-child(5){ animation-delay: 6s; }
.frame:nth-child(6){ animation-delay: 7.5s;}
@keyframes cycle { 0%{opacity:0} 5%{opacity:1} 25%{opacity:1} 30%{opacity:0} } */

/* ===== BASE ===== */
.frame { 
  position:absolute; 
  opacity:0; 
  animation: cycle 9s infinite; 
}

/* SET 1 - jalan normal */
.set1 .frame:nth-child(1){ animation-delay: 0.5s; }
.set1 .frame:nth-child(2){ animation-delay: 2s; }
.set1 .frame:nth-child(3){ animation-delay: 3s; }
.set1 .frame:nth-child(4){ animation-delay: 4.5s; }
.set1 .frame:nth-child(5){ animation-delay: 6s; }
.set1 .frame:nth-child(6){ animation-delay: 7.5s;}

/* SET 2 - dibikin tabrakan sengaja +0.75 detik */
.set2 .frame:nth-child(1){ animation-delay: 0.25s; }
.set2 .frame:nth-child(2){ animation-delay: 2.25s; }
.set2 .frame:nth-child(3){ animation-delay: 3.75s; }
.set2 .frame:nth-child(4){ animation-delay: 5.25s; }
.set2 .frame:nth-child(5){ animation-delay: 6.75s; }
.set2 .frame:nth-child(6){ animation-delay: 7.85s;}

@keyframes cycle { 0%{opacity:0} 5%{opacity:1} 25%{opacity:1} 30%{opacity:0} }

/* PARTNERS */

.partner-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;}
@media (max-width:900px){.partner-grid{grid-template-columns:repeat(3,1fr);}}
/* @media (max-width:560px){.partner-grid{grid-template-columns:repeat(2,1fr);}} */
.partner-card{background:var(--white);border:1px solid var(--line-light);border-radius:8px;padding:26px 22px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;border-top: 4px solid #ffd700;margin-top:80px;}
.partner-card:hover {transform: translateY(-10px);box-shadow: 0 15px 25px rgba(0,0,0,0.15);}
.partner-icon {font-size: 3rem;color: #2a5298;margin-bottom: 1.5rem;}
.partner-card h3 {margin-top: 20px;font-size: 1.5rem;margin-top: 15px;margin-bottom: 2rem;animation: fadeInUp 1s ease;}
.partner-card p{font-size:14px;color:var(--slate);}


/* ===== SOLUTIONS ===== */

.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:980px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.card-grid{grid-template-columns:1fr;}}
.solcard{background:var(--white);border:1px solid var(--line-light);border-radius:8px;padding:5px 5px 5px 10px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.solcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(36,50,68,.28);border-color:var(--steel-300);}
.solcard-icon {font-size: 3rem;margin-bottom: 5px;color: var(--amber-500);} 
.solcard .ico{width:38px;height:38px;border-radius:7px;background:var(--navy-950);color:var(--amber-500);display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:13px;font-weight:600;margin-bottom:16px;}
.solcard h3{font-size:17px;margin-bottom:9px;}
.solcard p{font-size:14px;color:var(--slate);}



/* ===== SERVICES ===== */

.services{background:var(--navy-950);color:#fff;padding:0 0 0;margin-top:40px;}
.services .section-head p{color:var(--steel-300);}
.services .section-head .eyebrow{color:var(--amber-500);}
/* .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-dark);} */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width: 1200px;margin: 0 auto;padding: 0 30px;}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr;}}
.svc{background:var(--navy-950);border:1px solid var(--line-dark);border-radius:8px;padding:26px 22px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.svc-icon {font-size: 3rem;margin-bottom: 1.5rem;color: var(--amber-500);} 
.svc:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(36,50,68,.28);border-color:var(--steel-300);}
.svc .num{font-family:var(--ff-mono);font-size:12px;color:var(--amber-500);margin-bottom:14px;display:block;}
.svc h3{font-size:16.5px;color:#fff;margin-bottom:9px;}
.svc p{font-size:13.5px;color:var(--steel-300);}

.statsbreak{background:var(--navy-950);color:#fff;padding:40px 0 0;margin-top:40px;}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr);}}
.stats {display: grid;grid-template-columns: repeat(4, 1fr);gap: 16px;max-width: 1200px;margin: 0 auto;padding: 0 30px;overflow: hidden;background: var(--navy-950);}
.stat{background:var(--navy-950);border:2px solid #e0e41c;border-radius:8px;padding:26px 22px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.stat b{display:block;font-family:var(--ff-display);font-size:32px;color:var(--yellow-800);font-weight:700;}
.stat span{font-size:12.5px;color:var(--steel-300);font-family:var(--ff-mono);letter-spacing:.03em;}

/* ===== PROJECTS ===== */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width: 1200px;margin: 0 auto;padding: 0 30px;}
@media (max-width:800px){.proj-grid{grid-template-columns:1fr;}}
.proj{background:var(--white);border:1px solid var(--line-light);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;}
.proj-image {height: 550px;background-size: cover;background-position: Center;position: relative;overflow: hidden;}
.proj-media{height:0px;background:linear-gradient(135deg, rgba(242,169,59,.14), transparent 60%),repeating-linear-gradient(45deg, var(--navy-800) 0 2px, var(--navy-900) 2px 34px);position:relative;}
.proj-media .tag{position:absolute;bottom:12px;left:14px;font-family:var(--ff-mono);font-size:10.5px;color:var(--steel-100);background:rgba(35,75,114,.55);border:1px solid var(--line-dark);padding:4px 9px;border-radius:4px;letter-spacing:.06em;}
.proj-body{padding:22px;}
.proj-body h3{font-size:16.5px;margin-bottom:8px;line-height:1.3;}
.proj-body p{font-size:13.5px;color:var(--slate);}
.client-band{margin-top:52px;border-top:1px solid var(--line-light);padding-top:34px;font-family: 'Courier New', monospace;font-size:80px;color:var(--slate);display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.client-band .chip-row{display:flex;flex-wrap:wrap;gap:15px;font-size:80px;}
.chip{font-family:var(--ff-mono);font-size:18px;color:var(--slate);border:1px solid var(--line-light);border-radius:20px;padding:7px 14px;}

/* ===== ABOUT ===== */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;}
@media (max-width:900px){.about{grid-template-columns:1fr;}}
.about-image {height: 113%;width: 100%;object-fit: cover;border-radius: 10px;position: absolute;top: 0;left: 0;}
.about-visual{background:var(--navy-950);border-radius:10px;aspect-ratio:4/5;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:26px;}
.about-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-dark) 1px, transparent 1px),linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);background-size:34px 34px;}
.about-visual .est{position:relative;font-family:var(--ff-mono);color:var(--steel-100);font-size:13px;}
.about-visual .est b{display:block;font-family:var(--ff-display);font-size:28px;color:var(--amber-500);font-weight:700;}
.about-copy p{color:var(--slate);font-size:15.5px;margin-bottom:16px;}
.about-copy .badges{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;}
.badge{font-family:var(--ff-mono);font-size:18px;font-weight:600;color:var(--navy-800);border:2px solid var(--line-light);border-radius:5px;padding:8px 12px;background:var(--white);}

/* ===== CONTACT ===== */
.contact{
  background:var(--navy-950);color:#fff;border-radius:14px;padding:56px;margin:0 32px 80px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  max-width:calc(var(--maxw) - 64px);margin-left:auto;margin-right:auto;
}
@media (max-width:900px){.contact{grid-template-columns:1fr;padding:36px 24px;margin:0 20px 64px;}}
.contact h2{font-size:clamp(24px,3vw,32px);color:#fff;max-width:420px;}
.contact p.lede{color:var(--steel-300);margin-top:14px;font-size:15px;max-width:420px;}
.contact-info{margin-top:28px;display:flex;flex-direction:column;gap:14px;}
.contact-info div{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--steel-100);}
.contact-info span.k{font-family:var(--ff-mono);color:var(--amber-500);font-size:12px;min-width:64px;}
.form{display:flex;flex-direction:column;gap:12px;}
.form input, .form textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:6px;padding:13px 14px;color:#fff;font-family:var(--ff-body);font-size:14px;}
.form input::placeholder,.form textarea::placeholder{color:var(--steel-300);}
.form textarea{resize:vertical;min-height:96px;}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--amber-500);}

        /* Footer */
footer {position: fixed;bottom: 0;left: 0; width: 100%;background: #f1f1f1; /* atau warna sesuai tema */ border-top: 1px solid var(--line-light);padding: 18px 0;z-index: 1000; /* Pastikan di atas konten lain */box-shadow: 0 -2px 10px rgba(0,0,0,0.05);}
.foot-inner {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 12px;max-width: 1200px;margin: 0 auto; padding: 0 20px;}
.foot-inner p {font-size: 12.5px;color: #64748b;}
.foot-links {display: flex;gap: 20px;}
.foot-links a {font-size: 12.5px;color: #64748b;text-decoration: none;transition: color 0.3s;}
.foot-links a:hover { color: #1e293b;}



/*
footer{border-top:1px solid var(--line-light);padding:28px 0;}
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.foot-inner p{font-size:12.5px;color:var(--slate);}
.foot-links{display:flex;gap:20px;}
.foot-links a{font-size:12.5px;color:var(--slate);}
.foot-links a:hover{color:var(--navy-800);}
*/
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease, transform .55s ease;}
.reveal.show{opacity:1;transform:translateY(0);}