:root {
  --brand: #FFFFFF; /* mint accent */
  --bg: #0b0c0f;    /* near-black */
  --card: #12141a;  /* dark card */
  --muted: #a0a4af;
}
html, body {
  background-color: #0b0c0f; /* solid fallback */
 height: 100%; }
body {
  background-color: #0b0c0f; /* solid fallback */

  background: radial-gradient(1200px 600px at 80% -10%, rgba(151,10,10,0.08), transparent 60%),
              radial-gradient(900px 500px at -10% 20%, rgba(151,10,10,0.06), transparent 60%),
              var(--bg);
  color: #e7e9ee;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand); }
.navbar { background: rgba(11,12,15,.7) !important; backdrop-filter: blur(10px); }
.hero {
  padding: 7rem 0 5rem;
}
.badge-accent {
  background: rgba(151,10,10,.12);
  color: var(--brand);
  border: 1px solid rgba(151,10,10,.25);
}
.btn-accent {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #970A0A;
  --bs-btn-hover-border-color: #970A0A;
  --bs-btn-color: #0b0c0f;
}
.btn-ghost {
  --bs-btn-color: #e7e9ee;
  --bs-btn-border-color: rgba(231,233,238,.2);
  --bs-btn-hover-bg: rgba(231,233,238,.06);
}
.card-dark {
  background: var(--card);
  border: 1px solid rgba(231,233,238,.06);
}
.shadow-soft { box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.muted { color: var(--muted); }

/* iPhone 15 Pro-style mock (portrait) */
.device {
  width: 340px;                 /* scale as you like */
  max-width: 90vw;
  aspect-ratio: 9 / 19.5;       /* portrait: width / height */
  border: 8px solid #6b7078;    /* titanium-ish frame */
  border-radius: 44px;          /* outer curve */
  background: #0b0c0f;          /* behind the screen (frame gap) */
  position: relative;
  box-shadow: 0 25px 80px rgba(0,0,0,.5);
}

/* Inner screen area (so screenshot sits inside thin bezel) */
.device .screen {
  position: absolute;
  inset: 6px;                   /* bezel thickness inside frame */
  border-radius: 36px;          /* inner curve (outer radius - inset) */
  background: #000;             /* true-black display */
  overflow: hidden;             /* clip screenshot to rounded corners */
}

/* Screenshot itself */
.device .screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fill the screen */
}

/* Dynamic Island (relative sizing so it scales with device) */
.device::before {
  content: "";
  position: absolute;
  top: 2.6%;                    /* distance from top edge of device */
  left: 50%;
  transform: translateX(-50%);
  width: 28%;                   /* ~ 95px when device width ≈ 340px */
  height: 5.6%;                 /* ~ 28px when device width ≈ 340px */
  background: #000;
  border-radius: 9999px;        /* pill */
  z-index: 2;                   /* above the screenshot */
}

/* Bento grid */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.bento > * { background: var(--card); border: 1px solid rgba(151,10,10,.06); border-radius: 1rem; padding: 1.25rem; }
.bento .span-6 { grid-column: span 6; }
.bento .span-4 { grid-column: span 4; }
.bento .span-8 { grid-column: span 8; }
.bento .span-12 { grid-column: span 12; }
@media (max-width: 991px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento .span-6, .bento .span-4, .bento .span-8, .bento .span-12 { grid-column: span 6; }
}

:root {
  --bs-danger: #970A0A;        /* base color */
  --bs-danger-rgb: 151, 10, 10; /* rgb form for transparencies/shadows */
}


/* Footer */
footer { border-top: 1px solid rgba(151,10,10,.06); }