/* Atriano Landing Page — Brand & Layout
   Replace images/logo.svg and images/client-*.png as needed. */

:root {
  --bg-main: linear-gradient(180deg, #D7DFFF 0%, #E9DCF5 45%, #FADCEA 100%);
  --bg-mesh: var(--bg-main);
  --bg-surface: #F0EBFA;
  --bg-surface-elevated: rgba(255, 255, 255, 0.6);
  --bg-deep: #030510;
  
  --accent-cyan: #2F6FED;
  --accent-violet: #D6237F;
  --accent-blue: #2F6FED;
  --accent-pink: #D6237F;
  --accent-magenta: #D6237F;
  --accent-primary: #2F6FED;
  --accent-secondary: #D6237F;

  --text-body: #16233F;
  --text-muted: #5B6472;
  --text-dim: #7A8494;
  --text-on-deep: #FFFFFF;
  --text-on-deep-muted: rgba(241, 245, 249, 0.75);

  --font-serif: Georgia, 'Iowan Old Style', serif;
  --hero-gradient: linear-gradient(135deg, #D7DFFF 0%, #E9DCF5 55%, #FADCEA 100%);
  --container-max: 1200px;
  --section-padding: 85px;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;

  /* Visual polish tokens */
  --shadow-soft: 0 10px 30px -5px rgba(22, 35, 63, 0.14);
  --shadow-soft-inner: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  --shadow-strong: 0 20px 45px -10px rgba(22, 35, 63, 0.22);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-med: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  --button-gradient: linear-gradient(135deg, #2F6FED 0%, #1E3B7A 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Geist Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg-mesh);
  background-attachment: fixed;
  color: var(--text-body);
  line-height: 1.5;
  min-height: 100vh;
}

/* Scoped to index.html only: dark theme for the whole homepage, matching the hero,
   so scrolling past the hero doesn't hit an abrupt light section. Redefining these
   tokens here cascades automatically into every rule elsewhere that reads them via var(). */
body.theme-geist {
  font-family: 'Geist Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: linear-gradient(180deg, #0A0714 0%, #030208 100%);
  background-attachment: fixed;
  --bg-main: linear-gradient(180deg, #0A0714 0%, #030208 100%);
  --bg-mesh: var(--bg-main);
  --bg-surface: #100B22;
  --button-gradient: linear-gradient(135deg, #D6237F 0%, #6C4FFF 100%);
  --hero-gradient: linear-gradient(135deg, #1C0F38 0%, #100822 55%, #050310 100%);
  --text-body: #F1F4FA;
  --text-muted: #9AA5B8;
  --text-dim: #6B7484;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

/* --- Visual polish enhancements --- */

/* Elevated card shell used across service, solution, and vertical cards */
.card-elevated {
  position: relative;
  padding: calc(var(--spacing-lg) * 1.15);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--shadow-soft), var(--shadow-soft-inner);
  border: 1px solid rgba(22, 35, 63, 0.10);
  transition:
    box-shadow var(--transition-med),
    border-color var(--transition-med),
    background var(--transition-med);
}

/* Glass edge highlight */
.card-elevated::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 40%, rgba(214, 35, 127, 0.45));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.card-elevated:hover,
.card-elevated:focus-within {
  box-shadow: var(--shadow-strong), var(--shadow-soft-inner);
  border-color: rgba(47, 111, 237, 0.6);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 100%);
}

/* Dark-glass variant, scoped to the homepage's all-dark body */
body.theme-geist .card-elevated {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%);
  border-color: rgba(255, 255, 255, 0.10);
}

body.theme-geist .card-elevated:hover,
body.theme-geist .card-elevated:focus-within {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.9) 100%);
  border-color: rgba(47, 111, 237, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .card-elevated,
  .card-elevated:hover,
  .card-elevated:focus-within {
    transition: none;
  }
}

/* Scroll-reveal: elements fade + rise into place as they enter the viewport */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Alternating section background for visual rhythm */
.section-alt {
  background: radial-gradient(circle at 0% 0%, rgba(47, 111, 237, 0.08), transparent 55%),
              radial-gradient(circle at 100% 100%, rgba(30, 59, 122, 0.06), transparent 55%),
              var(--bg-surface);
}

.section-divider {
  border-top: 1px solid rgba(22, 35, 63, 0.08);
}

/* Enhanced primary button */
.btn-primary {
  display: inline-block;
  padding: 0.9rem 1.9rem;
  background: var(--button-gradient);
  background-size: 220% 220%;
  color: var(--text-on-deep);
  text-decoration: none;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 14px 35px rgba(22, 35, 63, 0.30);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background-position var(--transition-med),
    color var(--transition-fast);
}

.btn-primary:hover {
  background-position: 100% 0%;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 45px rgba(22, 35, 63, 0.38);
  color: var(--text-on-deep);
}

.btn-primary:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 8px 22px rgba(22, 35, 63, 0.35);
}

.btn-lg {
  padding-inline: 2.3rem;
}

/* Focus outlines for all key interactive elements */
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(47, 111, 237, 0.95);
  outline-offset: 3px;
}

.nav__link:focus-visible,
.footer__link:focus-visible {
  text-decoration: underline;
}

/* Subtle hero CTA float animation (reduced-motion friendly) */
@keyframes hero-cta-float {
  0% {
    transform: translateY(0);
    box-shadow: 0 14px 35px rgba(22, 35, 63, 0.30);
  }
  50% {
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(22, 35, 63, 0.38);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 14px 35px rgba(22, 35, 63, 0.30);
  }
}

.hero .btn-primary {
  animation: hero-cta-float 6s ease-in-out infinite;
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.6rem 0;
  background: transparent;
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-md);
  max-width: 920px;
  padding: 0.3rem 1.5rem;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 0 rgba(214, 35, 127, 0.14), 0 12px 30px rgba(22, 35, 63, 0.08);
}

.header__brand {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  /* small gap because .header__wordmark-link carries its own padding for its hover state */
  gap: 0.1rem;
}

.header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 54px;
  min-width: 64px;
  min-height: 54px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: none;
  flex-shrink: 0;
  overflow: visible;
}

/* Reads as a button on hover so it's obvious the wordmark is clickable —
   same light treatment as .nav__link, not a loud accent glow */
.header__wordmark-link {
  display: inline-block;
  padding: 0.32rem 0.6rem;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transform: scale(1);
  transition: background var(--transition-med), transform var(--transition-med);
}

.header__wordmark-link:hover,
.header__wordmark-link:focus-visible {
  background: rgba(22, 35, 63, 0.07);
  transform: scale(1.03);
}

.header__wordmark {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  color: #16233F;
  white-space: nowrap;
}

.header__wordmark-main {
  font-size: 1.05rem;
}

.header__wordmark-accent {
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 640px) {
  .header__wordmark {
    display: none;
  }
}

.header__inner .nav {
  grid-column: 2;
  justify-self: center;
}

.header__logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.header__logo:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 0 28px 6px rgba(214, 35, 127, 0.28);
  border-radius: 50%;
}

.header__logo:hover .header__logo-img {
  transform: scale(1.05);
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  color: #16233F;
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: transparent;
  transform: scale(1);
  transition: color var(--transition-fast), background var(--transition-med), transform var(--transition-med), box-shadow var(--transition-med);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: #16233F;
  background: rgba(22, 35, 63, 0.07);
  transform: scale(1.03);
  box-shadow: none;
}

/* Hero v2: full-viewport, nav embedded, blob glow, marquee footer */
.hero-v2 {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 45%, #241454 0%, #0F0824 55%, #010104 100%);
  color: var(--text-on-deep);
}

/* Glossy sheen: diagonal light bands for a liquid-glass feel */
.hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 28%,
    rgba(255, 255, 255, 0) 68%,
    rgba(255, 255, 255, 0.06) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Glass edge: soft highlight along the bottom where the hero meets the page */
.hero-v2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  z-index: 2;
}

.hero-v2__blob {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  filter: saturate(1.5) brightness(1.25) contrast(1.1);
  animation: hero-blob-drift-1 26s ease-in-out infinite;
}

/* Light wash so the video reads through clearly — the focus-area cards and headline
   text-shadow carry their own contrast now, so this no longer needs a heavy dark zone */
.hero-v2__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(8, 4, 18, 0.28);
}

@keyframes hero-blob-drift-1 {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v2__blob {
    animation: none;
  }
}

/* Floating service badges — fill the empty space beside the showcase card with
   a small icon + label per focus area, gently bobbing for a bit of life */
.hero-v2__service-badges {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Dashed lines from each badge into the card, so it reads as "these 4 things
   feed the showcase" rather than 4 unrelated floating icons */
.hero-v2__connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-v2__connector-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 0.18;
  stroke-dasharray: 1 1.2;
  animation: hero-connector-flow 2.4s linear infinite;
}

@keyframes hero-connector-flow {
  to {
    stroke-dashoffset: -5.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v2__connector-line {
    animation: none;
  }
}

@media (max-width: 1150px) {
  .hero-v2__connectors {
    display: none;
  }
}

.hero-v2__service-badge {
  position: absolute;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
  width: 145px;
  height: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem;
  border-radius: 22px;
  background: rgba(6, 4, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, 0.55);
  color: var(--text-on-deep);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  animation: hero-badge-float 5s ease-in-out infinite;
}

.hero-v2__service-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, #D6237F, #6C4FFF);
}

.hero-v2__service-badge svg {
  width: 44px;
  height: 44px;
}

.hero-v2__service-badge--1 {
  top: 20%;
  left: 4%;
  color: var(--accent-primary);
  animation-delay: 0s;
}

.hero-v2__service-badge--2 {
  top: 60%;
  left: 8%;
  color: var(--accent-secondary);
  animation-delay: 1.2s;
}

.hero-v2__service-badge--3 {
  top: 20%;
  right: 4%;
  color: var(--accent-primary);
  animation-delay: 0.6s;
}

.hero-v2__service-badge--4 {
  top: 60%;
  right: 8%;
  color: var(--accent-secondary);
  animation-delay: 1.8s;
}

.hero-v2__service-badge span {
  color: var(--text-on-deep);
}

.hero-v2__service-badge:hover,
.hero-v2__service-badge:focus-visible {
  border-color: rgba(214, 35, 127, 0.55);
  box-shadow: 0 20px 40px -10px rgba(214, 35, 127, 0.4);
}

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

@media (prefers-reduced-motion: reduce) {
  .hero-v2__service-badge {
    animation: none;
  }
}

@media (max-width: 1150px) {
  .hero-v2__service-badges {
    display: none;
  }
}

.hero-v2__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  width: 100%;
}

.hero-v2__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.5rem;
  padding: 3rem 0 2.5rem;
  opacity: 0;
  transform: translateY(18px);
  animation: hero-v2-content-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 150ms forwards;
}

@keyframes hero-v2-content-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v2__content {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.hero-v2__content--no-marquee {
  padding-bottom: 4rem;
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero__tagline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin: 0 0 var(--spacing-md);
  line-height: 1.2;
}

/* Off-screen clone of hero content used to measure tallest tagline */
.hero__content-measure {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  left: -9999px;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Hero focus-areas grid: extracted from the "Executive Summary" deck slide, rebuilt
   as native cards instead of an embedded screenshot */
.hero-v2__services-eyebrow {
  display: table;
  margin: 0 auto 1rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-on-deep);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(4, 3, 12, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-v2__service-showcase {
  position: relative;
  overflow: hidden;
  max-width: 760px;
  min-height: 260px;
  margin: 0 auto;
  padding: 2.5rem 2.5rem;
  border-radius: 20px;
  background: rgba(6, 4, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  animation: hero-service-card-in 650ms cubic-bezier(0.16, 1, 0.3, 1) 350ms forwards;
}

.hero-v2__service-showcase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #D6237F, #6C4FFF, #2F6FED, #D6237F);
  background-size: 300% 100%;
  animation: hero-showcase-shimmer 6s linear infinite;
}

/* Ambient glow ring behind the card — same "luminous donut" technique used for
   the outcomes-carousel cards, but always on with a slow pulse instead of hover-only */
.hero-v2__service-showcase::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  aspect-ratio: 1;
  min-width: 500px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0%, transparent 38%, rgba(214, 35, 127, 0.35) 48%, rgba(108, 79, 255, 0.22) 60%, transparent 76%);
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
  animation: hero-showcase-glow-pulse 5s ease-in-out infinite;
}

@keyframes hero-showcase-shimmer {
  to {
    background-position: -300% 0;
  }
}

@keyframes hero-showcase-glow-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes hero-service-card-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v2__service-showcase {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-v2__service-showcase::before,
  .hero-v2__service-showcase::after {
    animation: none;
  }
}

.hero-v2__service-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  min-height: 1.3em;
  color: var(--text-on-deep);
}

.hero-v2__service-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
  min-height: 2.6em;
  max-width: 600px;
  color: var(--text-on-deep);
}

.hero-v2__service-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.hero-v2__service-tab {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-on-deep);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.hero-v2__service-tab:hover,
.hero-v2__service-tab:focus-visible {
  color: #FFFFFF;
  border-color: rgba(214, 35, 127, 0.5);
  transform: translateY(-2px);
}

.hero-v2__service-tab.is-active {
  color: #FFFFFF;
  background: linear-gradient(135deg, #D6237F, #6C4FFF);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(214, 35, 127, 0.35);
}

@media (max-width: 480px) {
  .hero-v2__service-tabs {
    gap: 0.45rem;
  }

  .hero-v2__service-tab {
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
  }
}

.hero-v2__services-tagline {
  display: table;
  margin: 1.25rem auto 0;
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-on-deep);
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: rgba(4, 3, 12, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#hero-tagline {
  display: inline-block;
  transition: opacity 400ms ease;
}

#hero-tagline.hero-v2__tagline-fade-out {
  opacity: 0;
}

.hero-v2__services-cta {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}


/* Team Experience (employee showcase before hero) */
.team-experience {
  padding: var(--section-padding) 0;
  background: radial-gradient(circle at 0% 0%, rgba(47, 111, 237, 0.08), transparent 55%),
              radial-gradient(circle at 100% 100%, rgba(30, 59, 122, 0.07), transparent 55%),
              var(--bg-surface);
}

.team-experience__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  margin: 0 0 var(--spacing-md);
  text-align: center;
  color: var(--text-body);
}

.team-experience__subtitle {
  text-align: center;
  font-size: 1.125rem;
  margin: 0 0 var(--spacing-lg);
  color: var(--accent-secondary);
}

.team-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.team-card {
  min-height: 400px;
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: calc(var(--spacing-lg) * 1.5);
  border-radius: 16px;
  background: radial-gradient(circle at 0% 0%, rgba(47, 111, 237, 0.09), transparent 55%),
              radial-gradient(circle at 100% 100%, rgba(30, 59, 122, 0.08), transparent 55%),
              rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-soft), var(--shadow-soft-inner);
  border: 1px solid rgba(22, 35, 63, 0.08);
}

.team-card__photo-container {
  position: relative;
  flex: 0 0 28%;
  max-width: 220px;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(47, 111, 237, 0.09);
  border: 1px solid rgba(22, 35, 63, 0.10);
}

.team-card__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-card__photo--error {
  display: none;
}

.team-card__photo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(135deg, #5A8CFF, var(--accent-primary) 60%, #1E3B7A);
}

.team-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--spacing-md);
}

.team-card__name {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text-body);
}

.team-card__position {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--spacing-md);
  color: var(--accent-secondary);
}

.team-card__quote {
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-style: italic;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  color: var(--text-muted);
  border-left: 3px solid var(--accent-primary);
  padding-left: var(--spacing-md);
}

@media (max-width: 768px) {
  .team-card {
    min-height: 500px;
    flex-direction: column;
    gap: var(--spacing-md);
  }
  .team-card__photo-container {
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  .team-card__content {
    padding-left: 0;
    text-align: center;
  }
  .team-card__quote {
    border-left: none;
    border-top: 3px solid var(--accent-primary);
    padding-left: 0;
    padding-top: var(--spacing-md);
  }
}

/* Section common */
section {
  padding: var(--section-padding) 0;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  margin: 0 0 var(--spacing-lg);
  text-align: center;
  color: var(--text-body);
}

body.theme-geist .section-title {
  color: var(--accent-secondary);
  transition: color 250ms ease, filter 250ms ease, transform 250ms ease;
}

body.theme-geist .section-title:hover {
  color: #FFFFFF;
  filter: drop-shadow(0 0 20px rgba(214, 35, 127, 0.6));
  transform: scale(1.02);
}


/* Section split: two-column header for Services, Solutions, Verticals */
.section-split {
  margin-bottom: var(--spacing-lg);
}

.section-split__grid {
  display: grid;
  max-width: 960px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.section-split__main {
  max-width: 40rem;
  text-align: left;
}

.section-split__main p {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  opacity: 0.95;
}

.section-split__main p:last-child {
  margin-bottom: 0;
}

/* Dark navy highlight panel, matching the deck's "Proven at scale" sidebar pattern */
.section-split__side {
  padding: var(--spacing-lg);
  border-radius: 14px;
  background: radial-gradient(circle at 0% 0%, rgba(47, 111, 237, 0.35), transparent 55%),
              radial-gradient(circle at 100% 100%, rgba(214, 35, 127, 0.28), transparent 55%),
              var(--bg-deep);
  box-shadow: 0 14px 32px rgba(22, 35, 63, 0.28), var(--shadow-soft-inner);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-on-deep);
  position: relative;
}

.section-split__side-title {
  margin-top: 0;
  margin-bottom: 0.85rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-on-deep-muted);
}

.section-split__list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
  font-size: 0.95rem;
}

.section-split__list li + li {
  margin-top: 0.4rem;
}

/* Tags: elegant, theme-coherent "Best for" chips */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 var(--spacing-md);
}

.tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  background: rgba(47, 111, 237, 0.10);
  border: 1px solid rgba(47, 111, 237, 0.25);
  color: var(--text-body);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tag:hover {
  background: rgba(47, 111, 237, 0.16);
  border-color: rgba(47, 111, 237, 0.35);
}

/* Card CTA: subtle "View solution" / "View service" / "View vertical" */
.card-cta {
  display: inline-block;
  margin-top: var(--spacing-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast), text-decoration var(--transition-fast);
}

a:hover .card-cta,
.card-cta:hover {
  color: var(--accent-secondary);
  text-decoration: underline;
}

/* Solution links get the same pill-button treatment as the "View vertical" CTA below them */
body.theme-geist .vertical-item__solutions-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

body.theme-geist .vertical-item__solutions-links li {
  margin-bottom: 0;
}

body.theme-geist .vertical-item__solutions-links a {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(214, 35, 127, 0.14);
  border: 1px solid rgba(214, 35, 127, 0.4);
  color: var(--text-on-deep);
  font-weight: 600;
  font-size: 0.8125rem;
  text-decoration: none;
  transform: perspective(400px) translateY(0) rotateX(0) scale(1);
  transition: transform var(--transition-med), box-shadow var(--transition-med), background var(--transition-med), border-color var(--transition-med), color var(--transition-fast);
}

body.theme-geist .vertical-item__solutions-links a:hover {
  color: #FFFFFF;
  background: linear-gradient(135deg, #D6237F, #6C4FFF);
  border-color: transparent;
  transform: perspective(400px) translateY(-3px) rotateX(-6deg) scale(1.05);
  box-shadow: 0 10px 22px rgba(214, 35, 127, 0.4), 0 0 18px rgba(108, 79, 255, 0.3);
  text-decoration: none;
}

/* Turn the per-card CTA into an actual pill button with a 3D hover lift, instead of plain colored text */
body.theme-geist .card-cta,
body.theme-geist .vertical-item__cta {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  margin-top: 1.1rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(214, 35, 127, 0.14);
  border: 1px solid rgba(214, 35, 127, 0.4);
  color: var(--text-on-deep);
  font-weight: 600;
  transform: perspective(400px) translateY(0) rotateX(0) scale(1);
  transition: transform var(--transition-med), box-shadow var(--transition-med), background var(--transition-med), border-color var(--transition-med), color var(--transition-fast);
}

body.theme-geist .card-cta::after,
body.theme-geist .vertical-item__cta::after {
  content: "\2192";
  transition: transform var(--transition-med);
}

body.theme-geist a:hover .card-cta,
body.theme-geist .card-cta:hover,
body.theme-geist .vertical-item__cta:hover {
  color: #FFFFFF;
  background: linear-gradient(135deg, #D6237F, #6C4FFF);
  border-color: transparent;
  transform: perspective(400px) translateY(-4px) rotateX(-8deg) scale(1.05);
  box-shadow: 0 14px 28px rgba(214, 35, 127, 0.4), 0 0 22px rgba(108, 79, 255, 0.35);
  text-decoration: none;
}

body.theme-geist a:hover .card-cta::after,
body.theme-geist .card-cta:hover::after,
body.theme-geist .vertical-item__cta:hover::after {
  transform: translateX(3px);
}

body.theme-geist .solutions-tabs__tab.is-active {
  color: var(--accent-secondary);
  border-bottom-color: var(--accent-secondary);
}

/* Solution tabs */
.solutions-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: calc(var(--spacing-lg) * 1.1);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid rgba(22, 35, 63, 0.10);
}

.solutions-tabs__tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 0.25rem 0.75rem;
  margin-right: var(--spacing-md);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.solutions-tabs__tab:hover {
  color: var(--text-body);
}

.solutions-tabs__tab.is-active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.solutions-tabs__tab:focus-visible {
  outline: 2px solid rgba(47, 111, 237, 0.95);
  outline-offset: 2px;
}

/* Solution groups (tab panels) */
.solutions-group {
  padding-bottom: var(--spacing-lg);
}

.solutions-group[hidden] {
  display: none;
}

.solutions-group__tagline {
  margin: 0 0 calc(var(--spacing-md) * 0.9);
  font-size: 0.9375rem;
  opacity: 0.9;
}

/* Horizontal scroll-snap row instead of a wrapping grid */
.solutions-group__grid {
  display: flex;
  gap: var(--spacing-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 111, 237, 0.40) transparent;
}

.solutions-group__grid > .solution-card {
  flex: 0 0 min(320px, 85vw);
  scroll-snap-align: start;
}

/* Section CTA strip */
.section-cta {
  text-align: center;
  margin-top: var(--spacing-lg);
  padding: var(--spacing-lg);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 50%, rgba(47, 111, 237, 0.10), transparent 70%),
              var(--bg-surface);
  border: 1px solid rgba(22, 35, 63, 0.08);
}

.section-cta__text {
  margin: 0 0 var(--spacing-md);
  font-size: 1rem;
  opacity: 0.95;
}

.section-cta .btn-primary {
  margin: 0;
}

/* Vertical snapshot: initiatives + relevant solutions */
.vertical-item__reality {
  margin: 0 0 var(--spacing-md);
  font-size: 0.9rem;
  opacity: 0.9;
  font-style: italic;
}

.vertical-item__initiatives-title,
.vertical-item__solutions-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--spacing-md) 0 0.4rem;
  opacity: 0.85;
}

.vertical-item__initiatives {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.vertical-item__initiatives li + li {
  margin-top: 0.25rem;
}

.vertical-item__solutions-links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.vertical-item__solutions-links li {
  margin-bottom: 0.35rem;
}

.vertical-item__solutions-links a {
  color: var(--accent-primary);
  text-decoration: none;
}

.vertical-item__solutions-links a:hover {
  text-decoration: underline;
  color: var(--accent-secondary);
}

.vertical-item__cta {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--spacing-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast), text-decoration var(--transition-fast);
}

.vertical-item__cta:hover {
  color: var(--accent-secondary);
  text-decoration: underline;
}

/* Detail pages */
.detail-hero {
  padding: calc(var(--section-padding) * 0.8) 0;
  background: var(--hero-gradient);
  color: var(--text-body);
}

.detail-hero__content {
  max-width: 800px;
  margin: 0 auto;
}

.detail-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  opacity: 0.8;
  margin: 0 0 0.75rem;
}

.detail-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  margin: 0 0 var(--spacing-md);
  color: var(--text-body);
}

body.theme-geist .detail-hero__title {
  color: var(--accent-secondary);
  display: inline-block;
  transition: color 250ms ease, filter 250ms ease, transform 250ms ease;
}

body.theme-geist .detail-hero__title:hover {
  color: #FFFFFF;
  filter: drop-shadow(0 0 20px rgba(214, 35, 127, 0.6));
  transform: perspective(500px) translateY(-4px) rotateX(-6deg) scale(1.03);
}

.detail-hero__subtitle {
  margin: 0;
  font-size: 1.05rem;
  max-width: 38rem;
  opacity: 0.95;
}

/* Split variant: text on the left, a video card on the right, for pages
   that have a short promo clip to show. .detail-hero__content is centered
   text at 800px max-width by default; this variant widens and switches to
   a 2-column grid instead. */
.detail-hero__content--split {
  max-width: 1150px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: center;
}

/* 1:1 card matching the source clips' native square export (1080x1080),
   so nothing gets cropped the way a 16:9 box would crop a square video. */
/* 4:3 rather than the source's native 1:1 — the clips carry a lot of empty
   gradient margin above/below their on-screen text, so a plain square card
   was mostly empty space. Checked against frames across all 5 videos
   (including the most text-dense one, HREye's 12-module grid) to confirm
   this still keeps every frame's content in view before trimming further. */
.detail-hero__video {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #05030c;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.detail-hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-hero__video:focus-visible {
  outline: 2px solid rgba(47, 111, 237, 0.95);
  outline-offset: 3px;
}

/* Expand affordance — injected by heroVideoLightbox() in interactions.js on
   every .detail-hero__video it finds, so this is a purely CSS-declared
   hover/focus state rather than something wired per page. Faint at rest so
   it doesn't compete with the video, fully visible on hover/focus as a clear
   "this opens bigger" signal on desktop; on touch devices there's no hover,
   so tapping the card opens the lightbox directly regardless. */
.detail-hero__video-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(5, 3, 12, 0.55);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  opacity: 0.7;
  transition: opacity var(--transition-med), transform var(--transition-med), background var(--transition-med);
  pointer-events: none;
}

.detail-hero__video-expand svg {
  width: 18px;
  height: 18px;
}

.detail-hero__video:hover .detail-hero__video-expand,
.detail-hero__video:focus-visible .detail-hero__video-expand {
  opacity: 1;
  background: rgba(5, 3, 12, 0.8);
  transform: scale(1.08);
}

/* Lightbox — one shared overlay per page, injected once by
   heroVideoLightbox(), reused for whichever hero video was clicked. Shows
   the video at its native 1:1 frame (object-fit: contain) rather than the
   4:3 crop the small card uses, so nothing — including the corner logo or
   footer branding some clips carry — is ever hidden once expanded. */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1.5rem 1.5rem;
  background: rgba(3, 2, 8, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-med);
}

.video-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.video-lightbox__inner {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #05030c;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: scale(0.96);
  transition: transform var(--transition-med);
}

.video-lightbox.is-open .video-lightbox__inner {
  transform: scale(1);
}

.video-lightbox__inner video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #05030c;
  display: block;
}

/* Inset into the frame's own top-right corner, overlapping the video itself
   — not floating above the box. Sitting above the box (as this originally
   did) put it outside .video-lightbox__inner: on a short viewport (laptop
   with bookmarks bar, browser chrome, etc.) the vertically-centered box can
   sit close enough to the top that an offset above it lands above y=0,
   clipped by the browser window itself before the lightbox's own padding or
   any z-index comes into play. Inside the corner, it's always within the
   box that .video-lightbox__inner's own max-height already keeps on-screen,
   so it can't go off-screen at any viewport size. Solid (not translucent)
   background keeps it readable against any video content behind it. */
.video-lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  /* Kept mostly transparent: these clips carry the Atriano wordmark in their
     own top-right corner, and a solid button sat right on top of it. The X
     stays readable on any frame via its own drop-shadow rather than a filled
     background, so the branding behind it still reads through. */
  background: rgba(5, 3, 12, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.video-lightbox__close:hover,
.video-lightbox__close:focus-visible {
  background: var(--accent-secondary);
  transform: scale(1.08);
}

@media (max-width: 640px) {
  .video-lightbox {
    padding: 1rem;
  }

  .video-lightbox__close {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
  }
}

/* 404 page */
.error-page {
  text-align: center;
}

.error-page .detail-hero__subtitle {
  margin: 0 auto;
}

.error-page__code {
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 14vw, 8rem);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 0.25rem;
  background: var(--button-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: var(--spacing-lg);
}

.error-page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--spacing-md);
}

/* .detail-layout itself carries no styling — it sits inside .detail-section, which
   already applies --section-padding; this class exists only as a layout hook. */

.detail-layout__grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.detail-layout__main p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Dark navy highlight panel, matching the deck's "Proven at scale" sidebar pattern */
.detail-layout__side {
  padding: 1.75rem;
  border-radius: 14px;
  background: radial-gradient(circle at 0% 0%, rgba(47, 111, 237, 0.35), transparent 55%),
              radial-gradient(circle at 100% 100%, rgba(214, 35, 127, 0.28), transparent 55%),
              var(--bg-deep);
  box-shadow: 0 14px 32px rgba(22, 35, 63, 0.28), var(--shadow-soft-inner);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-on-deep);
}

.detail-layout__side-title {
  margin-top: 0;
  margin-bottom: 0.9rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-on-deep-muted);
}

/* These panels hold two labelled groups ("Best for", then "Typical deliverables").
   The second heading otherwise sits flush against the list above it, so the two
   groups read as one run-on block; a rule above it separates them. */
.detail-layout__side > * + .detail-layout__side-title {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.detail-layout__list {
  list-style: disc;
  padding-left: 1.1rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.detail-layout__list li::marker {
  color: var(--accent-secondary);
}

.detail-layout__list li + li {
  margin-top: 0.55rem;
}

/* "Relevant solutions" links get the same pill-button treatment as the homepage vertical cards */
.detail-layout__list--links {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detail-layout__list--links li + li {
  margin-top: 0;
}

body.theme-geist .detail-layout__list--links a {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(214, 35, 127, 0.14);
  border: 1px solid rgba(214, 35, 127, 0.4);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.8125rem;
  text-decoration: none;
  transform: perspective(400px) translateY(0) rotateX(0) scale(1);
  transition: transform var(--transition-med), box-shadow var(--transition-med), background var(--transition-med), border-color var(--transition-med), color var(--transition-fast);
}

body.theme-geist .detail-layout__list--links a:hover {
  color: #FFFFFF;
  background: linear-gradient(135deg, #D6237F, #6C4FFF);
  border-color: transparent;
  transform: perspective(400px) translateY(-3px) rotateX(-6deg) scale(1.05);
  box-shadow: 0 10px 22px rgba(214, 35, 127, 0.4), 0 0 18px rgba(108, 79, 255, 0.3);
  text-decoration: none;
}

.detail-section {
  padding: var(--section-padding) 0;
  border-top: 1px solid rgba(22, 35, 63, 0.08);
}

.detail-section--gallery {
  padding-top: calc(var(--section-padding) * 0.45);
  padding-bottom: calc(var(--section-padding) * 0.4);
}

/* The Overview panel is short, so its full bottom padding stacked on the gallery's
   top padding left a large empty band before "Outcomes in practice". Halve the
   trailing side so the two sections sit one section-gap apart, not two. */
.detail-section:has(+ .detail-section--gallery) {
  padding-bottom: calc(var(--section-padding) * 0.45);
}

.detail-section__header {
  max-width: 720px;
  margin: 0 0 var(--spacing-lg);
  text-align: left;
}

.detail-section__title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
}

body.theme-geist .detail-section__title {
  color: var(--accent-secondary);
}

.detail-section__intro {
  margin: 0;
  opacity: 0.9;
}

.detail-section__body {
  max-width: 800px;
  margin: 0 auto;
}

.detail-section__body p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.detail-section__body--center {
  text-align: center;
}

.detail-section--cta {
  padding-top: calc(var(--section-padding) * 0.5);
  text-align: center;
}

.detail-section--cta .btn-primary {
  margin-top: var(--spacing-md);
}

.detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
}

.detail-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(circle at 0% 0%, rgba(47, 111, 237, 0.10), transparent 55%),
              rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(22, 35, 63, 0.10);
  box-shadow: var(--shadow-soft);
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-md);
}

.detail-gallery__label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

body.theme-geist .detail-gallery__item {
  background: radial-gradient(circle at 0% 0%, rgba(108, 79, 255, 0.16), transparent 55%),
              radial-gradient(circle at 100% 100%, rgba(214, 35, 127, 0.12), transparent 55%),
              rgba(16, 11, 34, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
}

.detail-gallery__item--large {
  min-height: 520px;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.6rem;
}

.detail-gallery__item--large .detail-gallery__label {
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}

.detail-gallery__item--large .detail-gallery__desc {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.85;
  max-width: 46ch;
}

/* Native card — modeled on a product-diagram aesthetic: near-black canvas, a glowing
   RING as the centerpiece (not a blurry blob), a small outlined icon paired with the
   title, not a screenshot of a slide. Used for "Outcomes in practice". */
.detail-gallery__item--native {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: calc(var(--spacing-lg) * 1.4);
  background: #030208;
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease, border-color 350ms ease;
}

.detail-gallery__item--native:hover {
  border-color: rgba(214, 35, 127, 0.45);
  box-shadow: 0 24px 50px -12px rgba(214, 35, 127, 0.35);
}

/* The glow is a RING (transparent hole in the middle), not a solid blurred disc —
   built from two stacked radial-gradients so it reads as a luminous donut shape. */
.detail-gallery__glow {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 66%;
  aspect-ratio: 1;
  min-width: 300px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0%, transparent 34%, rgba(214, 35, 127, 0.55) 46%, rgba(108, 79, 255, 0.30) 58%, transparent 74%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
  transition: opacity 350ms ease, transform 350ms ease;
}

.detail-gallery__item--native:hover .detail-gallery__glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
}

.detail-gallery__item--native .detail-gallery__label {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-on-deep);
  opacity: 1;
}

.detail-gallery__item--native .detail-gallery__desc {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  line-height: 1.65;
  opacity: 0.82;
  max-width: 52ch;
}

/* Agent card — a structured info card (status badge, subtitle, region/industry tags,
   divider, description, outcome stat), pulled straight from the deck's real fields
   instead of collapsing everything into one centered paragraph. Left-aligned. */
.detail-gallery__item--agent {
  align-items: flex-start;
  text-align: left;
  gap: 0.5rem;
}

.detail-gallery__item--agent .detail-gallery__glow {
  top: 20%;
  left: 88%;
  width: 46%;
  min-width: 220px;
}

.detail-gallery__item--agent .detail-gallery__label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.detail-gallery__item--agent .detail-gallery__desc {
  max-width: 46ch;
}

/* Stat row — a set of big-number callouts (e.g. "Proven at scale"), left-aligned in a row */
.detail-gallery__stat-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0.2rem 0;
}

.detail-gallery__stat-row-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.detail-gallery__stat-row-number {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text-on-deep);
  line-height: 1;
}

.detail-gallery__stat-row-caption {
  font-size: 0.78rem;
  color: var(--text-on-deep-muted);
}

/* Sub-card grid — nested transparent panels inside one big card, each holding the full
   detail for one item (title, badge, meta, description, stat), so nothing from the
   source slide gets flattened down to just a name. */
.detail-gallery__subcard-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

/* Column-count variants so a grid's item count divides evenly instead of the
   default 3-up leaving a single orphan card on the last row:
   4 items -> --pairs (2+2), 8 items -> --quad (4+4), 10 items -> --five (5+5) */
.detail-gallery__subcard-grid--pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-gallery__subcard-grid--quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-gallery__subcard-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Step the wider variants down to 2-up before the 860px single-column collapse,
   so 4- and 5-across grids don't get cramped on mid-size screens (still even) */
@media (max-width: 1100px) {
  .detail-gallery__subcard-grid--quad,
  .detail-gallery__subcard-grid--five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.detail-gallery__subcard {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}

.detail-gallery__subcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.detail-gallery__subcard-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-on-deep);
}

.detail-gallery__subcard-meta {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-on-deep-muted);
}

.detail-gallery__subcard-desc {
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.82;
}

.detail-gallery__subcard-stat {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-secondary);
  margin-top: auto;
  padding-top: 0.2rem;
}

.detail-gallery__badge-status {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: rgba(74, 222, 156, 0.16);
  color: #4ADE9C;
  border: 1px solid rgba(74, 222, 156, 0.35);
}

.detail-gallery__badge-status--case {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-deep-muted);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Callout — a highlighted full-width strip for the slide's closing statement */
.detail-gallery__callout {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  background: rgba(214, 35, 127, 0.10);
  border: 1px solid rgba(214, 35, 127, 0.28);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-on-deep);
  text-align: left;
}

/* Sub-card icon — same gradient-chip convention as .service-category__icon /
   .vertical-item__icon / .solution-card__icon, scaled down for use inside a
   .detail-gallery__subcard (32px vs. the top-level 48px). */
.detail-gallery__subcard-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 0.4rem;
  background: linear-gradient(135deg, #5A8CFF, var(--accent-primary) 60%, #1E3B7A);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-deep);
  box-shadow: 0 4px 10px rgba(47, 111, 237, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Colored underline rule beneath a sub-card title. Cycles through the site's
   existing 3-color accent set (blue / pink / violet — the same trio already
   used together at .hero-v2__service-showcase::before) rather than
   introducing new colors, so this stays consistent with the rest of the
   dark theme. On a 3-item grid this is one clean pass (blue, pink, violet);
   on a 4-item --quad grid it wraps once (blue, pink, violet, blue). */
.detail-gallery__subcard-rule {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  margin: 0.15rem 0 0.4rem;
  background: var(--accent-primary);
}

.detail-gallery__subcard:nth-child(3n+2) .detail-gallery__subcard-rule {
  background: var(--accent-secondary);
}

.detail-gallery__subcard:nth-child(3n) .detail-gallery__subcard-rule {
  background: #6C4FFF;
}


.solution-card {
  background: transparent;
}

.solution-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-md);
  background: linear-gradient(135deg, #5A8CFF, var(--accent-primary) 60%, #1E3B7A);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  font-size: 0.75rem;
  box-shadow: 0 6px 16px rgba(47, 111, 237, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}

.card-elevated:hover .solution-card__icon {
  transform: translateZ(20px) scale(1.08) rotate(-3deg);
  box-shadow: 0 10px 22px rgba(47, 111, 237, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.solution-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.solution-card__desc {
  margin: 0;
  font-size: 0.9375rem;
  opacity: 0.9;
}

.solutions .solution-card.card-elevated:focus-within,
.services .service-category.card-elevated:focus-within {
  outline: 2px solid rgba(47, 111, 237, 0.95);
  outline-offset: 3px;
}

/* How We Work */
body.theme-geist .how-we-work {
  background: radial-gradient(circle at 15% 20%, rgba(108, 79, 255, 0.16), transparent 55%),
              radial-gradient(circle at 85% 80%, rgba(196, 168, 255, 0.10), transparent 55%),
              #04030A;
}

.how-we-work__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 380px));
  justify-content: center;
  gap: var(--spacing-lg);
}

@media (max-width: 600px) {
  .how-we-work__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

@media (max-width: 560px) {
  .how-we-work__grid {
    grid-template-columns: 1fr;
  }
}

.how-we-work__step {
  border-top: 2px solid rgba(47, 111, 237, 0.30);
  padding-top: var(--spacing-md);
}

.how-we-work__number {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--spacing-md);
  background: linear-gradient(120deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.how-we-work__title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}

.how-we-work__desc {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Industry Verticals */
body.theme-geist .industry-verticals {
  background: radial-gradient(circle at 85% 15%, rgba(196, 168, 255, 0.12), transparent 55%),
              radial-gradient(circle at 10% 85%, rgba(108, 79, 255, 0.16), transparent 55%),
              #050311;
}

.vertical-item {
  background: transparent;
  display: flex;
  flex-direction: column;
}

.vertical-item__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-md);
  background: linear-gradient(135deg, #5A8CFF, var(--accent-primary) 60%, #1E3B7A);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  font-size: 0.75rem;
  box-shadow: 0 6px 16px rgba(47, 111, 237, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}

.card-elevated:hover .vertical-item__icon {
  transform: translateZ(20px) scale(1.08) rotate(-3deg);
  box-shadow: 0 10px 22px rgba(47, 111, 237, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.vertical-item__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

/* Services */
body.theme-geist .services {
  background: radial-gradient(circle at 20% 80%, rgba(108, 79, 255, 0.15), transparent 55%),
              radial-gradient(circle at 90% 20%, rgba(196, 168, 255, 0.11), transparent 55%),
              #04030A;
}


.service-category {
  background: transparent;
}

.service-category__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-md);
  background: linear-gradient(135deg, #5A8CFF, var(--accent-primary) 60%, #1E3B7A);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  font-size: 0.75rem;
  box-shadow: 0 6px 16px rgba(47, 111, 237, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}

.card-elevated:hover .service-category__icon {
  transform: translateZ(20px) scale(1.08) rotate(-3deg);
  box-shadow: 0 10px 22px rgba(47, 111, 237, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.service-category__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-md);
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Clients */
.clients__carousel {
  overflow: hidden;
  padding: var(--spacing-md);
  min-height: 76px;
  background: #FFFFFF;
  border-radius: 16px;
}

.clients__carousel-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 3.5rem;
  align-items: center;
  width: max-content;
  animation: none;
}

.clients__carousel.clients__carousel--ready .clients__carousel-track {
  animation: scroll-clients 38s linear infinite;
  animation-play-state: running;
}

.clients__carousel:hover .clients__carousel-track,
.clients__carousel:focus-within .clients__carousel-track {
  animation-play-state: paused;
}

@keyframes scroll-clients {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--clients-scroll-distance, 0px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients__carousel-track {
    animation: none;
  }

  .hero .btn-primary {
    animation: none;
  }
}

.client-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.client-logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 48px;
  max-width: 140px;
  filter: grayscale(1);
  opacity: 0.45;
  transition: filter var(--transition-med), opacity var(--transition-med), transform var(--transition-med);
}

.client-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}

body.theme-geist .client-logo img {
  filter: grayscale(0) invert(0) brightness(1);
  opacity: 1;
}

body.theme-geist .client-logo:hover img {
  filter: grayscale(0) invert(0) brightness(1);
  opacity: 1;
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .client-logo img {
    transition: none;
  }
}

/* Testimonials carousel (below logo carousel) */
.clients__testimonial {
  max-width: 640px;
  margin: var(--spacing-lg) auto 0;
  padding: var(--spacing-lg);
  text-align: center;
  font-style: italic;
  opacity: 0.9;
  box-sizing: border-box;
}


/* Footer: deliberate dark navy anchor band, matching the deck's banner pattern */
.footer {
  background:
    radial-gradient(circle at 0% 0%, rgba(47, 111, 237, 0.16), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(30, 59, 122, 0.22), transparent 55%),
    var(--bg-deep);
  color: var(--text-on-deep);
  padding: calc(var(--section-padding) * 0.55) 0 calc(var(--spacing-lg) * 0.75);
}

.footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

/* Override .card-elevated's light glass — this card sits on the dark footer, needs a dark-glass treatment instead */
.footer__cta.card-elevated {
  background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
              rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-on-deep);
}

.footer__cta.card-elevated::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.12));
}

.footer__cta.card-elevated:hover,
.footer__cta.card-elevated:focus-within {
  border-color: rgba(255, 255, 255, 0.3);
}

.footer__cta-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
}

.footer__cta-subtitle {
  margin: 0;
  opacity: 0.9;
  max-width: 55ch;
}

.footer__cta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}


.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: calc(var(--spacing-lg) * 0.75);
}

.footer__col {
  min-width: 0;
}

.footer__brand-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.footer__brand-tagline {
  margin: 0.25rem 0 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7CA6FF;
}

.footer__brand-desc {
  margin: 0;
  opacity: 0.9;
  max-width: 48ch;
}

.footer__heading {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--spacing-md);
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__links li {
  margin-bottom: 0.5rem;
}

.footer__link {
  color: var(--text-on-deep-muted);
  text-decoration: none;
  font-size: 0.9375rem;
}

.footer__link:hover {
  color: var(--text-on-deep);
}

.footer__contact {
  font-size: 0.9375rem;
  margin: 0;
  opacity: 0.9;
}

.footer__meta {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  opacity: 0.75;
}

.footer__social {
  display: flex;
  gap: var(--spacing-md);
  margin-top: 0.85rem;
}

.footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spacing-md);
  padding-top: calc(var(--spacing-lg) * 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__copy {
  font-size: 0.875rem;
  opacity: 0.7;
  margin: 0;
}

.footer__credit {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__credit-label {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}

.footer__credit-link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  background: var(--button-gradient);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(214, 35, 127, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.footer__credit-link:hover,
.footer__credit-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(214, 35, 127, 0.5);
}

.footer__legal {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
}

/* Responsive */
@media (max-width: 1024px) {
  .solutions-group__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 768px) {
  :root {
    --section-padding: 48px;
  }

  .hero {
    min-height: 320px;
  }

  .solutions-group__grid {
    grid-template-columns: 1fr;
  }

  .footer__cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

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

  .footer__bottom {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 0.6rem;
  }

  .footer__credit,
  .footer__legal {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .detail-layout__grid,
  .section-split__grid,
  .detail-hero__content--split {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-hero__video {
    max-width: 240px;
    margin: var(--spacing-md) 0 0;
  }

  .detail-section__header {
    text-align: left;
  }

  .section-split__side {
    margin-top: var(--spacing-md);
  }
}

/* ----------------------------------------------------
   MOBILE NAVIGATION
   ---------------------------------------------------- */
.header__nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
}

.header__nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #8C1A5A;
  border-radius: 2px;
  transition: transform 250ms ease, opacity 200ms ease;
}

.header__nav-toggle.is-active .header__nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__nav-toggle.is-active .header__nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.header__nav-toggle.is-active .header__nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  .header__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 1rem;
  }

  .header__logo {
    width: 48px;
    height: 40px;
    min-width: 48px;
    min-height: 40px;
    padding: 2px 6px;
  }

  .header__nav-toggle {
    display: flex;
  }

  .header__inner .nav {
    grid-column: unset;
    justify-self: unset;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 30px rgba(22, 35, 63, 0.15);
    transition: max-height 300ms ease;
  }

  .nav.nav--open {
    max-height: 70vh;
    overflow-y: auto;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--spacing-lg) 1rem;
  }

  .nav__list li {
    width: 100%;
  }

  .nav__link {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 10px;
  }
}

/* Narrow phones: fixed 300px grid minimums are wider than the available content
   width once container padding is subtracted, forcing horizontal overflow. */
@media (max-width: 480px) {
  :root {
    --spacing-lg: 1.25rem;
  }

  .section-carousel__slide-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-hero__title {
    word-break: break-word;
  }
}

@media (max-width: 860px) {
  .detail-gallery__subcard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----------------------------------------------------
   3-SLIDE AUTO CAROUSEL COMPONENT SYSTEM
   ---------------------------------------------------- */
.section-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1.5rem 0 3.5rem;
  margin: 1.5rem 0 0;
  border-radius: 24px;
}

.section-carousel__track {
  display: flex;
  width: 100%;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.section-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  opacity: 0.4;
  transform: scale(0.97);
  transition: opacity 600ms ease, transform 600ms ease;
}

.section-carousel__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.section-carousel__slide-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

/* Both of these set display:flex, which beats the UA stylesheet's
   [hidden]{display:none} — so the hidden attribute alone wouldn't hide them.
   initSectionCarousels() sets hidden on a single-slide carousel's controls
   (nothing to page through), and this is what makes that actually take. */
.section-carousel__dots[hidden],
.section-carousel__controls[hidden] {
  display: none;
}

.section-carousel__dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  z-index: 10;
}

.section-carousel__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0;
  cursor: pointer;
  transition: width 300ms ease, background 300ms ease, border-color 300ms ease;
}

.section-carousel__dot.is-active {
  width: 34px;
  background: var(--accent-secondary);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(214, 35, 127, 0.4);
}

.section-carousel__controls {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
  padding: 0 0.5rem;
}

.section-carousel__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}

.section-carousel__btn:hover {
  transform: scale(1.1);
  background: rgba(30, 41, 59, 0.9);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(47, 111, 237, 0.35);
}