/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --bg-void:#FFFFFF;
  --bg-panel:#F6F6F4;
  --bg-panel-alt:#EFEFEC;
  --bg-raise:#FFFFFF;
  --line:rgba(10,10,10,0.10);
  --line-strong:rgba(10,10,10,0.18);
  --text-primary:#0A0A0A;
  --text-muted:#5C5C5C;
  --text-dim:#9A9A9A;
  --cyan:#0A0A0A;
  --cyan-dim:rgba(10,10,10,0.06);
  --amber:#0A0A0A;
  --amber-dim:rgba(10,10,10,0.06);
  --on-amber:#FFFFFF;
  --cta:#2FCC71;
  --cta-bright:#3EE585;
  --font-display:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --container:1180px;
  --radius-s:4px;
  --radius-m:10px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

body{
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
svg{display:block;}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; letter-spacing:-0.01em; line-height:1.14;}

.wrap{max-width:var(--container); margin:0 auto; padding:0 28px;}
::selection{background:var(--cyan); color:var(--bg-void);}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   ANIMATED BACKGROUND — canvas network + static grid
   ============================================================ */
#bgCanvas{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  opacity:.7; pointer-events:none;
}
.grid-field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, black 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, black 0%, transparent 75%);
  opacity:.6;
}

/* corner brackets */
.brackets{position:absolute; inset:14px; pointer-events:none; z-index:2;}
.brackets i{position:absolute; width:22px; height:22px; border-color:var(--cyan); opacity:.55;}
.brackets i:nth-child(1){top:0; left:0; border-top:2px solid; border-left:2px solid;}
.brackets i:nth-child(2){top:0; right:0; border-top:2px solid; border-right:2px solid;}
.brackets i:nth-child(3){bottom:0; left:0; border-bottom:2px solid; border-left:2px solid;}
.brackets i:nth-child(4){bottom:0; right:0; border-bottom:2px solid; border-right:2px solid;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:16px 0;
  transition:padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
  border-bottom:1px solid transparent;
  --text-primary:#FFFFFF;
  --text-muted:rgba(255,255,255,0.72);
  --cyan:#FFFFFF;
  --cyan-dim:rgba(255,255,255,0.14);
  --line-strong:rgba(255,255,255,0.28);
  --bg-panel:rgba(255,255,255,0.10);
  color:var(--text-primary);
}
.nav.scrolled{
  padding:10px 0;
  background:rgba(255,255,255,0.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-strong);
  --text-primary:#0A0A0A;
  --text-muted:#5C5C5C;
  --cyan:#0A0A0A;
  --cyan-dim:rgba(10,10,10,0.06);
  --line-strong:rgba(10,10,10,0.16);
  --bg-panel:rgba(10,10,10,0.05);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}

.brand{display:flex; align-items:center; flex-shrink:0;}
.brand .brand-mark{display:block; width:180px; height:auto; object-fit:contain;}
.nav.scrolled .brand-mark{filter:drop-shadow(0 1px 2px rgba(0,0,0,.65));}
@media (max-width:720px){
  .brand .brand-mark{width:150px;}
}

.nav-links{display:flex; align-items:center; gap:2px;}
.nav-links a.nav-link{
  font-size:0.85rem; color:var(--text-muted); padding:9px 12px; border-radius:var(--radius-s);
  transition:color .2s, background .2s;
  position:relative;
}
.nav-links a.nav-link:hover{color:var(--text-primary); background:var(--bg-panel);}
.nav-links a.nav-link.active{color:var(--cyan);}

.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cta); color:#06140C; font-weight:600; font-size:0.86rem;
  padding:10px 18px; border-radius:var(--radius-s);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  white-space:nowrap; position:relative;
  animation:ctaPulse 2.6s ease-in-out infinite;
}
.nav-cta:hover{transform:translateY(-1px); background:var(--cta-bright); animation-play-state:paused;}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.45);}
  50%{box-shadow:0 0 0 9px rgba(37,211,102,0);}
}
@media (prefers-reduced-motion: reduce){ .nav-cta{animation:none;} }
.nav-cta-mobile{display:none;}

.nav-toggle{display:none; width:38px; height:38px; align-items:center; justify-content:center; background:none; border:1px solid var(--line-strong); border-radius:var(--radius-s); color:var(--text-primary);}
.nav-toggle svg{width:18px; height:18px;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:1;
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:center;
  padding:140px 0 70px;
  overflow:hidden;
  --bg-void:#0A0A0A;
  --bg-panel:#141414;
  --bg-panel-alt:#1A1A1A;
  --bg-raise:#202020;
  --line:rgba(255,255,255,0.14);
  --line-strong:rgba(255,255,255,0.24);
  --text-primary:#FFFFFF;
  --text-muted:rgba(255,255,255,0.68);
  --text-dim:rgba(255,255,255,0.42);
  --cyan:#FFFFFF;
  --cyan-dim:rgba(255,255,255,0.14);
  --amber:#FFFFFF;
  --amber-dim:rgba(255,255,255,0.16);
  --on-amber:#0A0A0A;
  background:#0A0A0A;
  color:#FFFFFF;
}
.hero-diamond{
  position:absolute; z-index:0; pointer-events:none; opacity:.5;
}
.hero-diamond svg{width:100%; height:100%;}
.hero-diamond.d1{top:-60px; right:-60px; width:260px; height:260px;}
.hero-diamond.d2{bottom:-40px; right:80px; width:140px; height:140px; opacity:.3;}
@media (max-width:720px){
  .hero-diamond.d1{width:160px; height:160px; top:-40px; right:-50px;}
  .hero-diamond.d2{display:none;}
}
.hero-photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center 30%;
  opacity:.22;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, var(--bg-void) 92%);
}
.hero-spot{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(480px circle at var(--mx,50%) var(--my,30%), rgba(255,255,255,0.06), transparent 60%);
  transition:background .1s linear;
}

.hero .wrap{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; position:relative; z-index:2;
}

.hero-copy{opacity:0; transform:translateY(18px);}
.hero-copy.in{animation:heroIn .8s var(--ease) forwards;}
@keyframes heroIn{to{opacity:1; transform:translateY(0);}}

.hero-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--text-muted);
  text-transform:uppercase; margin-bottom:24px;
}
.hero-tag::before{content:''; width:20px; height:1px; background:var(--cyan); animation:dashPulse 2.4s ease-in-out infinite;}
@keyframes dashPulse{0%,100%{opacity:1; width:20px;} 50%{opacity:.4; width:12px;}}

.hero h1{font-size:clamp(2.4rem, 4.6vw, 3.9rem); color:var(--text-primary); max-width:14ch; font-weight:700;}
.hero h1 em{font-style:normal; font-weight:400; color:var(--text-muted);}
.hero p.lead{margin-top:22px; color:var(--text-muted); font-size:1.08rem; max-width:44ch;}
.hero-actions{display:flex; align-items:center; gap:14px; margin-top:34px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:var(--radius-s);
  font-weight:600; font-size:0.94rem;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s, color .2s;
  border:1px solid transparent;
}
.btn-primary{background:var(--amber); color:var(--on-amber);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -10px var(--amber-dim);}
.btn-ghost{border-color:var(--line-strong); color:var(--text-primary);}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan);}
.btn svg{width:16px; height:16px;}

/* HUD panel */
.hud{
  position:relative; opacity:0; transform:translateY(18px) rotateX(0deg);
  background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-alt));
  border:1px solid var(--line-strong);
  border-radius:var(--radius-m);
  padding:24px 22px;
  font-family:var(--font-mono);
  transform-style:preserve-3d;
  will-change:transform;
}
.hud.in{animation:heroIn .8s var(--ease) .12s forwards;}
.hud::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation:scan 3.2s linear infinite;
}
@keyframes scan{0%{transform:translateY(0); opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{transform:translateY(280px); opacity:0;}}

.hud-top{display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; font-weight:600; color:var(--text-primary); letter-spacing:0.05em; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line);}
.hud-top .status{color:var(--cyan); display:flex; align-items:center; gap:6px;}
.hud-top .status .dot{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:.25;}}

.hud-stats{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.hud-stat{padding:10px 0;}
.hud-stat .num{font-size:1.9rem; font-weight:600; color:var(--text-primary); font-family:var(--font-display); line-height:1;}
.hud-stat .num small{font-size:1rem; color:var(--cyan);}
.hud-stat .lbl{margin-top:6px; font-size:0.64rem; color:var(--text-dim); letter-spacing:0.03em;}

.hud-log{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.hud-log-head{display:flex; align-items:center; gap:8px; font-size:0.64rem; color:var(--text-dim); letter-spacing:0.03em; margin-bottom:10px;}
.hud-log-tag{font-size:0.58rem; color:var(--text-dim); border:1px solid var(--line-strong); padding:1px 6px; border-radius:99px;}
.hud-log-list{display:flex; flex-direction:column; gap:8px; height:78px; overflow:hidden; position:relative;}
.hud-log-list li{
  font-size:0.72rem; color:var(--text-muted); display:flex; align-items:center; gap:8px;
  opacity:0; transform:translateY(6px); animation:logIn .5s var(--ease) forwards;
}
.hud-log-list li .lt{color:var(--text-dim); flex:none;}
.hud-log-list li .lg{width:5px; height:5px; border-radius:50%; background:var(--cyan); flex:none;}
@keyframes logIn{to{opacity:1; transform:translateY(0);}}

.hud-radar{margin-top:16px; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:16px;}

/* ============================================================
   HERO PRODUCT CARD (Relógio de Ponto / Ponto em Nuvem)
   ============================================================ */
.hero-product-visual{
  position:relative; width:100%; aspect-ratio:16/10; border-radius:8px; overflow:hidden;
  border:1px solid var(--line-strong); background:var(--bg-void); margin-bottom:20px;
}
.hero-product-visual img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-product-visual::after{
  content:''; position:absolute; left:0; right:0; height:2px; top:0;
  background:var(--cyan); opacity:.75; box-shadow:0 0 12px var(--cyan);
  animation:facescan 2.4s ease-in-out infinite;
}
.hero-product h3{
  font-family:var(--font-display); font-size:1.32rem; font-weight:700; color:var(--text-primary);
  margin-bottom:10px; line-height:1.25;
}
.hero-product p{color:var(--text-muted); font-size:0.92rem; line-height:1.6; margin-bottom:18px;}
.hero-product-tag{
  font-family:var(--font-mono); font-size:0.7rem; color:var(--cyan); letter-spacing:0.02em;
  padding-top:16px; border-top:1px solid var(--line);
}
.radar-svg{width:48px; height:48px; flex:none;}
.radar-sweep{transform-origin:50px 50px; animation:spin 3s linear infinite;}
@keyframes spin{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}
.hud-radar .txt{font-size:0.7rem; color:var(--text-muted); line-height:1.5;}
.hud-radar .txt b{color:var(--text-primary); display:block; font-family:var(--font-body); font-size:0.8rem; margin-bottom:2px;}

/* ============================================================
   TRUST STRIP
   ============================================================ */

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{position:relative; z-index:1; padding:110px 0;}
.section-head{max-width:620px; margin-bottom:56px;}
.kicker{
  font-family:var(--font-mono); font-size:0.72rem; color:var(--cyan); letter-spacing:0.04em;
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.kicker::before{content:''; width:20px; height:1px; background:var(--cyan);}
.section-head h2{font-size:clamp(1.7rem, 3vw, 2.5rem);}
.section-head p{color:var(--text-muted); margin-top:14px; font-size:1.02rem; max-width:52ch;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
}
.service{background:var(--bg-panel); position:relative; transition:background .25s;}
.service:hover{background:var(--bg-panel-alt);}
.service:hover .service-media img{transform:scale(1.06); filter:grayscale(0) saturate(1.05) contrast(1.02);}
.service:hover .service-code{border-color:rgba(255,255,255,.5);}
.service-media{position:relative; width:100%; aspect-ratio:4/3; min-height:220px; overflow:hidden; background:var(--bg-void);}
.service-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease), filter .6s var(--ease);
  filter:grayscale(1) contrast(1.05);
}
.service-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
}
.service-code{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--font-mono); font-size:0.64rem; color:#FFFFFF; letter-spacing:0.03em;
  background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.22);
  padding:3px 8px; border-radius:99px; transition:color .25s, border-color .25s;
}
.service-body{padding:22px 22px 26px;}
.service h3{font-size:1.02rem; font-weight:600; margin-bottom:8px;}
.service p{color:var(--text-muted); font-size:0.87rem;}

/* graceful fallback if a hotlinked photo fails to load */
.service-media.img-fallback{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--bg-panel-alt), var(--bg-void));
}
.service-media.img-fallback::before{
  content:''; width:34px; height:34px; border:1.5px solid var(--line-strong); border-radius:8px;
}

.cta-band{
  margin-top:20px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:26px 28px; border:1px solid var(--line-strong); border-radius:var(--radius-m); background:var(--bg-panel);
}
.cta-band h3{font-size:1.05rem; margin-bottom:4px;}
.cta-band p{color:var(--text-muted); font-size:0.9rem;}

/* ============================================================
   PRODUCT FEATURE
   ============================================================ */
.product{background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; position:relative;}
.product-grid{display:grid; grid-template-columns:1fr 1fr;}
.product-copy{padding:52px 48px;}
.product-tag{font-family:var(--font-mono); font-size:0.7rem; color:var(--amber); letter-spacing:0.04em; margin-bottom:16px;}
.product h2{font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:16px;}
.product-copy > p{color:var(--text-muted); margin-bottom:30px; max-width:46ch;}
.feature-list{display:grid; gap:20px;}
.feature-item{display:flex; gap:14px;}
.feature-item .fi-icon{flex:none; width:34px; height:34px; border-radius:var(--radius-s); background:var(--cyan-dim); color:var(--cyan); display:flex; align-items:center; justify-content:center;}
.feature-item .fi-icon svg{width:18px; height:18px;}
.feature-item h4{font-size:0.96rem; margin-bottom:4px;}
.feature-item p{font-size:0.87rem; color:var(--text-muted);}

.product-visual{
  position:relative; background:radial-gradient(circle at 30% 20%, var(--cyan-dim), transparent 55%), var(--bg-panel-alt);
  border-left:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:40px;
}
.device-card{width:100%; max-width:320px; background:var(--bg-raise); border:1px solid var(--line-strong); border-radius:var(--radius-m); padding:22px; font-family:var(--font-mono); box-shadow:0 24px 50px -20px rgba(0,0,0,.18);}
.device-card .dc-head{display:flex; justify-content:space-between; align-items:center; font-size:0.66rem; color:var(--text-dim); margin-bottom:16px;}
.device-card .dc-face{aspect-ratio:1/1; border-radius:8px; border:1.5px dashed var(--cyan-dim); margin-bottom:16px; position:relative; overflow:hidden; background:var(--bg-panel);}
.device-card .dc-face img{width:100%; height:100%; object-fit:cover;}
.device-card .dc-face::after{content:''; position:absolute; left:0; right:0; height:2px; top:0; background:var(--cyan); opacity:.75; box-shadow:0 0 12px var(--cyan); animation:facescan 2.4s ease-in-out infinite;}
@keyframes facescan{0%,100%{top:6%;} 50%{top:92%;}}
.dc-row{display:flex; justify-content:space-between; font-size:0.72rem; padding:8px 0; border-top:1px solid var(--line); color:var(--text-muted);}
.dc-row b{color:var(--text-primary); font-weight:500;}
.dc-row .ok{color:var(--cyan);}

/* ============================================================
   PROCESS
   ============================================================ */
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; position:relative;}
.process-step{position:relative; padding-top:8px;}
.process-step::before{
  content:''; position:absolute; top:0; left:0; right:-28px; height:1px; background:var(--line-strong);
}
.process-step:last-child::before{right:0;}
.ps-num{
  display:inline-block; font-family:var(--font-mono); font-size:0.78rem; color:var(--bg-void);
  background:var(--cyan); padding:4px 9px; border-radius:99px; margin-bottom:18px; font-weight:600;
}
.process-step h3{font-size:1.02rem; margin-bottom:8px;}
.process-step p{color:var(--text-muted); font-size:0.87rem;}

@media (max-width:980px){ .process-grid{grid-template-columns:1fr 1fr; row-gap:36px;} }
@media (max-width:720px){ .process-grid{grid-template-columns:1fr; gap:30px;} .process-step::before{right:0;} }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;}
.faq-item{background:var(--bg-panel); padding:0;}
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 24px; font-family:var(--font-body); font-weight:600; font-size:0.98rem;
  display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--text-primary);
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+'; font-family:var(--font-display); font-size:1.3rem; color:var(--cyan); flex:none;
  transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item summary:hover{color:var(--cyan);}
.faq-item p{padding:0 24px 22px; color:var(--text-muted); font-size:0.92rem; max-width:64ch;}

/* ============================================================
   CONTACT COPY BUTTON
   ============================================================ */
.contact-copy{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; background:none; text-align:left; cursor:pointer;
  font:inherit; color:inherit;
  border:1px solid var(--line-strong); border-radius:var(--radius-s);
}
.contact-copy:hover{color:inherit;}
.contact-copy.copied .ci{color:var(--cta); border-color:var(--cta); background:rgba(47,204,113,.14);}
.contact-copy.copied .ct b{color:var(--cta);}

/* ============================================================
   CASE STUDY
   ============================================================ */
.case-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.case-media{position:relative; width:100%; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line-strong); aspect-ratio:4/5; background:var(--bg-panel);}
.case-media-bg{position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(30px) saturate(120%) brightness(.6); transform:scale(1.3);}
.case-media img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain;}
.case-media::after{content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); pointer-events:none;}

.case-copy h3{font-size:1.4rem; margin-bottom:12px;}
.case-copy > p{color:var(--text-muted); margin-bottom:28px; max-width:46ch;}
.case-points{display:grid; gap:18px;}
.case-point{display:flex; gap:14px; align-items:flex-start;}
.cp-icon{flex:none; width:36px; height:36px; border-radius:var(--radius-s); border:1px solid var(--line-strong); color:var(--amber); display:flex; align-items:center; justify-content:center;}
.cp-icon svg{width:18px; height:18px;}
.case-point b{display:block; font-size:0.94rem; margin-bottom:2px;}
.case-point span{font-size:0.85rem; color:var(--text-muted);}

/* ============================================================
   CAROUSEL
   ============================================================ */
.carousel{position:relative; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line-strong); background:var(--bg-panel);}
.carousel-track{display:flex; width:100%; transition:transform .7s var(--ease); touch-action:pan-y;}
.carousel-slide{position:relative; flex:0 0 100%; width:100%; aspect-ratio:16/9; min-height:240px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.cs-bg{position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(34px) saturate(130%) brightness(.55); transform:scale(1.3);}
.carousel-slide img{position:relative; z-index:1; max-width:100%; max-height:100%; width:auto; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none;}
.cs-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 26px 20px;
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
}
.cs-caption b{display:block; font-family:var(--font-display); font-size:1.05rem; margin-bottom:3px; color:#FFFFFF;}
.cs-caption span{font-size:0.84rem; color:rgba(255,255,255,.78);}

.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#FFFFFF;
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s;
}
.carousel-arrow:hover{background:rgba(0,0,0,.75); border-color:#FFFFFF; color:#FFFFFF;}
.carousel-arrow.prev{left:16px;}
.carousel-arrow.next{right:16px;}
.carousel-arrow svg{width:18px; height:18px;}

.carousel-dots{position:absolute; bottom:16px; right:20px; z-index:3; display:flex; gap:8px;}
.carousel-dots button{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); border:none; padding:0; transition:background .2s, transform .2s;}
.carousel-dots button.active{background:#FFFFFF; transform:scale(1.3);}

/* ============================================================
   DIFERENCIAIS
   ============================================================ */
.diff-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
.diff{border-top:1px solid var(--line-strong); padding-top:22px;}
.diff-icon{width:36px; height:36px; color:var(--cyan); margin-bottom:18px;}
.diff-icon svg{width:100%; height:100%;}
.diff h3{font-size:1.02rem; margin-bottom:8px;}
.diff p{color:var(--text-muted); font-size:0.88rem;}

/* ============================================================
   PARTNERS MARQUEE
   ============================================================ */
.marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:30px 0; -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);}
.marquee-track{display:flex; align-items:center; gap:64px; width:max-content; animation:marquee 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.marquee-item{display:flex; align-items:center; justify-content:center; height:34px;}
.marquee-item img{
  height:100%; width:auto; max-width:140px; object-fit:contain;
  filter:grayscale(1) brightness(1.8) contrast(.9) opacity(.55);
  transition:filter .3s;
}
.marquee-item img:hover{filter:none; opacity:1;}
.marquee-item.text-fallback{font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--text-dim); white-space:nowrap; gap:10px; letter-spacing:0.01em;}

/* ============================================================
   TESTIMONIALS / CLIENTS
   ============================================================ */

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.testimonial{
  background:var(--bg-panel); border:1px solid var(--line-strong); border-radius:var(--radius-m);
  padding:26px 24px; display:flex; flex-direction:column;
}
.t-stars{color:var(--cyan); letter-spacing:2px; font-size:0.9rem; margin-bottom:14px;}
.t-quote{color:var(--text-primary); font-size:0.94rem; line-height:1.6; flex:1; margin-bottom:22px;}
.t-author{display:flex; align-items:center; gap:12px;}
.t-avatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--cyan-dim); color:var(--cyan); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:0.82rem;
}
.t-author b{display:block; font-size:0.9rem;}
.t-author span{font-size:0.78rem; color:var(--text-muted);}

@media (max-width:980px){ .testimonials-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:720px){ .testimonials-grid{grid-template-columns:1fr;} }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:linear-gradient(180deg, var(--bg-panel), var(--bg-void)); border-top:1px solid var(--line);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.contact-info h2{font-size:clamp(1.8rem,3.2vw,2.6rem); margin-bottom:18px; max-width:12ch;}
.contact-info p{color:var(--text-muted); max-width:42ch; margin-bottom:32px;}
.contact-links{display:grid; gap:14px;}
.contact-link{display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line-strong); border-radius:var(--radius-s); transition:border-color .2s, background .2s, transform .2s;}
.contact-link:hover{border-color:var(--cyan); background:var(--bg-panel); transform:translateX(4px);}
.contact-link .ci{width:38px; height:38px; border-radius:var(--radius-s); background:var(--cyan-dim); color:var(--cyan); display:flex; align-items:center; justify-content:center; flex:none;}
.contact-link .ci svg{width:19px; height:19px;}
.contact-link .ct b{display:block; font-size:0.95rem;}
.contact-link .ct span{font-size:0.82rem; color:var(--text-muted); font-family:var(--font-mono);}

.quote-form{background:var(--bg-panel); border:1px solid var(--line-strong); border-radius:var(--radius-m); padding:32px;}
.quote-form h3{font-size:1.1rem; margin-bottom:6px;}
.quote-form > p{color:var(--text-muted); font-size:0.88rem; margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:0.76rem; font-family:var(--font-mono); color:var(--text-dim); margin-bottom:7px; letter-spacing:0.02em;}
.field input, .field select, .field textarea{
  width:100%; background:var(--bg-void); border:1px solid var(--line-strong); border-radius:var(--radius-s);
  padding:12px 14px; color:var(--text-primary); font-family:var(--font-body); font-size:0.92rem; transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--cyan); outline:none;}
.field textarea{resize:vertical; min-height:80px;}
.quote-form .btn{width:100%; justify-content:center; margin-top:6px;}
.form-note{font-size:0.74rem; color:var(--text-dim); margin-top:12px; text-align:center;}

/* ============================================================
   FOOTER
   ============================================================ */
footer{padding:48px 0 32px; border-top:1px solid var(--line);}
.footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.footer-brand{display:flex; align-items:center; gap:10px;}
.footer-brand .brand-mark{width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid var(--line-strong);}
.footer-brand span{font-family:var(--font-mono); font-size:0.78rem; color:var(--text-dim);}
.footer-social{display:flex; gap:10px;}
.footer-social a{width:36px; height:36px; border:1px solid var(--line-strong); border-radius:var(--radius-s); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:color .2s, border-color .2s;}
.footer-social a:hover{color:var(--cyan); border-color:var(--cyan);}
.footer-social svg{width:16px; height:16px;}
.footer-legal{font-size:0.76rem; color:var(--text-dim); margin-top:24px; text-align:center; font-family:var(--font-mono);}
.footer-credit{font-size:0.74rem; color:var(--text-dim); margin-top:10px; text-align:center; font-family:var(--font-mono);}
.footer-credit a{color:var(--cyan); transition:color .2s;}
.footer-credit a:hover{color:var(--text-primary);}

@media (max-width:560px){
  .footer-grid{flex-direction:column; justify-content:center; text-align:center;}
  .footer-social{justify-content:center;}
}

/* ============================================================
   FLOATING ELEMENTS
   ============================================================ */
.fab{position:fixed; right:24px; bottom:24px; z-index:90; display:flex; flex-direction:column; gap:14px; align-items:flex-end;}
.fab-item{position:relative; display:flex; align-items:center;}
.fab-btn{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); position:relative;
}
.fab-wa{
  background:linear-gradient(135deg, #25D366, #128C7E);
  box-shadow:0 14px 32px -8px rgba(18,140,126,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.fab-wa:hover{transform:scale(1.08); box-shadow:0 18px 36px -6px rgba(18,140,126,.75), 0 0 0 1px rgba(255,255,255,.08) inset;}
.fab-wa::after{content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:pulse 2.2s ease-out infinite;}
@keyframes pulse{0%{transform:scale(1); opacity:.6;} 100%{transform:scale(1.7); opacity:0;}}
.fab-wa svg{width:30px; height:30px; position:relative; z-index:1;}

.fab-ai{
  background:#0A0A0A;
  color:#FFFFFF;
  box-shadow:0 14px 32px -8px rgba(10,10,10,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.fab-ai:hover{transform:scale(1.08); box-shadow:0 18px 36px -6px rgba(10,10,10,.45), 0 0 0 1px rgba(255,255,255,.1) inset;}
.fab-ai svg{width:26px; height:26px; animation:aiSpin 6s linear infinite;}
@keyframes aiSpin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .fab-ai svg{animation:none;} }

.fab-label{
  position:absolute; right:70px; top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--bg-raise); border:1px solid var(--line-strong); color:var(--text-primary);
  font-size:0.8rem; font-weight:600; padding:8px 14px; border-radius:var(--radius-s); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.fab-btn:hover ~ .fab-label, .fab-btn:focus-visible ~ .fab-label{opacity:1; transform:translateY(-50%) translateX(0);}

@media (max-width:560px){
  .fab-btn{width:52px; height:52px;}
  .fab-wa svg{width:26px; height:26px;}
  .fab-ai svg{width:23px; height:23px;}
  .fab-label{display:none;}
}


.scroll-progress{position:fixed; top:0; left:0; height:2px; background:var(--cyan); z-index:200; width:0%; box-shadow:0 0 8px var(--cyan);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;}
  .hud{max-width:440px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .diff-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:1fr;}
  .product-visual{border-left:none; border-top:1px solid var(--line); padding:36px;}
  .contact-grid{grid-template-columns:1fr;}
  .case-grid{grid-template-columns:1fr;}
  .case-media{aspect-ratio:4/3;}
}

@media (max-width:720px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:#FFFFFF; border-left:1px solid rgba(10,10,10,0.12);
    box-shadow:-24px 0 60px -20px rgba(0,0,0,.25);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding:40px 28px;
    transform:translateX(100%); transition:transform .35s var(--ease); z-index:99;
    --text-primary:#0A0A0A;
    --text-muted:#5C5C5C;
    --cyan:#0A0A0A;
    --cyan-dim:rgba(10,10,10,0.06);
    --bg-panel:#F6F6F4;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a.nav-link{width:100%; padding:14px 10px; font-size:1rem;}
  .nav-cta{display:none;}
  .nav-links .nav-cta-mobile{
    display:flex; width:100%; justify-content:center;
    margin-top:20px; padding:15px 18px; font-size:0.98rem;
  }
  .nav-toggle{display:flex;}
  .hero{padding-top:120px;}
  .services-grid{grid-template-columns:1fr;}
  .diff-grid{grid-template-columns:1fr; gap:32px;}
  .product-copy{padding:36px 24px;}
  section{padding:76px 0;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn{width:100%; justify-content:center;}
  .carousel-slide{aspect-ratio:4/5;}
}

.nav-scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:98; opacity:0; pointer-events:none; transition:opacity .3s;}
.nav-scrim.show{opacity:1; pointer-events:auto;}

/* ============================================================
   MOBILE PAGE TRANSITION — gate-opening effect
   ============================================================ */
.page-transition{position:fixed; inset:0; z-index:300; display:flex; pointer-events:none;}
.pt-panel{
  flex:1; position:relative; background:linear-gradient(180deg, #141414, #0A0A0A);
  transform:translateX(-100%);
}
.pt-panel.right{transform:translateX(100%);}
.pt-panel::after{
  content:''; position:absolute; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, #FFFFFF, transparent);
  box-shadow:0 0 12px rgba(255,255,255,.3);
}
.pt-panel.left::after{right:0;}
.pt-panel.right::after{left:0;}

.page-transition.closed .pt-panel{transition:none; transform:translateX(0);}
.page-transition.opening .pt-panel{transition:transform .38s cubic-bezier(.6,0,.15,1);}
.page-transition.opening .pt-panel.left{transform:translateX(-100%);}
.page-transition.opening .pt-panel.right{transform:translateX(100%);}

@media (prefers-reduced-motion: reduce){
  .page-transition.opening .pt-panel{transition:none;}
}