/* Base styles */
:root{--bg:#0b0b0c;--surface:#141417;--text:#e7e7ea;--muted:#a7a7b0;--brand:#6cf0c2;--card:#1b1b20;--border:#2a2a31}
[data-theme="light"]{--bg:#f7f7f9;--surface:#ffffff;--text:#0a0a0a;--muted:#4c4c55;--brand:#0f9d72;--card:#ffffff;--border:#e5e5ee}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1100px,92%);margin:0 auto}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(0,0,0,0.08);
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
  transition:all 0.3s ease;
}
.header-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:16px 0;
  max-width:1200px;
  margin:0 auto;
  width:min(1100px,92%);
}
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  letter-spacing:.3px;
  text-decoration:none;
  color:var(--text);
  transition:all 0.3s ease;
}
.brand:hover{
  transform:translateY(-1px);
  color:var(--brand);
}
.brand-logo{
  width:48px;
  height:48px;
  border-radius:8px;
  object-fit:contain;
  transition:all 0.3s ease;
  filter:invert(1);
}
.brand:hover .brand-logo{
  transform:scale(1.05);
  filter:drop-shadow(0 2px 8px rgba(108,240,194,0.3));
}
.nav{
  display:flex;
  gap:8px;
  align-items:center;
}
.nav-link{
  padding:10px 16px;
  border-radius:12px;
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
  font-size:0.9rem;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}
.nav-link::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg,var(--brand),rgba(108,240,194,0.1));
  opacity:0;
  transition:opacity 0.3s ease;
  border-radius:12px;
}
.nav-link:hover::before{
  opacity:1;
}
.nav-link:hover{
  color:var(--text);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.nav-link.active{
  color:var(--text);
  background:linear-gradient(135deg,var(--brand),rgba(108,240,194,0.2));
  box-shadow:0 2px 8px rgba(108,240,194,0.2);
}
.nav-link.active::before{
  opacity:0;
}

/* Dark theme header */
[data-theme="dark"] .site-header{
  background:rgba(11,11,12,0.95) !important;
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="dark"] .brand{
  color:#ffffff;
}
[data-theme="dark"] .brand:hover{
  color:#6cf0c2;
}
[data-theme="dark"] .nav-link{
  color:rgba(255,255,255,0.7);
}
[data-theme="dark"] .nav-link:hover{
  color:#ffffff;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .nav-link.active{
  color:#6cf0c2;
  background:linear-gradient(135deg,rgba(108,240,194,0.2),rgba(108,240,194,0.1));
}
[data-theme="dark"] .brand-logo{
  filter:none;
}
[data-theme="dark"] .brand:hover .brand-logo{
  filter:drop-shadow(0 2px 8px rgba(108,240,194,0.5));
}
[data-theme="dark"] #theme-toggle{
  color:rgba(255,255,255,0.7);
  background:transparent;
  border:none;
}
[data-theme="dark"] #theme-toggle:hover{
  color:#ffffff;
  background:rgba(255,255,255,0.1);
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

/* Theme Slider */
.theme-slider{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(0,0,0,0.05);
  border:1px solid var(--border);
  cursor:pointer;
  transition:all 0.3s ease;
  user-select:none;
}
.theme-slider:hover{
  background:rgba(0,0,0,0.1);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.slider-label{
  font-size:0.8rem;
  font-weight:500;
  color:var(--muted);
  transition:color 0.3s ease;
}
.slider-track{
  position:relative;
  width:40px;
  height:20px;
  background:var(--border);
  border-radius:10px;
  overflow:hidden;
  transition:background 0.3s ease;
}
.slider-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  background:var(--brand);
  border-radius:50%;
  transition:transform 0.3s ease;
  box-shadow:0 2px 4px rgba(0,0,0,0.2);
}

/* Dark mode slider */
[data-theme="dark"] .theme-slider{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
}
[data-theme="dark"] .theme-slider:hover{
  background:rgba(255,255,255,0.1);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .slider-label{
  color:rgba(255,255,255,0.7);
}
[data-theme="dark"] .slider-track{
  background:rgba(255,255,255,0.2);
}

/* Hero */
.hero{padding:40px 0 10px}
.title{margin:0 0 6px;font-size:28px}
.subtitle{margin:0;color:var(--muted)}

/* Grid */
.grid{display:grid;gap:18px}
.grid-cards{grid-template-columns:repeat(12,1fr);margin:22px 0 50px}
.grid-cards .card{grid-column:span 12}
@media(min-width:640px){.grid-cards .card{grid-column:span 6}}
@media(min-width:980px){.grid-cards .card{grid-column:span 4}}

.card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 60%),var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-2px);border-color:var(--brand)}
.card-image{aspect-ratio:16/10;background-size:cover;background-position:center}
.card-body{padding:14px}
.card-title{margin:0 0 4px;font-size:18px}
.card-text{margin:0;color:var(--muted);font-size:14px}

/* Gallery */
.grid-gallery{grid-template-columns:repeat(12,1fr);margin:16px 0 60px}
.gallery-item{grid-column:span 12;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:transparent}
.gallery-item img{width:100%;height:auto;object-fit:cover;display:block;background:transparent}
@media(min-width:640px){.gallery-item{grid-column:span 6}}
@media(min-width:980px){.gallery-item{grid-column:span 4}}

/* Uniform gallery sizing (match ad mock layout) */
.grid-gallery.uniform .gallery-item{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.grid-gallery.uniform .gallery-item img{width:100%;height:100%;object-fit:contain}
/* Allow portrait exceptions inside uniform grids */
.grid-gallery.uniform .gallery-item.portrait{aspect-ratio:9/16}

/* Square display for shirts */
.gallery-item.shirt{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.gallery-item.shirt img{width:100%;height:100%;object-fit:cover}
.gallery-item.vertical{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.gallery-item.vertical img{width:100%;height:100%;object-fit:cover}

/* 3D logo display */
.gallery-item.logo-3d{aspect-ratio:1/1;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:transparent;transition:all 0.3s ease;padding:0}
.gallery-item.logo-3d:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.gallery-item.logo-3d img{width:100%;height:100%;object-fit:contain;display:block;background:transparent}

/* Packaging items display */
.gallery-item.packaging-item{aspect-ratio:1/1;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:transparent;transition:all 0.3s ease;padding:0}
.gallery-item.packaging-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.gallery-item.packaging-item img{width:100%;height:100%;object-fit:cover;display:block;background:transparent}

/* Photo items display */
.gallery-item.photo-item{aspect-ratio:4/3;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:transparent;transition:all 0.3s ease;padding:0}
.gallery-item.photo-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.gallery-item.photo-item img{width:100%;height:100%;object-fit:cover;display:block;background:transparent}

/* Ad items display */
.gallery-item.ad-item{aspect-ratio:16/9;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:transparent;transition:all 0.3s ease;padding:0}
.gallery-item.ad-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.gallery-item.ad-item img{width:100%;height:100%;object-fit:cover;display:block;background:transparent}

/* Bud-E gallery - side by side */
.bud-e-gallery{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
.bud-e-gallery .gallery-item{grid-column:span 1;aspect-ratio:1/1;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:transparent;transition:all 0.3s ease;padding:0}
.bud-e-gallery .gallery-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.bud-e-gallery .gallery-item img{width:100%;height:100%;object-fit:contain;display:block;background:transparent}

/* Buttons gallery - smaller and horizontal */
.buttons-gallery{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.buttons-gallery .button-item{grid-column:span 1;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#000;transition:all 0.3s ease}
.buttons-gallery .button-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.buttons-gallery .button-item img{width:60%;height:60%;object-fit:contain;display:block;background:#000}

/* Responsive Design */

/* Mobile First - Base styles for mobile */
.container{width:min(1100px,95%);margin:0 auto;padding:0 16px}

/* Header responsive */
.header-inner{padding:12px 0;flex-direction:column;align-items:center;gap:12px}
.brand{font-size:1.1rem}
.brand-logo{width:40px;height:40px}
.nav{flex-wrap:wrap;gap:4px;justify-content:center}
.nav-link{padding:8px 12px;font-size:0.85rem}

/* Theme slider responsive */
.theme-slider{padding:6px 8px;gap:6px}
.slider-label{font-size:0.75rem}
.slider-track{width:32px;height:16px}
.slider-thumb{width:12px;height:12px;top:2px;left:2px}

/* Video responsive */
.full-viewport-video .video-wrap{max-width:100%;margin:16px 0;aspect-ratio:16/9}

/* Gallery responsive */
.grid-gallery{gap:12px;margin:12px 0 40px}
.gallery-item{grid-column:span 12}

/* Cards responsive */
.grid-cards{gap:12px;margin:12px 0 40px}
.card{grid-column:span 12}

/* Tablet - 640px and up */
@media(min-width:640px){
  .container{padding:0 20px}
  .header-inner{padding:16px 0;flex-direction:column;align-items:center;gap:16px}
  .brand{font-size:1.2rem}
  .brand-logo{width:48px;height:48px}
  .nav{gap:8px}
  .nav-link{padding:10px 16px;font-size:0.9rem}
  
  .theme-slider{padding:8px 12px;gap:8px}
  .slider-label{font-size:0.8rem}
  .slider-track{width:40px;height:20px}
  .slider-thumb{width:16px;height:16px;top:2px;left:2px}
  
  .full-viewport-video .video-wrap{max-width:600px;margin:20px auto;aspect-ratio:4/3}
  
  .grid-gallery{gap:16px;margin:16px 0 50px}
  .gallery-item{grid-column:span 6}
  
  .grid-cards{gap:16px;margin:16px 0 50px}
  .card{grid-column:span 6}
  
  .buttons-gallery{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* Desktop - 980px and up */
@media(min-width:980px){
  .container{padding:0 24px}
  .header-inner{
    padding:16px 0;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:16px;
    position:relative;
  }
  
  .brand{
    position:absolute;
    left:0;
  }
  
  .theme-toggle-right{
    position:absolute;
    right:0;
  }
  
  .full-viewport-video .video-wrap{max-width:800px;margin:22px auto}
  
  .grid-gallery{gap:18px;margin:16px 0 60px}
  .gallery-item{grid-column:span 4}
  
  .grid-cards{gap:18px;margin:16px 0 60px}
  .card{grid-column:span 4}
  
  .buttons-gallery{grid-template-columns:repeat(4,1fr);gap:16px}
}

/* Large desktop - 1200px and up */
@media(min-width:1200px){
  .container{width:min(1200px,90%)}
  .header-inner{max-width:1200px}
}

/* Mobile landscape and small tablets */
@media(max-width:768px) and (orientation:landscape){
  .header-inner{padding:8px 0;flex-direction:column;align-items:center;gap:8px}
  .nav{gap:6px;justify-content:center}
  .nav-link{padding:6px 10px;font-size:0.8rem}
  
  .theme-slider{padding:4px 8px;gap:4px}
  .slider-label{font-size:0.7rem}
  .slider-track{width:28px;height:14px}
  .slider-thumb{width:10px;height:10px;top:2px;left:2px}
  
  .full-viewport-video .video-wrap{aspect-ratio:16/9;margin:12px 0}
  
  .grid-gallery{gap:8px;margin:8px 0 30px}
  .grid-cards{gap:8px;margin:8px 0 30px}
}

/* Very small screens */
@media(max-width:480px){
  .container{padding:0 12px}
  .header-inner{padding:8px 0;flex-direction:column;align-items:center;gap:8px}
  .nav{width:100%;justify-content:center;gap:8px}
  
  .theme-slider{padding:4px 6px;gap:4px}
  .slider-label{font-size:0.65rem}
  .slider-track{width:24px;height:12px}
  .slider-thumb{width:8px;height:8px;top:2px;left:2px}
  
  .full-viewport-video .video-wrap{aspect-ratio:16/9;margin:8px 0}
  
  .grid-gallery{gap:8px;margin:8px 0 30px}
  .gallery-item{grid-column:span 12}
  
  .grid-cards{gap:8px;margin:8px 0 30px}
  .card{grid-column:span 12}
  
  .buttons-gallery{grid-template-columns:repeat(2,1fr);gap:8px}
  .buttons-gallery .button-item img{width:50%;height:50%}
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .card:hover{transform:none}
  .gallery-item:hover{transform:none}
  .nav-link:hover{transform:none}
  .theme-slider:hover{transform:none}
  
  .card:active{transform:scale(0.98)}
  .gallery-item:active{transform:scale(0.98)}
  .nav-link:active{transform:scale(0.95)}
  .theme-slider:active{transform:scale(0.95)}
}

/* Resume */
.actions{display:flex;gap:10px;margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;background:var(--brand);color:#0a0a0a;font-weight:600}
.btn.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
.resume-embed{margin:20px 0 60px}
.resume-embed iframe{width:100%;height:80vh;border:1px solid var(--border);border-radius:12px;background:#fff}
.pdf-fallback{color:var(--muted);margin-top:8px}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:20px 0 30px;background:rgba(20,20,23,.5)}
.footer-inner{display:flex;align-items:center;justify-content:space-between}

/* Utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Linktree-style page */
.links-body{background:radial-gradient(1200px 600px at 10% -10%, rgba(108,240,194,.15), transparent), radial-gradient(900px 500px at 110% 10%, rgba(108,240,194,.08), transparent), var(--bg)}
.links-card{width:min(520px,100%);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 60%),var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.links-profile{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:14px}
.links-avatar{width:88px;height:88px;border-radius:999px;border:2px solid var(--border);object-fit:cover;background:#222}
.links-name{margin:12px 0 4px;font-size:22px}
.links-bio{margin:0;color:var(--muted)}
.links-list{display:grid;gap:10px;margin:16px 0}
.link-btn{display:flex;align-items:center;justify-content:center;padding:14px 16px;border-radius:12px;background:var(--brand);color:#0a0a0a;font-weight:700;letter-spacing:.2px}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border);font-weight:600}
.links-footer{display:flex;gap:8px;justify-content:center;margin-top:8px}
.mini-btn{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:8px 12px;font-size:12px}



/* Accessibility & interactions */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.btn,.link-btn,.mini-btn{transition:transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease}
.btn:hover{filter:saturate(110%)}
.btn:active{transform:translateY(1px)}
.btn.btn-secondary:hover{border-color:var(--brand)}
.link-btn:hover{box-shadow:0 6px 16px rgba(108,240,194,.25)}
.link-btn:active{transform:translateY(1px)}
.mini-btn:hover{border-color:var(--brand)}

/* Typography */
h1,h2,h3{line-height:1.2}
p{line-height:1.7}
strong{font-weight:700}
em{font-style:italic}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Utilities */
.stack > * + *{margin-top:10px}
.text-center{text-align:center}
.max-w-prose{max-width:70ch}
.mt-1{margin-top:6px}.mt-2{margin-top:10px}.mt-3{margin-top:16px}.mt-4{margin-top:24px}
.mb-1{margin-bottom:6px}.mb-2{margin-bottom:10px}.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}
.pt-1{padding-top:6px}.pt-2{padding-top:10px}.pt-3{padding-top:16px}.pt-4{padding-top:24px}
.pb-1{padding-bottom:6px}.pb-2{padding-bottom:10px}.pb-3{padding-bottom:16px}.pb-4{padding-bottom:24px}

/* Theme toggle */
.theme-toggle{position:fixed;right:14px;bottom:16px;z-index:20;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:10px 12px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 22px rgba(0,0,0,.25)}
.theme-toggle .icon{width:18px;height:18px;display:inline-block}
.theme-toggle .label{font-weight:600;font-size:13px}
.theme-toggle:hover{border-color:var(--brand)}
.theme-toggle[data-compact="true"] .label{display:none}

/* Slider */
.slider{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden;margin:16px 0 60px}
.slides{display:flex;transition:transform .3s ease}
.slide{min-width:100%;display:flex;align-items:center;justify-content:center;padding:8px}
.slide img,.slide video{max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:10px;background:#000}
.slider .control{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px);width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.slider .control:hover{background:rgba(0,0,0,.5)}
.slider .prev{left:10px}
.slider .next{right:10px}
.slider .dots{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;display:flex;gap:6px}
.slider .dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35);border:none}
.slider .dot[aria-current="true"]{background:var(--brand)}

/* Full viewport video on home */
.full-viewport-video{margin:0;padding:0}
.full-viewport-video .video-wrap{position:relative;width:100%;max-width:800px;aspect-ratio:4/3;background:#000;border-radius:14px;overflow:hidden;margin:22px auto}
.full-viewport-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}