/* Vision Agent — static marketing site
   Palette / tokens translated from the Umbra design system used in the
   reference/*.dc.html mockups (reference/_ds/umbra-design-system-.../tokens/*.css). */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap");

:root{
  /* surfaces */
  --canvas:#08090a;--surface-1:#0f1011;--surface-2:#141516;--surface-3:#18191a;--surface-4:#1f2022;
  --hairline:#23252a;--hairline-strong:#34343a;--hairline-tertiary:#3e3e44;
  /* ink */
  --ink:#f7f8f8;--ink-muted:#d0d6e0;--ink-subtle:#8a8f98;--ink-tertiary:#62666d;
  /* accent */
  --accent:#6e5cf6;--accent-hover:#8f82ff;--accent-pressed:#5a49e0;--accent-ink:#ffffff;
  --accent-tint:rgba(110,92,246,.14);--accent-tint-strong:rgba(110,92,246,.28);--focus-ring:rgba(110,92,246,.5);
  --accent-soft-text:#b3aaff;
  /* semantic */
  --success:#2fa95a;--success-tint:rgba(47,169,90,.14);--success-soft-text:#6fdc95;
  --warning:#f0a92e;--warning-tint:rgba(240,169,46,.14);--warning-soft-text:#f7c76b;
  --danger:#e5484d;--danger-tint:rgba(229,72,77,.14);--danger-soft-text:#ff9b9d;
  --scrim:rgba(3,4,5,.72);
  /* radii */
  --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-xxl:24px;--radius-pill:9999px;
  /* spacing */
  --space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--space-3xl:64px;--space-section:96px;
  --container-max:1200px;--gutter:24px;
  --control-height-sm:28px;--control-height:32px;--control-height-lg:40px;
  /* elevation */
  --edge-highlight:inset 0 1px 0 rgba(255,255,255,.06);
  --elev-2:0 2px 4px rgba(0,0,0,.4),0 8px 24px -6px rgba(0,0,0,.6);
  --ring-focus:0 0 0 2px var(--focus-ring);
  /* motion */
  --ease-standard:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms;--dur-base:180ms;--dur-slow:280ms;
  --transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
  /* fonts */
  --font-display:"Geist","SF Pro Display",-apple-system,system-ui,"Segoe UI",sans-serif;
  --font-text:"Geist","SF Pro Text",-apple-system,system-ui,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/1.5 var(--font-text);letter-spacing:-.05px;overflow-x:hidden}
::selection{background:var(--accent-tint-strong);color:var(--ink)}
a{color:var(--ink);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
img{max-width:100%;display:block}
code{font-family:var(--font-mono)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:var(--radius-pill);border:2px solid transparent;background-clip:content-box}

.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- header / nav ---------- */
/* backdrop-filter on ::before keeps the blur without creating a containing block for fixed children */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--hairline)}
.site-header::before{content:'';position:absolute;inset:0;background:rgba(8,9,10,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:-1}
.site-header .wrap{height:56px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:20px;height:20px;opacity:.9}
.brand-name{font:600 15px/1 var(--font-display);letter-spacing:-.7px;white-space:nowrap;color:var(--ink)}
.brand-parent{font:400 11px/1 var(--font-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-tertiary);padding-left:10px;margin-left:2px;border-left:1px solid var(--hairline);white-space:nowrap}

.nav{display:flex;align-items:center;gap:24px}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.nav-links a{font:500 13px/1 var(--font-display);color:var(--ink-subtle);white-space:nowrap}
.nav-links a:hover,.nav-links a.is-active{color:var(--ink)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:32px;height:32px;border:1px solid var(--hairline);border-radius:var(--radius-md);background:var(--surface-1);cursor:pointer}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--ink-subtle);margin:0 auto;transition:var(--transition-control)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:860px){
  .nav-toggle{display:flex}
  .nav{gap:12px}
  .nav-links{position:fixed;top:56px;left:0;right:0;bottom:0;background:var(--canvas);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gutter) 24px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);overflow-y:auto}
  .nav-links.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{display:block;width:100%;padding:16px 0;border-bottom:1px solid var(--hairline);font-size:15px}
  .nav-links .btn{margin-top:16px;width:100%}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:500 14px/1.2 var(--font-text);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:var(--transition-control);text-decoration:none;height:var(--control-height);padding:0 14px}
.btn:hover{color:inherit}
.btn--sm{height:var(--control-height-sm);padding:0 10px}
.btn--lg{height:var(--control-height-lg);padding:0 18px;font-size:15px}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:var(--accent-hover);color:var(--accent-ink)}
.btn--primary:active{background:var(--accent-pressed)}
.btn--secondary{background:var(--surface-1);color:var(--ink);border-color:var(--hairline)}
.btn--secondary:hover{background:var(--surface-2);border-color:var(--hairline-strong);color:var(--ink)}
.btn--block{width:100%}

/* ---------- badges / tags ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--radius-pill);font:400 12px/1.4 var(--font-text);border:1px solid transparent;background:var(--surface-2);color:var(--ink-muted)}
.badge--accent{background:var(--accent-tint);color:var(--accent-soft-text);border-color:rgba(110,92,246,.3)}
.badge--success{background:var(--success-tint);color:var(--success-soft-text);border-color:rgba(47,169,90,.3)}
.badge--warning{background:var(--warning-tint);color:var(--warning-soft-text);border-color:rgba(240,169,46,.3)}
.badge--danger{background:var(--danger-tint);color:var(--danger-soft-text);border-color:rgba(229,72,77,.3)}
.badge__dot{width:5px;height:5px;border-radius:50%;background:currentColor}

.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--radius-sm);border:1px solid var(--hairline);background:var(--surface-1);color:var(--ink-muted);font:400 12px/1.4 var(--font-mono)}

/* ---------- cards ---------- */
.card{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--edge-highlight)}
.card__eyebrow{margin:0 0 14px;font:400 11px/1 var(--font-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-subtle)}
.card__title{margin:0 0 10px;font:500 19px/1.3 var(--font-display);letter-spacing:-.5px;color:var(--ink);overflow-wrap:anywhere}
.card__body{margin:0;font:400 14px/1.6 var(--font-text);color:var(--ink-subtle)}

/* ---------- code block ---------- */
.code-block{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden}
.code-block__head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--hairline);font:400 12px/1.4 var(--font-mono);color:var(--ink-subtle)}
.code-block__pre{margin:0;padding:var(--space-md);font:400 13px/1.6 var(--font-mono);color:var(--ink-muted);overflow:auto;white-space:pre}

/* ---------- eyebrow / heading helpers ---------- */
.eyebrow{margin:0 0 20px;font:400 11px/1 var(--font-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-subtle)}
.eyebrow--tight{margin:0 0 14px}

.h1-hero{margin:0 auto;max-width:15ch;font:600 clamp(44px,6.6vw,80px)/1.02 var(--font-display);letter-spacing:-3px;color:var(--ink);text-align:center}
.h1-page{margin:0;max-width:20ch;font:600 clamp(40px,5.6vw,64px)/1.04 var(--font-display);letter-spacing:-2.4px;color:var(--ink)}
.h1-page--center{margin:0 auto}
.lede{margin:26px auto 0;max-width:58ch;font:400 17px/1.6 var(--font-text);letter-spacing:-.1px;color:var(--ink-subtle);text-align:center}
.lede--left{margin:26px 0 0;text-align:left}

.h2-section{margin:0 0 48px;max-width:22ch;font:600 40px/1.1 var(--font-display);letter-spacing:-1.8px;color:var(--ink)}
.h2-block{margin:0 0 20px;font:600 40px/1.1 var(--font-display);letter-spacing:-1.8px;color:var(--ink)}
.h2-sub{margin:0 0 18px;font:600 30px/1.15 var(--font-display);letter-spacing:-1.2px;color:var(--ink)}
.h3-step{margin:0 0 12px;font:600 22px/1.2 var(--font-display);letter-spacing:-.8px;color:var(--ink)}

.body-text{margin:0 0 28px;max-width:48ch;font:400 15.5px/1.65 var(--font-text);color:var(--ink-subtle)}
.body-text code{font-size:14px;color:var(--ink-muted)}

/* ---------- sections / layout ---------- */
section{position:relative}
.section-border{border-top:1px solid var(--hairline)}
.section-pad{padding:96px 24px}
@media (max-width:640px){
  .section-pad{padding:64px 20px}
  .h1-hero{letter-spacing:-2px}
}

.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:64px;align-items:center}

/* ---------- hero device mirror mockup ---------- */
.hero{position:relative;overflow:hidden}
.hero__glow{position:absolute;left:50%;top:-140px;width:900px;height:640px;margin-left:-450px;background:radial-gradient(ellipse at 50% 40%,rgba(110,92,246,.3),rgba(110,92,246,0) 62%);filter:blur(40px);pointer-events:none}
.hero__inner{position:relative;max-width:1200px;margin:0 auto;padding:96px 24px 0;text-align:center}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
.hero__mockup{position:relative;max-width:1200px;margin:56px auto 0;padding:0 24px 96px}

.mirror-card{border-radius:var(--radius-xl);padding:0;overflow:hidden;box-shadow:var(--edge-highlight);border:1px solid var(--hairline);background:var(--surface-1)}
.mirror-grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:1px;background:var(--hairline);text-align:left}
@media (max-width:760px){.mirror-grid{grid-template-columns:1fr}}

.mirror-left{background:var(--surface-1);padding:20px;display:flex;flex-direction:column;gap:16px}
.mirror-left__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mirror-left__label{font:400 11px/1 var(--font-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-subtle)}
.mirror-screen{position:relative;flex:1;min-height:340px;border-radius:14px;border:1px solid var(--hairline-strong);background:linear-gradient(180deg,#0c0d0f,#141516);overflow:hidden}
.mirror-scan{position:absolute;left:0;right:0;height:56px;background:linear-gradient(180deg,rgba(110,92,246,0),rgba(110,92,246,.18),rgba(110,92,246,0));animation:vaScan 3.6s linear infinite}
.mirror-screen__body{position:absolute;inset:14px;display:flex;flex-direction:column;gap:10px}
.mb-bar{height:26px;border-radius:6px;background:var(--surface-3)}
.mb-line{height:10px;border-radius:4px;background:var(--surface-3)}
.mb-line--1{width:70%;background:var(--surface-4)}
.mb-line--2{width:52%}
.mb-focus{margin-top:8px;height:64px;border-radius:8px;border:1px solid var(--accent);background:var(--accent-tint)}
.mb-line--3{width:64%}
.mb-line--4{width:44%}
.mb-cta{margin-top:auto;height:34px;border-radius:8px;background:var(--accent);opacity:.9}
.mirror-left__caption{margin:0;font:400 11.5px/1.5 var(--font-mono);color:var(--ink-tertiary)}

.mirror-right{background:var(--canvas);padding:20px;display:flex;flex-direction:column;gap:14px;min-height:420px;min-width:0}
.mirror-right__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mirror-goal{font:400 13px/1.4 var(--font-text);color:var(--ink-muted)}
.mirror-right__tags{display:flex;gap:6px;flex-wrap:wrap}
.timeline{display:grid;gap:8px;min-width:0}
.timeline-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 14px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface-1)}
.timeline-row span{font:400 11px/1 var(--font-mono);color:var(--ink-tertiary)}
.timeline-row span.timeline-call{font-size:12.5px;line-height:1.5;color:var(--ink-muted);overflow-wrap:anywhere}
.timeline-row--active{border-color:var(--accent);background:var(--accent-tint);animation:vaShimmer 1.4s ease-in-out infinite}
.timeline-row--active span{color:var(--accent-soft-text)}
.mirror-right__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--hairline)}
.mirror-right__foot span{font:400 12px/1.5 var(--font-mono);color:var(--ink-tertiary)}

/* ---------- feature / security cards ---------- */
.feature-card{border:1px solid var(--hairline);border-radius:12px;background:var(--surface-1);padding:24px;box-shadow:var(--edge-highlight);overflow-wrap:anywhere}

/* ---------- cta banner ---------- */
.cta-banner{border:1px solid var(--hairline-strong);border-radius:24px;background:var(--surface-2);padding:48px;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.cta-banner h2{margin:0 0 10px;font:600 30px/1.15 var(--font-display);letter-spacing:-1.2px;color:var(--ink)}
.cta-banner p{margin:0;max-width:52ch;font:400 15px/1.6 var(--font-text);color:var(--ink-subtle)}

/* ---------- tool vocabulary table ---------- */
.tool-list{border:1px solid var(--hairline);border-radius:12px;overflow:hidden;background:var(--surface-1)}
.tool-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(240px,2.4fr);gap:24px;padding:16px 24px;border-bottom:1px solid var(--hairline)}
.tool-row:last-child{border-bottom:none}
.tool-row .tool-name{font:400 13px/1.5 var(--font-mono);color:var(--ink)}
.tool-row .tool-desc{font:400 14px/1.55 var(--font-text);color:var(--ink-subtle)}
@media (max-width:600px){.tool-row{grid-template-columns:1fr;gap:6px}}

/* ---------- verdict rows ---------- */
.verdict-row{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--hairline);border-radius:12px;background:var(--surface-1)}
.verdict-row span.verdict-text{font:400 14px/1.6 var(--font-text);color:var(--ink-subtle)}

/* ---------- docs ---------- */
.docs-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:48px;align-items:start}
@media (max-width:860px){.docs-layout{grid-template-columns:1fr}}
.docs-steps{display:grid;gap:36px;min-width:0}
.docs-sidebar{border:1px solid var(--hairline);border-radius:12px;background:var(--surface-1);padding:24px;box-shadow:var(--edge-highlight);position:sticky;top:80px}
.docs-sidebar__label{margin:0 0 16px;font:400 11px/1 var(--font-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-subtle)}
.env-item p:first-child{margin:0 0 4px;font:400 12.5px/1.5 var(--font-mono);color:var(--ink-muted)}
.env-item p:last-child{margin:0;font:400 13px/1.55 var(--font-text);color:var(--ink-tertiary)}
.env-artifacts{padding-top:14px;border-top:1px solid var(--hairline)}
.env-artifacts p:first-child{margin:0 0 8px;font:400 11px/1 var(--font-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-subtle)}
.env-artifacts p:last-child{margin:0;font:400 12.5px/1.7 var(--font-mono);color:var(--ink-tertiary)}
.docs-env-grid{display:grid;gap:14px}

/* ---------- pricing ---------- */
.tier-card{display:flex;flex-direction:column;gap:20px;border-radius:12px;padding:28px;box-shadow:var(--edge-highlight)}
.tier-card__head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.tier-card__name{font:500 14px/1 var(--font-display);color:var(--ink)}
.tier-flag{padding:2px 8px;border-radius:999px;background:var(--accent-tint);border:1px solid rgba(110,92,246,.3);color:var(--accent-soft-text);font:400 11px/1.5 var(--font-mono)}
.tier-price{margin:0;font:600 40px/1 var(--font-display);letter-spacing:-2px;color:var(--ink)}
.tier-unit{margin:8px 0 0;font:400 12.5px/1.5 var(--font-mono);color:var(--ink-tertiary)}
.tier-blurb{margin:0;font:400 14px/1.6 var(--font-text);color:var(--ink-subtle)}
.tier-points{display:grid;gap:9px}
.tier-point{display:flex;gap:10px;align-items:flex-start}
.tier-point__dot{flex:none;width:14px;height:14px;border-radius:999px;background:var(--accent-tint);border:1px solid rgba(110,92,246,.35);margin-top:3px}
.tier-point span{font:400 13.5px/1.55 var(--font-text);color:var(--ink-muted)}
.tier-card__cta{margin-top:auto}
.pricing-note{margin:20px 0 0;font:400 13px/1.6 var(--font-text);color:var(--ink-tertiary)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.label{font:400 14px/1.5 var(--font-text);color:var(--ink-muted)}
.hint{font:400 12px/1.4 var(--font-text);color:var(--ink-subtle)}
.input,.textarea{width:100%;background:var(--surface-1);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:8px 12px;font:400 14px/1.5 var(--font-text);transition:var(--transition-control)}
.input{height:var(--control-height)}
.textarea{min-height:96px;resize:vertical;line-height:1.5}
.input::placeholder,.textarea::placeholder{color:var(--ink-tertiary)}
.input:hover,.textarea:hover{border-color:var(--hairline-strong)}
.input:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring-focus)}

.contact-form{border:1px solid var(--hairline);border-radius:12px;background:var(--surface-1);padding:28px;box-shadow:var(--edge-highlight);display:grid;gap:16px}
.contact-confirm{display:grid;gap:10px;padding:16px 0}
.contact-confirm p:first-child{margin:0;font:500 20px/1.3 var(--font-display);letter-spacing:-.6px;color:var(--ink)}
.contact-confirm p:last-child{margin:0;font:400 14px/1.6 var(--font-text);color:var(--ink-subtle)}
.contact-meta{display:grid;gap:18px}
.contact-meta p{margin:0 0 6px;font:400 12.5px/1 var(--font-mono);color:var(--ink-tertiary)}
.contact-meta a{font:500 16px/1.4 var(--font-display);letter-spacing:-.4px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--hairline)}
.footer-top{max-width:1200px;margin:0 auto;padding:64px 24px;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-brand img{width:18px;height:18px;opacity:.85}
.footer-brand span{font:600 14px/1 var(--font-display);letter-spacing:-.6px;color:var(--ink)}
.footer-desc{margin:0;max-width:36ch;font:400 13px/1.6 var(--font-text);color:var(--ink-tertiary)}
.footer-cols{display:flex;gap:48px;flex-wrap:wrap}
.footer-col{display:grid;gap:8px}
.footer-col p{margin:0 0 4px;font:400 11px/1 var(--font-mono);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-tertiary)}
.footer-col a{font:400 13px/1.6 var(--font-text);color:var(--ink-subtle)}
.footer-bottom{max-width:1200px;margin:0 auto;padding:0 24px 40px}
.footer-bottom p{margin:0;font:400 12px/1.6 var(--font-mono);color:var(--ink-tertiary)}

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
[data-reveal].is-revealed{opacity:1;transform:none}

@keyframes vaRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes vaShimmer{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
@keyframes vaScan{0%{transform:translateY(-100%)}100%{transform:translateY(320%)}}
.rise{animation:vaRise .8s cubic-bezier(.16,1,.3,1) both}
.rise-1{animation-delay:.05s}
.rise-2{animation-delay:.12s}
.rise-3{animation-delay:.18s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  [data-reveal]{opacity:1;transform:none}
}