/* ============================================================
   Theme CSS — Clean
   Visual skin only
   ============================================================ */

:root {
  --bg: #111827;
  --text: #f8f8f5;
  --surface: rgba(255,255,255,0.9);
  --surface-dark: rgba(8,12,18,0.72);
  --soft-line: rgba(255,255,255,0.18);
}

/* PAGE */

body{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.25), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.18), transparent 45%),
    linear-gradient(
      180deg,
      var(--primary) 0%,
      var(--secondary) 100%
    );

  color: var(--text);
}
/* HEADER */

header {
  background: rgba(8,12,18,0.82);
  border-bottom: 1px solid var(--soft-line);
  backdrop-filter: blur(8px);
}

.brand strong {
  color: var(--primary);
  letter-spacing: 0.04em;
}

.brand span {
  color: rgba(255,255,255,0.72);
}

/* NAV */

nav a {
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.18);
}

nav a:hover {
  background: var(--primary);
  color: #000;
}

/* HERO */

.hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    rgba(8,12,18,0.62);
}

.hero h1 {
  color: var(--text);
}

.hero p {
  color: rgba(255,255,255,0.78);
}

/* SECTIONS */

section {
  background: transparent;
}

section:nth-of-type(even) {
  background: rgba(255,255,255,0.06);
}

/* CARDS */

.note,
.demo-hero-card,
.demo-section-card,
.demo-feature {
  background: rgba(8,12,18,0.72);
  color: var(--text);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}

.note h3,
.demo-feature strong {
  color: var(--primary);
}

.demo-callout {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #071014;
  box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}

.demo-badge {
  background: var(--primary);
  color: #071014;
}

.demo-hero-image {
  border-color: var(--primary);
  box-shadow: 0 18px 36px rgba(0,0,0,0.35);
}

/* FOOTER */

footer {
  background: rgba(8,12,18,0.82);
  border-top: 1px solid var(--soft-line);
  color: rgba(255,255,255,0.68);
}

/* PAGE SHELL */

.page-shell{
  padding:40px 0;
}

/* MAIN CONTENT CARD */

.page-card{
  width:min(1100px, calc(100% - 24px));
  margin:0 auto;

  background: rgba(12,14,18,0.92);
  backdrop-filter: blur(6px);

  border:1px solid rgba(255,255,255,0.10);
  border-radius:22px;

  box-shadow:
    0 25px 50px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);

  overflow:hidden;
}