/* RRCyber — built on the RRDC brand system (rrdc.cloud), unchanged.
   RRCyber-specific components are appended at the end and use the same variables. */
:root {
  --bg: #0E1116;
  --bg-2: #151A22;
  --bg-3: #1E242E;
  --line: #2A323F;
  --text: #FFFFFF;
  --text-2: #A8B0BF;
  --text-3: #6F7787;
  --accent: #4A9FE0;
  --accent-2: #3B82C4;
  --accent-soft: rgba(74, 159, 224, 0.10);
  --warn: #FF7A45;
  --radius: 10px;
  --radius-lg: 16px;
  --max: 1200px;
  --pad: clamp(20px, 4vw, 48px);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }

/* Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(60px, 8vw, 120px) 0; }
.section-tight { padding: clamp(40px, 6vw, 80px) 0; }
.bg-2 { background: var(--bg-2); }
.bg-grid {
  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: 40px 40px;
}

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14,17,22,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; letter-spacing: -0.02em; font-size: 19px; }
.nav-logo:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--text-2); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a.active { color: var(--text); }
.nav-cta { padding: 9px 18px; background: var(--accent); color: #0E1116; border-radius: var(--radius); font-weight: 600; font-size: 14px; }
.nav-cta:hover { background: #6BB6F0; text-decoration: none; }
/* .nav-links a (0,1,1) was overriding .nav-cta's dark text; restore it */
.nav-links a.nav-cta, .nav-links a.nav-cta:hover { color: #0E1116; }
@media (max-width: 800px) {
  .nav-links { display: none; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: var(--radius); font-weight: 600; font-size: 15px; border: 0; cursor: pointer; transition: transform 0.06s ease, background 0.15s ease; line-height: 1; }
.btn-primary { background: var(--accent); color: #0E1116; }
.btn-primary:hover { background: #6BB6F0; text-decoration: none; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn .arr { transition: transform 0.15s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* Typography */
h1, h2, h3, h4 { margin: 0 0 16px; letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; }
h1 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: clamp(30px, 4vw, 48px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }
h4 { font-size: 18px; line-height: 1.3; }
p { margin: 0 0 16px; color: var(--text-2); }
.eyebrow { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; }
.lead { font-size: clamp(18px, 2vw, 22px); color: var(--text-2); max-width: 720px; }
.hi { color: var(--text); }
.mono { font-family: var(--mono); }

/* Hero */
.hero { position: relative; padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 88px); overflow: hidden; }
.hero h1 { max-width: 14ch; }
.hero h1 .accent { color: var(--accent); }
.hero .lead { margin-top: 24px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.hero-trust { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.hero-trust span { color: var(--text-3); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.hero-trust .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 100px; color: var(--text-2); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Glow accent shape */
.hero-glow { position: absolute; top: -20%; right: -10%; width: 700px; height: 700px; pointer-events: none; opacity: 0.45; background: radial-gradient(circle at center, rgba(74,159,224,0.38), transparent 60%); filter: blur(40px); z-index: 0; }
.hero .wrap { position: relative; z-index: 1; }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.stat .big { font-size: clamp(36px, 4vw, 56px); font-weight: 700; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.stat .lbl { font-size: 14px; color: var(--text-2); margin-top: 8px; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; transition: border-color 0.15s ease, transform 0.15s ease; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card .ico { width: 40px; height: 40px; margin-bottom: 18px; color: var(--accent); }
.card h3 { font-size: 20px; margin-bottom: 8px; }
.card p { font-size: 15px; margin: 0; }
.card a.more { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; }

/* Use case row */
.uc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--line); }
.uc-row:last-child { border-bottom: 0; }
.uc-row.flip > div:first-child { order: 2; }
.uc-row .num { font-family: var(--mono); color: var(--accent); font-size: 14px; letter-spacing: 0.1em; margin-bottom: 12px; display: block; }
.uc-row h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 16px; }
.uc-row ul { list-style: none; padding: 0; margin: 24px 0 0; }
.uc-row ul li { position: relative; padding: 8px 0 8px 28px; color: var(--text-2); font-size: 15px; }
.uc-row ul li::before { content: ""; position: absolute; left: 0; top: 14px; width: 16px; height: 2px; background: var(--accent); }
.uc-visual { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; min-height: 240px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.uc-visual .row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.uc-visual .row:last-child { border-bottom: 0; }
.uc-visual .row .l { color: var(--text-2); font-size: 14px; }
.uc-visual .row .r { font-family: var(--mono); font-size: 14px; }
.uc-visual .row .r.acc { color: var(--accent); }
.uc-visual .row .r.bad { color: var(--warn); text-decoration: line-through; opacity: 0.7; }
@media (max-width: 800px) {
  .uc-row { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .uc-row.flip > div:first-child { order: 0; }
}

/* Powered by */
.network-band { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.network-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 800px) { .network-grid { grid-template-columns: 1fr; gap: 32px; } }
.cert-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cert { padding: 10px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--mono); font-size: 13px; color: var(--text-2); }
.cert .acc { color: var(--accent); }

/* CTA band */
.cta-band { background: var(--accent-soft); border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); padding: clamp(50px, 7vw, 90px) 0; }
.cta-band h2 { max-width: 22ch; }
.cta-band-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 800px) { .cta-band-inner { grid-template-columns: 1fr; } }

/* Forms */
.form { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.form label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); margin: 16px 0 6px; text-transform: uppercase; }
.form label:first-of-type { margin-top: 0; }
.form input, .form select, .form textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 15px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); background: var(--bg-3); }
.form textarea { min-height: 120px; resize: vertical; font-family: inherit; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.form button { width: 100%; margin-top: 24px; padding: 14px; }
.form .help { color: var(--text-3); font-size: 13px; margin-top: 14px; }

/* Resources */
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.res { display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; transition: border-color 0.15s ease; color: var(--text); }
.res:hover { border-color: var(--accent); text-decoration: none; }
.res .tag { display: inline-block; font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.06em; margin-bottom: 10px; text-transform: uppercase; }
.res h4 { font-size: 18px; margin-bottom: 8px; line-height: 1.3; }
.res p { font-size: 14px; margin: 0; color: var(--text-2); }
.res .arr { margin-top: 16px; color: var(--accent); font-size: 14px; font-weight: 600; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0 36px; background: var(--bg); color: var(--text-2); font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.foot h5 { color: var(--text); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 16px; font-weight: 600; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { padding: 4px 0; }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--accent); }
.foot-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; color: var(--text-3); font-size: 13px; }

/* Page header (interior pages) */
.ph { padding: clamp(60px, 8vw, 110px) 0 clamp(40px, 5vw, 70px); border-bottom: 1px solid var(--line); }
.ph .eyebrow { margin-bottom: 24px; }
.ph h1 { font-size: clamp(36px, 5vw, 60px); max-width: 18ch; }
.ph .lead { margin-top: 20px; }

/* Two-col content */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }

/* Quote */
.quote { padding: 32px; border-left: 3px solid var(--accent); background: var(--bg-2); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.quote p { font-size: 18px; color: var(--text); margin-bottom: 12px; line-height: 1.5; }
.quote .who { color: var(--text-3); font-size: 14px; }

/* Comparison table */
.cmp { width: 100%; border-collapse: collapse; margin-top: 24px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--line); }
.cmp th { font-weight: 600; color: var(--text-3); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.cmp td.yes { color: var(--accent); font-weight: 600; }
.cmp td.no { color: var(--warn); }
.cmp tr td:first-child { color: var(--text); font-weight: 500; }


/* ============ Hexagon field ============ */
.hex-field { position: relative; overflow: hidden; }
.hex-field > .wrap { position: relative; z-index: 1; }
.hex-field::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2245.03%22%20height%3D%2278.00%22%20viewBox%3D%220%200%2045.03%2078.00%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%234A9FE0%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M%2022.52%2C26.00%20L%20-0.00%2C13.00%20L%200.00%2C-13.00%20L%2022.52%2C-26.00%20L%2045.03%2C-13.00%20L%2045.03%2C13.00%20Z%22%2F%3E%3Cpath%20d%3D%22M%200.00%2C65.00%20L%20-22.52%2C52.00%20L%20-22.52%2C26.00%20L%20-0.00%2C13.00%20L%2022.52%2C26.00%20L%2022.52%2C52.00%20Z%22%2F%3E%3Cpath%20d%3D%22M%2045.03%2C65.00%20L%2022.52%2C52.00%20L%2022.52%2C26.00%20L%2045.03%2C13.00%20L%2067.55%2C26.00%20L%2067.55%2C52.00%20Z%22%2F%3E%3Cpath%20d%3D%22M%2022.52%2C104.00%20L%20-0.00%2C91.00%20L%200.00%2C65.00%20L%2022.52%2C52.00%20L%2045.03%2C65.00%20L%2045.03%2C91.00%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 45px 78px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 65% 75% at 22% 42%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 65% 75% at 22% 42%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
  pointer-events: none;
}
.hex-field.hex-right::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 82% 45%, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 80% at 82% 45%, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
}

/* ============ Engagement flow ============ */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; align-items: stretch; }
.flow-step { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px 24px; }
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; right: -18px; top: 50%; width: 16px; height: 2px;
  background: var(--accent); transform: translateY(-50%);
}
.flow-step:not(:last-child)::before {
  content: ""; position: absolute; right: -18px; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid var(--accent); border-right: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg); margin-right: -2px;
}
.flow-hex { position: relative; width: 54px; height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.flow-hex svg { position: absolute; inset: 0; width: 54px; height: 60px; }
.flow-hex span { position: relative; font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--accent); }
.flow-step h4 { font-size: 20px; margin: 0 0 6px; }
.flow-step p { font-size: 15px; margin: 0; }
.flow-step .rule { height: 2px; background: var(--accent); opacity: .22; margin-top: 20px; }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; }
  .flow-step:not(:last-child)::after, .flow-step:not(:last-child)::before { display: none; }
}

/* ============ Comparison table marks ============ */
.cmp td .mk { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; margin-right: 10px; vertical-align: -4px; flex: none; }
.cmp td .mk.no { background: rgba(255,122,69,.16); }
.cmp td .mk.ok { background: rgba(74,159,224,.18); }
.cmp td .mk svg { width: 11px; height: 11px; }
.cmp td.no-cell { color: var(--text-2); }
.cmp td.yes { color: var(--accent); font-weight: 600; }
.cmp tbody tr:hover td { background: rgba(74,159,224,.04); }

/* ---- Spectrum table: private cloud positioned against every alternative ---- */
.spectrum { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 14px; }
.spectrum th, .spectrum td { padding: 13px 12px; text-align: center; border-bottom: 1px solid var(--line); }
.spectrum thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-3); font-weight: 600; line-height: 1.35; vertical-align: bottom; padding-bottom: 14px; }
.spectrum th:first-child, .spectrum td:first-child { text-align: left; color: var(--text); font-weight: 500; white-space: nowrap; }
.spectrum td { color: var(--text-2); }
.spectrum .us { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.spectrum thead .us { color: var(--accent); border-bottom: 2px solid var(--accent); }
.spectrum tbody tr:hover td:not(.us) { background: rgba(74,159,224,.04); }
.spectrum-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spectrum-note { margin-top: 18px; font-size: 14px; color: var(--text-3); }
@media (max-width: 860px) { .spectrum { min-width: 720px; } }

/* ---- Technical differentiators ---- */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 32px; }
.tech { background: var(--bg); padding: 26px 24px; }
.tech .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; }
.tech h4 { margin: 10px 0 8px; font-size: 17px; }
.tech p { font-size: 14.5px; color: var(--text-2); margin: 0; line-height: 1.6; }

/* ============ Canadian badge ============ */
.ca-badge { display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px 12px 18px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 100px; }
.ca-badge .leaf { width: 26px; height: 28px; color: #D52B1E; flex: none; }
.ca-badge.mono .leaf { color: var(--accent); }
.ca-badge .t1 { display: block; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.25; }
.ca-badge .t2 { display: block; font-size: 13px; color: var(--text-2); line-height: 1.3; }
.ca-badge-lg { padding: 18px 30px 18px 24px; }
.ca-badge-lg .leaf { width: 40px; height: 44px; }
.ca-badge-lg .t1 { font-size: 18px; }

/* ============ Section divider ============ */
.divider { height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, rgba(74,159,224,0) 0%, rgba(74,159,224,.85) 50%, rgba(74,159,224,0) 100%); }



/* =====================================================================
   RRCyber components — RRDC palette throughout.
   Orange (--warn) marks a threat, blue (--accent) work in progress,
   and a single green is used only for a "resolved / protected" status.
   ===================================================================== */
:root { --good: #3DD68C; --good-soft: rgba(61,214,140,0.12); }

.nav-logo img.mark { width: 40px; height: auto; }

/* Status pills */
.st { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; font-weight: 500; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-good { color: var(--good); background: var(--good-soft); }
.st-live::before { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .st-live::before { animation: none; } }

/* Hero with the response card */
.hero-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px,5vw,64px); align-items: center; }
.hero-split h1 { max-width: 21ch; font-size: clamp(34px, 4.3vw, 56px); line-height: 1.08; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }

/* How a detection unfolds */
.incident { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 22px 8px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); }
.incident-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.incident-head .t { font-size: 13px; color: var(--text-3); font-family: var(--mono); letter-spacing: .03em; }
.step-row { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 12px 0; }
.step-row + .step-row { border-top: 1px dashed rgba(255,255,255,.06); }
.step-row .dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; justify-self: center; }
.step-row .dot.threat { background: var(--warn);   box-shadow: 0 0 0 4px rgba(255,122,69,.15); }
.step-row .dot.work   { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.step-row .dot.good   { background: var(--good);   box-shadow: 0 0 0 4px var(--good-soft); }
.step-row h5 { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--text); }
.step-row p  { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.incident-foot { font-size: 12px; color: var(--text-3); padding: 12px 0 10px; border-top: 1px solid var(--line); margin-top: 4px; }
/* Home hero: live threat map button under the detection box */
.hero-side > .btn { display: flex; justify-content: center; gap: 12px; width: 100%; margin-top: 16px; padding: 20px 24px; font-size: 18px; font-weight: 700; background: var(--bg-2); border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(74, 159, 224, 0.12), 0 8px 24px rgba(0, 0, 0, 0.25); }
.hero-side > .btn:hover { background: var(--accent); color: #0E1116; box-shadow: 0 0 0 5px rgba(74, 159, 224, 0.2), 0 10px 28px rgba(0, 0, 0, 0.3); }
.hero-side > .btn .st { padding: 4px 11px; font-size: 13px; }

/* Co-brand band */
.powered { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
.powered strong { color: var(--text); }
.powered .sep { width: 1px; height: 18px; background: var(--line); }

/* Numbered process */
.proc { counter-reset: p; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; margin-top: 32px; }
.proc > div { background: var(--bg); padding: 26px 26px 26px 78px; position: relative; }
.proc > div::before { counter-increment: p; content: counter(p, decimal-leading-zero);
  position: absolute; left: 26px; top: 26px; font-family: var(--mono); font-size: 14px; color: var(--accent); }
.proc h4 { margin: 0 0 6px; font-size: 17px; }
.proc p  { margin: 0; color: var(--text-2); font-size: 15px; }
.proc .who { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }

/* Callout */
.scope { border-left: 3px solid var(--accent); background: var(--bg-2); padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0; }
.scope p { margin: 0; color: var(--text-2); font-size: 15px; }

/* Ticks, in RRDC blue */
.ticks { list-style: none; padding: 0; margin: 16px 0 0; }
.ticks li { position: relative; padding: 6px 0 6px 28px; color: var(--text-2); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 10px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.ticks.no li::before { width: 12px; height: 2px; border: 0; background: var(--text-3); transform: none; top: 17px; }

/* Threat data band */
.threat-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 36px; }
.threat-stats > div { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.threat-stats .big { font-size: clamp(32px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.03em; color: var(--warn); line-height: 1; }
.threat-stats p { margin: 10px 0 0; font-size: 14.5px; color: var(--text-2); }
.src { font-size: 13px; color: var(--text-3); margin-top: 22px; }

/* Price-shape proof points */
.proof { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 28px; }
.proof span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 100px; font-size: 13.5px; color: var(--text-2); }
.proof span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* =====================================================================
   Managed Security dropdown + mobile menu
   ===================================================================== */
.nav-dd { position: relative; }
.nav-dd-btn { background: none; border: 0; padding: 8px 0; cursor: pointer; font: inherit; font-size: 15px;
  font-weight: 500; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.nav-dd-btn:hover, .nav-dd.open .nav-dd-btn, .nav-dd-btn.active { color: var(--text); }
.nav-dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.chev { width: 12px; height: 12px; transition: transform .15s ease; }
.nav-dd:hover .chev, .nav-dd.open .chev { transform: rotate(180deg); }

.nav-dd-menu { position: absolute; top: calc(100% + 14px); left: -18px; width: 640px; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 16px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.nav-dd-menu::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } /* hover bridge */
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu {
  opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-menu .grp { display: block; padding: 6px 12px 8px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.nav-dd-menu a { display: block; padding: 10px 12px; border-radius: var(--radius); }
.nav-dd-menu a:hover, .nav-dd-menu a:focus-visible { background: var(--bg-3); text-decoration: none; outline: none; }
.nav-dd-menu a .t { display: block; color: var(--text); font-weight: 600; font-size: 15px; }
.nav-dd-menu a .d { display: block; color: var(--text-2); font-size: 13px; line-height: 1.4; margin-top: 2px; font-weight: 400; }
.nav-dd-menu .tag { display: inline-block; margin-left: 6px; padding: 1px 7px; vertical-align: 2px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 100px; }
.nav-dd-menu .dd-foot { grid-column: 1 / -1; margin-top: 8px; padding: 14px 12px 4px; border-top: 1px solid var(--line);
  border-radius: 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.nav-dd-menu .dd-foot:hover { background: none; text-decoration: underline; }

.nav-toggle { display: none; }

@media (max-width: 800px) {
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 10px; background: none; border: 1px solid var(--line);
    border-radius: var(--radius); cursor: pointer; }
  .nav-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav.nav-open .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 68px; left: 0; right: 0; max-height: calc(100vh - 68px); overflow-y: auto;
    padding: 8px var(--pad) 24px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .nav.nav-open .nav-links > a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav.nav-open .nav-links > a.nav-cta { margin-top: 18px; padding: 14px 18px; text-align: center; border-bottom: 0; }
  .nav-dd { border-bottom: 1px solid var(--line); }
  .nav-dd-btn { width: 100%; justify-content: space-between; padding: 14px 0; color: var(--text); pointer-events: none; }
  .nav-dd-btn .chev { display: none; }
  .nav-dd-menu { position: static; width: auto; grid-template-columns: 1fr; padding: 0 0 10px; opacity: 1;
    visibility: visible; transform: none; background: none; border: 0; box-shadow: none; }
  .nav-dd-menu::before { display: none; }
  .nav-dd-menu a { padding: 9px 12px; }
  .nav-dd-menu .dd-foot { display: none; }
}
.st-ea { color: var(--accent); border: 1px solid rgba(74,159,224,.45); padding: 3px 9px; font-size: 11px; vertical-align: 3px; }

/* =====================================================================
   Live threat map
   ===================================================================== */
.tm { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
.tm-range { grid-column: 1 / -1; justify-self: start; display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 999px; }
.tm-range[hidden] { display: none; }
.tm-range button { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); background: none; border: 0; border-radius: 999px;
  padding: 7px 14px; cursor: pointer; }
.tm-range button:hover { color: var(--text); }
.tm-range button[aria-pressed="true"] { color: var(--text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(74,159,224,.45); }
.tm-range button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tm-stage { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.tm-map { display: block; width: 100%; height: auto; }
.tm-land { fill: #24324A; }
.tm-borders { fill: none; stroke: #131A24; stroke-width: .7; }
.tm-src { fill: rgba(255,122,69,.18); stroke: rgba(255,122,69,.75); stroke-width: 1; }
.tm-arc { fill: none; stroke-width: 1.6; stroke-linecap: round; opacity: .95; }
.tm-hit { fill: none; stroke-width: 1.5; }
.tm-srv { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.tm-srv-ring { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: .6; transform-box: fill-box; transform-origin: center;
  animation: tm-ring 2.4s ease-out infinite; }
@keyframes tm-ring { from { transform: scale(.4); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tm-srv-ring { animation: none; } }
.tm-legend { position: absolute; left: 16px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.tm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tm-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tm-live { position: absolute; left: 16px; top: 14px; }
.tm-status { position: absolute; inset: auto 16px 44px 16px; margin: 0; padding: 10px 14px; border-radius: var(--radius);
  background: rgba(14,17,22,.88); border: 1px solid var(--line); color: var(--text-2); font-size: 14px; }

.tm-side { display: flex; flex-direction: column; gap: 14px; }
.tm-total { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; }
.tm-total .big { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--warn); }
.tm-total .lbl { color: var(--text-2); font-size: 14px; margin-top: 8px; }
.tm-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; }
.tm-kv > div { background: var(--bg-2); padding: 14px 16px; }
.tm-kv .v { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.tm-kv .l { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.tm-feed { list-style: none; margin: 0; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); min-height: 210px; }
.tm-feed li { display: grid; grid-template-columns: 78px 10px 1fr; gap: 8px; align-items: center; padding: 6px 0; font-size: 13.5px;
  color: var(--text-2); border-bottom: 1px solid var(--line); animation: tm-in .35s ease-out; }
.tm-feed li:last-child { border-bottom: 0; }
.tm-feed .t { white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.tm-feed .k { width: 8px; height: 8px; border-radius: 50%; }
@keyframes tm-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tm-h { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }

.tm-lower { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-top: 20px; align-items: start; }
.tm-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; }
.tm-hours { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin-top: 6px; }
.tm-hours span { flex: 1; background: var(--accent); opacity: .85; border-radius: 3px 3px 0 0; min-height: 3px; }
.tm-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); margin-top: 8px; }
.tm-top { list-style: none; margin: 6px 0 0; padding: 0; }
.tm-top li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 7px 0; font-size: 14px; }
.tm-top .n { color: var(--text); }
.tm-top .v { font-family: var(--mono); color: var(--text-2); font-size: 13px; }
.tm-top .b { grid-column: 1 / -1; height: 4px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.tm-top .b i { display: block; height: 100%; background: var(--warn); border-radius: 4px; }
.tm-updated { margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--text-3); }

@media (max-width: 980px) {
  .tm { grid-template-columns: 1fr; }
  .tm-lower { grid-template-columns: 1fr; }
}

/* Logo lockup in nav and footer */
.nav-logo img.logo { height: 36px; width: auto; display: block; }
@media (max-width: 480px) { .nav-logo img.logo { height: 30px; } }

/* Long-form text (privacy) */
.prose { max-width: 760px; }
.prose h2 { font-size: 26px; margin: 48px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; margin: 26px 0 8px; color: var(--text); }
.prose p { color: var(--text-2); }
.prose .ticks li { color: var(--text-2); }

/* =====================================================================
   News & insights
   ===================================================================== */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.news-card { display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px; color: var(--text); transition: border-color .15s ease; }
.news-card:hover { border-color: var(--accent); text-decoration: none; }
.news-card h3 { font-size: 20px; line-height: 1.3; margin: 14px 0 10px; }
.news-card p { font-size: 15px; color: var(--text-2); margin: 0 0 18px; }
.news-card .arr { margin-top: auto; color: var(--accent); font-size: 14px; font-weight: 600; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: 12px; color: var(--text-3); letter-spacing: .04em; }
.news-meta .tag, .post-tags .tag { color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.post-head { max-width: 860px; }
.post-head h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.1; }
.post-back { display: inline-block; margin-bottom: 22px; font-size: 14px; font-weight: 600; }
.post-meta { margin-top: 18px; font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.post-tags .tag { font-family: var(--mono); font-size: 11.5px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 100px; }
.post { max-width: 760px; font-size: 17px; }
.post p, .post li { color: var(--text-2); line-height: 1.7; }
.post h2 { font-size: 26px; margin: 44px 0 12px; }
.post h2:first-child { margin-top: 0; }
.post ul, .post ol { padding-left: 22px; }
.post li { margin: 6px 0; }
.post strong { color: var(--text); }
.post a { text-decoration: underline; text-underline-offset: 3px; }
.post-sources { max-width: 760px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.post-sources h2 { font-size: 15px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin: 0 0 12px; }
.post-sources ol { padding-left: 20px; margin: 0; }
.post-sources li { font-size: 14px; color: var(--text-3); margin: 6px 0; line-height: 1.5; }

.nav-dd-menu.narrow { width: 340px; grid-template-columns: 1fr; }
@media (max-width: 800px) { .nav-dd-menu.narrow { width: auto; } }

/* Footer: no sideways scroll on phones */
.foot-grid > div { min-width: 0; }
.foot form input { min-width: 0; }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

/* Tighter nav between tablet and laptop widths, so six items fit on one line */
@media (min-width: 801px) and (max-width: 1060px) {
  .nav-links { gap: 18px; }
  .nav-links a, .nav-dd-btn { font-size: 14px; }
  .nav-cta { padding: 8px 14px; }
}

/* Balanced grids: a set of four cards or tiles sits 2 x 2 on laptops and
   tablets and 4 across on wide screens, instead of 3 + 1 with an empty gap */
@media (min-width: 641px) {
  .cards:has(> :nth-child(4):last-child),
  .tech-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .cards:has(> :nth-child(4):last-child),
  .tech-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== RRTech site bar (shared by rrcyber.ca and rrdc.cloud; see Site Source/sitebar.py) ===== */
.sitebar { background: #090C10; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.sitebar-inner { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.sitebar-brand { font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.sitebar-brand .hi { color: #FFB547; }
a.sitebar-brand:hover { text-decoration: none; opacity: .85; }
.sitebar-sites { display: flex; gap: 4px; height: 100%; }
.sitebar-sites a { display: flex; align-items: center; gap: 7px; padding: 0 12px; color: var(--text-3);
  border-bottom: 2px solid transparent; text-decoration: none; }
.sitebar-sites a b { color: var(--text); font-weight: 600; }
.sitebar-sites a b .hi { color: #FFB547; }   /* same orange as "Cyber" and "DC" in the logos */
.sitebar-sites a:hover { color: var(--text); text-decoration: none; }
.sitebar-sites a[aria-current="page"] { color: var(--text-2); border-bottom-color: var(--accent); }
.sitebar-sites a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sitebar-sites img { width: 14px; height: 14px; border-radius: 3px; }
@media (max-width: 800px) {
  .sitebar-brand, .sitebar-sites .d { display: none; }
  .sitebar-sites { width: 100%; justify-content: space-between; }
  .sitebar-sites a { padding: 0 4px; }
}
/* ===== end site bar ===== */

/* ===== Lead form embed (shared by rrcyber.ca and rrdc.cloud; see Site Source/leadform.py) ===== */
.form-embed { padding: 24px; }
.form-embed iframe { display: block; width: 100%; height: 1760px; border: 0; border-radius: var(--radius); background: var(--bg-3); }
.form-embed .help a { color: var(--text-2); }
@media (max-width: 600px) {
  .form-embed { padding: 10px; }
  .form-embed > h3, .form-embed > p { padding: 0 8px; }
  .form-embed iframe { height: 1820px; }
}
/* ===== end lead form embed ===== */

/* ===== Privacy policy (shared by all three sites; see Site Source/privacy.py) ===== */
.pp { max-width: 760px; }
.pp h2 { font-size: 26px; margin: 48px 0 12px; }
.pp h2:first-child { margin-top: 0; }
.pp h3 { font-size: 18px; margin: 26px 0 8px; color: var(--text); }
.pp p, .pp li { color: var(--text-2); }
.pp ul { list-style: none; padding: 0; margin: 12px 0 0; }
.pp li { position: relative; padding: 6px 0 6px 22px; }
.pp li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pp strong { color: var(--text); }
/* ===== end privacy policy ===== */

/* ===== Background animation (assets/bg-anim.js) =====
   A canvas behind a hero. It fades out toward the headline so the text stays easy to read. */
.bg-anim { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.4) 42%, #000 78%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.4) 42%, #000 78%); }
@media (max-width: 900px) { .bg-anim { opacity: .55; -webkit-mask-image: none; mask-image: none; } }
/* ===== end background animation ===== */

/* ===== RRTech hub (Site Source/build_rrtech_site.py) ===== */
.rt-word { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--text); }
@media (max-width: 600px) { .rt-word { font-size: 20px; } .rt-word .hi { display: block; } }
.rt-word .hi, .rt-name .hi { color: #FFB547; }
.rt-practice .logo-row { display: flex; align-items: center; gap: 12px; height: 44px; margin-bottom: 18px; }
.rt-practice .logo-row img { height: 36px; width: auto; }
.rt-practice .rt-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.rt-practice h3 { margin-bottom: 10px; }
.rt-practice .ticks { margin-bottom: 18px; }

/* Hero: the two holographic marks either side of the headline, floating over a projector glow */
.rt-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "cyber text dc";
  align-items: center; gap: clamp(16px, 3vw, 40px); }
.rt-hero-text { grid-area: text; text-align: center; }
.rt-hero-text h1 { font-size: clamp(34px, 3.8vw, 50px); max-width: 16ch; margin-left: auto; margin-right: auto; }
.rt-hero-text .lead { margin-left: auto; margin-right: auto; max-width: 52ch; }
.rt-hero-text .hero-cta { justify-content: center; }
.rt-holo-cyber { grid-area: cyber; justify-self: start; }
.rt-holo-dc { grid-area: dc; justify-self: end; }
@media (max-width: 900px) {
  .rt-hero { grid-template-columns: 1fr 1fr; grid-template-areas: "text text" "cyber dc"; row-gap: 32px; }
  .rt-holo-cyber, .rt-holo-dc { justify-self: center; }
}
.rt-holo { --holo-h: clamp(120px, 17vw, 230px); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 0; color: var(--text); }
.rt-holo:hover { text-decoration: none; }
.rt-holo::before { content: ""; position: absolute; top: 4%; left: 50%; width: 82%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(74,159,224,.30), rgba(74,159,224,0) 65%); filter: blur(10px); pointer-events: none; }
.rt-holo img { position: relative; height: var(--holo-h); width: auto; max-width: 100%; animation: rt-float 7s ease-in-out infinite; }
.rt-holo:nth-child(2) img { animation-delay: -3.5s; }
.rt-holo .base { position: relative; width: 70%; height: 18px; margin-top: 6px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(100,191,239,.45), rgba(100,191,239,0) 70%); }
.rt-holo .rt-name { position: relative; margin-top: 14px; font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.02em; }
.rt-holo .rt-line { position: relative; margin-top: 2px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.rt-holo:hover .rt-line { color: var(--accent); }
/* The shield's solid body sits left of its image's middle (the loose pieces trail off to the
   right), so centring the words on the image box leaves them looking right of the shield.
   Pull the base and the words left by the gap between the image centre and the artwork's
   centre of mass: 11% of the image width (hub-shield.webp is 647x520, so 0.138 of its height). */
.rt-holo-cyber .base, .rt-holo-cyber .rt-name, .rt-holo-cyber .rt-line { transform: translateX(calc(var(--holo-h) * -0.138)); }
@keyframes rt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .rt-holo img { animation: none; } }

/* Who we are: the Canadian-owned badge, enlarged */
.ca-badge.rt-badge { padding: 24px 38px 24px 28px; gap: 18px; }
.ca-badge.rt-badge .leaf { width: 60px; height: 66px; }
.ca-badge.rt-badge .t1 { font-size: clamp(20px, 2.4vw, 28px); }
.ca-badge.rt-badge .t2 { font-size: 16px; margin-top: 4px; }