/* Vommuli Ventures - the single stylesheet.
   Every page links this. Tokens are sampled from the mark: assets/design/BRAND-ASSETS.md
   Change a colour here and it changes everywhere. Never inline a style in a page. */

:root{
  --bg:#05070a; --ink:#eef3f1; --ink2:#9fada8; --muted:#6b7a75;
  --g1:#00603C; --g2:#0C9660; --g3:#30CC84; --cy:#49d6ff;
  --glass:rgba(255,255,255,.055); --glassb:rgba(255,255,255,.12);
  --fd:"Archivo",Arial,sans-serif; --fn:"Archivo Narrow","Archivo",Arial,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:26px; --maxw:1380px; --e:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fd);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;letter-spacing:-.035em;line-height:.95}
p{margin:0}
a{color:var(--g3);text-decoration:none}
.m{font-family:var(--fm);font-variant-numeric:tabular-nums}
.lbl{font-family:var(--fm);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative;z-index:2}

/* ===== full-bleed canvas: particles that assemble into the US map ===== */
.herovid{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0;transition:opacity 1.2s ease;filter:saturate(.8) contrast(1.04) brightness(.82)}
.herovid.ready{opacity:.9}
/* scrim: holds contrast for the text column once footage is behind it */
.scrim{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(5,7,10,.9) 0%,rgba(5,7,10,.62) 38%,rgba(5,7,10,.12) 70%,rgba(5,7,10,.28) 100%)}
#stage{position:fixed;inset:0;z-index:0;display:block}
.wash{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 55% at 18% 12%,rgba(13,122,82,.3),transparent 62%),
    radial-gradient(60% 50% at 86% 26%,rgba(73,214,255,.18),transparent 60%),
    radial-gradient(80% 60% at 50% 104%,rgba(5,7,10,.96),rgba(5,7,10,.4) 60%,transparent);
  animation:breathe 18s ease-in-out infinite alternate}
@keyframes breathe{to{filter:hue-rotate(-12deg) brightness(1.12)}}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(140% 110% at 46% 42%,transparent 66%,rgba(5,7,10,.4) 100%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.2;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== header ===== */
header{position:fixed;top:0;left:0;right:0;z-index:30;transition:all .5s var(--e)}
header.on{background:rgba(5,7,10,.6);backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);border-bottom:1px solid rgba(255,255,255,.08)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px}
.logo{height:30px;width:auto;display:block;flex:none;
  filter:drop-shadow(0 0 12px rgba(0,96,60,.45))}
.lockup{display:flex;align-items:center;gap:11px;text-decoration:none}
@media(max-width:700px){.logo{height:25px}}
.mark{font-weight:800;font-size:17px;letter-spacing:-.03em}
.mark b{color:var(--g2)}
.cta{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 18px;border-radius:999px;border:1px solid var(--glassb);background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);
  transition:all .35s var(--e)}
.cta:hover{background:rgba(24,179,119,.18);border-color:var(--g2);color:var(--g3);transform:translateY(-1px)}

/* ===== hero ===== */
.hero{min-height:100svh;display:flex;align-items:center;padding:110px 0 70px;position:relative}
.hero .wrap{max-width:calc(var(--maxw) * .62);margin-left:max(var(--gut),calc((100vw - var(--maxw))/2))}
@media (max-width:1100px){.hero .wrap{max-width:var(--maxw);margin-left:auto}}
.kick{display:flex;align-items:center;gap:10px;margin-bottom:30px;font-family:var(--fm);
  font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.kick .win{position:relative;height:17px;overflow:hidden;min-width:258px}
.kick .win b{position:absolute;left:0;top:0;font-weight:500;color:var(--g3);white-space:nowrap;
  transform:translateY(105%);opacity:0;transition:transform .6s var(--e),opacity .6s var(--e)}
.kick .win b.on{transform:none;opacity:1}
.kick .win b.out{transform:translateY(-105%);opacity:0}
h1{font-family:var(--fn);font-weight:700;font-size:clamp(42px,6.2vw,96px);line-height:.9;
  letter-spacing:-.048em;text-transform:uppercase}
h1 .l{display:block;overflow:hidden}
h1 .l span{display:block;transform:translateY(105%);transition:transform 1s var(--e)}
h1.go .l span{transform:none}
h1 .l:nth-child(2) span{transition-delay:.1s}
h1 .l:nth-child(3) span{transition-delay:.2s}
h1 em{font-style:normal;background:linear-gradient(94deg,var(--g2),var(--cy));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin-top:30px;font-size:clamp(16px,1.5vw,20px);line-height:1.5;color:var(--ink2);max-width:54ch}
.sub b{color:var(--ink);font-weight:600}

/* glass stat rail */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:46px;max-width:620px;
  border-radius:16px;overflow:hidden;border:1px solid var(--glassb);background:rgba(255,255,255,.07);
  backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.1)}
.rail div{background:rgba(5,7,10,.34);padding:20px 22px}
.rail b{display:block;font-family:var(--fm);font-size:clamp(22px,2.6vw,32px);font-weight:500;line-height:1}
.rail span{display:block;margin-top:9px;font-size:9.5px}
.scrollcue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center;gap:9px;opacity:.6}
.scrollcue i{width:1px;height:38px;background:linear-gradient(var(--g2),transparent);animation:fall 2.1s ease-in-out infinite}
@keyframes fall{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ===== glass sections ===== */
.panel{border-radius:20px;border:1px solid var(--glassb);background:var(--glass);
  backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.1);
  padding:clamp(28px,4vw,56px);position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(93,240,180,.5),rgba(255,255,255,.06) 45%,rgba(73,214,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
section.blk{padding:96px 0}
h2{font-family:var(--fn);font-weight:700;text-transform:uppercase;font-size:clamp(28px,4.4vw,62px);
  letter-spacing:-.045em;line-height:.92}
.body{margin-top:24px;font-size:clamp(15.5px,1.3vw,18.5px);line-height:1.58;color:var(--ink2);max-width:58ch}
.body strong{color:var(--ink);font-weight:600}
.body p+p{margin-top:15px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:40px}
.scard{border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  padding:22px;transition:all .4s var(--e)}
.scard:hover{background:rgba(24,179,119,.1);border-color:rgba(93,240,180,.4);transform:translateY(-4px)}
.scard em{font-style:normal;font-family:var(--fm);font-size:11px;color:var(--g3);letter-spacing:.1em}
.scard h3{margin-top:12px;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.scard p{margin-top:8px;font-size:14.5px;color:var(--ink2);line-height:1.5}

.tw{overflow-x:auto;margin-top:34px}
table{border-collapse:collapse;width:100%;min-width:580px}
th,td{text-align:left;vertical-align:top;padding:17px 22px 17px 0;border-bottom:1px solid rgba(255,255,255,.1)}
thead th{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:400;padding-top:0}
tbody th{font-weight:700;font-size:17.5px;letter-spacing:-.02em;width:26%;white-space:nowrap}
tbody td{color:var(--ink2);font-size:15px}
tbody td.m{color:var(--g3);white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

#contact h2{max-width:15ch}
.cols{display:flex;gap:60px;flex-wrap:wrap;margin-top:44px}
.cols .lbl{display:block;margin-bottom:10px}
address{font-style:normal;line-height:1.85}
.est{display:block;margin-top:10px;font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
footer{padding:28px 0 46px;position:relative;z-index:2}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}

/* ========== NEW COMPONENTS ========== */
/* 1. marquee ticker — separates hero from body */
.ticker{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(8,12,14,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden;padding:15px 0}
.ticker .run{display:flex;gap:0;width:max-content;animation:slide 38s linear infinite}
.ticker span{font-family:var(--fm);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#8d9a95;padding:0 30px;white-space:nowrap}
.ticker span b{color:var(--g3);font-weight:500}
.ticker:hover .run{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* 2. divider with label */
.div{position:relative;z-index:2;display:flex;align-items:center;gap:20px;max-width:var(--maxw);margin:0 auto;padding:62px var(--gut) 26px}
.div i{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.16),transparent)}
.div .n{font-family:var(--fm);font-size:11px;letter-spacing:.2em;color:var(--g2)}

/* 3. light-ground block — the ground flip is the separator */
.light{position:relative;z-index:2;background:#eef1ef;color:#0a0e0c}
.light .lbl{color:#5d6a65}
.light h2{color:#0a0e0c}
.light .body{color:#3b4440}

/* 4. comparison: them vs us */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:40px;border:1px solid rgba(10,14,12,.16)}
.vs>div{padding:30px 28px}
.vs>div:first-child{border-right:1px solid rgba(10,14,12,.16);background:rgba(10,14,12,.035)}
.vs h4{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 20px;color:#5d6a65}
.vs>div:last-child h4{color:var(--g1)}
.vs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.vs li{font-size:15.5px;line-height:1.5;padding-left:26px;position:relative;color:#3b4440}
.vs li::before{position:absolute;left:0;top:0;font-family:var(--fm);font-size:13px}
.vs>div:first-child li::before{content:"×";color:#a33}
.vs>div:last-child li{color:#1a241f;font-weight:500}
.vs>div:last-child li::before{content:"→";color:var(--g1)}

/* 5. horizontal timeline rail */
.rail2{position:relative;margin-top:46px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.rail2::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:linear-gradient(90deg,var(--g1),var(--g3),var(--cy))}
.rail2 div{padding:0 22px 0 0;position:relative}
.rail2 i{display:block;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--g2);
  position:relative;top:13px;margin-bottom:26px;transition:all .4s var(--e)}
.rail2 div:hover i{background:var(--g3);box-shadow:0 0 0 6px rgba(93,240,180,.16)}
.rail2 em{font-style:normal;font-family:var(--fm);font-size:10px;letter-spacing:.16em;color:var(--g3)}
.rail2 h4{margin:9px 0 7px;font-size:16.5px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.rail2 p{font-size:14px;line-height:1.5;color:var(--ink2);padding-right:10px}

/* 6. full-bleed stat band */
.band2{position:relative;z-index:2;background:linear-gradient(100deg,#0a6b48,#0e7a52 42%,#1c9c6e);
  padding:68px 0;overflow:hidden}
.band2::before{content:"";position:absolute;inset:0;opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0h60v60H0z' fill='none' stroke='%23fff' stroke-width='.5'/%3E%3C/svg%3E")}
.band2 .wrap{display:grid;grid-template-columns:auto 1fr;gap:46px;align-items:center}
.band2 b{font-family:var(--fm);font-size:clamp(54px,9vw,132px);font-weight:500;line-height:.85;letter-spacing:-.05em;color:#fff}
.band2 p{font-size:clamp(16px,1.6vw,21px);line-height:1.45;color:rgba(255,255,255,.88);max-width:40ch}

/* 7. horizontal bar chart */
.bars{margin-top:40px;display:flex;flex-direction:column;gap:11px}
.bar{display:grid;grid-template-columns:74px 1fr 56px;gap:16px;align-items:center}
.bar span{font-family:var(--fm);font-size:11.5px;color:var(--ink2)}
.bar .t{height:9px;background:rgba(255,255,255,.07);overflow:hidden}
.bar .f{height:100%;width:0;background:linear-gradient(90deg,var(--g1),var(--g3));transition:width 1.1s var(--e)}
.bar .v{font-family:var(--fm);font-size:12px;text-align:right;color:var(--g3)}

/* 8. accordion */
.acc{margin-top:38px;border-top:1px solid rgba(255,255,255,.12)}
.acc details{border-bottom:1px solid rgba(255,255,255,.12)}
.acc summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;
  align-items:center;gap:18px;font-size:17px;font-weight:600;letter-spacing:-.015em;transition:color .3s var(--e)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--g3)}
.acc summary i{font-family:var(--fm);font-size:18px;color:var(--g2);transition:transform .35s var(--e);flex:none}
.acc details[open] summary i{transform:rotate(45deg)}
.acc p{padding:0 0 22px;color:var(--ink2);font-size:15.5px;line-height:1.6;max-width:62ch}

/* 9. full-bleed pull quote */
.quote{position:relative;z-index:2;padding:100px 0;text-align:center;
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.quote p{font-family:var(--fn);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,4.4vw,62px);line-height:.98;letter-spacing:-.04em;max-width:17ch;margin:0 auto}
.quote p b{background:linear-gradient(94deg,var(--g2),var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

/* 10. footer CTA band */
.ctaband{position:relative;z-index:2;background:#0a0e10;border-top:1px solid rgba(255,255,255,.1);padding:58px 0}
.ctaband .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.ctaband h3{font-family:var(--fn);font-weight:700;text-transform:uppercase;font-size:clamp(22px,3vw,40px);letter-spacing:-.035em;line-height:1}
.btn{font-family:var(--fm);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:16px 30px;
  background:var(--g2);color:#04110b;font-weight:500;transition:all .35s var(--e);white-space:nowrap}
.btn:hover{background:var(--g3);transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(93,240,180,.6)}

/* 11. sticky progress rail */
.prog{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:35;display:flex;flex-direction:column;gap:11px}
.prog a{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:all .35s var(--e);display:block}
.prog a.on{background:var(--g3);box-shadow:0 0 0 4px rgba(93,240,180,.16)}
@media (max-width:1200px){.prog{display:none}}

/* 12. hover-reveal capability cards */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:40px}
.cap{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);padding:24px;min-height:168px;
  display:flex;flex-direction:column;justify-content:flex-end;transition:all .45s var(--e)}
.cap::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(24,179,119,.2),transparent 62%);
  opacity:0;transition:opacity .45s var(--e)}
.cap:hover{border-color:rgba(93,240,180,.45);transform:translateY(-5px)}
.cap:hover::before{opacity:1}
.cap b{position:relative;font-family:var(--fm);font-size:26px;font-weight:500;color:var(--g3);line-height:1}
.cap h4{position:relative;margin:13px 0 5px;font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.cap p{position:relative;font-size:13.5px;color:var(--ink2);line-height:1.45}

@media (max-width:860px){
  .vs{grid-template-columns:1fr}
  .vs>div:first-child{border-right:0;border-bottom:1px solid rgba(10,14,12,.16)}
  .rail2{grid-template-columns:1fr;gap:26px}
  .rail2::before{display:none}
  .rail2 i{top:0;margin-bottom:14px}
  .band2 .wrap{grid-template-columns:1fr;gap:20px}
  .quote{padding:64px 0}
}

@media (max-width:860px){
  .rail{grid-template-columns:1fr;max-width:none}
  .hero{min-height:auto;padding:104px 0 60px}
  section.blk{padding:64px 0}
  .cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wash,.scrollcue i{animation:none}
  h1 .l span{transform:none;transition:none}
  .rv{opacity:1;transform:none;transition:none}
}

/* market cards on the home page - reuse the .cap component, make it a link */
a.cap{text-decoration:none;display:block;transition:border-color .3s var(--e),transform .3s var(--e)}
a.cap:hover{border-color:rgba(48,204,132,.45);transform:translateY(-3px)}
a.cap h4{color:var(--ink)} a.cap:hover h4{color:var(--g3)}