/* HEXHAD studio site. Tokens follow docs/brand.html (Graphite base, Cell Mint accent, Geist). Geist only: no monospace on the client-facing page. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* dark appearance (default) */
  --bg: #0a0b0d;               /* Graphite 950 */
  --bg-elev: #121417;          /* Graphite 900 */
  --bg-elev2: #1a1d21;         /* Graphite 800 */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --label: #ededef;
  --label2: #9ba1a8;           /* 7.3:1 on Graphite 950 */
  --label3: #6b7178;
  --mint: #43e0a0;             /* Cell Mint: fills, marks, large text */
  --mint-text: #43e0a0;        /* small text on the page background */
  --on-mint: #04130c;
  /* Liquid Glass (pure CSS, values measured from iOS 26.1 by glisse) */
  --glass: rgb(40 40 40 / 0.62);
  --glass-active: rgb(70 70 70 / 0.62);
  --glass-edge: rgb(255 255 255 / 0.08);
  --glass-drop: transparent;
  --rim-shine: 0.13;
  --ease-slide: cubic-bezier(0.3, 1.2, 0.5, 1);
  --ease-press: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow: rgba(0, 0, 0, 0.5);
  --hero-wash: radial-gradient(60% 70% at 78% 40%, rgba(67, 224, 160, 0.22), transparent 70%),
               radial-gradient(50% 60% at 10% 90%, rgba(12, 42, 32, 0.9), transparent 70%);

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* one radius scale: pills for controls, 24/16/10 for surfaces */
  --r-card: 24px;
  --r-inner: 16px;
  --r-chip: 10px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* layer scale */
  --z-nav: 100;
  --z-tabbar: 110;
  --z-toast: 200;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f5f6;               /* Graphite 50 */
  --bg-elev: #ffffff;
  --bg-elev2: #eceef0;
  --line: rgba(10, 11, 13, 0.08);
  --line-strong: rgba(10, 11, 13, 0.16);
  --label: #0c0e10;
  --label2: #545a61;           /* 6.6:1 on Graphite 50 */
  --label3: #7d838a;
  --mint: #43e0a0;
  --mint-text: #0a7a52;        /* Cell Mint 700: 5.2:1 on Graphite 50 */
  --on-mint: #04130c;
  --glass: rgb(255 255 255 / 0.6);
  --glass-active: rgb(236 236 240 / 0.85);
  --glass-edge: rgb(0 0 0 / 0.08);
  --glass-drop: rgb(0 0 0 / 0.06);
  --rim-shine: 0.3;
  --shadow: rgba(16, 24, 20, 0.14);
  --hero-wash: radial-gradient(60% 70% at 78% 40%, rgba(18, 185, 129, 0.2), transparent 70%),
               radial-gradient(50% 60% at 10% 90%, rgba(205, 238, 223, 0.9), transparent 70%);
  color-scheme: light;
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.55; letter-spacing: -0.006em;
  background: var(--bg); color: var(--label);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
html { scrollbar-color: var(--line-strong) var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid var(--bg); }
::selection { background: color-mix(in srgb, var(--mint) 35%, transparent); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }

.ic { display: inline-flex; width: 1em; height: 1em; flex: none; }
.ic svg { width: 100%; height: 100%; fill: currentColor; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 999; padding: 8px 14px; border-radius: 999px;
  background: var(--mint); color: var(--on-mint); font-weight: 600; font-size: 14px; transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Glass (web approximation of a liquid-glass material, not Apple's) ── */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(3px) saturate(1.5);
  backdrop-filter: blur(3px) saturate(1.5);
  border: 1px solid transparent; /* forced-colors keeps an edge; the visible edge is the 0.5px inset below */
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), 0 1px 3px var(--glass-drop);
}
/* rim light: a 1.25px ring, bright top-left and bottom-right, gone top-right and bottom-left */
.glass::before {
  content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; padding: 1.25px; pointer-events: none;
  background: conic-gradient(from 45deg, transparent, rgb(255 255 255 / var(--rim-shine)) 90deg, transparent 180deg, rgb(255 255 255 / var(--rim-shine)) 270deg, transparent);
  -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 exclude, linear-gradient(#000 0 0);
}
/* optional real refraction, Chromium only (js adds .lg-refract) */
.lg-refract .glass { backdrop-filter: url(#lg-refract) blur(3px) saturate(1.5); }
@media (prefers-reduced-transparency: reduce) {
  .glass, .lg-refract .glass { background: var(--bg-elev); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass::before { display: none; }
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: transform 0.18s var(--ease-out), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn .ic { font-size: 18px; }
.btn-primary { background: var(--mint); color: var(--on-mint); }
.btn-primary:hover { background: color-mix(in srgb, var(--mint) 88%, #fff); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--label); }
.btn-ghost:hover { border-color: var(--label3); background: color-mix(in srgb, var(--label) 5%, transparent); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 999px; display: inline-grid; place-items: center;
  color: var(--label2); transition: color 0.2s, background-color 0.2s, transform 0.18s var(--ease-out);
}
.icon-btn:hover { color: var(--label); background: color-mix(in srgb, var(--label) 7%, transparent); }
.icon-btn:active { background-color: var(--glass-active); transition-duration: 0s, 0s, 0.15s; }
@media (prefers-reduced-motion: no-preference) { .icon-btn:active { transform: scale(1.17); } } /* 36 → 42px */
.icon-btn .ic { font-size: 18px; }
/* theme icon swap */
.ic-swap { position: relative; }
.ic-swap svg { position: absolute; inset: 0; transition: opacity 0.25s, transform 0.35s var(--ease-out); }
.ic-swap .ic-on { opacity: 0; transform: rotate(-60deg) scale(0.6); }
:root[data-theme="light"] .ic-swap .ic-on { opacity: 1; transform: none; }
:root[data-theme="light"] .ic-swap .ic-off { opacity: 0; transform: rotate(60deg) scale(0.6); }

/* ── Brand lockup ── */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.14em; font-size: 15px; }
.brand-mark { width: 26px; height: 26px; color: var(--label); transition: transform 0.6s var(--ease-out), color 0.2s; }
.brand:hover .brand-mark { transform: rotate(60deg); color: var(--mint); }

/* ── Nav ── */
.nav {
  position: fixed; inset: 12px 12px auto; z-index: var(--z-nav);
  max-width: calc(var(--max) - 2 * var(--gutter) + 24px); margin-inline: auto;
  height: 60px; border-radius: 999px; padding: 0 10px 0 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--label2); padding: 8px 14px; border-radius: 999px;
  transition: color 0.2s, background-color 0.2s;
}
.nav-links a:hover { color: var(--label); }
.nav-links a[aria-current="true"] { color: var(--label); background: color-mix(in srgb, var(--label) 8%, transparent); }
.nav-actions { display: flex; align-items: center; gap: 6px; }

/* phone: links move to a floating glass tab bar */
.tabbar { display: none; }
@media (max-width: 760px) {
  .nav { inset: 10px 10px auto; height: 54px; padding-left: 18px; }
  .nav-links { display: none; }
  .nav .btn { display: none; }
  .tabbar {
    position: fixed; z-index: var(--z-tabbar); left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
    transform: translateX(-50%); display: flex; gap: 2px; padding: 5px; border-radius: 999px; width: max-content;
    max-width: calc(100vw - 24px);
  }
  .tabbar a {
    font-size: 13px; font-weight: 600; color: var(--label2); padding: 10px 14px; border-radius: 999px;
    transition: color 0.2s, background-color 0.25s var(--ease-out);
  }
  .tabbar a[aria-current="true"] { color: var(--on-mint); background: var(--mint); }
}

/* ── Hero ── */
.hero { position: relative; min-height: min(100dvh, 920px); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.scene-host { position: absolute; inset: 0; z-index: -1; background: var(--hero-wash), var(--bg); }
.scene-host::after { /* fade the scene into the page below */
  content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, var(--bg)); pointer-events: none;
}
.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.scene-ready .scene-canvas { opacity: 1; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 40px;
  padding-top: 96px; padding-bottom: 40px;
}
.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 5.4rem); font-weight: 650; line-height: 0.98; letter-spacing: -0.045em;
  max-width: 11ch; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--mint-text); }
.hero-sub { margin-top: 24px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--label2); max-width: 40ch; line-height: 1.5; }
.hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero h1 { max-width: 13ch; }
/* Liquid Morse: HEXHAD spelled as dots and dashes that melt into each other (js/morse-liquid.js) */
.morse { justify-self: end; width: min(100%, 560px); display: grid; justify-items: center; gap: 22px; }
.morse-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-card); isolation: isolate; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform 0.5s var(--spring);
}
.morse-stage::before { /* soft pool of light the water sits in */
  content: ""; position: absolute; inset: 8% 4%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mint) 14%, transparent), transparent);
}
.morse-stage:active { transform: scale(0.97); }
.morse-stage:focus-visible { outline-offset: 6px; border-radius: var(--r-card); }
.morse-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s var(--ease-out); }
.scene-ready .morse-canvas { opacity: 1; }
.morse-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6%; transition: opacity 0.4s; }
.scene-ready .morse-fallback { opacity: 0; }
.morse-fallback i { width: 10%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--label) 12%, transparent); border: 1px solid var(--line-strong); }
@media (max-width: 860px) {
  .hero { align-items: flex-start; }
  .hero-grid { grid-template-columns: 1fr; gap: 12px; padding-top: 88px; padding-bottom: 104px; }
  /* phones: the same three rows of three, a little smaller */
  .morse { justify-self: stretch; width: 100%; margin-top: 4px; gap: 16px; }
}

/* entry motion: one staggered rise for the hero, played once */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(18px); animation: rise 0.9s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ── Sections ── */
.section { padding-block: clamp(72px, 9vw, 120px) clamp(80px, 10vw, 136px); }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 760px; }
.h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 650; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.h2 em { font-style: normal; color: var(--mint-text); }
.inline-link { color: var(--mint-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.inline-link:hover { text-decoration-thickness: 2px; }
.lede { margin-top: 18px; color: var(--label2); font-size: 1.08rem; max-width: 58ch; text-wrap: pretty; }
p { text-wrap: pretty; }
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--mint-text); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow svg { width: 14px; height: 14px; color: var(--mint); }

/* scroll reveal (IntersectionObserver adds .in) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity 0.7s var(--ease-out), transform 0.95s var(--spring); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ── Services: 2 + 1 bento over a full-width launch band ── */
.services {
  display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "proto proto proto proto proto mobile mobile mobile mobile mobile mobile mobile"
    "backend backend backend backend backend mobile mobile mobile mobile mobile mobile mobile"
    "web web web web web web web desktop desktop desktop desktop desktop"
    "modules modules modules modules modules launch launch launch launch launch launch launch";
}
.svc {
  --tint: var(--mint);
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-card); border: 1px solid var(--line);
  background: var(--bg-elev); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column;
  transition: border-color 0.3s;
}
.svc::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--mint) 9%, transparent), transparent 60%);
}
.svc:hover { border-color: color-mix(in srgb, var(--mint) 40%, var(--line)); }
.svc:hover::before { opacity: 1; }
.svc h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.12; margin-top: 18px; }
.svc p { color: var(--label2); margin-top: 10px; font-size: 15.5px; max-width: 44ch; }
.svc-ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--mint) 14%, transparent); color: var(--mint-text);
}
.svc-ic svg { width: 22px; height: 22px; fill: currentColor; }
.svc-mobile { grid-area: mobile; padding-bottom: 0; background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--mint) 12%, transparent), transparent 70%), var(--bg-elev); }
.svc-desktop { grid-area: desktop; }
.svc-modules { grid-area: modules; }
.svc-backend { grid-area: backend; }
.svc-proto { grid-area: proto; }
.svc-web { grid-area: web; }
.svc-shots { position: relative; flex: 1 0 330px; margin-top: 4px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.svc-shots img {
  position: absolute; top: 28px; left: 50%; width: 42%; max-width: 240px; aspect-ratio: 9 / 18; object-fit: cover; object-position: top;
  border-radius: 14% / 7%; /* just past the capture's own screen corners (70px of 540 × 1080) */
  border: 1px solid var(--line); box-shadow: 0 24px 48px -16px var(--shadow); transition: transform 0.7s var(--ease-out);
}
.svc-shots img:first-child { transform: translateX(-98%) rotate(-5deg); }
.svc-shots img:last-child { transform: translate(-2%, 34px) rotate(5deg); }
.svc-mobile:hover .svc-shots img:first-child { transform: translate(-102%, -6px) rotate(-7deg); }
.svc-mobile:hover .svc-shots img:last-child { transform: translate(2%, 26px) rotate(7deg); }
.svc-icons { display: flex; margin-top: auto; padding-top: 28px; }
.svc-icons img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 10px 24px -10px var(--shadow); border: 2px solid var(--bg-elev); }
.svc-icons img + img { margin-left: -10px; }
.svc-launch {
  grid-area: launch; flex-direction: column; align-items: flex-start; gap: 18px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--mint) 16%, var(--bg-elev)), var(--bg-elev) 70%);
  border-color: color-mix(in srgb, var(--mint) 24%, var(--line));
}
.svc-launch > div { flex: 1; }
.svc-launch .btn { margin-top: auto; }
.svc-launch h3 { margin-top: 0; }
.svc-launch p { margin-top: 6px; }
@media (max-width: 960px) {
  .services { grid-template-columns: 1fr 1fr; grid-template-areas: "mobile mobile" "proto backend" "web desktop" "modules modules" "launch launch"; }
  .svc-launch { flex-direction: row; align-items: center; }
  .svc-launch .btn { margin-top: 0; }
}
@media (max-width: 640px) {
  .services { grid-template-columns: 1fr; grid-template-areas: "proto" "mobile" "backend" "web" "desktop" "modules" "launch"; }
  .svc-launch { flex-direction: column; align-items: flex-start; }
  .svc-shots { flex-basis: 310px; }
}

/* ── Products bento ── */
.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "notch notch notch notch notch notch notch barqr barqr barqr barqr barqr"
    "npand npand npand npand npand npand npand barqr barqr barqr barqr barqr"
    "morse morse morse morse morse mirror mirror mirror mirror mirror mirror mirror"
    "morse morse morse morse morse splice splice splice splice splice splice splice";
}
.prod {
  --tint: #43e0a0;
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-card); border: 1px solid var(--line);
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--tint) 15%, transparent), transparent 70%),
    color-mix(in srgb, var(--tint) 3%, var(--bg-elev));
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; min-height: 300px;
  transition: border-color 0.3s, transform 0.5s var(--ease-out);
}
.prod:hover { border-color: color-mix(in srgb, var(--mint) 40%, var(--line)); }
:root[data-theme="light"] .prod {
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--tint) 13%, transparent), transparent 70%),
    color-mix(in srgb, var(--tint) 2%, #fff);
}
/* spotlight that follows the pointer (fine pointers only) */
.prod::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--mint) 9%, transparent), transparent 60%);
}
.prod:hover::before { opacity: 1; }
.prod-notch { grid-area: notch; --tint: #8f8cff; }
.prod-barqr { grid-area: barqr; --tint: #1fa58a; }
.prod-droid { grid-area: droid; --tint: #3fa66f; }
.prod-mirror { grid-area: mirror; --tint: #33d69f; }
.prod-npand { grid-area: npand; --tint: #9aa7ff; }
.prod-morse { grid-area: morse; --tint: #43e0a0; }
.prod-splice { grid-area: splice; --tint: #ff7716; }
.prod-disk { grid-area: disk; --tint: #7c6cf2; }
.prod-hive { grid-area: hive; --tint: #2fc4b2; }
.prod-latch { grid-area: latch; --tint: #3fd492; }
.prod-peek { grid-area: peek; --tint: #43e0a0; }
.prod-akshara { grid-area: akshara; --tint: #2fae7a; }
.prod-montage { grid-area: montage; --tint: #7b6cf6; }
.prod-lattice { grid-area: lattice; --tint: #4f7cf0; }
.prod-wasthu { grid-area: wasthu; --tint: #c9a46a; }
.prod-ripple { grid-area: ripple; --tint: #43e0a0; }
.prod-fps { grid-area: fps; --tint: #8a9099; }
.prod-hexel { grid-area: hexel; --tint: #8b7cf6; }
.prod-pulse { grid-area: pulse; --tint: #43e0a0; }
.prod-brow { grid-area: brow; --tint: #e0b43c; }
.prod-icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 10px 30px -10px var(--shadow); }
.prod-meta { font-size: 13px; font-weight: 600; color: var(--label2); margin-top: 22px; }
.prod h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; }
.prod-tag { font-size: 1.08rem; font-weight: 500; margin-top: 8px; color: var(--label); text-wrap: balance; }
.prod-desc { color: var(--label2); margin-top: 12px; font-size: 15px; max-width: 46ch; }
.prod-links { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.chip-link {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg) 40%, transparent);
  transition: background-color 0.2s, border-color 0.2s, transform 0.18s var(--ease-out);
}
.chip-link:hover { border-color: var(--label3); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.chip-link:active { transform: scale(0.97); }
.chip-link .ic { font-size: 14px; }

/* NotchPal: copy left, oversized hex icon right */
.prod-notch, .prod-wasthu { flex-direction: row; gap: 24px; min-height: 380px; }
.prod-wasthu { min-height: 300px; }
.prod-notch .prod-body > .prod-icon, .prod-wasthu .prod-body > .prod-icon { display: none; }
.prod-notch .prod-body, .prod-wasthu .prod-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.prod-wasthu .prod-hero-icon { align-self: center; width: clamp(120px, 14vw, 190px); height: auto; border-radius: 22%; transform: rotate(5deg); box-shadow: 0 30px 80px -20px rgba(201, 164, 106, 0.4); transition: transform 0.8s var(--ease-out); margin-right: clamp(0px, 4vw, 48px); }
.prod-wasthu:hover .prod-hero-icon { transform: rotate(0deg) scale(1.03); }
.prod-alt { display: block; font-family: "Abhaya Libre", var(--sans); font-size: 0.8em; font-weight: 600; letter-spacing: 0; line-height: 1.2; color: var(--label2); margin-top: 4px; }
.prod-notch .prod-hero-icon { align-self: center; width: clamp(140px, 18vw, 230px); height: auto; border-radius: 22%; transform: rotate(-6deg); box-shadow: 0 30px 80px -20px rgba(143, 140, 255, 0.45); transition: transform 0.8s var(--ease-out); }
.prod-notch:hover .prod-hero-icon { transform: rotate(0deg) scale(1.03); }
/* BarQR: real screenshots sit in their own band under the copy, cropped by the card edge */
.prod-barqr, .prod-morse { padding-bottom: 0; }
.prod-barqr .prod-links, .prod-morse .prod-links { margin-top: 20px; padding-top: 0; }
.barqr-shots {
  position: relative; flex: 1 0 330px; margin-top: 8px; margin-inline: calc(-1 * clamp(24px, 3vw, 36px));
  overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent);
}
.barqr-shots img {
  position: absolute; top: 28px; width: 46%; max-width: 250px; aspect-ratio: 540 / 960; object-fit: cover; object-position: top;
  border-radius: 14% / 7.9%; /* just past the capture's own screen corners (70px of 540 × 960) */
  box-shadow: 0 20px 40px -14px var(--shadow); transition: transform 0.7s var(--ease-out);
}
.barqr-shots img:first-child { left: 50%; transform: translateX(-96%) rotate(-4deg); }
.barqr-shots img:last-child { left: 50%; transform: translate(-4%, 28px) rotate(4deg); }
.prod-barqr:hover .barqr-shots img:first-child, .prod-morse:hover .barqr-shots img:first-child { transform: translate(-100%, -6px) rotate(-6deg); }
.prod-barqr:hover .barqr-shots img:last-child, .prod-morse:hover .barqr-shots img:last-child { transform: translate(0, 20px) rotate(6deg); }
/* MirrorMe: a strip of the live camera feed in its own right-hand column */
.prod-mirror, .prod-npand, .prod-splice { padding-right: clamp(130px, 13vw, 170px); }
.prod-npand .side-shot, .prod-splice .side-shot,
.prod-mirror .mirror-shot {
  position: absolute; right: 18px; top: 22px; bottom: 22px; width: clamp(96px, 10vw, 132px); height: auto; object-fit: cover; object-position: top;
  border-radius: 16px; transform: rotate(4deg); box-shadow: 0 20px 40px -14px var(--shadow); transition: transform 0.7s var(--ease-out);
}
.prod-mirror:hover .mirror-shot, .prod-npand:hover .side-shot, .prod-splice:hover .side-shot { transform: rotate(1deg) translateY(-4px); }
.prod-droid .prod-desc, .prod-disk .prod-desc, .prod-hive .prod-desc,
.prod-latch .prod-desc, .prod-peek .prod-desc, .prod-akshara .prod-desc { max-width: 40ch; }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "notch notch" "npand npand" "barqr barqr" "mirror splice" "morse morse"; }
  .barqr-shots { flex-basis: 410px; }
  .barqr-shots img { width: 40%; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "notch" "npand" "barqr" "morse" "mirror" "splice"; }
  .prod-notch, .prod-wasthu { flex-direction: column-reverse; min-height: 0; }
  .prod-notch .prod-hero-icon, .prod-wasthu .prod-hero-icon { align-self: flex-start; width: 72px; border-radius: 16px; transform: none; margin: 0; }
  .barqr-shots img { width: 48%; }
  .prod-mirror, .prod-npand, .prod-splice { padding-right: 132px; }
}

/* ── Open source: 2 x 2 package cards ── */
.pkgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pkg {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px;
  border-radius: var(--r-inner); border: 1px solid var(--line); background: var(--bg-elev); transition: border-color 0.25s, transform 0.4s var(--ease-out);
}
.pkg:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.pkg-name span { color: var(--mint-text); }
.pkg-desc { color: var(--label2); margin-top: 8px; font-size: 15px; max-width: 54ch; }
.pkg-links { display: flex; gap: 8px; }
@media (max-width: 760px) { .pkgs { grid-template-columns: 1fr; } }
.more-link { margin-top: 28px; display: inline-flex; gap: 6px; align-items: center; font-size: 15px; font-weight: 600; color: var(--mint-text); }
.more-link .ic { transition: transform 0.3s var(--ease-out); }
.more-link:hover .ic { transform: translate(2px, -2px); }

/* ── Principles: sticky title, statements scroll past ── */
.principles { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.principles-title { position: sticky; top: 120px; align-self: start; }
.principle { padding-block: 8px 40px; }
.principle + .principle { padding-top: 40px; border-top: 1px solid var(--line); }
.principle h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; display: flex; gap: 16px; align-items: baseline; }
.principle h3 svg { width: 0.62em; height: 0.62em; color: var(--mint); flex: none; transform: translateY(0.04em); }
/* outline hexagon that fills with mint from the bottom up on hover */
.hex-fill { overflow: visible; }
.hf-line { fill: none; stroke: currentColor; stroke-width: 7; stroke-linejoin: round; }
.hf-fill { fill: currentColor; clip-path: inset(100% 0 0 0); transition: clip-path 0.5s var(--ease-out); }
.principle:hover .hf-fill { clip-path: inset(0 0 0 0); transition-duration: 0.6s; }
@media (prefers-reduced-motion: reduce) { .hf-fill { transition: none; } }
.principle p { margin-top: 14px; color: var(--label2); font-size: 1.05rem; max-width: 48ch; padding-left: calc(0.62em + 16px); }
@media (max-width: 860px) {
  .principles { grid-template-columns: 1fr; }
  .principles-title { position: static; }
  .principle p { padding-left: 0; }
}

/* ── Studio / founder ── */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.studio-copy p { color: var(--label2); font-size: 1.08rem; max-width: 52ch; margin-top: 18px; }
.studio-copy p strong { color: var(--label); font-weight: 600; }
.head-links { padding-top: 22px; }
.studio-links { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.timeline { padding-top: 8px; border-top: 1px solid var(--line); }
.timeline li { list-style: none; padding: 13px 0; display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.timeline li span { color: var(--label2); margin-left: 6px; }
.timeline time { font-size: 13px; color: var(--label3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .studio { grid-template-columns: 1fr; align-items: start; }
}

/* ── Contact ── */
.contact { text-align: center; padding-block: clamp(80px, 10vw, 140px) clamp(96px, 12vw, 160px); position: relative; overflow: hidden; isolation: isolate; }
.contact::before { /* faint hex cell field behind the closing statement */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 54 16v30L28 61 2 46V16zM28 61v36M2 46 0 47M54 46l2 1' fill='none' stroke='%2343e0a0' stroke-opacity='.16'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent 75%);
}
.contact-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.contact-mark { width: clamp(120px, 14vw, 168px); aspect-ratio: 1; margin: 0 auto 36px; }
.contact-mark { position: relative; }
.contact-mark::before { /* soft mint halo behind the liquid mark */
  content: ""; position: absolute; inset: -45%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mint) 26%, transparent), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .contact-mark::before { animation: halo 6s var(--ease-in-out) infinite alternate; }
  @keyframes halo { from { opacity: 0.55; transform: scale(0.92); } to { opacity: 1; transform: scale(1.05); } }
}
.contact-mark img { width: 100%; height: 100%; padding: 7.8%; transition: opacity 0.8s var(--ease-out); }
:root[data-theme="light"] .contact-mark img { filter: invert(1) brightness(0.2); }
.contact:has(.scene-ready) .contact-mark img { opacity: 0; }
.contact .h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); max-width: 16ch; margin-inline: auto; }
.contact .lede { margin-inline: auto; }
.contact-cta { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.email-copy { font-size: 15px; }
.email-copy.copied { color: var(--mint-text); border-color: var(--mint-text); }

/* ── Footer ── */
.footer { border-top: 1px solid var(--line); padding-block: 36px 40px; font-size: 14px; color: var(--label2); }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer .brand { color: var(--label); font-size: 13px; }
.footer .brand-mark { width: 22px; height: 22px; }
.footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer nav a:hover { color: var(--label); }
@media (max-width: 760px) { .footer { padding-bottom: 110px; } }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: var(--z-toast); padding: 10px 18px; border-radius: 999px; font-size: 14px;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.4s var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { font-weight: 600; color: var(--mint-text); }
@media (max-width: 760px) { .toast { bottom: 90px; } }

/* theme cross-fade */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

/* iOS-style spring, where the browser supports linear() easing */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1); }
}

/* ── Touch feedback: surfaces give under the finger and spring back ── */
.prod, .svc, .pkg { transition: border-color 0.3s, transform 0.55s var(--spring); }
.prod:active, .svc:active, .pkg:active { transform: scale(0.985); transition-duration: 0.12s; }
.btn:active { transform: scale(0.96); }
.btn { transition: transform 0.45s var(--spring), background-color 0.2s, border-color 0.2s, color 0.2s; }

/* phone tab bar: one pill slides to the active section */
.tab-pill { display: none; }
@media (max-width: 760px) {
  /* Liquid Glass pill: each edge has its own spring, so on the move the pill stretches like a drop */
  .tab-pill {
    --l-dur: 0.4s; --r-dur: 0.4s;
    display: block; position: absolute; top: 5px; bottom: 5px; left: var(--pill-l, 0px); right: var(--pill-r, 100%);
    border-radius: 999px; background-color: var(--mint); opacity: var(--pill-o, 0);
    transition: left var(--l-dur) var(--ease-slide), right var(--r-dur) var(--ease-slide),
      background-color 0.2s var(--ease-press), box-shadow 0.2s var(--ease-press), scale 0.35s var(--ease-press), opacity 0.25s;
  }
  .tab-pill.snap { transition: opacity 0.25s; }
  .tabbar[data-dir="right"] .tab-pill { --l-dur: 0.52s; --r-dur: 0.3s; } /* leading edge first, trailing edge catches up */
  .tabbar[data-dir="left"] .tab-pill { --l-dur: 0.3s; --r-dur: 0.52s; }
  /* while moving it is a clear lens: the guide's knob, lifted */
  .tabbar.pill-moving .tab-pill {
    background-color: rgb(255 255 255 / 0.1); scale: 1.06 1.18;
    box-shadow: 0 6px 24px rgb(0 0 0 / 0.2), inset 0 0 0 1.5px rgb(255 255 255 / 0.5), inset 0 2px 1px rgb(255 255 255 / 0.45),
      inset 2px 7px 24px rgb(0 0 0 / 0.09), inset -2px -7px 24px rgb(255 255 255 / 0.16);
  }
  :root[data-theme="light"] .tabbar.pill-moving .tab-pill { background-color: rgb(255 255 255 / 0.55); }
  .tabbar a { position: relative; z-index: 1; transition: color 0.2s var(--ease-press); }
  .tabbar a[aria-current="true"] { background: none; }
  .tabbar.pill-moving a[aria-current="true"] { color: var(--label); } /* dark-on-mint text would vanish on the clear lens */
}
@media (prefers-reduced-motion: reduce) {
  .tab-pill, .morse-stage { transition: none; }
}

/* ── Hero headline: each word rises out of its own mask ── */
.split .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.split .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .split .w > span { transform: translateY(110%); animation: word-up 1.1s var(--ease-out) forwards; animation-delay: calc(var(--w, 0) * 70ms + 80ms); }
  @keyframes word-up { to { transform: none; } }
}

/* ── Film grain: takes the digital flatness off the large dark fields ── */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::after { opacity: 0.06; mix-blend-mode: multiply; }
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

/* ── Nav steps aside while reading down, returns on the way up (desktop; phones keep the tab bar) ── */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .nav { transition: transform 0.5s var(--ease-out), opacity 0.3s; }
  .nav.nav-hidden { transform: translateY(calc(-100% - 16px)); opacity: 0; }
  .nav:focus-within { transform: none; opacity: 1; }
}

/* ── Magnetic primary buttons: JS writes --mag-x/--mag-y (fine pointers only) ── */
.btn.magnetic { translate: var(--mag-x, 0) var(--mag-y, 0); transition: translate 0.6s var(--spring), transform 0.45s var(--spring), background-color 0.2s, border-color 0.2s, color 0.2s; }
.btn.magnetic.pulling { transition: translate 0.12s linear, transform 0.45s var(--spring), background-color 0.2s, border-color 0.2s, color 0.2s; }
.btn.magnetic .ic { transition: translate 0.4s var(--spring); }
.btn.magnetic:hover .ic { translate: 3px 0; }

/* ── Hero copy drifts up and fades as it scrolls away (JS writes --drift, 0 → 1) ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { translate: 0 calc(var(--drift, 0) * -60px); opacity: calc(1 - var(--drift, 0) * 0.9); }
  .hero .morse { translate: 0 calc(var(--drift, 0) * -24px); }
}

/* ── Homepage Work: a drifting wall of app icons, then platform tiles into the catalog ── */
.app-wall {
  --icon: clamp(64px, 7vw, 92px); --gap: clamp(14px, 1.6vw, 22px);
  display: grid; gap: var(--gap); margin-top: clamp(8px, 2vw, 24px); padding-block: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wall-row { display: flex; width: max-content; }
.wall-track { display: flex; gap: var(--gap); padding-right: var(--gap); list-style: none; min-width: 100vw; justify-content: space-between; }
.wall-track a { display: block; width: var(--icon); border-radius: 23%; transition: transform 0.45s var(--spring); }
.wall-track img { display: block; width: 100%; aspect-ratio: 1; border-radius: 23%; box-shadow: 0 14px 30px -14px var(--shadow); }
.wall-track a:active { transform: scale(0.95); transition-duration: 0.15s; }
.wall-track a:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
@media (hover: hover) { .wall-track a:hover { transform: translateY(-6px) scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .wall-row { animation: wall-drift 120s linear infinite; }
  .wall-rev { animation-direction: reverse; animation-duration: 140s; }
  .app-wall:hover .wall-row, .app-wall:focus-within .wall-row { animation-play-state: paused; }
}
@keyframes wall-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .app-wall { -webkit-mask-image: none; mask-image: none; }
  .wall-row { width: auto; justify-content: center; }
  .wall-track { flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
  .wall-track[aria-hidden] { display: none; }
  .wall-track { min-width: 0; }
  .wall-rev { display: none; }
}

.platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 40px); }
.plat {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 240px;
  padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg-elev);
  transition: border-color 0.3s, transform 0.5s var(--ease-out);
}
.plat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--mint) 9%, transparent), transparent 60%);
}
.plat h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.12; margin-top: 18px; }
.plat p { color: var(--label2); margin: 8px 0 24px; font-size: 15px; }
.plat-go {
  margin-top: auto; align-self: flex-end; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--label); transition: background-color 0.25s, color 0.25s, border-color 0.25s, translate 0.45s var(--spring);
}
.plat-go svg { width: 16px; height: 16px; fill: currentColor; }
.plat:hover, .plat:focus-visible { border-color: color-mix(in srgb, var(--mint) 40%, var(--line)); }
.plat:hover::before { opacity: 1; }
.plat:hover .plat-go, .plat:focus-visible .plat-go { background: var(--mint); border-color: var(--mint); color: var(--on-mint); translate: 3px 0; }
.plat:active { transform: scale(0.985); transition-duration: 0.15s; }
.plat:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (max-width: 1000px) { .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .platforms { grid-template-columns: 1fr; }
  .plat { min-height: 0; }
  .plat-go { position: absolute; top: clamp(22px, 2.4vw, 30px); right: clamp(22px, 2.4vw, 30px); margin: 0; }
}

/* ── /apps/: the full catalog ── */
.page-apps .catalog { padding-top: clamp(120px, 14vw, 168px); min-height: 100dvh; }
.page-apps .h2 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.page-apps .section-head { margin-bottom: 36px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--label2); margin-bottom: 20px; transition: color 0.15s; }
.back-link .ic { font-size: 14px; }
@media (hover: hover) { .back-link:hover { color: var(--label); } }

.catalog-bar {
  position: sticky; top: 84px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px; border-radius: 999px;
}
.catalog-bar > * { position: relative; z-index: 1; }
/* sits over dense text while sticky: the guide's panel recipe (heavier frost) instead of the thin control glass */
.catalog-bar.glass {
  --glass: rgb(28 28 31 / 0.86);
  -webkit-backdrop-filter: blur(22px) saturate(1.9); backdrop-filter: blur(22px) saturate(1.9);
  box-shadow: inset 0 0 0 0.5px var(--glass-edge), 0 12px 40px rgb(0 0 0 / 0.38);
}
:root[data-theme="light"] .catalog-bar.glass { --glass: rgb(250 250 252 / 0.86); box-shadow: inset 0 0 0 0.5px var(--glass-edge), 0 12px 40px rgb(25 25 35 / 0.12); }
.filters { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.filters::-webkit-scrollbar { display: none; }
.filter {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--label2); -webkit-tap-highlight-color: transparent;
  transition-property: color, background-color, transform; transition-duration: 0.15s, 0.2s, 0.3s; transition-timing-function: var(--ease-press);
}
.filter:active { background-color: var(--glass-active); transition-duration: 0s; }
@media (prefers-reduced-motion: no-preference) { .filter:active { transform: scale(1.08); } }
.filter[aria-pressed="true"] { color: var(--on-mint); background: var(--mint); }
@media (hover: hover) { .filter[aria-pressed="false"]:hover { color: var(--label); background: color-mix(in srgb, var(--label) 7%, transparent); } }
.search {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; min-width: 220px;
  border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--label2); transition: border-color 0.15s;
}
.search:focus-within { border-color: var(--mint); }
.search .ic { font-size: 16px; }
.search input { flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--label); background: none; border: 0; outline: 0; }
.search input::placeholder { color: var(--label3); }

.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.app {
  --tint: #43e0a0;
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column;
  padding: 26px; border-radius: var(--r-card); border: 1px solid var(--line);
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--tint) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--tint) 3%, var(--bg-elev));
  transition: border-color 0.3s, transform 0.55s var(--spring), box-shadow 0.6s var(--ease-out);
}
:root[data-theme="light"] .app {
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--tint) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--tint) 2%, #fff);
}
.app[hidden] { display: none; }
.app::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--mint) 9%, transparent), transparent 60%);
}
@media (hover: hover) {
  .app:hover { border-color: color-mix(in srgb, var(--mint) 40%, var(--line)); }
  .app:hover::before { opacity: 1; }
}
.app.flash { border-color: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 22%, transparent); }
.app-head { display: flex; align-items: center; gap: 16px; }
.app-icon { width: 56px; height: 56px; flex: none; border-radius: 13px; box-shadow: 0 10px 26px -10px var(--shadow); }
.app-name { font-size: 1.4rem; font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; }
.app-name .prod-alt { display: inline; font-size: 0.78em; margin: 0 0 0 6px; }
.app-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--label2); }
.app-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: 0.01em;
  color: var(--label2); border: 1px solid var(--line-strong);
}
.app .prod-tag { margin-top: 18px; }
.app .prod-desc { margin-top: 8px; font-size: 14.5px; }
.app .prod-links { padding-top: 22px; }
.catalog-empty { display: grid; justify-items: center; gap: 14px; padding: 72px 0; color: var(--label2); text-align: center; }
.catalog-empty[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .app:not([hidden]) { animation: app-in 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
  @keyframes app-in { from { opacity: 0; transform: translateY(12px); } }
}
@media (max-width: 760px) {
  .catalog-bar { top: 74px; border-radius: 22px; }
  .search { min-width: 0; flex: 1 1 100%; }
  .filters { flex: 1 1 100%; flex-wrap: wrap; overflow: visible; } /* every chip in view: wrap, never scroll under an edge */
  .page-apps .footer { padding-bottom: 110px; }
}