:root { --bg: #E8E8E5; --card: #F7F7F5; --ink: #0D0D0D; --red: #E2231A; --line: #D6D6D2; --r: 32px; }
html { scroll-behavior: smooth; background: var(--bg); -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--ink); overflow-x: hidden; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 14px; }
::selection { background: var(--red); color: #fff; }

/* ---------- bento card + inverted-corner notches ---------- */
.card { position: relative; border-radius: var(--r); overflow: hidden; isolation: isolate; }
.notch { position: absolute; top: 0; left: 0; z-index: 20; background: var(--bg); padding: 0 10px 10px 0; border-bottom-right-radius: var(--r); }
.notch::before, .notch::after { content: ''; position: absolute; width: var(--r); height: var(--r);
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - .5px), var(--bg) var(--r)); }
.notch::before { top: 0; left: 100%; }
.notch::after { top: 100%; left: 0; }
.notch-br { position: absolute; bottom: 0; right: 0; z-index: 20; background: var(--bg); padding: 10px 0 0 10px; border-top-left-radius: var(--r); }
.notch-br::before, .notch-br::after { content: ''; position: absolute; width: var(--r); height: var(--r);
  background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--bg) var(--r)); }
.notch-br::before { bottom: 0; right: 100%; }
.notch-br::after { bottom: 100%; right: 0; }

.orb { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 999px; transition: transform .25s ease, background-color .25s, color .25s; }
.orb:hover, a:hover > .orb, .group:hover .orb { transform: rotate(-12deg) scale(1.05); }
@media (max-width: 640px) { :root { --r: 26px; } .orb { width: 52px; height: 52px; } }

.tech { font: 500 10.5px/1.4 "JetBrains Mono", monospace; letter-spacing: .04em; direction: ltr; text-transform: uppercase; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 500; font-size: 14px; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.chip[aria-pressed="true"], .chip.on { background: var(--ink); color: #fff; }
.hatch { background-image: repeating-linear-gradient(-45deg, rgba(13,13,13,.06) 0 6px, transparent 6px 14px); }
.gridbg { background-image: linear-gradient(rgba(13,13,13,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(13,13,13,.06) 1px, transparent 1px); background-size: 28px 28px; }
.gridbg-dark { background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 24px 24px; }
.no-sb { scrollbar-width: none; } .no-sb::-webkit-scrollbar { display: none; }

.img-card img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.img-card:hover img { transform: scale(1.06); }

/* ---------- HERO ---------- */
.hero { min-height: calc(100svh - 92px); display: flex; flex-direction: column; background: var(--card); }
.hero .gridbg { position: absolute; inset: 0; z-index: 0; -webkit-mask-image: radial-gradient(120% 70% at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 70% at 50% 30%, #000 30%, transparent 75%); }
.hero .stage { position: relative; z-index: 1; flex: 1 1 auto; min-height: 200px; margin-top: -34px; }
.hero #printer { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; }
.hero .chips { position: absolute; left: 20px; bottom: 6px; z-index: 3; }
.hero #printer:active { cursor: grabbing; }
.hero .fade { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-copy { position: relative; z-index: 10; margin-top: auto; }
.hero h1 { font-size: clamp(2.9rem, 13vw, 5.4rem); line-height: .98; }
@media (min-width: 1024px) {
  .hero { min-height: min(760px, calc(100svh - 110px)); }
  .hero .stage { position: absolute; inset: 0; margin: 0; }
  .hero .chips { left: 32px; bottom: 32px; }
  .hero .fade { display: block; background: linear-gradient(to left, var(--card) 38%, rgba(247,247,245,.6) 52%, transparent 70%); }
  .hero-copy { max-width: 56%; }
  .hero h1 { font-size: clamp(3.6rem, 5.6vw, 5.6rem); }
}
.hero .bar { position: relative; z-index: 10; height: 6px; background: var(--line); }
.hero .bar > i { position: absolute; inset: 0 0 0 auto; width: 0; background: var(--red); }

/* headline gets "printed" layer by layer */
.print-in { position: relative; display: inline-block; animation: printUp 1.5s steps(22, end) .25s both; }
.print-in::after { content: ''; position: absolute; left: -4%; right: -4%; height: 3px; background: var(--red); box-shadow: 0 0 14px 2px rgba(226,35,26,.55); animation: scanUp 1.5s steps(22, end) .25s both; }
@keyframes printUp { from { clip-path: inset(100% -5% 0 -5%); } to { clip-path: inset(-10% -5% -10% -5%); } }
@keyframes scanUp { 0% { bottom: 0; opacity: 1; } 99% { bottom: 100%; opacity: 1; } 100% { bottom: 100%; opacity: 0; } }

.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------- ticker ---------- */
.ticker { display: flex; width: max-content; animation: tick 28s linear infinite; }
.ticker:hover { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- item view (full screen) ---------- */
dialog.sheet { padding: 0; border: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--bg); color: var(--ink); }
dialog.sheet::backdrop { background: var(--bg); }
dialog.sheet[open] .pv { animation: pvIn .45s cubic-bezier(.2,.8,.2,1); }
.pv.swap .pv-body { animation: pvIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes pvIn { from { opacity: 0; transform: translateY(26px); } }
.pv { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.pv-top { position: sticky; top: 0; z-index: 30; max-width: 1320px; margin: 0 auto; width: 100%; }
.pv-body { max-width: 1320px; margin: 0 auto; padding: 12px 12px 120px; display: grid; gap: 12px; }
.pv-media { height: min(52svh, 520px); }
.pv-cta { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  .pv { overflow: hidden; display: flex; flex-direction: column; }
  .pv-top { position: relative; }
  .pv-body { flex: 1; min-height: 0; width: 100%; padding: 16px 24px 24px; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 16px; }
  .pv-media { height: auto; min-height: 0; }
  .pv-info { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
  .pv-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .pv-cta { position: static; }
}
.opt input:checked + span { background: var(--ink) !important; color: #fff; border-color: var(--ink) !important; }
.opt input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

dialog.lb { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100svh; }
dialog.lb::backdrop { background: rgba(10,10,10,.9); }

/* mobile action bar */
.mbar { transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.mbar.show { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .print-in, .print-in::after, .ticker, .blink { animation: none; }
  .print-in::after { display: none; }
}
.spin-slow { animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin-slow { animation: none; } }