/* Offloo landing — implementation of claude.ai/design option 6a "Immersive sky, enlivened" */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  color: #43307B;
  font: 400 16px/1.5 'Nunito', sans-serif;
  background: #523596;
}

.page {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,#F2E7F7 0%,#EADDF9 12%,#DCC9F8 30%,#C9AEF2 48%,#B292E8 64%,#9270D6 78%,#6E4DB8 90%,#523596 100%);
}

/* ---------- animations ---------- */
@keyframes floatY  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes twinkle { 0%,100% { opacity: .9; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }
@keyframes drift   { 0%,100% { transform: translateX(0); } 50% { transform: translateX(26px); } }
/* ---------- ambient decor ---------- */
.decor { position: absolute; inset: 0; pointer-events: none; }
.decor i { position: absolute; display: block; }
.cloud {
  border-radius: 999px;
  background: rgba(255,255,255,var(--o,.4));
  filter: blur(48px);
  animation: drift 12s ease-in-out infinite;
}
.spark {
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(255,255,255,.9);
  animation: twinkle 3s ease-in-out infinite;
}
.spark.gold { background: #FFE9A8; box-shadow: 0 0 10px 3px rgba(255,220,130,.9); }
/* ---------- layout helpers ---------- */
.site-header, .hero, .why, .phones, .how, .mission, .cta, .site-footer {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
}

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 56px;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo-letters { width: 240px; height: auto; display: block; }
.nav { display: flex; gap: 34px; font: 700 15.5px 'Nunito', sans-serif; }
.nav a { color: #4A3580; text-decoration: none; }
.nav a:hover { color: #E85D9E; }
.app-store-button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 172px; min-height: 54px;
  background: linear-gradient(145deg, #8263C7, #6F4EAF); color: #fff;
  padding: 12px 22px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 9px 22px rgba(92,58,170,.36), inset 0 1px 0 rgba(255,255,255,.16);
  transition: filter .2s, transform .2s, box-shadow .2s;
}
.app-store-button:hover {
  filter: brightness(.96) saturate(1.06);
  transform: translateY(-1px);
  box-shadow: 0 11px 25px rgba(92,58,170,.4), inset 0 1px 0 rgba(255,255,255,.16);
}
.app-store-copy {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; text-align: center; line-height: 1;
}
.app-store-copy span {
  font: 700 9.5px/1 'Nunito', sans-serif;
  letter-spacing: .2px; opacity: .82;
}
.app-store-copy strong { font: 800 19px/1.05 'Nunito', sans-serif; }
.app-store-badge {
  position: absolute; top: -10px; right: -9px;
  background: #E85D9E; color: #fff;
  font: 800 9px/1 'Nunito', sans-serif;
  letter-spacing: .55px;
  padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 5px 12px rgba(232,93,158,.28);
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  padding: 36px 40px 0 56px;
}
.hero-copy { position: relative; z-index: 2; padding-bottom: 40px; }
.hero h1 {
  font: 800 clamp(34px, 4.4vw, 54px)/1.08 'Baloo 2', sans-serif;
  color: #43307B; margin: 0 0 20px;
}
.accent { color: #E85D9E; }
.hero-sub { font: 400 19px/1.55 'Nunito', sans-serif; color: #5E4B96; margin: 0 0 16px; max-width: 520px; }
.hero-badge {
  font: 700 17.5px 'Nunito', sans-serif; color: #4A3580;
  margin: 0 0 24px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.55);
  border-radius: 999px; padding: 11px 22px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3E9B6E; display: inline-block; flex: none; }
.hero-actions { display: flex; align-items: center; gap: 22px; }
.hero-waitlist {
  display: inline-flex; align-items: center; gap: 10px;
  background: #7C5CBF; color: #fff;
  font: 800 18px 'Nunito', sans-serif;
  padding: 14px 24px; border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(67,48,123,.35);
  transition: background .2s;
}
.hero-waitlist:hover { background: #6A4BAE; }
.waitlist-count {
  margin: 0;
  color: #E85D9E;
  font: 800 25px/1.2 'Baloo 2', sans-serif;
  white-space: nowrap;
}
.hero-art { display: flex; justify-content: center; }
.hero-art img {
  width: 78.4%; max-width: none; display: block;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 52% 48%, #000 58%, transparent 86%);
  mask-image: radial-gradient(ellipse 62% 58% at 52% 48%, #000 58%, transparent 86%);
}

/* ---------- section headings ---------- */
.kicker {
  font: 800 14px 'Nunito', sans-serif;
  letter-spacing: 2.5px; text-transform: uppercase;
  margin: 0 0 14px;
}
.kicker.pink  { color: #D6337F; }
.kicker.rose  { color: #FFD9EC; }
.kicker.lilac { color: #C9B8F0; }

/* ---------- why ---------- */
.why { text-align: center; padding: 90px 140px 70px; }
.why h2 {
  font: 700 clamp(30px, 3.4vw, 42px)/1.18 'Baloo 2', sans-serif;
  color: #43307B; margin: 0 auto 18px; max-width: 1000px;
}
.why-emphasis { white-space: nowrap; }
.why .lead { font: 400 19px/1.6 'Nunito', sans-serif; color: #54418C; margin: 0 auto; max-width: 640px; }
.why .lead strong { color: #43307B; }

/* ---------- phones ---------- */
.phones { padding: 30px 80px 40px; text-align: center; }
.phones-carousel-viewport { overflow: visible; }
.phones-carousel-viewport:focus-visible {
  outline: 3px solid rgba(255,255,255,.72);
  outline-offset: 8px;
  border-radius: 28px;
}
.phones-row {
  display: flex; justify-content: center; align-items: center;
  gap: 38px; perspective: 1600px;
}
.phone { flex: none; }
.phone-clone { display: none; }
.phone.left   { transform: rotateY(20deg) rotateZ(-2deg) translateY(30px); }
.phone.center { transform: rotateY(-4deg); position: relative; z-index: 2; }
.phone.right  { transform: rotateY(-20deg) rotateZ(2deg) translateY(30px); }
.phone-body {
  background: #241A45;
  animation: floatY 8s ease-in-out infinite;
}
.phone-body.small { border-radius: 44px; padding: 11px; box-shadow: 0 34px 70px rgba(30,14,70,.55); }
.phone-body.big   { border-radius: 52px; padding: 12px; box-shadow: 0 44px 90px rgba(30,14,70,.6); animation-duration: 7s; animation-delay: .8s; }
.phone.right .phone-body { animation-duration: 9s; animation-delay: .4s; }
.phone-screen { position: relative; overflow: hidden; }
.phone-screen.small { width: 246px; border-radius: 34px; }
.phone-screen.big   { width: 296px; border-radius: 42px; }
.phone-screen img { width: 100%; display: block; }
.island {
  position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: 999px; background: #241A45;
}
.island.small { top: 8px;  width: 72px; height: 20px; }
.island.big   { top: 11px; width: 88px; height: 25px; }
.phone-dots { display: none; }

.featurebar-wrap { display: flex; justify-content: center; margin-top: 46px; }
.featurebar {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 8px 0;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 22px; padding: 16px 14px;
}
.fb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 0 26px;
  border-right: 1px solid rgba(255,255,255,.28);
  color: #fff; font: 800 15px 'Nunito', sans-serif;
}
.fb-item:last-child { border-right: none; }
.fb-ico { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* ---------- how it works ---------- */
.how { padding: 80px 72px 20px; }
.how .kicker, .how h2 { text-align: center; }
h2.on-dark {
  font: 700 clamp(30px, 3.2vw, 40px)/1.2 'Baloo 2', sans-serif;
  color: #fff; margin: 0 0 50px;
  text-shadow: 0 4px 18px rgba(40,22,84,.4);
}
.steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
.step-card {
  background: rgba(255,255,255,.13);
  border: 1.5px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 26px; padding: 0 0 30px; overflow: hidden;
}
.s1 { transform: rotate(-1deg); }
.s2 { transform: rotate(.8deg); }
.s3 { transform: rotate(-.6deg); }
.step-img { height: 196px; background-position: center; background-size: cover; }
.step-body { padding: 0 30px; }
.step-num {
  font: 800 19px 'Baloo 2', sans-serif; color: #43307B;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: -21px 0 14px; position: relative;
  box-shadow: 0 6px 16px rgba(40,22,84,.25);
}
.n1 { background: #FFE9A8; }
.n2 { background: #B8F0D2; }
.n3 { background: #FFC7E0; }
.step-card h3 { font: 700 23px 'Baloo 2', sans-serif; color: #fff; margin: 0 0 10px; }
.step-card p  { font: 400 16px/1.55 'Nunito', sans-serif; color: #EDE4FF; margin: 0; }

/* ---------- mission ---------- */
.mission { text-align: center; padding: 90px 140px 40px; }
h2.on-dark.big { font: 700 clamp(36px, 3.8vw, 48px)/1.12 'Baloo 2', sans-serif; margin: 0 0 18px; }
.on-dark-lead { color: #DCCDF8 !important; }
.mission .lead { font: 400 18.5px/1.65 'Nunito', sans-serif; margin: 0 auto; max-width: 640px; }

/* ---------- CTA / waitlist ---------- */
.cta { text-align: center; padding: 30px 140px 90px; }
/* the design's mascot-wave.png had transparent padding (visible mascot ≈ 49% of the
   250px box); our asset is trimmed, so 124px + 34px gap reproduces the same visual size */
.cta-mascot {
  width: 124px; display: block; margin: 0 auto 34px;
  animation: floatY 6s ease-in-out infinite;
  filter: drop-shadow(0 24px 34px rgba(20,8,54,.5));
}
.cta h2 { font: 700 clamp(26px, 2.8vw, 34px)/1.2 'Baloo 2', sans-serif; margin: 0 0 12px; }
.cta .lead { font: 400 17px/1.55 'Nunito', sans-serif; margin: 0 auto 28px; max-width: 640px; }
.waitlist-form { display: flex; gap: 12px; max-width: 480px; margin: 0 auto; }
.waitlist-form input {
  flex: 1; min-width: 0;
  font: 600 15px 'Nunito', sans-serif; color: #43307B;
  padding: 15px 22px; border: none; border-radius: 999px; outline: none;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20,8,54,.35);
}
.waitlist-form input::placeholder { color: #9C86D4; }
.waitlist-form button {
  background: #E85D9E; color: #fff;
  font: 800 15px 'Nunito', sans-serif;
  padding: 15px 28px; border: none; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(232,93,158,.45);
  transition: background .2s;
}
.waitlist-form button:hover { background: #D64B8C; }
.waitlist-form button:disabled { opacity: .6; cursor: default; }
.form-note { min-height: 22px; margin: 14px 0 0; font: 600 14px 'Nunito', sans-serif; color: #DCCDF8; }
.form-note.error { color: #FFB8D9; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid rgba(255,255,255,.18);
  padding: 34px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.footer-logo { height: 28px; display: block; filter: brightness(2.2) saturate(.4); }
.footer-links { display: flex; gap: 28px; font: 600 13.5px 'Nunito', sans-serif; flex-wrap: wrap; }
.footer-links a { color: #C9B8F0; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.copyright { font: 400 13px 'Nunito', sans-serif; color: #9C86D4; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .why, .mission, .cta { padding-left: 48px; padding-right: 48px; }
  .phones { padding: 24px 32px 36px; }
  .phones-row { gap: 22px; }
  .phone-screen.small { width: 200px; }
  .phone-screen.big { width: 240px; }
  .how { padding: 64px 40px 16px; }
  .steps { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .step-img { height: 230px; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .brand-logo-letters { width: 180px; }
  .hero-actions { flex-direction: row; align-items: center; gap: clamp(8px, 1.4vw, 14px); }
  .hero-waitlist {
    flex: none;
    gap: clamp(6px, 1vw, 10px);
    padding: clamp(11px, 1.4vw, 14px) clamp(14px, 2vw, 20px);
    font-size: clamp(13px, 1.8vw, 18px);
  }
  .waitlist-count { font-size: clamp(11px, 2.1vw, 19px); }
  .why-emphasis { white-space: normal; }
  .phones-row { gap: clamp(8px, 2vw, 20px); }
  .phone.left { transform: rotateY(14deg) rotateZ(-1.5deg) translateY(18px); }
  .phone.center { transform: rotateY(-3deg); }
  .phone.right { transform: rotateY(-14deg) rotateZ(1.5deg) translateY(18px); }
  .phone-body.small { border-radius: 32px; padding: 8px; }
  .phone-body.big { border-radius: 36px; padding: 9px; }
  .phone-screen.small {
    width: clamp(132px, 19vw, 170px);
    border-radius: 24px;
  }
  .phone-screen.big {
    width: clamp(160px, 22vw, 200px);
    border-radius: 28px;
  }
  .island.small { top: 5px; width: 44px; height: 12px; }
  .island.big { top: 6px; width: 52px; height: 15px; }
}

@media (max-width: 760px) {
  .site-header { padding: 16px 20px; }
  .nav { display: none; }
  .brand-logo-letters { width: 145px; }
  .app-store-button { min-width: 150px; min-height: 50px; padding: 11px 16px 9px; }
  .app-store-copy span { font-size: 8.5px; }
  .app-store-copy strong { font-size: 16px; }
  .app-store-badge { top: -9px; right: -5px; font-size: 8px; padding: 3px 7px; }
  .hero { grid-template-columns: 1fr; padding: 20px 24px 0; }
  .hero-copy { padding-bottom: 8px; }
  .hero-waitlist {
    padding-left: clamp(14px, 4vw, 20px);
    padding-right: clamp(14px, 4vw, 20px);
    font-size: clamp(13px, 4vw, 18px);
  }
  .waitlist-count { font-size: clamp(12px, 3.4vw, 19px); }
  .hero-art img { width: 74.2%; }
  .why, .mission, .cta { padding-left: 24px; padding-right: 24px; }
  .why { padding-top: 56px; padding-bottom: 40px; }
  .why-emphasis { white-space: normal; }
  .why .lead, .mission .lead { font-size: 17px; }
  .fb-item { border-right: none; padding: 6px 18px; }
  .featurebar { border-radius: 18px; }
  .mission { padding-top: 56px; }
  .cta { padding-bottom: 64px; }
  .waitlist-form { flex-direction: column; }
  .waitlist-form button { padding: 15px 22px; }
  .site-footer { flex-direction: column; text-align: center; padding: 28px 20px; }
}

@media (max-width: 600px) {
  .phones { padding-left: 20px; padding-right: 20px; }
  .phones-carousel-viewport {
    position: relative;
    left: 50%;
    width: 100vw;
    margin: -70px 0 -150px;
    padding: 70px 0 150px;
    transform: translateX(-50%);
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  .phones-carousel-viewport.is-dragging { cursor: grabbing; }
  .phones-row {
    display: flex; justify-content: flex-start; gap: 0; perspective: none;
    transform: translate3d(0,0,0);
    transition: transform .9s cubic-bezier(.65,0,.35,1);
    will-change: transform;
  }
  .phones-row.is-dragging, .phones-row.is-resetting { transition: none; }
  .phone {
    display: flex;
    flex: 0 0 100%;
    justify-content: center;
    pointer-events: auto;
    transform: none !important;
  }
  .phone-clone { display: flex; }
  .phone-body.small, .phone-body.big { border-radius: 52px; padding: 12px; }
  .phone-screen.small, .phone-screen.big {
    width: min(296px, calc(100vw - 72px));
    border-radius: 42px;
  }
  .island.small, .island.big { top: 11px; width: 88px; height: 25px; }
  .phone-dots {
    display: flex; justify-content: center; gap: 10px;
    margin-top: 28px;
  }
  .phone-dot {
    width: 10px; height: 10px; padding: 0;
    border: 0; border-radius: 999px;
    background: rgba(255,255,255,.38);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
  }
  .phone-dot.is-active { width: 28px; background: #fff; }
  .featurebar-wrap { margin-top: 28px; }
}

@media (max-width: 360px) {
  .hero { padding-left: 16px; padding-right: 16px; }
  .hero-actions { gap: 6px; }
  .hero-waitlist { padding: 11px 12px; font-size: 12px; }
  .waitlist-count { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .phones-row, .phone { transition: none; }
}