/* ==========================================================================
   1. DESIGN TOKENS (CSS VARIABLES)
   ========================================================================== */
:root{
  /* Brand colors */
  --c-primary:        #1B4F91;
  --c-primary-dark:   #163F74;
  --c-primary-light:  #E8EDF4;
  --c-primary-rgb:    27,79,145;

  /* Light theme surfaces */
  --c-ink:            #0B1220;
  --c-body:           #4B5768;
  --c-muted:          #7C8AA0;
  --c-surface:        #FFFFFF;
  --c-surface-alt:    #F5F7FC;
  --c-border:         #E3E8F2;

  --stage-bezel:        #12182B;   /* frame laptop/phone/monitor */
  --stage-bezel-edge:   transparent; /* garis tepi frame, terlihat hanya di dark mode */
  --stage-tile:         #1B2A44;   /* tile grid CCTV */
  --stage-metal-1:      #DCE3EC;   /* gradasi metal alas laptop (atas) */
  --stage-metal-2:      #B9C4D2;   /* gradasi metal alas laptop (bawah) */
  --stage-screen:       #FFFFFF;   /* latar layar */
  --stage-panel:        #F6F8FC;   /* latar panel chart/list di dalam layar */
  --stage-line:         #E7EDF5;   /* garis tipis / skeleton di dalam layar */
  --stage-dot:          #D7E3F5;   /* titik-titik grid latar */
  --stage-text:         #12182B;   /* teks label di dalam layar */
  --stage-text-muted:   #8A96AC;   /* teks caption di dalam layar */
  --stage-accent:       var(--c-primary);       /* warna data utama: bar, donut, avatar */
  --stage-accent-soft:  var(--c-primary-light);  /* chip tint: kartu stat, ikon app */
  --stage-accent-2:     #2CA6DE;   /* warna data sekunder, kontras di chart */
  --stage-tint-2:       #EAF7FD;   /* tint terang pasangan accent-2 */
  --stage-connector:    #BBD3EE;   /* garis putus penghubung antar device */
  --stage-shadow:       0 16px 30px rgba(11,37,69,.14);
  --stage-shadow-bezel: 0 20px 36px rgba(11,37,69,.2);

  --font-mono: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* Shadow (used sparingly) */
  --sh-sm: 0 1px 2px rgba(11,18,32,.06);
  --sh-md: 0 12px 32px -12px rgba(11,18,32,.18);

  /* Type scale */
  --fs-hero:   clamp(2.35rem, 1.2rem + 3.2vw, 3.65rem);
  --fs-h2:     clamp(1.7rem, 1.15rem + 1.7vw, 2.35rem);
  --fs-h3:     1.125rem;
  --fs-body:   1rem;
  --fs-small:  .875rem;
  --fs-eyebrow:.8rem;

  --nav-h: 76px;
  --container-pad: 1.25rem;
}

[data-theme="dark"]{
  --c-primary:        #CAA87D;
  --c-primary-dark:   #D9BE9A;
  --c-primary-light:  rgba(202,168,125,.16);
  --c-primary-rgb:    202,168,125; 
  --c-ink:            #F3F6FC;
  --c-body:           #B7C0D4;
  --c-muted:          #8792A8;
  --c-surface:        #0B1220;
  --c-surface-alt:    #101A2E;
  --c-border:         #23304A;
  --sh-md: 0 12px 32px -12px rgba(0,0,0,.55);

  --stage-bezel:        #141C30;
  --stage-bezel-edge:   rgba(255,255,255,.08);
  --stage-tile:         #202C48;
  --stage-metal-1:      #2A3448;
  --stage-metal-2:      #171E2F;
  --stage-dot:          rgba(202,168,125,.16);
  --stage-accent-2:     #6FA8C9;
  --stage-tint-2:       rgba(111,168,201,.14);
  --stage-connector:    rgba(202,168,125,.28);
  --stage-shadow:       0 16px 30px rgba(0,0,0,.45);
  --stage-shadow-bezel: 0 20px 36px rgba(0,0,0,.5);
}

/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,sans-serif;
  font-size:var(--fs-body);
  color:var(--c-body);
  background:var(--c-surface);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}
h1,h2,h3,h4{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--c-ink);
  margin:0;
  line-height:1.18;
}
p{margin:0;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1220px;padding-left:var(--container-pad);padding-right:var(--container-pad);}
:focus-visible{outline:2.5px solid var(--c-primary); outline-offset:3px; border-radius:4px;}

/* ==========================================================================
   3. UTILITIES / SHARED COMPONENTS
   ========================================================================== */

/* Section padding konsisten — pakai di section manapun, semua halaman */
.sect-pad {
    padding-top: clamp(48px, 8vw, 88px);
    padding-bottom: clamp(48px, 8vw, 88px);
}

/* Section head (eyebrow + judul + optional desc), rata tengah, lebar dibatasi */
.sect-head {
    max-width: 640px;
    margin: 0 auto clamp(32px, 5vw, 56px);
    text-align: center;
}
.sect-head h2 {
    font-size: var(--fs-h2);
}
.sect-head p {
    margin-top: .9rem;
    font-size: var(--fs-body);
}

/* Wajib di section pertama tiap halaman (selain Home) supaya tidak
   ketutup fixed navbar */
.page-top-offset {
    padding-top: calc(var(--nav-h) + clamp(32px, 6vw, 56px));
}

/* Gambar dengan aspect-ratio & styling konsisten di seluruh situs */
.media-frame {
    width: 100%;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    object-fit: cover;
    display: block;
}
.media-frame--portrait  { aspect-ratio: 4 / 5; }
.media-frame--landscape { aspect-ratio: 16 / 9; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-primary);
  margin-bottom:1.1rem;
}
/* .eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--c-primary);
  border-radius:2px;
} */

.hl{color:var(--c-primary); font-weight:800;}

.btn-primary-custom{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--c-primary);
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  padding:.85rem 1.6rem;
  border-radius:var(--r-sm);
  border:1.5px solid var(--c-primary);
  transition:background-color .2s ease, transform .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-primary-custom:hover{background:var(--c-primary-dark); border-color:var(--c-primary-dark); transform:translateY(-1px); color:#fff;}

.btn-outline-custom{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:transparent;
  color:var(--c-primary);
  font-weight:600;
  font-size:.95rem;
  padding:.85rem 1.6rem;
  border-radius:var(--r-sm);
  border:1.5px solid var(--c-border);
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
  white-space:nowrap;
}
.btn-outline-custom:hover{border-color:var(--c-primary); background:var(--c-primary-light); color:var(--c-primary); transform:translateY(-1px);}

/* Scroll reveal */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
[data-reveal].is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{transition:none; opacity:1; transform:none;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;}
}

/* ==========================================================================
   3. NAVBAR
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--c-surface);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease, background-color .35s ease;
}
.site-header.is-scrolled{
  box-shadow:var(--sh-sm);
  border-bottom-color:var(--c-border);
}
.custom-navbar{width:100%; padding:0;}
.custom-navbar .container{display:flex; align-items:center; justify-content:space-between; gap:1rem;}

.navbar-brand{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:1.3rem;
  color:var(--c-ink) !important;
  letter-spacing:-.01em;
}
.navbar-brand span{color:var(--c-primary);}

.main-menu{display:flex; align-items:center; gap:2.1rem; list-style:none; margin:0; padding:0;}
.main-menu .nav-link{
  font-size:.95rem; font-weight:600; color:var(--c-body); padding:.4rem 0;
  position:relative; transition:color .2s ease;
}
.main-menu .nav-link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--c-primary); transition:width .25s ease;
}
.main-menu .nav-link:hover, .main-menu .nav-link.active{color:var(--c-ink);}
.main-menu .nav-link:hover::after, .main-menu .nav-link.active::after{width:100%;}

.nav-actions{display:flex; align-items:center; gap:.6rem;}

.lang-toggle{
  display:flex; align-items:center; gap:.3rem;
  font-size:.82rem; font-weight:700; color:var(--c-body);
  background:var(--c-surface-alt); border:1px solid var(--c-border);
  border-radius:999px; padding:.45rem .8rem; cursor:pointer;
}
.lang-toggle .lang-current{color:var(--c-primary);}
.lang-toggle .lang-sep{color:var(--c-muted); font-weight:400;}

.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--c-surface-alt); border:1px solid var(--c-border);
  color:var(--c-body); cursor:pointer; font-size:1rem;
  transition:color .2s ease, border-color .2s ease;
}
.theme-toggle:hover{color:var(--c-primary); border-color:var(--c-primary);}

.navbar-toggler{border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-surface-alt);}
.navbar-toggler-icon-custom{font-size:1.3rem; color:var(--c-ink); display:flex; width:22px; height:22px;}
.navbar-toggler:focus{box-shadow:none;}

@media (max-width: 991.98px){
  /* Mobile menu renders as a floating panel below the fixed bar,
     instead of stretching the fixed header (which would overlap the hero). */
  .navbar-collapse{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--c-surface);
    border-top:1px solid var(--c-border);
    box-shadow:var(--sh-md);
    max-height:calc(100svh - var(--nav-h));
    overflow-y:auto;
    padding:1.25rem var(--container-pad) 1.75rem;
  }
  .main-menu{
    flex-direction:column; align-items:flex-start; gap:1rem;
    margin:0 0 1.25rem;
  }
  .nav-actions{flex-wrap:wrap; row-gap:.75rem;}
}


/* ==========================================================================
   4. FOOTER
   ========================================================================== */
.site-footer{
  background:var(--c-ink);
  color:#B9C2D6;
  padding:4rem 0 1.75rem;
}
[data-theme="dark"] .site-footer{background:#070C18;}
.site-footer .f-brand{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.35rem; color:#fff; margin-bottom:.9rem; display:block;}
.site-footer .f-brand span{color:var(--c-primary-dark);}
.site-footer .f-tagline{font-size:.9rem; max-width:32ch; line-height:1.7; margin-bottom:1.4rem;}
.f-heading{color:#fff; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1.1rem;}
.f-links{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem;}
.f-links a{font-size:.9rem; transition:color .2s ease;}
.f-links a:hover{color:#fff;}
.f-social{display:flex; gap:.6rem; margin-top:1.4rem;}
.f-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid #253048;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  transition:border-color .2s ease, color .2s ease;
}
.f-social a:hover{border-color:var(--c-primary-dark); color:#fff;}
.f-bottom{
  border-top:1px solid #212C46; margin-top:3rem; padding-top:1.5rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:.8rem; color:#7482A0;
}

.f-links a{
  position:relative;
  transition:color .2s ease, padding-left .2s ease;
}
.f-links a::before{
  content:"";
  position:absolute; left:-14px; top:50%;
  width:0; height:1px;
  background:var(--c-primary-dark);
  transition:width .2s ease;
}
.f-links a:hover{color:#fff; padding-left:14px;}
.f-links a:hover::before{width:10px;}

.f-social a{
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.f-social a:hover{transform:translateY(-3px);}

/* ==========================================================================
   5. GENERIC RESPONSIVE SECTION SPACING
   ========================================================================== */
@media (max-width: 767.98px){
  .company-info{padding:4rem 0;}
}


/* ===== SHARED CTA SECTION (dipakai lintas halaman: About, Solutions, dst) ===== */
.about-cta {
    position: relative;
    padding: clamp(56px, 9vw, 88px) 0;
    overflow: hidden;
}
.about-cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.about-cta-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(var(--c-primary-rgb), .92);
}
.about-cta-box {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
.about-cta-box h2 {
    color: #fff;
    font-size: var(--fs-h2);
    margin-bottom: 1rem;
}
.about-cta-box p {
    color: rgba(255,255,255,.85);
    margin-bottom: 2rem;
}
.about-cta-box .btn-primary-custom {
    background: #fff;
    color: var(--c-primary);
    border-color: #fff;
}
.about-cta-box .btn-primary-custom:hover {
    background: rgba(255,255,255,.9);
}

/* ===== SHARED PARTNER/BUSINESS UNIT CARD (dipakai di Home & Business Units) ===== */
.partner-card {
    height: 100%;
    padding: 1.8rem;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: var(--sh-sm);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.partner-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
}
.partner-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.1rem;
}
.partner-logo {
    width: 48px; height: 48px;
    border-radius: var(--r-sm);
    background: var(--c-primary-light);
    color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: .8rem;
    flex-shrink: 0;
}
.partner-cert {
    display: flex; align-items: center; gap: .3rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-primary);
    margin-bottom: .2rem;
}
.partner-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: var(--c-ink);
}
.partner-desc {
    font-size: .9rem;
    margin-bottom: 1rem;
    flex-grow: 1;
}
.partner-domains {
    display: flex; flex-wrap: wrap; gap: .4rem;
    margin-bottom: 1.2rem;
}
.tag-pill {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--c-body);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: .3rem .7rem;
}