:root {
  --dark:#0B1D3A; --purple:#2B1A4A; --amber:#FFB84C;
  --cyan:#4CFFE6; --warm:#D9D9D9;
}

/* Base */
* { box-sizing: border-box }
html,body { margin:0; font-family:system-ui,Inter,Roboto,sans-serif; background:var(--dark); color:#fff }
img { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none }
:focus-visible { outline:3px solid rgba(76,255,230,.6); outline-offset:2px }

/* Layout */
.container { max-width:1080px; margin:0 auto; padding:0 1rem }
section { padding:64px 0; scroll-margin-top:72px } /* anchor offset for sticky header */
.light { background:var(--warm); color:var(--dark) }
.purple { background:var(--purple) }

/* Header */
header { position:sticky; top:0; z-index:10; background:#0b1d3ae6; border-bottom:1px solid #ffffff14; backdrop-filter:saturate(120%) blur(6px) }
header .nav { display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
header nav a { margin-left:1rem; opacity:.9 }
header nav a:hover { color:var(--cyan) }

/* Buttons */
.btn { display:inline-block; font-weight:700; padding:.8rem 1rem; border-radius:14px; border:2px solid transparent; transition:.15s transform, .15s filter }
.btn.primary { background:var(--amber); color:var(--dark) }
.btn.secondary { border-color:var(--amber) }
.btn:hover { transform:translateY(-1px); filter:brightness(1.05) }

/* Hero */
.hero {
  padding:72px 0 88px;
  background:
    radial-gradient(60% 40% at 50% 0%, #4cffe62e, transparent 60%),
    radial-gradient(30% 30% at 80% 20%, #ffb84c20, transparent 60%),
    var(--dark);
  text-align:center;
}
.hero h1 { margin:0; font-size:clamp(28px,5vw,54px); font-weight:900 }
.hero .subtitle { font-size:clamp(16px,2.5vw,22px); opacity:.9; margin-top:.4rem }
.hero .intro { max-width:780px; margin:14px auto 0; opacity:.9 }
.hero .cta { margin-top:16px }

/* Grids */
.grid3 { display:grid; gap:16px; grid-template-columns:1fr }
.grid4 { display:grid; gap:14px; grid-template-columns:1fr }
@media (min-width:760px) {
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Cards */
.card { background:#fff; color:var(--dark); border-radius:16px; box-shadow:0 10px 30px #0002; padding:18px; transition:transform .15s ease }
.card h3 { margin-top:8px }
.card p { margin:8px 0 0 }
.card .icon { font-size:28px }
.card:hover { transform:translateY(-2px) }

/* Tiers */
.tier { border:1px solid #ffffff26; background:#ffffff10; border-radius:16px; padding:18px }

/* Newsletter */
.newsletter { display:flex; gap:8px; max-width:560px }
.newsletter input { flex:1; padding:.8rem; border-radius:12px; border:1px solid #ccd; color:#0B1D3A }

/* Code block */
.codeblock { background:#ffffff10; color:#fff; border:1px solid #ffffff26 }
.codeblock pre { margin:0; white-space:pre-wrap }

/* Showcase figures (overlay captions) */
figure { position:relative; margin:0 }
.shot-img {
  width:100%;
  border:1px solid #ffffff30;
  border-radius:14px;
  background:#ffffff10;
}
figure .shot-caption {
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.55); color:#fff;
  font-size:.85rem; padding:6px 8px;
  border-radius:0 0 14px 14px; line-height:1.25;
}

/* Helpers */
.center { text-align:center }
.note { opacity:.8 }

/* Footer */
footer { border-top:1px solid #ffffff14; color:#ffffffb0; padding:28px 0 }
footer .foot { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between }
footer nav a { margin-left:.5rem }

/* Optional: make #tools grid 2 columns on desktop for larger tiles */
#tools .grid3 { grid-template-columns:1fr; }
@media (min-width:760px) {
  #tools .grid3 { grid-template-columns: repeat(3, minmax(0,1fr)); } /* keep 3 if you like */
  /* Or switch to 2 columns:
  #tools .grid3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  */
}