/* ===== fontawesome-subset.css ===== */
/* Font Awesome 6.5.1 SUBSET (self-hosted) - hanya ikon yang dipakai index.html.
   Font: SIL OFL 1.1, CSS: MIT (c) Fonticons, Inc. */
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/fa-solid-900.subset.woff2) format("woff2")}
@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fa-brands-400.subset.woff2) format("woff2")}
.fa,.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}
/* alias sintaks lama FA4/FA5 (fas/far/fab) supaya markup lama tetap tampil */
.fa,.fas,.far,.fa-solid,.fa-regular{font-family:"Font Awesome 6 Free";font-weight:900}
.fab,.fa-brands{font-family:"Font Awesome 6 Brands";font-weight:400}
.fa-arrow-right:before{content:"\f061"}.fa-location-dot:before{content:"\f3c5"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-check:before{content:"\f00c"}.fa-home:before{content:"\f015"}.fa-home-alt:before{content:"\f015"}.fa-home-lg-alt:before{content:"\f015"}.fa-house:before{content:"\f015"}.fa-chevron-down:before{content:"\f078"}.fa-solar-panel:before{content:"\f5ba"}.fa-graduation-cap:before{content:"\f19d"}.fa-mortar-board:before{content:"\f19d"}.fa-fire:before{content:"\f06d"}.fa-check-circle:before{content:"\f058"}.fa-circle-check:before{content:"\f058"}.fa-leaf:before{content:"\f06c"}.fa-layer-group:before{content:"\f5fd"}.fa-file-alt:before{content:"\f15c"}.fa-file-lines:before{content:"\f15c"}.fa-file-text:before{content:"\f15c"}.fa-city:before{content:"\f64f"}.fa-certificate:before{content:"\f0a3"}.fa-award:before{content:"\f559"}.fa-users:before{content:"\f0c0"}.fa-user-tie:before{content:"\f508"}.fa-tree:before{content:"\f1bb"}.fa-toolbox:before{content:"\f552"}.fa-star:before{content:"\f005"}.fa-plug-circle-bolt:before{content:"\e55b"}.fa-play:before{content:"\f04b"}.fa-phone:before{content:"\f095"}.fa-lock:before{content:"\f023"}.fa-hand-pointer:before{content:"\f25a"}.fa-eye:before{content:"\f06e"}.fa-envelope:before{content:"\f0e0"}.fa-ellipsis-v:before{content:"\f142"}.fa-ellipsis-vertical:before{content:"\f142"}.fa-clipboard-check:before{content:"\f46c"}.fa-calendar-day:before{content:"\f783"}.fa-bullseye:before{content:"\f140"}.fa-building:before{content:"\f1ad"}.fa-bolt:before{content:"\f0e7"}.fa-zap:before{content:"\f0e7"}.fa-battery:before{content:"\f240"}.fa-battery-5:before{content:"\f240"}.fa-battery-full:before{content:"\f240"}.fa-bars:before{content:"\f0c9"}.fa-navicon:before{content:"\f0c9"}.fa-ellipsis:before{content:"\f141"}.fa-ellipsis-h:before{content:"\f141"}.fa-close:before{content:"\f00d"}.fa-multiply:before{content:"\f00d"}.fa-remove:before{content:"\f00d"}.fa-times:before{content:"\f00d"}.fa-xmark:before{content:"\f00d"}.fa-coins:before{content:"\f51e"}.fa-comments:before{content:"\f086"}.fa-compass-drafting:before{content:"\f568"}.fa-drafting-compass:before{content:"\f568"}.fa-gauge-high:before{content:"\f625"}.fa-tachometer-alt:before{content:"\f625"}.fa-tachometer-alt-fast:before{content:"\f625"}.fa-cog:before{content:"\f013"}.fa-gear:before{content:"\f013"}.fa-house-circle-check:before{content:"\e509"}.fa-shield-alt:before{content:"\f3ed"}.fa-shield-halved:before{content:"\f3ed"}.fa-shield-heart:before{content:"\e574"}.fa-wrench:before{content:"\f0ad"}.fa-screwdriver-wrench:before{content:"\f7d9"}.fa-tools:before{content:"\f7d9"}.fa-chart-pie:before{content:"\f200"}.fa-pie-chart:before{content:"\f200"}.fa-user-shield:before{content:"\f505"}.fa-seedling:before{content:"\f4d8"}.fa-sprout:before{content:"\f4d8"}.fa-arrow-down:before{content:"\f063"}.fa-grip:before{content:"\f58d"}.fa-grip-horizontal:before{content:"\f58d"}.fa-industry:before{content:"\f275"}.fa-school:before{content:"\f549"}.fa-images:before{content:"\f302"}.fa-circle-info:before{content:"\f05a"}.fa-info-circle:before{content:"\f05a"}.fa-bed:before{content:"\f236"}.fa-book-open:before{content:"\f518"}.fa-briefcase:before{content:"\f0b1"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-days:before{content:"\f073"}.fa-camera:before{content:"\f030"}.fa-camera-alt:before{content:"\f030"}.fa-file-signature:before{content:"\f573"}.fa-hard-hat:before{content:"\f807"}.fa-hat-hard:before{content:"\f807"}.fa-helmet-safety:before{content:"\f807"}.fa-landmark:before{content:"\f66f"}.fa-medal:before{content:"\f5a2"}.fa-shirt:before{content:"\f553"}.fa-t-shirt:before{content:"\f553"}.fa-tshirt:before{content:"\f553"}.fa-user-cog:before{content:"\f4fe"}.fa-user-gear:before{content:"\f4fe"}.fa-user-graduate:before{content:"\f501"}.fa-cutlery:before{content:"\f2e7"}.fa-utensils:before{content:"\f2e7"}.fa-home-lg:before{content:"\e3af"}.fa-house-chimney:before{content:"\e3af"}.fa-bank:before{content:"\f19c"}.fa-building-columns:before{content:"\f19c"}.fa-institution:before{content:"\f19c"}.fa-museum:before{content:"\f19c"}.fa-university:before{content:"\f19c"}.fa-headset:before{content:"\f590"}.fa-store:before{content:"\f54e"}.fa-shipping-fast:before{content:"\f48b"}.fa-truck-fast:before{content:"\f48b"}.fa-building-shield:before{content:"\e4d8"}.fa-download:before{content:"\f019"}.fa-file-contract:before{content:"\f56c"}.fa-file-pdf:before{content:"\f1c1"}.fa-hashtag:before{content:"\23"}.fa-balance-scale:before{content:"\f24e"}.fa-scale-balanced:before{content:"\f24e"}.fa-external-link-alt:before{content:"\f35d"}.fa-up-right-from-square:before{content:"\f35d"}.fa-user:before{content:"\f007"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-microchip:before{content:"\f2db"}.fa-clock:before{content:"\f017"}.fa-clock-four:before{content:"\f017"}.fa-handshake:before{content:"\f2b5"}.fa-people-roof:before{content:"\e537"}.fa-calculator:before{content:"\f1ec"}.fa-earth-asia:before{content:"\f57e"}.fa-globe-asia:before{content:"\f57e"}.fa-lightbulb:before{content:"\f0eb"}.fa-plug-circle-xmark:before{content:"\e560"}.fa-snowflake:before{content:"\f2dc"}.fa-sun:before{content:"\f185"}.fa-temperature-2:before{content:"\f2c9"}.fa-temperature-half:before{content:"\f2c9"}.fa-thermometer-2:before{content:"\f2c9"}.fa-thermometer-half:before{content:"\f2c9"}.fa-exclamation-triangle:before{content:"\f071"}.fa-triangle-exclamation:before{content:"\f071"}.fa-warning:before{content:"\f071"}.fa-television:before{content:"\f26c"}.fa-tv:before{content:"\f26c"}.fa-tv-alt:before{content:"\f26c"}.fa-wallet:before{content:"\f555"}.fa-arrows-spin:before{content:"\e4bb"}.fa-id-badge:before{content:"\f2c1"}.fa-arrow-left:before{content:"\f060"}.fa-bookmark:before{content:"\f02e"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-xmark:before{content:"\f273"}.fa-circle-exclamation:before{content:"\f06a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-circle-question:before{content:"\f059"}.fa-question-circle:before{content:"\f059"}.fa-filter-circle-xmark:before{content:"\e17b"}.fa-folder-open:before{content:"\f07c"}.fa-gift:before{content:"\f06b"}.fa-paper-plane:before{content:"\f1d8"}.fa-sitemap:before{content:"\f0e8"}.fa-whatsapp:before{content:"\f232"}.fa-youtube:before{content:"\f167"}.fa-tiktok:before{content:"\e07b"}.fa-threads:before{content:"\e618"}.fa-linkedin-in:before{content:"\f0e1"}.fa-instagram:before{content:"\f16d"}.fa-facebook-f:before{content:"\f39e"}.fa-x-twitter:before{content:"\e61b"}


/* ===== fonts.css ===== */
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmsans-40fe3c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dmsans-40fe3c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/dmsans-40fe3c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/dmsans-40fe3c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-ec84a3.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-4ee8fc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-f55b8d.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-eef1e4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-983e90.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-567244.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-ec84a3.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-4ee8fc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-f55b8d.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-eef1e4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-983e90.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-567244.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-ec84a3.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-4ee8fc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-f55b8d.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-eef1e4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-983e90.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-567244.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-ec84a3.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-4ee8fc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-f55b8d.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-eef1e4.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-983e90.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-567244.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-1eec3d.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-5a6413.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-de86c9.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-178956.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-75a767.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-fd1924.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-a6e2f5.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}


/* ===== navbar.css ===== */
:root {
  --green: #00bf48;
  --dark-green: #017530;
  --green-glow: #5fe845;
  --yellow: #f1c40f;
  --orange: #ea580c;
  --dark: #0f261a;
  --light: #f9fafb;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* tipografi situs: DM Sans untuk teks, Poppins untuk judul (diatur per komponen) */
body {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--dark);
  background: #fff;
  line-height: 1.6;
  letter-spacing: 0.2px;
}

button, input, select, textarea { font-family: inherit; }

img {
  max-width: 100%;
  display: block
}

/* ================= NAVBAR (2026 refresh) ================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  padding: 18px 18px 0;
}

.nav-wrapper {
  max-width: 1360px;
  margin: auto;
  padding: 0 10px;
}

.nav {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(1, 69, 32, 0.08);
  border-radius: 20px;
  padding: 12px 16px 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  position: relative;
  box-shadow: 0 10px 30px rgba(1, 51, 24, 0.06);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* ===== NAVBAR SAAT SCROLL ===== */
.header.scrolled {
  padding-top: 10px;
}

.header.scrolled .nav {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(1, 69, 32, 0.10);
  box-shadow: 0 18px 42px rgba(1, 51, 24, 0.12);
}

/* LOGO */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--dark-green);
  flex-shrink: 0;
}

.header .logo img {
  height: auto;
  width: 180px;
  max-width: 100%;
  transition: transform .35s ease;
}

.logo:hover img {
  transform: scale(1.03);
}

/* MENU */
.menu {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  max-width: 100%;
  gap: 2px;
}

.menu li {
  list-style: none;
  position: relative;
}

.menu>li>a {
  text-decoration: none;
  color: #0f261a;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  padding: 10px 9px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .22s ease, background .22s ease;
}

.menu>li>a:not(.cta):hover,
.has-dropdown:hover>a {
  color: var(--dark-green);
  background: rgba(0, 191, 72, 0.08);
}

/* DROPDOWN */
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  background: #fff;
  border: 1px solid rgba(1, 69, 32, 0.09);
  border-radius: 16px;
  min-width: 244px;
  padding: 8px;
  box-shadow: 0 26px 50px rgba(1, 51, 24, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .26s ease, transform .26s ease, visibility .26s ease;
}

/* Hover bridge to keep dropdown open */
.dropdown::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  height: 18px;
}

.dropdown a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  font-size: 13.5px;
  color: #47604f;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.dropdown a::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-glow);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .2s ease;
}

.dropdown a:hover {
  background: rgba(0, 191, 72, 0.09);
  color: var(--dark-green);
}

.dropdown a:hover::before {
  opacity: 1;
  transform: scale(1);
}

.menu li:hover>.dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* CTA */
.cta {
  background: linear-gradient(135deg, var(--green-glow) 0%, var(--green) 45%, var(--dark-green) 100%);
  padding: 12px 22px;
  border-radius: 12px;
  color: #fff !important;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 12px 24px rgba(0, 191, 72, 0.30);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.menu>li>a.cta:hover,
.cta:hover {
  color: #fff !important;
  background: linear-gradient(135deg, var(--green-glow) 0%, var(--green) 45%, var(--dark-green) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0, 191, 72, 0.38);
  filter: brightness(1.08);
}

/* ===== DROPDOWN ARROW ===== */
.has-dropdown>a {
  display: flex;
  align-items: center;
  gap: 6px;
}

.has-dropdown i {
  font-size: 10px;
  transition: transform .3s ease;
}

.has-dropdown:hover>a i {
  transform: rotate(180deg);
}

@media (max-width: 1200px) {
  .menu {
    gap: 2px;
  }

  .menu>li>a {
    font-size: 13.5px;
    padding: 9px 10px;
  }

  .nav {
    padding: 11px 14px 11px 18px;
  }
}

/* ================= MOBILE NAVBAR ================= */
.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--dark-green);
  cursor: pointer;
  border-radius: 13px;
  background: rgba(0, 191, 72, 0.08);
  transition: background .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle:active {
  background: rgba(0, 191, 72, .18);
}

/* MOBILE + TABLET (hamburger) */
@media (max-width: 1279px) {

  .header .nav {
    padding: 10px 14px;
    gap: 12px;
  }

  .header .logo {
    min-width: 0;
    flex-shrink: 1;
  }

  .header .logo img {
    width: 170px;
    height: auto;
  }

  .menu-toggle {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }

  body.nav-open .cta-float {
    visibility: hidden;
    pointer-events: none;
  }

  .menu-toggle {
    display: flex;
  }

  .menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: auto;
    margin: 0 6px;
    background: #fff;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(1, 69, 32, .08);
    box-shadow: 0 28px 54px rgba(1, 51, 24, .18);
    display: none;
    max-height: calc(100vh - 110px);
    max-height: calc(100svh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .menu.active {
    display: flex;
    animation: navDrop .24s ease;
  }

  @keyframes navDrop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .menu li {
    width: 100%;
    flex-shrink: 0;
    border-radius: 12px;
  }

  .menu>li+li {
    border-top: 1px solid rgba(1, 69, 32, .06);
  }

  .menu>li>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    font-size: 15.5px;
    font-weight: 500;
    border-radius: 12px;
  }

  .menu>li>a:active {
    background: rgba(0, 191, 72, 0.10);
  }

  .has-dropdown>a i {
    margin-left: auto;
    font-size: 12px;
    transition: transform .25s ease;
  }

  .menu li .dropdown {
    display: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: #f4fbf3;
    border-radius: 12px;
    margin: 2px 4px 6px;
    padding: 4px;
  }

  .menu li.open .dropdown {
    display: block !important;
  }

  .menu li.open>a {
    color: var(--dark-green);
  }

  .menu li.open>a i {
    transform: rotate(180deg);
  }

  .menu li .dropdown a {
    padding: 13px 14px;
    font-size: 14px;
    color: #47604f;
    border-radius: 9px;
  }

  .menu li .dropdown a:active {
    background: #e2f6e6;
  }

  .menu > li:last-child {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 0 -10px 16px #fff;
  }

  .menu .cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 12px 0 4px;
    text-align: center;
    border-radius: 13px;
    padding: 15px 0;
    font-size: 15px;
  }

}


/* ===== footer.css ===== */
.footer-container {
  width: min(1220px, calc(100% - 32px));
  margin-inline: auto;
}

.footer-new {
  margin-top: 110px;
  color: #dff3e6;
  position: relative;
  z-index: 1;
}

/* ===== Top CTA band ===== */
.footer-topband {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto;
  gap: 28px;
  align-items: center;
  padding: 40px 44px;
  border-radius: 32px;
  background: linear-gradient(135deg, #00bf48 0%, #009338 52%, #017530 105%);
  box-shadow: 0 30px 70px rgba(0, 118, 46, .34);
  color: #ffffff !important;
}

.footer-topband::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(95, 232, 69, .32), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, .12), transparent 30%);
  pointer-events: none;
}

.footer-topcopy,
.footer-topactions {
  position: relative;
  z-index: 1;
}

.footer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .16);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff !important;
}

.footer-topcopy h3 {
  margin: 0 0 12px;
  color: #ffffff !important;
  font-family: 'Poppins', 'DM Sans', sans-serif;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.footer-topcopy p:last-child {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, .95) !important;
  font-size: 15px;
  line-height: 1.8;
}

.footer-topactions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}

.footer-btn:hover {
  transform: translateY(-2px);
}

.footer-btn-primary {
  background: #ffffff;
  color: #017530 !important;
  box-shadow: 0 18px 32px rgba(0, 40, 18, .22);
}

.footer-btn-secondary {
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .14);
  color: #ffffff !important;
}

.footer-btn-secondary:hover {
  background: rgba(255, 255, 255, .26);
}

/* ===== Clean light footer surface ===== */
.footer-surface {
  margin-top: -30px;
  padding: 78px 0 0;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(95, 232, 69, .12), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f4fbf3 100%);
  color: #47604f;
  box-shadow: 0 -14px 48px rgba(1, 51, 24, .05);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-top: 14px;
}

.footer-brand-link {
  display: inline-flex;
  text-decoration: none;
}

.footer-brand img {
  height: 50px;
  width: auto;
  margin-bottom: 18px;
}

.footer-brand p {
  max-width: 360px;
  margin: 0 0 22px;
  color: #6b8177;
  font-size: 15px;
  line-height: 1.8;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.footer-badges span {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 191, 72, .2);
  background: rgba(0, 191, 72, .07);
  color: #017530;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(1, 69, 32, .12);
  background: #ffffff;
  color: #017530;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(1, 51, 24, .05);
  transition: transform .24s ease, background .24s ease, color .24s ease, border-color .24s ease;
}

.footer-social a:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #5fe845, #00bf48);
  border-color: transparent;
  color: #ffffff;
}

.footer-col h4 {
  margin: 2px 0 18px;
  color: #0c2a17;
  font-family: 'Poppins', 'DM Sans', sans-serif;
  font-size: 16px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  color: #55705e;
  text-decoration: none;
  transition: color .22s ease, padding-left .22s ease;
}

.footer-col a:hover {
  color: #00bf48;
  padding-left: 4px;
}

.footer-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #55705e;
  font-size: 14px;
  line-height: 1.7;
}

.footer-contact i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 191, 72, .1);
  color: #017530;
  flex-shrink: 0;
}

.footer-contact span,
.footer-contact a {
  display: inline-block;
  margin-top: 8px;
  color: #55705e;
}

.footer-contact strong {
  color: #0c2a17;
}

.footer-legal {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(1, 69, 32, .1);
  color: #6d8376;
  font-size: 12px;
  line-height: 1.8;
}

.footer-bottom {
  margin-top: 56px;
  padding: 22px 0 28px;
  border-top: 1px solid rgba(1, 69, 32, .1);
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.footer-bottom p {
  margin: 0;
  color: #6d8376;
  font-size: 13px;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-bottom-links a {
  color: #4a6154;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.footer-bottom-links a:hover {
  color: #00bf48;
}

@media (max-width: 1080px) {
  .footer-topband {
    grid-template-columns: 1fr;
  }

  .footer-topactions {
    justify-content: flex-start;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .footer-new {
    margin-top: 84px;
  }

  .footer-container {
    width: min(1220px, calc(100% - 20px));
  }

  .footer-topband {
    padding: 30px 24px;
    border-radius: 26px;
  }

  .footer-surface {
    padding-top: 60px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {

  .footer-btn,
  .footer-social a,
  .footer-col a {
    transition: none;
  }
}


/* ===== responsive.css ===== */
/* ================= LAPTOP KECIL ================= */
@media (max-width: 1366px) {

  .hero h1 {
    font-size: 38px;
  }

  .hero p {
    font-size: 15px;
  }

  section {
    padding: 80px 20px;
  }
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {

  .nav {
    padding: 16px 18px;
  }

  .logo img {
    height: 32px;
  }

  .hero {
    min-height: 100vh;
    padding-top: 120px;
    padding-bottom: 60px;
    background-attachment: scroll;
  }

  .hero h1 {
    font-size: 30px;
    line-height: 1.3;
  }

  .hero p {
    font-size: 14px;
  }

  section {
    padding: 70px 16px;
  }

  .about,
  .visi-misi,
  .steps,
  .layanan,
  .portfolio,
  .calc-figma {
    grid-template-columns: 1fr !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .cta-float {
    padding: 12px 16px;
    font-size: 14px;
  }

  .cta-float i {
    font-size: 18px;
  }

  /* NEW SECTIONS OVERRIDES */
  .edukasi-features,
  .tuk-content {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Stats grid: 2 columns on mobile, never force 1 */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .tuk-badges {
    flex-direction: column !important;
    gap: 12px;
  }

  .tuk-badges>div {
    min-width: unset !important;
    width: 100%;
  }

  .edukasi-features>div {
    margin-top: 0 !important;
  }

  .tuk-alur {
    margin-top: 20px;
  }

  .cta-tiga-jalur>.container>div:last-child {
    grid-template-columns: 1fr !important;
  }
}

/* ===== scrollbar.css ===== */
::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#f3f4f6;
  border-radius:10px;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    #00bf48,
    #00bf48
  );
  border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(
    180deg,
    #00bf48,
    #00bf48
  );
}
/* FIREFOX */
*{
  scrollbar-width: thin;
  scrollbar-color: #00bf48 #ffffff;
}


/* ===== main.css ===== */
    html,
    body {
      width: 100%;
      overflow-x: hidden;
    }

    .hero {
      min-height: 100vh;
      padding-top: 140px;
      padding-bottom: 80px;
      background:
        linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)),
        url('../123.jpg') center / cover no-repeat;
      background-attachment: fixed;
      display: flex;
      align-items: center;
      text-align: center;
    }

    .hero-content {
      max-width: 900px;
      margin: auto;
      padding: 0 24px;
      color: #fff
    }

    .hero p {
      max-width: 720px;
      margin: auto;
      margin-bottom: 28px
    }

    .btn {
      display: inline-block;
      background: transparent;
      border: 2px solid #fff;
      padding: 14px 32px;
      border-radius: 999px;
      color: #fff;
      text-decoration: none;
      font-weight: 600
    }

    section {
      padding: 100px 24px;
      background-color: #fff;
    }

    .container {
      max-width: 1200px;
      margin: auto;
      padding: 0 8px;
    }

    .section-title {
      text-align: center;
      margin-bottom: 60px
    }

    .section-title h2 {
      color: var(--color-primary-deep);
      font-size: 34px
    }

    .section-title span {
      display: block;
      width: 60px;
      height: 4px;
      background: var(--color-primary);
      margin: 12px auto;
      border-radius: 99px
    }

    /* ABOUT */
    .about {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 50px;
      align-items: center
    }

    .about img {
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(155, 155, 155, 0.089)
    }

    /* VISI MISI */
    .visi-misi {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-top: 40px
    }

    .box {
      background: #fff;
      padding: 30px;
      border-radius: 16px;
      box-shadow:
        0 0 0 1.2px rgba(0, 0, 0, 0.04),
        0 16px 24px rgba(61, 61, 61, 0.046);
      transition: all .35s ease;
    }

    .box.visi {
      border-left: 6px solid var(--color-primary)
    }

    .box.misi {
      border-left: 6px solid var(--color-accent)
    }

    .box ul {
      margin-top: 10px;
      padding-left: 18px
    }

    .box li {
      margin-bottom: 8px
    }

    /* ================= VISI & MISI ICON ================= */
    .icon-circle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      font-size: 22px;
    }

    .icon-circle.green {
      background: #eafaf1;
      color: var(--color-primary);
    }

    .icon-circle.yellow {
      background: #fff8e1;
      color: var(--color-accent);
    }

    /* ================= MISI LIST ================= */
    .misi-list {
      list-style: none;
      padding: 0;
      margin-top: 16px;
    }

    .misi-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
      font-size: 16px;
      line-height: 1.6;
    }

    .misi-list li i {
      color: var(--color-primary);
      font-size: 16px;
      margin-top: 4px;
    }

    .solutions {
      background: #f8fff9;
      padding: 80px 0;
    }

    .section-desc {
      text-align: left;
      font-size: 20px;
      margin-bottom: 50px;
      color: #555;
    }

    /* GRID STEPS */
    .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 30px;
    }

    /* CARD */
    .step {
      background: #fff;
      border-radius: 22px;
      overflow: hidden;
      box-shadow:
        0 0 0 1.5px rgba(0, 0, 0, 0.04),
        0 16px 24px rgba(61, 61, 61, 0.046);
      transition: all .35s ease;
    }

    .step:hover {
      transform: translateY(-4px);
      box-shadow: 0 35px 70px rgba(0, 0, 0, .12);
    }

    /* WRAPPER GAMBAR */
    .step-img {
      height: 220px;
      background: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* TEXT */
    .step-text {
      padding: 24px;
    }

    .step-text h4 {
      margin-bottom: 10px;
      font-size: 18px;
      color: var(--color-primary);
    }

    .step-text p {
      font-size: 14px;
      line-height: 1.6;
      color: #555;
    }

    .services {
      padding: 80px 0;
      background: #fff;
    }

    .layanan {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 30px;
      margin-top: 50px;
    }

    /* CARD */
    .layanan-card {
      background: #fff;
      border-radius: 22px;
      padding: 36px 30px;
      text-align: center;
      box-shadow:
        0 0 0 1.5px rgba(0, 0, 0, 0.04),
        0 16px 24px rgba(61, 61, 61, 0.046);
      transition: all .35s ease;
      position: relative;
      overflow: hidden;
    }

    /* efek hover naik */
    .layanan-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 35px 70px rgba(0, 0, 0, .12);
    }

    .layanan-card .icon {
      width: 72px;
      height: 72px;
      margin: 0 auto 20px;
      border-radius: 50%;
      background: linear-gradient(var(--color-primary-glow), var(--color-primary));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      color: #fff;
      transition: .2s ease;
    }

    .layanan-card:hover .icon {
      transform: rotate(10deg) scale(1.05);
    }

    .layanan-card h4 {
      font-size: 20px;
      margin-bottom: 10px;
      color: #313131;
    }

    .layanan-card p {
      font-size: 14px;
      line-height: 1.6;
      color: #555;
      margin-bottom: 24px;
    }

    .btn-arrow2 {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-primary);
      text-decoration: none;
      position: relative;
      transition: .3s ease;
    }

    .btn-arrow2::after {
      content: "→";
      font-size: 18px;
      transition: .3s ease;
    }

    .btn-arrow2:hover {
      color: #000;
    }

    .btn-arrow2:hover::after {
      transform: translateX(6px);
    }

    /* PORTFOLIO GRID */
    .portfolio {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .port-card {
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
      transition: all 0.3s ease;
    }

    .port-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    }

    /* SLIDER WRAPPER */
    .port-slider {
      position: relative;
      overflow: hidden;
      background: #f5f5f5;
    }

    .port-slider-track {
      display: flex;
      transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .port-slider-track img {
      width: 100%;
      height: 280px;
      object-fit: cover;
      object-position: center bottom;
      flex-shrink: 0;
      background: #f5f5f5;
    }

    /* SLIDER CONTROLS */
    .port-slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.95);
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      z-index: 10;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-primary-deep);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
      opacity: 0;
    }

    .port-card:hover .port-slider-btn {
      opacity: 1;
    }

    .port-slider-btn:hover {
      background: #fff;
      transform: translateY(-50%) scale(1.1);
    }

    .port-slider-btn.prev {
      left: 10px;
    }

    .port-slider-btn.next {
      right: 10px;
    }

    /* SLIDER DOTS */
    .port-slider-dots {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 6px;
      z-index: 10;
    }

    .port-slider-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .port-slider-dot.active {
      background: #fff;
      width: 24px;
      border-radius: 4px;
    }

    /* CARD TEXT */
    .port-card-text {
      padding: 20px;
    }

    .port-card-text h4 {
      font-size: 18px;
      font-weight: 600;
      color: #1f2933;
      margin-bottom: 8px;
    }

    .port-card-text p {
      font-size: 14px;
      color: #6b7280;
      margin: 0;
    }

    /* KALKULATOR */
    /* ================= KALKULATOR FIGMA ================= */
    .calc-section {
      background: white;
      padding: 120px 0;
      position: relative;
      z-index: 1;
    }

    .calc-figma {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 40px;
      align-items: stretch;
    }

    .calc-form {
      background: #fff;
      padding: 40px;
      border-radius: 22px;
    }

    .calc-form h3 {
      color: var(--color-primary-deep);
      margin-bottom: 12px;
    }

    .calc-form p {
      font-size: 14px;
      color: #555;
      margin-bottom: 24px;
    }

    .calc-form label {
      font-size: 13px;
      font-weight: 500;
      display: block;
      margin-bottom: 6px;
    }

    .calc-form input,
    .calc-form select {
      width: 100%;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid #ddd;
      margin-bottom: 18px;
      outline: none;
    }

    /* ===== SELECT ARROW PREMIUM ===== */
    .calc-form select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;

      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232ecc71' viewBox='0 0 16 16'%3E%3Cpath d='M3.204 5.204a.5.5 0 0 1 .707 0L8 9.293l4.09-4.09a.5.5 0 1 1 .707.707l-4.443 4.443a.5.5 0 0 1-.707 0L3.204 5.911a.5.5 0 0 1 0-.707z'/%3E%3C/svg%3E");

      background-repeat: no-repeat;
      background-position: right 16px center;
      background-size: 14px;
      padding-right: 44px;
    }

    .calc-form input:hover,
    .calc-form select:hover {
      border-color: var(--color-primary);
    }

    .calc-form input:focus,
    .calc-form select:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(102, 255, 71, .7);
      background: #fff;
    }

    .calc-form button {
      width: 100%;
      background: #31a01b;
      color: #fff;
      border: none;
      padding: 14px;
      border-radius: 999px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 10px;
      box-shadow: 0 10px 25px rgba(0, 191, 72, .35);
    }

    .calc-form small {
      display: block;
      margin-top: 12px;
      font-size: 11px;
      color: #888;
    }

    .calc-result {
      background: #fff;
      padding: 36px;
      border-radius: 22px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
    }

    .calc-result h4 {
      color: var(--color-primary-deep);
      margin-bottom: 24px;
    }

    .result-item {
      background: #f8fff9;
      border-radius: 14px;
      padding: 16px 18px;
      margin-bottom: 14px;
    }

    .result-item span {
      font-size: 13px;
      color: #666;
    }

    .result-item strong {
      display: block;
      font-size: 16px;
      margin-top: 6px;
    }

    .btn-consult {
      display: block;
      margin-top: 24px;
      text-align: center;
      background: var(--color-primary);
      color: #fff;
      padding: 14px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 600;
    }

    /* FORM CARD DI ATAS GAMBAR */
    .calc-form {
      background: rgba(255, 255, 255, 0.578);
      backdrop-filter: blur(2px);
      padding: 40px;
      border-radius: 22px;
      box-shadow: 0 15px 35px rgba(98, 98, 98, 0.15);
    }

    /* ===== BUTTON LOADING ===== */
    .calc-form button {
      position: relative;
      overflow: hidden;
      transition: .3s ease;
    }

    .calc-form button:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(42, 188, 103, 0.45);
    }

    .calc-form button.loading {
      pointer-events: none;
      opacity: .85;
    }

    /* spinner */
    .calc-form button.loading::after {
      content: "";
      width: 18px;
      height: 18px;
      border: 3px solid rgba(255, 255, 255, .5);
      border-top-color: #fff;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: spin .8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    /* RESPONSIVE */
    @media(max-width:900px) {
      .calc-figma {
        grid-template-columns: 1fr;
      }
    }

    /* ================= BUTTON ANIMATION ================= */
    .btn-animate {
      position: relative;
      overflow: hidden;
      animation: pulse 2.5s infinite;
    }

    /* animasi denyut halus */
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .45);
      }

      70% {
        box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
      }
    }

    .btn-animate i {
      animation: arrowMove 1.4s infinite;
    }

    @keyframes arrowMove {
      0% {
        transform: translateX(0)
      }

      50% {
        transform: translateX(6px)
      }

      100% {
        transform: translateX(0)
      }
    }

    .btn-animate:hover {
      transform: translateY(-2px);
    }

    .btn-animate::before {
      content: '';
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          rgba(255, 255, 255, 0.6),
          rgba(255, 255, 255, 0.3),
          transparent);
      transition: right 0.6s ease;
    }

    .btn-animate:hover::before {
      right: 100%;
    }

    /* ===== DROPDOWN ARROW ===== */
    .has-dropdown>a {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .has-dropdown i {
      font-size: 10px;
      transition: .3s ease;
    }

    /* panah muter saat hover */
    .has-dropdown:hover i {
      transform: rotate(180deg);
    }

    /* opsional: hover warna */
    .has-dropdown:hover>a {
      color: var(--color-primary);
    }

    /* ========== CARA KALKULATOR BEKERJA ========== */
    .cara-kerja {
      max-width: 900px;
      margin: auto;
      font-size: 14px;
      line-height: 1.8;
      color: #555;
    }

    .cara-kerja ul {
      margin: 24px 0;
      padding-left: 20px;
    }

    .cara-kerja li {
      margin-bottom: 12px;
    }

    .cara-kerja strong {
      color: var(--color-primary-deep);
    }

    .cara-kerja .note {
      background: #f4fdf6;
      padding: 18px 22px;
      border-left: 5px solid var(--color-primary);
      border-radius: 12px;
      margin-top: 24px;
      font-size: 13px;
      color: #444;
    }

    .cta-float {
      position: fixed;
      right: 24px;
      bottom: 24px;
      background: var(--color-primary);
      color: #fff !important;
      padding: 16px 20px;
      border-radius: 50px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      box-shadow: 0 10px 25px rgba(0, 191, 72, .35);
      z-index: 999;
      transition: .3s ease;
    }

    .cta-float span,
    .cta-float i {
      color: #fff !important;
    }

    .cta-float i {
      font-size: 20px;
    }

    .cta-float:hover {
      background: var(--color-primary-glow);
      transform: translateY(-3px);
    }

    /* ================= MOBILE RESPONSIVE ================= */
    @media (max-width: 768px) {

      /* NAVBAR */
      .menu {
        display: none;
      }

      .nav {
        padding: 16px 18px;
      }

      .logo img {
        height: 32px;
      }

      /* HERO */
      .hero {
        min-height: 100vh;
        padding-top: 120px;
        padding-bottom: 60px;
        background-attachment: scroll;
      }

      .hero h1 {
        font-size: 30px;
        line-height: 1.3;
      }

      .hero p {
        font-size: 14px;
      }

      /* SECTION */
      section {
        padding: 70px 16px;
      }

      /* GRID JADI 1 KOLOM */
      .about,
      .visi-misi,
      .steps,
      .layanan,
      .portfolio,
      .calc-figma {
        grid-template-columns: 1fr !important;
      }

      /* IMAGE AMAN */
      img {
        max-width: 100%;
        height: auto;
      }

      /* PORTFOLIO RESPONSIVE */
      .portfolio {
        grid-template-columns: 1fr !important;
      }

      .port-slider-track img {
        height: 240px;
        object-position: center bottom;
      }

      .port-card-text h4 {
        font-size: 16px;
      }

      .port-card-text p {
        font-size: 13px;
      }

      /* CTA FLOAT */
      .cta-float {
        padding: 12px 16px;
        font-size: 14px;
      }

      .cta-float i {
        font-size: 18px;
      }
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    .modal-overlay.show {
      display: flex;
    }

    .modal-box {
      background: #fff;
      width: 100vw;
      height: 100vh;
      max-width: none;
      padding: 32px 24px;
      border-radius: 0;
      position: relative;
      overflow: auto;
    }

    .proposal-content {
      max-height: none;
      font-size: 15px;
    }

    @keyframes scaleIn {
      from {
        transform: scale(.9);
        opacity: 0
      }

      to {
        transform: scale(1);
        opacity: 1
      }
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 20px;
      font-size: 22px;
      cursor: pointer;
      color: #888;
    }

    .calc-image {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .calc-image img {
      max-width: 100%;
      height: auto;
    }

    .about-text p {
      margin-bottom: 16px;
      line-height: 1.8;
    }

    .aurora-page {
      position: relative;
      background: #fff;
    }

    .aurora-page::before,
    .aurora-page::after {
      pointer-events: none;
    }

    /* AURORA HALUS */
    .aurora-page::before {
      content: "";
      position: fixed;
      inset: -30%;
      background:
        radial-gradient(circle at 15% 25%, rgba(46, 204, 112, 0.237), transparent 40%),
        radial-gradient(circle at 85% 20%, rgba(205, 219, 52, 0.18), transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(182, 132, 89, 0.16), transparent 50%);
      filter: blur(120px);
      z-index: -1;
      animation: auroraFloat 26s ease-in-out infinite alternate;
    }

    /* gerakan lembut */
    @keyframes auroraFloat {
      0% {
        transform: translate(-6%, -4%);
      }

      100% {
        transform: translate(6%, 4%);
      }
    }

    /* ===== MODAL HEADER ===== */
    .modal-header {
      text-align: center;
      margin-bottom: 18px;
    }

    .modal-header h4 {
      font-size: 20px;
      color: var(--color-primary-deep);
      margin-bottom: 6px;
    }

    .modal-header p {
      font-size: 13px;
      color: #666;
    }

    /* ===== ISI PROPOSAL ===== */
    .proposal-content {
      background: #f8fff9;
      border-radius: 16px;
      padding: 18px 20px;
      font-size: 13px;
      line-height: 1.7;
      color: #333;
      max-height: 55vh;
      overflow: auto;
    }

    /* scrollbar halus */
    .proposal-content::-webkit-scrollbar {
      width: 6px;
    }

    .proposal-content::-webkit-scrollbar-thumb {
      background: rgba(0, 191, 72, .4);
      border-radius: 10px;
    }

    /* ===== BUTTON AREA ===== */
    .modal-action {
      margin-top: 20px;
    }

    .modal-action .btn-consult {
      background: linear-gradient(135deg, var(--color-primary), #00bf48);
      box-shadow: 0 10px 25px rgba(0, 191, 72, .35);
      transition: .3s ease;
    }

    .modal-action .btn-consult:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(0, 191, 72, .45);
    }

    /* ================= HOME REFRESH ================= */
    :root {
      --border-soft: rgba(1, 51, 24, .12);
      --shadow-soft: 0 22px 60px rgba(1, 51, 24, .08);
      --shadow-medium: 0 28px 70px rgba(1, 51, 24, .14);
    }

    section {
      position: relative;
      padding: 108px 24px;
    }

    .container {
      max-width: 1220px;
      padding: 0 18px;
    }

    .section-title {
      max-width: 780px;
      margin: 0 auto 58px;
      text-align: center;
    }

    .section-title h2 {
      margin: 0;
      font-size: clamp(2rem, 3vw, 3.15rem);
      line-height: 1.08;
      color: #10301d;
    }

    .section-title span {
      width: 88px;
      height: 4px;
      margin: 20px auto 0;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--color-primary), var(--color-primary-glow));
    }

    .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .78);
      border: 1px solid rgba(255, 255, 255, .5);
      box-shadow: 0 10px 26px rgba(19, 48, 29, .08);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--color-primary);
    }

    .section-intro {
      margin: 18px auto 0;
      max-width: 680px;
      font-size: 17px;
      line-height: 1.7;
      color: #50695c;
    }

    .hero {
      min-height: 100svh;
      padding: 164px 0 110px;
      display: flex;
      align-items: flex-end;
      text-align: left;
      background:
        linear-gradient(110deg, rgba(6, 20, 12, .84) 0%, rgba(11, 33, 20, .7) 36%, rgba(12, 44, 26, .25) 72%, rgba(12, 44, 26, .05) 100%),
        radial-gradient(circle at 88% 18%, rgba(214, 239, 115, .34), transparent 22%),
        url('../123.jpg') center / cover no-repeat;
      background-attachment: fixed;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(7, 24, 15, .65) 0%, rgba(7, 24, 15, .55) 50%, rgba(7, 24, 15, .75) 100%);
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 160px;
      background: linear-gradient(180deg, rgba(8, 28, 18, 0), rgba(8, 28, 18, .75));
      opacity: .6;
    }

    .hero-shell {
      position: relative;
      z-index: 1;
      width: min(1320px, 100%);
      margin: 0 auto;
      padding: 0 28px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(260px, .75fr);
      gap: 44px;
      align-items: end;
    }

    .hero-content {
      max-width: 720px;
      margin: 0;
      padding: 0;
      color: #fff;
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .82);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .hero h1 {
      font-size: clamp(3rem, 6vw, 5.6rem);
      line-height: .98;
      margin: 0 0 22px;
      color: #fff;
    }

    .hero-lead {
      margin: 0;
      max-width: 620px;
      font-size: clamp(1rem, 1.6vw, 1.18rem);
      line-height: 1.75;
      color: rgba(248, 252, 249, .84);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 28px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 700;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }

    .btn:hover {
      transform: translateY(-3px);
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--color-primary-glow), #5fe845);
      color: #0d2315;
      border: 1px solid rgba(255, 255, 255, .18);
      box-shadow: 0 22px 44px rgba(124, 188, 55, .28);
    }

    .btn-secondary {
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .22);
      background: rgba(255, 255, 255, .08);
      backdrop-filter: blur(14px);
    }

    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 24px;
      margin-top: 28px;
      padding-top: 26px;
      border-top: 1px solid rgba(255, 255, 255, .18);
    }

    .hero-trust span {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: rgba(244, 248, 245, .82);
    }

    .hero-trust i {
      color: var(--color-primary-glow);
    }

    .hero-spotlight {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 16px;
    }

    .hero-spotlight-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .66);
    }

    .hero-spotlight-list {
      display: grid;
      gap: 12px;
    }

    .hero-spotlight-list article {
      padding: 20px 22px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(15, 35, 22, .72), rgba(8, 22, 14, .82));
      border: 1px solid rgba(95, 232, 69, .28);
      backdrop-filter: blur(18px) saturate(1.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
      box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
      opacity: 1 !important;
      transform: none !important;
    }

    .hero-spotlight-list strong {
      display: block;
      margin-bottom: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 18px;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    }

    .hero-spotlight-list p {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, .95);
      text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    }

    .hero-spotlight, .hero-spotlight.fade-up, .hero-content.fade-up {
      opacity: 1 !important;
      transform: none !important;
    }

    #tentang {
      padding-top: 116px;
    }

    .about {
      grid-template-columns: minmax(0, 1.02fr) minmax(320px, .94fr);
      gap: 54px;
      align-items: center;
    }

    .about-text p {
      margin-bottom: 18px;
      font-size: 17px;
      line-height: 1.82;
      color: #4a6657;
    }

    .about-points {
      display: grid;
      gap: 14px;
      margin-top: 26px;
    }

    .about-point {
      padding: 18px 0;
      border-top: 1px solid rgba(19, 48, 29, .12);
    }

    .about-point:last-child {
      padding-bottom: 0;
    }

    .about-point strong {
      display: block;
      margin-bottom: 6px;
      font-size: 18px;
      color: #10301d;
    }

    .about-point span {
      display: block;
      font-size: 15px;
      line-height: 1.7;
      color: #5a7366;
    }

    .about-media {
      position: relative;
    }

    .about img {
      border-radius: 28px;
      box-shadow: var(--shadow-medium);
    }

    .about-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: -48px;
      padding: 0 20px;
    }

    .about-meta div {
      padding: 18px 20px;
      border-radius: 20px;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 20px 40px rgba(15, 40, 25, .12);
      border: 1px solid rgba(19, 48, 29, .08);
    }

    .about-meta strong {
      display: block;
      margin-bottom: 6px;
      font-size: 16px;
      color: var(--color-primary-deep);
    }

    .about-meta span {
      font-size: 13px;
      color: #5a7366;
    }

    .visi-misi {
      margin-top: 48px;
      gap: 22px;
    }

    .box {
      padding: 32px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 251, 243, .88));
      box-shadow: var(--shadow-soft);
      border: 1px solid var(--border-soft);
    }

    .box.visi,
    .box.misi {
      border-left: none;
    }

    .box h3 {
      font-size: 26px;
      color: #10301d;
    }

    .box p,
    .misi-list li {
      color: #587062;
    }

    .icon-circle.green {
      background: linear-gradient(135deg, #eefbe7, #dff0ca);
    }

    .icon-circle.yellow {
      background: linear-gradient(135deg, #fff6d4, #f1df8a);
    }

    .solutions {
      background: linear-gradient(180deg, #f5faef 0%, #f9fcf6 100%);
      padding: 110px 0;
    }

    .section-desc {
      max-width: 700px;
      margin: 0 auto 42px;
      text-align: center;
      font-size: 17px;
      line-height: 1.72;
      color: #557064;
    }

    .steps {
      counter-reset: step;
      gap: 24px;
    }

    .step {
      position: relative;
      border: 1px solid rgba(19, 48, 29, .08);
      box-shadow: var(--shadow-soft);
      background: rgba(255, 255, 255, .92);
    }

    .step::before {
      counter-increment: step;
      content: "0" counter(step);
      position: absolute;
      top: 18px;
      left: 18px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(9, 35, 18, .76);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .16em;
      z-index: 2;
    }

    .step-img {
      height: 250px;
    }

    .step-text {
      padding: 26px 24px 28px;
    }

    .step-text h4 {
      font-size: 20px;
      color: #11321d;
    }

    .step-text p {
      font-size: 15px;
      color: #597165;
    }

    .services {
      padding: 108px 0 96px;
      background: rgba(255, 255, 255, .76);
    }

    .layanan {
      gap: 24px;
    }

    .layanan-card {
      padding: 34px 30px;
      border: 1px solid rgba(19, 48, 29, .08);
      box-shadow: var(--shadow-soft);
      background: linear-gradient(180deg, #fff, #f8fbf7);
    }

    .layanan-card .icon {
      background: linear-gradient(135deg, var(--color-primary), #7dcb44);
    }

    .layanan-card h4 {
      font-size: 22px;
      color: #11321d;
    }

    .layanan-card p {
      font-size: 15px;
      color: #5c7567;
    }

    .btn-arrow2 {
      font-size: 15px;
    }

    .btn-arrow2::after {
      content: "\2192";
    }

    #portofolio {
      background: linear-gradient(180deg, #f7fbf5 0%, #fdfefd 100%) !important;
    }

    .portfolio {
      gap: 22px;
    }

    .port-card {
      border: 1px solid rgba(19, 48, 29, .08);
      box-shadow: var(--shadow-soft);
    }

    .port-card-text {
      padding: 24px 22px 22px;
    }

    .port-card-text h4 {
      font-size: 22px;
      color: #12311e;
    }

    .port-card-text p {
      font-size: 15px;
      line-height: 1.65;
      color: #5c7567;
    }

    .calc-section {
      padding: 112px 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(240, 248, 238, .95));
    }

    .calc-figma {
      gap: 34px;
      align-items: center;
    }

    .calc-image img {
      border-radius: 30px;
      box-shadow: var(--shadow-medium);
    }

    .calc-form {
      padding: 38px;
      background: rgba(255, 255, 255, .78);
      backdrop-filter: blur(18px);
      border: 1px solid rgba(19, 48, 29, .1);
      box-shadow: var(--shadow-soft);
    }

    .calc-form h3 {
      font-size: 29px;
      color: #10301d;
    }

    .calc-form p,
    .cara-kerja {
      font-size: 15px;
      line-height: 1.8;
      color: #597165;
    }

    .calc-form label {
      font-size: 13px;
      letter-spacing: .03em;
      text-transform: uppercase;
      color: #30513d;
    }

    .calc-form input,
    .calc-form select {
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(19, 48, 29, .12);
    }

    .calc-form button {
      background: linear-gradient(135deg, var(--color-primary), #00bf48);
    }

    .cara-kerja .note {
      background: #f0f8ee;
      border-left: 5px solid var(--color-primary);
    }

    .modal-box {
      background: #f8fbf6;
      padding: 38px 28px;
    }

    .modal-header h4 {
      font-size: 28px;
      color: #10301d;
    }

    .proposal-content {
      background: #fff;
      border: 1px solid rgba(19, 48, 29, .08);
      padding: 24px;
      font-size: 14px;
      line-height: 1.8;
    }

    .proposal-content h5 {
      margin: 20px 0 10px;
      font-family: 'Poppins', sans-serif;
      font-size: 18px;
      color: #10301d;
    }

    .proposal-content h5:first-child {
      margin-top: 0;
    }

    .proposal-content p {
      margin: 0 0 10px;
      color: #476153;
    }

    .proposal-content ul {
      margin: 0 0 14px;
      padding-left: 20px;
    }

    .proposal-content li {
      margin-bottom: 8px;
      color: #476153;
    }

    .proposal-content strong {
      color: #10301d;
    }

    .proposal-content hr {
      border: none;
      border-top: 1px solid rgba(19, 48, 29, .08);
      margin: 20px 0;
    }

    .proposal-highlight {
      color: var(--color-primary-deep);
      font-weight: 700;
    }

    .cta-float {
      background: linear-gradient(135deg, var(--color-primary), #00bf48);
    }

    @media (max-width: 960px) {

      .hero-grid,
      .about {
        grid-template-columns: 1fr;
      }

      .hero-spotlight {
        max-width: 560px;
      }

      .about-meta {
        margin-top: 18px;
        padding: 0;
      }
    }

    @media (max-width: 768px) {
      section {
        padding: 78px 16px;
      }

      .hero {
        min-height: auto;
        padding: 132px 0 78px;
        background-attachment: scroll;
      }

      .hero-shell {
        padding: 0 18px;
      }

      .hero h1 {
        font-size: clamp(2.4rem, 12vw, 3.5rem);
      }

      .hero-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .btn {
        justify-content: center;
      }

      .hero-spotlight-list article {
        padding: 18px 18px;
      }

      .about,
      .visi-misi,
      .steps,
      .layanan,
      .portfolio,
      .calc-figma,
      .about-meta {
        grid-template-columns: 1fr !important;
      }

      .port-slider-btn {
        opacity: 1;
      }

      .cta-float {
        right: 16px;
        bottom: 16px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

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

      .fade-up {
        opacity: 1;
        transform: none;
      }
    }

/* ================= UFUK HIJAU ACADEMY ================= */
.academy-page main > section {
  padding: 96px 0;
}

.academy-logo-marquee {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  padding: 116px 0 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(1, 51, 24, .08);
}

.academy-logo-track {
  display: flex;
  width: max-content;
  animation: academyLogoMarquee 24s linear infinite;
}

.academy-logo-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(70px, 10vw, 170px);
  padding-right: clamp(70px, 10vw, 170px);
}

.academy-logo-group img {
  display: block;
  width: auto;
  height: clamp(56px, 6vw, 82px);
  object-fit: contain;
}

.academy-logo-group img:first-child {
  height: clamp(76px, 8vw, 108px);
}

@keyframes academyLogoMarquee {
  to {
    transform: translateX(-50%);
  }
}

.academy-hero {
  width: 100%;
  min-height: 62svh !important;
  margin: 0 0 42px;
  display: grid;
  align-items: center;
  padding: 96px 24px !important;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 18px 48px rgba(1, 51, 24, .07);
}

.academy-hero::after {
  display: none;
}

.academy-hero::before {
  display: none;
}

.academy-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
  max-width: 980px !important;
  text-align: center;
}

.academy-hero-copy {
  max-width: 780px;
  margin-inline: auto;
}

.academy-hero h1 {
  margin: 20px 0 18px;
  color: #017530 !important;
  font-size: clamp(2.5rem, 5.2vw, 4.2rem);
  line-height: 1.04;
}

.academy-hero h1 span {
  display: block;
  margin-top: 12px;
  color: #017530;
  font-size: inherit;
}

.academy-hero-copy > p {
  max-width: 680px;
  margin: 0 0 28px;
  color: var(--color-text-muted) !important;
  font-size: clamp(1rem, 1.7vw, 1.15rem);
}

.academy-hero .page-hero-badge {
  border-color: rgba(1, 117, 48, .08);
  background: #fff;
  color: #6b8177;
  box-shadow: 0 12px 32px rgba(1, 51, 24, .08);
}

.academy-hero .btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-glow));
  color: #fff;
}

.academy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.academy-trust-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-card);
  background: rgba(255,255,255,.1);
  box-shadow: var(--shadow-medium);
  backdrop-filter: blur(12px);
}

.academy-trust-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border-radius: var(--radius-soft);
  background: rgba(255,255,255,.1);
  color: #fff;
}

.academy-trust-item i {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
}

.academy-trust-item strong {
  display: block;
  color: #fff;
}

.academy-trust-item span {
  display: block;
  color: rgba(255,255,255,.7);
  font-size: 12px;
}

.academy-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
  gap: 64px;
  align-items: center;
}

.academy-photo-stack {
  position: relative;
  min-height: 560px;
}

.academy-photo-stack img {
  width: 78%;
  height: 500px;
  border-radius: 32px;
  object-fit: cover;
  box-shadow: var(--shadow-strong);
}

.academy-photo-note {
  position: absolute;
  right: 0;
  bottom: 16px;
  width: min(310px, 70%);
  padding: 24px;
  border-radius: var(--radius-soft);
  background: linear-gradient(135deg, var(--color-primary), #00bf48);
  box-shadow: var(--shadow-medium);
}

.academy-photo-note strong,
.academy-photo-note span {
  display: block;
  color: #fff;
}

.academy-photo-note strong {
  margin-bottom: 6px;
  font-size: 1.2rem;
}

.academy-photo-note span {
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

.academy-copy h2 {
  margin: 0 0 20px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
}

.academy-copy p {
  margin-bottom: 16px;
}

.academy-card-grid,
.academy-persona-grid,
.academy-facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.academy-card {
  padding: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.academy-card-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-soft);
  color: var(--color-primary);
  font-size: 22px;
}

.academy-card h3,
.academy-card h4 {
  margin: 0 0 10px;
}

.academy-batch {
  padding: 0 !important;
}

.academy-batch-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  padding: 38px 42px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #fb923c, #ea580c);
  box-shadow: 0 22px 52px rgba(234, 88, 12, .26);
}

.academy-batch-inner h2,
.academy-batch-inner p,
.academy-batch-meta span {
  color: #fff !important;
}

.academy-batch-inner h2 {
  margin: 8px 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.academy-batch-label {
  display: inline-flex;
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 99px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.academy-batch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.academy-batch-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.academy-batch-inner .btn.secondary {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,.88);
  background: linear-gradient(145deg, #ffffff, #fff8f2) !important;
  color: #ea580c !important;
  box-shadow:
    0 16px 34px rgba(120, 50, 0, .18),
    inset 0 1px 0 rgba(255,255,255,1);
}

.academy-batch-inner .btn.secondary i {
  color: #ea580c !important;
}

.academy-batch-inner .btn.secondary::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -40%;
  width: 34%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform: rotate(24deg);
  animation: academyButtonGloss 3.2s ease-in-out infinite;
}

.academy-batch-inner .btn.secondary:hover {
  border-color: #fff;
  background: #fff !important;
  color: #c94d08 !important;
  box-shadow:
    0 20px 40px rgba(120, 50, 0, .24),
    inset 0 1px 0 rgba(255,255,255,1);
}

@keyframes academyButtonGloss {
  0%, 55% { left: -45%; }
  100% { left: 125%; }
}

.academy-programs {
  background: #f8fff9;
}

.academy-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

.academy-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.academy-price-card.featured {
  z-index: 2;
  transform: translateY(-22px) scale(1.045) !important;
  border: 3px solid var(--color-primary);
  background: linear-gradient(180deg, #eafbe6, #fff 48%);
  box-shadow: 0 34px 72px rgba(0, 191, 72,.24);
}

.academy-price-card.featured::before {
  content: "\2605  BEST CHOICE  \2605";
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  background: #ea580c;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  box-shadow: 0 10px 24px rgba(234,88,12,.24);
}

.academy-price-card .tag {
  width: max-content;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--color-surface-soft);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.academy-price-card.featured h3 {
  margin-top: 12px;
  font-size: 1.65rem;
}

.academy-price-card.featured .academy-price {
  font-size: 2.55rem;
}

.academy-price-card.featured .btn {
  position: relative;
  z-index: 2;
  padding-block: 17px;
  background: linear-gradient(135deg, var(--color-primary), #009338) !important;
  color: #fff !important;
  box-shadow: 0 20px 38px rgba(0, 191, 72,.28);
}

.academy-price-card.featured .btn i {
  color: #fff !important;
}

.academy-scheme-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 980px;
  margin: 34px auto 0;
  padding: 26px 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-soft);
  box-shadow: var(--shadow-soft);
}

.academy-scheme-cta > div {
  display: flex;
  align-items: center;
  gap: 16px;
}

.academy-scheme-cta > div > i {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  font-size: 20px;
}

.academy-scheme-cta strong,
.academy-scheme-cta span {
  display: block;
}

.academy-scheme-cta strong {
  margin-bottom: 4px;
  color: var(--color-primary-deep);
  font-family: var(--font-display);
}

.academy-scheme-cta span {
  color: var(--color-text-muted);
  font-size: 13px;
}

.academy-scheme-cta .btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--color-primary), #009338) !important;
  color: #fff !important;
}

.academy-scheme-cta .btn i {
  color: #fff !important;
}

.academy-price-card h3 {
  margin: 0 0 4px;
}

.academy-price-card .duration {
  margin-bottom: 18px;
  font-size: 13px;
}

.academy-price-card del {
  color: var(--color-text-soft);
}

.academy-price {
  margin: 4px 0 20px;
  color: var(--color-primary-deep);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
}

.academy-checklist {
  display: grid;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.academy-checklist li {
  display: flex;
  gap: 10px;
  font-size: 13px;
}

.academy-checklist i {
  margin-top: 5px;
  color: var(--color-primary);
}

.academy-price-card .btn {
  width: 100%;
  margin-top: auto;
}

.academy-notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 30px;
}

.academy-note {
  display: flex;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
}

.academy-note i {
  color: var(--color-primary);
}

.academy-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.academy-day {
  padding: 26px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.academy-day:last-child {
  background: linear-gradient(135deg, var(--color-primary), #00bf48);
}

.academy-day:last-child h3,
.academy-day:last-child p,
.academy-day:last-child .academy-day-label {
  color: #fff !important;
}

.academy-day-label {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.academy-day h3 {
  margin: 12px 0 8px;
  font-size: 1.12rem;
}

.academy-day p {
  margin: 0;
  font-size: 13px;
}

.academy-curriculum {
  background:
    radial-gradient(circle at top right, rgba(95,232,69,.18), transparent 28%),
    #f8fff9;
}

.academy-curriculum .section-title h2,
.academy-curriculum .section-title p {
  color: var(--color-primary-deep) !important;
}

.academy-curriculum .section-eyebrow {
  border-color: var(--color-border);
  background: #fff;
}

.academy-learning-path {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.academy-learning-stage {
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.academy-stage-head {
  display: grid;
  grid-template-columns: 42px 52px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.academy-stage-head > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
}

.academy-stage-head > i {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-soft);
  color: var(--color-primary);
  font-size: 20px;
}

.academy-stage-head small {
  display: block;
  margin-bottom: 3px;
  color: #ea580c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.academy-stage-head h3 {
  margin: 0;
  font-size: 1.12rem;
}

.academy-learning-stage > p {
  margin: 0 0 16px;
  font-size: 13px;
}

.academy-learning-stage ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.academy-learning-stage li {
  position: relative;
  padding-left: 22px;
  color: var(--color-text);
  font-size: 13px;
}

.academy-learning-stage li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 800;
}

.academy-outcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding: 24px 28px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.academy-outcome > div {
  display: flex;
  align-items: center;
  gap: 16px;
}

.academy-outcome i {
  color: var(--color-primary);
  font-size: 28px;
}

.academy-outcome strong,
.academy-outcome span {
  display: block;
}

.academy-outcome strong {
  margin-bottom: 3px;
  color: var(--color-primary-deep);
}

.academy-accordion {
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}

.academy-accordion-item {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-soft);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.academy-accordion-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: 0;
  background: transparent;
  color: var(--color-primary-deep);
  font: 700 16px var(--font-display);
  text-align: left;
  touch-action: manipulation;
  cursor: pointer;
}

.academy-accordion-title {
  min-width: 0;
  color: inherit;
  font: inherit;
}

.academy-accordion-meta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--color-text-soft);
  font: 600 12px var(--font-body);
}

.academy-accordion-button i {
  transition: transform .25s ease;
}

.academy-accordion-item.open .academy-accordion-button i,
.academy-faq-item.open .academy-accordion-button i {
  transform: rotate(180deg);
}

.academy-accordion-button:focus-visible {
  outline: 3px solid rgba(0, 191, 72, .35);
  outline-offset: -3px;
}

.academy-accordion-panel {
  display: none;
  padding: 0 24px 24px;
}

.academy-accordion-item.open .academy-accordion-panel {
  display: block;
}

.academy-scheme-table {
  width: 100%;
  border-collapse: collapse;
}

.academy-scheme-table th,
.academy-scheme-table td {
  padding: 12px 10px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: left;
}

.academy-scheme-table th:last-child,
.academy-scheme-table td:last-child {
  width: 90px;
  text-align: center;
}

.academy-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.academy-step {
  position: relative;
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: #fff;
}

.academy-step-number {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
}

.academy-requirements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 32px;
}

.academy-requirements .academy-card {
  box-shadow: none;
}

.academy-facilities,
.academy-faq {
  background: var(--color-surface-soft);
}

.academy-facility-grid {
  grid-template-columns: repeat(4, 1fr);
}

.academy-facility-grid .academy-card {
  padding: 24px;
}

.academy-persona-grid {
  grid-template-columns: repeat(5, 1fr);
}

.academy-persona-grid .academy-card {
  padding: 24px 20px;
}

.academy-persona-grid .academy-card-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  font-size: 18px;
}

.academy-faq-list {
  display: grid;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

.academy-faq-item {
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
}

.academy-faq-answer {
  display: none;
  padding: 0 24px 22px;
}

.academy-faq-item.open .academy-faq-answer {
  display: block;
}

.academy-faq-answer p {
  margin: 0;
}

.academy-final-cta {
  padding-top: 0 !important;
}

.academy-final-inner {
  padding: 72px 28px;
  border-radius: 36px;
  background: linear-gradient(145deg, #017530, #00bf48 58%, #5fe845);
  box-shadow: var(--shadow-strong);
  text-align: center;
}

.academy-final-inner h2,
.academy-final-inner p {
  color: #fff !important;
}

.academy-final-inner h2 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4vw, 3.3rem);
}

.academy-final-inner p {
  margin: 0 auto 26px;
}

@media (max-width: 1040px) {
  .academy-hero-grid,
  .academy-split {
    grid-template-columns: 1fr;
  }

  .academy-trust-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .academy-pricing,
  .academy-card-grid,
  .academy-steps,
  .academy-learning-path {
    grid-template-columns: repeat(2, 1fr);
  }

  .academy-timeline,
  .academy-facility-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .academy-persona-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .academy-page main > section {
    padding: 72px 0;
  }

  .academy-hero {
    width: 100%;
    min-height: auto;
    margin-bottom: 24px;
    padding: 76px 0 70px !important;
    border-radius: 0;
  }

  .academy-actions .btn {
    width: 100%;
  }

  .academy-logo-marquee {
    padding-top: 98px;
  }

  .academy-logo-group {
    gap: 52px;
    padding-right: 52px;
  }

  .academy-logo-group img {
    height: 48px;
  }

  .academy-logo-group img:first-child {
    height: 68px;
  }

  .academy-trust-list,
  .academy-pricing,
  .academy-card-grid,
  .academy-timeline,
  .academy-learning-path,
  .academy-steps,
  .academy-requirements,
  .academy-facility-grid,
  .academy-persona-grid,
  .academy-notes {
    grid-template-columns: 1fr;
  }

  .academy-photo-stack {
    min-height: 470px;
  }

  .academy-photo-stack img {
    width: 100%;
    height: 410px;
  }

  .academy-photo-note {
    width: calc(100% - 24px);
  }

  .academy-batch-inner {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }

  .academy-price-card.featured {
    transform: none !important;
  }

  .academy-price-card.featured::before {
    top: -14px;
  }

  .academy-outcome {
    align-items: stretch;
    flex-direction: column;
  }

  .academy-outcome .btn {
    width: 100%;
  }

  .academy-scheme-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .academy-scheme-cta .btn {
    width: 100%;
  }

  .academy-accordion-button {
    padding: 18px;
    gap: 12px;
    font-size: 15px;
    line-height: 1.45;
  }

  .academy-accordion .academy-accordion-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .academy-accordion .academy-accordion-meta {
    width: 100%;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
  }

  .academy-accordion-panel,
  .academy-faq-answer {
    padding-inline: 18px;
  }

  .academy-stage-head {
    grid-template-columns: 38px 46px 1fr;
    gap: 10px;
  }

  .academy-stage-head > span {
    width: 38px;
    height: 38px;
  }

  .academy-stage-head > i {
    width: 46px;
    height: 46px;
  }

  .academy-scheme-table th:first-child,
  .academy-scheme-table td:first-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .academy-logo-track {
    animation-play-state: paused;
  }
}


/* ===== design-system.css ===== */
:root {
  /* ===== Brand green scale (2026 refresh) ===== */
  --green-500: #5fe845; /* lime glow / highlight */
  --green-600: #00bf48; /* vivid primary */
  --green-700: #009338; /* mid */
  --green-800: #017530; /* deep */
  --green-900: #005625; /* darker */
  --green-950: #014520; /* darkest */

  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #f4f6f5;
  --color-surface-strong: #043a1e;
  --green-soft: #eafbe6;
  --soft: #eafbe6;
  --color-primary: #00bf48;
  --color-primary-deep: #017530;
  --color-primary-glow: #5fe845;
  --color-primary-mid: #009338;
  --color-primary-darker: #005625;
  --color-primary-darkest: #014520;
  /* Orange accent — retained from existing brand */
  --color-accent: #ea580c;
  --color-accent-deep: #ea580c;
  --orange: #ea580c;
  --orange-deep: #ea580c;
  --color-text: #0f261a;
  --color-text-muted: #47604f;
  --color-text-soft: #6b8178;
  --color-border: rgba(1, 69, 32, .10);
  --color-border-strong: rgba(1, 69, 32, .17);
  --shadow-soft: 0 18px 44px rgba(1, 51, 24, .08);
  --shadow-medium: 0 24px 56px rgba(1, 51, 24, .12);
  --shadow-strong: 0 32px 74px rgba(1, 51, 24, .17);
  --gradient-brand: linear-gradient(135deg, var(--green-600) 0%, var(--green-800) 100%);
  --gradient-brand-vivid: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 45%, var(--green-800) 100%);
  --gradient-orange: linear-gradient(135deg, #fb923c 0%, var(--orange) 45%, var(--orange-deep) 100%);
  --radius-card: 28px;
  --radius-soft: 20px;
  --radius-pill: 999px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 96px;
  --container-max: 1220px;
  --font-display: 'Poppins', 'DM Sans', sans-serif;
  --font-body: 'DM Sans', 'Inter', sans-serif;
  --motion-fast: .24s;
  --motion-base: .38s;
  --motion-slow: .72s;
  --ease-standard: cubic-bezier(.22, .61, .36, 1);
}

html {
  scroll-behavior: smooth;
}

body.site-page {
  color: var(--color-text);
  background: #ffffff;
  font-family: var(--font-body);
  line-height: 1.65;
  letter-spacing: .01em;
}

body.site-page::selection {
  background: rgba(95, 232, 69, .38);
  color: var(--color-primary-deep);
}

body.site-page h1,
body.site-page h2,
body.site-page h3,
body.site-page h4 {
  color: var(--color-primary-deep);
  font-family: var(--font-display);
  letter-spacing: -.03em;
}

body.site-page p,
body.site-page li,
body.site-page small,
body.site-page label,
body.site-page input,
body.site-page select,
body.site-page textarea {
  font-family: var(--font-body);
}

body.site-page p,
body.site-page li,
body.site-page small {
  color: var(--color-text-muted);
}

body.site-page a {
  color: inherit;
}

body.site-page img {
  display: block;
  max-width: 100%;
}

body.site-page section {
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 760px;
}

.container,
.container2 {
  width: min(var(--container-max), calc(100% - 32px));
  margin-inline: auto;
}

.section-title,
.section-header {
  max-width: 820px;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.section-title h2,
.section-header h2,
.highlight-title {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.15rem);
  line-height: 1.08;
  color: var(--color-primary-deep);
}

h2.section-title {
  margin: 0 0 var(--space-8);
  text-align: center;
  font-size: clamp(2rem, 3vw, 3.15rem);
  line-height: 1.08;
  color: var(--color-primary-deep);
}

.section-title span {
  display: block;
  width: 88px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-glow));
}

.section-header p,
.section-intro {
  max-width: 700px;
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 12px 26px rgba(1, 51, 24, .08);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.page-hero-badge,
.port-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-hero,
.page-hero.hero,
.page-hero.faq-hero,
.page-hero.port-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .2);
  z-index: 0;
  pointer-events: none;
}

.page-hero>* {
  position: relative;
  z-index: 1;
}

body.site-page:not(.home-page) .page-hero {
  min-height: 58svh;
  padding: 170px 24px 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body.site-page:not(.home-page) .page-hero>.container,
body.site-page:not(.home-page) .page-hero>.container2,
body.site-page:not(.home-page) .page-hero>.hero-content,
body.site-page:not(.home-page) .page-hero>.hero-wrap,
body.site-page:not(.home-page) .page-hero>.port-hero-content {
  max-width: 980px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.site-page:not(.home-page) .page-hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.2rem);
  line-height: 1.04;
  margin-bottom: 18px;
  color: #ffffff;
}

body.site-page:not(.home-page) .page-hero p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(234, 251, 230, .88);
  font-size: clamp(1rem, 1.8vw, 1.14rem);
  line-height: 1.75;
}

body.site-page:not(.home-page) .page-hero .hero-content,
body.site-page:not(.home-page) .page-hero .hero-wrap,
body.site-page:not(.home-page) .page-hero .port-hero-content {
  color: #ffffff;
}

body.site-page:not(.home-page) .page-hero .section-eyebrow {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
  color: rgba(255, 255, 255, .9);
}

.btn,
.btn-cta,
.btn-consult,
.btn-cta-primary,
.btn-cta-secondary,
.btn-arrow2,
.btn.primary,
.btn.secondary,
.read {
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.btn,
.btn-cta,
.btn-consult,
.btn-cta-primary,
.btn.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand-vivid);
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 16px 32px rgba(0, 191, 72, .28);
}

.btn *,
.btn-cta *,
.btn-consult *,
.btn-cta-primary *,
.btn.primary * {
  color: #ffffff !important;
}

.btn.secondary,
.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-primary);
  background: #ffffff;
  color: var(--color-primary) !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(1, 51, 24, .08);
}

.btn-arrow2,
.read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

.btn:hover,
.btn-cta:hover,
.btn-consult:hover,
.btn-cta-primary:hover,
.btn-arrow2:hover,
.btn.primary:hover,
.read:hover {
  transform: translateY(-2px);
}

.btn.secondary:hover,
.btn-cta-secondary:hover {
  transform: translateY(-2px);
  background: var(--color-primary);
  color: #ffffff !important;
  border-color: var(--color-primary);
}

.btn-arrow2::after,
.read::after {
  content: "\2192";
  font-size: 16px;
}

.cta-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand-vivid);
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-medium);
  z-index: 999;
}

.cta-float span,
.cta-float i {
  color: #ffffff !important;
}

.cta-float i {
  font-size: 18px;
}

.cta-float:hover {
  transform: translateY(-2px);
}

.cta2,
.faq-cta,
.portfolio-cta {
  width: min(var(--container-max), calc(100% - 32px));
  margin: 0 auto 96px;
  padding: 72px 24px;
  border-radius: 36px;
  overflow: hidden;
  border: none;
  background: linear-gradient(145deg, var(--green-800) 0%, var(--green-600) 58%, var(--green-500) 120%);
  box-shadow: var(--shadow-strong);
  text-align: center;
  color: #ffffff;
}

.cta2::before,
.faq-cta::before,
.portfolio-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, .18), transparent 24%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, .08), transparent 30%);
  pointer-events: none;
}

.cta2 .container,
.faq-cta .container,
.portfolio-cta .cta-inner {
  position: relative;
  z-index: 1;
}

.cta2 h2,
.faq-cta h2,
.portfolio-cta h2,
.cta-inner h2 {
  color: #ffffff !important;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.12;
  margin-bottom: 16px;
}

.cta2 p,
.faq-cta p,
.portfolio-cta p,
.cta-inner p {
  max-width: 660px;
  margin: 0 auto 28px;
  color: rgba(245, 250, 246, .94) !important;
  font-size: 16px;
  line-height: 1.8;
}

.cta-buttons,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.card,
.step,
.layanan-card,
.stat-card,
.project-card,
.faq-item,
.value-card,
.unggul-card,
.sector-card,
.grid-card,
.value,
.type,
.type-item,
.system,
.box,
.map-card,
.info,
.form,
.calc-form,
.commitment-card,
.industry-row,
.epc-step {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
}

.card:hover,
.step:hover,
.layanan-card:hover,
.stat-card:hover,
.project-card:hover,
.value-card:hover,
.unggul-card:hover,
.sector-card:hover,
.grid-card:hover,
.value:hover,
.type:hover,
.type-item:hover,
.system:hover,
.epc-step:hover {
  box-shadow: var(--shadow-medium);
}

.map,
.article-image img,
.about img,
.z-image img,
.commitment-image img,
.project-slider,
.port-slider,
.card img,
.card-image,
.hero-image img {
  border-radius: 24px;
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  padding: 14px 16px;
  color: var(--color-text);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(0, 191, 72, .5);
  box-shadow: 0 0 0 4px rgba(95, 232, 69, .28);
}

button {
  cursor: pointer;
}

.article-container,
.content-shell {
  width: min(920px, calc(100% - 32px));
  margin-inline: auto;
}

.author-divider {
  background: rgba(1, 51, 24, .12);
}

[data-lottie] {
  position: absolute;
  inset: auto;
  pointer-events: none;
}

[data-reveal],
.fade-up,
.fade-left,
.fade,
.fade-up2 {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  filter: blur(2px);
  transition:
    opacity var(--motion-slow) var(--ease-standard),
    transform var(--motion-slow) var(--ease-standard),
    filter var(--motion-slow) var(--ease-standard);
  will-change: transform, opacity, filter;
}

.fade-left {
  transform: translate3d(-32px, 0, 0);
}

.fade-up2 {
  transform: translate3d(0, 24px, 0);
}

.show,
.show2,
[data-reveal].is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

[data-line-reveal],
.branch-divider {
  transform: scaleX(.2);
  transform-origin: left center;
  opacity: .3;
  transition: transform .9s var(--ease-standard), opacity .9s var(--ease-standard);
}

[data-line-reveal].is-visible,
.animate-line {
  transform: scaleX(1);
  opacity: 1;
}

@media (pointer: coarse),
(max-width: 768px) {

  .page-hero,
  .hero,
  .faq-hero,
  .port-hero {
    background-attachment: scroll !important;
  }

  .cta-float {
    right: 16px;
    bottom: 16px;
    padding: 12px 15px;
    font-size: 14px;
  }

  .cta2,
  .faq-cta,
  .portfolio-cta {
    width: min(var(--container-max), calc(100% - 20px));
    padding: 56px 18px;
    border-radius: 28px;
    margin-bottom: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  [data-reveal],
  .fade-up,
  .fade-left,
  .fade,
  .fade-up2 {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ===== Related-links (Layanan Terkait) — compact, konsisten ===== */
.related{padding:48px 0 60px;}
.related h2{font-size:22px;text-align:center;margin:0 auto 26px;color:var(--color-primary-deep,#1e6b3a);}
.related-grid{max-width:920px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.related-card{display:block;padding:15px 17px;background:#fff;border:1px solid #e4efe7;border-radius:14px;text-decoration:none;color:inherit;box-shadow:0 6px 16px rgba(0,0,0,.05);transition:transform .25s ease,box-shadow .25s ease;}
.related-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.09);}
.related-card strong{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--color-primary,#017530);margin-bottom:5px;}
.related-card span{font-size:13px;color:#6b7a70;line-height:1.5;}
@media(max-width:600px){.related{padding:36px 0 44px;}.related h2{font-size:20px;}}

/* ===== STAT CARDS (Portofolio & Statistik) — gaya lama (flat & simpel) ===== */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:16px;
  max-width:1120px;
  margin:0 auto 40px;
  padding:0 24px;
  align-items:stretch;
}
.stat-card{
  background:#fff;
  border-radius:16px;
  padding:22px 18px;
  text-align:center;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.04),0 12px 28px rgba(0,0,0,.07);
  transition:transform .35s ease,box-shadow .35s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.stat-card::before{content:none;}
.stat-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.11);}
.stat-icon{
  width:46px;height:46px;margin:0 auto 12px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#fff;box-shadow:none;
  background:linear-gradient(135deg,var(--green-600),var(--green-800));
}
.stat-card:nth-child(2) .stat-icon{background:linear-gradient(135deg,#fb923c,#ea580c);}
.stat-card:nth-child(3) .stat-icon{background:linear-gradient(135deg,#3498db,#2980b9);}
.stat-card:nth-child(4) .stat-icon{background:linear-gradient(135deg,var(--green-500),var(--green-700));}
.stat-card:nth-child(5) .stat-icon{background:linear-gradient(135deg,var(--green-600),var(--green-900));}
.stat-number{
  font-size:29px;font-weight:700;color:#1f2933;
  font-family:'DM Sans',sans-serif;letter-spacing:normal;line-height:1.1;
}
.stat-label{
  font-size:13px;font-weight:400;color:#777;
  margin-top:3px;text-transform:none;letter-spacing:normal;
}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.stats-grid{gap:12px;}.stat-card{padding:18px 12px;}.stat-number{font-size:25px;}.stat-icon{width:42px;height:42px;font-size:16px;}}

/* ===== Related-links (Layanan Terkait) — compact ===== */
.related{padding:34px 0 40px;}
.related h2{font-size:20px;margin:0 auto 18px;}
.related-grid{max-width:980px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.related-card{
  position:relative;
  padding:12px 14px 12px 16px;
  border:1px solid #e4efe7;
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff,#fbfff8);
  box-shadow:0 4px 12px rgba(1,117,48,.05);
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.related-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--color-primary),var(--color-primary-glow));
  transform:scaleY(0);transform-origin:top;transition:transform .25s ease;
}
.related-card:hover{transform:translateY(-3px);border-color:#cfeccf;box-shadow:0 12px 22px rgba(1,117,48,.11);}
.related-card:hover::before{transform:scaleY(1);}
.related-card strong{font-size:14px;gap:7px;margin-bottom:3px;}
.related-card span{display:block;font-size:12.5px;line-height:1.45;}
@media(max-width:600px){.related{padding:28px 0 32px;}.related-grid{gap:10px;}}


/* ===== templates.css ===== */
body.home-page {
  background:
    radial-gradient(circle at top, rgba(214, 239, 115, .18), transparent 30%),
    linear-gradient(180deg, #f4fbf3 0%, #ffffff 45%, #f5faf3 100%);
}

body.home-page .hero-kicker,
body.home-page .section-eyebrow {
  backdrop-filter: blur(14px);
}

body.home-page .page-hero::before {
  display: none;
}

body.home-page .page-hero::after {
  display: none;
}

body.home-page .hero-content,
body.home-page .hero-spotlight {
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.home-page .hero-content {
  padding: 0;
  border-radius: 0;
  color: #ffffff;
}

body.home-page .hero-spotlight {
  padding: 0;
  border-radius: 0;
}

body.home-page .hero h1 {
  color: #ffffff;
}

body.home-page .hero h1 .hero-tagline {
  display: block;
  margin-top: 14px;
  font-size: 0.46em;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: rgba(245, 247, 245, .82);
}

body.home-page .hero-lead,
body.home-page .hero-trust span,
body.home-page .hero-spotlight-label,
body.home-page .hero-spotlight-list p {
  color: rgba(245, 247, 245, .82);
}

body.home-page .hero-kicker {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .82);
}

body.home-page .btn-secondary {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: none;
  color: #ffffff;
}

body.home-page .hero-trust {
  border-top: 1px solid rgba(255, 255, 255, .18);
}

body.home-page .hero-trust i,
body.home-page .hero-spotlight-list strong {
  color: #ffffff;
}

body.home-page .hero-spotlight-list article {
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  box-shadow: 0 24px 50px rgba(0, 0, 0, .18);
  backdrop-filter: blur(14px);
}

body.service-page section:not(.hero):not(.cta2) {
  width: min(var(--container-max), calc(100% - 32px));
  margin-inline: auto;
  padding-left: 24px;
  padding-right: 24px;
}

body.service-page .hero-content,
body.service-page .container2 {
  width: min(1100px, 100%);
  margin-inline: auto;
}

body.service-page .solution-points {
  gap: 16px;
}

body.service-page .solution-points div {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
}

body.service-page .benefits,
body.service-page .cards,
body.service-page .types,
body.service-page .type-grid,
body.service-page .challenge-grid,
body.service-page .systems,
body.service-page .values,
body.service-page .grid {
  gap: 24px;
}

body.service-page .benefit p,
body.service-page .card p,
body.service-page .type p,
body.service-page .type-item p,
body.service-page .system p,
body.service-page .grid-card p,
body.service-page .value p {
  color: var(--color-text-muted);
}

body.service-page .flow-item,
body.service-page .industry-card,
body.service-page .challenge-card,
body.service-page .system,
body.service-page .type,
body.service-page .type-item {
  border: 1px solid var(--color-border);
  border-radius: 28px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
}

body.service-page .flow-item,
body.service-page .system,
body.service-page .type,
body.service-page .type-item {
  padding: 28px 24px;
}

body.service-page .cta2 .container {
  max-width: 760px;
}

body.trust-page .hero,
body.trust-page .faq-hero {
  min-height: 52svh;
}

body.trust-page section:not(.hero):not(.faq-hero):not(.faq-cta):not(.cta2) {
  width: min(var(--container-max), calc(100% - 32px));
  margin-inline: auto;
}

body.trust-page .content,
body.trust-page .map-wrap,
body.trust-page .sejarah,
body.trust-page .keunggulan {
  width: min(var(--container-max), calc(100% - 32px));
}

body.trust-page .faq-item,
body.trust-page .info,
body.trust-page .form,
body.trust-page .value-card,
body.trust-page .commitment-card,
body.trust-page .unggul-card,
body.trust-page .feature-card {
  border-radius: 24px;
}

body.trust-page .faq-question,
body.trust-page .info h3,
body.trust-page .form h3 {
  color: var(--color-primary-deep);
}

body.trust-page .commitment,
body.trust-page .unggul-grid,
body.trust-page .feature-grid {
  gap: 24px;
}

body.editorial-page .hero {
  min-height: 52svh;
}

body.editorial-page .hero-wrap {
  max-width: 860px;
  margin-inline: auto;
}

body.editorial-page .list {
  gap: 24px;
}

body.editorial-page .card {
  border-radius: 24px;
}

body.editorial-page .card-content {
  padding: 24px;
}

body.editorial-page .badge {
  background: rgba(214, 239, 115, .24);
  color: var(--color-primary-deep);
}

body.editorial-page .card h3,
body.editorial-page .card a,
body.editorial-page .title-center {
  color: var(--color-primary-deep);
}

body.editorial-page .card p,
body.article-page .content p,
body.article-page .content li {
  color: var(--color-text-muted);
}

body.article-page {
  background: #fbfdf9;
}

body.article-page .article-container {
  max-width: 920px;
  margin: 120px auto 96px;
  padding: 0 24px;
}

body.article-page .title-center {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.14;
  margin-bottom: 28px;
}

body.article-page .author-info strong {
  color: var(--color-primary-deep);
}

body.article-page .content h3 {
  margin: 40px 0 18px;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

body.article-page .content p,
body.article-page .content li {
  font-size: 17px;
  line-height: 1.9;
}

body.portfolio-page .stats-grid,
body.portfolio-page .portfolio-grid {
  gap: 24px;
}

body.portfolio-page .portfolio-section {
  background: transparent;
}

body.portfolio-page .filter-btn {
  border-color: var(--color-border);
  color: var(--color-primary-deep);
  background: rgba(255, 255, 255, .9);
}

body.portfolio-page .filter-btn.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--color-primary), #009338);
  color: #ffffff;
}

body.portfolio-page .project-location,
body.portfolio-page .spec-item,
body.portfolio-page .stat-label {
  color: var(--color-text-muted);
}

body.service-page section h2,
body.trust-page section h2 {
  text-align: center;
}

body.service-page .solution-grid,
body.service-page .flow-row,
body.service-page .industry-row,
body.service-page .epc-flow {
  gap: 42px;
  align-items: center;
}

body.service-page .solution-image img,
body.service-page .industry-image img,
body.service-page .flow-image img {
  border-radius: 28px;
  box-shadow: var(--shadow-medium);
}

body.service-page .benefit,
body.service-page .roi,
body.service-page .step,
body.service-page .challenge-card,
body.service-page .flow-item,
body.service-page .value,
body.service-page .grid-card {
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: 28px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-soft);
}

body.service-page .benefit {
  align-items: flex-start;
}

body.service-page .solution-points div {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .96);
  color: var(--color-primary-deep);
  box-shadow: 0 12px 26px rgba(1, 51, 24, .07);
}

body.service-page .roi {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

body.service-page .step::after {
  content: "→";
  color: var(--color-primary);
}

body.service-page .flow-item h4,
body.service-page .benefit h4,
body.service-page .type h4,
body.service-page .type-item h4,
body.service-page .system h4,
body.service-page .value h3,
body.service-page .card h4 {
  color: var(--color-primary-deep);
}

body.service-page .flow-arrow-svg path {
  stroke: var(--color-primary);
}

body.trust-page .faq-category,
body.trust-page .faq-content,
body.trust-page .map-wrap,
body.trust-page .content,
body.trust-page .sejarah,
body.trust-page .keunggulan,
body.trust-page .value {
  width: min(var(--container-max), calc(100% - 32px));
  margin-inline: auto;
}

body.trust-page .z-row,
body.trust-page .commitment-row {
  gap: 42px;
  align-items: center;
}

body.trust-page .z-image img,
body.trust-page .commitment-image img {
  border-radius: 28px;
  box-shadow: var(--shadow-medium);
}

body.trust-page .info,
body.trust-page .form {
  padding: 32px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-soft);
}

body.trust-page .map-card {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

body.trust-page .faq-group-title {
  margin: 44px 0 18px;
  font-size: 22px;
  color: var(--color-primary-deep);
}

body.trust-page .category-list button,
body.editorial-page .filter button,
body.editorial-page .pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: #ffffff;
  color: var(--color-primary);
  box-shadow: 0 12px 24px rgba(1, 51, 24, .06);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

body.trust-page .category-list button:hover,
body.editorial-page .filter button:hover,
body.editorial-page .pagination button:hover {
  transform: translateY(-2px);
  border-color: transparent;
  background: linear-gradient(135deg, var(--color-primary), #009338);
  color: #ffffff;
}

body.trust-page .category-list .active,
body.editorial-page .filter button.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--color-primary), #009338);
  color: #ffffff;
}

body.trust-page .social a {
  border: 1px solid var(--color-border-strong);
  background: rgba(255, 255, 255, .94);
  color: var(--color-primary-deep);
  box-shadow: 0 12px 24px rgba(1, 51, 24, .06);
}

body.trust-page .social a:hover {
  transform: translateY(-2px);
}

body.trust-page .social a i,
body.trust-page .info-item i {
  background: rgba(0, 191, 72, .12);
  color: var(--color-primary);
}

body.trust-page .info-item p,
body.trust-page .map-card p,
body.trust-page .social a span,
body.trust-page .value p,
body.trust-page .z-text p,
body.trust-page .commitment-card p {
  color: var(--color-text-muted);
}

body.trust-page .map-card a {
  color: var(--color-primary-deep);
}

body.editorial-page .filter,
body.editorial-page .pagination {
  width: min(var(--container-max), calc(100% - 32px));
  padding-inline: 0;
}

body.editorial-page .badge {
  border: 1px solid rgba(0, 191, 72, .12);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.editorial-page .card {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

body.editorial-page .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-medium);
}

body.editorial-page .meta,
body.editorial-page .card-header,
body.editorial-page .author {
  color: var(--color-text-soft);
}

body.article-page .author-center {
  gap: 14px;
}

body.article-page .article-image {
  box-shadow: var(--shadow-medium);
  background: rgba(255, 255, 255, .96);
}

body.portfolio-page .stats-section,
body.portfolio-page .portfolio-section {
  width: min(var(--container-max), calc(100% - 32px));
  margin-inline: auto;
}

body.portfolio-page .stat-card,
body.portfolio-page .project-card {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
  border-radius: 28px;
  overflow: hidden;
}

body.portfolio-page .project-body {
  padding: 26px;
}

body.portfolio-page .project-badge {
  background: rgba(255, 255, 255, .92);
  color: var(--color-primary-deep);
}

body.portfolio-page .project-card:hover,
body.portfolio-page .stat-card:hover {
  box-shadow: var(--shadow-medium);
}

@media (max-width: 900px) {

  body.home-page .hero-content,
  body.home-page .hero-spotlight {
    padding: 24px;
  }

  body.service-page section:not(.hero):not(.cta2),
  body.trust-page section:not(.hero):not(.faq-hero):not(.faq-cta):not(.cta2) {
    width: min(var(--container-max), calc(100% - 20px));
    padding-left: 18px;
    padding-right: 18px;
  }

  body.trust-page .content {
    grid-template-columns: 1fr;
  }

  body.trust-page .map-card {
    position: static;
    max-width: none;
    margin: 18px auto 0;
  }

  body.portfolio-page .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  body.service-page section:not(.hero):not(.cta2),
  body.trust-page section:not(.hero):not(.faq-hero):not(.faq-cta):not(.cta2) {
    width: min(var(--container-max), calc(100% - 16px));
  }

  body.portfolio-page .stats-grid {
    grid-template-columns: 1fr;
  }

  body.editorial-page .list {
    grid-template-columns: 1fr;
  }
}

body.service-page .page-hero>.fade-up,
body.service-page .page-hero>.fade,
body.service-page .page-hero>.container2,
body.service-page .page-hero .hero-content {
  max-width: 900px;
  margin-inline: auto;
}

body.service-page .page-hero p {
  max-width: 760px;
}

body.service-page .page-hero .btn,
body.service-page .page-hero .btn-cta,
body.service-page .page-hero .btn-cta1 {
  margin-top: 22px;
}

body.service-page .solution-points {
  justify-content: center;
}

body.service-page .step::after {
  content: "\2192";
}

body.service-page .industry-grid,
body.service-page .sector-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

body.service-page .industry-card,
body.service-page .sector-card,
body.service-page .epc-step {
  border: 1px solid var(--color-border);
  border-radius: 28px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-soft);
}

body.service-page .industry-row,
body.service-page .industry-card {
  overflow: hidden;
}

body.service-page .industry-image img,
body.service-page .sector-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.service-page .epc {
  background: linear-gradient(180deg, #f4ffe4 0%, #ffffff 100%);
}

body.service-page .cta-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

body.service-page .cta-badges span {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .12);
  color: rgba(245, 250, 246, .92);
  font-size: 13px;
  font-weight: 700;
}

body.trust-page .page-hero .container,
body.trust-page .page-hero .hero-content {
  max-width: 900px;
}

body.trust-page .intro-ethics,
body.trust-page .intro,
body.trust-page .value,
body.trust-page .stakeholder {
  max-width: 920px;
  margin-inline: auto;
}

body.trust-page .intro-ethics,
body.trust-page .stakeholder {
  padding: 36px;
  border: 1px solid var(--color-border);
  border-radius: 30px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-soft);
}

body.trust-page .map {
  border-radius: 28px;
  box-shadow: var(--shadow-medium);
}

body.trust-page .faq-item {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .96);
}

body.trust-page .faq-question {
  min-height: 72px;
}

body.trust-page .faq-answer {
  color: var(--color-text-muted);
}

body.trust-page .social a {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.trust-page .principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

body.trust-page .principles>* {
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: 28px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-soft);
}

body.trust-page .values,
body.trust-page .unggul-grid,
body.trust-page .feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

body.trust-page .value-card,
body.trust-page .unggul-card,
body.trust-page .commitment-card {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .97);
}

body.editorial-page .hero-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.article-page .article-container {
  max-width: 980px;
  padding: 36px;
  border: 1px solid var(--color-border);
  border-radius: 32px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
}

body.article-page .article-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

body.article-page .article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary-deep);
  font-weight: 700;
  text-decoration: none;
}

body.article-page .article-back::before {
  content: "\2190";
}

body.article-page .author-info,
body.article-page .meta {
  color: var(--color-text-soft);
}

body.article-page .author-divider {
  margin: 28px 0 36px;
}

body.portfolio-page .stats-section {
  position: relative;
  z-index: 2;
  margin-top: -48px;
}

body.portfolio-page .project-body h3 {
  margin: 10px 0 12px;
  color: var(--color-primary-deep);
}

@media (max-width: 900px) {

  body.trust-page .principles,
  body.trust-page .values,
  body.trust-page .unggul-grid,
  body.trust-page .feature-grid,
  body.service-page .industry-grid,
  body.service-page .sector-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.article-page .article-container {
    padding: 24px 18px;
    border-radius: 26px;
  }

  body.article-page .article-meta-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

body.portfolio-page #portfolio-grid-section {
  scroll-margin-top: 120px;
}

body.portfolio-page .port-hero {
  position: relative;
  min-height: clamp(560px, 86vh, 760px);
  padding: 160px 24px 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.portfolio-page .port-hero::before {
  background:
    linear-gradient(112deg, rgba(7, 34, 12, .78) 0%, rgba(15, 79, 31, .66) 42%, rgba(9, 31, 13, .58) 100%);
}

body.portfolio-page .port-hero-content {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}

body.portfolio-page .port-hero .section-eyebrow {
  margin-bottom: 18px;
}

body.portfolio-page .port-hero h1 {
  max-width: 900px;
  margin-inline: auto;
}

body.portfolio-page .port-hero p {
  max-width: 720px;
  margin-inline: auto;
}

body.portfolio-page .port-hero-badge {
  margin-bottom: 20px;
}

body.portfolio-page .port-hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

body.portfolio-page .btn-hero-primary,
body.portfolio-page .btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: transform var(--motion-medium), box-shadow var(--motion-medium), background var(--motion-medium), border-color var(--motion-medium);
}

body.portfolio-page .btn-hero-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  box-shadow: 0 20px 40px rgba(1, 117, 48, .26);
}

body.portfolio-page .btn-hero-secondary {
  color: #ffffff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
}

body.portfolio-page .btn-hero-primary:hover,
body.portfolio-page .btn-hero-secondary:hover {
  transform: translateY(-2px);
}

body.portfolio-page .btn-hero-secondary:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .28);
}

body.portfolio-page .port-hero-points {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

body.portfolio-page .port-hero-points span {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  font-weight: 700;
}

body.portfolio-page .port-hero-orb {
  display: none;
}

body.portfolio-page .port-hero-orb.orb-a {
  top: 14%;
  left: -2%;
  background: radial-gradient(circle, rgba(241, 196, 15, .46) 0%, rgba(241, 196, 15, 0) 70%);
}

body.portfolio-page .port-hero-orb.orb-b {
  right: -4%;
  bottom: 12%;
  background: radial-gradient(circle, rgba(91, 226, 38, .42) 0%, rgba(91, 226, 38, 0) 72%);
}

body.portfolio-page .stats-section {
  margin-top: -72px;
}

body.portfolio-page .stats-grid {
  max-width: 1180px;
}

body.portfolio-page .stat-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .72);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(247, 250, 243, .98));
  border-radius: 16px;
  padding: 22px 18px;
}

body.portfolio-page .stat-card::after {
  display: none;
}

body.portfolio-page .portfolio-overview {
  padding: 68px 24px 24px;
  background: #ffffff;
}

body.portfolio-page .portfolio-overview-shell {
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: start;
}

body.portfolio-page .portfolio-overview-copy h2 {
  margin: 0 0 18px;
  color: var(--color-primary-deep);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

body.portfolio-page .portfolio-overview-copy p:not(.section-eyebrow) {
  max-width: 560px;
  color: var(--color-text-muted);
  font-size: 16px;
}

body.portfolio-page .portfolio-overview-points {
  display: grid;
  gap: 18px;
}

body.portfolio-page .overview-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 0 24px 24px;
  border-left: 2px solid rgba(0, 191, 72, .16);
  border-bottom: 1px solid var(--color-border);
}

body.portfolio-page .overview-index {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
}

body.portfolio-page .overview-point h3 {
  margin: 0 0 8px;
  color: var(--color-primary-deep);
  font-size: 20px;
}

body.portfolio-page .overview-point p {
  margin: 0;
  color: var(--color-text-muted);
}

body.portfolio-page .portfolio-section {
  padding: 84px 24px 96px;
  background: linear-gradient(180deg, #f9fff2 0%, #ffffff 26%, #ffffff 100%);
}

body.portfolio-page .filter-bar {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 46px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-soft);
}

body.portfolio-page .filter-btn {
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  background: transparent;
  color: var(--color-text-soft);
}

body.portfolio-page .filter-btn:hover {
  background: rgba(0, 191, 72, .08);
}

body.portfolio-page .filter-btn.active {
  box-shadow: 0 14px 30px rgba(1, 117, 48, .18);
}

body.portfolio-page .portfolio-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

body.portfolio-page .project-card {
  border: 1px solid var(--color-border);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 252, 246, .98));
  box-shadow: var(--shadow-soft);
}

body.portfolio-page .project-slider {
  aspect-ratio: 16/9;
}

body.portfolio-page .project-body {
  padding: 28px;
}

body.portfolio-page .project-location {
  font-size: 13px;
  letter-spacing: .02em;
}

body.portfolio-page .project-body>p {
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

body.portfolio-page .project-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

body.portfolio-page .project-highlights span {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 191, 72, .12);
  background: #f4ffe4;
  color: var(--color-primary-deep);
  font-size: 12px;
  font-weight: 700;
}

body.portfolio-page .project-specs {
  gap: 10px;
  margin-top: 8px;
  padding-top: 18px;
}

body.portfolio-page .spec-item {
  padding: 8px 12px;
  border: 1px solid rgba(0, 191, 72, .1);
  border-radius: 999px;
  background: #ffffff;
}

body.portfolio-page .project-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--color-primary-deep);
  font-weight: 700;
  text-decoration: none;
}

body.portfolio-page .project-link i {
  transition: transform var(--motion-medium);
}

body.portfolio-page .project-link:hover i {
  transform: translateX(3px);
}

body.portfolio-page .portfolio-cta {
  padding: 92px 24px;
}

body.portfolio-page .portfolio-cta .section-eyebrow {
  margin-bottom: 18px;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .95);
}

body.portfolio-page .cta-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}

body.portfolio-page .cta-trust span {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .94);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 980px) {

  body.portfolio-page .portfolio-overview-shell,
  body.portfolio-page .portfolio-grid {
    grid-template-columns: 1fr;
  }

  body.portfolio-page .filter-bar {
    width: 100%;
    border-radius: 28px;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  body.portfolio-page .filter-btn {
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  body.portfolio-page .port-hero {
    min-height: auto;
    padding: 132px 18px 96px;
  }

  body.portfolio-page .btn-hero-primary,
  body.portfolio-page .btn-hero-secondary {
    width: 100%;
  }

  body.portfolio-page .portfolio-overview {
    padding: 56px 18px 18px;
  }

  body.portfolio-page .overview-point {
    padding-left: 16px;
  }

  body.portfolio-page .portfolio-section,
  body.portfolio-page .portfolio-cta {
    padding-left: 18px;
    padding-right: 18px;
  }

  body.portfolio-page .project-body {
    padding: 22px 20px;
  }
}

/* ===== hero.css ===== */
/* =========================================================
   FULL-BLEED HERO — bold, crisp, darker, NO blur
   Day-night scene as sharp background, text overlaid left.
   ========================================================= */
/* Star twinkle + lamp glow keyframes used by the scene layers */
@keyframes twA { 0% { opacity: .40 } 100% { opacity: 1 } }
@keyframes twB { 0% { opacity: .55 } 100% { opacity: 1 } }
@keyframes bulbA { 0% { opacity: .86 } 100% { opacity: 1 } }

.hero-dn {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #05070f;
  --sx: 0px;
  --sy: 0px;
}

.dn-stage { position: absolute; inset: 0; z-index: 0; }

.dn-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05070f;
  user-select: none;
}

/* No dark overlay — show the hero asset directly (bright). */
.dn-scrim { display: none; }

/* ---- Copy ---- */
.hero-inner {
  position: relative;
  z-index: 3;
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
  padding: 150px 0 140px;
}

.hero-copy { max-width: 660px; }

body.home-page .hero-dn .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 9px 17px;
  border-radius: 999px;
  background: rgba(4, 22, 12, .62);
  border: 1px solid rgba(95, 232, 69, .35);
  color: #eafbe6;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none;
}

.hero-dn .hero-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5fe845;
  box-shadow: 0 0 12px 2px rgba(95, 232, 69, .9);
}

.hero-dn .hero-copy h1 {
  margin: 0 0 16px;
  font-family: 'Poppins', 'DM Sans', sans-serif;
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.035em;
  color: #ffffff;
  /* teks solid tanpa gradien/glow; bayangan tipis hanya untuk keterbacaan di atas foto */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 14px rgba(0, 0, 0, .35);
}

.hero-dn .hero-copy h1 .hero-hl {
  color: #5fe845;
}

body.home-page .hero-dn .hero-tag {
  margin: 0 0 20px;
  color: #d6ffc9;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 18px rgba(0, 0, 0, .5);
}

body.home-page .hero-dn .hero-lead {
  max-width: 660px;
  margin: 0 0 32px;
  color: #ffffff;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.72;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 2px 16px rgba(0, 0, 0, .55);
}

.hero-dn .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
}

.hero-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 14px;
  background: linear-gradient(135deg, #5fe845 0%, #00bf48 46%, #017530 100%);
  color: #04240f !important;
  font-weight: 800;
  font-size: 15.5px;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(0, 191, 72, .42);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.hero-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 50px rgba(0, 191, 72, .54);
  filter: brightness(1.05);
}

.hero-actions .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .45);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.hero-actions .btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .16);
  border-color: #ffffff;
}

body.home-page .hero-dn .hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

body.home-page .hero-dn .hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 1px 10px rgba(0, 0, 0, .5);
}

body.home-page .hero-dn .hero-trust i { color: #5fe845; font-size: 15px; }

/* ---- Time-of-day control panel (bottom-right, NO blur) ---- */
.dn-controls {
  position: absolute;
  right: 40px;
  bottom: 38px;
  z-index: 4;
  padding: 6px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(6, 12, 22, .72);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .09);
}

.dn-ind {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--acc, #7FC0F5) 28%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc, #7FC0F5) 48%, transparent);
  pointer-events: none;
  transition: transform .05s linear;
}

.dn-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: color-mix(in oklab, rgba(255, 255, 255, .55), var(--acc, #7FC0F5) calc(var(--wv, 0) * 100%));
  transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}
.dn-btn svg { width: 20px; height: 20px; }
.dn-btn:hover { transform: scale(1.12); }
.dn-btn:active { transform: scale(.94); }

.dn-bar-track {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .12);
}

.dn-bar {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--acc, #7FC0F5);
}

.dn-btn[data-phase="0"] { --wv: var(--w0, 0); }
.dn-btn[data-phase="1"] { --wv: var(--w1, 0); }
.dn-btn[data-phase="2"] { --wv: var(--w2, 0); }
.dn-btn[data-phase="3"] { --wv: var(--w3, 0); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .hero-dn {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 80px 0 30px;
    background: #05070f;
  }

  .dn-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 0;
    margin: 0;
    overflow: hidden;
  }

  .dn-stage img {
    object-fit: cover !important;
    object-position: 90% 75% !important;
  }

  .dn-scrim {
    display: none !important;
  }

  .hero-inner {
    position: relative;
    z-index: 3;
    padding: 16px 0 10px;
  }

  .hero-copy {
    max-width: 92%;
  }

  body.home-page .hero-dn .hero-kicker {
    font-size: 11px;
    padding: 6px 12px;
    margin-bottom: 14px;
    letter-spacing: .05em;
  }

  .hero-dn .hero-copy h1 {
    font-size: clamp(1.8rem, 7.2vw, 2.3rem);
    line-height: 1.15;
    font-weight: 800;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    margin-bottom: 12px;
    filter: none !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  }

  body.home-page .hero-dn .hero-tag {
    color: #d4ff00 !important;
    font-size: clamp(0.98rem, 3.8vw, 1.12rem);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 14px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  }

  body.home-page .hero-dn .hero-lead {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: clamp(0.88rem, 3.4vw, 0.96rem);
    line-height: 1.55;
    margin-bottom: 22px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  }

  .hero-dn .hero-actions {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 14.5px;
    border-radius: 12px;
  }

  body.home-page .hero-dn .hero-trust {
    margin-top: 18px;
    padding-top: 14px;
    gap: 8px 14px;
  }

  body.home-page .hero-dn .hero-trust span {
    font-size: 12px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  }

  .dn-controls {
    display: flex;
    left: 50%;
    right: auto;
    bottom: 50px;
    top: auto;
    transform: translateX(-50%) scale(0.78);
    transform-origin: bottom center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dn-btn { transition: none; }
}


/* ===== home-2026.css ===== */
/* =========================================================
   HOME 2026 — bold modern design layer (scoped to home page)
   Loaded last so it refines main.css. Content-agnostic:
   restyles existing markup only.
   ========================================================= */

/* ---------- Clean white canvas (no tinted section backgrounds) ---------- */
body.home-page { background: #ffffff !important; }
body.home-page > section:not(.hero-dn) { background: #ffffff !important; }
/* ID-level overrides beat main.css `#id{...!important}` rules */
body.home-page #tentang,
body.home-page #portofolio,
body.home-page #pilar,
body.home-page #edukasi,
body.home-page #tuk,
body.home-page #solusi,
body.home-page .howto-section,
body.home-page .home-articles,
body.home-page .calc-section,
body.home-page .solutions,
body.home-page .services { background: #ffffff !important; }

/* ---------- Un-box: let blocks blend into the white ---------- */
/* Inverter "Cara Kerja" — remove the outer frame/box */
body.home-page .howto-frame {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.home-page .howto-frame::before { display: none !important; }

/* Stats — remove the card boxes, let numbers sit on white */
body.home-page #portofolio .stat-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 10px !important;
}
body.home-page #portofolio .stat-card:hover { transform: none !important; box-shadow: none !important; }
/* unify stat icons to brand green (clean, consistent) */
body.home-page #portofolio .stat-icon,
body.home-page #portofolio .stat-card:nth-child(n) .stat-icon {
  background: linear-gradient(135deg, #00bf48, #017530) !important;
}

/* ---------- Rhythm & containers ---------- */
/* Direct-child only, so footer <section> bands are never affected. */
body.home-page > section:not(.hero-dn):not([style*="padding"]) {
  padding-block: clamp(72px, 8vw, 120px);
}
body.home-page .container,
body.home-page .container2 {
  width: min(1200px, calc(100% - 40px));
}

/* ---------- Section headers ---------- */
body.home-page .section-title { margin-bottom: clamp(40px, 5vw, 64px); }

body.home-page .section-eyebrow {
  background: rgba(0, 191, 72, .09);
  border: 1px solid rgba(0, 191, 72, .18);
  box-shadow: none;
  color: #017530;
  letter-spacing: .18em;
}
body.home-page .section-eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #00bf48;
  box-shadow: 0 0 0 3px rgba(0, 191, 72, .18);
}

body.home-page .section-title h2,
body.home-page h2.section-title,
body.home-page .section-header h2 {
  font-size: clamp(2.15rem, 3.7vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -.038em;
  color: #0c2a17;
}
body.home-page .section-title h2 { background: none; }

/* gradient accent bar under headings */
body.home-page .section-title span {
  width: 72px; height: 5px; margin-top: 22px;
  background: linear-gradient(90deg, #5fe845, #00bf48 60%, #017530);
  border-radius: 999px;
}
body.home-page .section-intro { color: #47604f; font-size: clamp(1rem, 1.2vw, 1.08rem); }
body.home-page .section-intro a { color: #017530; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(0,191,72,.35); }

/* ---------- Universal premium card (clean & airy) ---------- */
body.home-page .box,
body.home-page .layanan-card,
body.home-page .step,
body.home-page .pilar-card,
body.home-page .stat-card,
body.home-page .value-card,
body.home-page .port-card {
  border: 1px solid rgba(1, 69, 32, .06);
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(1, 51, 24, .05);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
body.home-page .box:hover,
body.home-page .layanan-card:hover,
body.home-page .pilar-card:hover,
body.home-page .value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(1, 51, 24, .10);
  border-color: rgba(0, 191, 72, .22);
}

/* ---------- About / Tentang ---------- */
body.home-page .about {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
body.home-page .about-text > p { color: #47604f; line-height: 1.8; font-size: 1.02rem; }
body.home-page .about-text > p strong { color: #0c2a17; }
body.home-page .about-points { display: grid; gap: 14px; margin: 26px 0; }
body.home-page .about-point {
  position: relative;
  padding: 16px 18px 16px 52px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(1, 69, 32, .08);
}
body.home-page .about-point::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 14px; top: 16px;
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #5fe845, #00bf48);
  color: #04240f; font-size: 12px;
}
body.home-page .about-point strong { display: block; color: #0c2a17; margin-bottom: 3px; }
body.home-page .about-point span { color: #55705e; font-size: .93rem; }

body.home-page .about-media { position: relative; }
body.home-page .about-media > img {
  width: 100%; height: auto; border-radius: 24px;
  box-shadow: 0 30px 60px rgba(1, 51, 24, .18);
}
body.home-page .about-media::before {
  content: ""; position: absolute; inset: -14px -14px auto auto;
  width: 60%; height: 60%; z-index: -1; border-radius: 28px;
  background: radial-gradient(circle at top right, rgba(95,232,69,.35), transparent 70%);
}
body.home-page .about-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 16px;
}
body.home-page .about-meta > div {
  padding: 14px 16px; border-radius: 16px;
  background: #ffffff; border: 1px solid rgba(1,69,32,.09);
  box-shadow: 0 10px 26px rgba(1,51,24,.06);
}
body.home-page .about-meta strong { display: block; color: #017530; font-size: .95rem; }
body.home-page .about-meta span { color: #55705e; font-size: .82rem; }

/* Visi & Misi */
body.home-page .visi-misi { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
body.home-page .visi-misi .box { padding: 34px 32px; }
body.home-page .icon-circle {
  width: 58px; height: 58px; border-radius: 18px;
  display: grid; place-items: center; font-size: 22px; color: #fff; margin-bottom: 18px;
  background: linear-gradient(135deg, #00bf48, #017530);
  box-shadow: 0 12px 26px rgba(0,191,72,.28);
}
body.home-page .icon-circle.yellow { background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 12px 26px rgba(234,88,12,.26); }
body.home-page .misi-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
body.home-page .misi-list li { display: flex; gap: 12px; color: #47604f; line-height: 1.6; }
body.home-page .misi-list li i { color: #00bf48; margin-top: 5px; }

/* ---------- Alur Proyek / steps ---------- */
/* Suppress main.css's own number badge so ours doesn't double-count */
body.home-page .solutions .step::before { content: none !important; counter-increment: none !important; display: none !important; }
body.home-page .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
body.home-page .step { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
body.home-page .step-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
body.home-page .step-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .5s ease; }
body.home-page .step:hover .step-img img { transform: scale(1.06); }
body.home-page .step-text { padding: 22px 22px 26px; position: relative; }
body.home-page .step-text::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: -26px; right: 18px;
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, #5fe845, #00bf48); color: #04240f;
  font-weight: 800; font-size: 15px; box-shadow: 0 10px 22px rgba(0,191,72,.34);
}
body.home-page .step-text h4 { font-size: 1.12rem; color: #0c2a17; margin: 0 0 8px; }
body.home-page .step-text p { color: #55705e; font-size: .92rem; line-height: 1.6; margin: 0; }
body.home-page .section-desc { text-align: center; max-width: 680px; margin: -18px auto 40px; color: #55705e; }

/* ---------- Layanan (On/Off/Hybrid) ---------- */
body.home-page .layanan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
body.home-page .layanan-card { padding: 34px 30px; position: relative; overflow: hidden; }
body.home-page .layanan-card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, #5fe845, #00bf48, #017530);
  transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
body.home-page .layanan-card:hover::after { transform: scaleX(1); }
body.home-page .layanan-card .icon {
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  font-size: 24px; color: #fff; margin-bottom: 20px;
  background: linear-gradient(135deg, #00bf48, #017530);
  box-shadow: 0 14px 28px rgba(0,191,72,.26);
}
body.home-page .layanan-card h4 { font-size: 1.22rem; color: #0c2a17; margin: 0 0 10px; }
body.home-page .layanan-card p { color: #55705e; line-height: 1.65; margin: 0 0 18px; }

/* ---------- Portfolio stats (big, clean numbers) ---------- */
body.home-page .stat-number,
body.home-page #portofolio .stat-number {
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #00bf48, #017530);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.home-page #portofolio .stat-card {
  border-radius: 20px;
  padding: 30px 22px;
  box-shadow: 0 10px 34px rgba(1, 51, 24, .05);
}
body.home-page #portofolio .stat-icon {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px;
}
body.home-page #portofolio .stat-label {
  font-size: 13.5px; color: #6b8177; margin-top: 6px;
}
body.home-page .port-card { overflow: hidden; padding: 0; }
body.home-page .port-card-text { padding: 20px 22px 24px; }
body.home-page .port-card-text h4 { color: #0c2a17; margin: 0 0 6px; font-size: 1.1rem; }
body.home-page .port-card-text p { color: #55705e; font-size: .92rem; margin: 0; }

/* ---------- Pilar cards ---------- */
body.home-page .pilar-card { padding: 36px 32px; }
body.home-page .pilar-card .icon-circle { border-radius: 18px; }

/* ---------- Buttons refinements ---------- */
body.home-page .btn-arrow2 { color: #017530; }
body.home-page .btn-arrow2:hover { color: #00bf48; }
body.home-page .btn.secondary,
body.home-page .btn-cta-secondary {
  border-color: rgba(0, 191, 72, .5);
  color: #017530 !important;
  background: #ffffff;
}
body.home-page .btn.secondary:hover { background: linear-gradient(135deg, #00bf48, #017530); color: #fff !important; border-color: transparent; }

/* ---------- Article cards (OpenSolar "recently published" feel) ---------- */
body.home-page .home-articles .ha-card {
  border: 1px solid rgba(1, 69, 32, .06);
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(1, 51, 24, .05);
}
body.home-page .home-articles .ha-card:hover {
  box-shadow: 0 22px 50px rgba(1, 51, 24, .11);
  border-color: rgba(0, 191, 72, .2);
}
body.home-page .home-articles .ha-body h3 { font-size: 1.16rem; color: #0c2a17; letter-spacing: -.01em; }
body.home-page .home-articles .ha-cat { background: rgba(0, 191, 72, .08); color: #017530; }
body.home-page .home-articles .ha-read { color: #00bf48; }

/* ---------- Portfolio project cards: image zoom on hover ---------- */
body.home-page .port-card { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease; }
body.home-page .port-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(1, 51, 24, .10); border-color: rgba(0, 191, 72, .22); }
body.home-page .port-slider-track img { transition: transform .5s ease; }
body.home-page .port-card:hover .port-slider-track img { transform: scale(1.04); }

/* ---------- "Learn more" arrow links ---------- */
body.home-page .btn-arrow2 {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: #017530;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  body.home-page .about { grid-template-columns: 1fr; }
  body.home-page .steps { grid-template-columns: repeat(2, 1fr); }
  body.home-page .layanan { grid-template-columns: 1fr; }
  body.home-page .visi-misi { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body.home-page .steps { grid-template-columns: 1fr; }
  body.home-page .about-meta { grid-template-columns: 1fr; }
}


/* ===== home-v3.css ===== */
/* =========================================================
   HOME V3 — clean OpenSolar / SolarKita-style component system
   Pure white canvas, green accents. All new sections use the
   uh-* classes below (foundation) + their own scoped classes.
   ========================================================= */

/* ---------------- Foundation ---------------- */
body:is(.home-page,.uh-page) .uh-sec { position: relative; padding: clamp(24px, 3vw, 44px) 0; background: #ffffff; }
body:is(.home-page,.uh-page) .uh-container { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }

body:is(.home-page,.uh-page) .uh-head { max-width: 780px; margin: 0 auto clamp(40px, 5vw, 62px); text-align: center; }
body:is(.home-page,.uh-page) .uh-head.uh-head--left { text-align: left; margin-left: 0; margin-right: 0; }

body:is(.home-page,.uh-page) .uh-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(0, 191, 72, .08); border: 1px solid rgba(0, 191, 72, .2);
  color: #017530; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
body:is(.home-page,.uh-page) .uh-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #00bf48; box-shadow: 0 0 0 3px rgba(0, 191, 72, .18);
}

body:is(.home-page,.uh-page) .uh-h2 {
  margin: 18px 0 14px; font-family: 'Poppins', 'DM Sans', sans-serif;
  font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.038em;
  color: #0c2a17; font-weight: 800;
}
body:is(.home-page,.uh-page) .uh-h2 em {
  font-style: normal;
  background: linear-gradient(120deg, #00bf48, #017530);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body:is(.home-page,.uh-page) .uh-h3 { font-family: 'Poppins','DM Sans',sans-serif; color: #0c2a17; font-weight: 700; letter-spacing: -.02em; }
body:is(.home-page,.uh-page) .uh-lead { margin: 0; color: #4a6154; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.75; }
body:is(.home-page,.uh-page) .uh-head .uh-lead { max-width: 640px; margin-inline: auto; }
body:is(.home-page,.uh-page) .uh-head--left .uh-lead { margin-inline: 0; }
body:is(.home-page,.uh-page) .uh-sec p { color: #4a6154; }
body:is(.home-page,.uh-page) .uh-muted { color: #6b8177; }

/* Buttons */
body:is(.home-page,.uh-page) .uh-btn, body:is(.home-page,.uh-page) .uh-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, filter .25s ease;
}
body:is(.home-page,.uh-page) .uh-btn {
  background: linear-gradient(135deg, #5fe845 0%, #00bf48 46%, #017530 100%);
  color: #04240f !important; box-shadow: 0 14px 30px rgba(0, 191, 72, .3);
}
body:is(.home-page,.uh-page) .uh-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0, 191, 72, .4); filter: brightness(1.04); }
body:is(.home-page,.uh-page) .uh-btn-ghost { background: #fff; border: 1.5px solid rgba(1, 69, 32, .16); color: #017530 !important; }
body:is(.home-page,.uh-page) .uh-btn-ghost:hover { transform: translateY(-2px); border-color: rgba(0, 191, 72, .5); background: #f4fbf3; }
body:is(.home-page,.uh-page) .uh-link { display: inline-flex; align-items: center; gap: 8px; color: #00bf48 !important; font-weight: 700; text-decoration: none; }
body:is(.home-page,.uh-page) .uh-link i, body:is(.home-page,.uh-page) .uh-link svg { transition: transform .2s ease; }
body:is(.home-page,.uh-page) .uh-link:hover i { transform: translateX(4px); }

/* Card + icon */
body:is(.home-page,.uh-page) .uh-card {
  background: #fff; border: 1px solid rgba(1, 69, 32, .07); border-radius: 20px;
  box-shadow: 0 10px 34px rgba(1, 51, 24, .05);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}
body:is(.home-page,.uh-page) .uh-card:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(1, 51, 24, .1); border-color: rgba(0, 191, 72, .22); }
body:is(.home-page,.uh-page) .uh-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  font-size: 22px; color: #fff !important; background: linear-gradient(135deg, #00bf48, #017530);
  box-shadow: 0 12px 26px rgba(0, 191, 72, .26); flex-shrink: 0;
}
body:is(.home-page,.uh-page) .uh-icon i { color: #fff !important; }

/* Media */
body:is(.home-page,.uh-page) .uh-media { position: relative; overflow: hidden; border-radius: 24px; }
body:is(.home-page,.uh-page) .uh-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Grids */
body:is(.home-page,.uh-page) .uh-grid { display: grid; gap: 24px; }
body:is(.home-page,.uh-page) .uh-g2 { grid-template-columns: repeat(2, 1fr); }
body:is(.home-page,.uh-page) .uh-g3 { grid-template-columns: repeat(3, 1fr); }
body:is(.home-page,.uh-page) .uh-g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { body:is(.home-page,.uh-page) .uh-g3, body:is(.home-page,.uh-page) .uh-g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { body:is(.home-page,.uh-page) .uh-g2, body:is(.home-page,.uh-page) .uh-g3, body:is(.home-page,.uh-page) .uh-g4 { grid-template-columns: 1fr; } }

/* Split (media + copy) */
body:is(.home-page,.uh-page) .uh-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
body:is(.home-page,.uh-page) .uh-split--wide-left { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 900px) { body:is(.home-page,.uh-page) .uh-split, body:is(.home-page,.uh-page) .uh-split--wide-left { grid-template-columns: 1fr; } }

/* Pill / badge */
body:is(.home-page,.uh-page) .uh-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
body:is(.home-page,.uh-page) .uh-badge--green { background: rgba(0, 191, 72, .1); color: #017530; }
body:is(.home-page,.uh-page) .uh-badge--orange { background: #fff1e6; color: #ea580c; }


/* ===== home-v3-sections.css ===== */
/* ===== about (tentang) ===== */
/* ===== Tentang Kami — premium split intro + Visi & Misi ===== */
body.home-page #tentang .tentang-split { align-items: center; }

body.home-page #tentang .tentang-copy { max-width: 560px; }
body.home-page #tentang .tentang-copy .uh-lead { margin-top: 8px; }

/* Portrait media + soft frame */
body.home-page #tentang .tentang-media {
  max-width: 500px;
  margin-inline: auto;
  box-shadow: 0 30px 70px rgba(1, 51, 24, .16);
  overflow: visible !important;
}
body.home-page #tentang .tentang-media img { height: auto; border-radius: 24px; }

/* Floating "End-to-end EPC" & "Multi-sektor" separate badge containers on the image */
body.home-page #tentang .tentang-badges {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 3;
}
body.home-page #tentang .tentang-badge-card {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(0, 191, 72, .20);
  box-shadow: 0 10px 24px rgba(1, 51, 24, .14), 0 2px 6px rgba(0, 0, 0, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.home-page #tentang .tentang-badge-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 191, 72, .45);
  box-shadow: 0 18px 40px rgba(1, 51, 24, .26), 0 4px 12px rgba(0, 0, 0, .08);
}
body.home-page #tentang .tentang-badge-ic {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px; color: #fff; font-size: 17px;
  background: linear-gradient(135deg, #00bf48, #017530);
  box-shadow: 0 8px 18px rgba(0, 191, 72, .28);
}
body.home-page #tentang .tentang-badge-body strong {
  display: block; font-family: 'Poppins', 'DM Sans', sans-serif;
  color: #0c2a17; font-size: 15px; font-weight: 700; line-height: 1.2;
}
body.home-page #tentang .tentang-badge-body span {
  display: block; color: #4a6154; font-size: 12.5px; line-height: 1.35; margin-top: 2px;
}

/* Credibility checklist */
body.home-page #tentang .tentang-points {
  list-style: none; margin: 26px 0 30px; padding: 0;
  display: grid; gap: 18px;
}
body.home-page #tentang .tentang-point { display: flex; align-items: flex-start; gap: 14px; }
body.home-page #tentang .tentang-check {
  width: 30px; height: 30px; flex-shrink: 0; margin-top: 2px;
  display: grid; place-items: center;
  border-radius: 50%; color: #fff; font-size: 13px;
  background: linear-gradient(135deg, #5fe845, #00bf48);
  box-shadow: 0 6px 14px rgba(0, 191, 72, .28);
}
body.home-page #tentang .tentang-point-body strong {
  display: block; font-family: 'Poppins', 'DM Sans', sans-serif;
  color: #0c2a17; font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 3px;
}
body.home-page #tentang .tentang-point-body span {
  display: block; color: #4a6154; font-size: 14.5px; line-height: 1.6;
}

/* Actions */
body.home-page #tentang .tentang-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Visi & Misi cards */
body.home-page #tentang .tentang-vm {
  margin-top: clamp(48px, 6vw, 74px);
  align-items: stretch;
}
body.home-page #tentang .tentang-card { padding: clamp(26px, 3vw, 38px); }
body.home-page #tentang .tentang-card .uh-icon { margin-bottom: 20px; }
body.home-page #tentang .tentang-card-title { font-size: 1.35rem; margin: 0 0 12px; }
body.home-page #tentang .tentang-card p { margin: 0; color: #4a6154; font-size: 15px; line-height: 1.75; }

body.home-page #tentang .tentang-misi-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
}
body.home-page #tentang .tentang-misi-list li {
  display: flex; align-items: flex-start; gap: 12px;
  color: #4a6154; font-size: 14.5px; line-height: 1.6;
}
body.home-page #tentang .tentang-misi-list .tentang-check {
  width: 24px; height: 24px; font-size: 11px; margin-top: 1px;
}

/* Responsive */
@media (max-width: 900px) {
  body.home-page #tentang .tentang-media { max-width: 440px; margin-top: 4px; }
}
@media (max-width: 480px) {
  body.home-page #tentang .tentang-actions .uh-btn,
  body.home-page #tentang .tentang-actions .uh-btn-ghost { flex: 1 1 100%; }
}

/* ===== steps (alur) ===== */
body.home-page #alur .alur-grid { margin-top: 8px; }

body.home-page #alur .alur-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Image sits flush at the top of the card; card overflow clips it to the
   card radius, so the media itself needs no radius. Fixed 4/3 ratio crops
   both portrait (pict2/3/4) and landscape (monitoring) images uniformly. */
body.home-page #alur .alur-card .alur-card__media {
  border-radius: 0;
  aspect-ratio: 4 / 3;
  width: 100%;
}

body.home-page #alur .alur-card__num {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: 'Poppins', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: #04240f;
  background: linear-gradient(135deg, #5fe845 0%, #00bf48 100%);
  box-shadow: 0 8px 18px rgba(0, 191, 72, .32);
}

body.home-page #alur .alur-card__body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

body.home-page #alur .alur-card__title {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.25;
}

body.home-page #alur .alur-card__body p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.65;
}

@media (max-width: 620px) {
  body.home-page #alur .alur-card .alur-card__media { aspect-ratio: 16 / 10; }
}

/* ===== services (solusi) ===== */
body.home-page #solusi .uh-head .uh-lead a {
  color: #017530;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 191, 72, .35);
  transition: color .2s ease, border-color .2s ease;
}
body.home-page #solusi .uh-head .uh-lead a:hover {
  color: #00bf48;
  border-bottom-color: #00bf48;
}

body.home-page #solusi .solusi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 30px 30px;
  overflow: hidden;
}
body.home-page #solusi .solusi-card .uh-icon {
  margin-bottom: 22px;
}
body.home-page #solusi .solusi-card__title {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
}
body.home-page #solusi .solusi-card p {
  margin: 0 0 26px;
  font-size: 1rem;
  line-height: 1.72;
}
body.home-page #solusi .solusi-card__link {
  margin-top: auto;
}

/* Featured (most-popular) Hybrid card — subtle green top accent bar */
body.home-page #solusi .solusi-card--featured {
  border-color: rgba(0, 191, 72, .22);
  padding-top: 40px;
}
body.home-page #solusi .solusi-card--featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #5fe845 0%, #00bf48 55%, #017530 100%);
}
body.home-page #solusi .solusi-card__badge {
  position: absolute;
  top: 22px;
  right: 22px;
}

@media (max-width: 620px) {
  body.home-page #solusi .solusi-card {
    padding: 30px 24px 26px;
  }
  body.home-page #solusi .solusi-card--featured {
    padding-top: 40px;
  }
}

/* ===== sectors (sektor) ===== */
/* ===== #sektor — PLTS untuk Berbagai Kebutuhan (sector showcase) ===== */
body.home-page #sektor .sektor-grid { margin-top: 4px; }

/* Image card */
body.home-page #sektor .sektor-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 4 / 3;
  text-decoration: none;
  background: #eef4ee;
  border: 1px solid rgba(1, 69, 32, .07);
  box-shadow: 0 10px 30px rgba(1, 51, 24, .06);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
  isolation: isolate;
}
body.home-page #sektor .sektor-card:hover,
body.home-page #sektor .sektor-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(1, 51, 24, .16);
  border-color: rgba(0, 191, 72, .28);
}
body.home-page #sektor .sektor-card:focus-visible {
  outline: 3px solid rgba(0, 191, 72, .55);
  outline-offset: 3px;
}

/* Image scales slightly on hover */
body.home-page #sektor .sektor-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
body.home-page #sektor .sektor-card:hover img,
body.home-page #sektor .sektor-card:focus-visible img {
  transform: scale(1.07);
}

/* Dark-to-transparent bottom gradient overlay */
body.home-page #sektor .sektor-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(4, 26, 13, .82) 0%,
    rgba(4, 26, 13, .5) 26%,
    rgba(4, 26, 13, .1) 52%,
    rgba(4, 26, 13, 0) 72%);
  transition: background .35s ease;
}
body.home-page #sektor .sektor-card:hover .sektor-overlay,
body.home-page #sektor .sektor-card:focus-visible .sektor-overlay {
  background: linear-gradient(to top,
    rgba(1, 60, 27, .9) 0%,
    rgba(2, 70, 30, .55) 30%,
    rgba(4, 26, 13, .12) 58%,
    rgba(4, 26, 13, 0) 78%);
}

/* White label + arrow */
body.home-page #sektor .sektor-label {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #ffffff;
}
body.home-page #sektor .sektor-name {
  font-family: 'Poppins', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
body.home-page #sektor .sektor-label i {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 13px;
  color: #ffffff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
body.home-page #sektor .sektor-card:hover .sektor-label i,
body.home-page #sektor .sektor-card:focus-visible .sektor-label i {
  transform: translateX(4px);
  background: linear-gradient(135deg, #5fe845, #00bf48);
  border-color: rgba(255, 255, 255, .5);
}

@media (prefers-reduced-motion: reduce) {
  body.home-page #sektor .sektor-card,
  body.home-page #sektor .sektor-card img,
  body.home-page #sektor .sektor-label i { transition: none; }
  body.home-page #sektor .sektor-card:hover img,
  body.home-page #sektor .sektor-card:focus-visible img { transform: none; }
}

/* Larger tap targets / label on mobile */
@media (max-width: 620px) {
  body.home-page #sektor .sektor-card { aspect-ratio: 16 / 10; }
  body.home-page #sektor .sektor-label { left: 20px; right: 20px; bottom: 18px; }
}

/* ===== portfolio (portofolio) ===== */
/* ===== Portofolio section (scoped) ===== */

body.home-page #stats-band {
  padding: 4px 0 0;
  /* Naik menembus hero seperti Figma: section -43px → kartu memotong hero 39px.
     Dipadu background kartu rgba(255,255,255,.61) + blur, hero terlihat samar
     di balik tepi atas kartu (efek kaca). */
  margin-top: -43px;
  position: relative;
  z-index: 5;
}
body.home-page #tentang {
  padding-top: clamp(14px, 2vw, 24px);
}
body.home-page #portofolio .port-stats,
body.home-page #stats-band .port-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin: 0;
  padding: 24px clamp(20px, 2.5vw, 32px);
  border-bottom: none;
  /* glassmorphism - like tentang-badge */
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(0, 191, 72, .24);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(1, 51, 24, .18), 0 2px 8px rgba(0, 0, 0, .05);
}
body.home-page #portofolio .port-stat,
body.home-page #stats-band .port-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
body.home-page #portofolio .port-stat-icon,
body.home-page #stats-band .port-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 15px;
}
body.home-page #portofolio .stat-number,
body.home-page #stats-band .stat-number {
  font-family: 'Poppins', 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(120deg, #00bf48, #017530);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-page #portofolio .port-stat-label,
body.home-page #stats-band .port-stat-label {
  color: #4a6154;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
  max-width: 15ch;
}
/* Override for stats-band (light glass, use default dark text) */
body.home-page #stats-band .stat-number {
  background: linear-gradient(120deg, #00bf48, #017530);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-page #stats-band .port-stat-label {
  color: #4a6154;
}

/* Stats band — dicocokkan ke desain Figma (node 83:65).
   Ikon jadi satu bar segmen: tiap segmen 115.3% lebar kolomnya sehingga
   saling menimpa 15.3% (sesuai Figma: lebar 267px, pitch 231.59px) dan
   membentuk bar utuh dengan sudut 11px yang melengkung halus di transisi.
   Bar di-inset 9.43% dari tepi kartu, persis proporsi Figma. */
body.home-page #stats-band .port-stats {
  column-gap: 0;
  padding-inline: 9.43%;
  background: rgba(255, 255, 255, .61);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-width: 1px;
}
body.home-page #stats-band .port-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 115.3%;
  height: 38px;
  border-radius: 11px;
  font-size: 15px;
  color: #fff;
}
body.home-page #stats-band .stat-number { margin-top: 13px; white-space: nowrap; }

/* Inset 9.43% (nilai Figma) hanya pas di layar lebar. Di bawah ~1100px kolom
   jadi terlalu sempit dan angka pecah baris, jadi insetnya dilonggarkan —
   yang penting tampilannya tetap sama. */
@media (max-width: 1100px) {
  body.home-page #stats-band .port-stats { padding-inline: max(20px, 5.5%); }
}

/* Gradient & drop-shadow per segmen (nilai persis dari Figma) */
body.home-page #stats-band .port-stat:nth-child(1) .port-stat-icon {
  background: linear-gradient(171.84deg, #00bf48 0%, #017530 100%);
  box-shadow: 0 12px 13px rgba(0, 191, 72, .26);
}
body.home-page #stats-band .port-stat:nth-child(2) .port-stat-icon {
  background: linear-gradient(171.84deg, #fb923c 0%, #ea580c 100%);
  box-shadow: 0 12px 13px rgba(234, 88, 12, .26);
}
body.home-page #stats-band .port-stat:nth-child(3) .port-stat-icon {
  background: linear-gradient(171.84deg, #38bdf8 0%, #2563eb 100%);
  box-shadow: 0 12px 13px rgba(37, 99, 235, .26);
}
body.home-page #stats-band .port-stat:nth-child(4) .port-stat-icon {
  background: linear-gradient(171.84deg, #2dd4bf 0%, #0d9488 100%);
  box-shadow: 0 12px 13px rgba(13, 148, 136, .26);
}
body.home-page #stats-band .port-stat:nth-child(5) .port-stat-icon {
  background: linear-gradient(171.84deg, #a3e635 0%, #4d7c0f 100%);
  box-shadow: 0 12px 13px rgba(77, 124, 15, .26);
}

/* Part B — project grid */
body.home-page #portofolio .port-grid {
  align-items: stretch;
}
body.home-page #portofolio .port-proj {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.home-page #portofolio .port-proj-media {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
body.home-page #portofolio .port-proj-media img {
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
body.home-page #portofolio .port-proj:hover .port-proj-media img {
  transform: scale(1.06);
}
body.home-page #portofolio .port-proj-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, .94);
  color: #017530;
  box-shadow: 0 6px 16px rgba(1, 51, 24, .14);
  backdrop-filter: blur(4px);
}
body.home-page #portofolio .port-proj-badge i {
  color: #00bf48;
  font-size: 11px;
}
body.home-page #portofolio .port-proj-body {
  padding: 22px 22px 26px;
}
body.home-page #portofolio .port-proj-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-size: 1.25rem;
}
body.home-page #portofolio .port-proj-title i {
  color: #00bf48;
  font-size: 1rem;
}
body.home-page #portofolio .port-proj-cap {
  margin: 0;
  color: #4a6154;
  font-size: .95rem;
  line-height: 1.6;
}

/* CTA */
body.home-page #portofolio .port-cta {
  text-align: center;
  margin-top: clamp(38px, 5vw, 54px);
}

/* Responsive */
@media (max-width: 768px) {
  body.home-page #stats-band {
    padding: 0;
    margin-top: -28px;
    position: relative;
    z-index: 5;
  }

  body.home-page #stats-band .uh-container {
    width: min(1200px, calc(100% - 24px)) !important;
    margin-inline: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.home-page #tentang {
    padding-top: 24px !important;
  }

  body.home-page #portofolio .port-stats,
  body.home-page #stats-band .port-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 18px 10px !important;
    width: 100% !important;
    border-radius: 18px !important;
    border: 1.5px solid rgba(0, 191, 72, .22) !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 14px 34px rgba(1, 51, 24, .16) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.home-page #portofolio .port-stats::-webkit-scrollbar,
  body.home-page #stats-band .port-stats::-webkit-scrollbar {
    display: none;
  }

  body.home-page #portofolio .port-stat,
  body.home-page #stats-band .port-stat {
    flex: 1 1 0px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 0 1px !important;
  }

  body.home-page #portofolio .port-stat-icon,
  body.home-page #stats-band .port-stat-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }

  body.home-page #portofolio .stat-number,
  body.home-page #stats-band .stat-number {
    font-size: clamp(0.88rem, 3.1vw, 1.08rem) !important;
    white-space: nowrap !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 2px 0 !important;
  }

  body.home-page #portofolio .port-stat-label,
  body.home-page #stats-band .port-stat-label {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 24px !important;
  }
}

/* ===== pillars (pilar) ===== */
body.home-page #pilar .pilar-grid { margin-top: 6px; }

body.home-page #pilar .pilar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 3vw, 40px);
  height: 100%;
}

body.home-page #pilar .pilar-title {
  margin: 22px 0 12px;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

body.home-page #pilar .pilar-text {
  margin: 0 0 28px;
  line-height: 1.72;
  font-size: 1rem;
}

body.home-page #pilar .pilar-link {
  margin-top: auto;
}

/* Featured card — green ring */
body.home-page #pilar .pilar-card--featured {
  border: 2px solid rgba(0, 191, 72, .5);
  box-shadow: 0 18px 46px rgba(0, 191, 72, .14);
}
body.home-page #pilar .pilar-card--featured:hover {
  border-color: rgba(0, 191, 72, .7);
  box-shadow: 0 26px 58px rgba(0, 191, 72, .2);
}

/* Orange BARU badge floats on the top edge */
body.home-page #pilar .pilar-badge {
  position: absolute;
  top: -13px;
  right: clamp(20px, 3vw, 28px);
  box-shadow: 0 6px 16px rgba(234, 88, 12, .18);
}

@media (max-width: 620px) {
  body.home-page #pilar .pilar-card { padding: 26px 24px; }
}

/* ===== academy (edukasi) ===== */
/* ===== Ufuk Hijau Academy / Program Edukasi (#edukasi) ===== */
body.home-page #edukasi .edu-programs { margin-bottom: clamp(52px, 6vw, 84px); }

/* Program cards */
body.home-page #edukasi .edu-prog {
  padding: clamp(26px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.home-page #edukasi .edu-prog--live {
  border: 1.5px solid rgba(0, 191, 72, .34);
  box-shadow: 0 16px 40px rgba(0, 191, 72, .14);
}
body.home-page #edukasi .edu-prog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
body.home-page #edukasi .edu-num {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  display: grid; place-items: center;
  font-family: 'Poppins', 'DM Sans', sans-serif;
  font-weight: 800; font-size: 16px;
  background: #eef4f0; color: #6b8177;
}
body.home-page #edukasi .edu-num--live {
  background: linear-gradient(135deg, #00bf48, #017530);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 191, 72, .28);
}
body.home-page #edukasi .edu-badge--soon { background: #eef4f0; color: #6b8177; }
body.home-page #edukasi .edu-prog-title {
  font-size: clamp(1.14rem, 1.5vw, 1.3rem);
  line-height: 1.25;
  margin: 0 0 10px;
}
body.home-page #edukasi .edu-prog-date {
  display: flex; align-items: center; gap: 8px;
  color: #ea580c; font-weight: 600;
  font-size: .84rem; margin: 0 0 12px;
}
body.home-page #edukasi .edu-prog-meta {
  display: flex; align-items: flex-start; gap: 9px;
  color: #6b8177; font-size: .9rem; line-height: 1.55;
  margin: 0;
}
body.home-page #edukasi .edu-prog-meta i { color: #00bf48; margin-top: 3px; }
body.home-page #edukasi .edu-prog-cta {
  align-self: stretch;
  margin-top: auto;
  padding: 18px 26px;
  width: 100%;
  display: flex;
}
body.home-page #edukasi .edu-prog--live .edu-prog-cta { margin-top: 24px; }

/* Features + enrol split */
body.home-page #edukasi .edu-diff { align-items: start; }
body.home-page #edukasi .edu-diff-title {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.15;
  margin: 0 0 14px;
}
body.home-page #edukasi .edu-diff-lead { margin: 0 0 30px; }
body.home-page #edukasi .edu-feature-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 22px;
}
body.home-page #edukasi .edu-feature { display: flex; gap: 16px; }
body.home-page #edukasi .edu-fic {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 18px; color: #fff;
  background: linear-gradient(135deg, #00bf48, #017530);
  box-shadow: 0 10px 22px rgba(0, 191, 72, .24);
}
body.home-page #edukasi .edu-feature-body strong {
  display: block;
  font-family: 'Poppins', 'DM Sans', sans-serif;
  font-weight: 700; color: #0c2a17;
  font-size: 1.05rem; letter-spacing: -.01em;
  margin-bottom: 4px;
}
body.home-page #edukasi .edu-feature-body p {
  margin: 0; color: #4a6154;
  font-size: .94rem; line-height: 1.62;
}

/* Enrol card */
body.home-page #edukasi .edu-enrol {
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 1.5px solid rgba(0, 191, 72, .34);
  box-shadow: 0 20px 50px rgba(0, 191, 72, .16);
}
body.home-page #edukasi .edu-enrol-media {
  border-radius: 0;
  aspect-ratio: 16 / 9;
}
body.home-page #edukasi .edu-enrol-body { padding: clamp(24px, 2.6vw, 30px); }
body.home-page #edukasi .edu-enrol-badge { margin-bottom: 14px; }
body.home-page #edukasi .edu-enrol-title {
  font-size: clamp(1.24rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  margin: 0 0 8px;
}
body.home-page #edukasi .edu-enrol-note {
  color: #4a6154; font-size: .92rem; line-height: 1.5;
  margin: 0 0 6px;
}
body.home-page #edukasi .edu-enrol-price {
  color: #ea580c; font-weight: 700;
  font-size: .9rem; line-height: 1.5;
  margin: 0 0 20px;
}
body.home-page #edukasi .edu-enrol-cta { width: 100%; }

@media (max-width: 900px) {
  body.home-page #edukasi .edu-diff-lead { margin-bottom: 26px; }
}

/* ===== tuk_cta (tuk-tujuan) ===== */
/* ============ (A) TUK band ============ */
body.home-page #tuk .tuk-media {
  aspect-ratio: 16 / 9;
  box-shadow: 0 24px 54px rgba(1, 51, 24, .1);
}
body.home-page #tuk .tuk-media-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #017530;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(1, 51, 24, .16);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.home-page #tuk .tuk-media-chip i { color: #00bf48; }
body.home-page #tuk .tuk-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 28px;
}
body.home-page #tuk .tuk-badges i { font-size: 12px; }
body.home-page #tuk .tuk-btn { margin-top: 2px; }
@media (max-width: 900px) {
  body.home-page #tuk .tuk-media { aspect-ratio: 16 / 10; }
}

/* ============ (B) Apa Tujuan Anda Hari Ini? ============ */
body.home-page #tujuan .tujuan-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(30px, 3.6vw, 42px) clamp(24px, 3vw, 34px);
}
body.home-page #tujuan .tujuan-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  font-size: 25px;
  margin-bottom: 22px;
}
body.home-page #tujuan .tujuan-title {
  font-size: 1.42rem;
  margin: 0 0 12px;
}
body.home-page #tujuan .tujuan-desc {
  color: #4a6154;
  font-size: .98rem;
  line-height: 1.7;
  margin: 0 0 28px;
}
body.home-page #tujuan .tujuan-cta {
  margin-top: auto;
  width: 100%;
}

/* Featured (green) card */
body.home-page #tujuan .tujuan-card--featured {
  position: relative;
  border: 2px solid rgba(0, 191, 72, .45);
  box-shadow: 0 24px 54px rgba(0, 191, 72, .16);
}
body.home-page #tujuan .tujuan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(234, 88, 12, .2);
}
@media (min-width: 981px) {
  body.home-page #tujuan .tujuan-card--featured { transform: translateY(-14px); }
  body.home-page #tujuan .tujuan-card--featured:hover { transform: translateY(-20px); }
}
@media (max-width: 620px) {
  body.home-page #tujuan .tujuan-badge { white-space: normal; text-align: center; }
}

/* ===== form_articles (konsultasi-artikel-home) ===== */
/* ===== (A) KONSULTASI ===== */
body.home-page #konsultasi .konsul-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  background: #fff;
  border: 1px solid rgba(1, 69, 32, .07);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(1, 51, 24, .08);
  overflow: hidden;
  align-items: stretch;
}

body.home-page #konsultasi .konsul-media {
  min-height: 100%;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.home-page #konsultasi .konsul-media img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-height: 480px;
  padding: 16px;
}

body.home-page #konsultasi .konsul-card {
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

@media (max-width: 900px) {
  body.home-page #konsultasi .konsul-split {
    grid-template-columns: 1fr;
  }
  body.home-page #konsultasi .konsul-media {
    max-height: 280px;
  }
}
body.home-page #konsultasi .konsul-card-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 26px;
}
body.home-page #konsultasi .konsul-title { font-size: 1.32rem; margin: 2px 0 6px; }
body.home-page #konsultasi .konsul-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: #4a6154;
}

body.home-page #konsultasi .konsul-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
body.home-page #konsultasi .konsul-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.home-page #konsultasi .konsul-field--full { grid-column: 1 / -1; }
body.home-page #konsultasi .konsul-field label {
  font-size: 13.5px;
  font-weight: 600;
  color: #0c2a17;
  letter-spacing: .01em;
}

body.home-page #konsultasi .konsul-field input,
body.home-page #konsultasi .konsul-field select {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1.5px solid rgba(1, 69, 32, .14);
  background: #fff;
  color: #0c2a17;
  font-family: inherit;
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
body.home-page #konsultasi .konsul-field input::placeholder { color: #9baba3; }

body.home-page #konsultasi .konsul-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23017530' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
  cursor: pointer;
}

body.home-page #konsultasi .konsul-field input:focus,
body.home-page #konsultasi .konsul-field select:focus {
  outline: none;
  border-color: #00bf48;
  box-shadow: 0 0 0 4px rgba(0, 191, 72, .14);
}

body.home-page #konsultasi .konsul-submit {
  margin-top: 26px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 15.5px;
  color: #04240f;
  background: linear-gradient(135deg, #5fe845 0%, #00bf48 46%, #017530 100%);
  box-shadow: 0 14px 30px rgba(0, 191, 72, .3);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
body.home-page #konsultasi .konsul-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0, 191, 72, .4);
  filter: brightness(1.04);
}
body.home-page #konsultasi .konsul-submit i { font-size: 17px; }

body.home-page #konsultasi .konsul-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: #6b8177;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
body.home-page #konsultasi .konsul-note i { color: #00bf48; }

@media (max-width: 520px) {
  body.home-page #konsultasi .konsul-grid { grid-template-columns: 1fr; }
}

/* ===== (B) ARTIKEL & EDUKASI ===== */
body.home-page #artikel-home .ha-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
body.home-page #artikel-home .ha-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(1, 69, 32, .07);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 34px rgba(1, 51, 24, .05);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}
body.home-page #artikel-home .ha-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(1, 51, 24, .1);
  border-color: rgba(0, 191, 72, .22);
}
body.home-page #artikel-home .ha-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
body.home-page #artikel-home .ha-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
body.home-page #artikel-home .ha-cat {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #017530;
  background: rgba(0, 191, 72, .1);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
body.home-page #artikel-home .ha-body h3 {
  font-family: 'Poppins', 'DM Sans', sans-serif;
  font-size: 1.12rem;
  line-height: 1.4;
  color: #0c2a17;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
body.home-page #artikel-home .ha-body p {
  font-size: .92rem;
  line-height: 1.7;
  color: #4a6154;
  margin: 0 0 18px;
}
body.home-page #artikel-home .ha-read {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: #00bf48;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.home-page #artikel-home .ha-read i { transition: transform .2s ease; }
body.home-page #artikel-home .ha-card:hover .ha-read i { transform: translateX(4px); }

body.home-page #artikel-home .ha-more {
  text-align: center;
  margin-top: clamp(34px, 4vw, 46px);
}

@media (max-width: 900px) {
  body.home-page #artikel-home .ha-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  body.home-page #artikel-home .ha-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   REFINEMENTS (user feedback batch)
   ============================================================ */

/* Task 1 — varied stat icon colours (not all green) */
body.home-page .port-stats .port-stat:nth-child(1) .port-stat-icon { background: linear-gradient(135deg,#00bf48,#017530); box-shadow: 0 12px 26px rgba(0,191,72,.26); }
body.home-page .port-stats .port-stat:nth-child(2) .port-stat-icon { background: linear-gradient(135deg,#fb923c,#ea580c); box-shadow: 0 12px 26px rgba(234,88,12,.26); }
body.home-page .port-stats .port-stat:nth-child(3) .port-stat-icon { background: linear-gradient(135deg,#38bdf8,#2563eb); box-shadow: 0 12px 26px rgba(37,99,235,.26); }
body.home-page .port-stats .port-stat:nth-child(4) .port-stat-icon { background: linear-gradient(135deg,#2dd4bf,#0d9488); box-shadow: 0 12px 26px rgba(13,148,136,.26); }
body.home-page .port-stats .port-stat:nth-child(5) .port-stat-icon { background: linear-gradient(135deg,#a3e635,#4d7c0f); box-shadow: 0 12px 26px rgba(77,124,15,.26); }

/* Task 4 — TUK: image & copy equal height (balanced) */
body.home-page #tuk .uh-split { align-items: stretch; }
body.home-page #tuk .tuk-media { aspect-ratio: auto; height: 100%; min-height: 380px; }
@media (max-width: 900px) { body.home-page #tuk .tuk-media { height: auto; aspect-ratio: 16 / 10; min-height: 0; } }

/* Task 6 — About image badges: two separate stacked card containers */
body.home-page #tentang .tentang-badges { bottom: -14px; }
body.home-page #tentang .tentang-media { margin-bottom: 30px; }

/* Task 7 — Profile video (below Visi & Misi) */
body.home-page #tentang .tentang-video { margin-top: clamp(40px, 5vw, 64px); }
body.home-page #tentang .tentang-video-head { text-align: center; margin-bottom: 22px; }
body.home-page #tentang .tentang-video-head .uh-h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-top: 10px; }
body.home-page #tentang .tentang-video-frame {
  position: relative; width: 100%; max-width: 960px; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(1, 51, 24, .16); background: #000;
}
body.home-page #tentang .tentang-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Lightweight YouTube facade (click to load) */
body.home-page #tentang .yt-lite { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background: #000; overflow: hidden; display: block; }
body.home-page #tentang .yt-lite-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s ease, transform .5s ease; }
body.home-page #tentang .yt-lite:hover .yt-lite-thumb { opacity: .68; transform: scale(1.04); }
body.home-page #tentang .yt-lite-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,#00bf48,#017530); color: #fff; font-size: 25px; box-shadow: 0 12px 34px rgba(0,0,0,.42); transition: transform .25s ease; }
body.home-page #tentang .yt-lite:hover .yt-lite-play { transform: translate(-50%,-50%) scale(1.08); }
body.home-page #tentang .yt-lite-play i { margin-left: 4px; color: #fff; }


/* ===== animations.css ===== */
/* Sunlight Animation */
.sunlight-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

.sunlight-ray {
  position: absolute;
  top: -50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg at 50% 50%,
      rgba(255, 240, 150, 0) 0deg,
      rgba(255, 240, 150, 0.15) 15deg,
      rgba(255, 240, 150, 0) 30deg,
      rgba(255, 240, 150, 0) 60deg,
      rgba(255, 240, 150, 0.2) 75deg,
      rgba(255, 240, 150, 0) 90deg,
      rgba(255, 240, 150, 0) 180deg,
      rgba(255, 240, 150, 0.1) 195deg,
      rgba(255, 240, 150, 0) 210deg,
      rgba(255, 240, 150, 0) 360deg);
  animation: rotateSunlight 40s linear infinite;
  transform-origin: center;
  margin-left: -100%;
}

.sunlight-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 240, 150, 0.25), transparent 70%);
  transform: translateX(-50%);
  animation: pulseSunlight 6s ease-in-out infinite alternate;
}

@keyframes rotateSunlight {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulseSunlight {
  0% {
    opacity: 0.6;
    transform: translateX(-50%) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }
}

/* Electricity / Energy Border Animation for Cards */
.electric-border {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  z-index: 1;
}

.electric-border::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent, transparent, transparent, var(--color-primary-glow, #5fe845));
  animation: rotateElectric 3s linear infinite;
  z-index: -2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.electric-border::after {
  content: '';
  position: absolute;
  inset: 2px;
  /* Border thickness */
  background: inherit;
  border-radius: inherit;
  z-index: -1;
}

.electric-border:hover::before {
  opacity: 1;
}

@keyframes rotateElectric {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Electricity Energy Line (Horizontal) */
.energy-line {
  position: relative;
  height: 2px;
  width: 100%;
  background: rgba(95, 232, 69, 0.1);
  overflow: hidden;
  margin-top: 15px;
}

.energy-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-primary-glow, #5fe845), transparent);
  animation: moveEnergyLine 3s linear infinite;
  will-change: transform;
}

@keyframes moveEnergyLine {
  0% {
    transform: translateX(-200%);
  }

  100% {
    transform: translateX(400%);
  }
}

/* ================= ORIGINAL BUTTON ANIMATIONS ================= */
.btn-animate {
  position: relative;
  overflow: hidden;
}

.btn-animate i {
  animation: arrowMove 1.4s infinite;
}

@keyframes arrowMove {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(6px);
  }

  100% {
    transform: translateX(0);
  }
}

.btn-animate:hover {
  transform: translateY(-2px);
}

.btn-animate::before {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0.3),
      transparent);
  transition: right 0.6s ease;
}

.btn-animate:hover::before {
  right: 100%;
}

/* ================= ORIGINAL AURORA ANIMATION ================= */
.aurora-page {
  position: relative;
  background: #fff;
}

.aurora-page::before,
.aurora-page::after {
  pointer-events: none;
}

.aurora-page::before {
  content: "";
  position: fixed;
  inset: -30%;
  background:
    radial-gradient(circle at 15% 25%, rgba(46, 204, 112, 0.237), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(205, 219, 52, 0.18), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(182, 132, 89, 0.16), transparent 50%);
  filter: blur(120px);
  z-index: -1;
  animation: auroraFloat 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes auroraFloat {
  0% {
    transform: translate(-6%, -4%);
  }

  100% {
    transform: translate(6%, 4%);
  }
}

/* ================= MODAL & SPINNER ================= */
@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes scaleIn {
  from {
    transform: scale(.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ================= STAGGERED REVEAL DELAYS ================= */
/* Add fade-delay-1 … fade-delay-6 classes to cards so they appear one-by-one */
.fade-up.fade-delay-1 {
  transition-delay: .1s;
}

.fade-up.fade-delay-2 {
  transition-delay: .2s;
}

.fade-up.fade-delay-3 {
  transition-delay: .3s;
}

.fade-up.fade-delay-4 {
  transition-delay: .4s;
}

.fade-up.fade-delay-5 {
  transition-delay: .5s;
}

.fade-up.fade-delay-6 {
  transition-delay: .6s;
}

/* ================= CARD HOVER LIFT ================= */
/* Applies to service cards, portfolio cards, value cards, layanan cards */
.layanan-card,
.value-card,
.port-card,
.step,
.box,
.commitment-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.layanan-card:hover,
.value-card:hover,
.port-card:hover,
.step:hover,
.box:hover,
.commitment-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* IMAGE ZOOM ON HOVER — disabled per user preference */

/* ================= SHINE SWEEP (Light Streak Effect) ================= */
/* The animated light streak that sweeps across buttons and cards on hover */
.btn-primary,
.btn-cta,
.btn-consult,
.cta,
.footer-btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after,
.btn-cta::after,
.btn-consult::after,
.cta::after,
.footer-btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.35),
      transparent);
  transition: none;
  animation: shineSweep 3.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes shineSweep {
  0% {
    transform: translateX(-200%);
  }

  40% {
    transform: translateX(300%);
  }

  100% {
    transform: translateX(300%);
  }
}

/* ================= CTA FLOAT BOUNCE ================= */
.cta-float {
  animation: ctaFloatBounce 2.5s ease-in-out infinite;
}

@keyframes ctaFloatBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.cta-float:hover {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.05);
}

/* ================= FADE IN UP (from old site) ================= */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero content entry animation */
.hero-content {
  animation: fadeInUp 0.8s ease both;
}

.hero-spotlight {
  animation: fadeInUp 0.8s ease 0.15s both;
}

/* ================= SMOOTH LINK UNDERLINE ================= */
.menu a {
  position: relative;
}

.menu a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: var(--green, #00bf48);
  bottom: -4px;
  left: 0;
  transition: width 0.3s ease;
}

.menu a:hover::after {
  width: 100%;
}

/* ================= SECTION TITLE UNDERLINE GROW ================= */
.section-title span {
  display: block;
  width: 0;
  height: 4px;
  background: var(--green, #00bf48);
  border-radius: 4px;
  margin: 16px auto 0;
  transition: width 0.6s ease;
}

.section-title.show span,
.section-title.is-visible span {
  width: 60px;
}

/* =========================================================
   SPESIFIKASI CARD SITUS — satu sumber untuk semua halaman
   Card putih diberi garis tepi & bayangan yang cukup tegas
   agar tidak menyatu dengan latar putih / hijau muda.
   ========================================================= */
body:is(.home-page, .uh-page) {
  --uh-card-border: rgba(1, 69, 32, .14);
  --uh-card-border-hover: rgba(0, 191, 72, .32);
  --uh-card-shadow: 0 1px 2px rgba(1, 51, 24, .06), 0 12px 32px rgba(1, 51, 24, .08);
  --uh-card-shadow-hover: 0 2px 4px rgba(1, 51, 24, .06), 0 20px 44px rgba(1, 51, 24, .13);
}

html body:is(.home-page, .uh-page) :is(
  .uh-card, .uh-table-wrap, .uh-form,
  .ha-card, .konsul-split,
  .academy-card, .academy-price-card, .academy-day, .academy-learning-stage, .academy-accordion-item,
  .cert-card, .doc-step, .partner-card, .item-card, .inside-card, .legal-item, .ps-card
),
html body.portfolio-page .portfolio-section .portfolio-grid .project-card {
  border: 1px solid var(--uh-card-border);
  box-shadow: var(--uh-card-shadow);
}

/* card datar (tanpa bayangan) cukup garis tepinya */
html body:is(.home-page, .uh-page) :is(.academy-note, .academy-step, .ps-step, .uh-contact__row) {
  border: 1px solid var(--uh-card-border);
}

html body:is(.home-page, .uh-page) :is(
  .uh-card, .ha-card, .academy-card, .cert-card, .partner-card, .ps-card
):hover,
html body.portfolio-page .portfolio-section .portfolio-grid .project-card:hover {
  border-color: var(--uh-card-border-hover);
  box-shadow: var(--uh-card-shadow-hover);
}

html body:is(.home-page, .uh-page) .uh-faq__list details { border-color: var(--uh-card-border); }

/* card beranda yang diberi selector ber-ID ikut spesifikasi yang sama */
html body.home-page #artikel-home .ha-card,
html body.home-page #konsultasi .konsul-split {
  border: 1px solid var(--uh-card-border);
  box-shadow: var(--uh-card-shadow);
}
html body.home-page #artikel-home .ha-card:hover {
  border-color: var(--uh-card-border-hover);
  box-shadow: var(--uh-card-shadow-hover);
}