:root{
  /* Eco-Tech palette */
  --navy:#06202A;             /* deep ocean */
  --green:#19B57E;            /* eco green */
  --teal:#12A4A6;             /* tech teal */
  --lime:#A9F27A;             /* highlight */
  --bg:#F3F7F6;               /* soft eco background */
  --text:#24323A;
  --muted:rgba(36,50,58,.74);

  --card:#FFFFFF;
  --border:rgba(6,32,42,.12);
  --border2:rgba(6,32,42,.08);
  --shadow: 0 14px 30px rgba(6,32,42,.08);

  --grad: linear-gradient(135deg, rgba(25,181,126,.95), rgba(18,164,166,.92));
  --grad-dark: linear-gradient(135deg, rgba(6,32,42,1), rgba(18,164,166,.35));
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:26px 18px 44px;}
.footer{
  padding:18px;text-align:center;color:rgba(46,46,46,.7);
  font-size:.92rem;border-top:1px solid var(--border2);background:#fff;
}

/* Topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;background:#fff;border-bottom:1px solid var(--border2);
  position:sticky;top:0;z-index:50;
}
.brand{display:flex; gap:12px; align-items:center;}
.brand-mark{
  width:38px;height:38px;border-radius:12px;
  background: linear-gradient(135deg, var(--navy), var(--green));
  box-shadow: 0 10px 22px rgba(15,42,68,.14);
}
.brand-text{line-height:1.1}
.brand-name{font-weight:900;letter-spacing:.10em;color:var(--navy);font-size:.95rem;}
.brand-tag{font-size:.84rem;color:rgba(46,46,46,.7);margin-top:3px;}

.topbar-nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.topbar-nav a{
  color:var(--navy);text-decoration:none;font-weight:650;font-size:.95rem;
  padding:8px 8px;border-radius:10px;
}
.topbar-nav a:hover{background:rgba(15,42,68,.04);}
.nav-cta{
  padding:8px 14px !important;border-radius:10px !important;
  border:1px solid rgba(15,42,68,.15);background:#fff;
}
.nav-ghost{
  padding:8px 12px !important;border-radius:10px !important;
  border:1px dashed rgba(15,42,68,.18);color:rgba(15,42,68,.9);
}

/* Buttons */
.btn-primary{
  background:var(--navy);color:#fff;padding:10px 14px;border-radius:12px;
  text-decoration:none;font-weight:750;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(15,42,68,.1);
}
.btn-primary:hover{opacity:.92}
.btn-secondary{
  background:#fff;color:var(--navy);padding:10px 14px;border-radius:12px;
  text-decoration:none;font-weight:750;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
}
.btn-secondary:hover{background:rgba(15,42,68,.03)}

/* Pills */
.pill{
  display:inline-flex;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid var(--border);
  font-weight:650;font-size:.85rem;color:rgba(15,42,68,.90);
}

/* Sections */
.section{margin-top:34px;}
.section-head h2{margin:0 0 8px;color:var(--navy);font-size:1.35rem;}
.section-head p{margin:0;color:var(--muted);max-width:900px}

/* Cards / Grid */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow: var(--shadow);
}
.card-title{font-weight:850;color:var(--navy);margin-bottom:8px;}

.grid-3{
  margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
@media (max-width: 980px){ .grid-3{grid-template-columns:1fr} }

.grid-2{
  margin-top:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
@media (max-width: 980px){ .grid-2{grid-template-columns:1fr} }

/* Hero */
.hero{
  display:grid;grid-template-columns:1.25fr .75fr;gap:28px;padding:22px 0 12px;
}
@media (max-width: 980px){ .hero{grid-template-columns:1fr} }

.hero-kicker{
  font-weight:900;letter-spacing:.12em;color:rgba(15,42,68,.62);margin:0 0 10px;
}
.hero h1{margin:0;color:var(--navy);font-size:2.55rem;line-height:1.08;}
.hero-subtitle{margin:12px 0 16px;color:rgba(46,46,46,.80);font-size:1.06rem;max-width:760px;}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
.trust-row{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;}

.hero-metrics{display:grid;gap:14px;}
.metric{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow: var(--shadow);
}
.metric strong{display:block;color:var(--navy);font-size:1rem;}
.metric span{display:block;margin-top:6px;color:var(--muted);font-size:.95rem;}
.hero-note{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(244,246,248,1));
  border:1px solid var(--border);border-radius:16px;padding:14px;
}
.mini-title{font-weight:900;color:var(--navy);margin-bottom:8px;}
.hero-note p{margin:0;color:var(--muted);}

/* Flow */
.flow-steps{
  margin-top:14px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
@media (max-width: 980px){ .flow-steps{grid-template-columns:1fr} }
.flow-step{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;text-align:center;box-shadow: var(--shadow);
}
.flow-step span{
  display:inline-block;font-weight:900;color:#fff;background:var(--navy);
  width:30px;height:30px;line-height:30px;border-radius:999px;margin-bottom:10px;
}
.flow-step p{margin:0;color:rgba(46,46,46,.82);}

/* CTA strip */
.cta-strip{
  margin-top:18px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow: var(--shadow);
}
@media (max-width: 980px){ .cta-strip{flex-direction:column;align-items:flex-start;} }
.cta-title{font-weight:900;color:var(--navy);}
.cta-sub{color:var(--muted);margin-top:4px}

/* Page hero */
.page-hero{
  display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start;margin-top:10px;
}
@media (max-width: 980px){ .page-hero{grid-template-columns:1fr} }
.page-kicker{margin:0 0 8px;font-weight:900;letter-spacing:.10em;color:rgba(15,42,68,.62);}
.page-hero h1{margin:0;color:var(--navy);font-size:2.05rem;}
.page-subtitle{margin:10px 0 0;color:var(--muted);font-size:1.02rem;max-width:900px;}
.page-side .side-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow: var(--shadow);
}

/* Modules */
.modules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width: 980px){ .modules-grid{grid-template-columns:1fr} }
.module-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow: var(--shadow);
}
.module-card h3{margin:0 0 8px;color:var(--navy);}
.module-card p{margin:0;color:rgba(46,46,46,.82);line-height:1.45;}
.module-wide{grid-column: span 3;}
@media (max-width: 980px){ .module-wide{grid-column:auto;} }

.clean-list{margin:0;padding-left:18px;color:rgba(46,46,46,.82);line-height:1.6}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mt-10{margin-top:10px}
.mt-14{margin-top:14px}

/* Values row */
.values{display:flex;flex-wrap:wrap;gap:8px}

/* Notes */
.note{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;
  box-shadow: var(--shadow);color:rgba(46,46,46,.86);
}

/* New: architecture grid */
.arch-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (max-width: 980px){ .arch-grid{grid-template-columns:1fr} }

.arch-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow: var(--shadow);
}
.arch-title{font-weight:900;color:var(--navy);margin-bottom:8px}
.arch-card p{margin:0;color:rgba(46,46,46,.82);line-height:1.55}

/* New: timeline */
.timeline{
  margin-top:16px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--shadow);
}
.t-item{
  display:flex;gap:12px;align-items:flex-start;
}
.t-item + .t-item{margin-top:12px;padding-top:12px;border-top:1px solid var(--border2)}
.t-dot{
  width:12px;height:12px;border-radius:999px;background:var(--navy);margin-top:5px;flex:0 0 auto;
}
.t-title{font-weight:900;color:var(--navy)}
.t-sub{margin-top:4px;color:var(--muted);line-height:1.55}

/* Alerts */
.alerts{margin:10px 0}
.alert{padding:10px 12px;border-radius:12px;margin:8px 0;border:1px solid var(--border);background:#fff;}
.alert-danger{border-color: rgba(220,38,38,.25);}

/* Auth (login) compatibility */
.auth-body{
  background:var(--bg);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;
}
.auth-card{
  width:100%;max-width:420px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;
  box-shadow: 0 18px 42px rgba(15,42,68,.10);
}
.form{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
label{font-weight:800;color:rgba(15,42,68,.85);}
input{padding:10px 12px;border-radius:12px;border:1px solid var(--border);outline:none;}
button.btn-primary{border:none;cursor:pointer;}
.hint{margin:10px 0 0;font-size:.9rem;color:rgba(46,46,46,.7);}
/* Eco-Tech background: subtle grid + gradient glow */
body{
  background:
    radial-gradient(900px 420px at 12% 8%, rgba(25,181,126,.18), transparent 60%),
    radial-gradient(900px 420px at 92% 18%, rgba(18,164,166,.16), transparent 60%),
    linear-gradient(0deg, rgba(6,32,42,.03), rgba(6,32,42,.03)),
    repeating-linear-gradient(90deg, rgba(6,32,42,.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(6,32,42,.03) 0 1px, transparent 1px 28px),
    var(--bg);
}

/* Brand mark: leaf + circuit vibe (pure CSS) */
.brand-mark{
  width:40px;height:40px;border-radius:14px;
  background: var(--grad);
  position: relative;
  box-shadow: 0 14px 28px rgba(6,32,42,.14);
  overflow:hidden;
}
.brand-mark::before{
  /* "leaf" curve */
  content:"";
  position:absolute;
  width:26px;height:26px;
  border-radius: 22px 4px 22px 4px;
  background: rgba(255,255,255,.22);
  transform: rotate(-18deg);
  left:7px; top:7px;
}
.brand-mark::after{
  /* "circuit line" */
  content:"";
  position:absolute;
  width:60px;height:2px;
  background: rgba(255,255,255,.35);
  transform: rotate(22deg);
  left:-10px; top:26px;
}

/* Accent text */
.accent{
  background: linear-gradient(90deg, var(--green), var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Topbar tweaks for eco-tech */
.topbar{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(6,32,42,.08);
}
.topbar-nav a{ color: rgba(6,32,42,.92); }
.topbar-nav a:hover{ background: rgba(6,32,42,.04); }

/* Buttons: eco-tech */
.btn-primary{
  background: linear-gradient(135deg, var(--navy), rgba(18,164,166,.85));
  border: 1px solid rgba(6,32,42,.12);
}
.btn-secondary{
  border: 1px solid rgba(6,32,42,.14);
}

/* Hero eco glass effect */
.hero-eco .hero-metrics .metric,
.hero-eco .hero-note,
.hero-eco .flow-step,
.hero-eco .card{
  border: 1px solid rgba(6,32,42,.10);
}

.metric strong{ color: rgba(6,32,42,.96); }

/* Cards: a touch more premium */
.card, .metric, .flow-step, .module-card, .side-card, .timeline, .note{
  box-shadow: 0 18px 36px rgba(6,32,42,.08);
  border-radius: 18px;
}

/* CTA strip: eco highlight */
.cta-strip{
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.80));
  border: 1px solid rgba(6,32,42,.10);
}
.cta-title{
  color: rgba(6,32,42,.95);
}
/* ===== Login (Eco-Tech) ===== */
.auth-eco{
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(25,181,126,.22), transparent 60%),
    radial-gradient(900px 520px at 88% 22%, rgba(18,164,166,.20), transparent 60%),
    linear-gradient(0deg, rgba(6,32,42,.03), rgba(6,32,42,.03)),
    repeating-linear-gradient(90deg, rgba(6,32,42,.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(6,32,42,.03) 0 1px, transparent 1px 28px),
    var(--bg);
}

.auth-shell{
  width:100%;
  max-width: 1080px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 980px){
  .auth-shell{ grid-template-columns: 1fr; }
  .auth-side{ display:none; }
}

.auth-card-eco{
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(6,32,42,.12);
  box-shadow: 0 22px 60px rgba(6,32,42,.14);
  padding: 20px 18px;
}

.brand-center{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-bottom: 8px;
}

.brand-mark-lg{
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
}

.brand-copy .brand-name{
  font-size: 1rem;
}

.auth-head{
  margin-top: 8px;
  padding: 10px 10px 4px;
  text-align: left;
}

.auth-head h1{
  margin:0;
  font-size: 1.35rem;
  color: rgba(6,32,42,.96);
  letter-spacing: .02em;
}

.auth-head p{
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: .96rem;
}

.form-eco{ margin-top: 10px; gap: 12px; }

.field label{
  display:block;
  margin-bottom: 6px;
  font-weight: 850;
  color: rgba(6,32,42,.86);
}

.input-wrap{
  position: relative;
  display:flex;
  align-items:center;
}

.input-wrap input{
  width:100%;
  padding: 11px 12px 11px 40px;
  border-radius: 14px;
  border: 1px solid rgba(6,32,42,.14);
  background: rgba(255,255,255,.95);
  transition: box-shadow .15s ease, border-color .15s ease, transform .02s ease;
}

.input-wrap input:focus{
  outline:none;
  border-color: rgba(18,164,166,.45);
  box-shadow: 0 0 0 4px rgba(18,164,166,.12);
}

.input-wrap::before{
  content:"";
  position:absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  opacity: .75;
  background: rgba(6,32,42,.75);
  -webkit-mask: var(--ico) center/contain no-repeat;
  mask: var(--ico) center/contain no-repeat;
}

/* Simple inline SVG masks (no external assets) */
.input-user{ --ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\"><path fill=\"black\" d=\"M12 12a4 4 0 1 0-4-4a4 4 0 0 0 4 4Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z\"/></svg>'); }
.input-lock{ --ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\"><path fill=\"black\" d=\"M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2Zm-7-2a2 2 0 0 1 4 0v2h-4Z\"/></svg>'); }

.btn-wide{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
}

.auth-foot{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(6,32,42,.08);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.auth-badge{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(6,32,42,.12);
  background: rgba(255,255,255,.80);
  color: rgba(6,32,42,.86);
  font-weight: 800;
  font-size: .85rem;
}

.auth-note{
  color: rgba(6,32,42,.62);
  font-weight: 750;
  font-size: .85rem;
}

.auth-side{
  display:flex;
  align-items:stretch;
}

.side-panel{
  width:100%;
  border-radius: 22px;
  border: 1px solid rgba(6,32,42,.12);
  background: linear-gradient(135deg, rgba(6,32,42,.96), rgba(18,164,166,.22));
  box-shadow: 0 22px 60px rgba(6,32,42,.16);
  padding: 22px;
  color: rgba(255,255,255,.92);
  position: relative;
  overflow:hidden;
}

.side-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 260px at 20% 20%, rgba(25,181,126,.35), transparent 60%),
    radial-gradient(520px 260px at 80% 30%, rgba(18,164,166,.30), transparent 60%);
  pointer-events:none;
}

.side-kicker{
  position:relative;
  font-weight: 900;
  letter-spacing: .14em;
  font-size: .82rem;
  color: rgba(255,255,255,.72);
}

.side-title{
  position:relative;
  margin-top: 10px;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
}

.side-sub{
  position:relative;
  margin-top: 10px;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}

.side-pills{
  position:relative;
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.side-pills .pill{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
}
.checkline{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight:750;
  color: rgba(6,32,42,.86);
  margin-top: 6px;
}
.checkline input{
  width:18px;
  height:18px;
  margin-top: 2px;
}.nda-pre{
  white-space: pre-wrap;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 14px;
  color: rgba(6,32,42,.88);
  line-height: 1.55;
  max-height: 520px;
  overflow: auto;
}
.checkline{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight:750;
  color: rgba(6,32,42,.86);
  margin-top: 6px;
}
.checkline input{
  width:18px;
  height:18px;
  margin-top: 2px;
}
.kv{
  display:grid;
  gap:10px;
}
.kv > div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border:1px solid var(--border2);
  border-radius:14px;
  background: rgba(255,255,255,.65);
}
.kv span{
  color: var(--muted);
  font-weight:800;
}
.kv strong{
  color: rgba(6,32,42,.92);
  text-align:right;
  font-weight:900;
}
.btn-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(220,38,38,.35);
  background: rgba(220,38,38,.10);
  color: rgba(185,28,28,.95);
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
}
.btn-danger:hover{
  background: rgba(220,38,38,.16);
}

/* ====== Mobile-first helpers ====== */
:root{
  --container-pad: 18px;
}

.container{
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* evita “zoom”/estouro em textos longos no mobile */
body, p, a, div { word-wrap: break-word; overflow-wrap: anywhere; }

/* ====== Topbar responsive ====== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-left{
  min-width: 0;
}

.brand-text{
  min-width: 0;
}

.brand-name{
  letter-spacing: 0.08em; /* opcional, mantém institucional */
}

.brand-tag{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52vw; /* evita quebrar feio no celular */
}

/* Botão hamburger (escondido no desktop) */
.nav-toggle{
  display: none;
  border: 0;
  background: transparent;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
}

.nav-toggle span{
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background: currentColor;
  opacity: .9;
}

/* ====== Layout da Home (hero/grids/flow) ====== */
.hero{
  /* se seu hero já tiver display grid/flex, tudo bem */
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-actions a{
  white-space: nowrap;
}

.trust-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* grids genéricos: mantém no desktop; muda no mobile via media */
.grid-2, .grid-3{
  /* assume que seu theme.css já define grid;
     aqui só garantimos que não estoura */
  min-width: 0;
}

.flow-steps{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.flow-step{
  min-width: 0;
}

/* CTA strip responsivo */
.cta-strip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-strip .btn-primary{
  flex: 0 0 auto;
}

/* ====== Breakpoint mobile ====== */
@media (max-width: 860px){

  /* topbar vira 2 linhas e nav vira dropdown */
  .topbar{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px var(--container-pad);
  }

  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .topbar-nav{
    grid-column: 1 / -1;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    margin-top: 6px;
  }

  /* abre/fecha via atributo data-open */
  .topbar-nav[data-open="true"]{
    display: flex;
  }

  .topbar-nav a{
    padding: 10px 10px;
    border-radius: 12px;
  }

  .topbar-nav .nav-cta,
  .topbar-nav .nav-ghost{
    width: 100%;
    text-align: center;
  }

  .brand-tag{
    max-width: 70vw;
  }

  /* HERO: coluna */
  .hero{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .hero-content h1{
    font-size: 1.8rem;   /* ajuste fino */
    line-height: 1.15;
  }

  .hero-subtitle{
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions a{
    width: 100%;
    text-align: center;
  }

  /* Métricas do hero: empilha */
  .hero-metrics{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Grids 2/3: vira 1 coluna */
  .grid-2, .grid-3{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Flow: quebra em 2 colunas no mobile */
  .flow-steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* CTA strip: botão embaixo */
  .cta-strip{
    flex-direction: column;
    align-items: stretch;
  }

  .cta-strip a.btn-primary{
    width: 100%;
    text-align: center;
  }

  /* Footer com padding decente */
  .footer{
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
}

/* ====== Breakpoint bem pequeno (celulares menores) ====== */
@media (max-width: 420px){
  .hero-content h1{
    font-size: 1.55rem;
  }
  .brand-tag{
    max-width: 62vw;
  }
}