/* =====================================================================
   Carrion landing page - layout & components.
   Brand tokens come from global.css (in this folder). This file only adds layout.
   Icons are recolored via CSS mask (background-color = currentColor).
   ===================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: rgb(var(--background)); color: rgb(var(--foreground));
  font-family: var(--font-body); line-height: var(--leading-normal); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: min(1180px, 92vw); margin-inline: auto; }
section { position: relative; }

/* ---- Recolorable mask icon ---- */
.ico { display: inline-block; width: 28px; height: 28px;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
          mask: var(--ic) center / contain no-repeat; }
.ico.lg { width: 40px; height: 40px; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body);
  font-weight: var(--weight-semibold); font-size: var(--text-sm); border-radius: var(--radius-md);
  padding: 12px 22px; border: 1px solid transparent; cursor: pointer; transition: .15s; white-space: nowrap; }
.btn-primary { background: var(--color-accent-500); color: #fff; }
.btn-primary:hover { background: var(--color-accent-400); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { border-color: var(--color-accent-400); color: var(--color-accent-300); }
.btn-dark { background: var(--color-primary-700); color: #fff; }
.btn-dark:hover { background: var(--color-primary-600); }
.btn-outline { background: #fff; color: rgb(var(--foreground)); border-color: rgb(var(--border)); }
.btn-outline:hover { border-color: var(--color-primary-600); color: var(--color-primary-700); }

/* ---- Eyebrow / headings ---- */
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: var(--color-accent-500); margin: 0 0 14px; }
h1,h2,h3 { font-family: var(--font-display); letter-spacing: var(--tracking-tight); line-height: 1.08; margin: 0; }
.h-sec { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: var(--weight-bold); }
.lede { color: rgb(var(--muted-foreground)); font-size: var(--text-lg); max-width: 62ch; }

/* ---- Top nav (light) ---- */
.nav { position: sticky; top: 0; z-index: 50; background: rgb(var(--background) / .82);
  backdrop-filter: blur(12px); border-bottom: 1px solid rgb(var(--border)); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.nav .brand { display: flex; align-items: center; gap: 10px; color: rgb(var(--foreground)); font-family: var(--font-display);
  font-weight: var(--weight-bold); font-size: var(--text-xl); }
.nav .brand .mark { width: 30px; height: 30px; background: var(--color-accent-500);
  -webkit-mask: var(--ic-logo) center/contain no-repeat; mask: var(--ic-logo) center/contain no-repeat; }
.nav .links { display: flex; gap: 28px; color: rgb(var(--muted-foreground)); font-size: var(--text-sm); font-weight: 500; }
.nav .links a:hover { color: var(--color-primary-600); }
.nav .cta { display: flex; gap: 12px; align-items: center; }
@media (max-width: 880px){ .nav .links { display: none; } }

/* ---- Dark section base (rich gradients, lighter-accent glows) ---- */
.dark-sec { color: #fff; background:
  radial-gradient(720px 400px at 86% -6%, rgb(var(--accent) / .16), transparent 60%),
  radial-gradient(620px 420px at 4% 106%, rgb(var(--accent) / .10), transparent 58%),
  radial-gradient(900px 600px at 60% 40%, rgb(255 255 255 / .04), transparent 70%),
  linear-gradient(155deg, var(--color-primary-800) 0%, var(--color-primary-900) 58%, var(--color-primary-950) 100%); }
.dark-sec h2, .dark-sec h1, .dark-sec h3 { color: #fff; }
.jungle { color: #fff; background:
  radial-gradient(740px 470px at 84% -8%, rgb(var(--accent) / .22), transparent 60%),
  radial-gradient(660px 440px at 8% 110%, rgb(var(--accent) / .15), transparent 58%),
  radial-gradient(1000px 620px at 52% 46%, rgb(255 255 255 / .05), transparent 72%),
  linear-gradient(160deg, var(--color-primary-800) 0%, var(--color-primary-900) 55%, var(--color-primary-950) 100%); }
/* white secondary text on dark sections */
.jungle .lede, .dark-sec .lede, .cta-final .lede { color: rgba(255,255,255,.86); }

/* ---- Hero (light orbit network) ---- */
.hero { position: relative; overflow: hidden; color: rgb(var(--foreground));
  background:
    radial-gradient(38% 48% at 16% 24%, rgb(var(--accent) / .22), transparent 62%),
    radial-gradient(40% 52% at 84% 26%, rgb(var(--primary) / .18), transparent 62%),
    radial-gradient(46% 50% at 78% 88%, rgb(var(--accent) / .20), transparent 64%),
    radial-gradient(42% 48% at 20% 86%, rgb(var(--primary) / .16), transparent 64%),
    radial-gradient(58% 52% at 50% 42%, rgb(var(--secondary) / .85), transparent 72%),
    linear-gradient(180deg, rgb(var(--background)) 0%, rgb(var(--background)) 100%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero .wrap { position: relative; z-index: 3; padding: 92px 0 96px; min-height: 640px;
  display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.hero .pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .06em; padding: 6px 14px; border-radius: var(--radius-full);
  background: var(--color-primary-50); color: var(--color-primary-700); border: 1px solid var(--color-primary-200); }
.hero h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); font-weight: var(--weight-black); max-width: 17ch; margin: 20px auto 0; }
.hero h1 .g { background: linear-gradient(105deg, var(--color-accent-400) 0%, var(--color-accent-500) 45%, var(--color-primary-700) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero p.sub { color: rgb(var(--muted-foreground)); font-size: clamp(1.02rem,1.5vw,1.22rem); max-width: 52ch; margin: 18px auto 0; }
.hero .actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; justify-content: center; align-items: center; }
.hero .watch { display: inline-flex; align-items: center; gap: 9px; color: rgb(var(--foreground)); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.hero .watch .play { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgb(var(--border)); background: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.hero .watch .play::after { content: ""; width: 0; height: 0; margin-left: 2px;
  border-left: 8px solid var(--color-primary-600); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.hero .badges { display: flex; gap: 22px; margin-top: 38px; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero .badge { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: rgb(var(--muted-foreground)); }
.hero .badge .ico { width: 18px; height: 18px; color: var(--color-accent-500); }
/* powered-by (text) */
.hero .powered { display: flex; align-items: center; gap: 10px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.hero .powered .lbl { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em;
  text-transform: uppercase; color: rgb(var(--muted-foreground) / .85); }
.hero .powered .names { font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); color: rgb(var(--foreground) / .8); }
.hero .powered .names .x { color: rgb(var(--muted-foreground) / .7); font-weight: var(--weight-regular); margin: 0 2px; }

/* orbit rings + branch lines */
.hero .orbits { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; }
.hero .orbits svg { width: min(1180px, 98vw); height: 100%; overflow: visible; }
.hero .ring { fill: none; stroke: rgb(var(--primary) / .10); stroke-width: 1; }
.hero .branch { fill: none; stroke: rgb(var(--accent) / .32); stroke-width: 1.4; stroke-linecap: round; }
.hero .pulse { fill: none; stroke: var(--color-accent-300); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 4 120; filter: drop-shadow(0 0 4px rgb(var(--accent) / .9));
  animation: pulseFlow 1.4s linear infinite; }
@keyframes pulseFlow { from { stroke-dashoffset: 124; } to { stroke-dashoffset: 0; } }
.hero .pulse:nth-of-type(odd)  { animation-duration: 1.15s; }
.hero .pulse:nth-of-type(3n)   { animation-duration: 1.75s; animation-delay: -.5s; }
.hero .pulse:nth-of-type(3n+1) { animation-delay: -.9s; }
.hero .pulse:nth-of-type(4n)   { animation-delay: -.3s; }

/* floating data nodes */
.hero .nodes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero .node { position: absolute; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.85); border-radius: var(--radius-full);
  padding: 6px 13px 6px 6px; white-space: nowrap;
  box-shadow: 0 10px 26px rgb(var(--primary) / .12), 0 2px 6px rgb(var(--primary) / .06);
  font-family: var(--font-mono); font-size: 12px; color: rgb(var(--foreground)); }
.hero .node.solo { padding: 6px; }
.hero .node .ni { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, #ffffff, var(--color-accent-50)); color: var(--color-primary-700);
  box-shadow: inset 0 0 0 1px rgb(var(--primary) / .08); }
.hero .node .ni svg { width: 15px; height: 15px; }
.hero .node.green .ni { background: linear-gradient(145deg, var(--color-accent-400), var(--color-primary-700)); color: #fff;
  box-shadow: 0 4px 12px rgb(var(--accent) / .45); }
.hero .node.accent .ni { background: linear-gradient(145deg, var(--color-accent-300), var(--color-accent-500)); color: #fff;
  box-shadow: 0 4px 12px rgb(var(--accent) / .40); }
.hero .node .thumb { width: 28px; height: 28px; border-radius: 50%; flex: none; background-size: cover;
  background-position: center; box-shadow: inset 0 0 0 1px rgb(var(--primary) / .12); }
.hero .node .cnt { color: rgb(var(--muted-foreground)); }
@media (max-width: 980px){ .hero .nodes, .hero .orbits { display: none; } }

/* subtle floating-in-space motion */
@keyframes floatA { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%, calc(-50% - 10px)); } }
@keyframes floatB { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(calc(-50% + 8px), calc(-50% - 6px)); } }
@keyframes floatC { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(calc(-50% - 7px), calc(-50% + 9px)); } }
@keyframes flow { to { stroke-dashoffset: -28; } }
@keyframes breathe { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
.hero .node { animation: floatA 7s ease-in-out infinite; will-change: transform; }
.hero .node:nth-child(3n)   { animation-name: floatB; animation-duration: 8.5s; }
.hero .node:nth-child(3n+1) { animation-name: floatC; animation-duration: 9.6s; }
.hero .node:nth-child(odd)  { animation-delay: -2.4s; }
.hero .node:nth-child(4n)   { animation-delay: -4.1s; }
.hero .node:nth-child(5n)   { animation-delay: -1.3s; }
@media (prefers-reduced-motion: reduce) {
  .hero .node, .hero .branch, .hero .pulse { animation: none; }
}

/* ---- Hero variant: two columns (text left, visuals + gradients right) ---- */
.hero.split { background:
    radial-gradient(34% 46% at 80% 30%, rgb(var(--accent) / .30), transparent 60%),
    radial-gradient(34% 44% at 94% 64%, rgb(var(--primary) / .22), transparent 60%),
    radial-gradient(38% 46% at 62% 86%, rgb(var(--accent) / .24), transparent 62%),
    radial-gradient(26% 36% at 90% 12%, rgb(var(--primary) / .20), transparent 60%),
    radial-gradient(40% 50% at 76% 50%, rgb(var(--secondary) / .7), transparent 70%),
    linear-gradient(180deg, rgb(var(--background)) 0%, rgb(var(--background)) 100%); }
.hero.split .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 36px; align-items: center;
  text-align: left; padding: 78px 0 86px; min-height: 640px; }
.hero.split .col-text { max-width: 560px; align-items: flex-start; }
.hero.split h1, .hero.split p.sub { margin-left: 0; margin-right: 0; max-width: none; }
.hero.split .actions, .hero.split .badges, .hero.split .powered { justify-content: flex-start; }
.hero.split .col-visual { position: relative; height: 560px; }
.hero.split .col-visual .orbits, .hero.split .col-visual .nodes { position: absolute; inset: 0; }
.hero.split .orbits svg { width: 100%; height: 100%; }
@media (max-width: 980px){
  .hero.split .wrap { grid-template-columns: 1fr; text-align: center; }
  .hero.split .col-text { max-width: none; align-items: center; }
  .hero.split h1, .hero.split p.sub { margin-inline: auto; }
  .hero.split .actions, .hero.split .badges { justify-content: center; }
  .hero.split .col-visual { display: none; }
}

/* ---- Trust strip (light) ---- */
.trust { background: #fff; color: rgb(var(--muted-foreground)); border-block: 1px solid rgb(var(--border)); }
.trust .wrap { padding: 20px 0; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; }
.trust span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; }
.trust b { color: rgb(var(--foreground)); font-family: var(--font-display); }

/* ---- Generic padded section ---- */
.sec { padding: 96px 0; }
.sec-head { max-width: 720px; margin-bottom: 56px; }

/* ---- Problem stats ---- */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px; }
.stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-xl); padding: 28px; }
.stat .n { font-family: var(--font-display); font-weight: var(--weight-black); font-size: 2.6rem; color: var(--color-accent-300); }
.stat .l { color: rgba(255,255,255,.82); margin-top: 6px; font-size: var(--text-sm); }
@media (max-width:760px){ .stats { grid-template-columns: 1fr; } }

/* ---- Pillars ---- */
.pillars { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
@media (max-width:820px){ .pillars { grid-template-columns: 1fr; } }
.pillar { background: #fff; border: 1px solid rgb(var(--border)); border-radius: var(--radius-2xl);
  padding: 34px; box-shadow: var(--shadow-md); transition: .18s; }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); border-color: var(--color-accent-300); }
.pillar .badge { width: 60px; height: 60px; border-radius: var(--radius-lg); display: grid; place-items: center;
  background: var(--color-primary-50); color: var(--color-primary-700); margin-bottom: 22px; }
.pillar h3 { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: rgb(var(--foreground)); }
.pillar p { color: rgb(var(--muted-foreground)); margin: 12px 0 16px; }
.pillar ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pillar li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: rgb(var(--card-foreground)); }
.pillar li::before { content: ""; width: 16px; height: 16px; flex: none; margin-top: 2px;
  background: var(--color-accent-500);
  -webkit-mask: var(--ic-check) center/contain no-repeat; mask: var(--ic-check) center/contain no-repeat; }

/* ---- How it works: full-bleed cross-fading video stack ---- */
.how-video { position: relative; overflow: hidden; }
.how-video .bgvid-stack { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.how-video .bgvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease-in-out; }
.how-video .bgvid.show { opacity: 1; }
/* green theme shifts the blue clips toward brand green; blue theme leaves as-is */
.how-video .bgvid-stack { filter: hue-rotate(-66deg) saturate(1.05); }
.theme-blue .how-video .bgvid-stack { filter: none; }
.how-video .scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.64) 42%, rgba(0,0,0,.2) 74%, rgba(0,0,0,.48) 100%),
  linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 16%, transparent 84%, rgba(0,0,0,.4) 100%); }
.how-video > .wrap { position: relative; z-index: 2; }
.how-video .sec-head { max-width: 640px; }
.how-video .steps { max-width: 580px; }
@media (max-width: 760px){ .how-video .scrim { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72)); } }

/* ---- How it works ---- */
.flow { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
@media (max-width:900px){ .flow { grid-template-columns: 1fr; } }
.steps { display: grid; gap: 18px; }
.step { display: flex; gap: 18px; align-items: flex-start; }
.step .num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent-300);
  border: 1px solid rgb(var(--accent) / .4); border-radius: var(--radius-full); width: 34px; height: 34px;
  display: grid; place-items: center; flex: none; }
.step h4 { margin: 0 0 4px; font-family: var(--font-display); color: #fff; font-size: var(--text-lg); }
.step p { margin: 0; color: rgba(255,255,255,.82); font-size: var(--text-sm); }
.flow .visual { border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-xl); }

/* ---- Compare / why ---- */
.why { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 12px; }
@media (max-width:820px){ .why { grid-template-columns: 1fr; } }
.why .card { background: #fff; border: 1px solid rgb(var(--border)); border-radius: var(--radius-xl); padding: 28px; }
.why .card .ico { color: var(--color-primary-600); margin-bottom: 14px; }
.why .card h4 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 8px; color: rgb(var(--foreground)); }
.why .card p { margin: 0; color: rgb(var(--muted-foreground)); font-size: var(--text-sm); }

/* ---- Security ---- */
.sec-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 44px; }
@media (max-width:760px){ .sec-grid { grid-template-columns: 1fr; } }
.sec-item { display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 22px; }
.sec-item .ico { color: var(--color-accent-400); flex: none; }
.sec-item h4 { margin: 0 0 5px; font-family: var(--font-display); color: #fff; font-size: var(--text-base); }
.sec-item p { margin: 0; color: rgba(255,255,255,.66); font-size: var(--text-sm); }

/* ---- Case / proof ---- */
.case { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width:900px){ .case { grid-template-columns: 1fr; } }
.case .quote { font-family: var(--font-display); font-size: clamp(1.4rem,2.4vw,2rem); font-weight: var(--weight-semibold);
  line-height: 1.3; color: rgb(var(--foreground)); }
.case .who { margin-top: 18px; color: rgb(var(--muted-foreground)); font-size: var(--text-sm); }
.case .metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.case .metric { background: var(--color-primary-50); border: 1px solid var(--color-primary-100); border-radius: var(--radius-xl); padding: 24px; }
.case .metric .n { font-family: var(--font-display); font-weight: var(--weight-black); font-size: 2.2rem; color: var(--color-primary-700); }
.case .metric .l { color: var(--color-primary-800); font-size: var(--text-sm); margin-top: 4px; }

/* ---- FAQ ---- */
.faq { display: grid; gap: 14px; max-width: 820px; margin-inline: auto; }
.faq details { background: #fff; border: 1px solid rgb(var(--border)); border-radius: var(--radius-lg); padding: 6px 22px; }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: var(--weight-semibold);
  padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; color: rgb(var(--foreground)); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent-500); font-size: 1.4rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 0 0 18px; color: rgb(var(--muted-foreground)); font-size: var(--text-sm); }

/* ---- Final CTA ---- */
.cta-final { text-align: center; }
.cta-final .wrap { padding: 96px 0; }
.cta-final h2 { font-size: clamp(2rem,4vw,3.2rem); font-weight: var(--weight-black); max-width: 18ch; margin-inline: auto; }
.cta-final p { margin: 18px auto 30px; max-width: 56ch; }
.cta-final .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-final .fine { margin-top: 22px; font-family: var(--font-mono); font-size: var(--text-xs); color: rgba(255,255,255,.55); }

/* ---- Footer ---- */
footer { color: rgba(255,255,255,.6); padding: 56px 0 36px; font-size: var(--text-sm); background:
  radial-gradient(620px 320px at 82% 0%, rgb(var(--accent) / .12), transparent 60%),
  radial-gradient(520px 300px at 6% 100%, rgb(var(--accent) / .08), transparent 60%),
  var(--color-primary-950); }
footer .top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 28px; }
footer .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
footer .brand .mark { width: 26px; height: 26px; background: var(--color-accent-500);
  -webkit-mask: var(--ic-logo) center/contain no-repeat; mask: var(--ic-logo) center/contain no-repeat; }
footer .cols { display: flex; gap: 56px; flex-wrap: wrap; }
footer .col h5 { color: #fff; font-family: var(--font-display); margin: 0 0 12px; font-size: var(--text-sm); }
footer .col a { display: block; padding: 5px 0; color: rgba(255,255,255,.6); }
footer .col a:hover { color: var(--color-accent-300); }
footer .legal { margin-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4); }

/* ---- Blue theme: tint the green raster images toward blue ---- */
.theme-blue .hero .node .thumb { filter: hue-rotate(80deg) saturate(.85); }
.theme-blue .flow .visual img { filter: hue-rotate(80deg) saturate(.9); }