/* ——— Tokens (tema claro) ——— */
:root{
  --bg: #ffffff;
  --surface: #f8fafc;
  --elev: #f1f5f9;
  --line: #e5e7eb;
  --text: #0f172a;
  --muted: #475569;
  --brand: #2563eb;
  --brand-2: #16a34a;
  --maxw: 1120px;
  --radius: 14px;
  --gap: clamp(.75rem, 1.8vw, 1.25rem);
  --shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

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

img{max-width:100%;display:block}
a{color:inherit}
.container{width:min(100% - 2rem, var(--maxw)); margin-inline:auto}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#111827; color:#fff; border-radius:8px;
}

/* ——— Header ——— */
.site-header{
  position: sticky; top:0; z-index:20;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex; align-items:center; gap:.75rem; justify-content:space-between; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:700}
.badge-flx{ display:inline-grid; place-items:center; height:28px; padding:0 .55rem; border-radius:999px; background: linear-gradient(90deg, #2563eb, #16a34a); color:#fff; font-weight:700; box-shadow: var(--shadow) }
.badge-flx.small{ height:22px; padding:0 .5rem; font-size:.85rem }
.nav__toggle{display:none; background:none; border:1px solid var(--line); border-radius:8px; color:var(--text); padding:.35rem .6rem}
.nav__menu{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav__menu a{ text-decoration:none; padding:.4rem .6rem; border-radius:8px }
.nav__menu a:hover{ background: var(--surface) }

/* ——— Hero ——— */
.hero{ padding-block: clamp(3rem, 8vw, 7rem); background: linear-gradient(180deg, var(--surface), transparent) }
.hero__inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--gap); align-items:center }
.hero__copy h1{ font-size: clamp(2rem, 5vw, 3.2rem); line-height:1.15; margin:0 0 .6rem }
.lead{ color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.15rem); margin: 0 0 1rem }
.hero__cta{ display:flex; gap:.75rem; margin: 1rem 0 }
.hero__badges{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; list-style:none; padding:0; margin:1rem 0 0; color: var(--muted) }
.grad{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.btn{ display:inline-block; text-decoration:none; padding:.7rem 1rem; border-radius:999px; border:1px solid var(--brand) }
.btn--primary{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); border:none; color:#fff; font-weight:700 }
.btn--ghost{ background: transparent }

.hero__art img{ border-radius: var(--radius); border:1px solid var(--line); box-shadow: var(--shadow) }

/* ——— Sections ——— */
.section{ padding-block: clamp(2.5rem, 6vw, 4rem) }
.section--soft{ background: var(--surface); border-block: 1px solid var(--line) }
h2{ font-size: clamp(1.4rem, 3.2vw, 2rem); margin:0 0 .6rem }
.grid{ display:grid; gap: var(--gap) }
.cards-3{ grid-template-columns: repeat(3, 1fr) }
.card{ background: #fff; border:1px solid var(--line); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow) }
.card h3{ margin:.2rem 0 .4rem }
.muted{ color: var(--muted) }

.projects{ grid-template-columns: repeat(3, 1fr) }
.project-card{ background: #fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow) }
.project-card figcaption{ padding:.75rem; color: var(--muted); display:flex; flex-direction:column; gap:.25rem }

.cta__box{ background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(22,163,74,.10)); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 4vw, 2rem); text-align:center; box-shadow: var(--shadow) }

/* ——— Contato ——— */
.contact{ display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--gap) }
.form{ display:grid; gap:.65rem; background: #fff; border:1px solid var(--line); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow) }
.form input, .form textarea{ width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--text) }
.form button{ justify-self:start }
.form__hint{ color: var(--muted); margin:.25rem 0 0 }
.contact__info{ list-style:none; padding:0; margin:0; background: #fff; border:1px solid var(--line); border-radius: var(--radius); padding:1rem; display:grid; gap:.4rem; box-shadow: var(--shadow) }

/* ——— Footer ——— */
.site-footer{ border-top:1px solid var(--line); padding:1.2rem 0; color: var(--muted); background:#fff }
.footer__inner{ display:flex; align-items:center; justify-content:space-between }
.footer__brand{ display:flex; align-items:center; gap:.5rem }
.brand span{ font-weight:700 }

/* ——— Responsive ——— */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .projects{ grid-template-columns: repeat(2, 1fr) }
  .cards-3{ grid-template-columns: repeat(2, 1fr) }
  .contact{ grid-template-columns: 1fr }
}
@media (max-width: 720px){
  .nav__toggle{ display:inline-block }
  .nav__menu{ display:none; position:absolute; right:1rem; top:56px; background: #fff; border:1px solid var(--line); border-radius:12px; padding:.5rem; flex-direction:column; min-width:220px; box-shadow: var(--shadow) }
  .nav__menu.is-open{ display:flex }
  .projects{ grid-template-columns: 1fr }
  .cards-3{ grid-template-columns: 1fr }
}