/* ═══════════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: min(90dvh, 820px);
  padding-block: var(--space-24) var(--space-20);
  position: relative;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.status-dot {
  width: 8px; height: 8px;
  background: var(--accent-green);
  border-radius: var(--radius-full);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgb(57 255 136 / 0.5); }
  50%       { box-shadow: 0 0 0 6px rgb(57 255 136 / 0); }
}

.hero h1 { margin-bottom: var(--space-3); }

/* rotating word cycle */
.hero-cycle {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  vertical-align: bottom;
  min-width: 7ch;
}

.hero-cycle-words {
  display: flex;
  flex-direction: column;
  animation: word-roll 9s steps(1) infinite;
}

.hero-cycle-words span {
  display: block;
  height: 1.2em;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes word-roll {
  0%   { transform: translateY(0); }
  33%  { transform: translateY(-1.2em); }
  66%  { transform: translateY(-2.4em); }
  100% { transform: translateY(0); }
}

.hero-sub {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  color: var(--fg-1);
  max-width: 58ch;
  line-height: 1.7;
  margin-bottom: var(--space-10);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.hero-scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg-2);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce-down 2s ease-in-out infinite;
}

.hero-scroll svg { width: 18px; }

@keyframes bounce-down {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ── Value props ───────────────────────────────────────── */
.props-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.prop-card {
  background: rgb(255 255 255 / 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out);
}

.prop-card:hover {
  border-color: var(--border-accent);
  box-shadow: 0 0 32px var(--accent-glow);
  transform: translateY(-4px);
}

.prop-icon {
  width: 48px; height: 48px;
  background: rgb(0 229 255 / 0.08);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.prop-icon svg { width: 24px; height: 24px; color: var(--accent-cyan); }

.prop-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.prop-card p { font-size: var(--text-sm); line-height: 1.7; }

/* ── Feature stat strip ────────────────────────────────── */
.stats-strip {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgb(255 255 255 / 0.02);
}

.stat-item {
  padding: var(--space-8);
  border-right: 1px solid var(--border);
  text-align: center;
}

.stat-item:last-child { border-right: none; }

.stat-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--fg-2);
}

/* ── Trust strip ───────────────────────────────────────── */
.trust-strip {
  text-align: center;
  padding-block: var(--space-12);
  border-block: 1px solid var(--border);
  margin-block: var(--space-12);
}

.trust-strip p {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: var(--space-8);
  max-width: none;
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8) var(--space-12);
}

.trust-logos span {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-2);
  letter-spacing: 0.05em;
  opacity: 0.6;
}

/* ── CTA banner ────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg,
    rgb(0 229 255 / 0.06) 0%,
    rgb(168 85 247 / 0.06) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-10);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgb(0 229 255 / 0.08), transparent 65%);
  pointer-events: none;
}

.cta-banner h2 { margin-bottom: var(--space-4); }
.cta-banner p  {
  margin-inline: auto;
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
}

/* ═══════════════════════════════════════════════════════
   SERVICES PAGE
═══════════════════════════════════════════════════════ */

.services-hero {
  padding-block: var(--space-20);
}

.service-card {
  background: rgb(255 255 255 / 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out);
}

.service-card:hover {
  border-color: var(--border-accent);
  box-shadow: 0 0 40px var(--accent-glow);
  transform: translateY(-4px);
}

.service-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.service-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  background: rgb(0 229 255 / 0.07);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-icon svg { width: 26px; height: 26px; color: var(--accent-cyan); }

.service-card h3 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.service-card p  { font-size: var(--text-sm); line-height: 1.75; }

.service-outcomes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-outcomes h4 {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.service-outcomes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-1);
  line-height: 1.6;
}

.service-outcomes li::before {
  content: "→";
  color: var(--accent-cyan);
  flex-shrink: 0;
  margin-top: 2px;
}

/* process strip */
.process-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  padding-block: var(--space-8);
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.process-num {
  width: 44px; height: 44px;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-cyan);
  background: rgb(0 229 255 / 0.06);
}

.process-step-label {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--fg-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.process-arrow {
  color: var(--fg-2);
  font-size: var(--text-xl);
  padding-inline: var(--space-2);
  padding-bottom: var(--space-6);
}

/* ═══════════════════════════════════════════════════════
   TEAM PAGE
═══════════════════════════════════════════════════════ */

.team-hero {
  padding-block: var(--space-20);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-6);
  align-items: start;
}

employee-info {
  display: block;
}

employee-info[open] {
  grid-column: 1 / -1;
}