/* ============================================
   TOKENS
   ============================================ */
:root{
  --void:        #0a0e1f;
  --indigo:      #1c1740;
  --nebula:      #4b3b87;
  --gold:        #e7b049;
  --verify:      #58d3a6;
  --ink:         #edebf7;
  --ink-mute:    #9c97bd;
  --line:        rgba(237,235,247,0.10);
  --glass:       rgba(28,23,64,0.45);
  --glass-brd:   rgba(231,176,73,0.18);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

::selection{ background:var(--gold); color:var(--void); }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ============================================
   STARFIELD (ambient canvas, non-hero sections)
   ============================================ */
.cosmic-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.cosmic-bg canvas{ display:block; width:100%; height:100%; }

/* ============================================
   NAV
   ============================================ */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding:18px 0;
  background:rgba(10,14,31,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(237,235,247,0.06);
}
.nav-inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-mark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:0.04em;
  display:flex;
  align-items:center;
}
.nav-logo{
  height:40px;
  width:40px;
  border-radius:9px;
  display:block;
}
.nav-dot{ color:var(--gold); }
.nav-links{
  display:flex;
  align-items:center;
  gap:32px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.nav-links a{
  color:var(--ink-mute);
  transition:color 0.2s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  border:1px solid var(--glass-brd);
  padding:8px 16px;
  border-radius:100px;
  color:var(--gold) !important;
}

@media (max-width:720px){
  .nav-links a:not(.nav-cta){ display:none; }
}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  filter:saturate(1.05) brightness(0.85);
}
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,14,31,0.55) 0%, rgba(10,14,31,0.35) 35%, rgba(10,14,31,0.75) 78%, var(--void) 100%),
    radial-gradient(ellipse at 30% 20%, rgba(75,59,135,0.25), transparent 60%);
}

.hero-content{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:140px 32px 220px;
  width:100%;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.18em;
  color:var(--gold);
  margin-bottom:22px;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.4rem, 6.5vw, 5rem);
  line-height:1.06;
  letter-spacing:-0.02em;
  max-width:14ch;
  margin-bottom:26px;
}
.hero-sub{
  font-size:clamp(1rem, 1.6vw, 1.2rem);
  color:var(--ink-mute);
  max-width:44ch;
  margin-bottom:38px;
}
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.btn{
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:0.03em;
  padding:14px 26px;
  border-radius:100px;
  display:inline-block;
  transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn-primary{
  background:var(--gold);
  color:var(--void);
  font-weight:600;
}
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{
  border:1px solid rgba(237,235,247,0.25);
  color:var(--ink);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* ---- Scan Console (signature element) ---- */
.scan-console{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  width:min(920px, calc(100% - 48px));
  background:var(--glass);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-brd);
  border-radius:16px;
  padding:20px 26px 22px;
  z-index:2;
}
.scan-console-head{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.14em;
  color:var(--ink-mute);
  margin-bottom:16px;
}
.scan-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--verify);
  box-shadow:0 0 8px var(--verify);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.35; }
}
.scan-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.scan-item{ display:flex; flex-direction:column; gap:4px; }
.scan-value{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 3vw, 2rem);
  font-weight:700;
  color:var(--ink);
}
.scan-label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  color:var(--ink-mute);
  letter-spacing:0.02em;
  line-height:1.35;
}

@media (max-width:720px){
  .scan-console{ bottom:16px; padding:16px 18px 18px; }
  .scan-grid{ grid-template-columns:repeat(2, 1fr); row-gap:16px; }
  .hero-content{ padding:120px 24px 260px; }
}

.scroll-cue{
  position:absolute;
  right:32px;
  top:50%;
  transform:translateY(-50%) rotate(90deg);
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.2em;
  color:var(--ink-mute);
  z-index:2;
}
.scroll-line{ width:40px; height:1px; background:var(--ink-mute); }
@media (max-width:900px){ .scroll-cue{ display:none; } }

/* ============================================
   SECTIONS — shared
   ============================================ */
.section{
  position:relative;
  z-index:1;
  padding:110px 0;
  border-top:1px solid var(--line);
}
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
.section-eyebrow{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.16em;
  color:var(--gold);
  margin-bottom:18px;
}
.section-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing:-0.01em;
  margin-bottom:50px;
}

/* ============================================
   ABOUT
   ============================================ */
.about-text{
  font-size:clamp(1.05rem, 2vw, 1.35rem);
  max-width:64ch;
  color:var(--ink);
  line-height:1.7;
}
.hl{ color:var(--gold); font-weight:600; }
.about-meta{
  display:flex;
  flex-wrap:wrap;
  gap:48px;
  margin-top:56px;
  padding-top:36px;
  border-top:1px solid var(--line);
}
.about-meta > div{ display:flex; flex-direction:column; gap:6px; }
.meta-label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  color:var(--ink-mute);
  text-transform:uppercase;
}
.meta-value{ font-weight:500; }

/* ============================================
   SKILLS / MODULES
   ============================================ */
.modules-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.module{
  background:var(--void);
  padding:32px;
}
.module h3{
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:0.05em;
  color:var(--ink-mute);
  text-transform:uppercase;
  margin-bottom:20px;
}
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tags li{
  font-family:var(--font-mono);
  font-size:0.8rem;
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:100px;
  color:var(--ink);
  transition:border-color 0.2s ease, color 0.2s ease;
}
.tags li:hover{ border-color:var(--gold); color:var(--gold); }

@media (max-width:720px){
  .modules-grid{ grid-template-columns:1fr; }
}

/* ============================================
   MISSION LOG / EXPERIENCE
   ============================================ */
.timeline{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.log-entry{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:40px;
  padding:36px 0;
  border-top:1px solid var(--line);
}
.log-entry:first-child{ border-top:none; }
.log-time{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.log-date{
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--ink-mute);
}
.log-status{
  font-family:var(--font-mono);
  font-size:0.65rem;
  letter-spacing:0.08em;
  padding:5px 10px;
  border-radius:100px;
  width:fit-content;
}
.status-live{ background:rgba(88,211,166,0.12); color:var(--verify); border:1px solid rgba(88,211,166,0.3); }
.status-archived{ background:rgba(156,151,189,0.1); color:var(--ink-mute); border:1px solid var(--line); }

.log-body h3{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  margin-bottom:6px;
}
.log-company{ color:var(--ink-mute); font-size:0.95rem; margin-bottom:18px; }
.log-body ul{ display:flex; flex-direction:column; gap:12px; }
.log-body li{
  position:relative;
  padding-left:22px;
  color:var(--ink);
  font-size:0.98rem;
}
.log-body li::before{
  content:'▸';
  position:absolute;
  left:0;
  color:var(--gold);
}

@media (max-width:820px){
  .log-entry{ grid-template-columns:1fr; gap:14px; }
}

/* ============================================
   PROJECTS / CASE FILES
   ============================================ */
.case-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
.case-file{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px;
  transition:border-color 0.25s ease, transform 0.15s ease-out, box-shadow 0.25s ease;
  transform-style:preserve-3d;
  perspective:800px;
  will-change:transform;
}
.case-file:hover{
  border-color:var(--glass-brd);
  box-shadow:0 20px 40px -20px rgba(231,176,73,0.25);
}
.case-file-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.case-id{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--ink-mute);
}
.case-severity{
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.06em;
  padding:4px 10px;
  border-radius:100px;
}
.sev-high{ background:rgba(231,176,73,0.12); color:var(--gold); border:1px solid rgba(231,176,73,0.3); }
.sev-critical{ background:rgba(88,211,166,0.12); color:var(--verify); border:1px solid rgba(88,211,166,0.3); }

.case-file h3{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:600;
  margin-bottom:6px;
}
.case-date{
  display:block;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--ink-mute);
  margin-bottom:18px;
}
.case-file li{
  position:relative;
  padding-left:20px;
  margin-bottom:10px;
  font-size:0.94rem;
}
.case-file li::before{
  content:'—';
  position:absolute;
  left:0;
  color:var(--ink-mute);
}

@media (max-width:720px){
  .case-grid{ grid-template-columns:1fr; }
}

/* ============================================
   CERTIFICATIONS
   ============================================ */
.certs-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.cert-badge{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:24px;
  border:1px solid var(--line);
  border-radius:14px;
}
.cert-check{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  background:rgba(88,211,166,0.15);
  color:var(--verify);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.85rem;
  font-weight:700;
}
.cert-badge h4{ font-size:0.98rem; margin-bottom:6px; }
.cert-badge p{ font-size:0.85rem; color:var(--ink-mute); line-height:1.5; }

@media (max-width:820px){
  .certs-row{ grid-template-columns:1fr; }
}

/* ============================================
   ACTIVITIES & CONTRIBUTIONS
   ============================================ */
.activity-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.activity-card{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px;
  transition:border-color 0.25s ease, box-shadow 0.25s ease;
  transform-style:preserve-3d;
  perspective:800px;
  will-change:transform;
}
.activity-card:hover{
  border-color:var(--glass-brd);
  box-shadow:0 20px 40px -20px rgba(231,176,73,0.25);
}
.activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.activity-tag{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.08em;
  color:var(--gold);
}
.activity-card h3{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:10px;
}
.activity-card p{
  font-size:0.9rem;
  color:var(--ink-mute);
  line-height:1.6;
}

@media (max-width:900px){
  .activity-grid{ grid-template-columns:1fr; }
}

/* ============================================
   BROADCAST / YOUTUBE
   ============================================ */
.broadcast-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:48px;
  align-items:center;
}
.channel-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}
.channel-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  border:1px solid var(--glass-brd);
}
.channel-name{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
}
.channel-handle{
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--ink-mute);
}
.broadcast-text{
  color:var(--ink);
  font-size:1rem;
  line-height:1.7;
  margin-bottom:28px;
  max-width:46ch;
}
.video-frame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--glass-brd);
  background:var(--glass);
  box-shadow:0 30px 60px -30px rgba(75,59,135,0.5);
}
.video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.video-caption{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--ink-mute);
  margin-top:14px;
}

@media (max-width:860px){
  .broadcast-grid{ grid-template-columns:1fr; gap:32px; }
}

/* ============================================
   CONTACT
   ============================================ */
.contact{
  padding-bottom:80px;
}
.contact-inner{ text-align:left; }
.contact-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.1;
  margin-bottom:40px;
  max-width:16ch;
}
.contact-links{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-bottom:48px;
}
.contact-link{
  font-family:var(--font-mono);
  font-size:0.9rem;
  color:var(--ink-mute);
  border-bottom:1px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.contact-link:hover{ color:var(--gold); border-color:var(--gold); }
.footer-note{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--ink-mute);
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .scan-dot{ animation:none; }
  .case-file:hover{ transform:none; }
  .btn-primary:hover{ transform:none; }
}