/* ═══════════════════════════════════════════════════════════════════════
   SIRA — v1 → v2 token bridge
   Load order:  sira.css  →  sira-v2.css  →  sira-bridge.css
   Legacy pages were authored against the v1 token names. Rather than
   rewrite every rule, we re-point the v1 names at the v2 values. Because
   these are var() references (not literals) they follow the active theme,
   so old components inherit the new palette AND dark mode for free.
═══════════════════════════════════════════════════════════════════════ */
:root {
  /* surfaces & lines */
  --surface:      var(--panel);
  --surface-2:    var(--panel-2);
  --border:       var(--line);
  --border-2:     var(--line-2);

  /* type */
  --font-head:    var(--f-display);
  --font-body:    var(--f-body);

  /* brand aliases */
  --cyan-bright:  var(--cyan-bri);
  --cyan-ink:     var(--cyan-deep);
  --gold-deep:    var(--gold);
  --navy-3:       var(--navy-2);

  /* elevation */
  --shadow-xs:    var(--shadow-1);
  --shadow-sm:    var(--shadow-1);
  --shadow-md:    var(--shadow-2);
  --shadow-lg:    var(--shadow-3);

  /* radii — v2 is deliberately tighter/engineered */
  --r-sm:         var(--r);
  --r-lg:         var(--r-2);
  --r-xl:         var(--r-2);

  /* motion */
  --ease:         var(--enter);
  --ease-spring:  var(--spring);
}

/* Legacy pages set their own body font stack; force the v2 pairing. */
body { font-family: var(--f-body); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 { font-family: var(--f-display); }

/* v1 cards/panels often hardcode white — make them theme-aware. */
[class*="card"], .panel, .box, .tile {
  background-color: var(--panel);
  border-color: var(--line);
}

/* Legacy sections that hardcoded a light background. */
section { background-color: transparent; }

/* ═══════════════════════════════════════════════════════════════════
   Faceted language — square off v1's rounded pills to match v2
   ═══════════════════════════════════════════════════════════════════ */
.eyebrow, .chip, .badge, .pill, .hero-chip {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 92% 100%, 0 100%);
}
.eyebrow {
  font-family: var(--f-tech); font-size: 12px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--cyan-deep);
  background: rgba(23,190,220,.10);
  border: 1px solid rgba(23,190,220,.26);
  padding: 7px 15px;
}
.eyebrow::before { border-radius: 0; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.chip, .hero-chip { background: var(--panel); border-color: var(--line-2); color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════════════
   Inner-page hero — the homepage's faceted stage, without the 3D cost.
   Gives every inner page the same identity: dark shard-lit stage,
   angular bottom cut, crystal echo in the corner.
   ═══════════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative; overflow: hidden;
  padding: 96px 0 88px; text-align: center; color: #dbe6f1;
  background:
    radial-gradient(78% 90% at 50% -18%, rgba(23,190,220,.20), transparent 62%),
    radial-gradient(60% 70% at 88% 8%, rgba(231,165,41,.10), transparent 60%),
    linear-gradient(165deg, #0F2233 0%, #0A1524 52%, #060C16 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), calc(100% - 42px) 100%, 0 100%);
  border-bottom: 1px solid rgba(53,221,242,.16);
}
/* faint faceted crystal echoing the homepage mark — sits behind the type,
   kept small and low-contrast so it reads as texture, not a slab */
.page-hero::before {
  content: ''; position: absolute; inset-inline-end: 6%; top: 50%;
  width: 190px; height: 320px; transform: translateY(-50%) rotate(10deg);
  background: linear-gradient(145deg, rgba(53,221,242,.30) 0%, rgba(23,190,220,.10) 48%, rgba(231,165,41,.14) 100%);
  clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%);   /* octahedron silhouette */
  filter: blur(.5px); opacity: .5; pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; line-height: 1.25; margin: 20px auto 16px; max-width: 860px; text-shadow: 0 6px 34px rgba(0,0,0,.5); }
html.lang-en .page-hero h1 { line-height: 1.1; }
.page-hero .lead, .page-hero p { color: #a9bccf; }
/* v1's gradient text was tuned for a light background and goes muddy on the
   dark stage — restate it with the hero's bright cyan→gold ramp. */
.page-hero .gradient-text {
  background: linear-gradient(115deg, var(--cyan-bri) 0%, var(--cyan) 44%, var(--gold-soft) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-hero .eyebrow { color: var(--cyan-bri); background: rgba(53,221,242,.12); border-color: rgba(53,221,242,.3); }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: #8fa5bb; }
.page-hero .breadcrumb a:hover { color: var(--cyan-bri); }
.page-hero .chip, .page-hero .hero-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); color: #cfe0ef; }
@media (max-width: 700px){
  .page-hero { padding: 62px 0 56px; clip-path: polygon(0 0,100% 0,100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
  .page-hero::before { width: 200px; height: 200px; inset-inline-end: -70px; opacity: .7; }
}