\
:root {
  --ink: #2e2541;
  --muted: #736985;
  --pink: #ff4fa3;
  --purple: #8758ff;
  --blue: #4aa8ff;
  --mint: #4fd5bc;
  --yellow: #ffd86a;
  --surface: rgba(255, 255, 255, .84);
  --border: rgba(86, 57, 122, .14);
  --shadow: 0 24px 70px rgba(76, 49, 112, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Nunito", system-ui, sans-serif;
  background:
    linear-gradient(180deg, #fffafd, #ffffff 35%, #fbfaff 65%, #f8fcff);
  overflow-x: hidden;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
.bg-orb {
  position: fixed;
  z-index: -2;
  border-radius: 50%;
  filter: blur(10px);
  opacity: .28;
  pointer-events: none;
}
.orb-one { width: 430px; height: 430px; background: #ffb9db; left: -180px; top: 80px; }
.orb-two { width: 520px; height: 520px; background: #c6b6ff; right: -250px; top: 380px; }
.orb-three { width: 380px; height: 380px; background: #aef0e0; left: 30%; bottom: -200px; }

.site-header {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 50;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-badge {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 19px;
  color: #fff;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--purple) 55%, var(--blue));
  box-shadow: 0 14px 30px rgba(126, 74, 222, .24);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { font-family: "Fredoka", sans-serif; font-size: 1.08rem; }
.brand-copy small { color: var(--muted); margin-top: 5px; }
.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a {
  padding: 10px 13px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  color: var(--muted);
}
.main-nav a:hover { color: var(--purple); background: rgba(255,255,255,.78); }
.menu-button { display: none; border: 0; background: transparent; padding: 8px; }
.menu-button span:not(.sr-only) {
  display: block; width: 27px; height: 3px; margin: 5px 0;
  border-radius: 999px; background: var(--ink);
}

.hero {
  width: min(1220px, calc(100% - 32px));
  margin: 25px auto 55px;
  min-height: 650px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 60px;
  align-items: center;
}
.eyebrow, .kicker {
  margin: 0 0 12px;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  font-weight: 900;
}
.eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
}
h1, h2, h3 {
  font-family: "Fredoka", sans-serif;
  margin-top: 0;
}
h1 {
  margin-bottom: 23px;
  font-size: clamp(3.1rem, 6.2vw, 5.9rem);
  line-height: .96;
  letter-spacing: -.045em;
}
h1 span {
  display: block;
  color: transparent;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--blue), var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-copy > p {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.13rem;
  line-height: 1.75;
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0; }
.button {
  min-height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 22px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 900;
  transition: .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  box-shadow: 0 16px 38px rgba(133, 76, 224, .24);
}
.button.secondary {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(74, 48, 104, .08);
}
.disabled-button { cursor: default; opacity: .7; }
.hero-note {
  max-width: 640px;
  display: flex; gap: 15px; align-items: flex-start;
  padding: 18px 19px;
  border-radius: 20px;
  background: rgba(255,255,255,.76);
  border: 1px solid var(--border);
  box-shadow: 0 12px 38px rgba(74,48,104,.07);
}
.hero-note p { margin: 4px 0 0; color: var(--muted); }
.live-dot {
  width: 13px; height: 13px; margin-top: 5px; flex: 0 0 auto;
  border-radius: 50%; background: #43c98b;
  box-shadow: 0 0 0 7px rgba(67,201,139,.16);
}

.magic-panel {
  min-height: 500px;
  padding: 28px;
  position: relative;
  border-radius: 42px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.62)),
    linear-gradient(135deg, #ffe4f2, #e9e2ff, #e0f6ff);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow);
}
.panel-top { display: flex; gap: 8px; }
.panel-top span { width: 11px; height: 11px; border-radius: 50%; background: #ff709f; }
.panel-top span:nth-child(2) { background: #ffd55c; }
.panel-top span:nth-child(3) { background: #53d6b7; }
.mini-brand {
  width: 90px; height: 90px; display: grid; place-items: center;
  margin: 45px auto 24px;
  border-radius: 28px;
  color: #fff; font-family: "Fredoka", sans-serif; font-size: 1.35rem; font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--purple), var(--blue));
  box-shadow: 0 20px 40px rgba(119,69,211,.23);
}
.rainbow-line {
  width: 72%; height: 12px; margin: 0 auto 30px; border-radius: 999px;
  background: linear-gradient(90deg, #ff6aa9, #ffc85c, #56d1b6, #56a8ff, #9566ff);
}
.mock-title { width: 58%; height: 20px; margin: 0 auto 15px; border-radius: 999px; background: #ded7ee; }
.mock-line { width: 52%; height: 11px; margin: 0 auto 10px; border-radius: 999px; background: #eeeaf5; }
.mock-line.wide { width: 76%; }
.mock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 35px; }
.mock-grid span {
  min-height: 92px; display: grid; place-items: center;
  border-radius: 20px; background: rgba(255,255,255,.9); font-size: 2rem;
  box-shadow: 0 12px 28px rgba(71,50,99,.08);
}
.floating-star { position: absolute; color: #ffbd35; filter: drop-shadow(0 8px 12px rgba(77,53,112,.16)); animation: float 3.4s ease-in-out infinite; }
.star-one { top: 50px; right: 42px; font-size: 2rem; }
.star-two { bottom: 35px; left: 30px; font-size: 2.3rem; animation-delay: .8s; }
.star-three { top: 210px; left: 35px; color: #8d63ff; font-size: 1.6rem; animation-delay: 1.5s; }

.announcement {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto 70px;
  padding: 18px 22px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 14px;
  text-align: center;
  border-radius: 19px;
  background: linear-gradient(90deg, rgba(255,216,106,.3), rgba(255,114,176,.18), rgba(89,180,255,.22));
  border: 1px solid var(--border);
}
.section {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding: 70px 0;
}
.section-heading { max-width: 830px; margin-bottom: 36px; }
.section-heading h2, .github-wrap h2, .progress-card h2, .contact-card h2 {
  margin-bottom: 17px;
  font-size: clamp(2.35rem, 5vw, 4.35rem);
  line-height: 1.02;
}
.section-heading > p:last-child, .github-wrap p, .progress-card p, .contact-card p {
  color: var(--muted); line-height: 1.75; font-size: 1.05rem;
}

.card-grid { display: grid; gap: 19px; }
.service-grid, .project-grid { grid-template-columns: repeat(3, 1fr); }
.card {
  min-height: 280px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  border-radius: 27px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 15px 45px rgba(70,49,102,.08);
  backdrop-filter: blur(12px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 24px 55px rgba(70,49,102,.12); }
.card.featured { background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,237,247,.92)); border-color: rgba(255,79,163,.24); }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.icon {
  width: 57px; height: 57px; display: grid; place-items: center;
  border-radius: 18px; background: linear-gradient(135deg, #fff1f8, #efeaff, #e8f8ff);
  font-size: 1.72rem;
}
.status {
  display: inline-flex; align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .76rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
}
.status.available { background: rgba(68,201,139,.15); color: #21865a; }
.status.popular { background: rgba(255,194,62,.2); color: #986400; }
.status.soon { background: rgba(139,91,255,.14); color: #6641c6; }
.status.developing { background: rgba(70,164,255,.16); color: #236eb8; }
.status.planned { background: rgba(255,112,165,.15); color: #b13570; }
.card h3 { margin-bottom: 12px; font-size: 1.42rem; }
.card p { margin-top: 0; color: var(--muted); line-height: 1.67; }
.card-link {
  margin-top: auto;
  text-decoration: none;
  color: var(--purple);
  font-weight: 900;
}
.card-link:hover { text-decoration: underline; }
.card-link.disabled { color: var(--muted); cursor: default; text-decoration: none; }
.project-tag {
  width: max-content;
  margin-top: auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f2eef8;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
}
.project-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.filter {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  padding: 10px 15px;
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.filter.active {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--purple));
}
.project-card.hidden { display: none; }

.github-wrap, .progress-card, .contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 46px;
  border-radius: 35px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,244,255,.91));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.github-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.code-window {
  overflow: hidden;
  border-radius: 23px;
  background: #251e35;
  color: #f4edff;
  box-shadow: 0 24px 55px rgba(41,27,64,.25);
}
.code-window-top {
  padding: 14px 17px;
  display: flex; align-items: center; gap: 8px;
  background: #332943;
}
.code-window-top span { width: 10px; height: 10px; border-radius: 50%; background: #ff6f9c; }
.code-window-top span:nth-child(2) { background: #ffd45c; }
.code-window-top span:nth-child(3) { background: #52d6b5; }
.code-window-top strong { margin-left: 8px; font-size: .88rem; }
.code-window ul { list-style: none; margin: 0; padding: 22px; }
.code-window li { padding: 9px 0; color: #ddd1f2; }
.code-window li span { margin-right: 9px; }
.terminal-line {
  padding: 14px 22px 20px;
  color: #8ee4c3;
  font-family: Consolas, monospace;
}
.terminal-line span { color: #ff84bb; }

.progress-panel {
  padding: 25px;
  border-radius: 23px;
  background: #fff;
  border: 1px solid var(--border);
}
.progress-row { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.progress-row span { color: var(--muted); }
.progress-track { height: 16px; overflow: hidden; border-radius: 999px; background: #eeeaf5; }
.progress-fill {
  width: 62%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--blue), var(--mint));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
.progress-panel small { display: block; color: var(--muted); line-height: 1.5; margin-top: 12px; }
.contact-list { display: grid; gap: 14px; }
.contact-list a {
  display: flex; flex-direction: column;
  padding: 20px 22px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: .2s ease;
}
.contact-list a:hover { transform: translateX(4px); border-color: rgba(135,88,255,.42); }
.contact-list span { color: var(--purple); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.contact-list strong { margin-top: 5px; font-size: 1.2rem; }
.contact-list small { margin-top: 3px; color: var(--muted); }

footer {
  width: min(1220px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 42px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 25px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
footer strong { color: var(--ink); }
footer p { margin: 5px 0 0; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
}
@keyframes shimmer {
  from { background-position: 0 50%; }
  to { background-position: 200% 50%; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 38px; padding-top: 30px; }
  .hero-copy { text-align: center; }
  .hero-copy > p, .hero-note { margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  .service-grid, .project-grid { grid-template-columns: repeat(2, 1fr); }
  .github-wrap, .progress-card, .contact-card { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .menu-button { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 84px;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.98);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .main-nav.open { display: flex; }
  .main-nav a { text-align: center; }
  .brand-copy small { display: none; }
}
@media (max-width: 640px) {
  h1 { font-size: clamp(2.8rem, 14.5vw, 4.2rem); }
  .hero { min-height: auto; margin-top: 0; }
  .hero-buttons { flex-direction: column; }
  .button { width: 100%; }
  .hero-note { text-align: left; }
  .magic-panel { min-height: 410px; border-radius: 29px; }
  .mock-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid, .project-grid { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
  .github-wrap, .progress-card, .contact-card { padding: 28px; border-radius: 27px; }
  footer { flex-direction: column; align-items: flex-start; }
}


.merger-section {
  padding-top: 40px;
}

.merger-story {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 28px;
  align-items: start;
}

.story-main,
.story-highlight,
.thank-you-card {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.story-main {
  padding: 42px;
  border-radius: 34px;
  background: rgba(255,255,255,.9);
}

.story-main h2,
.thank-you-card h2 {
  margin-bottom: 20px;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  line-height: 1.03;
}

.story-main p,
.thank-you-card p {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.story-main strong,
.thank-you-card strong {
  color: var(--ink);
}

.story-highlight {
  padding: 30px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,239,255,.94));
  position: sticky;
  top: 20px;
}

.story-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff0f8, #eee8ff, #e8f7ff);
  font-size: 2rem;
}

.story-highlight strong {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-size: 1.35rem;
  margin-bottom: 15px;
}

.story-highlight ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.story-highlight li {
  margin: 11px 0;
  line-height: 1.55;
}

.thank-you-card {
  margin-top: 28px;
  padding: 40px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 34px;
  align-items: start;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,246,251,.96), rgba(249,246,255,.96), rgba(242,251,255,.96));
}

.thank-you-mark {
  min-height: 150px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  color: #fff;
  font-family: "Fredoka", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink), var(--purple), var(--blue));
  box-shadow: 0 20px 42px rgba(125,74,220,.22);
}

.signature {
  color: var(--purple) !important;
  font-family: "Fredoka", sans-serif;
  font-size: 1.25rem !important;
  font-weight: 700;
}

@media (max-width: 900px) {
  .merger-story {
    grid-template-columns: 1fr;
  }

  .story-highlight {
    position: static;
  }
}

@media (max-width: 640px) {
  .story-main,
  .story-highlight,
  .thank-you-card {
    padding: 27px;
    border-radius: 27px;
  }

  .thank-you-card {
    grid-template-columns: 1fr;
  }

  .thank-you-mark {
    min-height: 110px;
  }
}