:root{
  --bg: #0B0011;
  --ink: #0E0218;
  --ink-2: #1B0A2B;
  --primary-900: #2A0E45;
  --primary-800: #3D1962;
  --primary-700: #5C2BA0;
  --primary-600: #7E39D7;
  --primary-500: #8E47EE; /* center purple (approx deck 7) */
  --primary-300: #B689FF;
  --primary-100: #E9D9FF;
  --brand: #D22A83; /* 15 - Brand (approx pink) */
  --white: #FFFFFF;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 80% -20%, var(--brand) 0%, transparent 60%),
    radial-gradient(1000px 600px at -20% 20%, var(--primary-700) 0%, transparent 60%),
    linear-gradient(180deg, #0B0011 0%, #0B0011 100%);
  background-attachment: fixed;
}

.site{
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px clamp(16px, 4vw, 24px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo{border-radius:20%; box-shadow: 0 6px 24px rgba(0,0,0,.25);}


.hero{
  text-align:center;
  padding: clamp(64px, 12vw, 120px) 16px;
  color: var(--white);
}
.hero h1{
  margin:0 0 12px;
  font-size: clamp(36px, 6vw, 64px);
  line-height:1.05;
  letter-spacing:-0.02em;
}
.hero .sub{
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(16px, 2.5vw, 20px);
  opacity:.9;
}
.cta{margin-top:28px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap}
.btn{
  padding:12px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
}
.btn.solid{background: var(--brand); color:#fff; border:none; box-shadow:0 8px 24px rgba(210,42,131,.35)}
.btn.ghost{background: rgba(255,255,255,.08); color:#fff}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}

.features{
  background:#fff;
  border-radius: 28px;
  margin: 24px auto;
  padding: clamp(24px, 5vw, 48px);
  max-width: 1040px;
  box-shadow: 0 8px 60px rgba(0,0,0,.15);
}
.features .grid{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );
  gap: clamp(16px, 3vw, 28px);
}
.features article{
  background: linear-gradient(180deg, var(--primary-100), #fff);
  border:1px solid #f2eaff;
  padding:18px;
  border-radius:16px;
}
.features h3{margin:0 0 8px; color: var(--primary-700)}

.decks{
  color:#fff;
  text-align:center;
  padding: 32px 16px 16px;
}
.decks h2{margin:0 0 16px}
.tags{list-style:none; padding:0; margin:0; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.tags li{
  background: rgba(255,255,255,.12);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
}

.footer-cta{
  text-align:center;
  padding: 24px 16px 56px;
}

footer.site{color:#fff; opacity:.85}
footer a{color:#fff}


.hero .hero-icon{
  display:block;
  margin:0 auto 20px;
}

.only-cta .hero-icon{
  display:block;
  margin: 0 auto 18px;
  border-radius:20%;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.cta{justify-content:center}
.features, .decks, .footer-cta{display:none}

.hero.only-cta{
  max-width: 640px;
  margin: 0 auto;
}
.footer-stick{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 24px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-size: 14px;
}
.footer-stick a{color:#fff; text-decoration:none; margin-left:auto}

/* Constrain width & spacing */
.wrap{
  padding-bottom: 88px; /* space for sticky footer */
}
.hero{
  max-width: 960px;
  margin: 0 auto;
}
.hero h1{ max-width: 900px; margin-left:auto; margin-right:auto; }
.hero .sub{ max-width: 720px; }

/* Sticky footer */
footer.site.sticky{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 14px clamp(16px, 4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.06);
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,0,12,.55) 40%, rgba(8,0,12,.75) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.foot-right a{ color:#fff; text-decoration:none; opacity:.85; font-weight:600; }
.foot-right a:hover{ opacity:1 }
.foot-right .dot{ opacity:.6; margin: 0 8px; color:#fff }