@font-face{font-family:U;src:url(/fonts/unbounded-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:U;src:url(/fonts/unbounded-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:U;src:url(/fonts/unbounded-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:O;src:url(/fonts/outfit-latin-300-normal.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:O;src:url(/fonts/outfit-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:O;src:url(/fonts/outfit-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:O;src:url(/fonts/outfit-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:O;src:url(/fonts/outfit-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --black:#000;--ink:#16180f;--lime:#C4D82D;--lime-d:#9DAF16;--paper:#F1F2EC;--white:#fff;
  --cyan:#00A6D6;--magenta:#E5007E;--mute:rgba(255,255,255,.62);--line:rgba(255,255,255,.14);
  --pad:clamp(20px,5vw,72px);--maxw:1440px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);color:var(--white);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:O,system-ui,sans-serif;font-size:clamp(16px,1.1vw,18px);line-height:1.55;background:var(--black);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:#000;padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:8px}
::selection{background:var(--lime);color:#000}

.h2{font-family:U;font-weight:800;font-size:clamp(38px,6.2vw,96px);line-height:.95;letter-spacing:-.035em}
.lead{font-size:clamp(18px,1.5vw,22px);color:var(--mute);max-width:34ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:999px;font-weight:600;font-size:16px;border:0;cursor:pointer;white-space:nowrap;transition:background .3s,color .3s,transform .3s var(--ease)}
.btn-lime{background:var(--lime);color:#000}
.btn-lime:hover{background:#fff}
.btn-ghost{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:32px;padding:18px var(--pad);transition:background .4s,backdrop-filter .4s,padding .4s}
.nav.scrolled{background:rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px}
.nav-logo img{width:clamp(130px,11vw,170px);height:auto}
.nav-links{display:flex;gap:30px;margin-left:auto;font-weight:500}
.nav-links a{position:relative;opacity:.8;transition:opacity .3s}
.nav-links a:hover{opacity:1}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{height:46px;padding:0 22px}
.burger{display:none;margin-left:auto;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:14px;right:14px;height:2px;background:#fff;transition:transform .4s var(--ease)}
.burger span:first-child{top:19px}.burger span:last-child{top:27px}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:55;background:var(--lime);color:#000;display:flex;flex-direction:column;justify-content:center;gap:40px;padding:var(--pad);clip-path:circle(0 at calc(100% - 44px) 42px);transition:clip-path .7s var(--ease);visibility:hidden}
.menu.open{clip-path:circle(150% at calc(100% - 44px) 42px);visibility:visible}
.menu nav{display:flex;flex-direction:column;gap:6px}
.menu nav a{font-family:U;font-weight:800;font-size:clamp(40px,11vw,72px);letter-spacing:-.03em;line-height:1.1}
.menu .btn{background:#000;color:var(--lime);align-self:flex-start}

/* hero */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end;padding:0 var(--pad) clamp(48px,8vh,96px)}
#dots{position:absolute;inset:0;width:100%;height:100%}
.hero-copy{position:relative;z-index:2;max-width:880px;pointer-events:none}
.hero-copy a{pointer-events:auto}
.hero-kicker{color:var(--lime);font-weight:500;margin-bottom:18px}
.hero-title{font-family:U;font-weight:800;font-size:clamp(52px,10.4vw,168px);line-height:.88;letter-spacing:-.05em;margin-bottom:28px}
.ht-line{display:block;overflow:hidden;padding-bottom:.06em}
.ht-word{display:inline-block}
.ht-outline{color:transparent;-webkit-text-stroke:2px var(--lime)}
.hero-sub{max-width:44ch;color:var(--mute);font-size:clamp(17px,1.35vw,21px);margin-bottom:34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-scroll{position:absolute;right:var(--pad);bottom:clamp(48px,8vh,96px);width:2px;height:90px;background:var(--line);overflow:hidden;z-index:2}
.hero-scroll span{position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--lime);animation:drip 2s var(--ease) infinite}
@keyframes drip{to{top:100%}}
.reg{position:absolute;width:28px;height:28px;z-index:2;opacity:.55}
.reg::before,.reg::after{content:"";position:absolute;background:#fff}
.reg::before{left:13px;top:0;width:1px;height:28px}.reg::after{top:13px;left:0;height:1px;width:28px}
.reg{border-radius:50%;box-shadow:inset 0 0 0 1px #fff}
.reg-tl{left:calc(var(--pad) - 4px);top:110px}.reg-tr{right:calc(var(--pad) - 4px);top:110px}
.reg-bl{left:calc(var(--pad) - 4px);bottom:24px;box-shadow:inset 0 0 0 1px var(--cyan)}.reg-br{right:calc(var(--pad) - 4px);bottom:24px;box-shadow:inset 0 0 0 1px var(--magenta)}

/* statement */
.statement{padding:clamp(100px,16vh,200px) var(--pad);max-width:var(--maxw);margin:0 auto}
.fill-text{font-family:U;font-weight:600;font-size:clamp(26px,3.6vw,56px);line-height:1.18;letter-spacing:-.025em;max-width:24ch}
.fill-text .ch{color:rgba(255,255,255,.14)}
.aud{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(60px,9vh,110px);border-top:1px solid var(--line)}
.aud div{padding:26px 24px 0 0;display:flex;flex-direction:column;gap:6px}
.aud strong{font-family:U;font-weight:600;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.01em}
.aud span{color:var(--mute)}

/* services */
.services{position:relative}
.svc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--pad) 48px;max-width:var(--maxw);margin:0 auto}
.svc-hint{color:var(--mute)}
.svc-pin{height:100svh;overflow:hidden;position:relative}
.svc-track{display:flex;gap:clamp(20px,3vw,48px);height:100%;align-items:center;padding:0 var(--pad);width:max-content;will-change:transform}
.sheet{position:relative;flex:none;width:min(78vw,1080px);height:min(74svh,640px);display:grid;grid-template-columns:1.25fr 1fr;background:var(--paper);color:#000;border-radius:6px;overflow:hidden}
.sheet:nth-child(even){background:var(--lime)}
.crop{position:absolute;inset:14px;pointer-events:none;z-index:3;
  background:
   linear-gradient(#000,#000) left 0 top 0/16px 1px no-repeat,linear-gradient(#000,#000) left 0 top 0/1px 16px no-repeat,
   linear-gradient(#000,#000) right 0 top 0/16px 1px no-repeat,linear-gradient(#000,#000) right 0 top 0/1px 16px no-repeat,
   linear-gradient(#000,#000) left 0 bottom 0/16px 1px no-repeat,linear-gradient(#000,#000) left 0 bottom 0/1px 16px no-repeat,
   linear-gradient(#000,#000) right 0 bottom 0/16px 1px no-repeat,linear-gradient(#000,#000) right 0 bottom 0/1px 16px no-repeat;opacity:.55}
.sheet-media{position:relative;overflow:hidden;background:#000;margin:14px 0 14px 14px;border-radius:3px}
.sheet-media img{position:absolute;inset:-8% -14%;width:128%;max-width:none;height:116%;object-fit:cover;will-change:transform}
.sheet-phone{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,#2a3008,#000 70%)}
.phone{width:min(46%,240px);aspect-ratio:9/19;border-radius:34px;padding:9px;background:#111;box-shadow:0 0 0 2px #333,0 40px 80px rgba(0,0,0,.6);overflow:hidden}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:26px}
.sheet-body{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:flex-end;gap:16px}
.sheet-n{font-family:U;font-weight:600;font-size:15px;margin-bottom:auto;opacity:.5}
.sheet h3{font-family:U;font-weight:800;font-size:clamp(28px,3vw,48px);line-height:1;letter-spacing:-.035em}
.sheet p{font-size:clamp(16px,1.2vw,19px);max-width:30ch;opacity:.8}
.sheet ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sheet li{padding:7px 14px;border:1.5px solid rgba(0,0,0,.75);border-radius:999px;font-weight:500;font-size:15px}

/* products */
.products{position:relative;padding:clamp(120px,18vh,220px) var(--pad) clamp(80px,12vh,140px);max-width:var(--maxw);margin:0 auto;overflow:visible}
.float-stage{position:absolute;inset:40px 0 200px;pointer-events:none}
.fl{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;rotate:var(--r);filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));will-change:transform}
.prod-copy{position:relative;z-index:2;max-width:700px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px;padding:clamp(40px,8vh,120px) 0}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.chips li{padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-weight:500;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s,color .3s,border-color .3s}
.chips li:hover{background:var(--lime);color:#000;border-color:var(--lime)}
.qty{position:relative;z-index:2;margin:clamp(60px,10vh,120px) auto 0;max-width:980px}
.qty-num{font-family:U;font-weight:800;font-size:clamp(64px,12vw,180px);line-height:1;letter-spacing:-.05em;color:var(--lime);display:flex;align-items:baseline;gap:18px;font-variant-numeric:tabular-nums}
.qty-num small{font-family:O;font-weight:500;font-size:clamp(16px,1.4vw,22px);letter-spacing:0;color:var(--mute)}
.qty-bar{height:4px;background:var(--line);margin:18px 0 12px;border-radius:2px;overflow:hidden}
.qty-bar i{display:block;height:100%;background:var(--lime);transform-origin:left;transform:scaleX(0)}
.qty-scale{display:flex;justify-content:space-between;color:var(--mute);font-weight:500;font-variant-numeric:tabular-nums}

/* work */
.work{padding:clamp(80px,12vh,160px) var(--pad);max-width:var(--maxw);margin:0 auto}
.work-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:48px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;font-weight:500;transition:background .3s,color .3s,border-color .3s}
.filters button[aria-selected=true]{background:var(--lime);color:#000;border-color:var(--lime)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,24px)}
.card{grid-column:span 4;position:relative;border-radius:18px;overflow:hidden;background:#111;cursor:pointer;aspect-ratio:4/5;border:0;text-align:left;padding:0;transform-style:preserve-3d}
.card.wide{grid-column:span 8;aspect-ratio:auto}
.card .cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s}
.card:hover .cimg{transform:scale(1.06)}
.card .cshade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85))}
.card .cinfo2{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;display:flex;flex-direction:column;gap:4px}
.card .ccat{color:var(--lime);font-weight:600;font-size:14px}
.card .ctitle{font-family:U;font-weight:600;font-size:clamp(18px,1.5vw,24px);line-height:1.15;letter-spacing:-.02em}
.card .cplay{position:absolute;top:18px;right:18px;width:54px;height:54px;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.card .cplay::before{content:"";border-left:14px solid #000;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.grid-empty{grid-column:1/-1;color:var(--mute);padding:40px 0}

/* process */
.process{position:relative;padding:clamp(80px,12vh,160px) var(--pad);max-width:var(--maxw);margin:0 auto}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,32px);margin-top:56px;position:relative;z-index:2}
.steps li{padding-top:34px;border-top:1px solid var(--line);position:relative}
.steps li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:#000;box-shadow:0 0 0 2px var(--lime)}
.step-n{font-family:U;font-weight:800;font-size:clamp(40px,4vw,64px);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35);display:block;margin-bottom:12px;letter-spacing:-.04em}
.steps h3{font-family:U;font-weight:600;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.01em;margin-bottom:8px}
.steps p{color:var(--mute)}
.paper-path{position:absolute;left:var(--pad);right:var(--pad);top:calc(clamp(80px,12vh,160px) + clamp(38px,6.2vw,96px) + 56px);height:2px;z-index:1}
.paper-path i{display:block;height:100%;background:var(--lime);transform-origin:left;transform:scaleX(0)}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);padding:clamp(80px,12vh,160px) var(--pad);max-width:var(--maxw);margin:0 auto}
.contact-l .h2{margin-bottom:40px}
.cinfo{display:flex;flex-direction:column;gap:10px}
.cbig{font-family:U;font-weight:800;font-size:clamp(32px,4vw,60px);letter-spacing:-.03em;color:var(--lime);line-height:1.05;width:fit-content}
.cline{font-size:clamp(17px,1.3vw,20px);color:var(--mute);width:fit-content;transition:color .3s}
a.cline:hover{color:#fff}
.caddr{max-width:34ch}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,border-color .3s}
.socials a:hover{background:var(--lime);border-color:var(--lime)}
.socials a:hover svg{fill:#000}
.socials svg{width:20px;height:20px;fill:#fff;transition:fill .3s}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:start;background:#0e0f0a;border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,40px)}
.form label{display:flex;flex-direction:column;gap:8px;font-weight:500;font-size:15px;color:var(--mute)}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{background:#000;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:14px 16px;color:#fff;font-size:16px;transition:border-color .3s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--lime);outline:none}
.form textarea{resize:vertical;min-height:110px}
.form-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-msg{color:var(--mute)}
.form-msg.ok{color:var(--lime)}.form-msg.err{color:#ff8a8a}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.map{grid-column:1/-1;width:100%;height:360px;border:0;border-radius:22px;filter:grayscale(1) invert(.92) contrast(.9)}

/* footer */
.foot{padding:40px var(--pad) 30px;overflow:hidden}
.foot-row{padding-right:80px}
.foot-word{font-family:U;font-weight:800;font-size:clamp(48px,13.4vw,220px);letter-spacing:-.06em;line-height:.85;color:transparent;-webkit-text-stroke:1.5px rgba(196,216,45,.5);white-space:nowrap;text-align:center}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);color:var(--mute)}

/* floating whatsapp */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:50;width:62px;height:62px;border-radius:50%;background:var(--lime);display:grid;place-items:center;box-shadow:0 10px 30px rgba(196,216,45,.35);transition:transform .4s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);animation:ping 2.4s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,60px)}
.lightbox[hidden]{display:none}
.lb-inner{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,48px);width:min(1200px,100%);max-height:100%;align-items:center}
.lb-media{display:flex;flex-direction:column;gap:12px;max-height:84svh;overflow:auto;border-radius:16px}
.lb-media img,.lb-media video,.lb-media iframe{width:100%;border-radius:16px;background:#111}
.lb-media video{max-height:80svh;object-fit:contain}
.lb-media iframe{aspect-ratio:16/9;border:0}
.lb-cat{color:var(--lime);font-weight:600}
.lb-info h3{font-family:U;font-weight:800;font-size:clamp(26px,2.8vw,42px);line-height:1.05;letter-spacing:-.03em;margin:8px 0 10px}
.lb-client{color:var(--mute);margin-bottom:16px}
.lb-info p:not(.lb-cat):not(.lb-client){margin-bottom:26px;color:rgba(255,255,255,.85)}
.lb-close{position:absolute;top:20px;right:20px;height:46px;padding:0 20px;border-radius:999px;background:#fff;color:#000;border:0;font-weight:600;cursor:pointer}

/* cursor */
.cursor{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1.5px solid rgba(196,216,45,.8);pointer-events:none;z-index:150;transition:width .3s,height .3s,margin .3s,background .3s;display:none}
.cursor i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--lime)}
.cursor.big{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(196,216,45,.12)}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}

/* responsive */
@media (max-width:1024px){
  .nav-links,.nav-cta{display:none}.burger{display:block}
  .aud{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .paper-path{display:none}
  .contact{grid-template-columns:1fr}
  .card{grid-column:span 6}.card.wide{grid-column:span 12;aspect-ratio:16/10}
  .lb-inner{grid-template-columns:1fr;overflow:auto;max-height:90svh}
}
@media (max-width:760px){
  .svc-pin{height:auto;overflow:visible}
  .svc-track{flex-direction:column;width:auto;padding:0 var(--pad);gap:18px}
  .sheet{width:100%;height:auto;grid-template-columns:1fr}
  .sheet-media{aspect-ratio:4/3;margin:12px 12px 0}
  .sheet-phone{aspect-ratio:auto;padding:28px 0}
  .phone{width:52%}
  .svc-hint{display:none}
  .svc-head{padding-bottom:28px}
  .float-stage{inset:0;opacity:.55}
  .card,.card.wide{grid-column:span 12;aspect-ratio:4/5}
  .form{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .aud div{padding-right:12px}
  .aud strong{font-size:16px}
  .hero{min-height:600px}
  .reg-tl,.reg-tr{top:92px}
  .map{height:280px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
