/* ============================================================
   ZIDEA AI — ai.zidea.tech

   A lighter variant of zidea.tech's "Signal & Instrument"
   system. Same palette and type families (see tokens.css, from
   @zidea/shared), but the instrument-panel language is dialled
   back for an SME audience: no corner-bracket frames, no mono
   annotation layer, bigger type, more air, fewer sections.

   The AI Journey block at the bottom is ported from the main
   site and is the one place the enterprise density is kept,
   because it is the centrepiece.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/outfit-variable.woff2') format('woff2');
}

:root {
  --max: 1080px;
  --measure: 680px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  font-size: 1.0625rem;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cobalt);
}
h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.12; }
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); max-width: 20ch; }
h3 { font-size: 1.35rem; }

p { color: var(--ink-soft); }
p.lede { font-size: 1.25rem; color: var(--ink-soft); max-width: var(--measure); line-height: 1.65; }
strong { color: var(--ink); font-weight: 600; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 6vw; }
@media (min-width: 1240px) { .container { padding: 0 40px; } }

section { padding: 96px 0; position: relative; }
@media (max-width: 768px) { section { padding: 64px 0; } }

.dark { background: var(--cobalt); color: rgba(255,255,255,0.86); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: #fff; }
.dark p { color: rgba(255,255,255,0.78); }
.dark .label { color: var(--amber-bright); }
.dark strong { color: #fff; }

/* --- section label: the mono eyebrow's lighter replacement --- */
.label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1rem;
}

/* --- buttons: same shapes, body type instead of mono --- */
.btn {
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1.5px solid var(--cobalt);
  border-radius: var(--radius);
  color: var(--cobalt);
  background: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
}
.btn:hover { background: var(--cobalt); color: #fff; }
.btn-fill { background: var(--cobalt); color: #fff; }
.btn-fill:hover { background: var(--cobalt-mid); border-color: var(--cobalt-mid); }
.btn-amber { border-color: var(--amber); color: var(--ink); background: var(--amber); }
.btn-amber:hover { background: var(--amber-bright); border-color: var(--amber-bright); color: var(--ink); }
.dark .btn { border-color: rgba(255,255,255,0.4); color: #fff; }
.dark .btn:hover { background: #fff; color: var(--cobalt); }

/* --- soft card: replaces the corner-bracket panel --- */
.card {
  background: var(--paper-panel);
  border: 1px solid var(--wire);
  border-radius: var(--radius);
  padding: 2.4rem;
}
.card.accent { border-left: 3px solid var(--amber); }
.dark .card { background: rgba(255,255,255,0.04); border-color: var(--wire-on-dark); }

/* ============ HEADER ============ */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(238,241,237,0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wire);
  transition: box-shadow 0.25s;
}
.site-head.scrolled { box-shadow: 0 8px 24px rgba(16,26,21,0.06); }
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 40px; width: auto; }
.brand .sub {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  padding-left: 12px;
  border-left: 1px solid var(--wire);
}
@media (max-width: 560px) { .brand .sub { display: none; } }
.head-links { display: flex; align-items: center; gap: 1.4rem; }
.head-links .out { text-decoration: none; font-size: 0.9rem; color: var(--ink-soft); white-space: nowrap; }
.head-links .out:hover { color: var(--cobalt); }
@media (max-width: 720px) { .head-links .out { display: none; } }
.head-cta {
  border: 1.5px solid var(--cobalt);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--cobalt);
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.head-cta:hover { background: var(--cobalt); color: #fff; }

/* ============ HERO ============ */
.hero { padding: 168px 0 88px; }
@media (max-width: 768px) { .hero { padding: 128px 0 56px; } }
.hero h1 { max-width: 16ch; }
.hero p.lede { margin-top: 1.6rem; }
.hero-actions { display: flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero-note { margin-top: 1.6rem; font-size: 0.92rem; color: var(--ink-faint); }

/* ============ CONTENT BLOCKS ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 2.5rem; } }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.2rem; }
.prose h3 { margin: 2.2rem 0 0.8rem; }

.steps { display: flex; flex-direction: column; gap: 1.6rem; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.steps .n {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--amber);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1.5px solid var(--amber);
  border-radius: 50%;
  flex-shrink: 0;
}
.steps h4 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.steps p { font-size: 0.97rem; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 880px) { .trio { grid-template-columns: 1fr; } }
.trio .card h3 { font-size: 1.15rem; margin-bottom: 0.7rem; }
.trio .card p { font-size: 0.97rem; }

/* ============ HANDOFF (VantageView) ============ */
.handoff { background: var(--paper-panel); border-top: 1px solid var(--wire); border-bottom: 1px solid var(--wire); }
.handoff .inner { max-width: var(--measure); }

/* ============ FORM ============ */
.form-wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: start; }
@media (max-width: 880px) { .form-wrap { grid-template-columns: 1fr; gap: 2.5rem; } }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field label .opt { font-weight: 400; color: var(--ink-faint); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--wire);
  border-radius: var(--radius);
  padding: 13px 14px;
  outline: none;
  transition: border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cobalt); }
.field textarea { min-height: 110px; resize: vertical; }
.submit-btn { width: 100%; justify-content: center; }
.form-status { font-size: 0.92rem; margin-top: 1rem; display: none; }
.form-status.success, .form-status.error { display: block; }
.form-status.success { color: #2B6B4F; }
.form-status.error { color: #B3401F; }
.form-fineprint { font-size: 0.85rem; color: var(--ink-faint); margin-top: 1rem; }
.form-fineprint a { color: var(--cobalt); }

/* ============ FOOTER ============ */
footer { background: var(--cobalt-deep); color: rgba(255,255,255,0.7); padding: 64px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--wire-on-dark); margin-bottom: 1.8rem; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-desc { font-size: 0.92rem; line-height: 1.7; max-width: 34ch; color: rgba(255,255,255,0.58); margin-top: 1rem; }
.foot-col h5 { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 1rem; }
.foot-col ul { display: flex; flex-direction: column; gap: 10px; }
.foot-col a { text-decoration: none; font-size: 0.92rem; color: rgba(255,255,255,0.68); }
.foot-col a:hover { color: #fff; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; color: rgba(255,255,255,0.4); }
.foot-bottom a { text-decoration: none; color: rgba(255,255,255,0.4); }
.foot-bottom a:hover { color: #fff; }

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}

/* ============================================================
   AI JOURNEY — scroll-driven particle scenes
   (fragmented signal -> spark -> ZIDEA mark)

   Ported from zidea.tech's stylesheet. Two rules differ: the
   hint and the step eyebrow set --body here rather than --mono,
   because this site does not load Roboto Mono and a system
   monospace fallback renders differently on every OS.
   ============================================================ */
.ai-journey { position: relative; padding: 0; }
.ai-journey-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--cobalt-deep);
}
.ai-journey-stage canvas { display: block; }
.ai-journey-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.ai-journey-steps {
  position: relative;
  margin-top: -100vh;
  z-index: 2;
  pointer-events: none;
}
.ai-step {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 6vw;
}
@media (min-width: 1240px) { .ai-step { padding: 0 max(40px, calc((100vw - var(--max)) / 2)); } }
.ai-step-card {
  pointer-events: auto;
  max-width: 440px;
  background: rgba(19,28,56,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 2px solid var(--amber-bright);
  padding: 2rem 2.2rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.ai-step.is-active .ai-step-card { opacity: 1; transform: translateY(0); }
.ai-step-eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-bright);
  margin-bottom: 0.9rem;
}
.ai-step-card h3 { color: #fff; font-size: 1.6rem; margin-bottom: 0.9rem; }
.ai-step-card p { color: rgba(255,255,255,0.8); font-size: 1rem; line-height: 1.7; }
.ai-step-card .btn { margin-top: 1.4rem; }
@media (max-width: 860px) {
  /* Hand the top of the viewport to the animation and drop the copy beneath it. */
  .ai-step { align-items: flex-end; padding-bottom: 10vh; }
  .ai-step-card { max-width: 100%; padding: 1.5rem 1.4rem; }
  .ai-step-card h3 { font-size: 1.3rem; }
  .ai-step-card p { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .ai-step-card { transition: none; }
}