/* =========================
   Base / Theme
   ========================= */
:root{
  --bg:#000;
  --fg:#eaeaea;
  --muted:#b9b9b9;
  --line:#151515;
  --brand:#ff2a2a;
  --card:#0a0a0a;
  --maxw:1280px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font: 400 16px/1.6 -apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* =========================
   Loader (Emblem + Progress Ring)
   ========================= */
.loader{
  position:fixed; inset:0; display:grid; place-items:center;
  background:radial-gradient(1200px 800px at 50% 40%, #0e0e0e, #000);
  z-index:9999; transition:opacity .6s ease, visibility .6s ease;
}
.loader.hide{opacity:0; visibility:hidden; pointer-events:none}

.loader-inner{display:flex; flex-direction:column; align-items:center; gap:16px}
.emblem-wrap{position:relative; width:min(220px, 44vw); height:min(220px, 44vw); display:grid; place-items:center}
.emblem{width:min(110px, 22vw); height:auto; filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}
.ring{position:absolute; inset:0; filter:drop-shadow(0 0 18px rgba(255,255,255,.18))}

/* Rounded-square progress stroke (uses SVG rect with pathLength=100) */
.ring-progress{
  stroke:#fff;
  stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.35));
  transition:stroke-dashoffset .25s ease;
}

.percent{color:#cfcfcf; font-weight:800; letter-spacing:.06em}
.tip{color:#8c8c8c; font-size:13px; letter-spacing:.05em}

@media (prefers-reduced-motion: reduce){
  .ring-progress{transition:none}
  .loader{transition:none}
}

/* =========================
   Header (minimal)
   ========================= */
header{
  position:fixed; top:0; left:0; right:0; z-index:20;
  background:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
  border-bottom:1px solid transparent;
}
.head{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; align-items:center; gap:14px}
.brand img{height:42px}
.brand strong{font-weight:800; letter-spacing:.06em}
nav a{opacity:.9; margin-left:20px; font-weight:600}
nav a:hover{opacity:1}

/* =========================
   Hero (cinema splash)
   ========================= */
.hero{
  min-height:100vh; display:grid; place-items:center; position:relative;
  background:radial-gradient(1200px 800px at 50% 40%, #0b0b0b, #000);
}
.center{ text-align:center; padding:0 20px; transform:translateY(-4vh) }
.center .logo{
  height:min(160px, 26vw);
  margin:0 auto 22px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.6));
}
h1{ margin:10px 0 14px; font-size:clamp(34px, 6vw, 64px); line-height:1.08; font-weight:900; letter-spacing:-.01em }
.sub{ max-width:820px; margin:0 auto; color:#bdbdbd; font-size:clamp(16px, 2.4vw, 18px) }
.cta{ margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.btn{ padding:12px 18px; border:1px solid #1a1a1a; border-radius:12px; background:#0d0d0d; font-weight:700 }
.btn.primary{ background:#fff; color:#000; border-color:transparent }
.scroll-hint{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  color:#8a8a8a; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
}

/* =========================
   Sections
   ========================= */
.section{ padding:72px 0; border-top:1px solid var(--line) }
.section h2{ font-size:28px; margin:0 0 18px }
.section .lead{ color:#a6a6a6; margin-bottom:26px }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px }

/* =========================
   Cards / Work grid
   ========================= */
.card{ grid-column:span 12; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden }
@media (min-width:800px){ .card{ grid-column:span 6 } }
@media (min-width:1200px){ .card{ grid-column:span 4 } }
.thumb{ aspect-ratio:16/9; background:#0f0f0f }
.thumb img{ width:100%; height:100%; object-fit:cover }
.meta{ padding:16px 16px 18px }
.meta .t{ font-weight:800; font-size:18px }
.meta .d{ color:#a8a8a8; font-size:14px }

/* =========================
   About
   ========================= */
.about{ display:grid; gap:28px }
@media (min-width:980px){ .about{ grid-template-columns:340px 1fr } }
.about .me{ border-radius:16px; overflow:hidden; border:1px solid var(--line) }

/* =========================
   Contact
   ========================= */
.contact-buttons{ display:flex; gap:12px; flex-wrap:wrap }
.contact-buttons .btn{ display:inline-flex; align-items:center; gap:8px }

/* =========================
   Footer
   ========================= */
footer{ border-top:1px solid var(--line); padding:28px 0 64px; color:#8f8f8f }
.foot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }