:root { --lime: #c8dc79; }

html:not(.preview-unlocked) body > *:not(.preview-gate) { visibility:hidden; }
html.preview-unlocked .preview-gate { display:none; }
.preview-gate { position:fixed; z-index:300; inset:0; display:grid; place-items:center; overflow:hidden; padding:24px; background:#071813; color:#fff; isolation:isolate; }
.preview-grid { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(200,220,121,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(200,220,121,.12) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(to bottom,transparent,#000 35%,transparent); animation:preview-grid-drift 18s linear infinite; }
.preview-orbit { position:absolute; border:1px solid rgba(200,220,121,.2); border-radius:50%; animation:preview-orbit 13s ease-in-out infinite alternate; }
.preview-orbit-one { width:70vw; height:70vw; right:-28vw; top:-24vw; box-shadow:0 0 90px rgba(200,220,121,.08); }
.preview-orbit-two { width:45vw; height:45vw; left:-22vw; bottom:-18vw; animation-delay:-4s; }
.preview-card { position:relative; z-index:2; width:min(460px,calc(100% - 16px)); padding:48px; border:1px solid rgba(255,255,255,.16); border-radius:30px; background:rgba(16,43,34,.76); box-shadow:0 30px 100px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(20px); animation:preview-card-in .9s cubic-bezier(.2,.8,.2,1) both; }
.preview-mark { display:flex; gap:5px; margin-bottom:34px; }
.preview-mark span { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 20px rgba(200,220,121,.55); animation:preview-blink 2.4s ease-in-out infinite; }
.preview-mark span:nth-child(2) { animation-delay:.2s; opacity:.7; }
.preview-mark span:nth-child(3) { animation-delay:.4s; opacity:.4; }
.preview-kicker { margin:0 0 15px; color:var(--lime); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:800; }
.preview-card h1 { max-width:330px; margin:0; font:800 clamp(34px,4vw,48px)/1 Manrope,sans-serif; letter-spacing:-.055em; }
.preview-description { max-width:330px; margin:22px 0 34px; color:rgba(255,255,255,.64); line-height:1.55; }
.preview-form { display:grid; gap:9px; }
.preview-form label { font-size:12px; color:rgba(255,255,255,.7); }
.preview-input-wrap { display:flex; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:14px; background:rgba(255,255,255,.06); transition:border-color .3s ease,box-shadow .3s ease; }
.preview-input-wrap:focus-within { border-color:var(--lime); box-shadow:0 0 0 4px rgba(200,220,121,.1); }
.preview-input-wrap input { min-width:0; flex:1; padding:15px 16px; border:0; outline:0; background:transparent; color:#fff; font:inherit; }
.preview-input-wrap input::placeholder { color:rgba(255,255,255,.38); }
.preview-input-wrap button { width:52px; border:0; background:var(--lime); color:var(--ink); font-size:22px; cursor:pointer; transition:background .25s ease,transform .25s ease; }
.preview-input-wrap button:hover { background:#d8e995; transform:translateX(2px); }
.preview-error { height:0; overflow:hidden; color:#ffad9c; opacity:0; transition:opacity .25s ease; }
.preview-error.is-visible { height:auto; opacity:1; }
.preview-footer { display:block; margin-top:36px; color:rgba(255,255,255,.35); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.preview-gate-exit { animation:preview-gate-out .85s ease forwards; pointer-events:none; }
@keyframes preview-card-in { from{opacity:0;transform:translateY(22px) scale(.97);filter:blur(8px)} to{opacity:1;transform:none;filter:none} }
@keyframes preview-gate-out { to{opacity:0;transform:scale(1.04);filter:blur(14px)} }
@keyframes preview-grid-drift { to{background-position:70px 70px} }
@keyframes preview-orbit { to{transform:translate(20px,-16px) rotate(8deg)} }
@keyframes preview-blink { 0%,100%{transform:scale(.8)} 50%{transform:scale(1.15)} }

body { font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
h1,h2,h3,.btn { font-family:'Manrope',sans-serif; }

.scroll-progress { position:fixed; z-index:90; inset:0 0 auto; height:3px; pointer-events:none; }
.scroll-progress span { display:block; width:100%; height:100%; background:linear-gradient(90deg,#8cac45,var(--lime)); box-shadow:0 0 14px rgba(200,220,121,.45); transform:scaleX(0); transform-origin:left; }

.site-header { position:fixed; z-index:110; height:82px; padding:0; background:linear-gradient(to bottom,rgba(7,20,16,.78),rgba(7,20,16,.32)); backdrop-filter:blur(12px); }
.header-inner { position:relative; z-index:3; height:82px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.site-header .brand { display:inline-flex; align-items:center; padding:0; border-radius:0; background:transparent; }
.site-header .brand img { width:112px; filter:brightness(0) invert(1); }
.site-header .nav { align-items:center; gap:28px; font-size:14px; color:rgba(255,255,255,.82); }
.site-header .nav > a:not(.btn) { position:relative; transition:color .25s ease; }
.site-header .nav > a:not(.btn)::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--lime); transition:right .3s ease; }
.site-header .nav > a:not(.btn):hover::after,.site-header .nav > a:not(.btn).is-active::after { right:0; }
.site-header .nav > a:not(.btn).is-active { color:#fff; }
.btn { min-height:54px; padding:0 22px; font-size:13px; transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease; }
.btn-arrow::after { content:"↗"; font-size:18px; }
.menu-toggle,.mobile-nav { display:none; }

.hero-copy h1 { max-width:760px; margin-bottom:28px; font-family:'Manrope',sans-serif; font-size:clamp(38px,4vw,56px); font-weight:800; line-height:.96; letter-spacing:-.055em; }
.hero-copy h1 em { font-family:inherit; font-style:normal; font-weight:800; color:var(--lime); }
.hero-copy > p { font-family:'DM Sans',sans-serif; font-size:clamp(16px,1.35vw,19px); line-height:1.6; }
.section-heading h2,.solution-copy h2,.method-head h2,.legal-copy h2,.why-head h2,.cta-copy h2 { max-width:900px; margin:16px 0 18px; font-family:'Manrope',sans-serif; font-size:clamp(32px,3vw,40px); font-weight:800; line-height:1; letter-spacing:-.05em; }
.section-heading h2 em,.solution-copy h2 em,.method-head h2 em,.legal-copy h2 em,.why-head h2 em { font-family:inherit; font-style:normal; font-weight:800; color:var(--lime); }
.problem .section-heading h2 em,.method-head h2 em,.legal-copy h2 em { color:#5c7442; }
.impact-card h3,.solution-list strong,.step h3,.legal-steps h3,.why-grid h3 { font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:-.025em; }
.problem-copy .lead { font-size:clamp(16px,1.25vw,18px); line-height:1.6; }

.lead-form { display:grid; gap:12px; padding:48px; border:1px solid rgba(255,255,255,.1); border-radius:28px; background:rgba(10,27,20,.78); color:#fff; box-shadow:0 24px 70px rgba(0,0,0,.18); }
.form-grid { gap:12px; }
.lead-form .field { width:100%; min-height:54px; padding:0 16px; border:1px solid rgba(255,255,255,.15); border-radius:14px; outline:0; background:rgba(255,255,255,.07); color:#fff; font:inherit; font-size:14px; transition:border-color .25s ease,box-shadow .25s ease; }
.lead-form textarea.field { min-height:112px; padding-top:15px; resize:vertical; }
.lead-form .field::placeholder { color:rgba(255,255,255,.45); }
.lead-form .field:focus { border-color:var(--lime); box-shadow:0 0 0 4px rgba(200,220,121,.1); }
.form-trap { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; border:0!important; }
.lead-form .lgpd-consent { display:flex; align-items:flex-start; gap:10px; margin:0; color:rgba(255,255,255,.58); font-size:11px; line-height:1.5; cursor:pointer; }
.lead-form .lgpd-consent input { flex:0 0 auto; width:16px; height:16px; margin:1px 0 0; accent-color:var(--lime); }
.lead-form .lgpd-consent span { margin:0; color:inherit; font:inherit; letter-spacing:0; }
.lead-form small { color:rgba(255,255,255,.45); font-size:11px; }
.lead-form select.field { color:rgba(255,255,255,.78); }
.lead-form select.field:valid { color:#fff; }
.lead-form .field option { background:var(--ink); color:#fff; }

.footer-brand { padding:0; border-radius:0; background:transparent; }
.footer-brand img { width:112px; filter:brightness(0) invert(1); }

.whatsapp-float { position:fixed; z-index:80; right:22px; bottom:22px; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:#25d366; color:#fff; box-shadow:0 8px 24px rgba(16,32,27,.24); transition:transform .3s ease,box-shadow .3s ease,background .3s ease; }
.whatsapp-float::before { content:""; position:absolute; inset:-4px; border:2px solid rgba(37,211,102,.42); border-radius:50%; animation:whatsapp-pulse 2.4s ease-out infinite; }
.whatsapp-float svg { position:relative; z-index:1; width:30px; height:30px; }
.whatsapp-float:hover { transform:translateY(-4px) scale(1.05); background:#20bd5a; box-shadow:0 14px 32px rgba(16,32,27,.3); }
@keyframes whatsapp-pulse { 0%{opacity:.65;transform:scale(.94)} 70%,100%{opacity:0;transform:scale(1.22)} }

.reveal { filter:blur(5px); transition:opacity .65s ease,transform .65s ease,filter .75s ease; }
.reveal.visible { filter:blur(0); }

@media (max-width:1000px) {
  body.menu-open { overflow:hidden; }
  .site-header.menu-open { inset:0; width:100%; height:100dvh; align-items:flex-start; border-bottom:0; background:transparent; backdrop-filter:none; }
  .site-header.menu-open .header-inner { position:absolute; inset:0 0 auto; }
  .site-header .nav { display:none; }
  .menu-toggle { position:relative; z-index:3; width:44px; height:44px; display:grid; align-content:center; justify-items:center; gap:5px; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(255,255,255,.06); cursor:pointer; }
  .menu-toggle span { width:17px; height:1.5px; background:#fff; transition:transform .3s ease,opacity .2s ease; }
  .site-header.menu-open .menu-toggle span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
  .site-header.menu-open .menu-toggle span:nth-child(2) { opacity:0; }
  .site-header.menu-open .menu-toggle span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
  .mobile-nav { position:fixed; z-index:2; inset:0; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:100px max(28px,calc((100vw - 640px)/2)) 42px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; background:rgba(9,31,23,.99); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease,visibility .35s step-end; }
  .mobile-nav::before { content:""; position:absolute; width:78vw; height:78vw; right:-34vw; top:-20vw; border:1px solid rgba(200,220,121,.16); border-radius:50%; box-shadow:0 0 0 12vw rgba(200,220,121,.018),0 0 80px rgba(200,220,121,.08); }
  .mobile-nav::after { content:"ECO & ECO"; position:absolute; left:24px; bottom:20px; color:rgba(255,255,255,.035); font:800 18vw/.8 Manrope,sans-serif; letter-spacing:-.1em; white-space:nowrap; }
  .site-header.menu-open .mobile-nav { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s ease; }
  .mobile-nav > a:not(.btn) { position:relative; z-index:1; width:max-content; padding:8px 0; color:#fff; font:800 clamp(32px,9vw,46px)/1.03 Manrope,sans-serif; letter-spacing:-.055em; opacity:0; transform:translateY(16px); transition:opacity .35s ease,transform .35s ease,color .25s ease; }
  .site-header.menu-open .mobile-nav > a { opacity:1; transform:none; }
  .site-header.menu-open .mobile-nav > a:nth-child(1) { transition-delay:.05s; }
  .site-header.menu-open .mobile-nav > a:nth-child(2) { transition-delay:.1s; }
  .site-header.menu-open .mobile-nav > a:nth-child(3) { transition-delay:.15s; }
  .site-header.menu-open .mobile-nav > a:nth-child(4) { transition-delay:.2s; }
  .mobile-nav .btn { position:relative; z-index:1; width:100%; margin-top:28px; opacity:0; transform:translateY(16px); transition:opacity .35s ease .28s,transform .35s ease .28s; }
}

@media (max-width:650px) {
  .preview-card { padding:38px 28px; border-radius:24px; }
  .preview-card h1 { font-size:40px; }
  .site-header,.header-inner { height:70px; }
  .site-header { padding:0; }
  .site-header .brand img { width:112px; }
  .hero-copy h1 { max-width:100%; font-size:clamp(38px,11vw,44px); }
  .section-heading h2,.solution-copy h2,.method-head h2,.legal-copy h2,.why-head h2,.cta-copy h2 { font-size:clamp(32px,9vw,40px); }
  .lead-form { padding:28px 22px; }
  .whatsapp-float { right:16px; bottom:16px; width:56px; height:56px; }
  .footer { padding-bottom:92px; }
}

body.menu-open .whatsapp-float { opacity:0; visibility:hidden; pointer-events:none; }

@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; filter:none; }
  .whatsapp-float::before { animation:none; }
}
