/* ================================================================
   home.css — pecahan dari style.css
   Beranda bagian awal: hero, pemisah section, jadwal, peta lokasi,
   section info, manfaat, dan keamanan.

   URUTAN PEMUATAN PENTING. CSS bersifat cascade, dan file-file ini
   dipotong BERURUTAN dari satu file besar, jadi <link> di HTML harus
   tetap urut: base -> home -> sections -> responsive ->
   data-sections -> article. Menukar urutannya akan mengubah tampilan.
   ================================================================ */

/* ----------------------------------------------------------------
   HERO SECTION
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  /* flex-start = konten hero (badge dst.) mepet ke atas, tepat di bawah navbar
     (tinggi navbar sudah di-reserve lewat padding-top di bawah) */
  align-items: flex-start;
  overflow: hidden;
  padding-top: 75px;
  /* Background utama hero: banner branded PBJ (anak balance bike + skyline Jakarta) */
  background-color: var(--clr-bg);            /* Fallback saat gambar belum termuat */
  background-image: url('../assets/bg/PBJ-bg-1.webp');
  background-size: cover;                      /* Isi penuh area hero, jaga aspek rasio */
  background-position: center center;          /* Fokus ke tengah komposisi gambar */
  background-repeat: no-repeat;
  background-attachment: fixed;                /* Diam saat halaman di-scroll (parallax) */
}

/* Scrim gelap di atas gambar background — jaga keterbacaan teks (kiri)
   sambil membiarkan skyline & aksen oranye gambar tembus di kanan.
   Gradient bawah menyatukan hero ke section berikutnya (var(--clr-bg)). */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(255,247,239,0.7) 0%,
      rgba(255,247,239,0.48) 35%,
      rgba(255,247,239,0.2) 56%,
      rgba(255,247,239,0.04) 78%,
      rgba(255,247,239,0) 100%),
    linear-gradient(to bottom,
      rgba(255,247,239,0.14) 0%,
      rgba(255,247,239,0) 25%,
      rgba(255,247,239,0) 58%,
      var(--clr-bg) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Animated speed lines behind hero */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -15deg,
      transparent,
      transparent 120px,
      rgba(255,107,0,0.025) 120px,
      rgba(255,107,0,0.025) 122px
    );
  pointer-events: none;
  z-index: 0;
  animation: speed-lines 8s linear infinite;
}

@keyframes speed-lines {
  0%   { background-position: 0 0; }
  100% { background-position: -200px 0; }
}

/* Orbs */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.hero__orb--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,107,0,0.2) 0%, rgba(200,60,0,0.08) 50%, transparent 70%);
  top: -150px; left: -150px;
  animation: orb-pulse 6s ease-in-out infinite;
}
.hero__orb--2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(232,0,45,0.15) 0%, transparent 70%);
  bottom: -80px; right: 5%;
  animation: orb-pulse 8s ease-in-out infinite 2s;
}
.hero__orb--3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(255,179,71,0.1) 0%, transparent 70%);
  top: 25%; right: 25%;
  animation: orb-pulse 7s ease-in-out infinite 4s;
}

@keyframes orb-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.15); }
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 55%;
  /* Top padding tipis: badge nempel dekat header (navbar) tapi tetap ada
     jarak kecil; sisa ruang bawah tetap lapang. */
  padding: clamp(4px, 0.6vw, 8px) clamp(16px, 4vw, 48px) var(--section-py);
  margin-left: auto;
  margin-right: auto;
}

/* CATATAN: keterbacaan judul di atas gambar SENGAJA ditangani lewat halo
   text-shadow/drop-shadow di .hero__title (lihat di bawah), BUKAN lewat
   panel/scrim di belakang blok teks. Panel pernah dicoba dan ditolak:
   .hero__content jauh lebih lebar & tinggi daripada teksnya sendiri
   (max-width 55% + padding-bottom setinggi section), jadi gradient
   sebesar apa pun melebar keluar dari huruf dan tepinya terbaca sebagai
   pita terang di sisi kiri hero. Halo yang menempel di bentuk huruf
   tidak punya masalah itu. */

@media (min-width: 1024px) {
  .hero { justify-content: flex-start; }
  .hero__content {
    /* Menyejajarkan konten hero dengan .container (max-width 1200px, terpusat).
       max() WAJIB di sini: di viewport antara 1024-1200px, (100vw - 1200px)
       bernilai NEGATIF, dan hasilnya margin kiri negatif yang menyeret badge,
       judul & subtitle keluar dari tepi kiri layar sampai terpotong.
       Batas bawah 24px membuatnya berhenti tepat di gutter, dan di layar
       >1200px rumus aslinya tetap berlaku seperti semula. */
    margin-left: max(24px, calc((100vw - 1200px) / 2 + 24px));
    margin-right: 0;
    padding-right: 0;
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,107,0,0.1);
  border: 1px solid rgba(255,107,0,0.3);
  color: var(--clr-orange-lt);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: var(--radius-full);
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero__badge i { color: var(--clr-orange); animation: blink-loc 2s ease-in-out infinite; }
@keyframes blink-loc {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.hero__title {
  font-family: var(--font-racing);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 24px;

  /* Keterbacaan judul di atas gambar ditangani MURNI oleh halo yang menempel
     pada bentuk huruf — tidak ada elemen latar apa pun di belakangnya.
     Sudah dicoba dan ditolak: panel/kartu berbingkai, dan area kaca dengan
     tepi ber-mask. Keduanya tetap menyisakan bidang persegi yang terbaca
     sebagai kotak — elemen <h1> selalu berbentuk kotak, dan seberapa halus
     pun tepinya dipudarkan, perbedaan blur di dalam vs di luar bidang itu
     masih tertangkap mata sebagai garis. Halo pada huruf tidak punya
     masalah itu: yang dilukis persis mengikuti kontur hurufnya.

     Trik penumpukan: text-shadow dengan radius & warna SAMA yang ditulis
     berulang akan saling menimpa sehingga opasitasnya berakumulasi sampai
     nyaris solid. Hasilnya bantalan putih rapat yang memeluk tepi huruf —
     fungsinya seperti outline, tapi bentuk hurufnya tidak berubah. Radius
     yang makin besar di baris berikutnya melembutkan peralihan ke gambar,
     supaya bantalannya tidak terlihat seperti stiker. */
  text-shadow:
    0 0 3px rgba(255,247,239,1),
    0 0 3px rgba(255,247,239,1),
    0 0 3px rgba(255,247,239,1),
    0 0 8px rgba(255,247,239,1),
    0 0 16px rgba(255,247,239,0.95),
    0 0 30px rgba(255,247,239,0.8),
    0 2px 3px rgba(255,255,255,0.95);
}

/* Gradient text accent */
.hero__title--accent {
  background: var(--gradient-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Isi huruf di sini transparan (gradient di-clip ke teks), jadi text-shadow
     TIDAK berlaku — bayangannya tergambar di belakang kotak teks, bukan
     mengikuti bentuk huruf. Karena itu halo yang diwarisi dari .hero__title
     harus dimatikan, lalu dibangun ulang memakai drop-shadow() yang memang
     bekerja pada bentuk huruf hasil render.
     Bedanya dengan text-shadow di atas: drop-shadow yang dirantai TIDAK
     saling menimpa di titik yang sama — tiap filter memakai hasil filter
     sebelumnya sebagai sumber, jadi bantalannya menebal bertahap. Radius
     kecil dulu (memeluk huruf), baru melebar. Ditutup bayangan gelap tipis
     untuk menegaskan tepi huruf oranye. */
  text-shadow: none;
  filter:
    drop-shadow(0 0 2px rgba(255,247,239,1))
    drop-shadow(0 0 2px rgba(255,247,239,1))
    drop-shadow(0 0 5px rgba(255,247,239,1))
    drop-shadow(0 0 10px rgba(255,247,239,0.9))
    drop-shadow(0 2px 5px rgba(28,43,74,0.28));
}

.hero__subtitle {
  font-size: 1.1rem;
  color: var(--clr-text-muted);
  margin-bottom: 40px;
  max-width: 500px;
  line-height: 1.7;
  /* Halo terang halus agar subtitle terbaca di atas gambar — lebih ringan
     daripada halo judul supaya hierarki visual tetap: mata jatuh ke judul dulu. */
  text-shadow:
    0 0 16px rgba(255,247,239,0.95),
    0 1px 6px rgba(255,255,255,0.9);
}
.hero__subtitle em     { color: var(--clr-orange-lt); font-style: normal; font-weight: 600; }
.hero__subtitle strong { color: var(--clr-heading); font-weight: 700; }

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 52px;
}

/* Stats */
.hero__stats {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: var(--clr-bg-card);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  width: fit-content;
}

.stat-item { display: flex; flex-direction: column; }

.stat-number {
  font-family: var(--font-racing);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  background: var(--gradient-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-divider {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255,107,0,0.3), transparent);
}

/* Floating cards */
.hero__visual {
  display: flex; /* Changed from none */
  flex-direction: column; /* Added for vertical stacking */
  gap: 36px;
  position: absolute;
  /* max() = jarak dari kanan tidak pernah kurang dari 40px, jadi kartu
     tidak terpotong di layar sempit (dulu bisa negatif saat layar <1200px).
     +80px = digeser lebih ke kiri dari tepi konten di layar lebar. */
  right: max(40px, calc((100vw - 1200px) / 2 + 80px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: auto; /* Changed from 380px */
  height: auto; /* Changed from 420px */
}

.floating-card {
  position: relative; /* Changed from absolute to relative for stacking */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(28,43,74,0.14);
  backdrop-filter: blur(20px);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  margin-top: 50px;
  margin-bottom: 50px;
}
.floating-card i {
  color: var(--clr-orange);
  font-size: 1.2rem;
  filter: drop-shadow(0 0 6px rgba(255,107,0,0.6));
}

.fc--1 { animation: float 4s ease-in-out infinite; }
.fc--2 { animation: float 4s ease-in-out infinite 1.3s; }
.fc--3 { animation: float 4s ease-in-out infinite 2.6s; }
.fc--4 { animation: float 4s ease-in-out infinite 3.9s; }

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


/* ----------------------------------------------------------------
   SCHEDULE SECTION
   ---------------------------------------------------------------- */
.schedule {
  padding-block: var(--section-py);
  background: var(--clr-bg-2);
  position: relative;
  overflow: hidden;
}
.schedule::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,107,0,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* Filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}

.filter-btn {
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--clr-surface);
  color: var(--clr-text-muted);
  border: 1.5px solid var(--clr-border);
  transition: all var(--transition-normal);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.filter-btn:hover { border-color: rgba(255,107,0,0.4); color: var(--clr-orange-lt); background: rgba(255,107,0,0.07); }
.filter-btn--active {
  background: var(--gradient-hot);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(255,107,0,0.4);
}

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

.schedule-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
/* Left orange accent bar */
.schedule-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gradient-orange);
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.schedule-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(255,107,0,0.25);
}
.schedule-card:hover::before { opacity: 1; }

.schedule-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.schedule-card__icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, rgba(255,107,0,0.2), rgba(255,107,0,0.08));
  border: 1px solid rgba(255,107,0,0.2);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: var(--clr-orange);
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(255,107,0,0.3));
}

.schedule-card__day-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.badge--selasa { background: rgba(124,92,255,0.14); color: #6a48e0; border: 1px solid rgba(124,92,255,0.28); }
.badge--jumat  { background: rgba(23,168,102,0.14);  color: #0f8b52; border: 1px solid rgba(23,168,102,0.28); }
.badge--minggu { background: rgba(255,107,0,0.14);   color: #d85400; border: 1px solid rgba(255,107,0,0.28); }
.badge--event  { background: rgba(245,158,11,0.16);  color: #b45309; border: 1px solid rgba(245,158,11,0.30); }

.schedule-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-heading);
  line-height: 1.3;
}

.schedule-card__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--clr-text-muted);
}
.schedule-detail-item i {
  width: 16px;
  color: var(--clr-orange);
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   MAP SECTION
   ---------------------------------------------------------------- */
.map-section {
  padding-block: var(--section-py);
  background: var(--clr-bg);
}

.map-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .map-layout { grid-template-columns: 1fr 320px; }
}

.map-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-glow);
  border: 1px solid rgba(255,107,0,0.15);
  min-height: 480px;
}

.leaflet-map {
  width: 100%;
  height: 100%;
  min-height: 480px;
}

.location-sidebar {
  background: var(--clr-bg-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: var(--radius-xl);
  padding: 24px;
  overflow-y: auto;
  max-height: 520px;
  box-shadow: var(--shadow-card);
}

.sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-heading);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
}
.sidebar-title i { color: var(--clr-orange); }

.location-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--clr-border);
  cursor: pointer;
  transition: padding-left var(--transition-fast), color var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.location-item:last-child { border-bottom: none; }
.location-item:hover { padding-left: 8px; }

.location-item__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text);
  transition: color var(--transition-fast);
}
.location-item:hover .location-item__name { color: var(--clr-orange-lt); }
.location-item__addr { font-size: 0.8rem; color: var(--clr-text-muted); }
.location-item__schedule {
  font-size: 0.78rem;
  color: var(--clr-orange);
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Baris jadwal dua kolom: kolom hari lebar tetap supaya jam rata kiri
   (efek "tab": Selasa/Jumat/Minggu sejajar, jam-jam juga sejajar) */
.schedule-line { display: flex; gap: 10px; }
.schedule-line__day { flex: 0 0 62px; }

.leaflet-popup-content-wrapper {
  background: var(--clr-bg-card) !important;
  border: 1px solid rgba(255,107,0,0.2) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-glow) !important;
  color: var(--clr-text) !important;
}
.leaflet-popup-tip { background: var(--clr-bg-card) !important; }
.popup-title { font-weight: 700; color: var(--clr-heading); margin-bottom: 4px; font-family: var(--font-heading); }
.popup-time  { font-size: 0.85rem; color: var(--clr-orange); font-weight: 700; }
.popup-addr  { font-size: 0.82rem; color: var(--clr-text-muted); margin-top: 4px; }

/* ----------------------------------------------------------------
   INFO SECTION
   ---------------------------------------------------------------- */
.info-section {
  padding-block: var(--section-py);
  background: var(--clr-bg-2);
  position: relative;
  overflow: hidden;
}
.info-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 50%, rgba(255,107,0,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 64px;
}

.info-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  position: relative;
  overflow: hidden;
}
.info-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-orange);
  transform: scaleX(0);
  transition: transform var(--transition-normal);
}
.info-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-glow); border-color: rgba(255,107,0,0.2); }
.info-card:hover::after { transform: scaleX(1); }

.info-card--featured {
  background: linear-gradient(145deg, rgba(255,107,0,0.1), rgba(255,107,0,0.04));
  border-color: rgba(255,107,0,0.25);
  box-shadow: 0 0 40px rgba(255,107,0,0.08);
}

.info-card__icon {
  width: 60px; height: 60px;
  background: var(--gradient-hot);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: white;
  margin: 0 auto 20px;
  box-shadow: 0 4px 24px rgba(255,107,0,0.4);
}

.info-card__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-racing); }
.info-card__text  { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.7; }

/* About pushbike */
.about-pushbike {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  background: var(--clr-bg-card);
  border: 1px solid rgba(255,107,0,0.1);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 48px);
}
@media (min-width: 768px) {
  .about-pushbike { grid-template-columns: 1fr 1fr; }
}

.about-pushbike__text h3 { font-family: var(--font-racing); font-size: 1.8rem; font-weight: 800; margin-bottom: 16px; text-transform: uppercase; }
.about-pushbike__text p  { color: var(--clr-text-muted); margin-bottom: 16px; font-size: 0.95rem; line-height: 1.75; }
.about-pushbike__text em { color: var(--clr-orange-lt); font-style: normal; font-weight: 600; }

.about-pushbike__badges { display: flex; flex-wrap: wrap; gap: 10px; }

.feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--clr-bg-card);
  border: 1px solid rgba(255,107,0,0.15);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.feature-badge:hover { color: var(--clr-orange-lt); border-color: rgba(255,107,0,0.4); background: rgba(255,107,0,0.07); }
.feature-badge i { color: var(--clr-orange); }

/* Blok About tambahan (Batch B): Founder & Sejarah, Sistem Pelatihan, Nilai & Spirit,
   Jenjang Atlet. Reuse "bahasa visual" .about-pushbike (kartu bg-card + border + radius-xl)
   supaya konsisten dengan kartu About yang sudah ada, tapi satu kolom (teks saja, tanpa
   grid badge) karena isinya lebih panjang / naratif. */
.about-block {
  background: var(--clr-bg-card);
  border: 1px solid rgba(255,107,0,0.1);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 48px);
  margin-top: 28px;
}
.about-block__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-racing);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.about-block__title i { color: var(--clr-orange); }
.about-block p { color: var(--clr-text-muted); margin-bottom: 16px; font-size: 0.95rem; line-height: 1.75; }
.about-block p:last-child { margin-bottom: 0; }

/* Slogan PBJ ditonjolkan sebagai pull-quote, bukan teks paragraf biasa */
.about-slogan {
  font-family: var(--font-racing);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 800;
  font-style: normal;
  color: var(--clr-orange);
  text-align: center;
  margin: 0 0 20px;
  padding: 20px;
  background: rgba(255,107,0,0.06);
  border-radius: var(--radius-md, 14px);
}

/* ----------------------------------------------------------------
   MANFAAT SECTION — "Bukan Sekadar Mainan" (trust + bukti riset)
   ---------------------------------------------------------------- */
.benefit-section { padding-block: var(--section-py); background: var(--clr-bg); }

/* Impact band — angka bukti riset */
.impact-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}
.impact-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-top: 3px solid var(--clr-orange);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.impact-number {
  display: block;
  font-family: var(--font-racing);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  color: var(--clr-orange);
  margin-bottom: 14px;
}
.impact-number small { font-size: 1.2rem; font-weight: 700; }
.impact-number i { font-size: 2.4rem; }
.impact-label { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.6; }
.impact-label em { color: var(--clr-orange-lt); font-style: normal; font-weight: 700; }

.source-note {
  text-align: center;
  margin-top: 36px;
  font-size: 0.85rem;
  color: var(--clr-text-muted);
}
.source-note i { color: var(--clr-green); margin-right: 6px; }

/* ----------------------------------------------------------------
   KEAMANAN SECTION — Checklist perlengkapan wajib
   ---------------------------------------------------------------- */
.safety-section { padding-block: var(--section-py); background: var(--clr-bg-2); }

.safety-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}
.safety-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.safety-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow); }
.safety-card__icon {
  width: 54px; height: 54px;
  border-radius: var(--radius-md);
  background: var(--gradient-hot);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(255,107,0,0.35);
}
.safety-card__title {
  font-family: var(--font-racing);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.safety-card p { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.65; }