:root{
  --turq:#00C2C7;
  --ocean:#1E7CF2;
  --sun:#FFD54A;
  --coral:#FF5A7A;
  --leaf:#37D67A;
  --ink:#0B1320;
  --soft:#F6FBFF;
}

html, body { background: var(--soft); }
body { color: var(--ink); }

.navbar.is-glass{
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.hero.is-rainbow {
  background: radial-gradient(1200px 500px at 15% 30%, rgba(0,194,199,.35), transparent 60%),
			  radial-gradient(900px 450px at 70% 35%, rgba(255,90,122,.25), transparent 55%),
			  radial-gradient(900px 450px at 60% 80%, rgba(255,213,74,.28), transparent 55%),
			  linear-gradient(135deg, rgba(30,124,242,.18), rgba(55,214,122,.14));
}

.hero .title, .hero .subtitle { color: var(--ink); }
.hero .title span.badge {
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.08);
  font-weight:700;
  margin-right:.35rem;
}

.tag.is-turq { background: var(--turq); color:#003236; }
.tag.is-coral { background: var(--coral); color:#2b0011; }
.tag.is-sun { background: var(--sun); color:#3a2a00; }
.tag.is-ocean { background: var(--ocean); color:#001a3a; }
.tag.is-leaf { background: var(--leaf); color:#003216; }

.button.is-turq { background: var(--turq); border-color: transparent; color:#003236; font-weight:800; }
.button.is-coral { background: var(--coral); border-color: transparent; color:#2b0011; font-weight:800; }
.button.is-sun { background: var(--sun); border-color: transparent; color:#3a2a00; font-weight:800; }
.button.is-ocean { background: var(--ocean); border-color: transparent; color:#001a3a; font-weight:800; }

.card.is-pop{
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 14px 35px rgba(12, 34, 66, 0.10);
  border: 1px solid rgba(0,0,0,.06);
}

.ribbon{
  position:absolute;
  top:14px; left:14px;
  padding:.25rem .55rem;
  border-radius:999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.08);
  font-weight:800;
  font-size:.8rem;
}

.gradient-bar{
  height: 6px;
  background: linear-gradient(90deg, var(--turq), var(--ocean), var(--sun), var(--coral), var(--leaf));
}

.section-title{
  display:flex; align-items:center; gap:.6rem;
}
.section-title .dot{
  width:14px; height:14px; border-radius:50%;
  background: linear-gradient(135deg, var(--turq), var(--coral));
}

.footer{
  background: white;
  border-top: 1px solid rgba(0,0,0,.06);
}
.small-muted { color: rgba(11,19,32,.65); }

.input:focus, .textarea:focus {
  border-color: var(--turq);
  box-shadow: 0 0 0 .125em rgba(0,194,199,.25);
}