:root{
  --bg:#0b1e22; --bg2:#0e262b; --ink:#f2f7f7; --muted:#9db8b8;
  --accent:#ff5a1f; --accent2:#ffb01f; --line:#1e3a40;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;}
.hero{position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:48px 20px; overflow:hidden;}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);}
.hero-shade{position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(11,30,34,.62) 0%, rgba(11,30,34,.28) 35%,
      rgba(11,30,34,.55) 70%, var(--bg) 100%),
    linear-gradient(100deg, rgba(11,30,34,.55) 0%, rgba(11,30,34,.05) 55%, rgba(11,30,34,.35) 100%);}
.hero-inner{position:relative; z-index:1; max-width:900px;}
.kicker{letter-spacing:.35em; text-transform:uppercase; color:var(--muted); font-size:13px; margin-bottom:12px;
  text-shadow:0 2px 12px rgba(0,0,0,.8);}
.wordmark{font-size:clamp(52px,11vw,120px); font-weight:900; letter-spacing:.04em; line-height:1;
  background:linear-gradient(100deg,var(--accent2),var(--accent) 60%, #ff2e63);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.75));}
.wordmark span{display:block; font-size:.62em; letter-spacing:.28em; margin-top:6px;}
.tagline{font-size:clamp(20px,3.5vw,30px); font-weight:700; margin-top:14px; color:var(--ink);
  text-shadow:0 2px 14px rgba(0,0,0,.85);}
.socials{display:flex; gap:18px; justify-content:center; margin-top:28px;}
.socials a{width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:12px; background:rgba(11,30,34,.55); backdrop-filter:blur(4px);
  transition:transform .15s, border-color .15s;}
.socials a:hover{transform:translateY(-3px); border-color:var(--accent);}
.socials svg{width:24px; height:24px; fill:var(--ink);}
.scroll{display:inline-block; margin-top:44px; font-size:34px; color:var(--muted); text-decoration:none;
  animation:bob 1.8s ease-in-out infinite; text-shadow:0 2px 10px rgba(0,0,0,.8);}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.section{max-width:860px; margin:0 auto; padding:72px 20px;}
.section h2{font-size:clamp(26px,4vw,38px); font-weight:800; margin-bottom:14px; letter-spacing:.02em;}
.section p{color:var(--muted); font-size:18px; max-width:60ch;}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:26px;}
.card{display:block; background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  padding:22px; text-decoration:none; color:var(--ink); transition:transform .15s, border-color .15s;}
.card:hover{transform:translateY(-4px); border-color:var(--accent);}
.card h3{font-size:20px; margin-bottom:8px;}
.card p{font-size:15px;}
.cinematics{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:26px;}
.cine{background:var(--bg2); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:transform .15s, border-color .15s;}
.cine:hover{transform:translateY(-4px); border-color:var(--accent);}
.cine video{width:100%; aspect-ratio:16/9; display:block; background:#000;}
.cine figcaption{padding:18px 20px 20px;}
.cine figcaption strong{display:block; font-size:19px; margin-bottom:4px;}
.cine figcaption span{color:var(--muted); font-size:15px;}
.archive-link{margin-top:24px;}
.archive-link a, .back a{color:var(--accent2); font-weight:700; text-decoration:none; font-size:17px;}
.archive-link a:hover, .back a:hover{color:var(--accent);}
.back{margin-bottom:10px;}
.buttons{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;}
.btn{display:inline-block; padding:13px 26px; border-radius:10px; font-weight:700; font-size:16px;
  color:#10181a; background:linear-gradient(100deg,var(--accent2),var(--accent)); text-decoration:none;
  transition:transform .15s;}
.btn:hover{transform:translateY(-2px);}
footer{border-top:1px solid var(--line); text-align:center; padding:26px 20px; color:var(--muted); font-size:14px;}