/* =====================================================
   01. ROOT VARIABLES
   ===================================================== */
:root {
  --primary-color: #4a7c59;
  --secondary-color: #ee8b36;
  --accent-color: #9b4dca;
  --dark-color: #1a1a1a;
  --light-color: #f0f0f0;
  --text-color: #f0f0f0;
  --background-color: #222222;
  --header-height: 80px;
  --border-radius: 8px;
  --transition-speed: 0.3s;
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  --max-width: 1200px;
  --tribal-border-color: #ee8b36;

  /* legacy knowledge hub colors */
  --color-olelo: #265d9c;
  --color-ikeverse: #9d50bb;
  --color-malama: #50e3c2;
  --color-bg-dark: #121826;
  --color-bg-light: #1e293b;
  --color-text: #f8fafc;
  --color-text-light: #cbd5e1;
}

/* =====================================================
   02. RESET / GLOBAL BASE
   ===================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M20,20 L30,10 L40,20 L30,30 Z M60,20 L70,10 L80,20 L70,30 Z M40,40 L50,30 L60,40 L50,50 Z M80,40 L90,30 L100,40 L90,50 Z M0,40 L10,30 L20,40 L10,50 Z M20,60 L30,50 L40,60 L30,70 Z M60,60 L70,50 L80,60 L70,70 Z M40,80 L50,70 L60,80 L50,90 Z M80,80 L90,70 L100,80 L90,90 Z M0,80 L10,70 L20,80 L10,90 Z' fill='rgba(74,124,89,0.1)' /></svg>");
  background-attachment: fixed;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-speed);
}

a:hover {
  color: var(--accent-color);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 1rem;
  line-height: 1.2;
}

section {
  padding: 80px 0;
  position: relative;
}

/* tribal section borders */
section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--tribal-border-color) 20%,
    var(--tribal-border-color) 80%,
    transparent 100%
  );
  opacity: 0.7;
}

section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--tribal-border-color) 20%,
    var(--tribal-border-color) 80%,
    transparent 100%
  );
  opacity: 0.7;
}

/* =====================================================
   03. SHARED HELPERS / LABELS / BUTTONS
   ===================================================== */
.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--secondary-color);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-intro {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  color: rgba(240, 240, 240, 0.88);
  line-height: 1.75;
  font-size: 1.05rem;
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, var(--color-olelo) 0%, var(--color-ikeverse) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-olelo) 0%, var(--color-ikeverse) 100%);
  border-radius: 3px;
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: 3rem;
  font-size: 1.1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.section-cta.center {
  text-align: center;
  margin-top: 2.5rem;
}

.btn,
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  min-height: 48px;
  border-radius: var(--border-radius);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-speed);
  text-decoration: none;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
}

.btn-primary,
.primary-btn,
.cta-primary {
  background-color: var(--primary-color);
  color: #fff;
}

.btn-primary:hover,
.primary-btn:hover,
.cta-primary:hover {
  background-color: #3a6248;
  color: #fff;
  transform: translateY(-2px);
}

.btn-secondary,
.secondary-btn,
.cta-secondary {
  background-color: transparent;
  border: 2px solid var(--secondary-color);
  color: var(--secondary-color);
}

.btn-secondary:hover,
.secondary-btn:hover,
.cta-secondary:hover {
  background-color: var(--secondary-color);
  color: #111;
  transform: translateY(-2px);
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* =====================================================
   04. HEADER / NAVIGATION
   ===================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--dark-color);
  border-bottom: 2px solid var(--tribal-border-color);
  box-shadow: var(--shadow);
  z-index: 1000;
  transition: all var(--transition-speed);
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo img {
  height: 60px;
  width: auto;
}

.main-nav ul {
  display: flex;
  list-style: none;
}

.main-nav li {
  margin: 0 15px;
}

.main-nav a {
  font-weight: 500;
  position: relative;
  color: var(--light-color);
}

.main-nav a.nav-highlight {
  color: var(--accent-color);
}

.main-nav a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: var(--primary-color);
  transition: width var(--transition-speed);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 100%;
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
  background: transparent;
  border: none;
}

.mobile-menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--light-color);
  border-radius: 3px;
}
/* =====================================================
   BRAND WRAP
   ===================================================== */

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow:
    0 0 10px rgba(255,210,122,0.12),
    0 2px 8px rgba(0,0,0,0.4);
}

.brand-subtitle {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd27a;
  opacity: 0.85;
  margin-top: 2px;
  text-shadow: 0 0 10px rgba(255,210,122,0.18);
}

/* hide text on small screens */

@media (max-width: 768px) {
  .brand-text {
    display: none;
  }
}
/* =====================================================
   HERO SECTION – PIKOVERSE
   ===================================================== */

.hero-section {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  padding-top: calc(var(--header-height) + 52px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 210, 122, 0.10), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(138, 110, 255, 0.10), transparent 30%),
    radial-gradient(circle at 72% 72%, rgba(84, 209, 255, 0.08), transparent 26%),
    linear-gradient(
      180deg,
      rgba(10, 12, 18, 0.96) 0%,
      rgba(15, 18, 24, 0.94) 100%
    );
  border-bottom: 1px solid rgba(238, 139, 54, 0.18);
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 18%,
      transparent 82%,
      rgba(255, 255, 255, 0.03) 100%
    );
  pointer-events: none;
}

.hero-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(72%, 920px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 210, 122, 0.95),
    rgba(238, 139, 54, 0.75),
    transparent
  );
  box-shadow: 0 0 18px rgba(255, 210, 122, 0.18);
  opacity: 0.75;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  align-items: center;
  gap: 48px;
}

/* =====================================================
   HERO CONTENT
   ===================================================== */

.hero-content {
  position: relative;
  max-width: 720px;
  animation: heroBlockIn 0.95s ease both;
}

.hero-content::before {
  content: "";
  position: absolute;
  top: -28px;
  left: -24px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 122, 0.12), transparent 72%);
  filter: blur(12px);
  z-index: -1;
  animation: heroAuraPulse 5s ease-in-out infinite;
}

.hero-content .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  color: #ffd27a;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 210, 122, 0.18);
  box-shadow: 0 0 18px rgba(255, 210, 122, 0.08);
  text-shadow: 0 0 12px rgba(255, 210, 122, 0.14);
  animation: heroEyebrowPulse 3s ease-in-out infinite alternate;
}

.hero-content h1 {
  position: relative;
  margin: 0 0 1.35rem;
  font-size: clamp(2.8rem, 5.4vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #ffffff;
  text-shadow:
    0 6px 28px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(255, 210, 122, 0.06);
  animation: heroTitleRise 1.1s ease both;
}

.hero-content h1::after {
  content: "";
  display: block;
  width: 156px;
  height: 5px;
  margin-top: 22px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 210, 122, 1),
    rgba(238, 139, 54, 0.92),
    transparent
  );
  box-shadow:
    0 0 18px rgba(255, 210, 122, 0.22),
    0 0 30px rgba(238, 139, 54, 0.10);
  animation: heroLinePulse 3.2s ease-in-out infinite;
}

.hero-content .highlight {
  color: #ffd27a;
  text-shadow:
    0 0 18px rgba(255, 210, 122, 0.18),
    0 3px 16px rgba(0, 0, 0, 0.32);
}

.hero-content .subtitle {
  max-width: 640px;
  margin: 0 0 2rem;
  font-size: clamp(1.04rem, 1.55vw, 1.2rem);
  line-height: 1.9;
  color: rgba(240, 240, 240, 0.93);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
  animation: heroSubtitleFade 1.2s ease both;
}

/* =====================================================
   CTA
   ===================================================== */

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 1.4rem;
  margin-bottom: 1.6rem;
  animation: heroFadeUp 1.35s ease both;
}

.hero-cta .cta-btn {
  position: relative;
  overflow: hidden;
  min-height: 50px;
  padding: 13px 22px;
  border-radius: 14px;
  font-weight: 700;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease;
}

.hero-cta .cta-btn::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -40%;
  width: 40%;
  height: 160%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
  transform: rotate(14deg);
  opacity: 0;
}

.hero-cta .cta-btn:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.30),
    0 0 20px rgba(255, 210, 122, 0.08);
  filter: brightness(1.03);
}

.hero-cta .cta-btn:hover::before {
  opacity: 1;
  animation: heroBtnSweep 1.15s ease;
}

/* =====================================================
   TAGS
   ===================================================== */

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0.5rem;
  animation: heroFadeUp 1.5s ease both;
}

.hero-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.04)
    );
  border: 1px solid rgba(255, 210, 122, 0.14);
  color: rgba(245, 245, 245, 0.94);
  font-size: 0.9rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
  animation: heroTagFloat 5s ease-in-out infinite;
}

.hero-tags span:nth-child(2) { animation-delay: 0.2s; }
.hero-tags span:nth-child(3) { animation-delay: 0.35s; }
.hero-tags span:nth-child(4) { animation-delay: 0.5s; }
.hero-tags span:nth-child(5) { animation-delay: 0.65s; }
.hero-tags span:nth-child(6) { animation-delay: 0.8s; }

.hero-tags span:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 210, 122, 0.28);
  color: #ffffff;
  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.2),
    0 0 18px rgba(255, 210, 122, 0.10);
}

/* =====================================================
   HERO MEDIA
   ===================================================== */

.hero-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: heroMediaIn 1.05s ease both;
  perspective: 1400px;
}

.hero-image::before {
  content: "";
  position: absolute;
  width: min(560px, 96%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 210, 122, 0.16) 0%,
    rgba(84, 209, 255, 0.10) 34%,
    rgba(138, 110, 255, 0.08) 52%,
    transparent 74%
  );
  filter: blur(22px);
  animation: heroOrbPulse 5.5s ease-in-out infinite;
  z-index: 0;
}

.hero-image::after {
  content: "";
  position: absolute;
  width: min(520px, 90%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 210, 122, 0.16);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 34px rgba(255, 210, 122, 0.10),
    inset 0 0 18px rgba(255, 255, 255, 0.03);
  animation: heroRingFloat 6s ease-in-out infinite;
  z-index: 0;
}

/* outer media shell */
.hero-media-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 540px);
  max-width: 540px;
  border-radius: 34px;
  padding: 10px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.02)
    );
  border: 1px solid rgba(255, 210, 122, 0.16);
  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.38),
    0 0 34px rgba(255, 210, 122, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform-style: preserve-3d;
  transition:
    transform 0.45s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.hero-media-shell:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-2deg) scale(1.015);
  border-color: rgba(255, 210, 122, 0.34);
  box-shadow:
    0 34px 68px rgba(0, 0, 0, 0.42),
    0 0 44px rgba(255, 210, 122, 0.14),
    0 0 60px rgba(84, 209, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* animated border ring */
.hero-media-border {
  position: absolute;
  inset: -1px;
  border-radius: 34px;
  pointer-events: none;
  overflow: hidden;
}

.hero-media-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from 180deg,
    rgba(255, 210, 122, 0.00),
    rgba(255, 210, 122, 0.55),
    rgba(238, 139, 54, 0.95),
    rgba(84, 209, 255, 0.45),
    rgba(138, 110, 255, 0.35),
    rgba(255, 210, 122, 0.00)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: heroBorderSpin 9s linear infinite;
  opacity: 0.9;
}

/* sweep light */
.hero-media-sweep {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.hero-media-sweep::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -35%;
  width: 34%;
  height: 140%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
  transform: rotate(12deg);
  opacity: 0;
}

.hero-media-shell:hover .hero-media-sweep::before {
  opacity: 1;
  animation: heroMediaSweep 1.35s ease;
}

/* inner frame ornaments */
.hero-media-shell::before,
.hero-media-shell::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 26px;
  pointer-events: none;
  z-index: 1;
}

.hero-media-shell::before {
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 122, 0.04),
    inset 0 0 24px rgba(255, 255, 255, 0.02);
}

.hero-media-shell::after {
  background:
    linear-gradient(90deg, rgba(255, 210, 122, 0.08), transparent 18%) top left / 52px 1px no-repeat,
    linear-gradient(180deg, rgba(255, 210, 122, 0.08), transparent 18%) top left / 1px 52px no-repeat,
    linear-gradient(-90deg, rgba(255, 210, 122, 0.08), transparent 18%) top right / 52px 1px no-repeat,
    linear-gradient(180deg, rgba(255, 210, 122, 0.08), transparent 18%) top right / 1px 52px no-repeat,
    linear-gradient(90deg, rgba(255, 210, 122, 0.08), transparent 18%) bottom left / 52px 1px no-repeat,
    linear-gradient(-180deg, rgba(255, 210, 122, 0.08), transparent 18%) bottom left / 1px 52px no-repeat,
    linear-gradient(-90deg, rgba(255, 210, 122, 0.08), transparent 18%) bottom right / 52px 1px no-repeat,
    linear-gradient(-180deg, rgba(255, 210, 122, 0.08), transparent 18%) bottom right / 1px 52px no-repeat;
  opacity: 0.95;
}

/* video */
.hero-video {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: min(560px, 68vh);
  object-fit: cover;
  object-position: center;
  border-radius: 26px;
  border: 1px solid rgba(255, 210, 122, 0.18);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.02)
    );
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(255, 210, 122, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.45s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
  animation: heroVideoFloat 5.5s ease-in-out infinite;
}

.hero-media-shell:hover .hero-video {
  transform: scale(1.02);
  border-color: rgba(255, 210, 122, 0.34);
  box-shadow:
    0 26px 52px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(255, 210, 122, 0.12),
    0 0 52px rgba(84, 209, 255, 0.06);
  filter: brightness(1.03) saturate(1.04);
}

.tiki-image.hero-video {
  border-radius: 26px;
}

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

@keyframes heroBlockIn {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroTitleRise {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroSubtitleFade {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroAuraPulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes heroEyebrowPulse {
  0% {
    box-shadow: 0 0 12px rgba(255, 210, 122, 0.08);
    transform: translateY(0);
  }
  100% {
    box-shadow: 0 0 24px rgba(255, 210, 122, 0.14);
    transform: translateY(-1px);
  }
}

@keyframes heroLinePulse {
  0%, 100% {
    opacity: 0.82;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.08);
  }
}

@keyframes heroBtnSweep {
  0% {
    left: -45%;
  }
  100% {
    left: 145%;
  }
}

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

@keyframes heroMediaIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

@keyframes heroOrbPulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes heroRingFloat {
  0%, 100% {
    transform: translateY(0) scale(0.99);
  }
  50% {
    transform: translateY(-6px) scale(1.01);
  }
}

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

@keyframes heroMediaSweep {
  0% {
    left: -35%;
  }
  100% {
    left: 125%;
  }
}

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

@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: center;
  }

  .hero-content {
    margin: 0 auto;
  }

  .hero-content::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .hero-content h1::after {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-content .subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta,
  .hero-tags {
    justify-content: center;
  }

  .hero-media-shell {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding-top: calc(var(--header-height) + 34px);
  }

  .hero-content h1 {
    font-size: clamp(2.25rem, 10vw, 3.3rem);
  }

  .hero-content h1::after {
    width: 120px;
  }

  .hero-content .subtitle {
    font-size: 1rem;
    line-height: 1.8;
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

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

  .hero-media-shell {
    max-width: 100%;
    padding: 8px;
    border-radius: 24px;
  }

  .hero-media-border,
  .hero-media-sweep {
    border-radius: 24px;
  }

  .hero-video {
    max-height: 54vh;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content,
  .hero-content::before,
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content h1::after,
  .hero-content .subtitle,
  .hero-cta,
  .hero-tags span,
  .hero-image,
  .hero-image::before,
  .hero-image::after,
  .hero-media-shell,
  .hero-media-border::before,
  .hero-media-sweep::before,
  .hero-video {
    animation: none !important;
  }

  .hero-video,
  .hero-tags span,
  .hero-cta .cta-btn,
  .hero-content h1 {
    transition: none !important;
  }
}
/* =====================================================
   PIKOVERSE INTRO SECTION
   ===================================================== */

.amp-intro-section {
  position: relative;
  padding: 110px 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 210, 122, 0.08), transparent 26%),
    radial-gradient(circle at 85% 18%, rgba(84, 209, 255, 0.08), transparent 24%),
    radial-gradient(circle at 50% 80%, rgba(138, 110, 255, 0.06), transparent 28%),
    linear-gradient(180deg, #171614 0%, #201d1a 100%);
  color: #fff;
  overflow: hidden;
}

.amp-intro-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 18%,
      transparent 82%,
      rgba(255, 255, 255, 0.03) 100%
    );
  pointer-events: none;
}

.amp-intro-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(72%, 860px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 210, 122, 0.92),
    rgba(238, 139, 54, 0.75),
    transparent
  );
  box-shadow:
    0 0 18px rgba(255, 210, 122, 0.16),
    0 0 28px rgba(238, 139, 54, 0.08);
  opacity: 0.78;
}

.amp-intro-section .container {
  position: relative;
  z-index: 2;
}
/* =====================================================
   AMP INTRO EYEBROW
   ===================================================== */

.amp-intro-section .eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffd27a;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );
  border: 1px solid rgba(255, 210, 122, 0.16);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.18),
    0 0 16px rgba(255, 210, 122, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow:
    0 0 12px rgba(255, 210, 122, 0.16),
    0 2px 8px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  animation: ampEyebrowFloat 3.8s ease-in-out infinite alternate;
}

.amp-intro-section .eyebrow::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -34%;
  width: 28%;
  height: 160%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.14),
    transparent
  );
  transform: rotate(12deg);
  opacity: 0.9;
  animation: ampEyebrowSweep 5.5s linear infinite;
}

.amp-intro-section .eyebrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 210, 122, 0.05),
    rgba(255, 210, 122, 0.32),
    rgba(84, 209, 255, 0.12),
    rgba(255, 210, 122, 0.05)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.95;
  pointer-events: none;
}

@keyframes ampEyebrowFloat {
  0% {
    transform: translateY(0);
    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.18),
      0 0 16px rgba(255, 210, 122, 0.08),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
  100% {
    transform: translateY(-2px);
    box-shadow:
      0 16px 30px rgba(0, 0, 0, 0.2),
      0 0 22px rgba(255, 210, 122, 0.12),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
}

@keyframes ampEyebrowSweep {
  0% {
    left: -34%;
  }
  100% {
    left: 128%;
  }
}
/* =====================================================
   SECTION TITLE
   ===================================================== */

.amp-intro-section h2 {
  position: relative;
  margin: 0 0 1rem;
  text-align: center;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-shadow:
    0 6px 28px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(255, 210, 122, 0.08);
  animation: introTitleRise 1s ease both, introTitleGlow 4s ease-in-out infinite alternate;
}

.amp-intro-section h2::after {
  content: "";
  display: block;
  width: 136px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 210, 122, 1),
    rgba(238, 139, 54, 0.95),
    transparent
  );
  box-shadow:
    0 0 16px rgba(255, 210, 122, 0.18),
    0 0 28px rgba(238, 139, 54, 0.08);
  animation: introLinePulse 3.1s ease-in-out infinite;
}

/* =====================================================
   AMPLIFY FRAME
   ===================================================== */

.amplify-frame {
  position: relative;
  max-width: 920px;
  margin: 1.2rem auto 1.8rem;
  padding: 16px;
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.02)
    );
  border: 1px solid rgba(255, 210, 122, 0.14);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.amplify-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 122, 0.03),
    inset 0 0 24px rgba(255,255,255,0.015);
  pointer-events: none;
  z-index: 1;
}

.amplify-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(255,210,122,0.10), transparent 18%) top left / 56px 1px no-repeat,
    linear-gradient(180deg, rgba(255,210,122,0.10), transparent 18%) top left / 1px 56px no-repeat,
    linear-gradient(-90deg, rgba(255,210,122,0.10), transparent 18%) top right / 56px 1px no-repeat,
    linear-gradient(180deg, rgba(255,210,122,0.10), transparent 18%) top right / 1px 56px no-repeat,
    linear-gradient(90deg, rgba(255,210,122,0.10), transparent 18%) bottom left / 56px 1px no-repeat,
    linear-gradient(-180deg, rgba(255,210,122,0.10), transparent 18%) bottom left / 1px 56px no-repeat,
    linear-gradient(-90deg, rgba(255,210,122,0.10), transparent 18%) bottom right / 56px 1px no-repeat,
    linear-gradient(-180deg, rgba(255,210,122,0.10), transparent 18%) bottom right / 1px 56px no-repeat;
  pointer-events: none;
  z-index: 1;
}

.amplify-frame-border {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.amplify-frame-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    rgba(255, 210, 122, 0) 30deg,
    rgba(255, 210, 122, 0.72) 95deg,
    rgba(238, 139, 54, 0.72) 145deg,
    rgba(84, 209, 255, 0.36) 215deg,
    rgba(138, 110, 255, 0.28) 255deg,
    transparent 320deg,
    transparent 360deg
  );
  opacity: 0.98;
  animation: introCardBorderSpin 10s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.amplify-frame-border::after {
  content: "";
  position: absolute;
  top: -15%;
  left: -30%;
  width: 28%;
  height: 140%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.14),
    transparent
  );
  transform: rotate(12deg);
  animation: introFrameSweep 5.5s linear infinite;
  opacity: 0.75;
}

.amplify-animation {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 52px;
  text-align: center;
  animation: introFadeUp 1.1s ease both;
}

.amplify-animation::before {
  content: "";
  position: absolute;
  inset: -12px auto auto 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 90px;
  background: radial-gradient(circle, rgba(255, 210, 122, 0.10), transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}

.amplify-word {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.86rem;
  color: #fff;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.04)
    );
  border: 1px solid rgba(255, 210, 122, 0.14);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

.amplify-word::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -40%;
  width: 40%;
  height: 160%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.15),
    transparent
  );
  transform: rotate(14deg);
  opacity: 0;
}

.amplify-word:first-child {
  color: #ffd27a;
  text-shadow: 0 0 12px rgba(255, 210, 122, 0.16);
}

.amplify-word:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 210, 122, 0.28);
  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(255, 210, 122, 0.08);
}

.amplify-word:hover::before {
  opacity: 1;
  animation: introWordSweep 1.2s ease;
}

.changing-word {
  animation: introWordFloat 4.5s ease-in-out infinite;
}

.changing-word:nth-child(2) { animation-delay: 0.15s; }
.changing-word:nth-child(3) { animation-delay: 0.35s; }
.changing-word:nth-child(4) { animation-delay: 0.55s; }
.changing-word:nth-child(5) { animation-delay: 0.75s; }
.changing-word:nth-child(6) { animation-delay: 0.95s; }

/* =====================================================
   INTRO COPY
   ===================================================== */

.amp-intro-section .section-intro {
  position: relative;
  max-width: 860px;
  margin: 0 auto 3.2rem;
  text-align: center;
  font-size: 1.06rem;
  line-height: 1.9;
  color: rgba(242, 242, 242, 0.93);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
  animation: introFadeUp 1.2s ease both;
}

.amp-intro-section .section-intro::before {
  content: "";
  position: absolute;
  inset: -18px -24px;
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.01)
    );
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.03);
  z-index: -1;
}

.amp-intro-section .section-intro strong {
  color: #ffd27a;
  text-shadow: 0 0 12px rgba(255, 210, 122, 0.14);
}

/* =====================================================
   GRID
   ===================================================== */

.amp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: stretch;
}

/* =====================================================
   VIDEO CARDS
   ===================================================== */

.amp-card {
  position: relative;
  min-height: 470px;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );
  border: 1px solid rgba(255, 210, 122, 0.12);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  animation: introCardIn 0.8s ease both;
}

.amp-card:nth-child(1) { animation-delay: 0.08s; }
.amp-card:nth-child(2) { animation-delay: 0.2s; }
.amp-card:nth-child(3) { animation-delay: 0.32s; }

.amp-card:hover {
  transform: translateY(-10px) scale(1.015);
  border-color: rgba(255, 210, 122, 0.26);
}

.amp-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  transition:
    transform 0.5s ease,
    filter 0.35s ease;
}

.amp-card:hover .amp-card-video {
  transform: scale(1.06);
  filter: brightness(1.04) saturate(1.04);
}

.amp-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: background 0.35s ease;
}

.amp-foundation .amp-card-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(38, 24, 10, 0.06) 0%,
      rgba(30, 20, 10, 0.18) 32%,
      rgba(18, 12, 8, 0.50) 62%,
      rgba(10, 8, 6, 0.90) 100%
    );
}

.amp-ecosystem .amp-card-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(8, 24, 34, 0.05) 0%,
      rgba(8, 22, 30, 0.16) 32%,
      rgba(8, 14, 20, 0.48) 62%,
      rgba(6, 8, 12, 0.90) 100%
    );
}

.amp-mission .amp-card-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(28, 16, 34, 0.05) 0%,
      rgba(22, 14, 28, 0.16) 32%,
      rgba(14, 10, 20, 0.50) 62%,
      rgba(8, 6, 12, 0.90) 100%
    );
}

.amp-card-border {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.amp-card-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    rgba(255, 210, 122, 0.0) 30deg,
    rgba(255, 210, 122, 0.45) 90deg,
    rgba(238, 139, 54, 0.52) 145deg,
    rgba(84, 209, 255, 0.28) 210deg,
    rgba(138, 110, 255, 0.20) 250deg,
    transparent 320deg,
    transparent 360deg
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  animation: introCardBorderSpin 9s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.amp-card-border::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 122, 0.02),
    inset 0 0 18px rgba(255,255,255,0.015);
  opacity: 0.9;
}

.amp-card:hover .amp-card-border::before {
  opacity: 1;
}

.amp-card-sweep {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.amp-card-sweep::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -35%;
  width: 34%;
  height: 140%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.16),
    transparent
  );
  transform: rotate(12deg);
  opacity: 0;
}

.amp-card:hover .amp-card-sweep::before {
  opacity: 1;
  animation: introCardSweep 1.25s ease;
}

.amp-card-content {
  position: relative;
  z-index: 5;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 28px 22px 22px;
}

.amp-card h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.55rem, 2vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-align: center;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(255, 210, 122, 0.06);
  transition:
    color 0.3s ease,
    transform 0.3s ease,
    text-shadow 0.3s ease;
}

.amp-card h3::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  opacity: 0.95;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.amp-foundation h3::after {
  background: linear-gradient(90deg, transparent, #ffd27a, transparent);
}

.amp-ecosystem h3::after {
  background: linear-gradient(90deg, transparent, #74d7ff, transparent);
}

.amp-mission h3::after {
  background: linear-gradient(90deg, transparent, #b68cff, transparent);
}

.amp-card:hover h3 {
  transform: translateY(-2px);
  text-shadow:
    0 4px 18px rgba(0, 0, 0, 0.58),
    0 0 20px rgba(255, 210, 122, 0.08);
}

.amp-foundation:hover h3 { color: #ffd27a; }
.amp-ecosystem:hover h3 { color: #8ce3ff; }
.amp-mission:hover h3 { color: #d5b2ff; }

.amp-card:hover h3::after {
  width: 104px;
  opacity: 1;
}

.amp-card p {
  max-width: 34ch;
  margin: 0 auto;
  padding: 16px 18px;
  border-radius: 18px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(245, 245, 245, 0.96);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.04)
    );
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.04);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.36);
  transition:
    transform 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.amp-card:hover p {
  transform: translateY(-1px);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 14px 26px rgba(0,0,0,0.18),
    0 0 18px rgba(255, 210, 122, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

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

@keyframes introTitleRise {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes introTitleGlow {
  0% {
    text-shadow:
      0 6px 28px rgba(0, 0, 0, 0.4),
      0 0 18px rgba(255, 210, 122, 0.05);
  }
  100% {
    text-shadow:
      0 6px 28px rgba(0, 0, 0, 0.45),
      0 0 28px rgba(255, 210, 122, 0.12),
      0 0 40px rgba(238, 139, 54, 0.05);
  }
}

@keyframes introLinePulse {
  0%, 100% {
    opacity: 0.82;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.08);
  }
}

@keyframes introFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes introWordSweep {
  0% { left: -45%; }
  100% { left: 145%; }
}

@keyframes introCardIn {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

@keyframes introCardSweep {
  0% { left: -35%; }
  100% { left: 125%; }
}

@keyframes introFrameSweep {
  0% { left: -30%; }
  100% { left: 125%; }
}

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

@media (max-width: 992px) {
  .amp-grid {
    grid-template-columns: 1fr;
  }

  .amp-card {
    min-height: 430px;
  }

  .amp-intro-section .section-intro {
    margin-bottom: 2.4rem;
  }
}

@media (max-width: 768px) {
  .amp-intro-section {
    padding: 90px 0;
  }

  .amp-intro-section h2 {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }

  .amplify-frame {
    padding: 12px;
    border-radius: 18px;
  }

  .amplify-frame::before {
    inset: 8px;
    border-radius: 14px;
  }

  .amplify-frame-border {
    border-radius: 18px;
  }

  .amplify-animation {
    gap: 8px;
    min-height: auto;
  }

  .amplify-word {
    font-size: 0.78rem;
    padding: 0.55rem 0.85rem;
  }

  .amp-intro-section .section-intro::before {
    inset: -14px -12px;
    border-radius: 18px;
  }

  .amp-card {
    min-height: 390px;
    border-radius: 20px;
  }

  .amp-card-border,
  .amp-card-sweep {
    border-radius: 20px;
  }

  .amp-card-content {
    padding: 22px 18px 18px;
  }

  .amp-card p {
    font-size: 0.95rem;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amp-intro-section h2,
  .amplify-animation,
  .changing-word,
  .amp-intro-section .section-intro,
  .amplify-frame-border::before,
  .amplify-frame-border::after,
  .amp-card,
  .amp-card-border::before,
  .amp-card-sweep::before {
    animation: none !important;
  }

  .amp-card,
  .amp-card-video,
  .amp-card h3,
  .amp-card p,
  .amplify-word {
    transition: none !important;
  }
}
/* =====================================================
   07. ALOHA FOUNDATION / MEANING CARDS
   ===================================================== */

.meaning-section {
  position: relative;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 210, 122, 0.08), transparent 24%),
    radial-gradient(circle at 84% 22%, rgba(84, 209, 255, 0.07), transparent 24%),
    radial-gradient(circle at 50% 82%, rgba(138, 110, 255, 0.05), transparent 26%),
    linear-gradient(135deg, #11161b 0%, #182733 50%, #10161b 100%);
  color: var(--light-color);
  padding: 6rem 0;
  overflow: hidden;
  isolation: isolate;
}

.meaning-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,0.025) 0%,
      transparent 18%,
      transparent 82%,
      rgba(255,255,255,0.025) 100%
    );
  pointer-events: none;
}

.meaning-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(74%, 920px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 210, 122, 0.88),
    rgba(238, 139, 54, 0.70),
    transparent
  );
  box-shadow: 0 0 18px rgba(255, 210, 122, 0.16);
  opacity: 0.78;
}

.meaning-section .container {
  position: relative;
  z-index: 2;
}

/* =====================================================
   SECTION HEADER
   ===================================================== */

.meaning-section h2 {
  position: relative;
  width: fit-content;
  margin: 0 auto 1.2rem;
  text-align: center;
  font-size: clamp(2.2rem, 5vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-shadow:
    0 6px 28px rgba(0, 0, 0, 0.42),
    0 0 18px rgba(255, 210, 122, 0.06);
  animation: meaningTitleRise 1s ease both;
}

.meaning-section h2::after {
  content: "";
  display: block;
  width: 118px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 210, 122, 1),
    rgba(238, 139, 54, 0.92),
    transparent
  );
  box-shadow:
    0 0 16px rgba(255, 210, 122, 0.18),
    0 0 26px rgba(238, 139, 54, 0.08);
  animation: meaningLinePulse 3.2s ease-in-out infinite;
}

.meaning-section .section-intro {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(242, 242, 242, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  animation: meaningFadeUp 1.15s ease both;
}

.meaning-section .section-intro::before {
  content: "";
  position: absolute;
  inset: -18px -22px;
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.012)
    );
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.03);
  z-index: -1;
}

/* =====================================================
   GRID
   ===================================================== */

.meaning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
  padding: 0 1.25rem;
  max-width: 87.5rem;
  margin: 4rem auto 0;
  perspective: 1200px;
}

/* =====================================================
   CARD
   ===================================================== */

.meaning-card {
  position: relative;
  border-radius: 1.25rem;
  min-height: 25rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  transform: translateY(1.25rem);
  opacity: 0;
  animation: meaningCardEntrance 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--delay, 0) * 1s);
  box-shadow:
    0 0.9rem 2.2rem rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255,255,255,0.03);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 210, 122, 0.08);
  isolation: isolate;
}

.meaning-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.90) 0%,
      rgba(0, 0, 0, 0.56) 40%,
      rgba(0, 0, 0, 0.16) 75%,
      transparent 100%
    );
  z-index: 1;
  transition: opacity 0.4s ease, background 0.4s ease;
}

.meaning-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><rect width='120' height='120' fill='none' stroke='white' stroke-width='2' stroke-dasharray='2,4' opacity='0.04'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.16;
  z-index: 2;
  pointer-events: none;
}

.meaning-card .card-content {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 1.75rem;
  transform: translateY(1rem);
  transition: transform 0.45s ease, opacity 0.3s ease;
  will-change: transform;
}

.meaning-card .card-content::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 74%;
  border-radius: 22px 22px 0 0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.02)
    );
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: -1;
}

/* =====================================================
   TITLE
   ===================================================== */

.meaning-card h3 {
  margin-bottom: 0.55rem;
  font-size: clamp(1.55rem, 4vw, 2rem);
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.015em;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.46),
    0 0 14px rgba(255, 210, 122, 0.06);
  transition:
    color 0.3s ease,
    transform 0.3s ease,
    text-shadow 0.3s ease;
}

.meaning-card h3::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd27a, transparent);
  opacity: 0.92;
  transition: width 0.3s ease, opacity 0.3s ease;
}

/* =====================================================
   SUBTITLE PILL
   ===================================================== */

.meaning-subtitle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.2rem 0 1rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: clamp(0.84rem, 3vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffd27a;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.08)
    );
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  text-shadow: 0 0 10px rgba(255, 210, 122, 0.12);
}

/* =====================================================
   BODY TEXT
   ===================================================== */

.meaning-card p:last-child {
  font-size: clamp(0.92rem, 3vw, 1rem);
  line-height: 1.75;
  color: rgba(245, 245, 245, 0.94);
  opacity: 0.96;
  margin-top: 0.8rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.34);
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

/* =====================================================
   HOVER
   ===================================================== */

.meaning-card:hover {
  transform: translateY(-0.65rem) scale(1.012);
  box-shadow:
    0 1.15rem 2.8rem rgba(0, 0, 0, 0.42),
    0 0 24px rgba(255, 210, 122, 0.08);
  border-color: rgba(255, 210, 122, 0.18);
}

.meaning-card:hover::before {
  opacity: 0.95;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.48) 42%,
      rgba(0, 0, 0, 0.10) 76%,
      transparent 100%
    );
}

.meaning-card:hover .card-content {
  transform: translateY(0);
}

.meaning-card:hover h3 {
  color: #ffd27a;
  transform: translateY(-2px);
  text-shadow:
    0 4px 18px rgba(0, 0, 0, 0.54),
    0 0 20px rgba(255, 210, 122, 0.14);
}

.meaning-card:hover h3::after {
  width: 88px;
  opacity: 1;
}

.meaning-card:hover p:last-child {
  color: #ffffff;
  transform: translateY(-1px);
}

.meaning-card:nth-child(4n + 1):hover {
  animation: alohaCardFloat 4s ease-in-out infinite;
}

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

@keyframes meaningTitleRise {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes meaningLinePulse {
  0%, 100% {
    opacity: 0.82;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.08);
  }
}

@keyframes meaningFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes meaningCardEntrance {
  from {
    opacity: 0;
    transform: translateY(1.8rem) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(1.25rem) scale(1);
  }
}

@keyframes alohaCardFloat {
  0%, 100% {
    transform: translateY(-0.65rem) scale(1.012) rotate(-0.35deg);
  }
  50% {
    transform: translateY(-1rem) scale(1.018) rotate(0.35deg);
  }
}

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

@media (max-width: 768px) {
  .meaning-section {
    padding: 5rem 0;
  }

  .meaning-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 3rem;
  }

  .meaning-card {
    min-height: 20rem;
    background-position: center 35%;
  }

  .meaning-card .card-content {
    padding: 1.25rem;
  }

  .meaning-section .section-intro::before {
    inset: -14px -12px;
    border-radius: 18px;
  }
}

@media print {
  .meaning-card {
    break-inside: avoid;
    min-height: auto;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .meaning-section h2,
  .meaning-section h2::after,
  .meaning-section .section-intro,
  .meaning-card {
    animation: none !important;
  }

  .meaning-card,
  .meaning-card h3,
  .meaning-card p:last-child,
  .meaning-card .card-content {
    transition: none !important;
  }
}
/* =====================================================
   AMP INTRO – EXTRA POLISH
   ===================================================== */

/* ambient section glow */
.amp-intro-section .container::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: min(960px, 94%);
  height: 220px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 210, 122, 0.08) 0%,
    rgba(84, 209, 255, 0.04) 38%,
    transparent 74%
  );
  filter: blur(22px);
  pointer-events: none;
  z-index: 0;
}

/* slightly stronger title presence */
.amp-intro-section h2 {
  text-shadow:
    0 8px 34px rgba(0, 0, 0, 0.46),
    0 0 28px rgba(255, 210, 122, 0.10);
}

/* improve intro copy box */
.amp-intro-section .section-intro::before {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.045),
      rgba(255,255,255,0.015)
    );
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    0 20px 36px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* amplify frame gets more depth */
.amplify-frame {
  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(255, 210, 122, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* subtle breathing glow */
.amplify-frame-border::before {
  animation:
    introCardBorderSpin 10s linear infinite,
    introBorderGlow 3.6s ease-in-out infinite alternate;
}

/* words feel more premium */
.amplify-word {
  letter-spacing: 0.1em;
}

.amplify-word:first-child {
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(255, 210, 122, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* cards get stronger depth */
.amp-card {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(255, 210, 122, 0.03),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.amp-card:hover {
  box-shadow:
    0 26px 52px rgba(0, 0, 0, 0.42),
    0 0 26px rgba(255, 210, 122, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* border glow pulses a little */
.amp-card-border::before {
  animation:
    introCardBorderSpin 9s linear infinite,
    introBorderGlow 3.4s ease-in-out infinite alternate;
}

/* inner card edge refinement */
.amp-card-border::after {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 0 18px rgba(255, 210, 122, 0.02);
}

/* video gets a more cinematic finish */
.amp-card-video {
  filter: saturate(1.03) contrast(1.03) brightness(0.98);
}

.amp-card:hover .amp-card-video {
  filter: saturate(1.08) contrast(1.05) brightness(1.03);
}

/* optional paused state class for JS if you want */
.amp-card-video.is-finished {
  filter: saturate(0.98) contrast(1.02) brightness(0.92);
}

/* content box stronger glass */
.amp-card p {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.09),
      rgba(255,255,255,0.045)
    );
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* title line glow */
.amp-card h3::after {
  box-shadow: 0 0 14px rgba(255, 210, 122, 0.10);
}

/* stronger hover title polish */
.amp-card:hover h3 {
  text-shadow:
    0 4px 18px rgba(0, 0, 0, 0.62),
    0 0 22px rgba(255, 210, 122, 0.12);
}

/* tiny staggered float to keep section alive */
.amp-card:nth-child(1) {
  animation:
    introCardIn 0.8s ease both,
    ampCardFloat 6s ease-in-out infinite;
  animation-delay: 0.08s, 1.2s;
}

.amp-card:nth-child(2) {
  animation:
    introCardIn 0.8s ease both,
    ampCardFloat 6.5s ease-in-out infinite;
  animation-delay: 0.2s, 1.5s;
}

.amp-card:nth-child(3) {
  animation:
    introCardIn 0.8s ease both,
    ampCardFloat 7s ease-in-out infinite;
  animation-delay: 0.32s, 1.8s;
}

/* =====================================================
   EXTRA ANIMATIONS
   ===================================================== */

@keyframes introBorderGlow {
  0% {
    opacity: 0.72;
    filter: drop-shadow(0 0 6px rgba(255, 210, 122, 0.08));
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(255, 210, 122, 0.16));
  }
}

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

/* =====================================================
   08. LIFESTYLE SECTION
   ===================================================== */
.lifestyle-section {
  text-align: center;
  background-image: url("../assets/smokey_flag.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--light-color);
  position: relative;
}

.lifestyle-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(26, 26, 26, 0.85);
  z-index: 0;
  transition: opacity 0.4s ease;
}

.lifestyle-section:hover::before {
  opacity: 0.8;
}

.lifestyle-section .container {
  position: relative;
  z-index: 1;
}

.lifestyle-section h2 {
  text-align: center;
  color: var(--light-color);
  margin-bottom: 1.5rem;
}

.lifestyle-section .practices-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 30px;
}

.lifestyle-section .practice-card {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
              url("../assets/Tribalbird.jpg");
  background-size: 100% 400%;
  background-position: center;
  border-radius: var(--border-radius);
  padding: 26px 32px;
  box-shadow: var(--shadow);
  color: white;
  transition: all 0.3s ease;
  border: 2px solid var(--tribal-border-color);
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 128px;
  text-align: center;
  margin: 0;
  display: block;
}

.lifestyle-section .practice-card:nth-child(1) { background-position: top; }
.lifestyle-section .practice-card:nth-child(2) { background-position: center 33.33%; }
.lifestyle-section .practice-card:nth-child(3) { background-position: center 66.66%; }
.lifestyle-section .practice-card:nth-child(4) { background-position: bottom; }

.lifestyle-section .practice-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  border-color: var(--secondary-color);
}

.lifestyle-section .practice-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 77%,
    rgba(255, 255, 255, 0.15) 92%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lifestyle-section .practice-card:hover::after {
  opacity: 1;
  animation: cardShine 1.5s ease;
}

.lifestyle-section .practice-card h3 {
  color: var(--secondary-color);
  margin: 0 0 12px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease;
  display: block;
  font-size: 1.4rem;
  line-height: 1.2;
}

.lifestyle-section .practice-card:hover h3 {
  color: var(--accent-color);
}

.lifestyle-section .practice-card p {
  margin: 0;
  line-height: 1.7;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s ease;
  display: block;
}

.lifestyle-section .practice-card:hover p {
  transform: translateY(-2px);
}

/* =====================================================
   09. KNOWLEDGE BRIDGE
   ===================================================== */

.knowledge-bridge-section {
  position: relative;
  background-image: url("../assets/images/knowledgebridge.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--light-color);
  overflow: hidden;
}

.knowledge-bridge-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 210, 122, 0.08), transparent 26%),
    radial-gradient(circle at 82% 24%, rgba(84, 209, 255, 0.07), transparent 24%),
    linear-gradient(
      180deg,
      rgba(8, 10, 16, 0.90) 0%,
      rgba(12, 15, 22, 0.92) 42%,
      rgba(8, 10, 16, 0.95) 100%
    );
  z-index: 0;
}

.knowledge-bridge-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(74%, 920px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 210, 122, 0.88),
    rgba(238, 139, 54, 0.70),
    transparent
  );
  box-shadow: 0 0 18px rgba(255, 210, 122, 0.16);
  opacity: 0.78;
  z-index: 0;
}

.knowledge-bridge-section .container {
  position: relative;
  z-index: 1;
}

/* =====================================================
   HEADER
   ===================================================== */

.bridge-header {
  position: relative;
  max-width: 980px;
  margin: 0 auto 56px;
  text-align: center;
  padding: 30px 30px 34px;
  border-radius: 28px;
  background:
    linear-gradient(
      180deg,
      rgba(10, 12, 18, 0.90),
      rgba(10, 12, 18, 0.76)
    );
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: bridgeHeroFade 1.1s ease-out both;
  overflow: hidden;
}

.bridge-header::before {
  content: "";
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 210, 122, 0.14) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  animation: bridgeAuraPulse 4s ease-in-out infinite;
}

.bridge-header::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 210, 122, 0.04),
    rgba(255, 210, 122, 0.16),
    rgba(84, 209, 255, 0.08),
    rgba(255, 210, 122, 0.04)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

/* =====================================================
   EYEBROW
   ===================================================== */

.bridge-header .eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 0.72rem 1.2rem;
  border-radius: 999px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffd27a;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.04)
    );
  border: 1px solid rgba(255, 210, 122, 0.18);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.18),
    0 0 16px rgba(255, 210, 122, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow:
    0 0 12px rgba(255, 210, 122, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  animation:
    bridgeEyebrowFloat 3.8s ease-in-out infinite alternate,
    bridgeTextGlow 3s ease-in-out infinite alternate;
}

.bridge-header .eyebrow::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -34%;
  width: 28%;
  height: 160%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.14),
    transparent
  );
  transform: rotate(12deg);
  opacity: 0.9;
  animation: bridgeEyebrowSweep 5.5s linear infinite;
}

.bridge-header .eyebrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 210, 122, 0.05),
    rgba(255, 210, 122, 0.32),
    rgba(84, 209, 255, 0.12),
    rgba(255, 210, 122, 0.05)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.95;
  pointer-events: none;
}

/* =====================================================
   TITLE
   ===================================================== */

.bridge-header h2 {
  position: relative;
  max-width: 900px;
  margin: 0 auto 1.2rem;
  padding: 20px 22px;
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      rgba(7, 9, 14, 0.78),
      rgba(7, 9, 14, 0.62)
    );
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.03);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1.12;
  color: #ffffff;
  letter-spacing: -0.02em;
  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(255, 210, 122, 0.08);
  animation: bridgeHeroRise 1.2s ease-out both;
}

.bridge-header h2::after {
  content: "";
  display: block;
  width: 110px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffd27a, transparent);
  box-shadow: 0 0 18px rgba(255, 210, 122, 0.35);
  animation: bridgeLinePulse 3s ease-in-out infinite;
}

/* =====================================================
   INTRO TEXT
   ===================================================== */

.knowledge-bridge-section .section-intro {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 22px;
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      rgba(6, 8, 14, 0.80),
      rgba(6, 8, 14, 0.64)
    );
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.03);
  font-size: 1.08rem;
  line-height: 1.85;
  color: rgba(244, 244, 244, 0.96);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  animation: bridgeHeroFade 1.5s ease-out both;
}

/* =====================================================
   GRID
   ===================================================== */

.bridge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
  perspective: 1200px;
}

/* =====================================================
   CARDS
   ===================================================== */

.bridge-card {
  position: relative;
  min-height: 320px;
  border-radius: 22px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.03);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  transform-origin: center bottom;
  animation: bridgeCardIn 0.8s ease-out both;
  isolation: isolate;
}

.bridge-card:nth-child(1) { animation-delay: 0.08s; }
.bridge-card:nth-child(2) { animation-delay: 0.18s; }
.bridge-card:nth-child(3) { animation-delay: 0.28s; }
.bridge-card:nth-child(4) { animation-delay: 0.38s; }

.bridge-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(255, 210, 122, 0.08);
  border-color: rgba(238, 139, 54, 0.45);
}

/* inner glass edge */
.bridge-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255, 210, 122, 0.08);
  pointer-events: none;
  z-index: 2;
}

/* light sweep */
.bridge-card::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 70%,
    rgba(255, 255, 255, 0.14) 85%,
    transparent 100%
  );
  transform: rotate(18deg);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}

.bridge-card:hover::after {
  opacity: 1;
  animation: bridgeShine 1.4s ease;
}

/* animated border wrapper */
.bridge-card-border {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.bridge-card-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    rgba(255, 210, 122, 0.00) 40deg,
    rgba(255, 210, 122, 0.42) 100deg,
    rgba(238, 139, 54, 0.48) 145deg,
    rgba(84, 209, 255, 0.24) 215deg,
    transparent 300deg,
    transparent 360deg
  );
  opacity: 0.72;
  animation: bridgeBorderSpin 10s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.bridge-card:hover .bridge-card-border::before {
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(255, 210, 122, 0.16));
}

.bridge-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.90) 0%,
    rgba(0, 0, 0, 0.58) 45%,
    rgba(0, 0, 0, 0.18) 100%
  );
  z-index: 1;
  transition: background 0.35s ease;
}

.bridge-card:hover .bridge-card-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.84) 0%,
    rgba(0, 0, 0, 0.50) 45%,
    rgba(0, 0, 0, 0.10) 100%
  );
}

.bridge-card-content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.2rem;
  padding: 28px;
}

/* =====================================================
   CARD TAG
   ===================================================== */

.bridge-tag {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffd27a;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 14px rgba(255, 210, 122, 0.08);
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.bridge-card:hover .bridge-tag {
  transform: translateY(-2px);
  background: rgba(255, 210, 122, 0.16);
  box-shadow: 0 0 18px rgba(255, 210, 122, 0.16);
}

/* =====================================================
   CARD TITLE
   ===================================================== */

.bridge-card h3 {
  margin: 2px 0 12px;
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(255, 210, 122, 0.05);
  transition:
    color 0.35s ease,
    transform 0.35s ease,
    text-shadow 0.35s ease;
}

.bridge-card h3::after {
  content: "";
  display: block;
  width: 62px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd27a, transparent);
  opacity: 0.85;
  transform: scaleX(0.92);
  transform-origin: left center;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.bridge-card:hover h3 {
  color: #ffd27a;
  transform: translateY(-2px);
  text-shadow:
    0 3px 16px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(255, 210, 122, 0.18);
}

.bridge-card:hover h3::after {
  transform: scaleX(1.08);
  opacity: 1;
}

/* =====================================================
   CARD BODY
   ===================================================== */

.bridge-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(245, 245, 245, 0.94);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transition:
    color 0.35s ease,
    transform 0.35s ease,
    opacity 0.35s ease;
}

.bridge-card:hover p {
  color: #ffffff;
  transform: translateY(-1px);
}

/* =====================================================
   BANNER / QUOTE
   ===================================================== */

.bridge-banner {
  position: relative;
  margin-top: 46px;
  padding: 28px 34px;
  border-left: 4px solid #ffd27a;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  animation: bridgeQuoteIn 1s ease-out both;
  animation-delay: 0.5s;
}

.bridge-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: skewX(-18deg);
  animation: bridgeQuoteShimmer 6s linear infinite;
}

.bridge-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 210, 122, 0.04),
    rgba(255, 210, 122, 0.18),
    rgba(84, 209, 255, 0.08),
    rgba(255, 210, 122, 0.04)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.8;
}

.bridge-banner blockquote {
  position: relative;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.9;
  color: #f7f4ee;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
  z-index: 1;
}

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

@keyframes bridgeHeroFade {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bridgeHeroRise {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bridgeAuraPulse {
  0%, 100% {
    opacity: 0.72;
    transform: translateX(-50%) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes bridgeTextGlow {
  0% {
    text-shadow: 0 0 8px rgba(255, 210, 122, 0.18);
  }
  100% {
    text-shadow: 0 0 16px rgba(255, 210, 122, 0.30);
  }
}

@keyframes bridgeLinePulse {
  0%, 100% {
    opacity: 0.82;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.08);
  }
}

@keyframes bridgeCardIn {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bridgeShine {
  0% {
    transform: translateX(-20%) rotate(18deg);
  }
  100% {
    transform: translateX(20%) rotate(18deg);
  }
}

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

@keyframes bridgeQuoteIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bridgeQuoteShimmer {
  0% { left: -30%; }
  100% { left: 130%; }
}

@keyframes bridgeEyebrowFloat {
  0% {
    transform: translateY(0);
    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.18),
      0 0 16px rgba(255, 210, 122, 0.08),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
  100% {
    transform: translateY(-2px);
    box-shadow:
      0 16px 30px rgba(0, 0, 0, 0.2),
      0 0 22px rgba(255, 210, 122, 0.12),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
}

@keyframes bridgeEyebrowSweep {
  0% { left: -34%; }
  100% { left: 128%; }
}

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

@media (max-width: 992px) {
  .bridge-grid {
    grid-template-columns: 1fr;
  }

  .bridge-header {
    padding: 24px 22px 28px;
  }
}

@media (max-width: 768px) {
  .knowledge-bridge-section {
    background-attachment: scroll;
  }

  .bridge-header {
    border-radius: 22px;
    padding: 22px 16px 24px;
  }

  .bridge-header h2 {
    font-size: 2rem;
    padding: 16px 14px;
    border-radius: 18px;
  }

  .knowledge-bridge-section .section-intro {
    padding: 16px 14px;
    border-radius: 16px;
    font-size: 1rem;
  }

  .bridge-card {
    min-height: 260px;
    border-radius: 18px;
  }

  .bridge-card-border {
    border-radius: 18px;
  }

  .bridge-card-content {
    padding: 22px;
  }

  .bridge-banner {
    padding: 22px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bridge-header,
  .bridge-header::before,
  .bridge-header .eyebrow,
  .bridge-header .eyebrow::before,
  .bridge-header h2,
  .bridge-header h2::after,
  .knowledge-bridge-section .section-intro,
  .bridge-card,
  .bridge-card::after,
  .bridge-card-border::before,
  .bridge-banner,
  .bridge-banner::before {
    animation: none !important;
  }

  .bridge-card,
  .bridge-card h3,
  .bridge-card p,
  .bridge-tag {
    transition: none !important;
  }
}
/* =====================================================
   10. PLATFORM ECOSYSTEM
   ===================================================== */
/*/* ═══════════════════════════════════════════════════════════
   CARD-AMP — Internal carousel + project icon styles
   Add this alongside your existing ecosystem CSS.
   Nothing else changes.
   ═══════════════════════════════════════════════════════════ */

/* ── Card shell ── */
.ecosystem-card.card-amp {
  position: relative;
  padding: 0;
  overflow: hidden;
}

/* ── Project icon — shared across all cards ── */
.project-icon {
  width: 120px;
  height: 120px;
  border-radius: 26px;
  overflow: hidden;
  margin-bottom: 1.2rem;
  position: relative;
  flex-shrink: 0;

  border: 1px solid rgba(255, 210, 122, .22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 8px 28px rgba(0, 0, 0, .45),
    0 0 20px rgba(255, 210, 122, .08);

  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 210, 122, .10),
    rgba(0, 0, 0, .35)
  );

  animation: iconGlow 4s ease-in-out infinite;
}

@keyframes iconGlow {
  0%,100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.04) inset,
      0 8px 28px rgba(0,0,0,.45),
      0 0 20px rgba(255,210,122,.08);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 10px 32px rgba(0,0,0,.50),
      0 0 32px rgba(255,210,122,.22),
      0 0 60px rgba(255,210,122,.08);
  }
}

/* spinning ring */
.project-icon::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 28px;
  background: conic-gradient(
    rgba(255,210,122,.55),
    rgba(84,209,255,.35),
    rgba(157,0,255,.25),
    rgba(255,210,122,.55)
  );
  z-index: 0;
  animation: iconRingSpin 6s linear infinite;
  opacity: .6;
}

/* ring mask */
.project-icon::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 24px;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255,210,122,.10),
    rgba(8,11,20,.92)
  );
  z-index: 1;
}

@keyframes iconRingSpin {
  to { transform: rotate(360deg); }
}

/* base image styles — shared */
.project-icon img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94), filter .4s ease;
  filter: brightness(1.0) saturate(1.08) contrast(1.04);
}

/* hover states */
.ecosystem-card:hover .project-icon {
  animation-play-state: paused;
  border-color: rgba(255,210,122,.50);
}

.ecosystem-card:hover .project-icon::before {
  animation-duration: 2s;
  opacity: 1;
}

.ecosystem-card:hover .project-icon img {
  transform: scale(1.08);
  filter: brightness(1.08) saturate(1.15) contrast(1.06);
}

/* ── Per-card icon overrides ── */

.card-amp .project-icon img {
  object-fit: cover;
  width: 85%;
  height: 85%;
}

/* Ikeverse — source image is small so scale it up to fill the container */
.card-ikeverse .project-icon img {
  object-fit: cover;
  width: 85%;
  height: 85%;

}

.card-history .project-icon {
  width: 100px;
  height: 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
} 

.card-history .project-icon img {
  width: 85%;
  height: 85%;
  object-fit: cover;
  display: block;
}

.card-nalulf .project-icon {
  width: 100px;
  height: 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-nalulf .project-icon img {
  width: 85%;
  height: 85%;
  object-fit: cover;
  display: block;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .project-icon,
  .project-icon::before { animation: none; }
  .project-icon img     { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   AMP INNER CAROUSEL
   ═══════════════════════════════════════════════════════════ */

.amp-inner-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.amp-inner-track::-webkit-scrollbar { display: none; }

.amp-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  padding: 32px;
  box-sizing: border-box;
  overflow: hidden;
}

.amp-slide .card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(1.05) contrast(1.04) brightness(.72);
  transition: filter .4s ease;
}
.ecosystem-card.card-amp:hover .amp-slide .card-video {
  filter: saturate(1.10) contrast(1.06) brightness(.85);
}

.amp-slide .card-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(8,11,20,.20) 0%,
    rgba(8,11,20,.50) 45%,
    rgba(8,11,20,.88) 100%
  );
}

.amp-slide .card-top-glow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 110px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,210,122,.07), transparent);
}

.amp-slide-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.amp-slide-body .project-icon,
.amp-slide-body h3,
.amp-slide-body .project-subtitle,
.amp-slide-body .project-description,
.amp-slide-body .project-features,
.amp-slide-body .project-link {
  position: relative;
  z-index: 2;
}

/* ── Arrows ── */
.amp-inner-prev,
.amp-inner-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8,11,20,.62);
  color: rgba(255,255,255,.88);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .2s ease, background .2s ease, transform .18s ease;
  backdrop-filter: blur(6px);
}
.amp-inner-prev { left: 10px; }
.amp-inner-next { right: 10px; }
.amp-inner-prev svg,
.amp-inner-next svg { width: 16px; height: 16px; }

.amp-inner-prev:hover,
.amp-inner-next:hover {
  border-color: rgba(255,210,122,.55);
  background: rgba(255,210,122,.12);
  transform: translateY(-50%) scale(1.08);
}
.amp-inner-prev:disabled,
.amp-inner-next:disabled {
  opacity: .25;
  pointer-events: none;
}

/* ── Dots ── */
.amp-inner-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 7px;
  align-items: center;
}
.amp-inner-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .22s ease, transform .22s ease, border-color .22s ease;
}
.amp-inner-dot.is-active {
  background: rgba(255,210,122,.90);
  border-color: rgba(255,210,122,.90);
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(255,210,122,.5);
}

/* ── Carousel reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .amp-inner-track { scroll-behavior: auto; }
  .amp-inner-prev,
  .amp-inner-next  { transition: none; }
}
/* =====================================================
   11. IKEVERSE FEATURE SECTION
   ===================================================== */
.ikeverse-section {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  overflow: hidden;
}

.ikeverse-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 117, 117, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 220, 232, 0.15) 0%, transparent 50%);
  animation: backgroundPulse 8s ease-in-out infinite alternate;
}

.sacred-mission {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 60px 40px;
  margin-bottom: 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.sacred-mission::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
  transform: rotate(-45deg);
  transition: transform 0.6s ease;
}

.sacred-mission:hover::before {
  transform: rotate(-45deg) translate(30px, 30px);
}

.sacred-mission:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.mission-icon {
  font-size: 4rem;
  margin-bottom: 30px;
  display: inline-block;
  animation: gentleFloat 3s ease-in-out infinite;
}

.mission-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}

.mission-text {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #d0d0d0;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ikeverse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 50px;
  margin-bottom: 100px;
  position: relative;
}

.ikeverse-card {
  position: relative;
  border-radius: 24px;
  overflow: visible;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  height: fit-content;
}

.ikeverse-card .card-main-content {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.12));
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 35px 35px 40px 35px;
  height: 320px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.ikeverse-card .card-main-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--card-accent) 50%, transparent 100%);
  animation: cardBorderFlow 3s ease-in-out infinite;
}

.ikeverse-card .card-wave {
  position: absolute;
  bottom: 0;
  left: -50%;
  width: 200%;
  height: 120px;
  background: linear-gradient(90deg, transparent, var(--card-wave-color), transparent);
  transform: translateY(120px) rotate(-2deg);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0.6;
}

.ikeverse-card:hover .card-wave {
  transform: translateY(0) rotate(-2deg);
  opacity: 1;
}

.card-preservation {
  --card-accent: #00d4ff;
  --card-wave-color: rgba(0, 212, 255, 0.15);
  --card-glow: rgba(0, 212, 255, 0.3);
  background: radial-gradient(circle at 30% 70%, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
}

.card-learning {
  --card-accent: #ff6b35;
  --card-wave-color: rgba(255, 107, 53, 0.15);
  --card-glow: rgba(255, 107, 53, 0.3);
  background: radial-gradient(circle at 70% 30%, rgba(255, 107, 53, 0.08) 0%, transparent 50%);
}

.card-sovereignty {
  --card-accent: #00ff88;
  --card-wave-color: rgba(0, 255, 136, 0.15);
  --card-glow: rgba(0, 255, 136, 0.3);
  background: radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.08) 0%, transparent 50%);
}

.ikeverse-card .card-icon {
  font-size: 3.5rem;
  margin-bottom: 15px;
  animation: bounce 2s infinite;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ikeverse-card .card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
}

.ikeverse-card .card-content h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
  flex-shrink: 0;
}

.ikeverse-card .card-content p {
  font-size: 1.1rem;
  color: #c0c0c0;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
}

.card-preservation .card-content {
  margin-top: -35px;
}

.ikeverse-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #78c4e8;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.ikeverse-link:hover {
  color: #ffffff;
  transform: translateX(5px);
}

.ikeverse-link span {
  transition: transform 0.3s ease;
}

.ikeverse-link:hover span {
  transform: translateX(5px);
}

.ikeverse-card:hover {
  transform: translateY(-20px) scale(1.03);
  z-index: 10;
}

.ikeverse-card:hover .card-main-content {
  box-shadow: 0 30px 100px var(--card-glow);
  border-color: var(--card-accent);
}

.card-preservation:hover .card-main-content {
  box-shadow: 0 30px 100px rgba(0, 212, 255, 0.4);
}

.card-learning:hover .card-main-content {
  box-shadow: 0 30px 100px rgba(255, 107, 53, 0.4);
}

.card-sovereignty:hover .card-main-content {
  box-shadow: 0 30px 100px rgba(0, 255, 136, 0.4);
}

.tech-details-popout,
.learning-features-popout,
.governance-features-popout {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.98));
  backdrop-filter: blur(30px);
  border: 1px solid var(--card-accent);
  border-top: none;
  border-radius: 0 0 24px 24px;
  padding: 35px 30px;
  transform: translateY(-30px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 20;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  margin-top: -1px;
}

.tech-details-popout::before,
.learning-features-popout::before,
.governance-features-popout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--card-accent) 50%, transparent 100%);
  animation: popoutGlow 2s ease-in-out infinite alternate;
}

.ikeverse-card:hover .tech-details-popout,
.ikeverse-card:hover .learning-features-popout,
.ikeverse-card:hover .governance-features-popout {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.tech-item,
.feature-item,
.governance-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 25px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.tech-item::before,
.feature-item::before,
.governance-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.tech-item:hover,
.feature-item:hover,
.governance-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.15));
  transform: translateX(12px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.tech-item:hover::before,
.feature-item:hover::before,
.governance-item:hover::before {
  left: 100%;
}

.tech-icon,
.feature-icon,
.governance-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.tech-item:hover .tech-icon,
.feature-item:hover .feature-icon,
.governance-item:hover .governance-icon {
  background: var(--card-accent);
  color: #000;
  transform: scale(1.1);
  box-shadow: 0 5px 20px var(--card-glow);
}

.tech-item h4,
.feature-item h4,
.governance-item h4 {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 5px;
  transition: color 0.3s ease;
}

.tech-item:hover h4,
.feature-item:hover h4,
.governance-item:hover h4 {
  color: var(--card-accent);
}

.tech-item p,
.feature-item p,
.governance-item p {
  color: #b0b0b0;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.tech-item:hover p,
.feature-item:hover p,
.governance-item:hover p {
  color: #e0e0e0;
}

.roadmap-section {
  margin-bottom: 80px;
  position: relative;
}

.roadmap-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(120, 220, 232, 0.3) 10%,
    rgba(74, 144, 226, 0.6) 30%,
    rgba(255, 117, 117, 0.6) 50%,
    rgba(74, 144, 226, 0.6) 70%,
    rgba(120, 220, 232, 0.3) 90%,
    transparent 100%
  );
  animation: roadmapPulse 4s ease-in-out infinite;
  z-index: 0;
}

.roadmap-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 2;
}

.roadmap-title::before,
.roadmap-title::after {
  content: "⚡";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  animation: electricPulse 2s ease-in-out infinite alternate;
}

.roadmap-title::before {
  left: -60px;
}

.roadmap-title::after {
  right: -60px;
  animation-direction: alternate-reverse;
}

.roadmap-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  position: relative;
  z-index: 1;
}

.phase-item {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 35px 30px;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.phase-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, transparent 0%, var(--phase-color) 50%, transparent 100%);
  animation: borderFlow 3s ease-in-out infinite;
}

.phase-item::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--phase-glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: hologramSpin 6s linear infinite;
}

.phase-completed {
  --phase-color: #00ff88;
  --phase-glow: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.2);
}

.phase-progress {
  --phase-color: #00d4ff;
  --phase-glow: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.2);
  animation: activePhase 2s ease-in-out infinite alternate;
}

.phase-planned {
  --phase-color: #ff6b35;
  --phase-glow: rgba(255, 107, 53, 0.1);
  border-color: rgba(255, 107, 53, 0.2);
}

.phase-future {
  --phase-color: #b967db;
  --phase-glow: rgba(185, 103, 219, 0.1);
  border-color: rgba(185, 103, 219, 0.2);
}

.phase-item:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  border-color: var(--phase-color);
}

.phase-item:hover::after {
  opacity: 1;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin: 15px 0;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--phase-color), rgba(255, 255, 255, 0.8));
  border-radius: 10px;
  transition: width 1s ease-in-out;
  position: relative;
  animation: progressGlow 2s ease-in-out infinite alternate;
}

.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

.progress-text {
  font-size: 0.9rem;
  color: var(--phase-color);
  font-weight: 600;
  margin-top: 8px;
  text-align: center;
}

.phase-popout {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: linear-gradient(145deg, rgba(10, 14, 39, 0.95), rgba(26, 29, 46, 0.95));
  backdrop-filter: blur(30px);
  border: 2px solid var(--phase-color);
  border-radius: 25px;
  padding: 40px;
  z-index: 1000;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}

.phase-popout.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.popout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.popout-overlay.active {
  opacity: 1;
  visibility: visible;
}

.popout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.popout-title {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.popout-close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 5px;
  line-height: 1;
}

.popout-close:hover {
  color: var(--phase-color);
  transform: rotate(90deg);
}

.popout-content {
  color: #d0d0d0;
  line-height: 1.8;
  font-size: 1.1rem;
}

.popout-content h5 {
  color: var(--phase-color);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 25px 0 15px 0;
}

.popout-content ul {
  list-style: none;
  padding-left: 0;
}

.popout-content li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}

.popout-content li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--phase-color);
  font-weight: bold;
}

.phase-indicator {
  font-size: 3rem;
  margin-bottom: 20px;
  display: inline-block;
  position: relative;
  animation: gentleFloat 3s ease-in-out infinite;
  text-align: center;
  width: 100%;
}

.phase-indicator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--phase-glow) 0%, transparent 70%);
  border-radius: 50%;
  animation: indicatorGlow 2s ease-in-out infinite alternate;
}

.phase-content h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 2;
}

.phase-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  z-index: 2;
}

.phase-status::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.phase-item:hover .phase-status::before {
  left: 100%;
}

.phase-completed .phase-status {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.25));
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.4);
  box-shadow: 0 4px 15px rgba(0, 255, 136, 0.2);
}

.phase-progress .phase-status {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.25));
  color: #00d4ff;
  border: 1px solid rgba(0, 212, 255, 0.4);
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);
  animation: statusPulse 2s ease-in-out infinite alternate;
}

.phase-planned .phase-status {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 107, 53, 0.25));
  color: #ff6b35;
  border: 1px solid rgba(255, 107, 53, 0.4);
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.2);
}

.phase-future .phase-status {
  background: linear-gradient(135deg, rgba(185, 103, 219, 0.15), rgba(185, 103, 219, 0.25));
  color: #b967db;
  border: 1px solid rgba(185, 103, 219, 0.4);
  box-shadow: 0 4px 15px rgba(185, 103, 219, 0.2);
}

.phase-content p {
  color: #d0d0d0;
  line-height: 1.7;
  font-size: 1.05rem;
  position: relative;
  z-index: 2;
  margin-bottom: 15px;
}

.click-hint {
  position: absolute;
  bottom: 15px;
  right: 20px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  animation: clickPulse 2s ease-in-out infinite;
}

/* =====================================================
   12. PARALLAX QUOTE SECTION
   ===================================================== */

.parallax-quote-section {
  position: relative;
  background-image: url("../assets/hawaii-mountains.jpg.webp");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  text-align: center;
  padding: 140px 20px;
  overflow: hidden;
  isolation: isolate;
}

.parallax-quote-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 210, 122, 0.10), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(84, 209, 255, 0.07), transparent 26%);
  z-index: 0;
  pointer-events: none;
}

.parallax-quote-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(72%, 880px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 210, 122, 0.92),
    rgba(238, 139, 54, 0.75),
    transparent
  );
  box-shadow: 0 0 18px rgba(255, 210, 122, 0.18);
  opacity: 0.8;
  z-index: 1;
}

.parallax-quote-section .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(0, 0, 0, 0.76),
    rgba(0, 0, 0, 0.50)
  );
  z-index: 0;
}

.parallax-quote-section .container {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: auto;
  padding: 0 20px;
  animation: quoteSectionFadeUp 1.3s ease-out both;
}

/* =====================================================
   LAYOUT
   ===================================================== */

.quote-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 38px;
  align-items: center;
  padding: 32px;
  border-radius: 28px;
  background:
    linear-gradient(
      180deg,
      rgba(10, 12, 18, 0.72),
      rgba(10, 12, 18, 0.56)
    );
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.quote-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 210, 122, 0.04),
    rgba(255, 210, 122, 0.18),
    rgba(84, 209, 255, 0.08),
    rgba(255, 210, 122, 0.04)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}

.quote-layout::after {
  content: "";
  position: absolute;
  top: -15%;
  left: -18%;
  width: 36%;
  height: 130%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.06),
    transparent
  );
  transform: rotate(12deg);
  animation: quotePanelSweep 7s linear infinite;
  pointer-events: none;
}

/* =====================================================
   PORTRAIT
   ===================================================== */

.quote-image-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quote-image-wrap::before {
  content: "";
  position: absolute;
  width: 88%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 210, 122, 0.14) 0%,
    rgba(84, 209, 255, 0.06) 40%,
    transparent 72%
  );
  filter: blur(18px);
  animation: quotePortraitAura 5s ease-in-out infinite;
  z-index: 0;
}

.quote-image-wrap::after {
  content: "";
  position: absolute;
  width: 86%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 210, 122, 0.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 26px rgba(255, 210, 122, 0.08);
  animation: quotePortraitRing 6s ease-in-out infinite;
  z-index: 0;
}

.quote-portrait {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 280px);
  aspect-ratio: 1 / 1.18;
  object-fit: cover;
  object-position: center top;
  border-radius: 28px;
  border: 1px solid rgba(255, 210, 122, 0.22);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(255, 210, 122, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    filter 0.35s ease;
}

.quote-layout:hover .quote-portrait {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255, 210, 122, 0.36);
  box-shadow:
    0 26px 50px rgba(0, 0, 0, 0.40),
    0 0 34px rgba(255, 210, 122, 0.16);
  filter: brightness(1.03);
}

/* =====================================================
   TEXT
   ===================================================== */

.quote-content {
  position: relative;
  z-index: 2;
  text-align: left;
}

.parallax-quote-section blockquote {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-style: italic;
  line-height: 1.9;
  color: #f7f4ee;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  transition:
    transform 0.3s ease,
    color 0.3s ease,
    text-shadow 0.3s ease;
  cursor: default;
}

.parallax-quote-section blockquote::before {
  content: "“";
  position: absolute;
  top: -0.38em;
  left: -0.18em;
  font-size: 4rem;
  line-height: 1;
  color: rgba(255, 210, 122, 0.28);
  text-shadow: 0 0 20px rgba(255, 210, 122, 0.10);
}

.parallax-quote-section blockquote:hover {
  transform: scale(1.01);
  color: #ffffff;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.62),
    0 0 18px rgba(255, 210, 122, 0.08);
}

.parallax-quote-section cite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  color: #ffd27a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );
  border: 1px solid rgba(255, 210, 122, 0.14);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.03);
  text-shadow:
    0 0 12px rgba(255, 210, 122, 0.14),
    0 1px 4px rgba(0, 0, 0, 0.35);
}

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

@keyframes quoteSectionFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes quotePanelSweep {
  0% {
    left: -22%;
  }
  100% {
    left: 120%;
  }
}

@keyframes quotePortraitAura {
  0%, 100% {
    opacity: 0.72;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes quotePortraitRing {
  0%, 100% {
    transform: translateY(0) scale(0.98);
  }
  50% {
    transform: translateY(-4px) scale(1.01);
  }
}

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

@media (max-width: 992px) {
  .quote-layout {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
  }

  .quote-content {
    text-align: center;
  }

  .parallax-quote-section blockquote::before {
    left: 50%;
    transform: translateX(-50%);
    top: -0.7em;
  }

  .quote-image-wrap {
    order: -1;
  }
}

@media (max-width: 768px) {
  .parallax-quote-section {
    padding: 110px 16px;
    background-attachment: scroll;
  }

  .quote-layout {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .quote-portrait {
    width: min(100%, 230px);
    border-radius: 22px;
  }

  .parallax-quote-section blockquote {
    font-size: 1.08rem;
    line-height: 1.8;
  }

  .parallax-quote-section cite {
    font-size: 0.88rem;
    letter-spacing: 0.06em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-quote-section .container,
  .quote-layout::after,
  .quote-image-wrap::before,
  .quote-image-wrap::after {
    animation: none !important;
  }

  .quote-portrait,
  .parallax-quote-section blockquote {
    transition: none !important;
  }
}

/* =====================================================
   13. MARKETPLACE PREVIEW SECTION
   ===================================================== */
.marketplace-section {
  position: relative;
  overflow: hidden;
}

.featured-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 40px 0;
  padding: 30px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-radius: var(--border-radius);
  position: relative;
}

.featured-products::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--border-radius);
}

.product-card {
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.3);
}

.product-image-container {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-content,
.product-info {
  padding: 20px;
  position: relative;
  z-index: 1;
}

.text-container {
  background: rgba(255, 255, 255, 0.85);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 15px;
  backdrop-filter: blur(5px);
}

.product-title {
  font-size: 1.3rem;
  color: var(--dark-color);
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px 15px;
  border-radius: 6px;
  display: inline-block;
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.product-price-container {
  margin: 15px 0;
}

.product-price {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  color: #222;
  background: rgba(255, 255, 255, 0.7);
  padding: 12px 16px;
  border-radius: 8px;
  margin: 15px 0;
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1.2s ease both;
  opacity: 0;
  transform: translateY(20px);
}

.product-card:nth-child(2) .product-price {
  animation-delay: 0.4s;
}

.view-all-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: white;
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  border: none;
}

.view-all-btn:hover {
  background-color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.product-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--accent-color);
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  z-index: 2;
  backdrop-filter: blur(2px);
}

.marketplace-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
  box-sizing: border-box;
}

.under-construction-tape {
  position: relative;
  background: linear-gradient(
    45deg,
    #ffcc00 25%,
    #ff6600 25%,
    #ff6600 50%,
    #ffcc00 50%,
    #ffcc00 75%,
    #ff6600 75%
  );
  background-size: 40px 40px;
  color: #000;
  font-weight: bold;
  font-size: 1.5rem;
  padding: 20px 40px;
  border: 3px solid #000;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  animation: constructionFlash 2s infinite alternate;
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  max-width: 90%;
  word-wrap: break-word;
  box-sizing: border-box;
}

.under-construction-tape::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: tapeShine 3s infinite;
}

/* =====================================================
   14. KNOWLEDGE HUB / RESOURCE CARDS (LEGACY)
   ===================================================== */
.knowledge-hub-section {
  padding: 4rem 1rem;
  background:
    radial-gradient(circle at 20% 30%, rgba(74, 144, 226, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(157, 80, 187, 0.15) 0%, transparent 40%),
    linear-gradient(to bottom, var(--color-bg-dark), var(--color-bg-light));
  position: relative;
  overflow: hidden;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  position: relative;
}

.knowledge-card {
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  position: relative;
  overflow: visible;
  z-index: 1;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(10px);
}

.card-main-link {
  display: block;
  padding: 2rem;
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.card-olelo {
  background: linear-gradient(135deg, var(--color-olelo) 0%, #3a7bd5 100%);
  color: white;
}

.card-ikeverse {
  background: linear-gradient(135deg, var(--color-ikeverse) 0%, #6e48aa 100%);
  color: white;
}

.card-malama {
  background: linear-gradient(135deg, var(--color-malama) 0%, #4bc0c8 100%);
  color: var(--color-text);
}

.knowledge-card .card-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  transition: all var(--transition-speed) ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.knowledge-card .card-content {
  margin-bottom: 1.5rem;
}

.knowledge-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.knowledge-card p {
  line-height: 1.6;
  opacity: 0.9;
}

.knowledge-link {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-speed) ease;
  position: relative;
  padding-bottom: 2px;
}

.knowledge-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-speed) ease;
}

.knowledge-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.knowledge-link span {
  margin-left: 0.5rem;
  transition: transform var(--transition-speed) ease;
}

.knowledge-card .card-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease;
}

.knowledge-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

.knowledge-card:hover .card-icon {
  transform: scale(1.1) translateY(-5px);
}

.knowledge-card:hover .card-wave {
  transform: scaleX(1);
}

.knowledge-link:hover span {
  transform: translateX(5px);
}

.subcategories-popout {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px) scale(0.95);
  width: min(320px, 90vw);
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1.5);
  pointer-events: none;
  z-index: 500;
  background: rgba(30, 20, 100, 0.98);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.subcategories-popout::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  background: inherit;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  backdrop-filter: blur(12px);
  z-index: -1;
}

.knowledge-card:hover .subcategories-popout {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-100%) scale(1);
  pointer-events: auto;
}

.subcategory {
  padding: 1rem;
  border-radius: 16px;
  text-align: center;
  transition: all var(--transition-speed) ease-out;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.subcategory:hover {
  transform: translateY(-4px) scale(1.02);
  background: rgba(255, 255, 255, 0.2) !important;
}

.sub-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.card-olelo .subcategories-popout {
  background: rgba(30, 60, 120, 0.98);
}

.card-ikeverse .subcategories-popout {
  background: rgba(80, 30, 100, 0.98);
}

.card-malama .subcategories-popout {
  background: rgba(20, 100, 90, 0.98);
}

/* =====================================================
   15. JOIN SECTION
   ===================================================== */
.join-section {
  background-color: var(--dark-color);
  color: var(--light-color);
  border-top: 2px solid var(--tribal-border-color);
}

.join-intro {
  max-width: 700px;
  margin: 0 auto 30px;
  text-align: center;
}

.join-form {
  max-width: 600px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--tribal-border-color);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--tribal-border-color);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--light-color);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.checkbox-group {
  display: flex;
  align-items: center;
}

.checkbox-group input {
  width: auto;
  margin-right: 10px;
}

.checkbox-group label {
  margin-bottom: 0;
}

.submit-btn {
  position: relative;
  width: 100%;
}

.btn-text {
  transition: opacity var(--transition-speed);
}

.spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hidden {
  display: none;
}

/* =====================================================
   16. FINAL CTA
   ===================================================== */

.final-cta-section {
  position: relative;
  padding: 120px 0;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 210, 122, 0.08), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(84, 209, 255, 0.07), transparent 24%),
    radial-gradient(circle at 50% 82%, rgba(138, 110, 255, 0.05), transparent 28%),
    linear-gradient(135deg, #181a1b 0%, #111214 100%);
  color: var(--light-color);
  overflow: hidden;
}

.final-cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,0.025) 0%,
      transparent 18%,
      transparent 82%,
      rgba(255,255,255,0.025) 100%
    );
  pointer-events: none;
}

.final-cta-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(72%, 900px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 210, 122, 0.9),
    rgba(238, 139, 54, 0.72),
    transparent
  );
  box-shadow: 0 0 18px rgba(255, 210, 122, 0.16);
  opacity: 0.82;
}

.final-cta-section .container {
  position: relative;
  z-index: 2;
}

.final-cta-box {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  padding: 3.5rem 2.4rem;
  border-radius: 28px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.04)
    );
  border: 1px solid rgba(238, 139, 54, 0.16);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  animation: finalCtaFadeUp 1s ease both;
}

.final-cta-box::before {
  content: "";
  position: absolute;
  top: -18%;
  left: -12%;
  width: 38%;
  height: 140%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.07),
    transparent
  );
  transform: rotate(12deg);
  animation: finalCtaSweep 8s linear infinite;
  pointer-events: none;
}

.final-cta-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 210, 122, 0.04),
    rgba(255, 210, 122, 0.18),
    rgba(84, 209, 255, 0.08),
    rgba(255, 210, 122, 0.04)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.88;
}

/* =====================================================
   EYEBROW
   ===================================================== */

.final-cta-box .eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  padding: 0.72rem 1.15rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffd27a;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.04)
    );
  border: 1px solid rgba(255, 210, 122, 0.16);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.18),
    0 0 16px rgba(255,210,122,0.08),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow:
    0 0 12px rgba(255, 210, 122, 0.18),
    0 2px 8px rgba(0,0,0,0.22);
  overflow: hidden;
  animation: finalCtaEyebrowFloat 3.8s ease-in-out infinite alternate;
}

.final-cta-box .eyebrow::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -34%;
  width: 28%;
  height: 160%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.14),
    transparent
  );
  transform: rotate(12deg);
  opacity: 0.9;
  animation: finalCtaEyebrowSweep 5.5s linear infinite;
}

/* =====================================================
   TITLE
   ===================================================== */

.final-cta-box h2 {
  position: relative;
  margin: 0 auto 1.2rem;
  max-width: 860px;
  padding: 18px 20px;
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      rgba(8, 10, 16, 0.70),
      rgba(8, 10, 16, 0.52)
    );
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.03);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--light-color);
  text-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(255, 210, 122, 0.06);
  animation: finalCtaTitleRise 1.05s ease both;
}

.final-cta-box h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 4px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 210, 122, 1),
    rgba(238, 139, 54, 0.9),
    transparent
  );
  box-shadow:
    0 0 18px rgba(255, 210, 122, 0.18),
    0 0 28px rgba(238, 139, 54, 0.08);
  animation: finalCtaLinePulse 3.2s ease-in-out infinite;
}

/* =====================================================
   BODY TEXT
   ===================================================== */

.final-cta-box > p:not(.eyebrow) {
  position: relative;
  max-width: 760px;
  margin: 0 auto 2rem;
  padding: 18px 20px;
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      rgba(6, 8, 14, 0.66),
      rgba(6, 8, 14, 0.50)
    );
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.03);
  color: rgba(240, 240, 240, 0.90);
  line-height: 1.85;
  font-size: 1.04rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  animation: finalCtaFadeUp 1.2s ease both;
}

/* =====================================================
   CTA BUTTONS
   ===================================================== */

.final-cta-box .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 1.2rem;
  animation: finalCtaFadeUp 1.35s ease both;
}

.final-cta-box .cta-btn {
  position: relative;
  overflow: hidden;
  min-height: 50px;
  padding: 13px 24px;
  border-radius: 14px;
  font-weight: 700;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease;
}

.final-cta-box .cta-btn::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -40%;
  width: 40%;
  height: 160%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.16),
    transparent
  );
  transform: rotate(14deg);
  opacity: 0;
}

.final-cta-box .cta-btn:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.30),
    0 0 20px rgba(255, 210, 122, 0.08);
  filter: brightness(1.03);
}

.final-cta-box .cta-btn:hover::before {
  opacity: 1;
  animation: finalCtaBtnSweep 1.15s ease;
}

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

@keyframes finalCtaFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes finalCtaTitleRise {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes finalCtaLinePulse {
  0%, 100% {
    opacity: 0.82;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.08);
  }
}

@keyframes finalCtaSweep {
  0% {
    left: -14%;
  }
  100% {
    left: 120%;
  }
}

@keyframes finalCtaBtnSweep {
  0% {
    left: -45%;
  }
  100% {
    left: 145%;
  }
}

@keyframes finalCtaEyebrowFloat {
  0% {
    transform: translateY(0);
    box-shadow:
      0 12px 24px rgba(0,0,0,0.18),
      0 0 16px rgba(255,210,122,0.08),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
  100% {
    transform: translateY(-2px);
    box-shadow:
      0 16px 28px rgba(0,0,0,0.2),
      0 0 22px rgba(255,210,122,0.12),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }
}

@keyframes finalCtaEyebrowSweep {
  0% {
    left: -34%;
  }
  100% {
    left: 128%;
  }
}

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

@media (max-width: 768px) {
  .final-cta-section {
    padding: 90px 0;
  }

  .final-cta-box {
    padding: 2.25rem 1.2rem;
    border-radius: 22px;
  }

  .final-cta-box h2 {
    padding: 14px 14px;
    border-radius: 18px;
  }

  .final-cta-box > p:not(.eyebrow) {
    padding: 16px 14px;
    border-radius: 16px;
    font-size: 0.98rem;
  }

  .final-cta-box .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .final-cta-box .cta-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .final-cta-box,
  .final-cta-box::before,
  .final-cta-box .eyebrow,
  .final-cta-box .eyebrow::before,
  .final-cta-box h2,
  .final-cta-box h2::after,
  .final-cta-box > p:not(.eyebrow),
  .final-cta-box .cta-buttons {
    animation: none !important;
  }

  .final-cta-box .cta-btn,
  .final-cta-box h2,
  .final-cta-box .eyebrow {
    transition: none !important;
  }
}

/* =====================================================
   17. FOOTER
   ===================================================== */

.site-footer {
  position: relative;
  padding: 80px 0 30px;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 210, 122, 0.07), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(84, 209, 255, 0.06), transparent 24%),
    linear-gradient(180deg, #161514 0%, #0f1114 100%);
  color: #ffffff;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,0.02) 0%,
      transparent 18%,
      transparent 82%,
      rgba(255,255,255,0.02) 100%
    );
  pointer-events: none;
  z-index: 0;
}

.site-footer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(74%, 960px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 210, 122, 0.88),
    rgba(238, 139, 54, 0.72),
    transparent
  );
  box-shadow: 0 0 18px rgba(255, 210, 122, 0.16);
  opacity: 0.82;
  z-index: 1;
}

.footer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.06),
    rgba(0,0,0,0.16)
  );
  pointer-events: none;
  z-index: 0;
}

.site-footer .container {
  position: relative;
  z-index: 2;
}

/* =====================================================
   FOOTER CONTENT
   ===================================================== */

.footer-content {
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 0.95fr;
  gap: 40px;
  margin-bottom: 40px;
  padding: 28px;
  border-radius: 28px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.03)
    );
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.footer-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 210, 122, 0.04),
    rgba(255, 210, 122, 0.16),
    rgba(84, 209, 255, 0.08),
    rgba(255, 210, 122, 0.04)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}

.footer-content::after {
  content: "";
  position: absolute;
  top: -12%;
  left: -16%;
  width: 32%;
  height: 125%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.05),
    transparent
  );
  transform: rotate(12deg);
  animation: footerSweep 8s linear infinite;
  pointer-events: none;
}

/* =====================================================
   BRAND COLUMN
   ===================================================== */

.footer-brand {
  position: relative;
}

.footer-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 10px;
  border-radius: 22px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.09),
      rgba(255,255,255,0.04)
    );
  border: 1px solid rgba(255, 210, 122, 0.16);
  box-shadow:
    0 16px 28px rgba(0,0,0,0.22),
    0 0 18px rgba(255,210,122,0.08),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.footer-logo::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -35%;
  width: 30%;
  height: 160%;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,0.14),
    transparent
  );
  transform: rotate(12deg);
  opacity: 0.9;
  animation: footerLogoSweep 5.8s linear infinite;
}

.footer-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 210, 122, 0.06),
    rgba(255, 210, 122, 0.26),
    rgba(84, 209, 255, 0.12),
    rgba(255, 210, 122, 0.06)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.footer-logo:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255, 210, 122, 0.28);
  box-shadow:
    0 20px 34px rgba(0,0,0,0.28),
    0 0 24px rgba(255,210,122,0.12),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.footer-logo-video {
  display: block;
  width: auto;
  height: 92px;
  object-fit: contain;
  border-radius: 16px;
  position: relative;
  z-index: 2;
}

.footer-brand-title {
  margin: 18px 0 10px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-shadow:
    0 2px 10px rgba(0,0,0,0.35),
    0 0 12px rgba(255, 210, 122, 0.08);
}

.footer-brand-text {
  max-width: 420px;
  color: rgba(240, 240, 240, 0.84);
  line-height: 1.8;
  font-size: 0.98rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.22);
}

/* =====================================================
   HEADINGS
   ===================================================== */

.footer-links h3,
.footer-contact h3 {
  position: relative;
  margin-bottom: 18px;
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.footer-links h3::after,
.footer-contact h3::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd27a, transparent);
  opacity: 0.9;
}

/* =====================================================
   LINKS
   ===================================================== */

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(240, 240, 240, 0.82);
  text-decoration: none;
  transition:
    color 0.28s ease,
    transform 0.28s ease,
    text-shadow 0.28s ease;
}

.footer-links a::before {
  content: "•";
  margin-right: 10px;
  color: rgba(255, 210, 122, 0.8);
  transition: color 0.28s ease, transform 0.28s ease;
}

.footer-links a:hover {
  color: #ffffff;
  transform: translateX(5px);
  text-shadow: 0 0 12px rgba(255, 210, 122, 0.08);
}

.footer-links a:hover::before {
  color: #ffd27a;
  transform: scale(1.15);
}

/* =====================================================
   CONTACT
   ===================================================== */

.footer-contact p {
  margin: 0 0 12px;
  color: rgba(240, 240, 240, 0.84);
  line-height: 1.75;
}

.footer-contact strong {
  color: #ffd27a;
}

/* =====================================================
   SOCIALS
   ===================================================== */

.social-links {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.social-links a {
  text-decoration: none;
}

.social-icon {
  display: inline-block;
  width: 46px;
  height: 46px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.04)
    );
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 50%;
  position: relative;
  box-shadow:
    0 10px 18px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

.social-icon:hover {
  transform: translateY(-4px) scale(1.05);
  border-color: rgba(255, 210, 122, 0.24);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.06)
    );
  box-shadow:
    0 14px 24px rgba(0,0,0,0.24),
    0 0 18px rgba(255, 210, 122, 0.08);
}

.social-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}

.facebook::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z'/%3E%3C/svg%3E");
}

.instagram::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

.twitter::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z'/%3E%3C/svg%3E");
}

/* =====================================================
   FOOTER BOTTOM
   ===================================================== */

.footer-bottom {
  text-align: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
  margin: 0 0 8px;
  color: rgba(240, 240, 240, 0.76);
  line-height: 1.7;
}

.footer-bottom small {
  color: rgba(240, 240, 240, 0.68);
}

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

@keyframes footerSweep {
  0% {
    left: -18%;
  }
  100% {
    left: 120%;
  }
}

@keyframes footerLogoSweep {
  0% {
    left: -35%;
  }
  100% {
    left: 130%;
  }
}

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

@media (max-width: 992px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding: 64px 0 26px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 22px 18px;
    border-radius: 22px;
  }

  .footer-logo-video {
    height: 78px;
  }

  .footer-brand-title {
    font-size: 1.08rem;
  }

  .footer-brand-text,
  .footer-contact p,
  .footer-bottom p {
    font-size: 0.96rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-content::after,
  .footer-logo::before {
    animation: none !important;
  }

  .footer-logo,
  .social-icon,
  .footer-links a {
    transition: none !important;
  }
}
/* =====================================================
   18. LOADING OVERLAY
   ===================================================== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.loading-spinner-container {
  text-align: center;
}

.loading-message {
  color: white;
  margin-top: 20px;
  font-size: 1.2rem;
}

/* =====================================================
   19. ANIMATIONS
   ===================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(1.875rem);
  }
  to {
    opacity: 1;
    transform: translateY(1.25rem);
  }
}

@keyframes alohaCardFloat {
  0%, 100% { transform: translateY(-0.5rem) rotate(-0.5deg); }
  50% { transform: translateY(-1rem) rotate(0.5deg); }
}

@keyframes cardShine {
  0% { transform: rotate(30deg) translate(-30%, -30%); }
  100% { transform: rotate(30deg) translate(30%, 30%); }
}

@keyframes constructionFlash {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes tapeShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes backgroundPulse {
  0% { opacity: 0.3; }
  100% { opacity: 0.6; }
}

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

@keyframes cardBorderFlow {
  0%, 100% {
    background-position: -200% 0;
    opacity: 0.6;
  }
  50% {
    background-position: 200% 0;
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

@keyframes popoutGlow {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

@keyframes roadmapPulse {
  0%, 100% {
    opacity: 0.6;
    filter: blur(1px);
  }
  50% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes electricPulse {
  0% {
    color: #78c4e8;
    text-shadow: 0 0 10px #78c4e8;
  }
  100% {
    color: #4a90e2;
    text-shadow: 0 0 20px #4a90e2, 0 0 30px #4a90e2;
  }
}

@keyframes borderFlow {
  0%, 100% {
    background-position: -100% 0;
    opacity: 0.6;
  }
  50% {
    background-position: 100% 0;
    opacity: 1;
  }
}

@keyframes hologramSpin {
  0% { transform: rotate(0deg) scale(0.8); }
  100% { transform: rotate(360deg) scale(0.8); }
}

@keyframes activePhase {
  0% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 212, 255, 0.3);
  }
  100% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 212, 255, 0.5);
  }
}

@keyframes progressGlow {
  0% { box-shadow: 0 0 5px var(--phase-color); }
  100% { box-shadow: 0 0 20px var(--phase-color), 0 0 30px var(--phase-color); }
}

@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

@keyframes indicatorGlow {
  0% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes statusPulse {
  0% { box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2); }
  100% { box-shadow: 0 4px 25px rgba(0, 212, 255, 0.4); }
}

@keyframes clickPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes bridgeShine {
  0% { transform: translateX(-20%) rotate(18deg); }
  100% { transform: translateX(20%) rotate(18deg); }
}

@keyframes bridgeHeroFade {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bridgeHeroRise {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bridgeAuraPulse {
  0%, 100% {
    opacity: 0.7;
    transform: translateX(-50%) scale(0.95);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes bridgeTextGlow {
  0% {
    text-shadow: 0 0 8px rgba(255, 210, 122, 0.18);
  }
  100% {
    text-shadow: 0 0 16px rgba(255, 210, 122, 0.34);
  }
}

@keyframes bridgeLinePulse {
  0%, 100% {
    opacity: 0.8;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.08);
  }
}

@keyframes bridgeCardIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bridgeQuoteIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bridgeQuoteShimmer {
  0% { left: -35%; }
  100% { left: 120%; }
}

/* =====================================================
   20. RESPONSIVE
   ===================================================== */
@media (max-width: 992px) {
  .hero-grid,
  .hero-section .container {
    flex-direction: column;
    text-align: center;
  }

  .hero-content {
    margin-bottom: 3rem;
    text-align: center;
  }

  .hero-content h1::after {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-content .subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta,
  .hero-tags {
    justify-content: center;
  }

  .tiki-image {
    max-height: min(350px, 50vh);
  }

  .bridge-grid,
  .ecosystem-grid {
    grid-template-columns: 1fr;
  }

  .bridge-card {
    min-height: 300px;
  }
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--dark-color);
    box-shadow: var(--shadow);
    padding: 20px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-speed);
    border-bottom: 2px solid var(--tribal-border-color);
  }

  .main-nav.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .main-nav ul {
    flex-direction: column;
  }

  .main-nav li {
    margin: 10px 0;
  }

  section {
    padding: 60px 0;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .cta-btn {
    width: 100%;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .meaning-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .meaning-card {
    min-height: 18.75rem;
    background-position: center 35%;
  }

  .meaning-card .card-content {
    padding: 1.25rem;
  }

  .featured-products {
    grid-template-columns: 1fr;
    padding: 20px;
    background-attachment: scroll;
  }

  .product-image-container {
    height: 160px;
  }

  .text-container {
    padding: 15px;
  }

  .knowledge-grid {
    grid-template-columns: 1fr;
  }

  .subcategories-popout {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 300px;
    z-index: 1000;
    clip-path: none;
    border-radius: 24px;
  }

  .knowledge-card:hover .subcategories-popout {
    transform: translate(-50%, -50%) scale(1);
  }

  .subcategories-popout::after {
    display: none;
  }

  .subcategories-popout::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
  }

  .knowledge-card:hover .subcategories-popout::before {
    opacity: 1;
  }

  .phase-popout {
    width: 95%;
    padding: 25px;
    max-height: 85vh;
  }

  .popout-title {
    font-size: 1.5rem;
  }

  .roadmap-title::before,
  .roadmap-title::after {
    display: none;
  }

  .knowledge-bridge-section,
  .parallax-quote-section,
  .lifestyle-section {
    background-attachment: scroll;
  }

  .bridge-header h2 {
    font-size: 2rem;
  }

  .bridge-card {
    min-height: 260px;
  }

  .bridge-card-content,
  .bridge-banner,
  .ecosystem-card,
  .final-cta-box {
    padding: 22px;
  }

  .parallax-quote-section {
    padding: 100px 20px;
  }

  .parallax-quote-section blockquote {
    font-size: 1.2rem;
    line-height: 1.7;
  }

  .parallax-quote-section cite {
    font-size: 1rem;
  }

  .lifestyle-section .practice-card {
    min-height: auto;
    padding: 22px;
  }

  .ikeverse-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ikeverse-card .card-main-content {
    height: auto;
    min-height: 260px;
    padding: 28px 24px 32px;
  }

  .sacred-mission {
    padding: 40px 24px;
  }
}

@media print {
  .meaning-card {
    break-inside: avoid;
    min-height: auto;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bridge-header,
  .bridge-header::before,
  .bridge-header .eyebrow,
  .bridge-header h2,
  .knowledge-bridge-section .section-intro,
  .bridge-card,
  .bridge-banner,
  .bridge-banner::before {
    animation: none !important;
  }

  .bridge-card,
  .bridge-card h3,
  .bridge-card p,
  .bridge-tag {
    transition: none !important;
  }
}

/* =====================================================
   LOGO FRAME WITH BORDER + GLOW
   ===================================================== */

.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 68px;
  width: 68px;
  min-width: 68px;

  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );

  border: 1px solid rgba(255,210,122,0.35);

  box-shadow:
    0 10px 22px rgba(0,0,0,0.35),
    0 0 18px rgba(255,210,122,0.12),
    inset 0 1px 0 rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


/* ===== animated gradient border ===== */

.logo::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;

  background: conic-gradient(
    from 0deg,
    rgba(255,210,122,0.0),
    rgba(255,210,122,0.6),
    rgba(238,139,54,0.9),
    rgba(255,210,122,0.6),
    rgba(255,210,122,0.0)
  );

  opacity: 0.8;

  animation: logoBorderSpin 6s linear infinite;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  padding: 1px;

  pointer-events: none;
}


/* ===== inner glow ring ===== */

.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 12px rgba(255,210,122,0.12);

  pointer-events: none;
}


/* ===== hover glow ===== */

.logo:hover {
  transform: translateY(-2px) scale(1.04);

  border-color: rgba(255,210,122,0.7);

  box-shadow:
    0 14px 28px rgba(0,0,0,0.45),
    0 0 28px rgba(255,210,122,0.25),
    0 0 40px rgba(238,139,54,0.12),
    inset 0 1px 0 rgba(255,255,255,0.12);
}


/* =====================================================
   LOGO VIDEO
   ===================================================== */

.logo-video {
  display: block;
  height: 56px;
  width: 56px;
  object-fit: cover;
  border-radius: 14px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 16px rgba(255,210,122,0.08);
}