/* Theme variables */
:root {
  --bg: #121212; /* Noir */
  --text: #F5F5F5;
  --muted: #bdbdbd;
  --accent: #00FFD1;
  --cta: #1E90FF;
  --surface: #1a1a1a;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}

[data-theme="noir"] {
  --bg: #121212;
  --text: #F5F5F5;
  --muted: #bdbdbd;
  --accent: #00FFD1;
  --cta: #1E90FF;
  --surface: #1a1a1a;
}
[data-theme="golden"] {
  --bg: #2C1E3F;
  --text: #FFF8F0;
  --muted: #ead9c7;
  --accent: #F4B860;
  --cta: #FF6F61;
  --surface: #3a2853;
}
[data-theme="luxe"] {
  --bg: #FAFAFA;
  --text: #333333;
  --muted: #666666;
  --accent: #D4AF37;
  --cta: #1A1A40;
  --surface: #ffffff;
}
[data-theme="mono"] {
  --bg: #000000;
  --text: #FFFFFF;
  --muted: #d0d0d0;
  --accent: #DC143C;
  --cta: #C0C0C0;
  --surface: #0c0c0c;
}

* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
img { max-width: 100%; display: block }
.sr-only { position: absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0 }

.container { width: min(1200px, 92%); margin-inline: auto }
.section { padding: 5rem 0 }
.section h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 1rem }
.lede { font-weight: 600; font-size: 1.15rem }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; padding: .8rem 0 }
.logo { color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .5px }
.nav-list { display:flex; gap:1rem; list-style:none; margin:0; padding:0 }
.nav-list a { color: var(--text); text-decoration:none; opacity:.9 }
.nav-list a:hover { color: var(--accent) }
.nav-toggle { display:none; background:none; border:1px solid color-mix(in srgb, var(--text) 10%, transparent); color:var(--text); border-radius:.5rem; padding:.4rem .6rem }
.theme-toggle { width: 36px; height: 36px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: radial-gradient(30% 30% at 30% 30%, var(--accent), transparent); box-shadow: var(--shadow); cursor:pointer }

/* Hero */
.hero { position: relative; min-height: 92vh; display:grid; place-items:center; text-align:center; overflow:hidden }
.hero-bg { position:absolute; inset:0; background-image: url('assets/images/hero.svg'); background-size: cover; background-position:center; transform: scale(1.05); will-change: transform; filter: saturate(1.05) contrast(1.02) }
.hero-overlay { position: relative; z-index: 1; padding: 2rem; backdrop-filter: blur(1px); opacity:0; transform: translateY(10px); animation: fadeUp .9s ease .2s forwards }
.hero h1 { font-size: clamp(2rem, 5vw, 4rem); margin: 0; text-shadow: 0 10px 30px rgba(0,0,0,.5) }
.hero h1 span { font-family: 'Playfair Display', serif; letter-spacing:.5px }
.scroll-indicator { position:absolute; bottom:1.25rem; left:50%; translate:-50% 0; width:2px; height:40px; background: color-mix(in srgb, var(--text) 40%, transparent); overflow:hidden }
.scroll-indicator::after{ content:""; position:absolute; top:-20px; left:0; width:100%; height:20px; background: var(--accent); animation: drop 2.5s infinite }
@keyframes drop { 0%{ top:-20px } 70%{ top:40px } 100%{ top:40px; opacity:0 } }
@keyframes fadeUp { to { opacity:1; transform: translateY(0) } }

.btn { border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: var(--surface); color: var(--text); padding: .8rem 1.2rem; border-radius: .7rem; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow) }
.btn.primary { background: var(--cta); color: #fff; border: none }
.btn.cta { background: var(--cta); color:#fff; border: none }

/* Portfolio */
.section-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem }
.filters { display:flex; flex-wrap:wrap; gap:.6rem }
.filter { border:1px solid color-mix(in srgb, var(--text) 10%, transparent); background:transparent; color:var(--text); padding:.5rem .9rem; border-radius:2rem; cursor:pointer }
.filter.active, .filter:hover { background: color-mix(in srgb, var(--accent) 25%, var(--surface)) }
.grid { display:grid; gap: 1rem }
.grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width: 900px){ .grid[data-cols="3"]{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 600px){ .grid[data-cols="3"]{ grid-template-columns: 1fr } .nav-list{ display:none } .nav-toggle{ display:inline-flex } }

.card { position:relative; border-radius:1rem; overflow:hidden; background: #000 }
.card img { width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; transition: transform .5s ease, filter .5s ease }
.card .card-overlay { position:absolute; inset:0; display:grid; place-items:end start; padding:1rem; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); color:#fff; opacity:0; transition: opacity .3s ease }
.card:hover img { transform: scale(1.05); filter: saturate(1.1) }
.card:hover .card-overlay { opacity:1 }

/* About */
.split { display:grid; grid-template-columns: 1.1fr 1fr; gap:2rem; align-items:center }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; }
  .about-media{ order: -1 }
}
.about-media img{ border-radius:1rem; box-shadow: var(--shadow) }
.parallax { transform: translateY(0); will-change: transform }

/* Testimonials */
.carousel { position:relative; overflow:hidden; border-radius:1rem; background: var(--surface); border:1px solid color-mix(in srgb, var(--text) 8%, transparent); box-shadow: var(--shadow) }
.carousel-track { display:flex; transition: transform .6s ease; }
.slide { min-width:100%; padding:2rem; display:grid; grid-template-columns: 80px 1fr; gap:1rem; align-items:center }
.slide img { width:80px; height:80px; border-radius:50%; filter: grayscale(100%) contrast(1.1) }
.quote { font-style: italic }
.carousel-btn { position:absolute; top:50%; translate:0 -50%; background: var(--surface); border:1px solid color-mix(in srgb, var(--text) 10%, transparent); color:var(--text); border-radius:50%; width:40px; height:40px; cursor:pointer }
.carousel-btn.prev { left:.75rem }
.carousel-btn.next { right:.75rem }
.carousel-dots { display:flex; gap:.4rem; justify-content:center; padding:.8rem 0 }
.carousel-dots button { width:9px; height:9px; border-radius:999px; border:none; background: color-mix(in srgb, var(--text) 20%, transparent); cursor:pointer }
.carousel-dots button[aria-selected="true"] { background: var(--accent) }

/* Contact */
.form-row { display:grid; gap:.4rem; margin-bottom:1rem }
input, textarea { background: var(--surface); color: var(--text); border:1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius:.6rem; padding:.75rem 1rem; outline: none; transition: border-color .2s ease, box-shadow .2s ease }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent) }
.error { color: #ff6b6b; font-size:.9rem; min-height:1.2em }
.form-actions { display:flex; align-items:center; gap:1rem }
.btn.primary { position:relative; overflow:hidden }
.btn.primary::after { content:""; position:absolute; inset:0; background: radial-gradient(120px 120px at var(--x,50%) var(--y,50%), color-mix(in srgb, #fff 30%, transparent), transparent 60%); opacity:0; transition: opacity .25s ease }
.btn.primary:active::after, .btn.primary:hover::after { opacity:.5 }

/* BTS */
.bts details { border:1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius:.8rem; padding: .75rem 1rem; background: var(--surface); margin-bottom:.8rem }
.bts summary { cursor:pointer; font-weight:600 }

/* Footer */
.site-footer { padding:2rem 0; border-top:1px solid color-mix(in srgb, var(--text) 8%, transparent) }
.footer-grid { display:grid; grid-template-columns: 1fr auto auto; gap:1rem; align-items:center }
@media (max-width: 800px){ .footer-grid{ grid-template-columns:1fr } }
.social, .quick { list-style:none; display:flex; gap:.8rem; margin:0; padding:0 }
.ico { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; text-indent:-9999px; background: color-mix(in srgb, var(--text) 12%, transparent); border:1px solid color-mix(in srgb, var(--text) 10%, transparent) }
.ico.ig { background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23ffffff\" viewBox=\"0 0 24 24\"><path d=\"M7 2C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h10c2.757 0 5-2.243 5-5V7c0-2.757-2.243-5-5-5H7zm0 2h10c1.654 0 3 1.346 3 3v10c0 1.654-1.346 3-3 3H7c-1.654 0-3-1.346-3-3V7c0-1.654 1.346-3 3-3zm10 1a1 1 0 100 2 1 1 0 000-2zM12 7a5 5 0 100 10 5 5 0 000-10z\"/></svg>'); background-size: 50% 50%; background-repeat:no-repeat; background-position:center }
.ico.be { background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23ffffff\" viewBox=\"0 0 24 24\"><path d=\"M3 4h7a4 4 0 010 8H3V4zm7 6a2 2 0 100-4H5v4h5zm6-4h5v2h-5V6zm-1 3a5 5 0 100 10 5 5 0 000-10z\"/></svg>') }
.ico.pi { background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"%23ffffff\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10c.73 0 1.443-.077 2.131-.223l-1.01-3.513c-.285.05-.578.076-.879.076a6.34 6.34 0 01-6.34-6.34A6.34 6.34 0 0112.242 5h.003a6.34 6.34 0 016.34 6.34c0 1.848-.797 3.516-2.07 4.68l-.77-2.68h-2.6l2.095 7.286C18.991 19.18 22 15.943 22 12 22 6.486 17.514 2 12 2z\"/></svg>') }

/* Utilities */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus { position:static; width:auto; height:auto; padding:.5rem; background:var(--accent); color:#000 }
.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.82); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; padding: 1rem }
.modal.open { opacity: 1; visibility: visible }
.modal-content { max-width: min(1100px, 92vw); max-height: 82vh; border-radius: 1rem; overflow: hidden; background: #000; box-shadow: var(--shadow) }
.modal-content img { width: 100%; height: auto; display: block }
.modal-content figcaption { padding: .8rem 1rem; color: #f0f0f0; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.6)) }
.modal-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text) 15%, transparent); background: color-mix(in srgb, var(--surface) 70%, rgba(0,0,0,.3)); color: var(--text); cursor: pointer }
.modal-close:focus { outline: 3px solid var(--accent) }
.focus-visible:focus { outline: 3px solid var(--accent) }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important }
}