:root {
  color-scheme: dark;
  --cw-black: #050505;
  --cw-ink: #0b0a09;
  --cw-copper: #c98b63;
  --cw-rose: #f2c6a0;
  --cw-line: rgba(242, 198, 160, 0.16);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.public-shell {
  background: var(--cw-black);
  color: #fff8f0;
  font-family: "Tajawal", "Cairo", Arial, sans-serif;
  overflow-x: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--cw-copper), var(--cw-rose));
  color: #130b07;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(201, 139, 99, 0.22);
  transition: filter 180ms ease, transform 180ms ease;
}

.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.field {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff8f0;
  padding: 0.8rem 1rem;
  outline: none;
}

.field:focus {
  border-color: rgba(242, 198, 160, 0.55);
  box-shadow: 0 0 0 3px rgba(242, 198, 160, 0.1);
}

.public-nav {
  background: rgba(5, 5, 5, 0.58);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
}

.public-nav-action,
.public-cta {
  background: linear-gradient(135deg, var(--cw-copper), var(--cw-rose));
  box-shadow: 0 16px 36px rgba(201, 139, 99, 0.22);
  color: #130b07;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.public-nav-action:hover,
.public-cta:hover {
  box-shadow: 0 22px 56px rgba(242, 198, 160, 0.28);
  transform: translateY(-2px);
}

.hero-scene {
  background: #050505;
}

.hero-vignette {
  background:
    radial-gradient(circle at 72% 34%, rgba(242, 198, 160, 0.08), transparent 27%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0.43) 46%, rgba(5, 5, 5, 0.74)),
    linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0) 34%);
  pointer-events: none;
}

.hero-title {
  letter-spacing: 0;
  text-shadow: 0 30px 80px rgba(242, 198, 160, 0.16);
}

.phone-aurora {
  animation: floatPhone 7s ease-in-out infinite;
  background: rgba(242, 198, 160, 0.12);
  border: 1px solid rgba(242, 198, 160, 0.22);
  border-radius: 999px;
  filter: blur(10px);
  height: 25rem;
  inset: 5% 12% auto auto;
  position: absolute;
  transform: rotate(-14deg);
  width: 16rem;
}

.phone-frame {
  animation: floatPhone 7s ease-in-out infinite;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border: 1px solid rgba(242, 198, 160, 0.22);
  border-radius: 2.4rem;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.5);
  max-width: 23rem;
  padding: 0.85rem;
  position: relative;
}

.phone-top {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  height: 0.45rem;
  margin: 0.25rem auto 0.8rem;
  width: 5rem;
}

.phone-screen {
  background: rgba(8, 8, 8, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.8rem;
  min-height: 32rem;
  overflow: hidden;
  padding: 1.2rem;
}

.phone-screen-animated {
  position: relative;
}

.phone-slide {
  animation: phoneSlideShow 12s infinite;
  inset: 1.2rem;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(14px) scale(0.98);
  transition: opacity 500ms ease, transform 500ms ease;
}

.phone-slide-cafes {
  animation-delay: 0s;
}

.phone-slide-details {
  animation-delay: 4s;
}

.phone-slide-offer {
  animation-delay: 8s;
}

.mini-metric {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(242, 198, 160, 0.12);
  border-radius: 1rem;
  padding: 0.8rem 0.55rem;
}

.mini-metric b {
  color: #fff;
  display: block;
  font-size: 0.92rem;
  font-weight: 900;
}

.mini-metric span {
  color: rgba(255, 255, 255, 0.45);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  margin-top: 0.2rem;
}

.offer-orbit {
  animation: orbitGlow 6s ease-in-out infinite;
  background: radial-gradient(circle, rgba(242, 198, 160, 0.34), transparent 62%);
  border-radius: 999px;
  height: 12rem;
  left: -4rem;
  position: absolute;
  top: -3rem;
  width: 12rem;
}

.cafe-chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.3rem;
  display: flex;
  gap: 0.9rem;
  padding: 0.8rem;
  transition: border-color 220ms ease, transform 220ms ease;
}

.cafe-chip:hover {
  border-color: rgba(242, 198, 160, 0.28);
  transform: translateX(-4px);
}

.section-band {
  background: #080808;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.feature-tile {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(242, 198, 160, 0.13);
  border-radius: 1.5rem;
  min-height: 16rem;
  overflow: hidden;
  padding: 1.6rem;
  position: relative;
  transition: border-color 260ms ease, transform 260ms ease;
}

.feature-tile:hover {
  border-color: rgba(242, 198, 160, 0.32);
  transform: translateY(-6px);
}

.feature-mark {
  background: var(--cw-rose);
  border-radius: 999px;
  box-shadow: 0 0 34px rgba(242, 198, 160, 0.5);
  display: block;
  height: 0.7rem;
  width: 3rem;
}

.stats-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-grid div {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(242, 198, 160, 0.13);
  border-radius: 1.5rem;
  padding: 2rem 1.2rem;
  text-align: center;
}

.stats-grid b {
  color: var(--cw-rose);
  display: block;
  font-size: clamp(2.4rem, 8vw, 4.8rem);
  font-weight: 900;
  line-height: 1;
}

.stats-grid span {
  color: rgba(255, 255, 255, 0.55);
  display: block;
  font-weight: 800;
  margin-top: 0.8rem;
}

.final-cta {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(242, 198, 160, 0.15);
  border-radius: 2rem;
  overflow: hidden;
  position: relative;
}

.final-cta::before {
  background: linear-gradient(90deg, transparent, rgba(242, 198, 160, 0.18), transparent);
  content: "";
  height: 1px;
  inset: 0 12% auto;
  position: absolute;
}

.store-badge {
  align-items: center;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(242, 198, 160, 0.19);
  border-radius: 1.15rem;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
  color: #fff;
  display: inline-flex;
  gap: 0.85rem;
  justify-content: flex-start;
  min-height: 4.3rem;
  min-width: 13.5rem;
  overflow: hidden;
  padding: 0.8rem 1.05rem;
  position: relative;
  text-align: left;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.store-badge::before {
  background: linear-gradient(120deg, transparent, rgba(242, 198, 160, 0.13), transparent);
  content: "";
  inset: 0;
  opacity: 0;
  position: absolute;
  transform: translateX(45%);
  transition: opacity 220ms ease, transform 420ms ease;
}

.store-badge:hover {
  border-color: rgba(242, 198, 160, 0.42);
  box-shadow: 0 22px 54px rgba(201, 139, 99, 0.18);
}

.store-badge:hover::before {
  opacity: 1;
  transform: translateX(-45%);
}

.store-badge small,
.store-badge b,
.store-icon {
  position: relative;
  z-index: 1;
}

.store-badge small {
  color: rgba(255, 255, 255, 0.56);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.store-badge b {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.25;
}

.store-badge-compact {
  min-height: 3.85rem;
  min-width: 12rem;
  padding: 0.7rem 0.9rem;
}

.store-badge-compact b {
  font-size: 1.05rem;
}

.store-badge-compact .store-icon {
  height: 1.8rem;
  width: 1.8rem;
}

.store-icon {
  display: inline-block;
  flex: 0 0 auto;
  height: 2.1rem;
  width: 2.1rem;
}

.google-play-icon {
  background:
    linear-gradient(32deg, #00e5ff 0 34%, transparent 35%),
    linear-gradient(147deg, #00d084 0 36%, transparent 37%),
    linear-gradient(213deg, #ffd54a 0 43%, transparent 44%),
    linear-gradient(327deg, #ff4b6a 0 44%, transparent 45%);
  clip-path: polygon(13% 3%, 92% 50%, 13% 97%);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}

.apple-icon {
  background: #fff;
  clip-path: path("M22.7 17.6c0-3.3 2.7-4.9 2.8-5-1.5-2.2-3.9-2.5-4.8-2.6-2-.2-4 1.2-5 1.2-1.1 0-2.7-1.2-4.4-1.1-2.3 0-4.4 1.3-5.6 3.4-2.4 4.2-.6 10.4 1.7 13.8 1.1 1.7 2.5 3.5 4.3 3.4 1.7-.1 2.4-1.1 4.4-1.1 2.1 0 2.7 1.1 4.5 1.1 1.9 0 3.1-1.7 4.2-3.4 1.3-1.9 1.8-3.7 1.8-3.8-.1 0-3.9-1.5-3.9-5.9z M19.5 7.8c1-1.2 1.6-2.8 1.4-4.4-1.4.1-3.1.9-4 2.1-.9 1-1.7 2.7-1.5 4.2 1.5.1 3.1-.8 4.1-1.9z");
  transform: scale(1.08);
}

.legal-page {
  background: #050505;
  min-height: 100vh;
}

.delete-account-page {
  background:
    radial-gradient(circle at 78% 12%, rgba(242, 198, 160, 0.11), transparent 30%),
    radial-gradient(circle at 16% 48%, rgba(201, 139, 99, 0.08), transparent 27%),
    #050505;
}

.delete-account-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.028)),
    rgba(8, 8, 8, 0.76);
  border: 1px solid rgba(242, 198, 160, 0.16);
  border-radius: 1.75rem;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: clamp(1.2rem, 3vw, 2rem);
}

.delete-account-field {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(242, 198, 160, 0.15);
  border-radius: 1rem;
  color: #fff8f0;
  outline: none;
  padding: 0.95rem 1rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  width: 100%;
}

.delete-account-field:focus {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(242, 198, 160, 0.5);
  box-shadow: 0 0 0 4px rgba(242, 198, 160, 0.08);
}

.delete-account-field::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.delete-account-note {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(242, 198, 160, 0.13);
  border-radius: 1.25rem;
  padding: 1rem;
}

.delete-account-note b {
  color: #f2c6a0;
  display: block;
  font-weight: 900;
  margin-bottom: 0.35rem;
}

.delete-account-note span {
  display: block;
  line-height: 1.8;
}

.journey-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 198, 160, 0.09), transparent 30%),
    #050505;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.journey-track {
  position: relative;
}

.journey-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
    rgba(8, 8, 8, 0.72);
  border: 1px solid rgba(242, 198, 160, 0.16);
  border-radius: 1.55rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 60px rgba(0, 0, 0, 0.2);
  min-height: 15.4rem;
  overflow: hidden;
  padding: 1.25rem;
  position: relative;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.journey-card::before {
  background: radial-gradient(circle, rgba(242, 198, 160, 0.16), transparent 64%);
  content: "";
  height: 10rem;
  left: -4rem;
  position: absolute;
  top: -4rem;
  width: 10rem;
}

.journey-card::after {
  background: linear-gradient(135deg, transparent, rgba(242, 198, 160, 0.12), transparent);
  content: "";
  height: 130%;
  left: -80%;
  position: absolute;
  top: -15%;
  transform: rotate(18deg);
  transition: left 520ms ease;
  width: 42%;
}

.journey-card:hover {
  border-color: rgba(242, 198, 160, 0.38);
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.34), 0 0 36px rgba(242, 198, 160, 0.08);
  transform: translateY(-9px);
}

.journey-card:hover::after {
  left: 130%;
}

.journey-card-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.journey-number {
  align-items: center;
  background: rgba(242, 198, 160, 0.13);
  border: 1px solid rgba(242, 198, 160, 0.22);
  border-radius: 999px;
  color: var(--cw-rose);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 900;
  height: 2.1rem;
  justify-content: center;
  width: 2.8rem;
}

.journey-icon {
  align-items: center;
  background: linear-gradient(135deg, rgba(201, 139, 99, 0.95), rgba(242, 198, 160, 0.95));
  border-radius: 1rem;
  box-shadow: 0 12px 28px rgba(201, 139, 99, 0.22);
  display: inline-flex;
  height: 3.2rem;
  justify-content: center;
  position: relative;
  width: 3.2rem;
}

.journey-icon::before,
.journey-icon::after {
  content: "";
  position: absolute;
}

.journey-icon-spark::before {
  background: #1a0f08;
  clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
  height: 1.55rem;
  width: 1.55rem;
}

.journey-icon-pin::before {
  border: 0.42rem solid #1a0f08;
  border-radius: 999px;
  height: 1.45rem;
  width: 1.45rem;
}

.journey-icon-pin::after {
  background: #1a0f08;
  border-radius: 0 0 0.2rem 0.2rem;
  height: 0.95rem;
  transform: translateY(0.82rem) rotate(45deg);
  width: 0.95rem;
}

.journey-icon-cup::before {
  border: 0.25rem solid #1a0f08;
  border-radius: 0.25rem 0.25rem 0.7rem 0.7rem;
  height: 1.15rem;
  width: 1.55rem;
}

.journey-icon-cup::after {
  border: 0.22rem solid #1a0f08;
  border-right-color: transparent;
  border-radius: 999px;
  height: 0.85rem;
  transform: translateX(-1rem);
  width: 0.85rem;
}

.journey-icon-heart::before {
  background: #1a0f08;
  clip-path: path("M16 27 C7 20 3 15 3 9.5 C3 5.8 5.9 3 9.5 3 C12 3 14.2 4.3 16 6.4 C17.8 4.3 20 3 22.5 3 C26.1 3 29 5.8 29 9.5 C29 15 25 20 16 27Z");
  height: 1.7rem;
  width: 1.7rem;
}

.journey-card h3 {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
  margin-top: 2.7rem;
  position: relative;
}

.journey-card p {
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.9;
  margin-top: 0.85rem;
  position: relative;
}

.legal-panel {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(242, 198, 160, 0.13);
  border-radius: 1.6rem;
  padding: clamp(1.2rem, 4vw, 2.4rem);
}

.legal-panel h2 {
  color: var(--cw-rose);
  font-size: 1.2rem;
  font-weight: 900;
  margin-top: 2rem;
}

.legal-panel h2:first-child {
  margin-top: 0;
}

.legal-panel p {
  color: rgba(255, 255, 255, 0.66);
  line-height: 2;
  margin-top: 0.65rem;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal-delay {
  transition-delay: 130ms;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes floatPhone {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-14px) rotate(1.2deg);
  }
}

@keyframes phoneSlideShow {
  0%, 7% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  11%, 29% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  34%, 100% {
    opacity: 0;
    transform: translateY(-14px) scale(0.985);
  }
}

@keyframes orbitGlow {
  0%, 100% {
    opacity: 0.55;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.9;
    transform: translate(1.2rem, 1.4rem) scale(1.12);
  }
}

@media (max-width: 767px) {
  .hero-title {
    font-size: clamp(4rem, 18vw, 5.6rem);
  }

  .phone-frame {
    max-width: 20rem;
  }

  .phone-screen {
    min-height: 27rem;
  }

  .hero-downloads .store-badge {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}

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