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

   :root {
       --green: #1a5c2e;
       --green2: #2d7a45;
       --green-light: #e8f5ec;
       --green-pale: #f2faf4;
       --gold: #b8860b;
       --gold-light: #fdf6e3;
       --ink: #111827;
       --muted: #6b7280;
       --muted2: #9ca3af;
       --border: #e5e7eb;
       --surface: #f9fafb;
       --white: #fff;
   }

   body {
       font-family: 'Plus Jakarta Sans', sans-serif;
       color: var(--ink);
       background: var(--surface)
   }

   /* NAV */
   .nav {
       display: flex;
       align-items: center;
       padding: 0 40px;
       height: 60px;
       border-bottom: 1px solid var(--border);
       background: var(--white);
       gap: 20px;
       position: sticky;
       top: 0;
       z-index: 100
   }

   .nav-logo {
       display: flex;
       align-items: center;
       gap: 10px;
       text-decoration: none
   }

   .nav-logo img {
       height: 50px;
       width: auto;
       max-width: 180px;
       display: block;
       object-fit: contain;
   }

   .hex {
       width: 34px;
       height: 34px;
       background: var(--green);
       clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0
   }

   .hex span {
       color: #fff;
       font-size: 11px;
       font-weight: 700;
       font-family: 'Plus Jakarta Sans', sans-serif
   }

   .nav-brand {
       font-family: 'Playfair Display', serif;
       font-size: 18px;
       color: var(--green);
       font-weight: 700
   }

   .nav-sub {
       font-size: 10px;
       color: var(--muted);
       margin-left: 2px;
       letter-spacing: 0.5px
   }

   .nav-links {
       display: flex;
       gap: 24px;
       margin-left: auto;
       font-size: 13px
   }

   .nav-links a {
       color: var(--muted);
       text-decoration: none;
       transition: color 0.2s
   }

   .nav-links a:hover {
       color: var(--green)
   }

   .nav-cta {
       background: var(--green);
       color: #fff;
       font-size: 12px;
       padding: 8px 18px;
       border-radius: 7px;
       font-weight: 600;
       font-family: 'Plus Jakarta Sans', sans-serif;
       margin-left: 8px;
       border: none;
       cursor: pointer;
       white-space: nowrap
   }

   /* Hamburger */
   .nav-hamburger {
       display: none;
       flex-direction: column;
       gap: 5px;
       cursor: pointer;
       padding: 4px;
       margin-left: auto;
       background: none;
       border: none
   }

   .nav-hamburger span {
       width: 22px;
       height: 2px;
       background: var(--ink);
       border-radius: 2px;
       transition: all 0.3s
   }

   .nav-hamburger.open span:nth-child(1) {
       transform: translateY(7px) rotate(45deg)
   }

   .nav-hamburger.open span:nth-child(2) {
       opacity: 0
   }

   .nav-hamburger.open span:nth-child(3) {
       transform: translateY(-7px) rotate(-45deg)
   }

   /* Mobile menu */
   .nav-mobile-menu {
       display: none;
       position: fixed;
       top: 60px;
       left: 0;
       right: 0;
       background: var(--white);
       border-bottom: 1px solid var(--border);
       padding: 16px 24px;
       z-index: 99;
       flex-direction: column;
       gap: 4px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08)
   }

   .nav-mobile-menu a {
       padding: 10px 0;
       font-size: 14px;
       color: var(--muted);
       text-decoration: none;
       border-bottom: 1px solid var(--border)
   }

   .nav-mobile-menu a:last-of-type {
       border-bottom: none
   }

   .nav-mobile-menu .nav-cta {
       margin: 10px 0 0;
       width: 100%;
       text-align: center;
       padding: 12px
   }

   .nav-mobile-menu.open {
       display: flex
   }

   /* HERO */
   .hero {
       background: var(--green);
       padding: 60px 40px 0;
       position: relative;
       overflow: hidden
   }

   .hero-pattern {
       position: absolute;
       top: 0;
       right: 0;
       width: 280px;
       height: 280px;
       opacity: 0.07
   }

   .hero-inner {
       max-width: 1100px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 40px;
       align-items: flex-end
   }

   .hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: rgba(255, 255, 255, 0.15);
       border: 1px solid rgba(255, 255, 255, 0.25);
       border-radius: 20px;
       padding: 5px 14px;
       font-size: 12px;
       color: rgba(255, 255, 255, 0.9);
       margin-bottom: 18px
   }

   .hero-badge-dot {
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: #4ade80;
       flex-shrink: 0
   }

   .hero-h1 {
       font-family: 'Playfair Display', serif;
       font-size: 36px;
       color: #fff;
       line-height: 1.2;
       margin-bottom: 14px;
       max-width: 480px
   }

   .hero-h1 em {
       color: #86efac;
       font-style: normal
   }

   .hero-sub {
       font-size: 14px;
       color: rgba(255, 255, 255, 0.75);
       max-width: 440px;
       line-height: 1.7;
       margin-bottom: 28px
   }

   .hero-btns {
       display: flex;
       gap: 12px;
       margin-bottom: 32px;
       flex-wrap: wrap
   }

   .btn-white {
       background: #fff;
       color: var(--green);
       font-size: 13px;
       font-weight: 600;
       padding: 10px 22px;
       border-radius: 8px;
       border: none;
       font-family: 'Plus Jakarta Sans', sans-serif;
       cursor: pointer
   }

   .btn-outline {
       background: transparent;
       color: #fff;
       font-size: 13px;
       font-weight: 500;
       padding: 10px 22px;
       border-radius: 8px;
       border: 1.5px solid rgba(255, 255, 255, 0.4);
       font-family: 'Plus Jakarta Sans', sans-serif;
       cursor: pointer
   }

   .hero-stats {
       display: flex;
       gap: 32px;
       padding: 20px 0 24px;
       border-top: 1px solid rgba(255, 255, 255, 0.15);
       flex-wrap: wrap
   }

   .hstat-val {
       font-size: 24px;
       font-weight: 700;
       color: #fff;
       font-family: 'Plus Jakarta Sans', sans-serif
   }

   .hstat-lbl {
       font-size: 11px;
       color: rgba(255, 255, 255, 0.6);
       margin-top: 2px
   }

   .hero-visual {
       display: flex;
       align-items: flex-end;
       justify-content: center;
       padding-bottom: 0
   }

   .hero-card {
       background: rgba(255, 255, 255, 0.12);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 16px 16px 0 0;
       padding: 20px;
       width: 280px
   }

   .hero-card-title {
       font-size: 12px;
       font-weight: 600;
       color: rgba(255, 255, 255, 0.8);
       margin-bottom: 12px
   }

   .hero-card-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 8px 10px;
       background: rgba(255, 255, 255, 0.08);
       border-radius: 8px;
       margin-bottom: 6px
   }

   .hero-card-icon {
       width: 28px;
       height: 28px;
       border-radius: 6px;
       background: rgba(255, 255, 255, 0.15);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
       flex-shrink: 0
   }

   .hero-card-name {
       font-size: 11px;
       font-weight: 500;
       color: #fff
   }

   .hero-card-loc {
       font-size: 10px;
       color: rgba(255, 255, 255, 0.6)
   }

   .hero-card-price {
       font-size: 12px;
       font-weight: 700;
       color: #86efac;
       margin-left: auto;
       white-space: nowrap
   }

   /* SECTIONS */
   .container {
       max-width: 1100px;
       margin: 0 auto
   }

   .section {
       padding: 48px 40px
   }

   .section-label {
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 2px;
       text-transform: uppercase;
       color: var(--green);
       margin-bottom: 6px
   }

   .section-title {
       font-family: 'Playfair Display', serif;
       font-size: 26px;
       color: var(--ink);
       margin-bottom: 6px
   }

   .section-sub {
       font-size: 14px;
       color: var(--muted);
       margin-bottom: 28px;
       line-height: 1.6
   }

   /* FEATURE CARDS */
   .card-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 16px
   }

   .feature-card {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 20px;
       transition: box-shadow 0.2s
   }

   .feature-card:hover {
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08)
   }

   .feat-icon {
       width: 42px;
       height: 42px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       margin-bottom: 14px
   }

   .feat-icon.green {
       background: var(--green-light);
       color: var(--green)
   }

   .feat-icon.gold {
       background: var(--gold-light);
       color: var(--gold)
   }

   .feat-icon.blue {
       background: #e0f2fe;
       color: #0284c7
   }

   .feat-title {
       font-size: 15px;
       font-weight: 600;
       color: var(--ink);
       margin-bottom: 6px
   }

   .feat-desc {
       font-size: 13px;
       color: var(--muted);
       line-height: 1.6
   }

   /* PRODUCTS */
   .product-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 16px
   }

   .product-card {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 12px;
       overflow: hidden;
       transition: box-shadow 0.2s
   }

   .product-card:hover {
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08)
   }

   .product-img {
       height: 100px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 36px
   }

   .product-img.bg1 {
       background: #e8f5ec
   }

   .product-img.bg2 {
       background: #fdf6e3
   }

   .product-img.bg3 {
       background: #e6f1fb
   }

   .product-info {
       padding: 14px 16px
   }

   .product-name {
       font-size: 14px;
       font-weight: 600;
       color: var(--ink);
       margin-bottom: 3px
   }

   .product-loc {
       font-size: 11px;
       color: var(--muted);
       margin-bottom: 8px
   }

   .product-price {
       font-size: 16px;
       font-weight: 700;
       color: var(--green);
       font-family: 'Plus Jakarta Sans', sans-serif
   }

   .product-badge {
       display: inline-block;
       font-size: 10px;
       padding: 2px 7px;
       border-radius: 4px;
       background: var(--green-light);
       color: var(--green);
       font-weight: 600;
       margin-left: 6px
   }

   /* BANOM SECTION */
   .banom-section {
       background: var(--green-pale);
       padding: 48px 40px
   }

   .banom-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 12px;
       max-width: 1100px;
       margin: 0 auto
   }

   .banom-card {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 10px;
       padding: 16px;
       text-align: center
   }

   .banom-icon {
       font-size: 28px;
       margin-bottom: 8px
   }

   .banom-name {
       font-size: 13px;
       font-weight: 600;
       color: var(--green);
       margin-bottom: 3px
   }

   .banom-desc {
       font-size: 11px;
       color: var(--muted)
   }

   /* CTA SECTION */
   .cta-section {
       background: var(--green);
       padding: 48px 40px;
       text-align: center
   }

   .cta-h {
       font-family: 'Playfair Display', serif;
       font-size: 28px;
       color: #fff;
       margin-bottom: 10px
   }

   .cta-p {
       font-size: 14px;
       color: rgba(255, 255, 255, 0.75);
       margin-bottom: 24px
   }

   /* FOOTER */
   footer {
       background: #0f3d1e;
       padding: 32px 40px;
       color: rgba(255, 255, 255, 0.6);
       font-size: 12px;
       text-align: center
   }

   .footer-brand {
       font-family: 'Playfair Display', serif;
       font-size: 16px;
       color: #fff;
       margin-bottom: 4px
   }

   .divider-line {
       height: 1px;
       background: var(--border);
       max-width: 1100px;
       margin: 0 auto
   }

   /* ===================== RESPONSIVE ===================== */

   /* Tablet: 768px - 1024px */
   @media (max-width:1024px) {
       .nav {
           padding: 0 20px
       }

       .hero {
           padding: 40px 20px 0
       }

       .hero-h1 {
           font-size: 30px
       }

       .hero-inner {
           gap: 24px
       }

       .hero-card {
           width: 240px
       }

       .section {
           padding: 40px 20px
       }

       .banom-section {
           padding: 40px 20px
       }

       .banom-grid {
           grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
           gap: 20px
       }

       .cta-section {
           padding: 40px 20px
       }

       footer {
           padding: 24px 20px
       }
   }

   /* Mobile: max 768px */
   @media (max-width:768px) {

       /* NAV MOBILE */
       .nav {
           padding: 0 16px;
           height: 56px
       }

       .nav-links,
       .nav-cta {
           display: none
       }

       .nav-hamburger {
           display: flex
       }

       .nav-brand {
           font-size: 15px
       }

       .nav-sub {
           display: none
       }

       /* HERO MOBILE */
       .hero {
           padding: 32px 16px 0
       }

       .hero-pattern {
           width: 160px;
           height: 160px
       }

       .hero-inner {
           grid-template-columns: 1fr;
           gap: 24px
       }

       .hero-h1 {
           font-size: 26px;
           max-width: 100%
       }

       .hero-sub {
           font-size: 13px;
           max-width: 100%;
           margin-bottom: 20px
       }

       .hero-btns {
           flex-direction: column;
           gap: 10px;
           margin-bottom: 24px
       }

       .btn-white,
       .btn-outline {
           width: 100%;
           text-align: center;
           padding: 12px
       }

       .hero-stats {
           gap: 16px;
           padding: 16px 0 20px
       }

       .hstat-val {
           font-size: 20px
       }

       .hero-visual {
           justify-content: flex-start;
           padding-bottom: 0
       }

       .hero-card {
           width: 100%;
           border-radius: 12px 12px 0 0
       }

       /* SECTION MOBILE */
       .section {
           padding: 32px 16px
       }

       .section-title {
           font-size: 22px
       }

       /* CARD GRID: 1 kolom */
       .card-grid {
           grid-template-columns: 1fr;
           gap: 12px
       }

       /* PRODUCT GRID: 1 kolom */
       .product-grid {
           grid-template-columns: 1fr;
           gap: 12px
       }

       /* BANOM */
       .banom-section {
           padding: 32px 16px
       }

       .banom-grid {
           grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
           gap: 12px
       }

       /* CTA */
       .cta-section {
           padding: 36px 16px
       }

       .cta-h {
           font-size: 22px
       }

       .cta-p {
           font-size: 13px
       }

       .cta-section .btn-white {
           width: 100%;
           max-width: 280px;
           padding: 14px 28px
       }

       /* FOOTER */
       footer {
           padding: 24px 16px
       }

       /* DIVIDER */
       .divider-line {
           margin: 0 16px
       }
   }

   /* Very small screens */
   @media (max-width:360px) {
       .hero-h1 {
           font-size: 22px
       }

       .hstat-val {
           font-size: 18px
       }

       .banom-grid {
           grid-template-columns: 1fr;
           gap: 12px
       }
   }

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

   :root {
       --green: #1a5c2e;
       --green2: #2d7a45;
       --green-light: #e8f5ec;
       --green-pale: #f2faf4;
       --gold: #b8860b;
       --gold-light: #fdf6e3;
       --ink: #111827;
       --muted: #6b7280;
       --muted2: #9ca3af;
       --border: #e5e7eb;
       --surface: #f9fafb;
       --white: #fff;
   }

   body {
       font-family: 'Plus Jakarta Sans', sans-serif;
       color: var(--ink);
       background: var(--surface)
   }

   /* NAV */
   .nav {
       display: flex;
       align-items: center;
       padding: 0 40px;
       height: 60px;
       border-bottom: 1px solid var(--border);
       background: var(--white);
       gap: 20px;
       position: sticky;
       top: 0;
       z-index: 100
   }

   .nav-logo {
       display: flex;
       align-items: center;
       gap: 10px;
       text-decoration: none
   }

   .hex {
       width: 34px;
       height: 34px;
       background: var(--green);
       clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0
   }

   .hex span {
       color: #fff;
       font-size: 11px;
       font-weight: 700;
       font-family: 'Plus Jakarta Sans', sans-serif
   }

   .nav-brand {
       font-family: 'Playfair Display', serif;
       font-size: 18px;
       color: var(--green);
       font-weight: 700
   }

   .nav-sub {
       font-size: 10px;
       color: var(--muted);
       margin-left: 2px;
       letter-spacing: 0.5px
   }

   .nav-links {
       display: flex;
       gap: 24px;
       margin-left: auto;
       font-size: 13px
   }

   .nav-links a {
       color: var(--muted);
       text-decoration: none;
       transition: color 0.2s
   }

   .nav-links a:hover {
       color: var(--green)
   }

   .nav-links a.active {
       color: var(--green);
       font-weight: 600
   }

   .nav-cta {
       background: var(--green);
       color: #fff;
       font-size: 12px;
       padding: 8px 18px;
       border-radius: 7px;
       font-weight: 600;
       font-family: 'Plus Jakarta Sans', sans-serif;
       margin-left: 8px;
       border: none;
       cursor: pointer;
       white-space: nowrap
   }

   /* Hamburger */
   .nav-hamburger {
       display: none;
       flex-direction: column;
       gap: 5px;
       cursor: pointer;
       padding: 4px;
       margin-left: auto;
       background: none;
       border: none
   }

   .nav-hamburger span {
       width: 22px;
       height: 2px;
       background: var(--ink);
       border-radius: 2px;
       transition: all 0.3s
   }

   .nav-hamburger.open span:nth-child(1) {
       transform: translateY(7px) rotate(45deg)
   }

   .nav-hamburger.open span:nth-child(2) {
       opacity: 0
   }

   .nav-hamburger.open span:nth-child(3) {
       transform: translateY(-7px) rotate(-45deg)
   }

   /* Mobile menu */
   .nav-mobile-menu {
       display: none;
       position: fixed;
       top: 60px;
       left: 0;
       right: 0;
       background: var(--white);
       border-bottom: 1px solid var(--border);
       padding: 16px 24px;
       z-index: 99;
       flex-direction: column;
       gap: 4px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08)
   }

   .nav-mobile-menu a {
       padding: 10px 0;
       font-size: 14px;
       color: var(--muted);
       text-decoration: none;
       border-bottom: 1px solid var(--border)
   }

   .nav-mobile-menu a.active {
       color: var(--green);
       font-weight: 600
   }

   .nav-mobile-menu .nav-cta {
       margin: 10px 0 0;
       width: 100%;
       text-align: center;
       padding: 12px
   }

   .nav-mobile-menu.open {
       display: flex
   }

   /* PAGE HERO */
   .page-hero {
       padding: 80px 0 88px;
       position: relative;
       overflow: hidden;
       display: block;
       background: var(--green)
   }

   .page-hero-slider {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 0
   }

   .slide-layer {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-size: cover;
       background-position: center;
       opacity: 0;
       transition: opacity 1.5s ease-in-out
   }

   .slide-layer.active {
       opacity: 1
   }

   .page-hero-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(135deg, rgba(26, 92, 46, 0.92), rgba(26, 92, 46, 0.7));
       z-index: 1
   }

   .page-hero-pattern {
       position: absolute;
       top: 0;
       right: 0;
       width: 240px;
       height: 240px;
       opacity: 0.07
   }

   .page-hero-inner {
       max-width: 1100px;
       margin: 0 auto;
       position: relative;
       z-index: 3
   }

   .page-hero-breadcrumb {
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 12px;
       color: rgba(255, 255, 255, 0.6);
       margin-bottom: 18px
   }

   .page-hero-breadcrumb a {
       color: rgba(255, 255, 255, 0.6);
       text-decoration: none
   }

   .page-hero-breadcrumb a:hover {
       color: #fff
   }

   .page-hero-breadcrumb span {
       font-size: 10px
   }

   .page-hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: rgba(255, 255, 255, 0.15);
       border: 1px solid rgba(255, 255, 255, 0.25);
       border-radius: 20px;
       padding: 5px 14px;
       font-size: 12px;
       color: rgba(255, 255, 255, 0.9);
       margin-bottom: 16px
   }

   .page-hero-badge-dot {
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: #4ade80;
       flex-shrink: 0
   }

   .page-hero-h1 {
       font-family: 'Playfair Display', serif;
       font-size: 38px;
       color: #fff;
       line-height: 1.2;
       margin-bottom: 12px;
       max-width: 560px
   }

   .page-hero-h1 em {
       color: #86efac;
       font-style: normal
   }

   .page-hero-sub {
       font-size: 14px;
       color: rgba(255, 255, 255, 0.75);
       max-width: 520px;
       line-height: 1.75
   }

   /* CONTAINER */
   .container {
       max-width: 1100px;
       margin: 0 auto
   }

   .section-label {
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 2px;
       text-transform: uppercase;
       color: var(--green);
       margin-bottom: 6px
   }

   .section-title {
       font-family: 'Playfair Display', serif;
       font-size: 26px;
       color: var(--ink);
       margin-bottom: 6px
   }

   .section-sub {
       font-size: 14px;
       color: var(--muted);
       margin-bottom: 28px;
       line-height: 1.6
   }

   /* MISSION SECTION */
   .mission-section {
       padding: 64px 40px;
       background: var(--white)
   }

   .mission-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 56px;
       align-items: start
   }

   .mission-desc {
       font-size: 14px;
       color: var(--muted);
       line-height: 1.85;
       margin-bottom: 16px
   }

   .mission-desc strong {
       color: var(--ink)
   }

   .mission-highlight {
       background: var(--green-pale);
       border-left: 3px solid var(--green);
       border-radius: 0 10px 10px 0;
       padding: 16px 20px;
       margin: 24px 0;
       font-size: 13px;
       color: var(--ink);
       line-height: 1.7;
       font-style: italic
   }

   .mission-btns {
       display: flex;
       gap: 10px;
       margin-top: 28px;
       flex-wrap: wrap
   }

   .btn-green {
       background: var(--green);
       color: #fff;
       font-size: 13px;
       font-weight: 600;
       padding: 11px 24px;
       border-radius: 8px;
       border: none;
       font-family: 'Plus Jakarta Sans', sans-serif;
       cursor: pointer;
       text-decoration: none;
       display: inline-block
   }

   .btn-ghost {
       background: transparent;
       color: var(--green);
       font-size: 13px;
       font-weight: 600;
       padding: 11px 24px;
       border-radius: 8px;
       border: 1.5px solid var(--green);
       font-family: 'Plus Jakarta Sans', sans-serif;
       cursor: pointer;
       text-decoration: none;
       display: inline-block
   }

   /* Pillar cards */
   .pillar-stack {
       display: flex;
       flex-direction: column;
       gap: 12px
   }

   .pillar-card {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 18px 20px;
       display: flex;
       align-items: flex-start;
       gap: 14px;
       transition: box-shadow 0.2s, border-color 0.2s
   }

   .pillar-card:hover {
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
       border-color: var(--green-light)
   }

   .pillar-num {
       width: 32px;
       height: 32px;
       border-radius: 8px;
       background: var(--green);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 12px;
       font-weight: 700;
       color: #fff;
       flex-shrink: 0
   }

   .pillar-body {}

   .pillar-title {
       font-size: 14px;
       font-weight: 600;
       color: var(--ink);
       margin-bottom: 4px
   }

   .pillar-desc {
       font-size: 12px;
       color: var(--muted);
       line-height: 1.6
   }

   /* STATS BAND */
   .stats-band {
       background: var(--green);
       padding: 40px
   }

   .stats-inner {
       max-width: 1100px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 24px
   }

   .stat-item {
       text-align: center
   }

   .stat-val {
       font-family: 'Playfair Display', serif;
       font-size: 36px;
       color: #fff;
       margin-bottom: 4px
   }

   .stat-lbl {
       font-size: 12px;
       color: rgba(255, 255, 255, 0.65);
       line-height: 1.4
   }

   .stat-divider {
       width: 1px;
       background: rgba(255, 255, 255, 0.15);
       align-self: stretch
   }

   /* VISION MISSION */
   .visi-section {
       padding: 64px 40px;
       background: var(--surface)
   }

   .visi-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
       margin-bottom: 40px
   }

   .visi-card {
       border-radius: 14px;
       padding: 28px;
       position: relative;
       overflow: hidden
   }

   .visi-card.visi {
       background: var(--green);
       color: #fff
   }

   .visi-card.misi {
       background: var(--white);
       border: 1px solid var(--border)
   }

   .visi-card-label {
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 2.5px;
       text-transform: uppercase;
       margin-bottom: 12px;
       opacity: 0.7
   }

   .visi-card.visi .visi-card-label {
       color: rgba(255, 255, 255, 0.7)
   }

   .visi-card.misi .visi-card-label {
       color: var(--green)
   }

   .visi-card-title {
       font-family: 'Playfair Display', serif;
       font-size: 20px;
       margin-bottom: 14px;
       line-height: 1.3
   }

   .visi-card.visi .visi-card-title {
       color: #fff
   }

   .visi-card.misi .visi-card-title {
       color: var(--ink)
   }

   .visi-card-body {
       font-size: 13px;
       line-height: 1.75
   }

   .visi-card.visi .visi-card-body {
       color: rgba(255, 255, 255, 0.8)
   }

   .visi-card.misi .visi-card-body {
       color: var(--muted)
   }

   .visi-card-body ul {
       padding-left: 18px
   }

   .visi-card-body li {
       margin-bottom: 8px
   }

   .visi-deco {
       position: absolute;
       bottom: -28px;
       right: -28px;
       width: 100px;
       height: 100px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.05)
   }

   /* VALUES */
   .values-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 14px
   }

   .value-card {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 20px;
       transition: box-shadow 0.2s
   }

   .value-card:hover {
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07)
   }

   .value-icon {
       width: 40px;
       height: 40px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       margin-bottom: 12px
   }

   .value-icon.g {
       background: var(--green-light)
   }

   .value-icon.gold {
       background: var(--gold-light)
   }

   .value-icon.blue {
       background: #e0f2fe
   }

   .value-name {
       font-size: 14px;
       font-weight: 600;
       color: var(--ink);
       margin-bottom: 5px
   }

   .value-desc {
       font-size: 12px;
       color: var(--muted);
       line-height: 1.6
   }

   /* TEAM SECTION */
   .team-section {
       padding: 64px 40px;
       background: var(--white)
   }

   .team-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 16px
   }

   .team-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 24px;
       text-align: center;
       transition: box-shadow 0.2s
   }

   .team-card:hover {
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07)
   }

   .team-avatar {
       width: 56px;
       height: 56px;
       border-radius: 50%;
       background: var(--green);
       margin: 0 auto 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: 'Playfair Display', serif;
       font-size: 20px;
       color: #fff;
       font-weight: 700
   }

   .team-name {
       font-size: 14px;
       font-weight: 600;
       color: var(--ink);
       margin-bottom: 3px
   }

   .team-role {
       font-size: 12px;
       color: var(--green);
       font-weight: 500;
       margin-bottom: 6px
   }

   .team-org {
       font-size: 11px;
       color: var(--muted)
   }

   /* COMMENT SECTION */
   .comment-section {
       padding: 64px 40px;
       background: var(--white);
   }

   .comment-section .container {
       max-width: 800px;
   }

   .comment-list {
       display: flex;
       flex-direction: column;
       gap: 20px;
       margin-bottom: 40px;
   }

   .comment-card {
       display: flex;
       gap: 16px;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 14px;
       padding: 20px;
       animation: fadeSlideIn 0.4s ease;
   }

   @keyframes fadeSlideIn {
       from {
           opacity: 0;
           transform: translateY(-12px);
       }

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

   .comment-avatar {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       object-fit: cover;
       flex-shrink: 0;
       border: 2px solid var(--green-light);
   }

   .comment-avatar-placeholder {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       background: var(--green);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       font-weight: 700;
       color: #fff;
       flex-shrink: 0;
       border: 2px solid var(--green-light);
   }

   .comment-body {
       flex: 1;
       min-width: 0;
   }

   .comment-header {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 6px;
       flex-wrap: wrap;
   }

   .comment-name {
       font-size: 14px;
       font-weight: 600;
       color: var(--ink);
   }

   .comment-time {
       font-size: 11px;
       color: var(--muted2);
   }

   .comment-text {
       font-size: 13px;
       color: var(--muted);
       line-height: 1.75;
   }

   .comment-form-box {
       background: var(--green-pale);
       border: 1px solid var(--green-light);
       border-radius: 16px;
       padding: 28px;
   }

   .comment-form-title {
       font-family: 'Playfair Display', serif;
       font-size: 20px;
       color: var(--ink);
       margin-bottom: 6px;
   }

   .comment-form-sub {
       font-size: 13px;
       color: var(--muted);
       margin-bottom: 22px;
   }

   .comment-form-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 14px;
       margin-bottom: 14px;
   }

   .comment-form-group {
       display: flex;
       flex-direction: column;
       gap: 6px;
   }

   .comment-form-group label {
       font-size: 12px;
       font-weight: 600;
       color: var(--ink);
   }

   .comment-form-group input,
   .comment-form-group textarea {
       border: 1.5px solid var(--border);
       border-radius: 9px;
       padding: 10px 14px;
       font-family: 'Plus Jakarta Sans', sans-serif;
       font-size: 13px;
       color: var(--ink);
       background: var(--white);
       outline: none;
       transition: border-color 0.2s;
       resize: none;
   }

   .comment-form-group input:focus,
   .comment-form-group textarea:focus {
       border-color: var(--green);
   }

   .comment-form-group textarea {
       height: 110px;
   }

   .avatar-upload-area {
       display: flex;
       align-items: center;
       gap: 14px;
       margin-bottom: 14px;
   }

   .avatar-preview {
       width: 56px;
       height: 56px;
       border-radius: 50%;
       object-fit: cover;
       border: 2px solid var(--green-light);
       display: none;
   }

   .avatar-preview-placeholder {
       width: 56px;
       height: 56px;
       border-radius: 50%;
       background: var(--green-light);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 22px;
       flex-shrink: 0;
   }

   .avatar-upload-btn {
       display: inline-block;
       padding: 9px 16px;
       background: var(--white);
       border: 1.5px solid var(--border);
       border-radius: 8px;
       font-size: 12px;
       font-weight: 600;
       color: var(--ink);
       cursor: pointer;
       transition: border-color 0.2s;
   }

   .avatar-upload-btn:hover {
       border-color: var(--green);
       color: var(--green);
   }

   .avatar-upload-hint {
       font-size: 11px;
       color: var(--muted2);
       margin-top: 4px;
   }

   #avatarInput {
       display: none;
   }

   .comment-submit-btn {
       background: var(--green);
       color: #fff;
       border: none;
       border-radius: 9px;
       padding: 12px 28px;
       font-size: 14px;
       font-weight: 600;
       font-family: 'Plus Jakarta Sans', sans-serif;
       cursor: pointer;
       transition: background 0.2s;
       margin-top: 8px;
   }

   .comment-submit-btn:hover {
       background: var(--green2);
   }

   .comment-empty {
       text-align: center;
       padding: 32px;
       color: var(--muted2);
       font-size: 13px;
       border: 1.5px dashed var(--border);
       border-radius: 12px;
       margin-bottom: 40px;
   }

   .comment-empty-icon {
       font-size: 32px;
       margin-bottom: 10px;
   }

   .comment-count-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: var(--green-light);
       color: var(--green);
       font-size: 12px;
       font-weight: 600;
       padding: 4px 12px;
       border-radius: 20px;
       margin-bottom: 20px;
   }

   @media (max-width: 600px) {
       .comment-form-row {
           grid-template-columns: 1fr;
       }

       .comment-section {
           padding: 40px 20px;
       }
   }

   /* CONTACT BAND */
   .contact-band {
       background: var(--green-pale);
       border-top: 1px solid var(--green-light);
       border-bottom: 1px solid var(--green-light);
       padding: 48px 40px
   }

   .contact-inner {
       max-width: 1100px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr auto;
       gap: 40px;
       align-items: center
   }

   .contact-title {
       font-family: 'Playfair Display', serif;
       font-size: 22px;
       color: var(--ink);
       margin-bottom: 8px
   }

   .contact-sub {
       font-size: 13px;
       color: var(--muted);
       line-height: 1.6
   }

   .contact-chips {
       display: flex;
       gap: 10px;
       margin-top: 16px;
       flex-wrap: wrap
   }

   .contact-chip {
       display: flex;
       align-items: center;
       gap: 7px;
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 24px;
       padding: 8px 16px;
       font-size: 12px;
       color: var(--ink);
       text-decoration: none;
       transition: border-color 0.2s
   }

   .contact-chip:hover {
       border-color: var(--green)
   }

   .contact-chip span {
       font-size: 15px
   }

   /* CTA */
   .cta-section {
       background: var(--green);
       padding: 48px 40px;
       text-align: center
   }

   .cta-h {
       font-family: 'Playfair Display', serif;
       font-size: 28px;
       color: #fff;
       margin-bottom: 10px
   }

   .cta-p {
       font-size: 14px;
       color: rgba(255, 255, 255, 0.75);
       margin-bottom: 24px
   }

   .hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: rgba(255, 255, 255, 0.15);
       border: 1px solid rgba(255, 255, 255, 0.25);
       border-radius: 20px;
       padding: 5px 14px;
       font-size: 12px;
       color: rgba(255, 255, 255, 0.9);
       margin-bottom: 18px
   }

   .hero-badge-dot {
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: #4ade80;
       flex-shrink: 0
   }

   .btn-white {
       background: #fff;
       color: var(--green);
       font-size: 13px;
       font-weight: 600;
       padding: 10px 22px;
       border-radius: 8px;
       border: none;
       font-family: 'Plus Jakarta Sans', sans-serif;
       cursor: pointer
   }

   /* FOOTER */
   footer {
       background: #0f3d1e;
       padding: 32px 40px;
       color: rgba(255, 255, 255, 0.6);
       font-size: 12px;
       text-align: center
   }

   .footer-brand {
       font-family: 'Playfair Display', serif;
       font-size: 16px;
       color: #fff;
       margin-bottom: 4px
   }

   .divider-line {
       height: 1px;
       background: var(--border);
       max-width: 1100px;
       margin: 0 auto
   }

   /* ============== RESPONSIVE ============== */
   @media(max-width:1024px) {
       .nav {
           padding: 0 20px
       }

       .page-hero {
           padding: 40px 20px 48px
       }

       .mission-section,
       .visi-section,
       .team-section,
       .contact-band,
       .cta-section {
           padding: 48px 20px
       }

       .stats-band {
           padding: 32px 20px
       }

       footer {
           padding: 24px 20px
       }
   }

   @media(max-width:768px) {
       .nav {
           padding: 0 16px;
           height: 56px
       }

       .nav-links,
       .nav-cta {
           display: none
       }

       .nav-hamburger {
           display: flex
       }

       .nav-brand {
           font-size: 15px
       }

       .nav-sub {
           display: none
       }

       .page-hero {
           padding: 32px 16px 40px
       }

       .page-hero-h1 {
           font-size: 26px
       }

       .mission-section,
       .visi-section,
       .team-section {
           padding: 36px 16px
       }

       .stats-band {
           padding: 28px 16px
       }

       .stats-inner {
           grid-template-columns: repeat(2, 1fr);
           gap: 16px
       }

       .stat-divider {
           display: none
       }

       .mission-grid,
       .visi-grid {
           grid-template-columns: 1fr
       }

       .values-grid,
       .team-grid {
           grid-template-columns: 1fr 1fr
       }

       .contact-band {
           padding: 36px 16px
       }

       .contact-inner {
           grid-template-columns: 1fr
       }

       .cta-section {
           padding: 36px 16px
       }

       footer {
           padding: 24px 16px
       }
   }

   @media(max-width:480px) {

       .values-grid,
       .team-grid {
           grid-template-columns: 1fr
       }
   }

   /* STYLE NEWS */
   .news-section {
       padding: 64px 40px;
       background: var(--white)
   }

   .news-layout {
       display: grid;
       grid-template-columns: 1fr 320px;
       gap: 48px;
       align-items: start
   }

   /* News Feed */
   .news-feed {
       display: flex;
       flex-direction: column;
       gap: 32px
   }

   .news-card {
       display: grid;
       grid-template-columns: 280px 1fr;
       gap: 24px;
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 16px;
       overflow: hidden;
       transition: box-shadow 0.3s, transform 0.3s;
       cursor: pointer
   }

   .news-card:hover {
       box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
       transform: translateY(-4px);
       border-color: var(--green-light)
   }

   .news-img-box {
       width: 100%;
       height: 100%;
       min-height: 200px;
       position: relative;
       overflow: hidden
   }

   .news-img-box img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s
   }

   .news-card:hover .news-img-box img {
       transform: scale(1.05)
   }

   .news-card-body {
       padding: 24px 24px 24px 0;
       display: flex;
       flex-direction: column
   }

   .news-meta {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 12px;
       font-size: 12px;
       color: var(--muted)
   }

   .news-cat {
       padding: 4px 10px;
       background: var(--green-light);
       color: var(--green);
       border-radius: 6px;
       font-weight: 600;
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.5px
   }

   .news-title {
       font-family: 'Playfair Display', serif;
       font-size: 22px;
       color: var(--ink);
       line-height: 1.3;
       margin-bottom: 12px;
       transition: color 0.2s
   }

   .news-card:hover .news-title {
       color: var(--green)
   }

   .news-excerpt {
       font-size: 14px;
       color: var(--muted);
       line-height: 1.6;
       margin-bottom: 20px;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden
   }

   .news-footer {
       margin-top: auto;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding-top: 16px;
       border-top: 1px solid var(--border)
   }

   .news-author {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 12px;
       font-weight: 500;
       color: var(--ink)
   }

   .author-circle {
       width: 24px;
       height: 24px;
       border-radius: 50%;
       background: var(--green-light);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 10px;
       color: var(--green);
       font-weight: 700
   }

   .read-more {
       font-size: 13px;
       font-weight: 600;
       color: var(--green);
       display: flex;
       align-items: center;
       gap: 4px
   }

   /* Sidebar */
   .sidebar {
       display: flex;
       flex-direction: column;
       gap: 32px;
       position: sticky;
       top: 100px
   }

   .widget {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 24px
   }

   .widget-title {
       font-family: 'Playfair Display', serif;
       font-size: 18px;
       color: var(--ink);
       margin-bottom: 20px;
       padding-bottom: 12px;
       border-bottom: 2px solid var(--green-light);
       position: relative
   }

   .widget-title::after {
       content: "";
       position: absolute;
       bottom: -2px;
       left: 0;
       width: 40px;
       height: 2px;
       background: var(--green)
   }

   .search-box {
       position: relative
   }

   .search-box input {
       width: 100%;
       padding: 12px 16px 12px 40px;
       border: 1.5px solid var(--border);
       border-radius: 10px;
       font-family: inherit;
       font-size: 14px;
       outline: none;
       transition: border-color 0.2s
   }

   .search-box input:focus {
       border-color: var(--green)
   }

   .search-box span {
       position: absolute;
       left: 14px;
       top: 50%;
       transform: translateY(-50%);
       color: var(--muted2);
       font-size: 16px
   }

   .cat-list {
       list-style: none;
       display: flex;
       flex-direction: column;
       gap: 10px
   }

   .cat-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
       font-size: 14px;
       color: var(--muted);
       text-decoration: none;
       transition: color 0.2s, padding-left 0.2s
   }

   .cat-item:hover {
       color: var(--green);
       padding-left: 4px
   }

   .cat-count {
       background: var(--white);
       padding: 2px 8px;
       border-radius: 10px;
       font-size: 11px;
       color: var(--muted2);
       border: 1px solid var(--border)
   }

   .popular-news {
       display: flex;
       flex-direction: column;
       gap: 16px
   }

   .pop-item {
       display: flex;
       gap: 12px;
       text-decoration: none
   }

   .pop-img {
       width: 64px;
       height: 64px;
       border-radius: 8px;
       object-fit: cover;
       flex-shrink: 0
   }

   .pop-info {}

   .pop-title {
       font-size: 13px;
       font-weight: 600;
       color: var(--ink);
       line-height: 1.4;
       margin-bottom: 4px;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden
   }

   .pop-date {
       font-size: 11px;
       color: var(--muted2)
   }

   /* Newsletter Widget */
   .widget.newsletter {
       background: var(--green);
       color: #fff;
       border: none
   }

   .widget.newsletter .widget-title {
       color: #fff;
       border-bottom-color: rgba(255, 255, 255, 0.2)
   }

   .widget.newsletter .widget-title::after {
       background: #fff
   }

   .newsletter-p {
       font-size: 13px;
       color: rgba(255, 255, 255, 0.8);
       line-height: 1.6;
       margin-bottom: 16px
   }

   .newsletter-form {
       display: flex;
       flex-direction: column;
       gap: 10px
   }

   .newsletter-form input {
       background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 8px;
       padding: 10px 14px;
       color: #fff;
       font-size: 13px;
       outline: none
   }

   .newsletter-form input::placeholder {
       color: rgba(255, 255, 255, 0.5)
   }

   .newsletter-btn {
       background: #fff;
       color: var(--green);
       border: none;
       padding: 10px;
       border-radius: 8px;
       font-weight: 600;
       font-size: 13px;
       cursor: pointer;
       transition: opacity 0.2s
   }

   .newsletter-btn:hover {
       opacity: 0.9
   }

   /* Pagination */
   .pagination {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       margin-top: 48px
   }

   .pg-btn {
       width: 40px;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 1px solid var(--border);
       border-radius: 8px;
       color: var(--muted);
       text-decoration: none;
       font-size: 14px;
       font-weight: 600;
       transition: all 0.2s
   }

   .pg-btn:hover {
       border-color: var(--green);
       color: var(--green)
   }

   .pg-btn.active {
       background: var(--green);
       color: #fff;
       border-color: var(--green)
   }

   @media (max-width: 1024px) {
       .news-layout {
           grid-template-columns: 1fr;
           gap: 40px
       }

       .sidebar {
           position: static;
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 20px
       }
   }

   @media (max-width: 768px) {
       .news-section {
           padding: 40px 20px
       }

       .news-card {
           grid-template-columns: 1fr
       }

       .news-card-body {
           padding: 20px
       }

       .sidebar {
           grid-template-columns: 1fr
       }
   }

   /* FIX HERO ALIGNMENT */
   .page-hero-inner {
       width: 100% !important;
       max-width: 1100px !important;
       margin: 0 auto !important;
       padding: 0 40px !important;
       position: relative !important;
       z-index: 50 !important;
       display: block !important;
   }

   @media (max-width: 1024px) {
       .page-hero-inner {
           padding: 0 20px !important;
       }
   }

   @media (max-width: 768px) {
       .page-hero-inner {
           padding: 0 16px !important;
       }
   }

   /* MARKETPLACE STYLES */
   .marketplace-section {
       padding: 64px 40px;
       background: var(--white)
   }

   .marketplace-layout {
       display: grid;
       grid-template-columns: 260px 1fr;
       gap: 40px;
       align-items: start
   }

   .filter-sidebar {
       display: flex;
       flex-direction: column;
       gap: 24px;
       position: sticky;
       top: 100px
   }

   .filter-group {
       border-bottom: 1px solid var(--border);
       padding-bottom: 20px;
       margin-bottom: 4px
   }

   .filter-group:last-child {
       border-bottom: none
   }

   .filter-label {
       font-size: 14px;
       font-weight: 700;
       color: var(--ink);
       margin-bottom: 12px;
       display: block
   }

   .filter-options {
       display: flex;
       flex-direction: column;
       gap: 8px
   }

   .filter-opt {
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 13px;
       color: var(--muted);
       cursor: pointer;
       transition: color 0.2s
   }

   .filter-opt:hover {
       color: var(--green)
   }

   .filter-opt input {
       accent-color: var(--green);
       cursor: pointer
   }

   /* Marketplace Product Card */
   .market-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
       gap: 24px
   }

   .market-card {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 16px;
       overflow: hidden;
       transition: transform 0.3s, box-shadow 0.3s;
       display: flex;
       flex-direction: column
   }

   .market-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
       border-color: var(--green-light)
   }

   .market-img-box {
       height: 180px;
       background: var(--surface);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 64px;
       position: relative
   }

   .market-badge {
       position: absolute;
       top: 12px;
       right: 12px;
       background: var(--gold);
       color: #fff;
       font-size: 10px;
       font-weight: 700;
       padding: 4px 8px;
       border-radius: 6px;
       text-transform: uppercase
   }

   .market-info {
       padding: 20px;
       flex-grow: 1;
       display: flex;
       flex-direction: column
   }

   .market-cat {
       font-size: 11px;
       color: var(--muted2);
       font-weight: 600;
       text-transform: uppercase;
       margin-bottom: 6px
   }

   .market-name {
       font-size: 16px;
       font-weight: 700;
       color: var(--ink);
       margin-bottom: 8px;
       line-height: 1.4
   }

   .market-meta {
       display: flex;
       align-items: center;
       gap: 6px;
       font-size: 12px;
       color: var(--muted);
       margin-bottom: 16px
   }

   .market-price-box {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-top: auto
   }

   .market-price {
       font-size: 18px;
       font-weight: 800;
       color: var(--green)
   }

   .market-btn {
       width: 36px;
       height: 36px;
       border-radius: 10px;
       background: var(--green-light);
       color: var(--green);
       display: flex;
       align-items: center;
       justify-content: center;
       border: none;
       cursor: pointer;
       transition: all 0.2s;
       font-size: 18px
   }

   .market-btn:hover {
       background: var(--green);
       color: #fff
   }

   @media (max-width: 1024px) {
       .marketplace-layout {
           grid-template-columns: 1fr
       }

       .filter-sidebar {
           position: static;
           flex-direction: row;
           overflow-x: auto;
           padding-bottom: 10px;
           gap: 20px
       }

       .filter-group {
           border-bottom: none;
           flex-shrink: 0;
           padding-bottom: 0
       }
   }

   @media (max-width: 768px) {
       .marketplace-section {
           padding: 40px 20px
       }
   }

   /* ORGANIZATION STYLES */
   .org-section {
       padding: 64px 40px;
       background: var(--surface)
   }

   .org-layout {
       display: grid;
       grid-template-columns: 280px 1fr;
       gap: 40px;
       align-items: start
   }

   .org-nav-card {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 24px;
       position: sticky;
       top: 100px
   }

   .org-nav-title {
       font-size: 14px;
       font-weight: 700;
       color: var(--ink);
       margin-bottom: 16px;
       padding-bottom: 12px;
       border-bottom: 1px solid var(--border)
   }

   .org-nav-list {
       display: flex;
       flex-direction: column;
       gap: 4px
   }

   .org-nav-item {
       padding: 10px 14px;
       border-radius: 8px;
       font-size: 13px;
       color: var(--muted);
       text-decoration: none;
       transition: all 0.2s;
       display: flex;
       align-items: center;
       justify-content: space-between
   }

   .org-nav-item:hover {
       background: var(--green-pale);
       color: var(--green)
   }

   .org-nav-item.active {
       background: var(--green);
       color: #fff
   }

   .org-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
       gap: 24px
   }

   .org-card {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 24px;
       transition: transform 0.3s, box-shadow 0.3s
   }

   .org-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
       border-color: var(--green-light)
   }

   .org-header {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       margin-bottom: 20px
   }

   .org-icon-box {
       width: 48px;
       height: 48px;
       border-radius: 12px;
       background: var(--green-light);
       color: var(--green);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px
   }

   .org-status {
       font-size: 10px;
       font-weight: 700;
       padding: 4px 8px;
       border-radius: 6px;
       background: #e0f2fe;
       color: #0284c7;
       text-transform: uppercase
   }

   .org-name {
       font-family: 'Playfair Display', serif;
       font-size: 18px;
       color: var(--ink);
       margin-bottom: 8px
   }

   .org-leader {
       font-size: 13px;
       color: var(--muted);
       margin-bottom: 16px;
       display: flex;
       align-items: center;
       gap: 6px
   }

   .org-info-list {
       display: flex;
       flex-direction: column;
       gap: 10px;
       margin-bottom: 24px;
       padding-top: 16px;
       border-top: 1px solid var(--border)
   }

   .org-info-item {
       font-size: 12px;
       color: var(--muted);
       display: flex;
       align-items: center;
       gap: 10px
   }

   .org-btn {
       width: 100%;
       padding: 12px;
       border-radius: 10px;
       background: var(--green-pale);
       color: var(--green);
       border: none;
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.2s;
       text-decoration: none;
       text-align: center;
       display: block
   }

   .org-btn:hover {
       background: var(--green);
       color: #fff
   }

   /* PAC SPECIFIC */
   .pac-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       gap: 20px;
       margin-top: 32px
   }

   .pac-card {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 20px;
       display: flex;
       flex-direction: column;
       gap: 12px;
       transition: all 0.2s
   }

   .pac-card:hover {
       border-color: var(--green);
       background: var(--green-pale)
   }

   .pac-name {
       font-weight: 700;
       color: var(--green);
       font-size: 15px
   }

   .pac-info {
       font-size: 12px;
       color: var(--muted);
       display: flex;
       flex-direction: column;
       gap: 6px
   }

   @media (max-width: 1024px) {
       .org-layout {
           grid-template-columns: 1fr
       }

       .org-nav-card {
           position: static;
           margin-bottom: 24px
       }
   }

   /* PRODUCT DETAIL STYLES */
   .pd-section {
       padding: 64px 40px;
       background: var(--white)
   }

   .pd-grid {
       display: grid;
       grid-template-columns: 1fr 450px;
       gap: 48px;
       align-items: start
   }

   .pd-gallery {
       background: var(--surface);
       border-radius: 24px;
       height: 500px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 120px;
       border: 1px solid var(--border);
       position: relative;
       overflow: hidden
   }

   .pd-info {
       display: flex;
       flex-direction: column;
       gap: 24px
   }

   .pd-cat-tag {
       font-size: 12px;
       font-weight: 700;
       color: var(--green);
       text-transform: uppercase;
       letter-spacing: 1px;
       background: var(--green-light);
       padding: 6px 12px;
       border-radius: 6px;
       display: inline-block;
       width: fit-content
   }

   .pd-title {
       font-family: 'Playfair Display', serif;
       font-size: 32px;
       color: var(--ink);
       line-height: 1.2
   }

   .pd-price {
       font-size: 28px;
       font-weight: 800;
       color: var(--green);
       display: flex;
       align-items: center;
       gap: 12px
   }

   .pd-price span {
       font-size: 14px;
       color: var(--muted);
       text-decoration: line-through;
       font-weight: 400
   }

   .pd-meta-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
       padding: 20px 0;
       border-top: 1px solid var(--border);
       border-bottom: 1px solid var(--border)
   }

   .pd-meta-item {
       display: flex;
       flex-direction: column;
       gap: 4px
   }

   .pd-meta-lbl {
       font-size: 11px;
       color: var(--muted2);
       text-transform: uppercase;
       font-weight: 700
   }

   .pd-meta-val {
       font-size: 14px;
       font-weight: 600;
       color: var(--ink)
   }

   .pd-actions {
       display: flex;
       gap: 12px
   }

   .pd-btn-main {
       flex-grow: 1;
       background: var(--green);
       color: #fff;
       border: none;
       padding: 16px;
       border-radius: 12px;
       font-weight: 700;
       font-size: 15px;
       cursor: pointer;
       transition: transform 0.2s
   }

   .pd-btn-main:hover {
       transform: scale(1.02)
   }

   .pd-btn-outline {
       width: 56px;
       height: 56px;
       border: 1.5px solid var(--border);
       border-radius: 12px;
       background: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       cursor: pointer;
       transition: all 0.2s
   }

   .pd-btn-outline:hover {
       border-color: var(--green);
       color: var(--green)
   }

   .pd-desc-box {
       margin-top: 40px
   }

   .pd-tab-nav {
       display: flex;
       gap: 32px;
       border-bottom: 1px solid var(--border);
       margin-bottom: 24px
   }

   .pd-tab-link {
       padding: 12px 0;
       font-size: 14px;
       font-weight: 700;
       color: var(--muted);
       text-decoration: none;
       position: relative;
       cursor: pointer
   }

   .pd-tab-link.active {
       color: var(--green)
   }

   .pd-tab-link.active::after {
       content: "";
       position: absolute;
       bottom: -1px;
       left: 0;
       right: 0;
       height: 3px;
       background: var(--green);
       border-radius: 3px 3px 0 0
   }

   .pd-desc-content {
       font-size: 14px;
       color: var(--muted);
       line-height: 1.8
   }

   .seller-card {
       background: var(--green-pale);
       border: 1px solid var(--green-light);
       border-radius: 20px;
       padding: 24px;
       display: flex;
       align-items: center;
       gap: 16px;
       margin-top: 32px
   }

   .seller-avatar {
       width: 56px;
       height: 56px;
       border-radius: 14px;
       background: var(--green);
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;
       flex-shrink: 0
   }

   .seller-info-box {
       flex-grow: 1
   }

   .seller-name {
       font-weight: 700;
       color: var(--ink);
       font-size: 15px;
       margin-bottom: 2px
   }

   .seller-loc {
       font-size: 12px;
       color: var(--muted)
   }

   .seller-link {
       font-size: 12px;
       font-weight: 700;
       color: var(--green);
       text-decoration: none
   }

   @media (max-width: 1024px) {
       .pd-grid {
           grid-template-columns: 1fr
       }

       .pd-gallery {
           height: 400px
       }
   }

   @media (max-width: 768px) {
       .pd-section {
           padding: 40px 20px
       }

       .pd-title {
           font-size: 26px
       }
   }

   /* QUANTITY SELECTOR */
   .qty-control {
       display: flex;
       align-items: center;
       gap: 12px;
       margin: 10px 0
   }

   .qty-btn {
       width: 32px;
       height: 32px;
       border-radius: 8px;
       border: 1.5px solid var(--border);
       background: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       cursor: pointer;
       transition: all 0.2s
   }

   .qty-btn:hover {
       border-color: var(--green);
       color: var(--green)
   }

   .qty-input {
       width: 40px;
       text-align: center;
       font-weight: 700;
       font-size: 16px;
       border: none;
       background: transparent;
       outline: none
   }

   .total-price-box {
       background: var(--green-pale);
       padding: 14px 20px;
       border-radius: 12px;
       border: 1px solid var(--green-light);
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-top: 10px
   }

   .total-price-lbl {
       font-size: 13px;
       font-weight: 600;
       color: var(--muted)
   }

   .total-price-val {
       font-size: 20px;
       font-weight: 800;
       color: var(--green)
   }

   /* BOARD MEMBER STYLES */
   .board-section {
       padding: 64px 40px;
       background: var(--white)
   }

   .board-group {
       margin-bottom: 48px
   }

   .board-group-title {
       font-family: 'Playfair Display', serif;
       font-size: 20px;
       color: var(--green);
       margin-bottom: 24px;
       padding-bottom: 12px;
       border-bottom: 2px solid var(--green-light);
       display: inline-block
   }

   .board-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
       gap: 24px
   }

   .board-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 20px;
       padding: 24px;
       text-align: center;
       transition: all 0.3s
   }

   .board-card:hover {
       background: var(--white);
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
       border-color: var(--green-light)
   }

   .board-photo {
       width: 100px;
       height: 100px;
       border-radius: 50%;
       background: var(--green-light);
       margin: 0 auto 16px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 40px;
       border: 3px solid var(--white);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
   }

   .board-name {
       font-size: 15px;
       font-weight: 700;
       color: var(--ink);
       margin-bottom: 4px
   }

   .board-pos {
       font-size: 12px;
       font-weight: 600;
       color: var(--green);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 12px
   }

   .board-bio {
       font-size: 11px;
       color: var(--muted);
       line-height: 1.5;
       margin-top: 12px;
       padding-top: 12px;
       border-top: 1px solid var(--border)
   }

   .nav-cart-btn {
       background: var(--green-pale);
       color: var(--green);
       width: 36px;
       height: 36px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       text-decoration: none;
       position: relative;
       font-size: 18px;
       border: 1px solid var(--green-light);
       margin-left: 8px;
       transition: all 0.2s;
       cursor: pointer
   }

   .nav-cart-btn:hover {
       background: var(--green);
       color: #fff
   }

   .cart-badge {
       position: absolute;
       top: -6px;
       right: -6px;
       background: #ef4444;
       color: #fff;
       font-size: 10px;
       font-weight: 700;
       width: 18px;
       height: 18px;
       border-radius: 50%;
       display: none;
       align-items: center;
       justify-content: center;
       border: 2px solid #fff
   }

   .cart-badge.active {
       display: flex
   }


   /* CHECKOUT STYLES */
   .checkout-section {
       padding: 64px 40px;
       background: var(--surface)
   }

   .checkout-layout {
       display: grid;
       grid-template-columns: 1fr 400px;
       gap: 40px;
       align-items: start
   }

   .checkout-card {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 20px;
       padding: 32px;
       margin-bottom: 24px
   }

   .checkout-title {
       font-family: 'Playfair Display', serif;
       font-size: 20px;
       color: var(--ink);
       margin-bottom: 24px;
       display: flex;
       align-items: center;
       gap: 12px
   }

   .form-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px
   }

   .form-group {
       display: flex;
       flex-direction: column;
       gap: 8px;
       margin-bottom: 16px
   }

   .form-group.full {
       grid-column: 1 / -1
   }

   .form-group label {
       font-size: 13px;
       font-weight: 700;
       color: var(--muted);
       margin-left: 4px
   }

   .form-group input,
   .form-group textarea,
   .form-group select {
       padding: 12px 16px;
       border: 1.5px solid var(--border);
       border-radius: 10px;
       font-family: inherit;
       font-size: 14px;
       outline: none;
       transition: border-color 0.2s
   }

   .form-group input:focus {
       border-color: var(--green)
   }

   /* Payment Options */
   .payment-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       gap: 12px;
       margin-top: 16px
   }

   .payment-opt {
       border: 1.5px solid var(--border);
       border-radius: 12px;
       padding: 16px;
       text-align: center;
       cursor: pointer;
       transition: all 0.2s;
       position: relative
   }

   .payment-opt:hover {
       border-color: var(--green-light);
       background: var(--green-pale)
   }

   .payment-opt.active {
       border-color: var(--green);
       background: var(--green-pale)
   }

   .payment-opt input {
       position: absolute;
       opacity: 0;
       cursor: pointer
   }

   .payment-icon {
       font-size: 24px;
       margin-bottom: 8px;
       display: block
   }

   .payment-name {
       font-size: 12px;
       font-weight: 700;
       color: var(--ink)
   }

   .bank-info-box {
       display: none;
       background: var(--green-pale);
       border: 1px dashed var(--green);
       border-radius: 12px;
       padding: 20px;
       margin-top: 20px
   }

   .bank-info-box.active {
       display: block;
       animation: fadeIn 0.3s ease
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(-10px);
       }

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

   .bank-name {
       font-weight: 800;
       color: var(--green);
       font-size: 16px;
       margin-bottom: 4px
   }

   .bank-acc {
       font-family: monospace;
       font-size: 18px;
       letter-spacing: 1px;
       color: var(--ink);
       margin: 8px 0;
       display: block
   }

   .bank-holder {
       font-size: 12px;
       color: var(--muted)
   }

   /* Order Summary */
   .summary-item {
       display: flex;
       justify-content: space-between;
       font-size: 14px;
       margin-bottom: 12px
   }

   .summary-total {
       border-top: 2px solid var(--border);
       padding-top: 16px;
       margin-top: 16px;
       display: flex;
       justify-content: space-between;
       font-size: 18px;
       font-weight: 800;
       color: var(--green)
   }

   @media (max-width: 1024px) {
       .checkout-layout {
           grid-template-columns: 1fr
       }
   }


   /* CART PAGE STYLES */
   .cart-section {
       padding: 40px 20px;
       background: var(--surface);
       min-height: 80vh
   }

   .cart-header {
       background: var(--white);
       padding: 16px 24px;
       border-radius: 12px;
       display: grid;
       grid-template-columns: 40px 1fr 150px 150px 100px;
       gap: 20px;
       align-items: center;
       font-size: 13px;
       font-weight: 700;
       color: var(--muted);
       margin-bottom: 12px;
       border: 1px solid var(--border)
   }

   .cart-item {
       background: var(--white);
       padding: 24px;
       border-radius: 12px;
       display: grid;
       grid-template-columns: 40px 1fr 150px 150px 100px;
       gap: 20px;
       align-items: center;
       margin-bottom: 12px;
       border: 1px solid var(--border);
       transition: all 0.2s
   }

   .cart-item:hover {
       border-color: var(--green-light)
   }

   .cart-prod-info {
       display: flex;
       align-items: center;
       gap: 16px
   }

   .cart-prod-img {
       width: 80px;
       height: 80px;
       background: var(--surface);
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 40px;
       border: 1px solid var(--border);
       flex-shrink: 0
   }

   .cart-prod-details {
       display: flex;
       flex-direction: column;
       gap: 4px
   }

   .cart-prod-name {
       font-weight: 700;
       color: var(--ink);
       font-size: 15px
   }

   .cart-prod-seller {
       font-size: 12px;
       color: var(--muted);
       display: flex;
       align-items: center;
       gap: 4px
   }

   .cart-price {
       font-weight: 600;
       color: var(--ink)
   }

   .cart-subtotal {
       font-weight: 800;
       color: var(--green)
   }

   .cart-del-btn {
       background: transparent;
       border: none;
       color: var(--muted);
       cursor: pointer;
       font-size: 14px;
       transition: color 0.2s
   }

   .cart-del-btn:hover {
       color: #ef4444
   }

   /* Checkbox Styling */
   .cart-check {
       width: 18px;
       height: 18px;
       cursor: pointer;
       accent-color: var(--green)
   }

   /* Shopee-style Bottom Bar */
   .cart-bottom-bar {
       position: sticky;
       bottom: 20px;
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 12px;
       padding: 16px 24px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-top: 40px;
       box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
       z-index: 100
   }

   .cart-summary-left {
       display: flex;
       align-items: center;
       gap: 24px
   }

   .cart-summary-right {
       display: flex;
       align-items: center;
       gap: 32px
   }

   .cart-total-info {
       text-align: right
   }

   .cart-total-lbl {
       font-size: 14px;
       color: var(--ink)
   }

   .cart-total-val {
       font-size: 24px;
       font-weight: 800;
       color: var(--green)
   }

   .cart-checkout-btn {
       background: var(--green);
       color: #fff;
       border: none;
       padding: 14px 48px;
       border-radius: 8px;
       font-weight: 700;
       font-size: 16px;
       cursor: pointer;
       transition: transform 0.2s
   }

   .cart-checkout-btn:hover {
       transform: scale(1.05)
   }

   .cart-empty {
       text-align: center;
       padding: 80px 0;
   }

   @media (max-width: 1024px) {
       .cart-header {
           display: none;
       }

       .cart-item {
           grid-template-columns: 40px 1fr;
           grid-template-rows: auto auto auto;
           gap: 12px;
       }

       .cart-price,
       .cart-subtotal,
       .qty-control {
           grid-column: 2;
       }

       .cart-del-btn {
           position: absolute;
           top: 20px;
           right: 20px;
       }

       .cart-bottom-bar {
           flex-direction: column;
           gap: 20px;
           text-align: center;
       }
   }


   /* REVIEW STYLES (Shopee Style) */
   .review-stats {
       display: flex;
       gap: 40px;
       background: var(--green-pale);
       padding: 32px;
       border-radius: 12px;
       border: 1px solid var(--green-light);
       margin-bottom: 32px;
       align-items: center
   }

   .rating-avg-box {
       text-align: center
   }

   .rating-avg-val {
       font-size: 32px;
       font-weight: 800;
       color: var(--green)
   }

   .rating-avg-val span {
       font-size: 16px;
       color: var(--muted)
   }

   .stars {
       color: #fbbf24;
       font-size: 18px;
       letter-spacing: 2px
   }

   .stars-muted {
       color: #d1d5db
   }

   .review-filters {
       display: flex;
       gap: 12px;
       flex-wrap: wrap
   }

   .rev-filter-btn {
       padding: 8px 16px;
       border: 1px solid var(--border);
       border-radius: 6px;
       background: #fff;
       font-size: 13px;
       cursor: pointer;
       transition: all 0.2s
   }

   .rev-filter-btn.active {
       border-color: var(--green);
       color: var(--green);
       background: var(--green-pale)
   }

   .review-item {
       padding: 24px 0;
       border-bottom: 1px solid var(--border);
       display: flex;
       gap: 16px
   }

   .rev-user-avatar {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: var(--surface);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       color: var(--muted);
       flex-shrink: 0
   }

   .rev-content {
       flex-grow: 1
   }

   .rev-user-name {
       font-weight: 700;
       font-size: 13px;
       color: var(--ink);
       margin-bottom: 4px
   }

   .rev-date {
       font-size: 11px;
       color: var(--muted2);
       margin-top: 4px
   }

   .rev-text {
       font-size: 14px;
       color: var(--ink);
       margin: 12px 0;
       line-height: 1.6
   }

   .rev-images {
       display: flex;
       gap: 8px;
       margin-top: 12px
   }

   .rev-img-thumb {
       width: 72px;
       height: 72px;
       border-radius: 4px;
       background: var(--surface);
       border: 1px solid var(--border);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;
       cursor: zoom-in
   }

   /* Review Form */
   .write-review-box {
       margin-top: 48px;
       padding-top: 40px;
       border-top: 2px dashed var(--border)
   }

   .star-rating-input {
       display: flex;
       gap: 8px;
       margin: 16px 0;
       font-size: 24px;
       cursor: pointer
   }

   .star-input {
       color: #d1d5db;
       transition: color 0.2s
   }

   .star-input.active {
       color: #fbbf24
   }


   /* TRACKING STYLES */
   .tracking-section {
       padding: 40px 20px;
       background: var(--surface);
       min-height: 80vh
   }

   .tracking-card {
       background: var(--white);
       border: 1px solid var(--border);
       border-radius: 20px;
       padding: 32px;
       max-width: 800px;
       margin: 0 auto
   }

   .tracking-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 40px;
       border-bottom: 1px solid var(--border);
       padding-bottom: 20px
   }

   .tracking-id {
       font-weight: 800;
       color: var(--green);
       font-size: 18px
   }

   .tracking-status-badge {
       background: var(--green-pale);
       color: var(--green);
       padding: 6px 14px;
       border-radius: 20px;
       font-size: 12px;
       font-weight: 700;
       text-transform: uppercase
   }

   /* Timeline Steps */
   .timeline {
       position: relative;
       padding-left: 40px;
       margin-top: 20px
   }

   .timeline::before {
       content: '';
       position: absolute;
       left: 15px;
       top: 0;
       bottom: 0;
       width: 2px;
       background: var(--border)
   }

   .timeline-step {
       position: relative;
       padding-bottom: 40px
   }

   .timeline-step::before {
       content: '';
       position: absolute;
       left: -32px;
       top: 0;
       width: 14px;
       height: 14px;
       border-radius: 50%;
       background: var(--white);
       border: 3px solid var(--border);
       z-index: 1
   }

   .timeline-step.active::before {
       border-color: var(--green);
       background: var(--green)
   }

   .timeline-step.completed::before {
       background: var(--green);
       border-color: var(--green)
   }

   .timeline-step.completed::after {
       position: absolute;
       left: -30px;
       top: -2px;
       color: #fff;
       font-size: 10px;
       font-weight: 900;
       z-index: 2
   }

   .timeline-content {
       display: flex;
       flex-direction: column;
       gap: 4px
   }

   .timeline-title {
       font-weight: 700;
       color: var(--ink);
       font-size: 15px
   }

   .timeline-desc {
       font-size: 13px;
       color: var(--muted)
   }

   .timeline-time {
       font-size: 11px;
       color: var(--muted2);
       margin-top: 4px
   }

   .tracking-prod-card {
       background: var(--surface);
       border-radius: 12px;
       padding: 16px;
       display: flex;
       align-items: center;
       gap: 16px;
       margin-top: 32px
   }

   .tracking-prod-img {
       width: 60px;
       height: 60px;
       background: #fff;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 32px
   }

   .nav-track-btn {
       background: var(--white);
       color: var(--muted);
       width: 36px;
       height: 36px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       text-decoration: none;
       border: 1px solid var(--border);
       margin-left: 8px;
       font-size: 18px;
       transition: all 0.2s
   }

   .nav-track-btn:hover,
   .nav-track-btn.active {
       border-color: var(--green);
       color: var(--green);
       background: var(--green-pale)
   }


   /* NEWS DETAIL STYLES */
   .article-header {
       margin-bottom: 40px
   }

   .article-title {
       font-family: 'Playfair Display', serif;
       font-size: 36px;
       color: var(--ink);
       line-height: 1.2;
       margin-bottom: 24px
   }

   .article-meta {
       display: flex;
       gap: 20px;
       align-items: center;
       border-top: 1px solid var(--border);
       border-bottom: 1px solid var(--border);
       padding: 16px 0;
       margin-bottom: 32px
   }

   .article-content {
       font-size: 17px;
       line-height: 1.8;
       color: #374151;
       margin-bottom: 64px
   }

   .article-content p {
       margin-bottom: 24px
   }

   .article-img-full {
       width: 100%;
       border-radius: 20px;
       margin-bottom: 40px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1)
   }

   /* Comment Section Styles */
   .comment-section {
       border-top: 2px solid var(--border);
       padding-top: 48px;
       margin-top: 64px
   }

   .comment-list {
       display: flex;
       flex-direction: column;
       gap: 32px;
       margin-top: 32px
   }

   .comment-item {
       display: flex;
       gap: 16px
   }

   .comment-avatar {
       width: 44px;
       height: 44px;
       border-radius: 50%;
       background: var(--green-pale);
       color: var(--green);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 800;
       flex-shrink: 0
   }

   .comment-body {
       background: #f9fafb;
       padding: 20px;
       border-radius: 16px;
       flex-grow: 1;
       position: relative
   }

   .comment-user {
       font-weight: 700;
       font-size: 14px;
       color: var(--ink);
       margin-bottom: 4px;
       display: flex;
       justify-content: space-between
   }

   .comment-time {
       font-size: 11px;
       color: var(--muted);
       font-weight: 400
   }

   .comment-text {
       font-size: 14px;
       line-height: 1.5;
       color: #4b5563
   }

   /* Auth Gate Style */
   .auth-gate-box {
       background: var(--surface);
       border: 2px dashed var(--border);
       border-radius: 16px;
       padding: 32px;
       text-align: center;
       margin-bottom: 40px
   }

   .comment-form-box {
       background: #fff;
       border: 1.5px solid var(--border);
       border-radius: 16px;
       padding: 24px;
       margin-bottom: 40px
   }


   /* LOGIN PAGE STYLES */
   .login-section {
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--surface);
       padding: 40px 20px;
       background-image: radial-gradient(circle at 10% 20%, rgba(26, 92, 46, 0.05) 0%, transparent 40%),
           radial-gradient(circle at 90% 80%, rgba(26, 92, 46, 0.05) 0%, transparent 40%)
   }

   .login-card {
       background: var(--white);
       width: 100%;
       max-width: 500px;
       border-radius: 24px;
       padding: 48px;
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
       border: 1px solid var(--border);
       animation: slideUp 0.6s ease-out
   }

   .login-logo {
       text-align: center;
       margin-bottom: 32px
   }

   .login-title {
       font-family: 'Playfair Display', serif;
       font-size: 28px;
       color: var(--ink);
       text-align: center;
       margin-bottom: 8px
   }

   .login-sub {
       font-size: 14px;
       color: var(--muted);
       text-align: center;
       margin-bottom: 40px
   }

   .login-form-group {
       margin-bottom: 24px
   }

   .login-label {
       display: block;
       font-size: 13px;
       font-weight: 700;
       color: var(--ink);
       margin-bottom: 8px
   }

   .login-input {
       width: 100%;
       padding: 14px 16px;
       border: 1.5px solid var(--border);
       border-radius: 12px;
       font-family: inherit;
       font-size: 14px;
       color: var(--ink);
       transition: all 0.2s;
       outline: none;
       background: #f9fafb
   }

   .login-input:focus {
       border-color: var(--green);
       background: #fff;
       box-shadow: 0 0 0 4px var(--green-pale)
   }

   .login-btn {
       width: 100%;
       padding: 16px;
       background: var(--green);
       color: #fff;
       border: none;
       border-radius: 12px;
       font-weight: 700;
       font-size: 16px;
       cursor: pointer;
       transition: transform 0.2s, background 0.2s;
       margin-top: 16px
   }

   .login-btn:hover {
       background: #154d26;
       transform: translateY(-2px)
   }

   .login-footer {
       text-align: center;
       margin-top: 32px;
       font-size: 13px;
       color: var(--muted2)
   }

   @keyframes slideUp {
       from {
           opacity: 0;
           transform: translateY(30px)
       }

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

   /* PRODUCT SLIDER STYLES */
   .pd-gallery {
       position: relative;
       overflow: hidden;
   }

   .pd-slider-container {
       display: flex;
       transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       width: 300%;
       height: 100%;
   }

   .pd-slide {
       width: 33.333%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 120px;
   }

   .slider-arrow {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 44px;
       height: 44px;
       background: rgba(255, 255, 255, 0.9);
       border-radius: 50%;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       color: #1a5c2e;
       transition: all 0.3s ease;
       z-index: 10;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   }

   .slider-arrow:hover {
       background: #1a5c2e;
       color: #fff;
       transform: translateY(-50%) scale(1.1);
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
   }

   .slider-prev {
       left: 20px;
   }

   .slider-next {
       right: 20px;
   }

   .slider-dots {
       position: absolute;
       bottom: 24px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       gap: 10px;
       z-index: 10;
   }

   .slider-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: rgba(26, 92, 46, 0.2);
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

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


   /* GLOBAL FINAL RESPONSIVE CLEANUP (ALL DEVICES) */
   img,
   video,
   iframe {
       max-width: 100%;
       height: auto;
   }

   iframe {
       border-radius: 12px;
   }

   @media (max-width: 1024px) {

       .pd-grid,
       .marketplace-layout,
       .org-layout,
       .checkout-layout {
           grid-template-columns: 1fr !important;
           gap: 32px !important;
       }

       .filter-sidebar,
       .org-nav-card {
           position: static !important;
           width: 100% !important;
           margin-bottom: 20px !important;
       }

       .pd-gallery {
           height: 400px !important;
       }
   }

   @media (max-width: 768px) {

       .pd-section,
       .marketplace-section,
       .org-section,
       .checkout-section,
       .tracking-section,
       .board-section {
           padding: 32px 16px !important;
       }

       .pd-title,
       .cta-h,
       .section-title,
       .hero-h1 {
           font-size: 24px !important;
       }

       .article-title {
           font-size: 28px !important;
       }

       .form-grid {
           grid-template-columns: 1fr !important;
           gap: 16px !important;
       }

       .tracking-header {
           flex-direction: column !important;
           align-items: flex-start !important;
           gap: 12px !important;
       }

       .nav {
           padding: 0 16px !important;
       }

       .nav-user-desktop {
           display: none !important;
       }

       footer {
           padding: 32px 16px !important;
           text-align: center !important;
       }
   }

   @media (max-width: 480px) {
       .pd-gallery {
           height: 300px !important;
       }

       .pd-actions {
           flex-direction: column !important;
       }

       .pd-btn-main,
       .pd-btn-outline {
           width: 100% !important;
           height: auto !important;
           padding: 16px !important;
       }

       .cart-bottom-bar {
           padding: 16px !important;
           flex-direction: column !important;
           gap: 16px !important;
       }

       .cart-checkout-btn {
           width: 100% !important;
       }
   }