/* Vexidus.com — shared design system. Edit tokens/components here once; all pages inherit.
   See WEBSITES_REFERENCE.md for hosting + deploy. */
:root{
  --bg:#030308; --bg-elevated:#0A0D16; --bg-card:rgba(255,255,255,0.02);
  --border:rgba(255,255,255,0.06); --border-hover:rgba(255,255,255,0.12);
  --primary:#4A90E2; --primary-dim:rgba(74,144,226,0.08);
  --accent:#7B61FF; --accent-dim:rgba(123,97,255,0.08);
  --success:#34D399; --text:#F1F5F9; --text-secondary:#94A3B8; --text-dim:#64748B;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.gradient{background:linear-gradient(120deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(3,3,8,.72);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}
.brand img{width:30px;height:30px}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{color:var(--text-secondary);font-size:.92rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;font-weight:600;font-size:.9rem;transition:all .2s;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(120deg,var(--primary),var(--accent));color:#fff}
.btn-primary:hover{opacity:.92;transform:translateY(-1px)}
.btn-outline{border-color:var(--border-hover);color:var(--text)}
.btn-outline:hover{background:var(--bg-card);border-color:var(--primary)}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:1.4rem;cursor:pointer}
/* hero */
.hero{position:relative;padding:120px 0 80px;overflow:hidden}
.hero.sub{padding:96px 0 40px}
.hero::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:900px;height:900px;background:radial-gradient(circle,var(--accent-dim),transparent 60%);pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--border);border-radius:999px;font-size:.8rem;color:var(--text-secondary);margin-bottom:28px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin-bottom:22px}
.hero.sub h1{font-size:clamp(2.1rem,5vw,3.2rem)}
.hero p{font-size:1.16rem;color:var(--text-secondary);max-width:640px;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-top:64px}
.stat{background:var(--bg);padding:26px 20px;text-align:center}
.stat-v{font-size:1.9rem;font-weight:800;letter-spacing:-.02em}
.stat-l{font-size:.82rem;color:var(--text-dim);margin-top:4px}
/* sections */
section{padding:90px 0}
.section-head{max-width:680px;margin-bottom:48px}
.section-head h2{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;margin:10px 0 14px}
.section-head p{color:var(--text-secondary);font-size:1.05rem}
.lead{font-size:1.14rem;color:var(--text-secondary);margin-bottom:20px}
.prose p{color:var(--text-secondary);margin-bottom:18px}
.prose strong{color:var(--text);font-weight:600}
/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:28px;transition:all .25s;position:relative}
.card:hover{border-color:var(--border-hover);transform:translateY(-3px);background:rgba(255,255,255,.03)}
.card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-dim),var(--accent-dim));border:1px solid var(--border);margin-bottom:18px}
.card-icon svg{width:24px;height:24px;color:#a9c6ff}
.card h3{font-size:1.2rem;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card .tag{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-dim);padding:3px 9px;border-radius:999px}
.card p{color:var(--text-secondary);font-size:.95rem;margin-bottom:14px}
/* sector + jurisdiction line under a company name — reads as a label, not body copy */
.card p.card-meta{font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-tertiary,var(--text-secondary));opacity:.75;margin-bottom:12px}
/* company chain — the mandate is a SEQUENCE, not a portfolio.
   A flat equal-weight grid of N company cards structurally says "unrelated bets",
   which is the one reading this company must never invite. Aerotier and Cargovate
   are two points on one chain (an obligation, then the product made of it), so the
   layout has to carry that; anything genuinely independent sits below, subordinate. */
.chain{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.chain-link{display:flex;align-items:center;justify-content:center;color:var(--text-dim)}
.chain-link svg{width:26px;height:26px}
.card-lead{background:linear-gradient(160deg,rgba(74,144,226,.055),var(--bg-card));border-color:var(--border-hover)}
.step{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:16px}
.adjacent{margin-top:46px;padding-top:32px;border-top:1px solid var(--border)}
.adjacent-h{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:20px}
.card-sub{padding:24px}
.card-sub h3{font-size:1.08rem}
/* aside beneath a grid: present but deliberately subordinate to the cards */
.section-note{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);color:var(--text-secondary);font-size:.9rem;max-width:70ch}
.section-note a{color:var(--primary)}
.card .card-link{color:var(--primary);font-size:.88rem;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.card .card-link:hover{gap:9px}
/* protocol highlight */
.band{background:var(--bg-elevated);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.protocol-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.feat{display:flex;gap:14px;margin-bottom:22px}
.feat-ic{flex:0 0 40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--primary-dim);border:1px solid var(--border)}
.feat-ic svg{width:20px;height:20px;color:#a9c6ff}
.feat h4{font-size:1rem;font-weight:650;margin-bottom:2px}
.feat p{color:var(--text-secondary);font-size:.92rem}
/* ip row */
.ip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.ip{border:1px solid var(--border);border-radius:14px;padding:22px;background:var(--bg-card)}
.ip h4{font-size:1.02rem;font-weight:700;margin-bottom:4px}
.ip .num{font-size:.78rem;color:var(--text-dim);font-family:ui-monospace,monospace}
.ip p{color:var(--text-secondary);font-size:.9rem;margin-top:8px}
/* timeline (about) */
.timeline{position:relative;padding-left:26px;margin-top:8px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl{position:relative;margin-bottom:26px}
.tl::before{content:"";position:absolute;left:-26px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px var(--primary-dim)}
.tl h4{font-size:1rem;font-weight:650}
.tl p{color:var(--text-secondary);font-size:.92rem}
/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.channels{display:grid;gap:14px}
.channel{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);border-radius:14px;padding:18px 20px;transition:all .2s}
.channel:hover{border-color:var(--primary);background:var(--bg-card)}
.channel .ic{flex:0 0 38px;height:38px;border-radius:10px;background:var(--primary-dim);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.channel .ic svg{width:19px;height:19px;color:#a9c6ff}
.channel h4{font-size:.98rem;font-weight:650}
.channel a{color:var(--primary);font-size:.9rem;font-weight:500}
.channel span{color:var(--text-dim);font-size:.85rem}
.form{border:1px solid var(--border);border-radius:16px;padding:28px;background:var(--bg-card)}
.form label{display:block;font-size:.82rem;font-weight:600;color:var(--text-secondary);margin:14px 0 6px}
.form input,.form textarea{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-family:inherit;font-size:.95rem;transition:border-color .2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--primary)}
.form textarea{min-height:120px;resize:vertical}
.form .btn{width:100%;justify-content:center;margin-top:22px}
/* footer */
footer{border-top:1px solid var(--border);padding:56px 0 40px;color:var(--text-secondary)}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:36px}
.foot-brand{max-width:340px}
.foot-brand .brand{margin-bottom:14px}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col h5{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px}
.foot-col a{display:block;color:var(--text-secondary);font-size:.9rem;margin-bottom:9px;transition:color .2s}
.foot-col a:hover{color:var(--text)}
.foot-bottom{border-top:1px solid var(--border);padding-top:24px;font-size:.84rem;color:var(--text-dim);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:860px){
  .nav-links{display:none}.nav-toggle{display:block}
  .protocol-grid,.contact-grid{grid-template-columns:1fr;gap:36px}
  .stats{grid-template-columns:repeat(2,1fr)}
  /* the chain still reads top-to-bottom when it stacks — turn the connector with it */
  .chain{grid-template-columns:1fr;gap:16px}
  .chain-link{transform:rotate(90deg);padding:2px 0}
}
