/* ═══════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════ */
:root {
  --bg:      #07080f;
  --bg2:     #0b0d1a;
  --bg3:     #0e1020;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);

  --indigo:  #5b73f8;
  --violet:  #7c3aed;
  --teal:    #00cfb0;
  --amber:   #fbbf24;
  --white:   #eff0ff;
  --muted:   #575876;
  --muted2:  #8a8ba6;

  --grad: linear-gradient(135deg, #5b73f8, #7c3aed);

  --fdisp: 'Orbitron', sans-serif;
  --fbody: 'DM Sans', sans-serif;
  --fmono: 'JetBrains Mono', monospace;

  --pad: clamp(4rem,8vw,7rem) clamp(1.5rem,6vw,6rem);
}

/* ═══════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--fbody);
  overflow-x: hidden;
  line-height: 1.65;
}
img { display:block; max-width:100%; }
a   { color:inherit; text-decoration:none; }
button { font-family:inherit; }

/* ═══════════════════════════════════════════════
   BACKGROUND
═══════════════════════════════════════════════ */
.bg-layer { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-layer .o { position:absolute; border-radius:50%; filter:blur(110px); opacity:.5; }
.bg-layer .o1 { width:65vw; height:55vh; top:-10%; left:-10%; background:radial-gradient(circle,rgba(91,115,248,.32),transparent 70%); animation:da 20s ease-in-out infinite alternate; }
.bg-layer .o2 { width:55vw; height:50vh; bottom:-20%; right:-5%; background:radial-gradient(circle,rgba(0,207,176,.22),transparent 70%); animation:db 25s ease-in-out infinite alternate; }
.bg-layer .o3 { width:45vw; height:45vh; top:40%; left:45%; background:radial-gradient(circle,rgba(124,58,237,.18),transparent 70%); animation:dc 30s ease-in-out infinite alternate; }
.bg-layer .o4 { width:30vw; height:35vh; top:65%; left:8%; background:radial-gradient(circle,rgba(91,115,248,.14),transparent 70%); animation:da 22s 5s ease-in-out infinite alternate; }
.bg-layer .o5 { width:20vw; height:22vh; top:8%; right:12%; background:radial-gradient(circle,rgba(0,207,176,.13),transparent 70%); animation:db 18s 9s ease-in-out infinite alternate; }
@keyframes da { from{transform:translate(0,0)} to{transform:translate(7vw,5vh)} }
@keyframes db { from{transform:translate(0,0)} to{transform:translate(-5vw,7vh)} }
@keyframes dc { from{transform:translate(0,0) scale(1)} to{transform:translate(3vw,-4vh) scale(1.08)} }

.bg-grid {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px;
}
.bg-noise {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ═══════════════════════════════════════════════
   SPLASH
═══════════════════════════════════════════════ */
#splash {
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.8rem;
  transition:opacity .9s, visibility .9s;
}
#splash.out { opacity:0; visibility:hidden; pointer-events:none; }
.s-name {
  font-family:var(--fdisp); font-size:clamp(1.8rem,6.5vw,4.5rem);
  font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.65);
  animation:sRev .9s cubic-bezier(.16,1,.3,1) .2s both;
}
.s-name b { color:var(--indigo); -webkit-text-stroke:0; }
@keyframes sRev { from{opacity:0;transform:translateY(28px) scaleX(1.04)} to{opacity:1;transform:translateY(0) scaleX(1)} }
.s-sub {
  font-family:var(--fmono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); animation:fUp .5s .6s both;
}
.s-track { width:clamp(200px,28vw,320px); height:1.5px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; animation:fUp .4s .6s both; }
.s-fill  { height:100%; background:linear-gradient(90deg,var(--indigo),var(--teal)); width:0; animation:sLoad 1.8s .6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sLoad { to { width:100%; } }
@keyframes fUp   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ═══════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════ */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem clamp(1.5rem,5vw,5rem);
  background:rgba(7,8,15,.9); backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border);
  opacity:0; transform:translateY(-12px); transition:opacity .6s, transform .6s;
}
#nav.show { opacity:1; transform:translateY(0); }
.n-logo { font-family:var(--fdisp); font-size:.85rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--white); }
.n-logo b { color:var(--indigo); }
.n-links { display:flex; gap:2.2rem; list-style:none; }
.n-links a { font-family:var(--fmono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); transition:color .2s; position:relative; }
.n-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--indigo); transition:width .3s; }
.n-links a:hover { color:var(--white); }
.n-links a:hover::after, .n-links a.act::after { width:100%; }
.n-links a.act { color:var(--white); }
.n-ham { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:.3rem; }
.n-ham span { display:block; width:22px; height:1.5px; background:var(--white); border-radius:2px; transition:transform .3s, opacity .3s; }
.n-ham.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.n-ham.open span:nth-child(2) { opacity:0; }
.n-ham.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* nav right side: CV btn + hamburger grouped */
.n-actions { display:flex; align-items:center; gap:.8rem; }

/* CV download button — nav */
.cv-btn {
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--fmono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.52rem 1.1rem; border-radius:7px;
  background:var(--grad); color:#fff;
  box-shadow:0 0 18px rgba(91,115,248,.25);
  transition:box-shadow .2s, transform .2s;
  text-decoration:none; white-space:nowrap;
  border:none; cursor:pointer;
}
.cv-btn svg { width:13px; height:13px; flex-shrink:0; }
.cv-btn:hover { box-shadow:0 0 32px rgba(91,115,248,.5); transform:translateY(-2px); }

/* CV button — footer variant (slightly larger) */
.cv-btn-footer {
  font-size:.62rem; padding:.65rem 1.4rem;
  margin-bottom:1rem;
  box-shadow:0 0 22px rgba(91,115,248,.2);
}
.cv-btn-footer svg { width:14px; height:14px; }
.m-menu { display:none; position:fixed; inset:0; top:56px; z-index:49; background:rgba(7,8,15,.98); backdrop-filter:blur(22px); flex-direction:column; align-items:center; justify-content:center; gap:2.5rem; }
.m-menu.open { display:flex; }
.m-menu a { font-family:var(--fdisp); font-size:1.6rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); transition:color .2s; }
.m-menu a:hover { color:var(--white); }

/* ═══════════════════════════════════════════════
   LAYOUT COMMONS
═══════════════════════════════════════════════ */
#site    { position:relative; z-index:2; }
section  { position:relative; z-index:2; }
.si { padding:var(--pad); max-width:1300px; margin:0 auto; }
.eyebrow { display:flex; align-items:center; gap:.8rem; font-family:var(--fmono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--indigo); margin-bottom:1rem; }
.eyebrow::after { content:''; flex:1; max-width:56px; height:1px; background:var(--indigo); opacity:.4; }
.sec-title { font-family:var(--fdisp); font-size:clamp(1.6rem,3.8vw,3rem); font-weight:900; letter-spacing:.06em; text-transform:uppercase; line-height:1.05; margin-bottom:.8rem; }
.sec-desc  { font-size:clamp(.9rem,1.2vw,1rem); color:var(--muted2); max-width:520px; font-weight:300; margin-bottom:3rem; }
.divider   { border:none; border-top:1px solid var(--border); margin:0 clamp(1.5rem,6vw,6rem); }

/* reveal */
.r   { opacity:0; transform:translateY(18px); transition:opacity .65s, transform .65s; }
.r.on{ opacity:1; transform:translateY(0); }
.rx  { opacity:0; transform:translateX(26px); transition:opacity .75s, transform .75s; }
.rx.on { opacity:1; transform:translateX(0); }
.fade    { opacity:0; transform:translateY(24px); transition:opacity .7s, transform .7s; }
.fade.vis{ opacity:1; transform:translateY(0); }

@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }

/* buttons */
.btn { font-family:var(--fmono); font-size:.72rem; letter-spacing:.06em; padding:.82rem 1.8rem; border-radius:8px; border:none; cursor:pointer; transition:transform .2s, box-shadow .2s; display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.btn:hover { transform:translateY(-3px); }
.btn-solid { background:var(--grad); color:#fff; box-shadow:0 0 24px rgba(91,115,248,.2); }
.btn-solid:hover { box-shadow:0 0 44px rgba(91,115,248,.45); }
.btn-ghost { background:rgba(255,255,255,.04); color:var(--white); border:1px solid var(--border); }
.btn-ghost:hover { border-color:rgba(91,115,248,.5); color:var(--indigo); }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
#hero {
  min-height:100vh;
  display:grid; grid-template-columns:1fr minmax(260px,300px);
  align-items:start;           /* push content toward nav, not vertically centered */
  gap:4rem;
  padding-top:5.5rem;          /* nav height ~56px + small breathing room */
  padding-bottom:4rem;
  padding-left:clamp(1.5rem,6vw,6rem);
  padding-right:clamp(1.5rem,6vw,6rem);
  position:relative; z-index:2;
}

/* ── ambient particles: scattered between text col and photo col ── */
.hero-particles {
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  /* spans are placed in the centre gap region via % left values */
}
.hero-particles span {
  position:absolute;
  border-radius:50%;
  width:2px; height:2px;
  animation:pFloat var(--dur,14s) var(--delay,0s) ease-in-out infinite;
  opacity:0;
}
/* alternate indigo / teal */
.hero-particles span:nth-child(odd)  { background:var(--indigo); box-shadow:0 0 7px 1px rgba(91,115,248,.7); }
.hero-particles span:nth-child(even) { background:var(--teal);   box-shadow:0 0 7px 1px rgba(0,207,176,.7); }
/* size variants */
.hero-particles span:nth-child(3n) { width:3px; height:3px; }
.hero-particles span:nth-child(5n) { width:1.5px; height:1.5px; }
@keyframes pFloat {
  0%   { opacity:0;   transform:translate(0,0); }
  12%  { opacity:.75; }
  88%  { opacity:.4;  }
  100% { opacity:0;   transform:translate(var(--dx,8px), -70px); }
}

/* ── thin horizontal scan line that sweeps vertically ── */
.hero-scanline {
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.hero-scanline::after {
  content:'';
  position:absolute;
  /* spans the "gap" between the two columns ~55–65% of width */
  left:48%; right:30%;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(0,207,176,.25) 40%, rgba(91,115,248,.2) 70%, transparent 100%);
  animation:scanY 7s ease-in-out infinite;
}
@keyframes scanY {
  0%   { top:8%;  opacity:0; }
  8%   { opacity:.7; }
  92%  { opacity:.35; }
  100% { top:88%; opacity:0; }
}
.h-pill { display:inline-flex; align-items:center; gap:.5rem; background:rgba(0,207,176,.07); border:1px solid rgba(0,207,176,.22); border-radius:100px; padding:.36rem 1rem; font-family:var(--fmono); font-size:.62rem; letter-spacing:.08em; color:var(--teal); margin-bottom:1.2rem; animation:floatPill 4s ease-in-out infinite; }
@keyframes floatPill { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.dot { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); animation:blink 2.2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Orbitron name — three weights / styles */
.h-name { margin-bottom:1rem; margin-top:.6rem; }
.h-name .line1 { display:block; font-family:var(--fdisp); font-size:clamp(2.6rem,6.5vw,6rem); font-weight:900; line-height:.92; letter-spacing:.05em; text-transform:uppercase; color:var(--white); }
.h-name .line2 { display:block; font-family:var(--fdisp); font-size:clamp(2rem,5vw,4.6rem); font-weight:400; line-height:.96; letter-spacing:.1em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.32); }
.h-name .line3 { display:block; font-family:var(--fdisp); font-size:clamp(1.4rem,3.5vw,3.4rem); font-weight:900; line-height:1.08; letter-spacing:.12em; text-transform:uppercase; background:linear-gradient(100deg,var(--indigo) 0%,#a78bfa 55%,var(--teal) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:gradBreathe 7s ease-in-out infinite alternate; }
@keyframes gradBreathe { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(18deg)} }

.h-brief { font-size:clamp(1rem,1.3vw,1.08rem); line-height:1.78; color:#9496b8; max-width:500px; font-weight:300; margin-bottom:2.4rem; }
.h-brief strong { color:var(--white); font-weight:500; }

.h-socials { display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.social-btn { display:flex; align-items:center; gap:.55rem; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:8px; padding:.68rem 1.1rem; font-family:var(--fmono); font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted2); transition:color .2s, border-color .2s, background .2s, transform .2s; text-decoration:none; }
.social-btn svg { width:15px; height:15px; flex-shrink:0; opacity:.8; }
.social-btn:hover { color:var(--white); border-color:var(--indigo); background:rgba(91,115,248,.08); transform:translateY(-2px); }

.h-tags { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.tag { font-family:var(--fmono); font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; padding:.36rem .9rem; border-radius:5px; border:1px solid; }
.ti { color:var(--indigo); border-color:rgba(91,115,248,.35); background:rgba(91,115,248,.07); }
.tt { color:var(--teal);   border-color:rgba(0,207,176,.3);   background:rgba(0,207,176,.05); }
.tm { color:var(--muted);  border-color:var(--border); }

/* photo col */
.h-photo-col { display:flex; flex-direction:column; align-items:center; gap:1.2rem; padding-top:1.8rem; }
.photo-wrap { position:relative; width:100%; aspect-ratio:3/4; border-radius:20px; overflow:hidden; background:linear-gradient(145deg,rgba(91,115,248,.1),rgba(0,207,176,.06)); cursor:pointer; border:1px solid var(--border); }
.photo-wrap::before { content:''; position:absolute; inset:0; border-radius:20px; background:linear-gradient(180deg,transparent 55%,rgba(7,8,15,.75) 100%); z-index:1; }
.photo-glow { position:absolute; inset:-1px; border-radius:21px; background:conic-gradient(from 0deg,var(--indigo),var(--violet),var(--teal),var(--indigo)); z-index:-1; animation:spinB 7s linear infinite; opacity:.65; }
@keyframes spinB { to { rotate:360deg; } }
.photo-bg { position:absolute; inset:1px; border-radius:19px; background:var(--bg2); }
.photo-ph { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:.7rem; opacity:.3; }
.photo-ph svg { width:40px; }
.photo-ph p { font-family:var(--fmono); font-size:.6rem; letter-spacing:.1em; color:var(--muted2); text-align:center; }
#photo-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:20px; display:none; z-index:3; }
#photo-input { display:none; }
.h-info { display:flex; flex-direction:column; gap:.55rem; width:100%; }
.hi-chip { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:8px; padding:.6rem 1rem; font-size:.82rem; font-weight:500; }
.hi-chip small { display:block; font-family:var(--fmono); font-size:.55rem; letter-spacing:.09em; color:var(--muted); margin-bottom:.18rem; text-transform:uppercase; }
.hi-chip.ac { color:var(--teal); }

/* scroll hint */
.scroll-hint { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.4rem; font-family:var(--fmono); font-size:.55rem; letter-spacing:.15em; color:var(--muted); text-transform:uppercase; }
.mouse { width:20px; height:32px; border:1.5px solid rgba(255,255,255,.12); border-radius:10px; display:flex; justify-content:center; padding-top:5px; position:relative; }
.mouse::before { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(0,207,176,.2); animation:ringP 2.5s ease-in-out infinite; }
@keyframes ringP { 0%,100%{transform:scale(1);opacity:.4} 50%{transform:scale(1.3);opacity:0} }
.mouse-dot { width:3px; height:6px; background:var(--teal); border-radius:2px; animation:ms 2s ease-in-out infinite; }
@keyframes ms { 0%,100%{opacity:1;transform:translateY(0)} 50%{opacity:.2;transform:translateY(4px)} }

/* ═══════════════════════════════════════════════
   SKILLS — ARSENAL
   Sidebar accordion-style list (left)
   + Detail panel: list items + glowing chips (right)
   NO emojis · NO progress bars
═══════════════════════════════════════════════ */
#skills { background:var(--bg2); }

.arsenal-wrap {
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* ── Sidebar ── */
.arsenal-sidebar {
  display:flex; flex-direction:column; gap:.25rem;
  position:sticky; top:90px;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}

.cat-btn {
  display:flex; align-items:center; gap:.9rem;
  padding:.9rem 1.1rem;
  border:none; border-bottom:1px solid var(--border);
  background:transparent; cursor:pointer;
  color:var(--muted2); text-align:left;
  transition:background .2s, color .2s;
  width:100%; position:relative;
}
.cat-btn:last-child { border-bottom:none; }
.cat-btn::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--c, var(--indigo));
  opacity:0; transition:opacity .2s;
}
.cat-btn:hover { background:rgba(255,255,255,.04); color:var(--white); }
.cat-btn:hover::before { opacity:.5; }
.cat-btn.active {
  background:color-mix(in srgb, var(--c, var(--indigo)) 10%, transparent);
  color:var(--white);
}
.cat-btn.active::before { opacity:1; }
.cat-btn.active .cat-name { color:var(--white); }

/* sidebar icon — SVG-based, no emoji */
.cat-ico {
  width:28px; height:28px; flex-shrink:0;
  border-radius:7px;
  border:1px solid color-mix(in srgb, var(--c, var(--indigo)) 30%, transparent);
  background:color-mix(in srgb, var(--c, var(--indigo)) 10%, transparent);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.cat-ico svg { width:13px; height:13px; stroke:var(--c, var(--indigo)); fill:none; stroke-width:1.8; }
.cat-btn.active .cat-ico { background:color-mix(in srgb, var(--c, var(--indigo)) 20%, transparent); }

.cat-info  { display:flex; flex-direction:column; gap:.06rem; flex:1; min-width:0; }
.cat-lbl   { font-family:var(--fmono); font-size:.48rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cat-name  { font-family:var(--fmono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-count { font-family:var(--fmono); font-size:.5rem; letter-spacing:.05em; color:var(--muted); }
.cat-arrow { font-size:.75rem; opacity:.25; transition:opacity .2s, transform .2s; margin-left:auto; flex-shrink:0; }
.cat-btn:hover .cat-arrow,
.cat-btn.active .cat-arrow { opacity:.8; transform:translateX(3px); }

/* ── Detail panels ── */
.arsenal-detail { position:relative; min-height:280px; }
.sk-panel { display:none; animation:panelIn .32s cubic-bezier(.16,1,.3,1) both; }
.sk-panel.active { display:block; }
@keyframes panelIn { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:translateX(0)} }

/* card shell */
.sk-panel-card {
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}

/* panel header */
.skp-head {
  display:flex; align-items:center; gap:1.2rem;
  padding:1.6rem 2rem 1.4rem;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.skp-ico-wrap {
  width:42px; height:42px; flex-shrink:0; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid color-mix(in srgb, var(--pc, var(--indigo)) 35%, transparent);
  background:color-mix(in srgb, var(--pc, var(--indigo)) 12%, transparent);
}
.skp-ico-wrap svg { width:20px; height:20px; stroke:var(--pc, var(--indigo)); fill:none; stroke-width:1.8; }
.skp-title { font-family:var(--fdisp); font-size:clamp(.9rem,1.8vw,1.25rem); font-weight:900; letter-spacing:.06em; text-transform:uppercase; line-height:1.1; margin-bottom:.22rem; }
.skp-sub   { font-size:.8rem; color:var(--muted2); font-weight:300; line-height:1.5; }

/* ── skill list items (like accordion items) ── */
.skp-list {
  display:flex; flex-direction:column;
  padding:.8rem 1.2rem 1.2rem;
  gap:.5rem;
}

.skp-item {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1rem;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-left:2px solid color-mix(in srgb, var(--pc, var(--indigo)) 50%, transparent);
  border-radius:8px;
  transition:background .2s, border-color .2s, transform .2s;
  cursor:default;
}
.skp-item:hover {
  background:rgba(255,255,255,.04);
  border-color:color-mix(in srgb, var(--pc, var(--indigo)) 35%, transparent);
  transform:translateX(3px);
}
.skp-item-name {
  font-family:var(--fmono); font-size:.72rem; letter-spacing:.04em;
  font-weight:500; color:var(--white);
}
.skp-item-tag {
  font-family:var(--fmono); font-size:.52rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.18rem .6rem; border-radius:100px;
  border:1px solid color-mix(in srgb, var(--pc, var(--indigo)) 30%, transparent);
  background:color-mix(in srgb, var(--pc, var(--indigo)) 8%, transparent);
  color:var(--pc, var(--indigo));
  white-space:nowrap;
}

/* ── chip cloud (below list, more visual) ── */
.skp-chips-section {
  padding:.2rem 1.2rem 1.6rem;
  border-top:1px solid var(--border);
  margin-top:.4rem;
}
.skp-chips-label {
  font-family:var(--fmono); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.75rem; margin-top:.9rem; display:block;
}
.skp-chips { display:flex; flex-wrap:wrap; gap:.5rem; }

.sk-chip {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--fmono); font-size:.65rem; letter-spacing:.04em;
  padding:.38rem .95rem; border-radius:8px;
  border:1px solid color-mix(in srgb, var(--c, var(--indigo)) 30%, transparent);
  background:color-mix(in srgb, var(--c, var(--indigo)) 7%, transparent);
  color:var(--c, var(--indigo));
  transition:transform .15s, box-shadow .15s, background .15s;
  cursor:default;
}
.sk-chip:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 18px rgba(0,0,0,.4);
  background:color-mix(in srgb, var(--c, var(--indigo)) 18%, transparent);
}
.cd {
  width:5px; height:5px; border-radius:50%;
  background:var(--c, var(--indigo)); flex-shrink:0;
  box-shadow:0 0 5px var(--c, var(--indigo));
}

/* ═══════════════════════════════════════════════
   PROJECTS
═══════════════════════════════════════════════ */
#projects { background:var(--bg); }
.proj-tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:3rem; border-bottom:1px solid var(--border); padding-bottom:.5rem; }
.ptab { font-family:var(--fmono); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; padding:.58rem 1.2rem; border-radius:6px 6px 0 0; border:none; cursor:pointer; background:transparent; color:var(--muted); transition:color .2s, background .2s; position:relative; bottom:-1px; }
.ptab.act { color:var(--indigo); background:rgba(91,115,248,.08); border:1px solid var(--border); border-bottom-color:var(--bg); }
.ptab:hover:not(.act) { color:var(--muted2); }
.proj-panel { display:none; }
.proj-panel.act { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1.5rem; }
.proj-panel.act .proj-card { animation:cardIn .4s cubic-bezier(.16,1,.3,1) both; }
.proj-panel.act .proj-card:nth-child(2) { animation-delay:.1s; }
.proj-panel.act .proj-card:nth-child(3) { animation-delay:.2s; }
@keyframes cardIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.proj-card { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s; display:flex; flex-direction:column; position:relative; }
.proj-card::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.03) 50%,transparent 60%); background-size:400px 100%; background-repeat:no-repeat; opacity:0; transition:opacity .3s; pointer-events:none; }
.proj-card:hover { border-color:rgba(91,115,248,.45); transform:translateY(-5px); box-shadow:0 12px 40px rgba(91,115,248,.12); }
.proj-card:hover::after { opacity:1; animation:shimmer .7s ease forwards; }
.proj-img { aspect-ratio:16/9; overflow:hidden; position:relative; background:linear-gradient(135deg,rgba(91,115,248,.12),rgba(0,207,176,.06)); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.proj-img img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; display:none; }
.proj-img-ph { display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:.2; }
.proj-img-ph svg { width:32px; }
.proj-img-ph span { font-family:var(--fmono); font-size:.55rem; letter-spacing:.1em; color:var(--muted2); }
.proj-img-input { display:none; }
.pibadge { position:absolute; top:.75rem; left:.75rem; font-family:var(--fmono); font-size:.54rem; letter-spacing:.1em; text-transform:uppercase; padding:.26rem .62rem; border-radius:4px; background:rgba(7,8,15,.88); border:1px solid rgba(255,255,255,.1); color:var(--muted2); }
.proj-body { padding:1.4rem 1.5rem; flex:1; display:flex; flex-direction:column; gap:.9rem; }
.proj-row  { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.proj-name { font-family:var(--fdisp); font-size:.95rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; line-height:1; }
.pst       { font-family:var(--fmono); font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; padding:.24rem .58rem; border-radius:4px; white-space:nowrap; margin-top:.15rem; }
.st-done   { color:var(--teal);  background:rgba(0,207,176,.08);   border:1px solid rgba(0,207,176,.2); }
.st-wip    { color:#f5a623;      background:rgba(245,166,35,.1);   border:1px solid rgba(245,166,35,.2); }
.st-proto  { color:#a78bfa;      background:rgba(167,139,250,.08); border:1px solid rgba(167,139,250,.2); }
.proj-desc { font-size:.87rem; color:var(--muted2); line-height:1.7; font-weight:300; flex:1; }
.proj-stack { display:flex; flex-wrap:wrap; gap:.35rem; }
.stk { font-family:var(--fmono); font-size:.57rem; letter-spacing:.04em; padding:.22rem .6rem; border-radius:4px; border:1px solid var(--border); color:var(--muted); background:rgba(255,255,255,.02); transition:transform .15s; }
.stk:hover { transform:translateY(-2px); }
.stk.fe { color:var(--teal);   border-color:rgba(0,207,176,.25);  background:rgba(0,207,176,.04); }
.stk.be { color:var(--indigo); border-color:rgba(91,115,248,.3);  background:rgba(91,115,248,.05); }
.stk.db { color:#f5a623;       border-color:rgba(245,166,35,.3);  background:rgba(245,166,35,.05); }
.stk.lg { color:#a78bfa;       border-color:rgba(167,139,250,.3); background:rgba(167,139,250,.05); }
.stk.em { color:#6ee7b7;       border-color:rgba(110,231,183,.3); background:rgba(110,231,183,.05); }
.stk.ar { color:#93c5fd;       border-color:rgba(147,197,253,.3); background:rgba(147,197,253,.05); }
.proj-links { display:flex; gap:.5rem; flex-wrap:wrap; padding-top:.75rem; border-top:1px solid var(--border); }
.plink { font-family:var(--fmono); font-size:.59rem; letter-spacing:.07em; text-transform:uppercase; padding:.38rem .85rem; border-radius:6px; border:1px solid var(--border); color:var(--muted2); background:transparent; cursor:pointer; transition:color .2s, border-color .2s, background .2s; display:flex; align-items:center; gap:.35rem; text-decoration:none; }
.plink:hover { color:var(--white); border-color:var(--indigo); background:rgba(91,115,248,.08); }
.plink svg { width:11px; opacity:.7; }

/* ═══════════════════════════════════════════════
   AWARDS
═══════════════════════════════════════════════ */
#awards { background:var(--bg2); }
.awards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem; }
.award-card { display:flex; gap:1.1rem; align-items:flex-start; background:rgba(255,255,255,.03); border:1px solid var(--border); border-left:2px solid transparent; border-radius:12px; padding:1.3rem 1.4rem; transition:border-color .25s, border-left-color .25s, transform .25s, box-shadow .25s; position:relative; overflow:hidden; }
.award-card:hover { border-color:rgba(91,115,248,.35); border-left-color:var(--indigo); transform:translateY(-3px); box-shadow:0 8px 28px rgba(91,115,248,.1); }
.award-card::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.03) 50%,transparent 60%); background-size:400px 100%; background-repeat:no-repeat; opacity:0; transition:opacity .3s; pointer-events:none; }
.award-card:hover::after { opacity:1; animation:shimmer .7s ease forwards; }
.award-level { flex-shrink:0; width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:var(--fmono); font-size:.48rem; letter-spacing:.04em; font-weight:700; text-align:center; line-height:1.3; }
.lv-gold   { background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.3); color:#fbbf24; }
.lv-silver { background:rgba(148,163,184,.1); border:1px solid rgba(148,163,184,.3); color:#94a3b8; }
.lv-bronze { background:rgba(180,120,80,.1);  border:1px solid rgba(180,120,80,.3);  color:#b47850; }
.lv-honor  { background:rgba(91,115,248,.1);  border:1px solid rgba(91,115,248,.3);  color:var(--indigo); }
.award-title { font-weight:600; font-size:.92rem; margin-bottom:.22rem; }
.award-sub   { font-size:.8rem; color:var(--muted2); font-weight:300; }
.award-year  { font-family:var(--fmono); font-size:.57rem; letter-spacing:.1em; color:var(--indigo); margin-top:.4rem; display:block; }

/* ═══════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════ */
#about { background:var(--bg3); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.about-text { font-size:clamp(.95rem,1.2vw,1.04rem); color:#9496b8; line-height:1.85; font-weight:300; margin-bottom:1.4rem; }
.about-text strong { color:var(--white); font-weight:500; }
.lang-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; margin-bottom:2.2rem; }
.lang-pill { font-family:var(--fmono); font-size:.62rem; letter-spacing:.07em; padding:.38rem 1rem; border-radius:100px; border:1px solid; display:flex; align-items:center; gap:.45rem; }
.lang-pill.pt { color:var(--teal);   border-color:rgba(0,207,176,.3);  background:rgba(0,207,176,.06); }
.lang-pill.en { color:var(--indigo); border-color:rgba(91,115,248,.3); background:rgba(91,115,248,.07); }
.lang-pill.es { color:var(--muted2); border-color:var(--border);       background:rgba(255,255,255,.03); }
.lang-flag        { font-size:.85rem; }
.lang-level-badge { font-size:.54rem; letter-spacing:.06em; opacity:.7; }
.accordion  { display:flex; flex-direction:column; gap:.6rem; }
.acc-group  { border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:border-color .25s; }
.acc-group:hover { border-color:rgba(91,115,248,.3); }
.acc-header { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; cursor:pointer; background:rgba(255,255,255,.025); transition:background .2s; gap:1rem; border:none; width:100%; text-align:left; color:var(--white); }
.acc-header:hover { background:rgba(255,255,255,.04); }
.acc-left   { display:flex; align-items:center; gap:.9rem; }
.acc-icon   { font-size:1.1rem; flex-shrink:0; line-height:1; }
.acc-cat    { font-family:var(--fmono); font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; color:var(--indigo); margin-bottom:.18rem; }
.acc-title  { font-size:.9rem; font-weight:600; line-height:1; }
.acc-chevron { flex-shrink:0; width:18px; height:18px; border:1px solid var(--border); border-radius:5px; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.acc-chevron svg { width:10px; opacity:.6; transition:transform .3s; }
.acc-group.open .acc-chevron { background:rgba(91,115,248,.15); border-color:rgba(91,115,248,.3); }
.acc-group.open .acc-chevron svg { transform:rotate(180deg); }
.acc-body   { max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1); }
.acc-group.open .acc-body { max-height:600px; }
.acc-inner  { padding:.8rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.6rem; }
.acc-item   { display:flex; flex-direction:column; gap:.2rem; padding:.75rem 1rem; background:rgba(255,255,255,.02); border-radius:8px; border:1px solid var(--border); }
.acc-item-title  { font-size:.88rem; font-weight:500; }
.acc-item-sub    { font-size:.78rem; color:var(--muted2); font-weight:300; }
.acc-item-period { font-family:var(--fmono); font-size:.56rem; letter-spacing:.08em; color:var(--muted); margin-top:.2rem; }
.acc-count { font-family:var(--fmono); font-size:.58rem; letter-spacing:.06em; color:var(--muted); background:rgba(255,255,255,.06); border-radius:100px; padding:.18rem .6rem; flex-shrink:0; }

/* ═══════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════ */
#contact { background:var(--bg); }
.contact-inner { padding:var(--pad); max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.contact-right { display:flex; flex-direction:column; gap:1.1rem; }
.contact-card { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:14px; padding:1.3rem 1.5rem; display:flex; align-items:center; gap:1.1rem; transition:border-color .25s, transform .25s, box-shadow .25s; text-decoration:none; color:var(--white); }
.contact-card:hover { border-color:rgba(91,115,248,.45); transform:translateX(5px); box-shadow:0 6px 24px rgba(91,115,248,.1); }
.cc-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cc-icon svg { width:20px; }
.cc-i-gh { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.cc-i-li { background:rgba(10,102,194,.15); border:1px solid rgba(10,102,194,.3); color:#0a66c2; }
.cc-i-em { background:rgba(91,115,248,.1);  border:1px solid rgba(91,115,248,.3);  color:var(--indigo); }
.cc-i-ig { background:rgba(225,105,150,.12); border:1px solid rgba(225,105,150,.3); color:#e16996; }
.cc-label { font-family:var(--fmono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.18rem; }
.cc-value { font-size:.9rem; font-weight:500; }
.cc-arrow { margin-left:auto; opacity:.3; font-size:.8rem; transition:opacity .2s, transform .2s; }
.contact-card:hover .cc-arrow { opacity:.8; transform:translateX(3px); }

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
footer { position:relative; z-index:2; border-top:1px solid var(--border); background:rgba(7,8,15,.97); padding:3.5rem clamp(1.5rem,6vw,6rem) 2rem; }
.footer-inner   { max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem; }
.footer-logo    { font-family:var(--fdisp); font-size:1.1rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.5rem; }
.footer-logo b  { color:var(--indigo); }
.footer-tag     { font-size:.88rem; color:var(--muted2); font-weight:300; max-width:380px; }
.footer-nav     { display:flex; gap:1.5rem; list-style:none; margin-top:1.8rem; flex-wrap:wrap; }
.footer-nav a   { font-family:var(--fmono); font-size:.61rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:color .2s; }
.footer-nav a:hover { color:var(--indigo); }
.footer-right   { display:flex; flex-direction:column; align-items:flex-end; gap:.8rem; }
.footer-socials { display:flex; gap:.7rem; }
.f-soc { width:36px; height:36px; border-radius:8px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted2); background:rgba(255,255,255,.03); transition:color .2s, border-color .2s, background .2s; text-decoration:none; }
.f-soc:hover { color:var(--white); border-color:var(--indigo); background:rgba(91,115,248,.1); }
.footer-copy { font-family:var(--fmono); font-size:.57rem; letter-spacing:.1em; color:var(--muted); text-align:right; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width:1100px) {
  .about-grid, .contact-inner { grid-template-columns:1fr; gap:3rem; }
  .arsenal-wrap { grid-template-columns:1fr; gap:1rem; }
  .arsenal-sidebar { flex-direction:row; flex-wrap:wrap; position:static; border-radius:12px; }
  .cat-btn { flex:0 0 auto; border-bottom:none; border-right:1px solid var(--border); }
  .cat-btn:last-child { border-right:none; }
  .cat-btn::before { top:auto; bottom:0; left:0; right:0; width:auto; height:2px; }
  .cat-count, .cat-lbl { display:none; }
  .skp-chips-section { border-top:none; }
}
@media (max-width:960px) {
  #hero { grid-template-columns:1fr; gap:2.5rem; padding-bottom:5rem; min-height:auto; padding-top:7rem; }
  .h-photo-col { flex-direction:row; align-items:flex-start; gap:1.5rem; }
  .photo-wrap  { width:150px; }
  .h-info      { display:none; }
  .footer-inner { grid-template-columns:1fr; }
  .footer-right { align-items:flex-start; }
  .footer-copy  { text-align:left; }
  .n-links { display:none; }
  .n-ham   { display:flex; }
  .cv-btn span { display:none; }
  .cv-btn { padding:.52rem .75rem; }
}
@media (max-width:768px) {
  .awards-grid { grid-template-columns:1fr; }
  .proj-panel.act { grid-template-columns:1fr; }
  .ptab { font-size:.58rem; padding:.5rem .8rem; }
  .cat-btn { padding:.65rem .75rem; }
}
@media (max-width:500px) {
  .h-socials { gap:.45rem; }
  .social-btn span { display:none; }
  .social-btn { padding:.68rem; }
  .footer-nav { gap:1rem; }
  .h-name .line1 { font-size:clamp(1.8rem,9vw,3rem); }
  .h-name .line2 { font-size:clamp(1.4rem,7vw,2.4rem); }
  .h-name .line3 { font-size:clamp(1.1rem,5.5vw,1.9rem); }
  .sec-title { font-size:clamp(1.3rem,6vw,2rem); }
}