/* ================= Home page ================= */

/* ----- HERO ----- */
.hero {
  background: var(--site-hero-bg);
  color: var(--site-hero-fg);
  padding: 96px 0 120px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--site-header-border);
}
.hero .grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.05;
  mask-image: radial-gradient(ellipse at 70% 40%, black 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 20%, transparent 72%);
}
.hero .inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
}
@media (max-width: 960px) { .hero .inner { grid-template-columns: 1fr; gap: 48px; } }
.hero h1 {
  font: 700 clamp(56px, 8vw, 124px)/0.92 var(--q-font-display);
  letter-spacing: -0.028em;
  margin: 20px 0 28px;
  color: var(--site-hero-fg);
}
.hero h1 em { font-style: italic; color: var(--site-accent); font-weight: 700; }
.hero .lede {
  font: 400 20px/1.5 var(--q-font-body);
  color: var(--site-hero-lede);
  max-width: 540px;
  margin: 0 0 40px;
}
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .meta-row {
  display: flex; gap: 24px; margin-top: 48px;
  padding-top: 24px; border-top: 1px solid;
  border-color: color-mix(in srgb, var(--site-hero-fg) 22%, transparent);
  font: 500 11px/1.3 var(--q-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-hero-lede);
  opacity: .85;
  flex-wrap: wrap;
}
.hero .meta-row span { display: inline-flex; align-items: center; gap: 8px; }
.hero .meta-row .dot { width: 6px; height: 6px; background: var(--site-accent); border-radius: 50%; display: inline-block; }

/* Hero figure: hex-grid stack visual */
.hero-figure {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin-left: auto;
}
.hero-figure .layer {
  position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--site-hero-fg) 30%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--site-hero-fg) 4%, transparent);
}
.hero-figure .layer.l1 { transform: translate(-28px, 22px) rotate(-4deg); opacity: .55; }
.hero-figure .layer.l2 { transform: translate(-12px, 10px) rotate(-2deg); opacity: .8; }
.hero-figure .layer.l3 {
  background: color-mix(in srgb, var(--site-hero-fg) 10%, transparent);
  border-color: color-mix(in srgb, var(--site-hero-fg) 45%, transparent);
  padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-figure .chip {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 10px/1 var(--q-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--site-hero-fg) 34%, transparent);
  border-radius: 999px;
  color: var(--site-hero-fg);
  align-self: flex-start;
  background: color-mix(in srgb, var(--site-hero-fg) 6%, transparent);
}
.hero-figure .chip .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--site-accent);
  box-shadow: 0 0 0 0 var(--site-accent);
  animation: pulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--q-luminous-emerald) 60%, transparent); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.hero-figure .bigx {
  font: 700 320px/0.8 var(--q-font-display);
  font-style: italic;
  color: var(--site-accent);
  text-align: center;
  margin: 0;
  letter-spacing: -0.06em;
}
.hero-figure .caption {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
  font: 500 10px/1.2 var(--q-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--site-hero-fg) 75%, transparent);
}
.hero-figure .caption .c { padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--site-hero-fg) 30%, transparent); }
.hero-figure .caption .c b { display: block; color: var(--site-accent); font-weight: 600; margin-bottom: 4px; font-family: var(--q-font-display); font-size: 11px; letter-spacing: 0.14em; }

/* ----- MARQUEE / SUPPORTED SYSTEMS ----- */
/* See css/integrations.css for logo strip styles */

/* ----- PROBLEM ----- */
.section.problem { background: var(--site-bg); }
.problem h2 {
  font: 700 clamp(44px, 6vw, 88px)/0.98 var(--q-font-display);
  letter-spacing: -0.022em;
  max-width: 960px;
  margin: 16px 0 0;
  color: var(--site-fg);
}
.problem h2 em { font-style: italic; color: var(--site-accent); font-weight: 700; }
.stat-row {
  margin-top: 72px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--site-border);
  border-bottom: 1px solid var(--site-border);
}
@media (max-width: 900px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat-cell {
  padding: 32px 32px 32px 0;
  border-right: 1px solid var(--site-border);
}
.stat-cell:last-child { border-right: 0; }
.stat-cell:not(:first-child) { padding-left: 32px; }
@media (max-width: 900px) {
  .stat-cell:nth-child(2n) { border-right: 0; }
  .stat-cell:nth-child(n+3) { border-top: 1px solid var(--site-border); }
}
.stat-cell .lbl {
  font: 600 11px/1.2 var(--q-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-muted);
  margin-bottom: 18px;
}
.stat-cell .val {
  font: 700 84px/0.9 var(--q-font-display);
  letter-spacing: -0.03em;
  color: var(--site-fg);
  margin-bottom: 16px;
}
.stat-cell .val em { font-style: italic; color: var(--site-accent); }
.stat-cell .cap { font: 400 14px/1.5 var(--q-font-body); color: var(--site-muted); margin: 0; }

/* ----- SOLUTION / WHAT WE DO ----- */
.section.solution {
  background: var(--q-carbon);
  color: var(--q-warm-white);
  padding: 128px 0;
  position: relative;
}
body[data-theme="dark"] .section.solution { background: var(--q-midnight-pine); }
.section.solution h2 {
  font: 700 clamp(44px, 6vw, 88px)/0.98 var(--q-font-display);
  letter-spacing: -0.022em;
  max-width: 960px;
  margin: 16px 0 0;
  color: var(--q-warm-white);
}
.section.solution h2 em { font-style: italic; color: var(--q-luminous-emerald); font-weight: 700; }
.section.solution .section-head .kicker p { color: var(--q-celdon); opacity: 0.85; }
.section.solution .eyebrow { color: var(--q-celdon); }

.service-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 72px;
}
@media (max-width: 900px) { .service-grid { grid-template-columns: 1fr; } }
.service {
  background: var(--q-graphite);
  border: 1px solid rgba(184,212,194,.14);
  border-radius: 12px;
  padding: 36px 32px 32px;
  transition: border-color var(--q-dur-med) var(--q-ease), transform var(--q-dur-med) var(--q-ease);
  position: relative;
  overflow: hidden;
}
.service:hover { border-color: var(--q-luminous-emerald); transform: translateY(-2px); }
.service .num {
  font: 500 12px var(--q-font-mono);
  letter-spacing: 0.14em;
  color: var(--q-luminous-emerald);
  margin-bottom: 28px;
  display: flex; align-items: center; gap: 10px;
}
.service .num .bar { width: 24px; height: 1px; background: currentColor; }
.service h3 {
  font: 600 28px/1.15 var(--q-font-display);
  letter-spacing: -0.012em;
  color: var(--q-warm-white);
  margin: 0 0 16px;
}
.service p { font: 400 15px/1.55 var(--q-font-body); color: var(--q-celdon); opacity: 0.82; margin: 0 0 28px; }
.service ul {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid rgba(184,212,194,.14);
}
.service li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(184,212,194,.1);
  display: flex; align-items: center; justify-content: space-between;
  font: 400 13px/1.3 var(--q-font-body);
  color: var(--q-celdon);
}
.service li:last-child { border-bottom: 0; }
.service li .tag {
  font: 500 10px var(--q-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--q-luminous-emerald);
  opacity: 0.9;
}

/* ----- PROCESS ----- */
.section.process { background: var(--site-bg); border-top: 1px solid var(--site-border); padding: 128px 0; }
.process h2 {
  font: 700 clamp(44px, 6vw, 88px)/0.98 var(--q-font-display);
  letter-spacing: -0.022em;
  margin: 16px 0 0;
}
.process h2 em { font-style: italic; color: var(--site-accent); font-weight: 700; }
.process-steps {
  margin-top: 88px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--site-fg);
  position: relative;
}
@media (max-width: 900px) { .process-steps { grid-template-columns: 1fr; } }
.process-steps .step {
  padding: 36px 28px 40px 0;
  position: relative;
}
.process-steps .step:not(:last-child) { border-right: 1px solid var(--site-border); }
.process-steps .step:not(:first-child) { padding-left: 28px; }
.process-steps .step .num {
  position: absolute; top: -1px; left: 0;
  font: 500 11px var(--q-font-mono);
  letter-spacing: 0.16em;
  color: var(--site-accent);
  background: var(--site-bg);
  padding: 0 12px 0 0;
  transform: translateY(-50%);
}
.process-steps .step:not(:first-child) .num { padding-left: 28px; }
.process-steps .step h4 {
  font: 600 24px/1.15 var(--q-font-display);
  letter-spacing: -0.005em;
  margin: 16px 0 12px;
  color: var(--site-fg);
}
.process-steps .step p { font: 400 14px/1.55 var(--q-font-body); color: var(--site-muted); margin: 0 0 24px; }
.process-steps .step .dur {
  font: 500 10px var(--q-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-muted);
  padding-top: 12px;
  border-top: 1px solid var(--site-border);
  opacity: .85;
}
.process-foot {
  margin-top: 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  font: 500 13px var(--q-font-body);
  color: var(--site-muted);
}
.process-foot .arrows {
  font: 500 13px var(--q-font-mono);
  letter-spacing: 0.12em;
  color: var(--site-fg);
}
.process-foot .arrows b { color: var(--site-accent); font-weight: 600; }

/* ----- BIG STATEMENT / QUOTE-ish band ----- */
.statement {
  background: var(--q-deep-forest-teal);
  color: var(--q-warm-white);
  padding: 128px 0;
  position: relative;
  overflow: hidden;
}
body[data-theme="dark"] .statement { background: var(--q-carbon); border-top: 1px solid #1a2824; border-bottom: 1px solid #1a2824;}
.statement h2 {
  font: 700 clamp(44px, 6.5vw, 104px)/0.98 var(--q-font-display);
  letter-spacing: -0.025em;
  max-width: 1080px;
  margin: 0;
  color: var(--q-warm-white);
}
.statement h2 em { color: var(--q-luminous-emerald); font-style: italic; }
.statement .tag {
  font: 600 11px/1 var(--q-font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--q-luminous-emerald);
  margin-bottom: 40px;
  display: inline-flex; align-items: center; gap: 12px;
}
.statement .tag .bar { display: inline-block; width: 32px; height: 1px; background: currentColor; }
.statement .signoff {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(184,212,194,.22);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  font: 400 15px var(--q-font-body);
  color: var(--q-celdon);
}
.statement .signoff b { color: var(--q-warm-white); font-weight: 500; }

/* ----- WHO / SERVED ----- */
.served { background: var(--site-bg); padding: 128px 0; border-top: 1px solid var(--site-border); }
.served h2 {
  font: 700 clamp(44px, 6vw, 88px)/0.98 var(--q-font-display);
  letter-spacing: -0.022em;
  margin: 16px 0 0;
}
.served h2 em { font-style: italic; color: var(--site-accent); }
.served-grid {
  margin-top: 72px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--site-surface);
}
@media (max-width: 900px) { .served-grid { grid-template-columns: 1fr; } }
.served-card {
  padding: 40px 36px;
  border-right: 1px solid var(--site-border);
  transition: background var(--q-dur-fast) var(--q-ease);
}
.served-card:last-child { border-right: 0; }
@media (max-width: 900px) {
  .served-card { border-right: 0; border-bottom: 1px solid var(--site-border); }
  .served-card:last-child { border-bottom: 0; }
}
.served-card:hover { background: color-mix(in srgb, var(--site-accent) 8%, var(--site-surface)); }
.served-card .icon {
  width: 40px; height: 40px;
  border: 1.5px solid var(--site-fg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  font: 600 18px var(--q-font-display);
  color: var(--site-fg);
  /* hexagon approximation via clip */
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  background: transparent;
  border: 0;
}
.served-card .hex {
  width: 40px; height: 44px;
  margin-bottom: 24px;
  color: var(--site-accent);
}
.served-card h4 { font: 600 22px/1.2 var(--q-font-display); margin: 0 0 12px; color: var(--site-fg); }
.served-card p { font: 400 15px/1.55 var(--q-font-body); color: var(--site-muted); margin: 0; }

/* ----- CTA / CONTACT ----- */
.cta-band {
  background: var(--q-luminous-emerald);
  color: var(--q-deep-forest-teal);
  padding: 120px 0 128px;
}
.cta-band .inner {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: end;
}
@media (max-width: 900px) { .cta-band .inner { grid-template-columns: 1fr; gap: 40px; } }
.cta-band h2 {
  font: 700 clamp(48px, 7vw, 112px)/0.96 var(--q-font-display);
  letter-spacing: -0.028em;
  color: var(--q-deep-forest-teal);
  margin: 0;
}
.cta-band h2 em { color: var(--q-warm-white); font-style: italic; }
.cta-band .eye {
  font: 600 12px/1 var(--q-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--q-deep-forest-teal);
  opacity: 0.75;
  margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 10px;
}
.cta-band .eye .bar { display: inline-block; width: 24px; height: 1px; background: currentColor; }
.cta-band .lede { font: 400 18px/1.55 var(--q-font-body); color: var(--q-deep-forest-teal); opacity: 0.82; margin: 0 0 28px; max-width: 440px; }
.cta-band .btns { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn.primary { background: var(--q-deep-forest-teal); color: var(--q-warm-white); }
.cta-band .btn.primary:hover { background: var(--q-midnight-pine); }
.cta-band .btn.ghost { color: var(--q-deep-forest-teal); border-color: var(--q-deep-forest-teal); }
.cta-band .btn.ghost:hover { background: var(--q-deep-forest-teal); color: var(--q-warm-white); }