/* Tipografia: Barlow Condensed (títulos, lembra sinalização técnica e o peso do logotipo) + Manrope (leitura). Decisão mantida da V1. */
:root{
  --bg:#0a0b0c; --bg2:#101214; --line:rgba(255,255,255,.12);
  --text:#f2efe8; --muted:#a9abad;
  --amber:#f2b421; --amber-d:#7a5600; --paper:#e9e4d8; --ink:#101112;
  --wa:#25d366;
  --max:1240px; --gut:max(20px,calc((100vw - var(--max))/2));
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);margin:0;line-height:.98;letter-spacing:-.01em;text-transform:uppercase;font-weight:700}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
::selection{background:var(--amber);color:#111}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--amber);color:#111;padding:10px 16px;font-weight:800}
.skip:focus{top:12px}

/* Header */
.site-header{position:fixed;inset:0 0 auto;height:76px;z-index:40;display:flex;align-items:center;gap:28px;padding:0 var(--gut);background:linear-gradient(180deg,rgba(8,9,10,.9),rgba(8,9,10,0));transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
.site-header.scrolled,.site-header.open{background:rgba(10,11,12,.92);backdrop-filter:blur(12px);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.3rem;text-transform:uppercase;letter-spacing:.03em;margin-right:auto}
.brand img{width:44px;height:44px;border-radius:6px;object-fit:cover}
.brand strong{color:var(--amber);margin-right:.25em}
.desktop-nav{display:flex;gap:28px;font-size:.88rem;font-weight:600;color:#d6d6d6}
.desktop-nav a{padding:12px 0;border-bottom:1px solid transparent}
.desktop-nav a:hover{border-color:var(--amber)}
.header-cta{padding:11px 18px;border:1px solid var(--amber);font-weight:800;font-size:.85rem;transition:background .2s,color .2s}
.header-cta:hover{background:var(--amber);color:#111}
.menu-btn{display:none;width:44px;height:44px;background:none;border:1px solid var(--line);color:var(--text);cursor:pointer;position:relative}
.menu-btn i,.menu-btn i:before,.menu-btn i:after{position:absolute;left:12px;right:12px;height:2px;background:currentColor;content:"";transition:transform .2s}
.menu-btn i{top:21px}.menu-btn i:before{left:0;right:0;top:-6px}.menu-btn i:after{left:0;right:0;top:6px}
.site-header.open .menu-btn i{background:transparent}
.site-header.open .menu-btn i:before{transform:translateY(6px) rotate(45deg)}
.site-header.open .menu-btn i:after{transform:translateY(-6px) rotate(-45deg)}

/* Botões */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 24px;font-weight:800;font-size:.92rem;transition:transform .2s,background .2s}
.button-primary{background:var(--amber);color:#111}
.button-primary:hover{background:#ffd25e;transform:translateY(-2px)}
.button.large{min-height:64px;font-size:1rem;padding:0 30px}
.text-link{font-weight:700;border-bottom:1px solid rgba(255,255,255,.4);padding:12px 0 4px}
.text-link:hover{border-color:var(--amber)}

/* Hero: copy à esquerda, monitor com vídeo real à direita */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.6fr);gap:0 70px;align-items:center;padding:130px var(--gut) 0;position:relative;background:
  linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/72px 72px,
  linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) 0 0/72px 72px,
  radial-gradient(ellipse at 80% 40%,rgba(242,180,33,.10),transparent 55%),var(--bg);
  border-bottom:1px solid var(--line)}
.hero-place{font-size:.9rem;font-weight:700;color:var(--amber);margin-bottom:22px}
h1{font-size:clamp(3.4rem,6vw,6.2rem);font-weight:800;max-width:12em}
.hero-lead{margin-top:26px;max-width:36em;font-size:clamp(1rem,1.3vw,1.18rem);color:#c9cacb}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:34px}
.monitor{margin:0;justify-self:end;width:min(100%,360px);position:relative}
.monitor-screen{position:relative;aspect-ratio:9/16;background:#000;border:1px solid rgba(242,180,33,.5);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.monitor-screen:before,.monitor-screen:after{content:"";position:absolute;z-index:2;width:28px;height:28px;border:3px solid var(--amber);pointer-events:none}
.monitor-screen:before{left:10px;top:10px;border-right:0;border-bottom:0}
.monitor-screen:after{right:10px;top:10px;border-left:0;border-bottom:0}
.monitor video{width:100%;height:100%;object-fit:cover}
.monitor-screen .rec:before{content:"";position:absolute;left:-44px;top:-16px;width:260px;height:90px;background:linear-gradient(rgba(0,0,0,.65),transparent);z-index:-1}
.rec{position:absolute;left:44px;top:16px;z-index:2;display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;text-shadow:0 1px 6px #000}
.rec i{width:9px;height:9px;border-radius:50%;background:#ff4d3d}
.sound{position:absolute;right:12px;top:48px;z-index:3;min-height:44px;padding:0 14px;background:rgba(10,11,12,.82);color:var(--text);border:1px solid var(--line);font:inherit;font-weight:700;font-size:.8rem;cursor:pointer}
.sound:hover{border-color:var(--amber)}
.monitor figcaption{margin-top:12px;font-size:.78rem;color:var(--muted);max-width:30em}
.hero-proof{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--line)}
.hero-proof div{padding:22px 24px 26px 0;border-right:1px solid var(--line);padding-left:24px}
.hero-proof div:first-child{padding-left:0}
.hero-proof div:last-child{border-right:0}
.hero-proof dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.hero-proof dd{margin-top:6px;color:#cfd0d1;font-size:.9rem}
.hero-proof strong{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--amber);margin-right:.2em;font-weight:700}

/* Serviços: índice tipográfico */
.services{display:grid;grid-template-columns:.8fr 1.4fr;gap:70px;padding:120px var(--gut)}
.services-head{position:sticky;top:110px;align-self:start}
.services-head h2{font-size:clamp(2.8rem,5vw,5rem)}
.services-head p{margin-top:20px;color:var(--muted);max-width:26em}
.services-index{border-top:1px solid var(--line)}
.services-index li{display:grid;grid-template-columns:52px 1fr auto;gap:2px 16px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);transition:background .2s,padding .2s}
.services-index li:hover{background:linear-gradient(90deg,rgba(242,180,33,.07),transparent 60%);padding-left:10px}
.services-index .n{font-family:var(--display);color:var(--amber);font-size:1.2rem;grid-row:span 2}
.services-index h3{font-size:clamp(1.6rem,2.4vw,2.2rem);grid-column:2}
.services-index p{grid-column:2;color:var(--muted);font-size:.95rem}
.services-index em{grid-column:3;grid-row:1/3;align-self:center;font-style:normal;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--amber);border:1px solid rgba(242,180,33,.45);padding:6px 10px}

/* Projeto real */
.work{padding:110px var(--gut);background:var(--bg2);border-block:1px solid var(--line)}
.work-head{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end;margin-bottom:50px}
.work-head h2{font-size:clamp(2.8rem,5.4vw,5.4rem)}
.work-head p{color:var(--muted)}
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rail li{position:relative}
.rail img{width:100%;aspect-ratio:9/14;object-fit:cover;object-position:top;background:#000;border:1px solid var(--line)}
.rail .tag{position:absolute;left:0;top:0;background:var(--amber);color:#111;font-family:var(--display);font-weight:700;font-size:1.3rem;text-transform:uppercase;padding:2px 14px;letter-spacing:.04em}
.rail p{margin-top:12px;color:#c4c5c7;font-size:.92rem;max-width:26em}
.rail li:nth-child(2){margin-top:46px}
.rail li:nth-child(3){margin-top:92px}

/* Faixa Intelbras: contextual, sem apropriar identidade */
.brand-band{padding:100px var(--gut);background:var(--paper);color:var(--ink);display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}
.brand-band h2{font-size:clamp(2.6rem,5vw,5rem)}
.brand-band p{color:#46484a;border-left:3px solid #14a85e;padding-left:20px}

/* Avaliações */
.reviews{display:grid;grid-template-columns:.5fr 1.5fr;gap:80px;padding:110px var(--gut)}
.score{display:flex;flex-direction:column;align-self:start;border-top:2px solid var(--amber);padding-top:18px;position:sticky;top:110px}
.score-n{font-family:var(--display);font-weight:800;font-size:clamp(6rem,11vw,10rem);line-height:.8}
.stars{color:var(--amber);letter-spacing:.14em;margin:18px 0 6px;font-size:1.2rem}
.score-sub{color:var(--muted);font-size:.9rem}
.score-src{color:#8a8d90;font-size:.75rem;margin-top:10px;max-width:22em}
.quote{margin:0;padding:34px 0;border-bottom:1px solid var(--line)}
.quote:first-of-type{border-top:1px solid var(--line)}
.quote blockquote{margin:0}
.quote p{font-size:1.15rem;max-width:34em}
.quote-lead p{font-family:var(--display);font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.12;font-weight:600;text-transform:none;max-width:24em}
.quote figcaption{margin-top:14px;font-size:.82rem;color:var(--muted)}

/* Messias */
.founder{display:grid;grid-template-columns:.5fr 1fr;gap:80px;align-items:center;padding:100px var(--gut);background:var(--bg2);border-block:1px solid var(--line)}
.founder-logo{width:100%;max-width:380px;border:1px solid var(--line)}
.founder h2{font-size:clamp(2.6rem,4.6vw,4.6rem)}
.founder p{margin-top:22px;color:var(--muted);max-width:38em}

/* Processo */
.process{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding:100px var(--gut);background:var(--paper);color:var(--ink)}
.process h2{font-size:clamp(2.6rem,4.6vw,4.6rem)}
.process ol{counter-reset:step;border-top:1px solid #a9a496}
.process li{counter-increment:step;display:grid;grid-template-columns:44px 230px 1fr;gap:12px 18px;padding:22px 0;border-bottom:1px solid #b9b4a6;align-items:baseline}
.process li:before{content:counter(step);font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--amber-d)}
.process strong{line-height:1.05;font-family:var(--display);font-size:1.5rem;text-transform:uppercase;font-weight:700}
.process span{color:#47494b}

/* FAQ */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding:100px var(--gut)}
.faq h2{font-size:clamp(2.6rem,4.6vw,4.6rem)}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:22px 0;font-family:var(--display);font-weight:600;font-size:1.45rem;text-transform:uppercase;display:flex;justify-content:space-between;gap:16px;min-height:44px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--amber)}
details[open] summary:after{content:"\2212"}
details p{color:var(--muted);padding-bottom:22px;max-width:36em}

/* Contato */
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end;padding:100px var(--gut);background:radial-gradient(circle at 100% 0,rgba(242,180,33,.16),transparent 45%),#0e1011;border-top:1px solid rgba(242,180,33,.45)}
.contact h2{font-size:clamp(3rem,6vw,6.2rem)}
.contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.contact-actions>a:not(.button){color:#c9cacb;border-bottom:1px solid #666;padding:4px 0;word-break:break-all}
.contact-actions>a:not(.button):hover{border-color:var(--amber)}
footer{display:grid;grid-template-columns:1fr 1.4fr auto;gap:20px;align-items:center;padding:26px var(--gut) 90px;color:#8a8d90;font-size:.78rem;border-top:1px solid var(--line)}
.footer-brand{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.1rem;color:#ccc}
.footer-brand strong{color:var(--amber);margin-right:.25em}
.footer-brand span{font-family:var(--body);font-size:.7rem;color:#8a8d90;margin-left:8px;font-weight:500}

.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:35;width:60px;height:60px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.45);transition:transform .2s}
.whatsapp-float:hover{transform:translateY(-3px)}
.whatsapp-float svg{width:32px;fill:#06210f}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media (prefers-reduced-motion:no-preference){.rec i{animation:blink 1.6s infinite}@keyframes blink{50%{opacity:.25}}}

/* Tablet */
@media (max-width:980px){
  .site-header{gap:14px}
  .header-cta{display:none}
  .menu-btn{display:block}
  .desktop-nav{position:absolute;inset:76px 0 auto;display:none;flex-direction:column;gap:0;background:rgba(10,11,12,.97);border-bottom:1px solid var(--line);padding:8px 20px 16px}
  .site-header.open .desktop-nav{display:flex}
  .desktop-nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .hero{grid-template-columns:1fr;padding-top:112px;gap:44px}
  h1{font-size:clamp(3.2rem,12vw,6rem)}
  .monitor{justify-self:start;width:min(100%,340px)}
  .hero-proof{grid-template-columns:repeat(2,1fr);margin-top:20px}
  .hero-proof div{padding:18px 16px;border-bottom:1px solid var(--line)}
  .hero-proof div:nth-child(odd){padding-left:0}
  .hero-proof div:nth-child(2){border-right:0}
  .services,.reviews,.founder,.process,.faq,.brand-band,.contact,.work-head{grid-template-columns:1fr;gap:36px}
  .services-head,.score{position:static}
  .services,.work,.reviews,.founder,.process,.faq,.brand-band,.contact{padding-top:80px;padding-bottom:80px}
  .rail li:nth-child(n){margin-top:0}
  .process li{grid-template-columns:36px 1fr}
  .process li span{grid-column:2}
  footer{grid-template-columns:1fr}
}

/* Mobile: trilho com swipe e vídeo como primeira dobra de prova */
@media (max-width:600px){
  .site-header{height:66px;padding:0 16px}
  .desktop-nav{inset:66px 0 auto}
  .brand img{width:40px;height:40px}
  .hero{padding:96px 16px 0}
  h1{font-size:clamp(3rem,13.5vw,4.2rem)}
  .hero-actions{flex-direction:column;align-items:stretch;gap:18px}
  .hero-actions .button{width:100%}
  .hero-actions .text-link{align-self:flex-start}
  .monitor{width:100%;max-width:none}
  .monitor-screen{aspect-ratio:9/15}
  .services,.work,.reviews,.founder,.process,.faq,.brand-band,.contact,footer{padding-left:16px;padding-right:16px}
  .services-index li{grid-template-columns:40px 1fr}
  .services-index em{grid-column:2;grid-row:auto;justify-self:start;margin-top:8px}
  .services-index .n{grid-row:auto}
  .rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .rail li{flex:0 0 78%;scroll-snap-align:center}
  .contact .button{width:100%}
  .contact-actions{width:100%}
  .whatsapp-float{right:14px;bottom:14px;width:56px;height:56px}
}