/* ============================================================
   Venturo AI — landing page styles (shared by EN + FR)
   Tokens inlined from the design system. When the updated
   design system lands, re-skinning happens HERE and both
   language pages adopt it in one pass.
   ============================================================ */
:root {
  /* Families */
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Neutrals */
  --color-obsidian: #000000;
  --color-graphite: #2e343d;
  --color-paper-white: #ffffff;
  --color-slate: #4d4d4d;
  --color-hairline: #d6d6d6;
  --color-midnight-ink: #010120;

  /* Accents */
  --color-periwinkle: #bdbbff;
  --color-azure-legacy: #65cef0;

  /* Category fills */
  --color-mint-cyan: #c8f6f9;
  --color-sky: #c1dff9;
  --color-blush: #fde3f6;
  --color-peach: #ffdccd;

  /* Semantic */
  --action-solid-bg: var(--color-obsidian);
  --action-solid-fg: var(--color-paper-white);
  --accent: var(--color-periwinkle);

  /* Radius — sharp 4px everywhere */
  --radius-buttons: 4px;

  /* Mono tracking — slightly positive */
  --tracking-mono: 0.04em;

  /* The only shadow in the system: the sticky-nav navy glow */
  --shadow-nav: rgba(1, 1, 32, 0.1) -10px 0px 75px 0px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: #ffffff;
  font-family: var(--font-sans);
  color: #000000;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* the hero animation drifts past the viewport edge; never let it create a horizontal scrollbar */
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--color-periwinkle); color: var(--color-obsidian); }

/* ---- Resolved Button component (solid · mono · 4px · no shadow) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-buttons);
  background: var(--action-solid-bg);
  color: var(--action-solid-fg);
  border: 1px solid var(--action-solid-bg);
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
button.btn { -webkit-appearance: none; appearance: none; }
.btn-sm { padding: 6px 12px; font-size: 11px; }
.btn-arrow { font-family: var(--font-sans); }
/* Solid buttons hold on hover (no shift) per the system spec */

/* ---- Nav links: periwinkle underline on hover ---- */
.navlink {
  font-size: 15px;
  letter-spacing: -0.15px;
  color: #4d4d4d;
  transition: color 120ms ease, text-decoration-color 120ms ease;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.navlink:hover { color: #000000; text-decoration-color: #bdbbff; }

/* ---- Footer: social icon buttons + nav links (slate → obsidian on hover) ---- */
.social-btn:hover { color: #000000; border-color: #000000; }
.footlink:hover { color: #000000; }

/* ---- Language toggle (EN / FR) — mono, stays visible on mobile ---- */
.nav-actions { display: flex; align-items: center; gap: 20px; }
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
}
.lang-toggle a { color: #9a9a9a; transition: color 120ms ease; }
.lang-toggle a:hover { color: #000000; }
.lang-toggle .lang-active { color: #000000; }
.lang-toggle .lang-sep { color: #d6d6d6; }

/* ---- Sticky nav scroll glow (the one allowed shadow) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: box-shadow 220ms ease, border-color 220ms ease;
}
.site-header.scrolled { box-shadow: var(--shadow-nav); border-bottom-color: #e6e6e6; }

/* ---- Contact inputs: hairline border, deepen to obsidian on focus (no glow) ---- */
.vt-field {
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: -0.16px;
  color: #000;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  padding: 11px 12px;
  outline: none;
  transition: border-color 120ms ease;
}
textarea.vt-field { line-height: 1.45; resize: vertical; }
.vt-field:focus { border-color: #000000; }

/* Honeypot: off-screen, never shown to humans; bots that fill it are dropped */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
#contact-error, #contact-error-fr { display: none; font-size: 14px; line-height: 1.4; letter-spacing: -0.14px; color: #b00020; margin: 0; }

/* ---- Resolved pipeline diagram (dot + label share a grid column so they always align) ---- */
.vt-pipe { position: relative; }
.vt-pipe-line { position: absolute; left: 6px; right: 6px; top: 5px; height: 1.5px; background: rgba(46,52,61,0.4); }
.vt-pipe-dots { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.vt-pipe-dots > span { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #2e343d; box-sizing: border-box; background: var(--pipe-fill, #fff); }
.vt-pipe-dots > span:nth-child(2), .vt-pipe-dots > span:nth-child(3) { justify-self: center; }
.vt-pipe-dots > span:nth-child(4) { justify-self: end; background: #2e343d; }
.vt-pipe-labels { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 8px; margin-top: 13px; }
.vt-pipe-labels > span { font-family: var(--font-mono); font-size: 9.5px; line-height: 1.25; letter-spacing: 0.03em; text-transform: uppercase; color: #2e343d; text-align: center; }
.vt-pipe-labels > span:first-child { text-align: left; }
.vt-pipe-labels > span:last-child { text-align: right; }

/* ---- About portrait slot ---- */
.portrait {
  width: 240px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  overflow: hidden;
  display: block;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ============================================================
   Hero — context-absorb animation
   ============================================================ */
@keyframes vpulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.4); opacity: 1; }
}
.v-node { transform-box: fill-box; transform-origin: center; animation: vpulse 3.4s ease-in-out infinite; }

.v-ruled { position:absolute; inset:-14%;
  background-image:repeating-linear-gradient(to bottom,#ededed 0 1px,transparent 1px 28px);
  -webkit-mask-image:linear-gradient(to right,#000,transparent 27%,transparent 73%,#000);
          mask-image:linear-gradient(to right,#000,transparent 27%,transparent 73%,#000); }
.v-pile { position:absolute; inset:0; display:grid; }
.v-pile > * { grid-area:1/1; place-self:center; }
.v-float { animation:vdrift var(--dur,18s) cubic-bezier(.55,0,.45,1) var(--delay,0s) infinite; will-change:transform,opacity; }
@keyframes vdrift {
  0%  { opacity:0; transform:translate(var(--in-tx,0%),var(--in-ty,0%)) scale(var(--in-scale,.65)); }
  12% { opacity:1; transform:translate(var(--tx,0%),var(--ty,0%)) scale(1); }
  68% { opacity:1; transform:translate(var(--tx,0%),var(--ty,0%)) scale(1); }
  74% { opacity:1; transform:translate(calc(var(--tx,0%) * 1.07),calc(var(--ty,0%) * 1.07)) scale(1.05); animation-timing-function:cubic-bezier(.5,0,.85,.12); }
  100%{ opacity:0; transform:translate(0%,0%) scale(var(--suck-scale,.16)); }
}
/* The periwinkle "RESULT →" pill: springs out of the core and drifts toward the CTA (input → engine → output) */
.v-emit { animation:vemit var(--dur,9s) cubic-bezier(.5,0,.3,1) var(--delay,0s) infinite; will-change:transform,opacity; }
@keyframes vemit {
  0%, 58% { opacity:0; transform:translate(0%,0%) scale(.25); }
  58.001% { opacity:0; transform:translate(0%,0%) scale(.25); animation-timing-function:cubic-bezier(.2,.6,.3,1); }
  68%     { opacity:1; transform:translate(0%,44%) scale(1); }
  90%     { opacity:1; transform:translate(2%,150%) scale(1); }
  100%    { opacity:0; transform:translate(3%,212%) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .v-float { animation:none; opacity:1; transform:translate(var(--tx,0%),var(--ty,0%)); }
  .v-node { animation:none; }
  .v-pulse, .v-traces, .v-emit { display:none; }
}

/* ============================================================
   Responsive — collapse the two-column layouts on narrow screens
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; padding-top: 56px !important; padding-bottom: 72px !important; }
  /* Headline leads on mobile; the visual follows. Render close to full size
     (the absorb ring is intrinsically ~336px, so it fits a phone column); a
     slight scale-down keeps the card edges inside the smallest phones. */
  .hero-visual { height: 380px !important; overflow: hidden; }
  .hero-visual > div { transform: scale(0.75); transform-origin: center; }
  .hero-eyebrow { white-space: normal !important; }
  .work-grid { grid-template-columns: 1fr !important; }
  .ways-grid { grid-template-columns: 1fr !important; }
  .about-grid, .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .hero-h1 { font-size: 44px !important; letter-spacing: -1.2px !important; }
  .section-h2 { font-size: 34px !important; letter-spacing: -0.6px !important; }
  /* The Approach: hide the decorative circuit SVG — on a 1-column phone it
     sits on top of the prose and hurts readability. */
  #approach svg { display: none !important; }
}
@media (max-width: 620px) {
  .site-nav { display: none !important; }
  /* tighten the nav so logo + EN/FR toggle + button fit small phones */
  .site-header > div { padding: 16px 20px !important; gap: 12px !important; }
  .site-header img { height: 40px !important; }
  /* stack the Name + Work email fields */
  .form-row { grid-template-columns: 1fr !important; }
  /* a touch less side padding for narrow screens */
  .hero-grid { padding-left: 22px !important; padding-right: 22px !important; }
}
@media (max-width: 460px) {
  .hero-h1 { font-size: 38px !important; }
  .hero-visual { height: 360px !important; }
}