*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

:root {
  --green:  #C6FF00;
  --green2: #9FE000;
  --ink:    #0A0A0A;
  --ink2:   #121212;
  --card:   #151515;
  --border: rgba(var(--w-rgb),.09);
  --w:      #FFFFFF;
  --gray:   #A3A3A3;
  --gray2:  #6E6E6E;
  --ink-rgb: 10,10,10;
  --w-rgb:   255,255,255;
}

body {
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  color:var(--w);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
a, button { text-decoration:none; color:inherit; cursor:none; }
ul { list-style:none; }
img { display:block; max-width:100%; }
h1, h2 {
  font-family:'Bebas Neue', 'Hanken Grotesk', sans-serif;
  font-weight:400;
}
h3, .btn, .section-tag, .hdr-nav a {
  font-family:'Hanken Grotesk', sans-serif; font-weight:700;
}
@media (pointer:coarse) {
  body, a, button { cursor:auto; }
  .cursor-dot { display:none; }
}

.wrap { max-width:1280px; margin:0 auto; padding:0 2rem; position:relative; }

/* --- CUSTOM CURSOR --- */
.cursor-dot {
  position:fixed; top:0; left:0; width:0; height:0;
  pointer-events:none; z-index:10000; mix-blend-mode:difference;
  transform:translate(-50%,-50%); will-change:transform;
}
.cursor-dot-inner {
  display:block; width:16px; height:16px; border-radius:50%; background:var(--green);
  transition:transform .18s, background .18s;
}
.cursor-dot.hover .cursor-dot-inner { transform:scale(3); background:var(--w); }

/* --- GRAIN --- */
.grain {
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* --- REVEAL --- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* --- BUTTONS --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.8rem; border-radius:3px;
  font-size:.9rem; font-weight:700; letter-spacing:.01em;
  transition:transform .15s, opacity .15s, background .15s, color .15s;
  border:2px solid transparent;
  clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);
}
.btn-primary { background:var(--green); color:#0a0a0a; }
.btn-primary:hover { transform:translateY(-2px); background:var(--green2); }
.btn-outline { border-color:rgba(var(--w-rgb),.25); color:var(--w); }
.btn-outline:hover { border-color:var(--green); color:var(--green); }
.btn-hdr { padding:.6rem 1.3rem; font-size:.82rem; }

/* --- HEADER --- */
#site-header {
  position:fixed; inset:0 0 auto 0; z-index:999;
  background:
    radial-gradient(ellipse 800px 200px at 50% 0%, rgba(198,255,0,.1), transparent 65%),
    rgba(var(--ink-rgb),.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.hdr-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:1.5rem;
}
.hdr-logo img { height:58px; width:auto; }

.hdr-nav { display:flex; align-items:center; gap:.2rem; margin-left:auto; }
.hdr-nav li a {
  display:flex; align-items:center; gap:.45rem; padding:.55rem .9rem; border-radius:4px;
  font-size:.85rem; font-weight:600; color:var(--gray);
  transition:color .15s, background .15s;
}
.hdr-nav li a span { font-size:.68rem; color:var(--green2); font-weight:700; }
.hdr-nav li a:hover { color:var(--w); background:rgba(var(--w-rgb),.06); }

.hdr-social { display:flex; align-items:center; gap:.4rem; margin-left:.6rem; padding-left:.8rem; border-left:1px solid var(--border); }
.hdr-social a { display:flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:50%; color:var(--gray); transition:color .15s, background .15s; }
.hdr-social a svg { width:16px; height:16px; }
.hdr-social a:hover { color:var(--green); background:rgba(198,255,0,.08); }

.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px; }
.burger span { display:block; width:22px; height:2px; background:var(--w); border-radius:2px; }

.mob { display:none; background:var(--ink2); border-top:1px solid var(--border); }
.mob.on { display:block; }
.mob a { display:block; padding:.9rem 2rem; font-size:.9rem; color:var(--gray); border-bottom:1px solid var(--border); }
.mob-social { display:flex; gap:.6rem; padding:1rem 2rem; }
.mob-social a { display:flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:50%; background:rgba(var(--w-rgb),.06); color:var(--gray); }
.mob-social a svg { width:17px; height:17px; }
.mob a:hover { color:var(--green); }

/* --- MARQUEE --- */
.marquee {
  overflow:hidden; white-space:nowrap;
  position:sticky; top:68px; z-index:500;
  background:rgba(var(--ink-rgb),.88); backdrop-filter:blur(10px);
  border-top:1px solid rgba(198,255,0,.22); border-bottom:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.marquee-track--static { display:flex; width:100%; justify-content:center; gap:2.2rem; }
.marquee .marquee-track span { font-size:.72rem; font-weight:600; letter-spacing:.22em; color:var(--green); padding:.65rem 0; }
.marquee .marquee-track span:nth-child(even) { color:var(--gray2); font-weight:400; letter-spacing:.1em; }

/* --- HERO (full-bleed video) --- */
.hero { position:relative; background:var(--ink); }

.hero-reel-frame {
  position:relative; width:100%; height:100vh; min-height:640px;
  overflow:hidden; background:#000;
}
.hero-reel-frame video { width:100%; height:100%; display:block; object-fit:contain; background:var(--ink); }

.hero-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(var(--ink-rgb),.55) 0%, rgba(var(--ink-rgb),.05) 22%, rgba(var(--ink-rgb),.05) 80%, rgba(var(--ink-rgb),.6) 100%),
    linear-gradient(180deg, rgba(var(--ink-rgb),.5) 0%, transparent 18%);
}

.hero-reel-tag {
  position:absolute; top:96px; left:2rem; z-index:3;
  background:var(--green); color:#0a0a0a; font-weight:700; font-size:.78rem;
  letter-spacing:.04em; text-transform:uppercase; padding:.5rem 1rem;
  clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
}

.hero-mute-btn {
  position:absolute; bottom:2rem; right:2rem; z-index:3;
  width:44px; height:44px; border-radius:50%;
  background:rgba(var(--ink-rgb),.5); border:1px solid rgba(var(--w-rgb),.3); color:var(--w);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:background .2s, border-color .2s, color .2s;
}
.hero-mute-btn:hover { background:var(--green); border-color:var(--green); color:#0a0a0a; }
.hero-mute-btn svg { width:20px; height:20px; }
.hero-mute-btn .icon-sound { display:none; }
.hero-mute-btn[aria-pressed="true"] .icon-muted { display:none; }
.hero-mute-btn[aria-pressed="true"] .icon-sound { display:block; }

.hero-scroll-cue {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(var(--w-rgb),.7);
}
.hero-scroll-cue::after {
  content:''; width:1px; height:26px; background:linear-gradient(rgba(var(--w-rgb),.7), transparent);
  animation:scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue { 0%,100% { opacity:.3; transform:scaleY(.6); transform-origin:top; } 50% { opacity:1; transform:scaleY(1); transform-origin:top; } }

/* --- HERO STATEMENT --- */
.hero-statement {
  position:relative; overflow:hidden;
  padding:110px 0 100px;
  background:radial-gradient(ellipse 900px 500px at 88% 0%, rgba(198,255,0,.09), transparent 60%), var(--ink);
}
.hero-statement-shapes { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hs-shape { position:absolute; clip-path:polygon(30% 0, 100% 0, 70% 100%, 0 100%); }
.hs-shape.hs-1 { width:220px; height:520px; top:-80px; right:10%; background:var(--green); opacity:.05; }
.hs-shape.hs-2 { width:120px; height:520px; top:-40px; right:5%; background:var(--w); opacity:.03; }
.hs-line { position:absolute; top:0; bottom:0; left:12%; width:1px; background:var(--border); }
.hero-statement .wrap { position:relative; z-index:1; }
.hero-title { margin-bottom:1.6rem; }
.ht-stroke, .ht-fill {
  display:block; font-size:clamp(2.6rem,6.2vw,5rem);
  line-height:1.05; letter-spacing:.02em; text-transform:uppercase;
}
.ht-stroke {
  color:transparent; -webkit-text-stroke:1.25px rgba(var(--w-rgb),.75);
  margin-bottom:.1em;
}
.ht-fill { color:var(--w); }
.ht-fill em { color:var(--green); font-style:normal; }

.hero-desc {
  font-size:1.08rem; line-height:1.7; color:var(--gray);
  max-width:520px; margin-bottom:2.2rem;
}
.hero-cta { display:flex; flex-wrap:wrap; gap:1rem; }

/* --- SECTIONS --- */
.section { padding:110px 0; }
.section-dark { background:var(--ink2); }

.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:4rem; }
.section-tag {
  font-size:.8rem; font-weight:700; letter-spacing:.1em; color:var(--green); margin-bottom:.6rem;
}
.section-title {
  font-size:clamp(2.2rem,4.4vw,3.6rem); font-weight:400;
  letter-spacing:.01em; line-height:1.05; text-transform:uppercase;
}

/* --- SERVICES (editorial list) --- */
.service-list { border-top:1px solid var(--border); }
.service-row {
  display:grid; grid-template-columns:70px 1fr 1fr 60px; align-items:center; gap:2rem;
  padding:2.1rem 0; border-bottom:1px solid var(--border);
  position:relative; transition:transform .3s;
}
.service-row::before {
  content:''; position:absolute; left:-1.5rem; top:0; bottom:0; width:3px; background:var(--green);
  transform:scaleY(0); transform-origin:bottom; transition:transform .35s;
}
.service-row:hover::before { transform:scaleY(1); }
.service-row:hover { transform:translateX(1.5rem); }
.service-num { font-size:.95rem; font-weight:700; color:var(--gray2); }
.service-row h3 { font-size:1.5rem; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; }
.service-row p { font-size:.92rem; line-height:1.6; color:var(--gray); }
.service-icon { justify-self:end; width:38px; height:38px; color:var(--green); opacity:0; transform:translateX(-8px) rotate(-8deg); transition:opacity .3s, transform .3s; }
.service-icon svg { width:100%; height:100%; }
.service-row:hover .service-icon { opacity:1; transform:none; }

/* --- WORKS --- */
.works-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
.work-card { transition:transform .25s; }
.work-card:hover { transform:translateY(-6px); }
.work-frame {
  position:relative; border-radius:6px;
  background:#000; border:1px solid var(--border); overflow:hidden;
  transition:border-color .25s;
}
.work-card:hover .work-frame { border-color:rgba(198,255,0,.45); }
.work-card video { width:100%; display:block; aspect-ratio:16/9; background:#000; object-fit:cover; transition:transform .5s ease; }
.work-card:hover video { transform:scale(1.06); }

.play-btn {
  position:absolute; top:50%; left:50%; z-index:2;
  transform:translate(-50%,-50%) scale(.85);
  width:54px; height:54px; border-radius:50%;
  background:rgba(198,255,0,.92); color:#0a0a0a;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s, transform .25s;
}
.play-btn svg { width:20px; height:20px; margin-left:2px; }
.work-card:hover .play-btn { opacity:1; transform:translate(-50%,-50%) scale(1); }

.work-info { padding:1.1rem .2rem .2rem; }
.work-client {
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green); margin-bottom:.4rem;
}
.work-info h3 { font-size:.98rem; font-weight:600; line-height:1.4; color:var(--w); }

/* --- LIGHTBOX --- */
.lightbox {
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center; padding:2rem;
}
.lightbox.is-open { display:flex; }
.lightbox-backdrop {
  position:absolute; inset:0; background:rgba(var(--ink-rgb),.94); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .3s ease;
}
.lightbox.is-open .lightbox-backdrop { opacity:1; }
.lightbox-inner {
  position:relative; max-width:90vw; max-height:86vh;
  transform:scale(.9) translateY(10px); opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.lightbox.is-open .lightbox-inner { transform:scale(1) translateY(0); opacity:1; }
#lightboxVideo {
  display:block; max-width:90vw; max-height:86vh; width:auto; height:auto;
  border-radius:8px; background:#000; box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox-tag {
  position:absolute; top:-2.4rem; left:0;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green);
}
.lightbox-close {
  position:absolute; top:-2.6rem; right:0; z-index:3;
  width:38px; height:38px; border-radius:50%;
  background:rgba(var(--w-rgb),.08); border:1px solid rgba(var(--w-rgb),.25); color:var(--w);
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s, color .2s;
}
.lightbox-close:hover { background:var(--green); color:#0a0a0a; border-color:var(--green); }
.lightbox-close svg { width:18px; height:18px; }

/* --- CTA / CONTACTO --- */
.section-cta {
  text-align:center; position:relative;
  background:radial-gradient(ellipse 800px 400px at 50% 0%, rgba(198,255,0,.1), transparent 65%), var(--ink);
  border-top:1px solid var(--border);
}
.section-cta .section-tag { display:block; }
.cta-title {
  font-size:clamp(2.5rem,5.6vw,4.4rem); font-weight:400; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.05; margin:0 auto 1.4rem; max-width:820px;
}
.cta-title span { color:var(--green); }
.contact-desc { font-size:1.02rem; line-height:1.7; color:var(--gray); max-width:480px; margin:0 auto 2.6rem; }

.contact-links { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }
.contact-pill {
  display:inline-flex; align-items:center; gap:.7rem; padding:1rem 1.6rem;
  border:2px solid rgba(var(--w-rgb),.18); border-radius:3px; font-weight:700; font-size:.95rem;
  clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);
  transition:border-color .2s, background .2s, transform .2s;
}
.contact-pill:hover { border-color:var(--green); transform:translateY(-2px); }
.contact-pill--fill { background:var(--green); color:#0a0a0a; border-color:var(--green); }
.contact-pill--fill:hover { background:var(--green2); }
.contact-icon { width:20px; height:20px; display:flex; }
.contact-icon svg { width:100%; height:100%; }

/* --- FOOTER --- */
footer { padding-top:4.5rem; border-top:1px solid var(--border); background:var(--ink2); }
.footer-grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem;
  padding-bottom:3rem; border-bottom:1px solid var(--border);
}
.footer-brand img { height:40px; width:auto; margin-bottom:1.1rem; }
.footer-brand p { font-size:.9rem; line-height:1.7; color:var(--gray); max-width:320px; margin-bottom:1.4rem; }
.footer-social { display:flex; gap:.6rem; }
.footer-social a {
  display:flex; width:44px; height:44px; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--border); color:var(--gray);
  transition:color .2s, border-color .2s, background .2s;
}
.footer-social a svg { width:16px; height:16px; }
.footer-social a:hover { color:var(--green); border-color:var(--green); background:rgba(198,255,0,.08); }

.footer-col h4 {
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green); margin-bottom:1.2rem;
}
.footer-col { display:flex; flex-direction:column; gap:.75rem; }
.footer-col a { font-size:.92rem; color:var(--gray); transition:color .15s; }
.footer-col a:hover { color:var(--w); }

.footer-bottom { padding:1.6rem 0; }
.footer-bottom p { font-size:.8rem; color:var(--gray2); }

@media (max-width:760px) {
  .footer-grid { grid-template-columns:1fr; gap:2.2rem; }
}

/* --- RESPONSIVE --- */
@media (max-width:900px) {
  .service-row {
    grid-template-columns:44px 1fr;
    grid-template-areas:"num title" "num desc";
    row-gap:.5rem;
  }
  .service-num { grid-area:num; }
  .service-row h3 { grid-area:title; }
  .service-row p { grid-area:desc; display:block; }
  .service-icon { display:none; }
  .works-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .hdr-nav { display:none; }
  .btn-hdr { display:none; }
  .hdr-social { display:none; }
  .burger { display:flex; }
  .mob.on { display:block; }
  .hero-reel-frame { height:100svh; min-height:560px; background:var(--ink); }
  .hero-reel-tag { top:80px; left:1.2rem; }
  .hero-statement { padding:70px 0 60px; }
  .section { padding:70px 0; }
  .works-grid { grid-template-columns:1fr; }
}

/* --- MOTION SENSITIVITY --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .cursor-dot { display:none; }
  .service-row, .service-row::before, .service-icon,
  .work-card, .work-card .work-frame, .work-card video, .play-btn,
  .btn, .contact-pill, .lightbox-inner, .lightbox-backdrop {
    transition-duration:.01ms !important;
  }
  .service-row:hover { transform:none; }
  .hero-scroll-cue::after { animation:none; }
}