@import './shared.css';

:root {
  --bg: #0b0f1a;
  --panel: #0f1726;
  --text: #e8eef8;
  --muted: #9fb3c8;
  --accent: #5dcfa9;
  --accent2: #0C704F;
  --ring: rgba(103, 232, 249, .15);
  --border: rgba(255, 255, 255, .06);
  --brand-green: #0C704F;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  /* background:
        radial-gradient(1200px 800px at 10% -10%, rgba(139, 125, 255, .15), transparent 60%),
        radial-gradient(1000px 700px at 110% 10%, rgba(103, 232, 249, .12), transparent 55%),
        linear-gradient(180deg, #0a0f19, #0b0f1a 20%, #0b0f1a 80%, #0a0f19);
    transition: background 0.3s ease, color 0.3s ease; */
}

/* ---------- existing dark-mode styles (unchanged) ---------- */
.wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 48px 20px
}

.card {
  width: 100%;
  max-width: 900px;
  /* background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02)); */
  border: 1px solid var(--border);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  /* box-shadow: 0 20px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04); */
}

.glow {
  position: absolute;
  inset: -2px;
  pointer-events: none;
  /* background:
        radial-gradient(800px 300px at 10% 0%, var(--ring), transparent 60%),
        radial-gradient(800px 300px at 90% 0%, rgba(139, 125, 255, .18), transparent 60%); */
  filter: blur(18px);
  opacity: .7;
  z-index: 0
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 28px 0 28px;
  position: relative;
  z-index: 1
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none
}

.wordmark {
  font: 800 40px Manrope, Inter, sans-serif;
  text-transform: lowercase;
  color: #455887
}

.badge {
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px
}

.content {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  /* padding: 28px; */
  /* align-items: center; */
  z-index: 1
}

@media (max-width:900px) {
  .content {
    grid-template-columns: 1fr;
    gap: 22px
  }
}

/* Tablet view */
@media (max-width: 900px) {
  header {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
  }

  header .brand img {
    width: 140px;
  }

  .theme-toggle-field {
    margin-left: auto;
  }

  .badge {
    font-size: 11px;
  }
}

/* Mobile view */
@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .brand {
    order: 1;
  }

  .badge {
    order: 2;
  }

  .theme-toggle-field {
    order: 3;
  }

  .theme-toggle-slider {
    width: 54px;
    height: 26px;
  }

  .theme-toggle-text {
    font-size: 0.75rem;
  }
}

.hero {
  padding: 0px 24px 36px
}

h1 {
  margin: 0 0 14px;
  font: 800 46px/1.05 Manrope, Inter, sans-serif;
}

h1 .accent {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

p.lede {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7
}

.meter {
  margin: 26px 0 8px;
  height: 10px;
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  position: relative;
  overflow: hidden
}

.meter>i {
  position: absolute;
  inset: 0;
  width: 10%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: inherit;
}

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

.btn {
  margin-top: 10px;
}

.panel {
  /* height: 100%; */
  background: linear-gradient(180deg, rgba(103, 232, 249, .08), rgba(139, 125, 255, .06));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.panel h3 {
  margin: 0;
  font: 700 14px/1 Inter, sans-serif;
  color: var(--muted);
  text-transform: uppercase;
}

/* stat, footer, responsive etc — unchanged */
.stat {
  border: 1px solid var(--border);
  border-radius: 14px;
  height: 165px;
}

.stat b {
  font-size: 22px
}

.stat small {
  color: var(--muted)
}

footer {
  padding: 18px 28px 26px;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

footer a {
  color: var(--muted);
  text-decoration: none
}

footer a:hover {
  color: var(--text)
}

/* ================================
   THEME TOGGLE SWITCH – Moon ↔ Sun
   ================================ */

.theme-toggle-field {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.theme-toggle-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}

.theme-toggle-text {
  font-size: 0.85rem;
  opacity: 0.6;
  transition: opacity 0.2s ease, font-weight 0.2s ease, color 0.2s ease;
}

.theme-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-toggle-slider {
  position: relative;
  width: 72px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(145deg, #1e293b, #1e293b);
  /* deep blue-gray */
  box-shadow:
    inset 0 0 0 1px rgba(148, 163, 184, 0.4),
    0 10px 25px rgba(148, 163, 184, 0.4);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Knob (moon/sun) */
.theme-toggle-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6a7ec1 20%, #445979 100%);
  box-shadow:
    inset -4px -4px 8px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(15, 23, 42, 0.6);
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.5s ease,
    box-shadow 0.5s ease;
}

/* === DARK MODE (checked, default) === */
.theme-toggle-input:checked+.theme-toggle-slider {
  background: linear-gradient(145deg, #0f172a, #1e293b);
}

.theme-toggle-input:checked+.theme-toggle-slider::before {
  transform: translateX(0);
  background: radial-gradient(circle at 40% 40%, #e0e7ff 20%, #94a3b8 100%);
  box-shadow:
    inset -4px -4px 8px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(15, 23, 42, 0.6);
}

.theme-toggle-input:checked~.theme-toggle-text--dark {
  opacity: 1;
  font-weight: 600;
  color: #f8fafc;
}

/* === LIGHT MODE (unchecked = sun) === */
.theme-toggle-input:not(:checked)+.theme-toggle-slider {
  background: linear-gradient(145deg, #777, #777);
  /* soft sunrise gradient */
  box-shadow:
    inset 0 0 0 1px rgba(234, 179, 8, 0.3),
    0 8px 18px rgba(234, 179, 8, 0.4);
}

.theme-toggle-input:not(:checked)+.theme-toggle-slider::before {
  transform: translateX(40px);
  background: radial-gradient(circle at 40% 40%, #ebb71e 10%, #facc15 90%);
  box-shadow:
    inset -2px -2px 6px rgba(255, 255, 255, 0.6),
    0 4px 8px rgba(234, 179, 8, 0.6);
}

.theme-toggle-input:not(:checked)~.theme-toggle-text--light {
  opacity: 1;
  font-weight: 600;
  color: #e7d513;
  /* warm golden text */
}

/* -----------------------
   LIGHT MODE OVERRIDES
   ----------------------- */
body.light-mode {
  --text: #111827;
  --muted: #4b5563;
  --border: #d1d5db;
  --accent: #5dcfa9;
  --accent2: #0C704F;
  background: linear-gradient(180deg, #ffffff, #f3f4f6);
  color: var(--text);
}

/* card, glow, panel, and buttons in light mode */
body.light-mode .card {
  background: #ffffff;
  border: 1px solid #e6e8eb;
  box-shadow: 0 8px 36px rgba(2, 6, 23, 0.06);
}

body.light-mode .glow {
  background:
    radial-gradient(800px 300px at 10% 0%, rgba(12, 112, 79, 0.06), transparent 60%),
    radial-gradient(800px 300px at 90% 0%, rgba(139, 125, 255, 0.06), transparent 60%);
  filter: blur(14px);
  opacity: .6;
}

body.light-mode .wordmark {
  color: #23425a;
}

/* subtle darker wordmark */
body.light-mode .badge {
  border-color: #e6e8eb;
  color: #6b7280;
  background: rgba(6, 6, 6, 0.01);
}

body.light-mode .panel {
  background: linear-gradient(180deg, rgba(6, 60, 44, 0.02), rgba(6, 60, 44, 0.01));
  border: 1px solid #e6e8eb;
}

body.light-mode .btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(12, 112, 79, .12);
}

body.light-mode .btn:hover {
  background: #095c3f
}

/* text / muted colors */
body.light-mode .label,
body.light-mode p.lede,
body.light-mode .eta,
body.light-mode .stat small,
body.light-mode footer {
  color: #4b5563
}

/* table / border-like elements */
body.light-mode .stat,
body.light-mode .meter {
  border-color: #e6e8eb;
}

body.light-mode .meter {
  background: #1717170f;
}

body.light-mode .meter>i {
  background: linear-gradient(90deg, #5dcfa9, var(--accent2))
}

nav a {
  color: var(--accent2);
}



.page-wrapper {
  max-width: 1000px;
  width: 100%;
}

.badge-title {
  text-align: center;
  margin-bottom: 10px;
  font-size: 2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subtitle {
  text-align: center;
  margin-bottom: 30px;
  color: #cbd5f5;
  font-size: 0.95rem;
  opacity: 0.8;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding-top: 30px;
}

.achievement-card {

  text-align: center;
  position: relative;
  overflow: visible;
  animation: popIn 0.6s ease-out;

  height: 100%;
  background: linear-gradient(180deg, rgba(103, 232, 249, .08), rgba(139, 125, 255, .06));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  display: grid;
  gap: 14px;
}



.medal-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.medal {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.6),
    inset 0 4px 8px rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.medal::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.shine {
  position: absolute;
  top: -30%;
  left: -80%;
  width: 200%;
  height: 160%;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.1) 25%,
      transparent 60%);
  transform: rotate(25deg);
  mix-blend-mode: screen;
  animation: shine 3s infinite ease-in-out;
}

.medal-icon {
  font-size: 2.3rem;
  position: relative;
  z-index: 1;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.tier-label {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 6px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.desc {
  font-size: 0.85rem;
  color: #e5e7eb;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

/* Tier colors */

.bronze .medal {
  background: radial-gradient(circle at 30% 0%, #ffe0b2, #a15a2b);
  box-shadow:
    0 0 18px rgba(236, 149, 72, 0.6),
    inset 0 4px 10px rgba(255, 255, 255, 0.4);
}

.bronze .title {
  color: #0C704F;
}

.bronze .tier-label {
  color: #fed7aa;
}

.silver .medal {
  background: radial-gradient(circle at 30% 0%, #f5f7ff, #9ca3af);
  box-shadow:
    0 0 18px rgba(148, 163, 184, 0.7),
    inset 0 4px 10px rgba(255, 255, 255, 0.7);
}

.silver .title {
  color: #0C704F;
}

.silver .tier-label {
  color: #e5e7eb;
}

.gold .medal {
  background: radial-gradient(circle at 30% 0%, #fff7cc, #fbbf24);
  box-shadow:
    0 0 18px rgba(251, 191, 36, 0.8),
    inset 0 4px 10px rgba(255, 255, 255, 0.8);
}

.gold .title {
  color: #0C704F;
}

.gold .tier-label {
  color: #facc15;
}

.diamond .medal {
  background:
    radial-gradient(circle at 20% 0%, #e0f2fe, #38bdf8),
    radial-gradient(circle at 80% 0%, #fdf2ff, #a855f7);
  box-shadow:
    0 0 25px rgba(59, 130, 246, 0.9),
    inset 0 4px 12px rgba(255, 255, 255, 0.95);
}

.diamond .title {
  color: #0C704F;

}

.diamond .tier-label {
  color: #a5b4fc;
  margin-top: 8px
}

/* Animations */

@keyframes popIn {
  0% {
    transform: scale(0.7) translateY(10px);
    opacity: 0;
  }

  80% {
    transform: scale(1.05) translateY(-2px);
    opacity: 1;
  }

  100% {
    transform: scale(1) translateY(0);
  }
}

@keyframes shine {
  0% {
    left: -80%;
  }

  100% {
    left: 120%;
  }
}

/* Funding Arrow */
.funding-arrow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  animation: arrowBounce 2s ease-in-out infinite;
}

.funding-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  /* text-shadow:
    0 0 10px rgba(251, 191, 36, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.6); */
  white-space: nowrap;
}

.arrow-icon {
  font-size: 2rem;
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.9));
  animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowBounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}

@keyframes arrowPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.6rem;
  }

  .subtitle {
    font-size: 0.85rem;
  }
}



/* ======================================
   LIGHT MODE FIX — Achievement Badges
   ====================================== */
body.light-mode .achievement-card {
  background: linear-gradient(180deg, rgba(6, 60, 44, 0.02), rgba(6, 60, 44, 0.01));
  border: 1px solid #e6e8eb;
}

/* body.light-mode .achievement-card::before {
  background: radial-gradient(circle at top, rgba(12, 112, 79, 0.15), transparent 60%);
  opacity: 0.25;
} */

body.light-mode .desc {
  color: #374151;
  opacity: 0.85;
}

body.light-mode .tier-label {
  color: #065f46;
  opacity: 0.8;
}

body.light-mode .diamond .tier-label {
  margin-top: 9px
}

/* body.light-mode .title {
  color: #0C704F;
} */

body.light-mode .medal {
  box-shadow:
    0 0 12px rgba(0, 0, 0, 0.08),
    inset 0 2px 6px rgba(255, 255, 255, 0.5);
}

/* bronze, silver, gold, diamond colors look softer on white */
body.light-mode .bronze .medal {
  background: radial-gradient(circle at 30% 0%, #fff3e0, #d97706);
}

body.light-mode .silver .medal {
  background: radial-gradient(circle at 30% 0%, #f9fafb, #9ca3af);
}

body.light-mode .gold .medal {
  background: radial-gradient(circle at 30% 0%, #fffde7, #facc15);
}

body.light-mode .diamond .medal {
  background: radial-gradient(circle at 20% 0%, #e0f2fe, #60a5fa);
}

/* Funding arrow + label adjust for visibility on light bg */
/* body.light-mode .funding-label {
  color: #0C704F;
  text-shadow: none;
}

body.light-mode .arrow-icon {
  color: #0C704F;
  filter: drop-shadow(0 0 6px rgba(12, 112, 79, 0.4));
} */


.waitlist-section {
  margin: 2rem 0;
  padding: 17px;
  background: rgba(12, 112, 79, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(12, 112, 79, 0.2);
}

.waitlist-section h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  color: #0C704F;
}

.waitlist-section p {
  margin: 0 0 1.5rem 0;
  opacity: 0.8;
}

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
}

.waitlist-form input {
  padding: 0.875rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
}

.waitlist-form input:focus {
  outline: none;
  border-color: #0C704F;
}

/* .waitlist-form button {
  padding: 0.875rem 1.5rem;
  background: #0C704F;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  font-family: 'Inter', sans-serif;
}

.waitlist-form button:hover {
  background: #0a5a3f;
} */

.waitlist-form button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.success-message {
  padding: 1.5rem;
  background: rgba(12, 112, 79, 0.15);
  border: 2px solid #0C704F;
  border-radius: 8px;
  text-align: center;
}

.success-message h3 {
  margin: 0 0 0.5rem 0;
  color: #0C704F;
  font-size: 1.5rem;
}

.success-message p {
  margin: 0;
  font-size: 1rem;
}

.success-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.error-message {
  color: #d32f2f;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.htmx-swapping {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.htmx-settling {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

/* Dark mode adjustments */
[data-theme="dark"] .waitlist-section {
  background: rgba(12, 112, 79, 0.15);
  border-color: rgba(12, 112, 79, 0.3);
}

[data-theme="dark"] .waitlist-form input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}

[data-theme="dark"] .waitlist-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Video Modal Styles */
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  animation: fadeIn 0.3s ease;
}

.video-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-content {
  background: var(--bg-secondary, #1a1a1a);
  border-radius: 16px;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease;
}

.video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.video-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.video-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-secondary, #888);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #fff);
}

.video-modal-body {
  padding: 0;
  position: relative;
  background: #000;
}

.video-modal-body video {
  width: 100%;
  height: auto;
  display: block;
  max-height: calc(90vh - 80px);
}

.video-link {
  color: #0C704F;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  padding: 8px;
  border-radius: 8px;
  /* margin-top: 8px; */
}

.video-link:hover {
  background: rgba(12, 112, 79, 0.05);
  transform: translateX(2px);
}

.video-link i {
  font-size: 1.1em;
}

.video-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 0;
}

.video-thumbnail {
  line-height: .5;
  text-align: center;
  width: 100%;
  height: 150px;
  color: white;
  /* object-fit: cover; */
  border-radius: 8px;
  border: 2px solid rgba(12, 112, 79, 0.3);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.light-mode .video-thumbnail {
  color: black;
}

.video-thumbnail .title {
  font-size: 1rem;
  font-weight: 700;
}

.video-thumbnail .sub-title {
  font-size: 1.3rem;
  font-weight: 700;
}

.video-link:hover .video-thumbnail {
  border-color: rgba(12, 112, 79, 0.6);
  box-shadow: 0 4px 12px rgba(12, 112, 79, 0.25);
  transform: scale(1.02);
}

.video-watch-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0C704F;
  font-weight: 600;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

@media (max-width: 768px) {
  .video-modal-content {
    width: 95%;
    max-height: 95vh;
  }

  .video-modal-header {
    padding: 16px 20px;
  }

  .video-modal-header h3 {
    font-size: 1.1rem;
  }

  /* .video-thumbnail {
    height: 230px;
  } */

  .video-watch-label {
    font-size: 0.9rem;
  }

}

.btn-customize {
  width: 30%;
}


/* ======= Tabs styles (add to your index.css) ======= */
.tabs-section {
  margin-top: 28px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* header */
.tabs-header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.tabs {
  display: flex;
  gap: 8px;
}

.tab-btn {
  outline: none;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;

  /* Gradient + shimmer effect */
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.05)),
    var(--accent);
  background-blend-mode: overlay;

  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;

  /* Smooth subtle hover fade */
  opacity: 0.85;

  color: #fff;
}

/* Hover shimmer */
.tab-btn:hover {
  opacity: 1;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

/* Active tab */
.tab-btn.active {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.28),
      rgba(255, 255, 255, 0.10)),
    var(--accent2);
  opacity: 1;
  color: #fff;
}

/* body / panels */
.tabs-body {
  display: block;
}

.tab-panel {
  padding: 8px 0 0;
  color: var(--text);
  background: transparent;
}

/* neutral grey background for the working area inside the card */
.tabs-section .tab-panel {
  background: var(--tab-bg, rgba(255, 255, 255, 0.02));
  border-radius: 10px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

/* headings and lead */
.tabs-section h3 {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 1.1rem;
}

.tabs-section .lead {
  margin-top: 0;
  color: var(--muted);
}

/* lists */
.tabs-section ul {
  margin: 0 0 12px 1.1rem;
  color: var(--muted);
}

/* CTA */
.tab-cta {
  margin-top: 12px;
}

.tab-cta .primary-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

/* light-mode overrides */
body.light-mode .tabs-section {
  background: #fff;
  border-color: #e6e8eb;
}

body.light-mode .tabs-section .tab-panel {
  --tab-bg: #f7f7f9;
  /* neutral grey working area for client request */
  border-color: #e6e8eb;
}

body.light-mode .tab-btn {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.55),
      rgba(255, 255, 255, 0.25)),
    var(--accent);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

body.light-mode .tab-btn.active {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.35)),
    var(--accent2);
  color: #fff;
  opacity: 1;
}

/* small screens */
@media (max-width: 680px) {
  .tabs {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;

  }

  .tab-btn {
    padding: 8px 12px;
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {

  .btn-customize {
    width: 100%;
    /* full width on smaller screens */
  }
}


.video-thumbnail {
  position: relative;
  overflow: hidden;
  height: 150px;
  /* REQUIRED */
  background: transparent !important;
}

.video-thumbnail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/bg-video-card.png");
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: 0;
  display: block;
}

.video-thumbnail * {
  position: relative;
  z-index: 2;
}


/* Play Icon */
.play-icon {
  font-size: 30px !important;
  line-height: inherit;
  font-weight: bold;
  color: #ff0000 !important;
  /* line-height: 1; */
  margin-bottom: 15px;
  text-align: center;
  opacity: 0.95;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hover effect */
.video-link:hover .play-icon {
  color: #ff0000 !important;  
  transform: scale(1.2);
  opacity: 1;
}