/* ============================================================
   SevenNeves — Sistema de design
   Paleta restrita: #f1f1f1 · #45f · #222
   Mobile-first
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:    #f1f1f1;
  --ink:   #222;
  --accent:#45f;            /* = #4455ff */

  --ink-08: rgba(34,34,34,.08);
  --ink-12: rgba(34,34,34,.12);
  --ink-55: rgba(34,34,34,.55);
  --acc-12: rgba(68,85,255,.12);

  --display: 'Bricolage Grotesque', sans-serif;
  --body:    'Hanken Grotesk', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --maxw: 1180px;
  --pad: 22px;
  --r: 4px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* ---------- selection ---------- */
::selection { background:var(--accent); color:var(--bg); }

/* ---------- mono label ---------- */
.label {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-55);
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.label::before {
  content:"";
  width:18px; height:1px;
  background:var(--accent);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(241,241,241,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ink-08);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand {
  font-family:var(--display);
  font-weight:800;
  font-size:21px;
  letter-spacing:-.04em;
  line-height:1;
}
.brand .dot { color:var(--accent); }

.nav-links { display:none; }

.nav-cta {
  display:none;
}

/* burger */
.burger {
  width:42px; height:42px;
  display:grid; place-items:center;
  background:none; border:1px solid var(--ink-12);
  border-radius:var(--r);
  cursor:pointer;
}
.burger span {
  display:block; width:18px; height:2px; background:var(--ink);
  position:relative; transition:.25s;
}
.burger span::before, .burger span::after {
  content:""; position:absolute; left:0; width:18px; height:2px;
  background:var(--ink); transition:.25s;
}
.burger span::before { top:-6px; }
.burger span::after  { top:6px; }
.burger.open span { background:transparent; }
.burger.open span::before { top:0; transform:rotate(45deg); }
.burger.open span::after  { top:0; transform:rotate(-45deg); }

/* mobile drawer */
.drawer {
  position:fixed; inset:64px 0 auto 0;
  background:var(--bg);
  border-bottom:1px solid var(--ink-12);
  transform:translateY(-110%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:49;
  padding:14px var(--pad) 28px;
}
.drawer.open { transform:translateY(0); }
.drawer a {
  display:block;
  font-family:var(--display);
  font-weight:700; font-size:30px;
  letter-spacing:-.03em;
  padding:14px 0;
  border-bottom:1px solid var(--ink-08);
}
.drawer a:last-of-type { border-bottom:none; }
.drawer a span { color:var(--ink-55); font-family:var(--mono); font-size:13px; margin-right:10px; }
.drawer .drawer-cta {
  margin-top:20px;
  background:var(--accent); color:var(--bg);
  text-align:center; border-radius:var(--r);
  font-family:var(--body); font-weight:600; font-size:16px;
  letter-spacing:0; padding:16px; border:none;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:15px;
  padding:15px 24px; border-radius:var(--r);
  border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  cursor:pointer; transition:.2s; line-height:1;
}
.btn:hover { background:var(--accent); border-color:var(--accent); }
.btn .arr { transition:transform .25s; }
.btn:hover .arr { transform:translateX(4px); }

.btn-ghost {
  background:transparent; color:var(--ink); border:1px solid var(--ink-12);
}
.btn-ghost:hover { background:transparent; border-color:var(--accent); color:var(--accent); }

.btn-acc { background:var(--accent); border-color:var(--accent); }
.btn-acc:hover { background:var(--ink); border-color:var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding:64px 0 48px; position:relative; }
.hero::after {
  content:""; position:absolute; right:-120px; top:20px;
  width:280px; height:280px; border-radius:50%;
  background:var(--accent); opacity:.10; filter:blur(40px); z-index:-1;
}
.hero h1 {
  font-family:var(--display); font-weight:800;
  font-size:clamp(42px, 13vw, 92px);
  line-height:.95; letter-spacing:-.045em;
  margin:26px 0 22px;
}
.hero h1 em { font-style:normal; color:var(--accent); }
.hero p {
  font-size:17px; color:var(--ink-55); max-width:42ch;
  margin-bottom:30px;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }

/* reveal anim */
.reveal { opacity:0; transform:translateY(18px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-top:1px solid var(--ink-12); border-bottom:1px solid var(--ink-12);
  padding:18px 0; overflow:hidden; white-space:nowrap;
}
.marquee-track { display:inline-flex; gap:42px; animation:scroll 22s linear infinite; }
.marquee span {
  font-family:var(--display); font-weight:700; font-size:26px;
  letter-spacing:-.03em; color:var(--ink); display:inline-flex; align-items:center; gap:42px;
}
.marquee span::after { content:"·"; color:var(--accent); }
@keyframes scroll { to { transform:translateX(-50%); } }

/* ============================================================
   SECTION
   ============================================================ */
section { padding:56px 0; }
.sec-head { margin-bottom:34px; }
.sec-head h2 {
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px, 8vw, 52px); line-height:1;
  letter-spacing:-.04em; margin-top:14px;
}

/* services */
.services { display:grid; gap:14px; }
.card {
  border:1px solid var(--ink-12); border-radius:var(--r);
  padding:26px 22px; background:var(--bg); transition:.25s;
  position:relative; overflow:hidden;
}
.card:hover { border-color:var(--accent); transform:translateY(-3px); }
.card .num {
  font-family:var(--mono); font-size:12px; color:var(--accent);
  letter-spacing:.1em;
}
.card h3 {
  font-family:var(--display); font-weight:700; font-size:22px;
  letter-spacing:-.02em; margin:16px 0 8px;
}
.card p { font-size:14.5px; color:var(--ink-55); }

/* stats */
.stats { display:grid; gap:1px; background:var(--ink-12); border:1px solid var(--ink-12); border-radius:var(--r); overflow:hidden; }
.stat { background:var(--bg); padding:28px 22px; }
.stat .big { font-family:var(--display); font-weight:800; font-size:46px; letter-spacing:-.04em; line-height:1; }
.stat .big em { font-style:normal; color:var(--accent); }
.stat p { font-size:13px; color:var(--ink-55); margin-top:8px; }

/* steps */
.steps { display:grid; gap:0; }
.step {
  display:grid; grid-template-columns:auto 1fr; gap:18px;
  padding:24px 0; border-top:1px solid var(--ink-12);
}
.step:last-child { border-bottom:1px solid var(--ink-12); }
.step .sn { font-family:var(--mono); color:var(--accent); font-size:13px; padding-top:5px; }
.step h3 { font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.02em; }
.step p { font-size:14.5px; color:var(--ink-55); margin-top:6px; }

/* ============================================================
   PORTFOLIO CARDS
   ============================================================ */
.folio { display:grid; gap:22px; }
.folio-card {
  border:1px solid var(--ink-12); border-radius:var(--r);
  overflow:hidden; background:var(--bg); transition:.25s;
  display:flex; flex-direction:column;
}
.folio-card:hover { border-color:var(--accent); transform:translateY(-4px); }

.browser {
  background:var(--ink); padding:11px 14px;
  display:flex; align-items:center; gap:7px;
}
.browser i { width:10px; height:10px; border-radius:50%; background:rgba(241,241,241,.35); display:block; }
.browser i:nth-child(2){ background:rgba(241,241,241,.22);}
.browser i:nth-child(3){ background:rgba(241,241,241,.12);}
.browser .url {
  margin-left:10px; flex:1;
  font-family:var(--mono); font-size:11px; color:var(--bg);
  background:rgba(241,241,241,.12); padding:6px 12px; border-radius:20px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.folio-preview {
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(135deg, var(--acc-12), transparent);
  display:grid; place-items:center;
}
.folio-preview .ghost {
  font-family:var(--display); font-weight:800;
  font-size:clamp(34px,11vw,60px); letter-spacing:-.05em;
  color:var(--ink); opacity:.10; text-align:center; padding:0 10px;
}
.folio-preview iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

.folio-body { padding:20px 20px 24px; }
.folio-body .tag { font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.12em; text-transform:uppercase; }
.folio-body h3 { font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.03em; margin:10px 0 6px; }
.folio-body p { font-size:14px; color:var(--ink-55); margin-bottom:18px; }
.folio-link {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:14px; color:var(--ink);
  border-bottom:2px solid var(--accent); padding-bottom:2px; transition:.2s;
}
.folio-link:hover { color:var(--accent); gap:12px; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta {
  background:var(--ink); color:var(--bg);
  border-radius:var(--r); padding:48px 26px; text-align:center;
  position:relative; overflow:hidden;
}
.cta::after {
  content:""; position:absolute; left:50%; bottom:-80px; transform:translateX(-50%);
  width:300px; height:300px; border-radius:50%; background:var(--accent);
  opacity:.5; filter:blur(70px);
}
.cta h2 { font-family:var(--display); font-weight:800; font-size:clamp(28px,8vw,48px); letter-spacing:-.04em; line-height:1; position:relative; }
.cta p { color:rgba(241,241,241,.65); margin:16px auto 28px; max-width:40ch; position:relative; }
.cta .btn { background:var(--accent); border-color:var(--accent); position:relative; }
.cta .btn:hover { background:var(--bg); color:var(--ink); border-color:var(--bg); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display:grid; gap:36px; }
.contact-info .item { padding:20px 0; border-top:1px solid var(--ink-12); }
.contact-info .item:last-child { border-bottom:1px solid var(--ink-12); }
.contact-info .k { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-55); }
.contact-info .v { font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.02em; margin-top:6px; }
.contact-info .v a:hover { color:var(--accent); }

form { display:grid; gap:16px; }
.field { display:grid; gap:7px; }
.field label { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-55); }
.field input, .field textarea, .field select {
  font-family:var(--body); font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--ink-12); border-radius:var(--r);
  padding:14px 15px; width:100%; transition:.2s;
}
.field textarea { resize:vertical; min-height:130px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--acc-12);
}
.field.err input, .field.err textarea, .field.err select { border-color:var(--accent); }
.field .msg { font-size:12px; color:var(--accent); display:none; }
.field.err .msg { display:block; }

.form-note {
  margin-top:6px; padding:16px; border-radius:var(--r);
  background:var(--acc-12); font-size:14px; display:none;
}
.form-note.show { display:block; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { border-top:1px solid var(--ink-12); padding:42px 0 32px; }
.foot-top { display:grid; gap:26px; }
.foot-brand { font-family:var(--display); font-weight:800; font-size:32px; letter-spacing:-.04em; }
.foot-brand .dot { color:var(--accent); }
.foot-brand + p { font-size:14px; color:var(--ink-55); margin-top:10px; max-width:34ch; }
.foot-col h4 { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-55); margin-bottom:14px; }
.foot-col a { display:block; font-size:15px; padding:5px 0; }
.foot-col a:hover { color:var(--accent); }
.foot-bot {
  margin-top:34px; padding-top:20px; border-top:1px solid var(--ink-08);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  font-family:var(--mono); font-size:11px; color:var(--ink-55); letter-spacing:.06em;
}

/* page hero (interior pages) */
.page-hero { padding:48px 0 30px; }
.page-hero h1 { font-family:var(--display); font-weight:800; font-size:clamp(38px,12vw,76px); letter-spacing:-.045em; line-height:.95; margin:18px 0 14px; }
.page-hero h1 em { font-style:normal; color:var(--accent); }
.page-hero p { font-size:16px; color:var(--ink-55); max-width:48ch; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:680px){
  .services { grid-template-columns:repeat(2,1fr); }
  .stats { grid-template-columns:repeat(2,1fr); }
  .folio { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr 1fr; }
  .foot-top { grid-template-columns:2fr 1fr 1fr; }
  form .two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
}

@media (min-width:900px){
  :root { --pad:40px; }
  .nav-links {
    display:flex; gap:8px; align-items:center;
  }
  .nav-links a {
    font-family:var(--mono); font-size:12px; letter-spacing:.08em;
    text-transform:uppercase; padding:10px 14px; border-radius:var(--r);
    color:var(--ink-55); transition:.2s;
  }
  .nav-links a:hover, .nav-links a.active { color:var(--ink); }
  .nav-links a.active { color:var(--accent); }
  .nav-cta { display:inline-flex; }
  .burger { display:none; }
  .drawer { display:none; }

  .services { grid-template-columns:repeat(3,1fr); }
  .stats { grid-template-columns:repeat(4,1fr); }
  .hero { padding:96px 0 70px; }
  .hero p { font-size:19px; }
  section { padding:80px 0; }
  .cta { padding:80px 40px; }
  .contact-grid { gap:60px; }
}

@media (min-width:1024px){
  .hero-flex { display:grid; grid-template-columns:1.4fr .8fr; align-items:end; gap:40px; }
}