/* FIELD NOTES: a full editorial visual system for the portfolio */
:root {
  --bg: #ebece2;
  --bg-2: #e2e6d9;
  --panel: #f7f6ee;
  --panel-2: #fffef8;
  --panel-soft: #e1e5d8;
  --line: rgba(18, 44, 39, .17);
  --line-2: rgba(18, 44, 39, .28);
  --text: #112d29;
  --muted: #526660;
  --faint: #78877f;
  --teal: #147c68;
  --cyan: #147c68;
  --purple: #d65e42;
  --green: #d2ef76;
  --signal: #e76545;
  --ink: #102723;
  --ink-2: #193832;
  --paper: #f4f2e8;
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow: 0 16px 40px rgba(18, 44, 39, .10);
  --font-sans: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;
  --content: 1220px;
  --transition-fast: .18s cubic-bezier(.2,.7,.2,1);
  --transition-normal: .28s cubic-bezier(.2,.7,.2,1);
  --transition-slow: .65s cubic-bezier(.2,.7,.2,1);
}

html { scroll-padding-top: 86px; }
body {
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 18% 5%, rgba(211, 229, 141, .24), transparent 30%),
    radial-gradient(rgba(16, 39, 35, .07) .6px, transparent .6px);
  background-size: auto, 8px 8px;
  font-family: var(--font-sans);
}
body::before {
  position: fixed;
  z-index: 120;
  inset: 0;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
}
*, *::before, *::after { box-sizing: border-box; }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mono, code, pre { font-family: var(--font-mono) !important; }

/* Masthead */
.topbar {
  background: rgba(235, 236, 226, .94);
  border-bottom: 1px solid rgba(16, 39, 35, .16);
  backdrop-filter: blur(18px);
}
.topbar.scrolled { background: rgba(235, 236, 226, .98); border-bottom-color: var(--ink); box-shadow: 0 8px 24px rgba(16, 39, 35, .08); }
.topbar-inner { min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
.avatar { color: var(--paper); background: var(--signal); border: 0; border-radius: 7px; box-shadow: none; font-family: var(--font-mono); }
.brand strong { color: var(--ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; }
.nav { gap: 3px; }
.nav a { color: #526660; border-radius: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.nav a:hover, .nav a.active { color: var(--ink); background: transparent; border-color: transparent; }
.nav a::after { background: var(--signal); height: 2px; }
.status-pill { height: 32px; color: #216c52; background: #e0edcc; border-color: rgba(33, 108, 82, .2); font-size: 9px; letter-spacing: .12em; }
.cv-btn, .hire-btn { height: 36px; border-radius: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; }
.cv-btn { color: var(--ink); background: transparent; border-color: var(--line-2); }
.hire-btn { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.hire-btn:hover { color: var(--ink); background: var(--green); border-color: var(--green); }

/* Full-bleed chapters */
main.container { width: 100%; max-width: none; margin: 0; padding: 0; }
main.container > .section {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 0 0 0 -50vw;
  padding: 100px 28px 96px;
  border: 0;
  border-bottom: 1px solid rgba(16, 39, 35, .15);
  overflow: hidden;
  counter-increment: chapter;
}
main.container { counter-reset: chapter; }
main.container > .section > * { width: min(var(--content), 100%); max-width: var(--content); margin-left: auto; margin-right: auto; }
main.container > .section::before {
  content: "FIELD NOTE  /  0" counter(chapter);
  position: absolute;
  top: 30px;
  right: max(28px, calc((100vw - var(--content)) / 2));
  color: rgba(16, 39, 35, .44);
  font: 600 9px var(--font-mono);
  letter-spacing: .16em;
}
main.container > #home::before { content: "B4L4  /  OFFENSIVE SECURITY"; top: 36px; color: rgba(244, 242, 232, .52); }
main.container > #home {
  min-height: min(850px, calc(100vh - 72px));
  padding-top: 88px;
  padding-bottom: 78px;
  color: var(--paper);
  background:
    radial-gradient(ellipse at 85% 35%, rgba(211, 239, 118, .11), transparent 36%),
    linear-gradient(128deg, #102723 0%, #173b33 60%, #102723 100%);
  border-bottom: 0;
}
main.container > #home::after {
  content: "FIELD REPORT";
  position: absolute;
  right: -30px;
  bottom: -38px;
  color: rgba(244, 242, 232, .035);
  font: 800 clamp(80px, 16vw, 220px)/.8 var(--font-sans);
  letter-spacing: -.1em;
  white-space: nowrap;
  pointer-events: none;
}
#home .hero-grid { position: relative; z-index: 1; grid-template-columns: minmax(0, 1.03fr) minmax(380px, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
#home .hero-copy { max-width: 680px; }
#home .eyebrow { padding: 0 0 11px; border: 0; border-bottom: 1px solid rgba(244, 242, 232, .25); border-radius: 0; background: none; color: #d3ef76; font: 600 10px var(--font-mono); letter-spacing: .13em; }
#home .hero-intro { margin-bottom: 10px; color: rgba(244, 242, 232, .78); font: 500 clamp(20px, 2.3vw, 29px)/1.05 var(--font-sans); letter-spacing: -.04em; }
#home .hero-name { color: var(--paper); font-size: clamp(36px, 4.4vw, 66px); line-height: .98; white-space: normal; }
#home .section-title { max-width: 650px; margin-top: 20px !important; color: #d3ef76; font: 500 clamp(26px, 3vw, 43px)/1.05 var(--font-mono) !important; letter-spacing: -.08em !important; }
#home .section-title .sym { color: var(--signal); }
#home .hero-copy > div[style*="display: flex"] { margin-top: 18px !important; margin-bottom: 10px !important; }
#home .fmsa-hero-badge, #home .relocation-badge { border-radius: 4px; padding: 7px 10px; background: rgba(244, 242, 232, .06); border-color: rgba(244, 242, 232, .17); color: var(--paper); box-shadow: none; font: 500 10px var(--font-mono); }
#home .fmsa-hero-badge svg { color: var(--green); }
#home .relocation-badge svg { color: #9fc9c1; }
#home .hero-copy p { max-width: 620px; margin: 20px 0 22px; color: rgba(244, 242, 232, .78); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.75; }
#home .hero-copy p strong { color: #fffef8; }
.hero-cta { gap: 8px; margin-bottom: 26px; }
.btn { height: 44px; padding: 0 14px; border-radius: 5px; border-color: rgba(244, 242, 232, .25); background: transparent; font: 600 10px var(--font-mono); letter-spacing: .02em; }
.btn-primary { color: var(--ink); background: var(--green); border-color: var(--green); box-shadow: none; }
.btn-primary:hover { color: var(--ink); background: #e4f8a4; box-shadow: 0 8px 24px rgba(211, 239, 118, .18); }
.hero-cta .btn:not(.btn-primary):hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat-card { min-height: 110px; padding: 12px; border: 1px solid rgba(244, 242, 232, .16); border-radius: 5px; background: rgba(244, 242, 232, .045); box-shadow: none; }
.stat-card .icon-box { width: 27px; height: 27px; margin-bottom: 12px; border-radius: 4px; color: var(--green); background: rgba(211, 239, 118, .1); }
.stat-card strong { color: var(--paper); font: 600 17px var(--font-mono); }
.stat-card span { color: rgba(244, 242, 232, .58); font: 9px/1.45 var(--font-mono); }

/* The radar stays interactive, but now reads as a field instrument in the story. */
.ops-console { min-height: 0; padding-bottom: 17px; border: 1px solid rgba(211, 239, 118, .34); border-radius: 9px; background: linear-gradient(150deg, rgba(20, 51, 45, .98), rgba(12, 30, 27, .99)); box-shadow: 0 26px 70px rgba(0, 0, 0, .28); }
.ops-console .terminal-top { border-color: rgba(244, 242, 232, .11); background: rgba(244, 242, 232, .035); }
.ops-console-title strong { font: 500 23px var(--font-sans); letter-spacing: -.06em; }
.ops-console-title .mono { color: #d3ef76; }
.ops-map { height: 300px; }
.ops-radar { border-color: rgba(211, 239, 118, .2); background: repeating-radial-gradient(circle, transparent 0 40px, rgba(211, 239, 118, .13) 41px 42px); }
.ops-radar::before { background: conic-gradient(from 0deg, transparent 0 76%, rgba(211, 239, 118, .025) 82%, rgba(211, 239, 118, .28) 99%, transparent 100%); }
.ops-radar::after, .ops-crosshair, .ops-crosshair::before { background: rgba(211, 239, 118, .16); }
.ops-link { border-color: rgba(211, 239, 118, .5); }
.ops-core { color: var(--ink); background: var(--green); border-color: var(--green); box-shadow: 0 0 32px rgba(211, 239, 118, .3); }
.ops-core::after { border-color: rgba(211, 239, 118, .6); }
.ops-node { border-color: rgba(244, 242, 232, .23); background: #142f2a; color: var(--paper); }
.ops-node span { color: var(--green); }
.ops-node small { color: rgba(244, 242, 232, .65); }
.ops-node:hover, .ops-node.is-active { border-color: var(--green); box-shadow: 0 8px 28px rgba(211, 239, 118, .16); }
.ops-tag { color: #ffb29d; border-color: rgba(231, 101, 69, .4); background: rgba(77, 38, 30, .92); }
.ops-detail { border-color: rgba(244, 242, 232, .14); }
.ops-detail p { color: rgba(244, 242, 232, .68); }
.ops-detail p strong { color: var(--paper); }
.ops-detail a { color: var(--green); }
.ops-foot { color: rgba(244, 242, 232, .46); }

/* Chapter typography and paper-based cards */
.section-head { margin-bottom: 38px; }
.section-head .eyebrow { padding: 0 0 9px; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent; color: var(--teal); font: 600 10px var(--font-mono); letter-spacing: .14em; }
.section-title { margin-top: 17px; color: var(--ink); font: 600 clamp(40px, 6vw, 76px)/.98 var(--font-sans); letter-spacing: -.085em; }
.section-title .accent { color: var(--signal); }
.section-subtitle { max-width: 720px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.accent { color: var(--signal); }
h1, h2, h3, h4 { color: var(--ink); }
.about-text { max-width: 780px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.about-text strong { color: var(--ink); text-decoration: underline; text-decoration-color: #c0d68a; text-decoration-thickness: 3px; text-underline-offset: 2px; }
.info-card, .skill-cat-card, .skill-card, .timeline-card, .project-card, .article-card, .cert-card, .recognition-card, .hobby-card, .edu-card, .cve-panel {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: 0 8px 22px rgba(16, 39, 35, .045);
}
.info-card:hover, .skill-card:hover, .project-card:hover, .article-card:hover, .cert-card:hover, .recognition-card:hover, .hobby-card:hover { border-color: rgba(231, 101, 69, .5); box-shadow: 0 16px 32px rgba(16, 39, 35, .1); }
.info-card { gap: 13px; padding: 17px; }
.info-card .meta-label { color: var(--teal); font: 600 9px var(--font-mono); letter-spacing: .12em; }
.info-card strong { color: var(--ink); font-size: 15px; }
.info-card small { color: var(--signal) !important; }
.mini-icon { border-radius: 5px; color: var(--teal); background: #e2ead5; }
.mini-icon svg { color: inherit; }

/* Chapter colors create a visual rhythm down the page. */
#about { background: #f3f1e8; }
#skills { color: var(--paper); background: #dfe5d5; }
#experience { background: #f4f2e8; }
#projects { color: var(--paper); background: var(--ink); border-bottom-color: rgba(244, 242, 232, .12); }
#recognition { background: #e5e8dc; }
#certifications { background: #f3f1e8; }
#education { background: #dfe5d5; }
#articles { background: #f3f1e8; }
#hobbies { background: #e7e2d6; }
#contact { background: #d7e590; }
#skills .section-head .eyebrow { color: var(--teal); }
#skills .section-title { color: var(--ink); }
#skills .section-subtitle { color: #526660; }
#skills .skill-cat-card { background: rgba(255, 254, 248, .72); }
#skills .skill-cat-header h3 { color: var(--ink); }
#skills .pill { color: #29463d; border-color: rgba(18, 44, 39, .14); background: #e9ecde; }
#skills .pill:hover { color: var(--ink); border-color: var(--teal); background: #d8e8bf; }
#experience .experience-timeline::before { background: linear-gradient(180deg, var(--signal), rgba(231, 101, 69, .15)); }
#experience .timeline-card { background: #fbfaf4; }
#experience .timeline-card::before { background: var(--signal); border-color: var(--paper); box-shadow: 0 0 0 5px rgba(231, 101, 69, .13); }
#experience .timeline-company { color: var(--teal); }
#experience .timeline-date, #experience .timeline-date small { color: var(--faint); }
#experience .timeline-card li { color: #4c6059; }
#experience .tag-list { border-color: var(--line); }
#experience .tag-item { color: #425b52; background: #edf0e5; border-color: rgba(18, 44, 39, .12); }
#projects .section-head .eyebrow { color: var(--green); }
#projects .section-title, #projects h3 { color: var(--paper); }
#projects .section-subtitle, #projects .project-card p { color: rgba(244, 242, 232, .7); }
#projects .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#projects .project-card { position: relative; overflow: hidden; background: #193832; border-color: rgba(244, 242, 232, .16); box-shadow: none; }
#projects .project-card:first-child { grid-column: span 2; min-height: 375px; background: linear-gradient(135deg, #244b3d, #17332e 70%); }
#projects .project-card:first-child::after { content: "NDA / CASE FILE 01"; position: absolute; right: -31px; top: 25px; padding: 7px 42px; transform: rotate(36deg); color: var(--ink); background: var(--green); font: 700 9px var(--font-mono); letter-spacing: .08em; }
#projects .project-card:hover { transform: translateY(-5px); border-color: rgba(211, 239, 118, .5); background: #20463c; }
#projects .folder-box, #projects .write-box { color: var(--green); background: rgba(211, 239, 118, .12); }
#projects .star-box { color: #ff9c7d; background: rgba(231, 101, 69, .13); }
#projects .pill { color: #d9e8d0; background: rgba(8, 20, 18, .35); border-color: rgba(244, 242, 232, .14); }
#projects .external, #projects .project-footer { color: #b8c9bc; }
#projects .project-footer a { color: var(--green); }
#recognition .recognition-card { background: #f5f4eb; }
#recognition .recognition-card.featured { background: #e9eddc; border-color: rgba(20, 124, 104, .3); }
#recognition .recognition-card p { color: var(--muted); }
#certifications .fmsa-spotlight-card { color: var(--paper); border-color: rgba(211, 239, 118, .4); border-radius: 9px; background: linear-gradient(130deg, #183a31, #102723); box-shadow: var(--shadow); }
#certifications .fmsa-spotlight-card h3, #certifications .fmsa-spotlight-card p { color: var(--paper); }
#certifications .fmsa-spotlight-card p { color: rgba(244, 242, 232, .7); }
#certifications .fmsa-badge-gold { color: var(--ink); background: var(--green); border-color: var(--green); }
#certifications .cert-card { background: #fffef8; }
#certifications .cert-card h3 { color: var(--ink); }
#certifications .cert-card p, #certifications .cert-card .cert-desc { color: var(--muted); }
#certifications .cert-card strong, #certifications .cert-card .cert-meta { color: var(--teal); }
#education .edu-card { background: rgba(255, 254, 248, .78); }
#education .edu-card h3 { color: var(--ink); }
#education .edu-card p { color: var(--muted); }
#articles .article-card { background: #fffef8; }
#articles .article-card h3 { color: var(--ink); }
#articles .article-card p { color: var(--muted); }
#hobbies .hobby-card { background: #f5f2e8; }
#hobbies .hobby-card .mini-icon { color: var(--signal); background: #f2e1d4; }
#hobbies .hobby-card strong { color: var(--ink); }

/* Closing invitation, footer, and small utilities */
#contact .contact-banner { padding: 58px 34px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
#contact .eyebrow { color: #39513b; }
#contact .contact-banner h2 { max-width: 850px; margin: 18px 0 15px; color: var(--ink); font: 600 clamp(44px, 7vw, 86px)/.96 var(--font-sans); letter-spacing: -.09em; }
#contact .contact-banner p { max-width: 680px; color: #425c4c; font-size: 16px; line-height: 1.65; }
#contact .contact-links { justify-content: flex-start; }
#contact .contact-links a { min-width: 0; height: 46px; border-radius: 5px; border-color: rgba(16, 39, 35, .3); color: var(--ink); background: transparent; font: 600 10px var(--font-mono); }
#contact .contact-links a:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
footer { margin-top: 0; border: 0; color: var(--paper); background: #0c201d; }
footer .container { width: min(var(--content), calc(100% - 48px)); }
.footer-grid { padding-top: 58px; }
.footer-brand p, .footer-bottom, .footer-col a { color: rgba(244, 242, 232, .6); }
.footer-brand strong, .footer-col h4 { color: var(--paper); }
.footer-col h4 { font: 600 10px var(--font-mono); letter-spacing: .15em; }
.footer-col a:hover { color: var(--green); }
.social-row a { color: var(--paper); background: rgba(244, 242, 232, .05); border-color: rgba(244, 242, 232, .18); }
.footer-bottom { border-color: rgba(244, 242, 232, .13); }
.fab { border-radius: 5px; color: var(--ink); background: var(--green); box-shadow: 0 10px 25px rgba(16, 39, 35, .2); }
.scroll-progress-bar { background: var(--signal); }
.reveal { transform: translateY(18px); }
.reveal.revealed { transform: translateY(0); }

@media (max-width: 1120px) {
  #home .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr); gap: 28px; }
  #projects .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #home .hero-grid { grid-template-columns: 1fr; }
  #home .hero-copy { max-width: 780px; }
  #home .ops-console { max-width: 760px; }
  #home { min-height: 0; }
}
@media (max-width: 760px) {
  main.container > .section { padding: 82px 20px 72px; }
  main.container > #home { padding-top: 72px; padding-bottom: 60px; }
  main.container > .section::before { top: 25px; right: 20px; font-size: 8px; }
  main.container > #home::before { top: 25px; }
  .section-title { font-size: clamp(38px, 12vw, 58px); }
  #home .hero-name { font-size: clamp(34px, 10vw, 56px); }
  #home .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #projects .card-grid-3 { grid-template-columns: 1fr; }
  #projects .project-card:first-child { grid-column: auto; }
  #home .ops-map { height: 278px; margin-left: 7px; margin-right: 7px; }
  #home .ops-radar { width: 220px; height: 220px; }
  #home .ops-crosshair { width: 220px; }
  #home .ops-node-a { left: calc(50% - 128px); top: calc(50% - 95px); }
  #home .ops-node-b { left: calc(50% + 24px); top: calc(50% - 68px); }
  #home .ops-node-c { left: calc(50% - 50px); top: calc(50% + 75px); }
  .ops-tag { font-size: 8px; }
  .ops-tag-a { right: -2px; }
  .ops-tag-b { left: -2px; bottom: 24px; }
  .ops-detail { margin-left: 14px; margin-right: 14px; }
  .ops-foot { padding-left: 14px; padding-right: 14px; font-size: 7px; }
  #contact .contact-banner { padding: 30px 0; }
  #contact .contact-links { gap: 8px; }
  #contact .contact-links a { padding: 0 11px; }
  footer .container { width: calc(100% - 40px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* A moving incident tape gives the dossier a signature rhythm. */
.signal-ticker {
  position: relative;
  z-index: 2;
  width: min(var(--content), 100%);
  max-width: var(--content);
  margin: 36px auto -14px;
  overflow: hidden;
  border-top: 1px solid rgba(244, 242, 232, .22);
  border-bottom: 1px solid rgba(244, 242, 232, .22);
  background: rgba(244, 242, 232, .035);
  transform: rotate(-1deg);
}
.signal-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 22px;
  padding: 13px 0;
  color: rgba(244, 242, 232, .72);
  font: 600 10px var(--font-mono);
  letter-spacing: .15em;
  white-space: nowrap;
  animation: field-tape 32s linear infinite;
}
.signal-ticker-track b { color: var(--signal); font-size: 16px; }
@keyframes field-tape { to { transform: translateX(-50%); } }

/* Project cards behave like evidence folders when explored. */
#projects .project-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translateY(0) rotate(0deg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
#projects .project-card::after {
  content: "OPEN CASE  ↗";
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  color: var(--signal);
  font: 600 9px var(--font-mono);
  letter-spacing: .12em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
#projects .project-card:hover {
  z-index: 3;
  transform: translateY(-7px) rotate(-.35deg);
  border-color: rgba(211, 239, 118, .65);
  box-shadow: 0 28px 54px rgba(0, 0, 0, .24);
}
#projects .project-card:hover::after { opacity: 1; transform: translateY(0); }
#projects .project-card:first-child:hover { transform: translateY(-7px) rotate(.2deg); }

/* Give chapter changes a printed registration mark. */
main.container > .section:not(#home)::after {
  content: "+";
  position: absolute;
  top: 25px;
  left: max(20px, calc((100vw - var(--content)) / 2));
  color: var(--signal);
  font: 300 18px/1 var(--font-mono);
  opacity: .8;
}
#home .ops-console { transform: perspective(1200px) rotateY(-2deg) rotateX(.5deg); transition: transform .5s ease, box-shadow .5s ease; }
#home .ops-console:hover { transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px); box-shadow: 0 34px 80px rgba(0, 0, 0, .34); }
#home .ops-radar::before { opacity: .9; }

@media (max-width: 760px) {
  .signal-ticker { margin-top: 24px; }
  .signal-ticker-track { font-size: 9px; gap: 14px; }
  #home .ops-console, #home .ops-console:hover { transform: none; }
  main.container > .section:not(#home)::after { left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .signal-ticker-track { animation: none; }
  #projects .project-card, #home .ops-console { transition: none; }
  #projects .project-card:hover, #projects .project-card:first-child:hover, #home .ops-console:hover { transform: none; }
}

/* OBSERVATORY: a deliberate second art direction, not a paper-theme variation. */
:root {
  --bg: #090a12;
  --bg-2: #11121d;
  --panel: #141622;
  --panel-2: #1a1d2b;
  --panel-soft: #202332;
  --line: rgba(182, 178, 255, .18);
  --line-2: rgba(182, 178, 255, .32);
  --text: #f3f1ff;
  --muted: #aaa9be;
  --faint: #777990;
  --teal: #c8ff37;
  --cyan: #72f6e8;
  --purple: #a78bff;
  --green: #c8ff37;
  --signal: #ff5cce;
  --ink: #0b0d15;
  --ink-2: #151827;
  --paper: #f3f1ff;
  --shadow: 0 24px 80px rgba(0, 0, 0, .34);
}
body {
  color: var(--text);
  background-color: #090a12;
  background-image: radial-gradient(ellipse at 50% -15%, rgba(88, 62, 161, .23), transparent 44%), radial-gradient(rgba(196, 188, 255, .08) .55px, transparent .55px);
  background-size: auto, 7px 7px;
}
body::before { opacity: .055; mix-blend-mode: screen; }
.topbar { color: var(--text); background: rgba(9, 10, 18, .86); border-bottom: 1px solid rgba(167, 139, 255, .24); }
.topbar.scrolled { background: rgba(9, 10, 18, .97); border-bottom-color: rgba(200, 255, 55, .45); }
.avatar { color: #10110d; background: var(--teal); border-radius: 50%; font-weight: 900; box-shadow: 0 0 26px rgba(200, 255, 55, .25); }
.brand strong, .nav a { color: #c6c4d8; }
.nav a:hover, .nav a.active { color: var(--teal); }
.nav a::after { background: var(--signal); }
.status-pill { color: var(--teal); background: rgba(200, 255, 55, .08); border-color: rgba(200, 255, 55, .35); }
.cv-btn { color: var(--text); border-color: rgba(167, 139, 255, .5); }
.hire-btn { color: #11120d; background: var(--teal); border-color: var(--teal); }
.hire-btn:hover { color: #080910; background: #e1ff8d; border-color: #e1ff8d; }
main.container > .section { color: var(--text); border-bottom-color: rgba(167, 139, 255, .16); }
main.container > .section::before { color: rgba(200, 255, 55, .58); }
main.container > .section:not(#home)::after { color: var(--signal); }
main.container > #home {
  overflow: hidden;
  background: radial-gradient(ellipse at 77% 49%, rgba(133, 92, 255, .26), transparent 32%), radial-gradient(ellipse at 12% 7%, rgba(255, 92, 206, .11), transparent 27%), linear-gradient(135deg, #090a12 5%, #101020 58%, #0b0d15 100%);
}
main.container > #home::before { color: rgba(200, 255, 55, .75); }
main.container > #home::after { content: "OBSERVATORY"; color: rgba(167, 139, 255, .075); font-style: italic; letter-spacing: -.12em; }
#home .hero-name { color: #fff; font-weight: 700; font-size: clamp(42px, 5.6vw, 84px); letter-spacing: -.09em; text-shadow: 0 8px 40px rgba(167, 139, 255, .16); }
@media (min-width: 901px) { #home .hero-name { font-size: clamp(42px, 4.25vw, 62px); white-space: nowrap; } }
#home .hero-intro { color: var(--signal); font: 600 clamp(17px, 2vw, 24px) var(--font-mono); letter-spacing: .02em; }
#home .section-title { color: var(--teal); font-weight: 600; text-shadow: 0 0 26px rgba(200, 255, 55, .15); }
#home .section-title .sym { color: var(--signal); }
#home .eyebrow { color: var(--teal); border-bottom-color: rgba(200, 255, 55, .32); }
#home .hero-copy p { color: #c9c7d9; }
#home .hero-copy p strong { color: #fff; }
#home .fmsa-hero-badge, #home .relocation-badge { color: #e6e3f3; background: rgba(167, 139, 255, .08); border-color: rgba(167, 139, 255, .28); border-radius: 999px; }
#home .fmsa-hero-badge svg { color: var(--teal); }
#home .relocation-badge svg { color: var(--cyan); }
.btn { color: #e9e6f6; border-color: rgba(167, 139, 255, .4); border-radius: 999px; }
.btn-primary { color: #10110d; background: var(--teal); border-color: var(--teal); box-shadow: 0 0 28px rgba(200, 255, 55, .18); }
.btn-primary:hover { color: #10110d; background: #e5ff9a; }
.hero-cta .btn:not(.btn-primary):hover { color: #090a12; background: var(--signal); border-color: var(--signal); }
.stat-card { border-color: rgba(167, 139, 255, .24); border-radius: 12px; background: rgba(167, 139, 255, .065); backdrop-filter: blur(10px); }
.stat-card .icon-box { color: var(--teal); background: rgba(200, 255, 55, .12); border-radius: 50%; }
.stat-card strong { color: #fff; }
.stat-card span { color: #a9a7bd; }
.ops-console { position: relative; overflow: hidden; border: 1px solid rgba(167, 139, 255, .52); border-radius: 18px; background: linear-gradient(145deg, rgba(26, 27, 45, .96), rgba(9, 12, 22, .98)); box-shadow: 0 0 0 7px rgba(167, 139, 255, .035), 0 35px 90px rgba(0, 0, 0, .45), 0 0 75px rgba(167, 139, 255, .15); }
.ops-console::after { content: ""; position: absolute; inset: 0; z-index: 0; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(200, 255, 55, .025) 5px, transparent 6px); opacity: .65; pointer-events: none; }
.ops-console > * { position: relative; z-index: 1; }
.ops-console .terminal-top { border-color: rgba(167, 139, 255, .22); background: rgba(167, 139, 255, .06); }
.ops-console-title .mono { color: var(--teal); }
.ops-map { background: radial-gradient(ellipse at 50% 48%, rgba(133, 92, 255, .12), transparent 58%); }
.ops-radar { border-color: rgba(200, 255, 55, .22); background: repeating-radial-gradient(circle, transparent 0 39px, rgba(200, 255, 55, .14) 40px 41px); }
.ops-radar::before { background: conic-gradient(from 0deg, transparent 0 75%, rgba(200, 255, 55, .02) 81%, rgba(200, 255, 55, .4) 99%, transparent 100%); }
.ops-radar::after, .ops-crosshair, .ops-crosshair::before { background: rgba(167, 139, 255, .25); }
.ops-link { border-color: rgba(200, 255, 55, .65); }
.ops-core { color: #0d0f0e; background: var(--teal); border-color: var(--teal); border-radius: 50%; box-shadow: 0 0 30px rgba(200, 255, 55, .52), 0 0 80px rgba(200, 255, 55, .18); }
.ops-core::after { border-color: rgba(200, 255, 55, .75); border-radius: 50%; }
.ops-node { color: #f3f1ff; border-color: rgba(167, 139, 255, .38); background: rgba(18, 19, 32, .96); border-radius: 9px; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
.ops-node span { color: var(--teal); }
.ops-node small { color: #b6b2cb; }
.ops-node:hover, .ops-node.is-active { border-color: var(--teal); box-shadow: 0 0 26px rgba(200, 255, 55, .2); }
.ops-tag { color: #ffafe9; border-color: rgba(255, 92, 206, .5); background: rgba(45, 17, 48, .94); }
.ops-detail { border-color: rgba(167, 139, 255, .2); }
.ops-detail p { color: #b3b0c5; }
.ops-detail p strong { color: #fff; }
.ops-detail a { color: var(--teal); }
.ops-foot { color: #8b89a1; }
.section-head .eyebrow { color: var(--teal); }
.section-title, h1, h2, h3, h4 { color: #f3f1ff; }
.section-title .accent, .accent { color: var(--signal); }
.section-subtitle, .about-text { color: #b5b3c6; }
.about-text strong { color: #fff; text-decoration-color: var(--signal); }
.info-card, .skill-cat-card, .skill-card, .timeline-card, .project-card, .article-card, .cert-card, .recognition-card, .hobby-card, .edu-card, .cve-panel { color: #e9e7f5; border-color: rgba(167, 139, 255, .18); border-radius: 12px; background: linear-gradient(145deg, #171926, #11131d); box-shadow: 0 15px 38px rgba(0, 0, 0, .22); }
.info-card strong, .skill-cat-header h3, .timeline-card h3, .project-card h3, .article-card h3, .cert-card h3, .recognition-card h3, .edu-card h3 { color: #fff; }
.info-card .meta-label, .timeline-company { color: var(--teal); }
.info-card small { color: var(--signal) !important; }
.mini-icon { color: var(--teal); background: rgba(200, 255, 55, .1); border-radius: 50%; }
.info-card:hover, .skill-card:hover, .project-card:hover, .article-card:hover, .cert-card:hover, .recognition-card:hover, .hobby-card:hover { border-color: rgba(200, 255, 55, .58); box-shadow: 0 24px 55px rgba(0, 0, 0, .38), 0 0 35px rgba(167, 139, 255, .11); }
main.container > #about, main.container > #skills, main.container > #experience, main.container > #recognition, main.container > #certifications, main.container > #education, main.container > #articles, main.container > #hobbies { background: #0d0f18; }
main.container > #skills, main.container > #recognition, main.container > #articles { background: #11131e; }
main.container > #projects { color: var(--text); background: radial-gradient(ellipse at 90% 4%, rgba(167, 139, 255, .14), transparent 34%), #090a12; border-bottom-color: rgba(167, 139, 255, .22); }
main.container > #contact { color: #11120d; background: radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, .42), transparent 30%), var(--teal); }
#skills .section-head .eyebrow, #skills .section-title, #skills .section-subtitle { color: inherit; }
#skills .skill-cat-card { background: #151824; }
#skills .pill { color: #e6e3f4; border-color: rgba(167, 139, 255, .26); background: rgba(167, 139, 255, .08); }
#skills .pill:hover { color: #11120d; border-color: var(--teal); background: var(--teal); }
#experience .experience-timeline::before { background: linear-gradient(180deg, var(--signal), var(--purple), var(--teal)); }
#experience .timeline-card { background: #151824; }
#experience .timeline-card::before { background: var(--signal); border-color: #151824; box-shadow: 0 0 0 5px rgba(255, 92, 206, .15), 0 0 22px rgba(255, 92, 206, .28); }
#experience .timeline-card li { color: #c2c0d2; }
#experience .timeline-date, #experience .timeline-date small { color: #9998ae; }
#projects .section-head .eyebrow { color: var(--teal); }
#projects .section-subtitle { color: #aaa8bf; }
#projects .project-card { background: linear-gradient(150deg, #171927, #10121b); }
#projects .project-card:first-child { border-color: rgba(255, 92, 206, .38); background: linear-gradient(130deg, rgba(60, 24, 64, .64), #151722 60%); }
#projects .project-card::after { color: var(--teal); }
#certifications .fmsa-spotlight-card { background: linear-gradient(130deg, #26183e, #11131d); border-color: rgba(200, 255, 55, .42); }
#certifications .fmsa-spotlight-card h3, #certifications .fmsa-spotlight-card p { color: var(--paper); }
#certifications .fmsa-badge-gold { color: #11120d; background: var(--teal); border-color: var(--teal); }
#certifications .cert-card { background: #151824; }
#certifications .cert-card p, #certifications .cert-card .cert-desc { color: #b5b3c6; }
#recognition .recognition-card, #articles .article-card, #hobbies .hobby-card, #education .edu-card { background: #151824; }
#hobbies .hobby-card .mini-icon { color: var(--signal); background: rgba(255, 92, 206, .11); }
#hobbies .hobby-card strong { color: #fff; }
#contact .contact-banner h2 { color: #10110d; text-shadow: 0 1px 0 rgba(255,255,255,.14); }
#contact .contact-banner p, #contact .eyebrow { color: #27320a; }
#contact .contact-links a { color: #10110d; border-color: rgba(16, 17, 13, .45); }
#contact .contact-links a:hover { color: var(--teal); background: #10110d; border-color: #10110d; }
footer { color: #f3f1ff; background: #07080e; border-top: 1px solid rgba(167, 139, 255, .24); }
.footer-brand p, .footer-bottom, .footer-col a { color: #a3a1b6; }
.footer-brand strong, .footer-col h4 { color: #fff; }
.social-row a { color: var(--teal); background: rgba(167, 139, 255, .08); border-color: rgba(167, 139, 255, .26); }
.footer-bottom { border-color: rgba(167, 139, 255, .2); }
.fab { color: #10110d; background: var(--teal); box-shadow: 0 0 28px rgba(200, 255, 55, .22); }
.scroll-progress-bar { background: linear-gradient(90deg, var(--signal), var(--purple), var(--teal)); }
.signal-ticker { border-color: rgba(200, 255, 55, .26); background: rgba(200, 255, 55, .035); }
.signal-ticker-track { color: rgba(243, 241, 255, .82); }
@media (max-width: 900px) { #home .hero-grid { grid-template-columns: 1fr; } }