/* STS Media Minimal Landing Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

:root {
  --ink: #0F172A;
  --midnight: #0B1220;
  --primary: #2547D0;
  --accent: #F5C044;
  --accent-soft: #FFF3C2;
  --bg: #FFFFFF;
  --surface: #F8FAFC;
  --border: #E6ECF2;
  --radius: 12px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 2px 8px rgba(15,23,42,.06);
  --shadow-2: 0 6px 24px rgba(15,23,42,.12);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }

header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.8);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 0;
}

.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.brand .logo {
  width: 40px; height: 40px; border-radius: 10px; box-shadow: var(--shadow-1);
}

.brand .name { font-weight: 800; letter-spacing: .08em; font-size: 14px; }
.brand .tag { font-size: 12px; color: #4B5563; display: none; }

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 999px;
  background: var(--primary); color: white; text-decoration: none; font-weight: 600;
  box-shadow: var(--shadow-1);
}
.cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.cta:active { transform: translateY(0); }

.hero {
  padding: var(--space-8) 0 var(--space-7);
}

.hero .lead {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: #7A5B10;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: var(--space-4);
}

.grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6);
}

.hero h1 {
  grid-column: span 8;
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}

.hero p {
  grid-column: span 7;
  font-size: clamp(16px, 2.6vw, 18px);
  color: #475569;
}

.hero .actions { grid-column: span 7; display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

.kpis {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
}
.kpis .kpi {
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.kpi .num { font-size: 32px; font-weight: 800; color: var(--primary); }
.kpi .label { color: #475569; font-size: 14px; }

.section { padding: var(--space-8) 0; }
.section h2 { margin-top: 0; font-size: clamp(22px, 3.2vw, 32px); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.card {
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.card h3 { margin-top: 0; }
.card p { color: #475569; }

.footer {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--border);
  color: #475569;
  font-size: 14px;
}

.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: white; font-size: 12px; color: #111827;
}

@media (max-width: 900px) {
  .grid, .cards, .kpis { grid-template-columns: 1fr; }
  .hero h1, .hero p, .hero .actions { grid-column: 1 / -1; }
  .brand .tag { display: none; }
}