/* ==========================================================================
   Ziantra — homepage stylesheet

   Flattened 2026-09-02. Previously this file was two complete designs stacked
   (a cream/Fraunces original, then an MMGroup-style light/petrol layer) plus
   ~18 appended patch blocks that overrode each other. Every cascade chain has
   been resolved to its winning value, so rendered output is unchanged — with
   one deliberate exception, marked HEADLINE below.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  --ink: #10161c;
  --muted: #4d5866;
  --purple: #7452e8;
  --purple-dark: #5639bd;
  --deep: #0d2430;
  --paper: #fff;
  --paper-2: #f6f8fa;
  --line: #e4e8ed;
  --shadow: 0 18px 40px -24px rgba(13, 36, 48, .45);
}

/* --- Base ----------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2 {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.025em;
}
h1 { max-width: 12ch; font-size: clamp(2.6rem, 4.8vw, 4.35rem); font-weight: 800; line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 700; line-height: 1.12; }

.lead,
.context-copy > p:not(.eyebrow),
.capability-card p,
.closing-section > p:not(.eyebrow),
.footer p { color: var(--muted); line-height: 1.75; }

.lead { max-width: 57ch; margin: 24px 0 0; font-size: 1.06rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--purple-dark);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow > span { width: 24px; height: 1px; background: currentColor; }
.eyebrow.light { color: #bba8ff; }

/* --- Buttons -------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.button:hover,
.nav-cta:hover { transform: translateY(-2px); }
.button.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); }
.button.secondary { background: rgba(255, 255, 255, .7); }
.light-button { border-color: transparent; color: var(--ink); background: #fff; }

/* --- Shell + topbar ------------------------------------------------------- */
.site-shell { width: 100%; margin: 0; padding: 0 0 40px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  width: min(1160px, calc(100% - 48px));
  min-height: 88px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
}

.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; font-weight: 800; letter-spacing: -.03em; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.15rem;
}

.nav { display: flex; align-items: center; gap: 28px; color: var(--muted); font-size: .9375rem; font-weight: 500; }
.nav a,
.nav-cta { transition: color 180ms ease, transform 180ms ease; }
.nav a:hover { color: var(--ink); }
.nav-cta {
  justify-self: end;
  padding: .55rem 1.25rem;
  border-radius: 999px;
  color: #fff;
  background: var(--deep);
  font-size: .84rem;
  font-weight: 600;
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 48px;
  width: min(1160px, calc(100% - 48px));
  min-height: 650px;
  margin: 0 auto;
  padding: clamp(4rem, 7vw, 6rem) 0;
  color: #fff;
}
/* Full-bleed dark backdrop behind the constrained hero grid. */
.hero:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background:
    radial-gradient(80rem 34rem at 78% -10%, #2f2267 0%, transparent 58%),
    linear-gradient(160deg, #0d2430 0%, #152e3b 55%, #0d2430 100%);
}

.hero .eyebrow { color: #b8a8ff; }
.hero .lead { max-width: 52ch; color: rgba(255, 255, 255, .76); }
.hero .button.secondary { color: #fff; border-color: rgba(255, 255, 255, .34); background: transparent; }
.hero .signal-row span { color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); }

/* HEADLINE — the two <span> children of the h1 are the line breaks. The accent
   phrase stays inline so it shares line one with the text that follows it;
   it was previously display:block, which split the heading over three lines. */
.hero h1 { max-width: none; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.1; letter-spacing: -.02em; }
.hero-title-line,
.hero-title-rest { display: block; }
.hero-title-accent { color: #b8a8ff; }
.hero-title-rest { white-space: nowrap; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 28px; }

.signal-row { display: flex; flex-wrap: wrap; gap: 8px; }
.signal-row span {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .42);
  font-size: .76rem;
  font-weight: 700;
}

.hero-copy > h1 + .eyebrow { margin: 16px 0 14px; }
.hero-copy > .signal-row { margin: 0 0 24px; }
.hero-copy > .signal-row span { display: inline-flex; align-items: center; gap: 8px; }
.hero-copy > .signal-row span:before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9f87ff;
  box-shadow: 0 0 0 3px rgba(159, 135, 255, .14);
}

.hero-visual {
  position: relative;
  padding: 25px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
}
.visual-label { display: flex; align-items: center; gap: 9px; padding: 3px 4px 15px; color: rgba(255, 255, 255, .72); font-size: .78rem; font-weight: 800; }
.hero-visual .visual-label { padding-left: 5%; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #52b788; box-shadow: 0 0 0 5px rgba(82, 183, 136, .12); }

/* --- Screenshot frames ---------------------------------------------------- */
.screenshot-shell { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #eee9f4; }
.screenshot-shell img { position: relative; z-index: 2; aspect-ratio: 16 / 10; object-fit: cover; }

/* The hero frame follows its image's natural height instead of a fixed ratio. */
.hero-visual .screenshot-shell { aspect-ratio: auto; border: 1px solid #fff; }
.hero-visual .screenshot-shell img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: right center;
  background: #eee9f4;
  cursor: pointer;
}
.hero-visual .screenshot-shell img:focus { outline: none; }

/* Revealed by site.js when the image fails to load. */
.image-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 26px;
  background: linear-gradient(135deg, #ede6f7, #f8efe6);
}
.image-fallback span { color: var(--muted); }
.screenshot-shell:not(.missing) .image-fallback { display: none; }
.screenshot-shell.missing img { display: none; }

/* --- Capability cards ----------------------------------------------------- */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
  padding: 80px 0;
}
.capability-card { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.capability-card h2 { font-size: 1.35rem; }
.capability-card p { margin: 12px 0 0; font-size: .975rem; }
.card-number { display: inline-block; margin-bottom: 28px; color: var(--purple-dark); font-size: .75rem; font-weight: 800; }

/* --- Alternating copy / screenshot sections ------------------------------- */
.context-section,
.context-section.reverse {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  gap: clamp(2.5rem, 6vw, 5rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-2);
}
.context-section { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; }
.context-section + .context-section { margin-top: 32px; }
.context-section.reverse { grid-template-columns: 1.12fr .88fr; background: #fff; }

.context-copy > p:not(.eyebrow) { margin: 22px 0 0; font-size: .975rem; }

.check-list { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 28px; color: #4f495a; font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.check-list li:before {
  content: "";
  position: absolute;
  top: .45em;
  left: 0;
  width: 12px;
  height: 7px;
  border-bottom: 2px solid var(--purple);
  border-left: 2px solid var(--purple);
  transform: rotate(-45deg);
}

.context-visual { margin: 0; }
.context-visual .screenshot-shell { box-shadow: var(--shadow); }
.context-visual figcaption { margin-top: 14px; color: var(--muted); font-size: .8125rem; font-weight: 700; text-align: center; }

/* --- Closing CTA + footer ------------------------------------------------- */
.closing-section {
  display: grid;
  justify-items: center;
  width: min(1160px, calc(100% - 48px));
  margin: 32px auto 0;
  padding: clamp(4rem, 8vw, 6.5rem) 2rem;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(70rem 30rem at 80% -10%, #2f2267 0%, transparent 58%),
    linear-gradient(160deg, #0d2430, #152e3b);
  text-align: center;
}
.closing-section h2 { max-width: 13ch; }
.closing-section > p:not(.eyebrow) { max-width: 56ch; margin: 22px 0 28px; color: rgba(255, 255, 255, .68); }

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
  padding: 38px 4px 0;
  border-top: 1px solid var(--line);
}
.footer p { margin: 0; font-size: .85rem; }

/* --- Entrance animation --------------------------------------------------- */
.reveal { animation: rise 720ms ease both; }
.hero-visual,
.capability-card:nth-child(2) { animation-delay: 100ms; }
.capability-card:nth-child(3) { animation-delay: 180ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Lightbox (opened by site.js) ----------------------------------------- */
body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  padding: 24px;
  overflow: hidden;
  background: rgba(13, 36, 48, .9);
  cursor: zoom-out;
}
.lightbox img {
  width: auto;
  max-width: 94vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

/* --- Responsive ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; }
}

/* NOTE: the hero keeps its 650px min-height at every width, and the capability
   grid its 80px vertical padding. In the original file the breakpoint that
   relaxed those sat above the second design layer, so the layer's unwrapped
   rules won — media queries carry no extra specificity. Preserved as-is. */

@media (max-width: 980px) {
  .topbar,
  .hero,
  .capability-grid,
  .context-section,
  .context-section.reverse,
  .closing-section,
  .footer { width: min(100% - 32px, 1160px); }

  .topbar { grid-template-columns: 1fr auto; }
  .nav { display: none; }

  .hero { grid-template-columns: 1fr; padding: 4.5rem 0; }
  .hero-copy { max-width: 720px; }

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

  .context-section,
  .context-section.reverse { grid-template-columns: 1fr; padding: 4rem 2rem; }
  .context-section.reverse .context-visual { order: 2; }
}

@media (max-width: 640px) {
  .topbar,
  .hero,
  .capability-grid,
  .context-section,
  .context-section.reverse,
  .closing-section,
  .footer { width: min(100% - 24px, 1160px); }

  .topbar { min-height: 72px; }
  .nav-cta { font-size: .75rem; }

  .hero { padding: 3.75rem 0; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .hero-title-rest { white-space: normal; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .visual-label { padding: 7px 6px 14px; }

  .context-section,
  .context-section.reverse { padding: 3.5rem 1.25rem; }

  .closing-section { padding: 4rem 1.25rem; }
  .footer { align-items: flex-start; flex-direction: column; }
}