/* ========================================
   CLEAN RESET - NO SCROLLBARS ISSUES
========================================= */

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

html,
body {
    overflow-x: hidden;
    /* PREVENTS LEFT/RIGHT SCROLLING */
    scroll-behavior: smooth;
    width: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════
   HERO — WORLD CLASS REBUILD
   Font: Playfair Display (heading) + Inter (body)
═══════════════════════════════════════════════════ */

/* ── BASE ── */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 64px;
  overflow: hidden;
  background: #050e07;
}

/* ── ANIMATED MESH BACKGROUND ── */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(22,163,74,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(16,185,129,0.15) 0%, transparent 55%),
    radial-gradient(ellipse 90% 50% at 50% 90%, rgba(5,46,22,0.4) 0%, transparent 70%),
    linear-gradient(135deg, #030a05 0%, #071a0c 40%, #0a2012 100%);
  animation: meshShift 12s ease-in-out infinite alternate;
}

@keyframes meshShift {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  100% { filter: hue-rotate(8deg) brightness(1.08); }
}

/* ── GRAIN TEXTURE OVERLAY ── */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
}

/* ── PARTICLES ── */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.6);
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0%   { transform: translateY(110vh) scale(0); opacity: 0; }
  5%   { opacity: 1; transform: translateY(100vh) scale(1); }
  95%  { opacity: 0.6; }
  100% { transform: translateY(-10vh) scale(0.5); opacity: 0; }
}

/* ── INNER LAYOUT: SPLIT ── */
.hero-inner {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 3rem 7rem;
  width: 100%;
}

/* ── LEFT ── */
.hero-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── BADGE ── */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.25);
  color: #86efac;
  padding: 7px 16px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  width: fit-content;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.badge-pulse {
  width: 7px;
  height: 7px;
  background: #4ade80;
  border-radius: 50%;
  flex-shrink: 0;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}

/* ── HEADLINE ── */
.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  font-family: 'Playfair Display', Georgia, serif;
  margin: 0;
  padding-left: 4px;
}

.ht-line {
  display: block;
  overflow: visible;  /* ← allow italic font to bleed left */
  line-height: 1.1;
  padding-left: 0.08em;   /* ← space for N's left edge */
  margin-left: -0.08em;   /* ← offset so layout stays aligned */
}


.ht-word {
  display: inline-block;
  font-size: clamp(3rem, 5vw, 5.2rem);
  font-weight: 900;
  color: #f0fdf4;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.outline-text {
  color: transparent;
  -webkit-text-stroke: 2px rgba(74,222,128,0.7);
  font-style: italic;
}

.accent-text {
  color: #4ade80;
  font-style: italic;
}

.accent-dot {
  color: #4ade80;
}

/* ── DESC ── */
.hero-desc {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  color: rgba(255,255,255,0.58);
  line-height: 1.9;
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ── TRUST CHIPS ── */
.hero-chips {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-chip {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

/* ── ACTIONS ── */
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hbtn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #22c55e, #15803d);
  color: white;
  padding: 14px 30px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(22,163,74,0.4), 0 0 0 0 rgba(74,222,128,0.3);
  position: relative;
  overflow: hidden;
}

.hbtn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hbtn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(22,163,74,0.5), 0 0 0 4px rgba(74,222,128,0.15);
}

.hbtn-primary:hover::after { opacity: 1; }

.hbtn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  padding: 14px 28px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1.5px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(12px);
}

.hbtn-ghost:hover {
  border-color: rgba(74,222,128,0.5);
  color: #86efac;
  background: rgba(74,222,128,0.06);
  transform: translateY(-2px);
}

/* ── SCROLL CUE ── */
.hero-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0;
  opacity: 0;
  transition: opacity 0.6s ease, color 0.3s ease;
  width: fit-content;
}

.hero-scroll-cue:hover { color: rgba(255,255,255,0.7); }

.scroll-track {
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.scroll-thumb {
  width: 3px;
  height: 7px;
  background: #4ade80;
  border-radius: 2px;
  animation: scrollBounce 1.8s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%,100% { transform: translateY(0); opacity: 1; }
  80%      { transform: translateY(10px); opacity: 0; }
}

/* ── RIGHT SIDE ── */
.hero-right {
  position: relative;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

/* ── DECORATIVE NUMBER ── */
.hero-deco-num {
  position: absolute;
  top: -10px;
  right: 0;
  font-family: 'Playfair Display', serif;
  font-size: 10rem;
  font-weight: 900;
  color: rgba(74,222,128,0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* ── ORB ── */
.hero-orb {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(74,222,128,0.15);
  animation: orbRotate linear infinite;
}

.orb-ring-1 {
  width: 240px; height: 240px;
  animation-duration: 20s;
  border-color: rgba(74,222,128,0.12);
}
.orb-ring-2 {
  width: 180px; height: 180px;
  animation-duration: 15s;
  animation-direction: reverse;
  border-color: rgba(74,222,128,0.18);
  border-style: dashed;
}
.orb-ring-3 {
  width: 120px; height: 120px;
  animation-duration: 10s;
  border-color: rgba(74,222,128,0.25);
}

@keyframes orbRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.orb-center {
  position: relative;
  z-index: 5;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 40% 35%, rgba(74,222,128,0.25), rgba(22,163,74,0.15));
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 60px rgba(74,222,128,0.15), inset 0 0 30px rgba(74,222,128,0.05);
}

.orb-label {
  font-family: 'Playfair Display', serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: #86efac;
  letter-spacing: 0.05em;
}

.orb-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.5rem;
  color: rgba(134,239,172,0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── FLOATING STAT CARDS ── */
.hstat-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(5,20,10,0.75);
  border: 1px solid rgba(74,222,128,0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 16px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hstat-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.hstat-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #4ade80;
  line-height: 1;
}

.hstat-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hstat-1 { top: 40px;  left: -20px;  animation: floatCard1 4s ease-in-out infinite; }
.hstat-2 { top: 40px;  right: -20px; animation: floatCard2 5s ease-in-out infinite; }
.hstat-3 { bottom: 60px; left: 50%; transform: translateX(-50%); animation: floatCard3 4.5s ease-in-out infinite; }

@keyframes floatCard1 {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-10px); }
}
@keyframes floatCard2 {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-14px); }
}
@keyframes floatCard3 {
  0%,100% { transform: translateX(-50%) translateY(0px); }
  50%     { transform: translateX(-50%) translateY(-8px); }
}

/* ── STATS BAR ── */
.hero-statsbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  padding: 1rem 2rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease 1.2s, transform 0.8s ease 1.2s;
}

.hsb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2.5rem;
  gap: 2px;
}

.hsb-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #4ade80;
  line-height: 1;
}

.hsb-num sup {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  color: #86efac;
  vertical-align: super;
}

.hsb-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.hsb-sep {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   LOADED STATE — triggers all animations
══════════════════════════════════════════ */
.hero-section.loaded .hero-badge {
  opacity: 1; transform: translateX(0);
  transition-delay: 0.15s;
}
.hero-section.loaded .ht-word {
  opacity: 1; transform: translateY(0);
}
.hero-section.loaded .ht-line:nth-child(1) .ht-word { transition-delay: 0.3s; }
.hero-section.loaded .ht-line:nth-child(2) .ht-word { transition-delay: 0.5s; }
.hero-section.loaded .ht-line:nth-child(3) .ht-word:nth-child(1) { transition-delay: 0.7s; }
.hero-section.loaded .ht-line:nth-child(3) .ht-word:nth-child(2) { transition-delay: 0.75s; }
.hero-section.loaded .hero-desc {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.85s;
}
.hero-section.loaded .hero-chips {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.95s;
}
.hero-section.loaded .hero-actions {
  opacity: 1; transform: translateY(0);
  transition-delay: 1.05s;
}
.hero-section.loaded .hero-scroll-cue {
  opacity: 1;
  transition-delay: 1.25s;
}
.hero-section.loaded .hero-right {
  opacity: 1; transform: translateX(0);
  transition-delay: 0.5s;
}
.hero-section.loaded .hstat-card {
  opacity: 1;
}
.hero-section.loaded .hstat-1 { transition-delay: 0.9s; }
.hero-section.loaded .hstat-2 { transition-delay: 1.1s; }
.hero-section.loaded .hstat-3 { transition-delay: 1.3s; }
.hero-section.loaded .hero-statsbar {
  opacity: 1; transform: translateY(0);
}

/* ══════════════════════════════════════════
   TABLET
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem 6rem;
    gap: 2.5rem;
  }
  .hero-right {
    height: 300px;
    order: -1;
  }
  .hero-deco-num { font-size: 6rem; }
  .hero-orb { width: 180px; height: 180px; }
  .orb-ring-1 { width: 180px; height: 180px; }
  .orb-ring-2 { width: 130px; height: 130px; }
  .orb-ring-3 { width: 90px;  height: 90px;  }
  .orb-center { width: 70px;  height: 70px;  }
  .hstat-1 { top: 20px;  left: 10%; }
  .hstat-2 { top: 20px;  right: 10%; }
  .hstat-3 { bottom: 20px; }
  .hsb-item { padding: 0 1.2rem; }
}

/* ══════════════════════════════════════════
   TABLET
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem 6rem;
    gap: 2rem;
    text-align: center;
  }
  .hero-left { align-items: center; }
  .hero-right {
    height: 280px;
    order: -1;
  }
  .hero-deco-num { font-size: 6rem; }
  .hero-orb { width: 180px; height: 180px; }
  .orb-ring-1 { width: 180px; height: 180px; }
  .orb-ring-2 { width: 130px; height: 130px; }
  .orb-ring-3 { width: 90px;  height: 90px;  }
  .orb-center { width: 70px;  height: 70px;  }
  .hstat-1 { top: 10px; left: 5%; }
  .hstat-2 { top: 10px; right: 5%; }
  .hstat-3 { bottom: 10px; left: 50%; transform: translateX(-50%); }
  .hsb-item { padding: 0 1.2rem; }
  .hero-badge { margin: 0 auto; }
  .hero-chips { justify-content: center; }
  .hero-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════
   TABLET (max 900px)
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem 7rem;
    gap: 2rem;
    text-align: center;
  }
  .hero-left  { align-items: center; }
  .hero-right { height: 280px; order: -1; }
  .hero-deco-num { font-size: 6rem; }
  .hero-orb   { width: 180px; height: 180px; }
  .orb-ring-1 { width: 180px; height: 180px; }
  .orb-ring-2 { width: 130px; height: 130px; }
  .orb-ring-3 { width: 90px;  height: 90px;  }
  .orb-center { width: 70px;  height: 70px;  }
  .hstat-1 { top: 10px; left: 5%; }
  .hstat-2 { top: 10px; right: 5%; }
  .hstat-3 { bottom: 10px; left: 50%; transform: translateX(-50%); }
  .hsb-item { padding: 0 1.2rem; }
  .hero-badge { margin: 0 auto; }
  .hero-chips { justify-content: center; }
  .hero-actions { flex-direction: row; justify-content: center; }
}

/* ══════════════════════════════════════════
   MOBILE (max 600px)
══════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── CRITICAL: allow section to grow + no clipping ── */
  .hero-section {
    min-height: unset !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 64px !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Hide particles on very small screens for perf ── */
  /*.hero-particles { display: none !important; }*/

  /* ── Remove orb ── */
  .hero-right { display: none !important; }

  /* ── Main content wrapper ── */
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 1.75rem 1.25rem 1.5rem !important;
    gap: 1.2rem !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 1 !important;
  }

  /* ── Left column ── */
  .hero-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.1rem !important;
    width: 100% !important;
  }

  /* ── Badge ── */
  .hero-badge {
    margin: 0 auto !important;
    font-size: 0.63rem !important;
    padding: 5px 13px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Headline ── */
  .hero-title { width: 100% !important; }

  .ht-line {
    display: block !important;
    overflow: visible !important;
  }

  .ht-word {
    font-size: clamp(1.85rem, 8vw, 2.4rem) !important;
    opacity: 1 !important;
    transform: none !important;
    line-height: 1.1 !important;
  }

  .outline-text {
    -webkit-text-stroke: 1.5px rgba(74,222,128,0.7) !important;
  }

  /* ── Description ── */
  .hero-desc {
    font-size: 0.87rem !important;
    line-height: 1.75 !important;
    text-align: center !important;
    color: rgba(255,255,255,0.62) !important;
    max-width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Chips ── */
  .hero-chips {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-chip {
    font-size: 0.67rem !important;
    padding: 5px 10px !important;
  }

  /* ── Buttons ── */
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.7rem !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hbtn-primary,
  .hbtn-ghost {
    width: 100% !important;
    max-width: 290px !important;
    justify-content: center !important;
    padding: 13px 20px !important;
    font-size: 0.88rem !important;
  }

  .hero-scroll-cue { display: none !important; }

  /* ══════════════════════════════
     STATS BAR — FULL REBUILD
     Flows at bottom, not absolute
  ══════════════════════════════ */
  .hero-statsbar {
    /* Remove all desktop absolute positioning */
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;

    /* Force visible — bypass JS loaded class */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;

    /* Layout: 4 items in a row */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 0.6rem 0.5rem !important;

    background: rgba(0,0,0,0.5) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-sizing: border-box !important;
  }

  .hsb-sep { display: none !important; }

  .hsb-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    padding: 0.4rem 0.2rem !important;
    gap: 2px !important;
    border: none !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Subtle dividers between items */
  .hsb-item + .hsb-item {
    border-left: 1px solid rgba(255,255,255,0.07) !important;
  }

  .hsb-num {
    font-size: 1rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .hsb-num sup {
    font-size: 0.5rem !important;
  }

  .hsb-lbl {
    font-size: 0.48rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    letter-spacing: 0.06em !important;
  }
}




nav {
    background-color: rgba(31, 41, 55, 0.95) !important;
    /* Keep dark navbar */
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 64px;
}

/* Desktop - full screen cover */
@media (min-width: 1025px) {
    #home {
        min-height: calc(100vh - 64px);
        /* Full height minus navbar */
        background-size: cover;
    }

    /* Desktop buttons - normal size */
    #home button {
        font-size: 1.125rem;
        /* 18px */
        padding: 1rem 2rem;
        /* 16px 32px */
        border-radius: 0.5rem;
        min-height: 3rem;
        /* 48px */
        width: auto;
        /* Let content determine width */
        min-width: 200px;
        /* Minimum readable width */
    }
}

/* Tablet - optimized */
@media (max-width: 1024px) and (min-width: 769px) {
    #home {
        min-height: calc(100vh - 64px);
        background-size: cover;
        background-position: center center;
    }

    /* Tablet buttons */
    #home button {
        font-size: 1rem;
        /* 16px */
        padding: 0.875rem 1.75rem;
        /* 14px 28px */
        border-radius: 0.5rem;
        min-height: 2.75rem;
        /* 44px */
        width: auto;
        min-width: 180px;
    }
}

/* Mobile - COMPACT BUTTONS + NAVBAR PROTECTION */
@media (max-width: 768px) {
    #home {
        height: calc(66.67vw - 64px);
        /* 3:2 ratio minus navbar */
        min-height: calc(50vh - 32px);
        max-height: calc(90vh - 64px);
        background-size: 100% 100%;
        background-position: center center;
        background-color: transparent;
        margin-top: 64px;
        /* Keep navbar visible */
    }

    /* COMPACT MOBILE BUTTONS - SAME AS DESKTOP STYLE */
    #home button {
        font-size: 0.875rem;
        /* 14px */
        padding: 0.75rem 1.25rem;
        /* 12px 20px - compact but readable */
        border-radius: 0.5rem;
        min-height: 2.5rem;
        /* 40px */
        width: auto !important;
        /* Don't stretch */
        min-width: 140px;
        /* Compact minimum width */
        max-width: 180px;
        /* Prevent stretching */
        flex: none;
        /* Don't grow to fill space */
    }

    /* Button container - prevent stretching */
    #home .flex {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Small mobile - even more compact */
@media (max-width: 480px) {
    #home {
        height: calc(66.67vw - 64px);
        min-height: calc(45vh - 32px);
        max-height: calc(85vh - 64px);
    }

    /* Smaller buttons but still compact */
    #home button {
        font-size: 0.8rem;
        /* 12.8px */
        padding: 0.625rem 1rem;
        /* 10px 16px */
        min-height: 2.25rem;
        /* 36px */
        min-width: 120px;
        max-width: 160px;
    }
}

/* Very small screens */
@media (max-width: 375px) {
    #home button {
        font-size: 0.75rem;
        /* 12px */
        padding: 0.5rem 0.875rem;
        /* 8px 14px */
        min-height: 2rem;
        /* 32px */
        min-width: 110px;
        max-width: 140px;
    }

    #home .flex {
        gap: 0.5rem;
        max-width: 320px;
    }
}

/* Landscape orientation */
@media (max-width: 768px) and (orientation: landscape) {
    #home {
        height: calc(100vh - 64px);
        background-size: cover;
        background-position: center center;
    }

    /* Horizontal layout for landscape */
    #home .flex {
        flex-direction: row;
        gap: 1rem;
    }

    #home button {
        min-width: 120px;
        max-width: 160px;
    }
}



/* ========================================
   ANIMATIONS - CLEAN
========================================= */

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

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

.animate-slide-in-up {
    animation: slideInUp 0.6s ease-out;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.pulse-button {
    animation: pulse 2s infinite;
}

/* ========================================
   HOVER EFFECTS - SIMPLE
========================================= */

.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}



/* ========================================
   GRADIENTS
========================================= */

.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



/* ========================================
   CUSTOM SCROLLBAR - CLEAN
========================================= */

/* Firefox standard scrollbars */
* {
  scrollbar-width: auto;
  scrollbar-color: #10b981 #020b05;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #020b05;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #4ade80, #10b981);
  border-radius: 6px;
  border: 2px solid #020b05;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #22c55e, #10b981);
}


/* ========================================
   MOBILE MENU
========================================= */

@media (max-width: 768px) {
    .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(31, 41, 55, 0.95);
        backdrop-filter: blur(10px);
        padding: 1rem;
        border-radius: 0 0 1rem 1rem;
    }

    .mobile-menu a {
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        transition: all 0.3s;
    }

    .mobile-menu a:hover {
        background: rgba(59, 130, 246, 0.2);
    }
}

/* ========================================
   SOCIAL ANIMATIONS
========================================= */

.social-pulse {
    animation: socialPulse 2s infinite;
}

@keyframes socialPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

@media (max-width: 640px) {
    #newsletter-form {
        max-width: 100% !important;
        padding: 0 !important;
    }

    #newsletter-form .flex {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    #newsletter-email {
        width: 100% !important;
        flex: none !important;
    }

    #newsletter-btn {
        width: 100% !important;
        flex: none !important;
        white-space: nowrap !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        min-height: 48px !important;
    }
}

/* Ensure newsletter container doesn't overflow */
#newsletter-form .flex {
    max-width: 100%;
    overflow: visible;
}

/* Prevent button text from wrapping weirdly */
#newsletter-btn {
    white-space: nowrap;
    overflow: visible;
}

/* ========================================
   NAVBAR MOBILE SPACING FIX
========================================= */

/* Ensure logo and text don't overlap on small screens */
.navbar-brand-container {
    min-width: 0;
    flex-shrink: 1;
}

/* Mobile navbar adjustments */
@media (max-width: 640px) {

    /* Smaller logo on very small screens */
    .navbar-logo {
        width: 2rem !important;
        height: 2rem !important;
    }

    /* Smaller text on tiny screens */
    .navbar-text {
        font-size: 1rem !important;
    }

    /* Ensure proper spacing */
    nav .flex.items-center {
        min-width: 0;
        overflow: hidden;
    }
}

/* Prevent text from wrapping */
.navbar-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   HERO SECTION - PREVENT NAVBAR COLLISION
========================================= */

#home {
    padding-top: 80px;
    /* Account for fixed navbar */
}

/* Mobile specific spacing to prevent collision */
@media (max-width: 640px) {
    #home {
        padding-top: 100px;
        /* Extra space on mobile */
    }

    #home h1 {
        font-size: 2.5rem !important;
        /* Smaller hero text on mobile */
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 768px) {
    #home {
        padding-top: 90px;
    }

    #home h1 {
        font-size: 3.5rem !important;
    }
}

/* Desktop - normal spacing */
@media (min-width: 769px) {
    #home {
        padding-top: 80px;
    }
}

/* ════════════════════════════════════════
   FOOTER — MANTRAAQ
   Design: Full editorial dark
   No grey. No blue. No pipe separators.
════════════════════════════════════════ */

.ft {
  position: relative;
  background: #020b05;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

/* ── BG ── */
.ft-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.ft-bg-orb {
  position: absolute;
  width: 600px; height: 400px;
  top: -100px; left: -100px;
  background: radial-gradient(ellipse,
    rgba(16,185,129,0.06) 0%, transparent 70%);
  filter: blur(80px);
  border-radius: 50%;
}
.ft-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 56px 56px;
}
.ft-bg-topline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16,185,129,0.25) 30%,
    rgba(16,185,129,0.25) 70%,
    transparent 100%
  );
}

/* ── WRAP ── */
.ft-wrap {
  position: relative; z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px 40px;
}

/* ══════════════════════════════
   TOP ROW
══════════════════════════════ */
.ft-top {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: 64px;
  margin-bottom: 56px;
}

/* ── BRAND ── */
.ft-brand {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ft-logo {
  text-decoration: none;
  display: inline-block;
  margin-bottom: 16px;
}
.ft-logo-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 900;
  color: #f0fdf4;
  letter-spacing: -0.02em;
  line-height: 1;
  /* Subtle green underline */
  background: linear-gradient(#f0fdf4, #f0fdf4) padding-box,
              linear-gradient(90deg, #10b981, transparent) border-box;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
}

.ft-tagline {
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.85;
  margin-bottom: 28px;
  max-width: 240px;
}

/* Social icons */
.ft-socials {
  display: flex;
  gap: 10px;
}
.ft-social {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.ft-social:hover {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.2);
  color: #10b981;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(16,185,129,0.12);
}

/* ── NAV GROUP ── */
.ft-nav-group {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 32px;
}

.ft-nav-heading {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #10b981;
  margin: 0 0 20px;
}

.ft-nav-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ft-nav-list li a,
.ft-nav-list li {
  font-size: 0.85rem;
  color: #4b5563;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.25s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}
.ft-nav-list li a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: #10b981;
  transition: width 0.3s ease;
}
.ft-nav-list li a:hover { color: #e2e8f0; }
.ft-nav-list li a:hover::after { width: 100%; }

/* Contact list */
.ft-contact-list li,
.ft-contact-list li a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.ft-contact-icon {
  color: #10b981;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
}
.ft-location {
  color: #4b5563;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}
.ft-location::after { display: none !important; }

/* ══════════════════════════════
   DIVIDER
══════════════════════════════ */
.ft-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 20%,
    rgba(255,255,255,0.06) 80%,
    transparent 100%
  );
  margin-bottom: 32px;
}

/* ══════════════════════════════
   BOTTOM ROW
══════════════════════════════ */
.ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ft-bottom-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ft-copy {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}
.ft-made {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  margin: 0;
}
.ft-heart {
  color: #10b981;
  animation: ftHeart 1.6s ease-in-out infinite;
  display: inline-block;
  margin: 0 1px;
}
@keyframes ftHeart {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.3); }
}

.ft-credit {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  margin: 0;
  text-align: right;
}
.ft-credit-link {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.3s ease;
}
.ft-credit-link:hover { color: #10b981; }
.ft-credit-link svg { margin-bottom: 1px; }

/* ══════════════════════════════
   BACK TO TOP BUTTON
══════════════════════════════ */
.ft-totop {
  position: fixed;
  bottom: 30px; right: 90px;
  width: 40px; height: 40px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.18);
  border-radius: 10px;
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  z-index: 9999;
}
.ft-totop.ft-totop-vis {
  opacity: 1;
  transform: none;
  pointer-events: all;
}
.ft-totop:hover {
  background: rgba(16,185,129,0.14);
  border-color: rgba(16,185,129,0.35);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(16,185,129,0.15);
}
.ft-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.ft-logo:hover .ft-logo-img {
  opacity: 1;
}

/* Company Registration Details */
.ft-company-info {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
  line-height: 1.6;
}
.ft-company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 24px;
}
.ft-company-grid div strong {
  color: rgba(255, 255, 255, 0.55);
}
.ft-company-office {
  grid-column: 1 / -1;
  margin-top: 4px;
}
@media (max-width: 640px) {
  .ft-company-info {
    margin-top: 24px;
    padding-top: 16px;
  }
  .ft-company-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}



/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1024px) {
  .ft-wrap { padding: 72px 32px 36px; }
  .ft-top { gap: 48px; }
}

@media (max-width: 860px) {
  .ft-top {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .ft-tagline { max-width: 100%; }
}

@media (max-width: 640px) {
  .ft-wrap { padding: 60px 20px 32px; }
  .ft-nav-group { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ft-credit { text-align: left; }
  .ft-totop { bottom: 20px; right: 20px; }
}

@media (max-width: 420px) {
  .ft-nav-group { grid-template-columns: 1fr; gap: 32px; }
}

/* ========================================
   PRODUCT GRID & DYNAMIC GLASSMORPHIC CARDS
======================================== */

.storefront-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
    max-width: 100%;
}

.product-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
}

.product-card:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.08);
}

/* Floating Image Wrapper */
.product-image-wrapper {
    position: relative;
    margin: 12px;
    padding-top: 85%; /* Slightly more compact than 1:1 */
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
}

.product-gallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.product-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.product-img.active {
    opacity: 1;
    z-index: 1;
}

.product-card:hover .product-img.active {
    transform: scale(1.04);
}

/* Gallery Navigation */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.8);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.gallery-nav.prev { left: 8px; }
.gallery-nav.next { right: 8px; }

.product-card:hover .gallery-nav {
    opacity: 1;
}

.gallery-nav:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.gallery-nav svg {
    color: #334155;
    width: 18px;
    height: 18px;
}

/* Gallery Indicators */
.gallery-indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

.indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: #0f5132;
    width: 16px;
    border-radius: 3px;
}

/* Product Badges (Pills) */
.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.product-badge.new {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #ffffff;
}

.product-badge.bestseller {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    color: #ffffff;
}

.product-badge.seasonal {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    color: #ffffff;
}

.product-badge.coming-soon {
    background: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
    color: #ffffff;
}

/* Floating Wishlist Heart Button overrides */
.product-card .wl-heart-btn {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.product-card .wl-heart-btn:hover {
    transform: scale(1.08) !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.15) !important;
}

/* Product Content */
.product-content {
    padding: 12px 20px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-header {
    margin-bottom: 8px;
}

.product-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
    line-height: 1.35;
}

.product-description {
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

/* Feature tags */
.product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.feature-tag {
    background: rgba(241, 245, 249, 0.8);
    color: #475569;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(226, 232, 240, 0.5);
}

/* Variant selectors */
.variant-selector {
    margin: 8px 0 16px;
}

.variant-btn {
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}

.variant-btn.active {
    background: #0f5132 !important;
    color: #ffffff !important;
    border-color: #0f5132 !important;
    box-shadow: 0 4px 10px rgba(15, 81, 50, 0.15) !important;
}

/* Product Footer & Pricing */
.product-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.price-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.price-current {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f5132;
}

.price-original {
    font-size: 0.9rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.price-discount {
    background: rgba(220, 252, 231, 0.8);
    color: #15803d;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
}

.tax-label {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 1px;
}

/* Sleek Premium Buy Button */
.btn-primary {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #15803d 0%, #0f5132 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 12px rgba(15, 81, 50, 0.2);
    margin-top: auto;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 81, 50, 0.35);
    background: linear-gradient(135deg, #166534 0%, #0c3e25 100%);
}

.btn-primary.coming-soon-disabled {
    background: #64748b !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.65 !important;
    box-shadow: none !important;
}

/* ========================================
   RESPONSIVE OVERRIDES (MOBILE FRIENDLY)
======================================== */

@media (max-width: 1024px) {
    .storefront-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .storefront-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-card {
        border-radius: 20px;
    }

    .product-image-wrapper {
        margin: 8px;
        padding-top: 85%;
        border-radius: 12px;
    }

    .product-card .wl-heart-btn {
        width: 30px !important;
        height: 30px !important;
        top: 8px !important;
        right: 8px !important;
    }

    .product-card .wl-heart-btn svg {
        width: 14px !important;
        height: 14px !important;
    }

    .product-content {
        padding: 8px 12px 14px;
    }

    .product-title {
        font-size: 0.95rem;
        margin-bottom: 2px;
    }

    .product-description {
        font-size: 0.75rem;
        margin-bottom: 8px;
        height: auto;
        -webkit-line-clamp: unset;
    }

    .feature-tag {
        padding: 3px 6px;
        font-size: 0.65rem;
        border-radius: 6px;
    }

    .product-features {
        margin-bottom: 12px;
        gap: 4px;
    }

    .variant-selector {
        margin: 4px 0 12px;
    }

    .variant-btn {
        padding: 4px 8px !important;
        font-size: 9px !important;
        border-radius: 6px !important;
    }

    .price-current {
        font-size: 1.25rem;
    }

    .price-original {
        font-size: 0.8rem;
    }

    .price-discount {
        font-size: 0.65rem;
        padding: 2px 4px;
    }

    .btn-primary {
        padding: 10px 16px;
        font-size: 0.8rem;
        border-radius: 10px;
    }

    .gallery-nav {
        width: 28px;
        height: 28px;
    }

    .gallery-nav svg {
        width: 14px;
        height: 14px;
    }
}
    transition: transform 0.3s ease;
}

.view-all-btn:hover svg {
    transform: translateX(4px);
}

/* =========================================
   ABOUT — MANTRAAQ FINAL
   No counters. Clean. World-class.
========================================= */

.about-section {
  background: #fff;
  overflow-x: hidden;
  font-family: 'Inter', sans-serif;
}

/* ── EYEBROW ── */
.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  color: #059669;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.about-eyebrow.light {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  color: #a7f3d0;
}
.ep {
  width: 7px; height: 7px;
  background: #10b981;
  border-radius: 50%;
  flex-shrink: 0;
  animation: epPulse 2s ease-in-out infinite;
}
.ep.light { background: #6ee7b7; }
@keyframes epPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50%     { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

/* ── REVEAL ── */
[data-rev] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
[data-rev].vis { opacity: 1; transform: none; }


/* ══════════════════════════════
   PART 1 — HOOK
══════════════════════════════ */
.about-hook {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  background: #f8fffe;
  overflow: hidden;
}

/* Mesh BG */
.hook-mesh {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
}
.hm-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  animation: hmDrift ease-in-out infinite alternate;
}
.hm-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(16,185,129,0.11), transparent);
  top: -150px; left: -100px;
  animation-duration: 13s;
}
.hm-orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(249,115,22,0.06), transparent);
  bottom: -100px; right: -100px;
  animation-duration: 17s; animation-delay: -6s;
}
.hm-orb-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(74,222,128,0.07), transparent);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation-duration: 10s; animation-delay: -3s;
}
.hm-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(16,185,129,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
@keyframes hmDrift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(22px,18px) scale(1.07); }
}

/* Ambient words */
.hook-ambient {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  overflow: hidden;
}
.ha {
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(16,185,129,0.032);
  animation: haFloat ease-in-out infinite;
  white-space: nowrap;
}
.ha-1 { font-size: 9rem; top: 4%;  left: -3%;  animation-duration: 22s; }
.ha-2 { font-size: 6rem; top: 18%; right: -2%; animation-duration: 18s; animation-delay: -7s; }
.ha-3 { font-size: 7rem; bottom: 22%; left: 4%; animation-duration: 26s; animation-delay: -12s; }
.ha-4 { font-size: 5rem; bottom: 8%; right: 6%; animation-duration: 20s; animation-delay: -4s; }
@keyframes haFloat {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-28px) rotate(2deg); }
}

/* Hook inner */
.hook-inner {
  position: relative; z-index: 5;
  max-width: 920px; width: 100%;
}

/* ── HOOK TITLE — FOUC fix ──
   Text is VISIBLE by default via CSS.
   JS adds animations AFTER load.
   No flash possible.
*/
.hook-title {
  margin: 0 0 2.5rem;
  display: flex; flex-direction: column; gap: 2px;
}
.ht-row { display: block; line-height: 1.15; overflow: hidden; }
.ht-row-sub { margin-top: 8px; }

/* Static — visible immediately */
.ht-static {
  display: inline-block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  font-weight: 900;
  color: #111827;
  /* Visible by default — JS adds animation class later */
}

/* Cycle — visible immediately, gradient text */
.ht-cycle {
  display: inline-block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  font-weight: 900;
  font-style: italic;
  background: linear-gradient(135deg, #10b981 0%, #059669 40%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Visible by default */
}

/* Sub — visible immediately */
.ht-sub {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.88rem, 1.8vw, 1.15rem);
  color: #6b7280;
  font-style: italic;
  font-weight: 500;
}

/* Cycle transition states (applied by JS only) */
.ht-cycle.cy-out {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  -webkit-text-fill-color: transparent;
}
.ht-cycle.cy-in {
  opacity: 0;
  transform: translateY(24px);
}
.ht-cycle.cy-show {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}

/* Hook CTA */
.hook-cta-row { display: flex; justify-content: center; }
.hook-discover-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1.5px solid rgba(16,185,129,0.3);
  color: #059669;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  padding: 12px 28px; border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}
.hook-discover-btn:hover {
  background: rgba(16,185,129,0.07);
  border-color: #10b981;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16,185,129,0.14);
}
.hook-discover-btn svg { animation: dbBounce 1.8s ease-in-out infinite; }
@keyframes dbBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(5px); }
}

/* Scroll hint */
.hook-scroll-hint {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%); z-index: 5;
}
.hsh-line {
  width: 2px; height: 50px;
  background: rgba(16,185,129,0.14);
  border-radius: 2px; overflow: hidden; margin: 0 auto;
}
.hsh-dot {
  width: 2px; height: 14px;
  background: #10b981; border-radius: 2px;
  animation: hshSlide 1.6s ease-in-out infinite;
}
@keyframes hshSlide {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(400%); }
}


/* ══════════════════════════════
   PART 2 — STORY
══════════════════════════════ */
.about-story-section { padding: 0; background: #fff; }
.story-wrap {
  max-width: 1240px; margin: 0 auto;
  padding: 100px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Left panels */
.story-left { position: sticky; top: 100px; }
.story-panel {
  padding: 52px 0;
  border-bottom: 1px solid #f1f5f9;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.story-panel:last-child { border-bottom: none; }
.story-panel.sp-dim    { opacity: 0.25; transform: translateX(-10px); }
.story-panel.sp-active { opacity: 1;    transform: none; }

.story-num {
  font-family: 'Playfair Display', serif;
  font-size: 4.5rem; font-weight: 900;
  color: rgba(16,185,129,0.07);
  line-height: 1; margin-bottom: -1.5rem;
  display: block; pointer-events: none;
}
.story-tag {
  display: inline-block;
  font-size: 0.67rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #10b981; background: #f0fdf4;
  border: 1px solid #d1fae5;
  padding: 4px 12px; border-radius: 100px; margin-bottom: 1rem;
}
.story-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 900; color: #111827;
  line-height: 1.2; margin-bottom: 1rem;
}
.story-em { color: #10b981; font-style: italic; }
.story-body {
  font-size: 0.95rem; color: #4b5563;
  line-height: 1.9; margin-bottom: 1.5rem;
}
.story-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.story-pills span {
  background: #f9fafb; border: 1.5px solid #e5e7eb;
  color: #374151; padding: 6px 14px;
  border-radius: 100px; font-size: 0.8rem; font-weight: 600;
  transition: all 0.3s ease; cursor: default;
}
.story-pills span:hover {
  border-color: #10b981; color: #059669;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.12);
}

/* ── PHOTO DECK ── */
.story-right { position: sticky; top: 100px; }
.photo-deck {
  position: relative;
  height: 540px;
}

/* All 3 cards — stacked, all visible */
.pd-card {
  position: absolute; inset: 0;
  border-radius: 24px; overflow: hidden;
  transition: all 0.75s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, filter, z-index;
}
.pd-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.8s ease;
}
.pd-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 55%);
  display: flex; align-items: flex-end; padding: 28px;
}
.pd-overlay span {
  color: #fff; font-size: 0.88rem;
  font-weight: 700; letter-spacing: 0.04em;
}

/* Deck positions */
.pd-front {
  z-index: 3;
  transform: none;
  filter: brightness(1) saturate(1);
  box-shadow: 0 28px 70px rgba(0,0,0,0.2);
}
.pd-front img { transform: scale(1.02); }
.pd-mid {
  z-index: 2;
  transform: translateY(14px) translateX(10px) scale(0.955);
  filter: brightness(0.7) saturate(0.8);
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}
.pd-back {
  z-index: 1;
  transform: translateY(28px) translateX(20px) scale(0.91);
  filter: brightness(0.45) saturate(0.6);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Dots */
.pd-dots {
  position: absolute;
  bottom: -36px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 10;
}
.pd-dot {
  width: 8px; height: 8px; border-radius: 100px;
  background: #e5e7eb; border: none; cursor: pointer;
  padding: 0; transition: all 0.35s ease;
}
.pd-dot.active {
  width: 28px;
  background: linear-gradient(90deg, #10b981, #059669);
}

/* Progress ring */
.pd-progress {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  z-index: 10; opacity: 0.6;
}
.pd-progress svg { transform: rotate(-90deg); }
.pd-prog-track {
  fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 3;
}
.pd-prog-fill {
  fill: none; stroke: #10b981; stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 94.2;
  stroke-dashoffset: 94.2;
  transition: stroke-dashoffset linear;
}

/* ══════════════════════════════
   PART 7 — ABOUT DEEP + COMMUNITY
══════════════════════════════ */
.comm-section {
  position: relative;
  background: #060e09;
  padding: 110px 48px;
  overflow: hidden;
}
.comm-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.comm-orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px);
  animation: commOrbDrift ease-in-out infinite alternate;
}
.comm-orb-1 {
  width: 700px; height: 600px;
  background: radial-gradient(ellipse,
    rgba(16,185,129,0.09) 0%, transparent 70%);
  top: -180px; left: -150px;
  animation-duration: 18s;
}
.comm-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(ellipse,
    rgba(74,222,128,0.06) 0%, transparent 70%);
  bottom: -80px; right: -60px;
  animation-duration: 13s; animation-delay: -6s;
}
@keyframes commOrbDrift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(18px,14px) scale(1.06); }
}
.comm-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(74,222,128,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%,
    black 40%, transparent 100%);
}
.comm-topline {
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(16,185,129,0.3) 30%,
    rgba(16,185,129,0.3) 70%, transparent);
}
.comm-wrap {
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto;
}

/* ══════════════════════════════
   BLOCK A — WHO WE ARE
══════════════════════════════ */
.comm-hero-block {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: start;
  margin-bottom: 80px;
}
.comm-hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  color: #f0fdf4;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.comm-hero-em {
  font-style: italic;
  color: #4ade80;
}
.comm-hero-body {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.9;
  margin: 0 0 36px;
  max-width: 560px;
}

/* Bihar card */
.comm-bihar-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(74,222,128,0.1);
  border-radius: 22px;
  padding: 28px 28px 24px;
  transition: border-color 0.4s ease;
}
.comm-bihar-card:hover {
  border-color: rgba(74,222,128,0.22);
}
.cbc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.cbc-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.cbc-kicker {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #10b981;
}
.cbc-body {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.85;
  margin: 0 0 22px;
}
.cbc-body strong { color: #a7f3d0; font-weight: 700; }

/* Stats row */
.cbc-stat-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(16,185,129,0.04);
  border: 1px solid rgba(16,185,129,0.07);
  border-radius: 14px;
  overflow: hidden;
}
.cbc-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  gap: 4px;
  transition: background 0.3s ease;
  cursor: default;
}
.cbc-stat:hover { background: rgba(16,185,129,0.06); }
.cbc-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: #4ade80;
  line-height: 1;
}
.cbc-stat-label {
  font-size: 0.63rem;
  color: rgba(255,255,255,0.28);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.3;
}
.cbc-stat-div {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
}

/* Mission card */
.comm-mission-card {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(74,222,128,0.1);
  border-radius: 24px;
  padding: 36px 30px 30px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.comm-mission-card:hover {
  border-color: rgba(74,222,128,0.22);
  box-shadow: 0 32px 64px rgba(0,0,0,0.3);
}
.cmc-glow {
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(74,222,128,0.4), transparent);
  pointer-events: none;
}
.cmc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #10b981;
}
.cmc-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.cmc-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: transform 0.3s ease;
  cursor: default;
}
.cmc-item:last-child { border-bottom: none; }
.cmc-item:hover { transform: translateX(4px); }
.cmc-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: rgba(74,222,128,0.15);
  line-height: 1;
  flex-shrink: 0;
  min-width: 36px;
}
.cmc-text {
  display: flex; flex-direction: column; gap: 3px;
}
.cmc-text strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
}
.cmc-text span {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.3);
  line-height: 1.5;
}
.cmc-tagline {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(74,222,128,0.5);
  text-align: center;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ══════════════════════════════
   INNER DIVIDER
══════════════════════════════ */
.comm-inner-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 72px;
}
.cid-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.06), transparent);
}
.cid-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #10b981;
  white-space: nowrap;
}
.cid-dot {
  width: 5px; height: 5px;
  background: #10b981; border-radius: 50%;
  flex-shrink: 0;
}

/* ══════════════════════════════
   BLOCK B — COMMUNITY
══════════════════════════════ */
.comm-inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 80px;
  align-items: center;
}
.comm-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.comm-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 900;
  color: #f0fdf4;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.comm-title-em { font-style: italic; color: #4ade80; }
.comm-desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.32);
  line-height: 1.9;
  margin: 0 0 36px;
}
.comm-perks {
  list-style: none; padding: 0; margin: 0 0 36px;
  display: flex; flex-direction: column; gap: 14px;
}
.comm-perk {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(74,222,128,0.07);
  border-radius: 14px;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  cursor: default;
}
.comm-perk:hover {
  background: rgba(74,222,128,0.05);
  border-color: rgba(74,222,128,0.18);
  transform: translateX(6px);
}
.cp-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.cp-text { display: flex; flex-direction: column; gap: 3px; }
.cp-text strong { font-size: 0.86rem; font-weight: 700; color: #e2e8f0; }
.cp-text span { font-size: 0.75rem; color: rgba(255,255,255,0.28); line-height: 1.5; }

.comm-mobile-btn {
  display: none;
  align-items: center; gap: 10px;
  background: #25D366; color: #fff;
  font-weight: 700; font-size: 0.88rem;
  padding: 13px 26px; border-radius: 100px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 28px rgba(37,211,102,0.3);
}
.comm-mobile-btn:hover {
  background: #1ebe59; transform: translateY(-2px);
}

/* QR Card */
.comm-right { display: flex; justify-content: center; }
.comm-qr-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(74,222,128,0.12);
  border-radius: 28px;
  padding: 32px 28px 28px;
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
  width: 100%; max-width: 340px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.comm-qr-card:hover {
  border-color: rgba(74,222,128,0.25);
  box-shadow: 0 40px 80px rgba(0,0,0,0.4),
    0 0 0 1px rgba(74,222,128,0.07);
}
.cqc-glow {
  position: absolute; inset: -1px;
  background: linear-gradient(135deg,
    rgba(16,185,129,0.06) 0%,
    transparent 50%,
    rgba(74,222,128,0.04) 100%);
  border-radius: 28px;
  pointer-events: none;
  animation: cqcGlowPulse 4s ease-in-out infinite;
}
@keyframes cqcGlowPulse {
  0%,100% { opacity: 0.6; } 50% { opacity: 1; }
}
.cqc-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(37,211,102,0.1);
  border: 1px solid rgba(37,211,102,0.2);
  color: #4ade80; font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 100px;
}
.cqc-badge-dot {
  width: 6px; height: 6px; background: #25D366;
  border-radius: 50%;
  animation: epPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.cqc-qr-wrap {
  position: relative; width: 200px; height: 200px; flex-shrink: 0;
}
.cqc-qr-frame {
  width: 100%; height: 100%; background: #fff;
  border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.cqc-qr-img {
  width: 100%; height: 100%; object-fit: contain;
  display: block; padding: 8px;
}
.cqc-qr-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; width: 100%; height: 100%;
  background: #f8fafc; text-align: center; padding: 14px;
}
.cqc-qr-placeholder p {
  font-size: 0.72rem; color: #64748b;
  font-weight: 600; line-height: 1.4; margin: 0;
}
.cqc-qr-placeholder span {
  font-size: 0.58rem; color: #94a3b8; font-family: monospace;
}
.cqc-corner {
  position: absolute; width: 18px; height: 18px;
  border-color: #10b981; border-style: solid; pointer-events: none;
}
.cqc-c-tl { top: -3px; left: -3px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.cqc-c-tr { top: -3px; right: -3px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.cqc-c-bl { bottom: -3px; left: -3px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.cqc-c-br { bottom: -3px; right: -3px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
.cqc-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.7rem; color: rgba(255,255,255,0.25); font-weight: 500; margin: 0;
}
.cqc-hint svg { flex-shrink: 0; color: #10b981; }
.cqc-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff; font-weight: 700;
  font-size: 0.8rem; padding: 11px 22px; border-radius: 100px;
  text-decoration: none; transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(37,211,102,0.3);
  width: 100%; justify-content: center;
}
.cqc-link:hover {
  background: #1ebe59; transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37,211,102,0.4);
}
.cqc-members {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.7rem; color: rgba(255,255,255,0.25); font-weight: 500;
}
.cqc-avatars { display: flex; margin-right: 4px; }
.cqa {
  width: 24px; height: 24px;
  background: linear-gradient(135deg, #059669, #10b981);
  border: 2px solid #060e09; border-radius: 50%;
  color: #fff; font-size: 0.58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-left: -5px; flex-shrink: 0;
}
.cqa:first-child { margin-left: 0; }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1024px) {
  .comm-section { padding: 80px 32px; }
  .comm-hero-block { grid-template-columns: 1fr; gap: 40px; }
  .comm-inner { grid-template-columns: 1fr 360px; gap: 48px; }
}
@media (max-width: 860px) {
  .comm-inner { grid-template-columns: 1fr; gap: 48px; }
  .comm-right { order: -1; }
  .comm-mobile-btn { display: inline-flex; }
  .comm-qr-card { max-width: 300px; }
  .cbc-stat-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .comm-section { padding: 60px 20px; }
  .cqc-qr-wrap { width: 170px; height: 170px; }
  .comm-perk { padding: 14px 14px; }
  .comm-hero-title { font-size: 1.85rem; }
}


/* ══════════════════════════════
   PART 3 — HEALTH CARDS
══════════════════════════════ */
.health-section {
  position: relative; background: #060e09;
  padding: 110px 48px; overflow: hidden;
}
.hs-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hs-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(74,222,128,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hs-glow-1 {
  position: absolute; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(16,185,129,0.1), transparent 65%);
  top: -200px; left: -200px; filter: blur(40px);
}
.hs-glow-2 {
  position: absolute; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(74,222,128,0.07), transparent 65%);
  bottom: -100px; right: -100px; filter: blur(40px);
}
.hs-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }
.hs-header {
  text-align: center; margin-bottom: 70px;
  display: flex; flex-direction: column; align-items: center;
}
.hs-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 900; color: #f0fdf4; line-height: 1.2; margin: 0;
}
.hs-accent { color: #4ade80; font-style: italic; }

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

/* Glass card */
.hc {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(74,222,128,0.1);
  border-radius: 22px; padding: 34px 26px 28px;
  overflow: hidden; transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
  cursor: default; backdrop-filter: blur(12px);
}
.hc:hover {
  background: rgba(74,222,128,0.06);
  border-color: rgba(74,222,128,0.28);
  transform: translateY(-10px) rotateX(0deg);
  box-shadow: 0 40px 80px rgba(0,0,0,0.45),
              0 0 0 1px rgba(74,222,128,0.12);
}
.hc-bg-num {
  position: absolute; top: 16px; right: 18px;
  font-family: 'Playfair Display', serif;
  font-size: 4rem; font-weight: 900;
  color: rgba(74,222,128,0.04);
  line-height: 1; pointer-events: none;
  transition: color 0.4s ease;
}
.hc:hover .hc-bg-num { color: rgba(74,222,128,0.09); }
.hc-top {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 18px;
}
.hc-icon {
  width: 52px; height: 52px;
  background: rgba(74,222,128,0.07);
  border: 1px solid rgba(74,222,128,0.13);
  border-radius: 14px; display: flex;
  align-items: center; justify-content: center;
  font-size: 1.6rem; transition: all 0.4s ease;
}
.hc:hover .hc-icon {
  background: rgba(74,222,128,0.14);
  border-color: rgba(74,222,128,0.4);
  transform: scale(1.1) rotate(4deg);
  box-shadow: 0 6px 16px rgba(74,222,128,0.15);
}
.hc-badge {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #4ade80; background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.15);
  padding: 3px 10px; border-radius: 100px;
}
.hc h4 {
  font-size: 0.93rem; font-weight: 700;
  color: #f0fdf4; margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
}
.hc p {
  font-size: 0.79rem; color: rgba(255,255,255,0.38);
  line-height: 1.7; margin-bottom: 20px;
}
.hcm-row {
  display: flex; justify-content: space-between;
  font-size: 0.62rem; color: rgba(255,255,255,0.28);
  font-weight: 600; letter-spacing: 0.06em; margin-bottom: 6px;
}
.hcm-track {
  height: 3px; background: rgba(255,255,255,0.05);
  border-radius: 2px; overflow: hidden;
}
.hcm-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #059669, #4ade80);
  border-radius: 2px;
  transition: width 1.4s cubic-bezier(0.16,1,0.3,1);
}
.hc-glow {
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(74,222,128,0.4), transparent);
  opacity: 0; transition: opacity 0.4s ease;
}
.hc:hover .hc-glow { opacity: 1; }
.hc::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent,
    rgba(255,255,255,0.03), transparent);
  transform: skewX(-15deg);
  transition: left 0.65s ease; pointer-events: none;
}
.hc:hover::after { left: 150%; }


/* ══════════════════════════════
   PART 4 — JOURNEY
══════════════════════════════ */
.journey-section {
  background: #fff; padding: 110px 48px;
  border-top: 1px solid #f1f5f9;
}
.js-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.journey-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3.5vw, 2.75rem);
  font-weight: 900; color: #111827; margin-bottom: 64px;
}
.journey-track { position: relative; padding-top: 20px; }
.jt-svg {
  position: absolute; top: 32px; left: 0; right: 0;
  width: 100%; height: 80px; pointer-events: none; z-index: 1;
}
.journey-steps {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between;
  gap: 0; padding: 0 40px;
}
.jstep { flex: 1; max-width: 200px; text-align: center; }
.jstep-img-wrap {
  position: relative; width: 110px; height: 110px;
  margin: 0 auto 20px;
}
.jstep-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; border: 3px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,0.09);
  display: block; position: relative; z-index: 2;
  transition: all 0.4s ease;
}
.jstep:hover .jstep-img-wrap img {
  border-color: #10b981;
  box-shadow: 0 16px 40px rgba(16,185,129,0.2);
  transform: scale(1.06);
}
.jstep-ring {
  position: absolute; top: 50%; left: 50%;
  width: 132px; height: 132px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 1.5px solid rgba(16,185,129,0.18);
  z-index: 1; animation: jRing 2.5s ease-in-out infinite;
}
@keyframes jRing {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.5; }
  50%     { transform: translate(-50%,-50%) scale(1.12); opacity: 0; }
}
.jstep-num {
  position: absolute; bottom: 0; right: 0;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #10b981, #059669);
  border: 2px solid white; border-radius: 50%;
  color: white; font-size: 0.6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; box-shadow: 0 2px 8px rgba(16,185,129,0.4);
}
.jstep h4 {
  font-size: 0.95rem; font-weight: 700;
  color: #111827; margin-bottom: 4px;
}
.jstep p { font-size: 0.77rem; color: #9ca3af; line-height: 1.5; }


/* ══════════════════════════════
   PART 5 — DIFFERENCE
══════════════════════════════ */
.diff-section {
  background: linear-gradient(180deg, #f9fafb, #fff);
  padding: 110px 48px;
}
.diff-inner { max-width: 960px; margin: 0 auto; text-align: center; }
.diff-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3.5vw, 2.75rem);
  font-weight: 900; color: #111827;
  margin-bottom: 56px; line-height: 1.2;
}
.diff-board {
  display: flex; align-items: stretch;
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.09);
}
.diff-col { flex: 1; padding: 48px 40px; }
.diff-bad  { background: #fff8f8; }
.diff-good { background: linear-gradient(145deg, #f0fdf4, #dcfce7); }
.diff-col-head {
  display: flex; align-items: center;
  gap: 10px; margin-bottom: 28px;
}
.diff-col-head h4 {
  font-size: 1.05rem; font-weight: 800;
  font-family: 'Inter', sans-serif;
}
.diff-bad  .diff-col-head h4 { color: #dc2626; }
.diff-good .diff-col-head h4 { color: #059669; }
.dch-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fee2e2; color: #dc2626;
  font-weight: 900; font-size: 0.85rem;
  display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.dch-icon.good { background: #dcfce7; color: #059669; }
.diff-col ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.diff-col ul li {
  padding: 12px 0; font-size: 0.9rem; color: #374151;
  border-bottom: 1px solid rgba(0,0,0,0.05); line-height: 1.5;
  transition: transform 0.2s ease, color 0.2s ease; cursor: default;
}
.diff-col ul li:last-child { border-bottom: none; }
.diff-bad  ul li:hover { transform: translateX(4px); color: #dc2626; }
.diff-good ul li:hover { transform: translateX(4px); color: #059669; }
.diff-mid {
  background: #111827; display: flex;
  align-items: center; justify-content: center;
  padding: 0 20px; min-width: 72px;
}
.diff-vs {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%; color: white;
  font-weight: 900; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.06em;
  box-shadow: 0 0 24px rgba(16,185,129,0.5);
}


/* ══════════════════════════════
   PART 6 — CTA
══════════════════════════════ */
.about-cta {
  position: relative; background: #030d06;
  padding: 130px 40px; text-align: center; overflow: hidden;
}
.cta-bg { position: absolute; inset: 0; pointer-events: none; }
.cta-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  animation: ctaO ease-in-out infinite alternate;
}
.cta-o1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(16,185,129,0.13), transparent);
  top: -150px; left: -100px; animation-duration: 12s;
}
.cta-o2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(249,115,22,0.07), transparent);
  bottom: -100px; right: -80px;
  animation-duration: 16s; animation-delay: -7s;
}
.cta-o3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(74,222,128,0.08), transparent);
  top: 40%; left: 45%;
  animation-duration: 9s; animation-delay: -3s;
}
@keyframes ctaO {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(24px,18px) scale(1.1); }
}
.cta-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(74,222,128,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,0.018) 1px, transparent 1px);
  background-size: 72px 72px;
}
.cta-inner {
  position: relative; z-index: 5;
  max-width: 680px; margin: 0 auto;
}
.cta-pre {
  display: block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #6ee7b7; margin-bottom: 1.2rem;
}
.cta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 5vw, 3.75rem);
  font-weight: 900; color: rgba(255,255,255,0.78);
  line-height: 1.22; margin-bottom: 1.5rem;
}
.cta-accent {
  display: block;
  background: linear-gradient(135deg, #fff 0%, #a7f3d0 60%, #6ee7b7 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cta-stars {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 0.78rem; color: rgba(255,255,255,0.32);
  font-style: italic; margin-bottom: 2.25rem;
}
.cta-btns {
  display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
}
.cta-btn-main {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white; font-weight: 700; font-size: 0.92rem;
  padding: 16px 40px; border-radius: 100px;
  text-decoration: none; transition: all 0.35s ease;
  box-shadow: 0 12px 40px rgba(16,185,129,0.4);
  position: relative; overflow: hidden;
}
.cta-btn-main::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
  opacity: 0; transition: opacity 0.3s ease;
}
.cta-btn-main:hover::before { opacity: 1; }
.cta-btn-main:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(16,185,129,0.55),
              0 0 0 8px rgba(16,185,129,0.1);
}
.cta-btn-main svg { transition: transform 0.3s ease; }
.cta-btn-main:hover svg { transform: translateX(5px); }
.cta-btn-ghost {
  display: inline-flex; align-items: center;
  background: transparent; color: rgba(255,255,255,0.52);
  font-weight: 600; font-size: 0.9rem;
  padding: 16px 32px; border-radius: 100px;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.13);
  transition: all 0.3s ease; backdrop-filter: blur(10px);
}
.cta-btn-ghost:hover {
  border-color: rgba(74,222,128,0.4); color: #86efac;
  background: rgba(74,222,128,0.06); transform: translateY(-3px);
}


/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1024px) {
  .story-wrap { gap: 48px; padding: 80px 32px; }
  .hs-grid-cards { grid-template-columns: repeat(2, 1fr); }
  .health-section { padding: 80px 32px; }
  .journey-section { padding: 80px 32px; }
  .diff-section { padding: 80px 32px; }
}

@media (max-width: 768px) {
  .about-hook { min-height: auto; padding: 80px 20px 70px; }
  .ha { display: none; }

  .story-wrap {
    grid-template-columns: 1fr;
    padding: 56px 20px 48px; gap: 40px;
  }
  .story-left  { position: static; }
  .story-right { position: static; }
  .story-panel { opacity: 1 !important; transform: none !important; }

  /* Mobile photo deck — flat single card, dots switch */
  .photo-deck { height: 280px; }
  .pd-card {
    transition: opacity 0.5s ease, transform 0.5s ease !important;
  }
  .pd-mid, .pd-back {
    transform: none !important;
    filter: brightness(1) saturate(1) !important;
    opacity: 0 !important;
  }
  .pd-front {
    opacity: 1 !important;
    transform: none !important;
    filter: brightness(1) !important;
  }
  .pd-dots { bottom: -32px; }

  .health-section { padding: 72px 20px; }
  .hs-grid-cards { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .hc { padding: 22px 16px; }

  .journey-section { padding: 72px 20px; }
  .jt-svg { display: none; }
  .journey-steps {
    flex-direction: column; align-items: center;
    gap: 36px; padding: 0;
  }
  .jstep { max-width: 240px; width: 100%; }

  .diff-section { padding: 72px 20px; }
  .diff-board { flex-direction: column; }
  .diff-col { padding: 28px 20px; }
  .diff-mid { padding: 14px 20px; min-width: auto; }

  .about-cta { padding: 80px 20px; }
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-btn-main, .cta-btn-ghost {
    width: 100%; max-width: 280px; justify-content: center;
  }
}

@media (max-width: 480px) {
  .hs-grid-cards { grid-template-columns: 1fr; }
}



/* ════════════════════════════════════════
   EVENT HIGHLIGHTS — MANTRAAQ
   Concept: Cinematic editorial memoir
   — warm off-white, ink black, accent green
════════════════════════════════════════ */

.ev {
  position: relative;
  background: #f7f4ef;  /* warm off-white — completely different from every other section */
  padding: 96px 40px 0;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

/* Grain texture overlay */
.ev-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ev-bg-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* ── CONTAINER ── */
.ev-wrap {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}

/* ── REVEAL ── */
[data-ev-rev] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.16,1,0.3,1),
    transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
[data-ev-rev].ev-vis {
  opacity: 1;
  transform: none;
}


/* ══════════════════════════════
   MASTHEAD
══════════════════════════════ */
.ev-masthead {
  margin-bottom: 60px;
  max-width: 700px;
}

.ev-chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.ev-chapter-line {
  display: block;
  width: 40px; height: 1.5px;
  background: #10b981;
  border-radius: 2px;
  flex-shrink: 0;
}
.ev-chapter-text {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #10b981;
}

.ev-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  font-weight: 900;
  color: #0d1117;
  line-height: 1.1;
  margin: 0;
}
.ev-headline-em {
  font-style: italic;
  color: #0d1117;
  /* Subtle underline accent */
  position: relative;
  display: inline-block;
}
.ev-headline-em::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #34d399, transparent);
  border-radius: 2px;
}


/* ══════════════════════════════
   BODY — ASYMMETRIC LAYOUT
══════════════════════════════ */
.ev-body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  margin-bottom: 0;
  align-items: start;
}

/* ── PHOTOS ── */
.ev-photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
}
.ev-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.ev-photo:hover img { transform: scale(1.04); }

.ev-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(0,0,0,0.55) 100%
  );
  transition: background 0.4s ease;
}
.ev-photo:hover .ev-photo-overlay {
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(0,0,0,0.65) 100%
  );
}

/* Big photo */
.ev-photo-big {
  aspect-ratio: 4/5;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.18),
    0 0 0 1px rgba(0,0,0,0.05);
}

/* Small photo */
.ev-photo-sm {
  aspect-ratio: 16/10;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.14),
    0 0 0 1px rgba(0,0,0,0.04);
}

/* Photo tag pill */
.ev-photo-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  z-index: 3;
}
.ev-photo-tag-tl { top: 18px; left: 18px; }
.ev-photo-tag-br { bottom: 18px; right: 18px; }

/* Floating stat card on big photo */
.ev-float-stat {
  position: absolute;
  bottom: 28px; left: 28px;
  z-index: 4;
  background: rgba(7,13,10,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 16px;
  padding: 18px 24px;
  min-width: 130px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.ev-float-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: #4ade80;
  line-height: 1;
  margin-bottom: 4px;
}
.ev-float-label {
  display: block;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* ── RIGHT COLUMN ── */
.ev-col-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── BLOCKQUOTE ── */
.ev-quote {
  background: #0d1117;
  border-radius: 20px;
  padding: 36px 32px;
  margin: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}
/* Thin green left border */
.ev-quote::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: linear-gradient(to bottom, #10b981, #34d399);
  border-radius: 3px 0 0 3px;
}

.ev-quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  line-height: 0.8;
  color: rgba(16,185,129,0.2);
  margin-bottom: 8px;
  display: block;
  font-weight: 900;
}
.ev-quote p {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.9;
  margin: 0 0 16px;
  font-style: italic;
}
.ev-quote footer {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #10b981;
}

/* ── MINI STATS ── */
.ev-mini-stats {
  background: #0d1117;
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.ev-ms {
  flex: 1;
  text-align: center;
}
.ev-ms-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 900;
  color: #4ade80;
  line-height: 1;
  margin-bottom: 5px;
}
.ev-ms-label {
  display: block;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  line-height: 1.4;
}
.ev-ms-sep {
  width: 1px; height: 36px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
}


/* ══════════════════════════════
   FOOTER AREA
══════════════════════════════ */
.ev-footer-area {
  margin-top: 64px;
}

/* ── MARQUEE TAPE ── */
.ev-tape {
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 14px 0;
  margin-bottom: 64px;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}
.ev-tape-track {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  animation: evTapeScroll 22s linear infinite;
  width: max-content;
}
.ev-tape-track span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
}
.ev-tape-dot {
  color: #10b981 !important;
  font-size: 1rem !important;
}
@keyframes evTapeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── CLOSING ── */
.ev-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 80px;
}
.ev-close-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  font-weight: 700;
  color: #0d1117;
  line-height: 1.35;
  margin: 0;
  max-width: 560px;
}
.ev-close-text em {
  font-style: italic;
  color: #10b981;
}

/* CTA button — ink style, not green pill */
.ev-cta {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  flex-shrink: 0;
  color: #0d1117;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
}
/* Underline that grows on hover */
.ev-cta::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: #10b981;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.ev-cta:hover::after { transform: scaleX(1); }

.ev-cta span { margin-right: 10px; }

.ev-cta-arrow {
  width: 36px; height: 36px;
  background: #0d1117;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.ev-cta:hover .ev-cta-arrow {
  background: #10b981;
  transform: translateX(5px);
}
.ev-cta-arrow svg { display: block; }


/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1024px) {
  .ev { padding: 80px 32px 0; }
  .ev-headline { font-size: clamp(2rem, 5vw, 3.5rem); }
  .ev-body { gap: 20px; }
}

@media (max-width: 768px) {
  .ev { padding: 64px 20px 0; }
  .ev-masthead { margin-bottom: 40px; }

  .ev-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Swap order: photo first on mobile */
  .ev-col-main { order: 1; }
  .ev-col-side { order: 2; }

  .ev-photo-big { aspect-ratio: 4/3; }

  .ev-float-stat {
    bottom: 16px; left: 16px;
    padding: 14px 18px;
  }
  .ev-float-num { font-size: 1.75rem; }

  .ev-quote { padding: 28px 24px; }
  .ev-quote-mark { font-size: 4rem; }

  .ev-mini-stats { padding: 18px 14px; }
  .ev-ms-num { font-size: 1.3rem; }

  .ev-footer-area { margin-top: 48px; }

  .ev-close {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 64px;
  }
  .ev-close-text { font-size: clamp(1.2rem, 4vw, 1.6rem); }
}

@media (max-width: 480px) {
  .ev-headline { font-size: clamp(1.9rem, 8vw, 2.5rem); }

  .ev-photo-big  { border-radius: 16px; }
  .ev-photo-sm   { border-radius: 16px; }
  .ev-quote      { border-radius: 16px; }
  .ev-mini-stats {
    flex-wrap: wrap;
    gap: 0;
    border-radius: 14px;
  }
  .ev-ms {
    flex: 0 0 50%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .ev-ms:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.05);
  }
  .ev-ms:nth-last-child(-n+2) { border-bottom: none; }
  .ev-ms-sep { display: none; }
}

/* ════════════════════════════════════════
   CERTIFICATIONS — MANTRAAQ
   Compact · Uniform · Elegant · No badges
════════════════════════════════════════ */

.cv {
  position: relative;
  background: #070d0a;
  padding: 80px 40px 72px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

/* ── SUBTLE BG ── */
.cv-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.cv-bg-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16,185,129,0.12) 30%,
    rgba(16,185,129,0.12) 70%,
    transparent 100%
  );
}
.cv-bg-line-1 { top: 0; }
.cv-bg-line-2 { bottom: 0; }

.cv-bg-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 300px;
  background: radial-gradient(
    ellipse, rgba(16,185,129,0.05) 0%, transparent 70%
  );
  filter: blur(40px);
}

/* ── CONTAINER ── */
.cv-wrap {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
}

/* ── REVEAL ── */
[data-cv-rev] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.75s cubic-bezier(0.16,1,0.3,1),
    transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
[data-cv-rev].cv-vis {
  opacity: 1;
  transform: none;
}

/* ── HEADER ── */
.cv-head {
  text-align: center;
  margin-bottom: 52px;
}

.cv-kicker {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #10b981;
  margin-bottom: 14px;
  position: relative;
}
/* Side lines on kicker */
.cv-kicker::before,
.cv-kicker::after {
  content: '';
  position: absolute;
  top: 50%; width: 32px; height: 1px;
  background: rgba(16,185,129,0.35);
  transform: translateY(-50%);
}
.cv-kicker::before { right: calc(100% + 10px); }
.cv-kicker::after  { left:  calc(100% + 10px); }

.cv-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 900;
  color: #f1f5f9;
  line-height: 1.18;
  margin: 0;
}
.cv-title-em {
  font-style: italic;
  background: linear-gradient(135deg, #10b981, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── CERT ROW ── */
.cv-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 36px;
  backdrop-filter: blur(16px);
  /* Top glow line */
  box-shadow:
    inset 0 1px 0 rgba(16,185,129,0.12),
    0 24px 60px rgba(0,0,0,0.3);
}

/* ── DIVIDER ── */
.cv-divider {
  width: 1px;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
  align-self: stretch;
}

/* ── TILE ── */
.cv-tile {
  flex: 1;
  position: relative;
  padding: 36px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: default;
  transition: background 0.4s ease;
  overflow: hidden;
}

/* Hover fill */
.cv-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(16,185,129,0.04);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.cv-tile:hover::before { opacity: 1; }

/* Hover: left accent line */
.cv-tile::after {
  content: '';
  position: absolute;
  top: 20%; bottom: 20%;
  left: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    #10b981,
    transparent
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 2px;
}
.cv-tile:hover::after { opacity: 1; }

/* ── LOGO BOX ── */
.cv-tile-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  margin-bottom: 20px;
}

.cv-logo-box {
  width: 108px;
  height: 56px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  flex-shrink: 0;
}
.cv-tile:hover .cv-logo-box {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 20px rgba(0,0,0,0.28),
              0 0 0 1px rgba(16,185,129,0.15);
}
.cv-logo-box img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* ── TEXT ── */
.cv-tile-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cv-cert-name {
  font-size: 1rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -0.01em;
  display: block;
  transition: color 0.3s ease;
}
.cv-tile:hover .cv-cert-name { color: #ffffff; }

.cv-cert-desc {
  font-size: 0.73rem;
  color: #475569;
  line-height: 1.5;
  display: block;
  transition: color 0.3s ease;
}
.cv-tile:hover .cv-cert-desc { color: #64748b; }

/* ── ANIMATED BOTTOM BAR ── */
.cv-tile-bar {
  height: 2px;
  background: rgba(255,255,255,0.04);
  border-radius: 0 0 2px 2px;
  overflow: hidden;
  position: absolute;
  bottom: 0; left: 0; right: 0;
}
.cv-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #059669, #10b981, #34d399);
  border-radius: 2px;
  transition: width 1.4s cubic-bezier(0.16,1,0.3,1);
}

/* ── FOOTER LINE ── */
.cv-footer {
  text-align: center;
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}
.cv-footer strong {
  color: #94a3b8;
  font-weight: 600;
}


/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 960px) {
  .cv { padding: 64px 32px 56px; }

  .cv-tile { padding: 28px 20px 24px; }

  .cv-logo-box {
    width: 90px; height: 48px;
    padding: 6px 10px;
  }
  .cv-cert-name { font-size: 0.88rem; }
  .cv-cert-desc { font-size: 0.67rem; }
}

@media (max-width: 768px) {
  .cv { padding: 56px 20px 48px; }
  .cv-head { margin-bottom: 36px; }

  /* Stack to 2×2 on mobile */
  .cv-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 16px;
  }

  /* Hide horizontal dividers, show grid borders instead */
  .cv-divider { display: none; }

  .cv-tile {
    padding: 24px 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  /* Remove bottom border from last two */
  .cv-tile:nth-child(7),
  .cv-tile:nth-child(9) {
    border-bottom: none;
  }

  /* Right border between col 1 and col 2 */
  .cv-tile:nth-child(1),
  .cv-tile:nth-child(7) {
    border-right: 1px solid rgba(255,255,255,0.05);
  }

  .cv-logo-box {
    width: 80px; height: 42px;
    padding: 5px 8px;
    border-radius: 8px;
  }
  .cv-tile-inner { gap: 12px; margin-bottom: 14px; }
  .cv-cert-name  { font-size: 0.82rem; }
  .cv-cert-desc  { font-size: 0.65rem; }
}

@media (max-width: 480px) {
  /* Single column on very small screens */
  .cv-row { grid-template-columns: 1fr; }

  .cv-tile:nth-child(1),
  .cv-tile:nth-child(7) { border-right: none; }

  .cv-tile:nth-child(7) { border-bottom: 1px solid rgba(255,255,255,0.05); }
  .cv-tile:nth-child(9) { border-bottom: none; }
}

/* ════════════════════════════════════════
   IMPACT + TRACTION — MANTRAAQ
   Design: Deep forest dark · Editorial
   No white cards. No blue/orange/purple.
   Uniform green accent system.
════════════════════════════════════════ */

.im {
  position: relative;
  background: #030d07;
  padding: 100px 40px 96px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

/* ── BG ── */
.im-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.im-bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(120px);
  animation: imOrbDrift ease-in-out infinite alternate;
}
.im-bg-orb-1 {
  width: 800px; height: 600px;
  background: radial-gradient(ellipse,
    rgba(16,185,129,0.08) 0%, transparent 70%);
  top: -150px; left: -200px;
  animation-duration: 20s;
}
.im-bg-orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(ellipse,
    rgba(52,211,153,0.05) 0%, transparent 70%);
  bottom: -80px; right: -80px;
  animation-duration: 15s; animation-delay: -8s;
}
@keyframes imOrbDrift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(16px,12px) scale(1.05); }
}
.im-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(16,185,129,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%,
    black 20%, transparent 100%);
}
.im-bg-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: 0.4;
}

/* ── WRAP ── */
.im-wrap {
  position: relative; z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}

/* ── REVEAL ── */
[data-im-rev] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s cubic-bezier(0.16,1,0.3,1),
    transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
[data-im-rev].im-vis {
  opacity: 1; transform: none;
}

/* ══════════════════════════════
   HEADER
══════════════════════════════ */
.im-header {
  text-align: center;
  margin-bottom: 72px;
}
.im-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #10b981;
  margin-bottom: 20px;
}
.im-kicker-line {
  display: block; width: 28px; height: 1px;
  background: rgba(16,185,129,0.4);
}
.im-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 900;
  color: #f0fdf4;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.im-title-em {
  font-style: italic;
  color: #4ade80;
}
.im-subtitle {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.8;
  max-width: 440px;
  margin: 0 auto;
}

/* ══════════════════════════════
   COUNTER CARDS
══════════════════════════════ */
.im-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 72px;
}

/* ── BASE CARD ── */
.im-card {
  position: relative;
  border-radius: 22px;
  padding: 36px 28px 28px;
  overflow: hidden;
  cursor: default;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.055);
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Hover glow radial */
.im-card-glow {
  position: absolute; inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(16,185,129,0.07) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: 22px;
}
.im-card:hover .im-card-glow { opacity: 1; }
.im-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(16,185,129,0.18);
  transform: translateY(-8px);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.3),
    0 0 0 1px rgba(16,185,129,0.08);
}

/* Top accent line per card */
.im-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1.5px;
  border-radius: 2px;
  transition: left 0.4s ease, right 0.4s ease;
}
.im-card:hover::before { left: 10%; right: 10%; }

.im-card-1::before { background: linear-gradient(90deg, transparent, #10b981, transparent); }
.im-card-2::before { background: linear-gradient(90deg, transparent, #34d399, transparent); }
.im-card-3::before { background: linear-gradient(90deg, transparent, #6ee7b7, transparent); }
.im-card-4::before { background: linear-gradient(90deg, transparent, #a7f3d0, transparent); }

/* Card top row */
.im-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.im-card-icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: saturate(0.8);
}
.im-card-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 3.5vw, 3.2rem);
  font-weight: 900;
  color: #4ade80;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
}

.im-card-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.3;
  margin-top: 4px;
}
.im-card-note {
  font-size: 0.72rem;
  color: #374151;
  line-height: 1.5;
  margin: 0 0 16px;
  flex: 1;
}

/* Progress bar */
.im-card-bar {
  height: 2px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
  margin-top: auto;
}
.im-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #059669, #10b981, #34d399);
  border-radius: 2px;
  transition: width 1.6s cubic-bezier(0.16,1,0.3,1);
}

/* ══════════════════════════════
   SECTION DIVIDER
══════════════════════════════ */
.im-section-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
}
.im-sd-line {
  flex: 1; height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.06),
    transparent
  );
}
.im-sd-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #10b981;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ══════════════════════════════
   TRACTION STRIP
══════════════════════════════ */
.im-traction {
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(16,185,129,0.08);
}

.im-tr {
  flex: 1;
  display: flex;
  align-items: stretch;
  position: relative;
}
.im-tr-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 20px;
  gap: 10px;
  transition: background 0.35s ease;
  cursor: default;
}
.im-tr-inner:hover {
  background: rgba(16,185,129,0.04);
}
.im-tr-sep {
  width: 1px;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
  align-self: stretch;
}

.im-tr-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 900;
  color: #4ade80;
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}
.im-tr-label {
  font-size: 0.72rem;
  color: #4b5563;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  display: block;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1024px) {
  .im { padding: 80px 32px 80px; }
  .im-counters { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .im-card-num { font-size: clamp(2rem, 4vw, 2.8rem); }
}

@media (max-width: 768px) {
  .im { padding: 64px 20px 64px; }
  .im-header { margin-bottom: 48px; }
  .im-counters {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 52px;
  }
  .im-card { padding: 26px 20px 22px; border-radius: 18px; }
  .im-card-num { font-size: 2rem; }
  .im-card-icon { font-size: 1.2rem; }

  /* Traction: 2x2 grid on mobile */
  .im-traction {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 16px;
  }
  .im-tr { border-bottom: 1px solid rgba(255,255,255,0.05); }
  .im-tr:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.05); }
  .im-tr:nth-child(3),
  .im-tr:nth-child(4) { border-bottom: none; }
  .im-tr-sep { display: none; }
  .im-tr-inner { padding: 28px 16px; }
}

@media (max-width: 480px) {
  .im-counters { grid-template-columns: 1fr 1fr; gap: 10px; }
  .im-card { padding: 22px 16px 18px; border-radius: 16px; }
  .im-card-num { font-size: 1.75rem; }
  .im-section-divider { gap: 12px; }
  .im-sd-label { font-size: 0.58rem; }
}

/* ════════════════════════════════════════
   NAVBAR — MANTRAAQ
   Transparent → frosted dark on scroll
   Consistent with site green system
════════════════════════════════════════ */

/* ── BASE ── */
.nav-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  font-family: 'Inter', sans-serif;

  /* Start: fully transparent */
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

  transition:
    background   0.45s cubic-bezier(0.16,1,0.3,1),
    border-color 0.45s cubic-bezier(0.16,1,0.3,1),
    backdrop-filter 0.45s ease,
    box-shadow   0.45s ease;
}

/* Scrolled state — added via JS */
.nav-bar.nav-scrolled {
  background: rgba(2, 11, 5, 0.88);
  border-bottom-color: rgba(16,185,129,0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 32px rgba(0,0,0,0.35);
}

/* ── INNER ── */
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ══════════════════════════════
   LOGO
══════════════════════════════ */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}
.nav-logo:hover { opacity: 0.85; }

.nav-logo-img-wrap {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* BLACK logo → invert to white for dark bg */
  filter: brightness(0) invert(1);
  transition: filter 0.4s ease;
}

/* On transparent nav (top of page) → 
   keep white but slightly more visible */
.nav-bar:not(.nav-scrolled) .nav-logo-img {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,0.3));
}

.nav-logo-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #f0fdf4;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ══════════════════════════════
   DESKTOP NAV LINKS
══════════════════════════════ */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.nav-link {
  position: relative;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  letter-spacing: 0.01em;
  transition: color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%; right: 50%;
  height: 1.5px;
  background: #10b981;
  border-radius: 2px;
  transition: left 0.3s ease, right 0.3s ease;
}
.nav-link:hover {
  color: #f0fdf4;
  background: rgba(255,255,255,0.05);
}
.nav-link:hover::after,
.nav-link.nav-active::after {
  left: 14px; right: 14px;
}
.nav-link.nav-active { color: #4ade80; }

/* ══════════════════════════════
   ACTIONS
══════════════════════════════ */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Account */
.nav-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.nav-account {
  color: rgba(255,255,255,0.55);
}
.nav-account:hover {
  color: #4ade80;
  background: rgba(16,185,129,0.08);
}
.nav-action-label {
  display: none;
}
@media (min-width: 1024px) {
  .nav-action-label { display: inline; }
}

/* Cart */
.nav-cart {
  color: #030a06;
  background: #10b981;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(16,185,129,0.3);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-cart:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(16,185,129,0.4);
  color: #fff;
}

/* ══════════════════════════════
   HAMBURGER
══════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.nav-hamburger:hover {
  background: rgba(16,185,129,0.1);
  border-color: rgba(16,185,129,0.2);
}
.nav-ham-bar {
  display: block;
  width: 18px; height: 1.5px;
  background: rgba(255,255,255,0.75);
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  transform-origin: center;
}

/* Hamburger → X when open */
.nav-hamburger.nav-open .nav-ham-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger.nav-open .nav-ham-bar:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.nav-hamburger.nav-open .nav-ham-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ══════════════════════════════
   MOBILE DRAWER
══════════════════════════════ */
.nav-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1);
}
.nav-drawer.nav-drawer-open {
  max-height: 480px;
}

.nav-drawer-inner {
  margin: 0 16px 16px;
  padding: 12px 8px;
  background: rgba(2,11,5,0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(16,185,129,0.1);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-drawer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.25s ease;
}
.nav-drawer-link:hover,
.nav-drawer-link.nav-active {
  color: #f0fdf4;
  background: rgba(255,255,255,0.05);
}
.nav-drawer-account:hover { color: #4ade80; }

.nav-drawer-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 6px 8px;
}

.nav-drawer-cart {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #030a06;
  background: #10b981;
  text-decoration: none;
  border-radius: 10px;
  margin-top: 4px;
  transition: background 0.25s ease;
}
.nav-drawer-cart:hover { background: #059669; color: #fff; }

/* ══════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════ */
@media (max-width: 768px) {
  .nav-links     { display: none; }   /* hidden on mobile */
  .nav-hamburger { display: flex; }
  .nav-inner { padding: 0 20px; height: 62px; }
  .nav-account   { display: none; }   /* account hidden on mobile, shown in drawer */
}

@media (max-width: 480px) {
  .nav-inner { padding: 0 16px; }
  .nav-logo-text { font-size: 1.1rem; }
  .nav-logo-img-wrap { width: 34px; height: 34px; }
}

/* ════════════════════════════════════════
   NEWSLETTER — MANTRAAQ
   Concept: Dark luxury · Typographic · Clean
   No blue. No orange. No icon grid.
   No white card box. Completely new.
════════════════════════════════════════ */

.nl {
  position: relative;
  background: #020b05;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  padding: 0 0 0;
  /* No top/bottom padding — tape and wrap handle spacing */
}

/* ── AMBIENT BG ── */
.nl-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}

.nl-bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px);
  animation: nlOrbDrift ease-in-out infinite alternate;
}
.nl-bg-orb-1 {
  width: 700px; height: 500px;
  background: radial-gradient(ellipse,
    rgba(16,185,129,0.1) 0%, transparent 70%);
  top: -100px; left: -150px;
  animation-duration: 18s;
}
.nl-bg-orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(ellipse,
    rgba(74,222,128,0.05) 0%, transparent 70%);
  bottom: 40px; right: -100px;
  animation-duration: 14s; animation-delay: -7s;
}
@keyframes nlOrbDrift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(20px,14px) scale(1.06); }
}

.nl-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(16,185,129,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%,
    black 30%, transparent 100%);
}

.nl-bg-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
}


/* ── WRAP ── */
.nl-wrap {
  position: relative; z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 100px 40px 72px;
  text-align: center;
}

/* ── REVEAL ── */
[data-nl-rev] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s cubic-bezier(0.16,1,0.3,1),
    transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
[data-nl-rev].nl-vis {
  opacity: 1;
  transform: none;
}


/* ── KICKER ── */
.nl-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #10b981;
  margin-bottom: 24px;
}
.nl-kicker-line {
  display: block;
  width: 36px; height: 1px;
  background: rgba(16,185,129,0.4);
}


/* ── TITLE ── */
.nl-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 900;
  color: #f0fdf4;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}
.nl-title-em {
  font-style: italic;
  /* Outlined text — very rare, very elegant */
  -webkit-text-stroke: 2px #10b981;
  color: transparent;
  display: block;
}


/* ── SUBTITLE ── */
.nl-sub {
  font-size: 0.92rem;
  color: #4b5563;
  line-height: 1.9;
  margin: 0 0 48px;
  letter-spacing: 0.01em;
}
.nl-br { display: none; }
@media (min-width: 480px) { .nl-br { display: block; } }


/* ── FORM ── */
.nl-form { width: 100%; max-width: 520px; margin: 0 auto 24px; }

.nl-field-wrap {
  display: flex;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  padding: 6px 6px 6px 20px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  align-items: center;
}
.nl-field-wrap:focus-within {
  border-color: rgba(16,185,129,0.4);
  box-shadow:
    0 0 0 4px rgba(16,185,129,0.06),
    0 16px 40px rgba(0,0,0,0.3);
}

/* Input group */
.nl-input-group {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nl-input-icon {
  color: #374151;
  flex-shrink: 0;
  transition: color 0.3s ease;
}
.nl-field-wrap:focus-within .nl-input-icon { color: #10b981; }

.nl-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e2e8f0;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  padding: 10px 0;
  width: 100%;
  min-width: 0;
}
.nl-input::placeholder { color: #374151; }
.nl-input:-webkit-autofill,
.nl-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #020b05 inset;
  -webkit-text-fill-color: #e2e8f0;
  transition: background-color 5000s ease-in-out;
}

/* Unused but keep for possible expand */
.nl-input-border { display: none; }

/* Submit button */
.nl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 26px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 8px 24px rgba(16,185,129,0.35);
}
.nl-btn:hover {
  transform: translateX(2px);
  box-shadow: 0 12px 32px rgba(16,185,129,0.5);
}
.nl-btn:active { transform: scale(0.97); }

.nl-btn-text { position: relative; z-index: 1; }
.nl-btn-icon {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  transition: transform 0.3s ease;
}
.nl-btn:hover .nl-btn-icon { transform: translateX(3px); }

/* Ripple on click */
.nl-btn-ripple {
  position: absolute;
  width: 0; height: 0;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.nl-btn.nl-rippling .nl-btn-ripple {
  animation: nlRipple 0.6s ease-out forwards;
}
@keyframes nlRipple {
  to { width: 200px; height: 200px; opacity: 0; }
}

/* Loading state */
.nl-btn.nl-loading {
  pointer-events: none;
  opacity: 0.7;
}
.nl-btn.nl-loading .nl-btn-text::after {
  content: '...';
  animation: nlDots 1s steps(4) infinite;
}
@keyframes nlDots {
  0%  { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}


/* ── STATUS ── */
.nl-status {
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  text-align: center;
  border-radius: 100px;
  padding: 0;
  opacity: 0;
  transform: translateY(-6px);
}
.nl-status.nl-status-show {
  opacity: 1;
  transform: none;
  padding: 10px 20px;
}
.nl-status.nl-status-ok {
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.2);
  color: #4ade80;
}
.nl-status.nl-status-err {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.18);
  color: #f87171;
}


/* ── TRUST MICRO-COPY ── */
.nl-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.nl-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: #374151;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.nl-trust-item svg { color: #10b981; flex-shrink: 0; }
.nl-trust-dot {
  display: block;
  width: 3px; height: 3px;
  background: #1f2937;
  border-radius: 50%;
}


/* ── SOCIAL PROOF ── */
.nl-social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.nl-avatars {
  display: flex;
  align-items: center;
}
.nl-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #064e3b, #10b981);
  border: 2px solid #020b05;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #a7f3d0;
  margin-left: -8px;
  flex-shrink: 0;
}
.nl-av:first-child { margin-left: 0; }
.nl-av-2 { background: linear-gradient(135deg, #065f46, #34d399); }
.nl-av-3 { background: linear-gradient(135deg, #047857, #6ee7b7); }
.nl-av-4 { background: linear-gradient(135deg, #059669, #a7f3d0); }
.nl-av-5 {
  background: rgba(255,255,255,0.06);
  color: #4b5563;
  border-color: rgba(255,255,255,0.06);
  font-size: 0.7rem;
}
.nl-social-proof p {
  font-size: 0.78rem;
  color: #4b5563;
  margin: 0;
  line-height: 1.4;
}
.nl-social-proof strong {
  color: #94a3b8;
  font-weight: 700;
}


/* ── MARQUEE TAPE ── */
.nl-tape {
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.04);
  padding: 16px 0;
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent 0%, black 8%, black 92%, transparent 100%
  );
}
.nl-tape-track {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  width: max-content;
  animation: nlTape 20s linear infinite;
}
.nl-tape-track span {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1f2937;
}
.nl-td { color: #10b981 !important; font-size: 0.9rem !important; }
@keyframes nlTape {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.nl-tape:hover .nl-tape-track {
  animation-play-state: paused;
}


/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 768px) {
  .nl-wrap { padding: 80px 24px 60px; }
  .nl-title { font-size: clamp(2.4rem, 10vw, 4rem); }
  .nl-title-em { -webkit-text-stroke-width: 1.5px; }
  .nl-sub { font-size: 0.86rem; }
}

@media (max-width: 560px) {
  .nl-wrap { padding: 72px 20px 56px; }

  /* Stack input + button vertically */
  .nl-field-wrap {
    flex-direction: column;
    border-radius: 18px;
    padding: 16px 20px;
    gap: 14px;
    align-items: stretch;
  }
  .nl-input-group { width: 100%; }
  .nl-input { padding: 6px 0; font-size: 0.95rem; }
  .nl-btn {
    width: 100%;
    justify-content: center;
    border-radius: 12px;
    padding: 14px 20px;
  }

  .nl-trust { gap: 8px; }
  .nl-trust-dot { display: none; }
}

@media (max-width: 380px) {
  .nl-title { font-size: clamp(2rem, 12vw, 3rem); }
  .nl-title-em { -webkit-text-stroke-width: 1px; }
}


/* ════════════════════════════════════════
   CONTACT — MANTRAAQ
   Design: Split panel · editorial dark
   Left: deep forest · Right: lighter card
════════════════════════════════════════ */

.ct {
  position: relative;
  background: #030a06;
  overflow: clip;
  font-family: 'Inter', sans-serif;
}

/* ── AMBIENT BG ── */
.ct-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.ct-bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(120px);
  animation: ctOrbDrift ease-in-out infinite alternate;
}
.ct-bg-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle,
    rgba(16,185,129,0.08) 0%, transparent 70%);
  top: -100px; left: -100px;
  animation-duration: 18s;
}
.ct-bg-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle,
    rgba(74,222,128,0.04) 0%, transparent 70%);
  bottom: -80px; right: 10%;
  animation-duration: 14s; animation-delay: -6s;
}
@keyframes ctOrbDrift {
  0%   { transform: translate(0,0); }
  100% { transform: translate(18px, 14px); }
}
.ct-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(16,185,129,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,0.02) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 80% 80% at 30% 50%,
    black 20%, transparent 100%);
}

/* ── LAYOUT WRAP ── */
.ct-wrap {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── REVEAL ── */
[data-ct-rev] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s cubic-bezier(0.16,1,0.3,1),
    transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
[data-ct-rev].ct-vis {
  opacity: 1; transform: none;
}


/* ══════════════════════════════
   LEFT PANEL
══════════════════════════════ */
.ct-left {
  padding: 100px 64px 100px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  border-right: 1px solid rgba(255,255,255,0.04);
}

/* Kicker */
.ct-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #10b981;
  margin-bottom: 24px;
}
.ct-kicker-line {
  display: block; width: 32px; height: 1.5px;
  background: rgba(16,185,129,0.5);
  flex-shrink: 0;
}

/* Title */
.ct-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.8rem, 4.5vw, 5rem);
  font-weight: 900;
  color: #f0fdf4;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.ct-title-em {
  font-style: italic;
  display: block;
  color: #4ade80;
}

.ct-left-sub {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.8;
  margin-bottom: 48px;
  max-width: 340px;
}

/* ── INFO LIST ── */
.ct-info-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 40px;
}

.ct-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.ct-info-item--static { cursor: default; }

.ct-info-item::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(16,185,129,0.04);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 14px;
}
.ct-info-item:hover::before { opacity: 1; }
.ct-info-item:hover {
  border-color: rgba(16,185,129,0.12);
}
.ct-info-item--static:hover {
  border-color: transparent;
}
.ct-info-item--static::before { display: none; }

.ct-info-icon {
  width: 40px; height: 40px;
  background: rgba(16,185,129,0.07);
  border: 1px solid rgba(16,185,129,0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #10b981;
  transition: all 0.3s ease;
}
.ct-info-item:hover .ct-info-icon {
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.2);
}

.ct-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.ct-info-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #374151;
}
.ct-info-val {
  font-size: 0.88rem;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.5;
  transition: color 0.3s ease;
}
.ct-info-item:hover .ct-info-val { color: #cbd5e1; }

.ct-info-arrow {
  color: #1f2937;
  font-size: 1rem;
  align-self: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  transform: rotate(0deg);
}
.ct-info-item:hover .ct-info-arrow {
  color: #10b981;
  transform: rotate(45deg) translate(1px, -1px);
}

/* ── RESPONSE PROMISE ── */
.ct-promise {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: #374151;
}
.ct-promise-dot {
  width: 8px; height: 8px;
  background: #10b981;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
  animation: ctDotPulse 2s ease-in-out infinite;
}
@keyframes ctDotPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
  50%     { box-shadow: 0 0 0 6px rgba(16,185,129,0.05); }
}
.ct-promise strong { color: #4b5563; }


/* ══════════════════════════════
   RIGHT PANEL
══════════════════════════════ */
.ct-right {
  padding: 100px 60px 100px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ct-form-head {
  margin-bottom: 40px;
}
.ct-form-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 900;
  color: #e2e8f0;
  margin: 0 0 8px;
}
.ct-form-sub {
  font-size: 0.82rem;
  color: #374151;
  margin: 0;
  line-height: 1.6;
}

/* ── FORM ── */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── FIELD ── */
.ct-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #374151;
  transition: color 0.3s ease;
}
.ct-field:focus-within .ct-label { color: #10b981; }

.ct-input {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 14px 16px;
  outline: none;
  transition: all 0.3s ease;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.ct-input::placeholder { color: #1f2937; }
.ct-input:focus {
  background: rgba(16,185,129,0.04);
  border-color: rgba(16,185,129,0.3);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.06);
}
.ct-input:-webkit-autofill,
.ct-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #030a06 inset;
  -webkit-text-fill-color: #e2e8f0;
}

/* Animated bottom line (replaces border on focus) */
.ct-field-line {
  position: absolute;
  bottom: 0; left: 0;
  height: 1.5px; width: 0;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.ct-field:focus-within .ct-field-line { width: 100%; }

/* Select */
.ct-select-wrap {
  position: relative;
}
.ct-select {
  cursor: pointer;
  padding-right: 40px;
  color: #e2e8f0;
}
.ct-select option {
  background: #0d1117;
  color: #e2e8f0;
}
.ct-select-arrow {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: #374151;
  pointer-events: none;
  transition: color 0.3s ease;
}
.ct-field:focus-within .ct-select-arrow { color: #10b981; }

/* Textarea */
.ct-textarea {
  resize: none;
  min-height: 120px;
  line-height: 1.7;
}
.ct-field-msg { position: relative; }
.ct-char-count {
  position: absolute;
  bottom: -20px; right: 0;
  font-size: 0.63rem;
  color: #1f2937;
  font-weight: 600;
  pointer-events: none;
}

/* ── STATUS ── */
.ct-status {
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 10px;
  padding: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}
.ct-status.ct-status-show {
  opacity: 1;
  max-height: 80px;
  padding: 12px 18px;
}
.ct-status.ct-status-ok {
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.18);
  color: #4ade80;
}
.ct-status.ct-status-err {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.15);
  color: #f87171;
}

/* ── SUBMIT BUTTON ── */
.ct-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #10b981;
  color: #030a06;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 16px 32px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  width: 100%;
  box-shadow: 0 8px 28px rgba(16,185,129,0.25);
}
.ct-submit:hover {
  background: #059669;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(16,185,129,0.4);
}
.ct-submit:active { transform: scale(0.98); }
.ct-submit:disabled {
  opacity: 0.6;
  pointer-events: none;
}

.ct-submit-text { position: relative; z-index: 1; }
.ct-submit-icon {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  transition: transform 0.3s ease;
}
.ct-submit:hover .ct-submit-icon { transform: translate(2px, -2px); }

.ct-submit-ripple {
  position: absolute;
  width: 0; height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.ct-submit.ct-rippling .ct-submit-ripple {
  animation: ctRipple 0.6s ease-out forwards;
}
@keyframes ctRipple {
  to { width: 400px; height: 400px; opacity: 0; }
}


/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1100px) {
  .ct-left  { padding: 80px 40px 80px 40px; }
  .ct-right { padding: 80px 40px 80px 40px; }
}

@media (max-width: 860px) {
  .ct-wrap {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .ct-left {
    padding: 72px 32px 48px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .ct-right { padding: 48px 32px 72px; }
  .ct-title { font-size: clamp(2.4rem, 7vw, 3.5rem); }
}

@media (max-width: 560px) {
  .ct-left  { padding: 60px 20px 40px; }
  .ct-right { padding: 40px 20px 60px; }
  .ct-title { font-size: clamp(2rem, 9vw, 3rem); }
  .ct-info-item { padding: 12px 12px; gap: 12px; }
  .ct-info-icon { width: 36px; height: 36px; border-radius: 8px; }
  .ct-submit { padding: 14px 24px; }
}

/* ── VARIANT SELECTOR ────────────────────────────────────────── */
.variant-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.variant-btn {
  padding: 6px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 20px;
  background: white;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  color: #374151;
  position: relative;
}

.variant-btn:hover:not(:disabled) {
  border-color: #2d7a4f;
  color: #2d7a4f;
}

.variant-btn.active {
  background: #2d7a4f !important;
  border-color: #2d7a4f !important;
  color: white !important;
}

.variant-btn.sold-out {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.variant-sold-out {
  font-size: 0.65rem;
  margin-left: 2px;
}

/* ── OUT OF STOCK BADGE ──────────────────────────────────────── */
.product-badge.out {
  background: #ef4444;
  color: white;
}

/* ── LOW STOCK ───────────────────────────────────────────────── */
.low-stock {
  color: #ef4444;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 4px;
}