/* ===========================
   ThinkTech Landing Page
   Dark, sleek, mysterious
   =========================== */

:root {
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-orange: rgb(255, 134, 92);
  --color-teal: rgba(53, 191, 188, 0.93);
  --font-primary: 'proxima-nova', Arial, sans-serif;
}

/* Reset & Base */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

/* Nebula background */
.nebula {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(255, 134, 92, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 75%, rgba(53, 191, 188, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 90% 50% at 60% 10%, rgba(140, 80, 200, 0.3) 0%, transparent 65%),
    radial-gradient(ellipse 50% 70% at 5% 80%, rgba(53, 191, 188, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 85% 25%, rgba(255, 134, 92, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 45% 55%, rgba(140, 80, 200, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse 80% 70% at 70% 45%, rgba(255, 255, 255, 0.15) 0%, transparent 55%);
  animation: nebulaPulse 16.7s ease-in-out infinite alternate;
}

@keyframes nebulaPulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* Starfield background */

/* Layer 1: small, faint stars — slow drift */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    24vw 8vh 2px 1px rgba(255,255,255,0.5),
    87vw 14vh 5px 3px rgba(255,250,220,0.4),
    52vw 32vh 8px 3px rgba(255,255,255,0.25),
    14vw 45vh 3px 1px rgba(255,250,220,0.5),
    73vw 52vh 6px 2px rgba(255,255,255,0.4),
    38vw 68vh 2px 0px rgba(255,255,255,0.45),
    91vw 73vh 5px 2px rgba(255,250,220,0.5),
    62vw 88vh 3px 1px rgba(255,255,255,0.35),
    8vw 22vh 7px 3px rgba(255,255,255,0.25),
    45vw 5vh 2px 1px rgba(255,250,220,0.5),
    79vw 38vh 5px 2px rgba(255,255,255,0.45),
    33vw 91vh 3px 1px rgba(255,250,220,0.4),
    56vw 61vh 7px 3px rgba(255,255,255,0.3),
    4vw 78vh 2px 0px rgba(255,250,220,0.5),
    68vw 17vh 6px 2px rgba(255,255,255,0.4),
    95vw 48vh 3px 1px rgba(255,250,220,0.45),
    19vw 56vh 8px 3px rgba(255,255,255,0.2),
    82vw 82vh 2px 1px rgba(255,250,220,0.5),
    42vw 28vh 5px 2px rgba(255,255,255,0.4),
    11vw 95vh 3px 1px rgba(255,250,220,0.35),
    31vw 15vh 4px 2px rgba(255,255,255,0.45),
    76vw 42vh 2px 0px rgba(255,250,220,0.5),
    58vw 75vh 6px 2px rgba(255,255,255,0.3),
    3vw 52vh 3px 1px rgba(255,250,220,0.45),
    89vw 33vh 7px 3px rgba(255,255,255,0.25),
    47vw 93vh 2px 1px rgba(255,250,220,0.4),
    22vw 70vh 5px 2px rgba(255,255,255,0.35),
    64vw 10vh 3px 1px rgba(255,250,220,0.5),
    96vw 85vh 4px 2px rgba(255,255,255,0.4),
    15vw 38vh 8px 3px rgba(255,250,220,0.2);
  transform-origin: 50vw 100vh;
  animation: starRotate 869s linear infinite, starTwinkle1 6s ease-in-out infinite;
}

/* Layer 2: larger, glowy stars — slower drift, offset timing */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    17vw 12vh 8px 3px rgba(255,250,220,0.3),
    65vw 27vh 18px 7px rgba(255,255,255,0.15),
    34vw 48vh 10px 3px rgba(255,250,220,0.25),
    88vw 62vh 22px 8px rgba(255,255,255,0.1),
    48vw 78vh 8px 3px rgba(255,250,220,0.3),
    7vw 35vh 14px 5px rgba(255,255,255,0.2),
    76vw 91vh 10px 3px rgba(255,250,220,0.25),
    28vw 7vh 20px 7px rgba(255,255,255,0.12),
    93vw 55vh 8px 3px rgba(255,250,220,0.3),
    55vw 42vh 15px 5px rgba(255,250,220,0.18),
    40vw 18vh 12px 4px rgba(255,255,255,0.15),
    72vw 68vh 9px 3px rgba(255,250,220,0.28),
    12vw 85vh 16px 6px rgba(255,255,255,0.12),
    84vw 15vh 10px 4px rgba(255,250,220,0.22),
    50vw 58vh 14px 5px rgba(255,255,255,0.16);
  transform-origin: 50vw 100vh;
  animation: starRotate 869s linear infinite, starTwinkle2 9s ease-in-out infinite;
}

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

@keyframes starTwinkle1 {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

@keyframes starTwinkle2 {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

/* Flickering stars */
.star-flicker {
  position: fixed;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 5px 2px rgba(255, 250, 220, 0.8);
  z-index: 1;
  pointer-events: none;
  animation: starFlicker 9s ease-in-out infinite;
}

.star-flicker:nth-child(2) { animation-delay: 1.5s; }
.star-flicker:nth-child(3) { animation-delay: 5s; }
.star-flicker:nth-child(4) { animation-delay: 3s; }

@keyframes starFlicker {
  0%   { opacity: 1; }
  3%   { opacity: 0.2; }
  6%   { opacity: 0.9; }
  9%   { opacity: 0.4; }
  12%  { opacity: 1; }
  /* ~3.2s pause at full opacity */
  47%  { opacity: 1; }
  50%  { opacity: 0.15; }
  53%  { opacity: 0.9; }
  56%  { opacity: 0.5; }
  59%  { opacity: 1; }
  /* ~3.7s pause at full opacity */
  100% { opacity: 1; }
}

/* Fade-in animation for "secret discovery" feel */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Header / Nav */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.header__left,
.header__nav {
  pointer-events: auto;
}

.header__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.header__logo {
  display: block;
}

.header__state-selector {
  animation: fadeIn 0.8s ease-out 0.6s both;
}

.state-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-teal);
  border-radius: 4px;
  padding: 0.5rem 2.25rem 0.5rem 1.25rem;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='rgba(255,255,255,0.6)' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.state-select:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.08);
}

.state-select:focus {
  outline: none;
  border-color: var(--color-teal);
}

.state-select option {
  background-color: #1a1a1a;
  color: #ffffff;
}

.header__logo svg {
  height: 40px;
  width: auto;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: fadeIn 0.8s ease-out 1s both;
}

.header__link {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.header__link--trust {
  color: var(--color-teal);
  border: 1px solid var(--color-teal);
  background: transparent;
}

.header__link--trust:hover {
  color: var(--color-bg);
  background-color: var(--color-teal);
  border-color: var(--color-teal);
}

.header__link--login {
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}

.header__link--login:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.header__link--parent {
  color: var(--color-bg);
  background-color: var(--color-orange);
  border: 1px solid var(--color-orange);
}

.header__link--parent:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
}

/* Hero Section */
.hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
}

.hero__content {
  max-width: 860px;
  width: 100%;
}

/* Static headline */
.hero__static {
  margin-bottom: 3rem;
  animation: fadeInUp 0.9s ease-out 0.2s both;
}

.hero__kicker {
  font-size: clamp(0.75rem, 1.4vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal);
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.hero__headline {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.hero__subhead {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 300;
  line-height: 1.65;
  opacity: 0.7;
}

/* Audience options */
.hero__audience {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease-out 1.1s both;
}

.hero__audience-btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  font-family: var(--font-primary);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.hero__audience-btn:hover {
  color: var(--color-text);
  border-color: var(--color-orange);
  background: rgba(255, 134, 92, 0.1);
}

/* Explore by Role */
.hero__roles {
  margin-top: 3rem;
  animation: fadeInUp 1s ease-out 1.3s both;
}

.hero__roles-title {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 1.25rem;
}

.hero__roles-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero__role-btn {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.2s ease;
  flex: 1 1 auto;
  min-width: 160px;
  max-width: 220px;
}

.hero__role-btn:hover {
  color: var(--color-orange);
  border-color: var(--color-orange);
  background: rgba(255, 134, 92, 0.08);
  transform: translateY(-2px);
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease-out 0.9s both;
}

.hero__cta {
  display: inline-block;
  padding: 1rem 2.5rem;
  background-color: var(--color-orange);
  color: var(--color-bg);
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.hero__cta:hover {
  background-color: var(--color-teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(53, 191, 188, 0.3);
}

.hero__cta:active {
  transform: translateY(0);
}

.hero__cta-secondary {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.2s ease;
}

.hero__cta-secondary:hover {
  color: var(--color-teal);
  border-color: var(--color-teal);
  background: rgba(53, 191, 188, 0.05);
  transform: translateY(-2px);
}

.hero__cta-secondary:active {
  transform: translateY(0);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.modal {
  position: relative;
  width: 90%;
  max-width: 700px;
  height: 75vh;
  max-height: 700px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background-color: #111;
  overflow: hidden;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

.modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--color-text);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.modal__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.modal__body {
  position: absolute;
  top: 3rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.modal__body iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Info modal variant */
.modal--info {
  max-width: 780px;
  height: 85vh;
  max-height: 700px;
  display: flex;
  flex-direction: column;
}

/* Back button in header */
.info-header__back {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 0.2rem;
  transition: color 0.2s ease;
}

.info-header__back:hover {
  color: var(--color-text);
}

/* Fixed header with headshot */
.info-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.info-header__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.info-header__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.info-header__subtitle {
  font-size: 0.85rem;
  font-weight: 300;
  opacity: 0.5;
  margin-top: 0.15rem;
}

/* Scrollable content area */
.info-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2.5rem;
}

.info-content__lede {
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.7;
  margin-bottom: 2.5rem;
}

.info-content__section {
  margin-bottom: 2rem;
}

.info-content__section h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-orange);
}

.info-content__section p {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
  opacity: 0.75;
}

/* Fixed footer CTA */
.info-footer {
  flex-shrink: 0;
  text-align: center;
  padding: 1.25rem 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #111;
}

/* Tablet breakpoint */
@media (max-width: 960px) {
  .hero__actions {
    justify-content: center;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .header {
    padding: 1rem 1.25rem;
  }

  .header__logo svg {
    height: 32px;
  }

  .state-select {
    font-size: 0.75rem;
    padding: 0.4rem 2rem 0.4rem 0.85rem;
  }

  .header__nav {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }

  .header__link {
    padding: 0.4rem 0.85rem;
    font-size: 0.75rem;
  }

  .hero {
    padding: 1.5rem;
    justify-content: flex-start;
    padding-top: 7rem;
  }

  .hero__content {
    flex-direction: column;
    gap: 3rem;
  }

  .hero__text {
    text-align: center;
  }


  .hero__actions {
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
  }

  .hero__cta {
    padding: 0.85rem 2rem;
    font-size: 1rem;
  }

  .hero__audience {
    gap: 0.6rem;
  }

  .hero__audience-btn {
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
  }

  .hero__roles-grid {
    gap: 0.6rem;
  }

  .hero__role-btn {
    font-size: 0.9rem;
    padding: 0.75rem 1.1rem;
    min-width: 130px;
    max-width: 100%;
    flex: 1 1 calc(50% - 0.6rem);
  }

  .info-header {
    padding: 1.25rem 1.5rem;
  }

  .info-scroll {
    padding: 1.5rem;
  }

  .info-footer {
    padding: 1rem 1.5rem;
  }

  .modal {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
}

/* ===========================
   Explore Platform Page
   =========================== */

/* App shell */
.explore-app {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding-top: 7rem;
  padding-bottom: 5rem;
}

/* ---- Hub Layout ---- */
.explore-hub {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  animation: fadeInUp 0.7s ease-out both;
}

.explore-hub__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.explore-hub__kicker {
  font-size: clamp(0.75rem, 1.4vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 1rem;
}

.explore-hub__headline {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.explore-hub__subhead {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 300;
  line-height: 1.75;
  opacity: 0.65;
  max-width: 680px;
  margin: 0 auto;
}

/* Three-column bucket grid */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}

/* ---- Bucket Card ---- */
.bucket-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.bucket-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
}

.bucket-card.is-open {
  border-color: rgba(53, 191, 188, 0.45);
  box-shadow: 0 8px 48px rgba(53, 191, 188, 0.12);
}

/* Bucket header — acts as expand/collapse trigger */
.bucket-header {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.75rem;
  background: transparent;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  gap: 1rem;
  transition: background-color 0.2s ease;
}

.bucket-header:hover {
  background: rgba(255, 255, 255, 0.025);
}

.bucket-header:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: -2px;
  border-radius: 13px;
}

.bucket-header__left {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.bucket-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(53, 191, 188, 0.1);
  border-radius: 10px;
  color: var(--color-teal);
  transition: background-color 0.25s ease;
}

.bucket-card.is-open .bucket-icon {
  background: rgba(53, 191, 188, 0.18);
}

.bucket-header__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bucket-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  display: block;
}

.bucket-desc {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.6;
  opacity: 0.6;
  display: block;
}

.bucket-toggle {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.35);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
}

.bucket-card.is-open .bucket-toggle {
  transform: rotate(180deg);
  color: var(--color-teal);
}

/* Expandable body */
.bucket-body {
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Child links list */
.child-links {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.child-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.75rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-primary);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.child-link:last-child {
  border-bottom: none;
}

.child-link:hover {
  background: rgba(255, 134, 92, 0.07);
  color: var(--color-orange);
}

.child-link:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: -2px;
}

.child-link__title {
  font-size: 0.95rem;
  font-weight: 500;
}

.child-link__arrow {
  color: rgba(255, 255, 255, 0.25);
  transition: color 0.18s ease, transform 0.18s ease;
}

.child-link:hover .child-link__arrow {
  color: var(--color-orange);
  transform: translateX(3px);
}

/* Hub bottom actions */
.explore-hub__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---- Destination Page ---- */
.explore-destination {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  animation: fadeInUp 0.55s ease-out both;
}

.destination-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.destination-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.2s ease;
}

.destination-back:hover {
  color: var(--color-teal);
}

.destination-back:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
  border-radius: 3px;
}

.destination-breadcrumb {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

.destination-header {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.destination-category {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 0.75rem;
}

.destination-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.destination-desc {
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.8;
  opacity: 0.72;
}

/* Content sections grid */
.destination-sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 4rem;
}

.destination-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 1.5rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.destination-section:hover {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
}

.destination-section__heading {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-orange);
  margin-bottom: 0.6rem;
}

.destination-section__body {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.75;
  opacity: 0.68;
}

/* Related Paths section */
.related-paths {
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 3.5rem;
}

.related-paths__heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.related-paths__subhead {
  font-size: 0.9rem;
  font-weight: 300;
  opacity: 0.5;
  margin-bottom: 2rem;
}

.related-group {
  margin-bottom: 1.75rem;
}

.related-group:last-child {
  margin-bottom: 0;
}

.related-group__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 0.75rem;
}

.related-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.related-card {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.related-card:hover {
  background: rgba(53, 191, 188, 0.1);
  border-color: rgba(53, 191, 188, 0.35);
  color: var(--color-teal);
  transform: translateY(-1px);
}

.related-card:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
  border-radius: 8px;
}

.related-card__title {
  line-height: 1.2;
}

.related-card__arrow {
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.2s ease;
}

.related-card:hover .related-card__arrow {
  color: var(--color-teal);
}

/* Destination CTA row */
.destination-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---- Explore Responsive ---- */
@media (max-width: 960px) {
  .explore-grid {
    grid-template-columns: 1fr;
  }

  .destination-sections {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .explore-app {
    padding-top: 6rem;
    padding-bottom: 3rem;
  }

  .explore-hub,
  .explore-destination {
    padding: 0 1.25rem;
  }

  .explore-hub__header {
    margin-bottom: 2rem;
  }

  .bucket-header {
    padding: 1.25rem;
  }

  .child-link {
    padding: 0.85rem 1.25rem;
  }

  .explore-hub__actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .destination-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .destination-top {
    margin-bottom: 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .destination-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  .related-paths {
    padding-top: 2rem;
  }
}

/* =====================================================
   ExplorerIPadSlider — Premium 3-iPad Carousel
   Placement: between .explore-grid and .explore-hub__actions
   on the Explorer hub page.
   ===================================================== */

.ipad-slider {
  padding: 3.5rem 0 2rem;
  position: relative;
  /* Perspective gives the rotated side iPads their 3-D depth */
  perspective: 1400px;
  perspective-origin: 50% 40%;
  overflow: visible;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2rem;
}

/* Stage: fixed height container where all three iPads are absolutely positioned */
.ipad-slider__track {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 520px;
}

/* ── Device position layers ── */
/* JS rotates CSS position classes so devices physically move between slots.
   transition drives the smooth animation; z-index is set inline by JS. */
.ipad-slider__device {
  position: absolute;
  will-change: transform, opacity;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s ease;
}

/* Left iPad: angled inward, pulled left, slightly smaller, dimmed */
.ipad-slider__device--left {
  transform: translateX(-360px) scale(0.84) rotateY(20deg);
  opacity: 0.72;
}

/* Center iPad: straight on, full size, closest to viewer */
.ipad-slider__device--center {
  transform: translateX(0) scale(1) rotateY(0deg);
  opacity: 1;
}

/* Right iPad: mirror of left */
.ipad-slider__device--right {
  transform: translateX(360px) scale(0.84) rotateY(-20deg);
  opacity: 0.72;
}

/* Exit — device leaves stage to the right and fades out */
.ipad-slider__device--exit {
  transform: translateX(1050px) scale(0.55) rotateY(-45deg);
  opacity: 0;
}

/* Enter — device snaps to off-screen left before animating in.
   transition:none ensures this is an instant snap, not an animated jump. */
.ipad-slider__device--enter {
  transform: translateX(-1050px) scale(0.55) rotateY(45deg);
  opacity: 0;
  transition: none;
}

/* Subtle teal glow pooling beneath the center device */
.ipad-slider__device--center::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  height: 50px;
  background: radial-gradient(ellipse, rgba(53, 191, 188, 0.16) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* ── Floating / parallax animation ──
   Applied to an inner wrapper so it doesn't interfere with
   the position transforms on .ipad-slider__device */
.ipad-frame-float {
  position: relative;
  animation: ipadFloat 4.6s ease-in-out infinite;
}

.ipad-slider__device--left  .ipad-frame-float { animation-delay: 0.55s; }
.ipad-slider__device--right .ipad-frame-float { animation-delay: 1.1s; }

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

/* Honor prefers-reduced-motion: disable float and carousel transitions */
@media (prefers-reduced-motion: reduce) {
  .ipad-frame-float { animation: none; }
}

/* ── iPad frame shell ── */
.ipad-frame {
  position: relative;
  width: 519px;
  height: 384px;
  /* Realistic dark metal finish */
  background: linear-gradient(160deg, #2e2e32 0%, #1d1d20 55%, #141416 100%);
  border-radius: 32px;
  /* Layered shadows: outer highlight, hard bezel edge, close ambient, far ambient */
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.09),
    0 0 0 3px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 38px 100px rgba(0, 0, 0, 0.8),
    0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 8px 10px 10px;
  gap: 6px;
}

/* Front-facing camera dot */
.ipad-frame__camera {
  display: block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #3a3a3e 30%, #202022 100%);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.04);
}

/* Screen bezel + image container */
.ipad-frame__screen {
  flex: 1;
  height: 100%;
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #080809;
  position: relative;
}

/* Screenshot image — crossfade transition is driven by JS toggling opacity */
.ipad-frame__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* Smooth crossfade when src swaps */
  transition: opacity 0.38s ease;
}

/* Home indicator pill (modern iPad style) — landscape: vertical on right */
.ipad-frame__home {
  display: block;
  flex-shrink: 0;
  width: 4px;
  height: 50px;
  background: rgba(255, 255, 255, 0.11);
  border-radius: 2px;
}

/* Glossy glass reflection overlay — purely cosmetic */
.ipad-frame__reflection {
  position: absolute;
  inset: 0;
  border-radius: 38px;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.058) 0%,
    rgba(255, 255, 255, 0.018) 30%,
    transparent 52%,
    rgba(255, 255, 255, 0.01) 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* Subtle hover lift on desktop (pauses autoplay via JS) */
@media (hover: hover) and (pointer: fine) {
  .ipad-slider__device--center .ipad-frame:hover {
    box-shadow:
      0 0 0 1.5px rgba(255, 255, 255, 0.13),
      0 0 0 3px rgba(0, 0, 0, 0.75),
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 36px 90px rgba(0, 0, 0, 0.85),
      0 10px 30px rgba(0, 0, 0, 0.55);
    transition: box-shadow 0.3s ease;
  }
}

/* ── Responsive: tablet ── */
@media (min-width: 769px) and (max-width: 1100px) {
  .ipad-slider__device--left  { transform: translateX(-290px) scale(0.78) rotateY(20deg); }
  .ipad-slider__device--right { transform: translateX(290px)  scale(0.78) rotateY(-20deg); }
}

/* ── Responsive: mobile ── */
/* On mobile, all devices default to hidden; only --center is shown.
   The carousel still advances but only the center device is visible,
   giving a clean single-device fade-between-screenshots effect. */
@media (max-width: 768px) {
  .ipad-slider {
    padding: 2.5rem 0 1.5rem;
  }

  .ipad-slider__track {
    height: 370px;
  }

  .ipad-slider__device {
    transition: opacity 0.4s ease !important;
    transform: translateX(0) scale(0.58) rotateY(0deg) !important;
    opacity: 0 !important;
  }

  .ipad-slider__device--center {
    opacity: 1 !important;
  }
}

/* ── iPad Zoom Backdrop & Overlay (body-level to escape stacking contexts) ── */
.ipad-zoom-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.ipad-zoom-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Enlarged iPad shown in a fixed overlay above the backdrop */
.ipad-zoom-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: 9001;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  width: 95vw;
  max-width: 1500px;
}

.ipad-zoom-overlay.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.ipad-zoom-overlay .ipad-frame {
  width: min(100%, calc(90vh * 519 / 384));
  height: auto;
  aspect-ratio: 519 / 384;
  margin: 0 auto;
}

/* Close button on zoomed iPad overlay */
.ipad-zoom-close {
  position: absolute;
  top: -20px;
  right: -20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid var(--color-orange);
  border-radius: 50%;
  color: var(--color-orange);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.ipad-zoom-close:hover {
  background: rgba(255, 134, 92, 0.18);
  transform: scale(1.1);
}

/* ── Carousel navigation arrows ── */
.ipad-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--color-orange);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ipad-slider__nav:hover {
  background: rgba(255, 134, 92, 0.18);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}

.ipad-slider__nav--prev {
  left: calc(50% - 520px);
}

.ipad-slider__nav--next {
  right: calc(50% - 520px);
}

@media (max-width: 768px) {
  .ipad-slider__nav--prev {
    left: 0.75rem;
  }
  .ipad-slider__nav--next {
    right: 0.75rem;
  }
}