:root{
  --bg: #ffffff;
  --ink: #0f172a; /* slate-900 */
  --ink-2: #334155; /* slate-600 */
  --muted: #64748b; /* slate-500 */
  --brand: #0ea5e9; /* sky-500 */
  --brand-600: #0284c7;
  --card: #ffffff;
  --ring: rgba(2,132,199,.25);
  --radius-xl: 24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

.site-header{display:flex;align-items:center;height:72px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:100px;height:auto}
.brand-name{font-weight:600;letter-spacing:.2px}

.hero{margin-top:8px;position:relative;border-radius:var(--radius-xl);overflow:hidden;background:url('assets/bcg_image_1.png') center/cover no-repeat;padding:20px 0;transform:translateY(-10px)}
.hero:before{content:none}
.hero-inner{position:relative;z-index:1;text-align:center;padding:88px 24px}
.hero h1{
  color:#000;
  text-align:center;
  font-family:"Bricolage Grotesque", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size:42px;
  font-style:normal;
  font-weight:500;
  line-height:normal;
  margin:0 0 16px;
}
.tagline{
  max-width:1020px;
  margin:0 auto 28px;
  color:#000;
  text-align:center;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size:20px;
  font-style:normal;
  font-weight:400;
  line-height:normal;
  letter-spacing:var(--font-tracking-normal, 0);
  text-wrap: balance;
}

.btn{appearance:none;border:0;border-radius:12px;padding:14px 20px;font-weight:500;cursor:pointer}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06), 0 8px 24px rgba(2,8,23,.12)}
.btn-primary:hover{background:#111827}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

.features{display:grid;gap:20px;grid-template-columns:repeat(1,minmax(0,1fr));margin:16px 0 0}
@media (min-width: 640px){.features{grid-template-columns:repeat(2,1fr)}}
@media (min-width: 1100px){.features{grid-template-columns:repeat(5,1fr)}}

.card{background:var(--card);border-radius:16px;padding:16px 16px 14px 16px;border:1px solid #e5e7eb;min-height:156px;display:flex;flex-direction:column;gap:48px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.card .icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid #e5e7eb;border-radius:10px}
.card .icon-img{width:20px;height:20px;display:block}
.card h3{
  margin:0;
  color:var(--ink);
  font-size:16px; /* reduced by 2 */
  font-weight:600;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
.card p{margin:0;color:var(--muted)}

/* Modal */
dialog{border:0;border-radius:16px;max-width:480px;width:92vw;padding:0;box-shadow:0 30px 80px rgba(2,8,23,.24)}
dialog::backdrop{background:rgba(2,8,23,.35)}
.signup-form{display:flex;flex-direction:column;gap:14px;padding:24px}
.signup-form h2{margin:8px 0 4px}
.signup-form .muted{color:var(--muted)}
.signup-form input{padding:14px 14px;border-radius:12px;border:1px solid #e5e7eb;font-size:16px}
.signup-form input:focus{outline:3px solid var(--ring);border-color:var(--brand)}
.signup-form .close{position:absolute;top:10px;right:10px;border:0;background:transparent;font-size:18px;cursor:pointer;padding:8px;border-radius:8px}
.signup-form .close:hover{background:#f8fafc}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.form-note{font-size:12px}

.site-footer{
  border-top:0;
  padding:12px 0;
  color:var(--muted);
  margin-top:24px;
  text-align:center;
  font-size:14px; /* decreased by 2px */
  position:fixed;
  left:0; right:0; bottom:0;
  margin-bottom:0;
  font-weight:300;
}