/* Source style block 1 */
:root {
      --am-green: #173c2f;
      --am-green-2: #2e6f4f;
      --am-gold: #b87415;
      --am-text: #32443a;
      --am-muted: #536258;
      --am-card: rgba(255,253,247,.96);
      --am-border: rgba(34,78,52,.12);
      --am-shadow: 0 16px 38px rgba(43,57,48,.13);
      --am-shadow-hover: 0 28px 52px rgba(43,57,48,.20);
      --nav-h: 88px;
    }


    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    html, body { margin: 0; min-height: 100%; }


    body {
      overflow-x: hidden;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--am-text);
      background: #f7f1e5;
    }


    /* ================= NAVBAR ================= */
    .navbar-custom {
      min-height: var(--nav-h);
      background: rgba(251,248,240,.93);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(44,75,58,.10);
      box-shadow: 0 8px 24px rgba(45,58,49,.07);
      z-index: 1050;
      animation: navDrop .75s ease-out both;
    }


    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }


    .navbar-brand img {
      width: 72px;
      height: auto;
      filter: drop-shadow(0 6px 12px rgba(0,0,0,.11));
    }


    .navbar-nav {
      gap: 4px;
    }


    .nav-link {
      position: relative;
      color: var(--am-green) !important;
      font-weight: 700;
      font-size: 1rem;
      padding: .75rem .85rem !important;
      border-radius: 12px;
      transition:
        transform .22s ease,
        background-color .22s ease,
        color .22s ease;
      overflow: hidden;
    }


    .nav-link::after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 7px;
      height: 2px;
      border-radius: 99px;
      background: var(--am-gold);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .28s ease;
    }


    .nav-link:hover {
      background: rgba(46,111,79,.07);
      transform: translateY(-2px);
    }


    .nav-link:hover::after,
    .nav-link.active::after {
      transform: scaleX(1);
    }


    .nav-link.active {
      color: var(--am-gold) !important;
      background: rgba(184,116,21,.06);
    }


    .nav-link.nav-click {
      animation: navClick .42s ease;
    }


    .navbar-toggler {
      border: 0;
      box-shadow: none !important;
    }


    /* ================= HERO / BERANDA ================= */
    #beranda {
      scroll-margin-top: var(--nav-h);
    }


    .hero {
      position: relative;
      min-height: calc(100vh - var(--nav-h));
      overflow: hidden;
      isolation: isolate;
      background-image: url("../images/background-beranda.webp");
      background-size: cover;
      background-position: center center;
      display: flex;
      align-items: center;
    }


    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: linear-gradient(
        90deg,
        rgba(255,253,248,.95) 0%,
        rgba(255,253,248,.91) 30%,
        rgba(255,253,248,.68) 45%,
        rgba(255,253,248,.27) 62%,
        rgba(255,253,248,0) 80%
      );
    }


    .hero-content {
      width: 100%;
      padding-top: 54px;
      padding-bottom: 38px;
    }


    .copy-column {
      position: relative;
      z-index: 5;
      padding-right: clamp(12px, 2vw, 32px);
    }


    .hero-title {
      margin: 0 0 28px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(4.4rem, 5.2vw, 5.7rem);
      font-weight: 800;
      line-height: .98;
      letter-spacing: -.035em;
      color: var(--am-green);
      text-shadow: 0 1px 0 rgba(255,255,255,.45);
      opacity: 0;
      transform: translateY(20px);
      animation: copyEnter .85s .12s ease-out forwards;
    }


    .hero-title .line { display: block; }
    .hero-title .gold { color: var(--am-gold); }


    .hero-description {
      max-width: 780px;
      color: #34483d;
      font-size: clamp(1.28rem, 1.34vw, 1.42rem);
      line-height: 1.72;
      font-weight: 470;
      opacity: 0;
      transform: translateY(18px);
      animation: copyEnter .9s .32s ease-out forwards;
    }


    .hero-description p {
      margin: 0 0 16px;
    }


    /* ================= TANAMAN ================= */
    .visual-column {
      position: relative;
      z-index: 4;
      min-height: 590px;
      display: flex;
      align-items: center;
      justify-content: center;
    }


    .plant-stage {
      position: relative;
      width: min(100%, 650px);
      aspect-ratio: 1122 / 1402;
      filter: drop-shadow(0 22px 28px rgba(56,48,28,.15));
    }


    .plant-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      pointer-events: none;
      user-select: none;
    }


    .hand-layer {
      z-index: 1;
      clip-path: inset(58% 0 0 0);
      opacity: 0;
      animation: handEnter .75s .20s ease-out forwards;
    }


    .growth-layer {
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
      clip-path: inset(0 0 35% 0);
      transform-origin: 50% 66%;
      opacity: 0;
      transform: scaleX(.10) scaleY(.01);
      animation: growPlant 2.35s .42s cubic-bezier(.16,.84,.22,1) forwards;
      will-change: transform, opacity;
    }


    .growth-layer .plant-layer {
      transform-origin: 50% 66%;
      animation: gentleBend 5.4s 2.85s ease-in-out infinite;
      will-change: transform;
    }


    /* ================= CARDS ================= */
    .cards-row {
      position: relative;
      z-index: 7;
      margin-top: 22px;
    }


    .feature-card {
      height: 100%;
      min-height: 138px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 22px 24px;
      border-radius: 18px;
      background: var(--am-card);
      border: 1px solid var(--am-border);
      box-shadow: var(--am-shadow);
      backdrop-filter: blur(9px);
      opacity: 0;
      transform: translateY(24px);
      animation: cardReveal .7s cubic-bezier(.2,.8,.2,1) forwards;
      transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease,
        border-color .28s ease;
    }


    .cards-row > div:nth-child(1) .feature-card { animation-delay: 1.05s; }
    .cards-row > div:nth-child(2) .feature-card { animation-delay: 1.40s; }
    .cards-row > div:nth-child(3) .feature-card { animation-delay: 1.75s; }


    .feature-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--am-shadow-hover);
      border-color: rgba(38,123,72,.22);
    }


    .feature-icon {
      flex: 0 0 50px;
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: linear-gradient(180deg,#f5fff4,#e8f5e8);
      border: 1px solid rgba(44,132,77,.15);
    }


    .feature-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: #21834b;
      stroke-width: 2.1;
      stroke-linecap: round;
      stroke-linejoin: round;
    }


    .feature-card h2 {
      margin: 2px 0 8px;
      color: #214232;
      font-size: clamp(1.20rem, 1.25vw, 1.32rem);
      line-height: 1.3;
      font-weight: 800;
    }


    .feature-card p {
      margin: 0;
      color: var(--am-muted);
      font-size: clamp(1.05rem, 1.08vw, 1.14rem);
      line-height: 1.55;
    }


    /* ================= ANIMATIONS ================= */
    @keyframes navDrop {
      from { opacity: 0; transform: translateY(-16px); }
      to { opacity: 1; transform: translateY(0); }
    }


    @keyframes navClick {
      0% { transform: scale(1); }
      45% { transform: scale(.94); }
      100% { transform: scale(1); }
    }


    @keyframes copyEnter {
      to { opacity: 1; transform: translateY(0); }
    }


    @keyframes handEnter {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }


    @keyframes growPlant {
      0% { opacity: 0; transform: scaleX(.10) scaleY(.015); }
      20% { opacity: 1; transform: scaleX(.22) scaleY(.20); }
      46% { opacity: 1; transform: scaleX(.48) scaleY(.50); }
      72% { opacity: 1; transform: scaleX(.78) scaleY(.82); }
      88% { opacity: 1; transform: scaleX(1.025) scaleY(1.03); }
      100% { opacity: 1; transform: scaleX(1) scaleY(1); }
    }


    @keyframes gentleBend {
      0%,100% { transform: rotate(0deg) skewX(0deg); }
      25% { transform: rotate(.8deg) skewX(.45deg); }
      50% { transform: rotate(0deg) skewX(0deg); }
      75% { transform: rotate(-.8deg) skewX(-.45deg); }
    }


    @keyframes cardReveal {
      to { opacity: 1; transform: translateY(0); }
    }


    /* ================= RESPONSIVE ================= */
    @media (max-width: 1399.98px) {
      .hero-title {
        font-size: clamp(3.8rem, 4.8vw, 4.8rem);
      }


      .hero-description {
        font-size: 1.20rem;
      }


      .feature-card h2 {
        font-size: 1.16rem;
      }


      .feature-card p {
        font-size: 1.02rem;
      }
    }


    @media (max-width: 1199.98px) {
      .hero-title {
        font-size: clamp(3.55rem, 4.7vw, 4.35rem);
      }


      .hero-description {
        font-size: 1.14rem;
      }


      .visual-column {
        min-height: 520px;
      }


      .plant-stage {
        width: min(100%, 575px);
      }


      .feature-card {
        min-height: 126px;
      }
    }


    @media (max-width: 991.98px) {
      :root { --nav-h: 76px; }


      .navbar-brand img {
        width: 62px;
      }


      .navbar-collapse {
        margin-top: 10px;
        padding: 10px 0 14px;
      }


      .nav-link {
        padding: .72rem .8rem !important;
      }


      .hero {
        min-height: auto;
        background-position: 64% center;
        align-items: flex-start;
      }


      .hero::before {
        background: linear-gradient(
          180deg,
          rgba(255,253,248,.96) 0%,
          rgba(255,253,248,.90) 41%,
          rgba(255,253,248,.58) 68%,
          rgba(255,253,248,.18) 100%
        );
      }


      .hero-content {
        padding-top: 42px;
        padding-bottom: 30px;
      }


      .copy-column {
        padding-right: 0;
      }


      .hero-title {
        font-size: clamp(3.2rem, 8.4vw, 4.3rem);
        line-height: 1.0;
        margin-bottom: 22px;
      }


      .hero-description {
        max-width: 100%;
        font-size: 1.12rem;
        line-height: 1.7;
      }


      .visual-column {
        min-height: 445px;
        margin-top: 0;
      }


      .plant-stage {
        width: min(92%, 490px);
      }


      .feature-card {
        min-height: 120px;
      }
    }


    @media (max-width: 767.98px) {
      .hero-content {
        padding-top: 30px;
      }


      .hero-title {
        font-size: clamp(2.55rem, 11.6vw, 3.5rem);
        line-height: 1.04;
        letter-spacing: -.02em;
        margin-bottom: 18px;
      }


      .hero-title .line {
        display: block;
      }


      .hero-description {
        font-size: 1.02rem;
        line-height: 1.68;
      }


      .hero-description p {
        margin-bottom: 12px;
      }


      .visual-column {
        min-height: 375px;
      }


      .plant-stage {
        width: min(100%, 415px);
      }


      .feature-card {
        min-height: auto;
        padding: 18px 19px;
        border-radius: 16px;
      }


      .feature-card h2 {
        font-size: 1.10rem;
      }


      .feature-card p {
        font-size: 1rem;
      }
    }


    @media (max-width: 575.98px) {
      .hero {
        background-position: 68% center;
      }


      .hero-title {
        font-size: clamp(2.35rem, 11.2vw, 3rem);
      }


      .visual-column {
        min-height: 338px;
      }


      .plant-stage {
        width: min(108%, 382px);
      }


      .feature-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
      }


      .navbar-brand img {
        width: 56px;
      }
    }


    @media (hover: none) {
      .feature-card:hover {
        transform: translateY(0);
        box-shadow: var(--am-shadow);
      }
    }


    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
    }
  
    /* =========================================================
       REVISI VISUAL — DESKTOP + CARD
       1) Copy hero digeser sedikit ke tengah.
       2) Ilustrasi tangan/tanaman didekatkan ke tepi kanan.
       3) Card kuning, shadow hitam, teks hijau daun.
       ========================================================= */

    /* Card — berlaku responsif di semua ukuran layar */
    .feature-card {
      background: linear-gradient(145deg, #f8d35f 0%, #f2c64b 100%);
      border-color: rgba(126, 91, 10, .24);
      box-shadow:
        0 14px 26px rgba(0, 0, 0, .24),
        0 4px 10px rgba(0, 0, 0, .13);
    }

    .feature-card:hover {
      box-shadow:
        0 22px 38px rgba(0, 0, 0, .30),
        0 7px 15px rgba(0, 0, 0, .16);
      border-color: rgba(23, 60, 47, .28);
    }

    .feature-card h2,
    .feature-card p {
      color: #245c35;
    }

    .feature-card h2 {
      color: #1d5b32;
    }

    .feature-icon {
      background: rgba(255, 250, 214, .78);
      border-color: rgba(29, 91, 50, .22);
      box-shadow: 0 5px 12px rgba(0, 0, 0, .10);
    }

    .feature-icon svg {
      stroke: #24733e;
    }

    /* Desktop besar: copy lebih masuk ke tengah dan visual mepet kanan */
    @media (min-width: 1200px) {
      .copy-column {
        padding-left: clamp(44px, 4.8vw, 86px);
        padding-right: clamp(10px, 1.2vw, 22px);
      }

      .visual-column {
        justify-content: flex-end;
        padding-right: 0;
      }

      .plant-stage {
        width: min(108%, 710px);
        transform: translateX(clamp(105px, 10.2vw, 176px));
      }
    }

    /* Desktop sangat lebar: jangan biarkan copy terlalu jauh ke kanan */
    @media (min-width: 1600px) {
      .copy-column {
        padding-left: clamp(64px, 5.2vw, 104px);
      }

      .plant-stage {
        transform: translateX(clamp(135px, 9vw, 190px));
      }
    }


/* Source style block 2 */
#scope-tentang{
      --am-green: #174a35;
      --am-green-2: #236c4b;
      --am-green-dark: #103a29;
      --am-gold: #b97817;
      --am-cream: #fffaf0;
      --am-text: #3d5147;
    }

    #scope-tentang *{
      box-sizing: border-box;
    }

    #scope-tentang{
      scroll-behavior: smooth;
    }

    #scope-tentang{
      margin: 0;
      min-height: 100%;
      overflow-x: hidden;
      background: #fffaf0;
      color: var(--am-text);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* =========================
       ABOUT
    ========================= */
    #scope-tentang .about-section{
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 82px 0;
      background:
        radial-gradient(circle at 10% 35%, rgba(232, 197, 112, .15), transparent 30%),
        radial-gradient(circle at 88% 15%, rgba(52, 122, 76, .08), transparent 28%),
        linear-gradient(135deg, #fffef9 0%, #fffaf0 58%, #f5eddb 100%);
    }

    #scope-tentang .about-section::before{
      content: "";
      position: absolute;
      inset: auto auto -180px -180px;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: rgba(30, 92, 58, .05);
      filter: blur(8px);
      pointer-events: none;
    }

    #scope-tentang .about-grid{
      position: relative;
      z-index: 2;
    }

    /* =========================
       IMAGE
    ========================= */
    #scope-tentang .about-visual{
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 640px;
    }

    #scope-tentang .about-image{
      display: block;
      width: min(100%, 680px);
      height: auto;
      object-fit: contain;
      filter:
        drop-shadow(0 32px 28px rgba(0,0,0,.28))
        drop-shadow(0 10px 12px rgba(0,0,0,.13));
      animation: tentang_floatImage 5.6s ease-in-out infinite;
    }

    /* =========================
       COPY
    ========================= */
    #scope-tentang .about-copy{
      position: relative;
      z-index: 3;
    }

    #scope-tentang .section-label{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 16px;
      margin-bottom: 18px;
      border-radius: 999px;
      background: linear-gradient(135deg, #f8d66a, #edb93a);
      color: #634307;
      font-size: .82rem;
      font-weight: 800;
      box-shadow: 0 7px 16px rgba(110,75,10,.15);
    }

    #scope-tentang .about-title{
      margin: 0 0 22px;
      color: var(--am-green);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.6rem, 4vw, 4.8rem);
      line-height: .98;
      font-weight: 700;
      letter-spacing: -.04em;
    }

    #scope-tentang .about-title .gold{
      color: var(--am-gold);
    }

    #scope-tentang .about-description{
      max-width: 800px;
      margin-bottom: 30px;
      color: #40554a;
      font-size: clamp(1.02rem, 1.05vw, 1.2rem);
      line-height: 1.82;
    }

    #scope-tentang .about-description p{
      margin: 0 0 12px;
    }

    /* =========================
       CARDS
    ========================= */
    #scope-tentang .about-card{
      height: 100%;
      padding: 22px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 20px;
      background:
        linear-gradient(145deg, var(--am-green-2) 0%, var(--am-green) 58%, var(--am-green-dark) 100%);
      color: #fff;
      box-shadow:
        0 16px 28px rgba(0,0,0,.26),
        0 5px 10px rgba(0,0,0,.13);
      transition:
        transform .28s ease,
        box-shadow .28s ease;
    }

    #scope-tentang .about-card:hover{
      transform: translateY(-6px);
      box-shadow:
        0 24px 38px rgba(0,0,0,.32),
        0 8px 15px rgba(0,0,0,.16);
    }

    #scope-tentang .about-card-inner{
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    #scope-tentang .about-number{
      flex: 0 0 auto;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.20);
      color: #fff;
      font-size: .95rem;
      font-weight: 800;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 6px 12px rgba(0,0,0,.12);
    }

    #scope-tentang .about-card h2{
      margin: 1px 0 7px;
      color: #fff;
      font-size: 1.04rem;
      font-weight: 800;
      line-height: 1.35;
    }

    #scope-tentang .about-card p{
      margin: 0;
      color: rgba(255,255,255,.92);
      font-size: .94rem;
      line-height: 1.6;
    }

    /* =========================
       ANIMATION
    ========================= */
    #scope-tentang .reveal{
      opacity: 0;
      transform: translateY(18px);
      animation: tentang_revealUp .75s ease forwards;
    }

    #scope-tentang .delay-1{ animation-delay: .08s; }
    #scope-tentang .delay-2{ animation-delay: .16s; }
    #scope-tentang .delay-3{ animation-delay: .24s; }
    #scope-tentang .delay-4{ animation-delay: .32s; }

    @keyframes tentang_revealUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes tentang_floatImage {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    /* =========================
       LARGE DESKTOP
    ========================= */
    @media (min-width: 1200px) {
      #scope-tentang .about-section .container-fluid{
        padding-left: clamp(42px, 4.4vw, 82px) !important;
        padding-right: clamp(42px, 4.4vw, 82px) !important;
      }

      #scope-tentang .about-visual{
        justify-content: flex-start;
      }

      #scope-tentang .about-image{
        width: min(108%, 720px);
        transform-origin: center;
      }

      #scope-tentang .about-copy{
        padding-left: clamp(8px, 1.3vw, 24px);
      }
    }

    /* =========================
       TABLET
    ========================= */
    @media (max-width: 991.98px) {
      #scope-tentang .about-section{
        min-height: auto;
        padding: 58px 0 68px;
      }

      #scope-tentang .about-visual{
        min-height: auto;
        margin-bottom: 18px;
      }

      #scope-tentang .about-image{
        width: min(92%, 520px);
      }

      #scope-tentang .about-copy{
        text-align: center;
      }

      #scope-tentang .about-description{
        margin-left: auto;
        margin-right: auto;
      }

      #scope-tentang .about-description p{
        text-align: left;
      }

      #scope-tentang .about-card{
        text-align: left;
      }
    }

    /* =========================
       MOBILE
    ========================= */
    @media (max-width: 575.98px) {
      #scope-tentang .about-section{
        padding: 38px 0 50px;
      }

      #scope-tentang .about-section .container-fluid{
        padding-left: 18px !important;
        padding-right: 18px !important;
      }

      #scope-tentang .about-visual{
        margin-bottom: 10px;
      }

      #scope-tentang .about-image{
        width: min(100%, 390px);
      }

      #scope-tentang .section-label{
        margin-bottom: 13px;
        font-size: .78rem;
      }

      #scope-tentang .about-title{
        font-size: clamp(2.15rem, 10.5vw, 3.15rem);
        line-height: 1.02;
      }

      #scope-tentang .about-description{
        margin-bottom: 26px;
        font-size: 1rem;
        line-height: 1.72;
      }

      #scope-tentang .about-card{
        padding: 18px;
        border-radius: 17px;
      }

      #scope-tentang .about-number{
        width: 44px;
        height: 44px;
        border-radius: 12px;
      }

      #scope-tentang .about-card h2{
        font-size: 1rem;
      }

      #scope-tentang .about-card p{
        font-size: .91rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #scope-tentang *{
        animation: none !important;
        transition: none !important;
      }

      #scope-tentang .reveal{
        opacity: 1;
        transform: none;
      }
    }


/* Source style block 3 */
#scope-cara-kami-membantu{
      --am-green: #174a35;
      --am-green-2: #26734d;
      --am-green-3: #48a662;
      --am-gold: #c4891b;
      --am-gold-soft: #f4d276;
      --am-cream: #fffaf0;
      --am-cream-2: #f7efdf;
      --am-text: #32473d;
      --am-muted: #526359;
      --am-shadow: 0 20px 45px rgba(0,0,0,.16);
      --am-shadow-hover: 0 30px 55px rgba(0,0,0,.22);
    }

    #scope-cara-kami-membantu *{
      box-sizing: border-box;
    }

    #scope-cara-kami-membantu{
      scroll-behavior: smooth;
    }

    #scope-cara-kami-membantu{
      margin: 0;
      min-height: 100%;
      overflow-x: hidden;
      background: var(--am-cream);
      color: var(--am-text);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* =========================
       SECTION
    ========================= */
    #scope-cara-kami-membantu .help-section{
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      padding: 82px 0 92px;
      background:
        radial-gradient(circle at 8% 12%, rgba(72,166,98,.10), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(196,137,27,.10), transparent 28%),
        linear-gradient(135deg, #fffefa 0%, #fffaf0 54%, #f8f0df 100%);
    }

    #scope-cara-kami-membantu .help-section::before,
#scope-cara-kami-membantu .help-section::after{
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(4px);
    }

    #scope-cara-kami-membantu .help-section::before{
      width: 360px;
      height: 360px;
      top: -190px;
      right: -130px;
      background: rgba(38,115,77,.07);
    }

    #scope-cara-kami-membantu .help-section::after{
      width: 300px;
      height: 300px;
      bottom: -170px;
      left: -130px;
      background: rgba(196,137,27,.07);
    }

    #scope-cara-kami-membantu .section-inner{
      position: relative;
      z-index: 2;
    }

    /* =========================
       HEADER
    ========================= */
    #scope-cara-kami-membantu .section-label{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 16px;
      margin-bottom: 16px;
      border-radius: 999px;
      background: linear-gradient(135deg, #f8d86f, #edbb3e);
      color: #624408;
      font-size: .82rem;
      font-weight: 800;
      box-shadow: 0 7px 16px rgba(112,76,11,.14);
    }

    #scope-cara-kami-membantu .section-title{
      margin: 0 0 20px;
      color: var(--am-green);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.6rem, 4.5vw, 5rem);
      line-height: .98;
      font-weight: 700;
      letter-spacing: -.045em;
    }

    #scope-cara-kami-membantu .section-title .gold{
      color: var(--am-gold);
    }

    #scope-cara-kami-membantu .section-copy{
      max-width: 940px;
      margin: 0 auto 52px;
      color: var(--am-muted);
      font-size: clamp(1.03rem, 1.15vw, 1.2rem);
      line-height: 1.82;
    }

    #scope-cara-kami-membantu .section-copy p{
      margin: 0 0 10px;
    }

    /* =========================
       PROCESS GRID
    ========================= */
    #scope-cara-kami-membantu .process-wrap{
      position: relative;
    }

    #scope-cara-kami-membantu .process-card{
      position: relative;
      height: 100%;
      overflow: hidden;
      padding: 20px 18px 24px;
      border: 1px solid rgba(23,74,53,.10);
      border-radius: 24px;
      background: rgba(255,253,247,.82);
      backdrop-filter: blur(10px);
      box-shadow: var(--am-shadow);
      transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
    }

    #scope-cara-kami-membantu .process-card::before{
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 0;
      height: 4px;
      border-radius: 0 0 999px 999px;
      background: linear-gradient(90deg, var(--am-green-3), var(--am-gold));
      opacity: .9;
    }

    #scope-cara-kami-membantu .process-card:hover{
      transform: translateY(-9px);
      border-color: rgba(23,74,53,.20);
      box-shadow: var(--am-shadow-hover);
    }

    #scope-cara-kami-membantu .process-image-wrap{
      position: relative;
      display: grid;
      place-items: center;
      min-height: 260px;
      margin: -2px 0 6px;
      overflow: visible;
    }

    #scope-cara-kami-membantu .process-image{
      display: block;
      width: min(100%, 285px);
      height: auto;
      object-fit: contain;
      will-change: transform;
      filter: drop-shadow(0 18px 20px rgba(0,0,0,.19));
      animation: cara_kami_membantu_imageFloat 5.2s ease-in-out infinite;
    }

    #scope-cara-kami-membantu .process-card:nth-child(2) .process-image{
      animation-delay: -.9s;
    }

    #scope-cara-kami-membantu .process-card:nth-child(3) .process-image{
      animation-delay: -1.8s;
    }

    #scope-cara-kami-membantu .process-card:nth-child(4) .process-image{
      animation-delay: -2.7s;
    }

    #scope-cara-kami-membantu .step-badge{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      height: 30px;
      padding: 0 10px;
      margin-bottom: 11px;
      border-radius: 999px;
      background: var(--am-green);
      color: #fff;
      font-size: .77rem;
      font-weight: 800;
      letter-spacing: .04em;
      box-shadow: 0 6px 14px rgba(23,74,53,.20);
    }

    #scope-cara-kami-membantu .process-title{
      margin: 0 0 9px;
      color: var(--am-green);
      font-size: 1.08rem;
      font-weight: 800;
      line-height: 1.35;
    }

    #scope-cara-kami-membantu .process-text{
      margin: 0;
      color: #526158;
      font-size: .96rem;
      line-height: 1.62;
    }

    /* Desktop connector arrows */
    @media (min-width: 1200px) {
      #scope-cara-kami-membantu .process-card:not(.last-card)::after{
        content: "→";
        position: absolute;
        top: 50%;
        right: -28px;
        z-index: 8;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        transform: translateY(-50%);
        border-radius: 50%;
        background: #fff8e9;
        color: var(--am-green-2);
        font-size: 1.25rem;
        font-weight: 900;
        box-shadow: 0 9px 18px rgba(0,0,0,.12);
        border: 1px solid rgba(23,74,53,.10);
      }
    }

    /* =========================
       SCROLL REVEAL
    ========================= */
    #scope-cara-kami-membantu .reveal{
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity .75s ease,
        transform .75s ease;
    }

    #scope-cara-kami-membantu .reveal.show{
      opacity: 1;
      transform: translateY(0);
    }

    #scope-cara-kami-membantu .delay-1{ transition-delay: .06s; }
    #scope-cara-kami-membantu .delay-2{ transition-delay: .12s; }
    #scope-cara-kami-membantu .delay-3{ transition-delay: .18s; }
    #scope-cara-kami-membantu .delay-4{ transition-delay: .24s; }

    @keyframes cara_kami_membantu_imageFloat {
      0%, 100% {
        transform: translateY(0) rotate(0deg);
      }
      50% {
        transform: translateY(-10px) rotate(.6deg);
      }
    }

    /* =========================
       TABLET
    ========================= */
    @media (max-width: 1199.98px) {
      #scope-cara-kami-membantu .help-section{
        padding: 68px 0 78px;
      }

      #scope-cara-kami-membantu .section-copy{
        margin-bottom: 42px;
      }

      #scope-cara-kami-membantu .process-image-wrap{
        min-height: 240px;
      }

      #scope-cara-kami-membantu .process-image{
        width: min(100%, 270px);
      }
    }

    @media (max-width: 991.98px) {
      #scope-cara-kami-membantu .help-section{
        min-height: auto;
        padding: 58px 0 68px;
      }

      #scope-cara-kami-membantu .section-copy{
        max-width: 760px;
      }

      #scope-cara-kami-membantu .process-card{
        padding: 18px 18px 22px;
      }

      #scope-cara-kami-membantu .process-image-wrap{
        min-height: 230px;
      }
    }

    /* =========================
       MOBILE
    ========================= */
    @media (max-width: 575.98px) {
      #scope-cara-kami-membantu .help-section{
        padding: 40px 0 54px;
      }

      #scope-cara-kami-membantu .help-section .container{
        padding-left: 18px;
        padding-right: 18px;
      }

      #scope-cara-kami-membantu .section-label{
        margin-bottom: 13px;
        font-size: .77rem;
      }

      #scope-cara-kami-membantu .section-title{
        font-size: clamp(2.15rem, 10.4vw, 3.15rem);
        line-height: 1.02;
      }

      #scope-cara-kami-membantu .section-copy{
        margin-bottom: 32px;
        font-size: 1rem;
        line-height: 1.72;
        text-align: left !important;
      }

      #scope-cara-kami-membantu .process-card{
        padding: 15px 16px 21px;
        border-radius: 20px;
      }

      #scope-cara-kami-membantu .process-image-wrap{
        min-height: 205px;
      }

      #scope-cara-kami-membantu .process-image{
        width: min(100%, 230px);
      }

      #scope-cara-kami-membantu .process-title{
        font-size: 1.04rem;
      }

      #scope-cara-kami-membantu .process-text{
        font-size: .93rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #scope-cara-kami-membantu *,
#scope-cara-kami-membantu *::before,
#scope-cara-kami-membantu *::after{
        animation: none !important;
        transition: none !important;
      }

      #scope-cara-kami-membantu .reveal{
        opacity: 1 !important;
        transform: none !important;
      }
    }
  

    /* =========================================================
       REVISI TANPA CARD
       - Tidak ada background card
       - Tidak ada border card
       - Tidak ada box-shadow card
       - Gambar dan teks berdiri langsung di atas section
       - Tetap responsif Bootstrap
       ========================================================= */

    #scope-cara-kami-membantu .process-card{
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      padding: 8px 14px 18px !important;
      overflow: visible !important;
    }

    #scope-cara-kami-membantu .process-card::before{
      display: none !important;
    }

    #scope-cara-kami-membantu .process-card:hover{
      transform: none !important;
      box-shadow: none !important;
      border-color: transparent !important;
    }

    #scope-cara-kami-membantu .process-image-wrap{
      min-height: 245px;
      margin-bottom: 12px;
    }

    #scope-cara-kami-membantu .process-image{
      width: min(100%, 285px);
      filter:
        drop-shadow(0 20px 22px rgba(0,0,0,.22))
        drop-shadow(0 7px 9px rgba(0,0,0,.12));
    }

    #scope-cara-kami-membantu .step-badge{
      background: transparent;
      color: var(--am-gold);
      box-shadow: none;
      padding: 0;
      height: auto;
      min-width: 0;
      border-radius: 0;
      margin-bottom: 8px;
      font-size: .80rem;
      letter-spacing: .08em;
    }

    #scope-cara-kami-membantu .process-title{
      font-size: 1.08rem;
      margin-bottom: 8px;
    }

    #scope-cara-kami-membantu .process-text{
      max-width: 255px;
      margin-left: auto;
      margin-right: auto;
    }

    #scope-cara-kami-membantu .process-wrap > div{
      position: relative;
    }

    /* Connector untuk desktop: sederhana tanpa bubble */
    @media (min-width: 1200px) {
      #scope-cara-kami-membantu .process-card:not(.last-card)::after{
        content: "→" !important;
        position: absolute !important;
        top: 39% !important;
        right: -24px !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--am-green-2) !important;
        font-size: 2rem !important;
        font-weight: 800 !important;
        z-index: 5 !important;
      }
    }

    @media (max-width: 1199.98px) {
      #scope-cara-kami-membantu .process-card:not(.last-card)::after{
        display: none !important;
      }
    }

    @media (max-width: 991.98px) {
      #scope-cara-kami-membantu .process-card{
        padding: 6px 10px 24px !important;
      }

      #scope-cara-kami-membantu .process-image-wrap{
        min-height: 225px;
      }

      #scope-cara-kami-membantu .process-text{
        max-width: 310px;
      }
    }

    @media (max-width: 575.98px) {
      #scope-cara-kami-membantu .process-card{
        padding: 0 6px 28px !important;
      }

      #scope-cara-kami-membantu .process-image-wrap{
        min-height: 205px;
      }

      #scope-cara-kami-membantu .process-image{
        width: min(100%, 235px);
      }

      #scope-cara-kami-membantu .process-title{
        font-size: 1.08rem;
      }

      #scope-cara-kami-membantu .process-text{
        max-width: 320px;
        font-size: .95rem;
      }
    }


/* Source style block 4 */
#scope-yang-kami-buat{
      --am-green: #173f31;
      --am-green-2: #25684b;
      --am-green-3: #3f9766;
      --am-gold: #bb7a18;
      --am-gold-2: #e6b34b;
      --am-cream: #fffaf0;
      --am-cream-2: #f6eddb;
      --am-text: #33483e;
      --am-muted: #56665d;
      --am-line: rgba(23,63,49,.12);
      --am-shadow: 0 18px 38px rgba(0,0,0,.16);
      --am-shadow-hover: 0 28px 48px rgba(0,0,0,.23);
    }

    #scope-yang-kami-buat *{
      box-sizing: border-box;
    }

    #scope-yang-kami-buat{
      scroll-behavior: smooth;
    }

    #scope-yang-kami-buat{
      margin: 0;
      min-height: 100%;
      overflow-x: hidden;
      background: var(--am-cream);
      color: var(--am-text);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* =========================================================
       SECTION
    ========================================================= */
    #scope-yang-kami-buat .products-section{
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      padding: 78px 0 92px;
      background:
        radial-gradient(circle at 8% 12%, rgba(41,118,76,.10), transparent 26%),
        radial-gradient(circle at 92% 88%, rgba(190,126,24,.10), transparent 27%),
        linear-gradient(135deg, #fffefa 0%, #fffaf0 55%, #f6eddc 100%);
    }

    #scope-yang-kami-buat .products-section::before,
#scope-yang-kami-buat .products-section::after{
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(5px);
    }

    #scope-yang-kami-buat .products-section::before{
      width: 390px;
      height: 390px;
      right: -210px;
      top: -190px;
      background: rgba(38,104,75,.07);
    }

    #scope-yang-kami-buat .products-section::after{
      width: 340px;
      height: 340px;
      left: -190px;
      bottom: -180px;
      background: rgba(187,122,24,.07);
    }

    #scope-yang-kami-buat .products-inner{
      position: relative;
      z-index: 2;
    }

    /* =========================================================
       HEADER
    ========================================================= */
    #scope-yang-kami-buat .section-label{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 16px;
      margin-bottom: 15px;
      border-radius: 999px;
      background: linear-gradient(135deg, #f8d978, #ecb73c);
      color: #654607;
      font-size: .82rem;
      font-weight: 800;
      box-shadow: 0 7px 16px rgba(104,71,10,.14);
    }

    #scope-yang-kami-buat .section-title{
      margin: 0 0 18px;
      color: var(--am-green);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.65rem, 4.5vw, 5rem);
      font-weight: 700;
      line-height: .98;
      letter-spacing: -.045em;
    }

    #scope-yang-kami-buat .section-title .gold{
      color: var(--am-gold);
    }

    #scope-yang-kami-buat .section-intro{
      max-width: 900px;
      margin: 0 auto 58px;
      color: var(--am-muted);
      font-size: clamp(1.03rem, 1.12vw, 1.18rem);
      line-height: 1.8;
    }

    #scope-yang-kami-buat .section-intro p{
      margin: 0 0 7px;
    }

    /* =========================================================
       PRODUCT ITEM
       Logo + title are deliberately OUTSIDE the card.
       Only description/content is inside the card.
    ========================================================= */
    #scope-yang-kami-buat .product-item{
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    /* Product destinations: preserve the existing visual layout while allowing
       an active product to open its dedicated destination as one click target. */
    #scope-yang-kami-buat .product-destination-link{
      flex: 1;
      display: flex;
      flex-direction: column;
      color: inherit;
      text-decoration: none;
      border-radius: 22px;
    }

    #scope-yang-kami-buat .product-destination-link:visited{
      color: inherit;
    }

    #scope-yang-kami-buat .product-destination-link:focus-visible{
      outline: 3px solid rgba(201,151,40,.42);
      outline-offset: 5px;
    }

    #scope-yang-kami-buat .product-destination-link:hover .description-card{
      transform: translateY(-6px);
      border-color: rgba(23,63,49,.20);
      box-shadow: var(--am-shadow-hover);
    }

    #scope-yang-kami-buat .product-head{
      position: relative;
      min-height: 330px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding: 0 8px 20px;
      text-align: center;
    }

    #scope-yang-kami-buat .product-logo-wrap{
      position: relative;
      width: 100%;
      min-height: 245px;
      display: grid;
      place-items: center;
      overflow: visible;
    }

    #scope-yang-kami-buat .product-logo{
      display: block;
      width: min(100%, 245px);
      max-height: 245px;
      object-fit: contain;
      will-change: transform;
      filter:
        drop-shadow(0 22px 22px rgba(0,0,0,.22))
        drop-shadow(0 8px 10px rgba(0,0,0,.10));
      animation: yang_kami_buat_logoFloat 5.4s ease-in-out infinite;
      transition: filter .3s ease;
    }

    #scope-yang-kami-buat .product-item:nth-child(2) .product-logo{
      animation-delay: -.9s;
    }

    #scope-yang-kami-buat .product-item:nth-child(3) .product-logo{
      animation-delay: -1.8s;
    }

    #scope-yang-kami-buat .product-item:nth-child(4) .product-logo{
      animation-delay: -2.7s;
    }

    #scope-yang-kami-buat .product-title{
      position: relative;
      display: inline-block;
      margin: 6px 0 0;
      padding-bottom: 9px;
      color: var(--am-green);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.35rem, 1.7vw, 1.75rem);
      font-weight: 700;
      line-height: 1.16;
      letter-spacing: -.02em;
      animation: yang_kami_buat_titleBreath 4.8s ease-in-out infinite;
    }

    #scope-yang-kami-buat .product-title::after{
      content: "";
      position: absolute;
      left: 18%;
      right: 18%;
      bottom: 0;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, var(--am-gold), transparent);
      transform: scaleX(.28);
      opacity: .55;
      animation: yang_kami_buat_titleLine 3.6s ease-in-out infinite;
    }

    #scope-yang-kami-buat .product-item:nth-child(2) .product-title{
      animation-delay: -.6s;
    }

    #scope-yang-kami-buat .product-item:nth-child(3) .product-title{
      animation-delay: -1.2s;
    }

    #scope-yang-kami-buat .product-item:nth-child(4) .product-title{
      animation-delay: -1.8s;
    }

    /* =========================================================
       DESCRIPTION CARD ONLY
    ========================================================= */
    #scope-yang-kami-buat .description-card{
      position: relative;
      flex: 1;
      overflow: hidden;
      padding: 25px 24px 24px;
      border: 1px solid rgba(23,63,49,.11);
      border-radius: 22px;
      background: rgba(255,253,247,.94);
      box-shadow: var(--am-shadow);
      transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
    }

    #scope-yang-kami-buat .description-card::before{
      content: "";
      position: absolute;
      left: 20px;
      right: 20px;
      top: 0;
      height: 4px;
      border-radius: 0 0 999px 999px;
      background: linear-gradient(90deg, var(--am-green-3), var(--am-gold-2));
    }

    #scope-yang-kami-buat .description-card:hover{
      transform: translateY(-6px);
      border-color: rgba(23,63,49,.20);
      box-shadow: var(--am-shadow-hover);
    }

    #scope-yang-kami-buat .description-card p{
      margin: 0 0 13px;
      color: #46594f;
      font-size: .98rem;
      line-height: 1.67;
    }

    #scope-yang-kami-buat .description-card p:last-child{
      margin-bottom: 0;
    }

    #scope-yang-kami-buat .lead-line{
      color: var(--am-green) !important;
      font-weight: 750;
    }

    #scope-yang-kami-buat .product-note{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(45,125,79,.09);
      color: var(--am-green) !important;
      font-size: .88rem !important;
      font-weight: 800;
    }

    #scope-yang-kami-buat .product-note::before{
      content: "✓";
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--am-green-2);
      color: #fff;
      font-size: .72rem;
      font-weight: 900;
    }

    #scope-yang-kami-buat .plan-row{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 17px;
    }

    #scope-yang-kami-buat .plan-chip{
      padding: 12px 10px;
      border: 1px solid rgba(23,63,49,.10);
      border-radius: 15px;
      background: #fffaf0;
      text-align: center;
      box-shadow: 0 7px 14px rgba(0,0,0,.07);
    }

    #scope-yang-kami-buat .plan-chip strong{
      display: block;
      color: var(--am-green);
      font-size: .94rem;
      line-height: 1.25;
    }

    #scope-yang-kami-buat .plan-chip small{
      display: block;
      margin-top: 3px;
      color: #647269;
      font-size: .73rem;
      line-height: 1.35;
    }

    #scope-yang-kami-buat .plan-chip .status{
      display: inline-block;
      margin-top: 8px;
      padding: 5px 9px;
      border-radius: 999px;
      font-size: .73rem;
      font-weight: 800;
    }

    #scope-yang-kami-buat .plan-chip.free .status{
      background: #daf3e3;
      color: #17633c;
    }

    #scope-yang-kami-buat .plan-chip.plus .status{
      background: #f9e3a5;
      color: #76500b;
    }

    /* =========================================================
       FUTURE PRODUCT VISUAL
    ========================================================= */
    #scope-yang-kami-buat .future-visual{
      position: relative;
      width: 220px;
      height: 220px;
      display: grid;
      place-items: center;
      animation: yang_kami_buat_logoFloat 5.4s ease-in-out infinite -2.7s;
      filter: drop-shadow(0 22px 22px rgba(0,0,0,.20));
    }

    #scope-yang-kami-buat .future-orbit{
      position: absolute;
      inset: 22px;
      border: 3px solid rgba(34,105,71,.20);
      border-top-color: var(--am-gold);
      border-right-color: var(--am-green-3);
      border-radius: 50%;
      animation: yang_kami_buat_spin 8s linear infinite;
    }

    #scope-yang-kami-buat .future-orbit::before,
#scope-yang-kami-buat .future-orbit::after{
      content: "";
      position: absolute;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      box-shadow: 0 5px 10px rgba(0,0,0,.15);
    }

    #scope-yang-kami-buat .future-orbit::before{
      top: 12px;
      left: 15px;
      background: var(--am-gold-2);
    }

    #scope-yang-kami-buat .future-orbit::after{
      right: 7px;
      bottom: 22px;
      background: var(--am-green-3);
    }

    #scope-yang-kami-buat .future-core{
      position: relative;
      z-index: 2;
      width: 118px;
      height: 118px;
      display: grid;
      place-items: center;
      border-radius: 32px;
      background:
        linear-gradient(145deg, #26734d, #143e30);
      box-shadow:
        inset 0 2px 0 rgba(255,255,255,.16),
        0 18px 25px rgba(0,0,0,.24);
    }

    #scope-yang-kami-buat .future-core svg{
      width: 68px;
      height: 68px;
    }

    #scope-yang-kami-buat .future-pulse{
      position: absolute;
      inset: 49px;
      border-radius: 26px;
      border: 2px solid rgba(229,176,72,.45);
      animation: yang_kami_buat_pulseRing 2.5s ease-out infinite;
    }

    #scope-yang-kami-buat .development-label{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      padding: 7px 11px;
      border-radius: 999px;
      background: #fff1c8;
      color: #75500d;
      font-size: .78rem;
      font-weight: 800;
    }

    #scope-yang-kami-buat .development-label::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--am-gold);
      box-shadow: 0 0 0 5px rgba(187,122,24,.12);
      animation: yang_kami_buat_statusPulse 1.8s ease-in-out infinite;
    }

    /* =========================================================
       ENTRANCE ANIMATION
    ========================================================= */
    #scope-yang-kami-buat .reveal{
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity .75s ease,
        transform .75s ease;
    }

    #scope-yang-kami-buat .reveal.show{
      opacity: 1;
      transform: translateY(0);
    }

    #scope-yang-kami-buat .delay-1{ transition-delay: .07s; }
    #scope-yang-kami-buat .delay-2{ transition-delay: .14s; }
    #scope-yang-kami-buat .delay-3{ transition-delay: .21s; }
    #scope-yang-kami-buat .delay-4{ transition-delay: .28s; }

    @keyframes yang_kami_buat_logoFloat {
      0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
      }
      50% {
        transform: translateY(-11px) rotate(.8deg) scale(1.018);
      }
    }

    @keyframes yang_kami_buat_titleBreath {
      0%, 100% {
        transform: translateY(0);
        text-shadow: 0 0 0 rgba(187,122,24,0);
      }
      50% {
        transform: translateY(-3px);
        text-shadow: 0 7px 16px rgba(187,122,24,.15);
      }
    }

    @keyframes yang_kami_buat_titleLine {
      0%, 100% {
        transform: scaleX(.28);
        opacity: .40;
      }
      50% {
        transform: scaleX(1);
        opacity: .92;
      }
    }

    @keyframes yang_kami_buat_spin {
      to { transform: rotate(360deg); }
    }

    @keyframes yang_kami_buat_pulseRing {
      0% {
        transform: scale(.75);
        opacity: .75;
      }
      100% {
        transform: scale(1.35);
        opacity: 0;
      }
    }

    @keyframes yang_kami_buat_statusPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.18); opacity: .7; }
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */
    @media (min-width: 1400px) {
      #scope-yang-kami-buat .products-section .container-fluid{
        max-width: 1550px;
      }
    }

    @media (max-width: 1199.98px) {
      #scope-yang-kami-buat .products-section{
        padding: 68px 0 78px;
      }

      #scope-yang-kami-buat .section-intro{
        margin-bottom: 48px;
      }

      #scope-yang-kami-buat .product-head{
        min-height: 315px;
      }

      #scope-yang-kami-buat .product-logo-wrap{
        min-height: 230px;
      }

      #scope-yang-kami-buat .product-logo{
        width: min(100%, 225px);
        max-height: 225px;
      }
    }

    @media (max-width: 991.98px) {
      #scope-yang-kami-buat .products-section{
        min-height: auto;
        padding: 58px 0 68px;
      }

      #scope-yang-kami-buat .product-head{
        min-height: 300px;
      }

      #scope-yang-kami-buat .description-card{
        min-height: 300px;
      }
    }

    @media (max-width: 767.98px) {
      #scope-yang-kami-buat .product-head{
        min-height: auto;
        padding-bottom: 17px;
      }

      #scope-yang-kami-buat .product-logo-wrap{
        min-height: 225px;
      }

      #scope-yang-kami-buat .description-card{
        min-height: 0;
      }
    }

    @media (max-width: 575.98px) {
      #scope-yang-kami-buat .products-section{
        padding: 40px 0 54px;
      }

      #scope-yang-kami-buat .products-section .container-fluid{
        padding-left: 18px !important;
        padding-right: 18px !important;
      }

      #scope-yang-kami-buat .section-label{
        margin-bottom: 13px;
        font-size: .77rem;
      }

      #scope-yang-kami-buat .section-title{
        font-size: clamp(2.2rem, 10.5vw, 3.2rem);
        line-height: 1.02;
      }

      #scope-yang-kami-buat .section-intro{
        margin-bottom: 36px;
        text-align: left !important;
        font-size: 1rem;
        line-height: 1.72;
      }

      #scope-yang-kami-buat .product-logo-wrap{
        min-height: 205px;
      }

      #scope-yang-kami-buat .product-logo{
        width: min(100%, 205px);
        max-height: 205px;
      }

      #scope-yang-kami-buat .future-visual{
        width: 195px;
        height: 195px;
      }

      #scope-yang-kami-buat .future-core{
        width: 104px;
        height: 104px;
      }

      #scope-yang-kami-buat .product-title{
        font-size: 1.45rem;
      }

      #scope-yang-kami-buat .description-card{
        padding: 22px 20px;
        border-radius: 19px;
      }

      #scope-yang-kami-buat .description-card p{
        font-size: .95rem;
      }

      #scope-yang-kami-buat .plan-row{
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #scope-yang-kami-buat *,
#scope-yang-kami-buat *::before,
#scope-yang-kami-buat *::after{
        animation: none !important;
        transition: none !important;
      }

      #scope-yang-kami-buat .reveal{
        opacity: 1 !important;
        transform: none !important;
      }
    }
  

    /* =========================================================
       REVISI FINAL — 3 PRODUK + 1 BLOK PENGEMBANGAN
       ========================================================= */

    /* ---------- TIGA PRODUK UTAMA ---------- */
    #scope-yang-kami-buat .primary-products-row{
      max-width: 1240px;
      margin-left: auto;
      margin-right: auto;
    }

    #scope-yang-kami-buat .primary-product{
      display: flex !important;
      flex-direction: column;
      align-self: stretch;
    }

    /* Area logo + judul dibuat sejajar */
    #scope-yang-kami-buat .primary-product .product-head{
      width: 100%;
      height: 322px;
      min-height: 322px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 18px;
    }

    #scope-yang-kami-buat .primary-product .product-logo-wrap{
      width: 100%;
      height: 236px;
      min-height: 236px;
      display: grid;
      place-items: center;
    }

    #scope-yang-kami-buat .primary-product .product-logo{
      width: min(100%, 232px);
      max-height: 232px;
      object-fit: contain;
    }

    /* Card deskripsi sama tinggi pada desktop.
       Tinggi mengikuti produk tertinggi di baris yang sama. */
    #scope-yang-kami-buat .primary-product .description-card{
      flex: 1 1 auto;
      width: 100%;
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    #scope-yang-kami-buat .primary-product .description-card .plan-row{
      margin-top: auto;
    }

    #scope-yang-kami-buat .primary-product .description-card .product-note{
      margin-top: auto;
      align-self: flex-start;
    }

    /* ---------- PRODUK LAIN DALAM PENGEMBANGAN ---------- */
    #scope-yang-kami-buat .future-product-section{
      width: min(100%, 1080px);
    }

    #scope-yang-kami-buat .future-product-head{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }

    #scope-yang-kami-buat .future-wide-visual{
      position: relative;
      width: 148px;
      height: 148px;
      display: grid;
      place-items: center;
      margin: 0 auto 4px;
      animation: yang_kami_buat_logoFloat 5.4s ease-in-out infinite -2.6s;
      filter: drop-shadow(0 20px 20px rgba(0,0,0,.18));
    }

    #scope-yang-kami-buat .future-wide-visual .future-orbit{
      inset: 13px;
    }

    #scope-yang-kami-buat .future-wide-visual .future-core{
      width: 84px;
      height: 84px;
      border-radius: 24px;
    }

    #scope-yang-kami-buat .future-wide-visual .future-core svg{
      width: 50px;
      height: 50px;
    }

    #scope-yang-kami-buat .future-wide-visual .future-pulse{
      inset: 33px;
      border-radius: 20px;
    }

    #scope-yang-kami-buat .future-product-title{
      margin-top: 0;
      font-size: clamp(1.55rem, 2vw, 2rem);
    }

    #scope-yang-kami-buat .future-wide-card{
      width: 100%;
      min-height: 0 !important;
      height: auto !important;
      padding: 0 !important;
      overflow: hidden;
      border-radius: 24px;
    }

    #scope-yang-kami-buat .future-copy-row{
      min-height: 205px;
    }

    #scope-yang-kami-buat .future-copy-col{
      display: flex;
      position: relative;
    }

    #scope-yang-kami-buat .future-copy-inner{
      width: 100%;
      padding: 28px 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* Garis pemisah 3 bagian hanya desktop */
    @media (min-width: 992px) {
      #scope-yang-kami-buat .future-copy-col:not(:last-child)::after{
        content: "";
        position: absolute;
        top: 18%;
        bottom: 18%;
        right: 0;
        width: 1px;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(23,63,49,.18),
          transparent
        );
      }
    }

    /* ---------- TABLET: 2 + 1 ---------- */
    @media (min-width: 768px) and (max-width: 991.98px) {
      #scope-yang-kami-buat .primary-products-row{
        max-width: 900px;
      }

      #scope-yang-kami-buat .primary-product .product-head{
        height: 298px;
        min-height: 298px;
      }

      #scope-yang-kami-buat .primary-product .product-logo-wrap{
        height: 216px;
        min-height: 216px;
      }

      #scope-yang-kami-buat .primary-product .product-logo{
        width: min(100%, 215px);
        max-height: 215px;
      }

      /* Produk ketiga berada di tengah pada baris kedua tablet */
      #scope-yang-kami-buat .product-website{
        margin-left: auto;
        margin-right: auto;
      }

      /* Tetap cukup seragam pada tablet */
      #scope-yang-kami-buat .primary-product .description-card{
        min-height: 355px;
      }

      #scope-yang-kami-buat .future-product-section{
        width: min(100%, 820px);
      }

      #scope-yang-kami-buat .future-copy-row{
        min-height: 0;
      }

      #scope-yang-kami-buat .future-copy-inner{
        padding: 24px 26px;
      }

      #scope-yang-kami-buat .future-copy-col + .future-copy-col{
        border-top: 1px solid rgba(23,63,49,.10);
      }
    }

    /* ---------- MOBILE: 1 KOLOM, TINGGI AUTO ---------- */
    @media (max-width: 767.98px) {
      #scope-yang-kami-buat .primary-products-row{
        max-width: 560px;
      }

      #scope-yang-kami-buat .primary-product .product-head{
        height: auto;
        min-height: 0;
        padding-bottom: 16px;
      }

      #scope-yang-kami-buat .primary-product .product-logo-wrap{
        height: auto;
        min-height: 214px;
      }

      #scope-yang-kami-buat .primary-product .product-logo{
        width: min(100%, 210px);
        max-height: 210px;
      }

      #scope-yang-kami-buat .primary-product .description-card{
        height: auto;
        min-height: 0;
      }

      #scope-yang-kami-buat .future-product-section{
        width: 100%;
      }

      #scope-yang-kami-buat .future-wide-visual{
        width: 132px;
        height: 132px;
      }

      #scope-yang-kami-buat .future-wide-visual .future-orbit{
        inset: 11px;
      }

      #scope-yang-kami-buat .future-wide-visual .future-core{
        width: 76px;
        height: 76px;
      }

      #scope-yang-kami-buat .future-wide-visual .future-pulse{
        inset: 29px;
      }

      #scope-yang-kami-buat .future-product-title{
        font-size: 1.48rem;
      }

      #scope-yang-kami-buat .future-wide-card{
        border-radius: 20px;
      }

      #scope-yang-kami-buat .future-copy-row{
        min-height: 0;
      }

      #scope-yang-kami-buat .future-copy-inner{
        padding: 22px 20px;
      }

      #scope-yang-kami-buat .future-copy-col + .future-copy-col{
        border-top: 1px solid rgba(23,63,49,.10);
      }
    }

    @media (max-width: 575.98px) {
      #scope-yang-kami-buat .primary-product .product-logo-wrap{
        min-height: 198px;
      }

      #scope-yang-kami-buat .primary-product .product-logo{
        width: min(100%, 195px);
        max-height: 195px;
      }

      #scope-yang-kami-buat .future-copy-inner{
        padding: 20px 18px;
      }
    }


/* Source style block 5 */
#scope-hubungi-kami{
      --am-green: #153f31;
      --am-green-2: #286b4d;
      --am-gold: #c7921c;
      --am-gold-light: #ffd861;
      --am-blue: #174d72;
      --am-text: #1d3346;
      --am-white: #ffffff;
      --am-cream: #fffaf0;
    }

    #scope-hubungi-kami *{
      box-sizing: border-box;
    }

    #scope-hubungi-kami{
      scroll-behavior: smooth;
    }

    #scope-hubungi-kami{
      margin: 0;
      min-height: 100%;
      overflow-x: hidden;
      background: #f8f4ea;
      color: var(--am-text);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    #scope-hubungi-kami .contact-section{
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 76px 0;
      background-image:
        linear-gradient(
          90deg,
          rgba(255,255,255,.16),
          rgba(255,255,255,.02),
          rgba(255,255,255,.16)
        ),
        url("../images/background-hubungi-kami.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      isolation: isolate;
    }

    #scope-hubungi-kami .contact-section::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at center, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 68%);
      pointer-events: none;
    }

    #scope-hubungi-kami .contact-shell{
      position: relative;
      width: min(100%, 920px);
      margin-inline: auto;
      text-align: center;
      z-index: 2;
    }

    #scope-hubungi-kami .contact-badge{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 18px;
      margin-bottom: 14px;
      border: 1px solid rgba(21,63,49,.34);
      border-radius: 999px;
      background: rgba(255,255,255,.44);
      backdrop-filter: blur(7px);
      color: var(--am-green);
      font-size: .88rem;
      font-weight: 800;
      box-shadow:
        0 8px 18px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.75);
    }

    #scope-hubungi-kami .contact-kicker{
      margin-bottom: 9px;
      color: #617489;
      font-size: clamp(.92rem, 1.2vw, 1.08rem);
      font-weight: 600;
      letter-spacing: .16em;
    }

    /* 3D headline */
    #scope-hubungi-kami .contact-title{
      margin: 0 0 15px;
      color: #163d5d;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.6rem, 5vw, 5.35rem);
      font-weight: 800;
      line-height: .96;
      letter-spacing: -.045em;
      text-transform: uppercase;
      text-shadow:
        0 1px 0 #dfeaf0,
        0 2px 0 #c5d4dd,
        0 3px 0 #aabecb,
        0 4px 0 #8fa8b8,
        0 8px 14px rgba(0,0,0,.22);
      animation: hubungi_kami_titleFloat 4.2s ease-in-out infinite;
    }

    #scope-hubungi-kami .contact-question{
      max-width: 780px;
      margin: 0 auto 22px;
      color: #9b770b;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.55rem, 2.7vw, 2.65rem);
      font-weight: 700;
      line-height: 1.16;
      text-shadow: 0 4px 12px rgba(255,255,255,.82);
    }

    #scope-hubungi-kami .contact-copy{
      max-width: 760px;
      margin: 0 auto 26px;
      color: #294154;
      font-size: clamp(1rem, 1.25vw, 1.17rem);
      line-height: 1.72;
      font-weight: 520;
      text-shadow: 0 2px 8px rgba(255,255,255,.88);
    }

    #scope-hubungi-kami .contact-copy p{
      margin-bottom: 6px;
    }

    /* 3D CTA */
    #scope-hubungi-kami .contact-cta{
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 58px;
      padding: 14px 28px;
      border: 0;
      border-radius: 999px;
      overflow: hidden;
      text-decoration: none;
      color: #183b2e;
      background:
        linear-gradient(180deg, #ffe47f 0%, #ffd158 46%, #f4bb2d 100%);
      font-size: clamp(1rem, 1.4vw, 1.18rem);
      font-weight: 900;
      letter-spacing: .01em;
      text-shadow:
        0 1px 0 rgba(255,255,255,.95),
        0 2px 0 rgba(143,102,8,.18),
        0 4px 7px rgba(0,0,0,.14);
      box-shadow:
        0 5px 0 #b77d0e,
        0 12px 24px rgba(0,0,0,.22),
        inset 0 2px 0 rgba(255,255,255,.75);
      transform: translateY(0);
      transition:
        transform .25s ease,
        box-shadow .25s ease;
      animation: hubungi_kami_ctaPulse 3.2s ease-in-out infinite;
    }

    #scope-hubungi-kami .contact-cta:hover{
      color: #123327;
      transform: translateY(-3px) scale(1.018);
      box-shadow:
        0 7px 0 #a76f08,
        0 18px 30px rgba(0,0,0,.24),
        inset 0 2px 0 rgba(255,255,255,.82);
    }

    #scope-hubungi-kami .contact-cta::before{
      content: "";
      position: absolute;
      top: -50%;
      left: -30%;
      width: 24%;
      height: 200%;
      transform: rotate(20deg);
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.78),
        transparent
      );
      animation: hubungi_kami_shine 3.5s ease-in-out infinite;
    }

    #scope-hubungi-kami .wa-icon{
      width: 27px;
      height: 27px;
      flex: 0 0 auto;
    }

    #scope-hubungi-kami .contact-other{
      margin-top: 28px;
      color: #334c5f;
      font-size: .98rem;
      font-weight: 650;
      text-shadow: 0 2px 8px rgba(255,255,255,.85);
    }

    #scope-hubungi-kami .contact-number{
      display: inline-block;
      margin-top: 7px;
      color: var(--am-green);
      font-size: clamp(1.22rem, 1.8vw, 1.48rem);
      font-weight: 900;
      letter-spacing: .05em;
      text-decoration: none;
      transition: transform .25s ease, color .25s ease;
    }

    #scope-hubungi-kami .contact-number:hover{
      color: #0d6846;
      transform: translateY(-2px);
    }

    #scope-hubungi-kami .contact-divider{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      width: min(100%, 520px);
      margin: 27px auto 18px;
    }

    #scope-hubungi-kami .contact-divider::before,
#scope-hubungi-kami .contact-divider::after{
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(30,74,67,.50),
        transparent
      );
    }

    #scope-hubungi-kami .seedling{
      display: inline-block;
      font-size: 1.75rem;
      filter: drop-shadow(0 5px 8px rgba(0,0,0,.15));
      animation: hubungi_kami_seedlingGrow 3s ease-in-out infinite;
      transform-origin: 50% 100%;
    }

    #scope-hubungi-kami .contact-closing{
      max-width: 580px;
      margin: 0 auto;
      color: #30495b;
      font-size: clamp(1rem, 1.25vw, 1.14rem);
      font-weight: 650;
      line-height: 1.6;
      text-shadow: 0 2px 8px rgba(255,255,255,.88);
    }

    #scope-hubungi-kami .reveal{
      opacity: 0;
      transform: translateY(22px);
      animation: hubungi_kami_revealUp .8s ease forwards;
    }

    #scope-hubungi-kami .delay-1{ animation-delay: .08s; }
    #scope-hubungi-kami .delay-2{ animation-delay: .16s; }
    #scope-hubungi-kami .delay-3{ animation-delay: .24s; }
    #scope-hubungi-kami .delay-4{ animation-delay: .32s; }
    #scope-hubungi-kami .delay-5{ animation-delay: .40s; }

    @keyframes hubungi_kami_revealUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes hubungi_kami_titleFloat {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-5px);
      }
    }

    @keyframes hubungi_kami_ctaPulse {
      0%, 100% {
        filter: brightness(1);
      }
      50% {
        filter: brightness(1.06);
      }
    }

    @keyframes hubungi_kami_shine {
      0% {
        left: -35%;
      }
      45%, 100% {
        left: 125%;
      }
    }

    @keyframes hubungi_kami_seedlingGrow {
      0%, 100% {
        transform: scale(1) rotate(0deg);
      }
      50% {
        transform: scale(1.12) rotate(2deg);
      }
    }

    /* Tablet */
    @media (max-width: 991.98px) {
      #scope-hubungi-kami .contact-section{
        min-height: auto;
        padding: 64px 0 72px;
        background-position: center center;
      }

      #scope-hubungi-kami .contact-shell{
        width: min(100%, 780px);
      }
    }

    /* Mobile */
    @media (max-width: 575.98px) {
      #scope-hubungi-kami .contact-section{
        min-height: 100svh;
        padding: 42px 0 50px;
        background-position: center;
      }

      #scope-hubungi-kami .contact-section .container{
        padding-left: 18px;
        padding-right: 18px;
      }

      #scope-hubungi-kami .contact-badge{
        padding: 7px 15px;
        font-size: .78rem;
      }

      #scope-hubungi-kami .contact-kicker{
        font-size: .82rem;
        letter-spacing: .09em;
      }

      #scope-hubungi-kami .contact-title{
        font-size: clamp(2.25rem, 12vw, 3.25rem);
        text-shadow:
          0 1px 0 #dfeaf0,
          0 2px 0 #bccdd8,
          0 3px 0 #9eb4c2,
          0 6px 12px rgba(0,0,0,.20);
      }

      #scope-hubungi-kami .contact-question{
        font-size: clamp(1.45rem, 7.5vw, 2.05rem);
      }

      #scope-hubungi-kami .contact-copy{
        font-size: .98rem;
        line-height: 1.66;
      }

      #scope-hubungi-kami .contact-cta{
        width: 100%;
        min-height: 56px;
        padding: 13px 18px;
        font-size: 1rem;
      }

      #scope-hubungi-kami .contact-other{
        margin-top: 24px;
        font-size: .92rem;
      }

      #scope-hubungi-kami .contact-divider{
        gap: 13px;
        margin-top: 24px;
      }

      #scope-hubungi-kami .contact-closing{
        font-size: .98rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #scope-hubungi-kami *,
#scope-hubungi-kami *::before,
#scope-hubungi-kami *::after{
        animation: none !important;
        transition: none !important;
      }

      #scope-hubungi-kami .reveal{
        opacity: 1;
        transform: none;
      }
    }
  

    #scope-hubungi-kami .contact-closing{
      text-align: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    #scope-hubungi-kami .contact-divider{
      justify-content: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }


/* Source style block 6 */
#beranda, #tentang, #cara-kami-membantu, #yang-kami-buat, #hubungi-kami { scroll-margin-top: 86px; }
    .section-scope { position: relative; width: 100%; }


/* ============================================================
   WEB-REDESIGN-03 R1 — MOBILE RESPONSIVE REFINEMENT

   Scope:
   - mobile <= 575.98px only
   - Beranda
   - principle cards
   - Tentang

   Desktop/tablet >= 576px intentionally unchanged.
   ============================================================ */

@media (max-width: 575.98px) {

  /* ==========================================================
     BERANDA — MOBILE TYPOGRAPHY
     ========================================================== */

  #beranda .hero-content {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  #beranda .copy-column {
    padding-left: 10px;
    padding-right: 10px;
  }

  #beranda .hero-title {
    margin-bottom: 16px;
    font-size: clamp(2.05rem, 9.5vw, 2.40rem);
    line-height: 1.01;
    letter-spacing: -.025em;
  }

  /*
   * Dua baris hijau mempunyai pemisah HTML sendiri.
   * Pertahankan masing-masing sebagai satu baris pada mobile
   * normal agar hierarchy headline lebih rapi.
   */
  #beranda .hero-title .line {
    display: block;
    white-space: nowrap;
  }

  #beranda .hero-description {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.64;
  }

  #beranda .hero-description p {
    margin-bottom: 11px;
  }

  /* ==========================================================
     BERANDA — HERO VISUAL
     ========================================================== */

  #beranda .visual-column {
    min-height: 318px;
    margin-top: 2px;
  }

  #beranda .plant-stage {
    width: min(103%, 360px);
  }

  /* ==========================================================
     BERANDA — PRINCIPLE CARDS
     ========================================================== */

  #beranda .cards-row {
    margin-top: 14px;
    row-gap: 11px;
  }

  #beranda .feature-card {
    gap: 12px;
    min-height: auto;
    padding: 16px 16px;
    border-radius: 15px;
  }

  #beranda .feature-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  #beranda .feature-card h2 {
    margin-bottom: 5px;
    font-size: 1.02rem;
    line-height: 1.24;
  }

  #beranda .feature-card p {
    margin-bottom: 0;
    font-size: .94rem;
    line-height: 1.52;
  }

  /* ==========================================================
     TENTANG — MOBILE IMAGE / SPACING
     ========================================================== */

  #scope-tentang .about-section {
    min-height: auto;
    padding-top: 30px;
    padding-bottom: 46px;
  }

  #scope-tentang .about-visual {
    min-height: auto;
    margin-bottom: 3px;
  }

  #scope-tentang .about-image {
    width: min(78vw, 305px);
    max-width: 100%;
  }

  /* ==========================================================
     TENTANG — MOBILE TYPOGRAPHY
     ========================================================== */

  #scope-tentang .section-label {
    margin-bottom: 10px;
  }

  #scope-tentang .about-title {
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
    font-size: clamp(2rem, 9.2vw, 2.55rem);
    line-height: 1;
    letter-spacing: -.035em;
  }

  #scope-tentang .about-description {
    margin-bottom: 24px;
    font-size: .98rem;
    line-height: 1.68;
  }

  #scope-tentang .about-description p {
    margin-bottom: 12px;
  }

  /* ==========================================================
     TENTANG — CARDS
     ========================================================== */

  #scope-tentang .about-card {
    padding: 16px;
    border-radius: 16px;
  }

  #scope-tentang .about-number {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  #scope-tentang .about-card h3 {
    font-size: 1rem;
    line-height: 1.28;
  }

  #scope-tentang .about-card p {
    font-size: .92rem;
    line-height: 1.55;
  }
}


/*
 * Extra-small safety.
 * Menjaga headline tidak overflow pada viewport yang lebih sempit
 * dari perangkat 390px yang sedang direview.
 */
@media (max-width: 340px) {

  #beranda .hero-title {
    font-size: 1.92rem;
  }

  #beranda .hero-title .line {
    white-space: normal;
  }

  #scope-tentang .about-image {
    width: min(76vw, 270px);
  }

  #scope-tentang .about-title {
    font-size: 1.95rem;
  }
}


/* ============================================================
   WEB-REDESIGN-03 R2 NAVIGATION ALIGNMENT

   Fallback offset untuk sticky navbar.
   JavaScript melakukan kalkulasi aktual; scroll-margin ini
   menjadi fallback untuk native hash navigation.
   ============================================================ */

#beranda,
#tentang,
#cara-kami-membantu,
#yang-kami-buat,
#hubungi-kami {
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

@media (max-width: 991.98px) {
  #beranda,
  #tentang,
  #cara-kami-membantu,
  #yang-kami-buat,
  #hubungi-kami {
    scroll-margin-top: calc(var(--nav-h) + 8px);
  }
}


/* ============================================================
   WEB-REDESIGN-03 R3 — MOBILE HERO OVERFLOW CORRECTION

   Hanya memperbaiki headline Beranda pada mobile.
   Desktop >= 576px tidak berubah.
   ============================================================ */

@media (max-width: 575.98px) {

  #beranda .hero-title {
    max-width: 100%;
    font-size: clamp(1.90rem, 8.4vw, 2.18rem);
    line-height: 1.02;
    overflow-wrap: normal;
    word-break: normal;
  }

  #beranda .hero-title .line {
    display: block;
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 360px) {

  #beranda .hero-title {
    font-size: clamp(1.78rem, 8.1vw, 1.95rem);
  }
}