/* VeraGen — corporate site.
   Shares the Hub's palette and typeface so the marketing site and the product read as one
   system. Type scale and spacing are deliberately larger here: this is a page you read,
   not an interface you work in. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#080d16; --bg2:#0b1220; --panel:#0e1826; --panel2:#121f31;
  --line:rgba(160,196,208,.16); --line2:rgba(160,196,208,.10);
  --ink:#e9f0f8; --dim:#9fb0c6; --steel:#7d8ea6;
  --accent:#1575E2; --accent2:#4199fe; --navy:#002F64;
  --emerald:#34d399; --amber:#f0b866; --violet:#a78bfa; --cyan:#22d3ee;
  --font:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:1180px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
a{ color:var(--accent2); text-decoration:none; }
a:hover{ color:#7fbaff; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 26px; }

/* themed scrollbars, matching the product */
*{ scrollbar-width:thin; scrollbar-color:#26374f transparent; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:#080d15; }
::-webkit-scrollbar-thumb{ background:#243449; border:3px solid #080d15; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#31465f; }

/* ---------------------------------------------------------------- header */
header.site{ position:sticky; top:0; z-index:40; backdrop-filter:blur(14px);
  background:rgba(8,13,22,.78); border-bottom:1px solid var(--line2); }
.nav{ display:flex; align-items:center; gap:30px; height:70px; }
.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); font-weight:800;
  letter-spacing:.13em; font-size:15px; }
.brand svg{ height:27px; width:auto; flex:none; }
.brand .a{ color:var(--accent2); }
.nav .links{ display:flex; gap:26px; margin-left:14px; }
.nav .links a{ color:var(--dim); font-size:14.5px; font-weight:600; }
.nav .links a:hover, .nav .links a.on{ color:var(--ink); }
.nav .sp{ flex:1; }
.btn{ display:inline-flex; align-items:center; gap:9px; border-radius:11px; padding:11px 20px;
  font-size:14.5px; font-weight:650; border:1px solid var(--line); color:var(--ink);
  background:rgba(255,255,255,.04); cursor:pointer; transition:.14s; white-space:nowrap; }
.btn:hover{ border-color:rgba(160,196,208,.42); color:var(--ink); }
.btn.primary{ background:linear-gradient(90deg,#1575E2,#005abf); border-color:#2f6f9a; color:#fff; }
.btn.primary:hover{ filter:brightness(1.1); color:#fff; }
.btn.lg{ padding:15px 26px; font-size:16px; border-radius:13px; }
.navtoggle{ display:none; background:none; border:0; color:var(--dim); cursor:pointer; padding:6px; }
@media(max-width:900px){
  .nav .links{ display:none; }
  .nav .links.open{ display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column;
    gap:0; background:var(--bg2); border-bottom:1px solid var(--line); padding:8px 26px 18px; }
  .nav .links.open a{ padding:11px 0; border-bottom:1px solid var(--line2); }
  .navtoggle{ display:block; }
  .nav .cta-sm{ display:none; }
}

/* ---------------------------------------------------------------- hero */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line2); }
/* The V gets its own column on the right rather than being cropped by `cover` across the
   whole hero — that way how far right it sits is a number we control, not a side effect of
   viewport width. */
/* The V's top-right corner is aligned to the RIGHT edge of the header's "Request access" button.
   That edge sits at exactly 50vw + 564px at every width down to ~1180px (below which the wrap goes
   fluid), and the V's corner is at 0.833 of the artwork's width. Fixing the column at 1240px keeps
   `cover` width-driven (1240/612 = 2.03 > the art's 1.91), so the drawn width is a known quantity
   and the alignment solves exactly:
       vw - right - 1240 + 0.833*1240 = 50vw + 564   ->   right = 50vw - 771px
   Both edges are feathered because the column no longer touches either side of the viewport. */
.hero .bgimg{ position:absolute; top:0; bottom:0; right:calc(50vw - 771px); width:1240px;
  background-image:var(--hero-img); background-size:cover; background-position:center; opacity:.92;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%, #000 82%, rgba(0,0,0,.45) 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%, #000 82%, rgba(0,0,0,.45) 93%, transparent 100%); }
.hero .scrim{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,13,22,.92) 0%, rgba(8,13,22,.80) 34%, rgba(8,13,22,.30) 52%, transparent 70%); }
.hero .scrim2{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,13,22,.55) 0%, transparent 22%, transparent 62%, var(--bg) 100%); }
.hero .inner{ position:relative; padding:104px 26px 110px; }
.hero h1{ font-size:clamp(29px,2.9vw,42px); line-height:1.14; letter-spacing:-.018em; margin:16px 0 20px;
  max-width:21ch; font-weight:660; }
.hero .lead{ font-size:clamp(15.5px,1.05vw,17px); color:#bccbdd; max-width:52ch; margin:0 0 30px; line-height:1.66; }
.hero .ctas{ display:flex; gap:13px; flex-wrap:wrap; }
.hero .note{ margin:26px 0 0; font-size:13.5px; color:var(--steel); }
/* Between about 1500px and the mobile breakpoint the image column narrows faster than the
   artwork does, clipping the V's right stroke. Widen the column and pull it back so the whole
   mark stays inside the viewport. */
@media(max-width:1180px){ .hero .bgimg{ right:-6%; width:90%; opacity:.8;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 12%, #000 30%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 12%, #000 30%); } }
@media(max-width:820px){
  .hero .bgimg{ right:0; width:100%; background-position:60% center; opacity:.5; }
  .hero .scrim{ background:linear-gradient(180deg, rgba(6,10,18,.82) 0%, rgba(6,10,18,.74) 60%, rgba(6,10,18,.94) 100%); }
  .hero .inner{ padding:76px 26px 84px; }
}

.eyebrow{ font-size:11.5px; letter-spacing:.19em; text-transform:uppercase; font-weight:700;
  color:var(--accent2); margin:0; }
.eyebrow.dim{ color:var(--steel); }

/* ---------------------------------------------------------------- sections */
section{ padding:86px 0; }
section.tight{ padding:60px 0; }
section.alt{ background:linear-gradient(180deg,var(--bg),#0a1018 60%,var(--bg)); }
h2.sec{ font-size:clamp(23px,2.3vw,31px); line-height:1.22; letter-spacing:-.015em; margin:14px 0 16px; font-weight:650; }
h3{ font-size:17.5px; margin:0 0 8px; font-weight:640; letter-spacing:-.006em; }
p.sub{ color:var(--dim); font-size:15.5px; max-width:66ch; margin:0 0 38px; line-height:1.66; }
p{ color:#cdd9e8; }
.lede{ font-size:17px; color:#cedcec; max-width:64ch; line-height:1.68; }

.pull{ border-left:2px solid var(--accent); padding:4px 0 4px 22px; margin:32px 0;
  font-size:clamp(17px,1.6vw,21px); line-height:1.44; color:#e3ecf7; font-weight:550; letter-spacing:-.008em;
  max-width:38ch; }

/* ---------------------------------------------------------------- grids & cards */
.g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.g2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.g2w{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
@media(max-width:980px){ .g3{ grid-template-columns:1fr; } .g2{ grid-template-columns:1fr; } .g2w{ grid-template-columns:1fr; gap:34px; } }

.card{ background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line);
  border-radius:16px; padding:24px 22px; position:relative; overflow:hidden; transition:.16s; }
a.card{ display:block; color:inherit; }
a.card:hover{ border-color:rgba(65,153,254,.45); transform:translateY(-2px); color:inherit; }
.card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--accent); opacity:.9; }
.card.c-studio::before{ background:#34d399; }
.card.c-flow::before{ background:#2dd4bf; }
.card.c-proj::before{ background:var(--accent); }
.card.c-obs::before{ background:#f472b6; }
.card.c-pub::before{ background:var(--accent2); }
.card.c-team::before{ background:var(--violet); }
.card p{ margin:0; color:var(--dim); font-size:14.5px; }
.card .more{ display:inline-block; margin-top:14px; font-size:13.5px; font-weight:650; color:var(--accent2); }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset:s; }
@media(max-width:980px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:16px; border-top:1px solid var(--line); }
.step .n{ font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--steel); }
.step h3{ margin:12px 0 8px; }
.step p{ color:var(--dim); font-size:15px; margin:0; }

.facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 44px; }
@media(max-width:820px){ .facts{ grid-template-columns:1fr; } }
.fact{ padding:20px 0; border-bottom:1px solid var(--line2); }
.fact h4{ margin:0 0 5px; font-size:15.5px; font-weight:670; }
.fact p{ margin:0; color:var(--dim); font-size:14.5px; }

ul.ticks{ list-style:none; padding:0; margin:18px 0 0; }
ul.ticks li{ position:relative; padding:0 0 12px 28px; color:#cdd9e8; font-size:15.5px; }
ul.ticks li::before{ content:""; position:absolute; left:4px; top:9px; width:7px; height:7px;
  border-radius:50%; background:var(--accent2); }
ul.ticks li b{ color:#fff; font-weight:650; }

/* ---------------------------------------------------------------- interface impressions */
.ui{ background:#0a1119; border:1px solid var(--line); border-radius:15px; overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.5); }
.ui .bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02); }
.ui .bar i{ width:9px; height:9px; border-radius:50%; background:#2a3a4e; display:block; }
.ui .bar span{ margin-left:9px; font-size:11.5px; color:var(--steel); letter-spacing:.05em; }
.ui .body{ padding:18px; }
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
@media(max-width:620px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
.tile{ background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line);
  border-radius:11px; padding:12px 13px; }
.tile .k{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); font-weight:700; }
.tile .v{ font-size:20px; font-weight:750; margin-top:5px; letter-spacing:-.01em; }
.tile .d{ font-size:10.5px; color:var(--dim); margin-top:2px; }
.rows{ margin-top:13px; }
.row{ display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px dashed var(--line2); font-size:13px; }
.row:last-child{ border-bottom:0; }
.row .nm{ font-weight:600; }
.row .sp{ flex:1; }
.row .mut{ color:var(--steel); font-size:12px; }
.pill{ font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 9px; border:1px solid transparent; }
.pill.ok{ color:#8ff0c8; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.3); }
.pill.llm{ color:#ffd79a; background:rgba(240,184,102,.12); border-color:rgba(240,184,102,.3); }
.pill.chain{ color:#bcd4ff; background:rgba(21,117,226,.14); border-color:rgba(21,117,226,.36); }

/* trace waterfall impression */
.wf{ display:grid; gap:7px; }
.wf .lane{ display:grid; grid-template-columns:150px 1fr 54px; gap:11px; align-items:center; font-size:12.5px; }
.wf .lane .lbl{ color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf .track{ height:9px; background:rgba(160,196,208,.07); border-radius:5px; position:relative; }
.wf .track i{ position:absolute; top:0; bottom:0; border-radius:5px; background:linear-gradient(90deg,#1575E2,#4199fe); }
.wf .track i.g{ background:linear-gradient(90deg,#22d3ee,#2dd4bf); }
.wf .track i.v{ background:linear-gradient(90deg,#a78bfa,#7c5cff); }
.wf .ms{ color:var(--steel); text-align:right; font-variant-numeric:tabular-nums; }

/* workflow canvas impression */
.canvas{ position:relative; height:212px;
  background-image:radial-gradient(rgba(160,196,208,.13) 1px, transparent 1px); background-size:19px 19px; }
.node{ position:absolute; background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:12px; font-weight:600; }
.node small{ display:block; color:var(--steel); font-weight:500; font-size:10.5px; margin-top:1px; }
.node.acc{ border-color:rgba(65,153,254,.5); box-shadow:0 0 0 3px rgba(21,117,226,.10); }
.edge{ position:absolute; height:2px; background:linear-gradient(90deg,rgba(65,153,254,.7),rgba(65,153,254,.25)); }

/* ---------------------------------------------------------------- callout / cta band */
.band{ background:linear-gradient(135deg,rgba(21,117,226,.16),rgba(124,92,255,.10));
  border:1px solid rgba(65,153,254,.28); border-radius:20px; padding:44px 40px; }
.band h2{ margin:0 0 10px; font-size:clamp(24px,2.6vw,32px); letter-spacing:-.02em; }
.band p{ color:#cfdcec; max-width:56ch; margin:0 0 24px; }
@media(max-width:620px){ .band{ padding:30px 24px; } }

.note{ font-size:13.5px; color:var(--steel); }
.tip{ border-left:3px solid var(--accent); background:rgba(21,117,226,.07);
  border-radius:0 12px 12px 0; padding:16px 20px; margin:26px 0; color:#cfdcec; font-size:15px; }
.tip b{ color:#fff; }

/* ---------------------------------------------------------------- footer */
footer.site{ border-top:1px solid var(--line); padding:52px 0 40px; background:#070c14; }
.fgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; }
@media(max-width:860px){ .fgrid{ grid-template-columns:1fr 1fr; gap:26px; } }
footer.site h5{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel);
  margin:0 0 14px; font-weight:700; }
footer.site a{ display:block; color:var(--dim); font-size:14px; padding:5px 0; }
footer.site a:hover{ color:var(--ink); }
footer.site .about{ color:var(--steel); font-size:13.5px; max-width:38ch; margin:14px 0 0; }
.fbot{ margin-top:38px; padding-top:22px; border-top:1px solid var(--line2);
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; color:var(--steel); font-size:13px; }
.fbot .sp{ flex:1; }

/* form */
.field{ margin:0 0 16px; }
.field label{ display:block; font-size:13.5px; font-weight:650; color:var(--dim); margin:0 0 7px; }
.field input, .field textarea, .field select{
  width:100%; background:rgba(8,14,22,.9); border:1px solid var(--line); color:var(--ink);
  border-radius:11px; padding:12px 14px; font:inherit; font-size:15px; outline:none; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:rgba(65,153,254,.6); }
.field textarea{ resize:vertical; min-height:110px; }

/* ---------------------------------------------------------------- proof stripe
   A hard-edged band of claims directly under the hero. Deliberately unstyled beyond
   rules and type: the point is that each item is a fact, not a feature badge. */
.stripe{ border-bottom:1px solid var(--line2); background:rgba(9,15,24,.55); }
.stripe .in{ display:grid; grid-template-columns:repeat(4,1fr); }
.stripe .s{ padding:24px 26px; border-left:1px solid var(--line2); }
.stripe .s:first-child{ padding-left:0; border-left:0; }
.stripe .s b{ display:block; font-size:14.5px; font-weight:680; letter-spacing:-.012em; color:var(--ink); }
.stripe .s span{ display:block; margin-top:5px; font-size:12.5px; line-height:1.55; color:var(--steel); }
@media(max-width:980px){
  .stripe .in{ grid-template-columns:repeat(2,1fr); }
  .stripe .s{ padding:20px 22px; }
  .stripe .s:nth-child(odd){ padding-left:0; border-left:0; }
}
@media(max-width:560px){
  .stripe .in{ grid-template-columns:1fr; }
  .stripe .s{ padding:18px 0; border-left:0; border-top:1px solid var(--line2); }
  .stripe .s:first-child{ border-top:0; }
}

/* ---------------------------------------------------------------- head to head */
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media(max-width:820px){ .vs{ grid-template-columns:1fr; } }
.vs .col{ background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line);
  border-radius:16px; padding:26px 26px 20px; }
.vs .col.win{ border-color:rgba(65,153,254,.45); box-shadow:0 0 0 3px rgba(21,117,226,.09); }
.vs .cap{ font-size:11.5px; letter-spacing:.17em; text-transform:uppercase; font-weight:700;
  color:var(--steel); margin:0 0 16px; }
.vs .col.win .cap{ color:var(--accent2); }
.vs ul{ list-style:none; margin:0; padding:0; }
.vs li{ display:flex; gap:12px; align-items:flex-start; padding:13px 0; font-size:14.5px;
  line-height:1.55; color:var(--dim); border-bottom:1px dashed var(--line2); }
.vs li:last-child{ border-bottom:0; }
.vs li i{ flex:none; width:15px; font-style:normal; font-weight:700; color:#5b7085; line-height:1.5; }
.vs .col.win li{ color:#cdd9e8; }
.vs .col.win li i{ color:#5fe0aa; }

/* ---------------------------------------------------------------- form states */
/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs, and
   aria-hidden + tabindex="-1" keep it away from screen readers and keyboard users. */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

.formmsg{ margin:14px 0 0; font-size:14px; line-height:1.55; min-height:0; }
.formmsg.err{ color:#ffb4b4; border-left:3px solid #e0575a; background:rgba(224,87,90,.08);
  padding:11px 14px; border-radius:0 9px 9px 0; }
.formmsg.err a{ color:#ffd2d2; text-decoration:underline; }

.sent{ border:1px solid rgba(52,211,153,.34); background:rgba(52,211,153,.07);
  border-radius:16px; padding:26px 26px 24px; }
.sent h3{ margin:0 0 10px; font-size:20px; letter-spacing:-.01em; }
.sent p{ margin:0; color:var(--dim); font-size:15px; line-height:1.65; }