/* =========================================================
   LaudoHub — Telerradiologia Odontológica
   Folha de estilo principal
   ========================================================= */

:root{
  /* Cores da marca (extraídas do logo) */
  --navy-900:#050a18;
  --navy-800:#080f26;
  --navy-700:#0b1533;
  --navy-600:#111e4a;
  --brand-navy:#1b2a8a;
  --brand-blue:#2f6bff;
  --brand-cyan:#22d3ee;
  --brand-cyan-soft:#7ee8fa;

  --text:#e9efff;
  --text-muted:#9db0d8;
  --line:rgba(126,168,255,.14);
  --line-strong:rgba(126,168,255,.28);

  --grad-brand:linear-gradient(120deg,#1b2a8a 0%,#2f6bff 45%,#22d3ee 100%);
  --grad-text:linear-gradient(100deg,#7cb2ff 0%,#22d3ee 60%,#7ee8fa 100%);

  --radius:20px;
  --radius-sm:12px;
  --shadow-lg:0 30px 70px -25px rgba(0,10,45,.9);
  --shadow-glow:0 0 0 1px rgba(126,168,255,.12), 0 20px 60px -20px rgba(34,211,238,.35);

  --font-head:"Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:112px}

body{
  margin:0;
  background:var(--navy-900);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head); line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0; list-style:none}

.container{width:min(100% - 40px, var(--container)); margin-inline:auto}
.container.narrow{width:min(100% - 40px, 820px)}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand-cyan); color:#03121c; padding:10px 16px; border-radius:0 0 10px 0; font-weight:600;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--brand-cyan); outline-offset:3px; border-radius:6px}

/* ---------------- Botões ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-head); font-weight:600; font-size:15px;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; position:relative; isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s, border-color .25s;
  transform-style:preserve-3d;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:var(--grad-brand); color:#fff;
  box-shadow:0 12px 30px -12px rgba(47,107,255,.85), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{box-shadow:0 20px 45px -14px rgba(34,211,238,.8), inset 0 1px 0 rgba(255,255,255,.35)}

.btn-outline{
  border-color:var(--line-strong); color:var(--text);
  background:rgba(255,255,255,.03); backdrop-filter:blur(8px);
}
.btn-outline:hover{border-color:var(--brand-cyan); background:rgba(34,211,238,.08)}

.btn-ghost{border-color:var(--line-strong); background:transparent; padding:9px 16px; font-size:14px}
.btn-lg{padding:15px 30px; font-size:16px}
.btn-block{width:100%}

/* ---------------- Header ---------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:16px 0;
  transition:padding .3s, background .3s, box-shadow .3s, backdrop-filter .3s;
}
.site-header.scrolled{
  padding:9px 0;
  background:rgba(5,10,24,.78);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 var(--line), 0 20px 40px -30px #000;
}
.header-inner{display:flex; align-items:center; gap:20px}

.brand{display:inline-flex; align-items:center; gap:12px; font-family:var(--font-head); font-size:25px; letter-spacing:-.02em}
.brand-mark{
  width:62px; height:62px; display:grid; place-items:center; flex:none;
  border-radius:18px; background:radial-gradient(120% 120% at 30% 20%, rgba(47,107,255,.35), rgba(5,10,24,.6));
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s;
  transform-style:preserve-3d;
}
.brand:hover .brand-mark{transform:rotateY(22deg) rotateX(-8deg) translateZ(6px); box-shadow:0 14px 30px -14px rgba(34,211,238,.7)}
.brand-mark img{width:50px; height:50px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(34,211,238,.4))}
.brand-text{font-weight:400; color:var(--text)}
.brand-text strong{font-weight:800; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}

.nav{margin-left:auto; display:flex; align-items:center; gap:26px}
.nav a{font-size:15px; color:var(--text-muted); font-weight:500; position:relative; transition:color .2s}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--grad-brand); border-radius:2px; transition:width .3s;
}
.nav a:hover{color:var(--text)}
.nav a:hover::after{width:100%}
.nav .nav-cta{display:none}
.header-cta{padding:11px 20px; font-size:14px}

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:12px; flex:none;
  background:rgba(255,255,255,.04); border:1px solid var(--line); cursor:pointer;
  padding:0; place-items:center; gap:5px;
}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s, opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- Hero ---------------- */
.hero{position:relative; padding:150px 0 0; overflow:hidden}
.hero-bg{position:absolute; inset:0; pointer-events:none}
.hero-bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 78% 12%, rgba(34,211,238,.18), transparent 62%),
    radial-gradient(760px 480px at 12% 4%, rgba(47,107,255,.20), transparent 60%),
    linear-gradient(180deg,#050a18 0%, #070f28 55%, #050a18 100%);
}
.orb{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform}
.orb-1{width:420px; height:420px; top:-60px; left:-80px; background:radial-gradient(circle at 30% 30%, #2f6bff, transparent 70%)}
.orb-2{width:520px; height:520px; top:120px; right:-140px; background:radial-gradient(circle at 40% 40%, #22d3ee, transparent 70%)}

.grid-floor{
  position:absolute; left:50%; bottom:-10px; width:220%; height:340px;
  transform:translateX(-50%) perspective(600px) rotateX(72deg);
  background-image:
    linear-gradient(to right, rgba(126,168,255,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(126,168,255,.16) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to top, #000 5%, transparent 78%);
  -webkit-mask-image:linear-gradient(to top, #000 5%, transparent 78%);
  opacity:.5;
}

.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px; align-items:center; padding-bottom:70px;
}

.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px; border-radius:999px; font-size:13.5px; font-weight:500;
  color:#cfe0ff; background:rgba(47,107,255,.10); border:1px solid var(--line-strong);
  backdrop-filter:blur(10px); margin-bottom:22px;
}
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--brand-cyan); box-shadow:0 0 0 4px rgba(34,211,238,.18); animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(34,211,238,.18)}50%{box-shadow:0 0 0 9px rgba(34,211,238,0)}}

.hero h1{font-size:clamp(2.3rem, 5.2vw, 4rem); font-weight:800; margin-bottom:.35em}
.hero h1 .grad{
  display:block;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{font-size:clamp(1rem,1.35vw,1.14rem); color:var(--text-muted); max-width:56ch}

.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 26px}

.hero-checks{display:grid; gap:10px}
.hero-checks li{display:flex; align-items:center; gap:11px; font-size:15px; color:#c3d2f2}
.check{
  width:22px; height:22px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:12px; color:#03121c; background:linear-gradient(140deg,#7ee8fa,#22d3ee);
  box-shadow:0 6px 16px -8px rgba(34,211,238,.9);
}

/* --- Visual 3D do hero --- */
.hero-visual{position:relative; min-height:460px; display:grid; place-items:center}
.canvas-wrap{position:relative; width:100%; aspect-ratio:1/1; max-width:520px}
#tooth-canvas{width:100%; height:100%; display:block; position:relative; z-index:2; cursor:grab}
#tooth-canvas:active{cursor:grabbing}
.canvas-glow{
  position:absolute; inset:12%; border-radius:50%; z-index:1;
  background:radial-gradient(circle, rgba(47,107,255,.28), rgba(34,211,238,.10) 45%, transparent 70%);
  filter:blur(30px); animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.85}50%{transform:scale(1.12); opacity:1}}

.floating-card{
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:12px;
  padding:13px 17px; border-radius:16px;
  background:rgba(9,17,42,.72); border:1px solid var(--line-strong);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-lg);
  animation:float 6s ease-in-out infinite;
  will-change:transform;
}
.floating-card strong{display:block; font-family:var(--font-head); font-size:14.5px}
.floating-card small{color:var(--text-muted); font-size:12.5px}
.fc-icon{
  width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; font-size:13px; color:#fff;
  background:linear-gradient(140deg,var(--brand-navy),var(--brand-blue));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.fc-icon-cyan{background:linear-gradient(140deg,#0e7490,#22d3ee); color:#04121a}
.fc-1{left:-14px; top:14%}
.fc-2{right:-10px; bottom:16%; animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* --- Marquee --- */
.marquee{
  position:relative; z-index:2;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(5,10,24,.5); overflow:hidden; padding:14px 0;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex; gap:26px; width:max-content; animation:scroll-x 42s linear infinite}
.marquee-track span{font-family:var(--font-head); font-size:14px; color:var(--text-muted); white-space:nowrap; letter-spacing:.02em}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- Números ---------------- */
.stats{padding:56px 0 10px}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.stat{
  padding:26px 22px; border-radius:var(--radius); text-align:center;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .35s;
}
.stat:hover{transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow-glow)}
.stat-num{
  display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(1.9rem,3.4vw,2.6rem);
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Números escritos por extenso pedem um corpo menor que os numéricos */
.stat-num.stat-word{font-size:clamp(1.35rem,2.4vw,1.95rem); letter-spacing:-.01em}
.stat-label{font-size:14px; color:var(--text-muted)}

/* ---------------- Seções ---------------- */
.section{padding:96px 0; position:relative}
.section-alt{background:linear-gradient(180deg, transparent, rgba(17,30,74,.35) 22%, rgba(17,30,74,.35) 78%, transparent)}

.section-head{max-width:660px; margin:0 auto 52px; text-align:center}
.eyebrow{
  display:inline-block; font-family:var(--font-head); font-size:12.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand-cyan); margin-bottom:14px;
}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:700}
.section-head p{color:var(--text-muted); margin:0}
.section-note{text-align:center; color:var(--text-muted); margin-top:36px; font-size:15px}
.section-note a{color:var(--brand-cyan); border-bottom:1px solid rgba(34,211,238,.4)}

/* ---------------- Cards 3D ---------------- */
.cards-3d,.feat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px;
  perspective:1400px;
}
.card,.feat{
  position:relative; border-radius:var(--radius);
  background:linear-gradient(165deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
  border:1px solid var(--line);
  transform-style:preserve-3d;
  transition:transform .18s ease-out, border-color .35s, box-shadow .35s;
  will-change:transform;
}
.card::before,.feat::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(34,211,238,.16), transparent 45%);
  opacity:0; transition:opacity .35s;
}
.card:hover,.feat:hover{border-color:var(--line-strong); box-shadow:var(--shadow-glow)}
.card:hover::before,.feat:hover::before{opacity:1}
.card-inner{padding:30px 28px; transform-style:preserve-3d}
.card-inner > *{transform:translateZ(28px)}
.card h3,.feat h3{font-size:1.18rem; font-weight:700}
.card p,.feat p{color:var(--text-muted); font-size:15px; margin:0}

.card-icon{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin-bottom:18px;
  color:#cfe9ff; background:linear-gradient(150deg, rgba(47,107,255,.35), rgba(34,211,238,.18));
  border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 14px 26px -18px rgba(34,211,238,.9);
  transform:translateZ(46px) !important;
}
.card-tag{
  display:inline-block; margin-top:18px; padding:5px 12px; border-radius:999px;
  font-size:12.5px; font-weight:600; font-family:var(--font-head);
  color:var(--brand-cyan-soft); background:rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.25);
}

/* ---------------- Passos ---------------- */
.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;
  perspective:1200px; margin-bottom:72px;
}
.step{
  position:relative; padding:30px 24px 26px; border-radius:var(--radius);
  background:linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid var(--line);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s, border-color .4s;
  transform-style:preserve-3d;
}
.step:hover{transform:translateY(-8px) rotateX(6deg); box-shadow:var(--shadow-glow); border-color:var(--line-strong)}
.step-num{
  display:inline-block; font-family:var(--font-head); font-weight:800; font-size:2.3rem; line-height:1;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:14px; opacity:.9;
}
.step h3{font-size:1.1rem}
.step p{color:var(--text-muted); font-size:14.5px; margin:0}
.step::after{
  content:""; position:absolute; top:44px; right:-14px; width:22px; height:1px;
  background:linear-gradient(90deg,var(--line-strong),transparent);
}
.step:last-child::after{display:none}

/* ---------------- Laudo 3D ---------------- */
.report-showcase{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center;
  perspective:1500px;
}
.report-3d{position:relative; perspective:1400px}
.report-page{
  position:relative;
  background:linear-gradient(170deg,#f7faff,#e6edfb);
  color:#0b1533; border-radius:14px; padding:26px 24px;
  transform:rotateY(-19deg) rotateX(9deg) rotateZ(1.5deg);
  transform-style:preserve-3d;
  box-shadow:
    28px 34px 60px -28px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.5) inset;
  transition:transform .7s cubic-bezier(.2,.8,.3,1), box-shadow .7s;
  animation:reportFloat 8s ease-in-out infinite;
}
.report-3d:hover .report-page{transform:rotateY(-6deg) rotateX(3deg) translateZ(24px)}
@keyframes reportFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
.report-page::after{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.75), transparent 42%);
  opacity:.55;
}
.rp-head{display:flex; align-items:center; gap:12px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid rgba(11,21,51,.12)}
.rp-logo{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:var(--grad-brand); box-shadow:0 8px 18px -10px rgba(47,107,255,.9);
}
.rp-head b{font-family:var(--font-head); font-size:15px; display:block}
.rp-head small{color:#516086; font-size:11.5px}
.rp-line{height:8px; border-radius:6px; background:linear-gradient(90deg, rgba(11,21,51,.16), rgba(11,21,51,.07)); margin-bottom:9px}
.rp-block{margin:18px 0}
.rp-label{
  display:block; font-family:var(--font-head); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#2f6bff; margin-bottom:9px;
}
.rp-sign{margin-top:26px; padding-top:14px; border-top:1px dashed rgba(11,21,51,.18)}
.rp-sign small{color:#516086; font-size:11px}
.w95{width:95%}.w90{width:90%}.w85{width:85%}.w80{width:80%}.w70{width:70%}.w60{width:60%}.w50{width:50%}.w40{width:40%}

.report-copy h3{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.ticks{display:grid; gap:13px; margin:22px 0 28px}
.ticks li{position:relative; padding-left:32px; color:#c3d2f2; font-size:15.5px}
.ticks li::before{
  content:""; position:absolute; left:0; top:6px; width:19px; height:19px; border-radius:50%;
  background:linear-gradient(140deg,#7ee8fa,#22d3ee);
  box-shadow:0 6px 16px -8px rgba(34,211,238,.9);
}
.ticks li::after{
  content:""; position:absolute; left:6px; top:11px; width:7px; height:3.5px;
  border-left:2px solid #03121c; border-bottom:2px solid #03121c; transform:rotate(-45deg);
}

/* ---------------- Para quem ---------------- */
.who-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.who{
  padding:28px 24px; border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .35s;
}
.who:hover{transform:translateY(-6px) scale(1.015); border-color:var(--line-strong); box-shadow:var(--shadow-glow)}
.who h3{font-size:1.08rem}
.who p{color:var(--text-muted); font-size:14.5px; margin:0}

/* ---------------- FAQ ---------------- */
.faq{display:grid; gap:12px}
.faq details{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  padding:0 22px; transition:border-color .3s, box-shadow .3s, background .3s;
}
.faq details[open]{border-color:var(--line-strong); box-shadow:var(--shadow-glow)}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 34px 18px 0; position:relative;
  font-family:var(--font-head); font-weight:600; font-size:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:2px; top:26px; width:10px; height:10px;
  border-right:2px solid var(--brand-cyan); border-bottom:2px solid var(--brand-cyan);
  transform:rotate(45deg); transition:transform .3s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{color:var(--text-muted); font-size:15px; padding-bottom:20px; margin:0}

/* ---------------- Contato ---------------- */
.contact{padding-bottom:110px}
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:52px; align-items:start}
.contact-copy h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.contact-copy p{color:var(--text-muted)}
.contact-list{display:grid; gap:16px; margin-top:30px}
.contact-list li{display:flex; flex-direction:column; gap:2px; padding:16px 20px; border-radius:var(--radius-sm); border:1px solid var(--line); background:rgba(255,255,255,.03)}
.ci{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-cyan); font-weight:600}
.contact-list a{font-family:var(--font-head); font-size:16px}
.contact-list a:hover{color:var(--brand-cyan-soft)}

.contact-form{
  padding:32px 30px; border-radius:var(--radius);
  background:linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);
}
.field{margin-bottom:16px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field label{display:block; font-size:13px; font-weight:600; color:#b9c9ea; margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:12px; font-family:var(--font-body); font-size:15px;
  color:var(--text); background:rgba(5,10,24,.55); border:1px solid var(--line);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field textarea{resize:vertical; min-height:88px}
.field input::placeholder,.field textarea::placeholder{color:#6f80a6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand-cyan); background:rgba(5,10,24,.8);
  box-shadow:0 0 0 4px rgba(34,211,238,.14);
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--brand-cyan) 50%),linear-gradient(135deg,var(--brand-cyan) 50%,transparent 50%); background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat}
.field select option{background:#0b1533; color:var(--text)}
.field .invalid{border-color:#ff7a90; box-shadow:0 0 0 4px rgba(255,122,144,.14)}
.form-note{font-size:12.5px; color:var(--text-muted); text-align:center; margin:14px 0 0}

/* ---------------- Rodapé ---------------- */
.site-footer{border-top:1px solid var(--line); background:rgba(5,10,24,.9); padding:60px 0 26px}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px}
.footer-about{color:var(--text-muted); font-size:14.5px; margin-top:18px; max-width:44ch}
.site-footer h4{font-family:var(--font-head); font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:#b9c9ea; margin-bottom:16px}
.site-footer nav a,.site-footer div > a,.footer-plain{display:block; color:var(--text-muted); font-size:15px; margin-bottom:10px; transition:color .2s}
.site-footer nav a:hover,.site-footer div > a:hover{color:var(--brand-cyan)}
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
}
.footer-bottom small{color:#7f90b5; font-size:12.5px}

/* ---------------- WhatsApp flutuante ---------------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:linear-gradient(140deg,#25d366,#128c7e);
  box-shadow:0 16px 34px -12px rgba(37,211,102,.75);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.wa-float:hover{transform:translateY(-4px) scale(1.06); box-shadow:0 22px 44px -12px rgba(37,211,102,.9)}

/* ---------------- Animações de entrada ---------------- */
.reveal{
  opacity:0; transform:translateY(28px) perspective(900px) rotateX(6deg);
  transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1);
  will-change:opacity, transform;
}
.reveal.is-visible{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}

/* ---------------- Responsivo ---------------- */
@media (max-width:1024px){
  .hero{padding-top:120px}
  .hero-inner{grid-template-columns:1fr; gap:20px; text-align:center}
  .lead{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-checks{justify-items:center}
  .hero-visual{min-height:400px; order:-1}
  .canvas-wrap{max-width:420px}
  .report-showcase{grid-template-columns:1fr; gap:60px}
  .report-page{transform:rotateY(-10deg) rotateX(6deg)}
  .contact-grid{grid-template-columns:1fr; gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){
  body{font-size:16px}
  .nav-toggle{display:grid; margin-left:auto}
  .header-cta{display:none}
  .nav{
    position:absolute; top:calc(100% + 8px); left:20px; right:20px;
    flex-direction:column; align-items:stretch; gap:4px; padding:14px;
    border-radius:18px; background:rgba(8,15,38,.97); border:1px solid var(--line-strong);
    backdrop-filter:blur(18px); box-shadow:var(--shadow-lg);
    opacity:0; visibility:hidden; transform:translateY(-12px) scale(.98);
    transition:opacity .3s, transform .3s, visibility .3s;
  }
  .nav.open{opacity:1; visibility:visible; transform:none}
  .nav a{padding:12px 10px; font-size:16px; border-radius:10px}
  .nav a:hover{background:rgba(255,255,255,.05)}
  .nav a::after{display:none}
  .nav .nav-cta{display:flex; margin-top:6px; justify-content:center}
  .section{padding:74px 0}
  .step::after{display:none}
  .fc-1{left:-6px; top:6%}
  .fc-2{right:-6px; bottom:8%}
  .floating-card{padding:10px 13px}
  .fc-icon{width:38px; height:38px; font-size:12px}
}

@media (max-width:560px){
  /* A marca continua destacada, mas sem espremer o botao do menu */
  .brand{font-size:21px; gap:10px}
  .brand-mark{width:52px; height:52px; border-radius:16px}
  .brand-mark img{width:42px; height:42px}

  /* Em telas estreitas, um único card flutuante evita cobrir o dente 3D */
  .fc-1{display:none}
  .fc-2{right:0; bottom:4%}
  .hero-visual{min-height:340px}
  .stats-grid{grid-template-columns:1fr 1fr; gap:12px}
  .field-row{grid-template-columns:1fr; gap:0}
  .footer-grid{grid-template-columns:1fr}
  .contact-form{padding:24px 20px}
  .card-inner{padding:26px 22px}
  .wa-float{width:52px; height:52px; right:16px; bottom:16px}
}

/* ---------------- Acessibilidade: movimento reduzido ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{opacity:1; transform:none}
}