/* Zimac Desktop — Signal campaign family.
   Mirrors the current local zimac.ai site-v3 layer and the Finn/Paige rhythm. */

@font-face {
  font-family: "Zi Signal Display";
  src:
    url("../../landing-root/public/fonts/zi-signal-display-bold.woff2?v=1.001") format("woff2"),
    url("https://zimac.ai/fonts/zi-signal-display-bold.woff2?v=1.001") format("woff2");
  font-style: normal;
  font-weight: 780;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #060810;
  --bg2: #0a0d15;
  --surface: #0d111c;
  --surface2: #111725;
  --border: rgba(255, 255, 255, .12);
  --border2: rgba(255, 255, 255, .2);
  --text: #f6f5f8;
  --muted: #a7a9b3;
  --faint: #737785;
  --indigo: #756cff;
  --pink: #f16bb7;
  --purple: #b98aff;
  --teal: #31d7c2;
  --green: #34d399;
  --blue: #60a5fa;
  --amber: #fbbf24;
  --orange: #fb923c;
  --maxw: 1200px;
  --gutter: 32px;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Zi Signal Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html { background: #03050a; }

body {
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 var(--sans);
}

body::before,
body::after { display: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + (var(--gutter) * 2));
  padding-inline: var(--gutter);
}

section { padding-block: 124px; }
section[id] { scroll-margin-top: 72px; }

h1,
h2,
h3 {
  font-family: var(--display);
  font-synthesis: none;
}

h2 {
  font: 780 clamp(43px, 5vw, 68px)/1 var(--display);
  letter-spacing: -.047em;
}

.grad {
  background: linear-gradient(105deg, #b999ff 0%, #8f80ff 45%, #50d3c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #c6a9ff;
  font: 650 10px/1.3 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--purple), var(--teal));
}

.eyebrow::after { display: none; }

.sec-head {
  max-width: 850px;
  margin-bottom: 58px;
}

.sec-head h2 { margin: 22px 0 18px; }

.lede {
  max-width: 62ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Quiet family navigation */
header.nav {
  height: 66px;
  background: rgba(3, 5, 10, .86);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

header.nav::after { display: none; }
header.nav.scrolled { background: rgba(3, 5, 10, .94); border-bottom-color: rgba(255, 255, 255, .1); }
.nav-in { height: 66px; gap: 32px; }

.brand { min-width: 0; gap: 10px; }

.glyph {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: url("./favicon.svg") center/contain no-repeat;
  color: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 12px rgba(117, 108, 255, .26));
}

.glyph::after { display: none; }

.brand-lockup {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
}

.brand-lockup b {
  color: #fff;
  font: 750 17px/1 var(--sans);
  letter-spacing: -.04em;
}

.brand-lockup b span { color: var(--purple); }

.brand-lockup small {
  color: #777a86;
  font: 600 8px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.nav-links { gap: 29px; }

.nav-links a {
  padding: 24px 0 22px;
  color: #a7a7b0;
  font: 500 13px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

.nav-links a:not(.btn)::after { display: none; }
.nav-links a:hover { color: #fff; }

.btn {
  min-height: 49px;
  padding: 0 21px;
  border: 1px solid rgba(185, 138, 255, .55);
  border-radius: 10px;
  background: rgba(5, 7, 13, .56);
  color: #fff;
  box-shadow: none;
  font: 650 14px/1 var(--sans);
  letter-spacing: 0;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}

.btn::before { display: none; }

.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(196, 168, 255, .9);
  background: rgba(24, 22, 39, .88);
}

.btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #756cff, #aa71dc);
  box-shadow: 0 16px 34px -22px rgba(117, 108, 255, .95);
}

.btn-primary:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #847aff, #ba7ce8);
  box-shadow: 0 19px 38px -22px rgba(117, 108, 255, .95);
}

.btn-ghost { background: rgba(5, 7, 13, .56); border-color: rgba(185, 138, 255, .55); }
.btn-lg { min-height: 52px; padding-inline: 24px; border-radius: 11px; font-size: 15px; }

.nav .btn {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(190, 157, 255, .52);
  border-radius: 11px;
  background: linear-gradient(135deg, #776cff, #a66cdb);
  color: #fff;
  box-shadow: 0 10px 28px -18px rgba(117, 108, 255, .9);
  font: 650 13px/1 var(--sans);
}

/* Cinematic Signal Nexus hero — the desktop member of the Zimac campaign family. */
.hero {
  position: relative;
  min-height: min(820px, calc(100svh - 66px));
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #03050a;
}

.hero::before { display: none; }

.hero-artwork,
.hero-art,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-artwork { z-index: 0; display: block; }

.hero-art {
  display: block;
  object-fit: cover;
  object-position: center center;
}

.hero-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3, 5, 10, .99) 0%, rgba(3, 5, 10, .96) 27%, rgba(3, 5, 10, .73) 47%, rgba(3, 5, 10, .12) 76%),
    linear-gradient(180deg, rgba(3, 5, 10, .06) 0 58%, rgba(3, 5, 10, .76) 83%, #060810 100%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px;
  align-items: center;
  min-height: min(820px, calc(100svh - 66px));
  padding-block: clamp(80px, 10vh, 112px) 170px;
}

.hero-copy {
  grid-column: 1 / 7;
  max-width: none;
  margin: 0;
  text-align: left;
}

.hero h1 {
  max-width: 860px;
  margin: 23px 0 0;
  font: 780 clamp(56px, 5.6vw, 82px)/.95 var(--display);
  letter-spacing: -.052em;
  text-shadow: 0 4px 32px rgba(0, 0, 0, .5);
}

.hero h1 span,
.hero h1 em { display: block; }

.hero h1 em {
  margin: 0;
  padding: 0;
  background: linear-gradient(105deg, #b999ff 0%, #8f80ff 45%, #50d3c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: inherit;
  font-style: normal;
}

.hero-sub {
  max-width: 52ch;
  margin: 30px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #b8bac4;
  font-size: 17px;
  line-height: 1.72;
}

.hero-cta { justify-content: flex-start; margin-top: 28px; }

.trial-line {
  justify-content: flex-start;
  gap: 10px 24px;
  margin-top: 22px;
  color: #858995;
  font: 600 9px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.trial-line span::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 9px rgba(49, 215, 194, .75);
}

.hero-proof {
  position: absolute;
  right: 0;
  bottom: 28px;
  left: 0;
  z-index: 3;
}

.proof-strip {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(5, 8, 14, .78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.proof-item {
  min-height: 102px;
  padding: 21px 23px;
  border-color: rgba(255, 255, 255, .1);
}

.proof-item::before { display: none; }
.proof-item b { font: 780 15px/1.2 var(--display); letter-spacing: -.02em; }
.proof-item span { margin-top: 6px; color: #90949f; font-size: 12.5px; line-height: 1.5; }

/* Product story */
#product { background: linear-gradient(180deg, #060810, #080b13); }
.moment-stack { gap: 96px; }
.moment,
.moment.reverse { gap: 62px; }

.moment-copy {
  padding: 0;
  border: 0;
}

.moment-copy .label {
  color: #c6a9ff;
  font: 650 9px/1 var(--mono);
  letter-spacing: .12em;
}

.moment-copy h3 {
  margin-top: 17px;
  font: 780 clamp(34px, 3.7vw, 49px)/1 var(--display);
  letter-spacing: -.047em;
}

.moment-copy p { margin-top: 18px; color: #a7a9b3; line-height: 1.72; }
.moment-copy .payoff { color: #d5c7f2; }

.real-capture {
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  background: #080a11;
  box-shadow: 0 36px 90px -42px #000;
}

.outcomes { padding-top: 24px; background: #070a11; }

.outcome-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(7, 10, 16, .88);
}

.outcome {
  min-height: 220px;
  padding: 28px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  background: transparent;
}

.outcome:last-child { border-right: 0; }
.outcome .n { color: var(--purple); font: 650 9px/1 var(--mono); letter-spacing: .12em; }
.outcome h3 { margin-top: 28px; font: 780 22px/1.08 var(--display); letter-spacing: -.035em; }
.outcome p { color: #969aa6; line-height: 1.62; }

/* Ownership, security, specialists */
#privacy { background: linear-gradient(135deg, #090c15, #070910 60%); }

.difference-grid,
.security-grid { gap: 18px; }

.difference-card,
.security-card,
.roster-band,
.integration-group,
.price-card,
.subscribe-box {
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  box-shadow: none;
}

.difference-card,
.security-card { padding: 29px; }
.difference-card .big,
.security-card .big { color: var(--purple); }
.difference-card h3,
.security-card h3 { font: 780 21px/1.08 var(--display); letter-spacing: -.035em; }
.difference-card p,
.security-card p { color: #969aa6; line-height: 1.65; }
.security-title { color: #747886; font: 650 9px/1 var(--mono); letter-spacing: .12em; }

#specialists { background: #070a11; }
.roster-band { padding: 28px; }

.roster-band.pro-band,
.price-card.featured {
  border-color: rgba(151, 136, 255, .43);
  background: linear-gradient(145deg, rgba(117, 108, 255, .09), rgba(255, 255, 255, .018));
  box-shadow: 0 30px 80px -56px rgba(117, 108, 255, .8);
}

.roster-band-head h3 { font: 780 24px/1 var(--display); letter-spacing: -.035em; }
.plan-pill { border-radius: 999px; }

.specialist {
  border-color: rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(3, 5, 10, .58);
}

.specialist-mark { border-radius: 10px; }

#integrations { background: #060810; }
.integration-group { padding: 24px; }
.integration-wall span { border-color: rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(3, 5, 10, .54); }
.integration-wall span::before { border-radius: 50%; }

/* Pricing and conversion */
#pricing { background: linear-gradient(180deg, #080b13, #060810); }

.trial-banner {
  border: 1px solid rgba(49, 215, 194, .24);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(49, 215, 194, .07), rgba(117, 108, 255, .09), rgba(13, 17, 28, .82));
  box-shadow: none;
}

.trial-banner h3 { font: 780 22px/1.08 var(--display); letter-spacing: -.035em; }
.price-card { padding: 30px; }
.price-name,
.price-amount { font-family: var(--display); }
.price-name { font-size: 21px; }
.price-features li::before { color: var(--teal); }
.best-value { border-radius: 999px; background: linear-gradient(135deg, #756cff, #aa71dc); }

.enterprise { padding-top: 24px; background: #060810; }

.enterprise-band {
  border: 1px solid rgba(151, 136, 255, .34);
  border-radius: 18px;
  background: radial-gradient(40rem 24rem at 80% 20%, rgba(117, 108, 255, .13), transparent 66%), #0b0e18;
  box-shadow: none;
}

.enterprise-band h2 { font: 780 clamp(34px, 4.2vw, 48px)/1 var(--display); letter-spacing: -.047em; }

.finale {
  padding-block: 142px;
  border: 0;
  background:
    radial-gradient(55rem 30rem at 70% 50%, rgba(117, 108, 255, .18), transparent 66%),
    linear-gradient(135deg, #0b0e18, #070910);
  text-align: left;
}

.finale h2 { max-width: 820px; margin: 0; font: 780 clamp(45px, 5.5vw, 72px)/1 var(--display); letter-spacing: -.052em; }
.finale p { margin: 20px 0 30px; color: #a4a7b2; }
.finale .trial-line { justify-content: flex-start; }

.subscribe { padding-bottom: 110px; background: #070910; }
.subscribe-box { background: #0d111c; }
.subscribe-box h2 { font-family: var(--display); }
.subscribe-form input { border-color: rgba(255, 255, 255, .18); border-radius: 10px; background: #060810; }

footer {
  padding-block: 60px 34px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  background: #03050a;
}

footer::before { display: none; }
.foot-bottom { border-color: rgba(255, 255, 255, .08); }

/* Responsive */
@media (max-width: 1240px) {
  .nav-links {
    top: 66px;
    padding: 10px var(--gutter) 20px;
    background: rgba(3, 5, 10, .98);
    border-bottom-color: rgba(255, 255, 255, .1);
  }

  .nav-links a { padding: 13px 0; font-size: 12px; }
  .nav-toggle { border-radius: 10px; background: rgba(9, 12, 20, .84); }
}

@media (max-width: 1040px) {
  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: center;
    min-height: min(820px, calc(100svh - 66px));
    padding-block: 92px 170px;
  }

  .hero-copy { grid-column: 1 / 9; width: min(720px, 100%); }
  .hero h1 { font-size: clamp(56px, 7.8vw, 76px); }
}

@media (max-width: 980px) {
  section { padding-block: 98px; }
  .moment,
  .moment.reverse { grid-template-columns: 1fr; gap: 34px; }
  .moment.reverse .moment-copy { order: 0; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  section { padding-block: 82px; }
  header.nav,
  .nav-in { height: 62px; }
  .nav-links { top: 62px; }
  .brand-lockup small { display: none; }

  .hero { min-height: 0; }
  .hero-art { object-position: 70% center; }
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(3, 5, 10, .48), rgba(3, 5, 10, .86) 54%, #060810 88%),
      linear-gradient(90deg, rgba(3, 5, 10, .92), rgba(3, 5, 10, .25));
  }

  .hero-grid {
    display: block;
    min-height: 650px;
    padding-block: 78px 36px;
  }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(48px, 14vw, 68px); }
  .hero-sub { font-size: 15.5px; }
  .hero-cta { display: grid; }
  .hero-cta .btn { width: 100%; }
  .hero-proof { position: relative; right: auto; bottom: auto; left: auto; z-index: 2; padding-bottom: 28px; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof-item { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .proof-item:last-child { border-bottom: 0; }

  .sec-head h2 { font-size: clamp(42px, 13vw, 58px); }
  .outcome-grid { grid-template-columns: 1fr; }
  .outcome { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .outcome:last-child { border-bottom: 0; }
  .finale { padding-block: 110px; }
  .finale .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}