:root{
  --bg: #0a0a0c;
  --bg-2: #0f0f12;
  --txt: #e7e7ea;
  --muted: #a3a6af;
  --line: #222228;
  --ring: rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--txt);
  background: radial-gradient(1200px 500px at 50% -220px, #18181d 0%, var(--bg) 60%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Header inspired by williamle.design */
.topbar{
  height:56px; position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns: 56px 1fr 80px; align-items:center;
  background:linear-gradient(to bottom, rgba(10,10,12,.9), rgba(10,10,12,.6));
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  padding:0 14px;
}
.logo{display:grid; place-items:center; width:32px; height:32px; border-radius:8px; text-decoration:none}
.w-mark{
  width:18px;height:18px; display:block; border-radius:4px;
  background: conic-gradient(from 160deg, #59ffa0, #7aa2ff, #ff6edc, #ffdc5a, #59ffa0);
  filter:saturate(110%);
}
.topnav{justify-self:center; display:flex; gap:6px; padding:4px; border-radius:999px; border:1px solid var(--line); background:#0c0c10a0}
.topnav a{
  text-decoration:none; color:var(--muted); font-size:13px; padding:6px 12px; border-radius:999px;
}
.topnav a:hover{color:var(--txt); background:rgba(255,255,255,.03)}
.clock{justify-self:end; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}

/* Containers */
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.section{padding:68px 0}
.section-label{
  text-transform:uppercase;
  font-size:12px; letter-spacing:.22em;
  color:var(--muted); text-align:center; margin:0 0 18px;
}

/* Hero */
.hero{display:grid; gap:28px; justify-items:center; align-items:center; min-height:70vh}
.hero-art{
  width:min(960px, 92vw); aspect-ratio: 16/6; border:1px solid var(--line);
  border-radius:22px; background:linear-gradient(180deg, #121216, #0d0d10);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  display:grid; place-items:center; overflow:hidden;
}
.hero-art img{width:100%; height:100%; object-fit:cover; display:block}
.hero-copy{text-align:center}
.display{font-family:Sora, Inter, sans-serif; font-weight:600; letter-spacing:-.02em; font-size: clamp(36px, 6vw, 56px); margin:10px 0 6px}
.tagline{color:var(--muted); font-size: clamp(16px, 2vw, 18px); margin:0 0 12px}
.chips{display:flex; gap:8px; justify-content:center; margin:6px 0 10px}
.chips span{border:1px solid var(--line); background:#111116; padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted)}
.cta{display:flex; gap:12px; justify-content:center}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; border:1px solid var(--line); color:var(--txt); text-decoration:none; background:#111114; box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.35)}
.btn:hover{background:#141418}
.btn-primary{background:linear-gradient(180deg,#1a1a1f,#101014)}

/* Spotlight */
.spotlight{display:grid; grid-template-columns: 1.25fr 1fr; gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:linear-gradient(180deg,#111113,#0f0f11); box-shadow: 0 20px 60px rgba(0,0,0,.35)}
.spotlight-media img{width:100%; height:100%; object-fit:cover; display:block}
.spotlight-copy{padding:22px}
.eyebrow{color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px}
.spotlight h3{margin:0 0 8px; font-size:22px}
.muted{color:var(--muted)}
.btn-row{display:flex; gap:10px; margin-top:12px}

/* Work grid */
.work-grid{display:grid; grid-template-columns:1fr; gap:18px}
.work-card{display:grid; grid-template-columns: 200px 1fr; gap:18px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#111113,#0d0d10)}
.work-thumb img{width:100%; height:140px; object-fit:cover; border-radius:12px}
.work-copy h3{margin:6px 0 6px; font-size:20px}
.card-meta{color:var(--muted); font-size:12px}

/* About */
.about{display:grid; grid-template-columns: 280px 1fr; gap:24px; align-items:center}
.about-pic img{width:100%; border-radius:16px; border:1px solid var(--line)}
.about-copy p{margin:0 0 10px}

/* Contact & Footer */
.center{text-align:center}
.contact{display:flex; gap:14px; justify-content:center; align-items:center; border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:linear-gradient(180deg,#101012,#0d0d0f)}
.contact a{color:var(--txt); text-decoration:none; border-bottom:1px dashed transparent}
.contact a:hover{border-bottom-color:var(--line)}
.dot{color:#555}
.sitefoot{padding:40px 20px; color:var(--muted); text-align:center; border-top:1px solid var(--line); margin-top:42px}

/* Micro-interactions */
.reveal{opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}
.tilt{transform-style:preserve-3d; will-change:transform}
.tilt:hover{transform: perspective(800px) rotateX(1.5deg) rotateY(-1.5deg) scale(1.01)}

/* Responsive */
@media (max-width: 900px){
  .spotlight{grid-template-columns:1fr}
  .work-card{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
}
/* ===== Motion UI (simple + performant) ===== */

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

/* Subtle page polish */
* { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }

/* Hero: slow breathe */
.hero-art img {
  transform: scale(1);
  animation: hero-breathe 14s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

/* On-load fade-up for hero text */
.hero-copy {
  opacity: 0; transform: translateY(10px);
  animation: fade-up .6s ease .2s forwards;
}
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Reuse your .reveal utility for scroll-ins */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.visible { animation: fade-up .6s ease forwards; }

/* Cards: lift on hover */
.work-card {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.work-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

/* Spotlight image: gentle hover zoom */
.spotlight-media img {
  transform: scale(1);
  transition: transform .8s ease;
}
.spotlight-media img:hover { transform: scale(1.05); }

/* Buttons: soft press + sheen */
.btn {
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-primary::after {
  content:""; position:absolute; inset:-60%;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%);
  transform: scale(0); transition: transform .5s ease;
  pointer-events:none; z-index:0;
}
.btn-primary:hover::after { transform: scale(1); }

/* Topnav pills: micro hover */
.topnav a { transition: background .2s ease, color .2s ease, transform .2s ease; }
.topnav a:hover { transform: translateY(-1px); }

/* Tilt: tone it down */
.tilt:hover { transform: perspective(800px) rotateX(1deg) rotateY(-1deg) scale(1.005); }