@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --accent: 234 179 8;
  --navy: #0b1220;
  --navy-2: #111827;
  --slate-panel: #0f172a;
}

html { scroll-behavior: smooth; }

body {
  font-family: Inter, system-ui, sans-serif;
  background: #020617;
  color: #e2e8f0;
}

.font-display {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

/* Bilingual */
.lang-en { display: none !important; }
html[lang="en"] .lang-pt { display: none !important; }
html[lang="en"] .lang-en { display: revert !important; }

.section-title {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.nav-link {
  transition: color 0.15s ease;
}
.nav-link:hover,
.nav-link.is-active {
  color: rgb(var(--accent));
}

.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--accent) / 0.35);
  box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.55);
}

.btn-primary {
  background: rgb(var(--accent));
  color: #0f172a;
  font-weight: 600;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover {
  filter: brightness(1.05);
}
.btn-primary:active {
  transform: translateY(1px);
}

.btn-ghost {
  border: 1px solid rgb(148 163 184 / 0.35);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-ghost:hover {
  border-color: rgb(var(--accent) / 0.55);
  background: rgb(var(--accent) / 0.08);
}

.hero-grid {
  background-image:
    linear-gradient(to right, rgb(148 163 184 / 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(148 163 184 / 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

.glow-accent {
  background: radial-gradient(ellipse at 30% 20%, rgb(var(--accent) / 0.14), transparent 55%),
              radial-gradient(ellipse at 80% 0%, rgb(56 189 248 / 0.08), transparent 40%);
}

/* Fake product UI mockups */
.mock-frame {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgb(148 163 184 / 0.2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 25px 50px -20px rgb(0 0 0 / 0.65);
}
.mock-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #0b1220;
  border-bottom: 1px solid rgb(148 163 184 / 0.12);
}
.mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.mock-body {
  padding: 14px;
  min-height: 210px;
}
.mock-sidebar {
  width: 28%;
  min-width: 72px;
  background: rgb(15 23 42 / 0.85);
  border-right: 1px solid rgb(148 163 184 / 0.1);
  padding: 10px 8px;
}
.mock-row {
  height: 10px;
  border-radius: 4px;
  background: rgb(148 163 184 / 0.15);
  margin-bottom: 8px;
}
.mock-row.w-2-3 { width: 66%; }
.mock-row.w-1-2 { width: 50%; }
.mock-row.w-1-3 { width: 33%; }
.mock-row.accent { background: rgb(var(--accent) / 0.55); }
.mock-card {
  background: rgb(30 41 59 / 0.65);
  border: 1px solid rgb(148 163 184 / 0.12);
  border-radius: 10px;
  padding: 10px;
}
.mock-pill {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(var(--accent) / 0.15);
  color: rgb(250 204 21);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mock-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-bubble {
  max-width: 78%;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.35;
}
.mock-bubble.in {
  align-self: flex-start;
  background: #1e293b;
  color: #cbd5e1;
}
.mock-bubble.out {
  align-self: flex-end;
  background: rgb(var(--accent) / 0.2);
  color: #fef9c3;
  border: 1px solid rgb(var(--accent) / 0.25);
}
.mock-node {
  border: 1px solid rgb(148 163 184 / 0.25);
  background: #1e293b;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
  text-align: center;
  color: #e2e8f0;
}
.mock-arrow {
  color: rgb(var(--accent));
  font-size: 12px;
  text-align: center;
}

.trust-item {
  opacity: 0.85;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #94a3b8;
}

.footer-link:hover { color: rgb(var(--accent)); }

.input-field {
  width: 100%;
  background: #0f172a;
  border: 1px solid rgb(148 163 184 / 0.25);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  color: #e2e8f0;
  outline: none;
  transition: border-color 0.15s ease;
}
.input-field:focus {
  border-color: rgb(var(--accent) / 0.65);
}

.mobile-nav-open { display: block !important; }

@media (max-width: 768px) {
  .mock-sidebar { display: none; }
}