:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #030304;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #030304;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 24px;
  text-align: center;
}

.hero-copy {
  width: 100%;
  max-width: 750px;
}

.hero-title {
  margin: 0 0 20px;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.hero-title-accent {
  color: #0088ff;
  font-style: italic;
  font-weight: 400;
}

.hero-description {
  margin: 0 0 40px;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: rgba(245, 245, 247, 0.72);
}

.hero-description a {
  color: #f5f5f7;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(245, 245, 247, 0.45);
  transition: text-decoration-color 0.2s ease;
}

.hero-description a:hover {
  text-decoration-color: rgba(245, 245, 247, 0.9);
}

.prompt-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 850px;
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.prompt-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #f5f5f7;
  font-size: 0.95rem;
  padding: 10px 0;
}

.prompt-box input::placeholder {
  color: rgba(245, 245, 247, 0.45);
}

.prompt-box button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: #f5f5f7;
  color: #030304;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.prompt-box button:hover {
  transform: scale(1.05);
}

.prompt-box button:active {
  transform: scale(0.96);
}

.prompt-box button svg {
  width: 18px;
  height: 18px;
}

.mode-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  max-width: 560px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(245, 245, 247, 0.7);
  font-size: 0.85rem;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #f5f5f7;
}

.chip.is-active {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
  color: #f5f5f7;
}

.chip svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

:root {
  --howto-bg-top: #ffffff;
  --howto-bg-bottom: #ffffff;
  --howto-navy: #16224a;
  --howto-body-text: #55607a;
  --howto-number: #b9cdf3;
  --howto-divider: #dde6f7;
  --howto-circle-border-active: #3b5fe0;
  --howto-arrow-active: #3b5fe0;
}

.light-region {
  background: #ffffff;
}

.howto-section {
  color: var(--howto-navy);
}

.howto-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 48px 64px;
}

.howto-header {
  padding-bottom: 40px;
}

.howto-title {
  font-size: 46px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.5px;
  color: var(--howto-navy);
}

.howto-subtitle {
  font-size: 18px;
  font-weight: 500;
  color: var(--howto-navy);
  margin: 0;
}

.howto-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 40px;
}

.howto-step {
  padding: 0 32px;
  position: relative;
}

.howto-step:not(:first-child) {
  border-left: 1px solid var(--howto-divider);
}

.howto-step-number {
  font-size: 68px;
  font-weight: 600;
  color: var(--howto-number);
  line-height: 1;
  margin: 0 0 18px;
  font-family: Georgia, 'Times New Roman', serif;
}

.howto-step-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--howto-navy);
  margin: 0 0 12px;
  line-height: 1.3;
}

.howto-step-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--howto-body-text);
  margin: 0;
}

@media (max-width: 900px) {
  .howto-steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .howto-step:nth-child(3) {
    border-left: none;
  }

  .howto-title {
    font-size: 34px;
  }
}

@media (max-width: 560px) {
  .howto-steps {
    grid-template-columns: 1fr;
  }

  .howto-step {
    border-left: none !important;
    padding-left: 0;
  }
}

.panels-section {
  background: #ffffff;
  color: var(--howto-navy);
  padding: 80px 24px 220px;
}

.panels-wrap {
  max-width: 1304px;
  margin: 0 auto;
}

.panels-header {
  /* Pinned near the top while the cards below stack, so the section title
     stays in frame for the whole animation instead of scrolling away the
     moment the section starts. All 4 cards below share one sticky offset
     and release together at a single, predictable scrollY (see script) —
     JS forces this header to let go at that same point via transform,
     instead of relying on native sticky's own (much later) release, which
     is governed by a different, smaller offset+height than a card's. */
  position: sticky;
  top: 40px;
  z-index: 10;
  width: 100%;
  padding: 0 0 56px;
}

.panels-title {
  font-size: 46px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 22px;
  letter-spacing: -0.5px;
  color: var(--howto-navy);
  max-width: 700px;
}

.panels-subtitle {
  font-size: 18px;
  font-weight: 400;
  color: var(--howto-navy);
  margin: 0;
  max-width: 700px;
}

.panels-stack {
  /* Card-stack scroll effect adapted from CodyHouse's "Stacking Cards"
     tutorial (see script). This gap is read by JS at runtime — it's both
     the spacing between each card's peeking-out sliver and the basis for
     the container's own bottom padding, so it only needs to be set once,
     here. */
  --stack-cards-gap: 24px;
  position: relative;
}

.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  border-radius: 24px;
  padding: 40px;
  align-items: stretch;
  position: sticky;
  /* Sits below the header's own sticky box (top: 40px, ~173px tall) with
     room to spare, so the section title stays visible above the stack
     instead of the two overlapping. */
  top: 260px;
  /* All 4 cards render at this same height regardless of their own text
     length, so the stacking JS — which measures only the first card and
     assumes every card matches it — holds exactly, not approximately. */
  min-height: 560px;
  /* Cards scale down around this point (JS) as the next one covers them,
     so the shrink reads as sinking straight back rather than drifting. */
  transform-origin: center top;
  box-shadow: 0 20px 45px rgba(20, 22, 28, 0.14);
}

.panel-content {
  display: flex;
  flex-direction: column;
}

.panel-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 22px;
  color: #fff;
}

.panel-title {
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 26px;
  color: #14161c;
}

.panel-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #4a4d57;
  margin: 0;
  max-width: 400px;
}

.panel-content .cta-btn {
  align-self: flex-start;
  /* Pushes the button down toward the bottom of this (now taller) card
     instead of sitting right under the description, but the bottom margin
     keeps it from landing flush against the card's edge. */
  margin-top: auto;
  margin-bottom: 56px;
}

.panel-image-slot {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 392.89px;
}

.panel-image-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- MULTI-FORMAT PANEL ---- */
.panel-multiformat {
  background: #dce9fb;
}
.panel-multiformat .panel-badge {
  background: linear-gradient(90deg, #2b3fe0, #9fb8ec);
}

/* ---- ONE AGENT PANEL ---- */
.panel-agent {
  background: #f8e2d6;
}
.panel-agent .panel-badge {
  background: linear-gradient(90deg, #c1502e, #eab49a);
}

/* ---- PLAIN LANGUAGE PANEL ---- */
.panel-language {
  background: #f5f6c9;
}
.panel-language .panel-badge {
  background: linear-gradient(90deg, #8a9a1e, #cdd66b);
  color: #1c1f08;
}

/* ---- BRAND VOICE PANEL ---- */
.panel-brand {
  background: #e3ddf7;
}
.panel-brand .panel-badge {
  background: linear-gradient(90deg, #6c4fd6, #b3a3ec);
}

@media (max-width: 700px) {
  /* Matches the JS's own `isDesktopStackLayout` check — below this
     breakpoint cards are `position: static` (no stacking effect runs), so
     this header has nothing to stay pinned above; it needs to release
     back to plain flow itself instead of staying sticky through the
     entire section. */
  .panels-header {
    position: static;
  }

  .panel {
    grid-template-columns: 1fr;
    padding: 28px;
    position: static;
    min-height: auto;
  }

  .panel-image-slot {
    min-height: 220px;
    order: -1;
  }
}

.features-section {
  background: #030304;
  padding: 100px 24px 140px;
}

.features-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.features-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0 0 22px;
  color: #fff;
}

.features-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 56px;
  max-width: 640px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 44px;
  column-gap: 48px;
}

.features-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  stroke: #fff;
  color: #fff;
  fill: none;
  stroke-width: 1.5;
}

.features-item-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.features-item-desc {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 320px;
}

@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .features-title {
    font-size: 32px;
  }
}

.testimonials-section {
  background: #ffffff;
  padding: 100px 24px 140px;
}

.testimonials-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.testimonials-header {
  max-width: 700px;
  margin: 0 0 56px;
}

.testimonials-title {
  font-size: 46px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 14px;
  color: var(--howto-navy);
}

.testimonials-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--howto-body-text);
  margin: 0;
}

.testimonials-stage {
  max-width: 900px;
  margin: 0 auto;
}

.testi-card-stack {
  position: relative;
  padding: 12px;
}

.testi-card,
.testi-card-ghost {
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(20, 22, 28, 0.06);
}

.testi-card {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 40px 48px;
  box-shadow: 0 20px 45px rgba(20, 22, 28, 0.12);
}

/* Rotated duplicates sitting behind the real card, offset just enough that
   their edges peek out — suggests more cards stacked underneath. */
.testi-card-ghost {
  position: absolute;
  inset: 12px;
  box-shadow: 0 12px 30px rgba(20, 22, 28, 0.08);
  pointer-events: none;
}

.testi-card-ghost-1 {
  z-index: 2;
  transform: rotate(-3.5deg);
}

.testi-card-ghost-2 {
  z-index: 1;
  background: #f7f8fa;
  transform: rotate(4.5deg);
}

.testi-avatar {
  width: 76px;
  height: 76px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #cfd6e4, #9aa5b8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
}

.testi-quote {
  font-size: 21px;
  line-height: 1.5;
  color: var(--howto-navy);
  margin: 4px 0 0;
  font-weight: 500;
}

.testi-meta-row {
  display: flex;
  align-items: stretch;
  gap: 28px;
  margin: 40px 0 0;
  padding-left: 104px;
}

.testi-person-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--howto-navy);
  margin: 0 0 2px;
}

.testi-person-title {
  font-size: 14px;
  color: var(--howto-body-text);
  margin: 0;
}

.testi-slider-area {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
}

.testi-step-label {
  font-size: 14px;
  color: #9a9ea8;
  width: 14px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.testi-step-label.active {
  color: var(--howto-navy);
  font-weight: 700;
}

.testi-slider-track {
  position: relative;
  flex: 1;
  height: 2px;
  background: #dcdfe6;
  border-radius: 2px;
  cursor: pointer;
}

.testi-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--howto-navy);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.testi-slider-handle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid var(--howto-navy);
  border-radius: 3px;
  transform: translate(-50%, -50%);
  transition: left 0.25s ease;
  cursor: grab;
}

@media (max-width: 700px) {
  .testi-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .testi-quote {
    font-size: 18px;
  }

  .testi-meta-row {
    flex-direction: column;
    padding-left: 0;
    align-items: center;
    gap: 16px;
  }

  .testi-slider-area {
    margin-left: 0;
    width: 100%;
    max-width: 280px;
  }
}

.cta-section {
  position: relative;
  padding: 24px;
  background: #030304;
}

.cta-frame {
  position: relative;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
  border-radius: 4px;
  overflow: hidden;
  font-family: 'Satoshi', sans-serif;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 0px,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 130px
    ),
    linear-gradient(90deg, rgba(3, 3, 4, 0.92) 0%, rgba(3, 3, 4, 0.62) 42%, rgba(3, 3, 4, 0.28) 70%, rgba(3, 3, 4, 0.18) 100%),
    linear-gradient(180deg, rgba(3, 3, 4, 0.5) 0%, rgba(3, 3, 4, 0.05) 25%, rgba(3, 3, 4, 0.05) 68%, rgba(3, 3, 4, 0.85) 100%),
    url('/imagine-computer/ai-creative-os/assets/footer-image.jpg');
  background-size: auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, center 15%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

.cta-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.cta-corner-tl {
  top: 20px;
  left: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}

.cta-corner-tr {
  top: 20px;
  right: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  border-right: 1px solid rgba(255, 255, 255, 0.45);
}

.cta-corner-bl {
  bottom: 20px;
  left: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}

.cta-corner-br {
  bottom: 20px;
  right: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  border-right: 1px solid rgba(255, 255, 255, 0.45);
}

.cta-topbar {
  position: absolute;
  top: 32px;
  left: 56px;
  right: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cta-meta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.cta-rec {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}

.cta-rec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e5484d;
  animation: cta-rec-pulse 1.6s ease-in-out infinite;
}

@keyframes cta-rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.cta-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.cta-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
}

.cta-title {
  font-size: 72px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: #fff;
  margin: 0 0 40px;
}

.cta-title em {
  font-style: italic;
  font-weight: 400;
}

.cta-buttons {
  display: flex;
  gap: 14px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Declared explicitly (not `inherit`) so this reads correctly wherever
     it's reused, not just inside .cta-frame which happens to set the same
     family on itself. */
  font-family: 'Satoshi', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 15px 28px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

.cta-btn-primary {
  background: #fff;
  color: #0a0a0c;
}

.cta-btn-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.cta-bottombar {
  position: absolute;
  bottom: 32px;
  left: 56px;
}

.cta-scene {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 700px) {
  .cta-frame {
    min-height: 520px;
    padding: 32px;
  }

  .cta-topbar {
    left: 32px;
    right: 32px;
  }

  .cta-bottombar {
    left: 32px;
  }

  .cta-title {
    font-size: 40px;
    letter-spacing: -0.5px;
  }

  .cta-buttons {
    flex-wrap: wrap;
  }
}

.site-footer {
  background: #070707;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: hidden;
}

.footer-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 20px 32px;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-logo-icon {
  height: 22px;
  width: auto;
  display: block;
  /* Force the logo to render pure white regardless of the source
     asset's own color, since this footer is always on a dark background. */
  filter: brightness(0) invert(1);
}

.footer-app-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-mobile-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 4px;
}

.footer-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.footer-app-btn:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.footer-app-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.footer-column-heading {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 20px;
}

.footer-column-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-column-links a {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-column-links a:hover {
  color: rgba(255, 255, 255, 0.9);
}

.footer-watermark-wrap {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
  user-select: none;
  pointer-events: none;
  padding: 16px 20px 0;
  overflow: hidden;
}

.footer-watermark {
  font-size: clamp(48px, 13vw, 190px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.14);
}

.footer-bottom-outer {
  padding-top: 0;
  padding-bottom: 24px;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.footer-copyright-row {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
}

.footer-copyright strong {
  font-weight: 600;
}

.footer-cookie-btn {
  font-family: inherit;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  padding: 0 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.footer-cookie-btn:hover {
  color: rgba(255, 255, 255, 0.55);
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 2px;
}

.footer-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.15s ease, background 0.15s ease;
}

.footer-social-btn:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
}

.footer-social-btn svg {
  width: 15px;
  height: 15px;
}

@media (min-width: 640px) {
  .footer-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .footer-container {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 56px;
  }

  .footer-top {
    flex-direction: row;
  }

  .footer-brand {
    flex-direction: column;
    width: 160px;
    justify-content: flex-start;
    gap: 32px;
  }

  .footer-watermark-wrap {
    padding-left: 40px;
    padding-right: 40px;
  }

  .footer-bottom-outer {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 0;
    padding-bottom: 32px;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .footer-columns {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Scroll-triggered reveal, applied via IntersectionObserver in JS */
/* Visible by default — content must not depend on JS to be seen (with
   JS disabled/blocked, or by a crawler that doesn't run it, this is the
   only state that ever renders). JS opts elements INTO the hidden
   pre-reveal look below only for the ones it's about to animate in, then
   removes it again on scroll-intersect — so the reveal is purely a
   progressive enhancement on top of already-visible content, never a
   gate in front of it. */
.reveal {
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}

.reveal.reveal-pending {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
}

.faq-section {
  background: #030304;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.faq-left {
  flex-shrink: 0;
}

.faq-title {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin: 0;
  color: #fff;
}

.faq-title-fade {
  color: rgba(255, 255, 255, 0.35);
}

.faq-subtitle {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.65);
  max-width: 36ch;
  margin: 20px 0 0;
}

.faq-right {
  flex: 1;
  min-width: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.faq-question-text {
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}

.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-icon-v {
  transform-origin: center;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}

.faq-row[data-open='true'] .faq-icon-v {
  transform: scaleY(0);
  opacity: 0;
}

.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.faq-row[data-open='true'] .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
  max-width: 72ch;
  margin: 0;
  padding-bottom: 24px;
}

@media (min-width: 1024px) {
  .faq-wrap {
    flex-direction: row;
    gap: 80px;
    padding: 128px 24px;
  }

  .faq-left {
    width: 360px;
  }
}