/* ─────────────────────────────────────────
   RESET & VARIABLES
───────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:       #060d1f;
  --bg-2:     #0b1628;
  --bg-3:     #0f1e36;
  --card:     rgba(11, 22, 40, 0.85);
  --cyan:     #00d4ff;
  --cyan-10:  rgba(0, 212, 255, 0.10);
  --cyan-20:  rgba(0, 212, 255, 0.20);
  --purple:   #7c3aed;
  --purple-10:rgba(124, 58, 237, 0.10);
  --green:    #00ff88;
  --red:      #ff4757;
  --white:    #e2e8f0;
  --gray:     #94a3b8;
  --dim:      #475569;
  --border:   rgba(0, 212, 255, 0.12);
  --mono:     'JetBrains Mono', monospace;
  --sans:     'Inter', sans-serif;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--cyan) var(--bg);
}
html::-webkit-scrollbar { width: 5px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 99px; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--sans);
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
}

/* en dispositivos táctiles no hay cursor físico: restaurar el nativo */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  #cur-dot, #cur-ring { display: none; }
}

::selection { background: rgba(0,212,255,0.22); }

/* Skip navigation — visible solo al recibir foco con teclado */
.skip-nav {
  position: absolute; top: -100%; left: 1rem;
  background: var(--bg-3); color: var(--cyan);
  padding: .6rem 1.2rem; border-radius: 0 0 6px 6px;
  font-family: var(--mono); font-size: .85rem;
  text-decoration: none; z-index: 99999;
  transition: top .2s;
}
.skip-nav:focus { top: 0; }


/* ─────────────────────────────────────────
   CUSTOM CURSOR
───────────────────────────────────────── */
#cur-dot {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--cyan);
  border-radius: 50%;
  pointer-events: none; z-index: 10000;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--cyan);
  transition: transform .1s;
}
#cur-ring {
  position: fixed; top: 0; left: 0;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(0,212,255,.5);
  border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .18s, height .18s, border-color .18s, background .18s;
}
#cur-ring.hov {
  width: 56px; height: 56px;
  border-color: var(--cyan);
  background: rgba(0,212,255,.04);
}


/* ─────────────────────────────────────────
   UTILS
───────────────────────────────────────── */
.container { max-width: 1080px; margin: 0 auto; padding: 0 2rem; }
.section    { padding: 110px 0; }

.sec-label {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--cyan);
  letter-spacing: .18em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .65rem;
}
.sec-label::before { content: '//'; opacity: .45; }

.sec-title {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 800; line-height: 1.15;
  color: var(--white); margin-bottom: 1.25rem;
}
.accent { color: var(--cyan); }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .78rem 1.8rem;
  border-radius: 5px;
  font-family: var(--mono); font-size: .88rem; font-weight: 500;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: all .28s var(--ease);
}
.btn-primary {
  background: var(--cyan); color: var(--bg);
  border-color: var(--cyan);
  box-shadow: 0 0 22px rgba(0,212,255,.28);
}
.btn-primary:hover {
  background: transparent; color: var(--cyan);
  box-shadow: 0 0 32px rgba(0,212,255,.45);
}
.btn-outline {
  background: transparent; color: var(--cyan);
  border-color: var(--cyan);
}
.btn-outline:hover {
  background: var(--cyan-10);
  box-shadow: 0 0 22px rgba(0,212,255,.22);
}
.btn-sm { padding: .52rem 1.15rem; font-size: .8rem; }

/* Fade-in scroll reveals */
.reveal        { opacity: 0; transform: translateY(28px);  transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal-left   { opacity: 0; transform: translateX(-28px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal-right  { opacity: 0; transform: translateX(28px);  transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.on, .reveal-left.on, .reveal-right.on { opacity: 1; transform: none; }


/* ─────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────── */
#nav {
  position: fixed; inset: 0 0 auto;
  z-index: 900; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
  background: rgba(6,13,31,.88);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  transition: transform .3s var(--ease);
}
#nav.hide { transform: translateY(-100%); }

.nav-logo {
  font-family: var(--mono); font-size: 1.15rem; font-weight: 700;
  color: var(--cyan); text-decoration: none; letter-spacing: .04em;
}
.nav-logo span { color: var(--white); }

.nav-links {
  display: flex; align-items: center; gap: 2.2rem;
  list-style: none;
}
.nav-links a {
  font-family: var(--mono); font-size: .82rem;
  color: var(--gray); text-decoration: none;
  position: relative; transition: color .2s;
}
.nav-links a::before {
  content: attr(data-n);
  color: var(--cyan); font-size: .68rem; margin-right: .2rem;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--cyan); transition: width .22s;
}
.nav-links a:hover, .nav-links a.active { color: var(--cyan); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { color: var(--cyan) !important; border: 1px solid var(--cyan); padding: .35rem .95rem; border-radius: 4px; }
.nav-cta:hover { background: var(--cyan-10) !important; }

/* Hamburger */
#ham { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: .25rem; }
#ham span { display: block; width: 24px; height: 2px; background: var(--cyan); transition: all .3s; }

@media (max-width: 760px) {
  #ham { display: flex; }
  .nav-links {
    position: fixed; top: 68px; right: -100%;
    width: 68%; max-width: 280px; height: calc(100vh - 68px);
    flex-direction: column; justify-content: center;
    background: rgba(6,13,31,.97); backdrop-filter: blur(20px);
    border-left: 1px solid var(--border); padding: 2rem; gap: 2.5rem;
    transition: right .3s var(--ease);
  }
  .nav-links.open   { right: 0; }
  .nav-links a      { font-size: 1rem; }
}


/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
#hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
#matrix {
  position: absolute; inset: 0;
  width: 100%; height: 100%; opacity: .42;
}

#hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 20% 50%, transparent 40%, var(--bg) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 1;
  padding-top: 68px;
}

.hero-hello {
  font-family: var(--mono); font-size: clamp(.85rem, 1.8vw, 1rem);
  color: var(--cyan); margin-bottom: .9rem;
  display: flex; align-items: center; gap: .6rem;
}
.hero-hello::before { content: '>'; animation: blink 1.1s step-end infinite; }

@keyframes blink { 50% { opacity: 0; } }

.hero-name {
  font-size: clamp(3rem, 8vw, 5.8rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
  margin-bottom: .4rem;
}
.hero-name .line1 { display: block; color: var(--white); }
.hero-name .line2 {
  display: block;
  color: var(--cyan);
  text-shadow: 0 0 38px rgba(0,212,255,.45), 0 0 80px rgba(0,212,255,.15);
}

/* Glitch hover */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-txt); position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; opacity: 0;
  pointer-events: none;
  color: var(--cyan);
}
.glitch:hover::before {
  opacity: 1; left: 3px; color: var(--red);
  animation: ga 0.25s steps(2) infinite;
  clip-path: polygon(0 15%, 100% 15%, 100% 40%, 0 40%);
}
.glitch:hover::after {
  opacity: 1; left: -3px; color: var(--cyan);
  animation: gb 0.25s steps(2) infinite;
  clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
}
@keyframes ga { 0%{transform:translateY(-2px)} 100%{transform:translateY(2px)} }
@keyframes gb { 0%{transform:translateY(2px)}  100%{transform:translateY(-2px)} }

.hero-role {
  font-family: var(--mono); font-size: clamp(1.1rem, 2.5vw, 1.55rem);
  color: var(--gray); min-height: 2.4rem;
  display: flex; align-items: center; gap: .35rem; margin-bottom: 1.3rem;
}
.role-prefix { color: var(--cyan); }
#typed-out   { color: var(--white); }
.type-cur    { display:inline-block; width:3px; height:1.1em; background:var(--cyan); vertical-align:middle; margin-left:2px; animation: blink .9s step-end infinite; }

.hero-desc {
  font-size: clamp(.93rem, 1.8vw, 1.08rem);
  color: var(--gray); max-width: 500px; margin-bottom: 2.2rem; line-height: 1.85;
}
.hero-desc strong { color: var(--white); font-weight: 600; }

.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-scroll {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  opacity: .55; animation: floatY 2.2s ease-in-out infinite;
}
.hero-scroll span { font-family:var(--mono); font-size:.68rem; color:var(--gray); letter-spacing:.12em; }
.scroll-line { width:1px; height:46px; background:linear-gradient(to bottom, var(--cyan), transparent); }
@keyframes floatY { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }


/* ─────────────────────────────────────────
   TECH TICKER
───────────────────────────────────────── */
.ticker-wrap {
  background: var(--bg-2); overflow: hidden;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: .85rem 0;
}
.ticker-track {
  display: flex; gap: 2.5rem; width: max-content;
  animation: scroll-left 25s linear infinite;
}
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }

.tick-item {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .82rem; color: var(--gray);
  flex-shrink: 0; white-space: nowrap;
}
.tick-item i  { color: var(--cyan); }
.tick-sep     { color: var(--dim); font-size: .6rem; }

@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ─────────────────────────────────────────
   ABOUT
───────────────────────────────────────── */
#about { background: var(--bg); }

.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: start;
}
@media (max-width: 760px) { .about-grid { grid-template-columns:1fr; gap:2.5rem; } }

.about-text p {
  color: var(--gray); margin-bottom: 1.1rem; font-size: 1.02rem; line-height: 1.85;
}
.about-text .hl   { color: var(--white); font-weight: 600; }
.about-text .code {
  font-family: var(--mono); font-size: .9em; color: var(--cyan);
  background: var(--cyan-10); padding: .08em .38em; border-radius: 3px;
}

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 2rem; }
.stat-box {
  padding: 1rem 1.1rem;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 8px;
  position: relative; overflow: hidden;
  transition: border-color .25s;
}
.stat-box::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 3px; height: 100%; background: var(--cyan);
}
.stat-box:hover { border-color: rgba(0,212,255,.35); }
.stat-num   { font-family: var(--mono); font-size: 2rem; font-weight: 700; color: var(--cyan); line-height: 1; }
.stat-label { font-size: .78rem; color: var(--gray); margin-top: .2rem; }

.profile-pic {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 0 4px rgba(0,212,255,.12), 0 0 22px rgba(0,212,255,.18);
  display: block; margin-bottom: 1.4rem;
}

/* Terminal card */
.terminal {
  background: #0d1117;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(0,212,255,.04);
}
.term-bar {
  background: #161b22; padding: .7rem 1rem;
  display: flex; align-items: center; gap: .45rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tdot                { width: 12px; height: 12px; border-radius: 50%; }
.tdot.r              { background: #ff5f57; }
.tdot.y              { background: #febc2e; }
.tdot.g              { background: #28c840; }
.term-title          { font-family: var(--mono); font-size: .72rem; color: var(--gray); margin: 0 auto; }
.term-body           { padding: 1.4rem 1.5rem; font-family: var(--mono); font-size: .83rem; line-height: 1.75; }
.tl                  { display: flex; gap: .45rem; }
.tl-p                { color: var(--cyan); flex-shrink: 0; }
.tl-c                { color: var(--white); }
.tl-d                { color: var(--purple); }
.to                  { padding-left: 1.15rem; color: var(--gray); }
.to .k               { color: var(--cyan); }
.to .s               { color: #f9826c; }
.to .v               { color: var(--green); }
.t-gap               { height: .4rem; }


/* ─────────────────────────────────────────
   SKILLS
───────────────────────────────────────── */
#skills {
  background: var(--bg-2); position: relative; overflow: hidden;
}
#skills::before {
  content: ''; position: absolute; top: -120px; right: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(124,58,237,.07), transparent 70%);
  pointer-events: none;
}

.skills-intro { text-align: center; margin-bottom: 3rem; }
.skills-intro .sec-label { justify-content: center; }

.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }

.skill-cat {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.4rem; transition: all .28s var(--ease); position: relative; overflow: hidden;
}
.skill-cat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.skill-cat:hover { border-color: rgba(0,212,255,.3); transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0,0,0,.3); }
.skill-cat:hover::before { transform: scaleX(1); }

.skill-cat-name {
  font-family: var(--mono); font-size: .8rem; color: var(--cyan);
  letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: 1.1rem;
}

.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag {
  font-family: var(--mono); font-size: .74rem;
  padding: .28rem .65rem; border-radius: 4px;
  border: 1px solid rgba(0,212,255,.15); background: var(--cyan-10);
  color: var(--gray); transition: all .2s;
}
.tag:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-1px); }
.tag.hi    { border-color: rgba(0,212,255,.4); color: var(--cyan); }


/* ─────────────────────────────────────────
   PROJECTS
───────────────────────────────────────── */
#projects { background: var(--bg); position: relative; overflow: hidden; }
#projects::after {
  content: ''; position: absolute; bottom: -100px; left: -100px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(0,212,255,.04), transparent 70%);
  pointer-events: none;
}

.proj-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 2.8rem; flex-wrap: wrap; gap: 1rem;
}
.proj-more {
  font-family: var(--mono); font-size: .83rem; color: var(--cyan);
  text-decoration: none; display: flex; align-items: center; gap: .4rem;
  transition: gap .2s;
}
.proj-more:hover { gap: .7rem; }

.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }

.proj-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: all .28s var(--ease); position: relative;
}
.proj-card:hover {
  border-color: rgba(0,212,255,.3); transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(0,0,0,.4), 0 0 28px rgba(0,212,255,.06);
}

/* Featured: full-width horizontal card */
.proj-card.feat {
  grid-column: 1 / -1; flex-direction: row;
}
.feat-img {
  width: 40%; min-height: 200px; flex-shrink: 0;
  background: linear-gradient(135deg, #0b1628, #152240);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; color: rgba(0,212,255,.18);
  border-right: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.feat-img::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 20px,
    rgba(0,212,255,.015) 20px, rgba(0,212,255,.015) 21px
  );
}
@media (max-width: 680px) {
  .proj-card.feat { flex-direction: column; }
  .feat-img       { width: 100%; min-height: 120px; border-right: none; border-bottom: 1px solid var(--border); }
}

.proj-top  { padding: 1.4rem 1.4rem 0; display: flex; justify-content: space-between; align-items: flex-start; }
.proj-ico  { font-size: 1.9rem; color: var(--cyan); }
.proj-lnks { display: flex; gap: .7rem; }
.proj-lnks a { color: var(--gray); font-size: 1.1rem; text-decoration: none; transition: color .18s; }
.proj-lnks a:hover { color: var(--cyan); }

.proj-body { padding: .9rem 1.4rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.proj-n    { font-family: var(--mono); font-size: .68rem; color: var(--dim); margin-bottom: .4rem; }
.proj-title{ font-size: 1.15rem; font-weight: 600; color: var(--white); margin-bottom: .65rem; transition: color .2s; }
.proj-card:hover .proj-title { color: var(--cyan); }
.proj-desc { font-size: .9rem; color: var(--gray); line-height: 1.75; flex: 1; margin-bottom: 1.1rem; }

.stack     { display: flex; flex-wrap: wrap; gap: .38rem; }
.stag      {
  font-family: var(--mono); font-size: .7rem; padding: .2rem .52rem; border-radius: 3px;
  background: var(--purple-10); border: 1px solid rgba(124,58,237,.25); color: #b197fc;
}

.feat-actions { display: flex; gap: .75rem; margin-top: 1.2rem; }


/* ─────────────────────────────────────────
   CONTACT
───────────────────────────────────────── */
#contact { background: var(--bg-2); }

.contact-wrap { max-width: 680px; margin: 0 auto; text-align: center; }
.contact-wrap .sec-label { justify-content: center; }

.contact-sub {
  font-size: 1.02rem; color: var(--gray); margin-bottom: 2.8rem; line-height: 1.85;
}

.cform { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; text-align: left; }
@media (max-width: 560px) { .cform { grid-template-columns: 1fr; } }

.fg       { display: flex; flex-direction: column; gap: .35rem; }
.fg.full  { grid-column: 1 / -1; }
.fg.center{ grid-column: 1 / -1; align-items: center; }
.fg label { font-family: var(--mono); font-size: .72rem; color: var(--cyan); letter-spacing: .08em; }
.fg input, .fg textarea {
  background: rgba(11,22,40,.85); border: 1px solid var(--border); border-radius: 6px;
  padding: .78rem 1rem; color: var(--white); font-family: var(--sans); font-size: .95rem;
  outline: none; transition: border-color .2s, box-shadow .2s; resize: none;
}
.fg input:focus, .fg textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}
.fg textarea { height: 128px; }

.btn-send {
  font-family: var(--mono); font-size: .88rem;
  padding: .82rem 2.4rem; border-radius: 5px;
  background: transparent; color: var(--cyan); border: 1px solid var(--cyan); cursor: pointer;
  transition: all .28s; position: relative; overflow: hidden;
}
.btn-send::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: var(--cyan-10); transition: left .28s var(--ease);
}
.btn-send:hover::before { left: 0; }
.btn-send:hover { box-shadow: 0 0 22px rgba(0,212,255,.28); }

.socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.8rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.soc-link { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-decoration: none; color: var(--gray); transition: all .22s; }
.soc-link i                { font-size: 1.4rem; transition: filter .22s; }
.soc-link span             { font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; }
.soc-link:hover            { color: var(--cyan); transform: translateY(-3px); }
.soc-link:hover i          { filter: drop-shadow(0 0 8px var(--cyan)); }


/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer {
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 1.4rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.foot-l    { font-family: var(--mono); font-size: .78rem; color: var(--dim); }
.foot-l span { color: var(--cyan); }
.foot-copy  { font-family: var(--mono); font-size: .73rem; color: var(--dim); text-align: center; }
.foot-r    { font-family: var(--mono); font-size: .78rem; color: var(--dim); display: flex; align-items: center; gap: .35rem; }
.heart     { color: var(--red); animation: hbeat 1.6s ease-in-out infinite; }
@keyframes hbeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }


/* ─────────────────────────────────────────
   EASTER EGG
───────────────────────────────────────── */
.sudo-toast {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9998;
  background: var(--bg-3); border: 1px solid var(--cyan); border-radius: 8px;
  padding: 1rem 1.4rem; max-width: 290px;
  font-family: var(--mono); font-size: .82rem; color: var(--gray);
  box-shadow: 0 0 28px rgba(0,212,255,.18);
  animation: toastIn .35s var(--ease), toastOut .35s var(--ease) 4.6s forwards;
}
.sudo-toast .t-cmd { color: var(--red); margin-bottom: .35rem; }
@keyframes toastIn  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1} to{opacity:0;pointer-events:none} }


/* ─────────────────────────────────────────
   RESPONSIVE EXTRAS
───────────────────────────────────────── */
@media (max-width: 480px) {
  .section   { padding: 72px 0; }
  .hero-btns { flex-direction: column; }
  .btn       { justify-content: center; }
}