/* ─────────────────────────────────────────────────────────────
   sections.css — hero, stats strip, services, ai-focus,
                  process, why-zecel
   ───────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
  padding: var(--space-24) 0 var(--space-20);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-blue-glow);
  pointer-events: none;
}
.hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.hero__eyebrow { margin-bottom: var(--space-6); }
.hero__heading {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 700;
  font-style: normal;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
  margin-bottom: var(--space-6);
}
.hero__heading-accent { color: var(--color-accent); }
.hero__sub {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-2);
  max-width: 52ch;
  margin-bottom: var(--space-10);
}
.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.hero__trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-3);
}
.hero__trust-sep { color: var(--color-paper-5); }

/* AI-network illustration */
.hero__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.ai-net {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
}
.ai-net__glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, oklch(92% 0.025 252) 0%, transparent 70%);
  pointer-events: none;
}
.ai-net__svg { width: 100%; height: 100%; }
.ai-net__hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-net__hub-ring {
  position: absolute;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-accent);
  animation: pulse-ring 2.8s var(--ease-out) infinite;
}
.ai-net__hub-ring--1 { width: 80px;  height: 80px;  opacity: 0.25; animation-delay: 0s; }
.ai-net__hub-ring--2 { width: 110px; height: 110px; opacity: 0.12; animation-delay: 0.6s; }
.ai-net__hub-core {
  width: 60px; height: 60px;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow);
}

/* ── Stats strip ─────────────────────────────────────────── */
.trust {
  background: var(--color-paper-2);
  border-top: var(--rule-hairline);
  border-bottom: var(--rule-hairline);
  padding: var(--space-8) 0;
}
.stats {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.stats__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 120px;
}
.stats__row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}
.stats__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  font-style: normal;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.stats__suffix {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}
.stats__label {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  margin-top: var(--space-1);
}
.stats__divider {
  width: 1px;
  height: 40px;
  background: var(--color-paper-5);
  flex-shrink: 0;
}

/* ── Services ────────────────────────────────────────────── */
.services { background: var(--color-paper); }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.service-card {
  background: var(--color-paper);
  border: var(--rule-hairline);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition:
    box-shadow var(--dur-normal) var(--ease-out),
    transform var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out);
  box-shadow: var(--shadow-xs);
}
.service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--color-paper-5); }
.service-card__icon {
  width: 52px; height: 52px;
  background: var(--color-paper-2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  transition: background var(--dur-normal) var(--ease-out);
}
.service-card:hover .service-card__icon { background: var(--color-accent-faint); }
.service-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  font-style: normal;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}
.service-card__body {
  font-size: var(--text-base);
  color: var(--color-ink-2);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}
.service-card__list { display: flex; flex-direction: column; gap: var(--space-2); }
.service-card__list li {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  padding-left: var(--space-5);
  position: relative;
}
.service-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  background: var(--color-blue);
  border-radius: var(--radius-full);
}

/* ── AI Focus ────────────────────────────────────────────── */
.ai-focus {
  background: var(--color-paper-2);
  border-top: var(--rule-hairline);
  border-bottom: var(--rule-hairline);
}
.ai-focus__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-24) var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: start;
}
.ai-focus__heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  font-style: normal;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
  margin: var(--space-5) 0 var(--space-6);
}
.ai-focus__body {
  font-size: var(--text-md);
  color: var(--color-ink-2);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}
.ai-features                { display: flex; flex-direction: column; gap: var(--space-6); }
.ai-features__item          { display: flex; gap: var(--space-4); align-items: flex-start; }
.ai-features__dot           { width: 8px; height: 8px; background: var(--color-accent); border-radius: var(--radius-full); flex-shrink: 0; margin-top: 6px; }
.ai-features__item strong   { display: block; font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; font-style: normal; color: var(--color-ink); margin-bottom: var(--space-1); }
.ai-features__item p        { font-size: var(--text-sm); color: var(--color-ink-2); line-height: var(--leading-relaxed); }

/* AI code card */
.ai-card                    { background: var(--color-ink); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); }
.ai-card__header            { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-6); background: oklch(20% 0.03 258); border-bottom: 1px solid oklch(30% 0.04 258); }
.ai-card__dot               { width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; }
.ai-card__dot--green        { background: oklch(65% 0.18 145); }
.ai-card__dot--amber        { background: oklch(72% 0.16 75); }
.ai-card__dot--red          { background: oklch(60% 0.22 22); }
.ai-card__label             { font-family: var(--font-mono); font-size: var(--text-xs); color: oklch(60% 0.02 255); margin-left: var(--space-2); }
.ai-card__code {
  padding: var(--space-6) var(--space-6) var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.8;
  background: transparent;
  white-space: pre;
  color: oklch(92% 0.04 220);
}
/* Syntax token colours */
.code-kw  { color: oklch(78% 0.16 290); }  /* keywords    */
.code-str { color: oklch(78% 0.15 148); }  /* strings     */
.code-fn  { color: oklch(80% 0.17  50); }  /* functions   */
.code-op  { color: oklch(72% 0.06 255); }  /* operators   */
.code-id  { color: oklch(92% 0.04 220); }  /* identifiers */
.code-cm  { color: oklch(60% 0.05 255); font-style: italic; } /* comments */
.ai-card__footer    { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-top: 1px solid oklch(30% 0.04 258); background: oklch(18% 0.03 258); }
.ai-card__status    { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: oklch(65% 0.18 145); }
.ai-card__pulse     { width: 7px; height: 7px; border-radius: var(--radius-full); background: oklch(65% 0.18 145); animation: pulse-dot 1.6s var(--ease-in-out) infinite; }
.ai-card__time      { font-family: var(--font-mono); font-size: var(--text-xs); color: oklch(52% 0.04 255); }

/* ── Process ─────────────────────────────────────────────── */
.process { background: var(--color-paper); }
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.process__step    { position: relative; padding-top: var(--space-8); }
.process__num     { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-widest); color: var(--color-blue); margin-bottom: var(--space-6); }
.process__connector {
  position: absolute;
  top: calc(var(--space-8) + 10px);
  left: calc(var(--space-8) + 10px);
  right: calc(-1 * var(--space-6) - 1px);
  height: 1px;
  background: var(--color-paper-4);
}
.process__connector::after {
  content: '';
  position: absolute;
  right: -5px; top: -4px;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--color-paper-5);
  border-top: 1.5px solid var(--color-paper-5);
  transform: rotate(45deg);
}
.process__connector--last { display: none; }
.process__title   { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; font-style: normal; color: var(--color-ink); margin-bottom: var(--space-3); line-height: var(--leading-snug); }
.process__body    { font-size: var(--text-sm); color: var(--color-ink-2); line-height: var(--leading-relaxed); }

/* ── Why Zecel ───────────────────────────────────────────── */
.why { background: var(--color-accent); }
.why .section-inner   { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.why .section-heading { color: var(--color-paper); }
.why .section-sub     { color: oklch(90% 0.015 252); }
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.why__card {
  background: oklch(28% 0.065 258);
  border: 1px solid oklch(34% 0.06 256);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: background var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
}
.why__card:hover { background: oklch(32% 0.07 256); transform: translateY(-2px); }
.why__icon {
  width: 52px; height: 52px;
  background: oklch(32% 0.065 258);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
}
.why__card .why__icon svg path,
.why__card .why__icon svg circle,
.why__card .why__icon svg rect { stroke: var(--color-paper); }
.why__card .why__icon svg circle[fill] { fill: var(--color-paper); stroke: none; }
.why__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; font-style: normal; color: var(--color-paper); margin-bottom: var(--space-3); }
.why__body  { font-size: var(--text-sm); color: oklch(82% 0.015 252); line-height: var(--leading-relaxed); }