:root {
      --green-950: #DC2626;
      --green-900: #DC2626;
      --green-800: #DC2626;
      --green-700: #DC2626;
      --green-600: #DC2626;
      --green-500: #DC2626;
      --green-100: #DDF8E0;
      --green-50: #F1FFF3;
      --yellow-500: #f5c542;
      --yellow-400: #ffd966;
      --yellow-100: #fff4c7;
      --ink: #18231A;
      --muted: #657267;
      --line: #E3ECE4;
      --surface: #ffffff;
      --soft: #F7FAF7;
      --shadow-sm: 0 12px 32px rgba(220, 38, 38, .08);
      --shadow-md: 0 22px 70px rgba(220, 38, 38, .14);
      --shadow-lg: 0 32px 100px rgba(220, 38, 38, .18);
      --radius-sm: 16px;
      --radius-md: 24px;
      --radius-lg: 34px;
      --container: min(1180px, calc(100% - 40px));
      --header-h: 78px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: auto; }
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }

    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background: var(--surface);
      font-family: "Manrope", sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    body.menu-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    img { display: block; max-width: 100%; }
    svg[data-lucide] { width: 1em; height: 1em; }
    button { color: inherit; }
    ::selection { background: var(--yellow-400); color: var(--green-950); }

    .container { width: var(--container); margin-inline: auto; }
    .skip-link {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 9999;
      transform: translateY(-140%);
      padding: 12px 18px;
      background: var(--yellow-500);
      color: var(--green-950);
      border-radius: 12px;
      font-weight: 800;
    }
    .skip-link:focus { transform: translateY(0); }

    .site-header {
      position: fixed;
      z-index: 1000;
      inset: 0 0 auto;
      height: var(--header-h);
      border-bottom: 1px solid transparent;
      transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, height .35s ease;
    }
    .site-header.scrolled,
    .site-header.inner-active {
      background: rgba(255, 255, 255, .92);
      border-color: rgba(220, 38, 38, .10);
      box-shadow: 0 10px 40px rgba(220, 38, 38, .08);
      backdrop-filter: blur(18px);
    }
    .header-inner {
      height: 100%;
      display: flex;
      align-items: center;
      gap: 28px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      flex: 0 0 auto;
      color: #fff;
      transition: color .3s ease;
    }
    .site-header.scrolled .brand,
    .site-header.inner-active .brand { color: var(--green-950); }
    .brand-mark {
      position: relative;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 15px;
      background: linear-gradient(145deg, var(--yellow-400), var(--yellow-500));
      color: var(--green-950);
      box-shadow: 0 9px 24px rgba(245, 197, 66, .28);
      overflow: hidden;
    }
    .brand-mark::before {
      content: "";
      position: absolute;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(220, 38, 38, .20);
      border-radius: 50%;
    }
    .brand-mark span { position: relative; font: 800 14px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.5px; }
    .brand-copy { display: grid; line-height: 1.1; }
    .brand-copy strong { font: 800 16px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing: -.35px; }
    .brand-copy small { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .68; }

    .desktop-nav {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .nav-link {
      position: relative;
      padding: 11px 10px;
      color: rgba(255, 255, 255, .78);
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      transition: color .25s ease, background .25s ease;
      white-space: nowrap;
    }
    .site-header.scrolled .nav-link,
    .site-header.inner-active .nav-link { color: #4E5E50; }
    .nav-link:hover,
    .nav-link.active {
      color: #fff;
      background: rgba(255, 255, 255, .1);
    }
    .site-header.scrolled .nav-link:hover,
    .site-header.scrolled .nav-link.active,
    .site-header.inner-active .nav-link:hover,
    .site-header.inner-active .nav-link.active {
      color: var(--green-800);
      background: var(--green-50);
    }
    .header-cta {
      margin-left: 6px;
      min-height: 44px;
      padding: 0 17px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 13px;
      color: var(--green-950);
      background: var(--yellow-500);
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 8px 24px rgba(245,197,66,.2);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .header-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(245,197,66,.3); }
    .header-cta svg { width: 16px; height: 16px; }

    .menu-toggle {
      display: none;
      margin-left: auto;
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 14px;
      background: rgba(255,255,255,.12);
      color: #fff;
      cursor: pointer;
      place-items: center;
      transition: background .25s ease, color .25s ease;
    }
    .site-header.scrolled .menu-toggle,
    .site-header.inner-active .menu-toggle { background: var(--green-50); color: var(--green-900); }
    .menu-toggle svg { width: 23px; height: 23px; }

    .mobile-drawer {
      position: fixed;
      z-index: 1100;
      inset: 0;
      visibility: hidden;
      pointer-events: none;
      overflow: hidden;
    }
    .mobile-drawer.open { visibility: visible; pointer-events: auto; }
    .drawer-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .42);
      opacity: 0;
      backdrop-filter: blur(8px);
      transition: opacity .3s ease;
    }
    .mobile-drawer.open .drawer-backdrop { opacity: 1; }
    .drawer-panel {
      position: absolute;
      top: 12px;
      right: 12px;
      bottom: 12px;
      width: min(390px, calc(100% - 24px));
      padding: 20px;
      display: flex;
      flex-direction: column;
      border-radius: 28px;
      background: #fff;
      transform: translateX(110%);
      transition: transform .42s cubic-bezier(.2,.8,.2,1);
      overflow-y: auto;
    }
    .mobile-drawer.open .drawer-panel { transform: translateX(0); }
    .drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
    .drawer-top .brand { color: var(--green-950); }
    .drawer-close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 13px; background: var(--soft); cursor: pointer; }
    .drawer-nav { display: grid; gap: 5px; margin-top: 18px; }
    .drawer-link { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-radius: 14px; color: #465848; font-weight: 750; }
    .drawer-link.active, .drawer-link:hover { background: var(--green-50); color: var(--green-800); }
    .drawer-link svg { width: 16px; height: 16px; flex: 0 0 auto; }
    .drawer-bottom { margin-top: auto; padding-top: 26px; }
    .drawer-contact { padding: 18px; border-radius: 18px; color: #fff; background: var(--green-900); }
    .drawer-contact small { color: rgba(255,255,255,.65); }
    .drawer-contact strong { display: block; margin-top: 6px; font-size: 15px; }

    main { min-height: 70vh; }
    .page { display: none; min-height: 80vh; }
    .page.active {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: none;
    }
    .page.active section,
    .page.active article,
    .page.active div,
    .page.active p,
    .page.active h1,
    .page.active h2,
    .page.active h3,
    .page.active img {
      visibility: visible;
    }

    .hero {
      position: relative;
      min-height: 780px;
      display: grid;
      align-items: center;
      color: #fff;
      background: var(--green-950);
      overflow: hidden;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(220,38,38,.95) 0%, rgba(220,38,38,.88) 42%, rgba(220,38,38,.48) 72%, rgba(220,38,38,.68) 100%),
        url("https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&q=85&w=2000") center/cover no-repeat;
      transform: scale(1.03);
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 150px;
      background: linear-gradient(to top, rgba(220,38,38,.58), transparent);
      pointer-events: none;
    }
    .hero-grid-pattern {
      position: absolute;
      inset: 0;
      opacity: .14;
      background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 70px 70px;
      mask-image: linear-gradient(to right, black, transparent 76%);
    }
    .hero-orbit {
      position: absolute;
      right: -90px;
      bottom: -110px;
      width: 520px;
      height: 520px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 50%;
      animation: rotateSlow 22s linear infinite;
    }
    .hero-orbit::before, .hero-orbit::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.12);
    }
    .hero-orbit::before { inset: 64px; }
    .hero-orbit::after { inset: 132px; background: rgba(245,197,66,.08); }
    @keyframes rotateSlow { to { transform: rotate(360deg); } }
    .hero-inner {
      position: relative;
      z-index: 2;
      padding-top: calc(var(--header-h) + 62px);
      padding-bottom: 88px;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(310px, .72fr);
      gap: 72px;
      align-items: end;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      width: fit-content;
      margin-bottom: 21px;
      padding: 9px 13px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.87);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      backdrop-filter: blur(10px);
    }
    .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow-500); box-shadow: 0 0 0 5px rgba(245,197,66,.14); }
    .hero h1 {
      max-width: 770px;
      margin: 0;
      font: 800 clamp(48px, 6vw, 80px)/1.04 "Plus Jakarta Sans", sans-serif;
      letter-spacing: -4.6px;
      text-wrap: balance;
    }
    .hero h1 span { color: var(--yellow-400); }
    .hero-lead {
      max-width: 655px;
      margin: 25px 0 0;
      color: rgba(255,255,255,.72);
      font-size: clamp(16px, 1.6vw, 19px);
      line-height: 1.8;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
    .btn {
      min-height: 52px;
      padding: 0 21px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 1px solid transparent;
      border-radius: 15px;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    }
    .btn:hover { transform: translateY(-3px); }
    .btn-primary { background: var(--yellow-500); color: var(--green-950); box-shadow: 0 15px 34px rgba(245,197,66,.22); }
    .btn-primary:hover { box-shadow: 0 20px 42px rgba(245,197,66,.32); }
    .btn-ghost { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; backdrop-filter: blur(8px); }
    .btn-light { border-color: var(--line); background: #fff; color: var(--green-900); box-shadow: var(--shadow-sm); }
    .btn-green { background: var(--green-800); color: #fff; box-shadow: 0 14px 34px rgba(220,38,38,.22); }
    .btn svg { width: 18px; height: 18px; }

    .hero-panel {
      position: relative;
      padding: 10px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 30px;
      background: rgba(255,255,255,.09);
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(22px);
    }
    .hero-card {
      padding: 25px;
      border-radius: 22px;
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.18);
    }
    .hero-card-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
    .hero-card-label { color: rgba(255,255,255,.58); font-size: 12px; font-weight: 700; }
    .live-badge { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.18); color: #ffffff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .hero-stat-number { margin-top: 14px; font: 800 54px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -3px; }
    .hero-stat-copy { margin-top: 8px; color: rgba(255,255,255,.63); font-size: 13px; }
    .mini-chart { height: 74px; margin-top: 22px; display: flex; align-items: end; gap: 7px; }
    .mini-chart span { flex: 1; min-width: 8px; border-radius: 7px 7px 3px 3px; background: linear-gradient(to top, var(--green-500), #A7F0AD); opacity: .92; }
    .hero-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 8px; }
    .hero-mini-item { padding: 13px 10px; border-radius: 15px; background: rgba(255,255,255,.07); text-align: center; }
    .hero-mini-item strong { display: block; font-size: 17px; }
    .hero-mini-item span { margin-top: 4px; display: block; color: rgba(255,255,255,.5); font-size: 10px; }

    .floating-status {
      position: absolute;
      right: -28px;
      top: -30px;
      width: 166px;
      padding: 15px;
      border-radius: 19px;
      background: #fff;
      color: var(--ink);
      box-shadow: var(--shadow-md);
      animation: floatY 4.8s ease-in-out infinite;
    }
    @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    .status-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: var(--yellow-100); color: #8c6800; }
    .status-icon svg { width: 18px; height: 18px; }
    .floating-status strong { display: block; margin-top: 11px; font-size: 13px; }
    .floating-status small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }

    .quick-strip {
      position: relative;
      z-index: 5;
      margin-top: -46px;
    }
    .quick-strip-inner {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      padding: 10px;
      border: 1px solid rgba(220,38,38,.10);
      border-radius: 26px;
      background: rgba(255,255,255,.94);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(16px);
    }
    .quick-item {
      position: relative;
      padding: 20px 20px;
      display: flex;
      align-items: center;
      gap: 14px;
      border-radius: 19px;
      transition: background .25s ease, transform .25s ease;
    }
    .quick-item:not(:last-child)::after { content: ""; position: absolute; top: 24%; right: 0; width: 1px; height: 52%; background: var(--line); }
    .quick-item:hover { background: var(--green-50); transform: translateY(-2px); }
    .quick-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: var(--green-50); color: var(--green-700); }
    .quick-icon.yellow { background: var(--yellow-100); color: #8c6800; }
    .quick-icon svg { width: 20px; height: 20px; }
    .quick-copy strong { display: block; color: var(--green-950); font-size: 13px; }
    .quick-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }

    .section { padding: 112px 0; }
    .section.soft { background: var(--soft); }
    .section.green { color: #fff; background: var(--green-950); }
    .section.yellow-soft { background: linear-gradient(180deg, #fffaf0, #fff); }
    .section-head { max-width: 710px; margin-bottom: 42px; }
    .section-head.center { margin-inline: auto; text-align: center; }
    .kicker {
      margin-bottom: 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--green-700);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--yellow-500); }
    .green .kicker { color: #ffffff; }
    .section-title {
      max-width: 850px;
      margin: 0;
      color: var(--green-950);
      font: 800 clamp(34px, 4vw, 55px)/1.12 "Plus Jakarta Sans", sans-serif;
      letter-spacing: -2.8px;
      text-wrap: balance;
    }
    .green .section-title { color: #fff; }
    .section-text { margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.82; }
    .green .section-text { color: rgba(255,255,255,.65); }

    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    .about-visual { position: relative; min-height: 570px; }
    .about-main-img { position: absolute; inset: 0 84px 50px 0; border-radius: 30px; object-fit: cover; width: calc(100% - 84px); height: calc(100% - 50px); box-shadow: var(--shadow-md); }
    .about-small-img { position: absolute; right: 0; bottom: 0; width: 245px; height: 275px; border: 8px solid #fff; border-radius: 27px; object-fit: cover; box-shadow: var(--shadow-md); }
    .about-badge {
      position: absolute;
      left: 24px;
      bottom: 22px;
      width: 182px;
      padding: 17px;
      border-radius: 19px;
      background: var(--yellow-500);
      color: var(--green-950);
      box-shadow: 0 18px 45px rgba(245,197,66,.3);
    }
    .about-badge strong { display: block; font: 800 25px/1 "Plus Jakarta Sans", sans-serif; }
    .about-badge span { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; line-height: 1.45; }
    .about-copy .section-head { margin-bottom: 28px; }
    .feature-list { display: grid; gap: 13px; margin-top: 27px; }
    .feature-item { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-top: 1px solid var(--line); }
    .feature-check { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: var(--green-100); color: var(--green-700); }
    .feature-check svg { width: 15px; height: 15px; }
    .feature-item strong { display: block; font-size: 14px; }
    .feature-item p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

    .stats-bento { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 16px; }
    .stat-card { position: relative; min-height: 210px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
    .stat-card.large { grid-row: span 2; min-height: 436px; color: #fff; background: var(--green-900); border-color: transparent; }
    .stat-card.yellow { background: var(--yellow-500); border-color: transparent; }
    .stat-label { color: var(--muted); font-size: 12px; font-weight: 750; }
    .stat-card.large .stat-label { color: rgba(255,255,255,.62); }
    .stat-card.yellow .stat-label { color: rgba(24,35,26,.72); }
    .stat-value { margin-top: 16px; font: 800 clamp(36px,4vw,58px)/1 "Plus Jakarta Sans",sans-serif; letter-spacing: -2.5px; color: var(--green-950); }
    .stat-card.large .stat-value { color: #fff; }
    .stat-card small { display: block; margin-top: 9px; color: var(--muted); line-height: 1.5; }
    .stat-card.large small { color: rgba(255,255,255,.58); }
    .stat-card.yellow small { color: rgba(24,35,26,.68); }
    .gender-ring { position: absolute; right: 25px; bottom: 25px; width: 180px; height: 180px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--yellow-500) 0 50.4%, var(--green-500) 50.4% 100%); }
    .gender-ring::before { content: ""; width: 118px; height: 118px; border-radius: 50%; background: var(--green-900); }
    .gender-ring-copy { position: absolute; text-align: center; }
    .gender-ring-copy strong { display: block; font: 800 25px/1 "Plus Jakarta Sans", sans-serif; }
    .gender-ring-copy span { display: block; margin-top: 5px; color: rgba(255,255,255,.55); font-size: 10px; }
    .stat-icon { position: absolute; right: 23px; top: 23px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--green-50); color: var(--green-700); }
    .stat-card.yellow .stat-icon { background: rgba(255,255,255,.44); }
    .stat-icon svg { width: 20px; height: 20px; }

    .cards-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
    .image-card { position: relative; min-height: 450px; display: flex; align-items: flex-end; border-radius: 28px; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-md); }
    .image-card img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
    .image-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top, rgba(5,36,27,.92), rgba(5,36,27,.08) 72%); }
    .image-card:hover img { transform: scale(1.06); }
    .image-card-content { padding: 27px; color: #fff; }
    .image-card-index { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 12px; background: var(--yellow-500); color: var(--green-950); font-size: 12px; font-weight: 800; }
    .image-card h3 { margin: 0; font: 800 24px/1.25 "Plus Jakarta Sans",sans-serif; letter-spacing: -.7px; }
    .image-card p { margin: 10px 0 0; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.7; }

    .services-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
    .service-card { min-height: 210px; padding: 23px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 10px 30px rgba(220,38,38,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .service-card:hover { transform: translateY(-7px); border-color: rgba(220,38,38,.25); box-shadow: var(--shadow-md); }
    .service-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--green-50); color: var(--green-700); }
    .service-icon.yellow { background: var(--yellow-100); color: #8c6800; }
    .service-icon svg { width: 22px; height: 22px; }
    .service-card h3 { margin: 21px 0 0; font: 800 16px/1.4 "Plus Jakarta Sans",sans-serif; }
    .service-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
    .service-arrow { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-size: 11px; font-weight: 800; }

    .budget-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
    .budget-summary { padding: 35px; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: rgba(255,255,255,.07); }
    .budget-summary-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
    .year-pill { padding: 8px 12px; border-radius: 999px; background: var(--yellow-500); color: var(--green-950); font-size: 11px; font-weight: 800; }
    .budget-big { margin-top: 28px; font: 800 clamp(35px,4vw,57px)/1.05 "Plus Jakarta Sans",sans-serif; letter-spacing: -2.8px; }
    .budget-caption { margin-top: 8px; color: rgba(255,255,255,.58); font-size: 12px; }
    .budget-row { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .budget-mini { padding: 16px; border-radius: 17px; background: rgba(255,255,255,.07); }
    .budget-mini span { color: rgba(255,255,255,.48); font-size: 10px; }
    .budget-mini strong { display: block; margin-top: 7px; font-size: 15px; }
    .budget-bars { display: grid; gap: 20px; }
    .budget-bar-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; color: rgba(255,255,255,.78); font-size: 12px; }
    .budget-bar-head strong { color: #fff; }
    .progress { height: 10px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
    .progress span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg,var(--yellow-500),#ffe697); transform-origin: left; animation: barGrow 1.2s ease both; }
    @keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .news-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 18px; }
    .news-card { border: 1px solid var(--line); border-radius: 24px; background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
    .news-card.featured { grid-row: span 2; }
    .news-img { height: 205px; overflow: hidden; }
    .news-card.featured .news-img { height: 350px; }
    .news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
    .news-card:hover img { transform: scale(1.05); }
    .news-body { padding: 23px; }
    .news-meta { display: flex; align-items: center; gap: 8px; color: var(--green-700); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .news-meta span { width: 4px; height: 4px; border-radius: 50%; background: var(--yellow-500); }
    .news-card h3 { margin: 13px 0 0; font: 800 18px/1.4 "Plus Jakarta Sans",sans-serif; letter-spacing: -.3px; }
    .news-card.featured h3 { font-size: 26px; }
    .news-card p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

    .cta-box {
      position: relative;
      padding: 55px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 35px;
      align-items: center;
      border-radius: 32px;
      color: #fff;
      background: var(--green-900);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }
    .cta-box::before { content: ""; position: absolute; right: -110px; top: -180px; width: 430px; height: 430px; border-radius: 50%; border: 80px solid rgba(255,255,255,.04); }
    .cta-box::after { content: ""; position: absolute; left: 36%; bottom: -160px; width: 300px; height: 300px; border-radius: 50%; background: rgba(245,197,66,.08); }
    .cta-copy, .cta-actions { position: relative; z-index: 1; }
    .cta-copy h2 { margin: 0; max-width: 700px; font: 800 clamp(28px,3.6vw,48px)/1.15 "Plus Jakarta Sans",sans-serif; letter-spacing: -2px; }
    .cta-copy p { margin: 15px 0 0; color: rgba(255,255,255,.65); line-height: 1.8; }
    .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

    .inner-hero {
      position: relative;
      padding: calc(var(--header-h) + 82px) 0 80px;
      min-height: 430px;
      color: #fff;
      background: var(--green-950);
      overflow: hidden;
    }
    .inner-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(220,38,38,.96),rgba(220,38,38,.78)), var(--inner-image, none) center/cover no-repeat; }
    .inner-hero::after { content: ""; position: absolute; right: -130px; bottom: -260px; width: 560px; height: 560px; border-radius: 50%; border: 100px solid rgba(245,197,66,.08); }
    .inner-hero .container { position: relative; z-index: 1; }
    .breadcrumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; color: rgba(255,255,255,.6); font-size: 11px; font-weight: 700; }
    .breadcrumbs a { color: var(--yellow-400); }
    .inner-hero h1 { max-width: 760px; margin: 0; font: 800 clamp(42px,5vw,68px)/1.07 "Plus Jakarta Sans",sans-serif; letter-spacing: -3.6px; text-wrap: balance; }
    .inner-hero p { max-width: 680px; margin: 20px 0 0; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.8; }

    .content-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: start; }
    .prose-card { padding: 35px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow-sm); }
    .prose-card h2, .prose-card h3 { font-family: "Plus Jakarta Sans",sans-serif; color: var(--green-950); }
    .prose-card h2 { margin: 0 0 20px; font-size: 30px; letter-spacing: -1.2px; }
    .prose-card h3 { margin: 30px 0 12px; font-size: 20px; }
    .prose-card p { color: var(--muted); line-height: 1.9; }
    .side-card { position: sticky; top: 105px; padding: 27px; border-radius: 25px; color: #fff; background: var(--green-900); }
    .side-card h3 { margin: 0; font: 800 21px/1.35 "Plus Jakarta Sans",sans-serif; }
    .side-card p { color: rgba(255,255,255,.64); font-size: 13px; line-height: 1.8; }
    .fact-list { display: grid; gap: 10px; margin-top: 22px; }
    .fact-item { padding: 14px; display: flex; gap: 12px; border-radius: 15px; background: rgba(255,255,255,.07); }
    .fact-item svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--yellow-400); }
    .fact-item strong { display: block; font-size: 12px; }
    .fact-item span { display: block; margin-top: 3px; color: rgba(255,255,255,.56); font-size: 10px; }

    .vision-box { padding: 42px; border-radius: 28px; background: linear-gradient(135deg,var(--green-900),var(--green-700)); color: #fff; box-shadow: var(--shadow-md); }
    .vision-box span { color: var(--yellow-400); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .vision-box blockquote { margin: 18px 0 0; font: 800 clamp(25px,3vw,39px)/1.4 "Plus Jakarta Sans",sans-serif; letter-spacing: -1.3px; }
    .mission-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; margin-top: 18px; }
    .mission-card { padding: 25px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
    .mission-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--yellow-100); color: #8c6800; font-weight: 800; }
    .mission-card p { margin: 17px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

    .people-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
    .person-card { padding: 23px; border: 1px solid var(--line); border-radius: 22px; background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
    .person-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
    .avatar { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 19px; background: linear-gradient(145deg,var(--green-100),var(--green-50)); color: var(--green-800); font: 800 19px/1 "Plus Jakarta Sans",sans-serif; }
    .person-card h3 { margin: 18px 0 0; font: 800 14px/1.5 "Plus Jakarta Sans",sans-serif; }
    .person-card p { margin: 5px 0 0; color: var(--green-700); font-size: 11px; font-weight: 750; }

    .leader-card { padding: 10px; display: grid; grid-template-columns: .75fr 1.25fr; border: 1px solid var(--line); border-radius: 30px; background: #fff; box-shadow: var(--shadow-md); overflow: hidden; }
    .leader-visual { min-height: 430px; border-radius: 23px; background: linear-gradient(145deg,var(--green-800),var(--green-950)); display: grid; place-items: center; overflow: hidden; }
    .leader-monogram { width: 180px; height: 180px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.06); color: var(--yellow-400); font: 800 54px/1 "Plus Jakarta Sans",sans-serif; box-shadow: inset 0 0 0 24px rgba(255,255,255,.025); }
    .leader-copy { padding: 48px; align-self: center; }
    .leader-copy .role { color: var(--green-700); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
    .leader-copy h2 { margin: 11px 0 0; font: 800 clamp(31px,4vw,49px)/1.12 "Plus Jakarta Sans",sans-serif; color: var(--green-950); letter-spacing: -2px; }
    .leader-copy p { margin: 20px 0 0; color: var(--muted); line-height: 1.86; }

    .data-panels { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
    .data-panel { padding: 25px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
    .data-panel h3 { margin: 0; font: 800 17px/1.4 "Plus Jakarta Sans",sans-serif; }
    .data-panel .total { margin-top: 16px; font: 800 37px/1 "Plus Jakarta Sans",sans-serif; color: var(--green-800); letter-spacing: -1.5px; }
    .split-row { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .split-cell { padding: 12px; border-radius: 13px; background: var(--soft); }
    .split-cell span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
    .split-cell strong { display: block; margin-top: 5px; font-size: 15px; }

    .edu-list { display: grid; gap: 14px; }
    .edu-row { display: grid; grid-template-columns: minmax(170px, .7fr) 1fr 65px; gap: 17px; align-items: center; }
    .edu-row strong { font-size: 12px; }
    .edu-track { height: 10px; border-radius: 99px; background: var(--green-50); overflow: hidden; }
    .edu-track span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg,var(--green-600),var(--yellow-500)); }
    .edu-row b { color: var(--green-800); font-size: 12px; text-align: right; }

    .potential-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
    .potential-card { min-height: 380px; position: relative; display: flex; align-items: end; border-radius: 27px; overflow: hidden; isolation: isolate; }
    .potential-card img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
    .potential-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top,rgba(5,36,27,.94),rgba(5,36,27,.1) 74%); }
    .potential-card:hover img { transform: scale(1.05); }
    .potential-card-body { padding: 28px; color: #fff; }
    .potential-tag { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: var(--yellow-500); color: var(--green-950); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .potential-card h3 { margin: 15px 0 0; font: 800 25px/1.25 "Plus Jakarta Sans",sans-serif; }
    .potential-card p { margin: 9px 0 0; max-width: 480px; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.75; }

    .service-toolbar { margin-bottom: 28px; display: flex; gap: 12px; justify-content: space-between; align-items: center; }
    .search-box { width: min(450px,100%); min-height: 50px; padding: 0 17px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
    .search-box svg { width: 18px; color: var(--muted); }
    .search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
    .service-count { color: var(--muted); font-size: 12px; }
    .service-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
    .service-list-card { padding: 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
    .service-list-card:hover { border-color: rgba(220,38,38,.28); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
    .service-list-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--green-50); color: var(--green-700); }
    .service-list-icon svg { width: 22px; height: 22px; }
    .service-list-card h3 { margin: 0; font: 800 14px/1.4 "Plus Jakarta Sans",sans-serif; }
    .service-list-card p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
    .service-chevron { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: var(--soft); color: var(--green-700); }
    .service-chevron svg { width: 16px; height: 16px; }

    .tabs { display: inline-flex; padding: 5px; gap: 5px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
    .tab-btn { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; }
    .tab-btn.active { background: var(--green-800); color: #fff; }
    .budget-dashboard { margin-top: 27px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 18px; }
    .budget-kpis { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
    .budget-kpi { padding: 23px; border: 1px solid var(--line); border-radius: 21px; background: #fff; }
    .budget-kpi span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
    .budget-kpi strong { display: block; margin-top: 12px; color: var(--green-900); font: 800 22px/1.2 "Plus Jakarta Sans",sans-serif; letter-spacing: -.6px; }
    .budget-kpi small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
    .chart-card { padding: 28px; border-radius: 25px; background: var(--green-950); color: #fff; }
    .chart-card h3 { margin: 0; font: 800 19px/1.4 "Plus Jakarta Sans",sans-serif; }
    .chart-card p { margin: 7px 0 22px; color: rgba(255,255,255,.54); font-size: 11px; }
    .chart-bars { display: flex; align-items: end; gap: 12px; min-height: 235px; padding-top: 10px; }
    .chart-col { flex: 1; min-width: 0; display: grid; gap: 9px; align-items: end; height: 220px; }
    .chart-col-bar { align-self: end; width: 100%; height: var(--h); min-height: 18px; border-radius: 10px 10px 4px 4px; background: linear-gradient(to top,var(--green-500),var(--yellow-500)); }
    .chart-col span { color: rgba(255,255,255,.55); font-size: 8px; text-align: center; line-height: 1.4; }

    .gallery-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 13px; }
    .gallery-item { position: relative; min-height: 250px; border: 0; padding: 0; border-radius: 22px; overflow: hidden; cursor: pointer; background: #ddd; }
    .gallery-item:nth-child(1), .gallery-item:nth-child(6) { grid-column: span 7; min-height: 400px; }
    .gallery-item:nth-child(2), .gallery-item:nth-child(5) { grid-column: span 5; min-height: 400px; }
    .gallery-item:nth-child(3), .gallery-item:nth-child(4), .gallery-item:nth-child(7) { grid-column: span 4; }
    .gallery-item:nth-child(8), .gallery-item:nth-child(9) { grid-column: span 6; }
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .4s ease; }
    .gallery-item::after { content: "Lihat foto"; position: absolute; left: 15px; bottom: 15px; padding: 8px 11px; border-radius: 999px; background: rgba(220,38,38,.88); color: #fff; font-size: 9px; font-weight: 800; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
    .gallery-item:hover img { transform: scale(1.05); filter: saturate(1.1); }
    .gallery-item:hover::after { opacity: 1; transform: translateY(0); }

    .lightbox { position: fixed; z-index: 2000; inset: 0; padding: 25px; display: grid; place-items: center; background: rgba(3,27,20,.87); opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: blur(18px); transition: opacity .3s ease, visibility .3s ease; }
    .lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
    .lightbox img { max-width: min(1100px,94vw); max-height: 84vh; border-radius: 24px; box-shadow: var(--shadow-lg); }
    .lightbox-close { position: absolute; top: 22px; right: 22px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }

    .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 25px; }
    .contact-card { padding: 34px; border: 1px solid var(--line); border-radius: 27px; background: #fff; box-shadow: var(--shadow-sm); }
    .contact-card h2 { margin: 0; font: 800 29px/1.25 "Plus Jakarta Sans",sans-serif; letter-spacing: -1.2px; }
    .contact-card > p { color: var(--muted); line-height: 1.8; }
    .contact-items { display: grid; gap: 12px; margin-top: 27px; }
    .contact-item { padding: 16px; display: flex; gap: 13px; border-radius: 16px; background: var(--soft); }
    .contact-item-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: var(--green-100); color: var(--green-700); }
    .contact-item-icon svg { width: 18px; height: 18px; }
    .contact-item strong { display: block; font-size: 12px; }
    .contact-item span, .contact-item a { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.6; }
    .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
    .form-group { display: grid; gap: 7px; }
    .form-group.full { grid-column: 1/-1; }
    .form-group label { color: #4E5E50; font-size: 11px; font-weight: 750; }
    .form-control { width: 100%; min-height: 50px; padding: 0 15px; border: 1px solid var(--line); border-radius: 14px; outline: 0; background: #fff; transition: border-color .25s ease, box-shadow .25s ease; }
    textarea.form-control { min-height: 130px; padding-top: 14px; resize: vertical; }
    .form-control:focus { border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
    .map-card { position: relative; min-height: 360px; display: grid; place-items: center; border-radius: 27px; overflow: hidden; background: linear-gradient(rgba(220,38,38,.82),rgba(220,38,38,.82)), url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&q=85&w=1400") center/cover; color: #fff; text-align: center; }
    .map-card-content { max-width: 490px; padding: 30px; }
    .map-pin { width: 65px; height: 65px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 22px; background: var(--yellow-500); color: var(--green-950); box-shadow: 0 16px 40px rgba(245,197,66,.25); }
    .map-pin svg { width: 28px; height: 28px; }
    .map-card h3 { margin: 0; font: 800 28px/1.3 "Plus Jakarta Sans",sans-serif; }
    .map-card p { color: rgba(255,255,255,.7); line-height: 1.8; }

    .empty-state { display: none; padding: 40px; border: 1px dashed var(--line); border-radius: 20px; color: var(--muted); text-align: center; }

    .site-footer { color: #fff; background: #DC2626; }
    .footer-main { padding: 78px 0 52px; display: grid; grid-template-columns: 1.4fr .7fr .7fr .9fr; gap: 50px; }
    .footer-brand .brand { color: #fff; }
    .footer-brand p { max-width: 400px; margin: 20px 0 0; color: rgba(255,255,255,.54); font-size: 12px; line-height: 1.85; }
    .footer-social { display: flex; gap: 8px; margin-top: 23px; }
    .social-btn { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: rgba(255,255,255,.7); transition: background .25s ease, color .25s ease; }
    .social-btn:hover { background: var(--yellow-500); color: var(--green-950); }
    .social-btn svg { width: 17px; height: 17px; }
    .footer-col h3 { margin: 0 0 20px; font: 800 13px/1.3 "Plus Jakarta Sans",sans-serif; }
    .footer-links { display: grid; gap: 12px; }
    .footer-links a { color: rgba(255,255,255,.54); font-size: 11px; transition: color .2s ease; }
    .footer-links a:hover { color: var(--yellow-400); }
    .footer-contact-line { display: flex; gap: 10px; color: rgba(255,255,255,.54); font-size: 11px; line-height: 1.65; }
    .footer-contact-line + .footer-contact-line { margin-top: 13px; }
    .footer-contact-line svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--yellow-400); }
    .footer-bottom { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.4); font-size: 10px; }
    .footer-bottom-links { display: flex; gap: 17px; }

    .back-to-top {
      position: fixed;
      z-index: 900;
      left: 18px;
      bottom: 18px;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 14px;
      background: var(--yellow-500);
      color: var(--green-950);
      box-shadow: 0 14px 35px rgba(220,38,38,.17);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      cursor: pointer;
      transition: all .25s ease;
    }
    .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
    .back-to-top svg { width: 19px; height: 19px; }

    .toast {
      position: fixed;
      z-index: 2300;
      right: 18px;
      bottom: 18px;
      max-width: 340px;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-radius: 17px;
      color: #fff;
      background: var(--green-900);
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translateY(18px);
      transition: all .3s ease;
    }
    .toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
    .toast svg { width: 20px; height: 20px; color: var(--yellow-400); }
    .toast span { font-size: 12px; line-height: 1.5; }

    @media (max-width: 1100px) {
      :root { --container: min(100% - 32px, 960px); }
      .desktop-nav { display: none; }
      .header-cta { margin-left: auto; }
      .menu-toggle { display: grid; margin-left: auto; }
      .hero-inner { grid-template-columns: 1fr .64fr; gap: 35px; }
      .hero h1 { letter-spacing: -3.8px; }
      .services-grid { grid-template-columns: repeat(2,1fr); }
      .people-grid { grid-template-columns: repeat(3,1fr); }
      .news-grid { grid-template-columns: 1fr 1fr; }
      .news-card.featured { grid-row: auto; grid-column: 1/-1; }
      .news-card.featured .news-img { height: 380px; }
      .footer-main { grid-template-columns: 1.2fr 1fr 1fr; }
      .footer-col:last-child { grid-column: span 2; }
    }

    @media (max-width: 820px) {
      :root { --header-h: 70px; --container: min(100% - 26px, 700px); }
      .header-cta { display: none; }
      .hero { min-height: auto; }
      .hero-inner { padding-top: 142px; padding-bottom: 108px; grid-template-columns: 1fr; }
      .hero h1 { max-width: 650px; font-size: clamp(43px,10vw,64px); letter-spacing: -3.2px; }
      .hero-panel { max-width: 460px; }
      .floating-status { right: -6px; }
      .quick-strip-inner { grid-template-columns: repeat(2,1fr); }
      .quick-item:nth-child(2)::after { display: none; }
      .section { padding: 86px 0; }
      .about-grid, .budget-wrap, .content-grid, .contact-grid, .budget-dashboard { grid-template-columns: 1fr; gap: 35px; }
      .about-visual { min-height: 500px; }
      .stats-bento { grid-template-columns: 1fr 1fr; }
      .stat-card.large { grid-row: auto; grid-column: 1/-1; min-height: 330px; }
      .cards-3 { grid-template-columns: 1fr; }
      .image-card { min-height: 380px; }
      .news-grid { grid-template-columns: 1fr; }
      .news-card.featured { grid-column: auto; }
      .news-card.featured .news-img { height: 290px; }
      .cta-box { padding: 39px; grid-template-columns: 1fr; }
      .cta-actions { justify-content: flex-start; }
      .inner-hero { min-height: 380px; padding-bottom: 65px; }
      .side-card { position: static; }
      .leader-card { grid-template-columns: 1fr; }
      .leader-visual { min-height: 330px; }
      .people-grid { grid-template-columns: repeat(2,1fr); }
      .data-panels { grid-template-columns: 1fr; }
      .potential-grid { grid-template-columns: 1fr; }
      .service-list { grid-template-columns: 1fr; }
      .gallery-item, .gallery-item:nth-child(n) { grid-column: span 6; min-height: 280px; }
      .gallery-item:nth-child(1), .gallery-item:nth-child(6) { grid-column: 1/-1; min-height: 370px; }
      .footer-main { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1/-1; }
      .footer-col:last-child { grid-column: auto; }
    }

    @media (max-width: 560px) {
      :root { --container: calc(100% - 22px); }
      .brand-copy small { display: none; }
      .brand-mark { width: 42px; height: 42px; border-radius: 13px; }
      .menu-toggle { width: 42px; height: 42px; }
      .hero::before { background: linear-gradient(180deg,rgba(220,38,38,.64),rgba(220,38,38,.96) 70%), url("https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&q=82&w=1000") center/cover no-repeat; }
      .hero-inner { padding-top: 128px; padding-bottom: 96px; gap: 44px; }
      .hero h1 { font-size: clamp(39px,12vw,51px); letter-spacing: -2.8px; }
      .hero-lead { font-size: 14px; line-height: 1.75; }
      .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
      .hero-actions .btn { min-width: 0; overflow: hidden; white-space: nowrap; gap: 6px; }
      .hero-actions .btn:nth-child(2) span { font-size: 0; }
      .hero-actions .btn:nth-child(2) span::after { content: "Layanan Desa"; font-size: 11px; }
      .btn { min-height: 49px; padding-inline: 12px; font-size: 11px; }
      .hero-panel { padding: 7px; border-radius: 24px; }
      .hero-card { padding: 20px; }
      .hero-stat-number { font-size: 45px; }
      .floating-status { top: -25px; right: -2px; width: 142px; padding: 13px; }
      .quick-strip { margin-top: -38px; }
      .quick-strip-inner { grid-template-columns: 1fr 1fr; padding: 7px; border-radius: 21px; }
      .quick-item { padding: 14px 10px; gap: 9px; }
      .quick-item::after { display: none; }
      .quick-icon { width: 37px; height: 37px; border-radius: 11px; }
      .quick-copy strong { font-size: 11px; }
      .quick-copy small { font-size: 8px; }
      .section { padding: 72px 0; }
      .section-title { font-size: 34px; letter-spacing: -1.8px; }
      .section-text { font-size: 14px; }
      .about-visual { min-height: 390px; }
      .about-main-img { inset: 0 45px 40px 0; width: calc(100% - 45px); height: calc(100% - 40px); }
      .about-small-img { width: 165px; height: 190px; border-width: 6px; }
      .about-badge { left: 12px; bottom: 10px; width: 145px; padding: 13px; }
      .about-badge strong { font-size: 20px; }
      .stats-bento { grid-template-columns: 1fr; }
      .stat-card.large { grid-column: auto; min-height: 340px; }
      .gender-ring { width: 145px; height: 145px; }
      .gender-ring::before { width: 95px; height: 95px; }
      .services-grid, .mission-grid, .budget-kpis { grid-template-columns: 1fr; }
      .budget-summary { padding: 25px; }
      .budget-row { grid-template-columns: 1fr; }
      .cta-box { padding: 30px 23px; border-radius: 25px; }
      .cta-actions { display: grid; grid-template-columns: 1fr; }
      .inner-hero { min-height: 345px; padding-top: 125px; }
      .inner-hero h1 { font-size: 40px; letter-spacing: -2.3px; }
      .inner-hero p { font-size: 14px; }
      .prose-card, .vision-box { padding: 25px; }
      .people-grid { grid-template-columns: 1fr; }
      .leader-copy { padding: 30px 23px; }
      .leader-visual { min-height: 280px; }
      .leader-monogram { width: 145px; height: 145px; font-size: 44px; }
      .edu-row { grid-template-columns: 1fr 55px; gap: 8px; }
      .edu-track { grid-column: 1/-1; grid-row: 2; }
      .service-toolbar { align-items: flex-start; flex-direction: column; }
      .service-list-card { grid-template-columns: auto 1fr; }
      .service-chevron { display: none; }
      .chart-bars { gap: 7px; }
      .gallery-grid { gap: 9px; }
      .gallery-item, .gallery-item:nth-child(n) { grid-column: 1/-1; min-height: 270px; }
      .gallery-item:nth-child(1), .gallery-item:nth-child(6) { min-height: 330px; }
      .contact-card { padding: 25px; }
      .contact-form { grid-template-columns: 1fr; }
      .form-group.full { grid-column: auto; }
      .footer-main { grid-template-columns: 1fr; gap: 36px; }
      .footer-brand, .footer-col:last-child { grid-column: auto; }
      .footer-bottom { align-items: flex-start; flex-direction: column; }
      .footer-bottom-links { flex-wrap: wrap; }
      .toast { left: 12px; right: 12px; bottom: 76px; max-width: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }
  

/* =========================================================
   DESA ILE PATI — TOTAL YATUMI REFERENCE THEME
   Visual system adapted from the supplied YATUMI reference.
   ========================================================= */
:root{
  --terracotta:#DC2626;
  --terracotta-deep:#991B1B;
  --terracotta-light:#F87171;
  --lime:#F97316;
  --moss:#7F1D1D;
  --moss-soft:#450A0A;
  --cream:#FFF7F7;
  --cream-deep:#FDE8E8;
  --ink:#261616;
  --ink-soft:#6B5555;
  --ink-faint:#927777;
  --sand:#F1D0D0;
  --white:#FFFEFB;
  --gold:#C9A227;
  --grad:linear-gradient(95deg,#991B1B 0%,#DC2626 54%,#F97316 100%);
  --grad-soft:linear-gradient(135deg,rgba(220,38,38,.14),rgba(249,115,22,.12));
  --glass:rgba(255,255,255,.68);
  --font-display:'General Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'General Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --container:min(1280px,calc(100% - 64px));
  --radius:28px;
  --radius-lg:36px;
  --ease:cubic-bezier(.16,1,.3,1);
  --green-950:var(--ink);
  --green-900:var(--moss-soft);
  --green-800:var(--terracotta-deep);
  --green-700:var(--terracotta);
  --green-600:#DC2626;
  --green-500:#EF4444;
  --green-100:var(--cream-deep);
  --green-50:var(--cream);
  --yellow-500:var(--lime);
  --yellow-400:#FDBA74;
  --yellow-100:#FFEDD5;
  --surface:var(--white);
  --soft:var(--cream);
  --muted:var(--ink-soft);
  --line:var(--sand);
  --shadow-sm:0 12px 34px rgba(127,29,29,.08);
  --shadow-md:0 20px 54px rgba(127,29,29,.13);
  --shadow-lg:0 32px 86px rgba(69,10,10,.17);
  --radius-sm:18px;
  --radius-md:var(--radius);
  --radius-lg:var(--radius-lg);
  --header-h:66px;
}

html{scroll-behavior:auto;font-size:16px;background:var(--cream);}
body{
  color:var(--ink);
  background:var(--cream);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--lime);color:var(--ink);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(52,211,153,.52);outline-offset:4px;}
.container{width:var(--container);max-width:1280px;margin-inline:auto;}
.page{min-height:60vh;}

/* Header capsule */
.site-header{
  position:fixed;
  top:16px;
  left:50%;
  right:auto;
  bottom:auto;
  width:min(calc(100% - 32px),1180px);
  height:auto;
  padding:8px 0;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(16,35,27,.34);
  box-shadow:0 18px 55px rgba(69,10,10,.24),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:all .36s var(--ease);
}
.site-header.scrolled,.site-header.inner-active{
  top:12px;
  padding:7px 0;
  background:rgba(244,251,247,.93);
  border-color:rgba(14,159,110,.18);
  box-shadow:0 18px 50px rgba(69,10,10,.12);
}
.header-inner{width:100%;height:auto;min-height:52px;padding:0 10px 0 8px;gap:14px;}
.brand{gap:10px;color:#fff;min-width:max-content;}
.site-header.scrolled .brand,.site-header.inner-active .brand{color:var(--ink);}
.brand-mark{
  width:50px;
  height:50px;
  border-radius:19px;
  color:#fff;
  background:var(--grad);
  box-shadow:0 10px 26px rgba(69,10,10,.16);
}
.brand-mark::before{width:38px;height:38px;border-color:rgba(255,255,255,.28);}
.brand-mark span,.brand-copy strong{font-family:var(--font-display);}
.brand-mark span{font-size:13px;font-weight:750;letter-spacing:-.02em;}
.brand-copy strong{font-size:15px;font-weight:750;letter-spacing:-.025em;}
.brand-copy small{font-size:8.5px;letter-spacing:.12em;opacity:.65;}
.desktop-nav{gap:0;margin-left:auto;}
.nav-link{
  padding:10px 10px;
  border-radius:999px;
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:700;
  transition:all .28s var(--ease);
}
.site-header.scrolled .nav-link,.site-header.inner-active .nav-link{color:var(--ink-soft);}
.nav-link:hover,.nav-link.active,.site-header.scrolled .nav-link:hover,.site-header.scrolled .nav-link.active,.site-header.inner-active .nav-link:hover,.site-header.inner-active .nav-link.active{
  color:var(--terracotta-light);
  background:rgba(220,38,38,.11);
}
.header-cta{
  min-height:44px;
  padding:0 17px;
  border:0;
  border-radius:999px;
  color:#fff;
  background:var(--grad);
  box-shadow:0 10px 28px rgba(220,38,38,.25);
  font-size:12px;
  font-weight:750;
}
.header-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(220,38,38,.34);}
.menu-toggle{
  width:46px;height:46px;border-radius:17px;
  border:1px solid rgba(255,255,255,.42);
  background:transparent;color:#fff;
}
.site-header.scrolled .menu-toggle,.site-header.inner-active .menu-toggle{border-color:var(--sand);background:rgba(255,255,255,.68);color:var(--ink);}

/* Mobile drawer */
.drawer-backdrop{background:rgba(6,46,34,.72);backdrop-filter:blur(12px);}
.drawer-panel{
  top:10px;right:10px;bottom:10px;
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:32px;
  color:#fff;
  background:linear-gradient(145deg,#450A0A,#261616 55%,#7F1D1D);
  box-shadow:0 28px 80px rgba(0,0,0,.3);
}
.drawer-top{border-bottom-color:rgba(255,255,255,.1);}
.drawer-top .brand{color:#fff;}
.drawer-close{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#fff;}
.drawer-link{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;color:rgba(255,255,255,.83);font-family:var(--font-display);font-size:18px;font-weight:650;}
.drawer-link.active,.drawer-link:hover{padding-left:20px;background:transparent;color:var(--terracotta-light);}
.drawer-contact{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.08);}

/* Hero */
.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:0;
  background:var(--ink);
  isolation:isolate;
}
.hero::before{
  z-index:-3;
  transform:none;
  background:
    linear-gradient(135deg,rgba(10,23,17,.90),rgba(10,23,17,.66) 52%,rgba(8,67,46,.52)),
    url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&q=88&w=2200') center/cover no-repeat;
  filter:saturate(.9) contrast(1.05);
}
.hero::after{
  z-index:-1;
  inset:0;
  height:auto;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,transparent,black 25%,black 85%,transparent);
}
.hero-grid-pattern,.hero-orbit{display:none;}
.hero-inner{
  position:relative;
  z-index:3;
  width:100%;
  padding:138px 0 64px;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(310px,.7fr);
  align-items:end;
  gap:64px;
}
.hero-copy{max-width:830px;}
.eyebrow{
  width:auto;
  margin-bottom:22px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--terracotta-light);
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  backdrop-filter:none;
}
.eyebrow::before{content:'';width:42px;height:1px;background:currentColor;display:block;}
.eyebrow-dot{display:none;}
.hero h1{
  max-width:850px;
  font-family:var(--font-display);
  font-size:clamp(42px,5.5vw,70px);
  line-height:1.025;
  font-weight:650;
  letter-spacing:-.052em;
  text-wrap:balance;
}
.hero h1 span{
  color:transparent;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
}
.hero-lead{max-width:650px;margin-top:24px;color:rgba(255,255,255,.76);font-size:17px;line-height:1.78;}
.hero-actions{margin-top:32px;gap:12px;}
.btn{
  min-height:0;
  padding:14px 24px;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:750;
  letter-spacing:.005em;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.btn-primary,.btn-green{background:var(--grad);color:#fff;box-shadow:0 14px 32px rgba(220,38,38,.26);}
.btn-primary:hover,.btn-green:hover{box-shadow:0 20px 45px rgba(220,38,38,.36);}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);}
.btn-ghost:hover{background:rgba(255,255,255,.15);border-color:#fff;}
.btn-light{color:var(--ink);border-color:rgba(122,145,135,.4);background:transparent;box-shadow:none;}
.btn-light:hover{color:#fff;background:var(--ink);border-color:var(--ink);}
.hero-panel{
  padding:10px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:32px;
  background:rgba(255,255,255,.09);
  box-shadow:0 28px 70px rgba(0,0,0,.2);
  backdrop-filter:blur(22px);
}
.hero-card{padding:24px;border-radius:25px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16);}
.hero-card-label{color:rgba(255,255,255,.62);}
.hero-stat-number{font-family:var(--font-display);font-size:48px;font-weight:650;letter-spacing:-.045em;}
.live-badge{color:var(--terracotta-light);background:rgba(220,38,38,.12);border:1px solid rgba(52,211,153,.28);}
.mini-chart span{background:var(--grad);}
.hero-mini-item{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.06);}
.floating-status{right:-20px;top:-34px;border:1px solid var(--sand);border-radius:22px;box-shadow:0 18px 52px rgba(69,10,10,.15);animation:none;}
.status-icon{border-radius:12px;color:var(--terracotta);background:var(--grad-soft);}

/* Quick links */
.quick-strip{margin-top:-43px;}
.quick-strip-inner{
  padding:9px;
  border:1px solid var(--sand);
  border-radius:30px;
  background:rgba(255,255,255,.92);
  box-shadow:0 22px 60px rgba(69,10,10,.12);
}
.quick-item{padding:18px;border-radius:23px;}
.quick-item:not(:last-child)::after{background:var(--sand);}
.quick-item:hover{background:var(--cream-deep);}
.quick-icon,.quick-icon.yellow{border-radius:15px;color:var(--terracotta);background:var(--grad-soft);}
.quick-copy strong{color:var(--ink);font-weight:750;}
.quick-copy small{color:var(--ink-soft);}

/* Sections and typography */
.section{padding:104px 0;}
.section.soft{background:var(--cream-deep);}
.section.yellow-soft{background:linear-gradient(180deg,var(--cream),var(--white));}
.section.green{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg,#450A0A,#261616 58%,#7F1D1D);
}
.section.green::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,rgba(220,38,38,.30),transparent 48%);pointer-events:none;}
.section.green>.container{position:relative;z-index:1;}
.section-head{max-width:760px;margin-bottom:46px;}
.kicker{
  margin-bottom:16px;
  color:var(--terracotta);
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
}
.kicker::before{width:18px;height:1px;background:currentColor;}
.green .kicker{color:var(--terracotta-light);}
.section-title{
  max-width:880px;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(32px,3.65vw,49px);
  line-height:1.07;
  font-weight:650;
  letter-spacing:-.04em;
}
.green .section-title{color:#fff;}
.section-text{margin-top:18px;color:var(--ink-soft);font-size:15px;line-height:1.82;}
.green .section-text{color:rgba(255,255,255,.66);}

/* Images and about */
.about-grid{gap:70px;}
.about-visual{min-height:540px;}
.about-main-img{inset:0 78px 46px 0;width:calc(100% - 78px);height:calc(100% - 46px);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}
.about-small-img{width:235px;height:260px;border:7px solid var(--white);border-radius:28px;box-shadow:var(--shadow-md);}
.about-badge{left:20px;bottom:18px;width:185px;border-radius:22px;color:#fff;background:var(--grad);box-shadow:0 18px 45px rgba(220,38,38,.27);}
.about-badge strong{font-family:var(--font-display);font-size:23px;font-weight:650;}
.feature-item{border-top-color:var(--sand);}
.feature-check{color:var(--terracotta);background:var(--grad-soft);border-radius:10px;}
.feature-item strong{color:var(--ink);font-weight:700;}
.feature-item p{color:var(--ink-soft);}

/* Universal card styling */
.stat-card,.service-card,.mission-card,.person-card,.news-card,.data-panel,.prose-card,.chart-card,.budget-kpi,.contact-card,.map-card,.service-list-card,.image-card{
  border-color:var(--sand);
  background:#fff;
  box-shadow:0 12px 34px rgba(69,10,10,.06);
}
.stat-card,.service-card,.mission-card,.person-card,.data-panel,.prose-card,.chart-card,.budget-kpi,.contact-card,.map-card,.service-list-card{border-radius:var(--radius);}
.stat-card:hover,.service-card:hover,.mission-card:hover,.person-card:hover,.news-card:hover,.service-list-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(69,10,10,.1);}
.stat-card.large{color:#fff;background:linear-gradient(145deg,#450A0A,#261616);}
.stat-card.yellow{background:var(--grad);color:#fff;}
.stat-card.yellow .stat-label,.stat-card.yellow small,.stat-card.yellow .stat-value{color:#fff;}
.stat-label{color:var(--ink-soft);}
.stat-value{font-family:var(--font-display);font-weight:650;letter-spacing:-.04em;color:var(--ink);}
.gender-ring{background:conic-gradient(var(--terracotta) 0 50.4%,var(--lime) 50.4% 100%);}
.gender-ring::after{background:var(--ink);}

.cards-3,.services-grid,.people-grid,.potential-grid,.news-grid,.data-panels,.mission-grid{gap:22px;}
.image-card{border-radius:var(--radius);box-shadow:none;}
.image-card::after{background:linear-gradient(to top,rgba(10,23,17,.94),rgba(10,23,17,.12) 72%);}
.image-card-index{color:var(--terracotta-light);}
.service-icon,.service-list-icon,.avatar,.contact-item-icon{color:var(--terracotta);background:var(--grad-soft);}
.service-card h3,.service-list-card h3,.person-card h3,.news-card h3,.potential-card h3,.mission-card p{font-family:var(--font-display);color:var(--ink);font-weight:650;letter-spacing:-.02em;}
.service-card p,.news-card p,.potential-card p,.service-list-card p{color:var(--ink-soft);}
.service-arrow,.service-chevron{color:var(--terracotta);}
.person-card{padding:25px;}
.person-card p{color:var(--terracotta-deep);font-weight:700;}
.avatar{border:1px solid rgba(220,38,38,.16);}

/* Profile and leadership */
.content-grid{gap:40px;}
.prose-card{padding:42px;}
.prose-card p{color:var(--ink-soft);line-height:1.88;}
.fact-item{border-color:var(--sand);background:var(--cream);}
.fact-item svg{color:var(--terracotta);}
.vision-box{
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  background:linear-gradient(145deg,#450A0A,#261616 58%,#7F1D1D);
  box-shadow:0 22px 65px rgba(69,10,10,.16);
}
.vision-box::before{background:radial-gradient(circle,rgba(220,38,38,.3),transparent 65%);}
.vision-box span{color:var(--terracotta-light);}
.vision-box blockquote{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;}
.mission-card{border-top:3px solid var(--terracotta);}
.mission-number{color:var(--terracotta);}
.leader-card{border:1px solid var(--sand);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;}
.leader-visual{background:linear-gradient(145deg,#450A0A,#261616 60%,#7F1D1D);}
.leader-monogram{color:#fff;border-color:rgba(255,255,255,.2);background:var(--grad);box-shadow:0 25px 60px rgba(220,38,38,.24);}
.leader-copy .role{color:var(--terracotta);}
.leader-copy h2{font-family:var(--font-display);font-weight:650;color:var(--ink);}
.leader-copy p{color:var(--ink-soft);}

/* Potential */
.potential-card{min-height:400px;border-radius:var(--radius);box-shadow:0 18px 45px rgba(69,10,10,.12);}
.potential-card::after{background:linear-gradient(to top,rgba(10,23,17,.96),rgba(10,23,17,.14) 74%);}
.potential-card-body{padding:28px;}
.potential-card h3{color:#fff;font-size:24px;}
.potential-card p{color:rgba(255,255,255,.72);}
.potential-tag{color:var(--terracotta-light);border:1px solid rgba(52,211,153,.3);background:rgba(220,38,38,.12);}

/* Budget */
.budget-summary{border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);background:rgba(255,255,255,.07);}
.budget-big{font-family:var(--font-display);font-weight:650;letter-spacing:-.045em;}
.budget-mini{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.06);}
.progress{background:rgba(255,255,255,.12);}
.progress span{background:var(--grad);}
.tabs{border-color:var(--sand);background:#fff;}
.tab-btn.active{color:#fff;background:var(--grad);box-shadow:0 10px 25px rgba(220,38,38,.2);}
.budget-kpi strong{font-family:var(--font-display);color:var(--ink);font-weight:650;}
.chart-col-bar{background:var(--grad);}

/* News */
.news-card{border-radius:var(--radius);overflow:hidden;}
.news-img{background:var(--cream-deep);}
.news-body{padding:24px;}
.news-meta{color:var(--terracotta);}
.news-card.featured h3{font-size:24px;}

/* Services */
.service-toolbar{border:1px solid var(--sand);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);}
.service-toolbar input{color:var(--ink);background:transparent;}
.service-toolbar svg{color:var(--terracotta);}
.service-list-card{padding:22px;}
.empty-state{border-color:var(--sand);background:#fff;}

/* Data panels */
.data-panel{padding:28px;}
.data-panel h3,.data-panel .total{font-family:var(--font-display);color:var(--ink);font-weight:650;}
.split-row,.edu-row{border-color:var(--sand);}
.edu-track{background:var(--cream-deep);}
.edu-track span{background:var(--grad);}

/* CTA */
.cta-box{
  border:1px solid var(--sand);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.cta-copy h2{font-family:var(--font-display);font-weight:650;letter-spacing:-.035em;color:var(--ink);}
.cta-copy p{color:var(--ink-soft);}
.section.green .cta-box{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.07);box-shadow:none;}
.section.green .cta-copy h2{color:#fff;}
.section.green .cta-copy p{color:rgba(255,255,255,.65);}

/* Inner page hero */
.inner-hero{
  position:relative;
  min-height:50vh;
  padding:150px 0 58px;
  display:flex;
  align-items:flex-end;
  color:#fff;
  background:var(--ink);
  overflow:hidden;
  isolation:isolate;
}
.inner-hero::before{
  z-index:-2;
  background:
    linear-gradient(135deg,rgba(10,23,17,.90),rgba(10,23,17,.67) 58%,rgba(8,67,46,.48)),
    var(--inner-image,none) center/cover no-repeat;
  filter:saturate(.9) contrast(1.05);
}
.inner-hero::after{
  z-index:-1;
  inset:0;
  width:auto;height:auto;right:0;bottom:0;
  border:0;border-radius:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,transparent,black 30%,black 100%);
}
.breadcrumbs{color:rgba(255,255,255,.58);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.breadcrumbs a{color:var(--terracotta-light);}
.inner-hero h1{
  max-width:820px;
  margin-top:16px;
  font-family:var(--font-display);
  font-size:clamp(36px,4.3vw,56px);
  line-height:1.06;
  font-weight:650;
  letter-spacing:-.048em;
}
.inner-hero p{max-width:680px;margin-top:17px;color:rgba(255,255,255,.72);font-size:15px;line-height:1.75;}

/* Contact & forms */
.contact-grid{gap:28px;}
.contact-card{padding:34px;}
.contact-card h2,.map-card h2{font-family:var(--font-display);font-weight:650;color:var(--ink);}
.contact-item{border-color:var(--sand);}
.contact-item strong{color:var(--ink);}
.contact-item span{color:var(--ink-soft);}
.form-control{
  border-color:var(--sand);
  border-radius:16px;
  color:var(--ink);
  background:var(--cream);
}
.form-control:focus{border-color:var(--terracotta);box-shadow:0 0 0 4px rgba(220,38,38,.1);background:#fff;}
.map-card{overflow:hidden;}
.map-card::before{background:linear-gradient(135deg,rgba(10,23,17,.92),rgba(8,67,46,.72));}

/* Gallery */
.gallery-grid{gap:18px;}
.gallery-item{border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.gallery-item::after{background:linear-gradient(to top,rgba(10,23,17,.9),transparent 62%);}
.gallery-item span{background:rgba(16,35,27,.52);backdrop-filter:blur(10px);}
.lightbox{background:rgba(6,24,17,.92);backdrop-filter:blur(18px);}
.lightbox img{border-radius:var(--radius);}
.lightbox-close{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.15);}

/* Footer */
.site-footer{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(rgba(10,23,17,.90),rgba(10,23,17,.93)),
    url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&q=84&w=1900') center/cover no-repeat;
}
.site-footer::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 78% 20%,rgba(220,38,38,.2),transparent 38%);}
.site-footer::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--grad);}
.site-footer>.container{position:relative;z-index:1;}
.footer-main{padding:82px 0 54px;grid-template-columns:1.4fr .75fr .75fr 1fr;gap:45px;}
.footer-brand .brand{color:#fff;}
.footer-brand p{color:rgba(255,255,255,.56);line-height:1.78;}
.footer-social .social-btn,.social-btn{border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.75);background:rgba(255,255,255,.07);}
.social-btn:hover{color:#fff;background:var(--terracotta);border-color:var(--terracotta);}
.footer-col h3{color:var(--terracotta-light);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;}
.footer-links a{color:rgba(255,255,255,.62);}
.footer-links a:hover{color:var(--terracotta-light);padding-left:4px;}
.footer-contact-line{color:rgba(255,255,255,.6);}
.footer-contact-line svg{color:var(--terracotta-light);}
.footer-bottom{border-top-color:rgba(255,255,255,.08);color:rgba(255,255,255,.38);}
.footer-bottom-links a{color:rgba(255,255,255,.48);}
.footer-bottom-links a:hover{color:var(--terracotta-light);}
.back-to-top{left:22px;right:auto;border-radius:16px;color:#fff;background:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.18);}
.back-to-top:hover{background:var(--terracotta);}
.toast{border:1px solid var(--sand);border-radius:18px;background:#fff;color:var(--ink);box-shadow:var(--shadow-md);}
.toast svg{color:var(--terracotta);}

@media(max-width:1180px){
  :root{--container:min(1180px,calc(100% - 40px));}
  .desktop-nav{display:none;}
  .header-cta{margin-left:auto;}
  .menu-toggle{display:grid;margin-left:0;}
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(290px,.58fr);gap:38px;}
  .footer-main{grid-template-columns:1.3fr 1fr 1fr;}
  .footer-main>div:last-child{grid-column:2/4;}
}

@media(max-width:900px){
  :root{--container:min(100% - 34px,760px);}
  .site-header{top:10px;width:calc(100% - 18px);border-radius:24px;padding:6px 0;}
  .site-header.scrolled,.site-header.inner-active{top:8px;padding:6px 0;}
  .header-inner{padding:0 7px;}
  .header-cta{display:none;}
  .brand-mark{width:46px;height:46px;border-radius:16px;}
  .hero{min-height:auto;}
  .hero-inner{padding:128px 0 70px;grid-template-columns:1fr;align-items:start;gap:46px;}
  .hero-copy{max-width:720px;}
  .hero-panel{max-width:520px;}
  .floating-status{right:16px;}
  .quick-strip{margin-top:-32px;}
  .quick-strip-inner{grid-template-columns:repeat(2,1fr);}
  .quick-item:nth-child(2)::after{display:none;}
  .quick-item:not(:last-child)::after{height:45%;}
  .section{padding:82px 0;}
  .about-grid,.content-grid,.contact-grid{grid-template-columns:1fr;gap:48px;}
  .about-visual{min-height:480px;}
  .inner-hero{min-height:45vh;padding:130px 0 48px;}
  .footer-main{grid-template-columns:1fr 1fr;}
  .footer-main>div:last-child{grid-column:auto;}
}

@media(max-width:640px){
  :root{--container:calc(100% - 28px);--radius:24px;--radius-lg:28px;}
  .site-header{width:calc(100% - 16px);}
  .brand-copy strong{font-size:14px;}
  .brand-copy small{font-size:7.5px;}
  .brand-mark{width:43px;height:43px;border-radius:15px;}
  .menu-toggle{width:43px;height:43px;border-radius:15px;}
  .hero-inner{padding:116px 0 58px;gap:34px;}
  .eyebrow{font-size:9px;letter-spacing:.16em;line-height:1.5;}
  .eyebrow::before{width:26px;}
  .hero h1{font-size:clamp(34px,10.2vw,43px);line-height:1.08;font-weight:620;letter-spacing:-.042em;}
  .hero-lead{margin-top:18px;font-size:14px;line-height:1.72;}
  .hero-actions{margin-top:25px;display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  .btn{width:100%;padding:12px 13px;font-size:11px;gap:7px;}
  .btn svg{width:15px;height:15px;}
  .hero-panel{padding:7px;border-radius:26px;}
  .hero-card{padding:20px;border-radius:21px;}
  .hero-stat-number{font-size:42px;}
  .floating-status{display:none;}
  .quick-strip{margin-top:-22px;}
  .quick-strip-inner{grid-template-columns:1fr;padding:7px;border-radius:25px;}
  .quick-item{padding:14px;border-radius:19px;}
  .quick-item::after{display:none!important;}
  .quick-icon{width:40px;height:40px;}
  .section{padding:68px 0;}
  .section-head{margin-bottom:32px;}
  .kicker{font-size:9px;letter-spacing:.17em;}
  .section-title{font-size:clamp(27px,8vw,34px);line-height:1.12;font-weight:620;letter-spacing:-.032em;}
  .section-text{font-size:14px;line-height:1.75;}
  .about-visual{min-height:380px;}
  .about-main-img{inset:0 44px 40px 0;width:calc(100% - 44px);height:calc(100% - 40px);border-radius:26px;}
  .about-small-img{width:155px;height:185px;border-width:5px;border-radius:22px;}
  .about-badge{left:14px;bottom:12px;width:150px;padding:14px;border-radius:18px;}
  .about-badge strong{font-size:20px;}
  .cards-3,.services-grid,.people-grid,.potential-grid,.news-grid,.data-panels,.mission-grid{grid-template-columns:1fr!important;}
  .stats-bento{grid-template-columns:1fr;}
  .stat-card.large{grid-row:auto;min-height:320px;}
  .service-card,.mission-card,.person-card,.data-panel,.prose-card,.chart-card,.contact-card,.map-card,.service-list-card{padding:22px;}
  .prose-card{padding:24px;}
  .potential-card{min-height:360px;}
  .inner-hero{min-height:390px;padding:118px 0 42px;}
  .inner-hero h1{font-size:clamp(31px,9vw,39px);line-height:1.1;font-weight:620;letter-spacing:-.038em;}
  .inner-hero p{font-size:13px;line-height:1.7;}
  .breadcrumbs{font-size:9px;}
  .leader-card{grid-template-columns:1fr;}
  .leader-visual{min-height:280px;}
  .leader-copy{padding:28px 22px;}
  .news-card.featured h3{font-size:21px;}
  .cta-box{padding:25px;}
  .cta-actions{display:grid;width:100%;}
  .footer-main{padding:68px 0 42px;grid-template-columns:1fr;gap:34px;}
  .footer-bottom{align-items:flex-start;flex-direction:column;gap:12px;}
  .back-to-top{left:14px;bottom:14px;}
}



/* =========================================================
   MULTI-PAGE REFACTOR + ACCESSIBILITY / VISIBILITY FIXES
   ========================================================= */
html{scroll-behavior:auto}
body{background:#FFF7F7;color:#261616}
.page,.page.active{display:block!important;opacity:1!important;visibility:visible!important;transform:none!important}
main{min-height:70vh}
.site-header{position:fixed;top:16px;left:0;right:0;z-index:1200;background:transparent!important;border:0!important;box-shadow:none!important;padding:0 14px}
.site-header.scrolled .header-shell{background:rgba(255,255,255,.95);box-shadow:0 18px 55px rgba(127,29,29,.13)}
.header-shell{height:76px;max-width:1280px;margin:auto;padding:0 16px 0 20px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(20px);display:flex;align-items:center;gap:22px;box-shadow:0 16px 50px rgba(127,29,29,.12)}
.site-logo{display:flex;align-items:center;min-width:220px;height:57px;overflow:hidden}.site-logo img{display:block;width:220px;height:auto}
.desktop-nav{display:flex;align-items:center;justify-content:center;gap:4px;flex:1}.desktop-nav a{padding:10px 11px;border-radius:999px;color:#4D2929!important;font-size:13px;font-weight:700;white-space:nowrap}.desktop-nav a:hover,.desktop-nav a.active{background:#FEE2E2;color:#B91C1C!important}
.header-contact{height:46px;padding:0 18px;border-radius:999px;background:linear-gradient(95deg,#B91C1C,#DC2626 55%,#F97316);color:#fff!important;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;box-shadow:0 10px 25px rgba(220,38,38,.22)}
.menu-toggle{display:none;position:relative!important;inset:auto!important;margin-left:auto!important;flex:0 0 46px;width:46px;height:46px;border:0;border-radius:50%;background:#B91C1C;color:#fff;align-items:center;justify-content:center;padding:0!important;z-index:2}.menu-toggle svg{width:23px;height:23px}
.mobile-nav{position:fixed;inset:0;z-index:1190;visibility:hidden;pointer-events:none}.mobile-nav.open{visibility:visible;pointer-events:auto}.mobile-nav-backdrop{position:absolute;inset:0;background:rgba(6,31,23,.58);opacity:0;transition:.25s}.mobile-nav.open .mobile-nav-backdrop{opacity:1}.mobile-nav-panel{position:absolute;top:0;right:0;width:min(88vw,390px);height:100%;background:#fff;padding:105px 24px 28px;transform:translateX(105%);transition:.35s cubic-bezier(.16,1,.3,1);box-shadow:-30px 0 70px rgba(0,0,0,.14);overflow:auto}.mobile-nav.open .mobile-nav-panel{transform:none}.mobile-nav-panel nav{display:grid;gap:8px}.mobile-nav-panel nav a{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-radius:16px;background:#FFF7F7;color:#4D2929!important;font-weight:800}.mobile-nav-panel nav a.active{background:#B91C1C;color:#fff!important}.mobile-nav-close{position:absolute;right:20px;top:25px;width:46px;height:46px;border:0;border-radius:50%;background:#FEE2E2;color:#B91C1C;display:grid;place-items:center}

.hero{min-height:800px;padding:180px 0 120px;position:relative;background-image:linear-gradient(90deg,rgba(5,42,31,.92) 0%,rgba(5,42,31,.76) 45%,rgba(5,42,31,.35) 100%),url('../images/lingkungan-desa.webp')!important;background-size:cover!important;background-position:center!important;color:#fff;display:flex;align-items:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 68%,rgba(5,42,31,.38));pointer-events:none}.hero-grid-pattern,.hero-orbit{opacity:.28}.hero-inner{grid-template-columns:minmax(0,780px)!important;position:relative;z-index:2;justify-content:start}.hero-copy{max-width:760px;padding-left:clamp(10px,2vw,28px)!important}.hero-copy h1{font-size:clamp(48px,5.4vw,78px)!important;line-height:1.02!important;font-weight:700!important;letter-spacing:-.045em;color:#fff!important}.hero-copy h1 span{color:#F97316!important}.hero-lead{color:rgba(255,255,255,.88)!important;font-size:18px!important;max-width:680px}.hero .eyebrow{color:#fff!important;border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.1)!important}.hero-panel{display:none!important}.hero-actions{display:flex!important;flex-wrap:wrap;gap:12px}.hero-actions .btn{min-height:52px}
.quick-strip{position:relative;z-index:5;margin-top:-48px}.quick-strip-inner{background:#fff!important;border:1px solid #F0D7D7!important;box-shadow:0 24px 60px rgba(127,29,29,.13)!important}.quick-item{color:#261616!important}.quick-copy strong{color:#261616!important}.quick-copy small{color:#755F5F!important}

.inner-hero{min-height:430px;padding:165px 0 90px!important;background-size:cover!important;background-position:center!important;position:relative;color:#fff}.inner-hero::before{background:linear-gradient(90deg,rgba(4,50,36,.92),rgba(4,50,36,.68) 58%,rgba(4,50,36,.4))!important}.inner-hero .container{position:relative;z-index:2}.inner-hero h1{font-size:clamp(42px,4.7vw,66px)!important;line-height:1.06!important;font-weight:700!important;color:#fff!important;max-width:900px}.inner-hero p{color:rgba(255,255,255,.88)!important;max-width:720px}.breadcrumbs,.breadcrumbs a,.breadcrumbs span{color:rgba(255,255,255,.83)!important}
.inner-hero-profil{background-image:url('../images/lingkungan-desa.webp')!important}.inner-hero-pemerintahan{background-image:url('../images/struktur-pemerintah-desa.webp')!important}.inner-hero-data-desa{background-image:url('../images/lingkungan-desa.webp')!important}.inner-hero-potensi{background-image:url('../images/lapangan-desa.webp')!important}.inner-hero-pelayanan{background-image:url('../images/posyandu-ile-pati.webp')!important}.inner-hero-transparansi{background-image:url('../images/lingkungan-desa.webp')!important}.inner-hero-berita{background-image:url('../images/lingkungan-desa.webp')!important}.inner-hero-galeri{background-image:url('../images/lapangan-desa.webp')!important}.inner-hero-kontak{background-image:url('../images/posyandu-ile-pati.webp')!important}

/* Explicit contrast fixes: never white text on white cards */
.section:not(.green):not(.dark) .section-title,.section:not(.green):not(.dark) h2,.section:not(.green):not(.dark) h3,.section:not(.green):not(.dark) strong{color:#261616}
.section:not(.green):not(.dark) p,.section:not(.green):not(.dark) small,.section:not(.green):not(.dark) li,.section:not(.green):not(.dark) .section-text{color:#6B5555}
.card,.service-card,.news-card,.official-card,.facility-card,.hamlet-card,.education-item,.contact-info-card,.contact-form,.data-card,.stat-card,.budget-kpi,.budget-panel,.institution-card{background:#fff!important;color:#261616!important}
.card h3,.service-card h3,.news-card h3,.official-card h3,.facility-card h3,.hamlet-card h3,.education-item h3,.contact-form h2,.data-card h3,.budget-kpi strong,.institution-card h3{color:#261616!important}
.card p,.service-card p,.news-card p,.official-card p,.facility-card p,.hamlet-card p,.education-item p,.data-card p,.institution-card p{color:#725B5B!important}
.green,.dark,.cta-section{color:#fff}.green h2,.green h3,.green strong,.green p,.green .section-title,.green .section-text,.dark h2,.dark h3,.dark p,.dark strong{color:#fff!important}

.site-footer{position:relative;background-image:linear-gradient(rgba(5,37,28,.94),rgba(5,37,28,.97)),url('../images/lingkungan-desa.webp')!important;background-size:cover!important;background-position:center!important;color:#fff!important}.site-footer *{color:#fff!important}.site-footer p,.site-footer span,.site-footer a,.site-footer small{color:rgba(255,255,255,.92)!important}.footer-logo img{width:240px;height:auto}.footer-social{display:none!important}.footer-main{padding-top:82px!important}.footer-bottom{border-top-color:rgba(255,255,255,.17)!important}.footer-contact-line svg{color:#F97316!important}

/* News cards are real links */
.news-card-link{display:block;height:100%;color:inherit}.news-card-link .news-card{height:100%;transition:transform .3s ease,box-shadow .3s ease}.news-card-link:hover .news-card{transform:translateY(-7px);box-shadow:0 24px 55px rgba(127,29,29,.14)}.news-read-more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:#B91C1C!important;font-weight:800;font-size:13px}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:46px;align-items:start}.article-main{background:#fff;border-radius:30px;padding:clamp(24px,4vw,55px);box-shadow:0 20px 55px rgba(127,29,29,.09)}.article-main img{width:100%;max-height:620px;object-fit:cover;border-radius:24px;margin-bottom:32px}.article-meta{display:flex;flex-wrap:wrap;gap:10px 22px;color:#8B6A6A;font-size:13px;font-weight:700;margin-bottom:20px}.article-main h1{font-size:clamp(34px,4vw,56px);line-height:1.08;color:#261616;margin-bottom:22px}.article-main h2{font-size:28px;margin:34px 0 12px;color:#261616}.article-main p,.article-main li{font-size:17px;line-height:1.8;color:#6B5555}.article-main ul{list-style:disc;padding-left:22px;margin:15px 0}.article-main blockquote{margin:30px 0;padding:22px 26px;border-left:5px solid #F97316;background:#FFF1F2;border-radius:0 18px 18px 0;color:#6B2222;font-weight:700}.article-sidebar{position:sticky;top:120px;display:grid;gap:18px}.sidebar-card{background:#fff;border:1px solid #F0D7D7;border-radius:24px;padding:24px}.sidebar-card h3{margin-bottom:14px}.sidebar-card a{display:block;padding:12px 0;border-bottom:1px solid #F6E5E5;color:#6B3333!important;font-weight:700}.sidebar-card a:last-child{border:0}

/* WA widget */
.wa-widget{position:fixed;right:22px;bottom:22px;z-index:1500}.wa-button{width:64px;height:64px;border:0;border-radius:50%;background:#25D366;box-shadow:0 14px 35px rgba(37,211,102,.38);display:grid;place-items:center;cursor:pointer;animation:waPulse 2.5s infinite}.wa-button img{width:34px;height:34px}.wa-button::before,.wa-button::after{content:"";position:absolute;inset:-7px;border:2px solid rgba(37,211,102,.38);border-radius:50%;animation:waRing 2.5s infinite}.wa-button::after{animation-delay:1.2s}.wa-chat{position:absolute;right:0;bottom:80px;width:min(360px,calc(100vw - 32px));background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 28px 75px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:bottom right;transition:.28s}.wa-widget.open .wa-chat{opacity:1;visibility:visible;transform:none}.wa-chat-head{background:#075E54;color:#fff;padding:18px;display:flex;align-items:center;gap:12px}.wa-avatar{width:45px;height:45px;border-radius:50%;background:#25D366;display:grid;place-items:center}.wa-avatar img{width:25px}.wa-chat-head strong,.wa-chat-head small{display:block;color:#fff!important}.wa-chat-close{margin-left:auto;border:0;background:transparent;color:#fff;cursor:pointer}.wa-chat-body{padding:20px;background:#E5DDD5;background-image:radial-gradient(rgba(7,94,84,.07) 1px,transparent 1px);background-size:16px 16px}.wa-message{max-width:88%;padding:12px 14px;border-radius:4px 14px 14px 14px;background:#fff;color:#23352E;font-size:14px;line-height:1.55;box-shadow:0 3px 8px rgba(0,0,0,.07)}.wa-chat-form{display:flex;gap:8px;padding:12px;background:#F7F8F8}.wa-chat-form input{flex:1;min-width:0;border:1px solid #D9E6DF;border-radius:999px;padding:12px 15px;outline:none;color:#261616;background:#fff}.wa-chat-form button{width:46px;height:46px;border:0;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;cursor:pointer}@keyframes waPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes waRing{0%{transform:scale(.85);opacity:0}35%{opacity:1}100%{transform:scale(1.35);opacity:0}}

/* Slow preloader */
.preloader{position:fixed;inset:0;z-index:3000;background:#FFF7F7;display:grid;place-items:center;transition:opacity .7s ease,visibility .7s ease}.preloader.hidden{opacity:0;visibility:hidden;pointer-events:none}.preloader-inner{text-align:center}.preloader-logo{width:118px;height:auto;margin:0 auto 22px}.preloader-ring{width:52px;height:52px;margin:auto;border:4px solid #F3CACA;border-top-color:#B91C1C;border-radius:50%;animation:preloadSpin 1.9s linear infinite}.preloader-text{margin-top:14px;color:#7F1D1D;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}@keyframes preloadSpin{to{transform:rotate(360deg)}}

/* Added content blocks */
.structure-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.structure-card{background:#fff;border-radius:28px;padding:18px;border:1px solid #F0D7D7;box-shadow:0 16px 42px rgba(127,29,29,.08)}.structure-card img{width:100%;height:430px;object-fit:contain;border-radius:18px;background:#FFF7F7}.structure-card h3{margin:18px 5px 5px}.bpd-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.bpd-person{padding:18px;border-radius:18px;background:#FFF1F2}.bpd-person strong{display:block;color:#261616}.bpd-person span{color:#8F6A6A;font-size:13px}.download-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

@media(max-width:1080px){.desktop-nav{display:none}.header-contact{display:none}.menu-toggle{display:flex}.header-shell{padding-right:10px}.site-logo{min-width:0;max-width:230px}.article-layout{grid-template-columns:1fr}.article-sidebar{position:static}.structure-grid{grid-template-columns:1fr}}
@media(max-width:720px){
  .site-header{top:10px;padding:0 10px}.header-shell{height:64px;padding:0 8px 0 12px;border-radius:22px;gap:8px}.site-logo{height:49px;max-width:190px;flex:1}.site-logo img{width:185px}.menu-toggle{display:flex!important;width:44px;height:44px;flex-basis:44px;margin-left:auto!important;right:auto!important;top:auto!important}
  .hero{min-height:700px;padding:145px 0 105px;background-position:58% center!important}.hero-copy{padding-left:0!important;max-width:none}.hero-copy h1{font-size:clamp(38px,11vw,50px)!important;line-height:1.07!important;font-weight:650!important;letter-spacing:-.035em}.hero-lead{font-size:15px!important;line-height:1.7!important}.hero-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%;gap:9px}.hero-actions .btn{min-width:0!important;padding:0 12px!important;font-size:11px!important;justify-content:center}.hero .eyebrow{font-size:10px!important}
  .quick-strip{margin-top:-42px}.quick-strip-inner{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:10px!important;border-radius:22px!important;gap:0!important}.quick-item{min-width:0!important;padding:13px 8px!important;gap:8px!important;border-right:1px solid #F3DEDE!important;border-bottom:1px solid #F3DEDE!important}.quick-item:nth-child(2n){border-right:0!important}.quick-item:nth-child(n+3){border-bottom:0!important}.quick-icon{width:34px!important;height:34px!important;flex:0 0 34px!important}.quick-copy{min-width:0}.quick-copy strong{font-size:10px!important;white-space:nowrap}.quick-copy small{font-size:8px!important;line-height:1.25!important;display:block}.quick-copy small{white-space:normal}
  .inner-hero{min-height:350px;padding:135px 0 65px!important}.inner-hero h1{font-size:clamp(32px,9vw,43px)!important;line-height:1.1!important;font-weight:650!important}.inner-hero p{font-size:14px!important}.section-title{font-size:clamp(30px,8.7vw,39px)!important;line-height:1.13!important;font-weight:650!important}
  .footer-main{grid-template-columns:1fr!important;gap:34px!important}.footer-logo img{width:225px}.footer-bottom{display:grid!important;gap:12px!important}.footer-bottom-links{flex-wrap:wrap!important}
  .bpd-list{grid-template-columns:1fr}.structure-card img{height:auto}.article-main{border-radius:22px;padding:22px}.article-main h1{font-size:34px}.wa-widget{right:15px;bottom:15px}.wa-button{width:58px;height:58px}.wa-chat{bottom:72px}.gallery-item,.gallery-item:nth-child(n){grid-column:1/-1!important;min-height:300px!important}
}

/* Final header position correction after legacy CSS reset */
.site-header{
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  transform:none!important;
  inset:16px 0 auto 0!important;
}
.header-shell{width:100%!important}
.hero .container,.inner-hero .container{padding-left:clamp(28px,6vw,86px)!important;padding-right:clamp(28px,6vw,86px)!important}
@media(max-width:720px){
  .site-header{inset:10px 0 auto 0!important;width:auto!important;transform:none!important}
  .header-shell{width:100%!important;margin:0!important}
  .hero .container,.inner-hero .container{padding-left:20px!important;padding-right:20px!important}
  .hero-copy h1{font-size:clamp(36px,10.2vw,46px)!important;font-weight:600!important}
}


/* =========================================================
   FINAL CLIENT REVISION — 2026-07-28
   Image, hero spacing, mobile menu, contrast and grid fixes
   ========================================================= */

/* Home hero and every footer use the requested village environment photo. */
.hero{
  min-height:680px!important;
  padding:124px 0 82px!important;
  background-image:linear-gradient(90deg,rgba(5,42,31,.88) 0%,rgba(5,42,31,.70) 48%,rgba(5,42,31,.28) 100%),url('../images/lingkungan-desa.webp')!important;
  background-position:center!important;
}
.hero::after{background:linear-gradient(180deg,transparent 72%,rgba(5,42,31,.22))!important}
.hero-inner{align-items:center!important}
.hero-copy{padding-left:0!important}

.site-footer{
  background-image:linear-gradient(110deg,rgba(5,37,28,.78),rgba(5,37,28,.84)),url('../images/lingkungan-desa.webp')!important;
  background-position:center!important;
}
.site-footer::before{background:linear-gradient(90deg,rgba(5,37,28,.12),rgba(163,230,53,.05))!important}
.site-footer p,.site-footer span,.site-footer a,.site-footer small{color:#fff!important}

/* Mobile navigation must cover the floating header completely. */
body.menu-open{overflow:hidden!important}
.mobile-nav{z-index:2600!important}
.mobile-nav-backdrop{background:rgba(4,31,23,.72)!important;backdrop-filter:blur(5px)}
.mobile-nav-panel{z-index:2!important;padding-top:92px!important}
.mobile-nav-close{z-index:3!important;top:20px!important;right:20px!important;box-shadow:0 10px 30px rgba(127,29,29,.14)}

/* Featured potential cards: high-contrast white copy and no index box. */
.image-card-content,.image-card-content h3,.image-card-content p,.image-card-content strong,.image-card-content span{color:#fff!important}
.image-card-content h3{font-weight:700!important;text-shadow:0 2px 14px rgba(0,0,0,.28)}
.image-card-content p{color:rgba(255,255,255,.9)!important;text-shadow:0 2px 12px rgba(0,0,0,.24)}
.image-card-index{display:none!important}
.image-card::after{background:linear-gradient(to top,rgba(5,31,23,.96) 0%,rgba(5,31,23,.62) 45%,rgba(5,31,23,.08) 82%)!important}

/* Home transparency section now has a photo with a transparent green overlay. */
body[data-page="beranda"] .section.green{
  background-image:linear-gradient(115deg,rgba(4,67,48,.91),rgba(4,120,87,.78)),url('../images/lingkungan-desa.webp')!important;
  background-size:cover!important;
  background-position:center!important;
  background-attachment:scroll!important;
}
body[data-page="beranda"] .section.green::before{background:radial-gradient(circle at 88% 10%,rgba(163,230,53,.20),transparent 45%)!important}
body[data-page="beranda"] .section.green .kicker,
body[data-page="beranda"] .section.green .section-title,
body[data-page="beranda"] .section.green .section-text,
body[data-page="beranda"] .section.green .budget-summary,
body[data-page="beranda"] .section.green .budget-summary *{color:#fff!important}
body[data-page="beranda"] .section.green .budget-summary{background:rgba(5,42,31,.48)!important;border-color:rgba(255,255,255,.22)!important;backdrop-filter:blur(9px)}

/* Explicit contrast fixes for population cards and profile summary. */
.stat-card.large,.stat-card.large *{color:#fff!important}
.stat-card.large .stat-label,.stat-card.large small{color:rgba(255,255,255,.78)!important}
.stat-card.yellow,.stat-card.yellow *{color:#fff!important}
.stat-card.yellow .stat-label,.stat-card.yellow small{color:rgba(255,255,255,.86)!important}
.gender-ring-copy,.gender-ring-copy strong,.gender-ring-copy span{color:#fff!important}
.gender-ring::after{background:#261616!important}

.side-card,.side-card h3,.side-card p,.side-card strong,.side-card span{color:#fff!important}
.side-card p{color:rgba(255,255,255,.8)!important}
.side-card .fact-item{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.12)!important}
.side-card .fact-item svg{color:#F97316!important}
.side-card .fact-item span{color:rgba(255,255,255,.82)!important}
.side-card .fact-item strong{color:#fff!important}

/* Restore readable text throughout the home page after legacy global rules. */
body[data-page="beranda"] .stat-card:not(.large):not(.yellow) .stat-label,
body[data-page="beranda"] .stat-card:not(.large):not(.yellow) .stat-value,
body[data-page="beranda"] .stat-card:not(.large):not(.yellow) strong{color:#261616!important}
body[data-page="beranda"] .stat-card:not(.large):not(.yellow) small{color:#725B5B!important}
body[data-page="beranda"] .about-copy .section-title,
body[data-page="beranda"] .about-copy .feature-item strong{color:#261616!important}
body[data-page="beranda"] .about-copy .section-text,
body[data-page="beranda"] .about-copy .feature-item p{color:#6B5555!important}

/* Equal-sized gallery grid; no masonry spans. */
.gallery-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
.gallery-item,.gallery-item:nth-child(n){
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%!important;
  min-height:0!important;
  aspect-ratio:4/3!important;
}
.gallery-item img{width:100%!important;height:100%!important;object-fit:cover!important}

/* Contact icons: stable sizing, centering and SVG visibility. */
.contact-item{align-items:flex-start!important;gap:14px!important}
.contact-item-icon{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  display:inline-grid!important;
  place-items:center!important;
  border-radius:13px!important;
  color:#B91C1C!important;
  background:#FEE2E2!important;
  border:1px solid #F5C2C2!important;
  line-height:1!important;
}
.contact-item-icon svg{display:block!important;width:21px!important;height:21px!important;stroke:currentColor!important;stroke-width:2!important}
.contact-item>div{min-width:0!important}
.contact-item strong{display:block!important;color:#261616!important}
.contact-item>div>span{display:block!important;color:#6B5555!important;line-height:1.65!important}

/* Defensive visibility fixes for white cards and dark/photo blocks. */
.contact-card,.prose-card,.data-panel,.chart-card,.budget-kpi,.service-list-card,.news-card,.potential-card{color:#261616!important}
.contact-card h1,.contact-card h2,.contact-card h3,.prose-card h2,.prose-card h3,.data-panel h3,.chart-card h3,.budget-kpi strong,.service-list-card h3,.news-card h3,.potential-card h3{color:#261616!important}
.contact-card p,.prose-card p,.data-panel p,.chart-card p,.budget-kpi span,.service-list-card p,.news-card p,.potential-card p{color:#6B5555!important}
.map-card,.map-card *{color:#fff!important}

@media(max-width:900px){
  .hero{min-height:620px!important;padding:108px 0 72px!important}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:720px){
  .hero{min-height:570px!important;padding:92px 0 66px!important;background-position:57% center!important}
  .hero .container{padding-left:20px!important;padding-right:20px!important}
  .hero-copy{padding-top:12px!important}
  .mobile-nav-panel{width:100%!important;max-width:none!important;padding:86px 20px 28px!important}
  .mobile-nav-close{top:17px!important;right:17px!important;width:48px!important;height:48px!important}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .gallery-item,.gallery-item:nth-child(n){aspect-ratio:1/1!important;min-height:0!important}
  .site-footer{background-position:62% center!important}
}

@media(max-width:420px){
  .hero{min-height:545px!important;padding:88px 0 60px!important}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* Reduce top spacing on internal page heroes as requested. */
.inner-hero{min-height:390px!important;padding:132px 0 70px!important}
@media(max-width:720px){
  .inner-hero{min-height:315px!important;padding:106px 0 52px!important}
}

/* =========================================================
   FINAL FOCUSED REVISION — visibility, home hero image, copy
   ========================================================= */

/* Use exactly the same image shown as the main photo in the home About section. */
body[data-page="beranda"] .hero{
  background:#0A1711!important;
}
body[data-page="beranda"] .hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  transform:none!important;
  background:
    linear-gradient(105deg,rgba(6,46,34,.90) 0%,rgba(6,46,34,.76) 48%,rgba(6,46,34,.34) 100%),
    url('../images/lingkungan-desa.webp') center/cover no-repeat!important;
  filter:saturate(.96) contrast(1.03)!important;
}
body[data-page="beranda"] .hero::after{
  z-index:1!important;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(180deg,transparent 72%,rgba(5,42,31,.22))!important;
  background-size:64px 64px,64px 64px,100% 100%!important;
}
body[data-page="beranda"] .hero-inner{z-index:2!important;}

/* Match the exact gradient used by the primary hero button. */
body[data-page="beranda"] .hero h1 span{
  display:inline-block!important;
  color:transparent!important;
  background:var(--grad)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}

/* The first and third cards in “Desa dalam angka” must stay readable. */
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(1),
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(3){
  opacity:1!important;
  visibility:visible!important;
}
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(1) .stat-label,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(1) .stat-value,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(1) .counter,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(1) small,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(1) .gender-ring-copy,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(1) .gender-ring-copy strong,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(1) .gender-ring-copy span,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(3) .stat-label,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(3) .stat-value,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(3) .counter,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(3) small{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
}
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(1) .stat-label,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(1) small,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(3) .stat-label,
body[data-page="beranda"] .stats-bento > .stat-card:nth-child(3) small{
  color:rgba(255,255,255,.88)!important;
  -webkit-text-fill-color:rgba(255,255,255,.88)!important;
}


/* =========================================================
   CLIENT REVISION — RED THEME, MARQUEE, PHOTO OFFICIALS
   ========================================================= */
:root{
  --red-950:#450A0A;
  --red-900:#7F1D1D;
  --red-800:#991B1B;
  --red-700:#B91C1C;
  --red-600:#DC2626;
  --red-500:#EF4444;
  --red-100:#FEE2E2;
  --red-50:#FFF1F2;
  --grad:linear-gradient(95deg,#991B1B 0%,#DC2626 54%,#F97316 100%);
  --grad-soft:linear-gradient(135deg,rgba(220,38,38,.14),rgba(249,115,22,.12));
  --green-950:var(--red-950);
  --green-900:var(--red-900);
  --green-800:var(--red-800);
  --green-700:var(--red-700);
  --green-600:var(--red-600);
  --green-500:var(--red-500);
  --green-100:var(--red-100);
  --green-50:var(--red-50);
  --cream:#FFF7F7;
  --cream-deep:#FDE8E8;
  --sand:#F1D0D0;
  --ink:#261616;
  --ink-soft:#6B5555;
  --line:#F0D7D7;
}
body{background:#FFF8F8;color:#261616}
::selection{background:#DC2626;color:#fff}

/* Welcome running strip above the square-corner header. */
.welcome-marquee{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1250;
  height:34px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:linear-gradient(90deg,#7F1D1D,#DC2626 55%,#B91C1C);
  color:#fff;
  box-shadow:0 4px 18px rgba(69,10,10,.18);
}
.welcome-marquee-track{
  width:max-content;
  min-width:200%;
  display:flex;
  align-items:center;
  gap:90px;
  white-space:nowrap;
  animation:welcomeMarquee 24s linear infinite;
  will-change:transform;
}
.welcome-marquee-track span{
  display:inline-block;
  color:#fff!important;
  font-size:12px;
  font-weight:750;
  letter-spacing:.015em;
}
@keyframes welcomeMarquee{to{transform:translateX(-50%)}}

.site-header{
  inset:34px 0 auto 0!important;
  top:34px!important;
  padding:0!important;
}
.header-shell{
  max-width:none!important;
  height:76px!important;
  border:0!important;
  border-radius:0!important;
  padding:0 max(24px,calc((100vw - 1280px)/2 + 18px))!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 12px 32px rgba(69,10,10,.11)!important;
}
.site-header.scrolled .header-shell{
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 15px 38px rgba(69,10,10,.15)!important;
}
.desktop-nav a{color:#4D2929!important}
.desktop-nav a:hover,.desktop-nav a.active{background:#FEE2E2!important;color:#B91C1C!important}
.header-contact{background:var(--grad)!important;box-shadow:0 10px 25px rgba(185,28,28,.24)!important}
.menu-toggle{background:#B91C1C!important}
.mobile-nav-panel nav a{background:#FFF1F2!important;color:#4D2929!important}
.mobile-nav-panel nav a.active{background:#B91C1C!important;color:#fff!important}
.mobile-nav-close{background:#FEE2E2!important;color:#B91C1C!important}
.mobile-nav-backdrop{background:rgba(0,0,0,.72)!important}

/* Main buttons and UI accents follow the red theme. */
.btn-primary,.btn-green,.header-contact,.tab-btn.active{background:var(--grad)!important;color:#fff!important}
.btn-light{color:#991B1B!important}
.kicker,.news-meta,.service-arrow,.news-read-more{color:#B91C1C!important}
.quick-icon,.quick-icon.yellow,.service-icon,.service-icon.yellow,.service-list-icon,.avatar,.contact-item-icon,.stat-icon{
  color:#B91C1C!important;
  background:#FEE2E2!important;
}
.back-to-top{background:#7F1D1D!important}
.preloader{background:#FFF7F7!important}
.preloader-ring{border-color:#F3CACA!important;border-top-color:#B91C1C!important}
.preloader-text{color:#7F1D1D!important}

/* Every photographic overlay that was green is now neutral black. */
.hero{
  padding-top:150px!important;
  background:#111!important;
}
body[data-page="beranda"] .hero::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.64) 52%,rgba(0,0,0,.45) 100%),
    url('../images/lingkungan-desa.webp') center/cover no-repeat!important;
  filter:saturate(.93) contrast(1.04)!important;
}
body[data-page="beranda"] .hero::after{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(180deg,transparent 70%,rgba(0,0,0,.46))!important;
}
.inner-hero{padding-top:154px!important}
.inner-hero::before{
  background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.64) 58%,rgba(0,0,0,.45))!important;
}
.inner-hero::after{border-color:rgba(255,255,255,.07)!important}
.image-card::after,.potential-card::after{
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.60) 47%,rgba(0,0,0,.10) 82%)!important;
}
body[data-page="beranda"] .section.green{
  background-image:linear-gradient(115deg,rgba(0,0,0,.84),rgba(0,0,0,.67)),url('../images/lingkungan-desa.webp')!important;
}
body[data-page="beranda"] .section.green::before{background:radial-gradient(circle at 88% 10%,rgba(255,255,255,.10),transparent 45%)!important}
.site-footer{
  background-image:linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.78)),url('../images/lingkungan-desa.webp')!important;
}
.site-footer::before{background:radial-gradient(circle at 78% 20%,rgba(220,38,38,.14),transparent 38%)!important}
.footer-contact-line svg{color:#FCA5A5!important}

/* Desktop hero copy centered as requested. */
@media(min-width:901px){
  body[data-page="beranda"] .hero-inner{
    grid-template-columns:minmax(0,900px)!important;
    justify-content:center!important;
  }
  body[data-page="beranda"] .hero-copy{
    max-width:900px!important;
    margin-inline:auto!important;
    padding-left:0!important;
    text-align:center!important;
  }
  body[data-page="beranda"] .hero .eyebrow{display:inline-flex!important}
  body[data-page="beranda"] .hero-lead{margin-left:auto!important;margin-right:auto!important}
  body[data-page="beranda"] .hero-actions{justify-content:center!important}
}

/* Fix invisible data cards on both home and Data Desa pages. */
.stat-card.large{
  background:linear-gradient(145deg,#7F1D1D,#B91C1C)!important;
  border-color:transparent!important;
  color:#fff!important;
}
.stat-card.large *{color:#fff!important;-webkit-text-fill-color:currentColor!important}
.stat-card.large .stat-label,.stat-card.large small{color:rgba(255,255,255,.84)!important}
.stat-card.yellow{
  background:var(--grad)!important;
  border-color:transparent!important;
  color:#fff!important;
}
.stat-card.yellow *{color:#fff!important;-webkit-text-fill-color:currentColor!important}
.stat-card.yellow .stat-label,.stat-card.yellow small{color:rgba(255,255,255,.88)!important}
.gender-ring{
  background:conic-gradient(#F97316 0 50.4%,#EF4444 50.4% 100%)!important;
}
.gender-ring::before,.gender-ring::after{background:#450A0A!important}
.gender-ring-copy,.gender-ring-copy *{color:#fff!important;-webkit-text-fill-color:#fff!important}

/* Red running section for village officials, separated by neutral sections. */
.officials-marquee-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(125deg,#7F1D1D 0%,#B91C1C 55%,#DC2626 100%)!important;
  color:#fff;
}
.officials-marquee-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.12),transparent 28%),
    radial-gradient(circle at 85% 75%,rgba(249,115,22,.20),transparent 32%);
}
.officials-marquee-section>.container,.officials-marquee{position:relative;z-index:1}
.officials-heading .kicker,.officials-heading .section-title,.officials-heading .section-text{color:#fff!important}
.officials-heading .section-text{color:rgba(255,255,255,.82)!important}
.officials-marquee{
  width:100%;
  overflow:hidden;
  padding:12px 0 30px;
}
.officials-marquee-track{
  width:max-content;
  display:flex;
  gap:18px;
  padding-left:18px;
  animation:officialsRun 48s linear infinite;
  will-change:transform;
}
.officials-marquee:hover .officials-marquee-track{animation-play-state:paused}
@keyframes officialsRun{to{transform:translateX(-50%)}}
.official-marquee-card{
  width:230px;
  flex:0 0 230px;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  color:#261616;
  box-shadow:0 20px 45px rgba(69,10,10,.20);
}
.official-marquee-photo{height:255px;background:#FDE8E8;overflow:hidden}
.official-marquee-photo img{width:100%;height:100%;object-fit:cover}
.official-marquee-copy{padding:18px 18px 20px;text-align:center}
.official-marquee-copy h3{margin:0;color:#331919!important;font-size:17px;font-weight:750;line-height:1.25}
.official-marquee-copy p{margin:6px 0 0;color:#B91C1C!important;font-size:12px;font-weight:750}
.officials-marquee-action{position:relative;z-index:1;text-align:center;margin-top:28px}

/* Image-based government and BPD cards. */
.leader-visual{background:#7F1D1D!important}
.leader-photo{width:100%;height:100%;object-fit:cover}
.photo-avatar{
  width:100%!important;
  height:220px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  padding:0!important;
  background:#FDE8E8!important;
}
.photo-avatar img{width:100%;height:100%;object-fit:cover}
.person-card{overflow:hidden}
.person-card h3{margin-top:16px!important}
.bpd-list{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.bpd-person-photo{padding:12px 12px 18px!important;background:#fff!important;border:1px solid #F0D7D7!important;box-shadow:0 12px 28px rgba(127,29,29,.08);text-align:center}
.bpd-photo{height:210px;margin-bottom:15px;border-radius:15px;overflow:hidden;background:#FDE8E8}
.bpd-photo img{width:100%;height:100%;object-fit:cover}
.bpd-person-photo strong{color:#331919!important}
.bpd-person-photo span{color:#B91C1C!important;font-weight:700}

/* Potensi page: card headings and copy remain white over photos. */
body[data-page="potensi"] .potential-card,
body[data-page="potensi"] .potential-card-body,
body[data-page="potensi"] .potential-card h3,
body[data-page="potensi"] .potential-card p,
body[data-page="potensi"] .potential-card span{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
body[data-page="potensi"] .potential-card p{color:rgba(255,255,255,.88)!important}
body[data-page="potensi"] .potential-tag{background:rgba(220,38,38,.88)!important;color:#fff!important}

/* Update neutral borders and shadows away from green tint. */
.quick-strip-inner,.structure-card,.sidebar-card,.contact-card,.prose-card,.data-panel,.chart-card{
  border-color:#F0D7D7!important;
  box-shadow:0 18px 45px rgba(127,29,29,.08)!important;
}
.quick-item:hover{background:#FFF1F2!important}
.contact-item-icon{color:#B91C1C!important;background:#FEE2E2!important;border-color:#F5C2C2!important}
.news-card-link:hover .news-card{box-shadow:0 24px 55px rgba(127,29,29,.14)!important}

@media(max-width:1080px){
  .header-shell{padding:0 14px!important}
}
@media(max-width:720px){
  .welcome-marquee{height:32px}
  .welcome-marquee-track{gap:55px;animation-duration:20s}
  .welcome-marquee-track span{font-size:10px}
  .site-header{inset:32px 0 auto 0!important;top:32px!important}
  .header-shell{
    height:64px!important;
    border-radius:0!important;
    padding:0 10px 0 12px!important;
  }
  .hero{padding-top:125px!important}
  .inner-hero{padding-top:126px!important}
  .official-marquee-card{width:190px;flex-basis:190px}
  .official-marquee-photo{height:220px}
  .people-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .photo-avatar{height:190px!important}
  .bpd-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .bpd-photo{height:190px}
}
@media(max-width:440px){
  .people-grid,.bpd-list{grid-template-columns:1fr!important}
  .photo-avatar,.bpd-photo{height:270px!important}
}

/* =========================================================
   FINAL SOLID RED + JSON ADMIN REVISION — 2026-07-31
   One stable override layer intentionally placed last.
   ========================================================= */
:root{
  --brand-red:#C62828;
  --brand-red-rgb:198,40,40;
  --terracotta:var(--brand-red)!important;
  --terracotta-deep:var(--brand-red)!important;
  --terracotta-light:#FFCDD2!important;
  --moss:var(--brand-red)!important;
  --moss-soft:var(--brand-red)!important;
  --green-950:#2B1717!important;
  --green-900:var(--brand-red)!important;
  --green-800:var(--brand-red)!important;
  --green-700:var(--brand-red)!important;
  --green-600:var(--brand-red)!important;
  --green-500:var(--brand-red)!important;
  --grad:var(--brand-red)!important;
  --grad-soft:rgba(var(--brand-red-rgb),.10)!important;
}
html,body{width:100%;max-width:100%;overflow-x:clip!important}
body{position:relative}
main,.page,.section,.container,.header-shell,.footer-main,.contact-grid,.about-grid,.content-grid,.stats-bento,.cards-3,.services-grid,.people-grid,.potential-grid,.news-grid,.data-panels,.mission-grid{min-width:0}
img,svg,video,iframe{max-width:100%}

/* Solid red system: no red gradient. */
.welcome-marquee,
.header-contact,.btn-primary,.btn-green,.tab-btn.active,
.mobile-nav-panel nav a.active,.menu-toggle,.back-to-top,
.officials-marquee-section,.stat-card.large,.stat-card.yellow,
.section.green,.progress span,.chart-track span,.mini-chart span,
.potential-tag,.social-btn:hover{background:var(--brand-red)!important;background-image:none!important}
.header-contact,.btn-primary,.btn-green,.tab-btn.active,.menu-toggle{box-shadow:0 12px 28px rgba(var(--brand-red-rgb),.22)!important}
.welcome-marquee{border:0!important;color:#fff!important}
.welcome-marquee::before,.welcome-marquee::after,.officials-marquee-section::before,.section.green::before{display:none!important}
.hero h1 span{color:#FFB74D!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.site-footer::after{background:#fff!important;opacity:.2}

/* Header and hamburger remain white-on-red after scrolling. */
.site-header.scrolled .menu-toggle,.site-header.inner-active .menu-toggle,
.site-header .menu-toggle{background:var(--brand-red)!important;color:#fff!important;border-color:var(--brand-red)!important}
.site-header.scrolled .menu-toggle svg,.site-header.inner-active .menu-toggle svg,.menu-toggle svg{color:#fff!important;stroke:#fff!important}

/* Animated home hero slider. */
body[data-page="beranda"] .hero{
  position:relative!important;
  min-height:650px!important;
  padding:132px 0 82px!important;
  background:#151515!important;
  overflow:hidden!important;
  isolation:isolate;
}
body[data-page="beranda"] .hero::before,body[data-page="beranda"] .hero::after{display:none!important}
.hero-slides{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-slide{position:absolute;inset:-2%;opacity:0;transform:scale(1.07);background-position:center;background-size:cover;background-repeat:no-repeat;transition:opacity 1.15s ease,transform 7s ease;will-change:opacity,transform}
.hero-slide::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-dots{position:absolute;z-index:5;left:50%;bottom:30px;display:flex;gap:8px;transform:translateX(-50%)}
.hero-dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.42);cursor:pointer;transition:.3s ease}
.hero-dot.active{width:30px;background:#fff}
.hero-copy.slide-copy-in{animation:heroCopyIn .72s cubic-bezier(.16,1,.3,1)}
@keyframes heroCopyIn{from{opacity:.25;transform:translateY(18px)}to{opacity:1;transform:none}}
body[data-page="beranda"] .hero-grid-pattern,body[data-page="beranda"] .hero-orbit{display:none!important}

/* Button requested in Perangkat Desa section. */
.officials-marquee-section .btn-light{background:#fff!important;color:var(--brand-red)!important;border-color:#fff!important;box-shadow:0 14px 34px rgba(0,0,0,.15)!important}
.officials-marquee-section .btn-light:hover{background:#FFF3F3!important;color:#9E1F1F!important}

/* Solid red footer. */
.site-footer{background:var(--brand-red)!important;background-image:none!important;color:#fff!important}
.site-footer::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1px)!important;background-size:24px 24px!important;opacity:.23!important;pointer-events:none!important}
.site-footer p,.site-footer span,.site-footer a,.site-footer small{color:rgba(255,255,255,.92)!important}
.footer-col h3,.footer-contact-line svg{color:#fff!important}

/* Maps card text visibility. */
.map-card{background:var(--brand-red)!important;background-image:none!important;color:#fff!important}
.map-card::before{display:none!important}
.map-card-content{position:relative;z-index:2}
.map-card-content h3,.map-card-content p,.map-card-content span,.map-card-content strong{color:#fff!important;-webkit-text-fill-color:#fff!important}
.map-card-content p{color:rgba(255,255,255,.88)!important}
.map-card-content .btn-primary{background:#fff!important;color:var(--brand-red)!important;border-color:#fff!important}
.map-card-content .btn-primary svg{stroke:var(--brand-red)!important}
.map-pin{background:#fff!important;color:var(--brand-red)!important}

/* Premium preloader. */
.preloader{background:#FFF9F9!important;transition:opacity .72s ease,visibility .72s ease!important}
.premium-loader{width:min(86vw,410px);display:grid;justify-items:center;text-align:center}
.premium-loader-mark{position:relative;width:132px;height:132px;display:grid;place-items:center}
.premium-loader-mark::before{content:"";position:absolute;inset:22px;border-radius:30px;background:#fff;box-shadow:0 20px 55px rgba(var(--brand-red-rgb),.18)}
.premium-loader .preloader-logo{position:relative;z-index:3;width:72px;height:72px;object-fit:contain;margin:0!important}
.premium-loader-ring{position:absolute;inset:4px;border:1px solid rgba(var(--brand-red-rgb),.18);border-radius:50%}
.premium-loader-ring::after{content:"";position:absolute;top:-4px;left:50%;width:9px;height:9px;border-radius:50%;background:var(--brand-red);box-shadow:0 0 0 7px rgba(var(--brand-red-rgb),.10)}
.ring-one{animation:premiumSpin 2.4s linear infinite}
.ring-two{inset:14px;animation:premiumSpinReverse 3s linear infinite}
.premium-loader-copy{margin-top:22px;display:grid;gap:7px}
.premium-loader-copy strong{color:#441D1D;font-size:19px;letter-spacing:-.02em}
.premium-loader-copy span{color:#8D6666;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.premium-loader-line{width:210px;height:3px;margin-top:24px;overflow:hidden;border-radius:999px;background:#F1DADA}
.premium-loader-line span{display:block;width:45%;height:100%;border-radius:inherit;background:var(--brand-red);animation:premiumLoad 1.65s ease-in-out infinite}
@keyframes premiumSpin{to{transform:rotate(360deg)}}
@keyframes premiumSpinReverse{to{transform:rotate(-360deg)}}
@keyframes premiumLoad{0%{transform:translateX(-115%)}50%{transform:translateX(115%)}100%{transform:translateX(340%)}}

/* Dynamic cards and safe overflow. */
.officials-marquee-track{padding-right:18px}
.news-card,.person-card,.official-marquee-card,.gallery-item{min-width:0}
.article-content img{max-width:100%;height:auto}

@media(max-width:720px){
  html,body{overflow-x:hidden!important}
  .site-header,.header-shell,.mobile-nav,.mobile-nav-panel{max-width:100vw!important}
  .mobile-nav-panel{width:min(88vw,360px)!important}
  body[data-page="beranda"] .hero{
    min-height:540px!important;
    height:540px!important;
    padding:110px 0 62px!important;
    align-items:center!important;
  }
  body[data-page="beranda"] .hero-inner{height:100%;padding:0!important;display:flex!important;align-items:center!important}
  body[data-page="beranda"] .hero-copy{width:100%;padding:18px 0 8px!important}
  body[data-page="beranda"] .hero-copy h1{font-size:clamp(30px,9.1vw,39px)!important;line-height:1.08!important;letter-spacing:-.032em!important}
  body[data-page="beranda"] .hero-lead{margin-top:14px!important;font-size:13px!important;line-height:1.58!important;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  body[data-page="beranda"] .hero .eyebrow{margin-bottom:14px!important;font-size:8.5px!important;letter-spacing:.12em!important}
  body[data-page="beranda"] .hero-actions{margin-top:19px!important}
  body[data-page="beranda"] .hero-actions .btn{height:43px!important;min-height:43px!important}
  .hero-slide::after{background:rgba(0,0,0,.34)!important}
  .hero-dots{bottom:18px}
  .hero-dot{width:7px;height:7px}.hero-dot.active{width:23px}
  .quick-strip{margin-top:-24px!important}
  .officials-marquee-track{max-width:none!important}
  .map-card{min-height:330px!important}
  .map-card-content{padding:25px 20px!important}
  .map-card-content h3{font-size:24px!important}
  .footer-main>*{min-width:0}
}
@media(max-width:390px){
  body[data-page="beranda"] .hero{min-height:515px!important;height:515px!important}
  body[data-page="beranda"] .hero-copy h1{font-size:30px!important}
  body[data-page="beranda"] .hero-actions{grid-template-columns:1fr 1fr!important}
  body[data-page="beranda"] .hero-actions .btn{padding-inline:8px!important;font-size:10px!important}
  .quick-strip-inner{width:100%!important}
}
/* Strict solid-red cleanup: remove remaining decorative red gradients. */
.site-footer::before{display:none!important}
.vision-box,.leader-visual,.side-card,.drawer-panel{background:var(--brand-red)!important;background-image:none!important}