:root{--brand:#0b5fff;--brand-ink:#0a2a66;--accent:#c59a22;--accent-ink:#553f08;--bg:#0a0f1a;--card:#0f1726;--muted:#a6b3d1}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:#e9eefb;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.btn{display:inline-flex;align-items:center;gap:.6rem;border:0;border-radius:14px;padding:14px 18px;font-weight:700;cursor:pointer;letter-spacing:.2px;transition:.2s transform ease,.2s opacity ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(180deg,#1b6cff 0%, #0b5fff 60%, #0646c9 100%);color:#fff;box-shadow:0 8px 24px rgba(11,95,255,.32)}
.btn-accent{background:linear-gradient(180deg,#ffd36b 0%, #c59a22 60%, #8a6a10 100%);color:#1a160a;box-shadow:0 8px 24px rgba(197,154,34,.35)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.12);color:#e9eefb}
.tag{display:inline-block;background:rgba(11,95,255,.12);color:#bcd3ff;border:1px solid rgba(11,95,255,.25);padding:6px 10px;border-radius:999px;font-size:.8rem;font-weight:600}
header.nav{position:sticky;top:0;z-index:50;background:rgba(10,15,26,.7);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav .row{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{height:40px;width:auto}
.menu{display:flex;gap:18px;font-weight:600}
.nav a{opacity:.9}
.nav a:hover{opacity:1}
.hero{position:relative}
.hero-media{
  position:relative;aspect-ratio:16/9;
  background:
    radial-gradient(100% 200% at 50% 0%, rgba(21,46,103,.6) 0%, rgba(10,15,26,1) 60%),
    url('https://rossowcnc.com.br/wp-content/uploads/2025/10/CNC-Router-Performance-Router-Para-Marcenaria-e-Comunicacao-Visual-1-scaled-e1760582800433.jpg') center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(5,8,14,.55) 0%, rgba(5,8,14,.75) 50%, rgba(5,8,14,.92) 100%)}
.hero .content{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
h1{font-size:clamp(1.8rem,3.5vw,3rem);margin:.2rem 0;color:#fff}
.lead{font-size:clamp(1rem,1.5vw,1.2rem);color:#cfe0ff;max-width:900px;margin:0 auto 1rem}
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:960px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
section{padding:56px 0}
.card{background:linear-gradient(180deg, #0f1726 0%, #0c1322 100%);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.card .media{position:relative;aspect-ratio:4/3;background:#0a0f1a;height:auto}
.card .body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:.95rem}
.specs div{opacity:.92}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin:18px 0}
.mini{font-size:.85rem;color:#a8b3cf}
.ribbon{position:absolute;top:10px;left:-6px;z-index:2;padding:8px 12px 8px 18px;border-top-right-radius:999px;border-bottom-right-radius:999px;font-weight:900;letter-spacing:.3px;box-shadow:0 8px 22px rgba(0,0,0,.25);display:inline-flex;align-items:center;gap:8px}
.ribbon:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-top-left-radius:6px;border-bottom-left-radius:6px;background:rgba(0,0,0,.25)}
.ribbon.premium{background:linear-gradient(180deg,#ffd36b,#c59a22);color:#231a05}
.ribbon.value{background:linear-gradient(180deg,#b7ff9e,#34d399);color:#022a1a}
.ribbon.compact{background:linear-gradient(180deg,#c6f1ff,#6bdcff);color:#05252e}
.flags{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.flags img{height:24px;border-radius:4px}
.bento{display:grid;grid-template-columns:2fr 1fr;gap:22px}
@media (max-width:960px){.bento{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:960px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
figure{margin:0}
.footer{border-top:1px solid rgba(255,255,255,.08);padding:36px 0;color:#cbd5e1}
.whats{position:fixed;right:16px;bottom:16px;z-index:60}
.whats a{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#012b12;padding:14px 16px;border-radius:30px;font-weight:800;box-shadow:0 10px 24px rgba(37,211,102,.35)}
.popup{position:fixed;inset:0;background:rgba(4,6,10,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:16px;z-index:80}
.popup > .box{max-width:560px;width:100%;background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px}
.close{float:right;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:rgba(30,41,59,.9);color:#fff;padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.1);display:none;z-index:90}
.lb-nav{display:flex;justify-content:center;gap:8px;margin-top:8px}
.lb-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}
#modelSelect{background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:8px}
.option-chip{display:block;margin:6px 0;color:#e9eefb;border:1px dashed rgba(255,255,255,.25);border-radius:999px;padding:10px 12px}
.option-chip[aria-disabled="true"]{opacity:.45;filter:grayscale(.3);cursor:not-allowed}
@media (max-width:600px){
  .hero-media{aspect-ratio:9/16}
  .hero video{display:none}
  .menu{display:none}
  .menu.is-open{display:flex;flex-direction:column;position:absolute;right:16px;top:64px;background:rgba(15,23,38,.98);padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px}
  .nav .row{padding:8px 0}
  h1{font-size:clamp(1.4rem,5.6vw,2rem)}
  section{padding:36px 0}
  .btn{padding:12px 14px;border-radius:12px}
  .whats a{padding:12px 14px}
}
@media (prefers-reduced-data: reduce){
  .hero video{display:none}
}