/* ============================================================
   YMT — shared layout for the three service pages
   ============================================================ */

/* ---------- Page themes ---------- */
body[data-theme="marketing"] { --accent-a: var(--magenta); --accent-b: var(--violet);  --accent-glow: rgba(255,45,111,0.40); }
body[data-theme="live"]      { --accent-a: var(--sky);     --accent-b: var(--indigo);  --accent-glow: rgba(34,200,245,0.40); }
body[data-theme="ai"]        { --accent-a: var(--emerald); --accent-b: var(--lime);    --accent-glow: rgba(47,191,110,0.40); }

/* ---------- Hero (first stage) ---------- */
.hero-stage { --stage-h: 340vh; }
.hero-copy { max-width: 900px; display: grid; gap: 1.35rem; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--glass-line);
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--whisper);
}

/* Live "ON AIR" tally */
.tally {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.85rem; border-radius: 999px;
  border: 1px solid rgba(224,27,52,0.45);
  background: rgba(224,27,52,0.12);
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: #ff8093;
}
.tally i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #e01b34; box-shadow: 0 0 10px 2px rgba(224,27,52,0.8);
  animation: blip 1.6s ease-in-out infinite;
}
@keyframes blip { 50% { opacity: 0.25; transform: scale(0.72); } }

/* ---------- Split rows ---------- */
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: center;
}
.split-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--glass-line);
  background: linear-gradient(150deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}
.split-media video, .split-media canvas, .split-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.split-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 40%, rgba(4,6,13,0.55));
  pointer-events: none;
}

/* ---------- Sticky index (left rail sticks, right side scrolls) ---------- */
.sticky-set {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
.sticky-side { position: sticky; top: 108px; display: grid; gap: 1.2rem; }
@media (max-width: 900px) {
  .sticky-set { grid-template-columns: 1fr; }
  /* Once the grid collapses to one column the heading must stop sticking —
     otherwise it pins to the viewport and the list scrolls underneath it. */
  .sticky-side { position: static; top: auto; }
}
.sticky-list { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

/* ---------- Feature blocks ---------- */
.feature {
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  display: grid;
  gap: 0.8rem;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s, border-color 0.5s;
}
.feature:hover { transform: translateX(6px); background: var(--glass-bg-hi); border-color: var(--glass-line-hi); }
.feature-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.feature-tag {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-b);
}

/* ---------- Spec table ---------- */
.spec { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.spec th, .spec td { text-align: left; padding: 0.95rem 1rem; border-bottom: 1px solid var(--glass-line); vertical-align: top; }
.spec th {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--whisper); font-weight: 400; width: 30%;
}
.spec td { color: var(--mist); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec-wrap { overflow-x: auto; padding: clamp(0.6rem, 1.6vw, 1.4rem); }

/* ---------- Before / after ---------- */
.compare {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.compare-col { padding: clamp(1.5rem, 2.6vw, 2.2rem); display: grid; gap: 1rem; align-content: start; }
.compare-col.is-before { opacity: 0.72; }
.compare-col.is-after { border-color: var(--accent-a); box-shadow: 0 24px 70px -24px var(--accent-glow), var(--glass-shadow); }
.compare-line { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.95rem; color: var(--mist); }
.compare-line svg { flex: none; width: 17px; height: 17px; margin-top: 0.28rem; }
.is-before .compare-line svg { color: rgba(244,246,251,0.32); }
.is-after  .compare-line svg { color: var(--accent-a); }

/* ---------- Stack diagram ---------- */
.stack-viz { display: grid; gap: 0.6rem; }
.stack-layer {
  position: relative;
  padding: 1.1rem clamp(1.1rem, 2.2vw, 1.8rem);
  border-radius: var(--r-md);
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem;
  justify-content: space-between;
  transition: border-color 0.4s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s;
}
.stack-layer:hover { border-color: var(--accent-a); transform: translateX(8px); background: var(--glass-bg-hi); }
.stack-layer::before {
  content: "";
  position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-a), var(--accent-b));
  opacity: 0.55;
}
.stack-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.stack-note { font-size: 0.86rem; color: var(--whisper); }

/* ---------- Logo / client wall ---------- */
.wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.wall span {
  background: rgba(7,11,22,0.7);
  padding: 1.6rem 1rem;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.02em;
  color: rgba(244,246,251,0.4);
  transition: color 0.4s, background 0.4s;
}
.wall span:hover { color: var(--paper); background: rgba(255,255,255,0.045); }

/* ---------- Quote ---------- */
.quote {
  padding: clamp(2rem, 4vw, 3.2rem);
  display: grid; gap: 1.5rem;
  max-width: 900px; margin-inline: auto;
  text-align: center; justify-items: center;
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.95rem);
  line-height: 1.32; letter-spacing: -0.028em;
}
.quote cite { font-style: normal; font-size: 0.88rem; color: var(--whisper); }

/* ---------- Prev / next pager ---------- */
.pager {
  display: grid;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.pager a {
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: grid; gap: 0.45rem;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, background 0.4s;
}
.pager a:hover { transform: translateY(-5px); border-color: var(--glass-line-hi); background: var(--glass-bg-hi); }
.pager-key { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--whisper); }
.pager-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }

/* ---------- Rate card ---------- */
.tiers {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: start;
}
.tier { padding: clamp(1.6rem, 2.6vw, 2.2rem); display: grid; gap: 1rem; align-content: start; position: relative; }
.tier.is-best { border-color: var(--accent-a); box-shadow: 0 26px 74px -28px var(--accent-glow), var(--glass-shadow); }
.tier-flag {
  position: absolute; top: 0; right: clamp(1.6rem, 2.6vw, 2.2rem);
  transform: translateY(-50%);
  padding: 0.3rem 0.8rem; border-radius: 999px;
  background: linear-gradient(120deg, var(--accent-a), var(--accent-b));
  color: #05070f; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
}
.tier-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; }
.tier-for { font-size: 0.86rem; color: var(--whisper); }
.tier-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.7rem); line-height: 1;
  letter-spacing: -0.04em; display: flex; align-items: baseline; gap: 0.4rem;
}
.tier-price small { font-size: 0.9rem; font-weight: 500; color: var(--whisper); letter-spacing: 0; }
.tier-hours { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--accent-b); text-transform: uppercase; }
.tier ul { display: grid; gap: 0.45rem; margin-top: 0.35rem; }
.tier li { position: relative; padding-left: 1.3rem; font-size: 0.9rem; color: var(--mist); }
.tier li::before {
  content: ""; position: absolute; left: 0; top: 0.58em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-a); opacity: 0.8;
}
.tier-vol { display: grid; gap: 0.3rem; padding-top: 0.6rem; border-top: 1px solid var(--glass-line); }
.tier-vol span { display: flex; justify-content: space-between; font-size: 0.84rem; color: var(--whisper); }
.tier-vol b { color: var(--mist); font-weight: 500; }

/* ---------- Portfolio gallery ---------- */
.gal {
  display: grid;
  gap: clamp(.5rem, 1vw, .85rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  grid-auto-rows: 170px;
  grid-auto-flow: dense;
}
.gal-item {
  position: relative;
  overflow: hidden;
  appearance: none; -webkit-appearance: none;
  color: inherit; font: inherit;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-line);
  background: rgba(255,255,255,.03);
  cursor: zoom-in;
  padding: 0;
  display: block;
}
/* A few tiles break the grid so it doesn't read as a contact sheet */
.gal-item.is-wide { grid-column: span 2; }
.gal-item.is-tall { grid-row: span 2; }
@media (max-width: 560px) { .gal-item.is-wide { grid-column: span 1; } }

.gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(0.16, 1, 0.3, 1), filter .6s;
  filter: saturate(.85) brightness(.82);
}
.gal-item:hover img, .gal-item:focus-visible img {
  transform: scale(1.06);
  filter: saturate(1) brightness(1);
}
.gal-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 2.4rem .85rem .8rem;
  background: linear-gradient(180deg, transparent, rgba(4,6,13,.92));
  font-size: .78rem; line-height: 1.35; color: var(--paper);
  text-align: left;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s, transform .55s cubic-bezier(0.16, 1, 0.3, 1);
}
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { opacity: 1; transform: none; }

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(2,3,8,.9);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  opacity: 0; pointer-events: none;
  transition: opacity .35s;
}
.lb.is-open { opacity: 1; pointer-events: auto; }
.lb img {
  max-width: 100%; max-height: 82vh;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-line-hi);
  box-shadow: 0 40px 120px -30px #000;
}
.lb-cap {
  position: absolute; left: 0; right: 0; bottom: clamp(1rem, 3vw, 2rem);
  text-align: center; font-size: .88rem; color: var(--mist);
  padding-inline: 4rem;
}
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--glass-line-hi);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--paper);
}
.lb-btn:hover { background: rgba(255,255,255,.14); }
.lb-prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lb-next { right: clamp(.5rem, 2vw, 1.5rem); }
.lb-close { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); transform: none; }

/* ---------- Case studies ---------- */
.case {
  padding: clamp(1.5rem, 3vw, 2.6rem);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.case + .case { margin-top: clamp(1rem, 2vw, 1.5rem); }
.case-head {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--glass-line);
}
.case-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
  letter-spacing: -0.03em; line-height: 1.05;
}
.case-sector {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-b);
}
.case-flow {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: stretch;
}
@media (max-width: 780px) {
  .case-flow { grid-template-columns: 1fr; }
  .case-arrow { transform: rotate(90deg); justify-self: center; }
}
.case-side { display: grid; gap: .7rem; align-content: start; }
.case-tag {
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .2em; text-transform: uppercase;
}
.case-side.before .case-tag { color: rgba(244,246,251,.42); }
.case-side.after  .case-tag { color: var(--accent-a); }
.case-box {
  padding: clamp(1rem, 1.8vw, 1.4rem);
  border-radius: var(--r-md);
  border: 1px solid var(--glass-line);
  background: rgba(255,255,255,.022);
  display: grid; gap: .55rem;
  height: 100%;
}
.case-side.after .case-box {
  border-color: color-mix(in srgb, var(--accent-a) 45%, transparent);
  background: color-mix(in srgb, var(--accent-a) 7%, transparent);
}
.case-step {
  position: relative; padding-left: 1.5rem;
  font-size: .93rem; line-height: 1.5; color: var(--mist);
}
.case-step::before {
  content: ""; position: absolute; left: .15rem; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(244,246,251,.28);
}
.case-side.after .case-step::before { background: var(--accent-a); }
.case-side.before .case-box { opacity: .78; }
.case-arrow {
  align-self: center; color: var(--accent-a);
  display: grid; place-items: center;
}
.case-out {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: center; padding-top: 1.1rem;
  border-top: 1px solid var(--glass-line);
}
.case-out b {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; color: var(--paper); letter-spacing: -.02em;
}
.case-out span { color: var(--mist); font-size: .93rem; }

/* ---------- Client logo chip ----------
   Client marks are drawn for light backgrounds (ShinSen ships as a white
   JPEG), so they sit on a light chip rather than being knocked out. */
.case-logo {
  flex: none;
  display: grid; place-items: center;
  /* Fixed box: max-height alone will not stop a 700px-wide mark from
     stretching the chip, because intrinsic width still drives flex sizing. */
  width: 148px; height: 66px;
  padding: .6rem .9rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 32px -14px rgba(0,0,0,.7);
  overflow: hidden;
}
.case-logo img {
  /* Fill the box and letterbox inside it. auto + percentage max-* does not
     reliably constrain a grid item, which crops tall marks. */
  width: 100%; height: 100%;
  object-fit: contain;
}
.case-head-l { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

/* In-case photo proof */
.case-shots {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.case-shot {
  position: relative; overflow: hidden; padding: 0;
  /* It is a <button>, so the UA button face must be cleared or it paints
     a light grey rectangle straight over the image. */
  appearance: none; -webkit-appearance: none;
  background: transparent; color: inherit; font: inherit;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-line);
  aspect-ratio: 4 / 3; cursor: zoom-in; display: block;
}
.case-shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.86);
  transition: transform .9s cubic-bezier(0.16,1,0.3,1), filter .6s;
}
.case-shot:hover img { transform: scale(1.05); filter: none; }

/* Client wall on the hub / elsewhere */
.logo-wall {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.logo-wall span {
  background: rgba(7,11,22,.72);
  padding: 1.7rem 1.5rem;
  display: grid; place-items: center;
  transition: background .4s;
}
.logo-wall span:hover { background: rgba(255,255,255,.045); }
.logo-wall img {
  max-height: 34px; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(1) brightness(1.7) contrast(.85);
  opacity: .55;
  transition: filter .5s, opacity .5s;
}
.logo-wall span:hover img { filter: none; opacity: 1; }


/* ---------- Tech stack strip ---------- */
.stack-strip {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stack-chip {
  background: rgba(7,11,22,.72);
  padding: clamp(1.25rem, 2.4vw, 1.9rem) 1rem;
  display: grid; gap: .8rem; justify-items: center; text-align: center;
  transition: background .45s;
}
.stack-chip:hover { background: rgba(255,255,255,.05); }
.stack-chip svg {
  width: 34px; height: 34px;
  color: var(--accent-a);
  transition: transform .55s cubic-bezier(0.16,1,0.3,1), color .4s;
}
.stack-chip:hover svg { transform: translateY(-3px); color: var(--accent-b); }
.stack-chip b {
  font-family: var(--font-display); font-weight: 600;
  font-size: .96rem; letter-spacing: -.015em; color: var(--paper);
}
.stack-chip span { font-size: .8rem; color: var(--whisper); line-height: 1.4; }

/* ---------- Founder / practice lead ---------- */
.lead {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
}
@media (max-width: 860px) { .lead { grid-template-columns: 1fr; } }

.lead-portrait {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  /* the cohort frame is 0.743 — 3:4 keeps essentially all of it */
  aspect-ratio: 3 / 4;
}
.lead-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lead-portrait::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 45%, rgba(4,6,13,.65));
  pointer-events: none;
}
.lead-body { display: grid; gap: 1.1rem; align-content: center; }
.lead-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  letter-spacing: -.035em; line-height: 1.05;
}
.lead-role { color: var(--accent-b); font-size: .95rem; }
.lead-cv { display: grid; gap: .55rem; margin-top: .35rem; }
.lead-cv li {
  position: relative; padding-left: 1.5rem;
  color: var(--mist); font-size: .96rem; line-height: 1.55;
}
.lead-cv li::before {
  content: ""; position: absolute; left: .1rem; top: .62em;
  width: 7px; height: 7px; border-radius: 2px;
  background: linear-gradient(120deg, var(--accent-a), var(--accent-b));
}
.lead-strip {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.lead-shot {
  position: relative; overflow: hidden; padding: 0; display: block;
  appearance: none; -webkit-appearance: none;
  background: transparent; color: inherit; font: inherit;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-line);
  aspect-ratio: 3 / 2; cursor: zoom-in;
}
.lead-shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85) brightness(.8);
  transition: transform .9s cubic-bezier(0.16,1,0.3,1), filter .6s;
}
.lead-shot:hover img { transform: scale(1.06); filter: none; }

/* ---------- Credential chips ---------- */
.creds {
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: center;
  margin-top: .6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--glass-line);
}
.cred-chip {
  flex: none;
  display: grid; place-items: center;
  width: 168px; height: 62px;
  padding: .55rem .9rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 32px -16px rgba(0,0,0,.7);
  overflow: hidden;
}
.cred-chip img { width: 100%; height: 100%; object-fit: contain; }
.cred-note { font-size: .9rem; color: var(--mist); max-width: 34ch; line-height: 1.5; }

/* ---------- Model-agnostic wall ---------- */
.models {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.model {
  background: rgba(7,11,22,.72);
  padding: clamp(1.2rem, 2.2vw, 1.7rem) .9rem;
  display: grid; gap: .7rem; justify-items: center; text-align: center;
  transition: background .45s;
}
.model:hover { background: rgba(255,255,255,.05); }
.model svg {
  width: 30px; height: 30px;
  color: rgba(244,246,251,.55);
  transition: color .4s, transform .55s cubic-bezier(0.16,1,0.3,1);
}
.model:hover svg { color: var(--accent-a); transform: translateY(-3px); }
.model b {
  font-family: var(--font-display); font-weight: 600;
  font-size: .9rem; letter-spacing: -.01em; color: var(--mist);
}
.model:hover b { color: var(--paper); }
.model span {
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--whisper);
}