/* ============================================================
   BigTech 100 — Tech Blue
   Aesthetic: deep navy + electric blue accents, off-white surface
   ============================================================ */

:root {
  /* Blue family — corporate, analytical, confident */
  --navy-deep:   #0A1F44;   /* primary ink */
  --navy:        #102A5C;
  --navy-2:      #1B3D7A;
  --blue:        #2563EB;   /* primary accent */
  --blue-2:      #1D4ED8;
  --blue-bright: #3B82F6;
  --blue-soft:   #DCE7FA;
  --blue-pale:   #EEF3FC;

  /* Neutrals tinted very subtly cool */
  --paper:       #F7F8FB;
  --paper-2:     #EEF1F7;
  --paper-3:     #DDE3EE;
  --rule:        #0A1F44;
  --rule-soft:   #C9D2E2;

  --ink:    var(--navy-deep);
  --ink-2:  #2C3D63;
  --ink-3:  #5B6A85;
  --ink-4:  #8A95AC;
  --ink-5:  #B7BFD0;

  --up:     #0F8A57;
  --down:   #C0392B;

  --max-w: 1440px;
  --gutter: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Serif 4", "Source Serif Pro", "Charter", "Georgia", serif;
  font-feature-settings: "ss01", "lnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.kicker {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 500;
}
.kicker-light { color: rgba(255,255,255,0.78); }

.h2 {
  font-family: "Source Serif 4", "Charter", Georgia, serif;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 8px 0 0;
  color: var(--ink);
}

/* ============== MASTHEAD ============== */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  height: 64px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
  box-sizing: border-box;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  display: inline-block;
  font-size: 14px; line-height: 1;
  color: var(--blue);
  transform: translateY(-1px);
}
.brand-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
}
.nav {
  display: flex; gap: 32px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.nav a { color: var(--ink-2); transition: color .15s; }
.nav a:hover { color: var(--blue); }
.masthead-r {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  text-align: right;
}
.ed {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ============== HERO ============== */
.hero {
  padding: 56px var(--gutter) 64px;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-2) 100%);
  color: #EAF0FB;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--navy-deep);
}
/* Subtle grid texture */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 30% 40%, black 30%, transparent 80%);
}
/* glowing orb in the corner */
.hero::after {
  content: "";
  position: absolute;
  right: -200px; top: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(59,130,246,0.35) 0%, rgba(59,130,246,0) 60%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  max-width: var(--max-w); margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 48px;
  z-index: 1;
}
.hero-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(220,231,250,0.7);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.eyebrow { display: flex; align-items: center; gap: 10px; color: rgba(220,231,250,0.85); }
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.22), 0 0 14px rgba(59,130,246,0.6);
}

.hero-title-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: end;
}
.hero-title {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400;
  font-size: clamp(96px, 14vw, 220px);
  line-height: 0.84;
  letter-spacing: -0.045em;
  display: flex; flex-direction: column;
  color: #fff;
}
.t-line { display: block; }
.t-num {
  display: block;
  font-style: italic;
  color: var(--blue-bright);
  font-feature-settings: "lnum";
  letter-spacing: -0.06em;
  margin-top: -8px;
  text-shadow: 0 0 40px rgba(59,130,246,0.4);
}
.hero-sub { padding-bottom: 18px; }
.lede {
  font-size: 22px; line-height: 1.45;
  margin: 0 0 28px;
  color: rgba(234,240,251,0.88);
  text-wrap: pretty;
  max-width: 36ch;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.4);
  background: transparent;
  color: #EAF0FB;
  transition: all .18s ease;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 8px 28px rgba(37,99,235,0.4);
}
.btn-primary:hover {
  background: var(--blue-bright); border-color: var(--blue-bright);
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(59,130,246,0.55);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }

/* hero stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid rgba(255,255,255,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.stat {
  padding: 26px 24px 22px 0;
  border-right: 1px solid rgba(255,255,255,0.12);
  position: relative;
}
.stat:last-child { border-right: none; }
.stat:not(:first-child) { padding-left: 24px; }
.stat-num {
  display: flex; align-items: baseline; gap: 6px;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400;
  font-size: 64px; line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
.stat-arrow {
  font-size: 24px; color: var(--blue-bright);
  transform: translateY(-12px);
}
.stat-val { font-feature-settings: "lnum"; }
.stat-unit {
  font-size: 18px; color: rgba(220,231,250,0.7);
  letter-spacing: -0.01em;
  font-style: italic;
}
.stat-rule { height: 1px; background: var(--blue-bright); margin: 14px 0 10px; width: 32px; }
.stat-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(234,240,251,0.92);
  margin-bottom: 6px;
}
.stat-note {
  font-size: 13px; color: rgba(220,231,250,0.6);
  font-style: italic;
}

.hero-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(220,231,250,0.6);
}
.hero-foot .kicker { color: var(--blue-bright); margin-right: 12px; }
.leaders { display: inline-flex; gap: 10px; flex-wrap: wrap; color: rgba(220,231,250,0.85); }
.leaders .sep { color: rgba(255,255,255,0.25); }

/* ============== SEGMENTS ============== */
.segments {
  padding: 80px var(--gutter);
  border-bottom: 1px solid var(--rule-soft);
  max-width: var(--max-w); margin: 0 auto;
}
.seg-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 40px;
}
.seg-note {
  font-size: 17px; line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
  max-width: 55ch;
  margin: 0;
}
.seg-bar {
  display: flex; height: 96px;
  border: 1px solid var(--ink);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(10,31,68,0.08);
}
.seg-cell {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
  transition: filter .15s;
  min-width: 0;
}
.seg-cell:last-child { border-right: none; }
.seg-cell:hover { filter: brightness(1.12); }
.seg-cell-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0.95;
}
.seg-cell-pct {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.seg-legend {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 32px;
}
.seg-leg {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 14px;
}
.seg-sw { width: 10px; height: 10px; border-radius: 1px; }
.seg-leg-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
}
.seg-leg-val { color: var(--ink-3); font-style: italic; font-size: 13px; }
.seg-leg-pct {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-feature-settings: "lnum";
  color: var(--ink);
  min-width: 48px; text-align: right;
}

/* ============== RANKING ============== */
.ranking {
  padding: 80px var(--gutter) 96px;
  max-width: var(--max-w); margin: 0 auto;
}
.rank-head {
  display: flex; justify-content: space-between; align-items: end;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 24px;
  margin-bottom: 28px;
}
.rank-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 8px;
}
.rank-meta strong { color: var(--ink); font-weight: 500; }

/* controls */
.controls {
  display: grid;
  grid-template-columns: 320px 1fr auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-soft);
}
.search {
  position: relative;
  display: flex; align-items: center;
  border: 1px solid var(--ink);
  background: #fff;
  padding: 0 14px;
  height: 44px;
  transition: box-shadow .15s;
}
.search:focus-within {
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
  border-color: var(--blue);
}
.search-icon { color: var(--ink-3); margin-right: 8px; font-size: 16px; }
.search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 15px;
  color: var(--ink);
  height: 100%;
}
.search input::placeholder { color: var(--ink-4); font-style: italic; }
.search-clear {
  border: none; background: transparent; font-size: 22px;
  color: var(--ink-3); padding: 0 4px;
  line-height: 1;
}

.seg-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  overflow-x: auto;
}
.chip {
  padding: 8px 12px;
  border: 1px solid var(--rule-soft);
  background: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  transition: all .12s;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip-on {
  background: var(--ink); color: #fff;
  border-color: var(--ink);
}

.view-toggle {
  display: flex;
  border: 1px solid var(--ink);
  background: #fff;
}
.vt {
  padding: 10px 16px;
  border: none; background: transparent;
  border-right: 1px solid var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
}
.vt:last-child { border-right: none; }
.vt-on { background: var(--blue); color: #fff; }

.result-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 0 16px;
}
.result-meta em { font-style: normal; color: var(--blue); }
.result-meta strong { color: var(--ink); font-weight: 500; }

/* table */
.table-wrap {
  border-top: 2px solid var(--ink);
  overflow-x: auto;
  background: #fff;
  box-shadow: 0 2px 0 rgba(10,31,68,0.05), 0 12px 32px -16px rgba(10,31,68,0.18);
}

/* ==========================================================================
   Unified ranking table standard (.rank-table-wrap)
   Added as a second class to .table-wrap, .s500-table-wrap, .mkt-rank-wrap.
   Provides:
   1. Horizontal scroll fallback for narrow viewports
   2. Fade-shadow on the right edge as a visual cue that the table scrolls
      (shadow auto-hides once user scrolls to the end via JS-free trick)
   3. Priority-based column hiding via .col-p3 / .col-p4 classes
   ========================================================================== */
.rank-table-wrap {
  position: relative;
  overflow-x: auto;
  /* CSS-only scroll-end fade: linear-gradient that becomes opaque on the right.
     Background is attached to the local scroll, so it shifts out of view when
     the user scrolls all the way right. Trick from Roman Komarov / Lea Verou. */
  background:
    /* shadow indicators (over the right edge) */
    linear-gradient(to left, white, white 0%, rgba(255,255,255,0)) 100% 0/40px 100% no-repeat local,
    linear-gradient(to left, rgba(10,31,68,0.18), rgba(10,31,68,0)) 100% 0/24px 100% no-repeat scroll,
    #fff;
}

/* Priority-3 columns: hidden at ≤1200px.
   Use for secondary text columns (brand list, CEO name, secondary date). */
@media (max-width: 1200px) {
  .rank-table-wrap .col-p3 { display: none; }
}

/* Priority-4 columns: hidden at ≤900px.
   Use for tertiary columns that are nice-to-have but not core to the ranking
   (e.g. market segment when company name already implies it). */
@media (max-width: 900px) {
  .rank-table-wrap .col-p4 { display: none; }
}
.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
  background: #fff;
}
.ranking-table thead th {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  background: var(--blue-pale);
  position: sticky; top: 0;
  vertical-align: bottom;
}
.th-num { text-align: right !important; }
.th-sort { cursor: pointer; user-select: none; transition: color .12s; }
.th-sort:hover { color: var(--blue); }
.si {
  display: inline-block;
  margin-left: 4px;
  color: var(--blue);
  font-size: 12px;
  min-width: 8px;
}

.row { transition: background .12s; cursor: pointer; }
.row td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.row:hover { background: var(--blue-pale); }
.row-open { background: var(--blue-pale); }
.row-open td { border-bottom-color: transparent; }

.td-num { text-align: right; font-feature-settings: "lnum"; }

/* rank cell */
.td-rank { padding-left: 0; }
.rank-cell {
  display: inline-block;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: "lnum";
}

/* company cell */
.td-co { padding-left: 0; }
.co {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.mono {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid; place-items: center;
  color: #EAF0FB;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 4px;
}
.co-name {
  display: flex; flex-direction: column;
  min-width: 0;
}
.co-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-sub {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* brands */
.td-brands {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.45;
}
.brands-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
}

/* market tags */
.market-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.mtag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 7px;
  border: 1px solid var(--rule-soft);
  color: var(--ink-2);
  white-space: nowrap;
  background: var(--paper);
  border-radius: 2px;
}
.mtag-more { color: var(--ink-3); border-style: dashed; }

/* ceo */
.td-ceo {
  font-size: 13.5px;
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* revenue cell */
.td-rev { padding-right: 16px; }
.rev-cell {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.rev-val {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: "lnum";
  display: flex; align-items: baseline; gap: 2px;
}
.ast {
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 2px;
  font-family: "JetBrains Mono", monospace;
  vertical-align: super;
}
.rev-bar {
  width: 140px;
  height: 4px;
  background: var(--paper-3);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.rev-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--navy), var(--blue));
  transition: width .3s;
}

/* growth cell */
.td-growth {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  font-feature-settings: "lnum";
  white-space: nowrap;
  padding-right: 0;
}
.td-growth .g-arrow { font-size: 9px; margin-right: 4px; transform: translateY(-2px); display: inline-block; }
.g-up { color: var(--up); }
.g-down { color: var(--down); }

/* expanded detail row */
.row-detail td {
  padding: 0 0 24px 0;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--blue-pale);
}
.detail {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  gap: 32px;
  padding: 0 12px 8px 56px;
  border-left: 3px solid var(--blue);
  margin-left: 0;
}
.detail-col { display: flex; flex-direction: column; gap: 6px; }
.detail-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}
.detail-text {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
}
.detail-big {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 32px;
  letter-spacing: -0.02em;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--ink);
}
.detail-mini {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

.empty {
  padding: 60px 20px !important;
  text-align: center;
  color: var(--ink-3);
  font-style: italic;
  font-size: 16px;
}

/* ============== CTA ============== */
.cta {
  padding: 80px var(--gutter);
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-2);
}
.cta-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 24px;
}
.cta-card {
  padding: 36px 32px;
  background: #fff;
  border: 1px solid var(--rule-soft);
  display: flex; flex-direction: column;
  gap: 14px;
  min-height: 260px;
  transition: transform .2s, box-shadow .2s;
}
.cta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(10,31,68,0.1);
  border-color: var(--blue);
}
.cta-card-dark {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-2) 100%);
  color: #EAF0FB;
  border-color: var(--navy-deep);
  position: relative;
  overflow: hidden;
}
.cta-card-dark::after {
  content: "";
  position: absolute;
  right: -100px; bottom: -100px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(59,130,246,0.3) 0%, transparent 70%);
  pointer-events: none;
}
.cta-card-dark p { color: rgba(234,240,251,0.78); }
.cta-card-dark .cta-h { color: #fff; }
.cta-h {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
  color: var(--ink);
}
.cta-card p {
  font-size: 15px; line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
  flex: 1;
  position: relative;
  z-index: 1;
}
.cta-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue);
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--blue);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: gap .15s;
  position: relative;
  z-index: 1;
}
.cta-link:hover { gap: 14px; }
.cta-link span { transition: transform .15s; }
.cta-link:hover span { transform: translateX(4px); }
.cta-link-light {
  color: var(--blue-bright);
  border-bottom-color: var(--blue-bright);
}

/* ============== FOOTER ============== */
.footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 32px var(--gutter);
  background: var(--navy-deep);
  color: #EAF0FB;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.footer-l { display: flex; align-items: center; gap: 12px; }
.footer .brand-mark { color: var(--blue-bright); }
.footer-r { color: rgba(234,240,251,0.55); }

/* ============== RESPONSIVE ============== */
@media (max-width: 1200px) {
  :root { --gutter: 32px; }
  .hero-title-row { grid-template-columns: 1fr; gap: 32px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.12); }
  .seg-head { grid-template-columns: 1fr; gap: 20px; }
  .seg-legend { grid-template-columns: repeat(2, 1fr); }
  .controls { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  /* Hero — prevent oversized italic display number from overflowing */
  .hero-title {
    font-size: clamp(48px, 12vw, 80px) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .t-num, .t-line, .t-line-italic { letter-spacing: -0.025em !important; }
  .hero-title-row { grid-template-columns: 1fr !important; gap: 24px !important; }
  .stat-num { font-size: 36px; }
  .h2 { font-size: 32px; }
  .hero-stats { grid-template-columns: 1fr; }
  .stat { border-right: none; border-top: 1px solid rgba(255,255,255,0.12); padding-left: 0 !important; }
  .seg-legend { grid-template-columns: 1fr; }
  .hero-meta { flex-direction: column; gap: 8px; align-items: flex-start; }

  /* BigTech 100 controls + table */
  .ranking, .segments { padding: 48px var(--gutter); }
  .controls { grid-template-columns: 1fr !important; gap: 12px !important; }
  .seg-chips { overflow-x: auto; flex-wrap: nowrap; }
  .table-wrap { overflow-x: auto; }
  .ranking-table { min-width: 720px; }

  /* Section page padding reduction */
  .section-page { padding: 40px var(--gutter) 64px; }
  .section-h1 { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1.05 !important; word-break: break-word; }
  .section-stats { grid-template-columns: 1fr !important; padding: 24px 0; gap: 16px; }
  .section-stat { border-right: none !important; padding: 0 !important; }
  .section-stat-num { font-size: 40px; }

  /* About page sidebar collapses (already done) */
  /* Companies / news / research / webinar grids fall to 1 col */
  .rank-featured, .rank-industries, .companies-grid, .research-grid,
  .news-grid, .webinar-grid, .contact-channels, .contacts-people,
  .about-pillars { grid-template-columns: 1fr !important; }

  /* Media (publications) grid — 1 col */
  .media-grid { grid-template-columns: 1fr !important; }

  /* CTA-big — stack */
  .cta-big-grid { grid-template-columns: 1fr !important; }
  .cta-big { padding: 48px var(--gutter); }
  .cta-big-card { padding: 32px 24px; }
  .cta-big-h { font-size: 28px; }

  /* Trend detail article body */
  .trend-article { padding: 32px var(--gutter); }
  .trend-title { font-size: clamp(32px, 8vw, 44px) !important; }

  /* News detail */
  .news-card-title { font-size: 18px; }
}