/* /assets/style.css */
/* Brand: Red / White / Black. Font: Montserrat. Clean “2.0” feel (rounded, subtle shadows). */
:root{
  --red: #E11D2A;
  --red-dark:#B31119;
  --black:#111111;
  --gray-900:#1a1a1a;
  --gray-700:#3b3b3b;
  --gray-400:#bdbdbd;
  --gray-100:#f5f5f5;
  --white:#ffffff;

  --radius:20px;
  --shadow:0 10px 18px rgba(0,0,0,0.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--black);
  background:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:10;
  background:var(--white);
  border-bottom:1px solid #eee;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{
  text-decoration:none; color:var(--black);
  font-weight:700; font-size:1.25rem; letter-spacing:.2px;
}
.brand span{color:var(--red)}
.nav{display:flex;gap:16px;align-items:center}
.nav-link{
  text-decoration:none; color:var(--black); font-weight:600;
}
.nav-link:hover{opacity:.8}

/* Buttons */
.btn{
  display:inline-block; font-weight:700; text-decoration:none;
  border-radius:4px; padding:6px 16px;
  border:2px solid transparent; transition:all .2s ease;
}
.btn-primary{
  background:var(--black); color:var(--white);
  box-shadow:var(--shadow);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{
  background:var(--white); color:var(--black); border:2px solid var(--black);
}
.btn-outline{
  color:var(--black); border:2px solid var(--black); background:transparent;
}

/* Hero */
.hero{ margin:32px 0 24px; }
.hero-card{
  background: radial-gradient(1200px 400px at 20% -100%, #ff6961 0%, transparent 40%), 
              linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  color:var(--white); border-radius:var(--radius); padding:48px 32px; box-shadow:var(--shadow);
}
.hero h1{ font-size:2.25rem; line-height:1.2; margin:0 0 12px; font-weight:800; }
.hero p{ font-size:1.05rem; opacity:.95; margin:0 0 24px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  padding:8px 12px; border-radius:999px; margin-bottom:12px; font-weight:600;
}

/* Sections */
.section{ padding:32px 0 }
.section h2{ font-size:1.5rem; margin:0 0 16px }
.lead{ color:var(--gray-700); max-width:800px }

.grid{ display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); }
.card{
  grid-column: span 12;
  background:var(--white); border:1px solid #eee; border-radius:16px; padding:18px;
  box-shadow:var(--shadow);
}
.card h3{ margin:0 0 6px; font-size:1.1rem }
.card p{ margin:0; color:#333 }
@media (min-width:720px){
  .card.span-4{ grid-column: span 4 }
  .card.span-6{ grid-column: span 6 }
}

/* Steps */
.steps{ display:grid; gap:16px }
@media (min-width:720px){ .steps{ grid-template-columns:repeat(3,1fr) } }
.step{
  background:var(--gray-100); border:1px solid #eee; border-radius:16px; padding:18px;
}
.step .num{
  width:32px;height:32px;border-radius:999px;background:var(--black);color:var(--white);
  display:inline-grid;place-items:center;font-weight:800;margin-bottom:8px;
}

/* Footer */
.site-footer{ border-top:1px solid #eee; background:#fafafa; margin-top:40px; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; padding:20px 30px; }
.footer-brand{ font-weight:800 }
.footer-brand span{ color:var(--red) }

/* Alerts */
.alert{border-radius:12px;padding:12px 14px;border:1px solid #eee;background:#fffbe6}
.alert-error{border-color:#ffd6d6;background:#fff1f1;color:#7a0009}
.alert-success{border-color:#c1f0cf;background:#eafff0;color:#0a5b2c}
.muted{color:#666}

/* Logo */
.Header-logo {
    max-height: 50px;
    vertical-align: middle;
}