/* The studio: the component kit every page is built from.

   Ported from the original creators.autobricks.ai page, which is the reference for the
   whole site, with its pink/violet/sky gradient replaced by the brand's own red-to-blue
   (tokens.css). Motion rule: the hero owns it (aurora, grid, tilt, sheen, a node graph);
   below the fold there is reveal-on-scroll and hover, nothing else. base.css stops every
   animation under prefers-reduced-motion and studio.js checks the same query before it
   moves anything. */

/* ------------------------------------------------------------------ ground */

body {
  color: var(--txt);
  background: var(--ink);
  font-size: var(--fs-body);
}
h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); }
::selection { background: rgb(41 50 225 / 45%); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }

/* ----------------------------------------------------------- the backdrop

   Three colour fields drifting behind everything, a dot grid that fades out below the
   fold, and a spotlight that follows the cursor (studio.js). All fixed, all behind the
   page, none of it in the document's flow. */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--ink); }
.bg span {
  position: absolute;
  width: 62vw;
  height: 62vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  mix-blend-mode: screen;
  will-change: transform;
}
.bg .b1 { top: -22vw; left: -12vw; background: radial-gradient(circle, var(--red), transparent 62%); animation: drift1 26s ease-in-out infinite; }
.bg .b2 { top: 8vw; right: -18vw; background: radial-gradient(circle, var(--violet), transparent 62%); animation: drift2 32s ease-in-out infinite; }
.bg .b3 { bottom: -26vw; left: 18vw; background: radial-gradient(circle, var(--blue), transparent 62%); animation: drift3 30s ease-in-out infinite; }
@keyframes drift1 { 50% { transform: translate(8vw, 6vw) scale(1.18); } }
@keyframes drift2 { 50% { transform: translate(-7vw, 8vw) scale(1.12); } }
@keyframes drift3 { 50% { transform: translate(6vw, -7vw) scale(1.2); } }

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: radial-gradient(rgb(255 255 255 / 10%) 1px, transparent 1.4px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 78%);
  animation: gridpan 28s linear infinite;
}
@keyframes gridpan { to { background-position: 46px 92px; } }

.spot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(143 150 255 / 14%), transparent 60%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s;
}

/* Blur is the one expensive thing on this site. A phone gets two fields and no grid. */
@media (max-width: 749px) {
  .bg .b2, .bg-grid, .spot { display: none; }
  .bg span { width: 90vw; height: 90vw; filter: blur(60px); }
}

/* -------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(11 11 18 / 60%);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  transition: transform 0.25s ease;
}
.nav[data-hidden='true'] { transform: translateY(-100%); }
body[data-menu-open='true'] .nav { transform: none; }
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-h); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.logo img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 4px 16px rgb(0 0 0 / 45%), 0 0 24px rgb(225 37 27 / 25%); }
.wm { display: inline-flex; align-items: baseline; white-space: nowrap; }
.wm__a { color: #fff; }
.wm__b { background: var(--grad); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s linear infinite; }
.wm__s { margin: 0 3px; font-weight: 400; color: var(--mut2); }
.wm__i { color: var(--blue-l); }
.badge {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
  border: 1px solid var(--line2);
  border-radius: 999px;
}

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav > li > a:not(.btn) {
  font-size: 14px;
  font-weight: 600;
  color: var(--mut);
  transition: color 0.2s;
}
.site-nav > li > a:not(.btn):hover { color: var(--txt); }
.nav-toggle { display: none; }

/* Seven links and a button need about 1000px; below that the burger takes over. */
@media (max-width: 999px) {
  .nav-toggle {
    display: grid;
    gap: 5px;
    width: 40px;
    height: 40px;
    place-content: center;
    border: 1px solid var(--line2);
    border-radius: 10px;
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--txt); border-radius: 2px; }
  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px var(--gutter) 20px;
    background: rgb(11 11 18 / 96%);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .site-nav[data-open='true'] { display: flex; }
  .site-nav > li > a:not(.btn) { display: block; padding: 12px 4px; font-size: 16px; }
  .site-nav > li.site-nav__cta { margin-top: 8px; }
  .nav .badge { display: none; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 15px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s, background 0.2s;
  will-change: transform;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn--grad {
  color: #fff;
  background: var(--grad);
  background-size: 200% auto;
  animation: sheen 7s linear infinite;
  box-shadow: 0 10px 34px -8px rgb(225 37 27 / 55%);
}
.btn--grad:hover { box-shadow: 0 16px 46px -8px rgb(41 50 225 / 65%); }
.btn--ghost { color: var(--txt); background: rgb(255 255 255 / 4%); border: 1px solid var(--line2); }
.btn--ghost:hover { background: rgb(255 255 255 / 8%); }
.btn--sm { padding: 10px 16px; font-size: 14px; border-radius: 12px; }
/* The product button in the nav: the brand's red, solid. */
.btn--red { color: #fff; background: var(--red); box-shadow: 0 10px 30px -10px rgb(225 37 27 / 70%); }
.btn--red:hover { background: #f03328; box-shadow: 0 14px 36px -10px rgb(225 37 27 / 80%); }
/* A link to Hexcore, in the colour of where it goes. */
.btn--hx { color: var(--lime); border-color: rgb(170 255 0 / 35%); }
.btn--hx:hover { background: rgb(170 255 0 / 8%); }
.btn--hx svg { width: 15px; height: 15px; }
@keyframes sheen { to { background-position: 200% center; } }

/* ---------------------------------------------------------- small pieces */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mut);
  background: rgb(255 255 255 / 3%);
  border: 1px solid var(--line2);
  border-radius: 999px;
}
.pill .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: ping 2s ease-out infinite; }
.pill .pip--lime { background: var(--lime); animation: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(225 37 27 / 55%); } 100% { box-shadow: 0 0 0 11px rgb(225 37 27 / 0%); } }

.grad {
  background: var(--grad);
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 8s linear infinite;
}
.lead { max-width: 560px; margin-top: 22px; font-size: var(--fs-lead); line-height: 1.6; color: var(--mut); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.tag {
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
  background: rgb(255 255 255 / 2%);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.note { display: block; margin-top: 18px; font-size: 13px; color: var(--mut2); }
.note a, .lead a, .cell p a { color: var(--txt); text-decoration: underline; text-underline-offset: 0.2em; }

/* Section heads: pill, headline, one paragraph, centred. */
.head { max-width: 680px; margin: 0 auto 46px; text-align: center; }
.head h2 { margin-top: 14px; }
.head p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--mut); }
.head--left { margin-inline: 0; text-align: left; }

/* ------------------------------------------------------------------- hero */

.hero { position: relative; padding: clamp(48px, 7vw, 84px) 0 40px; overflow-x: clip; }   /* the floating thumbs poke past the gutter on a tablet */
.hero__grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 48px; align-items: center; }
.hero h1 { margin-top: 20px; }
/* A hero with no stage beside it (contact, build notes, legal) is centred: left-aligned
   copy over an empty right half reads as lopsided. */
.hero--solo { padding-bottom: 8px; text-align: center; }
.hero--solo .hero__grid { grid-template-columns: 1fr; }
.hero--solo .lead { max-width: 640px; margin-inline: auto; }
.hero--solo .actions, .hero--solo .tags { justify-content: center; }

/* The stage: a tilted window with a live graphic in it, and outputs floating around it. */
.stage { position: relative; }
.stage svg { width: 100%; height: auto; display: block; overflow: visible; }
.card3d {
  padding: 14px;
  border: 1px solid var(--line2);
  border-radius: 22px;
  background: linear-gradient(180deg, rgb(24 24 38 / 90%), rgb(12 12 20 / 92%));
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / 80%), inset 0 1px 0 rgb(255 255 255 / 6%);
  backdrop-filter: blur(6px);
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
  transition: transform 0.4s ease;
  will-change: transform;
}
.card3d img { width: 100%; height: auto; border-radius: 12px; }
.bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; }
.bar .d { width: 10px; height: 10px; border-radius: 50%; background: #2a2740; }
.bar .d.r { background: #ff5f56; } .bar .d.y { background: #ffbd2e; } .bar .d.g { background: #27c93f; }
.bar .tab { margin-left: 8px; padding: 3px 9px; font-size: 11px; font-weight: 700; color: var(--mut); border: 1px solid var(--line); border-radius: 6px; }
.bar .tab.on { color: #fff; background: rgb(255 255 255 / 6%); border-color: var(--line2); }
.bar .live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; color: var(--mut); }
.bar .live i { width: 7px; height: 7px; border-radius: 50%; background: #27c93f; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* Floating outputs. Real screenshot crops, never gradient rectangles. */
.thumb {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--line2);
  border-radius: 14px;
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 70%);
  background: var(--panel2);
  will-change: transform;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb::after {
  content: attr(data-l);
  position: absolute;
  left: 8px;
  bottom: 7px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgb(0 0 0 / 70%);
}
.thumb--1 { width: 128px; height: 84px; right: -30px; top: -26px; animation: floaty 7s ease-in-out infinite; }
.thumb--2 { width: 96px; height: 128px; left: -34px; bottom: 36px; animation: floaty 9s ease-in-out infinite 0.8s; }
.thumb--3 { width: 136px; height: 84px; right: -22px; bottom: -22px; animation: floaty 8s ease-in-out infinite 0.4s; }
@keyframes floaty { 50% { transform: translateY(-16px) rotate(1.4deg); } }

/* The node graphs, drawn inline in each hero. Shared strokes and fills. */
.graph .wire { fill: none; stroke: url(#wire); stroke-width: 2.4; opacity: 0.5; }
.graph .dash { fill: none; stroke: url(#wire); stroke-width: 2.4; stroke-dasharray: 6 10; stroke-linecap: round; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -16; } }
.graph .node { fill: #16151f; stroke: rgb(255 255 255 / 16%); }
.graph .node-h { fill: rgb(255 255 255 / 6%); }
.graph .node-h.red { fill: rgb(225 37 27 / 18%); }
.graph .node-h.violet { fill: rgb(106 58 217 / 22%); }
.graph .node-h.blue { fill: rgb(41 50 225 / 24%); }
.graph text { font-family: var(--font-h); font-weight: 700; font-size: 11px; fill: var(--txt); }
.graph text.small { font-family: var(--font); font-weight: 400; font-size: 9.5px; fill: rgb(243 243 246 / 66%); }
.graph text.meta { font-family: var(--font); font-weight: 700; font-size: 9px; fill: rgb(243 243 246 / 60%); }
.graph .pulse { fill: #fff; filter: url(#glow); }
.graph .fill { fill: url(#gfill); }
.graph .shimmer { fill: rgb(255 255 255 / 28%); }

/* ---------------------------------------------------------------- marquee */

.marq {
  position: relative;
  padding: 18px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marq + .marq { border-top: 0; }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: marq 34s linear infinite; }
.marq--rev .marquee__track { animation-direction: reverse; animation-duration: 42s; }
.marquee__track:hover { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(calc(-1 * var(--shift, 50%))); } }
.marquee__track > li {
  flex: none;
  padding: 8px 18px;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  color: var(--mut);
  background: rgb(255 255 255 / 2%);
  border: 1px solid var(--line2);
  border-radius: 999px;
}
.marquee__track > li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--grad);
}
/* A logo row rather than a pill row. */
.marq--logos .marquee__track > li { padding: 6px 10px; background: #fff; border-color: transparent; }
.marq--logos .marquee__track > li::before { display: none; }
.marq--logos .marquee__track img { width: 64px; height: 64px; object-fit: contain; }

/* ------------------------------------------------------------------ bento */

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cell {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(19 18 30 / 74%), rgb(11 10 20 / 74%));
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s, box-shadow 0.35s;
}
.cell:hover { transform: translateY(-6px); border-color: var(--line2); box-shadow: 0 30px 60px -28px rgb(106 58 217 / 50%); }
/* A gradient hairline that sweeps round the cell on hover. */
.cell::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: var(--radius);
  background: var(--grad);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s;
  animation: sheen 6s linear infinite;
  pointer-events: none;
}
.cell:hover::before { opacity: 0.9; }
.cell--wide { grid-column: span 3; }
.cell--full { grid-column: 1 / -1; }
.cell--half { grid-column: span 3; }
.cell--tall { grid-row: span 2; }
.cell--still:hover { transform: none; }
.cell h3 { margin-bottom: 7px; }
.cell > p, .cell__body > p { font-size: 14.5px; line-height: 1.58; color: var(--mut); }
.cell .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: var(--mut2); }
.cell .meta span { padding: 4px 9px; border: 1px solid var(--line); border-radius: 7px; }
.cell .list { margin-top: 12px; }
.cell .list li { position: relative; padding-left: 16px; margin-top: 7px; font-size: 14.5px; line-height: 1.5; color: var(--mut); }
.cell .list li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1.5px; background: var(--grad); }
.cell .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--font-h); font-size: 13px; font-weight: 700; color: var(--blue-l); }
.cell .more::after { content: '→'; transition: transform 0.2s; }
.cell:hover .more::after { transform: translateX(3px); }
/* A picture across the top of a cell, flush to its edges. */
.cell__shot { margin: -24px -24px 18px; border-bottom: 1px solid var(--line); }
.cell__shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.cell__shot--photo img { aspect-ratio: 16 / 10; object-position: center; }
/* A whole cell that is a link: the text is the affordance, the cell is the hit area. */
a.cell { display: flex; flex-direction: column; color: inherit; }

.ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  color: #fff;
  background: rgb(255 255 255 / 5%);
  border: 1px solid var(--line2);
  border-radius: 13px;
  transition: transform 0.35s;
}
.cell:hover .ico { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.ico svg { width: 23px; height: 23px; }
.ico--red { background: linear-gradient(135deg, rgb(225 37 27 / 30%), rgb(225 37 27 / 10%)); box-shadow: 0 0 26px -6px rgb(225 37 27 / 60%); }
.ico--violet { background: linear-gradient(135deg, rgb(106 58 217 / 30%), rgb(106 58 217 / 10%)); box-shadow: 0 0 26px -6px rgb(106 58 217 / 60%); }
.ico--blue { background: linear-gradient(135deg, rgb(41 50 225 / 30%), rgb(41 50 225 / 10%)); box-shadow: 0 0 26px -6px rgb(41 50 225 / 70%); }

/* A number that is the point of its cell. */
.cell .stat, .stat { font-family: var(--font-h); font-size: clamp(34px, 3.4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stat small { font-size: 0.45em; letter-spacing: 0; }

/* The steps strip: numbered gradient squares with arrows between. */
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--txt);
  background: rgb(255 255 255 / 3%);
  border: 1px solid var(--line2);
  border-radius: 10px;
}
.step b { display: grid; place-items: center; width: 18px; height: 18px; font-size: 11px; color: #fff; background: var(--grad); border-radius: 6px; }
.arr { color: var(--mut2); }

.wave { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: 14px; }
.wave i { flex: 1; border-radius: 3px; background: var(--grad); opacity: 0.85; animation: eq 1.1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: 0.15s; } .wave i:nth-child(3) { animation-delay: 0.3s; }
.wave i:nth-child(4) { animation-delay: 0.45s; } .wave i:nth-child(5) { animation-delay: 0.6s; }
.wave i:nth-child(6) { animation-delay: 0.2s; } .wave i:nth-child(7) { animation-delay: 0.5s; }
.wave i:nth-child(8) { animation-delay: 0.35s; } .wave i:nth-child(9) { animation-delay: 0.1s; }
.wave i:nth-child(10) { animation-delay: 0.4s; }
@keyframes eq { 0%, 100% { height: 18%; } 50% { height: 100%; } }

/* ------------------------------------------------------------ zoomable shots */

.zoomable { display: block; width: 100%; padding: 0; cursor: zoom-in; border-radius: 12px; overflow: hidden; }
.zoomable img { width: 100%; display: block; transition: opacity 0.2s; }
.zoomable:hover img { opacity: 0.86; }
.zoom {
  margin: auto;                /* base.css resets margin, which pins a dialog top-left */
  width: min(94vw, 1200px);
  max-height: 92vh;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 16px;
}
.zoom::backdrop { background: rgb(0 0 0 / 82%); }
.zoom img { display: block; width: 100%; height: auto; border-radius: 8px; }
.zoom form { display: flex; justify-content: flex-end; }
.zoom form button { padding: 0 8px; font-size: 22px; line-height: 1; color: var(--mut); }
.zoom form button:hover { color: var(--txt); }

/* -------------------------------------------------------------------- CTA */

.cta { margin-block: 30px 90px; }   /* margin-block only: the shorthand would zero .wrap's auto side margins */
.cta__card {
  position: relative;
  overflow: hidden;
  padding: 56px 40px;
  text-align: center;
  border: 1px solid var(--line2);
  border-radius: 28px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgb(106 58 217 / 22%), transparent 60%),
    linear-gradient(180deg, rgb(19 18 30 / 90%), rgb(11 10 20 / 95%));
}
.cta__card::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 30px;
  background: var(--grad);
  background-size: 300% 300%;
  filter: blur(26px);
  opacity: 0.4;
  animation: sheen 9s linear infinite;
}
.cta__card h2 { font-size: clamp(30px, 4.6vw, 52px); }
.cta__card p { max-width: 520px; margin: 16px auto 0; font-size: 17px; line-height: 1.6; color: var(--mut); }
.cta__card .actions { justify-content: center; }

/* ----------------------------------------------------------------- footer */

.foot { padding: 34px 0; border-top: 1px solid var(--line); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a { font-size: 14px; font-weight: 600; color: var(--mut); transition: color 0.2s; }
.foot a:hover { color: var(--txt); }
.foot__cp { width: 100%; font-size: 13px; color: var(--mut2); }
.foot__cp a { font-weight: 400; font-size: 13px; }

/* ------------------------------------------------------------------ forms */

.field { margin-bottom: 18px; }
.field > label, .field legend { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--mut); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--txt);
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: 12px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 1px; }
.field [aria-invalid='true'] { border-color: var(--red-l); }
.field--checks { border: 0; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.check-grid label { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 14.5px; color: var(--mut); }
.check-grid input { width: 16px; height: 16px; accent-color: var(--blue); }
.form-error { margin: 0 0 14px; font-size: 14px; color: var(--red-l); }
.form-sent { padding: 8px 0; }
.form-sent b { display: block; font-family: var(--font-h); font-size: 20px; }
.form-sent span { display: block; margin-top: 8px; font-size: 15px; color: var(--mut); }

/* --------------------------------------------------------------- reveal */

/* Hidden only once nav.js has said it can also unhide it; with the script off every
   section is simply there. */
html[data-reveal] [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
html[data-reveal] [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ WhatsApp fab

   Bigger than a nav button, and it breathes: a ring pulses out from behind it, on the
   ::before so the tap target itself never moves. base.css stops the pulse under
   prefers-reduced-motion. */
.wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  color: #fff;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 12px 34px -8px rgb(37 211 102 / 70%);
  transition: transform 0.2s;
}
.wa-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: rgb(37 211 102 / 45%);
  animation: wa-pulse 2s ease-out infinite;
}
.wa-fab svg { width: 38px; height: 38px; }
.wa-fab:hover { transform: scale(1.06); }
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.75); opacity: 0; }
}
@media (max-width: 749px) {
  .wa-fab { width: 60px; height: 60px; right: 16px; bottom: 16px; }
  .wa-fab svg { width: 32px; height: 32px; }
}

/* ------------------------------------------------------- tablet + mobile */

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .stage { max-width: 460px; margin-inline: auto; }
  .card3d { transform: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell, .cell--wide, .cell--half { grid-column: span 1; }
  .cell--full { grid-column: 1 / -1; }
  .cell--tall { grid-row: span 1; }
}
@media (max-width: 749px) {
  .bento { grid-template-columns: 1fr; }
  .cell--full { grid-column: auto; }
  .thumb--1, .thumb--3 { right: -8px; }
  .thumb--2 { left: -8px; }
  .check-grid { grid-template-columns: 1fr; }
  .actions .btn { width: 100%; }
  .cta__card { padding: 40px 22px; }
}

/* ------------------------------------------------------------- post cards

   build.py emits these three (post-card on the home page, media-card on /media,
   recent-card under a post); one look for all of them, the cell's. */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.post-card, .media-card, .recent-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(19 18 30 / 74%), rgb(11 10 20 / 74%));
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s;
}
.post-card:hover, .media-card:hover, .recent-card:hover { transform: translateY(-6px); border-color: var(--line2); }
.post-card img, .media-card img, .recent-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--line); }
.post-card__body, .media-card__body, .recent-card__body { padding: 20px 22px 24px; }
.post-card__date, .media-card__date, .recent-card__date { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut2); }
.post-card__title, .media-card__title, .recent-card__title { margin-top: 8px; font-size: 18px; }
.media-card__excerpt { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--mut); }
.posts__all { margin-top: 28px; text-align: center; }

/* A list of links inside a cell: a bold line and a muted one, each its own row. */
.cell .links { display: grid; gap: 8px; margin: 16px 0 20px; }
.cell .links a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.cell .links a:hover { border-color: var(--line2); background: rgb(255 255 255 / 3%); }
.cell .links b { font-family: var(--font-h); font-size: 14px; }
.cell .links span { font-size: 13px; color: var(--mut); }
.cell__title { margin-top: 16px; font-size: clamp(20px, 2vw, 26px); }
.cell__body { margin-top: 10px; }
.cell__body p + p { margin-top: 10px; }
.cell .list li b { color: var(--txt); font-weight: 600; }
.bento--4 { grid-template-columns: repeat(4, 1fr); }
.bento--4 .cell { grid-column: span 1; }
.bento--4 .stat { margin-bottom: 10px; }
.bento--4 h3 { font-size: 16px; }
.bento--3 { grid-template-columns: repeat(3, 1fr); }
.bento--3 .cell { grid-column: span 1; }
@media (max-width: 880px) { .bento--4, .bento--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 749px) { .bento--4, .bento--3 { grid-template-columns: 1fr; } }

/* A photograph in the hero window keeps the window's shape, whatever the photo's. */
.card3d > img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 60%; }
.cell__shot--photo img { object-position: center 60%; }

/* ------------------------------------------------------------ page leads

   The home page wears the whole gradient. Each focus page leads with one of its colours,
   so a visitor can tell which page they are on before reading a word: training red,
   transformation blue, platforms violet. The lead colours the aurora behind the hero, the
   pill and its dot, the small labels, the icon glows, the cell hover, and the current item
   in the nav. `:has()` because the backdrop and the nav sit before <main> in the document.
   One variable, --page, so a page changes colour in one place. */
.page { --page: var(--blue-l); --page-glow: rgb(41 50 225 / 55%); }   /* one class, so .page--train below outranks it */
.page--train { --page: var(--red-l); --page-glow: rgb(225 37 27 / 55%); }
.page--build { --page: var(--blue-l); --page-glow: rgb(41 50 225 / 60%); }
.page--platforms { --page: #b08cff; --page-glow: rgb(106 58 217 / 60%); }

.page .pill { border-color: color-mix(in srgb, var(--page) 45%, transparent); color: var(--page); }
.page .pill .pip { background: var(--page); animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--page) 25%, transparent); }
.page .pill .pip--lime { background: var(--lime); }
.page--home .pill { border-color: var(--line2); color: var(--mut); }
.page--home .pill .pip { background: var(--red); animation: ping 2s ease-out infinite; box-shadow: none; }
.page .pill .pip--lime, .page--home .pill .pip--lime { background: var(--lime); animation: none; box-shadow: none; }
.page .day, .page .points b { color: var(--page); }
.page .ico { box-shadow: 0 0 26px -6px var(--page-glow); }
.page .cell:hover { box-shadow: 0 30px 60px -28px var(--page-glow); }
.page .marquee__track > li::before { background: var(--page); }
.page .bar .tab.on { color: var(--page); border-color: color-mix(in srgb, var(--page) 40%, transparent); }

/* The aurora leans towards the page's colour: the field nearest the hero takes it. */
body:has(.page--train) .bg .b1 { background: radial-gradient(circle, var(--red), transparent 62%); opacity: 0.62; }
body:has(.page--train) .bg .b2 { background: radial-gradient(circle, #ff6a5e, transparent 62%); opacity: 0.32; }
body:has(.page--build) .bg .b1 { background: radial-gradient(circle, var(--blue), transparent 62%); opacity: 0.6; }
body:has(.page--build) .bg .b2 { background: radial-gradient(circle, var(--blue-l), transparent 62%); opacity: 0.3; }
body:has(.page--platforms) .bg .b1 { background: radial-gradient(circle, var(--violet), transparent 62%); opacity: 0.6; }
body:has(.page--platforms) .bg .b3 { background: radial-gradient(circle, #b08cff, transparent 62%); opacity: 0.32; }

/* The nav says where you are: the current page's link, in the page's colour. */
body:has(.page--train) .site-nav a[href$="training"],
body:has(.page--build) .site-nav a[href$="transformation"],
body:has(.page--platforms) .site-nav a[href$="platforms"] {
  color: var(--txt);
  box-shadow: inset 0 -2px 0 var(--page, var(--blue-l));
  padding-bottom: 2px;
}
body:has(.page--train) { --page: var(--red-l); }
body:has(.page--build) { --page: var(--blue-l); }
body:has(.page--platforms) { --page: #b08cff; }
/* The headline word wears the page colour on a focus page; the gradient stays the home
   page's and every h2's. Red says training, blue transformation, violet platforms. */
.page:not(.page--home) .hero h1 .grad { background: none; color: var(--page); animation: none; -webkit-text-fill-color: var(--page); }