*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: var(--mk-font);
  color: var(--mk-text);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(110,231,255,0.22), transparent 55%),
    radial-gradient(1100px 650px at 90% 0%, rgba(167,139,250,0.22), transparent 55%),
    radial-gradient(900px 540px at 40% 110%, rgba(34,197,94,0.16), transparent 55%),
    linear-gradient(180deg, var(--mk-bg0), var(--mk-bg1));
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
a:hover{opacity:0.92;}
.sb-container{width:min(var(--mk-max), calc(100% - 40px)); margin:0 auto;}
@media (max-width: 420px){
  /* Prevent iOS rounding from clipping right-side items (burger) */
  .sb-container{width:min(var(--mk-max), calc(100% - 48px));}
}

.sb-section{padding:76px 0;}
.sb-muted{color:var(--mk-muted);}
.sb-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border:1px solid var(--mk-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border-radius: 999px;
  box-shadow: var(--mk-glow);
  font-size: 13px;
}
.sb-kicker-dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--mk-accent) 45%, transparent 70%);
  box-shadow: 0 0 18px rgba(110,231,255,0.5);
}
.sb-card{
  border: 1px solid var(--mk-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  backdrop-filter: blur(14px);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow);
}
.sb-grid{display:grid; gap:18px;}
.sb-grid-2{grid-template-columns: repeat(2, minmax(0, 1fr));}
.sb-grid-3{grid-template-columns: repeat(3, minmax(0, 1fr));}
.sb-grid-4{grid-template-columns: repeat(4, minmax(0, 1fr));}
@media (max-width: 920px){
  .sb-grid-2,.sb-grid-3,.sb-grid-4{grid-template-columns:1fr;}
  .sb-section{padding:56px 0;}
}
.sb-hr{
  height:1px; background: rgba(255,255,255,0.12);
  margin: 22px 0;
}
.sb-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  font-size: 13px;
}
.sb-badge-pro{
  display:inline-flex; align-items:center;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid rgba(167,139,250,0.35);
  color: rgba(233,225,255,0.92);
  background: rgba(167,139,250,0.12);
  box-shadow: 0 0 20px rgba(167,139,250,0.12);
}


/* === Layout Fix: Sticky Footer without Overlap === */
html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.sb-footer {
  flex-shrink: 0;
}


/* === Seamless Page Background (no banding on long pages) === */
body {
  background: linear-gradient(
    180deg,
    #0b1020 0%,
    #10162b 30%,
    #151b35 55%,
    #10162b 75%,
    #0b1020 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* extend gradient smoothly as page grows */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    1200px 600px at 50% 20%,
    rgba(167,139,250,0.15),
    transparent 60%
  ),
  linear-gradient(
    180deg,
    #0b1020,
    #151b35,
    #0b1020
  );
}


/* Hero dashboard screenshot fix */
.sb-shot-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
}