/* VAI Soft Lab — plain CSS, no framework, one file. Dark, warm accent, self-hosted fonts.
   Motion: only transform and opacity are animated, so it stays smooth on a phone.
   "Reduce motion" turns all of it off (bottom of this file).

   Where things are:
   1. Fonts        the files, and the ONE line that picks the headline font (--serif)
   2. Colours      every colour on the site is a variable here; nothing else in the file names a colour
   3. Base, type   body text, links, the serif headlines
   4. Background   light orbs, grain, the drops canvas
   5. Top bar, buttons, hero, ticker, sections, cards, VShell flow ("How it works"), proof, about, contact, footer
   6. Reveal, touch, smaller screens, reduce motion */

/* ===== 1. Fonts. The headline font is DM Serif Display (Vahid's pick, D-034). To change it: put the new woff2 files in
   fonts/, point the two serif @font-face lines (and the two preload lines in index.html) at them, then change ONE line: --serif. ===== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-var.woff2) format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/dm-serif-display.woff2) format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/dm-serif-display-italic.woff2) format("woff2"); }

/* ===== 2. Colours and sizes. All colours live here. ===== */
:root {
  --bg: #0A0A0C;
  --bg-2: #141418;
  --surface: rgba(255, 255, 255, .03);
  --surface-2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .18);
  --text: #A7A7B1;
  --head: #F5F3EE;
  --muted: #6E6E79;
  --accent: #D8B672;
  --accent-2: #F2DFAC;
  --accent-ink: #1A1405;
  --accent-glow: rgba(216, 182, 114, .32);
  --accent-soft: rgba(216, 182, 114, .12);
  --accent-3: #B48A3E;
  --accent-line: rgba(216, 182, 114, .38);   /* thin gold lines (the flow, the team tree) */
  --accent-line-2: rgba(216, 182, 114, .3);  /* the dashed orbit around Cortex */
  --accent-line-3: rgba(216, 182, 114, .55); /* the network icon inside Cortex */
  --orb-gold: rgba(216, 182, 114, .16);      /* background light, top left */
  --orb-gold-2: rgba(216, 182, 114, .09);    /* background light, bottom */
  --orb-violet: rgba(120, 110, 180, .14);    /* background light, right */
  --glass: rgba(10, 10, 12, .62);            /* top bar once scrolled */
  --glass-2: rgba(10, 10, 12, .92);          /* phone menu */
  --glass-3: rgba(16, 16, 20, .72);          /* name badge on the photo */
  --video-shade: rgba(10, 10, 12, .38);      /* dark veil over the demo video's still picture, under the play button */
  --disc-1: #1E1D24; --disc-2: #101014;      /* dark disc behind the photo */
  --core-1: #1F1E26; --core-2: #0F0F13;      /* VAI Cortex ball */
  --device-1: #1A1A20; --device-2: #0E0E12;  /* the phone in "the real app" */
  --shadow: rgba(0, 0, 0, .55);
  --shadow-2: rgba(0, 0, 0, .8);
  --ghost: rgba(255, 255, 255, .045);        /* the big faint footer word */
  --edge: rgba(255, 255, 255, .03);          /* soft outer edge of the phone */
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif; /* THE headline font: change this one line */
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.7 var(--sans); font-feature-settings: "cv11", "ss01";
  letter-spacing: -.011em; /* Inter's own recommended spacing at 16 px (demo 4: text looked too wide) */
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3 { color: var(--head); margin: 0 0 .6em; line-height: 1.15; font-weight: 500; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
strong { color: var(--head); font-weight: 600; }
.hi { color: var(--accent-2); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .8rem; letter-spacing: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: .5rem 1rem; z-index: 99; border-radius: 0 0 12px 0; }
.skip:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Display type: the serif headlines, with the italic accent words */
.display { font-family: var(--serif); font-weight: 400; letter-spacing: 0; } /* DM Serif Display is a normal-width face: no extra tracking either way */
.display em {
  font-style: italic; color: var(--accent);
  padding: 0 .06em 0 .12em; margin: 0 -.06em 0 -.12em; /* room for the italic overhang, see "Fix" in README */
  background: linear-gradient(100deg, var(--accent-2), var(--accent) 60%, var(--accent-3));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Sizes as shown and approved in demo 5 (option B). DM Serif Display is about a quarter wider than the old font,
   so the big headlines are a little smaller: every hero line still fits on one line (the hero text column is 587 px at 1440). */
h1.display { font-size: clamp(2.25rem, 4.85vw, 4.25rem); line-height: 1.1; margin: 0 0 1.4rem; }
h2.display { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.12; max-width: 20ch; margin: 0 0 1.6rem; }

/* Background light and grain */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; width: 60vmax; height: 60vmax; opacity: .55; will-change: transform; }
.orb-a { top: -30vmax; left: -15vmax; background: radial-gradient(circle at center, var(--orb-gold), transparent 62%); animation: drift-a 26s ease-in-out infinite alternate; }
.orb-b { top: 10vmax; right: -30vmax; background: radial-gradient(circle at center, var(--orb-violet), transparent 62%); animation: drift-b 32s ease-in-out infinite alternate; }
.orb-c { bottom: -35vmax; left: 20vmax; background: radial-gradient(circle at center, var(--orb-gold-2), transparent 62%); animation: drift-c 38s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(12vmax, 8vmax, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-10vmax, 12vmax, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(8vmax, -10vmax, 0) scale(.95); } }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.drops { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
main, .foot, .top { position: relative; z-index: 1; }

/* Thin reading-progress line at the very top */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 60; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* Top bar */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 18px var(--gutter);
  transition: background .5s, border-color .5s, padding .5s var(--ease), backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.top.scrolled { background: var(--glass); border-color: var(--line); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); padding-top: 12px; padding-bottom: 12px; }
.logo { display: inline-flex; align-items: center; color: var(--head); margin-right: auto; }
.mark { display: block; height: 28px; width: auto; overflow: visible; }
.mark-vai { fill: currentColor; }
.mark-soft { transition: transform .6s var(--ease); transform-box: fill-box; transform-origin: 0 100%; }
.logo:hover .mark-soft { transform: translateX(3px); }
.menu { display: flex; gap: 26px; }
.menu a { position: relative; color: var(--text); font-size: .92rem; padding: 4px 0; transition: color .3s; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.menu a:hover, .menu a[aria-current="true"] { color: var(--head); }
.menu a:hover::after, .menu a[aria-current="true"]::after { transform: scaleX(1); }
.menu-mail { display: none; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; position: relative; margin-left: 4px; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--head); transition: transform .5s var(--ease), top .5s var(--ease); top: 17px; }
.burger span + span { top: 25px; }
.burger[aria-expanded="true"] span { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span + span { transform: rotate(-45deg); }

/* Buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 14px 30px; font-weight: 500; font-size: .95rem; line-height: 1;
  border: 1px solid var(--accent); cursor: pointer; font-family: inherit;
  transition: transform .6s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .5s;
  will-change: transform;
}
.btn > span { display: inline-flex; align-items: center; gap: 10px; transition: transform .5s var(--ease); will-change: transform; }
.btn svg { width: 16px; height: 16px; fill: currentColor; }
.btn-solid { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-ink); box-shadow: 0 0 0 0 var(--accent-glow); }
.btn-solid:hover, .btn-solid:focus-visible { box-shadow: 0 10px 40px -10px var(--accent-glow), 0 0 0 1px var(--accent-2) inset; }
.btn-ghost { color: var(--head); border-color: var(--line-2); background: var(--surface); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.btn-ghost svg { fill: var(--accent); }
.btn-sm { padding: 11px 20px; font-size: .88rem; }
.email svg, .form button svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.form button:hover svg, .email:hover svg { transform: translateX(5px); }

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 80px); align-items: center; width: 100%; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--head); margin: 0 0 1.6rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.line { display: block; overflow: hidden; padding: 0 .1em .08em .14em; margin: 0 -.1em -.08em -.14em; }
.line > span { display: block; transform: translateY(112%); transition: transform 1.3s var(--ease); will-change: transform; }
.loaded .line > span { transform: none; }
.line:nth-child(2) > span { transition-delay: .12s; }
.line:nth-child(3) > span { transition-delay: .24s; }
.line:nth-child(4) > span { transition-delay: .36s; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); max-width: 36rem; color: var(--text); margin-bottom: 1.8rem; }
.lead, .hero-meta { line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 1.6rem; }
.hero-meta { color: var(--muted); margin: 0; }

/* Appear once fonts are ready (hero only) */
.fade { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.loaded .fade { opacity: 1; transform: none; }

/* Portrait: the cut-out photo stands in a dark disc; the head rises above the disc's top. */
.hero-visual { display: flex; justify-content: center; perspective: 1200px; }
.portrait {
  position: relative; margin: 0; width: min(440px, 100%); aspect-ratio: 1;
  transform-style: preserve-3d; transition: transform .9s var(--ease); will-change: transform;
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 50% { translate: 0 -10px; } }
.portrait picture { display: block; position: relative; z-index: 1; }
.portrait img {
  width: 100%; height: auto;
  /* Show the whole upper half, and the lower half only inside the disc (so the shoulders end on the circle). */
  -webkit-mask-image: linear-gradient(#000 0 0), radial-gradient(ellipse 44% 44% at 50% 56%, #000 99.2%, transparent 100%);
  mask-image: linear-gradient(#000 0 0), radial-gradient(ellipse 44% 44% at 50% 56%, #000 99.2%, transparent 100%);
  -webkit-mask-size: 100% 56%, 100% 100%; mask-size: 100% 56%, 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: drop-shadow(0 18px 30px var(--shadow));
}
.portrait-disc { position: absolute; left: 6%; right: 6%; bottom: 0; aspect-ratio: 1; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 50% 30%, var(--disc-1), var(--disc-2) 72%); border: 1px solid var(--line); }
.portrait-glow { position: absolute; left: -16%; right: -16%; bottom: -22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-glow), var(--accent-soft) 45%, transparent 100%); opacity: .8; z-index: 0; }
.portrait-ring { position: absolute; left: calc(6% - 4px); right: calc(6% - 4px); bottom: -4px; aspect-ratio: 1; border-radius: 50%; padding: 1px; z-index: 0; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 25%, var(--accent-2) 40%, transparent 55%, var(--accent) 80%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 9s linear infinite;
}
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --ang: 360deg; } }
.badge {
  position: absolute; left: -8px; bottom: 22px; z-index: 3;
  display: grid; gap: 1px; padding: 12px 18px; border-radius: 16px;
  background: var(--glass-3); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translateZ(40px);
}
.badge strong { font-size: .95rem; font-weight: 600; }
.badge span { font-size: .78rem; color: var(--text); }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; width: 24px; height: 40px; margin-left: -12px; border: 1px solid var(--line-2); border-radius: 14px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); animation: cue 2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* Ticker strip */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; overflow: hidden; background: var(--surface);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker-track { display: flex; align-items: center; gap: 28px; width: max-content; white-space: nowrap; animation: ticker 72s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { font-family: var(--serif); font-size: 1.35rem; color: var(--head); letter-spacing: .01em; }
.ticker i { color: var(--accent); font-style: normal; }
@keyframes ticker { to { transform: translate3d(-50%, 0, 0); } }

/* Sections */
.section { padding: clamp(80px, 11vw, 150px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.pill {
  display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 6px 14px 6px 10px; margin: 0 0 1.4rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--head);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Cards with a light that follows the pointer */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 1rem; }
.card {
  position: relative; padding: clamp(28px, 3.4vw, 44px); border-radius: 24px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .8s var(--ease), border-color .5s, background .5s;
}
.card:hover { transform: translateY(-6px); border-color: var(--line-2); background: var(--surface-2); }
.spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 42%); }
.spot:hover::before { opacity: 1; }
.card > * { position: relative; }
.card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; margin: 0 0 .8rem; max-width: 16ch; }
.card p { max-width: 42ch; }
.num { display: block; font-family: var(--serif); font-style: italic; font-size: 3.4rem; line-height: 1; color: var(--accent); opacity: .55; margin-bottom: 1.4rem; transition: opacity .5s, transform .8s var(--ease); }
.card:hover .num { opacity: 1; transform: translateX(4px); }
.card-foot { margin: 1.4rem 0 0; color: var(--accent); }

/* Two-column text + visual */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split-text p { max-width: 46ch; }
.checks { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 10px; }
.checks li { display: flex; align-items: center; gap: 12px; color: var(--head); }
.check { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--accent); display: grid; place-items: center; flex: none; }
.check::before { content: ""; width: 10px; height: 6px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: translateY(-1px) rotate(-45deg); }

/* Demo video box (D-045): the local MP4 behind its still picture, a gold play button on top. The hero button jumps here (#demo).
   Once the button is pressed the browser's own controls take over; the button comes back when the video ends. */
.video { position: relative; max-width: 920px; margin-left: auto; margin-right: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; margin-top: clamp(40px, 6vw, 72px);
  background: radial-gradient(80% 100% at 50% 100%, var(--accent-soft), transparent 70%), var(--bg-2); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.video video { object-fit: cover; }
.video-play { position: absolute; inset: 0; width: 100%; display: grid; place-content: center; justify-items: center; padding: 16px; border: 0; cursor: pointer; font: inherit; color: var(--accent);
  background: var(--video-shade); transition: opacity .6s var(--ease), background .5s var(--ease); }
.video-play:hover, .video-play:focus-visible { background: transparent; }
.video-play .mono { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.video.playing .video-play { opacity: 0; pointer-events: none; }
.play { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--accent); background: var(--accent-soft); display: grid; place-items: center; margin-bottom: 1.4rem; position: relative; transition: transform .5s var(--ease); }
.video-play:hover .play, .video-play:focus-visible .play { transform: scale(1.08); }
.play::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--accent); animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { to { transform: scale(1.6); opacity: 0; } }
.play svg { width: 28px; height: 28px; fill: var(--accent-2); margin-left: 4px; }

/* Numbers and proof list */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 1rem 0 3rem; }
.stat { padding: 28px 24px 28px 0; display: grid; gap: 6px; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 24px; }
.stat-n { font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1; color: var(--head); }
.stat-l { font-size: .92rem; color: var(--text); max-width: 20ch; }
.proof { list-style: none; padding: 0; margin: 0; }
.proof li { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); transition: padding-left .6s var(--ease), background .4s; border-radius: 12px; }
.proof li:hover { padding-left: 16px; background: var(--surface); }
.proof li:last-child { border-bottom: 1px solid var(--line); }
.proof strong { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; }
.proof span { align-self: center; }

/* About: tags and career path */
.tags { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px; color: var(--head); font-size: .88rem; transition: border-color .3s, background .3s; }
.tags li:hover { border-color: var(--accent); background: var(--accent-soft); }
.about-side { display: flex; justify-content: center; }
.path { list-style: none; padding: 0 0 0 28px; margin: 0; position: relative; width: min(360px, 100%); }
.path::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--line-2), var(--accent)); transform: scaleY(0); transform-origin: 0 0; transition: transform 1.6s var(--ease) .2s; }
.path.in::before { transform: scaleY(1); }
.path li { position: relative; display: grid; gap: 2px; padding: 12px 0 12px 8px; color: var(--head); opacity: 0; transform: translateX(14px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.path.in li { opacity: 1; transform: none; }
.path.in li:nth-child(1) { transition-delay: .2s; } .path.in li:nth-child(2) { transition-delay: .4s; } .path.in li:nth-child(3) { transition-delay: .6s; } .path.in li:nth-child(4) { transition-delay: .8s; } .path.in li:nth-child(5) { transition-delay: 1s; }
.path li::before { content: ""; position: absolute; left: -26px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); }
.path-now::before { background: var(--accent) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 6px var(--accent-soft); }
.path-t { color: var(--muted); }
.path-now span:last-child { font-family: var(--serif); font-size: 1.35rem; color: var(--accent-2); }

/* Contact */
.contact { align-items: start; }
.email { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--head); margin-top: .4rem; }
.email svg { width: 22px; height: 22px; }
.email:hover { color: var(--accent-2); }
.form { display: grid; gap: 14px; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px;
  color: var(--head); padding: 24px 18px 10px; font: inherit; line-height: 1.4; transition: border-color .3s, background .3s;
}
.field textarea { resize: vertical; min-height: 150px; }
.field label { position: absolute; left: 18px; top: 17px; color: var(--muted); pointer-events: none; transition: all .35s var(--ease); font-size: 1rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: 8px; font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); }
.form button { justify-self: start; margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form-note { margin: 0; font-size: .9rem; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 40px 0 32px; font-size: .9rem; overflow: hidden; }
.foot-mark { font-size: clamp(3rem, 11vw, 9.4rem); line-height: .9; margin: 0 0 24px; color: var(--ghost); letter-spacing: 0; white-space: nowrap; user-select: none; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; }
.foot p { margin: 0; }
.foot-links { display: flex; gap: 20px; }
.foot-links a { color: var(--text); }
.foot-links a:hover { color: var(--accent); }

/* Reveal on scroll. --d is the delay for a stagger. */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
/* The video box is an anchor target (#demo): it fades in without the lift, so the jump from the hero lands exactly on it. */
.video.rv { transform: none; }
.card.rv.in { transition: opacity .9s var(--ease), transform .8s var(--ease), border-color .5s, background .5s; transition-delay: 0s; }

/* How it works: the full-width process (demo 7, D-038 and D-039). The boxes are HTML; flow.js draws the lines and the moving dots. */
.wrap-wide { max-width: 1400px; }
.how-lead { max-width: 46rem; font-size: clamp(1.02rem, 1.3vw, 1.15rem); margin: 0 0 clamp(36px, 5vw, 64px); }
.how-lead strong { color: var(--accent-2); font-weight: 500; }
.flow { position: relative; margin: 0; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; } /* behind the boxes and the words */
.flow-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr) minmax(0, .55fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.fl-stage { display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.flow.in .fl-stage { opacity: 1; transform: none; }
.fl-step { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.fl-stage h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.15; margin: 16px 0 6px; }
.fl-stage p { font-size: .86rem; line-height: 1.5; color: var(--text); margin: 0; max-width: 22ch; }
/* 01: what the client gives */
.fl-inputs { align-items: stretch; text-align: left; }
.chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chip { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--head); font-size: .84rem; white-space: nowrap; }
.chip svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; flex: none; }
.chip-more { border-style: dashed; color: var(--text); }
.chip-more svg { stroke-width: 2.4; }
/* 02: VAI Cortex, a turning ring with a soft breathing glow */
.core { position: relative; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 32%, var(--core-1), var(--core-2) 72%); border: 1px solid var(--line-2); }
.core-glow { position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-glow), transparent); opacity: .55; animation: breathe 4.5s ease-in-out infinite; z-index: -1; }
.core-ring { position: absolute; inset: -9px; border-radius: 50%; padding: 1px; background: conic-gradient(from var(--ang, 0deg), transparent 0 55%, var(--accent-2) 72%, transparent 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 7s linear infinite; }
.core-orbit { position: absolute; inset: -22px; border-radius: 50%; border: 1px dashed var(--accent-line-2); animation: turn 36s linear infinite reverse; }
.core-orbit::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent); }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: .95; transform: scale(1.06); } }
.core-icon { width: 64px; height: 64px; }
.core-links path { fill: none; stroke: var(--accent-line-3); stroke-width: 1; }
.core-nodes circle { fill: var(--accent-2); }
.core-nodes circle:first-child { fill: var(--accent); }
/* 03: the blueprint, and 05: VAI Development share the card look */
.sheet, .forge { width: 100%; padding: 16px 18px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-2); text-align: left; }
.sheet { max-width: 230px; }
.forge { max-width: 330px; padding-bottom: 16px; }
.sheet-title, .forge-title { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sheet ul, .agents { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sheet li { display: flex; align-items: center; gap: 10px; color: var(--head); font-size: .86rem; padding: 7px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); opacity: 0; transform: translateX(-8px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.flow.in .sheet li { opacity: 1; transform: none; }
.sheet li i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }
/* 04: the client agrees; the tick draws itself */
.okay { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--accent); background: var(--accent-soft); display: grid; place-items: center; animation: pulse 3s ease-out infinite; }
.okay svg { width: 44px; height: 44px; }
.tick { fill: none; stroke: var(--accent-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease) 1.1s; }
.flow.in .tick { stroke-dashoffset: 0; }
/* 05: the team tree. Vahid (human, real photo) on top, then the PM agent, then designer, lead engineer and QA agents,
   then the developer agents under the lead engineer. Thin gold lines join them; a small dot blinks on each agent at work. */
.org { display: grid; justify-items: center; text-align: center; }
.org-human, .org-row { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.flow.in .org-human, .flow.in .org-row { opacity: 1; transform: none; }
.org-human { display: grid; justify-items: center; gap: 1px; }
.org-photo { display: block; width: 50px; height: 50px; border-radius: 50%; padding: 2px; margin-bottom: 4px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 0 24px -4px var(--accent-glow); }
.org-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--disc-2); display: block; }
.org-name { font-weight: 600; color: var(--head); font-size: .9rem; line-height: 1.2; }
.org-human small, .agent small { font-family: var(--mono); font-size: .64rem; color: var(--muted); line-height: 1.3; }
.org-row { position: relative; display: flex; justify-content: center; gap: 8px; width: 100%; padding-top: 16px; }
.org-row::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 16px; background: var(--accent-line); } /* stem from the row above */
.org-row-three { padding-top: 32px; }
.org-row-three::after { content: ""; position: absolute; top: 16px; left: 16.6%; right: 16.6%; height: 1px; background: var(--accent-line); } /* bar across the three */
.org-row-three .agent::before { content: ""; position: absolute; top: -16px; left: 50%; width: 1px; height: 16px; background: var(--accent-line); } /* bar to each box */
.agent { position: relative; flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 9px 6px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--head); font-size: .78rem; line-height: 1.2; }
.agent span { white-space: nowrap; }
.agent-pm { flex: 0 1 auto; padding: 9px 16px 8px; }
.agent-lead { border-color: var(--accent); flex-grow: 1.3; }   /* a little wider: its label is the longest */
.org-row-devs .agent { background: transparent; }
.bot { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--accent-2); }
.agent::after { content: ""; position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); animation: blink 1.6s ease-in-out infinite; animation-delay: var(--b, 0s); }
@keyframes blink { 50% { opacity: .2; } }
/* 06: the real app; the screen fills in, the four promises light up */
.device { position: relative; width: 92px; height: 164px; border-radius: 20px; border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--device-1), var(--device-2)); padding: 16px 10px 10px; box-shadow: 0 18px 40px -16px var(--shadow-2), 0 0 0 4px var(--edge); }
.device::before { content: ""; position: absolute; top: 6px; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: var(--line-2); }
.screen { display: grid; gap: 7px; margin-top: 4px; }
.screen i { display: block; height: 8px; border-radius: 4px; background: var(--line-2); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); transition-delay: var(--d, 0s); }
.screen i:nth-child(1) { width: 70%; height: 22px; border-radius: 6px; }
.screen i:nth-child(3) { width: 85%; }
.screen i:nth-child(4) { width: 60%; }
.screen i:nth-child(5) { width: 50%; height: 18px; border-radius: 9px; background: var(--accent); }
.flow.in .screen i { transform: none; }
.marks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 240px; }
.marks li { font-size: .74rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent-2); background: var(--accent-soft); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
.flow.in .marks li { opacity: 1; transform: none; }
/* the lines and the moving dots (drawn by flow.js) */
.fl-line { fill: none; stroke: var(--accent-line); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); transition-delay: var(--d, 0s); }
.flow.in .fl-line { stroke-dashoffset: 0; }
.fl-dot { fill: var(--accent-2); }
.fl-halo { fill: var(--accent); opacity: .22; }
/* the two explainer columns and the four promises under the flow */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: clamp(48px, 6vw, 80px); }
.two-col h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.15; margin: 0 0 .6rem; }
.two-col p { max-width: 46ch; margin: 0; }
.values { list-style: none; padding: 0; margin: clamp(36px, 4vw, 56px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.values li { display: grid; gap: 6px; align-content: start; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.values li strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--head); }
.values li span { font-size: .9rem; color: var(--text); }

/* Pointer-only effects stay off on touch screens */
@media (hover: none) { .card:hover { transform: none; } .spot::before { display: none; } }

/* Tablets and phones */
@media (max-width: 920px) {
  .menu { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 var(--gutter);
    background: var(--glass-2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
  .menu.open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
  .menu a { font-family: var(--serif); font-size: clamp(2.2rem, 9vw, 3.4rem); color: var(--head); line-height: 1.1; padding: 6px 0;
    opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
  .menu.open a { opacity: 1; transform: none; }
  .menu.open a:nth-child(1) { transition-delay: .08s; } .menu.open a:nth-child(2) { transition-delay: .14s; } .menu.open a:nth-child(3) { transition-delay: .2s; }
  .menu.open a:nth-child(4) { transition-delay: .26s; } .menu.open a:nth-child(5) { transition-delay: .32s; } .menu.open a:nth-child(6) { transition-delay: .42s; }
  .menu a::after { display: none; }
  .menu a.menu-mail { display: block; font-family: var(--mono); font-size: .85rem; color: var(--accent); margin-top: 24px; } /* more specific than ".menu a" above, so the email stays a small gold line */
  .burger { display: block; position: relative; z-index: 45; }
  .top-cta { display: none; }
  .hero { padding: 104px 0 72px; min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-visual { order: -1; justify-content: flex-start; }
  .portrait { width: 190px; animation: none; }
  .badge { display: none; }
  .scroll-cue { display: none; }
  .cards, .split { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding: 20px 0; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .proof li { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .proof li:hover { padding-left: 0; background: none; }
  .about-side { justify-content: flex-start; }
  .foot-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1300px) {
  .flow-grid { grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr) minmax(0, .5fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; }
  .core { width: 130px; height: 130px; }
}
@media (max-width: 1000px) {
  .flow-grid { grid-template-columns: 1fr; gap: 44px; justify-items: center; }
  .fl-inputs { width: 100%; max-width: 380px; align-items: center; }
  .chips { grid-template-columns: 1fr 1fr; width: 100%; }
  .chip { justify-content: center; }
  .chip-more { grid-column: 1 / -1; }
  .fl-stage p { max-width: 30ch; }
  .two { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .btn { padding: 14px 22px; width: 100%; }
  .actions { flex-direction: column; }
  .ticker span { font-size: 1.15rem; }
  .values { grid-template-columns: 1fr; }
  .chip { font-size: .8rem; padding: 7px 10px; gap: 7px; }
}

/* People who ask for less motion get none */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .rv, .fade, .line > span, .path li, .fl-stage, .sheet li, .marks li, .screen i, .org-human, .org-row { opacity: 1; transform: none; }
  .fl-line, .tick { stroke-dashoffset: 0; }
  .core-ring, .core-orbit, .core-glow, .okay, .agent::after { animation: none; }
  .path::before { transform: none; }
  .orb { animation: none; }
  .ticker-track { animation: none; }
  .portrait, .portrait-ring { animation: none; }
  .progress { display: none; }
}