:root {
  --bg: #071A15;
  --text: #F1FBF6;
  --muted: #9CC7B8;
  --accent: #34D8A6;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  min-width: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 999;
  background: #fff;
  color: #071A15;
  padding: 10px;
}

.skip-link:focus { left: 8px; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(110,231,200,.4);
  color: #F1FBF6;
  border-radius: 10px;
  font-size: 26px;
  line-height: 1;
  padding: 10px 13px;
  cursor: pointer;
}

.site-nav { width: 100%; }

img, svg { max-width: 100%; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid #6EE7C8;
  outline-offset: 3px;
}

/* Prevent flex and grid children from forcing horizontal overflow */
main,
section,
section > div,
.site-nav,
.nav-brand,
.nav-menu {
  min-width: 0;
}

section * { min-width: 0; }

p, h1, h2, h3, span, a {
  overflow-wrap: normal;
  word-break: normal;
}

/* TABLET */
@media (max-width: 900px) {
  .site-nav {
    padding: 15px 22px !important;
    flex-wrap: wrap;
  }

  .nav-toggle { display: block; }

  .nav-menu {
    display: none !important;
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 14px 0 4px;
  }

  .nav-menu.is-open { display: flex !important; }

  .nav-menu a { padding: 12px 4px !important; }

  .nav-menu a:last-child {
    text-align: center;
    margin-top: 8px;
  }

  section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  section > div { max-width: 100% !important; }

  h1 { font-size: clamp(42px, 9vw, 64px) !important; }
  h2 { font-size: clamp(31px, 6vw, 46px) !important; }

  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0,1fr) !important;
  }

  [style*="min-width:420px"] {
    min-width: 0 !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* MOBILE */
@media (max-width: 600px) {
  .site-nav {
    padding: 13px 16px !important;
  }

  .nav-brand { gap: 9px !important; }

  .nav-brand svg {
    width: 30px !important;
    height: 30px !important;
  }

  .nav-brand span {
    font-size: 15px !important;
    white-space: nowrap;
  }

  .nav-toggle {
    font-size: 24px;
    padding: 9px 11px;
  }

  section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Force every grid into a true single column on phones */
  [style*="display:grid"] {
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
  }

  [style*="grid-column:span"] {
    grid-column: 1 / -1 !important;
  }

  [style*="display:flex"] { max-width: 100%; }

  /* Fix desktop split sections */
  [style*="min-width:420px"] {
    min-width: 0 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Hero */
  [style*="padding:0 72px 100px"] {
    padding: 0 18px 58px !important;
  }

  [style*="font-size:76px"] {
    font-size: clamp(42px,12vw,52px) !important;
    line-height: 1.04 !important;
  }

  section:first-of-type [style*="display:flex; gap:18px; margin-top:38px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  section:first-of-type [style*="display:flex; gap:18px; margin-top:38px"] a {
    text-align: center !important;
    padding: 15px 20px !important;
  }

  /* Common section spacing */
  [style*="padding:70px 60px"] {
    padding: 48px 18px !important;
  }

  [style*="padding:110px 72px"] {
    padding: 72px 18px !important;
  }

  [style*="font-size:48px"],
  [style*="font-size:44px"] {
    font-size: 34px !important;
    line-height: 1.14 !important;
  }

  [style*="font-size:23px"],
  [style*="font-size:22px"] {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  [style*="letter-spacing:0.4em"],
  [style*="letter-spacing:0.34em"] {
    letter-spacing: .18em !important;
  }

  /* Services */
  #layanan [style*="display:flex; gap:18px"] {
    gap: 14px !important;
    padding: 22px 18px !important;
    align-items: flex-start !important;
  }

  #layanan [style*="font-size:21px"] {
    font-size: 19px !important;
    line-height: 1.3 !important;
  }

  /* Statistics */
  #tentang [style*="display:grid"] > div {
    width: 100% !important;
    padding: 24px 22px !important;
  }

  /* Footer and large content areas */
  footer,
  [style*="padding:70px 72px"],
  [style*="padding:80px 72px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* SMALL MOBILE */
@media (max-width: 380px) {
  .nav-brand span { font-size: 14px !important; }

  .nav-brand svg {
    width: 27px !important;
    height: 27px !important;
  }

  h1 { font-size: 40px !important; }

  section {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}