body{margin:0;background:#070C15}
a{color:#39B54A}a:hover{color:#6FD27C}
.qr{--navy:#0C1524;--ink:#070C15;--g5:#39B54A;--g6:#119849;--g7:#12813C;--mist:#A9B3C1;--paper:#F3F5F1;--line:rgba(255,255,255,.09);--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.4,.64,1);timeline-scope:--hero;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.55;color:#fff;background:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip}
.qr *{box-sizing:border-box}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.disp{font-family:Archivo,sans-serif;font-style:italic;font-weight:800;font-stretch:112%;letter-spacing:-.02em;line-height:.98;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g5);margin:0 0 20px}
.eyebrow svg{width:14px;height:14px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;transition:transform .5s var(--spring),background-color .3s var(--ease),box-shadow .5s var(--ease)}
.btn:hover{transform:scale(1.04)}
.btn:active{transform:scale(.97);transition-duration:.15s}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--g7);color:#fff;box-shadow:0 10px 30px -10px rgba(18,129,60,.7)}
.btn-primary:hover{color:#fff;background:#0F7334;box-shadow:0 16px 40px -12px rgba(57,181,74,.75)}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);backdrop-filter:blur(10px)}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.1)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{color:var(--navy)}

/* Header: vidro acende quando o hero começa a sair */
.hdr{position:sticky;top:0;z-index:50;height:76px}
.hdr-bg{position:absolute;inset:0;background:rgba(9,15,27,.72);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-bottom:1px solid var(--line)}
.hdr-in{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr-logo img{height:34px;display:block}
.nav{display:flex;align-items:center;gap:32px}
.nav a{color:rgba(255,255,255,.82);text-decoration:none;font-size:15px;font-weight:500;transition:color .3s var(--ease)}
.nav a:hover{color:#fff}
.hdr .btn{min-height:44px;padding:0 20px;font-size:15px}
.hdr .btn .sm{display:none}

/* Hero */
.hero{position:relative;margin-top:-76px;height:min(100svh,960px);min-height:680px;overflow:hidden;background:var(--ink);view-timeline:--hero block;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.qr:not(.qr-motion) .hero-media video{display:none}
@media (prefers-reduced-motion:reduce){.hero-media video{display:none}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,#070C15 0%,rgba(7,12,21,.78) 38%,rgba(7,12,21,.2) 75%,rgba(7,12,21,.55) 100%)}
.hero-copy{position:relative;width:100%;padding-bottom:104px}
.hero h1{font-size:clamp(52px,7.6vw,118px);max-width:12ch}
.hero h1 em{font-style:italic;color:var(--g5)}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:#C9D1DC;max-width:600px;margin:28px 0 40px}
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.scroll-hint{position:absolute;right:32px;bottom:40px;display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.scroll-hint i{display:block;width:1px;height:48px;background:linear-gradient(var(--g5),transparent);transform-origin:top}

/* Manifesto */
.manifesto{padding:200px 0 180px;background:var(--ink)}
.manifesto p{font-family:Archivo,sans-serif;font-weight:700;font-stretch:104%;font-size:clamp(34px,4.5vw,66px);line-height:1.1;letter-spacing:-.02em;margin:0;max-width:1120px}
.manifesto .hl{color:var(--g5)}

/* Números */
.stats{background:var(--ink);padding:0 0 160px}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.stat{padding:40px 28px 0 0;border-right:1px solid var(--line);margin-right:28px}
.stat:last-child{border-right:0;margin-right:0}
.num{font-family:Archivo,sans-serif;font-style:italic;font-weight:800;font-stretch:112%;font-size:clamp(56px,6vw,92px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.num small{display:block;margin-top:12px;font-size:20px;line-height:1.2;color:var(--g5);font-stretch:100%;letter-spacing:.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stat p{color:var(--mist);margin:16px 0 0;font-size:16px;max-width:240px}

/* Processo */
.proc{background:var(--navy);position:relative;view-timeline:--proc block}
.proc-sticky{padding:140px 0 120px}
.proc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:56px}
.proc-head h2{font-size:clamp(44px,5vw,76px)}
.proc-head p{color:var(--mist);max-width:420px;margin:0}
.proc-bar{height:2px;background:var(--line);border-radius:2px;margin-top:28px;overflow:hidden}
.proc-bar span{display:block;height:100%;background:var(--g5);transform-origin:left}
.proc-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.step{position:relative;border-radius:28px;background:rgba(255,255,255,.035);border:1px solid var(--line);padding:36px 32px;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.step-n{font-family:Archivo,sans-serif;font-style:italic;font-weight:800;font-size:96px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(57,181,74,.75)}
.step h3{font-family:Archivo,sans-serif;font-weight:700;font-size:26px;line-height:1.15;margin:28px 0 10px}
.step p{color:var(--mist);margin:0;font-size:16px}
.step-intro{background:#000;border-color:transparent;justify-content:flex-end}
.step-intro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.step-intro::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.1) 70%)}
.step-intro div{position:relative;z-index:1}
.step-intro h3{font-family:Archivo,sans-serif;font-style:italic;font-weight:800;font-size:34px;margin:0 0 8px}
.step-out{background:var(--g7);border-color:transparent}
.step-out p{color:#E3F5E6}
.step-out .step-n{-webkit-text-stroke:1.5px rgba(255,255,255,.7)}

/* Produtos */
.light{background:var(--paper);color:var(--navy)}
.prod{padding:160px 0 140px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:64px}
.sec-head h2{font-size:clamp(44px,5vw,76px)}
.sec-head p{max-width:440px;margin:0;color:#4A5566}
.light .eyebrow{color:var(--g7)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.card{background:#fff;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(12,21,36,.06),0 24px 48px -32px rgba(12,21,36,.35);transition:transform .7s var(--spring),box-shadow .7s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:0 1px 0 rgba(12,21,36,.06),0 40px 70px -36px rgba(12,21,36,.5)}
.card-media{aspect-ratio:4/3;overflow:hidden;position:relative;background:#1b222c}
.card-media img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transition:scale 1.2s var(--ease)}
.card:hover .card-media img{scale:1.05}
.card-body{padding:30px 30px 32px;display:flex;flex-direction:column;gap:14px;flex:1}
.card-tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g7)}
.card h3{font-family:Archivo,sans-serif;font-style:italic;font-weight:800;font-stretch:108%;font-size:30px;line-height:1.05;margin:0}
.card p{margin:0;color:#4A5566;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chips span{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:#EEF4EF;color:#1F5E33}
.card-link{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--g7);text-decoration:none}
.card-link svg{width:18px;height:18px;transition:transform .5s var(--spring)}
.card-link:hover{color:#0B5E2A}
.card-link:hover svg{transform:translateX(5px)}

.card-calc{font-size:15px;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:4px}
.card-calc:hover{color:var(--g7)}

/* Calculadora de granulado */
.calc{padding:0 0 160px}
.calc-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;align-items:stretch}
.calc-form{background:#fff;border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 0 rgba(12,21,36,.06),0 24px 48px -32px rgba(12,21,36,.35)}
.calc fieldset{border:0;margin:0;padding:0;min-width:0}
.calc legend{padding:0;margin-bottom:14px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4A5566}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.opt{font:inherit;text-align:left;cursor:pointer;min-height:68px;padding:14px 16px;border-radius:18px;border:1.5px solid #D5DBD3;background:#fff;color:var(--navy);display:flex;flex-direction:column;justify-content:center;gap:2px;transition:transform .5s var(--spring),background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.opt:hover{border-color:var(--g7)}
.opt:active{transform:scale(.97);transition-duration:.15s}
.opt:focus-visible{outline:3px solid var(--g5);outline-offset:2px}
.opt b{font-family:Archivo,sans-serif;font-weight:700;font-size:17px;line-height:1.2}
.opt small{font-size:13px;color:#4A5566}
.opt.on{background:var(--navy);border-color:var(--navy);color:#fff}
.opt.on small{color:#C9D1DC}
.dims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.dims label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:#4A5566}
.dims input{font:inherit;font-size:18px;min-height:52px;padding:0 16px;border-radius:14px;border:1.5px solid #D5DBD3;background:#fff;color:var(--navy);width:100%}
.dims input:focus{outline:3px solid var(--g5);outline-offset:1px;border-color:var(--g7)}
.calc-out{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:28px;padding:40px;display:flex;flex-direction:column;gap:28px}
.calc-lbl{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.big{font-family:Archivo,sans-serif;font-style:italic;font-weight:800;font-stretch:112%;font-size:clamp(64px,7vw,112px);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.big small{font-size:.42em;margin-left:.12em;color:var(--g5)}
.calc-range{margin:12px 0 0;color:#C9D1DC}
.calc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;border-top:1px solid var(--line);padding-top:24px}
.calc-facts b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:26px;line-height:1.15;font-variant-numeric:tabular-nums}
.calc-facts b+span{font-size:14px;color:var(--mist)}
.calc-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.calc-note{margin:0;font-size:14px;color:var(--mist)}

/* Vantagens */
.adv{padding:0 0 160px}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.adv-item{border-top:1px solid #D5DBD3;padding-top:28px}
.adv-ico{width:52px;height:52px;border-radius:16px;background:var(--navy);color:var(--g5);display:grid;place-items:center;margin-bottom:22px}
.adv-ico svg{width:24px;height:24px}
.adv-item h3{font-family:Archivo,sans-serif;font-weight:700;font-size:22px;margin:0 0 8px}
.adv-item p{margin:0;color:#4A5566;font-size:16px}

/* Reciclanip */
.collect{position:relative;overflow:hidden;background:linear-gradient(135deg,#12813C 0%,#0D6630 100%);padding:140px 0}
.marquee{position:absolute;left:0;right:0;display:flex;width:max-content;color:rgba(255,255,255,.1)}
.marquee svg{width:84px;height:84px;flex:none}
.marquee.top{top:28px}
.marquee.bot{bottom:28px}
.collect-in{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:center}
.collect h2{font-size:clamp(44px,5vw,78px)}
.collect p{font-size:19px;color:#E8F6EA;margin:0 0 32px;max-width:520px}
.badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:rgba(0,0,0,.18);font-size:14px;font-weight:600;margin-bottom:24px}
.badge svg{width:18px;height:18px}

/* Imprensa */
.press{background:var(--ink);padding:180px 0}
.press blockquote{margin:0;max-width:1000px}
.press blockquote p{font-family:Archivo,sans-serif;font-style:italic;font-weight:800;font-stretch:108%;font-size:clamp(40px,5vw,80px);line-height:1.02;letter-spacing:-.02em;margin:0}
.press blockquote p span{color:var(--g5)}
.press footer{margin-top:36px;color:var(--mist);display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.press footer strong{color:#fff;font-weight:600}

/* Contato */
.contact{background:var(--navy);padding:160px 0 140px;position:relative;overflow:hidden}
.contact-glow{position:absolute;width:900px;height:900px;border-radius:50%;right:-300px;top:-300px;background:radial-gradient(circle,rgba(57,181,74,.22),transparent 62%)}
.contact-in{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:64px;align-items:start}
.contact h2{font-size:clamp(48px,5.6vw,88px)}
.contact .lead{color:#C9D1DC}
.rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.row{display:flex;gap:20px;align-items:center;padding:24px 4px;border-bottom:1px solid var(--line);color:#fff;text-decoration:none;transition:background-color .3s var(--ease),padding .5s var(--spring)}
a.row:hover{color:#fff;background:rgba(255,255,255,.04);padding-left:14px}
.row-ico{width:48px;height:48px;border-radius:14px;background:rgba(57,181,74,.14);color:var(--g5);display:grid;place-items:center;flex:none}
.row-ico svg{width:22px;height:22px}
.row small{display:block;font-size:13px;color:var(--mist);letter-spacing:.04em}
.row b{font-weight:600;font-size:18px}

/* Rodapé */
.foot{background:var(--ink);padding:72px 0 48px;border-top:1px solid var(--line);color:var(--mist);font-size:15px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot-top img{height:40px;display:block;margin-bottom:16px}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{color:#fff;text-decoration:none}
.foot-links a:hover{color:var(--g5)}
.foot-bot{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}

/* Botão flutuante */
.fab{position:fixed;right:24px;bottom:24px;z-index:60;width:60px;height:60px;border-radius:50%;background:var(--g7);color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(0,0,0,.6);transition:transform .5s var(--spring)}
.fab:hover{color:#fff;transform:scale(1.08)}
.fab svg{width:26px;height:26px}

@media (max-width:900px){
.nav a.nav-link{display:none}
.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat{border-right:0;margin-right:0;padding-bottom:32px;border-bottom:1px solid var(--line)}
.scroll-hint{display:none}
.manifesto{padding:120px 0}
}
@media (max-width:560px){
.wrap{padding:0 20px}
.hdr-logo img{height:26px}
.hdr .btn{padding:0 16px}
.hdr .btn .lg{display:none}
.hdr .btn .sm{display:inline}
.hero-copy{padding-bottom:72px}
.stats-grid{grid-template-columns:minmax(0,1fr)}
.prod,.press,.contact,.collect{padding-top:110px;padding-bottom:110px}
.calc{padding-bottom:110px}
.opts{grid-template-columns:repeat(2,minmax(0,1fr))}
.calc-form,.calc-out{padding:28px 22px}
}

/* ===== Movimento (HIG: com propósito, contínuo, interrompível; desligado com reduced motion) ===== */
@keyframes rise{from{opacity:0;transform:translateY(28px);filter:blur(10px)}}
@keyframes settle{from{opacity:0;transform:scale(1.16)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hint{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes glassOn{from{opacity:0}to{opacity:1}}
@keyframes heroOut{to{transform:scale(1.14) translateY(5%);opacity:.3}}
@keyframes copyOut{to{opacity:0;transform:translateY(-90px)}}
@keyframes wordOn{to{opacity:1}}
@keyframes up{from{opacity:0;transform:translateY(64px) scale(.97)}}
@keyframes para{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
@keyframes slide{to{transform:translateX(calc(-100% + 100cqw - 64px))}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fabIn{from{opacity:0;transform:scale(.5) translateY(30px);pointer-events:none}to{opacity:1;transform:none}}
@keyframes breathe{50%{opacity:.55;transform:scale(1.08)}}

@media (prefers-reduced-motion:no-preference){
.qr-motion .rise{animation:rise 1.2s var(--ease) both;animation-delay:calc(var(--d,0) * 110ms + 250ms)}
.qr-motion .hero-media{animation:settle 2.8s var(--ease) both}
.qr-motion .scroll-hint i{animation:hint 2.4s var(--ease) infinite 1.6s}
.qr-motion .marquee{animation:drift 40s linear infinite}
.qr-motion .marquee.bot{animation-direction:reverse}
.qr-motion .contact-glow{animation:breathe 9s ease-in-out infinite}
@supports (animation-timeline:view()){
.qr-motion .hdr-bg{animation:glassOn linear both;animation-timeline:--hero;animation-range:exit 0% exit 18%}
.qr-motion .hero-media img,.qr-motion .hero-media video{animation:heroOut linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
.qr-motion .hero-scroll{animation:copyOut linear both;animation-timeline:--hero;animation-range:exit 0% exit 55%}
.qr-motion .w{opacity:.16;animation:wordOn linear both;animation-timeline:view();animation-range:cover 22% cover 40%}
.qr-motion .reveal{animation:up linear both;animation-timeline:view();animation-range:entry calc(var(--d,0) * 8%) entry calc(70% + var(--d,0) * 8%)}
.qr-motion .card-media img,.qr-motion .step-intro img{animation:para linear both;animation-timeline:view();animation-range:cover}
.qr-motion .fab{animation:fabIn linear both;animation-timeline:--hero;animation-range:exit 40% exit 70%}
}
@supports (animation-timeline:view()) and (container-type:inline-size){
@media (min-width:961px){
.qr-motion .proc{height:3400px}
.qr-motion .proc-sticky{position:sticky;top:0;height:min(100vh,900px);min-height:760px;padding:96px 0 0;overflow:hidden;container-type:inline-size;display:flex;flex-direction:column;justify-content:center}
.qr-motion .proc-track{display:flex;width:max-content;gap:24px;padding:0 32px;animation:slide linear both;animation-timeline:--proc;animation-range:contain 4% contain 96%}
.qr-motion .step{width:400px;min-height:440px;flex:none}
.qr-motion .step-intro{width:520px}
.qr-motion .proc-bar span{animation:grow linear both;animation-timeline:--proc;animation-range:contain 4% contain 96%}
}
}
}