/* =================================================================================================
   STARTUP SOCIETY GUWAHATI
   PRIMARY STYLESHEET
   -------------------------------------------------------------------------------------------------
   Purpose:
   This stylesheet is intentionally preserved in its original visual/behavioral form. The goal of
   this version is not redesign or optimization, but professional documentation and long-term
   maintainability.

   Maintenance Rules For Future Editing:
   - Preserve selector names unless an HTML/JS update is made alongside them.
   - Preserve declaration intent and cascade order when adjusting existing UI behavior.
   - Prefer adding new overrides in the relevant section rather than scattering fixes elsewhere.
   - When debugging, check duplicate selectors and later media queries first, since they may be
     intentionally overriding earlier shared styles.

   TABLE OF CONTENTS
   01. Global Design Tokens (`:root`)
   02. Base Reset And Global Element Defaults
   03. Shared Layout Helpers
   04. Shared Typography Patterns
   05. Header And Navigation
       05.01 Sticky header shell
       05.02 Navbar structure
       05.03 Brand / logo block
       05.04 Desktop navigation links
       05.05 Mobile nav toggle base state
   06. Hero Section
       06.01 Hero wrapper and layout
       06.02 Decorative backdrop elements
       06.03 Hero copy
       06.04 Hero action/meta elements
       06.05 Hero visual panel and stat cards
       06.06 Local eyebrow override used in hero/CTA presentation
   07. Shared Button System
   08. Journey Section
   09. Mission / About Section
   10. Gallery Section
       10.01 Desktop/default gallery styles
       10.02 Gallery responsive adjustments
   11. Events Section
   12. Connected Founders Section
       12.01 Desktop/default founders grid
       12.02 , 3 , 4 , 5 Founders responsive adjustments
   13. CTA / Join Section
   14. Footer
       14.01 Main footer shell
       14.02 Footer links and pills
       14.03 Founder contact bar
       14.04 Footer responsive adjustments
   15. Reveal Animation Utility Classes
   16. Keyframe Animations
   17. Global Responsive System
       17.01 1024px and below
       17.02 1150px and below (navbar dropdown)
       17.03 768px and below
       17.04 480px and below
       17.05 400px and below
   ================================================================================================= */

/* =================================================================================================
   01. GLOBAL DESIGN TOKENS (`:root`)
   -------------------------------------------------------------------------------------------------
   Centralized site-wide variables for:
   - Brand colors
   - Surface colors and borders
   - Shared shadow recipes
   - Radius system
   - Layout sizing
   - Motion easing
   - Font families

   Update tokens here for broad, intentional site-wide changes.
   ================================================================================================= */
:root {
  --yellow: #ffd400;
  --yellow-soft: #ffe55c;
  --yellow-deep: #ffbf00;
  --yellow-hot: #ff9f00;
  --orange: #ff6b00;

  --purple: #8b3fe8;
  --purple-deep: #1a0533;
  --purple-dark: #2d0a55;

  --ink: #0f0f10;
  --ink-soft: #1d1d1f;
  --white: #ffffff;
  --cream: #fffdf3;

  --line: rgba(15, 15, 16, 0.08);
  --line-strong: rgba(15, 15, 16, 0.12);
  --line-yellow: rgba(255, 191, 0, 0.22);
  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.9);

  --shadow: 0 20px 60px rgba(15, 15, 16, 0.1);
  --shadow-strong: 0 28px 80px rgba(15, 15, 16, 0.14);
  --shadow-card: 0 12px 36px rgba(15, 15, 16, 0.07), 0 2px 8px rgba(15, 15, 16, 0.04);
  --shadow-yellow: 0 18px 48px rgba(255, 191, 0, 0.24);

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --radius-xs: 10px;

  --container: min(1160px, calc(100vw - 48px));
  --nav-height: 88px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-head: "Space Grotesk", sans-serif;
  --font-body: "Outfit", sans-serif;
}

/* =================================================================================================
   02. BASE RESET AND GLOBAL ELEMENT DEFAULTS
   -------------------------------------------------------------------------------------------------
   Resets browser defaults and establishes predictable sizing, typography, and media behavior.
   These styles intentionally affect the whole document and should remain near the top of the file.
   ================================================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;

  /* Soft layered background so the page feels less flat. */
  background:
    radial-gradient(circle at 6% 3%, rgba(255, 212, 0, 0.32), transparent 28%),
    radial-gradient(circle at 92% 6%, rgba(255, 159, 0, 0.16), transparent 24%),
    radial-gradient(circle at 45% 55%, rgba(255, 229, 92, 0.08), transparent 40%),
    linear-gradient(180deg, #d1c36a 0%, #ffffff 35%, #d1b653 100%);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  line-height: 1;
}

.page-shell {
  position: relative;
}

/* =================================================================================================
   03. SHARED LAYOUT HELPERS
   -------------------------------------------------------------------------------------------------
   Reusable structural classes used across sections to maintain alignment and section spacing.
   ================================================================================================= */
.container {
  width: var(--container);
  margin: 0 auto;
}

.section {
  position: relative;
  padding: 96px 0;
}

/* =================================================================================================
   04. SHARED TYPOGRAPHY PATTERNS
   -------------------------------------------------------------------------------------------------
   Common heading/intro primitives reused across multiple sections.
   Note: `.eyebrow` receives an intentional later override in the hero area section to add an accent
   underline and adjusted color. Both definitions are preserved because cascade order matters.
   ================================================================================================= */
.eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow-hot);
}

.section-heading {
  max-width: 720px;
  margin-bottom: 52px;
}

.section-heading h2 {
  margin: 0 0 16px;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 0.97;
  letter-spacing: -0.055em;
  color: var(--ink);
}

.section-heading p {
  max-width: 600px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(15, 15, 16, 0.66);
}

/* =================================================================================================
   05. HEADER AND NAVIGATION
   -------------------------------------------------------------------------------------------------
   Sticky header, brand block, desktop navigation, CTA nav pill, and responsive mobile dropdown.
   This version keeps the same layout structure while improving mobile balance and hamburger clarity.
   ================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   05.01 Sticky Header Shell
   Header wrapper that becomes glassy on scroll via the `.scrolled` state.
   ------------------------------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition:
    background-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease),
    -webkit-backdrop-filter 0.35s var(--ease);
}

.site-header.scrolled {
  background: rgba(211, 156, 236, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 1px 0 rgba(255, 191, 0, 0.16),
    0 10px 30px rgba(15, 15, 16, 0.08);
}

/* -------------------------------------------------------------------------------------------------
   05.02 Navbar Structure
   Main navigation row containing the brand area, nav links, and mobile menu toggle.
   ------------------------------------------------------------------------------------------------- */
.navbar {
  width: var(--container);
  height: var(--nav-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

/* -------------------------------------------------------------------------------------------------
   05.03 Brand / Logo Block
   Left-side logo and brand text stack.
   ------------------------------------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-mark {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  overflow: hidden;
  background: #8B5CF6;
  border: 1px solid rgba(37, 32, 33, 0.24);
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.brand:hover .brand-mark {
  transform: translateY(-2px);
  border-color: rgba(255, 191, 0, 0.32);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  line-height: 1;
}

.brand-name {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: rgb(130, 50, 196);
  text-rendering: optimizeLegibility;
  -webkit-text-stroke: 1px rgb(130, 50, 196);
}

.brand-city {
  padding-left: 10px;
  border-left: 3px solid rgba(255, 191, 0, 0.5);
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15, 15, 16, 0.58);
}

/* -------------------------------------------------------------------------------------------------
   05.04 Desktop Navigation Links
   Desktop pill navigation and highlighted join button.
   ------------------------------------------------------------------------------------------------- */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
  border: 1px solid rgba(255, 212, 0, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.nav-menu a {
  position: relative;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.89rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(15, 15, 16, 0.8);
  text-decoration: none;
  transition:
    color 0.25s var(--ease),
    background-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.28s var(--ease-spring);
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow-deep), var(--yellow-hot));
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0.95;
  transition: transform 0.28s var(--ease);
}

.nav-menu a:hover {
  color: var(--ink);
  background: rgba(94, 6, 105, 0.12);
  box-shadow: 0 6px 14px rgba(255, 191, 0, 0.1);
  transform: translateY(-1px);
}

.nav-menu a:hover::after {
  transform: scaleX(1);
}

.nav-menu .nav-join {
  margin-left: 8px;
  padding-inline: 18px;
  background: linear-gradient(135deg, #ffe78a, #ffc94d);
  color: var(--ink);
  font-weight: 700;
  box-shadow:
    0 8px 18px rgba(255, 191, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.nav-menu .nav-join::after {
  display: none;
}

.nav-menu .nav-join:hover {
  background: linear-gradient(135deg, #ffec9f, #ffbf3f);
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px rgba(255, 159, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* -------------------------------------------------------------------------------------------------
   05.05 Mobile Nav Toggle Base State
   Hidden by default. Visible in the responsive navbar breakpoint below.
   ------------------------------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
}

/* -------------------------------------------------------------------------------------------------
   05.06 Responsive Navigation
   Converts the desktop nav into a dropdown and keeps the brand/hamburger balanced on smaller screens.
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .navbar {
    gap: 12px;
  }

  .brand {
    min-width: 0;
    gap: 10px;
  }

  .brand-mark {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 16px;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-name {
    font-size: 1.55rem;
    line-height: 1;
  }

  .brand-city {
    padding-left: 8px;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  /* Clean hamburger button with guaranteed visible bars */
  .nav-toggle-label {
    z-index: 10;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 0;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 15, 16, 0.08);
    box-shadow: 0 8px 20px rgba(15, 15, 16, 0.08);
  }

  .nav-toggle-label span {
    display: block;
    width: 18px;
    height: 2.5px;
    flex: 0 0 2.5px;
    border-radius: 999px;
    background: #1d1d1f;
    opacity: 1;
    transform-origin: center;
    transition:
      transform 0.3s var(--ease),
      opacity 0.2s ease;
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    border-radius: 20px;
    background: rgba(227, 210, 230, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-strong), 0 0 0 1px rgba(255, 191, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition:
      opacity 0.35s var(--ease),
      transform 0.35s var(--ease-spring);
  }

  .nav-menu a {
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 0.94rem;
  }

  .nav-menu .nav-join {
    margin-top: 4px;
    margin-left: 0;
    text-align: center;
  }

  .nav-toggle:checked ~ .nav-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------------------------------------------
   05.07 Extra Small Phones
   Slightly tighter logo and hamburger sizing for narrow mobile screens.
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .navbar {
    gap: 10px;
  }

  .brand {
    gap: 8px;
  }

  .brand-mark {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 14px;
  }

  .brand-name {
    font-size: 1.3rem;
  }

  .brand-city {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    padding-left: 6px;
  }

  .nav-toggle-label {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    gap: 4px;
    border-radius: 10px;
  }

  .nav-toggle-label span {
    width: 16px;
    height: 2.5px;
    flex: 0 0 2.5px;
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav-menu {
    top: calc(100% + 8px);
    border-radius: 18px;
    padding: 12px;
  }
}

/* =================================================================================================
   06. HERO SECTION
   -------------------------------------------------------------------------------------------------
   Main landing section including:
   - hero grid
   - decorative motion background
   - hero copy/actions/meta pills
   - right-side visual panel and stats
   ================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   06.01 Hero Wrapper And Grid Layout
   ------------------------------------------------------------------------------------------------- */
.hero {
  min-height: calc(100vh - 16px);
  padding-top: 44px;
  overflow: clip;
}

.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 52px;
  align-items: center;
}

/* -------------------------------------------------------------------------------------------------
   06.02 Decorative Backdrop Elements
   These purely decorative layers create atmosphere and motion behind the hero content.
   ------------------------------------------------------------------------------------------------- */
.hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.orb,
.grid-glow,
.panel-top {
  user-select: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
}

.orb-one {
  top: 8%;
  left: -6%;
  width: 380px;
  height: 380px;
  background: radial-gradient(#FACC15, rgba(255, 212, 0, 0));
  filter: blur(10px);
  animation: driftOne 11s ease-in-out infinite;
}

.orb-two {
  top: 12%;
  right: 4%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 229, 92, 0.68), rgba(255, 159, 0, 0.12), rgba(255, 229, 92, 0));
  filter: blur(10px);
  animation: driftTwo 13s ease-in-out infinite;
}

.orb-three {
  bottom: 10%;
  left: 30%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 191, 0, 0.24), rgba(255, 212, 0, 0));
  filter: blur(14px);
  animation: driftOne 15s ease-in-out infinite reverse;
}

.grid-glow {
  position: absolute;
  inset: auto -12% -10% auto;
  width: 460px;
  height: 460px;
  border-radius: 40px;
  opacity: 0.58;
  transform: rotate(-12deg);
  background:
    linear-gradient(rgba(112, 112, 209, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 15, 16, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: pulseGrid 10s ease-in-out infinite;
}

/* -------------------------------------------------------------------------------------------------
   06.03 Hero Copy
   Primary headline and support text on the left side of the hero.
   ------------------------------------------------------------------------------------------------- */
.hero-copy h1 {
  max-width: 11ch;
  font-size: clamp(3.2rem, 8.3vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.07em;
}

.hero-copy h1 em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: #8B5CF6;
}

.hero-copy h1 em::before {
  content: "";
  position: absolute;
  inset: 2px -7px -3px -7px;
  background: rgba(255, 212, 0, 0.14);
  border-radius: 10px;
  z-index: -1;
}

.hero-text {
  max-width: 560px;
  margin-top: 24px;
  font-size: 1.06rem;
  line-height: 1.82;
  color: #8B5CF6;
}

/* -------------------------------------------------------------------------------------------------
   06.04 Hero Actions And Meta Pills
   CTA buttons plus informational summary pills under the intro copy.
   ------------------------------------------------------------------------------------------------- */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.meta-pill {
  min-width: 195px;
  padding: 15px 20px;
  border: 1.5px solid var(--line-yellow);
  border-radius: 20px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.35s var(--ease-spring),
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.meta-pill:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 191, 0, 0.38);
  box-shadow: var(--shadow), 0 0 0 3px rgba(255, 212, 0, 0.08);
}

.meta-label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow-hot);
}

.meta-pill strong {
  font-size: 0.95rem;
}

/* -------------------------------------------------------------------------------------------------
   06.05 Hero Visual Panel And Stat Cards
   Right-side feature panel displaying summary content cards.
   ------------------------------------------------------------------------------------------------- */
.hero-visual {
  display: flex;
  justify-content: flex-end;
}

.hero-panel {
  width: min(490px, 100%);
  padding: 28px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(235, 179, 240, 0.78), rgba(255, 255, 255, 0.92));
  border: 1.5px solid rgba(255, 191, 0, 0.2);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--shadow-strong), 0 0 0 1px rgba(255, 255, 255, 0.55);
  animation: panelRise 1.2s var(--ease) both;
}

.panel-top {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.signal-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.signal-dot:nth-child(1) {
  background: #ff5f57;
}

.signal-dot:nth-child(2) {
  background: #febc2e;
}

.signal-dot:nth-child(3) {
  background: #28c840;
}

.hero-stats {
  display: grid;
  gap: 14px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding: 22px 24px;
  border-radius: 22px;
  background: var(--white);
  border: 1.5px solid rgba(73, 4, 87, 0.06);
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow-soft), var(--yellow-hot), transparent);
}

.tilt-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(255, 191, 0, 0.16), 0 5px 14px rgba(15, 15, 16, 0.07);
  border-color: rgba(255, 191, 0, 0.26);
}

.stat-card.accent {
  background: linear-gradient(135deg, var(--yellow-soft), var(--yellow), var(--yellow-hot));
  border-color: transparent;
}

.stat-card.dark {
  background: linear-gradient(160deg, #1d1d1f, #080808);
  color: var(--white);
  border-color: rgba(255, 212, 0, 0.1);
}

.stat-kicker {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.62;
}

.stat-card h2 {
  margin-bottom: 7px;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  letter-spacing: -0.06em;
}

.stat-card p {
  font-size: 0.92rem;
  line-height: 1.7;
  opacity: 0.8;
}
/* -------------------------------------------------------------------------------------------------
   Hero tuning for small laptops
   - slightly reduce the heading
   - slightly increase the paragraph
   - only for laptop widths, not tablets
   ------------------------------------------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1366px) {
  .hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(2.6rem, 4.8vw, 4.5rem);
    line-height: 0.98;
  }

  .hero-text {
    max-width: 600px;
    font-size: 1.08rem;
    line-height: 1.84;
  }
}

/* -------------------------------------------------------------------------------------------------
   Hero tuning for small laptops
   - slightly reduce the heading
   - slightly increase the paragraph
   - only for laptop widths, not tablets
   ------------------------------------------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1366px) {
  .hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(2.6rem, 4.8vw, 4.5rem);
    line-height: 0.98;
  }

  .hero-text {
    max-width: 600px;
    font-size: 1.08rem;
    line-height: 1.84;
  }
}

/* -------------------------------------------------------------------------------------------------
   Hero tuning for tablets
   - keep heading a little larger than laptop version
   - keep paragraph balanced so tablet layout does not feel odd
   ------------------------------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 900px) {
  .hero-copy h1 {
    max-width: 17ch;
    font-size: clamp(2.9rem, 6vw, 4.8rem);
    line-height: 0.97;
  }

  .hero-text {
    max-width: 560px;
    font-size: 9rem;
    line-height: 1.75;
  }
}


/* -------------------------------------------------------------------------------------------------
   06.06 Local Eyebrow Override
   This later `.eyebrow` block intentionally overrides the shared base eyebrow color and adds an
   underline accent. It is preserved in-place to keep cascade behavior exactly the same.
   ------------------------------------------------------------------------------------------------- */
.eyebrow {
  color: #7b38c9;
  position: relative;
  display: inline-block;
}

.eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;

  width: 100%;
  height: 2px;

  background: #8B5CF6;
  box-shadow: 0 0 6px rgba(61, 73, 5, 0.6);
}

/* =================================================================================================
   07. SHARED BUTTON SYSTEM
   -------------------------------------------------------------------------------------------------
   Reusable button and link-button primitives. These are shared across hero, CTA, and other sections.
   ================================================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease-spring),
    box-shadow 0.35s var(--ease),
    background 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--yellow-soft), var(--yellow), var(--yellow-hot));
  color: var(--ink);
  box-shadow: 0 16px 36px rgba(255, 191, 0, 0.32);
}

.btn-primary:hover {
  box-shadow: 0 24px 42px rgba(255, 159, 0, 0.38);
}

.btn-secondary {
  background: var(--glass);
  color: var(--ink);
  border-color: rgba(15, 15, 16, 0.1);
  backdrop-filter: blur(14px);
}

.btn-secondary:hover {
  background: var(--white);
  border-color: rgba(255, 191, 0, 0.32);
  box-shadow: 0 12px 22px rgba(255, 191, 0, 0.12);
}

.btn-dark {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 16px 36px rgba(15, 15, 16, 0.24);
}

.btn-dark:hover {
  background: #242426;
  box-shadow: 0 22px 44px rgba(15, 15, 16, 0.3);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(15, 15, 16, 0.75);
  transition:
    color 0.25s var(--ease),
    transform 0.3s var(--ease-spring),
    gap 0.3s var(--ease-spring);
}

.text-link:hover {
  color: var(--ink);
  gap: 12px;
  transform: translateY(-2px);
}
/* Slightly stronger laptop reduction for the hero heading */
@media (max-width: 1200px) {
  .hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(2.5rem, 5.6vw, 4.2rem);
    line-height: 1;
  }

  .hero-text {
    max-width: 600px;
    font-size: 1.08rem;
    line-height: 1.86;
  }
}



/* =================================================================================================
   08. JOURNEY SECTION
   -------------------------------------------------------------------------------------------------
   Milestone/story cards used to present the organization's journey.
   ================================================================================================= */
.journey {
  background:
    radial-gradient(circle at 16% 16%, rgba(255, 212, 0, 0.16), transparent 26%),
    radial-gradient(circle at 84% 84%, rgba(255, 159, 0, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(214, 155, 226, 0.52), rgba(255, 255, 255, 0.9));
}

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

.journey-card {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: rgba(238, 223, 140, 0.92);
  border: 1.5px solid rgba(9, 9, 233, 0.06);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.journey-card:hover {
  transform: translateY(-8px);
  border-color: rgba(177, 150, 71, 0.28);
  box-shadow: 0 24px 44px rgba(255, 191, 0, 0.12), 0 6px 18px rgba(15, 15, 16, 0.06);
}

.journey-step {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 229, 92, 0.4), rgba(255, 191, 0, 0.25));
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--yellow-hot);
}

.journey-card h3 {
  margin-bottom: 10px;
  font-size: 1.42rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.journey-card p {
  font-size: 0.95rem;
  line-height: 1.78;
  color: rgba(15, 15, 16, 0.68);
}

/* =================================================================================================
   09. MISSION / ABOUT SECTION
   -------------------------------------------------------------------------------------------------
   Three-card informational section sharing mission/value statements.
   ================================================================================================= */
.mission {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.86));
}

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

.mission-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.mission-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow-soft), var(--yellow-hot), transparent);
}

.mission-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 191, 0, 0.28);
  box-shadow: 0 24px 44px rgba(255, 191, 0, 0.12), 0 6px 18px rgba(15, 15, 16, 0.06);
}

.mission-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 229, 92, 0.48), rgba(255, 191, 0, 0.26));
  color: var(--yellow-hot);
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255, 191, 0, 0.18);
}

.mission-card h3 {
  margin: 18px 0 10px;
  font-size: 1.32rem;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.mission-card p {
  font-size: 0.95rem;
  line-height: 1.78;
  color: rgb(107, 11, 233);
}

/* =================================================================================================
   10. GALLERY SECTION
   -------------------------------------------------------------------------------------------------
   Image slider with captions, nav buttons, dots, and internal gallery-only responsive rules.
   ================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   10.01 Desktop / Default Gallery Styles
   ------------------------------------------------------------------------------------------------- */
.gallery {
  padding-top: 80px;
}

.gallery-slider {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 30px;
  background: #c5a3a3;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-strong);
}

.gallery-track {
  display: flex;
  transition: transform 0.55s var(--ease-out);
  will-change: transform;
}

.gallery-slide {
  position: relative;
  min-width: 100%;
  height: 480px;
  flex-shrink: 0;
}

.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 56px 22px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
}

.caption-event {
  color: var(--white);
  font-size: 0.96rem;
  font-weight: 700;
}

.caption-date {
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  color: var(--white);
  font-size: 0.74rem;
}

.slider-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.46);
  color: var(--white);
  cursor: pointer;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  transition:
    background 0.25s var(--ease),
    transform 0.25s var(--ease-spring);
}

.slider-btn:hover {
  background: rgba(0, 0, 0, 0.68);
  transform: translateY(-50%) scale(1.08);
}

.slider-prev {
  left: 14px;
}

.slider-next {
  right: 14px;
}

.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.48);
  cursor: pointer;
  transition:
    width 0.3s var(--ease-spring),
    background 0.3s var(--ease);
}

.dot.active {
  width: 22px;
  border-radius: 4px;
  background: var(--white);
}

/* -------------------------------------------------------------------------------------------------
   10.02 Gallery Responsive Adjustments
   These breakpoints are kept local to the gallery section for easier slider maintenance.
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .gallery {
    padding-top: 64px;
  }

  .gallery-slider {
    border-radius: 24px;
  }

  .gallery-track {
    width: 100%;
  }

  .gallery-slide {
    min-width: 100%;
    width: 100%;
    height: 380px;
    flex: 0 0 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .slide-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 44px 18px 16px;
  }

  .caption-event {
    font-size: 0.9rem;
  }

  .caption-date {
    font-size: 0.7rem;
  }

  .slider-btn {
    width: 38px;
    height: 38px;
  }

  .slider-prev {
    left: 10px;
  }

  .slider-next {
    right: 10px;
  }
}

@media (max-width: 480px) {
  .gallery {
    padding-top: 52px;
  }

  .gallery-slider {
    border-radius: 20px;
  }

  .gallery-track {
    width: 100%;
  }

  .gallery-slide {
    min-width: 100%;
    width: 100%;
    height: 280px;
    flex: 0 0 100%;
    overflow: hidden;
  }

  .slide-caption {
    gap: 8px;
    padding: 38px 14px 14px;
  }

  .caption-event {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .caption-date {
    padding: 4px 10px;
    font-size: 0.68rem;
  }

  .slider-btn {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .slider-dots {
    bottom: 10px;
    gap: 5px;
  }

  .dot {
    width: 7px;
    height: 7px;
  }

  .dot.active {
    width: 18px;
  }
}

/* Very small phone fix
   Stops the left background color from spilling/coming out of the card */
@media (max-width: 380px) {
  .founder-network-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: stretch;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
  }

  .founder-network-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    width: 100%;
    height: 100%;
    min-height: 72px;
    overflow: hidden;
    border-right: 1px solid rgba(15, 15, 16, 0.06);
    background-clip: padding-box;
  }

  .founder-network-card:nth-child(1) .founder-network-media { background: #eef0ff; }
  .founder-network-card:nth-child(2) .founder-network-media { background: #fff1f6; }
  .founder-network-card:nth-child(3) .founder-network-media { background: #f2fff8; }
  .founder-network-card:nth-child(4) .founder-network-media { background: #eef7ff; }
  .founder-network-card:nth-child(5) .founder-network-media { background: #fff8ee; }
  .founder-network-card:nth-child(6) .founder-network-media { background: #f5f0ff; }

  .founder-network-media img {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .founder-network-copy {
    min-width: 0;
    padding: 10px 12px;
    gap: 4px;
  }

  .founder-network-tag {
    width: fit-content;
    max-width: 100%;
    padding: 2px 7px;
    font-size: 0.5rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .founder-network-card h3 {
    font-size: 0.8rem;
    line-height: 1.2;
    word-break: break-word;
  }

  .founder-network-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.68rem;
    line-height: 1.35;
    word-break: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}


/* =================================================================================================
   11. EVENTS SECTION
   -------------------------------------------------------------------------------------------------
   Two-column event card layout styled to match the site-wide card system.
   ================================================================================================= */
.events {
  background:
    radial-gradient(circle at 8% 50%, rgba(255, 212, 0, 0.12), transparent 30%),
    linear-gradient(180deg, #ecd3532e, rgba(255, 255, 255, 0.72));
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.event-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(15, 15, 16, 0.06);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.event-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow-soft), var(--yellow-hot), transparent);
}

.event-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 191, 0, 0.28);
  box-shadow: 0 24px 44px rgba(255, 191, 0, 0.12), 0 6px 18px rgba(15, 15, 16, 0.06);
}

.event-tag {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 229, 92, 0.4), rgba(255, 191, 0, 0.22));
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow-hot);
}

.event-card h3 {
  margin-bottom: 12px;
  font-size: 1.65rem;
  letter-spacing: -0.05em;
}

.event-card p {
  font-size: 0.95rem;
  line-height: 1.78;
  color: rgba(15, 15, 16, 0.68);
}

/* =================================================================================================
   CONNECTED FOUNDERS SECTION
   -------------------------------------------------------------------------------------------------
   Responsive founder/network cards section.

   Layout logic:
   - Mobile: horizontal compact cards
   - Small phones: tighter version of the same layout
   - Tablet/iPad: 2-column grid with vertical cards
   - Desktop: 3 columns
   - Large screens: 4 columns

   This keeps the original style, but improves responsiveness and avoids:
   - cramped tiny-phone cards
   - stretched full-width iPad cards
   - color block spill/bleed
   - text overflow issues
   ================================================================================================= */

.connected-founders {
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 212, 0, 0.07), transparent 28%),
    linear-gradient(180deg, #fff 0%, #fffce8 100%);
}

/* -------------------------------------------------------------------------------------------------
   BASE GRID
   Mobile-first: single column by default.
   ------------------------------------------------------------------------------------------------- */
.founders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* -------------------------------------------------------------------------------------------------
   BASE CARD
   Default mobile layout is horizontal:
   logo/media on the left, text on the right.
   ------------------------------------------------------------------------------------------------- */
.founder-network-card {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(15, 15, 16, 0.07);
  border-radius: 16px;
  overflow: hidden;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.founder-network-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 160, 0, 0.3);
  box-shadow:
    0 12px 28px rgba(200, 160, 0, 0.09),
    0 4px 10px rgba(0, 0, 0, 0.05);
}

/* -------------------------------------------------------------------------------------------------
   LEFT MEDIA AREA
   Important:
   - `overflow: hidden` on the parent card keeps the background color inside the card
   - fixed column width keeps the colored panel neat on mobile
   ------------------------------------------------------------------------------------------------- */
.founder-network-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 14px;
  background: #f5f2ff;
  border-right: 1px solid rgba(15, 15, 16, 0.06);
}

.founder-network-card:nth-child(2) .founder-network-media { background: #fff0f5; }
.founder-network-card:nth-child(3) .founder-network-media { background: #f0fff7; }
.founder-network-card:nth-child(4) .founder-network-media { background: #f0f8ff; }
.founder-network-card:nth-child(5) .founder-network-media { background: #fffaf0; }
.founder-network-card:nth-child(6) .founder-network-media { background: #f8f5ff; }

.founder-network-media img {
  display: block;
  width: 56px;
  height: 56px;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.founder-network-card:hover .founder-network-media img {
  transform: scale(1.05);
}

/* -------------------------------------------------------------------------------------------------
   RIGHT TEXT AREA
   `min-width: 0` is important inside grid/flex layouts so text can shrink instead of overflowing.
   ------------------------------------------------------------------------------------------------- */
.founder-network-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
}

.founder-network-tag {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 210, 0, 0.12);
  color: #8a6500;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.founder-network-card h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  word-break: break-word;
}

.founder-network-card p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(15, 15, 16, 0.6);
  word-break: break-word;
}

/* -------------------------------------------------------------------------------------------------
   SMALL PHONES
   Keep the same horizontal layout, but make everything slightly tighter.
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .founders-grid {
    gap: 12px;
  }

  .founder-network-card {
    grid-template-columns: 78px minmax(0, 1fr);
    border-radius: 14px;
  }

  .founder-network-media {
    padding: 12px 10px;
  }

  .founder-network-media img {
    width: 46px;
    height: 46px;
  }

  .founder-network-copy {
    padding: 12px 13px;
    gap: 4px;
  }

  .founder-network-tag {
    padding: 3px 8px;
    font-size: 0.56rem;
    letter-spacing: 0.08em;
  }

  .founder-network-card h3 {
    font-size: 0.82rem;
  }

  .founder-network-card p {
    font-size: 0.72rem;
    line-height: 1.4;
  }
}

/* -------------------------------------------------------------------------------------------------
   VERY SMALL PHONES
   Final protection for narrow screens.
   - smaller media column
   - tighter spacing
   - shorter description so cards do not become too tall
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .founders-grid {
    gap: 10px;
  }

  .founder-network-card {
    grid-template-columns: 68px minmax(0, 1fr);
    border-radius: 13px;
  }

  .founder-network-media {
    padding: 10px 8px;
  }

  .founder-network-media img {
    width: 38px;
    height: 38px;
  }

  .founder-network-copy {
    padding: 10px 11px;
    gap: 4px;
  }

  .founder-network-tag {
    padding: 2px 7px;
    font-size: 0.5rem;
    letter-spacing: 0.05em;
  }

  .founder-network-card h3 {
    font-size: 0.76rem;
    line-height: 1.18;
  }

  .founder-network-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.66rem;
    line-height: 1.32;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* -------------------------------------------------------------------------------------------------
   TABLET / IPAD
   iPad looks better with 2 columns and vertical cards instead of stretched full-width rows.
   This is the main tablet improvement.
   ------------------------------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 999px) {
  .founders-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }

  .founder-network-card {
    grid-template-columns: 1fr;
    height: 100%;
  }

  .founder-network-media {
    height: 140px;
    padding: 18px;
    border-right: none;
    border-bottom: 1px solid rgba(15, 15, 16, 0.06);
  }

  .founder-network-media img {
    width: 68px;
    height: 68px;
  }

  .founder-network-copy {
    padding: 16px 18px;
    gap: 6px;
  }

  .founder-network-tag {
    font-size: 0.58rem;
  }

  .founder-network-card h3 {
    font-size: 0.98rem;
  }

  .founder-network-card p {
    display: block;
    font-size: 0.8rem;
    line-height: 1.45;
  }
}

/* -------------------------------------------------------------------------------------------------
   DESKTOP
   3-column layout with vertical cards.
   ------------------------------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .founders-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .founder-network-card {
    grid-template-columns: 1fr;
  }

  .founder-network-media {
    height: 160px;
    border-right: none;
    border-bottom: 1px solid rgba(15, 15, 16, 0.06);
  }

  .founder-network-media img {
    width: 88px;
    height: 88px;
  }

  .founder-network-copy {
    padding: 16px 18px;
    gap: 7px;
  }

  .founder-network-card h3 {
    font-size: 1.08rem;
  }

  .founder-network-card p {
    display: block;
    font-size: 0.88rem;
  }
}

/* -------------------------------------------------------------------------------------------------
   LARGE SCREENS
   4 columns for wider desktops.
   ------------------------------------------------------------------------------------------------- */
@media (min-width: 1300px) {
  .founders-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* =================================================================================================
   13. CTA / JOIN SECTION
   -------------------------------------------------------------------------------------------------
   Prominent conversion band that sits before the footer/contact area.
   ================================================================================================= */
.cta-band {
  padding-top: 28px;
}

.cta-layout {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 54px 56px;
  border-radius: 40px;
  background: linear-gradient(135deg, var(--yellow-soft) 0%, var(--yellow) 44%, var(--yellow-hot) 100%);
  box-shadow:
    0 30px 70px rgba(255, 159, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset,
    0 2px 0 rgba(255, 255, 255, 0.45) inset;
}

.cta-layout::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 50%;
  height: 220%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  animation: sheen 5s ease-in-out infinite;
  pointer-events: none;
}

.cta-copy {
  position: relative;
}

.cta-copy .eyebrow {
  color: rgba(15, 15, 16, 0.62);
}

.cta-layout h2 {
  max-width: 660px;
  font-size: clamp(1.85rem, 3.5vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.06em;
}

.cta-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  flex-shrink: 0;
}

/* =================================================================================================
   14. FOOTER
   -------------------------------------------------------------------------------------------------
   Final site section with:
   - footer shell and glow effects
   - social/contact pill links
   - founder contact bar
   - footer-specific responsive tweaks
   ================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   14.01 Main Footer Shell
   ------------------------------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 56px 24px 28px;
  text-align: center;
  background: #0b0b0d;
}

.glow-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  animation: blobPulse 6s ease-in-out infinite;
}

.glow-blob-left {
  top: -80px;
  left: -60px;
  width: 320px;
  height: 320px;
  background: var(--yellow);
  opacity: 0.13;
}

.glow-blob-right {
  right: -60px;
  bottom: -60px;
  width: 240px;
  height: 240px;
  background: var(--purple);
  opacity: 0.08;
  animation-delay: 3s;
}

.footer-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-title {
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 1.1;
  color: var(--white);
}

.footer-title .highlight {
  color: var(--yellow);
}

.footer-subtitle {
  margin-bottom: 32px;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

/* -------------------------------------------------------------------------------------------------
   14.02 Footer Links And Pills
   Includes generic footer pills plus the YouTube-specific pill variant.
   ------------------------------------------------------------------------------------------------- */
.footer-links-section {
  width: 100%;
  margin-bottom: 28px;
}

.footer-links-label {
  margin-bottom: 14px;
  font-family: var(--font-head);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

.footer-links-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.footer-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 212, 0, 0.07);
  border: 1px solid rgba(255, 212, 0, 0.22);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.84rem;
  font-weight: 600;
  transition:
    transform 0.25s var(--ease-spring),
    background 0.25s var(--ease),
    border-color 0.25s var(--ease),
    color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.footer-link-pill:hover {
  transform: translateY(-3px);
  background: rgba(255, 212, 0, 0.16);
  border-color: rgba(255, 212, 0, 0.5);
  color: var(--yellow);
}

.footer-link-pill.pill-cta {
  background: linear-gradient(135deg, var(--yellow-soft), var(--yellow-hot));
  border-color: transparent;
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(255, 191, 0, 0.28);
}

.footer-link-pill.pill-cta:hover {
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(255, 191, 0, 0.46);
}

.insta-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.footer-bottom {
  width: 100%;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.18);
}

.footer-link-pill.youtube-pill {
  background: linear-gradient(135deg, rgba(255, 72, 72, 0.12), rgba(255, 0, 0, 0.08));
  border: 1px solid rgba(255, 90, 90, 0.24);
  color: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 22px rgba(255, 0, 0, 0.08);
}

.footer-link-pill.youtube-pill:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(255, 82, 82, 0.2), rgba(255, 0, 0, 0.14));
  border-color: rgba(255, 110, 110, 0.42);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 28px rgba(255, 0, 0, 0.16);
}

.youtube-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------------------------------
   14.03 Founder Contact Bar
   Compact founder contact module embedded inside the footer.
   ------------------------------------------------------------------------------------------------- */
.footer-founder-bar {
  width: 100%;
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 212, 0, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 26px rgba(0, 0, 0, 0.16);
}

.footer-founder-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.footer-founder-label {
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(224, 174, 240, 0.42);
}

.footer-founder-name {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: rgba(205, 169, 230, 0.94);
}

.footer-founder-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 229, 92, 0.18), rgba(255, 191, 0, 0.12));
  border: 1px solid rgba(255, 212, 0, 0.2);
  color: var(--yellow);
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 18px rgba(255, 191, 0, 0.08);
  transition:
    transform 0.25s var(--ease-spring),
    background 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.footer-founder-link:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255, 229, 92, 0.24), rgba(255, 191, 0, 0.16));
  border-color: rgba(255, 212, 0, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(255, 191, 0, 0.12);
}
.footer-credit {
margin-top: 1.5rem;
text-align: center;
font-size: 0.75rem;
opacity: 0.55;
color: rgba(255, 255, 255, 0.7);
}

.footer-credit a {
color: inherit;
text-decoration: none;
transition: opacity 0.2s ease;
}

.footer-credit a:hover {
opacity: 1;
text-decoration: underline;
}

/* -------------------------------------------------------------------------------------------------
   14.04 Footer Responsive Adjustments
   Footer-only breakpoints for founder bar and link pill wrapping.
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .footer-founder-bar {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 12px;
    text-align: left;
  }

  .footer-founder-link {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .footer-links-row {
    gap: 12px;
  }

  .footer-link-pill {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
  }
}

@media (max-width: 420px) {
  .footer-link-pill {
    font-size: 0.8rem;
    padding: 10px 14px;
  }

  .youtube-icon {
    width: 15px;
    height: 15px;
  }
}

/* =================================================================================================
   15. REVEAL ANIMATION UTILITY CLASSES
   -------------------------------------------------------------------------------------------------
   Utility classes intended to be toggled by JavaScript, typically via IntersectionObserver.
   ================================================================================================= */
.reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}

.reveal-up {
  transform: translateY(40px);
}

.reveal-left {
  transform: translateX(-40px);
}

.reveal-right {
  transform: translateX(40px);
}

.reveal.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* =================================================================================================
   16. KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------------------------------
   Shared motion definitions used by hero background elements, CTA sheen, and footer glow blobs.
   ================================================================================================= */
@keyframes driftOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(46px, 28px, 0) scale(1.08);
  }
}

@keyframes driftTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-36px, 34px, 0) scale(0.94);
  }
}

@keyframes pulseGrid {
  0%,
  100% {
    transform: rotate(-12deg) translateY(0);
    opacity: 0.42;
  }

  50% {
    transform: rotate(-8deg) translateY(-16px);
    opacity: 0.72;
  }
}

@keyframes panelRise {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }

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

@keyframes sheen {
  0%,
  100% {
    left: -60%;
  }

  50% {
    left: 120%;
  }
}

@keyframes blobPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

/* =================================================================================================
   17. GLOBAL RESPONSIVE SYSTEM
   -------------------------------------------------------------------------------------------------
   These responsive rules affect multiple sections at once and are intentionally grouped at the end
   of the stylesheet so the cascade remains predictable.

   Breakpoint Guide:
   1. 1024px and below  = small laptops
   2. 1150px and below  = navbar switches to dropdown/hamburger
   3. 768px and below   = tablet layout
   4. 480px and below   = mobile phones
   5. 400px and below   = very small phones
   ================================================================================================= */

/* -------------------------------------------------------------------------------------------------
   17.01 Small Laptops (1024px and below)
   Goal:
   - give major sections more room
   - reduce horizontal crowding
   - preserve the desktop feel where possible
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .hero-copy,
  .hero-visual,
  .hero-panel,
  .gallery-slider,
  .cta-copy,
  .cta-actions,
  .founder-box {
    min-width: 0;
  }

  .hero-copy h1 {
    max-width: 13ch;
  }

  .hero-panel {
    width: 100%;
    max-width: 490px;
  }

  .journey-grid,
  .mission-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .founders-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-layout {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 38px;
  }

  .gallery-slide {
    height: 420px;
  }

  .founder-box {
    width: min(100%, 360px);
  }
}

/* -------------------------------------------------------------------------------------------------
   17.02 Navbar Dropdown Activation (1150px and below)
   This breakpoint moves the nav into a hamburger/dropdown pattern before the desktop row feels
   crowded. Kept separate from the general tablet rules for clarity.
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .navbar {
    position: relative;
  }

  .nav-toggle-label {
    z-index: 10;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--shadow-card);
  }

  .nav-toggle-label span {
    display: block;
    width: 22px;
    height: 2.5px;
    border-radius: 999px;
    background: var(--ink);
    transition:
      transform 0.3s var(--ease),
      opacity 0.2s ease;
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  .nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    border-radius: 24px;
    background: rgba(227, 210, 230, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-strong), 0 0 0 1px rgba(255, 191, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition:
      opacity 0.35s var(--ease),
      transform 0.35s var(--ease-spring);
  }

  .nav-menu a {
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 0.94rem;
  }

  .nav-menu .nav-join {
    margin-top: 4px;
    margin-left: 0;
    text-align: center;
  }

  .nav-toggle:checked ~ .nav-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------------------------------------------
   17.03 Tablet Layout (768px and below)
   Goal:
   - collapse major grids
   - reduce spacing slightly
   - allow components to expand to full available width
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .section {
    padding: 72px 0;
  }

  .journey-grid,
  .mission-grid,
  .events-grid,
  .founders-grid {
    grid-template-columns: 1fr;
  }

  .hero-layout {
    gap: 36px;
  }

  .hero-copy,
  .hero-visual,
  .hero-panel,
  .founder-network-card,
  .journey-card,
  .mission-card,
  .event-card {
    width: 100%;
    min-width: 0;
  }

  .hero-panel {
    max-width: 100%;
    padding: 24px;
  }

  .hero-meta {
    gap: 12px;
  }

  .meta-pill {
    min-width: 0;
    flex: 1 1 220px;
  }

  .gallery-slider {
    border-radius: 24px;
  }

  .gallery-slide {
    height: 340px;
  }

  .slide-caption {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .founder-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .founder-box {
    width: 100%;
    max-width: 420px;
  }

  .cta-layout {
    gap: 24px;
  }

  .cta-copy,
  .cta-actions {
    width: 100%;
    min-width: 0;
  }
}

/* -------------------------------------------------------------------------------------------------
   17.04 Mobile Phones (480px and below)
   Goal:
   - reduce spacing and visual bulk
   - prevent overflow
   - make interactions easier to tap
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --container: min(100vw - 24px, 1160px);
  }

  .section {
    padding: 60px 0;
  }

  .orb-one {
    width: 240px;
    height: 240px;
  }

  .orb-two {
    width: 200px;
    height: 200px;
  }

  .orb-three {
    width: 150px;
    height: 150px;
  }

  .grid-glow {
    width: 280px;
    height: 280px;
  }

  .hero {
    min-height: auto;
  }

  .hero-layout {
    gap: 28px;
  }

  .hero-copy h1,
  .hero-text {
    max-width: 100%;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-meta {
    flex-direction: column;
    gap: 12px;
  }

  .meta-pill {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    padding: 14px 18px;
  }

  .hero-panel,
  .stat-card,
  .journey-card,
  .mission-card,
  .event-card {
    padding-left: 20px;
    padding-right: 20px;
  }

  .gallery-slider {
    border-radius: 20px;
  }

  .gallery-slide {
    height: 250px;
  }

  .slide-caption {
    gap: 10px;
    padding: 40px 16px 14px;
  }

  .caption-event {
    font-size: 0.9rem;
  }

  .caption-date {
    font-size: 0.7rem;
  }

  .slider-btn {
    width: 38px;
    height: 38px;
  }

  .slider-prev {
    left: 10px;
  }

  .slider-next {
    right: 10px;
  }

  .founder-network-media {
    aspect-ratio: 1 / 0.82;
  }

  .founder-network-copy {
    min-width: 0;
  }

  .founder-section {
    padding: 40px 16px 32px;
  }

  .founder-box {
    width: 100%;
    max-width: 100%;
    padding: 24px 20px 20px;
  }

  .founder-contact {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .cta-layout {
    padding: 28px 20px;
  }

  .cta-actions {
    align-items: stretch;
  }

  .cta-actions .btn,
  .cta-actions .text-link {
    width: 100%;
    justify-content: center;
  }

  .footer-links-row {
    gap: 8px;
  }

  .footer-link-pill {
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------------------------------
   17.05 Very Small Phones (400px and below)
   Final safety adjustments for extremely narrow screens.
   ------------------------------------------------------------------------------------------------- */
@media (max-width: 400px) {
  :root {
    --container: calc(100vw - 16px);
  }

  .section {
    padding: 52px 0;
  }

  .hero-copy h1 {
    font-size: clamp(2.35rem, 16vw, 3.2rem);
    letter-spacing: -0.05em;
  }

  .hero-panel,
  .stat-card,
  .journey-card,
  .mission-card,
  .event-card,
  .founder-box {
    padding-left: 18px;
    padding-right: 18px;
  }

  .gallery-slide {
    height: 220px;
  }

  .cta-layout {
    padding: 22px 16px;
    border-radius: 22px;
  }

  .footer-title {
    font-size: 1.2rem;
  }
}



/* TEMPORAY EVENT */


 

  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap');
 
  :root {
    --bc-yellow:   #FFE03A;
    --bc-yellow2:  #FFD000;
    --bc-purple:   #7B2FBE;
    --bc-purple2:  #9B4DDB;
    --bc-purple3:  #5A1A96;
    --bc-dark:     #0E0818;
    --bc-surface:  #160D24;
    --bc-border:   rgba(255, 224, 58, 0.22);
    --bc-glow-y:   rgba(255, 224, 58, 0.15);
    --bc-glow-p:   rgba(123, 47, 190, 0.35);
  }
 
  /* ── SECTION ── */
  .bc-join-section {
    position: relative;
    background: var(--bc-dark);
    overflow: hidden;
    padding: 110px 24px 100px;
    font-family: 'DM Sans', sans-serif;
  }
 
  /* Vivid radial blobs */
  .bc-join-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 55% at 50% -10%,  rgba(123,47,190,0.55) 0%, transparent 65%),
      radial-gradient(ellipse 45% 40% at 90% 80%,   rgba(255,224,58,0.12) 0%, transparent 60%),
      radial-gradient(ellipse 40% 35% at 5%  70%,   rgba(123,47,190,0.25) 0%, transparent 55%);
    pointer-events: none;
  }
 
  /* Diagonal lines */
  .bc-join-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(
        -52deg,
        transparent, transparent 70px,
        rgba(255,224,58,0.03) 70px, rgba(255,224,58,0.03) 71px
      );
    pointer-events: none;
  }
 
  .bc-join-inner {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px 72px;
    align-items: center;
  }
 
  /* ── LEFT ── */
  .bc-join-copy { display: flex; flex-direction: column; gap: 26px; }
 
  .bc-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bc-yellow);
  }
  .bc-eyebrow-line {
    width: 36px; height: 1px;
    background: var(--bc-yellow);
    opacity: 0.6;
  }
 
  .bc-headline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(58px, 7.5vw, 96px);
    line-height: 0.92;
    color: #fff;
    letter-spacing: 0.01em;
    margin: 0;
  }
  .bc-headline em {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--bc-yellow);
    display: block;
    text-shadow: 0 0 40px rgba(255,224,58,0.45);
  }
 
  .bc-tagline {
    font-size: 15px;
    font-weight: 300;
    color: rgba(255,255,255,0.60);
    line-height: 1.75;
    max-width: 380px;
    margin: 0;
  }
 
  .bc-meta-row { display: flex; flex-wrap: wrap; gap: 9px; }
 
  .bc-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(255,224,58,0.3);
    border-radius: 40px;
    background: rgba(255,224,58,0.07);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.75);
    backdrop-filter: blur(6px);
  }
 
  /* ── RIGHT CARD ── */
  .bc-join-card {
    position: relative;
    background: linear-gradient(145deg, #1C0D35 0%, #120827 100%);
    border: 1px solid rgba(255,224,58,0.25);
    border-radius: 20px;
    padding: 44px 38px 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 28px;
    box-shadow:
      0 0 0 1px rgba(123,47,190,0.2),
      0 30px 80px rgba(0,0,0,0.65),
      0 0 80px rgba(123,47,190,0.25),
      inset 0 1px 0 rgba(255,224,58,0.2);
  }
 
  /* Yellow top line */
  .bc-join-card::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bc-yellow), transparent);
  }
 
  /* Purple blob inside card */
  .bc-join-card::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123,47,190,0.4) 0%, transparent 70%);
    pointer-events: none;
  }
 
  .bc-card-title {
    font-family: 'DM Serif Display', serif;
    font-size: 26px;
    color: #fff;
    margin: 0;
    line-height: 1.25;
    position: relative;
    z-index: 1;
  }
  .bc-card-title span { color: var(--bc-yellow); }
 
  /* Stats */
  .bc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(255,224,58,0.18);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .bc-stat {
    padding: 18px 12px;
    background: rgba(255,255,255,0.03);
    text-align: center;
  }
  .bc-stat + .bc-stat { border-left: 1px solid rgba(255,224,58,0.15); }
  .bc-stat-val {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px;
    letter-spacing: 0.04em;
    color: var(--bc-yellow);
    line-height: 1;
    text-shadow: 0 0 20px rgba(255,224,58,0.5);
  }
  .bc-stat-lbl {
    display: block;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-top: 5px;
  }
 
  /* Features */
  .bc-features {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
    position: relative; z-index: 1;
  }
  .bc-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
  }
  .bc-check {
    flex-shrink: 0;
    margin-top: 2px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: rgba(255,224,58,0.12);
    border: 1px solid rgba(255,224,58,0.4);
    display: flex; align-items: center; justify-content: center;
  }
 
  /* CTA */
  .bc-cta-wrap {
    display: flex; flex-direction: column; gap: 11px;
    position: relative; z-index: 1;
  }
  .bc-cta {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 17px 32px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(135deg, var(--bc-yellow) 0%, var(--bc-yellow2) 100%);
    color: #0E0818;
    box-shadow:
      0 6px 28px rgba(255,224,58,0.45),
      0 1px 0 rgba(255,255,255,0.25) inset;
  }
  .bc-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 55%);
    pointer-events: none;
  }
  .bc-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(255,224,58,0.60), 0 1px 0 rgba(255,255,255,0.25) inset;
  }
  .bc-cta:active { transform: translateY(0); }
 
  .bc-cta-note {
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.04em;
  }
 
  /* Floating BG numbers */
  .bc-float-num {
    position: absolute;
    font-family: 'Bebas Neue', sans-serif;
    color: rgba(123,47,190,0.07);
    user-select: none; pointer-events: none; z-index: 1; line-height: 1;
  }
  .bc-float-num.n1 { font-size: 300px; top: -40px; right: -20px; }
  .bc-float-num.n2 { font-size: 220px; bottom: -30px; left: -20px; }
 
  /* ── ANIMATIONS ── */
  @keyframes bc-fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0);    }
  }
  .bc-join-copy > * {
    opacity: 0;
    animation: bc-fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  .bc-join-copy > *:nth-child(1) { animation-delay: 0.10s; }
  .bc-join-copy > *:nth-child(2) { animation-delay: 0.22s; }
  .bc-join-copy > *:nth-child(3) { animation-delay: 0.34s; }
  .bc-join-copy > *:nth-child(4) { animation-delay: 0.44s; }
  .bc-join-card {
    opacity: 0;
    animation: bc-fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.30s forwards;
  }
 
  /* ═══════════════════════════════════════
     CONTACT STRIP
  ═══════════════════════════════════════ */
  .bc-contact-strip {
    position: relative;
    background: linear-gradient(100deg, #200A3A 0%, #10061E 50%, #1A0830 100%);
    border-top: 1px solid rgba(255,224,58,0.18);
    padding: 42px 24px;
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
  }
  .bc-contact-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(123,47,190,0.22) 0%, transparent 70%);
    pointer-events: none;
  }
 
  .bc-contact-inner {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
  }
 
  .bc-contact-text h4 {
    margin: 0 0 5px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
  }
  .bc-contact-text p {
    margin: 0;
    font-size: 17px;
    font-weight: 300;
    color: rgba(255,255,255,0.75);
  }
  .bc-contact-text p strong {
    color: #fff;
    font-weight: 500;
  }
 
  /* Instagram pill */
  .bc-insta-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 13px 22px;
    border-radius: 50px;
    background: linear-gradient(135deg, #7B2FBE 0%, #9B4DDB 60%, #C060FF 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow:
      0 6px 28px rgba(123,47,190,0.55),
      inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
  }
  .bc-insta-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    pointer-events: none;
  }
  .bc-insta-link:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 38px rgba(123,47,190,0.70), inset 0 1px 0 rgba(255,255,255,0.2);
  }
  .bc-insta-link:active { transform: scale(0.98); }
 
  /* Instagram icon */
  .bc-insta-icon {
    width: 22px; height: 22px;
    flex-shrink: 0;
  }
 
  .bc-insta-handle {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }
  .bc-insta-handle span:first-child {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .bc-insta-handle span:last-child {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
 
  /* Yellow dot divider */
  .bc-divider-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--bc-yellow);
    opacity: 0.5;
    flex-shrink: 0;
  }
 
  /* ── Responsive ── */
  @media (max-width: 780px) {
    .bc-join-inner { grid-template-columns: 1fr; gap: 44px; }
    .bc-join-card  { padding: 34px 24px 30px; }
    .bc-contact-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  }
  @media (max-width: 480px) {
    .bc-join-section { padding: 72px 18px 80px; }
  }