/* ==========================================================================
   SPYDIRWEB — design tokens
   bg-void   #080b10   near-black blue
   bg-panel  #0d131b
   bg-raise  #121a24
   cyan      #00e5ff   primary accent (signal)
   violet    #a855f7   secondary accent (web/thread)
   red       #ff3860   alert / status
   ink       #d9e6f2   primary text
   ink-dim   #6b7d90   secondary text
   type: Rajdhani (display), Space Grotesk (body), JetBrains Mono (data)
   ========================================================================== */

:root{
  --void:#080b10;
  --panel:#0d131b;
  --raise:#121a24;
  --line: rgba(168,199,224,0.12);
  --cyan:#00e5ff;
  --violet:#a855f7;
  --red:#ff3860;
  --ink:#d9e6f2;
  --ink-dim:#6b7d90;
  --ink-dimmer:#3c4a58;
  --radius: 2px;
  --font-display:'Rajdhani',sans-serif;
  --font-body:'Space Grotesk',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

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

a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}

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

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--void);}
::-webkit-scrollbar-thumb{background:var(--ink-dimmer);border-radius:0;}
::-webkit-scrollbar-thumb:hover{background:var(--cyan);}

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

/* ==========================================================================
   BOOT SCREEN
   ========================================================================== */
#boot-screen{
  position:fixed; inset:0; z-index:999;
  background:var(--void);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  transition:opacity .6s ease, visibility .6s ease;
}
#boot-screen.hidden{opacity:0;visibility:hidden;pointer-events:none;}

.boot-inner{width:min(560px,86vw); text-align:left;}
.boot-line{
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--cyan);
  min-height:180px;
  white-space:pre-wrap;
  line-height:1.7;
}
.boot-line .ok{color:#4dff9e;}
.boot-line .warn{color:var(--red);}
.boot-line .dim{color:var(--ink-dimmer);}

.boot-bar-track{
  margin-top:1.2rem;
  height:3px;
  width:100%;
  background:var(--raise);
  position:relative;
  overflow:hidden;
}
.boot-bar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  box-shadow:0 0 12px var(--cyan);
  transition:width .12s linear;
}
.boot-percent{
  margin-top:.5rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--ink-dim);
  text-align:right;
}

#skip-boot{
  position:absolute; bottom:2rem; right:2rem;
  background:transparent;
  border:1px solid var(--ink-dimmer);
  color:var(--ink-dim);
  font-family:var(--font-mono);
  font-size:.7rem;
  padding:.5rem .9rem;
  cursor:pointer;
  letter-spacing:.05em;
  transition:border-color .2s, color .2s;
}
#skip-boot:hover{border-color:var(--cyan);color:var(--cyan);}

/* ==========================================================================
   AMBIENT BACKGROUND CANVAS + SCANLINES
   ========================================================================== */
#web-canvas{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  opacity:.55;
}

.scanlines{
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.015) 0px,
    rgba(255,255,255,0.015) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}

/* ==========================================================================
   NAV
   ========================================================================== */
#site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
  background:rgba(8,11,16,0.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:.06em;
  color:var(--ink);
}
.nav-brand span{color:var(--cyan);}

#nav-links{
  display:flex; gap:clamp(1rem,2vw,2.2rem);
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
}
#nav-links a{
  position:relative;
  color:var(--ink-dim);
  transition:color .2s;
  padding:.2rem 0;
}
#nav-links a::before{
  content:attr(data-idx);
  color:var(--violet);
  margin-right:.4em;
  font-size:.85em;
}
#nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:0; height:1px;
  background:var(--cyan);
  transition:width .25s ease;
}
#nav-links a:hover,#nav-links a.active{color:var(--ink);}
#nav-links a:hover::after,#nav-links a.active::after{width:100%;}

.nav-status{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--ink-dim);
  display:flex; align-items:center; gap:.4rem;
  letter-spacing:.03em;
}
.nav-status strong{color:#4dff9e;font-weight:600;}
.dot{
  width:6px;height:6px;border-radius:50%;
  background:#4dff9e;
  box-shadow:0 0 8px #4dff9e;
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.35;}}

#nav-toggle{
  display:none;
  background:none;border:none;cursor:pointer;
  width:32px;height:24px;
  flex-direction:column;justify-content:space-between;
  padding:0;
}
#nav-toggle span{
  display:block;height:2px;background:var(--ink);width:100%;
  transition:transform .25s, opacity .25s;
}

/* ==========================================================================
   LAYOUT / SECTION SCAFFOLDING
   ========================================================================== */
main{position:relative;z-index:2;}

.section{
  padding:clamp(4rem,10vw,7rem) clamp(1.2rem,6vw,5rem);
  max-width:1280px;
  margin:0 auto;
}
.section-alt{background:linear-gradient(180deg,transparent,rgba(168,199,224,0.025),transparent);}

.section-head{
  display:flex; align-items:baseline; gap:1rem;
  margin-bottom:2.6rem;
  border-bottom:1px solid var(--line);
  padding-bottom:1.2rem;
}
.section-idx{
  font-family:var(--font-mono);
  color:var(--violet);
  font-size:.85rem;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.section-sub{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--ink-dimmer);
  margin-left:auto;
}

/* ==========================================================================
   HERO
   ========================================================================== */
#hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:2rem;
  padding:clamp(6rem,10vw,3rem) clamp(1.2rem,6vw,5rem) 4rem;
  max-width:1400px;
  margin:0 auto;
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 30% 40%, black 10%, transparent 75%);
  opacity:.6;
}
.hero-content{position:relative;z-index:2;}
.hero-eyebrow{
  font-family:var(--font-mono);
  color:var(--violet);
  font-size:.85rem;
  margin-bottom:.8rem;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(3rem,9vw,6.4rem);
  line-height:.95;
  letter-spacing:.01em;
  text-transform:uppercase;
  position:relative;
  color:var(--ink);
}
.hero-title::before,
.hero-title::after{
  content:attr(data-text);
  position:absolute; left:0; top:0;
  width:100%; height:100%;
  clip-path:inset(0 0 0 0);
}
.hero-title::before{
  color:var(--cyan);
  animation:glitch-1 4.5s infinite steps(1);
  z-index:-1;
}
.hero-title::after{
  color:var(--red);
  animation:glitch-2 4.5s infinite steps(1);
  z-index:-2;
}
@keyframes glitch-1{
  0%,92%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);opacity:0;}
  93%{transform:translate(-3px,1px);clip-path:inset(10% 0 60% 0);opacity:.8;}
  95%{transform:translate(2px,-2px);clip-path:inset(60% 0 5% 0);opacity:.8;}
  97%{transform:translate(-2px,0);clip-path:inset(30% 0 40% 0);opacity:.6;}
}
@keyframes glitch-2{
  0%,92%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);opacity:0;}
  93%{transform:translate(3px,-1px);clip-path:inset(50% 0 20% 0);opacity:.7;}
  95%{transform:translate(-2px,2px);clip-path:inset(15% 0 70% 0);opacity:.7;}
  97%{transform:translate(2px,0);clip-path:inset(45% 0 25% 0);opacity:.5;}
}

.hero-sub{
  font-family:var(--font-mono);
  font-size:clamp(.95rem,1.6vw,1.15rem);
  color:var(--ink-dim);
  margin-top:1.4rem;
  min-height:1.6em;
}
.cursor{color:var(--cyan);animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}

.hero-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;}
.tag{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.06em;
  padding:.4rem .7rem;
  border:1px solid var(--line);
  color:var(--ink-dim);
  background:rgba(168,199,224,0.03);
}

.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem;}

.btn{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.03em;
  padding:.85rem 1.6rem;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s, background .2s;
}
.btn-sm{padding:.6rem 1.1rem;font-size:.72rem;}
.btn-primary{
  background:var(--cyan);
  color:var(--void);
  font-weight:700;
}
.btn-primary:hover{
  box-shadow:0 0 22px rgba(0,229,255,.5);
  transform:translateY(-2px);
}
.btn-ghost{
  border-color:var(--ink-dimmer);
  color:var(--ink);
}
.btn-ghost:hover{
  border-color:var(--cyan);
  color:var(--cyan);
  transform:translateY(-2px);
}

.hero-portrait{position:relative;z-index:2;display:flex;justify-content:center;}
.portrait-frame{
  position:relative;
  width:clamp(220px,26vw,340px);
  aspect-ratio:1;
  perspective:800px;
}
.portrait-frame img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  filter:grayscale(.25) contrast(1.08) saturate(1.05);
  border:1px solid var(--line);
  transform-style:preserve-3d;
  transition:transform .3s ease;
}
.portrait-frame:hover img{transform:rotateY(8deg) rotateX(-4deg) scale(1.02);}
.portrait-ring{
  position:absolute; inset:-14px;
  animation:spin 18s linear infinite;
}
.portrait-ring circle{
  fill:none;
  stroke:var(--violet);
  stroke-width:1;
  stroke-dasharray:6 10;
  opacity:.7;
}
@keyframes spin{to{transform:rotate(360deg);}}
.portrait-glitch{
  position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(120deg, transparent 40%, rgba(0,229,255,.18) 50%, transparent 60%);
  animation:sweep 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{0%,100%{opacity:0;}45%,55%{opacity:1;}}

.scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.65rem; color:var(--ink-dimmer);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  letter-spacing:.15em;
}
.scroll-cue span{
  width:1px; height:26px;
  background:linear-gradient(var(--cyan),transparent);
  animation:scrollcue 1.6s ease-in-out infinite;
}
@keyframes scrollcue{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:2rem;
  align-items:start;
}
.about-terminal{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.term-bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.7rem 1rem;
  background:var(--raise);
  border-bottom:1px solid var(--line);
}
.term-bar span{
  width:9px;height:9px;border-radius:50%;
  background:var(--ink-dimmer);
}
.term-bar span:nth-child(1){background:#ff5f57;}
.term-bar span:nth-child(2){background:#febc2e;}
.term-bar span:nth-child(3){background:#28c840;}
.term-bar p{
  margin-left:.6rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--ink-dim);
}
.term-body{padding:1.6rem 1.8rem;font-size:.94rem;}
.term-body p{margin-bottom:1rem;color:var(--ink);}
.term-body .prompt{color:var(--cyan);font-family:var(--font-mono);margin-right:.4em;}
.term-featured{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-dim);}
.inline-link{color:var(--violet);border-bottom:1px dotted var(--violet);}
.inline-link:hover{color:var(--cyan);border-color:var(--cyan);}

.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.stat-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:1.4rem;
  text-align:left;
}
.stat-num{
  display:block;
  font-family:var(--font-display);
  font-size:2.2rem;
  font-weight:700;
  color:var(--cyan);
}
.stat-label{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--ink-dim);
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.4rem;
}
.blog-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:1.6rem;
  display:flex; flex-direction:column; gap:.8rem;
  transition:border-color .2s, transform .2s;
  position:relative;
}
.blog-card:hover{border-color:var(--violet);transform:translateY(-4px);}
.blog-tag{
  font-family:var(--font-mono);
  font-size:.65rem;
  color:var(--violet);
  letter-spacing:.06em;
}
.blog-card h3{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:600;
}
.blog-excerpt{color:var(--ink-dim);font-size:.88rem;}
.blog-meta{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--ink-dimmer);
  margin-top:auto;
  padding-top:.6rem;
  border-top:1px solid var(--line);
}

/* ==========================================================================
   CODE / GITHUB
   ========================================================================== */
.gh-panel{
  background:var(--panel);
  border:1px solid var(--line);
}
.gh-summary{
  display:flex; gap:1.2rem; align-items:center;
  padding:1.6rem;
  border-bottom:1px solid var(--line);
}
.gh-avatar-wrap{
  width:64px;height:64px;flex:none;
  border:1px solid var(--line);
  overflow:hidden;
}
.gh-avatar-wrap img{width:100%;height:100%;object-fit:cover;}
.gh-handle{font-family:var(--font-display);font-weight:700;font-size:1.1rem;}
.gh-bio{color:var(--ink-dim);font-size:.85rem;margin:.2rem 0 .8rem;}

.repo-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.repo-item{
  padding:1.3rem 1.6rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .2s;
}
.repo-item:hover{background:rgba(0,229,255,0.04);}
.repo-name{
  font-family:var(--font-mono);
  color:var(--cyan);
  font-size:.9rem;
  display:block;
  margin-bottom:.4rem;
}
.repo-desc{color:var(--ink-dim);font-size:.8rem;min-height:2.4em;}
.repo-meta{
  display:flex; gap:1rem; margin-top:.7rem;
  font-family:var(--font-mono); font-size:.68rem; color:var(--ink-dimmer);
}
.loading-msg{
  padding:2rem; font-family:var(--font-mono); font-size:.8rem; color:var(--ink-dimmer);
  grid-column:1/-1;
}

/* ==========================================================================
   COURSES
   ========================================================================== */
.course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.4rem;
}
.course-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:1.6rem;
  position:relative;
  overflow:hidden;
}
.course-card::before{
  content:'';
  position:absolute; top:0; left:0; width:3px; height:100%;
  background:var(--violet);
}
.course-level{
  font-family:var(--font-mono);
  font-size:.65rem;
  color:var(--red);
  letter-spacing:.06em;
}
.course-card h3{
  font-family:var(--font-display);
  font-size:1.3rem;
  margin:.5rem 0 .6rem;
}
.course-card p{color:var(--ink-dim);font-size:.86rem;margin-bottom:1rem;}
.course-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:.72rem; color:var(--ink-dimmer);
  border-top:1px solid var(--line); padding-top:.9rem;
}
.course-status{
  padding:.25rem .55rem;
  border:1px solid var(--ink-dimmer);
  font-size:.62rem;
}
.course-status.live{color:#4dff9e;border-color:#4dff9e;}
.course-status.soon{color:var(--ink-dim);}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;
}
.contact-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:1.6rem;
  display:flex; flex-direction:column; gap:.6rem;
  transition:border-color .2s, transform .2s;
}
a.contact-card:hover{border-color:var(--cyan);transform:translateY(-3px);}
.contact-label{
  font-family:var(--font-mono); font-size:.68rem; color:var(--violet); letter-spacing:.08em;
}
.contact-value{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#site-footer{
  position:relative; z-index:2;
  text-align:center;
  padding:2.4rem 1rem 3rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--ink-dimmer);
  border-top:1px solid var(--line);
}
.footer-sub{margin-top:.4rem;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  #hero{grid-template-columns:1fr;text-align:left;}
  .hero-portrait{order:-1;margin-bottom:1rem;justify-content:flex-start;}
  .portrait-frame{width:140px;}
  .about-grid{grid-template-columns:1fr;}
  .about-stats{grid-template-columns:1fr 1fr;}
}

@media (max-width:760px){
  #nav-toggle{display:flex;}
  #nav-links{
    position:fixed; top:64px; left:0; right:0;
    flex-direction:column;
    background:var(--panel);
    border-bottom:1px solid var(--line);
    padding:1.2rem clamp(1.2rem,6vw,3rem);
    gap:1rem;
    transform:translateY(-120%);
    opacity:0;
    transition:transform .3s ease, opacity .3s ease;
  }
  #nav-links.open{transform:translateY(0);opacity:1;}
  .nav-status{display:none;}
  .hero-title{font-size:clamp(2.6rem,13vw,4rem);}
}