:root {
  --bg: #04000f;
  --text: #ffffff;
  --text-soft: #e8eefc;
  --note: #dbe6f7;
  --cyan: #22d3ee;
  --blue: #3b9bff;
  --magenta: #e838e8;
}

html, body { margin: 0; padding: 0; background: var(--bg); }

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: #e879f9; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  background-image:
    radial-gradient(120% 80% at 50% 110%, rgba(88, 28, 135, .35) 0%, rgba(4, 0, 15, 0) 60%),
    radial-gradient(90% 70% at 12% 85%, rgba(14, 80, 190, .35) 0%, rgba(4, 0, 15, 0) 60%);
}

.hero-art {
  width: 100%;
  height: auto;
  pointer-events: none;
  animation: bannerSlideUp 1.2s cubic-bezier(.16, .84, .34, 1) both;
}
.hero-art-desktop { position: absolute; left: 0; right: 0; bottom: -180px; z-index: 0; }
.hero-art-mobile { position: relative; z-index: 1; }

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: clamp(32px, 6vh, 80px);
  padding-bottom: 24px;
  animation: contentFadeIn .9s ease-out .15s both;
}

/* ---------- pills ---------- */
.pill {
    display: inline-block;
    padding: 8px 30px;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .06em;
}
.pill-consumer {
  background: linear-gradient(180deg, #00298E 0%, #00298E 100%);
}
.pill-business {
  background: linear-gradient(180deg, #4D018D 0%, #4D018D 100%);
  box-shadow: 0 0 30px rgba(168, 50, 224, .6);
}

/* ---------- headings ---------- */
.head {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  text-wrap: balance;
}
.head:first-of-type { margin-top: clamp(18px, 3vh, 34px); }
.head-cyan { color: var(--cyan); font-weight: 500; text-shadow: 0 0 26px rgba(34, 211, 238, .45); }
.head-magenta { color: var(--magenta); font-weight: 500; text-shadow: 0 0 26px rgba(232, 56, 232, .45); }

.sub {
  margin: clamp(10px, 1.6vh, 18px) 0 0;
  color: var(--text-soft);
  font-size: 18px;
  line-height: 1.3;
}
.accent-blue { color: var(--blue); }
.accent-magenta { color: var(--magenta); }

/* ---------- CTA ---------- */
.cta-row { margin-top: clamp(16px, 2.6vh, 30px); }

.btn-cta {
display: inline-block;
    padding: 6px 26px;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover { color: #fff; transform: translateY(-2px); }
.btn-cta-blue {
  background: linear-gradient(180deg, #22b8f5 0%, #1596e0 100%);
  box-shadow: 0 0 26px rgba(34, 184, 245, .55);
}
.btn-cta-blue:hover { box-shadow: 0 0 34px rgba(34, 184, 245, .8); }
.btn-cta-purple {
  background: linear-gradient(180deg, #c04bf0 0%, #a935e2 100%);
  box-shadow: 0 0 26px rgba(192, 75, 240, .55);
}
.btn-cta-purple:hover { box-shadow: 0 0 34px rgba(192, 75, 240, .8); }

.cta-note {
  color: var(--note);
  font-size: clamp(13px, 1vw, 17px);
  line-height: 1.25;
  text-align: left;
}

/* ---------- logo ---------- */
.logo {
    height: 150px;
    margin-top: 70px;
}

/* ---------- animations ---------- */
@keyframes bannerSlideUp {
  from { transform: translateY(18%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes contentFadeIn {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art, .hero-content { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  .hero { min-height: auto; }
  .logo {     height: 100px;
    margin-top: 10px; }
    .mobilecolor {     background-color: #0a153e;
    padding: 30px 10px;
    margin-bottom: 21px;
    border-radius: 20px;}
    .mobilecolor1{
          background-color: #18072c;
    padding: 30px 10px;
    margin-bottom: 40px;
    border-radius: 20px;
    }
}
@media (max-width: 575.98px) {
  .cta-note { text-align: center; }
}