
:root{
  --bg:#0a0a0a;
  --panel:#111214;
  --panel-2:#17181d;
  --text:#f5f5f3;
  --muted:#b5b6bc;
  --gold:#d7b56d;
  --gold-2:#f0d59c;
  --line:rgba(255,255,255,.08);
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --radius:24px;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35)),
    url('assets/bg-blur.jpg') center / cover fixed no-repeat,
    var(--bg);
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(var(--container), calc(100% - 32px)); margin:0 auto}
.intro{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:radial-gradient(circle at center, rgba(24,24,24,.25), rgba(0,0,0,.92));
  backdrop-filter: blur(10px);
  transition:opacity .6s ease, visibility .6s ease;
}
.intro.is-hidden{opacity:0; visibility:hidden}
.intro__inner{text-align:center; padding:32px}
.intro__label{
  letter-spacing:.25em; text-transform:uppercase; color:var(--gold); font-size:.82rem; margin-bottom:12px
}
.intro__title{font-size:clamp(2.8rem, 9vw, 6rem); margin:0}
.intro__subtitle{font-size:1.15rem; color:var(--muted); margin:14px 0 26px}
.nav{
  position:absolute; inset:0 0 auto 0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  width:min(var(--container), calc(100% - 32px)); margin:0 auto; padding:22px 0
}
.nav__brand{font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.nav__links{display:flex; gap:20px; color:#ebe7de}
.nav__links a{opacity:.85}
.nav__links a:hover{opacity:1}
.hero{
  position:relative; min-height:100vh; display:flex; align-items:end; overflow:hidden
}
.hero__media{position:absolute; inset:0}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 25%}
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.2) 0%, rgba(5,5,5,.45) 42%, rgba(5,5,5,.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.1) 100%);
}
.hero__content{
  position:relative; z-index:2; padding:160px 0 70px; max-width:760px
}
.eyebrow{
  color:var(--gold);
  letter-spacing:.24em; text-transform:uppercase; font-size:.8rem; margin-bottom:16px
}
.hero h1{font-size:clamp(3rem, 8vw, 6.5rem); line-height:.93; margin:0 0 12px; letter-spacing:.02em}
.hero__tagline{font-size:clamp(1.1rem, 3vw, 1.6rem); color:#f0e7d3; margin:0 0 14px}
.hero__copy{max-width:42rem; color:#d6d6d8; font-size:1.02rem; line-height:1.7}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 22px; border-radius:999px; border:1px solid var(--line);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  font-weight:700; letter-spacing:.02em;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn--gold{
  background:linear-gradient(180deg, var(--gold-2), var(--gold));
  color:#1a1711; border:none;
}
.btn--ghost{
  background:rgba(255,255,255,.04);
  color:var(--text);
}
.section{padding:88px 0}
.section--contrast{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section__heading{margin-bottom:28px}
.section__heading h2{
  margin:0; font-size:clamp(2rem, 4.6vw, 3.35rem); line-height:1.05; max-width:860px
}
.quick-card{margin-top:-42px; position:relative; z-index:8}
.quick-card__grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:12px;
  background:rgba(17,18,20,.78); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px; padding:18px; box-shadow:var(--shadow)
}
.quick-card__grid div{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:16px; padding:14px
}
.quick-card__grid span{display:block; color:var(--muted); font-size:.82rem; margin-bottom:8px}
.quick-card__grid strong{font-size:.96rem}
.about{
  display:grid; grid-template-columns:1.1fr .9fr; gap:24px;
}
.about p{
  margin:0; padding:24px;
  border-radius:20px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06); line-height:1.8; color:#dddde1
}
.video-card{
  background:rgba(12,12,14,.85); border:1px solid rgba(255,255,255,.07);
  border-radius:28px; padding:18px; box-shadow:var(--shadow)
}
.video-card video{
  width:100%; border-radius:18px; background:#000; max-height:75vh; object-fit:contain
}
.video-card__meta{
  display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 8px 6px
}
.video-card__meta p{margin:.3rem 0 0; color:var(--muted); line-height:1.6}
.credits-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px
}
.card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:22px; padding:24px; box-shadow:var(--shadow)
}
.card h3{margin:0 0 12px; font-size:1.15rem}
.card ul{margin:0; padding-left:18px; color:#d7d7dc; line-height:1.8}
.section--gallery{padding-top:88px}
.gallery{
  display:grid; grid-template-columns:repeat(12, 1fr); gap:14px
}
.gallery__item{
  grid-column:span 4; border-radius:22px; overflow:hidden; min-height:240px;
  border:1px solid rgba(255,255,255,.07); background:#0f0f10; box-shadow:var(--shadow)
}
.gallery__item--large{grid-column:span 8; grid-row:span 2; min-height:500px}
.gallery__item img{
  width:100%; height:100%; object-fit:cover; transition:transform .45s ease, filter .45s ease
}
.gallery__item:hover img{transform:scale(1.03); filter:saturate(1.06)}
.resume-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:28px; box-shadow:var(--shadow)
}
.resume-panel__content p{color:#d5d6da; max-width:48rem; line-height:1.8}
.resume-panel__buttons{display:flex; flex-wrap:wrap; gap:14px; margin-top:20px}
.contact-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:18px
}
.contact-card{
  padding:24px; border-radius:22px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)
}
.contact-card span{display:block; color:var(--muted); margin-bottom:8px}
.contact-card strong{font-size:1.1rem}
.footer{border-top:1px solid var(--line); padding:22px 0 34px; color:var(--muted)}
.footer__inner{display:flex; justify-content:space-between; gap:12px}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease}
.reveal.is-visible{opacity:1; transform:none}
@media (max-width: 1024px){
  .quick-card__grid{grid-template-columns:repeat(3, 1fr)}
  .credits-grid{grid-template-columns:1fr}
  .gallery__item{grid-column:span 6}
  .gallery__item--large{grid-column:span 12}
  .about{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav{padding-top:18px}
  .nav__links{display:none}
  .hero__content{padding-bottom:46px}
  .quick-card__grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr}
  .gallery__item, .gallery__item--large{grid-column:auto; min-height:260px}
  .contact-grid{grid-template-columns:1fr}
  .footer__inner, .video-card__meta{flex-direction:column; align-items:flex-start}
}
