:root{
  --bg:#F7F9FC;
  --surface:#FFFFFF;
  --ink:#0B1F33;
  --ink-soft:#4A5A6B;
  --ink-faint:#8B98A6;
  --accent:#185FA5;
  --accent-dark:#0C447C;
  --accent-soft:#E6F1FB;
  --border:#DDE4EC;
  --radius:10px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

header{position:sticky; top:0; z-index:50; background:rgba(247,249,252,0.85); backdrop-filter:blur(8px); border-bottom:0.5px solid var(--border);}
header .wrap{display:flex; align-items:center; justify-content:space-between; height:84px;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:17px;}
.logo-mark{width:32px; height:32px; border-radius:8px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:500; font-size:14px;}
nav ul{display:flex; gap:32px; list-style:none;}
nav a{font-size:14px; color:var(--ink-soft);}
nav a:hover{color:var(--ink);}
.nav-cta{background:var(--ink); color:#fff; padding:9px 18px; border-radius:var(--radius); font-size:14px; font-weight:500; white-space:nowrap;}

.hero{padding:96px 0 88px; position:relative; overflow:hidden;}
.hero-grid{position:absolute; inset:0; z-index:0; background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 0%, black 0%, transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 50% 0%, black 0%, transparent 75%); opacity:0.6;}
.hero-inner{position:relative; z-index:1; max-width:640px; margin:0 auto; text-align:center;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; color:var(--accent-dark); background:var(--accent-soft); padding:6px 14px; border-radius:999px; margin-bottom:22px;}
.eyebrow::before{content:'●'; color:var(--accent); font-size:8px;}
h1{font-family:var(--font-display); font-weight:600; font-size:clamp(32px,5vw,46px); line-height:1.15; letter-spacing:-0.01em; margin-bottom:18px;}
.hero p.sub{font-size:16px; color:var(--ink-soft); max-width:460px; margin:0 auto 32px;}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.btn{font-family:var(--font-body); font-weight:500; font-size:14.5px; padding:12px 22px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--border);}
.btn-secondary:hover{border-color:var(--accent);}

section{padding:80px 0;}
.section-head{margin-bottom:40px; max-width:520px;}
.kicker{font-family:var(--font-mono); font-size:12px; color:var(--accent); margin-bottom:10px; display:block;}
h2{font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:-0.01em;}
.section-head p{color:var(--ink-soft); font-size:15px; margin-top:10px;}

#projetos{background:var(--surface); border-top:0.5px solid var(--border); border-bottom:0.5px solid var(--border);}
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:0.5px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.project-card{background:var(--surface); padding:26px 22px; display:block; cursor:pointer;}
.project-card:hover{background:var(--accent-soft);}
.project-tag{font-family:var(--font-mono); font-size:11px; color:var(--accent-dark); background:var(--accent-soft); padding:3px 9px; border-radius:5px; display:inline-block; margin-bottom:14px;}
.project-card h3{font-family:var(--font-display); font-weight:600; font-size:16px; margin-bottom:8px;}
.project-card p{font-size:13.5px; color:var(--ink-soft); margin-bottom:16px;}
.project-link{font-size:13px; color:var(--accent-dark); font-weight:500;}
.empty-note{font-size:14px; color:var(--ink-faint); padding:20px 0;}

.service-list{display:flex; flex-direction:column; border-top:0.5px solid var(--border);}
.service-row{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 0; border-bottom:0.5px solid var(--border);}
.service-num{font-family:var(--font-mono); font-size:13px; color:var(--ink-faint); padding-top:2px;}
.service-row h3{font-family:var(--font-display); font-weight:600; font-size:17px; margin-bottom:6px;}
.service-row p{font-size:14.5px; color:var(--ink-soft); max-width:520px;}

#contato{background:var(--ink); color:#fff;}
#contato .kicker{color:#7FB3E8;}
#contato h2{color:#fff;}
#contato .section-head p{color:#AEC2D6;}
.contact-box{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start;}
.contact-form{display:flex; flex-direction:column; gap:14px;}
.contact-form input, .contact-form textarea{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius); padding:12px 14px; font-family:var(--font-body); font-size:14px; color:#fff;}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:#7C8CA0;}
.contact-form textarea{min-height:110px; resize:vertical;}
.form-success{background:rgba(24,95,165,0.25); border:1px solid var(--accent); padding:12px 14px; border-radius:var(--radius); font-size:13.5px; margin-bottom:6px;}
.contact-info{border-left:0.5px solid rgba(255,255,255,0.14); padding-left:36px;}
.contact-info .item{margin-bottom:22px;}
.contact-info .label{font-family:var(--font-mono); font-size:11px; color:#7FB3E8; margin-bottom:4px; display:block;}
.contact-info .value{font-size:15px; font-weight:500;}

footer{padding:28px 0; background:var(--ink);}
footer .wrap{display:flex; align-items:center; justify-content:space-between; border-top:0.5px solid rgba(255,255,255,0.1); padding-top:24px; font-size:13px; color:#7C8CA0;}

@media (max-width:760px){
  nav ul{display:none;}
  .project-grid{grid-template-columns:1fr;}
  .contact-box{grid-template-columns:1fr; gap:32px;}
  .contact-info{border-left:none; padding-left:0; border-top:0.5px solid rgba(255,255,255,0.14); padding-top:24px;}
  .service-row{grid-template-columns:40px 1fr;}
  footer .wrap{flex-direction:column; gap:10px; text-align:center;}
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}