/* ══════════════════════════════════════════════
   Picspo Labs — Building Today, Empowering Tomorrow
   ══════════════════════════════════════════════ */

:root{
  /* green scale */
  --g-950:#062A1E;
  --g-900:#0B3D2C;
  --g-700:#12694A;
  --g-600:#17855C;
  --g-500:#1E9E6E;
  --g-400:#34B47F;
  --g-200:#A8E0C6;
  --g-100:#DCF2E7;
  --g-50 :#F1FAF5;

  /* neutrals */
  --ink   :#0A0F0D;
  --ink-70:#3A4642;
  --muted :#65756E;
  --line  :#E5EBE8;
  --paper :#FFFFFF;
  --paper-2:#FBFDFC;

  --radius:20px;
  --radius-sm:12px;

  --shadow-sm : 0 1px 2px rgba(10,15,13,.04), 0 4px 14px rgba(10,15,13,.04);
  --shadow-md : 0 2px 6px rgba(10,15,13,.05), 0 18px 44px -18px rgba(10,15,13,.14);
  --shadow-g  : 0 20px 50px -22px rgba(23,133,92,.42);

  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --maxw:1180px;
  --pad:clamp(20px,5vw,56px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

::selection{ background:var(--g-200); color:var(--g-950); }

/* ─────────── ambient background ─────────── */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.blob{
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); opacity:.5;
  will-change:transform;
}
.blob-1{
  width:52vw; height:52vw; top:-16vw; left:-10vw;
  background:radial-gradient(circle at 30% 30%, #BFEBD6, rgba(191,235,214,0) 70%);
  animation:drift-a 22s var(--ease) infinite alternate;
}
.blob-2{
  width:46vw; height:46vw; top:26vh; right:-14vw;
  background:radial-gradient(circle at 60% 40%, #D9F3E6, rgba(217,243,230,0) 70%);
  animation:drift-b 27s var(--ease) infinite alternate;
}
.blob-3{
  width:40vw; height:40vw; bottom:-12vw; left:22vw;
  background:radial-gradient(circle at 50% 50%, #E7F7EF, rgba(231,247,239,0) 70%);
  animation:drift-c 32s var(--ease) infinite alternate;
}
@keyframes drift-a{ to{ transform:translate3d(6vw,7vh,0) scale(1.12) } }
@keyframes drift-b{ to{ transform:translate3d(-8vw,-6vh,0) scale(1.08) } }
@keyframes drift-c{ to{ transform:translate3d(5vw,-8vh,0) scale(1.15) } }

.grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(10,15,13,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,15,13,.028) 1px, transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 22%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 22%, #000 25%, transparent 78%);
}

.spotlight{
  position:absolute; width:640px; height:640px; border-radius:50%;
  left:0; top:0; margin:-320px 0 0 -320px;
  background:radial-gradient(circle, rgba(30,158,110,.10), rgba(30,158,110,0) 65%);
  transform:translate3d(-999px,-999px,0);
  transition:opacity .5s ease; opacity:0;
  will-change:transform;
}
body.pointer-fine .spotlight{ opacity:1; }

/* ─────────── brand lockup (footer) — mark above, wordmark below ─────────── */
.brand-mark{ width:28px; height:28px; flex:none; }
.brand-type{
  display:block; line-height:1;
  font-weight:900; font-size:14.5px; letter-spacing:-.04em;
}
.brand-type b{ font-weight:900; color:var(--g-600); }

/* ─────────── stage / layout ─────────── */
.stage{ position:relative; z-index:1; }
.hero,.ventures,.kitchen,.foot,.ticker{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
}

/* ─────────── hero ─────────── */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding-top:clamp(72px,10vh,110px); padding-bottom:56px;
}

/* hero lockup: mark above, "Picspo Labs" below */
.hero-lockup{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,1.7vh,18px);
  margin-bottom:clamp(24px,3.6vh,38px);
  will-change:transform;
  animation:markFloat 7s ease-in-out 1.8s infinite;
}
.hero-lockup-mark{
  width:clamp(62px,7.6vw,90px); height:clamp(62px,7.6vw,90px); flex:none;
}
.hero-lockup-type{
  font-size:clamp(1.32rem,3vw,2.05rem);
  font-weight:900; letter-spacing:-.045em; line-height:1;
  animation:fadeUp .9s var(--ease-out) .62s backwards;
}
.hero-lockup-type b{ font-weight:900; color:var(--g-600); }
@keyframes markFloat{ 0%,100%{ translate:0 0 } 50%{ translate:0 -9px } }

/* master mark build-in */
.lm-sq{ fill:var(--ink); transform-box:fill-box; transform-origin:center; }
.lm-bar{ fill:var(--g-500); }
.hero-lockup-mark .lm-sq{ animation:sqIn .8s var(--ease-out) backwards; }
.hero-lockup-mark .lm-sq-a{ animation-delay:.15s; }
.hero-lockup-mark .lm-sq-b{ animation-delay:.28s; }
.hero-lockup-mark .lm-bar-wrap{
  transform-box:fill-box; transform-origin:0% 100%;   /* grows out of the bottom-left */
  animation:barIn .95s var(--ease-out) .42s backwards;
}
@keyframes sqIn{ from{ opacity:0; scale:.2; } to{ opacity:1; scale:1; } }
@keyframes barIn{ from{ opacity:0; scale:0; } to{ opacity:1; scale:1; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 22px;
  padding:7px 15px 7px 12px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-70);
}
.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--g-500); flex:none;
  box-shadow:0 0 0 0 rgba(30,158,110,.55);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(30,158,110,.5) }
  70%{ box-shadow:0 0 0 9px rgba(30,158,110,0) }
  100%{ box-shadow:0 0 0 0 rgba(30,158,110,0) }
}

.headline{
  margin:0 0 26px;
  font-size:clamp(2.9rem,8.4vw,6.6rem);
  font-weight:800; letter-spacing:-.045em; line-height:.98;
}
.headline .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.headline .word{
  display:inline-block;
  animation:wordUp .95s var(--ease-out) backwards;
}
.headline .line:nth-child(1) .word:nth-child(1){ animation-delay:.30s }
.headline .line:nth-child(1) .word:nth-child(2){ animation-delay:.38s }
.headline .line:nth-child(2) .word:nth-child(1){ animation-delay:.46s }
.headline .line:nth-child(2) .word:nth-child(2){ animation-delay:.52s }
.headline .line:nth-child(2) .word:nth-child(3){ animation-delay:.58s }
@keyframes wordUp{ from{ transform:translateY(105%) } to{ transform:translateY(0) } }

.headline .ital{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic; font-weight:400;
  letter-spacing:-.02em;
  background:linear-gradient(96deg,var(--g-700) 0%,var(--g-400) 48%,var(--g-700) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  padding-right:.06em;
  animation:wordUp .95s var(--ease-out) .58s backwards,
            shimmer 7s linear 1.6s infinite;
}
@keyframes shimmer{ to{ background-position:220% 0 } }

.lede{
  max-width:60ch; margin:0 0 34px;
  font-size:clamp(1rem,1.35vw,1.14rem);
  color:var(--muted);
}

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:56px; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  height:50px; padding:0 24px; border-radius:999px;
  font-size:15px; font-weight:650; letter-spacing:-.01em;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
             background .3s, color .3s, border-color .3s;
}
.btn svg{ width:17px; height:17px; transition:transform .35s var(--ease-out); }
.btn-primary{ background:var(--ink); color:#fff; box-shadow:var(--shadow-md); }
.btn-primary:hover{ background:var(--g-600); transform:translateY(-2px); box-shadow:var(--shadow-g); }
.btn-primary:hover svg{ transform:translateX(4px); }
.btn-ghost{ border:1px solid var(--line); background:rgba(255,255,255,.6); color:var(--ink-70); }
.btn-ghost:hover{ border-color:var(--g-200); background:var(--g-50); color:var(--g-700); transform:translateY(-2px); }

.stats{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(24px,6vw,72px);
  margin:0; padding:26px 0 0; border-top:1px solid var(--line);
  width:min(100%,720px);
}
.stat dt{
  display:flex; align-items:baseline; justify-content:center;
  font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; letter-spacing:-.045em;
  line-height:1.1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat dt em{ font-style:normal; color:var(--g-500); }
.stat dd{ margin:5px 0 0; font-size:13px; font-weight:500; color:var(--muted); }

/* ─────────── ticker ─────────── */
.ticker{
  max-width:none; padding:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.55);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ticker-track{
  display:flex; align-items:center; gap:34px; width:max-content;
  padding:15px 0;
  animation:marquee 34s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{
  font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-70); white-space:nowrap;
}
.ticker-track i{ width:5px; height:5px; border-radius:50%; background:var(--g-400); flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ─────────── ventures ─────────── */
.ventures{ padding-top:clamp(76px,11vw,132px); padding-bottom:clamp(60px,8vw,96px); }

.section-head{
  max-width:830px;
  margin:0 auto clamp(44px,6vw,66px);
  text-align:center;
}
.section-kicker{
  display:inline-flex; align-items:center; gap:11px;
  margin:0 0 18px;
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--g-600);
}
.section-kicker::before,
.section-kicker::after{
  content:''; width:26px; height:1px; background:var(--g-200);
}
.section-head h2{
  margin:0 0 14px;
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  font-size:clamp(2.1rem,5.2vw,3.5rem);
  line-height:1.08; letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
}
.section-head h2 em{
  display:block;              /* break between the two sentences, never inside one */
  font-style:italic;
  background:linear-gradient(96deg,var(--g-700) 0%,var(--g-400) 50%,var(--g-700) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 7s linear infinite;
}
.section-sub{
  max-width:50ch; margin:0 auto;
  color:var(--muted); font-size:1.02rem;
}

.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
}

.card{
  position:relative; display:flex; flex-direction:column;
  padding:26px 26px 24px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(251,253,252,.86));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s;
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(420px 200px at var(--cx,50%) 0%, rgba(30,158,110,.09), transparent 68%);
  opacity:0; transition:opacity .45s var(--ease);
  pointer-events:none;
}
.card::after{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--g-400),var(--g-600));
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--g-200);
  box-shadow:0 2px 8px rgba(10,15,13,.05), 0 30px 60px -28px rgba(23,133,92,.45);
}
.card:hover::before{ opacity:1; }
.card:hover::after{ transform:scaleX(1); }

.card-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.card-mark{
  width:46px; height:46px; border-radius:13px; flex:none;
  box-shadow:0 6px 18px -8px rgba(10,15,13,.4);
  transition:transform .5s var(--ease-out);
}
.card-mark-bordered{ box-shadow:0 6px 18px -8px rgba(10,15,13,.28), inset 0 0 0 1px var(--line); }
.card:hover .card-mark{ transform:scale(1.07) rotate(-3deg); }

.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.tag .dot{ width:6px; height:6px; border-radius:50%; }
.tag-live{ background:var(--g-100); color:var(--g-700); }
.tag-live .dot{ background:var(--g-500); animation:pulse 2.4s ease-out infinite; }
.tag-soon{ background:#F3F5F4; color:var(--muted); }
.tag-soon .dot{ background:#B4BFBA; }

.card h3{ margin:0 0 3px; font-size:1.3rem; font-weight:800; letter-spacing:-.03em; }
.card-sub{ margin:0 0 13px; font-size:13.5px; font-weight:600; color:var(--g-600); }
.card-body{ margin:0 0 22px; font-size:14.5px; color:var(--muted); flex:1; }
.card-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:650; color:var(--ink);
}
.card-link svg{ width:14px; height:14px; transition:transform .4s var(--ease-out); }
.card:hover .card-link svg{ transform:translate(3px,-3px); }
.card-link.muted{ color:var(--muted); font-weight:500; }

/* ─────────── kitchen ─────────── */
.kitchen{ padding-block:clamp(24px,5vw,56px) clamp(72px,10vw,120px); }
.kitchen-inner{
  position:relative; overflow:hidden;
  padding:clamp(34px,5vw,62px);
  border-radius:28px;
  background:
    radial-gradient(900px 400px at 12% -10%, rgba(30,158,110,.32), transparent 60%),
    linear-gradient(150deg,#0B3D2C,#071F16 62%,#0A0F0D);
  color:#fff;
  box-shadow:0 40px 80px -40px rgba(6,42,30,.7);
}
.kitchen-inner::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 100% at 90% 0%, #000, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 90% 0%, #000, transparent 72%);
  pointer-events:none;
}
.kitchen-inner > *{ position:relative; z-index:1; }

.eyebrow-dark{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
}

.kitchen blockquote{
  margin:0 0 34px; max-width:26ch;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.6rem,3.6vw,2.7rem);
  font-weight:400; line-height:1.18; letter-spacing:-.02em;
}
.ethos{
  display:grid; gap:16px; margin:0; padding:0; list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  padding-top:30px; border-top:1px solid rgba(255,255,255,.13);
}
.ethos li{ font-size:14.5px; color:rgba(255,255,255,.64); line-height:1.55; }
.ethos b{ display:block; color:#fff; font-weight:700; margin-bottom:3px; letter-spacing:-.01em; }

/* ─────────── footer ─────────── */
.foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:20px;
  padding-block:30px 40px;
  border-top:1px solid var(--line);
}
.foot-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.foot-brand .brand-mark{ width:26px; height:26px; }
.foot-slogan{
  margin:0; font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:1.05rem; color:var(--g-700);
}
.foot-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; font-size:13px; color:var(--muted); }
.foot-meta a{ font-weight:600; color:var(--ink-70); transition:color .25s; }
.foot-meta a:hover{ color:var(--g-600); }

/* ─────────── reveal ─────────── */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--d,0s);
}
.reveal.is-in{ opacity:1; transform:none; }
/* hero reveals fire on load, not on scroll */
.hero .reveal{ opacity:0; animation:fadeUp .9s var(--ease-out) var(--d,0s) forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }

/* ─────────── responsive ─────────── */
@media (max-width:720px){
  .hero{ padding-top:64px; }
  .hero-lockup{ gap:11px; }
  .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .stat dt{ font-size:clamp(1.3rem,5.6vw,1.9rem); }
  .stat dd{ font-size:11.5px; line-height:1.35; }
  .foot{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.hero .reveal{ opacity:1 !important; transform:none !important; }
  .headline .word{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════
   Picspo Labs — constellation hero
   The web of venture nodes and artwork tiles that sits behind the
   centred hero core, in the same white/green theme as everything above.
   Appended after the base theme; adds and overrides the hero only.
   ═══════════════════════════════════════════════════════════ */

/* ── full-bleed stage that holds the web behind the centred core ── */
.hero-stage{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
/* fade the web out toward the frame so it never fights the edges */
.hero-stage::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 86% 76% at 50% 50%, rgba(255,255,255,0) 62%, #fff 100%);
  opacity:.5;
}

/* the core sits above the web; only its actual content takes the pointer,
   so nodes tucked just under its (much wider) box stay hoverable */
.hero-stage > .hero{
  position:relative; z-index:3;
  max-width:820px;
  pointer-events:none;
}
.hero-stage > .hero > *{ pointer-events:auto; }

/* the web needs room, so the core runs smaller here than on the first page */
.hero-stage .headline{ font-size:clamp(1.95rem,4.4vw,3.4rem); }
.hero-stage .lede{ max-width:50ch; margin-bottom:30px; }
.hero-stage .cta-row{ margin-bottom:46px; }
/* fixed 3-up: the default flex row wraps at this width and the orphaned
   third stat drops straight into the bottom of the constellation */
.hero-stage .stats{
  width:min(100%,620px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,26px);
}
.hero-stage .hero-lockup-mark{ width:clamp(54px,6vw,72px); height:clamp(54px,6vw,72px); }
.hero-stage .hero-lockup-type{ font-size:clamp(1.2rem,2.5vw,1.72rem); }

/* the faint background grid competes with the wires — drop it here */
.grid-lines{ display:none; }

/* ── wires ──
   The svg is viewBox="0 0 100 100" with preserveAspectRatio="none", so one
   user unit === 1% of the stage on each axis and the line ends land exactly
   on the node centres at any size. non-scaling-stroke keeps them hairline
   through that deliberately non-uniform scale. */
.cons-field{
  position:absolute; inset:0; z-index:1;
  translate:var(--fx,0) var(--fy,0);
  transition:translate .9s var(--ease-out);
  will-change:translate;
}
.wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wires line{
  stroke:#BCCCC4; stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:wireDraw 1.5s var(--ease-out) var(--wd,0s) forwards;
  transition:stroke .35s ease, stroke-width .35s ease;
}
.wires line.hot{ stroke:var(--g-400); stroke-width:1.6; }
@keyframes wireDraw{ to{ stroke-dashoffset:0 } }

/* ── nodes ── */
.nodes{ position:absolute; inset:0; }
.node{
  position:absolute;
  transform:translate(-50%,-50%);
  translate:var(--tx,0) var(--ty,0);
  transition:translate .8s var(--ease-out);
  will-change:translate;
}
.node-in{
  opacity:0;
  animation:nodeIn .9s var(--ease-out) var(--in,0s) forwards,
            bob var(--dur,9s) ease-in-out var(--dly,0s) infinite;
}
@keyframes nodeIn{ from{ opacity:0; scale:.86 } to{ opacity:1; scale:1 } }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(var(--amp,-8px)) } }

/* Once the intro has played, pin the rest state in plain CSS and drop the
   intro animations — a later style recalc (resize, DPI change) would
   otherwise restart them and blank the whole web out. */
.cons-field.settled .wires line{ stroke-dashoffset:0; animation:none; }
.cons-field.settled .node-in{
  opacity:1; scale:1;
  animation:bob var(--dur,9s) ease-in-out var(--dly,0s) infinite;
}

/* venture label — the first page's sans voice, not the second page's serif */
.node-label{ width:172px; text-align:center; cursor:default; }
.node-label.linked{ cursor:pointer; }
.node-label h2{
  margin:0;
  font-size:clamp(1.02rem,1.35vw,1.28rem);
  font-weight:800; letter-spacing:-.035em; line-height:1.1;
  color:var(--ink-70);
  transition:color .35s var(--ease);
}
.node-label p{
  margin:6px 0 0;
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#9AA6A0;
  transition:color .35s var(--ease);
}
.node-label:hover h2{ color:var(--ink); }
.node-label:hover p{ color:var(--g-600); }

/* venture mark tile */
.node-mark{
  border-radius:13px; overflow:hidden;
  box-shadow:0 8px 22px -12px rgba(10,15,13,.5);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.node-mark svg{ width:100%; height:100%; }
.node-mark:hover{ transform:scale(1.12); box-shadow:0 14px 32px -12px rgba(23,133,92,.55); }

/* decorative tiles */
.node-deco{
  border-radius:4px; overflow:hidden;
  box-shadow:0 6px 18px -14px rgba(10,15,13,.5);
}
.deco-1{ background:linear-gradient(135deg,var(--g-600) 0%,var(--g-400) 100%); }
.deco-2{
  background:var(--ink);
  background-image:radial-gradient(circle, rgba(52,180,127,.85) 1.1px, transparent 1.2px);
  background-size:7px 7px;
}
.deco-3{
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line), 0 6px 18px -14px rgba(10,15,13,.45);
  background-image:linear-gradient(115deg, transparent 46%, var(--g-400) 46%, var(--g-400) 54%, transparent 54%);
}
.deco-4{
  background:linear-gradient(158deg,var(--g-200) 0%,var(--g-200) 47%,#fff 47%,#fff 100%);
  box-shadow:inset 0 0 0 1px var(--line), 0 6px 18px -14px rgba(10,15,13,.45);
}
.deco-5{ background:linear-gradient(180deg,var(--g-900),var(--g-600)); }
.deco-6{
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line);
  background-image:repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 6px);
}

/* ── small screens: the web is too dense, show a mark row instead ── */
.mini-marks{ display:none; }

@media (max-width:900px){
  .cons-field{ display:none; }
  .hero-stage::after{ display:none; }
  .hero-stage > .hero{ max-width:none; }
  .hero-stage .headline{ font-size:clamp(2.4rem,8.4vw,3.4rem); }
  .mini-marks{
    display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
    margin-top:40px; padding-top:30px; border-top:1px solid var(--line);
    animation:fadeUp .9s var(--ease-out) .9s backwards;
  }
  .mini-marks svg{
    width:44px; height:44px; border-radius:12px;
    box-shadow:0 6px 16px -10px rgba(10,15,13,.5);
  }
}

@media (prefers-reduced-motion:reduce){
  .node-in{ opacity:1 !important; }
  .wires line{ stroke-dashoffset:0 !important; }
}