/* ============================================================================
   OBSIDIAN SENTINEL - ClawSecure v1 Design System (static, same-origin, CSP-clean)
   Hand-authored from the LOCKED design tokens in Visual_Design_System_Extraction.md
   (Tailwind config sec.2 + custom CSS sec.3 + brand colors sec.8). NOT a Tailwind
   JIT artifact: the bounded utility set below mirrors only the classes the design's
   component patterns (sec.5) actually use. No @import, no external origin. Fonts are
   loaded via the existing <link> tags (Google Fonts, already CSP-allowed).
   ============================================================================ */

/* ---------- 1. DESIGN TOKENS (from Tailwind config sec.2 + brand colors sec.8) ---------- */
:root{
  --on-background:#e3e2e9; --on-primary-container:#004361; --outline:#87929c;
  --surface-dim:#121318; --secondary:#ffb3ad; --on-surface:#e3e2e9;
  --surface-container-low:#1a1b20; --surface-bright:#38393e; --surface-variant:#33343a;
  --on-primary:#00344d; --primary:#00b4ff; --on-primary-fixed:#001e2f;
  --primary-container:#00b4ff; --secondary-container:#9c0015;
  --surface-container-lowest:#0d0e13; --inverse-on-surface:#2f3036;
  --background:#05060a; --on-secondary:#68000a; --on-surface-variant:#bdc8d2;
  --surface:#121318; --surface-container-highest:#33343a; --surface-container-high:#292a2f;
  --surface-container:#1e1f25; --outline-variant:#3e4851; --error:#ffb4ab;
  --crimson:#e54040; --electric-blue:#00b4ff; --deep-obsidian:#060810;
  /* ---- SPACING SYSTEM (Padding_Spacing_Framework_2026-06-21, 8px base scale) ---- */
  --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --space-30:120px; --space-40:160px;
  /* Horizontal system: KEEP existing 80rem=1280px max (Part C C.0, intentional override of framework 1200) */
  --content-max:80rem; --gutter-desktop:80px; --gutter-tablet:48px; --gutter-mobile:20px;
  --text-measure:640px;
  /* Hero-top normalization (H1/H2): ONE nav-bottom-to-H1 gap site-wide. --hero-gap LOCKED 72px (J.D.). Definitions only; applied in Chunk 3 (H2). */
  --nav-h:50px; --notify-h:37px; --hero-gap:72px;
  /* Separation = padding + bg alternation only (never hairlines/ad-hoc margins) */
  --bg-base:#05060a; --bg-panel:rgba(255,255,255,0.02);
}

/* ---------- 2. BASE ---------- */
html.dark, html{background-color:var(--background);}
body.os-body{background:var(--background);color:var(--on-surface);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;}
.os-body *{box-sizing:border-box;}
.os-body a{text-decoration:none;color:inherit;}

/* ---------- 3. FONT FAMILIES (Typography scale sec.4) ---------- */
.font-headline,.font-body{font-family:'Inter',system-ui,sans-serif;}
.font-montserrat{font-family:'Montserrat','Inter',sans-serif;}
.font-label{font-family:'Space Grotesk','Inter',sans-serif;}
.font-mono{font-family:'JetBrains Mono',ui-monospace,monospace;}

/* ---------- 4. BRAND + CUSTOM CLASSES (verbatim from sec.3) ---------- */
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  font-family:'Material Symbols Outlined';vertical-align:middle;line-height:1;}
.crimson-text{color:#e54040;}
.electric-blue-text{color:#00b4ff;}
/* Anchor-approved fix: beat the shared `.os-body a{color:inherit}` (0,1,1) so ANCHOR call-out links keep our electric-blue. Provable no-op on SSR templates (report.html/blog-post.html use neither .electric-blue-text nor .os-body). */
a.electric-blue-text{color:#00b4ff;}
.sentinel-glow{box-shadow:0 0 40px 0 rgba(0,180,255,.1);}
.threat-glow{box-shadow:0 0 32px 0 rgba(229,64,64,.08);}
.glass-border{border:1px solid rgba(135,146,156,.1);}
.dashboard-frame{border:1px solid rgba(135,146,156,.2);background:rgba(18,19,24,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.mask-gradient{-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);}
.threat-map-grid{background-image:linear-gradient(rgba(0,180,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,255,.05) 1px,transparent 1px);background-size:30px 30px;}
.arc-glow{filter:drop-shadow(0 0 4px #e54040);}
.custom-scrollbar::-webkit-scrollbar{width:4px;}
.custom-scrollbar::-webkit-scrollbar-track{background:transparent;}
.custom-scrollbar::-webkit-scrollbar-thumb{background:#3e4851;border-radius:10px;}
.bg-deep-obsidian{background-color:#060810;}
.card-hover{transition:all .4s ease;}
.card-hover:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(229,64,64,.08);}
.card-hover-blue:hover{box-shadow:0 12px 40px rgba(0,180,255,.08);}
.gradient-text{background:linear-gradient(135deg,#e54040,#00b4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.section-glow{position:relative;}
.bg-grid-subtle{background-image:radial-gradient(rgba(0,180,255,.03) 1px,transparent 1px);background-size:24px 24px;}

/* ---------- 4b. LAYOUT SYSTEM (canonical; pages with inline .os-wrap/.os-section override these) ---------- */
.os-wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter-desktop);}
.os-wrap--narrow{max-width:var(--text-measure);}
.os-section{padding:var(--space-24) 0;position:relative;}
.os-section--hero{padding:var(--space-40) 0 var(--space-30);position:relative;}
.os-section--compact{padding:var(--space-12) 0;position:relative;}
@media(max-width:1199px){ .os-wrap{padding:0 var(--gutter-tablet);} }
@media(max-width:767px){
  .os-wrap{padding:0 var(--gutter-mobile);}
  .os-section{padding:var(--space-16) 0;}
  .os-section--hero{padding:var(--space-24) 0 var(--space-16);}
  .os-section--compact{padding:var(--space-8) 0;}
}

/* ---------- 4c. STANDARDS-BADGE CARD SYSTEM (lifted from registry.html; index-native tokens; reusable) ---------- */
.sb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);align-items:stretch;}
.sb-card{background:rgba(13,17,23,.85);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:28px 16px 24px;text-align:center;transition:all .4s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
.sb-card::before{content:'';position:absolute;inset:0;border-radius:14px;opacity:0;transition:opacity .4s ease;pointer-events:none;}
.sb-card:hover{transform:translateY(-3px);}
.sb-card:hover::before{opacity:1;}
.sb-card[data-accent="blue"]{border-color:rgba(0,180,255,.15);}.sb-card[data-accent="blue"]:hover{border-color:rgba(0,180,255,.35);box-shadow:0 0 30px rgba(0,180,255,.12);}.sb-card[data-accent="blue"]::before{background:radial-gradient(ellipse at center,rgba(0,180,255,.06),transparent 70%);}
.sb-card[data-accent="gold"]{border-color:rgba(240,160,48,.15);}.sb-card[data-accent="gold"]:hover{border-color:rgba(240,160,48,.35);box-shadow:0 0 30px rgba(240,160,48,.12);}.sb-card[data-accent="gold"]::before{background:radial-gradient(ellipse at center,rgba(240,160,48,.06),transparent 70%);}
.sb-card[data-accent="silver"]{border-color:rgba(192,192,192,.15);}.sb-card[data-accent="silver"]:hover{border-color:rgba(192,192,192,.35);box-shadow:0 0 30px rgba(192,192,192,.12);}.sb-card[data-accent="silver"]::before{background:radial-gradient(ellipse at center,rgba(192,192,192,.06),transparent 70%);}
.sb-card[data-accent="orange"]{border-color:rgba(255,140,0,.15);}.sb-card[data-accent="orange"]:hover{border-color:rgba(255,140,0,.35);box-shadow:0 0 30px rgba(255,140,0,.12);}.sb-card[data-accent="orange"]::before{background:radial-gradient(ellipse at center,rgba(255,140,0,.06),transparent 70%);}
.sb-card[data-accent="green"]{border-color:rgba(0,204,102,.15);}.sb-card[data-accent="green"]:hover{border-color:rgba(0,204,102,.35);box-shadow:0 0 30px rgba(0,204,102,.12);}.sb-card[data-accent="green"]::before{background:radial-gradient(ellipse at center,rgba(0,204,102,.06),transparent 70%);}
.sb-card[data-accent="purple"]{border-color:rgba(155,89,182,.15);}.sb-card[data-accent="purple"]:hover{border-color:rgba(155,89,182,.35);box-shadow:0 0 30px rgba(155,89,182,.12);}.sb-card[data-accent="purple"]::before{background:radial-gradient(ellipse at center,rgba(155,89,182,.06),transparent 70%);}
.sb-icon{width:52px;height:52px;min-height:52px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;}
.sb-icon svg{width:48px;height:48px;}
.sb-title{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--on-surface);margin-bottom:6px;text-transform:uppercase;min-height:30px;display:flex;align-items:center;justify-content:center;}
.sb-sub{font-size:12px;color:var(--on-surface-variant);line-height:1.4;min-height:34px;display:flex;align-items:center;justify-content:center;}
.sb-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;}
.sb-link .sb-card{flex:1;width:100%;}
.sb-link:hover .sb-sub{color:var(--on-surface);}
@media(max-width:900px){.sb-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4);}}
@media(max-width:480px){.sb-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3);}.sb-card{padding:20px 10px 16px;}.sb-icon{width:44px;height:44px;margin-bottom:10px;}.sb-icon svg{width:40px;height:40px;}.sb-title{font-size:10px;}.sb-sub{font-size:11px;}}

/* ---------- 5. KEYFRAMES + ANIMATIONS (sec.2) ---------- */
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes marquee-reverse{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@keyframes os-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes sonar{0%{transform:scale(1);opacity:.8}100%{transform:scale(3);opacity:0}}
.animate-marquee{animation:marquee 40s linear infinite;}
.animate-marquee-reverse{animation:marquee-reverse 40s linear infinite;}
.animate-pulse-fast{animation:os-pulse 1s cubic-bezier(.4,0,.6,1) infinite;}
.animate-sonar{animation:sonar 2s cubic-bezier(0,0,.2,1) infinite;}

/* ---------- 6. COLOR UTILITIES (tokens) ---------- */
.text-on-surface{color:var(--on-surface);} .text-on-surface-variant{color:var(--on-surface-variant);}
.text-primary{color:var(--primary);} .text-outline{color:var(--outline);}
.text-error{color:var(--error);} .text-secondary{color:var(--secondary);}
.text-white{color:#fff;} .text-on-primary{color:var(--on-primary);}
.bg-background{background-color:var(--background);} .bg-surface{background-color:var(--surface);}
.bg-surface-dim{background-color:var(--surface-dim);}
.bg-surface-container{background-color:var(--surface-container);}
.bg-surface-container-low{background-color:var(--surface-container-low);}
.bg-surface-container-lowest{background-color:var(--surface-container-lowest);}
.bg-surface-container-high{background-color:var(--surface-container-high);}
.bg-surface-container-highest{background-color:var(--surface-container-highest);}
.bg-surface-variant{background-color:var(--surface-variant);}
.bg-primary{background-color:var(--primary);}
.bg-primary\/90:hover,.hover\:bg-primary\/90:hover{background-color:rgba(0,180,255,.9);}
.bg-crimson{background-color:var(--crimson);}
.bg-black{background-color:#000;} .bg-transparent{background-color:transparent;}
.bg-background\/80{background-color:rgba(5,6,10,.8);}

/* border colors */
.border-outline-variant{border-color:var(--outline-variant);}
.border-outline-variant\/10{border-color:rgba(62,72,81,.1);}
.border-outline-variant\/20{border-color:rgba(62,72,81,.2);}
.border-outline-variant\/30{border-color:rgba(62,72,81,.3);}
.border-primary{border-color:var(--primary);}
.border-primary\/30{border-color:rgba(0,180,255,.3);}
.hover\:border-primary\/30:hover{border-color:rgba(0,180,255,.3);}
.border-crimson\/30{border-color:rgba(229,64,64,.3);}

/* ---------- 7. LAYOUT UTILITIES (bounded set used by sec.5 patterns) ---------- */
.max-w-7xl{max-width:80rem;} .max-w-5xl{max-width:64rem;} .max-w-4xl{max-width:56rem;}
.max-w-3xl{max-width:48rem;} .max-w-2xl{max-width:42rem;} .max-w-xl{max-width:36rem;}
.max-w-lg{max-width:32rem;} .max-w-md{max-width:28rem;} .max-w-none{max-width:none;}
.mx-auto{margin-left:auto;margin-right:auto;}
.w-full{width:100%;} .w-auto{width:auto;} .h-auto{height:auto;} .h-full{height:100%;}
.w-px{width:1px;} .h-px{height:1px;} .h-1{height:.25rem;} .h-1\.5{height:.375rem;}
.h-8{height:2rem;} .w-8{width:2rem;} .h-12{height:3rem;} .w-12{width:3rem;}
.h-16{height:4rem;} .w-16{width:4rem;} .min-h-screen{min-height:100vh;}
.relative{position:relative;} .absolute{position:absolute;} .sticky{position:sticky;} .fixed{position:fixed;}
.top-0{top:0;} .left-0{left:0;} .right-0{right:0;} .bottom-0{bottom:0;} .inset-0{inset:0;}
.z-10{z-index:10;} .z-20{z-index:20;} .z-50{z-index:50;}
.overflow-hidden{overflow:hidden;} .overflow-x-auto{overflow-x:auto;}
.block{display:block;} .inline-block{display:inline-block;} .inline-flex{display:inline-flex;}
.flex{display:flex;} .grid{display:grid;} .hidden{display:none;}
.flex-1{flex:1 1 0%;} .flex-col{flex-direction:column;} .flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;} .items-start{align-items:flex-start;} .items-stretch{align-items:stretch;}
.justify-center{justify-content:center;} .justify-between{justify-content:space-between;} .justify-start{justify-content:flex-start;}
.text-center{text-align:center;} .text-left{text-align:left;}
.gap-1{gap:.25rem;} .gap-0\.5{gap:.125rem;} .gap-2{gap:.5rem;} .gap-3{gap:.75rem;}
.gap-4{gap:1rem;} .gap-6{gap:1.5rem;} .gap-8{gap:2rem;} .gap-12{gap:3rem;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.col-span-2{grid-column:span 2/span 2;}

/* spacing */
.p-2{padding:.5rem;} .p-4{padding:1rem;} .p-6{padding:1.5rem;} .p-8{padding:2rem;}
.px-4{padding-left:1rem;padding-right:1rem;} .px-6{padding-left:1.5rem;padding-right:1.5rem;}
.px-8{padding-left:2rem;padding-right:2rem;}
.py-2{padding-top:.5rem;padding-bottom:.5rem;} .py-3{padding-top:.75rem;padding-bottom:.75rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;} .py-5{padding-top:1.25rem;padding-bottom:1.25rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;} .py-16{padding-top:4rem;padding-bottom:4rem;}
.py-24{padding-top:6rem;padding-bottom:6rem;} .py-32{padding-top:8rem;padding-bottom:8rem;}
.pb-5{padding-bottom:1.25rem;} .pt-0{padding-top:0;}
.mt-2{margin-top:.5rem;} .mt-3{margin-top:.75rem;} .mt-4{margin-top:1rem;} .mt-6{margin-top:1.5rem;}
.mt-8{margin-top:2rem;} .mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:.75rem;}
.mb-4{margin-bottom:1rem;} .mb-6{margin-bottom:1.5rem;} .mb-8{margin-bottom:2rem;} .mb-12{margin-bottom:3rem;}

/* ---------- 8. TYPOGRAPHY UTILITIES ---------- */
.text-\[10px\]{font-size:10px;} .text-xs{font-size:.75rem;} .text-sm{font-size:.875rem;}
.text-base{font-size:1rem;} .text-lg{font-size:1.125rem;} .text-xl{font-size:1.25rem;}
.text-2xl{font-size:1.5rem;} .text-3xl{font-size:1.875rem;} .text-4xl{font-size:2.25rem;}
.text-5xl{font-size:3rem;} .text-6xl{font-size:3.75rem;} .text-7xl{font-size:4.5rem;}
.font-medium{font-weight:500;} .font-semibold{font-weight:600;} .font-bold{font-weight:700;}
.font-extrabold{font-weight:800;}
.uppercase{text-transform:uppercase;} .tracking-tight{letter-spacing:-.025em;}
.tracking-tighter{letter-spacing:-.05em;} .tracking-widest{letter-spacing:.1em;}
.leading-relaxed{line-height:1.625;} .leading-tight{line-height:1.25;}
.leading-\[1\.05\]{line-height:1.05;}

/* ---------- 9. BORDER / RADIUS / SHADOW / EFFECTS ---------- */
.border{border-width:1px;border-style:solid;} .border-t{border-top-width:1px;border-top-style:solid;}
.border-b{border-bottom-width:1px;border-bottom-style:solid;}
.rounded-lg{border-radius:.5rem;} .rounded-xl{border-radius:.75rem;} .rounded-2xl{border-radius:1rem;}
.rounded-\[2rem\]{border-radius:2rem;} .rounded-full{border-radius:9999px;}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -4px rgba(0,0,0,.3);}
.backdrop-blur-lg{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.opacity-90{opacity:.9;} .opacity-80{opacity:.8;} .opacity-70{opacity:.7;}
.transition-all{transition:all .3s ease;} .transition-opacity{transition:opacity .3s ease;}
.transition-transform{transition:transform .3s ease;}
.hover\:opacity-100:hover{opacity:1;} .hover\:underline:hover{text-decoration:underline;}
.group-open\:rotate-180{transition:transform .3s ease;}
.group[open] .group-open\:rotate-180,details[open] .group-open\:rotate-180{transform:rotate(180deg);}
.cursor-pointer{cursor:pointer;} .list-none{list-style:none;}
details > summary{list-style:none;} details > summary::-webkit-details-marker{display:none;}

/* ---------- 10. RESPONSIVE (md ~768px, lg ~1024px) ---------- */
@media(min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .md\:col-span-2{grid-column:span 2/span 2;}
  .md\:text-3xl{font-size:1.875rem;} .md\:text-4xl{font-size:2.25rem;} .md\:text-5xl{font-size:3rem;}
  .md\:flex{display:flex;} .md\:flex-row{flex-direction:row;} .md\:block{display:block;}
  .md\:hidden{display:none;} .md\:py-32{padding-top:8rem;padding-bottom:8rem;}
}
@media(min-width:1024px){
  .lg\:text-5xl{font-size:3rem;} .lg\:text-6xl{font-size:3.75rem;} .lg\:text-7xl{font-size:4.5rem;}
  .lg\:py-32{padding-top:8rem;padding-bottom:8rem;}
  .lg\:flex-row{flex-direction:row;} .lg\:w-auto{width:auto;} .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(max-width:767px){
  .grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr;}
  .os-hero-flex{flex-direction:column;}
}