:root {
  --ink: #18162d;
  --muted: #625f76;
  --purple: #5146b8;
  --purple-dark: #352d78;
  --blue: #78d4f4;
  --pink: #ff8ea7;
  --yellow: #ffd75e;
  --green: #62d39c;
  --cream: #fffaf0;
  --paper: #ffffff;
  --line: #ded9ef;
  --shadow: 0 20px 60px rgba(53, 45, 120, .14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 14%, rgba(255, 215, 94, .22), transparent 22rem),
    radial-gradient(circle at 92% 7%, rgba(120, 212, 244, .2), transparent 26rem),
    var(--cream);
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.site-header,
main,
footer {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--purple-dark);
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-decoration: none;
}

.brand-mark {
  width: 35px;
  height: 28px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  border: 3px solid var(--purple-dark);
  border-radius: 7px;
  background: var(--yellow);
  transform: rotate(-3deg);
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 23px;
  height: 23px;
  border-bottom: 3px solid var(--purple-dark);
}

.brand-mark::before { left: -5px; transform: rotate(37deg); }
.brand-mark::after { right: -5px; transform: rotate(-37deg); }

.brand-mark i {
  position: absolute;
  z-index: 2;
  right: 3px;
  bottom: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  border: 1.5px solid var(--purple-dark);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
}

.status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(98, 211, 156, .15);
  animation: pulse 2s ease-in-out infinite;
}

.hero {
  min-height: 650px;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 50px;
  padding: 54px 0 86px;
}

.eyebrow {
  margin: 0 0 15px;
  color: var(--purple);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p { text-wrap: pretty; }

h1 {
  margin: 0;
  max-width: 700px;
  font-size: clamp(3.7rem, 7vw, 6.9rem);
  line-height: .9;
  letter-spacing: -.075em;
}

h1 span { color: var(--purple); }

.intro {
  max-width: 650px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1.06rem, 2vw, 1.22rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 31px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 51px;
  padding: 0 21px;
  border: 2px solid var(--purple-dark);
  border-radius: 14px;
  font-size: .92rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.button:hover,
.button:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 0 rgba(53, 45, 120, .1); }
.button-primary { color: white; background: var(--purple-dark); }
.button-primary:hover { background: var(--purple); }
.button-secondary { background: var(--paper); }

.microcopy {
  max-width: 590px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
}

.scene {
  min-height: 500px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid var(--purple-dark);
  border-radius: 42% 58% 44% 56% / 48% 39% 61% 52%;
  background:
    linear-gradient(rgba(255,255,255,.19) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.19) 2px, transparent 2px),
    var(--blue);
  background-size: 38px 38px;
  box-shadow: 15px 15px 0 var(--yellow), var(--shadow);
}

.scene::before {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  left: 50%;
  top: 50%;
  border: 2px dashed rgba(53, 45, 120, .18);
  border-radius: 50%;
  transform: translate(-50%, -46%);
}

.mailbot {
  position: absolute;
  z-index: 4;
  width: 230px;
  height: 330px;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  animation: bob 4s ease-in-out infinite;
}

.bot-body {
  position: absolute;
  z-index: 3;
  top: 53px;
  left: 29px;
  width: 172px;
  height: 213px;
  border: 4px solid var(--purple-dark);
  border-radius: 35px 35px 29px 29px;
  background: var(--purple);
  box-shadow: inset 0 -13px 0 rgba(53,45,120,.18), 9px 11px 0 rgba(53,45,120,.15);
}

.mail-slot {
  position: absolute;
  width: 102px;
  height: 26px;
  left: 31px;
  top: 28px;
  border: 3px solid var(--purple-dark);
  border-radius: 9px;
  background: var(--cream);
  overflow: hidden;
}

.mail-slot i {
  position: absolute;
  left: 14px;
  top: 7px;
  width: 68px;
  height: 8px;
  border-radius: 6px;
  background: var(--yellow);
}

.face {
  position: absolute;
  width: 128px;
  height: 85px;
  left: 18px;
  top: 77px;
  border: 3px solid var(--purple-dark);
  border-radius: 24px;
  background: var(--paper);
}

.eye {
  position: absolute;
  top: 27px;
  width: 12px;
  height: 16px;
  border-radius: 50%;
  background: var(--purple-dark);
  transform-origin: center;
  animation: blink 4.6s infinite;
}

.eye-left { left: 31px; }
.eye-right { right: 31px; }
.cheek { position: absolute; top: 49px; width: 17px; height: 8px; border-radius: 50%; background: rgba(255,142,167,.75); }
.cheek-left { left: 15px; }
.cheek-right { right: 15px; }
.smile { position: absolute; left: 54px; top: 43px; width: 19px; height: 14px; border-bottom: 3px solid var(--purple-dark); border-radius: 50%; }
.rack-line { position: absolute; left: 28px; bottom: 29px; width: 76px; height: 4px; border-radius: 5px; background: rgba(255,255,255,.65); }
.lights { position: absolute; right: 25px; bottom: 24px; display: flex; gap: 6px; }
.lights i { width: 9px; height: 9px; border: 2px solid var(--purple-dark); border-radius: 50%; background: var(--green); }
.lights i:nth-child(2) { background: var(--yellow); }
.lights i:nth-child(3) { background: var(--pink); }

.antenna {
  position: absolute;
  z-index: 2;
  top: 17px;
  left: 111px;
  width: 5px;
  height: 45px;
  border-radius: 9px;
  background: var(--purple-dark);
}

.antenna i { position: absolute; left: -9px; top: -15px; width: 23px; height: 23px; border: 4px solid var(--purple-dark); border-radius: 50%; background: var(--pink); }
.ear { position: absolute; z-index: 2; top: 105px; width: 34px; height: 48px; border: 4px solid var(--purple-dark); background: var(--yellow); }
.ear-left { left: 11px; border-radius: 18px 8px 8px 18px; }
.ear-right { right: 11px; border-radius: 8px 18px 18px 8px; }
.arm { position: absolute; z-index: 2; top: 180px; width: 61px; height: 22px; border: 4px solid var(--purple-dark); background: var(--purple); }
.arm-left { left: -8px; transform: rotate(28deg); border-radius: 18px 6px 6px 18px; }
.arm-right { right: -8px; transform: rotate(-28deg); border-radius: 6px 18px 18px 6px; }

.envelope {
  position: absolute;
  z-index: 6;
  left: 69px;
  top: 181px;
  width: 93px;
  height: 64px;
  overflow: hidden;
  border: 4px solid var(--purple-dark);
  border-radius: 10px;
  background: var(--yellow);
  transform: rotate(-3deg);
  animation: letter-tilt 3s ease-in-out infinite;
}

.envelope::before,
.envelope::after { content: ""; position: absolute; top: -22px; width: 64px; height: 64px; border-bottom: 3px solid var(--purple-dark); }
.envelope::before { left: -11px; transform: rotate(39deg); }
.envelope::after { right: -11px; transform: rotate(-39deg); }
.envelope i { position: absolute; z-index: 3; right: 8px; bottom: 8px; width: 14px; height: 14px; border: 2px solid var(--purple-dark); border-radius: 50%; background: var(--pink); }
.envelope b { position: absolute; z-index: 3; right: 12px; bottom: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--purple-dark); }
.leg { position: absolute; z-index: 2; top: 258px; width: 25px; height: 48px; border: 4px solid var(--purple-dark); border-top: 0; background: var(--purple); }
.leg-left { left: 65px; transform: rotate(5deg); }
.leg-right { right: 65px; transform: rotate(-5deg); }
.leg i { position: absolute; bottom: -14px; width: 41px; height: 18px; border: 4px solid var(--purple-dark); background: var(--yellow); }
.leg-left i { left: -18px; border-radius: 14px 5px 7px 8px; }
.leg-right i { right: -18px; border-radius: 5px 14px 8px 7px; }

.ground-shadow {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 73px;
  width: 220px;
  height: 35px;
  border-radius: 50%;
  background: rgba(53, 45, 120, .18);
  transform: translateX(-50%);
  animation: shadow-breathe 4s ease-in-out infinite;
}

.cloud { position: absolute; z-index: 1; width: 81px; height: 29px; border: 3px solid var(--purple-dark); border-radius: 20px; background: rgba(255,255,255,.86); }
.cloud i, .cloud b { position: absolute; bottom: -3px; border: 3px solid var(--purple-dark); border-bottom: 0; border-radius: 50% 50% 0 0; background: var(--paper); }
.cloud i { left: 10px; width: 31px; height: 32px; }
.cloud b { right: 7px; width: 26px; height: 23px; }
.cloud-one { left: 45px; top: 77px; animation: cloud-float 7s ease-in-out infinite; }
.cloud-two { right: 42px; bottom: 103px; transform: scale(.75); animation: cloud-float 6s ease-in-out infinite reverse; }
.signal { position: absolute; z-index: 2; right: 70px; top: 83px; width: 82px; height: 74px; }
.signal i { position: absolute; left: 0; bottom: 0; border: 4px solid var(--purple-dark); border-left-color: transparent; border-bottom-color: transparent; border-radius: 0 100% 0 0; transform: rotate(-45deg); transform-origin: left bottom; opacity: .75; }
.signal i:nth-child(1) { width: 25px; height: 25px; }
.signal i:nth-child(2) { width: 45px; height: 45px; animation: signal 1.7s .2s infinite; }
.signal i:nth-child(3) { width: 65px; height: 65px; animation: signal 1.7s .5s infinite; }
.spark { position: absolute; z-index: 5; color: var(--purple-dark); font-weight: 900; }
.spark-one { left: 60px; top: 210px; font-size: 1.7rem; transform: rotate(18deg); }
.spark-two { right: 57px; top: 245px; color: var(--pink); font-size: 2.2rem; transform: rotate(-21deg); }
.spark-three { left: 105px; bottom: 85px; color: var(--yellow); font-size: 2.8rem; }

.details {
  padding: 104px 0;
  border-top: 1px solid var(--line);
}

.section-heading { display: grid; grid-template-columns: .4fr 1fr; align-items: start; gap: 30px; }
.section-heading h2,
.handoff h2 { margin: 0; font-size: clamp(2.15rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -.05em; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.cards article { min-height: 260px; padding: 29px; border: 2px solid var(--purple-dark); border-radius: 25px; background: var(--paper); box-shadow: 8px 8px 0 rgba(53,45,120,.09); }
.cards article:nth-child(2) { background: #f0edff; transform: rotate(.7deg); }
.cards article:nth-child(3) { background: #fff4c9; transform: rotate(-.7deg); }
.card-number { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 2px solid var(--purple-dark); border-radius: 13px; background: var(--cream); color: var(--purple); font-size: .75rem; font-weight: 950; }
.cards h3 { margin: 40px 0 12px; font-size: 1.3rem; line-height: 1.1; }
.cards p { margin: 0; color: var(--muted); font-size: .94rem; }

.handoff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 95px;
  padding: 62px;
  border: 2px solid var(--purple-dark);
  border-radius: 32px;
  background: var(--purple-dark);
  color: white;
  box-shadow: 14px 14px 0 var(--pink);
}

.handoff .eyebrow { color: var(--yellow); }
.partner-links { display: grid; gap: 12px; }
.partner-links a { position: relative; display: grid; padding: 18px 52px 18px 20px; border: 1px solid rgba(255,255,255,.3); border-radius: 17px; background: rgba(255,255,255,.08); text-decoration: none; transition: background .2s ease, transform .2s ease; }
.partner-links a:hover,
.partner-links a:focus-visible { background: rgba(255,255,255,.16); transform: translateX(5px); }
.partner-links span { color: rgba(255,255,255,.65); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.partner-links strong { font-size: 1.05rem; }
.partner-links i { position: absolute; right: 20px; top: 50%; font-style: normal; font-size: 1.3rem; transform: translateY(-50%); }

footer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 25px; padding: 32px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.footer-brand { font-size: .9rem; }
.footer-brand .brand-mark { width: 29px; height: 23px; border-width: 2px; }
footer p { margin: 0; }

@keyframes bob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 11px)); } }
@keyframes shadow-breathe { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .65; } 50% { transform: translateX(-50%) scale(.86); opacity: .4; } }
@keyframes blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(98,211,156,.15); } 50% { box-shadow: 0 0 0 9px rgba(98,211,156,.04); } }
@keyframes letter-tilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes signal { 0%, 100% { opacity: .2; } 50% { opacity: .8; } }
@keyframes cloud-float { 0%, 100% { translate: 0 0; } 50% { translate: 13px -4px; } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 45px; padding-top: 38px; }
  .hero-copy { max-width: 720px; }
  .scene { min-height: 480px; width: min(540px, calc(100% - 12px)); margin-inline: auto; }
  .section-heading { grid-template-columns: 1fr; gap: 0; }
  .cards { grid-template-columns: 1fr; }
  .cards article { min-height: 210px; }
  .cards article:nth-child(2), .cards article:nth-child(3) { transform: none; }
  .handoff { grid-template-columns: 1fr; gap: 35px; }
  footer { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 560px) {
  .site-header, main, footer { width: min(100% - 26px, 1180px); }
  .site-header { min-height: 76px; }
  .status { font-size: 0; padding: 10px; }
  .status i { margin: 0; }
  .hero { padding: 36px 0 72px; }
  h1 { font-size: clamp(3.45rem, 18vw, 5rem); }
  .intro { margin-top: 22px; }
  .actions { display: grid; }
  .button { width: 100%; }
  .scene { min-height: 410px; border-radius: 35px; box-shadow: 8px 8px 0 var(--yellow), var(--shadow); }
  .mailbot { transform: translate(-50%, -50%) scale(.82); }
  .ground-shadow { bottom: 53px; transform: translateX(-50%) scale(.8); }
  .signal { right: 32px; top: 57px; transform: scale(.8); }
  .cloud-one { left: 20px; top: 51px; transform: scale(.82); }
  .cloud-two { right: 12px; bottom: 70px; transform: scale(.6); }
  .details { padding: 78px 0; }
  .cards { margin-top: 38px; }
  .cards article { padding: 24px; }
  .handoff { padding: 37px 24px; margin-bottom: 70px; border-radius: 24px; box-shadow: 8px 8px 0 var(--pink); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}