/* ============================================================
   SEVEN DRAGONS — Custom CSS layer (beyond Tailwind CDN)
   Dark Cinematic Tactical Premium.
   Tokens mirror DESIGN.md. Easing cubic-bezier(0.23,1,0.32,1).
   ============================================================ */

:root {
  --ink:            #050505;
  --ink-soft:       #0F0F0F;
  --ink-2:          #0A0A0B;
  --crimson:        #9F1239;
  --crimson-bright: #BE123C;
  --crimson-glow:   rgba(159, 18, 57, 0.55);
  --silver:         #C4C4C4;
  --cyan:           #67E8F9;
  --text-primary:   #F8FAFC;
  --text-secondary: #CBD5E1;
  --hairline:       rgba(255, 255, 255, 0.06);
  --hairline-soft:  rgba(255, 255, 255, 0.05);
  --card-border:    rgba(255, 255, 255, 0.07);
  --ease-premium:   cubic-bezier(0.23, 1, 0.32, 1);
  --nav-h:          76px;
}

/* ---------- Base ---------- */
* { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;          /* native fallback; Lenis enhances if present */
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background-color: var(--ink);
  color: var(--text-primary);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--crimson); color: #fff; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: #1c1c1f; border-radius: 9999px; border: 2px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover { background: var(--crimson); }
html { scrollbar-color: #1c1c1f var(--ink); scrollbar-width: thin; }

/* ---------- Typography helpers ---------- */
.font-display { font-family: "Satoshi", "Inter", sans-serif; }

.display-xl {
  font-family: "Satoshi", "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(2.85rem, 8.5vw, 7.5rem);
  line-height: 1.04;          /* was 0.95 — too tight, clipped 'g' descenders */
  letter-spacing: -0.04em;
}
.display-lg {
  font-family: "Satoshi", "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.display-md {
  font-family: "Satoshi", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.label-md {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.text-gradient-silver {
  background: linear-gradient(180deg, #ffffff 0%, #9ca3af 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* clip:text paints only the line-box; pad so descenders (g, p, y) render */
  padding-bottom: 0.12em;
}
.text-crimson { color: var(--crimson-bright); }

/* ---------- Layout rhythm (Aureo: 80px section padding, 8px grid) ---------- */
.section-pad { padding-top: clamp(72px, 10vw, 130px); padding-bottom: clamp(72px, 10vw, 130px); }
.container-x { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.hairline { height: 1px; width: 100%; background: var(--hairline-soft); }

/* ---------- Glassmorphism card (DESIGN.md) ---------- */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid var(--card-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 1px;                          /* Aureo: sharp cards */
  transition: transform .5s var(--ease-premium),
              border-color .5s var(--ease-premium),
              box-shadow .5s var(--ease-premium),
              background .5s var(--ease-premium);
  will-change: transform;
}
.glass:hover {
  transform: translateY(-6px);
  border-color: rgba(159, 18, 57, 0.45);
  box-shadow: 0 24px 60px -28px var(--crimson-glow),
              0 0 0 1px rgba(159,18,57,0.12),
              inset 0 1px 0 rgba(255,255,255,0.05);
}
/* hover crimson sheen */
.glass-sheen { position: relative; overflow: hidden; }
.glass-sheen::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(550px circle at var(--mx,50%) var(--my,0%),
              rgba(159,18,57,0.16), transparent 42%);
  opacity: 0; transition: opacity .5s var(--ease-premium); pointer-events: none;
}
.glass-sheen:hover::after { opacity: 1; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  padding: 1rem 1.9rem; border-radius: 8px;       /* control radius */
  transition: transform .4s var(--ease-premium), box-shadow .4s var(--ease-premium),
              background .35s var(--ease-premium), color .35s var(--ease-premium),
              border-color .35s var(--ease-premium);
  will-change: transform; cursor: pointer; user-select: none; isolation: isolate;
}
.btn-primary {
  background: var(--crimson); color: #fff;
  box-shadow: 0 10px 34px -12px var(--crimson-glow), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover {
  background: var(--crimson-bright);
  box-shadow: 0 18px 50px -10px var(--crimson-glow), 0 0 26px -6px var(--crimson-glow),
              inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; border-radius: 8px; z-index: -1;
  background: radial-gradient(120px circle at 50% 120%, rgba(255,255,255,0.25), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease-premium);
}
.btn-primary:hover::before { opacity: 1; }
.btn-ghost {
  background: rgba(255,255,255,0.015); color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.16);
}
.btn-ghost:hover {
  border-color: rgba(159,18,57,0.6); color: #fff;
  background: rgba(159,18,57,0.08);
  box-shadow: 0 12px 40px -18px var(--crimson-glow);
}
.btn:active { transform: scale(0.97); }

/* ---------- Scroll reveal API (used everywhere) ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(26px) scale(0.985);
  transition: opacity .9s var(--ease-premium), transform .9s var(--ease-premium);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes floatY    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes floatY2   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(26px); } }
@keyframes ringSpin  { to { transform: rotate(360deg); } }
@keyframes pulseGlow { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .7; transform: scale(1.12); } }
@keyframes scanDown  { 0% { transform: translateY(-10%); opacity: 0; } 10%,90% { opacity: .5; } 100% { transform: translateY(110vh); opacity: 0; } }
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes blink     { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes shimmer   { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.float-slow  { animation: floatY 11s var(--ease-premium) infinite; }
.float-slow2 { animation: floatY2 14s var(--ease-premium) infinite; }
.ring-spin   { animation: ringSpin 48s linear infinite; }
.pulse-glow  { animation: pulseGlow 5s ease-in-out infinite; }

/* ---------- Ambient overlays ---------- */
.vignette::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(0,0,0,0.55) 100%),
              radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,0.7), transparent 55%);
}
/* faint film grain */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; z-index: 1;
  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='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- Navigation ---------- */
.nav-root {
  transition: background .5s var(--ease-premium), backdrop-filter .5s var(--ease-premium),
              border-color .5s var(--ease-premium), height .4s var(--ease-premium);
  border-bottom: 1px solid transparent;
}
.nav-root.scrolled {
  background: rgba(5,5,5,0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
.nav-link {
  position: relative; font-size: 0.92rem; color: var(--text-secondary);
  transition: color .35s var(--ease-premium);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--crimson-bright); transition: width .4s var(--ease-premium);
}
.nav-link:hover { color: var(--text-primary); }
.nav-link:hover::after { width: 100%; }

/* Mobile menu overlay */
.mobile-menu {
  transition: opacity .5s var(--ease-premium), visibility .5s var(--ease-premium);
}
.mobile-menu[aria-hidden="true"] { opacity: 0; visibility: hidden; }
.mobile-menu[aria-hidden="false"] { opacity: 1; visibility: visible; }
.mobile-menu a {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease-premium), transform .6s var(--ease-premium);
}
.mobile-menu[aria-hidden="false"] a { opacity: 1; transform: none; }
.burger span { transition: transform .4s var(--ease-premium), opacity .3s var(--ease-premium); }
.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero specifics ---------- */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 140px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(159,18,57,0.10) 50%, transparent);
  animation: scanDown 9s linear infinite; mix-blend-mode: screen;
}
/* Hero entrance: elements start hidden, .hero-in reveals with stagger */
[data-hero] { opacity: 0; transform: translateY(30px); }
.hero-in [data-hero] {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease-premium), transform 1s var(--ease-premium);
  transition-delay: var(--hero-delay, 0ms);
}
.scroll-cue span {
  display: block; width: 4px; height: 8px; border-radius: 2px; background: var(--crimson-bright);
  animation: scrollDot 1.8s var(--ease-premium) infinite;
}

/* Eyebrow tag (label chip) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1rem; border: 1px solid var(--card-border); border-radius: 9999px;
  background: rgba(255,255,255,0.02);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--crimson-bright); animation: blink 2.4s ease-in-out infinite; }

/* Trust bar separators */
.trust-sep { width: 4px; height: 4px; border-radius: 9999px; background: rgba(255,255,255,0.25); }

/* Icon stroke discipline (Solar-Linear feel) */
.icon-stroke { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* ---------- Section heading kit (shared by all sections) ---------- */
.kicker { color: var(--crimson-bright); }
.muted  { color: var(--text-secondary); }

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

/* =====================================================
   SECTION-SCOPED STYLES (assembled from workflow)
   ===================================================== */

/* ===== STATS ===== */
/* ===== Stats / Trust section ===== */

/* Card: sharp-corner glass tile (inherits .glass lift/glow/sheen).
   Vertical flow + fixed value row aligns icon -> value -> label
   across all four columns. Responsive padding on the 8px grid. */
.stats-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}
@media (min-width: 640px) {
  .stats-card { padding: 1.75rem; }
}
@media (min-width: 1024px) {
  .stats-card { padding: 2rem; }
}

/* Icon chip — sharp 1px, silver at rest, crimson on hover.
   48px square keeps it a comfortable visual anchor; decorative only. */
.stats-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 1px;
  color: var(--silver);
  border: 1px solid rgba(196, 196, 196, 0.14);
  background: linear-gradient(160deg, rgba(159, 18, 57, 0.10), rgba(15, 15, 15, 0) 70%);
  transition: color .5s var(--ease-premium),
              border-color .5s var(--ease-premium),
              transform .5s var(--ease-premium);
}
.stats-card:hover .stats-icon {
  color: var(--crimson-bright);
  border-color: rgba(159, 18, 57, 0.5);
  transform: translateY(-2px);
}

/* Fixed-height value row — guarantees the sub-labels sit on the
   same baseline across all four cards regardless of value height. */
.stats-value-row {
  display: flex;
  align-items: flex-end;
  min-height: 3.25rem;
  margin-top: 1.5rem;
}
@media (min-width: 1024px) {
  .stats-value-row { min-height: 3.75rem; margin-top: 1.75rem; }
}

/* Numeric / headline value (uses .display-md scale from styles.css) */
.stats-value {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.2ch;
  line-height: 1;
  margin: 0;
}
.stats-value--text { letter-spacing: -0.02em; }

/* Sub-label pinned to card bottom for cross-card alignment.
   Override .label-md uppercase/tracking — these read as sentences. */
.stats-label {
  color: var(--text-secondary);
  margin-top: auto;
  padding-top: 1rem;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .stats-icon { transition: none; }
}

/* ===== CAPABILITIES ===== */
/* ===== Capabilities — "The One-Stop Solution" ===== */

/* ambient backdrop — subtle crimson + low vignette (decorative) */
.cap-ambient {
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(159, 18, 57, 0.10), transparent 70%),
    radial-gradient(45% 45% at 92% 100%, rgba(159, 18, 57, 0.05), transparent 70%);
}

/* ---------- MOBILE-FIRST: single-column vertical timeline ---------- */
.cap-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.cap-step {
  position: relative;
  padding-left: 2.25rem; /* room for rail + node */
}

/* vertical rail behind nodes (mobile), bridges the grid gap */
.cap-step::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.85rem;
  bottom: -1.5rem; /* matches grid gap so the line reads continuous */
  width: 1px;
  background: linear-gradient(to bottom, rgba(196, 196, 196, 0.20), rgba(196, 196, 196, 0.05));
}
.cap-step:last-child::before { display: none; } /* no trailing line */

/* timeline node dot — centred on the rail */
.cap-node {
  position: absolute;
  left: 0.5rem;
  top: 0.85rem;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--crimson);
  box-shadow: 0 0 0 4px rgba(159, 18, 57, 0.10);
  z-index: 1;
}

/* ---------- Card ----------
   .glass supplies sharp 1px corners, hover lift, crimson glow + transition.
   We only add internal layout here. */
.cap-card {
  height: 100%;
  padding: 1.5rem;
}

.cap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* elegant step number — display font + crimson, no arbitrary hardcodes */
.cap-num {
  font-family: "Satoshi", "Inter", sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 1.875rem; /* 30px */
  line-height: 1;
  letter-spacing: 0.04em;
  font-weight: 300;
  color: var(--crimson-bright);
  opacity: 0.9;
}

/* icon chip (sharp, silver -> brightens on hover) */
.cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid rgba(196, 196, 196, 0.16);
  border-radius: 1px; /* sharp, never bubbly */
  color: var(--silver);
  background: rgba(255, 255, 255, 0.02);
  transition: color .4s var(--ease-premium),
              border-color .4s var(--ease-premium),
              background .4s var(--ease-premium);
}
.cap-card:hover .cap-icon,
.cap-card:focus-within .cap-icon {
  color: var(--text-primary);
  border-color: rgba(159, 18, 57, 0.45);
  background: rgba(159, 18, 57, 0.08);
}

/* Title size is scoped DOWN from .display-md: the 5-across flow columns are  */
/* far too narrow for a 2.25rem title (long names like "Product              */
/* Identification & Technical Consulting" wrapped hard and clipped under the  */
/* glass-sheen overflow). Fluid size fits every column without truncation.    */
.cap-title {
  text-wrap: balance;
  font-size: clamp(1.05rem, 0.85rem + 0.7vw, 1.3rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.cap-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 38ch; /* readable measure in 1-col + 2-col modes */
}

/* ---------- TABLET (sm): 2-column glass grid ----------
   The horizontal 5-step rail can't fit before ~1024px without squishing
   .display-md titles. So 640–1023 uses a clean engineered 2-up grid and
   drops the timeline rail mechanics entirely. */
@media (min-width: 640px) {
  .cap-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
  /* suppress all timeline rail/node mechanics in grid mode */
  .cap-step { padding-left: 0; }
  .cap-step::before { display: none; }
  .cap-node { display: none; }

  /* odd-one-out: card 05 spans the row and centres for balance */
  .cap-step:nth-child(6) { grid-column: 1 / -1; }
  .cap-step:nth-child(6) .cap-card {
    max-width: 32rem;
    margin-inline: auto;
  }
}

/* ---------- DESKTOP (lg): horizontal stepped flow ---------- */
@media (min-width: 1024px) {
  .cap-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
  }

  .cap-step {
    padding-left: 0;
    padding-top: 2.5rem; /* room for the rail + node above each card */
  }
  /* cancel the md full-width override on card 05 */
  .cap-step:nth-child(6) { grid-column: auto; }
  .cap-step:nth-child(6) .cap-card { max-width: none; margin-inline: 0; }
  .cap-node { display: block; }

  /* horizontal connector rail spanning the row, aligned to node centres */
  .cap-rail {
    position: absolute;
    top: 5px; /* node centre */
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right,
      rgba(196, 196, 196, 0.04),
      rgba(196, 196, 196, 0.20) 12%,
      rgba(196, 196, 196, 0.20) 88%,
      rgba(196, 196, 196, 0.04));
    z-index: 0;
  }

  /* node centred above each card, sitting on the rail — no fragile stagger */
  .cap-node {
    left: 50%;
    top: 5px;
    transform: translate(-50%, -50%);
  }

  /* let descriptions use the full column (avoids orphaned words at 5-up) */
  .cap-desc { max-width: none; }
}

/* ---------- ULTRA-WIDE: breathing room ---------- */
@media (min-width: 1440px) {
  .cap-flow { gap: 1.75rem; }
  .cap-card { padding: 1.75rem; }
  .cap-num  { font-size: 2.125rem; }
}

/* ===== CATALOGUES ===== */
/* ============ Product Catalogues (#catalogues) ============ */
/* Cards reuse .glass / .glass-sheen / .display-* / .icon-stroke   */
/* from styles.css. Only genuinely-new visuals below, namespaced   */
/* with the .cat- prefix. Colours via tokens only.                 */

/* Faint section ambience (subtle crimson radial, cinematic rhythm) */
.cat-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(80% 55% at 85% 0%, rgba(159,18,57,0.06), transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(159,18,57,0.04), transparent 60%);
}

/* Solid near-black card surface (override glass tint) + sharp 1px corners */
.cat-card {
  background-color: #0F0F0F;
  border-radius: 1px;
  overflow: hidden;
  transition: transform .45s var(--ease-premium),
              border-color .45s var(--ease-premium),
              box-shadow .45s var(--ease-premium);
}
.cat-card:hover,
.cat-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(159, 18, 57, .55);
  box-shadow: 0 18px 48px -18px rgba(0,0,0,.85),
              0 0 0 1px rgba(159,18,57,.35),
              0 0 34px -8px rgba(159,18,57,.30);
}

/* Card title — let .display-md govern size; only clamp on large    */
/* viewports so a long name ("Homeland Security") never wraps ugly.  */
.cat-title {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.6rem);
  line-height: 1.12;
}

/* Image / watermark area — distinct tactical gradient per category */
.cat-img {
  background-color: #0A0A0B;
  border-bottom: 1px solid var(--hairline);
  transition: filter .45s var(--ease-premium);
}
.cat-card:hover .cat-img { filter: brightness(.82); }

.cat-img-1,
.cat-img-2,
.cat-img-3,
.cat-img-4,
.cat-img-5 { background-size: cover; background-position: center; }

.cat-img-1 {
  background-image:
    linear-gradient(180deg, rgba(5,5,5,.20) 0%, rgba(5,5,5,.62) 100%),
    linear-gradient(135deg, rgba(159,18,57,.16) 0%, rgba(0,0,0,0) 50%),
    url("../assets/img/cat-ground-forces.webp");
}
.cat-img-2 {
  background-image:
    linear-gradient(180deg, rgba(5,5,5,.22) 0%, rgba(5,5,5,.64) 100%),
    linear-gradient(115deg, rgba(159,18,57,.12) 0%, rgba(0,0,0,0) 52%),
    url("../assets/img/cat-law-enforcement.webp");
}
.cat-img-3 {
  background-image:
    linear-gradient(180deg, rgba(5,5,5,.20) 0%, rgba(5,5,5,.62) 100%),
    linear-gradient(145deg, rgba(159,18,57,.18) 0%, rgba(0,0,0,0) 46%),
    url("../assets/img/cat-swat.webp");
}
.cat-img-4 {
  background-image:
    linear-gradient(180deg, rgba(5,5,5,.20) 0%, rgba(5,5,5,.62) 100%),
    linear-gradient(125deg, rgba(159,18,57,.14) 0%, rgba(0,0,0,0) 50%),
    url("../assets/img/cat-vehicles.webp");
}
.cat-img-5 {
  background-image:
    linear-gradient(180deg, rgba(5,5,5,.22) 0%, rgba(5,5,5,.64) 100%),
    linear-gradient(150deg, rgba(159,18,57,.13) 0%, rgba(0,0,0,0) 50%),
    url("../assets/img/cat-homeland.webp");
}

/* Large faint Solar-Linear category watermark.                     */
/* width/height match the inline SVG attrs so it never reflows.     */
.cat-watermark {
  position: absolute;
  right: -14px;
  bottom: -18px;
  width: 132px;
  height: 132px;
  color: var(--silver);
  opacity: .07;
  pointer-events: none;
  transition: opacity .45s var(--ease-premium), transform .6s var(--ease-premium);
}
.cat-card:hover .cat-watermark {
  opacity: .11;
  transform: translateY(-4px) scale(1.03);
}

/* Number badge 01–05 — small, elegant, crimson */
.cat-num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--crimson-bright);
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}

/* Tagline — crimson uppercase label. Bumped from .66rem → .72rem   */
/* for legibility; uses brighter crimson token for contrast vs the  */
/* #0F0F0F card on small uppercase tracked text.                    */
.cat-tagline {
  color: var(--crimson-bright);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Count badge pill — bumped .6rem → .68rem for legibility */
.cat-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--card-border);
  border-radius: 9999px;
  padding: .4rem .8rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
  background: rgba(255,255,255,.02);
}

/* CTA — guaranteed >=44px tap target; tighter padding/size without  */
/* arbitrary !important overrides on the shared .btn.               */
.cat-cta {
  min-height: 44px;
  padding-top: .65rem;
  padding-bottom: .65rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: .875rem;
}
.cat-arrow { transition: transform .3s var(--ease-premium); }
.cat-cta:hover .cat-arrow,
.cat-cta:focus-visible .cat-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .cat-card,
  .cat-img,
  .cat-watermark,
  .cat-arrow { transition: none; }
  .cat-card:hover { transform: none; }
  .cat-card:hover .cat-watermark { transform: none; }
}

/* ===== WHY ===== */
/* ===== Why Seven Dragons — section-scoped additions only ===== */

/* faint crimson radial to differentiate from neighbouring sections */
.why-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(48rem 32rem at 8% 4%, rgba(159, 18, 57, 0.09), transparent 60%),
    radial-gradient(40rem 30rem at 100% 100%, rgba(159, 18, 57, 0.05), transparent 65%);
}

/* large credibility figures (20+ / 2-stage) */
.why-figure {
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.why-figure [data-counter] { font-variant-numeric: tabular-nums; }
/* the small "-stage" suffix sits as a quiet silver unit, not the big numeral */
.why-figure-unit {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--silver);
  margin-left: 0.15em;
  vertical-align: baseline;
}

/* keep the differentiator grid rows level (full-height cards) */
.why-grid { align-content: start; }
.why-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* differentiator icon chip — sharp, glassy, crimson on hover */
.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 1px;
  flex: 0 0 auto;
  color: var(--silver);
  border: 1px solid rgba(196, 196, 196, 0.16);
  background: rgba(255, 255, 255, 0.02);
  transition: color .35s var(--ease-premium),
              border-color .35s var(--ease-premium),
              background-color .35s var(--ease-premium);
}
.why-card:hover .why-icon,
.why-card:focus-within .why-icon {
  color: var(--crimson-bright);
  border-color: rgba(159, 18, 57, 0.45);
  background: rgba(159, 18, 57, 0.08);
}

/* card title — discreet authoritative scale (not a shrunken display class) */
.why-card-title {
  font-family: "Satoshi", "Inter", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--text-primary);
  text-wrap: balance;
}
.why-card-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* keyboard focus parity with .glass hover lift (a11y) */
.why-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(159, 18, 57, 0.45);
  box-shadow: 0 24px 60px -28px var(--crimson-glow),
              0 0 0 1px rgba(159, 18, 57, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* honour reduced-motion: no focus-lift translate */
@media (prefers-reduced-motion: reduce) {
  .why-card:focus-within { transform: none; }
  .why-icon { transition: none; }
}

/* ===== GLOBAL ===== */
/* ===== Global Reach / Offices — namespaced .map- / .global- ===== */

/* Map container */
.map-frame {
  padding: clamp(0.75rem, 3vw, 2rem);
  background:
    radial-gradient(120% 90% at 78% 50%, rgba(159, 18, 57, 0.07), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
}
.map-svg { max-height: 520px; }

/* Continents */
.map-land path {
  fill: #131313;
  stroke: rgba(196, 196, 196, 0.12);
  stroke-width: 1;
  transition: fill .6s var(--ease-premium);
}
.map-frame:hover .map-land path { fill: #161616; }

/* Connective arcs */
.map-arcs path {
  stroke: rgba(159, 18, 57, 0.30);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  opacity: 0.6;
}

/* Markers */
.map-dot {
  fill: var(--crimson);
  filter: drop-shadow(0 0 6px rgba(159, 18, 57, 0.85));
}
.map-dot-core { fill: var(--text-primary); }
.map-marker--hq .map-dot { filter: drop-shadow(0 0 9px rgba(159, 18, 57, 1)); }

/* Pulse ring */
.map-pulse {
  fill: rgba(159, 18, 57, 0.55);
  transform-box: fill-box;
  transform-origin: center;
  animation: mapPulse 3.4s var(--ease-premium) infinite;
}
.map-pulse--delay { animation-delay: 1.7s; }

@keyframes mapPulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* HQ legend pill over map */
.map-legend {
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.map-legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 8px rgba(159, 18, 57, 0.9);
}

/* Office card — sharp corners, hover lift + crimson glow (matches brand) */
.global-card {
  transition:
    transform .5s var(--ease-premium),
    border-color .5s var(--ease-premium),
    box-shadow .5s var(--ease-premium);
}
.global-card:hover {
  transform: translateY(-4px);
  border-color: rgba(159, 18, 57, 0.35);
  box-shadow: 0 18px 40px rgba(159, 18, 57, 0.12);
}

/* Office card icon wrap */
.global-icon-wrap {
  width: 44px; height: 44px;
  border: 1px solid rgba(159, 18, 57, 0.30);
  border-radius: 1px;
  background: rgba(159, 18, 57, 0.06);
  transition: border-color .4s var(--ease-premium), background .4s var(--ease-premium);
}
.global-card:hover .global-icon-wrap {
  border-color: rgba(159, 18, 57, 0.65);
  background: rgba(159, 18, 57, 0.12);
}

/* Reach stat */
.map-stat { background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)); }
.map-stat-num {
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Responsive: hide arcs + secondary pulse + legend below 768px to avoid clutter */
@media (max-width: 767px) {
  .map-arcs { display: none; }
  .map-pulse--delay { display: none; }
}

/* Reduced motion: freeze pulse, keep marker visible */
@media (prefers-reduced-motion: reduce) {
  .map-pulse { animation: none; opacity: 0.35; transform: scale(1.6); }
  .map-pulse--delay { display: none; }
  .global-card:hover { transform: none; }
}

/* ===== CONTACT ===== */
/* ===== Section 7: Contact + Footer (namespaced) ===== */

/* Decorative crimson ambient glow behind the section */
.contact-glow{
  background: radial-gradient(circle, rgba(159,18,57,0.12) 0%, rgba(159,18,57,0) 68%);
  filter: blur(10px);
}

/* "What happens next" / detail icon chips — sharp, glassy, crimson icon */
.contact-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--card-border);
  border-radius: 1px;
  background: rgba(255,255,255,0.025);
  color: var(--crimson-bright);
  transition: border-color .4s var(--ease-premium), color .4s var(--ease-premium), background .4s var(--ease-premium);
}
.contact-chip--muted{ color: var(--silver); }
.contact-chip svg{ width: 22px; height: 22px; }

/* Trust-column links — crimson underline reveal on hover */
.contact-link__text{
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color .35s var(--ease-premium), color .35s var(--ease-premium);
}
.contact-link:hover .contact-link__text{ border-bottom-color: var(--crimson-bright); }

/* Inputs — dark, hairline border, crimson bottom-border focus glow */
.contact-input{
  width: 100%;
  min-height: 48px;            /* >=44px tap target */
  padding: 0.75rem 0.9rem;
  background: rgba(10,10,11,0.6);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  outline: none;
  transition: border-color .3s var(--ease-premium),
              box-shadow .3s var(--ease-premium),
              background .3s var(--ease-premium);
}
.contact-input::placeholder{ color: #6E6E72; }
.contact-input:hover{ border-color: rgba(255,255,255,0.16); }
.contact-input:focus{
  border-color: var(--card-border);
  border-bottom-color: var(--crimson-bright);
  background: rgba(10,10,11,0.85);
  box-shadow: 0 2px 0 -1px var(--crimson-bright),
              0 10px 26px -14px var(--crimson-glow);
}
/* Keyboard-only focus ring (complements crimson glow, a11y) */
.contact-input:focus-visible{ border-bottom-color: var(--crimson-bright); }
.contact-input.contact-input--error{
  border-color: rgba(159,18,57,0.55);
  border-bottom-color: var(--crimson-bright);
}

.contact-textarea{ resize: vertical; min-height: 136px; }

/* Select — strip native chevron (custom SVG supplied) */
.contact-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 3rem;
  cursor: pointer;
}
.contact-select option{ background: var(--ink-soft); color: var(--text-primary); }

/* Inline status messages */
.contact-status{
  border-radius: 1px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}
.contact-status--ok{
  display: block;
  color: #D7EFD2;
  border: 1px solid rgba(120,180,110,0.30);
  background: rgba(70,120,60,0.10);
}
.contact-status--err{
  display: block;
  color: #F3C9D2;
  border: 1px solid rgba(159,18,57,0.45);
  background: rgba(159,18,57,0.10);
}

/* Footer links */
.footer-link{
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .3s var(--ease-premium), border-color .3s var(--ease-premium);
}
.footer-link:hover{ color: var(--text-primary); border-bottom-color: var(--crimson-bright); }

@media (prefers-reduced-motion: reduce){
  .contact-chip,
  .contact-input,
  .contact-link__text,
  .footer-link{ transition: none; }
}

/* ============================================================= */
/*  MEDIA INTEGRATION — hero background video + section photos    */
/*  Added 2026-06-03. Assets: 7DIntro.mov + uploaded tactical set */
/* ============================================================= */

/* ---- Hero cinematic video (sits behind the tech-grid canvas) ---- */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;                 /* fades in once it can play (JS adds .is-ready) */
  transition: opacity 1.4s var(--ease-premium);
}
.hero-video.is-ready { opacity: 0.62; }   /* dimmed — ambient depth, not foreground */

/* Dark wash over the video so the canvas grid + headline stay dominant */
.hero-video-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 12%, rgba(5,5,5,0.20), rgba(5,5,5,0.66) 78%),
    linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.22) 34%, rgba(5,5,5,0.90) 100%);
}

/* ---- Subtle photographic texture on two sections (very low key) ---- */
/* Image rides UNDER a heavy dark overlay so it reads as ambiance, never  */
/* competing with copy. Pure CSS ::before — no markup dependency.         */
#why::before,
#global::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
}
#why::before    { background-image: url("../assets/img/why-bg.webp"); }   /* heli fast-rope insertion */
#global::before { background-image: url("../assets/img/reach-bg.webp"); opacity: 0.13; } /* container port */

/* keep section inner content above the texture */
#why > *,
#global > * { position: relative; z-index: 1; }

/* ---- Reduced-motion / accessibility: freeze video to its poster ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* ---- Anti-bot honeypot: visually & a11y hidden, but NOT display:none ---- */
/* (bots skip display:none/visibility:hidden fields; off-screen still gets   */
/*  auto-filled by them). Real users never see or tab to it.                 */
.cf-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================= */
/*  PRODUCT RANGE (#products) — data-driven catalog (catalog.js)  */
/*  Mobile-first: 1 col → 2 (sm) → 3 (lg). Added 2026-06-03.      */
/* ============================================================= */
.prod-ambient {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 92% 0%, rgba(159,18,57,0.07), transparent 60%),
    radial-gradient(40rem 28rem at 0% 100%, rgba(159,18,57,0.05), transparent 65%);
}

/* ---- Tab bar (horizontal-scroll on mobile) ---- */
.prod-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--hairline);
}
.prod-tabs::-webkit-scrollbar { display: none; }
.prod-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.55rem;
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0.6rem 1rem;
  color: var(--silver);
  background: none; border: 0;
  border-bottom: 2px solid transparent;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap; cursor: pointer;
  transition: color .35s var(--ease-premium), border-color .35s var(--ease-premium);
}
.prod-tab:hover { color: var(--text-primary); }
.prod-tab.is-active { color: var(--text-primary); border-bottom-color: var(--crimson-bright); }
.prod-tab-ic { display: inline-flex; width: 18px; height: 18px; opacity: .8; }
.prod-tab-ic svg { width: 18px; height: 18px; }
.prod-tab.is-active .prod-tab-ic { color: var(--crimson-bright); opacity: 1; }
.prod-tab-ct {
  font-size: 0.7rem; font-weight: 600; color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
  border-radius: 9999px; padding: 0.05rem 0.45rem; line-height: 1.5;
}
.prod-tab.is-active .prod-tab-ct { color: #fff; background: rgba(159,18,57,0.22); border-color: rgba(159,18,57,0.4); }

/* ---- Groups + grid ---- */
.prod-group + .prod-group { margin-top: 2.75rem; }
.prod-subhead { display: block; color: var(--crimson-bright); margin-bottom: 1.1rem; }
.prod-grid {
  display: grid;
  grid-template-columns: 1fr;          /* mobile */
  gap: 1rem;
}
@media (min-width: 640px)  { .prod-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; } }
@media (min-width: 1024px) { .prod-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; } }

/* ---- Card ---- */
.prod-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  /* reveal */
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease-premium) var(--d,0ms),
              transform .7s var(--ease-premium) var(--d,0ms),
              border-color .45s var(--ease-premium),
              box-shadow .45s var(--ease-premium);
}
.prod-card.is-in { opacity: 1; transform: none; }
.prod-card:hover {
  transform: translateY(-4px);
  border-color: rgba(159,18,57,0.45);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.85), 0 0 26px -10px var(--crimson-glow);
}

.prod-media {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  background: #0A0A0B;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.prod-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease-premium), filter .45s var(--ease-premium);
}
.prod-card:hover .prod-media img { transform: scale(1.04); filter: brightness(.9); }

/* placeholder (≈80% of products until photos arrive) */
.prod-ph-icon { display: none; }
.prod-media--ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(159,18,57,0.10), transparent 60%),
    linear-gradient(170deg, #131314 0%, #0B0B0C 60%, #060607 100%);
}
.prod-media--ph .prod-ph-icon { display: inline-flex; color: var(--crimson-bright); opacity: .55; }
.prod-media--ph .prod-ph-icon svg { width: 42px; height: 42px; }
.prod-ph-label {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--silver); opacity: .55; text-align: center; padding: 0 1rem; max-width: 90%;
}

/* body */
.prod-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.15rem 1.2rem; }
.prod-name {
  font-family: "Satoshi","Inter",sans-serif; font-weight: 600;
  font-size: 1rem; line-height: 1.3; color: var(--text-primary); letter-spacing: -0.01em;
}
.prod-desc {
  margin-top: 0.5rem; color: var(--text-secondary);
  font-size: 0.875rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.prod-specs { margin-top: 0.7rem; }
.prod-specs summary {
  cursor: pointer; list-style: none;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--crimson-bright); display: inline-flex; align-items: center; gap: .35rem;
}
.prod-specs summary::-webkit-details-marker { display: none; }
.prod-specs summary::after { content: "+"; font-size: .9rem; line-height: 1; }
.prod-specs[open] summary::after { content: "\2013"; }
.prod-specs ul {
  margin: 0.6rem 0 0; padding-left: 1.05rem; list-style: disc;
  color: var(--text-secondary); font-size: 0.8rem; line-height: 1.55;
}
.prod-cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; min-height: 44px; margin-top: 1.1rem;
  padding: 0.6rem 1rem; border-radius: 8px;
  background: rgba(255,255,255,0.015); color: var(--text-primary);
  border: 1px solid rgba(159,18,57,0.4);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: background .35s var(--ease-premium), border-color .35s var(--ease-premium), color .35s var(--ease-premium);
}
.prod-cta:hover { background: rgba(159,18,57,0.12); border-color: var(--crimson-bright); color: #fff; }
.prod-cta:active { transform: scale(0.98); }
.prod-loading { padding: 1.5rem 0; }

@media (prefers-reduced-motion: reduce) {
  .prod-card { opacity: 1; transform: none; transition: none; }
  .prod-card:hover { transform: none; }
  .prod-card:hover .prod-media img { transform: none; }
}

/* ============================================================= */
/*  PRODUCT RANGE v2 — Editorial Index (text-forward, no images) */
/*  Overrides the v1 card styles above. Rebuilt 2026-06-03.      */
/* ============================================================= */
/* group reveal */
.prod-group { opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease-premium) var(--d,0ms), transform .7s var(--ease-premium) var(--d,0ms); }
.prod-group.is-in { opacity: 1; transform: none; }
.prod-group + .prod-group { margin-top: 0; border-top: 1px solid var(--hairline); }

/* accordion header — button reset + flex layout */
.prod-grouphead {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; margin: 0;
  background: transparent; border: none; cursor: pointer; text-align: left;
  transition: background .2s;
}
.prod-grouphead:hover { background: rgba(255,255,255,.025); margin: 0 -0.75rem; padding-left: 0.75rem; padding-right: 0.75rem; }
.prod-subhead { color: var(--crimson-bright); margin: 0; transition: opacity .25s; }
.prod-grouphead:hover .prod-subhead { opacity: .85; }
.prod-grouphead-right {
  display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0;
}
.prod-count {
  flex: 0 0 auto; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-secondary); opacity: .7;
}
.prod-chevron {
  flex-shrink: 0; color: var(--silver); opacity: .6;
  transition: transform .38s cubic-bezier(0.16,1,0.3,1), opacity .25s;
}
.prod-grouphead:hover .prod-chevron { opacity: 1; }
.prod-group.is-open .prod-chevron { transform: rotate(180deg); }

/* collapsible body — grid-template-rows trick for smooth height */
.prod-body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s cubic-bezier(0.16,1,0.3,1);
}
.prod-body-inner { overflow: hidden; min-height: 0; }
.prod-group.is-open .prod-body-wrap { grid-template-rows: 1fr; }
.prod-list-pad { padding-bottom: 1.5rem; }

/* index list — 1 col mobile, 2 col desktop */
.prod-list { display: grid; grid-template-columns: 1fr; padding-bottom: 1.25rem; }
@media (min-width: 900px) {
  .prod-list { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
}

/* item row */
.prod-item {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline);
  transition: border-color .4s var(--ease-premium);
}
.prod-item:hover { border-bottom-color: rgba(159,18,57,0.4); }
.prod-item-row { display: flex; align-items: baseline; gap: 0.85rem; }
.prod-idx {
  flex: 0 0 auto; min-width: 1.7em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--crimson-bright); opacity: .85; line-height: 1.7;
}
.prod-name {
  flex: 1 1 auto; margin: 0;
  font-family: "Satoshi","Inter",sans-serif; font-weight: 600;
  font-size: 1.02rem; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--text-primary);
  transition: color .35s var(--ease-premium);
}
.prod-item:hover .prod-name { color: #fff; }

/* request-info action — quiet by default, crimson on hover/focus */
.prod-req {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 0; cursor: pointer; padding: 0.15rem 0;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--silver); opacity: .55;
  transition: color .3s var(--ease-premium), opacity .3s var(--ease-premium), transform .3s var(--ease-premium);
}
.prod-req svg { transition: transform .3s var(--ease-premium); }
.prod-item:hover .prod-req, .prod-req:focus-visible { opacity: 1; color: var(--crimson-bright); }
.prod-req:hover svg, .prod-req:focus-visible svg { transform: translateX(3px); }

/* description — primary content now */
.prod-desc {
  margin: 0.5rem 0 0; padding-left: calc(1.7em + 0.85rem);
  color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55;
  max-width: 52ch;
  /* clear any v1 line-clamp */
  display: block; -webkit-line-clamp: none;
}

/* specs disclosure (hidden by default per design) */
.prod-specs { margin: 0.55rem 0 0; padding-left: calc(1.7em + 0.85rem); }
.prod-specs summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .35rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--silver); opacity: .6; transition: opacity .3s var(--ease-premium), color .3s var(--ease-premium);
}
.prod-specs summary:hover { opacity: 1; color: var(--crimson-bright); }
.prod-specs summary::-webkit-details-marker { display: none; }
.prod-specs summary::after { content: "+"; font-size: .85rem; }
.prod-specs[open] summary::after { content: "\2013"; }
.prod-specs ul {
  margin: 0.55rem 0 0; padding-left: 1.05rem; list-style: disc;
  color: var(--text-secondary); font-size: 0.82rem; line-height: 1.6; columns: 2; column-gap: 2rem;
}
@media (max-width: 640px) { .prod-specs ul { columns: 1; } }

/* tabs: drop the v1 icon slot if present (text + count only now) */
.prod-tab .prod-tab-ic { display: none; }

@media (prefers-reduced-motion: reduce) {
  .prod-group { opacity: 1; transform: none; transition: none; }
}