/**
 * Terminal UI Theme — Mali Santo Portfolio
 * Dark developer terminal aesthetic
 */

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --tm-bg:        #0c0c0c;
  --tm-surface:   #111111;
  --tm-card:      #161616;
  --tm-card-alt:  #1a1a1a;
  --tm-border:    #2a2a2a;
  --tm-border-hi: #3a3a3a;

  --tm-text:      #c8c8c8;
  --tm-muted:     #686868;
  --tm-heading:   #eeeeee;

  --tm-cyan:      #00d4aa;   /* primary accent */
  --tm-yellow:    #e5c07b;   /* filenames / titles */
  --tm-orange:    #d19a66;   /* prompt $ */
  --tm-green:     #98c379;   /* comments / success */
  --tm-blue:      #61afef;   /* keywords */
  --tm-purple:    #c678dd;   /* strings */
  --tm-red:       #e06c75;   /* errors */

  /* Override template vars */
  --background-color:             #0c0c0c;
  --default-color:                #c8c8c8;
  --heading-color:                #eeeeee;
  --accent-color:                 #00d4aa;
  --surface-color:                #161616;
  --contrast-color:               #c8c8c8;
  --nav-color:                    #c8c8c8;
  --nav-hover-color:              #00d4aa;
  --nav-mobile-background-color:  #111111;
}

/* ============================================================
   GLOBAL
   ============================================================ */
*, *::before, *::after {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--tm-bg) !important;
  color: var(--tm-text) !important;
  background-image:
    linear-gradient(rgba(0,212,170,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,170,.025) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Scanline overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.06) 3px,
    rgba(0,0,0,.06) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

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

::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--tm-bg); }
::-webkit-scrollbar-thumb { background: var(--tm-cyan); border-radius: 0; }

a { color: var(--tm-cyan); text-decoration: none; }
a:hover { color: var(--tm-yellow); }

h1, h2, h3, h4, h5, h6 { color: var(--tm-heading) !important; }

.light-background {
  background-color: var(--tm-bg) !important;
  --background-color: #0c0c0c;
}

/* ============================================================
   TERMINAL WINDOW MIXIN (via shared class)
   ============================================================ */
/* Applied with JS-free approach — use ::before for chrome bar, ::after for dots */
.tm-window {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
}
.tm-window::before {
  content: '';
  display: block;
  height: 32px;
  background: var(--tm-surface);
  border-bottom: 1px solid var(--tm-border);
  flex-shrink: 0;
}
.tm-window::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840;
}

/* ============================================================
   HEADER & NAV
   ============================================================ */
#header {
  background: rgba(12,12,12,.96) !important;
  border-bottom: none !important;
  /* no backdrop-filter — it creates a stacking context that breaks fixed navmenu backgrounds */
}

.navmenu {
  background: #111111 !important;
  border-left: 1px solid var(--tm-border) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.mobile-nav-active .navmenu {
  background: #111111 !important;
  z-index: 9990 !important;
}

/* In-flow terminal title bar — no position:absolute so content flows below it */
.navmenu::before {
  content: '// nav.sh';
  display: block;
  padding: 10px 14px 10px 52px; /* 52px left indent to clear the dots */
  background: #0a0a0a;
  border-bottom: 1px solid var(--tm-border);
  color: var(--tm-muted);
  font-size: 12px;
  letter-spacing: .05em;
  position: relative; /* normal in-flow positioning */
}

/* Traffic-light dots: absolute within navmenu, won't scroll with content */
.navmenu::after {
  content: '';
  position: absolute;
  top: 13px;
  left: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
  pointer-events: none;
  z-index: 2;
}

.navmenu .sitename {
  color: var(--tm-cyan) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
}

.profile-img img {
  border: 1px solid var(--tm-cyan) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 20px rgba(0,212,170,.25), 0 0 0 3px rgba(0,212,170,.08) !important;
  filter: saturate(.85);
  transition: filter .3s;
}
.profile-img img:hover { filter: saturate(1); }

.social-links a {
  background: var(--tm-card) !important;
  color: var(--tm-muted) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  transition: all .2s !important;
}
.social-links a:hover {
  background: var(--tm-cyan) !important;
  color: var(--tm-bg) !important;
  border-color: var(--tm-cyan) !important;
  box-shadow: 0 0 10px rgba(0,212,170,.4) !important;
}

/* Nav links */
.navmenu ul li a {
  color: var(--tm-muted) !important;
  font-size: 12.5px !important;
  padding: 9px 16px !important;
  border-radius: 0 !important;
  border-left: 2px solid transparent !important;
  transition: all .15s !important;
}
.navmenu ul li a::before {
  content: '$ ';
  color: var(--tm-orange);
  font-weight: 400;
}
.navmenu ul li a:hover,
.navmenu ul li a.active {
  color: var(--tm-cyan) !important;
  background: rgba(0,212,170,.05) !important;
  border-left-color: var(--tm-cyan) !important;
}
.navmenu ul li a.active::after { display: none !important; }

/* Mobile nav toggle */
.mobile-nav-toggle { color: var(--tm-cyan) !important; }

/* ============================================================
   HERO
   ============================================================ */
.hero.section {
  background: var(--tm-bg) !important;
  min-height: auto;
}

.hero-content {
  position: relative;
  padding: 20px 0;
}

/* Terminal session header above hero text */
.hero-content::before {
  content: 'mali@portfolio:~$ ./intro.sh';
  display: block;
  color: var(--tm-muted);
  font-size: 12px;
  margin-top: 150px;
  margin-bottom: 18px;
  padding: 8px 14px;
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-bottom: 2px solid var(--tm-cyan);
}

.hero-title {
  color: var(--tm-heading) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 0 !important;
}

.hero-title .typed { color: var(--tm-cyan) !important; }
.typed-cursor { color: var(--tm-cyan) !important; animation: tmBlink 1s step-end infinite; }

@keyframes tmBlink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero .lead {
  color: var(--tm-muted) !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
  border-left: 2px solid var(--tm-cyan);
  padding-left: 14px;
  margin: 18px 0 !important;
}

/* Social links in hero */
.hero-content .social-links a {
  background: var(--tm-card) !important;
  color: var(--tm-muted) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 14px !important;
}
.hero-content .social-links a:hover {
  background: var(--tm-cyan) !important;
  color: var(--tm-bg) !important;
  box-shadow: 0 0 10px rgba(0,212,170,.4) !important;
}

/* Buttons */
.btn-primary,
a.btn-primary,
.hero-actions .btn-primary {
  background: transparent !important;
  color: var(--tm-cyan) !important;
  border: 1px solid var(--tm-cyan) !important;
  border-radius: 0 !important;
  font-size: 12.5px !important;
  padding: 10px 22px !important;
  transition: all .2s !important;
  text-transform: lowercase !important;
  letter-spacing: .04em !important;
}
.btn-primary::before,
a.btn-primary::before { content: '$ '; color: var(--tm-orange); }
.btn-primary:hover,
a.btn-primary:hover {
  background: var(--tm-cyan) !important;
  color: var(--tm-bg) !important;
  box-shadow: 0 0 18px rgba(0,212,170,.35) !important;
}

.btn-outline,
a.btn-outline {
  background: transparent !important;
  color: var(--tm-muted) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  font-size: 12.5px !important;
  padding: 10px 22px !important;
  transition: all .2s !important;
  text-transform: lowercase !important;
}
.btn-outline:hover,
a.btn-outline:hover {
  color: var(--tm-text) !important;
  border-color: var(--tm-border-hi) !important;
}

/* Floating cards */
.floating-card {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  color: var(--tm-text) !important;
  font-size: 12px !important;
  box-shadow: 0 0 24px rgba(0,212,170,.08) !important;
  transition: box-shadow .3s !important;
}
.floating-card:hover {
  box-shadow: 0 0 30px rgba(0,212,170,.2) !important;
}
.floating-card i { color: var(--tm-cyan) !important; }

/* Hero image */
.image-container {
  border: 1px solid var(--tm-border);
  box-shadow: 0 0 50px rgba(0,212,170,.08);
  border-radius: 0 !important;
  overflow: hidden;
}
.image-overlay {
  background: linear-gradient(to top, rgba(12,12,12,.85) 0%, transparent 50%) !important;
}
.hero-main-image { filter: saturate(.8) contrast(1.05); }

/* ============================================================
   SECTION TITLES
   ============================================================ */
.section-title {
  padding-bottom: 24px !important;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--tm-border);
  position: relative;
}

/* Traffic-light dots */
.section-title::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840;
  margin-bottom: 16px;
}

.section-title h2 {
  color: var(--tm-heading) !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600 !important;
  position: relative;
}
.section-title h2::before {
  content: '$ cat ';
  color: var(--tm-orange);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}

.section-title p {
  color: var(--tm-muted) !important;
  font-size: 12.5px !important;
}
.section-title p::before {
  content: '# ';
  color: var(--tm-green);
}

/* ============================================================
   RESUME / EXPERIENCE
   ============================================================ */
.resume.section {
  background: var(--tm-bg) !important;
}

.section-header h2 {
  color: var(--tm-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.section-header h2 i { color: var(--tm-cyan) !important; }
.section-header h2::before {
  content: '// ';
  color: var(--tm-green);
}

.section-subtitle {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
}
.section-subtitle::before {
  content: '# ';
  color: var(--tm-green);
}

/* Experience card — terminal window look */
.experience-card {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  margin-bottom: 18px !important;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.experience-card:hover {
  border-color: var(--tm-border-hi) !important;
  box-shadow: 0 0 24px rgba(0,212,170,.07);
}

/* Chrome title bar */
.experience-card::before {
  content: '';
  display: block;
  height: 32px;
  background: var(--tm-surface);
  border-bottom: 1px solid var(--tm-border);
}
/* Traffic-light dots */
.experience-card::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
  pointer-events: none;
}

.experience-card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.experience-card .card-header h3 {
  color: var(--tm-yellow) !important;
  font-size: 13px !important;
  margin: 0 !important;
}
.experience-card .card-header h3::before {
  content: '> ';
  color: var(--tm-orange);
}
.experience-card .card-header h4 {
  color: var(--tm-cyan) !important;
  font-size: 12px !important;
  margin: 4px 0 0 !important;
  font-weight: 400 !important;
}
.experience-card .duration {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
  white-space: nowrap;
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  padding: 2px 8px;
  flex-shrink: 0;
}

.experience-card .card-body {
  padding: 14px 18px !important;
}
.experience-card .card-body p {
  color: var(--tm-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
}
.experience-card .achievements {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
}
.experience-card .achievements li {
  color: var(--tm-text) !important;
  font-size: 12px !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid rgba(42,42,42,.5);
}
.experience-card .achievements li::before {
  content: '  - ' !important;
  color: var(--tm-cyan) !important;
}

/* Education Timeline */
.education-section .section-header h2 { margin-bottom: 8px; }

.education-timeline {
  border-left: 1px solid var(--tm-border) !important;
  padding-left: 0 !important;
}

.education-item {
  padding-left: 24px !important;
  position: relative;
  margin-bottom: 20px !important;
}

.timeline-marker {
  background: var(--tm-cyan) !important;
  border: 2px solid var(--tm-bg) !important;
  box-shadow: 0 0 8px rgba(0,212,170,.55) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 0 !important;
}

.education-content {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
  transition: border-color .2s;
}
.education-content:hover { border-color: var(--tm-border-hi) !important; }

.education-content .degree-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.education-content .degree-header h3 {
  color: var(--tm-yellow) !important;
  font-size: 12.5px !important;
  margin: 0 !important;
}
.education-content .degree-header h3::before {
  content: '> ';
  color: var(--tm-orange);
}
.education-content .year {
  color: var(--tm-cyan) !important;
  font-size: 12px !important;
  white-space: nowrap;
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border);
  padding: 2px 8px;
}
.institution {
  color: var(--tm-orange) !important;
  font-size: 12px !important;
  margin: 6px 0 !important;
}
.education-content p {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about.section { background: var(--tm-bg) !important; }

.profile-image-wrapper { position: relative; }

.profile-image {
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 40px rgba(0,212,170,.1) !important;
}
.profile-image::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0,212,170,.3);
  z-index: 1;
  pointer-events: none;
}
.profile-image img { filter: saturate(.85); }

.signature-section {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--tm-card);
  border: 1px solid var(--tm-border);
}
.quote {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
  margin: 6px 0 0 !important;
}
.quote::before {
  content: '// ';
  color: var(--tm-green);
}

.about-content {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border) !important;
  padding: 24px !important;
  border-radius: 0 !important;
}
.about-content .intro h2 {
  color: var(--tm-cyan) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  font-weight: 600 !important;
}
.about-content .intro p {
  color: var(--tm-muted) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

/* Skills grid in about */
.about .skills-grid .skill-item {
  background: var(--tm-card-alt) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  padding: 18px !important;
  transition: border-color .2s, box-shadow .2s;
}
.about .skills-grid .skill-item:hover {
  border-color: var(--tm-cyan) !important;
  box-shadow: 0 0 16px rgba(0,212,170,.08);
}
.about .skills-grid .skill-item .skill-icon {
  background: transparent !important;
  border-radius: 0 !important;
  border: 1px solid var(--tm-cyan) !important;
  width: 48px !important;
  height: 48px !important;
}
.skill-item .skill-icon i {
  color: var(--tm-cyan) !important;
  font-size: 1.6rem !important;
}
.skill-item h4 {
  color: var(--tm-yellow) !important;
  font-size: 12.5px !important;
}
.skill-item p {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

/* Journey timeline */
.journey-timeline { margin-top: 20px; }
.journey-timeline .timeline-item {
  border-left: 2px solid var(--tm-border) !important;
  padding: 10px 0 10px 18px !important;
  margin-left: 8px;
  position: relative;
}
.journey-timeline .timeline-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 14px;
  width: 8px;
  height: 8px;
  background: var(--tm-cyan);
  border-radius: 0;
  box-shadow: 0 0 6px rgba(0,212,170,.5);
}
.timeline-item .year {
  color: var(--tm-cyan) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.timeline-item .year::before {
  content: '[ ';
  color: var(--tm-muted);
}
.timeline-item .year::after {
  content: ' ]';
  color: var(--tm-muted);
}
.timeline-item .description {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}
.timeline-item .description strong {
  color: var(--tm-yellow) !important;
  font-weight: 600;
}

.action-buttons { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   SKILLS
   ============================================================ */
.skills.section { background: var(--tm-bg) !important; }

/* Tech skill cards */
.skill-card {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
  height: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.skill-card:hover {
  border-color: var(--tm-border-hi) !important;
  box-shadow: 0 0 24px rgba(0,212,170,.07);
}
/* Chrome bar */
.skill-card::before {
  content: '';
  display: block;
  height: 30px;
  background: var(--tm-surface);
  border-bottom: 1px solid var(--tm-border);
}
/* Dots */
.skill-card::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
  pointer-events: none;
}

.skill-card .skill-header {
  background: transparent !important;
  border-bottom: 1px solid var(--tm-border) !important;
  padding: 12px 16px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.skill-card .skill-header i { color: var(--tm-cyan) !important; }
.skill-card .skill-header h3 {
  color: var(--tm-yellow) !important;
  font-size: 12.5px !important;
  margin: 0 !important;
}
.skill-card .skill-header h3::before {
  content: '// ';
  color: var(--tm-green);
  font-weight: 400;
}

.frontend-tech-card { background: var(--tm-card) !important; }

.tech-list { padding: 14px !important; }
.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px !important;
  transition: background .2s;
  border-radius: 0 !important;
}
.tech-item:hover {
  background: rgba(0,212,170,.05);
}
.tech-icon { filter: grayscale(40%); transition: filter .2s; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.tech-item:hover .tech-icon { filter: grayscale(0%); }
.tech-icon i { color: var(--tm-cyan) !important; font-size: 1.6rem !important; }
.tech-icon svg { width: 36px !important; height: 36px !important; }
.tech-label {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
}

/* Force skills section two-column layout (desktop only — mobile stacks via Bootstrap) */
@media (min-width: 768px) {
  .skills .row.align-items-stretch {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .skills .col-md-8 {
    flex: 0 0 66.666% !important;
    max-width: 66.666% !important;
  }
  .skills .col-md-4 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}

/* Skills summary sidebar */
.skills-summary {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  padding: 24px !important;
  position: relative !important;
  top: auto !important;
}
.skills-summary h3 {
  color: var(--tm-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
.skills-summary p {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
}
.skills-summary h4 {
  color: var(--tm-yellow) !important;
  font-size: 12.5px !important;
  margin-top: 24px !important;
  margin-bottom: 10px !important;
}
.skills-summary h4::before {
  content: '$ ';
  color: var(--tm-orange);
}
.skills-summary .list-unstyled li {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid rgba(42,42,42,.5);
}
.skills-summary .list-unstyled li::before {
  content: '✓  ';
  color: var(--tm-green);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--tm-card-alt);
  border: 1px solid var(--tm-border);
  margin-bottom: 12px;
}
.stat-circle {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-cyan) !important;
  border-radius: 0 !important;
  width: 48px !important;
  height: 48px !important;
  box-shadow: 0 0 12px rgba(0,212,170,.2) !important;
  display: flex; align-items: center; justify-content: center;
}
.stat-circle i { color: var(--tm-cyan) !important; }
.stat-number { color: var(--tm-cyan) !important; font-size: 1.5rem !important; font-weight: 700 !important; }
.stat-label { color: var(--tm-muted) !important; font-size: 12px !important; }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.portfolio.section { background: var(--tm-bg) !important; }

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 !important;
  list-style: none !important;
}
.portfolio-filters li {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  color: var(--tm-muted) !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  cursor: pointer;
  transition: all .2s;
}
.portfolio-filters li::before { content: '[ '; color: var(--tm-muted); }
.portfolio-filters li::after  { content: ' ]'; color: var(--tm-muted); }
.portfolio-filters li.filter-active,
.portfolio-filters li:hover {
  background: var(--tm-cyan) !important;
  color: var(--tm-bg) !important;
  border-color: var(--tm-cyan) !important;
}
.portfolio-filters li.filter-active::before,
.portfolio-filters li.filter-active::after,
.portfolio-filters li:hover::before,
.portfolio-filters li:hover::after { color: var(--tm-bg); }

.portfolio-entry {
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.portfolio-entry:hover {
  border-color: var(--tm-cyan) !important;
  box-shadow: 0 0 20px rgba(0,212,170,.1) !important;
}
.entry-overlay {
  background: rgba(12,12,12,.92) !important;
  backdrop-filter: blur(4px);
}
.entry-meta {
  color: var(--tm-cyan) !important;
  font-size: 12px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.entry-meta::before { content: '// '; color: var(--tm-green); }
.entry-title {
  color: var(--tm-heading) !important;
  font-size: 13.5px !important;
}
.entry-title::before {
  content: '> ';
  color: var(--tm-orange);
}
.entry-links a {
  background: transparent !important;
  border: 1px solid var(--tm-cyan) !important;
  color: var(--tm-cyan) !important;
  border-radius: 0 !important;
  transition: all .2s !important;
}
.entry-links a:hover {
  background: var(--tm-cyan) !important;
  color: var(--tm-bg) !important;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact.section,
.contact.section.light-background {
  background: var(--tm-bg) !important;
  --background-color: #0c0c0c;
}

.info-box {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}
.info-box h3 {
  color: var(--tm-yellow) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}
.info-box h3::before { content: '$ '; color: var(--tm-orange); }
.info-box > p {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
}

.info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--tm-border);
}
.info-item:last-child { border-bottom: none; }
.icon-box {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-box i { color: var(--tm-cyan) !important; }
.info-item h4 {
  color: var(--tm-text) !important;
  font-size: 12.5px !important;
  margin: 0 0 4px !important;
}
.info-item p {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
  margin: 0 !important;
}

.contact-form {
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}
.contact-form h3 {
  color: var(--tm-yellow) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.contact-form h3::before { content: '$ '; color: var(--tm-orange); }
.contact-form > p {
  color: var(--tm-muted) !important;
  font-size: 12px !important;
}

/* Form controls */
.form-control,
.form-control:focus,
textarea.form-control {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 0 !important;
  color: var(--tm-text) !important;
  font-size: 13px !important;
  box-shadow: none !important;
  transition: border-color .2s !important;
}
.form-control:focus {
  border-color: var(--tm-cyan) !important;
  box-shadow: 0 0 0 1px rgba(0,212,170,.25) !important;
}
.form-control::placeholder { color: var(--tm-muted) !important; opacity: .7; }

.php-email-form button[type="submit"] {
  background: transparent !important;
  color: var(--tm-cyan) !important;
  border: 1px solid var(--tm-cyan) !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  padding: 10px 28px !important;
  transition: all .2s !important;
}
.php-email-form button[type="submit"]::before { content: '$ '; color: var(--tm-orange); }
.php-email-form button[type="submit"]:hover {
  background: var(--tm-cyan) !important;
  color: var(--tm-bg) !important;
  box-shadow: 0 0 16px rgba(0,212,170,.3) !important;
}

/* ============================================================
   SCROLL TOP
   ============================================================ */
#scroll-top {
  background: var(--tm-cyan) !important;
  color: var(--tm-bg) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 16px rgba(0,212,170,.35) !important;
  width: 36px !important;
  height: 36px !important;
}

/* ============================================================
   GLIGHTBOX OVERRIDES
   ============================================================ */
.glightbox-container,
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background: var(--tm-bg) !important;
  color: var(--tm-text) !important;
}

/* ============================================================
   AOS — keep subtle
   ============================================================ */
[data-aos] { --aos-duration: 500ms; }

/* ============================================================
   GLOW ANIMATION
   ============================================================ */
@keyframes tmGlow {
  0%,100% { box-shadow: 0 0 6px rgba(0,212,170,.25); }
  50%      { box-shadow: 0 0 20px rgba(0,212,170,.55); }
}
.profile-img img { animation: tmGlow 3s ease-in-out infinite; }

/* ============================================================
   SLIDER CAPTCHA — terminal overrides
   ============================================================ */
.slider-captcha .captcha-puzzle {
  background-color: #0a3a2a !important;
  background-image:
    linear-gradient(rgba(0,212,170,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,170,0.18) 1px, transparent 1px) !important;
  border-radius: 0 !important;
}

.slider-captcha .captcha-piece {
  background-color: #0d4a36 !important;
  background-image:
    linear-gradient(rgba(0,212,170,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,170,0.35) 1px, transparent 1px) !important;
  border-color: var(--tm-cyan) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 10px rgba(0,212,170,0.3) !important;
}

.slider-captcha .captcha-hole {
  border-color: rgba(0,212,170,0.5) !important;
  border-radius: 0 !important;
}

.slider-captcha .captcha-track-wrap {
  background: var(--tm-surface) !important;
  border-color: var(--tm-border) !important;
  border-radius: 0 !important;
}

.slider-captcha .captcha-track {
  background: var(--tm-bg) !important;
  border-radius: 0 !important;
}

.slider-captcha .captcha-fill {
  background: rgba(0,212,170,0.25) !important;
  border-radius: 0 !important;
}

.slider-captcha .captcha-handle {
  background: var(--tm-card) !important;
  border-color: var(--tm-cyan) !important;
  color: var(--tm-cyan) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 8px rgba(0,212,170,0.25) !important;
}

.slider-captcha .captcha-label {
  color: var(--tm-muted) !important;
}

.slider-captcha .captcha-piece.verified {
  border-color: var(--tm-green) !important;
  box-shadow: 0 0 12px rgba(152,195,121,0.4) !important;
}

.slider-captcha .captcha-handle.verified {
  border-color: var(--tm-green) !important;
  color: var(--tm-green) !important;
}

.slider-captcha .captcha-label.verified {
  color: var(--tm-green) !important;
}

.slider-captcha .captcha-fill.solved-fill {
  background: rgba(152,195,121,0.4) !important;
}