/* ── HOME-SPECIFIC STYLES ─────────────────────────────── */

      /* Hero */
      .hero {
        min-height: 100vh;
        background: linear-gradient(
          145deg,
          var(--green-dark) 0%,
          #0d2210 55%,
          #152b17 100%
        );
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding: 130px clamp(20px, 5.5vw, 90px) 80px;
        gap: 60px;
        position: relative;
        overflow: hidden;
      }
      .hero-grid {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 55px 55px;
        mask-image: radial-gradient(
          ellipse at 60% 40%,
          black 10%,
          transparent 75%
        );
      }
      .hero-glow {
        position: absolute;
        pointer-events: none;
        border-radius: 50%;
      }
      .hero-glow-1 {
        width: 600px;
        height: 600px;
        right: -80px;
        top: -120px;
        background: radial-gradient(
          circle,
          rgba(76, 175, 80, 0.22) 0%,
          transparent 70%
        );
      }
      .hero-glow-2 {
        width: 400px;
        height: 400px;
        left: 10%;
        bottom: 0;
        background: radial-gradient(
          circle,
          rgba(245, 196, 48, 0.1) 0%,
          transparent 70%
        );
      }
      .hero-content {
        position: relative;
        z-index: 2;
      }
      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        padding: 7px 16px;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 30px;
        animation: fadeSlideDown 0.7s var(--ease-out) 0.1s both;
      }
      .hero-badge .dot {
        width: 6px;
        height: 6px;
        background: var(--gold);
        border-radius: 50%;
      }
      .hero-tagline {
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--gold);
        margin: 14px 0 0;
        animation: fadeSlideDown 0.7s var(--ease-out) 0.15s both;
      }
      .hero-h1 {
        font-size: clamp(3rem, 6.5vw, 6rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.04em;
        color: var(--white);
        margin-bottom: 28px;
        animation: fadeSlideDown 0.75s var(--ease-out) 0.2s both;
      }
      .hero-h1 .line-green {
        color: var(--green-light);
        display: block;
      }
      .hero-h1 .line-gold {
        color: var(--gold);
        display: block;
      }
      .hero-desc {
        font-size: clamp(1rem, 1.4vw, 1.2rem);
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.8;
        max-width: 500px;
        margin-bottom: 40px;
        animation: fadeSlideDown 0.8s var(--ease-out) 0.35s both;
      }
      .hero-btns {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        animation: fadeSlideDown 0.8s var(--ease-out) 0.5s both;
      }
      .hero-stat-row {
        display: flex;
        gap: 36px;
        margin-top: 56px;
        flex-wrap: wrap;
        animation: fadeSlideDown 0.8s var(--ease-out) 0.65s both;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 36px;
      }
      .hero-stat strong {
        display: block;
        font-size: 1.9rem;
        font-weight: 800;
        color: var(--gold);
        letter-spacing: -0.03em;
        line-height: 1;
      }
      .hero-stat span {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.55);
        margin-top: 4px;
        display: block;
      }

      /* Hero Visual */
      .hero-visual {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 26px;
      }
      .hero-flip-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: var(--white);
        font-family: var(--font);
        font-size: 0.88rem;
        font-weight: 600;
        padding: 10px 20px;
        border-radius: 50px;
        cursor: pointer;
        transition:
          background 0.2s,
          border-color 0.2s,
          transform 0.2s;
      }
      .hero-flip-toggle:hover {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(245, 196, 48, 0.4);
        transform: translateY(-2px);
      }
      .hero-flip-icon {
        font-size: 1rem;
        display: inline-block;
        transition: transform 0.4s;
      }
      .hero-flip-toggle[aria-pressed="true"] .hero-flip-icon {
        transform: rotate(180deg);
      }
      .hero-orb-wrap {
        position: relative;
        width: clamp(320px, 42vw, 580px);
        height: clamp(320px, 42vw, 580px);
      }
      .orb-ring {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(76, 175, 80, 0.2);
        animation: spin linear infinite;
        pointer-events: none;
      }
      .orb-ring-1 {
        inset: 0;
        animation-duration: 22s;
      }
      .orb-ring-2 {
        inset: -28px;
        animation-duration: 34s;
        animation-direction: reverse;
        border-style: dashed;
        opacity: 0.6;
      }
      .orb-ring-3 {
        inset: -56px;
        animation-duration: 50s;
        opacity: 0.3;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      .orb-flip {
        position: absolute;
        inset: 10px;
        perspective: 1400px;
      }
      .orb-flip-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.9s cubic-bezier(0.4, 0.2, 0.2, 1);
        transform-style: preserve-3d;
      }
      .orb-flip.is-flipped .orb-flip-inner {
        transform: rotateY(180deg);
      }
      .orb-center {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        background: radial-gradient(
          circle at 38% 38%,
          rgba(76, 175, 80, 0.4),
          rgba(26, 61, 28, 0.9) 60%
        );
        border-radius: 50%;
        border: 1px solid rgba(76, 175, 80, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
        box-shadow:
          0 0 80px rgba(76, 175, 80, 0.25),
          inset 0 0 60px rgba(0, 0, 0, 0.4);
      }
      .orb-face-back {
        transform: rotateY(180deg);
      }
      .orb-emoji {
        font-size: clamp(3.5rem, 6vw, 5.5rem);
        animation: float 4s ease-in-out infinite;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .orb-emoji img {
        width: clamp(250px, 40vw, 460px);
        height: auto;
        filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
      }
      @keyframes float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-14px);
        }
      }
      .orb-label {
        color: var(--white);
        font-weight: 700;
        font-size: 1rem;
        opacity: 0.9;
      }
      .orb-sublabel {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.78rem;
      }
      .orb-dot {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        box-shadow: 0 0 14px currentColor;
        pointer-events: none;
      }
      .orb-dot-1 {
        top: 12%;
        left: 50%;
        background: var(--gold);
        color: var(--gold);
      }
      .orb-dot-2 {
        bottom: 14%;
        right: 48%;
        background: var(--green-light);
        color: var(--green-light);
      }
      .orb-dot-3 {
        top: 50%;
        right: 8%;
        background: var(--citrus);
        color: var(--citrus);
      }
      .scroll-hint {
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        z-index: 2;
        animation: fadeSlideDown 1s 1s both;
      }
      .scroll-hint-line {
        width: 1px;
        height: 54px;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(255, 255, 255, 0.4)
        );
        animation: scrollPulse 2.2s ease-in-out infinite;
      }
      .scroll-hint span {
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.4);
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      @keyframes scrollPulse {
        0%,
        100% {
          opacity: 0.4;
        }
        50% {
          opacity: 1;
        }
      }

      /* Features strip */
      .features-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid var(--gray-100);
      }
      .feature-cell {
        padding: 40px 36px;
        display: flex;
        align-items: flex-start;
        gap: 20px;
        border-right: 1px solid var(--gray-100);
        transition: background 0.25s;
      }
      .feature-cell:last-child {
        border-right: none;
      }
      .feature-cell:hover {
        background: var(--off-white);
      }
      .feature-icon-wrap {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        flex-shrink: 0;
        background: var(--green-pale);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        overflow: hidden;
      }
      .feature-icon-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 4px;
      }
      .feature-cell h4 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 6px;
      }
      .feature-cell p {
        font-size: 0.88rem;
        color: var(--gray-600);
        line-height: 1.6;
      }

      /* About section */
      .about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
      }
      .about-img-container {
        position: relative;
      }
      .about-img-main {
        width: 100%;
        aspect-ratio: 4/5;
        border-radius: var(--radius-lg);
        background: linear-gradient(140deg, var(--green-pale) 0%, #c5e8c5 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8rem;
        overflow: hidden;
        position: relative;
      }
      .about-img-accent {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(42, 107, 45, 0.08),
          rgba(245, 196, 48, 0.06)
        );
      }
      .about-badge {
        position: absolute;
        bottom: -24px;
        right: -20px;
        background: var(--green-dark);
        color: var(--white);
        width: 130px;
        height: 130px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 5px solid var(--white);
        box-shadow: var(--shadow-md);
        text-align: center;
      }
      .about-badge strong {
        font-size: 2.2rem;
        font-weight: 900;
        color: var(--gold);
        line-height: 1;
      }
      .about-badge span {
        font-size: 0.66rem;
        opacity: 0.85;
        margin-top: 3px;
        padding: 0 8px;
        line-height: 1.3;
      }
      .about-content .section-title {
        margin-bottom: 24px;
      }
      .about-content p {
        font-size: 1rem;
        line-height: 1.85;
        color: var(--gray-600);
        margin-bottom: 18px;
      }
      .about-points {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 28px 0;
      }
      .about-point {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--gray-800);
      }
      .about-point-dot {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--green-pale);
        border: 2px solid var(--green-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
      }

      /* Blends preview */
      .blends-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 24px;
        flex-wrap: wrap;
        margin-bottom: 52px;
      }
      .blends-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
      }
      .blend-card {
        background: var(--white);
        border: 1px solid var(--gray-100);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition:
          transform 0.35s var(--ease-out),
          box-shadow 0.35s;
      }
      .blend-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
      }
      .blend-card:hover .blend-thumb img {
        transform: translateY(-4px) scale(1.04);
      }
      .blend-body {
        padding: 22px;
      }
      .blend-body h3 {
        font-size: 1.08rem;
        font-weight: 700;
        color: var(--ink);
        margin-bottom: 8px;
      }
      .blend-body p {
        font-size: 0.83rem;
        color: var(--gray-600);
        line-height: 1.6;
        margin-bottom: 14px;
      }
      .blend-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .blend-tag {
        background: var(--green-pale);
        color: var(--green-mid);
        border: 1px solid rgba(76, 175, 80, 0.2);
        padding: 3px 10px;
        border-radius: 50px;
        font-size: 0.73rem;
        font-weight: 600;
      }

      /* Events CTA band */
      .events-cta {
        background: var(--green-dark);
        border-radius: var(--radius-xl);
        padding: 70px clamp(30px, 6vw, 80px);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 48px;
        align-items: center;
        position: relative;
        overflow: hidden;
      }
      .events-cta::before {
        content: "";
        position: absolute;
        right: -60px;
        top: -80px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(245, 196, 48, 0.13) 0%,
          transparent 70%
        );
      }
      .events-cta::after {
        content: "";
        position: absolute;
        left: -30px;
        bottom: -60px;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(76, 175, 80, 0.12) 0%,
          transparent 70%
        );
      }
      .events-cta .section-title {
        color: var(--white);
        margin-bottom: 16px;
      }
      .events-cta p {
        color: rgba(255, 255, 255, 0.72);
        font-size: 1.05rem;
        line-height: 1.75;
        max-width: 540px;
        margin-bottom: 32px;
      }
      .discount-pill {
        background: var(--gold);
        color: var(--ink);
        padding: 28px 36px;
        border-radius: var(--radius-lg);
        text-align: center;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
      }
      .discount-pill strong {
        font-size: 3.2rem;
        font-weight: 900;
        display: block;
        line-height: 1;
        letter-spacing: -0.04em;
      }
      .discount-pill span {
        font-size: 0.88rem;
        font-weight: 600;
        display: block;
        margin-top: 4px;
      }

      /* SDG */
      .sdg-grid {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .sdg-chip {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--white);
        border: 1px solid var(--gray-100);
        border-radius: var(--radius-sm);
        padding: 12px 18px;
        box-shadow: var(--shadow-sm);
        transition:
          transform 0.2s,
          box-shadow 0.2s;
      }
      .sdg-chip:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
      }
      .sdg-num {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--green-dark);
        color: var(--white);
        font-weight: 800;
        font-size: 0.82rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .sdg-chip span {
        font-size: 1.4rem;
        line-height: 1;
      }

      /* Keyframes */
      @keyframes fadeSlideDown {
        from {
          opacity: 0;
          transform: translateY(24px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Responsive */
      @media (max-width: 900px) {
        .hero {
          grid-template-columns: 1fr;
          min-height: auto;
          padding-bottom: 60px;
        }
        .hero-visual {
          display: none;
        }
        .features-strip {
          grid-template-columns: 1fr;
        }
        .feature-cell {
          border-right: none;
          border-bottom: 1px solid var(--gray-100);
        }
        .about-grid {
          grid-template-columns: 1fr;
          gap: 50px;
        }
        .about-badge {
          bottom: -16px;
          right: 12px;
          width: 110px;
          height: 110px;
        }
        .blends-grid {
          grid-template-columns: 1fr 1fr;
        }
        .events-cta {
          grid-template-columns: 1fr;
          text-align: center;
        }
        .events-cta p {
          margin-left: auto;
          margin-right: auto;
        }
        .discount-pill {
          justify-self: center;
        }
      }
      @media (max-width: 540px) {
        .blends-grid {
          grid-template-columns: 1fr;
        }
        .hero-stat-row {
          gap: 24px;
        }
      }