/*=============== CAROUSEL ===============*/
.carousel {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--bg);
}

.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease);
  display: flex;
  flex-direction: column;
}
.carousel__slide--active {
  opacity: 1;
  pointer-events: auto;
}

/* Slide orb */
.carousel__orb {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.carousel__orb::before {
  content: '';
  position: absolute;
  width: 750px; height: 750px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0.05) 40%, transparent 70%);
  top: -80px; right: -150px;
  animation: orb-drift 8s ease-in-out infinite;
}
.carousel__orb::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.09) 0%, transparent 65%);
  top: 40%; right: 8%;
  animation: orb-drift 6s ease-in-out infinite reverse;
}

/* Slide content wrapper */
.carousel__slide-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  padding-bottom: 0;
}

/* Per-element stagger animation */
.carousel__slide .c-anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.carousel__slide--active .c-anim { opacity: 1; transform: none; }
.carousel__slide--active .c-anim:nth-child(1) { transition-delay: 0.08s; }
.carousel__slide--active .c-anim:nth-child(2) { transition-delay: 0.2s; }
.carousel__slide--active .c-anim:nth-child(3) { transition-delay: 0.34s; }
.carousel__slide--active .c-anim:nth-child(4) { transition-delay: 0.48s; }
.carousel__slide--active .c-anim:nth-child(5) { transition-delay: 0.6s; }

/* Slide 1 — Brand */
.cs1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.cs1__logo { height: 440px; width: auto; margin-top: -200px; margin-bottom: -100px; }
[data-theme="dark"]  .cs1__logo.logo-light { display: none; }
[data-theme="dark"]  .cs1__logo.logo-dark  { display: block; }
[data-theme="light"] .cs1__logo.logo-dark  { display: none; }
[data-theme="light"] .cs1__logo.logo-light { display: block; }
.cs1__headline {
  font-family: var(--f-display);
  font-size: clamp(3rem, 5.6vw, 5.6rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-bottom: 0;
}
.cs1__headline em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}
.cs1__sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--fg-2);
  max-width: 460px;
  line-height: 1.82;
  margin-bottom: 1.5rem;
}
.cs1__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-bottom: 0; }
.cs1__countries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  width: 360px;
}
.cs1__country {
  background: var(--bg-subtle);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: background 0.25s;
}
.cs1__country:hover { background: var(--bg-raised); }
.cs1__country:hover .cs1__country-arrow { transform: translateX(3px); color: var(--accent); }
.cs1__country-icon { color: var(--accent); font-size: 0.85rem; flex-shrink: 0; }
.cs1__country-label {
  font-family: var(--f-ui);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 0.1rem;
}
.cs1__country-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--fg);
}
.cs1__country-arrow {
  margin-left: auto;
  color: var(--fg-4);
  font-size: 0.65rem;
  transition: all 0.25s var(--ease);
  flex-shrink: 0;
}

/* Slide 2 — PorchTalk */
.cs2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
  width: 100%;
}
.cs2__left {}
.cs2__label {
  font-family: var(--f-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}
.cs2__label::before { content: ''; width: 2rem; height: 1px; background: var(--accent); }
.cs2__headline {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--fg);
  margin-bottom: 1.5rem;
}
.cs2__headline em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  display: block;
}
.cs2__sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--fg-2);
  line-height: 1.82;
  max-width: 420px;
  margin-bottom: 2.25rem;
}
.cs2__right {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Carousel nav bar */
.carousel__nav {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem var(--pad);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.carousel__indicators { display: flex; gap: 0.5rem; align-items: center; }
.carousel__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-hi);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  padding: 0;
}
.carousel__dot--active { background: var(--accent); transform: scale(1.35); }
.carousel__progress {
  width: 72px; height: 2px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
}
.carousel__progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
}
.carousel__arrow {
  width: 34px; height: 34px;
  border: 1px solid var(--border-hi);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  font-size: 0.7rem;
  transition: all 0.25s;
  opacity: 0;
  transition: opacity 0.3s, border-color 0.25s, color 0.25s;
}
.carousel:hover .carousel__arrow { opacity: 1; }
.carousel__arrow:hover { border-color: var(--accent); color: var(--accent); }