/* DESIGN TOKENS */
:root {
  --color-bg-primary:    #0A0E1A;
  --color-bg-surface:    #111827;
  --color-bg-elevated:   #1F2937;
  --color-accent:        #C9A84C;
  --color-accent-muted:  #E8C97A;
  --color-accent-dim:    rgba(201, 168, 76, 0.12);
  --color-text-primary:  #F9FAFB;
  --color-text-secondary:#D1D5DB;
  --color-text-muted:    #6B7280;
  --color-text-inverse:  #0A0E1A;
  --color-border:        rgba(255, 255, 255, 0.07);
  --color-border-accent: rgba(201, 168, 76, 0.35);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.563rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-3xl:  3.052rem;
  --font-normal:400; --font-medium:500; --font-semibold:600; --font-bold:700;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;
  --max-width-content:1100px; --max-width-text:680px;
  --section-padding-y:var(--space-24);
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:999px;
  --shadow-card:0 1px 3px rgba(0,0,0,0.4),0 4px 16px rgba(0,0,0,0.3);
  --shadow-lifted:0 4px 6px rgba(0,0,0,0.5),0 10px 40px rgba(0,0,0,0.4);
  --transition-fast:150ms ease; --transition-base:250ms ease;
  --transition-slow:400ms ease; --transition-reveal:600ms cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] {
  --color-bg-primary:#F8F9FA; --color-bg-surface:#FFFFFF; --color-bg-elevated:#F1F3F5;
  --color-accent:#8A6800; --color-accent-muted:#7A5C00;
  --color-accent-dim:rgba(166,124,0,0.10);
  --color-text-primary:#111827; --color-text-secondary:#374151;
  --color-text-muted:#6B7280; --color-text-inverse:#FFFFFF;
  --color-border:rgba(0,0,0,0.08); --color-border-accent:rgba(166,124,0,0.35);
  --shadow-card:0 1px 3px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.06);
  --shadow-lifted:0 4px 6px rgba(0,0,0,0.12),0 10px 40px rgba(0,0,0,0.08);
}
/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{cursor:pointer;background:none;border:none}
/* BASE */
body{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--font-normal);color:var(--color-text-secondary);background-color:var(--color-bg-primary);transition:background-color var(--transition-slow),color var(--transition-slow)}
h1,h2,h3,h4{color:var(--color-text-primary);font-weight:var(--font-bold);line-height:1.2;letter-spacing:-0.02em}
h1{font-size:var(--text-3xl)} h2{font-size:var(--text-xl)} h3{font-size:var(--text-lg)} h4{font-size:var(--text-md)}
p{line-height:1.7;color:var(--color-text-secondary)}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-semibold);letter-spacing:0.02em;transition:all var(--transition-base);white-space:nowrap}
.btn--primary{background-color:var(--color-accent);color:var(--color-text-inverse);border:1px solid var(--color-accent)}
.btn--primary:hover{background-color:var(--color-accent-muted);border-color:var(--color-accent-muted);transform:translateY(-1px);box-shadow:0 4px 12px rgba(201,168,76,0.3)}
.btn--outline{background-color:transparent;color:var(--color-accent);border:1px solid var(--color-border-accent)}
.btn--outline:hover{background-color:var(--color-accent-dim);border-color:var(--color-accent);transform:translateY(-1px)}
.btn--ghost{background-color:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border)}
.btn--ghost:hover{color:var(--color-text-primary);border-color:var(--color-text-muted);transform:translateY(-1px)}
.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}
.badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:0.08em;text-transform:uppercase}
.badge--accent{background-color:var(--color-accent-dim);color:var(--color-accent-muted);border:1px solid var(--color-border-accent)}
.badge--muted{background-color:var(--color-bg-elevated);color:var(--color-text-muted);border:1px solid var(--color-border)}
.section-label{display:block;font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:0.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-3)}
.section-title{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-text-primary);margin-bottom:var(--space-3);padding-left:var(--space-4);border-left:3px solid var(--color-accent)}
.section-subtitle{font-size:var(--text-base);color:var(--color-text-muted);margin-bottom:var(--space-12);padding-left:var(--space-4)}
.copy-btn{width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-md);border:1px solid var(--color-border);color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);margin-left:var(--space-2);cursor:pointer;background:transparent}
.copy-btn:hover{color:var(--color-accent);border-color:var(--color-border-accent);background-color:var(--color-accent-dim)}
.copy-btn.copied{color:#4ade80;border-color:rgba(34,197,94,0.3);background-color:rgba(34,197,94,0.1)}
.copy-btn svg{width:13px;height:13px;pointer-events:none}
.check-icon{display:none}
.copy-btn.copied .copy-icon{display:none}
.copy-btn.copied .check-icon{display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* LAYOUT */
.section{padding:var(--section-padding-y) var(--space-6)}
.section-container{max-width:var(--max-width-content);margin-inline:auto}
.two-col{display:grid;grid-template-columns:1fr;gap:var(--space-12)}
@media(min-width:768px){.two-col{grid-template-columns:1fr 1fr;align-items:start}}
.stat-row{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-12);padding-top:var(--space-12);border-top:1px solid var(--color-border)}
.stat-item{display:flex;flex-direction:column;gap:var(--space-1)}
.stat-number{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-accent);line-height:1;letter-spacing:-0.03em}
.stat-label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--font-medium)}
.divider{height:1px;background:var(--color-border);border:none;margin:0}
@media(max-width:767px){.hide-mobile{display:none!important}}
@media(min-width:768px){.hide-desktop{display:none!important}}
/* NAV */
#scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-muted));z-index:200;transition:width 80ms linear;pointer-events:none}
.nav-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background-color var(--transition-base),backdrop-filter var(--transition-base),border-bottom-color var(--transition-base);border-bottom:1px solid transparent}
.nav-header.scrolled{background-color:rgba(10,14,26,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--color-border)}
[data-theme="light"] .nav-header.scrolled{background-color:rgba(248,249,250,0.90)}
.nav-container{max-width:var(--max-width-content);margin-inline:auto;padding:var(--space-4) var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.nav-logo{display:flex;align-items:center;color:var(--color-text-primary);transition:opacity var(--transition-fast);flex-shrink:0;line-height:0}
.nav-logo-img{height:44px;width:auto;display:block;flex-shrink:0}
[data-theme="dark"] .nav-logo-img{filter:invert(1) brightness(1.5)}
.nav-logo-text{display:flex;flex-direction:column;gap:1px;padding-left:var(--space-3);border-left:1px solid var(--color-border);line-height:1.2}
.nav-logo-name{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-text-primary);letter-spacing:-0.01em;white-space:nowrap}
.nav-logo-title{font-size:10px;font-weight:var(--font-medium);color:var(--color-accent);letter-spacing:0.04em;white-space:nowrap}
.nav-logo:hover{opacity:0.8}
.back-to-top{position:fixed;bottom:28px;right:28px;width:48px;height:48px;border-radius:50%;background:var(--color-accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,0.4);opacity:0;transform:translateY(16px);transition:opacity 0.3s ease,transform 0.3s ease,background-color var(--transition-fast);pointer-events:none;z-index:150}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{background:var(--color-accent-muted);transform:translateY(-3px)}
.back-to-top svg{width:18px;height:18px;flex-shrink:0}
.nav-links{display:none;align-items:center;gap:var(--space-8)}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);transition:color var(--transition-fast);position:relative;padding-bottom:var(--space-1)}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--color-accent);transition:width var(--transition-base)}
.nav-links a:hover{color:var(--color-text-primary)}
.nav-links a.active{color:var(--color-accent-muted)}
.nav-links a.active::after,.nav-links a:hover::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:var(--space-3)}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);color:var(--color-text-muted);border:1px solid var(--color-border);transition:all var(--transition-fast)}
.theme-toggle:hover{color:var(--color-accent);border-color:var(--color-border-accent);background-color:var(--color-accent-dim)}
.theme-toggle svg{width:16px;height:16px}
.icon-moon{display:block} .icon-sun{display:none}
[data-theme="light"] .icon-moon{display:none} [data-theme="light"] .icon-sun{display:block}
.nav-cv-btn{display:none}
@media(min-width:768px){.nav-cv-btn{display:inline-flex}}
.nav-hamburger{display:flex;flex-direction:column;gap:5px;width:36px;height:36px;justify-content:center;align-items:center;border-radius:var(--radius-md);border:1px solid var(--color-border);color:var(--color-text-muted);transition:all var(--transition-fast)}
.nav-hamburger:hover{border-color:var(--color-border-accent);color:var(--color-accent)}
@media(min-width:768px){.nav-hamburger{display:none}}
.hamburger-line{display:block;width:18px;height:2px;background-color:currentColor;border-radius:1px;transition:transform var(--transition-base),opacity var(--transition-base);transform-origin:center}
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2){opacity:0}
.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-drawer{overflow:hidden;max-height:0;transition:max-height var(--transition-slow);background-color:var(--color-bg-surface);border-top:1px solid var(--color-border)}
.nav-drawer.open{max-height:400px}
.nav-drawer-inner{padding:var(--space-4) var(--space-6) var(--space-6);display:flex;flex-direction:column;gap:var(--space-1)}
.nav-drawer a{display:block;padding:var(--space-3) var(--space-4);font-size:var(--text-base);font-weight:var(--font-medium);color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast)}
.nav-drawer a:hover,.nav-drawer a.active{color:var(--color-accent);background-color:var(--color-accent-dim)}
.nav-drawer-cv{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}
/* HERO */
.section--hero{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--space-20) + 60px);padding-bottom:var(--space-20);position:relative;overflow:hidden}
.section--hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--color-border) 1px,transparent 1px),linear-gradient(90deg,var(--color-border) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 60% at 60% 50%,black 20%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 50%,black 20%,transparent 80%);pointer-events:none}
.hero-container{max-width:var(--max-width-content);margin-inline:auto;width:100%;padding-inline:var(--space-6);display:grid;grid-template-columns:1fr;gap:var(--space-10);align-items:center;position:relative;z-index:1}
@media(min-width:768px){.hero-container{grid-template-columns:1fr auto;gap:var(--space-16)}}
/* Hero photo */
.hero-visual{display:flex;justify-content:center;align-items:center;order:0}@media(max-width:767px){.hero-visual{order:-1}}
.hero-photo-wrap{position:relative;width:160px;height:160px;border-radius:50%;overflow:visible;flex-shrink:0;display:block}
.hero-photo{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:50%;display:block}
@media(min-width:768px){
  .hero-photo-wrap{width:min(300px,80%);height:auto;aspect-ratio:3/4;border-radius:var(--radius-xl);overflow:hidden;border:2px solid var(--color-border-accent);box-shadow:0 0 0 6px var(--color-accent-dim),var(--shadow-lifted)}
  .hero-photo{object-fit:cover;object-position:center top;border-radius:0}
}
@media(min-width:768px){.hero-container{grid-template-columns:3fr 2fr;gap:var(--space-20)}}
.hero-content{display:flex;flex-direction:column;gap:var(--space-5)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2)}
.hero-eyebrow-dot{width:9px;height:9px;border-radius:50%;background-color:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,0.55);animation:breathing-dot 2.4s ease-in-out infinite}
@keyframes breathing-dot{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0.55)}50%{opacity:0.85;transform:scale(1.15);box-shadow:0 0 0 8px rgba(34,197,94,0)}}
.hero-eyebrow-text{font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:0.12em;text-transform:uppercase;color:#22C55E}
.hero-name{font-size:clamp(var(--text-xl),5vw,var(--text-3xl));font-weight:var(--font-bold);color:var(--color-text-primary);line-height:1.1;letter-spacing:-0.03em}
.hero-title{font-size:clamp(var(--text-base),2vw,var(--text-md));color:var(--color-text-muted);font-weight:var(--font-normal);line-height:1.5}
.hero-title strong{color:var(--color-text-secondary);font-weight:var(--font-medium)}
.hero-summary{font-size:var(--text-base);color:var(--color-text-secondary);line-height:1.75;max-width:520px}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
.hero-contacts{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2)}
.hero-contact-card{display:flex;align-items:center;padding:var(--space-3) var(--space-4);background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-base)}
.hero-contact-card:hover{border-color:var(--color-border-accent);background-color:var(--color-bg-elevated);transform:translateX(4px)}
.hero-contact-link{display:flex;align-items:center;gap:var(--space-3);flex:1;min-width:0;text-decoration:none;color:inherit}
.hero-contact-icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background-color:var(--color-accent-dim);border:1px solid var(--color-border-accent);color:var(--color-accent);transition:all var(--transition-base)}
.hero-contact-card:hover .hero-contact-icon{background-color:var(--color-accent);color:var(--color-text-inverse)}
.hero-contact-icon svg{width:15px;height:15px}
.hero-contact-content{display:flex;flex-direction:column;gap:1px;overflow:hidden}
.hero-contact-label{font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted)}
.hero-contact-value{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:var(--font-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--transition-fast)}
.hero-contact-link:hover .hero-contact-value{color:var(--color-text-primary)}
.hero-social{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-2)}
.social-link{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-md);border:1px solid var(--color-border);color:var(--color-text-muted);transition:all var(--transition-fast)}
.social-link:hover{color:var(--color-accent);border-color:var(--color-border-accent);background-color:var(--color-accent-dim);transform:translateY(-2px)}
.social-link svg{width:16px;height:16px}
.hero-photo-badge{display:none!important}
/* ABOUT STRIP */
.about-strip{background-color:var(--color-bg-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:var(--space-10) var(--space-6)}
.about-strip-inner{max-width:var(--max-width-content);margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-8)}
.about-stat{display:flex;flex-direction:column;gap:var(--space-1)}
.about-stat-number{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-accent);line-height:1;letter-spacing:-0.03em}
.about-stat-label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--font-medium)}
.about-stat-desc{font-size:var(--text-xs);color:var(--color-text-muted)}
/* TIMELINE */
.section--experience{background-color:var(--color-bg-primary)}
.timeline{position:relative;padding-left:var(--space-8);margin-top:var(--space-2)}
.timeline::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--color-accent) 0%,var(--color-border-accent) 60%,transparent 100%)}
.timeline-item{position:relative;margin-bottom:var(--space-10)}
.timeline-item:last-child{margin-bottom:0}
.timeline-dot{position:absolute;left:calc(-1 * var(--space-8) + 3px);top:var(--space-4);width:12px;height:12px;border-radius:50%;background-color:var(--color-accent);border:2px solid var(--color-bg-primary);box-shadow:0 0 0 2px var(--color-border-accent);transition:transform var(--transition-base),box-shadow var(--transition-base);z-index:1}
.timeline-item:hover .timeline-dot{transform:scale(1.4);box-shadow:0 0 0 3px var(--color-accent),0 0 12px rgba(201,168,76,0.4)}
.timeline-item--current .timeline-dot{animation:timeline-pulse 2s ease-in-out infinite}
@keyframes timeline-pulse{0%,100%{box-shadow:0 0 0 2px var(--color-border-accent)}50%{box-shadow:0 0 0 4px rgba(201,168,76,0.25),0 0 16px rgba(201,168,76,0.3)}}
.timeline-card{background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:box-shadow var(--transition-base),border-color var(--transition-base),transform var(--transition-base)}
.timeline-item:hover .timeline-card{border-color:var(--color-border-accent);box-shadow:var(--shadow-lifted);transform:translateX(4px)}
.timeline-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.timeline-logo{width:44px;height:44px;border-radius:var(--radius-md);background-color:var(--co-color,var(--color-accent));color:var(--co-text,#ffffff);display:flex;align-items:center;justify-content:center;font-size:var(--text-md);font-weight:var(--font-bold);flex-shrink:0;letter-spacing:-0.02em;box-shadow:0 2px 8px rgba(0,0,0,0.25);overflow:hidden}
.timeline-logo--img{background-color:transparent;box-shadow:none;border-radius:var(--radius-md);overflow:hidden;padding:0}
.timeline-logo--img img{width:44px;height:44px;object-fit:contain;display:block;border-radius:var(--radius-md)}
.timeline-header-left{display:flex;align-items:center;gap:var(--space-3)}
.timeline-meta{display:flex;flex-direction:column;gap:var(--space-1)}
.timeline-company{font-size:var(--text-md);font-weight:var(--font-bold);color:var(--color-text-primary);line-height:1.2}
.timeline-role{font-size:var(--text-sm);color:var(--color-accent-muted);font-weight:var(--font-medium)}
.timeline-info{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1);flex-shrink:0}
.timeline-date{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:var(--font-medium);font-variant-numeric:tabular-nums}
.timeline-location{font-size:var(--text-xs);color:var(--color-text-muted);display:flex;align-items:center;gap:4px}
.timeline-location svg{width:10px;height:10px;flex-shrink:0}
.timeline-bullets{display:flex;flex-direction:column;gap:var(--space-2)}
.timeline-bullets li{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.65;padding-left:var(--space-4);position:relative}
.timeline-bullets li::before{content:'';position:absolute;left:0;top:0.6em;width:5px;height:5px;border-radius:50%;background-color:var(--color-accent);opacity:0.7}
.badge--current{background-color:rgba(34,197,94,0.12);color:#4ade80;border:1px solid rgba(34,197,94,0.25)}
@media(max-width:479px){.timeline-info{align-items:flex-start}.timeline-header{flex-direction:column}}
/* SKILLS */
.section--skills{background-color:var(--color-bg-surface);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.skills-filter-bar{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-8)}
.skills-filter-btn{padding:var(--space-2) var(--space-5);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:0.06em;text-transform:uppercase;border:1px solid var(--color-border);color:var(--color-text-muted);background:transparent;cursor:pointer;transition:all var(--transition-fast)}
.skills-filter-btn:hover{color:var(--color-accent);border-color:var(--color-border-accent);background-color:var(--color-accent-dim)}
.skills-filter-btn.active{color:var(--color-text-inverse);background-color:var(--color-accent);border-color:var(--color-accent)}
[data-theme="light"] .skills-filter-btn.active{color:#ffffff}
.skill-group{margin-bottom:var(--space-8)}
.skill-group:last-child{margin-bottom:0}
.skill-group--hidden{display:none}
.skills-grid{display:grid;grid-template-columns:1fr;gap:var(--space-12)}
@media(min-width:768px){.skills-grid{grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start}}
.skills-col-title{font-size:var(--text-sm);font-weight:var(--font-semibold);letter-spacing:0.10em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-5)}
.skills-pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.skill-pill{display:inline-flex;align-items:center;padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-accent-muted);background-color:var(--color-accent-dim);border:1px solid var(--color-border-accent);transition:all var(--transition-base);cursor:default;user-select:none}
.skill-pill:hover{background-color:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(201,168,76,0.25)}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--space-3)}
.tool-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-2);background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-base);cursor:default}
.tool-card:hover{border-color:var(--color-border-accent);box-shadow:var(--shadow-card);transform:translateY(-3px);background-color:var(--color-bg-surface)}
.tool-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--brand,var(--color-text-muted));transition:color var(--transition-base);opacity:0.75}
.tool-card:hover .tool-icon{color:var(--brand,var(--color-accent));opacity:1}
.tool-icon svg{width:28px;height:28px}
.tool-name{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;line-height:1.3;font-weight:var(--font-medium)}
.languages-row{display:flex;gap:var(--space-4);margin-top:var(--space-10);padding-top:var(--space-10);border-top:1px solid var(--color-border);flex-wrap:wrap}
.language-chip{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);background-color:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-pill)}
.language-flag{font-size:1.1rem;line-height:1}
.language-name{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:var(--font-medium)}
.language-level{font-size:var(--text-xs);color:var(--color-text-muted)}
/* PROJECTS */
.section--projects{background-color:var(--color-bg-primary)}
.projects-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media(min-width:640px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
.project-card{background-color:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--transition-base),border-color var(--transition-base),transform var(--transition-base)}
.project-card:hover{border-color:var(--color-border-accent);box-shadow:var(--shadow-lifted);transform:translateY(-4px)}
.project-card-accent{height:3px;background:linear-gradient(90deg,var(--color-accent),transparent)}
.project-card-body{padding:var(--space-6);flex:1;display:flex;flex-direction:column;gap:var(--space-4)}
.project-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.project-title{font-size:var(--text-md);font-weight:var(--font-bold);color:var(--color-text-primary);line-height:1.3}
.project-tag{display:inline-block;padding:2px var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--font-semibold);letter-spacing:0.06em;white-space:nowrap;flex-shrink:0}
.project-tag--expansion{background:rgba(99,102,241,0.15);color:#a5b4fc;border:1px solid rgba(99,102,241,0.25)}
.project-tag--launch{background:rgba(34,197,94,0.12);color:#4ade80;border:1px solid rgba(34,197,94,0.25)}
.project-tag--operations{background:rgba(251,146,60,0.12);color:#fb923c;border:1px solid rgba(251,146,60,0.25)}
.project-tag--training{background:rgba(56,189,248,0.12);color:#38bdf8;border:1px solid rgba(56,189,248,0.25)}
[data-theme="light"] .project-tag--expansion{color:#3730a3;background:rgba(99,102,241,0.10);border-color:rgba(99,102,241,0.30)}
[data-theme="light"] .project-tag--launch{color:#15803d;background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.30)}
[data-theme="light"] .project-tag--operations{color:#c2410c;background:rgba(251,146,60,0.10);border-color:rgba(251,146,60,0.30)}
[data-theme="light"] .project-tag--training{color:#0369a1;background:rgba(56,189,248,0.10);border-color:rgba(56,189,248,0.30)}
[data-theme="light"] .badge--current{color:#15803d;background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.30)}
.project-meta{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:var(--font-medium);display:flex;align-items:center;gap:var(--space-2)}
.project-meta-sep{opacity:0.4}
.project-bullets{display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.project-bullets li{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6;padding-left:var(--space-4);position:relative}
.project-bullets li::before{content:'';position:absolute;left:0;top:0.55em;width:5px;height:5px;border-radius:50%;background-color:var(--color-accent);opacity:0.6}
.project-icon{width:40px;height:40px;border-radius:var(--radius-md);background-color:var(--color-accent-dim);border:1px solid var(--color-border-accent);display:flex;align-items:center;justify-content:center;color:var(--color-accent);flex-shrink:0;margin-bottom:var(--space-2)}
.project-icon svg{width:20px;height:20px}
/* CONTACT + FOOTER */
.section--contact{background-color:var(--color-bg-surface)}
.contact-intro{max-width:var(--max-width-text);font-size:var(--text-base);color:var(--color-text-secondary);line-height:1.75;margin-bottom:var(--space-12)}
.contact-cards{display:flex;gap:var(--space-4);margin-bottom:var(--space-10);flex-wrap:wrap}
.contact-icon-btn{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);color:var(--color-text-muted);background-color:var(--color-bg-elevated);transition:all var(--transition-base);text-decoration:none;flex-shrink:0}
.contact-icon-btn:hover{border-color:var(--color-border-accent);background:var(--color-accent-dim);color:var(--color-accent);transform:translateY(-4px);box-shadow:0 8px 24px rgba(201,168,76,0.2)}
.contact-icon-btn svg{width:24px;height:24px}
.contact-cta{background-color:var(--color-accent-dim);border:1px solid var(--color-border-accent);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.contact-cta-text{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);line-height:1.4}
.contact-cta-text span{color:var(--color-accent-muted);font-weight:var(--font-semibold)}
.site-footer{background-color:var(--color-bg-primary);border-top:1px solid var(--color-border);padding:var(--space-8) var(--space-6)}
.site-footer-inner{max-width:var(--max-width-content);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.footer-copy{font-size:var(--text-xs);color:var(--color-text-muted)}
.footer-contacts{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.footer-contact-link{font-size:var(--text-xs);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-fast)}
.footer-contact-link:hover{color:var(--color-accent)}
.footer-sep{font-size:var(--text-xs);color:var(--color-text-muted);opacity:0.4}
@media(max-width:479px){.site-footer-inner{flex-direction:column;align-items:flex-start;gap:var(--space-2)}}
/* ANIMATIONS */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--transition-reveal),transform var(--transition-reveal);will-change:transform,opacity;transition-delay:calc(var(--index,0) * 70ms)}
.reveal.reveal--visible{opacity:1;transform:translateY(0)}
.reveal--left{transform:translateX(-20px) translateY(0)}
.reveal--left.reveal--visible{transform:translateX(0)}
.reveal--right{transform:translateX(20px) translateY(0)}
.reveal--right.reveal--visible{transform:translateX(0)}
.reveal--scale{transform:scale(0.92) translateY(0)}
.reveal--scale.reveal--visible{transform:scale(1)}
@media(prefers-reduced-motion:reduce){.reveal,.reveal--left,.reveal--right,.reveal--scale{transform:none!important;transition:opacity 200ms ease!important;transition-delay:0ms!important}.hero-eyebrow-dot,.timeline-item--current .timeline-dot{animation:none!important}}
.section-label,.section-title,.section-subtitle,.skills-col-title,.hero-name,.hero-title,.hero-summary,.hero-eyebrow-text{opacity:1!important}
body{animation:page-fadein 400ms ease forwards}
@keyframes page-fadein{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body{animation:none}}

/* ============================================================
   MOBILE ACCESSIBILITY OVERRIDES
   ============================================================ */

/* --- Logo: fix visibility on transparent nav background --- */
.nav-logo-img {
  mix-blend-mode: normal;
  filter: brightness(0) invert(1);
}

[data-theme="light"] .nav-logo-img {
  filter: brightness(0);
  mix-blend-mode: normal;
}

/* --- Touch targets: minimum 44x44px on mobile ------------ */
@media (max-width: 767px) {
  .theme-toggle,
  .nav-hamburger {
    width: 44px;
    height: 44px;
  }

  /* Ensure hero contact cards stack cleanly */
  .hero-contacts {
    flex-direction: column;
  }

  /* Larger copy buttons on touch */
  .copy-btn {
    padding: 8px;
    min-width: 36px;
    min-height: 36px;
  }

  /* Nav logo text: show on mobile with compact sizing */
  .nav-logo-text {
    display: flex;
  }
  .nav-logo-name { font-size: 11px; }
  .nav-logo-title { font-size: 9px; }

  /* Bigger contact icon buttons */
  .contact-icon-btn {
    width: 56px;
    height: 56px;
  }
}

/* --- Focus visible: essential for keyboard + switch access */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- Skip to content link (screen readers / keyboard) ----- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 0;
}

/* --- Reduced motion already in animations.css but reinforce */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
.qr-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin:var(--space-8) 0}
.qr-wrap{border-radius:var(--radius-md);overflow:hidden;padding:12px;background:var(--color-surface-2);border:1px solid var(--color-border);line-height:0}
.qr-wrap img,.qr-wrap canvas{display:block;border-radius:4px}
.qr-label{font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:0.05em;text-transform:uppercase;font-weight:var(--font-medium)}