/* ==========================================================================
   J.A Smart Tech — Design tokens
   Paleta inspirada na identidade visual real da marca (verde/laranja sobre
   base grafite), tipografia técnica (Sora + Inter + JetBrains Mono).
   ========================================================================== */

:root{
  /* cor */
  --bg-dark: #0a0f0c;
  --bg-dark-alt: #101712;
  --panel-dark: #141d17;
  --line-dark: #223026;

  --green: #8fd13f;
  --green-strong: #6fae28;
  --green-soft: #c4ee8a;

  --orange: #ff9130;
  --orange-strong: #e8720c;

  --bg-light: #f4f7f2;
  --bg-light-alt: #ffffff;
  --ink: #131a15;
  --ink-soft: #45524b;
  --line-light: #dfe8dc;

  --text-onDark: #eaf3e6;
  --text-onDark-muted: #9db19a;

  /* tipografia */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* layout */
  --wrap: 1160px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-lg: 0 20px 50px -20px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark){ :root{ color-scheme: dark; } }

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

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg-light);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.wrap{ max-width: var(--wrap); margin-inline:auto; padding-inline: 20px; }
.wrap-narrow{ max-width: 780px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--green); color:#0a0f0c;
  padding: 10px 16px; z-index: 999; border-radius: 0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline: 3px solid var(--orange); outline-offset: 3px; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-soft);
  margin: 0 0 .8em;
}
.eyebrow-dark{ color: var(--green-strong); }

.section{ padding: clamp(56px, 9vw, 96px) 0; }
.section-lead{ max-width: 620px; color: var(--ink-soft); font-size: 1.05rem; }
.section-lead.light{ color: var(--text-onDark-muted); }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn .icon{ width:20px; height:20px; fill:currentColor; flex-shrink:0; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn-whats{
  background: linear-gradient(135deg, var(--green) 0%, var(--green-strong) 100%);
  color: #08130a;
  box-shadow: 0 10px 30px -10px rgba(143,209,63,.55);
}
.btn-whats:hover{ box-shadow: 0 14px 36px -10px rgba(143,209,63,.7); }

.btn-outline{
  border-color: rgba(234,243,230,.35);
  color: var(--text-onDark);
  background: rgba(234,243,230,.04);
}
.btn-outline:hover{ border-color: var(--orange); color: var(--orange); }

.btn-outline-dark{
  border-color: var(--line-light);
  color: var(--ink);
  background: var(--bg-light-alt);
}
.btn-outline-dark:hover{ border-color: var(--green-strong); color: var(--green-strong); }

.btn-lg{ padding: 16px 28px; font-size: 1.05rem; }
.btn-xl{ padding: 18px 34px; font-size: 1.1rem; }
.btn-header{ padding: 10px 18px; font-size: .9rem; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(10,15,12,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; padding-block: 10px;
}
.brand-logo{ height: 52px; width:auto; }
.main-nav{ display:none; gap: 28px; font-size: .95rem; color: var(--text-onDark); }
.main-nav a{ opacity:.85; }
.main-nav a:hover{ opacity:1; color: var(--green-soft); }
@media (min-width: 860px){ .main-nav{ display:flex; } }

/* ---------- hero ---------- */
.hero{
  position: relative;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(255,145,48,.12), transparent 60%),
              radial-gradient(900px 500px at -10% 20%, rgba(143,209,63,.14), transparent 55%),
              var(--bg-dark);
  color: var(--text-onDark);
  padding: clamp(64px, 12vw, 120px) 0 clamp(56px, 8vw, 88px);
  overflow: hidden;
}
.hero-bg{ position:absolute; inset:0; opacity:.55; pointer-events:none; }
.circuit{ width:100%; height:100%; }
.circuit-lines path{ stroke: url(#none); stroke: var(--line-dark); }
.circuit-lines path{ stroke: #1c2a20; }
.circuit-nodes circle{ fill: var(--green-strong); opacity:.7; }
.circuit-lines path:nth-child(3n){ stroke: #2a2016; }

.hero-inner{ position: relative; max-width: 760px; }
.hero h1{
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--text-onDark) 30%, var(--green-soft) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub{ font-size: clamp(1rem, 2vw, 1.15rem); color: var(--text-onDark-muted); max-width: 58ch; }
.hero-ctas{ display:flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* pulse divider — assinatura visual (linha de batimento do logo) */
.pulse-divider{ background: var(--bg-dark); line-height:0; }
.pulse-divider svg{ width:100%; height:44px; display:block; }
.pulse-path{
  fill:none; stroke-width: 3;
  stroke: var(--green);
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: draw 2.4s ease forwards;
  filter: drop-shadow(0 0 6px rgba(143,209,63,.55));
}
.pulse-divider-alt .pulse-path{ stroke: var(--orange); filter: drop-shadow(0 0 6px rgba(255,145,48,.5)); }
@keyframes draw{ to{ stroke-dashoffset: 0; } }

/* ---------- serviços ---------- */
.services{ background: var(--bg-light); }
.cards-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap: 16px;
  margin-top: 32px;
}
@media (min-width: 720px){ .cards-grid{ grid-template-columns: repeat(4,1fr); } }

.card{
  background: var(--bg-light-alt);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 22px 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-strong); }
.card h3{ font-size: 1.02rem; margin-bottom: .35em; }
.card p{ font-size: .92rem; color: var(--ink-soft); margin:0; }
.card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width: 44px; height:44px; border-radius: 10px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(143,209,63,.16), rgba(255,145,48,.14));
}
.card-icon svg{ width:22px; height:22px; fill:none; stroke: var(--green-strong); stroke-width:1.8; }

/* ---------- marcas ---------- */
.brands{ background: var(--bg-dark-alt); color: var(--text-onDark); }
.brand-list{
  display:flex; flex-wrap:wrap; gap: 12px; margin-top: 28px;
}
.brand-list li{
  font-family: var(--font-mono);
  font-size: .95rem;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(234,243,230,.18);
  background: rgba(234,243,230,.04);
}

/* ---------- why ---------- */
.why{ background: var(--bg-light); }
.why-grid{
  display:grid; grid-template-columns: 1fr; gap: 22px; margin-top: 32px;
}
@media (min-width: 720px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px){ .why-grid{ grid-template-columns: repeat(3,1fr); } }
.why-item{ border-left: 3px solid var(--orange); padding-left: 16px; }
.why-item h3{ font-size: 1.02rem; margin-bottom: .3em; }
.why-item p{ font-size: .93rem; color: var(--ink-soft); margin:0; }

/* ---------- bloco seo ---------- */
.seo-block{ background: var(--bg-light-alt); }
.seo-block p{ color: var(--ink-soft); font-size: 1.02rem; }
.seo-block h2{ font-size: clamp(1.5rem, 3.4vw, 2.1rem); }

/* ---------- faq ---------- */
.faq{ background: var(--bg-light); }
.faq-list{ margin-top: 28px; display:flex; flex-direction:column; gap: 10px; }
.faq-item{
  background: var(--bg-light-alt);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  padding: 4px 18px;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding: 16px 0;
  font-weight: 600; font-size: 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:1.3rem; color: var(--green-strong); flex-shrink:0;
  transition: transform .2s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ color: var(--ink-soft); padding-bottom: 16px; margin:0; font-size: .95rem; }

/* ---------- localização ---------- */
.location{ background: var(--bg-light-alt); }
.map-frame{
  margin-top: 28px; border-radius: var(--radius); overflow:hidden;
  border: 1px solid var(--line-light); box-shadow: var(--shadow-lg);
  position: relative; padding-top: 56.25%; height:0;
}
.map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-cta{ margin-top: 22px; }

/* ---------- cta final ---------- */
.final-cta{
  background: linear-gradient(135deg, var(--bg-dark) 0%, #14200f 100%);
  color: var(--text-onDark);
  text-align:center;
}
.final-cta h2{ font-size: clamp(1.6rem, 4vw, 2.4rem); }
.final-cta p{ color: var(--text-onDark-muted); max-width: 52ch; margin-inline:auto; margin-bottom: 1.6em; }

/* ---------- footer ---------- */
.site-footer{ background: var(--bg-dark); color: var(--text-onDark-muted); }
.footer-inner{
  display:flex; flex-wrap:wrap; gap: 28px; justify-content:space-between;
  padding-block: 44px 24px;
  border-bottom: 1px solid rgba(234,243,230,.08);
}
.footer-brand{ max-width: 320px; }
.footer-brand p{ font-size: .9rem; margin-top: 10px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap: 18px 26px; align-items:flex-start; }
.footer-nav a:hover{ color: var(--green-soft); }
.footer-bottom{ padding-block: 18px; font-size: .82rem; }

/* ---------- whatsapp flutuante ---------- */
.whats-float{
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-strong) 100%);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.5);
  transition: transform .15s ease;
}
.whats-float .icon{ width: 28px; height: 28px; fill: #08130a; }
.whats-float:hover{ transform: scale(1.08); }