/* Trinity Cyber static fork — generated tokens first; the REBRAND block is at the bottom of this file. */
:root{--background:#fff;--foreground:#0a0a0a;--card:#fff;--card-foreground:#0a0a0a;--popover:#fff;--popover-foreground:#0a0a0a;--primary:#ff1449;--primary-foreground:#fff;--secondary:#f4f4f5;--secondary-foreground:#18181b;--muted:#f5f5f5;--muted-foreground:#737373;--accent:#f5f5f5;--accent-foreground:#171717;--destructive:#e40014;--border:#e5e5e5;--input:#e5e5e5;--ring:#a1a1a1;--chart-1:#7bf1a8;--chart-2:#00c758;--chart-3:#00a544;--chart-4:#008138;--chart-5:#016630;--radius:.625rem;--sidebar:#fafafa;--sidebar-foreground:#0a0a0a;--sidebar-primary:#ff1449;--sidebar-primary-foreground:#fff;--sidebar-accent:#f5f5f5;--sidebar-accent-foreground:#171717;--sidebar-border:#e5e5e5;--sidebar-ring:#a1a1a1}
@supports (color:lab(0% 0 0)){:root{--background:lab(100% 0 0);--foreground:lab(2.75381% 0 0);--card:lab(100% 0 0);--card-foreground:lab(2.75381% 0 0);--popover:lab(100% 0 0);--popover-foreground:lab(2.75381% 0 0);--secondary:lab(96.1634% .0993311 -.364041);--secondary-foreground:lab(8.30603% .618205 -2.16572);--muted:lab(96.52% -.0000298023 .0000119209);--muted-foreground:lab(48.496% 0 0);--accent:lab(96.52% -.0000298023 .0000119209);--accent-foreground:lab(7.78201% -.0000149012 0);--destructive:lab(48.4493% 77.4328 61.5452);--border:lab(90.952% 0 -.0000119209);--input:lab(90.952% 0 -.0000119209);--ring:lab(66.128% -.0000298023 .0000119209);--chart-1:lab(86.9953% -47.2691 25.0054);--chart-2:lab(70.5521% -66.5147 45.8073);--chart-3:lab(59.0978% -58.6621 41.2579);--chart-4:lab(47.0329% -47.0239 31.4788);--chart-5:lab(37.4616% -36.7971 22.9692);--sidebar:lab(98.26% 0 0);--sidebar-foreground:lab(2.75381% 0 0);--sidebar-accent:lab(96.52% -.0000298023 .0000119209);--sidebar-accent-foreground:lab(7.78201% -.0000149012 0);--sidebar-border:lab(90.952% 0 -.0000119209);--sidebar-ring:lab(66.128% -.0000298023 .0000119209)}}
.dark{--background:#0a0a0a;--foreground:#fafafa;--card:#171717;--card-foreground:#fafafa;--popover:#171717;--popover-foreground:#fafafa;--primary:#ff1449;--primary-foreground:#fff;--secondary:#27272a;--secondary-foreground:#fafafa;--muted:#262626;--muted-foreground:#a1a1a1;--accent:#262626;--accent-foreground:#fafafa;--destructive:#ff6568;--border:#ffffff1a;--input:#ffffff26;--ring:#737373;--chart-1:#7bf1a8;--chart-2:#00c758;--chart-3:#00a544;--chart-4:#008138;--chart-5:#016630;--sidebar:#171717;--sidebar-foreground:#fafafa;--sidebar-primary:#ff1449;--sidebar-primary-foreground:#fff;--sidebar-accent:#262626;--sidebar-accent-foreground:#fafafa;--sidebar-border:#ffffff1a;--sidebar-ring:#737373}
@supports (color:lab(0% 0 0)){.dark{--background:lab(2.75381% 0 0);--foreground:lab(98.26% 0 0);--card:lab(7.78201% -.0000149012 0);--card-foreground:lab(98.26% 0 0);--popover:lab(7.78201% -.0000149012 0);--popover-foreground:lab(98.26% 0 0);--secondary:lab(15.7305% .613764 -2.16959);--secondary-foreground:lab(98.26% 0 0);--muted:lab(15.204% 0 -.00000596046);--muted-foreground:lab(66.128% -.0000298023 .0000119209);--accent:lab(15.204% 0 -.00000596046);--accent-foreground:lab(98.26% 0 0);--destructive:lab(63.7053% 60.745 31.3109);--border:lab(100% 0 0/.1);--input:lab(100% 0 0/.15);--ring:lab(48.496% 0 0);--chart-1:lab(86.9953% -47.2691 25.0054);--chart-2:lab(70.5521% -66.5147 45.8073);--chart-3:lab(59.0978% -58.6621 41.2579);--chart-4:lab(47.0329% -47.0239 31.4788);--chart-5:lab(37.4616% -36.7971 22.9692);--sidebar:lab(7.78201% -.0000149012 0);--sidebar-foreground:lab(98.26% 0 0);--sidebar-accent:lab(15.204% 0 -.00000596046);--sidebar-accent-foreground:lab(98.26% 0 0);--sidebar-border:lab(100% 0 0/.1);--sidebar-ring:lab(48.496% 0 0)}}

/* ============================================================
   TRINITY CYBER — brand tokens (from tokens.css / Figma "26 Trinity Cyber Website Designs")
   This block is LAST so it overrides the generated defaults above. :root (light) must come BEFORE .dark. Dark is the lead theme.
   ============================================================ */
:root {
  --background: #ffffff;
  --foreground: #181818;              /* p1 */
  --card: #ffffff;
  --card-foreground: #181818;
  --popover: #ffffff;
  --popover-foreground: #181818;
  --primary: #1260e6;
  --primary-foreground: #ffffff;
  --secondary: #f6f6f6;               /* t1 */
  --secondary-foreground: #181818;
  --muted: #f6f6f6;
  --muted-foreground: #435461;        /* s1 slate */
  --accent: #f6f6f6;
  --accent-foreground: #181818;
  --destructive: #e0531c;
  --border: rgba(24,24,24,.10);       /* line-l */
  --input: rgba(24,24,24,.14);
  --ring: #1260e6;
  --chart-2: #16b45c;                 /* darker green for text on light */
  --chart-3: #16b45c;
  --chart-4: #0f8a45;
  --sidebar: #f6f6f6;
  --sidebar-foreground: #181818;
  --sidebar-accent: #e7edf5;
  --sidebar-accent-foreground: #181818;
  --sidebar-border: rgba(24,24,24,.10);
  --sidebar-ring: #1260e6;
  --radius: 0.625rem;
}
.dark {
  --background: #000000;              /* pure black page ground; the top glow fades into it */
  --foreground: #ffffff;
  --card: #12141a;
  --card-foreground: #ffffff;
  --popover: #12141a;
  --popover-foreground: #ffffff;
  --primary: #1260e6;                 /* p2 royal blue — brand primary */
  --primary-foreground: #ffffff;
  --secondary: #1a1d25;
  --secondary-foreground: #ffffff;
  --muted: #1a1d25;
  --muted-foreground: #a1b4c4;        /* t2 blue-gray — muted text on dark */
  --accent: #1a1d25;
  --accent-foreground: #ffffff;
  --destructive: #fc502c;             /* s2 orange — warnings */
  --border: rgba(255,255,255,.12);    /* line-d */
  --input: rgba(255,255,255,.16);
  --ring: #00a0ff;                    /* t4 bright blue */
  --chart-1: #45ed7f;                 /* s3 green — success text on dark */
  --chart-2: #45ed7f;
  --sidebar: #0c0d11;
  --sidebar-foreground: #ffffff;
  --sidebar-accent: #1a1d25;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(255,255,255,.12);
  --sidebar-ring: #00a0ff;
}
/* Typography: Trinity headings are Inter Light with tight tracking (site h2: 300 / -0.04em). Inter is bundled. */
h1 { font-weight: 300; letter-spacing: -0.04em; }
h2 { font-weight: 400; letter-spacing: -0.02em; }

/* Hero band (index.html): the homepage "sequence" filament field behind the welcome copy */
canvas.hero-flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero-band { background: #000; }
html:not(.dark) .hero-band { background: #ffffff; }
/* The isometric mark sits on the gateway point (matches GATE_X / GATE_Y in hero-flow.js) */
img.hero-mark {
  position: absolute; left: 70%; top: 52%; width: clamp(120px, 24%, 200px); height: auto;
  transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0, 160, 255, .22));
  animation: heroMarkFloat 7s ease-in-out infinite;
}
@keyframes heroMarkFloat { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { img.hero-mark { animation: none; } }
html:not(.dark) img.hero-mark { filter: drop-shadow(0 14px 28px rgba(18, 96, 230, .28)) drop-shadow(0 2px 4px rgba(24, 24, 24, .25)); }
@media (max-width: 767px) { img.hero-mark { display: none; } }
/* When the welcome card gets narrow the filaments and mark run under the copy: fade in a scrim between art and text */
.hero-band { container-type: inline-size; }
.hero-band > div.relative { z-index: 2; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.45) 100%);
}
html:not(.dark) .hero-scrim { background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.75) 55%, rgba(255,255,255,.5) 100%); }
@container (max-width: 900px) { .hero-scrim { opacity: 1; } }