/* Doxel Studio — site styles */

@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #f2f4f7;
  --paper-2: #e6eaf0;
  --white: #ffffff;
  --ink: #18212f;
  --ink-2: #4a5568;
  --line: #cfd6e0;
  --blue: #08807a;
  --blue-light: #2aa79c;
  --blue-dark: #05605b;
  --amber: #ffc24b;
  --amber-dark: #d4931a;
  --green: #17855a;
  --red: #b42318;

  --display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --step-4: clamp(2.7rem, 1.5rem + 5vw, 5rem);

  --wrap: 1180px;
  --gap: clamp(1.25rem, 3vw, 2rem);
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bounce: cubic-bezier(.3, 1.4, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--step-0); line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
a { color: var(--blue-dark); text-underline-offset: 3px; }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--amber); color: var(--ink); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: var(--step-4); letter-spacing: -0.04em; }
h2 { font-size: var(--step-3); letter-spacing: -0.03em; }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 66ch; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); }
.aside { margin-top: 1.5rem; color: var(--ink-2); }

.wrap { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 20; }
.skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------ Header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(242, 244, 247, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(24, 33, 47, .5); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.brand svg { width: 30px; height: 30px; transition: transform .5s var(--bounce); }
.brand:hover { color: var(--ink); }
.brand:hover svg { transform: rotate(-12deg) translateY(-2px); }
.nav ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; align-items: center; }
.nav a:not(.learn-more) { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1rem; position: relative; padding: .3rem 0; }
.nav a:not(.learn-more)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:not(.learn-more):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle { display: none; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r-s); padding: .45rem .8rem; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav { position: absolute; inset: 76px 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--line); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; }
  .nav.open { visibility: visible; opacity: 1; transform: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gap) 1.5rem; }
  .nav li a:not(.learn-more) { display: block; padding: .9rem 0; border-bottom: 1px solid var(--paper-2); font-size: 1.15rem; }
  .nav li a:not(.learn-more)::after { display: none; }
  .nav li:last-child { margin-top: 1rem; }
  .nav li:last-child { display: flex; justify-content: center; }
}

/* ------------------------------------------------ Header button: circle grows into the button */
.learn-more { position: relative; display: inline-block; width: 13.25rem; height: 3rem; text-decoration: none; vertical-align: middle; }
.learn-more .circle { transition: all .45s cubic-bezier(.65, 0, .076, 1); position: relative; display: block; width: 3rem; height: 3rem; background: var(--ink); border-radius: 1.625rem; }
.learn-more .icon { transition: all .45s cubic-bezier(.65, 0, .076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; }
.learn-more .icon.arrow { left: .625rem; width: 1.125rem; height: .125rem; background: none; }
.learn-more .icon.arrow::before { position: absolute; content: ""; top: -.29rem; right: .0625rem; width: .625rem; height: .625rem; border-top: .125rem solid #fff; border-right: .125rem solid #fff; transform: rotate(45deg); }
.learn-more .button-text { transition: all .45s cubic-bezier(.65, 0, .076, 1); position: absolute; inset: 0; padding: .75rem 0; margin: 0 0 0 1.85rem; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: .95rem; line-height: 1.6; letter-spacing: .04em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.learn-more:hover .circle, .learn-more:focus-visible .circle { width: 100%; background: var(--blue); }
.learn-more:hover .icon.arrow, .learn-more:focus-visible .icon.arrow { background: #fff; transform: translate(1rem, 0); }
.learn-more:hover .button-text, .learn-more:focus-visible .button-text { color: #fff; }
.learn-more:active .circle { background: var(--blue-dark); }

/* ------------------------------------------------ Buttons: raised pill, gradient sweep, pushes down on click */
.btn {
  --face: var(--blue); --text: #fff;
  --sweep: linear-gradient(to right, #ffc24b 0%, #ffe680 100%); --sweep-text: var(--ink);
  --edge: var(--ink);
  display: inline-block; padding: 0; border: 0; cursor: pointer; vertical-align: middle;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.1; text-decoration: none;
  border-radius: 30em; background: var(--edge);
  box-shadow: 6px 6px 12px rgba(24, 33, 47, .22), -6px -6px 12px #ffffff;
}
.btn-top {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  position: relative; overflow: hidden; isolation: isolate;
  border: 2px solid var(--edge); border-radius: 30em;
  padding: .9em 1.7em; background: var(--face); color: var(--text);
  transform: translateY(-.22em);
  transition: transform .1s ease, color .35s ease;
}
.btn-top::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 0; z-index: -1;
  border-radius: 30em; background-image: var(--sweep); transition: width .5s ease;
}
.btn:hover { color: inherit; }
.btn:hover .btn-top, .btn:focus-visible .btn-top { transform: translateY(-.36em); color: var(--sweep-text); }
.btn:hover .btn-top::before, .btn:focus-visible .btn-top::before { width: 100%; }
.btn:active .btn-top { transform: translateY(0); transition-duration: .05s; }
.btn:focus-visible { outline-offset: 5px; border-radius: 30em; }
.btn:disabled { cursor: wait; opacity: .75; }
.btn-ghost { --face: var(--white); --text: var(--ink); }
.btn-amber { --face: var(--amber); --text: var(--ink); --sweep: linear-gradient(to right, #08807a 0%, #3cc2b4 100%); --sweep-text: #fff; }
.btn-lg { font-size: 1.12rem; }
.btn-lg .btn-top { padding: 1em 1.9em; }
.section-white .btn { box-shadow: 6px 6px 12px rgba(24, 33, 47, .18), -6px -6px 12px #f4f6f9; }
.band .btn, .site-footer .btn, .panel-ink .btn { --edge: #05080d; box-shadow: 6px 6px 12px #0a0e15, -6px -6px 12px #283349; }
.band .btn-ghost, .site-footer .btn-ghost { --face: #222c3d; --text: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.1rem; margin-top: 2rem; }

.link-arrow { font-family: var(--display); font-weight: 700; text-decoration: none; color: var(--blue-dark); background: linear-gradient(var(--amber), var(--amber)) 0 100% / 100% 3px no-repeat; padding-bottom: 2px; transition: background-size .25s var(--ease); }
.link-arrow:hover { background-size: 100% 100%; color: var(--ink); }

/* ------------------------------------------------ Sections */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section-white { background: var(--white); }
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; }
.head-row .lede { margin: 0; }
.band { background: var(--ink); color: #e9edf3; position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.3px); background-size: 22px 22px; pointer-events: none; }
.band .wrap { position: relative; }
.band h2, .band h3 { color: #fff; }
.band p, .band .lede { color: #c3cbd8; }
.band a:not(.btn) { color: var(--amber); }

/* ------------------------------------------------ Hero */
.hero { position: relative; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.5rem, 7vw, 5.5rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(8, 128, 122, .22) 1.4px, transparent 1.5px);
  background-size: 26px 15px;
  -webkit-mask-image: radial-gradient(60% 70% at 72% 50%, #000 0%, transparent 70%);
          mask-image: radial-gradient(60% 70% at 72% 50%, #000 0%, transparent 70%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero h1 { max-width: 12ch; margin-bottom: .45em; }
.hero-copy > * { animation: rise .8s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-art { justify-self: end; width: min(100%, 460px); }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 1rem; }
  .hero-art { justify-self: center; width: min(88%, 360px); order: -1; }
  .hero::before { -webkit-mask-image: radial-gradient(70% 40% at 50% 25%, #000, transparent 70%); mask-image: radial-gradient(70% 40% at 50% 25%, #000, transparent 70%); }
}

/* Voxel toy */
.toy-stage svg { width: 100%; height: auto; overflow: visible; touch-action: manipulation; user-select: none; }
.toy-stage .cube { transform-box: view-box; }
.toy-stage .roll polygon { cursor: pointer; }
.toy-stage .roll:hover polygon { filter: brightness(1.08); }
.voxel-drop .cube { animation: drop .55s cubic-bezier(.2,.9,.3,1.25) both; animation-delay: calc(var(--i) * 22ms + 100ms); }
@keyframes drop { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
.toy-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: center; margin-top: .5rem; font-size: var(--step--1); color: var(--ink-2); }
.toy-hint { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; }
.toy-reset { font: inherit; font-weight: 700; color: var(--ink); background: var(--white); border: 2px solid var(--ink); border-radius: 999px; padding: .3rem .85rem; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.toy-reset:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.toy-reset:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* ------------------------------------------------ Mockups */
.mock { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r-m); overflow: hidden; display: grid; place-items: center; padding: 8%; isolation: isolate; }
.mock::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(24,33,47,.09) 1.2px, transparent 1.3px); background-size: 18px 18px; }
.mock-lg { border-radius: var(--r-l); }
.t-blue { background: #d6f1ed; --shade: #08807a; } .t-amber { background: #fff0cc; --shade: #ffc24b; } .t-green { background: #d8f0e3; --shade: #25a36e; } .t-sky { background: #d6eefb; --shade: #3cc2b4; }
.t-ink { background: #222c3d; --shade: #0b0f16; } .t-ink::before, .t-night::before { background-image: radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.3px); }
.t-night { background: #10141c; }
.mock i, .mock em { font-style: normal; }
.mock .ln { display: block; height: 7px; border-radius: 4px; background: #d5dbe5; }
.w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; }

.m-win { width: 100%; background: var(--white); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 6px 6px 0 var(--ink); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.m-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: var(--paper-2); border-bottom: 2px solid var(--ink); font-family: var(--display); font-size: 11px; }
.m-bar b { width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); }
.m-bar.dark { background: #2c3648; color: #c3cbd8; }
.m-url { margin-left: 8px; flex: 1; background: #fff; border-radius: 5px; padding: 1px 8px; color: var(--ink-2); font-family: var(--body); font-size: 10px; white-space: nowrap; overflow: hidden; }
.m-title { font-weight: 700; color: var(--ink); }

/* web */
.m-body { padding: 10px; display: grid; gap: 8px; }
.m-nav { display: flex; gap: 6px; justify-content: flex-end; }
.m-nav i { width: 14%; height: 5px; border-radius: 3px; background: #d5dbe5; }
.m-nav i:first-child { margin-right: auto; width: 18%; background: var(--ink); }
.m-hero { background: var(--blue); border-radius: 6px; padding: 12px; display: grid; gap: 6px; transition: background .4s; }
.m-hero .ln { background: rgba(255,255,255,.85); transition: width .5s var(--ease); }
.m-pill { width: 26%; height: 12px; border-radius: 5px; background: var(--amber); border: 1.5px solid var(--ink); transition: width .4s var(--bounce); }
.m-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.m-cols div { height: 30px; border-radius: 5px; background: var(--paper-2); transform-origin: bottom; transition: transform .4s var(--bounce), background .3s; }
.what:hover .m-hero .w70, .mock:hover .m-hero .w70 { width: 90%; }
.what:hover .m-pill, .mock:hover .m-pill { width: 40%; }
.what:hover .m-cols div, .mock:hover .m-cols div { background: #ffe3a3; transform: scaleY(1.15); }
.what:hover .m-cols div:nth-child(2), .mock:hover .m-cols div:nth-child(2) { transition-delay: .06s; background: #bfe8e2; }
.what:hover .m-cols div:nth-child(3), .mock:hover .m-cols div:nth-child(3) { transition-delay: .12s; background: #c6ecd8; }

/* phone */
.m-phone { overflow: hidden; height: 100%; aspect-ratio: 9 / 16; max-height: 100%; background: var(--white); border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); padding: 18px 10px 10px; position: relative; display: flex; flex-direction: column; gap: 8px; transition: transform .45s var(--ease); }
.m-notch { position: absolute; top: 6px; left: 50%; width: 30%; height: 6px; border-radius: 4px; background: var(--ink); transform: translateX(-50%); }
.m-apphead { background: var(--amber); border-radius: 8px; padding: 8px; border: 1.5px solid var(--ink); }
.m-apphead .ln { background: var(--ink); opacity: .8; }
.m-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.m-list li { display: flex; align-items: center; gap: 6px; background: var(--paper); border-radius: 6px; padding: 6px; }
.m-list .ln { flex: none; }
.m-list em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.m-chk { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--ink); background: #fff; transition: background .2s, transform .3s var(--bounce); }
.what:hover .m-chk, .mock:hover .m-chk { background: var(--green); transform: scale(1.12); }
.what:hover li:nth-child(2) .m-chk, .mock:hover li:nth-child(2) .m-chk { transition-delay: .12s; }
.what:hover li:nth-child(3) .m-chk, .mock:hover li:nth-child(3) .m-chk { transition-delay: .24s; }
.what:hover li:nth-child(4) .m-chk, .mock:hover li:nth-child(4) .m-chk { transition-delay: .36s; }
.m-fab { position: absolute; right: 10px; bottom: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; border: 1.5px solid var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; line-height: 1; transition: transform .4s var(--bounce); }
.what:hover .m-fab, .mock:hover .m-fab { transform: rotate(90deg) scale(1.1); }

/* game */
.m-game { position: absolute; inset: 0; font-family: var(--display); }
.m-hud { position: absolute; top: 6%; left: 7%; right: 7%; display: flex; justify-content: space-between; color: #ff7a7a; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.m-hud span:last-child { color: var(--amber); }
.m-plat { position: absolute; height: 9%; background: #14a89d; border: 2px solid #0d1119; box-shadow: inset 0 3px 0 #6fd6cb; }
.p1 { left: 10%; bottom: 30%; width: 22%; } .p2 { left: 42%; bottom: 46%; width: 20%; } .p3 { left: 70%; bottom: 62%; width: 20%; }
.m-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: #2c3648; border-top: 2px solid #0d1119; }
.m-coin { position: absolute; width: 4.5%; aspect-ratio: 1; border-radius: 50%; background: var(--amber); border: 2px solid #0d1119; animation: coin 1.4s ease-in-out infinite; }
.c1 { left: 50%; bottom: 62%; } .c2 { left: 78%; bottom: 76%; animation-delay: .4s; }
.m-hud { z-index: 1; }
@keyframes coin { 50% { transform: translateY(-4px) scaleX(.6); } }
.m-hero-sprite { position: absolute; left: 16%; bottom: 39%; width: 8%; aspect-ratio: 1; background: var(--amber); border: 2px solid #0d1119; border-radius: 3px; }
.m-hero-sprite i { position: absolute; top: 25%; right: 18%; width: 22%; height: 30%; background: #0d1119; box-shadow: -7px 0 0 #0d1119; }
.what:hover .m-hero-sprite, .mock:hover .m-hero-sprite { animation: hop 1.1s var(--ease) infinite; }
@keyframes hop { 0% { transform: none; } 30% { transform: translate(180%, -190%); } 55% { transform: translate(340%, -150%); } 80% { transform: translate(340%, -150%) scaleY(.9); } 100% { transform: none; } }

/* dashboard */
.m-dashbody { display: grid; grid-template-columns: 22% 1fr; min-height: 120px; }
.m-side { background: var(--ink); padding: 10px 8px; display: grid; gap: 7px; align-content: start; }
.m-side i { height: 6px; border-radius: 3px; background: #4a5568; }
.m-side i:first-child { background: var(--amber); }
.m-main { padding: 10px; display: grid; gap: 8px; }
.m-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.m-kpis div { background: var(--paper); border-radius: 6px; padding: 6px 8px; display: grid; gap: 4px; }
.m-kpis strong { font-family: var(--display); font-size: 15px; line-height: 1; }
.m-bars { display: flex; align-items: end; gap: 6%; height: 64px; padding: 0 2px; border-bottom: 2px solid var(--ink); }
.m-bars span { flex: 1; height: var(--h); background: var(--green); border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 3px 3px 0 0; transition: height .55s var(--bounce); }
.m-bars span:nth-child(even) { background: var(--blue); }
.what:hover .m-bars span, .mock:hover .m-bars span { height: var(--h2); }

/* code editor */
.m-code { background: #1d2533; }
.m-tab { background: #1d2533; color: #fff; padding: 2px 8px; border-radius: 4px 4px 0 0; margin-left: 6px; }
.m-run { margin-left: auto; background: var(--green); color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.m-src { margin: 0; padding: 12px 14px; color: #e9edf3; font: 600 12px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre; }
.m-src .k { color: #c792ea; } .m-src .f { color: #82aaff; } .m-src .n { color: #f78c6c; } .m-src .o { color: #89ddff; }
.m-out { display: flex; justify-content: space-between; padding: 8px 14px; background: #141a24; font-family: var(--display); font-size: 12px; }
.m-out .ok { color: #6ee7a8; } .m-out .xp { color: var(--amber); font-weight: 700; }
.m-xp { height: 8px; background: #141a24; padding: 0 14px 10px; box-sizing: content-box; }
.m-xp i { display: block; height: 100%; width: 55%; border-radius: 4px; background: linear-gradient(90deg, var(--amber), #ffe09a); transition: width .8s var(--ease); }
.card:hover .m-xp i, .mock:hover .m-xp i { width: 85%; }

/* PrepFlow */
.m-pfbody { padding: 10px; display: grid; gap: 6px; font-family: var(--display); font-size: 11.5px; }
.m-field { display: flex; justify-content: space-between; background: var(--paper); border-radius: 5px; padding: 5px 8px; }
.m-dish { display: flex; align-items: center; gap: 4px; padding: 3px 2px; border-bottom: 1px dashed var(--line); }
.m-dish .ln { margin-right: auto; }
.tag { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-size: 9px; font-weight: 700; border: 1.5px solid var(--ink); }
.tag.g { background: #ffe09a; } .tag.d { background: #bfe8e2; } .tag.n { background: #ffc4b5; }
.m-total { display: flex; justify-content: space-between; align-items: center; background: var(--ink); color: #fff; border-radius: 6px; padding: 6px 8px; }
.m-total strong { font-size: 14px; color: var(--amber); }

/* Nest Mates */
.m-nest { padding-top: 16px; gap: 6px; }
.m-nest .m-list li { padding: 4px 6px; }
.m-cottage { width: 100%; image-rendering: pixelated; border-radius: 8px; background: #bfe6fb; border: 1.5px solid var(--ink); }
.m-cottage .win { transition: fill .3s; }
.card:hover .m-cottage .win, .mock:hover .m-cottage .win { fill: #fff3b0; }

/* Pitfeed wordmark */
.m-word { display: grid; justify-items: center; gap: .6rem; }
.m-word strong { font-family: var(--display); font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -0.04em; color: var(--ink); line-height: 1; transition: transform .45s var(--bounce); }
.m-live { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px 2px 8px; font-family: var(--display); font-weight: 700; font-size: 12px; box-shadow: 2px 2px 0 var(--ink); }
.m-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.card:hover .m-word strong { transform: scale(1.06) rotate(-2deg); }

/* 404B */
.m-404 { position: absolute; inset: 0; }
.m-lamp { position: absolute; top: 0; left: 50%; width: 60%; height: 80%; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 0%, rgba(255, 214, 120, .35), transparent 70%); animation: flicker 4s infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .2; } 94% { opacity: .9; } 96% { opacity: .1; } 97% { opacity: 1; } }
.m-door { position: absolute; left: 50%; bottom: 14%; width: 24%; height: 58%; transform: translateX(-50%); background: #3a2a24; border: 3px solid #0a0c10; border-bottom: 0; }
.m-door span { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); background: #c9a227; color: #0a0c10; font-family: var(--display); font-weight: 700; font-size: 11px; padding: 1px 5px; border-radius: 2px; }
.m-door i { position: absolute; right: 12%; top: 52%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #c9a227; }
.m-door::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #ffd678; opacity: 0; box-shadow: 0 0 12px 3px rgba(255, 214, 120, .7); transition: opacity .4s; }
.card:hover .m-door::after { opacity: 1; }
.m-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: #1a1f29; border-top: 2px solid #0a0c10; }

/* chart */
.m-chart { width: 100%; }
.m-line { stroke-dasharray: 260; stroke-dashoffset: 0; transition: stroke-dashoffset 0s; }
.card:hover .m-line { animation: draw 1s var(--ease); }
@keyframes draw { from { stroke-dashoffset: 260; } }

/* ------------------------------------------------ What we do */
.what-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.what { display: block; color: var(--ink); text-decoration: none; }
.what .mock { margin-bottom: 1.25rem; overflow: visible; box-shadow: 0 0 0 var(--shade); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.what .mock > * { overflow: hidden; }
.what .mock .m-game { border-radius: inherit; }
.what:hover .mock { transform: translate(-4px, -6px); box-shadow: 10px 12px 0 var(--shade); }
.what:hover .m-win, .what:hover .m-phone { box-shadow: 9px 9px 0 var(--ink); }
.what h3 { margin-bottom: .4rem; transition: color .2s; }
.what:hover { color: var(--ink); }
.what:hover h3 { color: var(--blue); }
.what p { color: var(--ink-2); margin: 0; }
@media (max-width: 1000px) { .what-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.75rem; } }
@media (max-width: 560px) { .what-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Project cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.card { display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r-l); overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: 6px 6px 0 var(--ink); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.section-white .card { background: var(--paper); }
.card .mock { border-radius: 0; border-bottom: 2px solid var(--ink); aspect-ratio: 16 / 9; }
.card .m-win { max-width: 78%; }
.card .m-phone { height: 112%; margin-top: 6%; }
.card-text { padding: 1.4rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card .kind { font-size: var(--step--1); font-weight: 700; color: var(--ink-2); }
.card h3 { font-size: var(--step-2); margin: .2rem 0 .45rem; }
.card p { margin: 0; color: var(--ink-2); }
.card-more { margin-top: auto; padding-top: 1.1rem; font-family: var(--display); font-weight: 700; color: var(--blue-dark); display: inline-flex; align-items: center; gap: .5rem; }
.card-more::after { content: ""; width: .55em; height: .55em; background: var(--amber); border: 1.5px solid var(--ink); transform: rotate(45deg); transition: transform .3s var(--bounce); }
a.card:hover, .card-static:hover { color: var(--ink); transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--ink); }
a.card:hover .card-more::after { transform: rotate(225deg) translate(-2px, 2px); }
.card-static { cursor: default; }
.card-static:hover .m-word strong { transform: scale(1.06) rotate(-2deg); }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: s; }
.steps li { counter-increment: s; position: relative; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--amber); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.15rem; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); margin-bottom: 1rem; }
.band .steps li::before { border-color: #05080d; box-shadow: 3px 3px 0 #05080d; }
.steps:not([style]) li:not(:last-child)::after { content: ""; position: absolute; top: 1.3rem; left: 3.6rem; right: -1rem; border-top: 2px dashed rgba(255,255,255,.25); }
.steps p { margin: 0; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } .steps li::after { display: none; } }

/* ------------------------------------------------ About strip */
.about-strip { display: grid; grid-template-columns: 200px 1fr; gap: 3rem; align-items: start; }
.monogram { width: 100%; max-width: 200px; aspect-ratio: 1; border-radius: var(--r-l); background: var(--blue); color: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--amber), 6px 6px 0 2px var(--ink); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 4rem; letter-spacing: -0.05em; margin-bottom: 1.25rem; }
.panel .monogram { max-width: 120px; font-size: 2.6rem; }
.monogram { position: relative; overflow: hidden; }
.monogram img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .about-strip { grid-template-columns: 1fr; gap: 1rem; } .monogram { max-width: 120px; font-size: 2.6rem; } }

/* ------------------------------------------------ Website check strip */
.check-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.checker { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-m); padding: 1.25rem; box-shadow: 6px 6px 0 var(--ink); }
.checker label { display: block; font-family: var(--display); font-weight: 700; margin-bottom: .6rem; }
.checker .row { display: flex; gap: .75rem; }
.checker input { flex: 1; min-width: 0; }
@media (max-width: 860px) { .check-strip { grid-template-columns: 1fr; gap: 1.5rem; } }
@media (max-width: 520px) { .checker .row { flex-direction: column; } }

/* ------------------------------------------------ Inner pages */
.page-head { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.page-head h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4rem); max-width: 16ch; }
.page-head .split { align-items: center; }
.page-head + .section { padding-top: clamp(1.5rem, 4vw, 3rem); }
.crumb { font-size: var(--step--1); margin-bottom: 1rem; font-weight: 700; }
.crumb a { color: var(--ink-2); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split-wide { grid-template-columns: 1.4fr 1fr; align-items: start; }
.split.flip > .mock { order: -1; }
.split > .mock .m-win { max-width: 82%; }
.split > .mock .m-phone { height: 100%; }
@media (max-width: 860px) { .split, .split-wide { grid-template-columns: 1fr; } .split.flip > .mock { order: 0; } }

.panel { background: var(--white); border: 2px solid var(--ink); border-radius: var(--r-l); padding: clamp(1.4rem, 3.5vw, 2rem); box-shadow: 6px 6px 0 var(--ink); }
.section-white .panel { background: var(--paper); }
.panel-ink { background: var(--ink); color: #e9edf3; box-shadow: 6px 6px 0 var(--amber); }
.panel-ink h2, .panel-ink h3 { color: #fff; }
.panel-ink p { color: #c3cbd8; }
.panel-ink a { color: var(--amber); }

.ticks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.ticks li { padding-left: 2rem; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .28em; width: 1.15rem; height: 1.15rem; border-radius: 4px; border: 1.5px solid var(--ink);
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2318212f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat; }

.checklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.checklist li { border-top: 3px solid var(--ink); padding-top: 1rem; }
.checklist li h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.checklist li p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .checklist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .checklist { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: .7rem 1.5rem; margin: 0; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; color: var(--ink-2); }

/* ------------------------------------------------ Forms */
.form { display: grid; gap: 1.25rem; }
.field label, .field legend { display: block; font-weight: 700; margin-bottom: .4rem; }
.field .hint { display: block; font-weight: 400; color: var(--ink-2); font-size: var(--step--1); }
.opt { font-weight: 400; color: var(--ink-2); }
input[type="text"], input[type="email"], input[type="url"], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--white);
  border: 2px solid var(--ink); border-radius: 10px; padding: .75rem .9rem;
  box-shadow: inset 0 2px 0 rgba(24, 33, 47, .06); transition: box-shadow .15s, border-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(8, 128, 122, .2); }
textarea { min-height: 150px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; }
.choices { display: flex; flex-wrap: wrap; gap: .55rem; }
.choices label { display: inline-flex; align-items: center; gap: .45rem; border: 2px solid var(--ink); border-radius: 999px; padding: .5rem .95rem; background: var(--white); font-weight: 700; cursor: pointer; margin: 0; transition: background .15s, transform .15s var(--bounce), box-shadow .15s; }
.choices label:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices label:has(input:checked) { background: var(--amber); box-shadow: 0 3px 0 var(--ink); }
.choices label:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.hp { position: absolute; left: -5000px; }
.form-note { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.form-status { display: none; border-radius: 10px; padding: 1rem 1.1rem; font-weight: 700; border: 2px solid var(--ink); }
.form-status.ok { display: block; background: #d8f0e3; color: #0d5a3b; }
.form-status.err { display: block; background: #fde4e1; color: var(--red); }
.form.sent > :not(.form-status) { display: none; }
[hidden] { display: none !important; }

.prose h2 { font-size: var(--step-2); margin-top: 2.2rem; }
.prose ul { padding-left: 1.2rem; max-width: 66ch; }
.prose li { margin-bottom: .35rem; }

/* ------------------------------------------------ Footer */
.site-footer { background: var(--ink); color: #c3cbd8; padding-block: clamp(4rem, 8vw, 6rem) 2rem; font-size: .98rem; position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.3px); background-size: 22px 22px; pointer-events: none; }
.site-footer .wrap { position: relative; }
.footer-cta { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 2rem; padding-bottom: 3.5rem; margin-bottom: 3rem; border-bottom: 1px solid #2f3a4d; }
.footer-big { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 1.4rem + 4.5vw, 4.6rem); line-height: 1; letter-spacing: -0.045em; color: #fff; margin: 0; }
.footer-cta .actions { margin: 0; }
.site-footer a:not(.btn) { color: #fff; text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--amber); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.footer-grid h2 { font-size: 1rem; color: #fff; margin-bottom: .8rem; letter-spacing: 0; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-footer .brand { color: #fff; margin-bottom: .8rem; }
.footer-base { border-top: 1px solid #2f3a4d; margin-top: 2.5rem; padding-top: 1.25rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: var(--step--1); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------ Social icons */
.socials { display: flex; flex-wrap: wrap; gap: .75rem; }
.social { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 14px; background: #2a3446; border: 1px solid #3a4660; transition: background-color .3s, transform .3s, border-color .3s; }
.socials-light .social { background: var(--ink); border-color: var(--ink); }
.social-svg { width: 20px; height: 20px; }
.social-svg path, .social-svg rect, .social-svg circle { fill: #fff; }
.social-ig:hover { background: #d62976; border-color: #d62976; }
.social-tt:hover { background: #fe2c55; border-color: #fe2c55; }
.social-li:hover { background: #0072b1; border-color: #0072b1; }
.social:hover .social-svg { animation: slide-in-top .3s both; }
.social:active { transform: scale(.9); }
@keyframes slide-in-top { 0% { transform: translateY(-50px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ------------------------------------------------ Placeholders to fill in */
mark.fill { background: #fff3c4; color: var(--ink); outline: 1.5px dashed var(--amber-dark); border-radius: 4px; padding: 0 .2em; }

/* ------------------------------------------------ FAQ accordions */
.faq { max-width: 820px; display: grid; gap: .9rem; }
.faq details { background: var(--white); border: 2px solid var(--ink); border-radius: var(--r-m); box-shadow: 4px 4px 0 var(--ink); transition: box-shadow .2s, transform .2s var(--ease); }
.faq details[open] { box-shadow: 6px 6px 0 var(--amber), 6px 6px 0 2px var(--ink); }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 3.5rem 1.1rem 1.4rem; font-family: var(--display); font-weight: 700; font-size: 1.15rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 1.3rem; top: 50%; width: 1.4rem; height: 1.4rem; margin-top: -.7rem; border-radius: 6px; border: 2px solid var(--ink); background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%2318212f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/70% no-repeat; transition: transform .3s var(--bounce); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue); }
.faq details > div { padding: 0 1.4rem 1.2rem; color: var(--ink-2); }
.faq details > div p { margin: 0; }
.faq h2 { margin-bottom: 1rem; }

/* ------------------------------------------------ Blog post */
.article-head { max-width: 820px; }
.post-meta { display: flex; gap: 1rem; color: var(--ink-2); font-weight: 700; font-size: var(--step--1); }
.article { max-width: 720px; }
.article p, .article li { font-size: 1.12rem; }
.post-image { margin: 0 0 2.5rem; }
.post-image figcaption { font-size: var(--step--1); color: var(--ink-2); margin-top: .6rem; }
.article blockquote { margin: 2rem 0; padding: 1.2rem 1.5rem; border-left: 6px solid var(--amber); background: var(--paper); border-radius: 0 var(--r-m) var(--r-m) 0; font-family: var(--display); font-size: 1.35rem; line-height: 1.35; }
.wrap.faq { max-width: none; justify-items: start; }
.wrap.faq > details { width: 100%; max-width: 820px; }

/* ================================================ Screenshots embedded in pages */
.shot { margin: 0; }
.shot-frame { position: relative; border: 2.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: #0b0f16; box-shadow: 8px 8px 0 var(--shot-shade, var(--ink)); transition: transform .45s var(--bounce), box-shadow .45s var(--ease); cursor: zoom-in; }
.shot-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #1d2533; border-bottom: 2px solid var(--ink); font-family: var(--display); font-size: 11px; color: #9aa6b8; }
.shot-bar b { width: 9px; height: 9px; border-radius: 50%; background: #3a4660; }
.shot-bar b:nth-child(1) { background: #ff6b6b; } .shot-bar b:nth-child(2) { background: var(--amber); } .shot-bar b:nth-child(3) { background: #3ccf8e; }
.shot-bar span { margin-left: 8px; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: .9rem; font-size: var(--step--1); color: var(--ink-2); max-width: 60ch; }
.shot-tilt .shot-frame { transform: rotate(-2deg); }
.shot-tilt-r .shot-frame { transform: rotate(1.5deg); }
.shot:hover .shot-frame { transform: rotate(0) translate(-3px, -3px); box-shadow: 12px 12px 0 var(--shot-shade, var(--ink)); }
.shot-amber { --shot-shade: var(--amber); } .shot-blue { --shot-shade: var(--blue); } .shot-green { --shot-shade: #25a36e; }
.page-head .shot { align-self: center; }
.inline-shot { margin: 2rem 0 2.5rem; }
.shots-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 760px) { .shots-2 { grid-template-columns: 1fr; } }
.mock-shot { padding: 0; }
.mock-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
a.card:hover .mock-shot img { transform: scale(1.05); }

/* ================================================ Gallery carousel */
.gallery-band { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding-bottom: clamp(3rem, 6vw, 5rem); }
.gallery-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.3px); background-size: 22px 22px; pointer-events: none; }
.gallery-head { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.gallery-head h2 { color: #fff; margin: 0; }
.gallery-head p { margin: .4rem 0 0; color: #c3cbd8; }
.g-count { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); color: #c3cbd8; margin: 0; letter-spacing: -0.02em; }
.g-count b { color: var(--amber); display: inline-block; }
.g-count b.tick { animation: g-tick .45s var(--bounce); }
@keyframes g-tick { from { transform: translateY(-60%) scale(1.3); opacity: 0; } }

.gallery { position: relative; height: clamp(300px, 50vw, 660px); margin: clamp(1.5rem, 4vw, 3rem) 0 1.5rem; perspective: 1700px; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gallery:focus-visible .g-slide.is-active { outline: 3px solid var(--amber); outline-offset: 6px; }
.g-marquee { position: absolute; left: 0; right: 0; overflow: hidden; pointer-events: none; line-height: .8; }
.g-marquee.top { top: 0; }
.g-marquee.bottom { bottom: 0; }
.g-marquee.bottom div { animation-direction: reverse; animation-duration: 46s; }
.g-marquee div { display: inline-flex; white-space: nowrap; animation: g-marquee 38s linear infinite; }
.g-marquee span { font-family: var(--display); font-weight: 700; font-size: clamp(4.5rem, 2rem + 11vw, 12rem); line-height: .8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px rgba(255, 194, 75, .3); padding-right: .35em; }
@keyframes g-marquee { to { transform: translateX(-50%); } }
.g-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.g-slide {
  --x: 0px; --z: 0px; --ry: 0deg; --rz: 0deg; --s: 1; --o: 1; --b: 1;
  position: absolute; top: 50%; left: 50%; margin: 0;
  width: min(62vw, 880px); aspect-ratio: 16 / 9;
  border: 3px solid #05080d; border-radius: 16px; overflow: hidden; background: #000;
  box-shadow: 10px 10px 0 #05080d;
  transform: translate(-50%, -50%) translateX(var(--x)) translateZ(var(--z)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--s));
  opacity: var(--o); filter: brightness(var(--b));
  transition: transform .75s cubic-bezier(.25, 1.25, .35, 1), opacity .5s ease, filter .5s ease, box-shadow .4s ease;
  cursor: pointer; will-change: transform;
}
.g-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.g-slide figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.g-slide.is-active { box-shadow: 12px 12px 0 var(--amber), 12px 12px 0 3px #05080d; cursor: zoom-in; }
.g-slide.is-active::after { content: "Click to enlarge"; position: absolute; right: 12px; top: 12px; background: var(--amber); color: var(--ink); font: 700 12px/1 var(--display); padding: 6px 10px; border-radius: 999px; border: 2px solid #05080d; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s var(--bounce); }
.g-slide.is-active:hover::after { opacity: 1; transform: none; }
.g-slide.pop { animation: g-pop .6s var(--bounce); }
@keyframes g-pop { 0% { filter: brightness(1.35); } 100% { filter: brightness(1); } }
.gallery.dragging .g-slide { transition: none; }
@media (max-width: 760px) { .g-slide { width: 80vw; } }

.g-controls { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; }
.g-info { display: grid; justify-items: center; gap: .8rem; text-align: center; }
.g-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.g-pip { width: 12px; height: 12px; padding: 0; border: 2px solid #c3cbd8; background: transparent; border-radius: 3px; transform: rotate(45deg); cursor: pointer; transition: transform .35s var(--bounce), background .25s, border-color .25s; }
.g-pip:hover { border-color: #fff; transform: rotate(45deg) scale(1.2); }
.g-pip.on { background: var(--amber); border-color: var(--amber); transform: rotate(225deg) scale(1.35); }
.g-caption { margin: 0; color: #e9edf3; font-size: 1.05rem; min-height: 1.6em; max-width: 60ch; transition: opacity .2s, transform .2s; }
.g-caption.swap { opacity: 0; transform: translateY(6px); }
.g-arrow { position: relative; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 2px solid #05080d; background: var(--amber); cursor: pointer; box-shadow: 0 5px 0 #05080d; transition: transform .12s, box-shadow .12s, background .2s; }
.g-arrow:hover { background: #ffd77d; transform: translateY(-2px); box-shadow: 0 7px 0 #05080d; }
.g-arrow:active { transform: translateY(4px); box-shadow: 0 1px 0 #05080d; }
.g-arrow span { position: absolute; top: 50%; left: 50%; width: 1.1rem; height: 2px; background: var(--ink); transform: translate(-50%, -50%); }
.g-arrow span::before { content: ""; position: absolute; right: 0; top: -5px; width: 10px; height: 10px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.g-prev span { transform: translate(-50%, -50%) rotate(180deg); }

/* Lightbox */
.g-lightbox { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; margin: 0; overflow: hidden; }
.g-lightbox::backdrop { background: rgba(8, 11, 17, .92); backdrop-filter: blur(4px); }
.g-lightbox[open] { display: grid; place-items: center; }
.g-lb-inner { display: grid; justify-items: center; gap: 1rem; width: min(94vw, 1500px); }
.g-lb-inner img { max-width: 100%; max-height: 80vh; border: 3px solid #05080d; border-radius: 14px; box-shadow: 12px 12px 0 var(--amber); animation: g-zoom .35s var(--bounce); }
@keyframes g-zoom { from { transform: scale(.92); opacity: 0; } }
.g-lb-inner p { color: #e9edf3; margin: 0; text-align: center; }
.g-lb-close { position: fixed; top: 1.25rem; right: 1.25rem; }
.g-lb-close span, .g-lb-close span::before { position: absolute; top: 50%; left: 50%; width: 1.2rem; height: 2px; background: var(--ink); border: 0; transform: translate(-50%, -50%) rotate(45deg); }
.g-lb-close span::before { content: ""; top: 0; left: 0; right: auto; width: 100%; height: 100%; transform: rotate(90deg); }
.g-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); }
.g-lb-nav:hover { transform: translateY(calc(-50% - 2px)); }
.g-lb-nav:active { transform: translateY(calc(-50% + 4px)); }
.g-lb-nav.g-prev { left: 1.25rem; } .g-lb-nav.g-next { right: 1.25rem; }
@media (max-width: 760px) { .g-lb-nav { top: auto; bottom: 1.25rem; transform: none; } .g-lb-nav:hover, .g-lb-nav:active { transform: none; } }
@media (prefers-reduced-motion: reduce) { .g-marquee div { animation: none; } }

/* ================================================ Pitfeed mock: a little TV on air */
.t-red { background: #ffe3de; --shade: #e5484d; }
.m-tv { position: relative; width: 66%; aspect-ratio: 16 / 11; background: #fff4e3; border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); display: grid; grid-template-columns: 1fr 14%; gap: 5%; padding: 6% 5% 6% 6%; margin-top: 6%; transition: transform .45s var(--bounce); }
.m-ant { position: absolute; bottom: 100%; left: 50%; width: 2.5px; height: 34%; background: var(--ink); transform-origin: bottom center; }
.m-ant.l { transform: translateX(-50%) rotate(-28deg); } .m-ant.r { transform: translateX(-50%) rotate(24deg); }
.m-ant::before { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; border: 2px solid var(--ink); transform: translateX(-50%); }
.m-tv-screen { position: relative; overflow: hidden; border: 2.5px solid var(--ink); border-radius: 12px; background: radial-gradient(120% 90% at 50% 40%, #3b2a3f 0%, #1a1420 70%); }
.m-tv-screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px); pointer-events: none; }
.m-onair { position: absolute; top: 7%; left: 6%; background: #e5484d; color: #fff; font: 700 9px/1 var(--display); letter-spacing: .06em; padding: 3px 5px 3px 13px; border-radius: 4px; }
.m-onair::before { content: ""; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
.m-watch { position: absolute; top: 7.5%; right: 6%; color: #c9b8d6; font: 700 8.5px/1 var(--display); }
.m-torch { position: absolute; top: 30%; width: 5%; aspect-ratio: 1 / 2; background: #6b4a3a; border-radius: 2px; }
.m-torch::before { content: ""; position: absolute; bottom: 85%; left: 50%; width: 140%; aspect-ratio: 1; border-radius: 50% 50% 50% 0; background: #ffc24b; transform: translateX(-50%) rotate(-45deg); box-shadow: 0 0 12px 4px rgba(255, 170, 60, .45); animation: flame 0.9s ease-in-out infinite alternate; }
.m-torch.l { left: 9%; } .m-torch.r { left: 56%; } .m-torch.r::before { animation-delay: .4s; }
@keyframes flame { to { transform: translateX(-50%) rotate(-45deg) scale(.85); opacity: .85; } }
.m-ground2 { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #4a3a52; border-top: 2.5px solid #120d17; box-shadow: inset 0 3px 0 #5d4a67; }
.m-crew { position: absolute; inset: 0; }
.m-crew i { position: absolute; bottom: 22%; width: 10%; aspect-ratio: 1; border: 2px solid #120d17; border-radius: 4px; }
.m-crew .c1 { left: 12%; } .m-crew .c2 { left: 25%; width: 11%; } .m-crew .c3 { left: 39%; }
.m-crew i::before, .m-crew i::after { content: ""; position: absolute; top: 28%; width: 18%; height: 30%; background: #120d17; }
.m-crew i::before { right: 14%; } .m-crew i::after { right: 52%; }
.m-crew .c1 { background: var(--amber); } .m-crew .c2 { background: #5cc4b8; } .m-crew .c3 { background: #3ccf8e; }
.m-boss { position: absolute; right: 11%; bottom: 22%; width: 19%; aspect-ratio: 1; background: #9b3fd1; border: 2.5px solid #120d17; border-radius: 6px 6px 3px 3px; }
.m-boss::before, .m-boss::after { content: ""; position: absolute; top: -22%; width: 22%; height: 26%; background: #9b3fd1; border: 2px solid #120d17; border-bottom: 0; }
.m-boss::before { left: 8%; transform: skewX(-15deg); } .m-boss::after { right: 8%; transform: skewX(15deg); }
.m-boss i { position: absolute; top: 30%; left: 18%; width: 18%; height: 20%; background: #ff4d4d; box-shadow: 0 0 6px #ff4d4d; }
.m-boss i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: inherit; box-shadow: 0 0 6px #ff4d4d; transform: translateX(200%); }
.m-hp { position: absolute; right: 8%; bottom: 50%; width: 28%; height: 6%; border: 1.5px solid #120d17; border-radius: 3px; background: #2a1f30; overflow: hidden; }
.m-hp i { display: block; height: 100%; width: 80%; background: #e5484d; transition: width .6s var(--ease); }
.m-knobs { display: flex; flex-direction: column; align-items: center; gap: 14%; padding-top: 10%; }
.m-knobs b { width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--amber); border: 2px solid var(--ink); position: relative; transition: transform .5s var(--bounce); }
.m-knobs b::after { content: ""; position: absolute; top: 10%; left: 50%; width: 2px; height: 40%; background: var(--ink); transform: translateX(-50%); }
.m-knobs span { width: 70%; flex: 1; max-height: 30%; border-radius: 4px; background: repeating-linear-gradient(0deg, var(--ink) 0 2px, transparent 2px 5px); opacity: .5; }
/* hover: the crew hop in turn, the boss shakes and takes damage */
.card:hover .m-crew i { animation: crew-hop .6s var(--ease) infinite; }
.card:hover .m-crew .c2 { animation-delay: .12s; } .card:hover .m-crew .c3 { animation-delay: .24s; }
@keyframes crew-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-55%); } }
.card:hover .m-boss { animation: boss-shake .35s ease-in-out infinite; }
@keyframes boss-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4%) rotate(-3deg); } 75% { transform: translateX(4%) rotate(3deg); } }
.card:hover .m-hp i { width: 35%; }
.card:hover .m-knobs b:first-child { transform: rotate(120deg); }
.card:hover .m-tv { transform: rotate(-2deg); }

@media (max-width: 560px) { .m-watch { display: none; } }

/* Footer call to action: big line left, text and buttons right */
.footer-cta { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem 4rem; align-items: end; }
.footer-cta-side { display: grid; gap: 1.75rem; justify-items: start; }
.footer-cta-side .lede { color: #c3cbd8; margin: 0; max-width: 46ch; }
.footer-cta-side .actions { margin: 0; }
@media (max-width: 860px) { .footer-cta { grid-template-columns: 1fr; } }

/* ================================================ Toy easter eggs */
.hero-art.toy { position: relative; }
.toy-secrets { background: var(--amber); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: .3rem .8rem; font-weight: 700; }
.egg-card {
  position: absolute; left: 50%; top: 46%; z-index: 20; width: min(92%, 340px);
  transform: translate(-50%, -50%);
  background: var(--white); border: 2.5px solid var(--ink); border-radius: var(--r-l);
  box-shadow: 8px 8px 0 var(--amber), 8px 8px 0 2.5px var(--ink);
  padding: 1.4rem 1.4rem 1.2rem; text-align: left;
  animation: egg-in .55s var(--bounce) both;
}
@keyframes egg-in { from { transform: translate(-50%, -40%) scale(.6) rotate(-6deg); opacity: 0; } }
.egg-card h3 { font-size: 1.5rem; margin: .5rem 0 .4rem; }
.egg-card p { color: var(--ink-2); margin: 0 0 1.1rem; font-size: 1rem; }
.egg-tag { display: inline-block; background: var(--ink); color: var(--amber); font: 700 .8rem/1 var(--display); padding: .4rem .7rem; border-radius: 999px; }
.egg-count { display: block; margin-top: .9rem; font-size: var(--step--1); color: var(--ink-2); }
.egg-close { position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.egg-close:hover { background: var(--amber); }
.egg-bit { position: absolute; left: 50%; top: 46%; width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 2px; z-index: 19; pointer-events: none; animation: egg-bit 1.1s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes egg-bit { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) + 80px)) rotate(var(--r)) scale(1); opacity: 0; } }

/* Longer case studies */
.prose-case h2 { margin-top: 2.6rem; }
.prose-case h2:first-child { margin-top: 0; }
.prose-case .inline-shot { margin-top: 1.5rem; }
.panel-sticky { position: sticky; top: 100px; }
@media (max-width: 860px) { .panel-sticky { position: static; } }
.modes { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modes li { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-m); padding: 1rem 1.1rem; box-shadow: 4px 4px 0 var(--ink); transition: transform .25s var(--bounce), box-shadow .25s var(--ease); }
.modes li:nth-child(1) { box-shadow: 4px 4px 0 var(--amber), 4px 4px 0 2px var(--ink); }
.modes li:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.modes strong { display: block; font-family: var(--display); font-size: 1.15rem; margin-bottom: .25rem; }
.modes span { color: var(--ink-2); font-size: .98rem; }
@media (max-width: 560px) { .modes { grid-template-columns: 1fr; } }

/* About: qualifications */
.quals { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .45rem; }
.quals li { padding-left: 1.2rem; position: relative; color: var(--ink-2); }
.quals li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; background: var(--amber); border: 1.5px solid var(--ink); transform: rotate(45deg); }

/* Brand logo mark */
.brand img { width: auto; height: 34px; transition: transform .5s var(--bounce); }
.brand:hover img { transform: rotate(-8deg) translateY(-2px); }

/* Testimonials (homepage, switched on once there are real quotes) */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.quote { margin: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-l); padding: 1.6rem; box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; gap: 1.25rem; }
.quote:nth-child(2) { box-shadow: 6px 6px 0 var(--amber), 6px 6px 0 2px var(--ink); }
.quote blockquote { margin: 0; font-size: 1.12rem; line-height: 1.55; position: relative; padding-top: 1.6rem; }
.quote blockquote::before { content: "\201C"; position: absolute; top: -.6rem; left: -.1rem; font: 700 3.6rem/1 var(--display); color: var(--blue); }
.quote figcaption { margin-top: auto; color: var(--ink-2); font-size: var(--step--1); }
.quote figcaption strong { display: block; color: var(--ink); font-size: 1rem; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* Phones: smaller D so the headline shows on the first screen */
@media (max-width: 860px) {
  .hero-art { width: min(58%, 230px); }
  .toy-bar { gap: .4rem .6rem; margin-top: .25rem; }
  .toy-hint { font-size: .78rem; padding: .25rem .65rem; }
  .toy-reset { font-size: .8rem; padding: .2rem .7rem; }
  .hero h1 { margin-top: .25rem; }
}
@media (max-width: 860px) {
  .toy-bar { margin-inline: -32%; flex-wrap: nowrap; }
  .toy-hint { white-space: nowrap; }
}
@media (max-width: 860px) { .toy-reset { white-space: nowrap; flex: none; } .toy-bar { gap: .4rem; } }

/* ================================================ Phone screenshots (Nestmates) */
.shot-phone .shot-frame { max-width: 300px; margin-inline: auto; border: 3px solid var(--ink); border-radius: 34px; padding: 6px; background: var(--ink); }
.shot-phone img { border-radius: 27px; }
.shot-phone figcaption { text-align: center; margin-inline: auto; }
.page-head .shot-phone .shot-frame { max-width: 270px; }
.shots-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.inline-pair { margin: 1.75rem 0 .5rem; gap: 1.5rem; }
.inline-pair .shot-phone .shot-frame { max-width: 240px; }
@media (max-width: 760px) { .shots-3 { grid-template-columns: 1fr; } }
.gallery.g-phone { height: clamp(460px, 58vw, 720px); }
.g-phone .g-slide { width: min(26vw, 300px); aspect-ratio: 1080 / 2340; border-radius: 30px; }
@media (max-width: 760px) { .g-phone .g-slide { width: 56vw; } .gallery.g-phone { height: 130vw; } }
.brand img { height: 36px; }