/* ============================================================
   LUKA SALVO — v2 "MONOSPACE EDITORIAL"
   Palette dark : violet #a78bfa · cyan #22d3ee · deep purple bg
   Typo    : JetBrains Mono (display) + Space Grotesk (body)
   ============================================================ */

/* ── Tokens ── */
:root {
  --bg:          #EDE8E3;
  --bg-alt:      #E3DDD7;
  --bg-card:     #F4F1EC;
  --text:        #111820;
  --text-2:      #1a3666;
  --text-3:      #4a7ab5;
  --accent:      #1560BD;
  --accent-dim:  rgba(21,96,189,0.10);
  --line:        rgba(21,96,189,0.14);
  --nav-bg:      rgba(237,232,227,0.95);
  --nav-border:  rgba(21,96,189,0.10);
  --sky:         #73C2FB;
  --r:           2px;
  --t:           0.22s cubic-bezier(0.4,0,0.2,1);
  --mono:        'JetBrains Mono','Courier New',monospace;
  --sans:        'Space Grotesk',sans-serif;
}

.dark {
  --bg:          #09080f;
  --bg-alt:      #110d1a;
  --bg-card:     #160e22;
  --text:        #ede8ff;
  --text-2:      #c4b5fd;
  --text-3:      #3d2f5e;
  --accent:      #a78bfa;
  --accent-dim:  rgba(167,139,250,0.10);
  --line:        rgba(167,139,250,0.10);
  --nav-bg:      rgba(9,8,15,0.96);
  --nav-border:  rgba(167,139,250,0.08);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:64px; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}
img,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

/* ── Scroll progress ── */
.scroll-progress {
  position: fixed;
  top:0; left:0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 9999;
  transition: width 0.1s linear;
}
html:not(.dark) .scroll-progress { background: #1560BD; }

/* ── Navigation ── */
.nav {
  position: fixed;
  top:0; width:100%;
  z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--nav-border);
  transition: background var(--t), border-color var(--t);
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}
.nav-logo span { color: var(--accent); }

.nav-links { display:flex; gap:28px; list-style:none; position:relative; }
.nav-links a {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color var(--t);
  position: relative;
  padding-bottom: 2px;
}
.nav-links a::after {
  content:'';
  position: absolute;
  bottom:-2px; left:0;
  width:0; height:1px;
  background: var(--accent);
  transition: width var(--t);
}
.nav-links a:hover,
.nav-links a.nav-active { color:var(--text); }
.nav-links a:hover::after,
.nav-links a.nav-active::after { width:100%; }

.nav-actions { display:flex; align-items:center; gap:10px; }

.theme-btn {
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all var(--t);
  font-size:0.82rem;
}
.theme-btn:hover { color:var(--accent); border-color:var(--accent); }

.hamburger-btn {
  display:none;
  width:34px; height:34px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  align-items:center; justify-content:center;
  cursor:pointer;
  font-size:0.9rem;
  transition:all var(--t);
}

/* ── Hero ── */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding-top: 80px;
  padding-bottom: 120px;
}

/* Dot-grid background (CSS-only, no canvas) */
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events:none;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 30%, transparent 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  padding: 0 24px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.2s;
}

/* THE hero title — mono, huge, uppercase, NO gradient */
.hero-title {
  font-family: var(--mono);
  font-size: clamp(4.5rem, 13vw, 10.5rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.85;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 0.85s ease forwards 0.35s;
}

.hero-subtitle {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.52s;
}

.hero-desc {
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 580px;
  margin: 0 auto 48px;
  line-height: 1.9;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.65s;
}

.hero-tags {
  display: flex;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 38px;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.78s;
}

.tag {
  padding: 5px 12px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-2);
  transition: all var(--t);
  border-radius: var(--r);
  letter-spacing: 0.04em;
}
.tag:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.9s;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: var(--accent);
  color: #000;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
  transition: all var(--t);
}
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: all var(--t);
}
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: fadeIn 0.7s ease forwards 1.3s;
}
.scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:1; transform:scaleY(1); }
  50%      { opacity:0.3; transform:scaleY(0.5); }
}

/* Stats bar */
.hero-stats {
  position: absolute;
  bottom:0; left:0; right:0;
  padding: 15px 24px;
  display: flex;
  justify-content: center;
  gap: 56px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  opacity: 0;
  animation: fadeIn 0.7s ease forwards 1.1s;
}
.stat { text-align:center; }
.stat-number {
  font-family: var(--mono);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--accent);
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Easter egg hint */
.easter-hint {
  position: absolute;
  bottom: 82px; left: 24px;
  padding: 7px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-2);
  z-index: 1;
}

/* ── Section base ── */
section { padding: 160px 40px; }
.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.section-header { margin-bottom: 80px; }

.section-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  gap: 10px;
}
.section-label::before {
  content:'';
  display:block;
  width:20px; height:1px;
  background: var(--accent);
  flex-shrink:0;
}

.section-title {
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.06;
  color: var(--text);
  margin-bottom: 14px;
}

/* Accent underline that reveals after word-split */
.section-title::after {
  content:'';
  display:block;
  width:28px; height:2px;
  background: var(--accent);
  border-radius:1px;
  margin-top:18px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) 0.4s;
}
.section-title.words-revealed::after { transform:scaleX(1); }

.section-desc {
  font-size: 1.08rem;
  color: var(--text-2);
  max-width: 580px;
  line-height: 1.9;
  will-change: transform;
}

.bg-alt { background:var(--bg-alt); }

/* ── Scroll Reveals ── */
.reveal {
  opacity:0;
  transform:translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:0.07s; }
.reveal-d2 { transition-delay:0.14s; }
.reveal-d3 { transition-delay:0.21s; }
.reveal-d4 { transition-delay:0.28s; }
.reveal-d5 { transition-delay:0.35s; }
.reveal-d6 { transition-delay:0.42s; }

/* ── Word Split ── */
.word-wrap {
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  line-height:1.1;
}
.word {
  display:inline-block;
  transform:translateY(110%) rotate(2deg);
  transition:transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.word.visible { transform:translateY(0) rotate(0deg); }

/* ── About ── */
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}

/* Terminal (about) — kept */
.terminal {
  background:#0d1117;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
}
.terminal-header {
  padding:12px 16px;
  background:#161b22;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.terminal-dot { width:11px; height:11px; border-radius:50%; }
.terminal-dot.red    { background:#ff5f57; }
.terminal-dot.yellow { background:#ffbd2e; }
.terminal-dot.green  { background:#28ca41; }
.terminal-window-title {
  flex:1;
  text-align:center;
  font-size:0.66rem;
  color:rgba(255,255,255,0.22);
  font-family:var(--mono);
}
.terminal-body {
  padding:18px 20px;
  font-family:var(--mono);
  font-size:0.8rem;
  line-height:1.85;
  color:#7ee787;
  min-height:240px;
  max-height:280px;
  overflow-y:auto;
}

/* Info as rows — no card boxes */
.about-info {
  display:flex;
  flex-direction:column;
  gap:0;
}
.info-card {
  border:none;
  border-bottom:1px solid var(--line);
  padding:28px 0;
  background:transparent;
  transition:none;
  overflow:visible;
  position:relative;
}
.info-card:first-child { padding-top:0; }
.info-card:last-child  { border-bottom:none; }
.info-card:hover { transform:none; box-shadow:none; }
.info-card::before { display:none; }

.info-icon { display:none; }

.info-title {
  font-family:var(--mono);
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.info-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.info-list li {
  font-size:0.95rem;
  color:var(--text-2);
  display:flex;
  align-items:flex-start;
  gap:8px;
  line-height:1.65;
}
.info-list li i {
  color:var(--text-3);
  font-size:0.6rem;
  margin-top:5px;
  flex-shrink:0;
}

/* ── Skills ── */
.thm-badge {
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  background:transparent;
  margin-bottom:60px;
  border-radius:var(--r);
  transition:border-color var(--t);
  cursor:default;
}
.dark .thm-badge { background:transparent; }
.thm-icon {
  font-size:1.4rem;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  border-radius:var(--r);
  flex-shrink:0;
}
.thm-text strong {
  display:block;
  font-size:0.88rem;
  font-weight:700;
  font-family:var(--mono);
  color:var(--text);
  margin-bottom:2px;
}
.thm-text span { font-size:0.78rem; color:var(--text-2); }

.skills-group { margin-bottom:64px; }
.skills-group-title {
  font-family:var(--mono);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--text-3);
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:0;
  display:flex;
  align-items:center;
  gap:10px;
}

/* ── Skill rows (replaced cards) ── */
.skill-list { display:flex; flex-direction:column; }
.skill-row {
  display:grid;
  grid-template-columns:26px 1fr 160px 48px;
  align-items:center;
  gap:0 16px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.sr-icon {
  width:26px;
  text-align:center;
  font-size:1rem;
  flex-shrink:0;
}
.sr-name {
  font-size:0.95rem;
  font-weight:600;
  color:var(--text);
  letter-spacing:-0.01em;
}
.sr-bar {
  height:2px;
  background:var(--line);
  border-radius:1px;
  overflow:hidden;
}
.sr-fill {
  height:100%;
  background:var(--accent);
  width:0%;
  border-radius:1px;
  transition:width 1.1s cubic-bezier(0.4,0,0.2,1);
}
.sr-pct {
  font-family:var(--mono);
  font-size:0.68rem;
  font-weight:700;
  color:var(--accent);
  text-align:right;
}

/* Skills ticker */
.skills-ticker-container {
  overflow:hidden;
  margin:0 0 44px;
  padding:10px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
}
.skills-ticker-track {
  display:flex;
  gap:14px;
  animation:tickerRun 36s linear infinite;
  width:max-content;
  will-change:transform;
}
.skills-ticker-container:hover .skills-ticker-track { animation-play-state:paused; }
.ticker-item {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 12px;
  border:1px solid var(--line);
  background:transparent;
  font-family:var(--mono);
  font-size:0.7rem;
  font-weight:600;
  color:var(--text-2);
  white-space:nowrap;
  border-radius:var(--r);
  transition:border-color 0.2s ease,color 0.2s ease;
  cursor:default;
  user-select:none;
}
.ticker-item:hover { border-color:var(--accent); color:var(--accent); }
.ticker-dot {
  width:4px; height:4px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
@keyframes tickerRun {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* Certifications */
.skills-subgroup-label {
  font-family:var(--mono);
  font-size:0.64rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:12px;
  display:block;
}
.cert-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
}
.cert-card {
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px 24px;
  transition:border-color var(--t);
  position:relative;
  overflow:hidden;
}
.cert-card::before { display:none; }
.cert-card:hover { border-color:var(--accent); transform:none; }
.cert-card.cert-wip { border-style:dashed; opacity:0.75; }
.cert-card.cert-wip:hover { opacity:1; }
.cert-status {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--mono);
  font-size:0.6rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:8px;
  padding:2px 8px;
  border-radius:1px;
}
.cert-done {
  color:var(--accent);
  background:var(--accent-dim);
  border:1px solid rgba(167,139,250,0.25);
}
html:not(.dark) .cert-done {
  color:var(--accent);
  background:rgba(21,96,189,0.07);
  border-color:rgba(21,96,189,0.20);
}
.cert-progress {
  color:var(--text-2);
  background:transparent;
  border:1px solid var(--line);
}
html:not(.dark) .cert-progress { background:transparent; }
.cert-progress .fa-spinner { animation:spin 1.4s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.cert-name {
  font-size:0.85rem;
  font-weight:600;
  color:var(--text);
  line-height:1.3;
  margin-bottom:4px;
}
.cert-org {
  font-family:var(--mono);
  font-size:0.66rem;
  color:var(--text-3);
}

/* Competence grid */
.competence-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
  margin-top:0;
}
.competence-card {
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:32px;
  transition:border-color var(--t);
  position:relative;
  overflow:hidden;
}
.competence-card::before { display:none; }
.competence-card:hover { border-color:var(--accent); transform:none; box-shadow:none; }
.dark .competence-card { background:transparent; backdrop-filter:none; }
.competence-head {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}
.competence-ic {
  width:32px; height:32px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  font-size:0.82rem;
  flex-shrink:0;
}
.competence-name {
  font-size:0.88rem;
  font-weight:700;
  color:var(--text);
  line-height:1.3;
}
.stars {
  font-size:0.88rem;
  letter-spacing:2px;
  color:var(--accent);
  display:block;
  margin-bottom:10px;
}
.comp-section-label {
  font-family:var(--mono);
  font-size:0.6rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-3);
  display:block;
  margin-bottom:3px;
}
.comp-text {
  font-size:0.82rem;
  color:var(--text-2);
  line-height:1.6;
  margin-bottom:8px;
}

/* ── Timeline ── */
.timeline {
  position:relative;
  padding-left:40px;
}
.timeline::before {
  content:'';
  position:absolute;
  left:9px; top:8px; bottom:8px;
  width:1px;
  background:linear-gradient(to bottom,var(--accent) 0%,transparent 100%);
  opacity:0.25;
}
.timeline-item {
  position:relative;
  padding-bottom:60px;
}
.timeline-item:last-child { padding-bottom:0; }

/* Square dot — distinctive, not round */
.timeline-dot {
  position:absolute;
  left:-34px; top:5px;
  width:12px; height:12px;
  border-radius:2px;
  background:var(--bg);
  border:2px solid var(--accent);
  transition:background var(--t);
  box-shadow:none;
}
.timeline-dot::after { display:none; }
.timeline-item:hover .timeline-dot { background:var(--accent); transform:none; }

.timeline-date {
  font-family:var(--mono);
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}
.timeline-title {
  font-size:1.15rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:12px;
  letter-spacing:-0.02em;
  line-height:1.3;
}
.timeline-desc {
  font-size:0.95rem;
  color:var(--text-2);
  line-height:1.85;
}
.timeline-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-family:var(--mono);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
}
.timeline-link:hover { text-decoration:underline; }

/* ── Bento Grid (Projects) ── */
.bento-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(4,240px);
  grid-template-areas:
    "p1 p1 p2"
    "p3 p4 p2"
    "p5 p6 p6"
    "p7 p7 p8";
  gap:12px;
}
.bento-card:nth-child(1){grid-area:p1;}
.bento-card:nth-child(2){grid-area:p2;}
.bento-card:nth-child(3){grid-area:p3;}
.bento-card:nth-child(4){grid-area:p4;}
.bento-card:nth-child(5){grid-area:p5;}
.bento-card:nth-child(6){grid-area:p6;}
.bento-card:nth-child(7){grid-area:p7;}
.bento-card:nth-child(8){grid-area:p8;}

.bento-card {
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  cursor:pointer;
  border:1px solid var(--line);
  transition:border-color 0.25s ease;
}
.bento-card:hover { border-color:rgba(167,139,250,0.45); }
html:not(.dark) .bento-card:hover { border-color:rgba(115,194,251,0.7); }

.bento-bg {
  position:absolute;
  inset:0;
  background:var(--bento-grad,#0d0d0d);
  transition:transform 0.5s ease;
}
.bento-bg img,
.bento-bg video {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 0.5s ease;
}
.bento-card:hover .bento-bg,
.bento-card:hover .bento-bg img,
.bento-card:hover .bento-bg video { transform:scale(1.04); }

.bento-face {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:16px 18px;
  background:
    linear-gradient(to bottom,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 35%),
    linear-gradient(to top,rgba(0,0,0,0.80) 0%,rgba(0,0,0,0) 55%);
  z-index:2;
  transition:opacity 0.25s ease;
}
.bento-card:hover .bento-face { opacity:0; pointer-events:none; }

.bento-top { display:flex; align-items:flex-start; justify-content:space-between; }
.bento-glyph { font-size:1.6rem; line-height:1; }

.bento-badge {
  padding:2px 8px;
  border-radius:1px;
  font-family:var(--mono);
  font-size:0.56rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(4px);
}
.bento-badge.badge-perso { background:rgba(167,139,250,0.15); color:#c4b5fd; }
html:not(.dark) .bento-badge.badge-perso { background:rgba(115,194,251,0.22); color:#1560BD; }
.bento-badge.badge-stage { background:rgba(59,130,246,0.18); color:#93c5fd; }
.bento-badge.badge-acad  { background:rgba(251,146,60,0.18); color:#fed7aa; }

.bento-bottom { display:flex; flex-direction:column; gap:7px; }
.bento-title {
  font-family:var(--mono);
  font-size:0.95rem;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.02em;
  line-height:1.2;
  text-shadow:0 2px 12px rgba(0,0,0,0.6);
}
.bento-wide .bento-title { font-size:1.2rem; }
.bento-chips { display:flex; flex-wrap:wrap; gap:4px; }
.bento-chip {
  padding:2px 7px;
  border-radius:1px;
  font-family:var(--mono);
  font-size:0.58rem;
  font-weight:600;
  background:rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.78);
  border:1px solid rgba(255,255,255,0.08);
}

.bento-hover {
  position:absolute;
  inset:0;
  background:rgba(5,5,5,0.94);
  backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:20px 22px;
  z-index:3;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.22s ease,transform 0.22s ease;
  pointer-events:none;
}
.bento-card:hover .bento-hover { opacity:1; transform:translateY(0); pointer-events:auto; }
.bento-hover-title {
  font-family:var(--mono);
  font-size:0.9rem;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.02em;
  margin-bottom:9px;
}
.bento-desc {
  font-size:0.8rem;
  color:rgba(255,255,255,0.65);
  line-height:1.65;
  margin-bottom:16px;
  flex:1;
}
.bento-links { display:flex; gap:8px; flex-wrap:wrap; }
.bento-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 13px;
  border-radius:var(--r);
  font-family:var(--mono);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  transition:background 0.2s ease,border-color 0.2s ease,color 0.2s ease;
}
.bento-link:hover { background:var(--accent); border-color:var(--accent); color:#000; }

/* Bento responsive */
@media(max-width:768px){
  .bento-grid{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(5,200px);
    grid-template-areas:"p1 p1" "p2 p3" "p4 p4" "p5 p6" "p7 p8";
  }
}
@media(max-width:480px){
  .bento-grid{ grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:none; }
  .bento-card{ grid-area:unset!important; min-height:180px; }
  .bento-wide .bento-title { font-size:1rem; }
}

/* ── Contact ── */
#contact { position:relative; overflow:hidden; }
#contact::before { display:none; }
#contact .section-inner { position:relative; z-index:1; }

.contact-center {
  text-align:center;
  max-width:620px;
  margin:0 auto;
}
.contact-big {
  font-size:clamp(2.6rem,6vw,4.5rem);
  font-weight:900;
  letter-spacing:-0.05em;
  color:var(--text);
  margin-bottom:24px;
  line-height:1.05;
}
.contact-sub {
  font-size:1.08rem;
  color:var(--text-2);
  line-height:1.9;
  margin-bottom:56px;
}
.contact-links {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:32px;
}
.contact-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  border-radius:var(--r);
  font-family:var(--mono);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  transition:all var(--t);
}
.contact-link:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ── Interactive Terminal (KEPT INTACT) ── */
.terminal-section { padding-top:96px; padding-bottom:96px; }
.interactive-terminal {
  background:#0d1117;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
  max-width:700px;
  margin:0 auto;
}
.interactive-terminal .terminal-header {
  padding:12px 18px;
  background:#161b22;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.terminal-body-interactive {
  padding:18px 22px;
  min-height:180px;
  max-height:260px;
  overflow-y:auto;
  font-family:var(--mono);
  font-size:0.83rem;
  color:#e6edf3;
  line-height:1.85;
  scrollbar-width:thin;
  scrollbar-color:#30363d transparent;
}
.terminal-body-interactive::-webkit-scrollbar { width:4px; }
.terminal-body-interactive::-webkit-scrollbar-thumb { background:#30363d; border-radius:4px; }
.terminal-input-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 22px 16px;
  background:#0d1117;
  border-top:1px solid rgba(255,255,255,0.04);
}
.terminal-ps { color:#7ee787; font-family:var(--mono); font-size:0.83rem; font-weight:600; }
#terminal-input {
  background:transparent;
  border:none;
  outline:none;
  color:#e6edf3;
  font-family:var(--mono);
  font-size:0.83rem;
  flex:1;
  caret-color:#7ee787;
}

/* ── Footer ── */
footer {
  padding:36px 24px;
  text-align:center;
  border-top:1px solid var(--line);
  background:var(--bg);
}
footer p {
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--text-3);
  letter-spacing:0.06em;
}

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

/* ── Responsive ── */
@media(max-width:900px){
  .about-grid { grid-template-columns:1fr; }
}
@media(max-width:768px){
  section { padding:72px 20px; }
  .nav-links {
    display:none;
    position:absolute;
    top:60px; left:0; right:0;
    background:var(--nav-bg);
    backdrop-filter:blur(18px);
    flex-direction:column;
    gap:0;
    border-bottom:1px solid var(--nav-border);
    padding:10px 0;
    z-index:999;
  }
  .nav-links.active { display:flex; }
  .nav-links li a { display:block; padding:10px 24px; font-size:0.8rem; }
  .hamburger-btn { display:flex; }
  .hero-stats { gap:20px; flex-wrap:wrap; }
  .competence-grid { grid-template-columns:1fr; }
  .skill-row { grid-template-columns:26px 1fr 80px 40px; }
  .contact-links { gap:8px; }
}
@media(max-width:520px){
  .hero-stats { display:none; }
  .hero-scroll { display:none; }
  .easter-hint { display:none; }
  .sr-bar { display:none; }
  .skill-row { grid-template-columns:26px 1fr 40px; }
}

/* ── Custom Cursor ── */
@media(pointer:fine){
  * { cursor:none!important; }
  .cursor-dot {
    position:fixed;
    width:6px; height:6px;
    background:var(--accent);
    border-radius:50%;
    pointer-events:none;
    z-index:99999;
    transform:translate(-50%,-50%);
    will-change:left,top;
  }
  .cursor-ring {
    position:fixed;
    width:30px; height:30px;
    border:1.5px solid rgba(167,139,250,0.40);
    border-radius:50%;
    pointer-events:none;
    z-index:99998;
    transform:translate(-50%,-50%);
    transition:width 0.2s ease,height 0.2s ease,border-color 0.2s ease,opacity 0.2s ease;
    will-change:left,top;
  }
  html:not(.dark) .cursor-ring { border-color:rgba(21,96,189,0.30); }
  .cursor-ring.is-hovering { width:46px; height:46px; border-color:rgba(167,139,250,0.20); }
  html:not(.dark) .cursor-ring.is-hovering { border-color:rgba(115,194,251,0.55); }
  .cursor-ring.is-clicking { width:16px; height:16px; border-color:var(--accent); background:rgba(167,139,250,0.10); }
  html:not(.dark) .cursor-ring.is-clicking { background:rgba(21,96,189,0.08); }
  .cursor-ring.is-hovering,
  .cursor-ring.is-clicking { transform:translate(-50%,-50%)!important; }
}

/* ── Section background numbers ── */
.section-bg-num {
  position:absolute;
  top:-0.1em; right:-0.02em;
  font-family:var(--mono);
  font-size:clamp(5rem,18vw,14rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-0.08em;
  color:transparent;
  -webkit-text-stroke:1px var(--line);
  user-select:none;
  pointer-events:none;
  z-index:0;
  opacity:0;
  transform:translateX(28px);
  transition:opacity 1s ease,transform 1s ease;
}
.section-bg-num.visible { opacity:1; transform:translateX(0); }
html.dark .section-bg-num { -webkit-text-stroke:1px rgba(167,139,250,0.10); }

/* ── Nav sliding indicator ── */
.nav-indicator {
  position:absolute;
  bottom:-4px;
  height:1px;
  background:var(--accent);
  border-radius:1px;
  pointer-events:none;
  opacity:0;
  transition:left 0.35s cubic-bezier(0.4,0,0.2,1),width 0.35s cubic-bezier(0.4,0,0.2,1),opacity 0.2s ease;
}

/* ── Marquee ── */
.hero-marquee {
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 0;
  background:var(--bg-alt);
  user-select:none;
  position:relative;
}
.hero-marquee::before,
.hero-marquee::after {
  content:'';
  position:absolute;
  top:0; bottom:0;
  width:80px;
  z-index:2;
  pointer-events:none;
}
.hero-marquee::before { left:0; background:linear-gradient(to right,var(--bg-alt),transparent); }
.hero-marquee::after  { right:0; background:linear-gradient(to left,var(--bg-alt),transparent); }
.hero-marquee-track {
  display:flex;
  gap:0;
  white-space:nowrap;
  width:max-content;
  will-change:transform;
}
.hero-marquee-track.row-1 { animation:bigMarq 28s linear infinite; }
.hero-marquee-track.row-2 { animation:bigMarq 32s linear infinite reverse; }
@keyframes bigMarq {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
.marq-word {
  font-family:var(--mono);
  font-size:clamp(0.88rem,1.8vw,1.35rem);
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-3);
  padding:0 22px;
  transition:color 0.2s ease;
}
.marq-word:hover { color:var(--text-2); }
.marq-sep {
  color:var(--accent);
  padding:0 4px;
  opacity:0.55;
  vertical-align:middle;
}

/* ── Side nav dots ── */
.sidenav-dots {
  position:fixed;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:400;
}
@media(max-width:1260px){ .sidenav-dots { display:none; } }
.sidenav-dot {
  width:6px; height:6px;
  border-radius:1px;
  background:transparent;
  border:1.5px solid var(--text-3);
  cursor:pointer;
  transition:all 0.3s ease;
  position:relative;
  padding:0;
  outline:none;
  -webkit-appearance:none;
}
.sidenav-dot:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.sidenav-dot::after {
  content:attr(data-label);
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%) translateX(4px);
  font-family:var(--mono);
  font-size:0.6rem;
  font-weight:600;
  color:var(--text-2);
  white-space:nowrap;
  opacity:0;
  transition:opacity 0.2s ease,transform 0.2s ease;
  background:var(--bg-card);
  padding:2px 8px;
  border-radius:var(--r);
  border:1px solid var(--line);
  pointer-events:none;
}
.sidenav-dots:hover .sidenav-dot::after { opacity:1; transform:translateY(-50%) translateX(0); }
.sidenav-dot.active { background:var(--accent); border-color:var(--accent); width:8px; height:8px; }
.sidenav-dot:hover:not(.active) { border-color:var(--accent); transform:scale(1.5); }

/* ── Page spotlight ── */
.page-spotlight {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:radial-gradient(400px circle at var(--sx,-300%) var(--sy,-300%),rgba(167,139,250,0.05),transparent 70%);
  opacity:0;
  transition:opacity 0.7s ease;
}
html.dark .page-spotlight { opacity:1; }

/* ── Hero title cursor (after scramble) ── */
.hero-title-cursor {
  display:inline-block;
  width:3px; height:0.72em;
  background:var(--accent);
  margin-left:6px;
  vertical-align:middle;
  border-radius:1px;
  animation:titleCursorBlink 0.9s step-end infinite;
}
@keyframes titleCursorBlink {
  0%,100% { opacity:1; }
  50%      { opacity:0; }
}

/* ── Glitch flash ── */
@keyframes glitchFlash {
  0%   { filter:none; transform:none; }
  15%  { filter:brightness(1.5) hue-rotate(120deg); transform:translateX(2px); }
  40%  { filter:brightness(1.0); transform:translateX(-1px); }
  65%  { filter:brightness(1.3) hue-rotate(60deg); transform:translateX(1px); }
  100% { filter:none; transform:none; }
}
.glitch-flash { animation:glitchFlash 0.32s ease forwards; }

/* ── Film grain (dark only) ── */
html.dark body::before {
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.022;
  pointer-events:none;
  z-index:99997;
}

/* ── INTRO SCREEN (preserved) ── */
#intro-screen {
  position:fixed; inset:0; z-index:10000;
  background:#07071a;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  overflow:hidden; will-change:transform; cursor:pointer;
}
html:not(.dark) #intro-screen { background:#fafafa; }
.intro-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(167,139,250,0.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(167,139,250,0.035) 1px,transparent 1px);
  background-size:72px 72px;
  pointer-events:none;
}
html:not(.dark) .intro-grid {
  background-image:
    linear-gradient(rgba(124,58,237,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,0.04) 1px,transparent 1px);
}
.intro-glow { position:absolute; border-radius:50%; pointer-events:none; filter:blur(90px); }
.intro-glow-l { width:600px;height:600px; background:radial-gradient(circle,#a78bfa,transparent 70%); top:-180px;left:-160px; opacity:0.07; }
.intro-glow-r { width:480px;height:480px; background:radial-gradient(circle,#22d3ee,transparent 70%); bottom:-80px;right:-100px; opacity:0.06; }
.intro-glow-c { width:360px;height:360px; background:radial-gradient(circle,#f0abfc,transparent 70%); top:30%;left:50%; transform:translateX(-50%); opacity:0.04; }
.intro-text {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-64%);
  text-align:center; z-index:5;
  pointer-events:none; width:100%; padding:0 24px;
}
.intro-eyebrow {
  font-family:var(--mono);
  font-size:0.68rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:#a78bfa; margin-bottom:14px; opacity:0;
}
.intro-name {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(3.8rem,13vw,9.5rem);
  font-weight:900; letter-spacing:-0.055em;
  line-height:0.88; margin-bottom:18px;
  background:linear-gradient(135deg,#f0abfc 0%,#a78bfa 30%,#22d3ee 65%,#34d399 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  opacity:0;
}
html:not(.dark) .intro-name {
  background:linear-gradient(135deg,#73C2FB 0%,#3d8fd4 45%,#1560BD 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.intro-role {
  font-family:var(--mono);
  font-size:clamp(0.6rem,1.3vw,0.82rem);
  font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(255,255,255,0.4); opacity:0;
}
.intro-chars {
  display:flex; align-items:flex-end;
  justify-content:center; position:relative;
  width:100%; max-width:820px; z-index:4; padding:0 16px;
}
.intro-char {
  object-fit:contain; object-position:bottom center;
  opacity:0; will-change:transform,opacity;
  pointer-events:none; flex-shrink:0;
  filter:drop-shadow(0 -6px 32px rgba(167,139,250,0.28));
}
.intro-c2 { height:clamp(150px,36vh,360px); margin-right:-22px; z-index:2; position:relative; bottom:-4px; }
.intro-c1 { height:clamp(190px,44vh,440px); z-index:3; }
.intro-c3 { height:clamp(160px,38vh,380px); margin-left:-18px; z-index:2; position:relative; bottom:-2px; }
.intro-hint {
  position:absolute; bottom:28px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:8px; opacity:0; z-index:6; pointer-events:none;
}
.intro-hint-label {
  font-family:var(--mono);
  font-size:0.62rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.3);
}
.intro-hint-line {
  width:1px; height:28px;
  background:linear-gradient(to bottom,#a78bfa,transparent);
  border-radius:1px;
  animation:introLinePulse 1.9s ease-in-out infinite;
}
@keyframes introLinePulse {
  0%,100% { opacity:1; transform:scaleY(1); }
  50%      { opacity:0.3; transform:scaleY(0.5); }
}
@media(max-width:520px){
  .intro-chars { max-width:100%; padding:0; }
  .intro-c2 { margin-right:-12px; }
  .intro-c3 { margin-left:-12px; }
  .intro-text { transform:translate(-50%,-68%); }
}

/* ── Accessibility ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after {
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
  .hero-eyebrow,.hero-title,.hero-subtitle,.hero-desc,
  .hero-tags,.hero-cta,.hero-scroll,.hero-stats {
    opacity:1; transform:none; animation:none;
  }
  .reveal { opacity:1; transform:none; transition:none; }
  .cursor-dot,.cursor-ring { display:none; }
  #intro-screen { display:none; }
  .skills-ticker-track { animation:none!important; }
  .sidenav-dots { display:none; }
}