@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
.hero-art .graph{display:flex;align-items:flex-end;gap:9px;height:90px}.graph i{display:block;flex:1;background:linear-gradient(#c4e6a4,#6e945a);border-radius:3px 3px 0 0}
:root{color-scheme:dark;--bg:#0b1312;--panel:#141f1c;--line:#2b3c34;--ink:#eef4e9;--muted:#9eafa4;--accent:#c4e6a4}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0%,#243a2b55,transparent 42%),var(--bg);color:var(--ink);font:15px 'DM Sans',sans-serif}header{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;padding:0 max(24px,calc((100vw - 1200px)/2))}.brand{font:800 30px Manrope,sans-serif;letter-spacing:-2px;color:var(--ink);text-decoration:none}.brand span{color:var(--accent);font-size:14px;margin-left:5px}header .tag{margin-right:auto}.tag{font-size:10px;letter-spacing:1.5px;border:1px solid var(--line);padding:9px 12px;border-radius:6px;color:var(--muted)}main{max-width:1200px;margin:auto;padding:0 24px}.hero{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:80px;padding:64px 0 44px}.eyebrow{font-size:10px;letter-spacing:2.8px;color:var(--accent);font-weight:700}h1{font:500 clamp(36px,4.3vw,58px)/1.13 Manrope,sans-serif;letter-spacing:-2.5px;margin:20px 0}h2{font:600 25px Manrope,sans-serif;letter-spacing:-.8px;margin:10px 0}h3{font-size:18px}p{line-height:1.65;color:var(--muted)}.hero-art{background:linear-gradient(135deg,#263a2d,#15231c);border:1px solid #526749;border-radius:18px;padding:30px;transform:rotate(3deg);box-shadow:15px 20px 0 #16211a}.hero-art>span,.hero-art small{font-size:10px;letter-spacing:2px;color:var(--muted)}.hero-art strong{display:flex;justify-content:space-between;font:600 38px Manrope;margin:20px 0}.hero-art strong span{color:var(--accent)}.graph{color:var(--accent);font-size:28px;letter-spacing:3px;border-bottom:1px solid #40513d;padding-bottom:18px;margin-bottom:15px}.notice{background:#252b1b;border:1px solid #465130;border-radius:8px;color:#d4dbb3;padding:14px 18px;font-size:13px}#message:empty{display:none}#message{padding:12px;border-left:3px solid var(--accent);color:var(--ink)}.account{display:grid;grid-template-columns:1fr 1fr;gap:50px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:28px;margin:26px 0 45px}form label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted);margin-bottom:16px}input,select{padding:12px;border-radius:7px;border:1px solid #394b40;background:#0e1814;color:var(--ink);font:inherit;width:100%}button{cursor:pointer;background:#202e26;color:var(--ink);border:1px solid #40553e;border-radius:7px;padding:12px 18px;font:600 13px 'DM Sans',sans-serif}button.primary{background:var(--accent);color:#172212;border-color:var(--accent)}button:hover{filter:brightness(1.13)}button:disabled{opacity:.45;cursor:wait}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.actions{display:flex;gap:10px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:34px 0 22px}.catalog,.team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product,.agent{border:1px solid var(--line);background:linear-gradient(145deg,#1b2921,#121d18);border-radius:12px;padding:25px}.product .avatar{width:54px;height:54px;border-radius:14px;background:var(--color);color:#162419;display:grid;place-items:center;font:800 24px Manrope}.product h3{font:600 27px Manrope;margin-bottom:4px}.role{color:var(--color);font-size:12px}.product p{min-height:70px;font-size:14px}.market-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:56px}.market-tags span{font-size:10px;padding:5px 7px;background:#ffffff07;border-radius:4px;color:var(--muted)}.price{border-top:1px solid var(--line);padding:18px 0;margin-top:14px}.price strong{font-size:20px}.price small{display:block;color:var(--muted);margin-top:5px}.product button{width:100%}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}.metrics>div{background:#18241e;border:1px solid var(--line);border-radius:8px;padding:20px}.metrics small{display:block;font-size:10px;color:var(--muted);letter-spacing:1px}.metrics strong{display:block;font:600 27px Manrope;margin:10px 0}.agent h3{margin:12px 0}.agent p{font-size:13px}.agent .actions{flex-wrap:wrap}.status{font-size:10px;color:#dfcc92;letter-spacing:1px}.empty{grid-column:1/-1;padding:30px;border:1px dashed var(--line);border-radius:10px;text-align:center}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;border-top:1px solid var(--line);margin-top:50px;padding-top:35px}.steps b{color:var(--accent);font:500 27px Manrope}.steps p{font-size:13px}footer{border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.9;padding:25px 0;margin-top:30px}dialog{width:min(500px,92vw);background:var(--panel);color:var(--ink);border:1px solid #516443;border-radius:14px;padding:26px}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}dialog .section-heading{margin-top:0}dialog .notice{font-size:12px}dialog .primary{width:100%}[hidden]{display:none!important}@media(max-width:760px){header{padding:0 20px;height:72px}header .tag{font-size:8px;letter-spacing:0}.hero{grid-template-columns:1fr;padding:35px 0;gap:30px}.hero-art{display:none}.account,.catalog,.team,.steps{grid-template-columns:1fr}.account{gap:12px;padding:20px}.metrics{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}.product p{min-height:0}h1{letter-spacing:-1.5px}#setup .section-heading{flex-direction:row}}

/* ---------- camada de movimento: as páginas respiram (98% dos clientes no celular) ---------- */
@media (prefers-reduced-motion: no-preference){
  .customer-main>.page-heading,.customer-main>#pageContent>*,.customer-main>section,.customer-main footer{animation:cm-rise .5s cubic-bezier(.2,.8,.3,1) backwards}
  .customer-main>#pageContent>:nth-child(2){animation-delay:.06s}
  .customer-main>#pageContent>:nth-child(3){animation-delay:.12s}
  .customer-main>#pageContent>:nth-child(4){animation-delay:.18s}
  .customer-main footer{animation-delay:.22s}
  .destination-grid a:nth-child(2){animation-delay:.05s}.destination-grid a:nth-child(3){animation-delay:.1s}
  .destination-grid a,.catalog>*,.team>*,.metrics>div{animation:cm-rise .45s cubic-bezier(.2,.8,.3,1) backwards}
  .catalog>:nth-child(2),.team>:nth-child(2),.metrics>:nth-child(2){animation-delay:.06s}
  .catalog>:nth-child(3),.team>:nth-child(3),.metrics>:nth-child(3){animation-delay:.12s}
  .page-heading h1::after{animation:cm-bar .7s .2s cubic-bezier(.2,.8,.3,1) backwards}
}
@keyframes cm-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes cm-bar{from{width:0;opacity:0}}
.page-heading h1::after{content:'';display:block;width:66px;height:4px;border-radius:2px;margin-top:14px;background:linear-gradient(90deg,var(--accent),#57b36a 60%,transparent)}
.destination-grid a,.product,.agent,.metrics>div,.welcome-card,.streak-card,.account{transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s,box-shadow .2s,background-color .2s}
.destination-grid a:hover,.product:hover,.agent:hover,.streak-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px #0007;border-color:var(--accent)}
.metrics>div:hover{border-color:#40553e}
.destination-grid a h2{transition:color .2s}.destination-grid a:hover h2{color:var(--accent)}
button{transition:transform .15s,filter .15s,border-color .15s,background-color .15s}
button:active:not(:disabled){transform:scale(.96)}
.customer-sidebar nav a{transition:background .18s,color .18s,transform .18s}
.customer-sidebar nav a:hover{transform:translateX(4px)}
.customer-sidebar nav a[aria-current]{box-shadow:0 6px 18px #c4e6a433}
input,select,textarea{transition:border-color .18s,box-shadow .18s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #c4e6a422}
.notif-toast{animation:cm-rise .3s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion: reduce){.customer-main>*,.destination-grid a,.catalog>*,.team>*,.metrics>div,.notif-toast{animation:none!important}}
/* Botão "armado": o primeiro toque pede confirmação nele mesmo, sem popup do navegador */
button.armed{background:#f2c94c!important;border-color:#f2c94c!important;color:#3a2c08!important;animation:cm-armed .3s}
@keyframes cm-armed{35%{transform:translateX(-3px)}70%{transform:translateX(3px)}}