/*
Theme Name: Blueland Technologies
Theme URI: https://blueland.bgsystems.com.br
Author: Blueland Technologies
Author URI: https://blueland.bgsystems.com.br
Description: Tema institucional para automação HVAC — página de rosto Blueland Technologies.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: blueland
*/

:root{
  --bg:            #F1F4F3;
  --bg-panel:      #FFFFFF;
  --line:          #DCE3E1;
  --text:          #17262B;
  --text-dim:      #5C7176;
  --copper:        #9A5220;
  --blue:          #1F4E73;
  --radius: 3px;
  --maxw: 1140px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk', 'Inter', sans-serif;
  font-weight:600;
  line-height:1.1;
  margin:0;
}
.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}

a:focus-visible, button:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- Header ---------- */
header{
  border-bottom:1px solid var(--line);
  position:sticky; top:0;
  background:rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  z-index:10;
}
header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:90px;
}
.logo{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:0.01em;
  display:flex;
  align-items:center;
  gap:10px;
}
.logo .dot{
  width:9px; height:9px;
  background:var(--copper);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(154,82,32,0.18);
}
nav ul{
  list-style:none;
  display:flex;
  gap:34px;
  margin:0; padding:0;
}
nav a{
  text-decoration:none;
  font-size:0.94rem;
  color:var(--text-dim);
  transition:color .15s ease;
}
nav a:hover{ color:var(--text); }
.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:0.18;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, black 30%, transparent 75%);
}
.hero .wrap{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:56px;
  align-items:center;
  padding-top:88px;
  padding-bottom:88px;
}
.eyebrow{
  color:var(--copper);
  font-size:0.86rem;
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(2.1rem, 4vw, 3rem);
  max-width:15ch;
}
.hero p.lead{
  color:var(--text-dim);
  font-size:1.08rem;
  max-width:46ch;
  margin-top:20px;
}
.cta-row{
  display:flex;
  gap:16px;
  margin-top:34px;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:13px 24px;
  border-radius:var(--radius);
  font-size:0.95rem;
  font-weight:500;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{
  background:var(--copper);
  color:#FFFFFF;
}
.btn-primary:hover{ transform:translateY(-1px); }
.btn-ghost{
  border-color:var(--line);
  color:var(--text);
}
.btn-ghost:hover{ border-color:var(--blue); }

/* Painel de leitura (readout) */
.panel{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.panel-head .mono{
  font-size:0.78rem;
  color:var(--text-dim);
}
.status-live{
  display:flex; align-items:center; gap:7px;
  font-size:0.78rem;
  color:var(--blue);
}
.status-live .blip{
  width:7px; height:7px;
  background:var(--blue);
  border-radius:50%;
}
.readout-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
.readout{
  border-left:2px solid var(--line);
  padding-left:12px;
}
.readout .label{
  font-size:0.72rem;
  color:var(--text-dim);
}
.readout .value{
  font-family:'IBM Plex Mono', monospace;
  font-size:1.5rem;
  margin-top:4px;
}
.readout.ok{ border-left-color:var(--blue); }
.readout.warn{ border-left-color:var(--copper); }

@media (prefers-reduced-motion:no-preference){
  .draw{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    animation:draw 1.6s ease forwards;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
}

/* ---------- Seções genéricas ---------- */
section{ padding:88px 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
.section-head{
  max-width:56ch;
  margin-bottom:52px;
}
.section-head .kicker{
  color:var(--copper);
  font-size:0.86rem;
  margin-bottom:10px;
}
.section-head h2{
  font-size:clamp(1.6rem, 3vw, 2.1rem);
}
.section-head p{
  color:var(--text-dim);
  margin-top:14px;
}

/* ---------- Como funciona (processo) ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.step{
  padding:32px 28px;
  border-right:1px solid var(--line);
}
.step:last-child{ border-right:none; }
.step .num{
  font-family:'IBM Plex Mono', monospace;
  color:var(--text-dim);
  font-size:0.85rem;
}
.step h3{
  font-size:1.15rem;
  margin-top:14px;
}
.step p{
  color:var(--text-dim);
  margin-top:10px;
  font-size:0.95rem;
}

/* ---------- Diferenciais ---------- */
.features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.feature{
  background:var(--bg);
  padding:30px 32px;
}
.feature h3{
  font-size:1.08rem;
  display:flex; align-items:center; gap:10px;
}
.feature h3 .mark{
  width:6px; height:6px;
  background:var(--blue);
  border-radius:50%;
  flex:none;
}
.feature p{
  color:var(--text-dim);
  margin-top:10px;
  font-size:0.95rem;
}

/* ---------- Métricas ---------- */
.metrics{
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.metric{ min-width:160px; }
.metric .value{
  font-family:'Space Grotesk', sans-serif;
  font-size:2.6rem;
  color:var(--copper);
}
.metric .label{
  color:var(--text-dim);
  font-size:0.92rem;
  margin-top:6px;
}

/* ---------- Contato ---------- */
.contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.contact-list{ list-style:none; padding:0; margin:22px 0 0; }
.contact-list li{
  padding:14px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:0.95rem;
}
.contact-list li:last-child{ border-bottom:1px solid var(--line); }
.contact-list .k{ color:var(--text-dim); }

footer{
  padding:28px 0;
}
footer .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.85rem;
  color:var(--text-dim);
  flex-wrap:wrap;
  gap:12px;
}

@media (max-width:860px){
  nav{ display:none; }
  .hero .wrap{ grid-template-columns:1fr; padding-top:56px; padding-bottom:56px; }
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:none; border-bottom:1px solid var(--line); }
  .step:last-child{ border-bottom:none; }
  .features{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  section{ padding:64px 0; }
}