/* ============================================================
   AETHILM — holding company site styles
   Warm-dark, monochrome, heavily rounded. Film-grain render
   overlay (assets/bg-render.png) over black. Built on tokens
   in colors_and_type.css.
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
body { margin: 0; background: var(--black); overflow-x: hidden; }
/* hide the scrollbar entirely (still scrollable) */
::-webkit-scrollbar { width: 0; height: 0; display: none; }
::selection { background: var(--paper); color: var(--on-paper); }

/* ---- Animated shader render (Paper Shaders "Smoke Ring") ---- */
.shader-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; overflow: hidden;
  background: #000 radial-gradient(120% 90% at 30% 10%, #1a1714 0%, #0a0908 42%, #000 100%); }
.shader-bg canvas { display: block; width: 100% !important; height: 100% !important; filter: blur(28px); transform: scale(1.18); transform-origin: center; }

/* ---- Film-grain texture over the shader ---- */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("assets/bg-render.png");
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: 0.06;
  mix-blend-mode: overlay;
}
/* CSS fallback depth if WebGL is unavailable */
.glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(216,199,174,0.08), transparent 55%),
    radial-gradient(90% 60% at 50% 110%, rgba(192,107,75,0.05), transparent 60%);
}
main, .nav-outer { position: relative; z-index: 1; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: var(--space-8) 0; }
#companies { padding-top: var(--space-7); padding-bottom: 0; }
#contact { padding-top: var(--space-6); padding-bottom: var(--space-5); }
#approach { padding-top: var(--space-6); padding-bottom: var(--space-5); position: relative; overflow: hidden; }

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-alt); font-size: 12px; font-weight: 500;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg2);
  background: var(--fill-1); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: var(--radius-pill);
}
.eyebrow-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sand); }

.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: var(--space-7); }
.section-head.center { align-items: center; text-align: center; }
.section-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; letter-spacing: var(--tracking-tight); color: var(--fg1); }

/* scroll-linked text-selection highlight */
.section-title.hl { position: relative; display: inline-block; }
.section-title.hl .hl-base { color: var(--fg1); }
.section-title.hl .hl-fill {
  position: absolute; inset: 0; color: var(--on-paper); background: var(--cream);
  border-radius: 2px;
  clip-path: inset(-0.08em calc(100% - var(--p, 0%) * 1.05) -0.08em -0.07em);
  pointer-events: none;
}
.section-sub { max-width: 540px; color: var(--fg2); font-size: var(--text-md); line-height: 1.55; }

/* ---- Buttons ---- */
.btn { font-family: var(--font-body); font-weight: 600; font-size: 14px; border-radius: var(--radius-pill);
  padding: 14px 26px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast); white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn-paper { background: var(--paper); color: var(--on-paper); }
.btn-paper:hover { background: var(--paper-dim); }
.btn-ghost { background: var(--fill-1); color: var(--fg1); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--fill-2); }
.btn-text { background: transparent; color: var(--fg1); padding: 8px 4px; }
.btn-text .u { border-bottom: 1px solid var(--fg3); padding-bottom: 2px; transition: border-color var(--dur-fast); }
.btn-text:hover .u { border-color: var(--fg1); }
.btn .ic { width: 15px; height: 15px; }

/* ---- Nav (logo only) — sits ABOVE the page gradual-blur overlays ---- */
.nav-outer { position: fixed; top: 20px; left: 0; right: 0; z-index: 2000; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav { pointer-events: auto; display: flex; align-items: center; justify-content: center;
  background: rgba(13,13,12,0.62); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 11px 26px;
  box-shadow: var(--shadow-md), var(--ring-hi); }
.nav-logo { width: 172px; height: 30px; display: block; cursor: pointer; }
.shiny-text { display: inline-block; }
.shiny-mask { display: block; width: 100%; height: 100%; }
@keyframes shiny-sweep { from { background-position: 150% center; } to { background-position: -50% center; } }
.paint-container { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---- Hero (left-aligned statement + CardSwap) ---- */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 130px 24px 90px; position: relative; overflow: visible; }
.hero-loop { display: none; }
.logoloop-band { position: relative; width: 100%; overflow: hidden; padding: var(--space-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logoloop-band .logoloop {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.hero-corner-mark { position: absolute; top: -190px; right: -170px; width: 640px; max-width: 72vw; opacity: 0.2; pointer-events: none; z-index: 0; user-select: none; }
.hero-grid { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 48px; position: relative; z-index: 1; }
.hero-copy { text-align: left; display: flex; flex-direction: column; align-items: flex-start; position: relative; min-width: 0; }
.hero-blob { position: absolute; top: 30%; left: -28%; width: 460px; height: 460px; transform: translateY(-50%); z-index: -1; opacity: 0.55; pointer-events: none; }
.metaballs-container { position: relative; width: 100%; height: 100%; }
@media (max-width: 860px){ .hero-blob { left: -10%; top: 26%; width: 320px; height: 320px; opacity: 0.4; } }
.hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.6vw, 84px); line-height: 0.98; letter-spacing: -0.038em; color: var(--fg1); max-width: 13ch; text-align: left; }
.hero h1 .dim { color: var(--fg3); }
.hero-sub { color: var(--fg2); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; max-width: 480px; margin-top: 28px; text-align: left; }
.hero-slogan { display: inline-flex; align-items: center; gap: 16px; margin-top: 34px; font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.01em; color: var(--cream); }
.hero-slogan::before { content: ""; width: 28px; height: 1px; background: var(--line-strong); }
.hero-ctas { display: flex; gap: 12px; margin-top: 38px; flex-wrap: wrap; justify-content: flex-start; }
.hero-scroll { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; color: var(--fg3); font-family: var(--font-alt); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.hero-scroll .ic { width: 14px; height: 14px; animation: bob 1.8s var(--ease-soft) infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ---- Hero CardSwap ---- */
.hero-cards { position: relative; height: 540px; }
.card-swap-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-style: preserve-3d; perspective: 1200px; }
.card-swap-container .card { position: absolute; top: 50%; left: 50%; border-radius: var(--radius-xl); border: 1px solid var(--line-strong); background: var(--surface-2); box-shadow: var(--shadow-lg), var(--ring-hi); backface-visibility: hidden; will-change: transform; }
.venture-swap-card { padding: 30px 34px; display: flex; flex-direction: column; }
.vsc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vsc-sector { font-family: var(--font-alt); font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg3); }
.vsc-status { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; color: var(--fg2); padding: 4px 11px; border-radius: var(--radius-pill); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 6px; }
.vsc-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg3); }
.vsc-status.live::before { background: var(--success); box-shadow: 0 0 0 3px rgba(138,154,107,0.18); }
.vsc-status.building::before { background: var(--ochre); }
.vsc-name { font-family: var(--font-display); font-weight: 500; font-size: 42px; letter-spacing: -0.025em; color: var(--fg1); margin-top: auto; }
.vsc-logo { height: 38px; width: auto; max-width: 60%; object-fit: contain; object-position: left; margin-top: auto; margin-bottom: 6px; opacity: 0.96; }
.vsc-logo-futz { height: 64px; max-width: 75%; }
.vsc-url { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; color: var(--fg3); margin-top: 6px; }
.vsc-url .ic { width: 14px; height: 14px; }

/* ---- Ventures index (the "different approach") ---- */
.ventures-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 28px; flex-wrap: wrap; }

/* ---- LogoLoop (React Bits — component CSS, verbatim) ---- */
.logoloop-band { max-width: 1180px; margin: 0 auto; padding: 0 24px var(--space-7); }
.logoloop {
  position: relative;
  --logoloop-gap: 32px;
  --logoloop-logoHeight: 28px;
  --logoloop-fadeColorAuto: #ffffff;
}
.logoloop--scale-hover {
  padding-top: calc(var(--logoloop-logoHeight) * 0.1);
  padding-bottom: calc(var(--logoloop-logoHeight) * 0.1);
}
.logoloop__track {
  display: flex;
  width: max-content;
  will-change: transform;
  user-select: none;
  position: relative;
  z-index: 0;
}
.logoloop__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.logoloop__item {
  flex: 0 0 auto;
  margin-right: var(--logoloop-gap);
  font-size: var(--logoloop-logoHeight);
  line-height: 1;
}
.logoloop__item:last-child { margin-right: var(--logoloop-gap); }
.logoloop__node { display: inline-flex; align-items: center; }
.logoloop__item img {
  height: var(--logoloop-logoHeight);
  width: auto;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.logoloop--scale-hover .logoloop__item { overflow: visible; }
.logoloop--scale-hover .logoloop__item:hover img,
.logoloop--scale-hover .logoloop__item:hover .logoloop__node {
  transform: scale(1.2);
  transform-origin: center center;
}
.logoloop--scale-hover .logoloop__node { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.logoloop__link { display: inline-flex; align-items: center; text-decoration: none; border-radius: 4px; transition: opacity 0.2s ease; }
.logoloop__link:hover { opacity: 0.8; }
.logoloop--fade::before,
.logoloop--fade::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 8%, 120px);
  pointer-events: none;
  z-index: 10;
}
.logoloop--fade::before {
  left: 0;
  background: linear-gradient(to right, var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%, rgba(0, 0, 0, 0) 100%);
}
.logoloop--fade::after {
  right: 0;
  background: linear-gradient(to left, var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%, rgba(0, 0, 0, 0) 100%);
}

/* ---- ScrollStack (Our companies) — base from React Bits, themed ---- */
.scroll-stack-scroller { position: relative; width: 100%; }
.scroll-stack-inner { max-width: 1080px; margin: 0 auto; padding: 7vh 24px 6rem; }
.scroll-stack-end { width: 100%; height: 1px; }
.ventures-stack .scroll-stack-card {
  position: relative; box-sizing: border-box; width: 100%; min-height: 20rem; overflow: hidden;
  margin: 30px 0; padding: 3rem 3.4rem; border-radius: 40px;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), var(--ring-hi);
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: 1fr auto; gap: 20px 24px;
}
.vstack-marks { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vstack-mark { position: absolute; opacity: 0.05; user-select: none; }
.vstack-idx, .vstack-main, .vstack-foot { position: relative; z-index: 1; }
.vstack-idx { font-family: var(--font-alt); font-size: 14px; color: var(--fg3); font-weight: 500; letter-spacing: 0.06em; }
.vstack-main { min-width: 0; }
.vstack-sector { font-family: var(--font-alt); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); }
.vstack-name { display: flex; align-items: center; gap: 16px; margin-top: 14px; font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.03em; color: var(--fg1); line-height: 1.0; }
.vstack-logo { height: clamp(34px, 4vw, 50px); width: auto; max-width: 260px; object-fit: contain; object-position: left; }
.venture-stack-card .vstack-logo[src*="futz"] { height: clamp(46px, 5.2vw, 68px); }
.vstack-blurb { color: var(--fg2); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; margin-top: 16px; max-width: 60ch; }
.vstack-foot { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.vstack-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 15px; color: var(--fg1); border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; transition: border-color var(--dur-fast); }
.vstack-link:hover { border-color: var(--fg1); }
.vstack-link .ic { width: 16px; height: 16px; }

.venture-card { border: 1px solid var(--line); border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface-1); box-shadow: var(--ring-hi); }
.venture { display: grid; grid-template-columns: 54px 1fr auto 56px; align-items: center; gap: 28px;
  padding: 30px 34px; cursor: pointer; text-decoration: none; transition: background var(--dur-base) var(--ease-out); position: relative; }
.venture + .venture { border-top: 1px solid var(--line); }
.venture:hover { background: var(--surface-2); }
.venture-idx { font-family: var(--font-alt); font-size: 13px; color: var(--fg3); font-weight: 500; letter-spacing: 0.04em; }
.venture-main { min-width: 0; }
.venture-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -0.025em; color: var(--fg1); line-height: 1.05; display: inline-flex; align-items: baseline; gap: 12px; transition: transform var(--dur-base) var(--ease-out); }
.venture:hover .venture-name { transform: translateX(6px); }
.venture-logo { height: 34px; width: auto; max-width: 220px; object-fit: contain; object-position: left; vertical-align: middle; }
.venture-url { font-family: var(--font-body); font-size: 13px; color: var(--fg3); font-weight: 400; letter-spacing: 0; }
.venture-blurb { color: var(--fg2); font-size: 14.5px; line-height: 1.5; margin-top: 8px; max-width: 52ch; }
.venture-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.venture-sector { font-family: var(--font-alt); font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg3); white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--fg2); padding: 5px 13px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--fill-1); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fg3); }
.status.live { color: var(--cream); } .status.live::before { background: var(--success); box-shadow: 0 0 0 3px rgba(138,154,107,0.18); }
.status.building::before { background: var(--ochre); box-shadow: 0 0 0 3px rgba(199,154,82,0.16); }
.status.acquired::before { background: var(--fg3); }
.venture-arrow { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--fg1); transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-base) var(--ease-out); }
.venture:hover .venture-arrow { background: var(--paper); color: var(--on-paper); border-color: transparent; transform: rotate(0deg) scale(1.04); }
.venture-arrow .ic { width: 19px; height: 19px; }

/* ---- Approach trio ---- */
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.principle { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-2xl); padding: 34px 32px; box-shadow: var(--ring-hi); display: flex; flex-direction: column; min-height: 260px; }
.principle-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--fill-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--sand); margin-bottom: 24px; }
.principle-ic .ic { width: 22px; height: 22px; }
.principle h3 { font-family: var(--font-display); font-weight: 500; font-size: 25px; letter-spacing: -0.02em; color: var(--fg1); margin-bottom: 13px; }
.principle p { color: var(--fg2); font-size: 14.5px; line-height: 1.6; }

/* ---- Stats band ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-box { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-2xl); padding: 36px 32px; box-shadow: var(--ring-hi); }
.stat-num { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 5vw, 68px); line-height: 1; letter-spacing: -0.04em; color: var(--fg1); }
.stat-lab { color: var(--fg2); font-size: 13.5px; margin-top: 10px; }

/* ---- Contact CTA ---- */
.cta { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-3xl); padding: 64px 48px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--ring-hi); }
.cta-mark { position: absolute; left: 50%; top: -32%; transform: translateX(-50%); width: 520px; opacity: 0.05; pointer-events: none; }
.cta h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 5vw, 60px); line-height: 1.03; letter-spacing: -0.03em; color: var(--fg1); max-width: 18ch; margin: 0 auto; position: relative; }
.cta p { color: var(--fg2); font-size: var(--text-md); margin: 22px auto 0; max-width: 460px; position: relative; }
.cta-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 34px; position: relative; flex-wrap: wrap; }

/* ---- Footer ---- */
.footer { margin-top: 0; padding: 0; position: relative; z-index: 1; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer-logo { height: 26px; margin-bottom: 18px; }
.footer-tag { color: var(--fg3); font-size: 14px; max-width: 300px; line-height: 1.6; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h5 { font-family: var(--font-alt); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); margin: 0 0 16px; }
.footer-col a { display: block; color: var(--fg2); font-size: 14px; padding: 5px 0; transition: color var(--dur-fast); cursor: pointer; }
.footer-col a:hover { color: var(--fg1); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.footer-bottom span { color: var(--fg3); font-size: 13px; }

/* huge metallic wordmark anchoring the footer — per-letter masks */
.footer-wordmark { width: 100%; max-width: 1400px; margin: 0 auto -1%; aspect-ratio: 3.72 / 1; pointer-events: none; display: flex; align-items: stretch; }
.footer-letter { height: 100%; }
.footer-letter .paint-container { width: 100%; height: 100%; }

/* ---- Card hover FX: spotlight (interior) + border glow (edge), brand-toned.
   Driven by the global --mouse-x/--mouse-y pointer handler in ui.jsx. ---- */
.principle, .stat-box { position: relative; }
.venture-stack-card, .venture-swap-card, .cta, .principle, .stat-box { --mouse-x: 50%; --mouse-y: 50%; }

/* interior spotlight — soft warm light following the cursor (additive) */
.venture-stack-card::after, .venture-swap-card::after, .cta::after,
.principle::after, .stat-box::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle 340px at var(--mouse-x) var(--mouse-y), rgba(239,231,216,0.20), transparent 60%);
  opacity: 0; transition: opacity 0.4s ease; z-index: 3; mix-blend-mode: plus-lighter;
}
.venture-stack-card:hover::after, .venture-swap-card:hover::after, .cta:hover::after,
.principle:hover::after, .stat-box:hover::after { opacity: 1; }

/* border glow — the card edge lights up near the cursor (clay→sand) */
.venture-stack-card::before, .venture-swap-card::before, .cta::before,
.principle::before, .stat-box::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1.5px;
  background: radial-gradient(circle 300px at var(--mouse-x) var(--mouse-y), var(--cream), #E4DAC4 48%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s ease; z-index: 4;
}
.venture-stack-card:hover::before, .venture-swap-card:hover::before, .cta:hover::before,
.principle:hover::before, .stat-box:hover::before { opacity: 0.9; }

/* outer warm bloom on hover (box-shadow isn't clipped by overflow:hidden) */
.venture-swap-card:hover, .cta:hover, .principle:hover, .stat-box:hover {
  box-shadow: var(--ring-hi), 0 0 32px rgba(232,221,196,0.16), 0 14px 44px rgba(0,0,0,0.4);
}
.ventures-stack .scroll-stack-card:hover {
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), var(--ring-hi), 0 0 34px rgba(232,221,196,0.16);
}

/* ---- ScrollReveal (word-by-word reveal) — inherits host text styling ---- */
.scroll-reveal { margin: 0; }
.scroll-reveal-text { font: inherit; letter-spacing: inherit; color: inherit; }
.scroll-reveal .word { display: inline-block; will-change: opacity, filter; }

/* ---- ScrollFloat (char float-in) — inherits host text styling ---- */
.scroll-float { overflow: hidden; margin: 0; }
.scroll-float-text { font: inherit; letter-spacing: inherit; color: inherit; display: inline-block; }
.scroll-float .char { display: inline-block; }

/* ---- BlobCursor (white gooey cursor trail, fixed, click-through).
   Sits ABOVE card surfaces and uses `mix-blend-mode: difference`, so where it
   passes over white-text buttons their colours invert smoothly (the blob moves,
   the inversion follows) — content stays readable, never hidden. Nav and the
   page blur overlays sit above it via their own higher z-index. ---- */
.blob-cursor { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60 !important; mix-blend-mode: difference; }
.blob-main { pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; background: transparent; }
.blob-cursor .blob { position: absolute; top: 0; left: 0; will-change: transform; transform: translate(-50%, -50%); }
.blob-cursor .inner-dot { position: absolute; }
/* keep content in a normal flow; the blob blends over it via mix-blend-mode */
.btn, .filter, .nav-link, .proj-link { position: relative; }
@media (hover: none) { .blob-cursor { display: none; } }

/* ---- reveal-on-scroll (fail-safe: rests visible) ---- */
.reveal { opacity: 1; transform: none; }
.reveal.primed { opacity: 0; transform: translateY(18px); }
.reveal.primed.in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }

/* ---- responsive ---- */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .hero-corner-mark { width: 360px; top: -110px; right: -130px; opacity: 0.14; }
  .hero-copy { align-items: flex-start; }
  .hero-cards { height: 360px; order: 2; }
}
@media (max-width: 860px) {
  .approach-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .venture { grid-template-columns: 1fr auto; gap: 16px; padding: 24px 22px; }
  .venture-idx { display: none; }
  .venture-meta { display: none; }
  .footer-top { flex-direction: column; }
  .ventures-head { flex-direction: column; align-items: flex-start; }
}

/* ---- Phones ---- */
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  .section { padding: var(--space-7) 0; }
  #companies { padding-top: var(--space-6); }

  /* nav: shrink logo + pill so it never overflows narrow screens */
  .nav-outer { top: 12px; padding: 0 12px; }
  .nav { padding: 9px 18px; }
  .nav-logo { width: 134px; height: 24px; }

  /* hero: tighter top offset, comfortable type, full-width CTAs.
     Center everything on mobile so no text is flush against the edge. */
  .hero { min-height: auto; padding: 124px 20px 56px; }
  .hero-copy { align-items: center; text-align: center; }
  .hero h1 { font-size: clamp(38px, 12vw, 52px); max-width: 16ch; text-align: center; }
  .hero-sub { font-size: 16px; margin-top: 22px; max-width: none; text-align: center; }
  .hero-blob { left: 50%; top: 30%; transform: translate(-50%, -50%); width: 300px; height: 300px; opacity: 0.4; }
  .hero-corner-mark { width: 230px; top: -70px; right: -80px; opacity: 0.12; }
  .hero-ctas { gap: 10px; margin-top: 30px; width: 100%; }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .hero-slogan { margin-top: 28px; font-size: 18px; }

  /* centered section headers — never flush-left on mobile */
  .section-head { align-items: center; text-align: center; }
  .ventures-head { align-items: center; text-align: center; }
  .ventures-head .section-sub { text-align: center !important; }

  /* stats single column on the smallest screens */
  .stats { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .stat-box { padding: 26px 24px; text-align: center; }

  /* venture cards: compact horizontal layout on mobile — drop the index
     column, tighter padding, and breathing room via the inner gutter.
     Reduce the big gap between the "Our companies" header and the cards. */
  #companies { padding-left: 0; padding-right: 0; }
  .ventures-head { padding: 0 20px; margin-bottom: 4px; }
  .scroll-stack-inner { padding: 0 18px 2rem; }
  .ventures-stack .scroll-stack-card {
    width: auto; margin: 0 0 16px !important; padding: 22px 20px; border-radius: 22px; min-height: 0;
    grid-template-columns: 1fr; grid-template-rows: auto; gap: 12px;
  }
  .vstack-idx { display: none; }
  .vstack-foot { grid-column: 1; }
  .vstack-name { font-size: clamp(26px, 7.5vw, 36px); gap: 10px; margin-top: 8px; }
  .vstack-blurb { font-size: 14px; margin-top: 10px; }
  .vstack-logo { max-width: 170px; }

  /* hero CardSwap: hidden on mobile */
  .hero-cards { display: none; }

  /* hero CardSwap cards: tighter padding */
  .venture-swap-card { padding: 22px 22px; }
  .vsc-name { font-size: 32px; }

  /* approach + stats cards: more compact, tighter icon→text gap */
  .principle { padding: 24px 22px; min-height: 0; }
  .principle-ic { margin-bottom: 14px; }
  .principle h3 { margin-bottom: 9px; }
  .cta { padding: 40px 22px; }

  /* hero cards: centered in their column, no edge hacks */
  .hero-cards .card-swap-container { left: 50%; right: auto; transform: translate(-50%, -50%); }

  /* contact CTA */
  .cta { padding: 44px 24px; border-radius: var(--radius-2xl); }
  .cta-ctas { flex-direction: column; }
  .cta-ctas .btn { width: 100%; justify-content: center; }

  /* logo marquee band */
  .logoloop-band { padding: var(--space-5) 0; }
  .logoloop-band .logoloop { --logoloop-logoHeight: 44px; --logoloop-gap: 34px; }

  /* lighten GPU load on phones: hide the cursor blob entirely */
  .blob-cursor { display: none; }
}

/* Coarse-pointer (touch) devices: no cursor blob, no hover-only affordances */
@media (pointer: coarse) {
  .blob-cursor { display: none; }
}