@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&family=Inter:wght@400;500;600;700;800&display=swap");

/* ───── Custom Properties ───── */
:root {
   --bg: #0a0a0b;
   --accent: #ff7316;
   --bg-card: rgba(255, 255, 255, 0.08);
   --bg-card-hover: rgba(255, 255, 255, 0.12);
   --border: rgba(255, 255, 255, 0.16);
   --border-hover: rgba(255, 255, 255, 0.24);
   --text: #f5f5f5;
   --text-dim: rgba(255, 255, 255, 0.6);
   --text-muted: rgba(255, 255, 255, 0.72);
   --muted: var(--text-muted);
   --orange: var(--accent);
   --orange-glow: rgba(255, 115, 22, 0.25);
   --orange-subtle: rgba(255, 115, 22, 0.12);
   --green: var(--accent);
   --green-dim: rgba(255, 115, 22, 0.18);
   --violet: var(--accent);
   --violet-dim: rgba(255, 115, 22, 0.18);
   --red: rgba(255, 255, 255, 0.7);
   --radius-sm: 8px;
   --radius: 16px;
   --radius-lg: 24px;
   --radius-xl: 32px;
   --font-display: "Plus Jakarta Sans", sans-serif;
   --font-body: "Inter", sans-serif;
   --font: var(--font-body);
   --max-w: 1200px;
   --section-pad: 120px;
}

/* ───── Resets ───── */
html,
body {
   margin: 0;
   padding: 0;
   background: var(--bg);
   color: var(--text);
   font-family: var(--font-body)
}

body {
   min-height: 100%;
   position: relative
}

.eat-landing {
   background: var(--bg);
   color: var(--text);
   font-family: var(--font-body);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   min-height: 0
}

.eat-landing * {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

.eat-landing img {
   display: block;
   max-width: 100%
}

.eat-landing a {
   color: inherit;
   text-decoration: none
}

.eat-landing ul {
   list-style: none
}

.eat-landing h1,
.eat-landing h2,
.eat-landing h3,
.eat-landing h4,
.eat-landing h5,
.eat-landing h6 {
   text-transform: none
}

.eat-landing button,
.eat-landing input,
.eat-landing select,
.eat-landing textarea {
   font-family: inherit
}

/* ───── Global grain overlay ───── */
body::after {
   content: '';
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 9999;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   background-repeat: repeat;
   background-size: 180px;
   opacity: 0.03;
   mix-blend-mode: overlay;
}

/* ───── Container (single declaration) ───── */
.eat-landing .el-container {
   max-width: var(--max-w) !important;
   margin: 0 auto !important;
   padding-left: 24px !important;
   padding-right: 24px !important;
   width: 100% !important
}

/* ───── Nav ───── */
.el-nav {
   padding: 18px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06)
}

.el-nav__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px
}

.el-nav__brand {
   font-family: var(--font-display);
   font-weight: 800;
   letter-spacing: 0.08em;
   font-size: 14px;
   display: inline-flex;
   align-items: center;
   gap: 8px
}

.el-nav__logo {
   width: 50px;
   height: 50px;
   display: block
}

.el-nav__links {
   display: flex;
   align-items: center;
   gap: 12px
}

.el-nav__link {
   font-size: 13px;
   font-weight: 600;
   padding: 8px 14px;
   border-radius: 999px;
   color: var(--text-dim);
   border: 1px solid transparent;
   transition: color .2s ease, border-color .2s ease, background .2s ease
}

.el-nav__link:hover {
   color: var(--text);
   background: rgba(255, 255, 255, 0.05)
}

.el-nav__link.is-active {
   color: var(--text);
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.12)
}

.el-nav__cart-wrap {
   display: inline-flex;
   align-items: center;
   gap: 10px
}

.el-nav__cart {
   position: relative;
   width: 38px;
   height: 38px;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.04);
   color: var(--text);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: border-color .2s ease, transform .2s ease
}

.el-nav__cart svg {
   width: 18px;
   height: 18px
}

.el-nav__cart:hover {
   border-color: rgba(255, 255, 255, 0.25);
   transform: translateY(-1px)
}

.el-nav__cart.is-disabled {
   opacity: 0.5
}

.el-nav__cart-count {
   position: absolute;
   top: -6px;
   right: -6px;
   min-width: 18px;
   height: 18px;
   border-radius: 999px;
   background: linear-gradient(135deg, var(--orange), #ff9a44);
   color: #101010;
   font-size: 10px;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0 4px
}

.el-nav__cart-status {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.45);
   white-space: nowrap
}

.el-nav__menu-toggle {
   width: 40px;
   height: 40px;
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.04);
   color: var(--text);
   display: none;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 4px;
   cursor: pointer;
   transition: border-color .2s ease, background .2s ease
}

.el-nav__menu-toggle:hover {
   border-color: rgba(255, 255, 255, 0.24);
   background: rgba(255, 255, 255, 0.08)
}

.el-nav__menu-toggle-line {
   width: 16px;
   height: 2px;
   border-radius: 2px;
   background: currentColor
}

.el-nav__mobile-menu {
   width: 100%;
   display: none;
   margin-top: 8px;
   padding: 8px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   background: rgba(17, 17, 17, 0.96)
}

.el-nav__mobile-link {
   display: block;
   padding: 11px 12px;
   border-radius: 10px;
   font-size: 13px;
   font-weight: 600;
   color: var(--text-dim)
}

.el-nav__mobile-link:hover {
   color: var(--text);
   background: rgba(255, 255, 255, 0.06)
}

.el-nav__mobile-link.is-active {
   color: var(--text);
   background: rgba(255, 255, 255, 0.1)
}

/* ───── Universal section padding ───── */
.eat-landing section {
   padding: var(--section-pad) 0
}

/* ───── Shared components ───── */
.el-gradient-text {
   background: linear-gradient(135deg, var(--orange), #ff9a44);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.el-gradient-text-green {
   background: linear-gradient(135deg, var(--green), #ff7316);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.el-gradient-text-violet {
   background: linear-gradient(135deg, var(--violet), #ff7316);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.el-section-label {
   font-family: var(--font-body);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--orange);
   margin-bottom: 12px
}

.el-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 14px 32px;
   border-radius: var(--radius);
   font-family: var(--font-body);
   font-size: 15px;
   font-weight: 700;
   border: none;
   cursor: pointer;
   transition: transform .2s ease, box-shadow .2s ease
}

.el-btn--primary {
   background: linear-gradient(135deg, var(--orange), #ff9a44);
   color: #fff;
   box-shadow: 0 4px 24px var(--orange-glow);
   animation: el-btn-glow 3s ease-in-out infinite
}

.el-btn--primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 32px rgba(255, 115, 22, 0.5)
}

.el-btn--large {
   padding: 20px 48px;
   font-size: 18px;
   border-radius: 16px
}

.el-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
   border-radius: 100px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase
}

.el-badge--orange {
   background: var(--orange-subtle);
   color: var(--orange);
   border: 1px solid rgba(255, 115, 22, 0.2)
}

.el-live-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--accent);
   animation: el-pulse 2s infinite;
   display: inline-block
}

/* ───── Keyframes ───── */
@keyframes el-pulse {

   0%,
   100% {
      opacity: 1;
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4)
   }

   50% {
      opacity: .7;
      box-shadow: 0 0 0 6px rgba(34, 197, 94, 0)
   }
}

@keyframes el-shimmer {
   0% {
      transform: translateX(-100%)
   }

   100% {
      transform: translateX(100%)
   }
}

@keyframes el-glow-pulse {

   0%,
   100% {
      box-shadow: 0 0 0 1px rgba(255, 115, 22, 0.35), 0 0 28px rgba(255, 115, 22, 0.18) inset, 0 0 36px rgba(255, 115, 22, 0.18)
   }

   50% {
      box-shadow: 0 0 0 1px rgba(255, 115, 22, 0.5), 0 0 40px rgba(255, 115, 22, 0.28) inset, 0 0 56px rgba(255, 115, 22, 0.28)
   }
}

@keyframes el-btn-glow {

   0%,
   100% {
      box-shadow: 0 4px 24px var(--orange-glow)
   }

   50% {
      box-shadow: 0 4px 32px rgba(255, 115, 22, 0.4)
   }
}

@keyframes el-ghost-float {

   0%,
   100% {
      transform: translate3d(0, 12px, 0) rotate(-8deg);
      opacity: .42
   }

   50% {
      transform: translate3d(8px, -6px, 0) rotate(-6deg);
      opacity: .6
   }
}

@keyframes el-arrow-travel-x {
   from {
      transform: translateX(0)
   }

   to {
      transform: translateX(var(--arrow-distance-x, 54px))
   }
}

@keyframes el-arrow-travel-y {
   from {
      transform: translateY(0)
   }

   to {
      transform: translateY(var(--arrow-distance-y, 20px))
   }
}

/* ───── Scroll reveal ───── */
.el-reveal {
   opacity: 0;
   transform: translateY(32px);
   transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)
}

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

.el-reveal-d1 {
   transition-delay: 0.1s
}

.el-reveal-d2 {
   transition-delay: 0.2s
}

.el-reveal-d3 {
   transition-delay: 0.3s
}

.el-reveal-d4 {
   transition-delay: 0.4s
}

/* ───── Top progress bar ───── */
.el-progress-bar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: rgba(255, 255, 255, 0.05);
   z-index: 10;
   pointer-events: none
}

.el-progress-bar__fill {
   height: 100%;
   width: 71.5%;
   background: linear-gradient(90deg, var(--orange), #ff9a44);
   border-radius: 0 2px 2px 0
}

.el-meals-counter {
   position: fixed;
   bottom: 24px;
   left: 24px;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 20px;
   background: rgba(10, 10, 11, 0.9);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--border);
   border-radius: 100px;
   font-size: 13px;
   font-weight: 600;
   z-index: 999
}

.el-meals-counter__label {
   color: var(--text-dim)
}

.el-meals-counter__num {
   color: var(--green)
}

/* ───── Section text overrides ───── */
.eat-landing section:not(.el-hero) h2,
.eat-landing section:not(.el-hero) h3 {
   color: var(--text)
}

.eat-landing section:not(.el-hero) p {
   color: var(--text-dim)
}

.eat-landing section:not(.el-hero) .el-section-label {
   color: var(--accent)
}

/* ═══════════════════════════════
   HERO
   ═══════════════════════════════ */
.el-hero {
   --green: #22c55e;
   --violet: #8b5cf6;
   --green-dim: rgba(34, 197, 94, 0.18);
   --violet-dim: rgba(139, 92, 246, 0.18);
   padding: 20px 0 80px
}

.el-hero__inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center
}

.el-hero__avatars {
   display: flex;
   align-items: center;
   margin-bottom: 16px
}

.el-hero__avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 2px solid var(--bg);
   margin-left: -10px;
   object-fit: cover
}

.el-hero__avatar:first-child {
   margin-left: 0
}

.el-hero__avatar-count {
   font-size: 13px;
   color: var(--text-dim);
   margin-left: 12px
}

.el-hero__title {
   font-family: var(--font-display);
   font-size: 56px;
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -0.03em;
   margin-bottom: 28px
}

.el-hero__title-line {
   display: block
}

.el-hero__rotator {
   display: grid;
   position: relative
}

.el-hero__rotator-item {
   grid-area: 1/1;
   opacity: 0;
   transform: none;
   transition: opacity .4s ease
}

.el-hero__rotator-item.is-active {
   opacity: 1
}

.el-hero__rotator-item--orange {
   color: var(--orange);
   text-shadow: 0 0 18px rgba(255, 115, 22, 0.18)
}

.el-hero__rotator-item--green {
   color: var(--green);
   text-shadow: 0 0 18px rgba(34, 197, 94, 0.18)
}

.el-hero__rotator-item--violet {
   color: var(--violet);
   text-shadow: 0 0 18px rgba(139, 92, 246, 0.18)
}

@media (prefers-reduced-motion:reduce) {
   .el-hero__rotator-item {
      animation: none;
      opacity: 1;
      transform: none;
      display: none
   }

   .el-hero__rotator-item:first-child {
      display: inline
   }

   .el-hero__rotator {
      height: auto
   }

   .el-hero__device-wrap::before {
      animation: none
   }
}

.el-hero__left {
   position: relative;
   z-index: 2
}

.el-hero__right {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center
}

.el-hero__props {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-bottom: 32px
}

.el-hero__prop {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 15px;
   color: var(--text-muted)
}

.el-hero__prop-icon {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   flex-shrink: 0;
   line-height: 1;
   background: #ff7316;
   color: #0a0a0b
}

.el-hero__prop-icon--orange {
   background: var(--orange);
   color: #0a0a0b
}

.el-hero__prop-icon--green {
   background: var(--green);
   color: #0a0a0b
}

.el-hero__prop-icon--violet {
   background: var(--violet);
   color: #0a0a0b
}

.el-hero__sub {
   font-size: 13px;
   color: var(--text-dim);
   margin-top: 16px
}

.el-hero__partners {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 20px;
   font-size: 12px;
   color: var(--text-dim)
}

.el-hero__partner-name {
   padding: 4px 12px;
   background: rgba(255, 115, 22, 0.1);
   border: 1px solid rgba(255, 140, 51, 0.9);
   border-radius: 100px;
   font-size: 11px;
   font-weight: 500;
   color: #ffcc99;
   text-decoration: none;
   box-shadow: 0 0 0 1px rgba(255, 115, 22, 0.25), 0 0 14px rgba(255, 115, 22, 0.35)
}

.el-hero__partner-name[href^="http"]::after {
   content: "";
   display: inline-block;
   width: 11px;
   height: 11px;
   margin-left: 6px;
   opacity: 0.95;
   vertical-align: -1px;
   background-repeat: no-repeat;
   background-size: 11px 11px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcc99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E")
}

/* ───── Mobile-only standalone card (hidden on desktop) ───── */
.el-hero__mobile-card {
   display: none;
   position: relative;
   margin: 28px 0 24px;
   perspective: 800px
}

.el-hero__mobile-card::before {
   content: '';
   position: absolute;
   inset: -30px -40px;
   background: radial-gradient(circle at 50% 50%, rgba(255, 115, 22, 0.35) 0%, transparent 70%);
   filter: blur(30px);
   z-index: -1;
   pointer-events: none
}

.el-hero__mobile-card-inner {
   aspect-ratio: 1.586;
   width: 100%;
   max-width: 260px;
   /* Reduced from 280px for visual balance */
   margin: 0;
   /* Left align */
   border-radius: 14px;
   padding: 18px;
   background: radial-gradient(180px 120px at 18% 18%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 52%, rgba(255, 255, 255, 0) 72%), linear-gradient(135deg, #ff6a00, #ff831f 34%, #ff9a44 70%, #ff6a00);
   border: 1px solid rgba(255, 255, 255, 0.25);
   box-shadow:
      0 25px 50px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.15) inset,
      0 0 50px rgba(255, 140, 64, 0.3) inset,
      0 8px 32px rgba(255, 115, 22, 0.25);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   font-family: var(--font-body);
   color: #0a0a0b;
   animation: floatLeftRight 6s ease-in-out infinite
}

@keyframes floatLeftRight {
   0% {
      transform: translateX(0);
   }

   50% {
      transform: translateX(12px);
   }

   100% {
      transform: translateX(0);
   }
}

.el-hero__mobile-card-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start
}

.el-hero__mobile-card-logo {
   height: 26px;
   width: auto
}

.el-hero__mobile-card-contactless {
   width: 22px;
   height: 22px
}

.el-hero__mobile-card-contactless svg {
   width: 100%;
   height: 100%;
   stroke: rgba(255, 255, 255, 0.85)
}

.el-hero__mobile-card-number {
   font-family: var(--font-display);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.08em;
   color: rgba(10, 10, 11, 0.65)
}

.el-hero__mobile-card-bottom {
   display: flex;
   justify-content: space-between;
   align-items: flex-end
}

.el-hero__mobile-card-name {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em
}

.el-hero__mobile-card-exp {
   font-size: 9px;
   font-weight: 600;
   color: rgba(10, 10, 11, 0.55)
}

.el-hero__device-wrap {
   position: relative;
   transform: translateX(80px) scale(.72);
   transform-origin: center center;
   margin: -140px 0;
   perspective: 1200px
}

.el-hero__right::before {
   content: '';
   position: absolute;
   inset: -110px -80px;
   background: radial-gradient(closest-side at 50% 45%, rgba(255, 115, 22, 0.20), rgba(255, 115, 22, 0.06) 45%, rgba(0, 0, 0, 0) 70%);
   filter: blur(8px);
   opacity: 0.75;
   pointer-events: none;
   z-index: 0
}

.el-hero__right>* {
   position: relative;
   z-index: 1
}

.el-hero__ghost-card {
   position: absolute;
   left: -252px;
   top: 348px;
   width: 360px;
   height: 220px;
   border-radius: 28px;
   padding: 22px 24px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   color: #0a0a0b;
   background: linear-gradient(135deg, #ff7a1a, #ff9a44 45%, #ffb366 80%);
   border: 1px solid rgba(255, 255, 255, 0.34);
   box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 0 30px rgba(255, 115, 22, 0.9), 0 0 80px rgba(255, 115, 22, 0.75), 0 0 140px rgba(255, 115, 22, 0.6);
   opacity: 1;
   transform: translate3d(0, 18px, 0) rotate(-11deg);
   animation: el-ghost-float 8s ease-in-out infinite;
   pointer-events: none;
   z-index: 0;
   overflow: hidden
}

.el-hero__ghost-card>* {
   position: relative;
   z-index: 1
}

.el-hero__ghost-card-top {
   display: flex;
   align-items: center;
   justify-content: space-between
}

.el-hero__ghost-card-logo {
   height: 26px;
   width: auto;
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25))
}

.el-hero__ghost-card-contactless {
   color: rgba(0, 0, 0, 0.8)
}

.el-hero__ghost-card-contactless svg {
   width: 22px;
   height: 22px
}

.el-hero__ghost-card-number {
   font-size: 16px;
   letter-spacing: 0.2em;
   font-weight: 600;
   text-transform: uppercase
}

.el-hero__ghost-card-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 11px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: rgba(0, 0, 0, 0.75)
}

.el-hero__device-wrap .device {
   position: relative;
   z-index: 1
}

.el-hero .el-gradient-text-green {
   background: linear-gradient(135deg, #22c55e, #6ee7b7);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

.el-hero .el-gradient-text-violet {
   background: linear-gradient(135deg, #8b5cf6, #c4b5fd);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

/* ───── Phone / Device ───── */
.device,
.device::before,
.device::after,
.device *,
.device *::before,
.device *::after {
   box-sizing: border-box;
   display: block
}

.device {
   position: relative;
   transform-style: preserve-3d
}

.device .device-frame {
   transform-style: preserve-3d
}

.device .device-screen {
   background-color: #000;
   background-position: center;
   background-size: cover;
   object-fit: cover;
   position: relative;
   overflow: hidden
}

.device-iphone-14-pro {
   height: 868px;
   width: 428px
}

.device-iphone-14-pro .device-frame {
   background: #010101;
   border: 1px solid #1b1721;
   border-radius: 68px;
   box-shadow: inset 0 0 4px 2px #c0b7cd, inset 0 0 0 6px #342c3f;
   height: 868px;
   padding: 19px;
   width: 428px;
   overflow: visible;
   transform-style: preserve-3d
}

.device-iphone-14-pro .device-screen {
   border-radius: 49px;
   height: 830px;
   width: 390px;
   overflow: visible;
   transform-style: preserve-3d
}

.device-iphone-14-pro .device-stripe::after,
.device-iphone-14-pro .device-stripe::before {
   border: solid rgba(1, 1, 1, .25);
   border-width: 0 7px;
   content: "";
   height: 7px;
   left: 0;
   position: absolute;
   width: 100%;
   z-index: 9
}

.device-iphone-14-pro .device-stripe::after {
   top: 85px
}

.device-iphone-14-pro .device-stripe::before {
   bottom: 85px
}

.device-iphone-14-pro .device-header {
   background: #010101;
   border-radius: 20px;
   height: 35px;
   left: 50%;
   margin-left: -60px;
   position: absolute;
   top: 29px;
   width: 120px
}

.device-iphone-14-pro .device-sensors::after,
.device-iphone-14-pro .device-sensors::before {
   content: "";
   position: absolute
}

.device-iphone-14-pro .device-sensors::after {
   background: #010101;
   border-radius: 17px;
   height: 33px;
   left: 50%;
   margin-left: -60px;
   top: 30px;
   width: 74px
}

.device-iphone-14-pro .device-sensors::before {
   background: radial-gradient(farthest-corner at 20% 20%, #6074bf 0, transparent 40%), radial-gradient(farthest-corner at 80% 80%, #513785 0, #24555e 20%, transparent 50%);
   border-radius: 50%;
   box-shadow: 0 0 1px 1px rgba(255, 255, 255, .05);
   height: 9px;
   left: 50%;
   margin-left: 36px;
   top: 42px;
   width: 9px
}

.device-iphone-14-pro .device-btns {
   background: #1b1721;
   border-radius: 2px;
   height: 32px;
   left: -2px;
   position: absolute;
   top: 115px;
   width: 3px
}

.device-iphone-14-pro .device-btns::after,
.device-iphone-14-pro .device-btns::before {
   background: #1b1721;
   border-radius: 2px;
   content: "";
   height: 62px;
   left: 0;
   position: absolute;
   width: 3px
}

.device-iphone-14-pro .device-btns::after {
   top: 60px
}

.device-iphone-14-pro .device-btns::before {
   top: 140px
}

.device-iphone-14-pro .device-power {
   background: #1b1721;
   border-radius: 2px;
   height: 100px;
   position: absolute;
   right: -2px;
   top: 200px;
   width: 3px
}

.el-app-screen {
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, #0d0d0f, #111113);
   padding: 60px 20px 20px;
   display: flex;
   flex-direction: column;
   font-family: var(--font-body);
   color: var(--text);
   overflow: hidden;
   transform-style: preserve-3d;
   perspective: 1400px
}

.el-phone {
   position: relative;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 14px;
   min-height: 0;
   overflow: hidden;
   transform-style: preserve-3d
}

.el-phone__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 6px 2px
}

.el-phone__header-left {
   display: flex;
   align-items: center;
   gap: 12px
}

.el-phone__avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: block;
   object-fit: cover;
   background: rgba(255, 255, 255, 0.06);
   border: 2px solid rgba(10, 10, 11, 0.75);
   box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45)
}

.el-phone__hello-title {
   font-size: 22px;
   font-weight: 700;
   letter-spacing: -0.02em;
   color: rgba(255, 255, 255, 0.92)
}

.el-phone__menu {
   width: 44px;
   height: 44px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 5px;
   padding: 8px;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08)
}

.el-phone__menu span {
   width: 18px;
   height: 2px;
   border-radius: 2px;
   background: rgba(255, 255, 255, 0.78)
}

.el-phone__wallet {
   padding: 6px 2px 0
}

.el-phone__wallet-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px
}

.el-phone__tile {
   background: rgba(255, 255, 255, 0.035);
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 18px;
   padding: 12px;
   box-shadow: 0 16px 34px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
   min-height: 84px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   gap: 8px
}

.el-phone__tile-label {
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.55)
}

.el-phone__tile-value {
   font-size: 22px;
   font-weight: 900;
   letter-spacing: -0.02em;
   color: rgba(255, 255, 255, 0.94);
   text-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
   line-height: 1.05
}

.el-phone__tile--rewards .el-phone__tile-value {
   font-size: 24px;
   letter-spacing: -0.03em
}

.el-phone__tile--meals {
   background: rgba(34, 197, 94, 0.06);
   border-color: rgba(34, 197, 94, 0.22)
}

.el-phone__tile--meals .el-phone__tile-label {
   color: rgba(34, 197, 94, 0.82)
}

.el-phone__tile-metric {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 2px
}

.el-phone__tile-arrow {
   width: 18px;
   height: 18px;
   border-radius: 8px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(34, 197, 94, 0.14);
   border: 1px solid rgba(34, 197, 94, 0.26);
   color: rgba(34, 197, 94, 0.98);
   line-height: 1
}

.el-phone__tile-arrow svg {
   width: 12px;
   height: 12px;
   display: block
}

.el-phone__tile--meals .el-phone__tile-value {
   color: rgba(34, 197, 94, 0.98);
   text-shadow: 0 12px 26px rgba(0, 0, 0, 0.35)
}

.el-phone__section {
   margin-top: 6px;
   position: relative;
   overflow: hidden;
   border-radius: 30px
}

.el-phone__section::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 72px;
   transform: translateX(-50%);
   width: 320px;
   height: 220px;
   background: radial-gradient(ellipse at 50% 40%, rgba(255, 115, 22, 0.26) 0%, rgba(255, 115, 22, 0.10) 45%, rgba(0, 0, 0, 0) 75%);
   filter: blur(18px);
   opacity: .9;
   pointer-events: none;
   z-index: 0
}

.el-phone__section>* {
   position: relative;
   z-index: 1
}

.el-phone__section-row {
   display: none
}

.el-phone__card {
   position: relative;
   border-radius: 28px;
   padding: 26px 26px 24px;
   min-height: 220px;
   background: radial-gradient(240px 180px at 18% 18%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 52%, rgba(255, 255, 255, 0) 72%), radial-gradient(360px 240px at 82% 78%, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0) 62%), linear-gradient(135deg, #ff6a00, #ff831f 34%, #ff9a44 70%, #ff6a00);
   border: 1px solid rgba(255, 255, 255, 0.20);
   box-shadow: 0 34px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 0 46px rgba(255, 140, 64, 0.42) inset;
   transform: translateZ(10px);
   overflow: hidden
}

.el-phone__card-wrap {
   position: relative;
   border-radius: 30px;
   padding: 0;
   transform: translateZ(64px) rotateX(4deg);
   transform-style: preserve-3d;
   filter: drop-shadow(0 30px 48px rgba(0, 0, 0, 0.6));
   z-index: 2
}

.el-phone__card-wrap::before {
   content: '';
   position: absolute;
   inset: -58px;
   background: radial-gradient(closest-side at 36% 34%, rgba(255, 115, 22, 0.95) 0%, rgba(255, 115, 22, 0.42) 38%, rgba(0, 0, 0, 0) 76%), radial-gradient(closest-side at 82% 70%, rgba(255, 154, 68, 0.65) 0%, rgba(255, 154, 68, 0.24) 44%, rgba(0, 0, 0, 0) 82%);
   filter: blur(30px);
   opacity: 1;
   pointer-events: none;
   z-index: 0
}

.el-phone__card-wrap::after {
   content: '';
   position: absolute;
   inset: -10px;
   border-radius: 34px;
   background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 62%);
   opacity: .7;
   pointer-events: none;
   z-index: 1
}

.el-phone__card-wrap .el-phone__card {
   position: relative;
   z-index: 2
}

.el-phone__card::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(300px 180px at 75% 65%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 40%);
   mix-blend-mode: overlay;
   pointer-events: none
}

.el-phone__card-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 26px;
   position: relative;
   z-index: 2
}

.el-phone__card-logo {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 12px 26px rgba(0, 0, 0, 0.30);
   border: 1px solid rgba(255, 255, 255, 0.22);
   background: rgba(255, 255, 255, 0.14)
}

.el-phone__card-contactless {
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(0, 0, 0, 0.70);
   opacity: .92;
   transform: rotate(90deg);
   filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18))
}

.el-phone__card-contactless svg {
   width: 22px;
   height: 22px;
   display: block
}

.el-phone__card-number {
   font-family: var(--font-body);
   font-size: 20px;
   letter-spacing: .12em;
   color: rgba(0, 0, 0, 0.78);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.20);
   margin-bottom: 20px;
   position: relative;
   z-index: 2
}

.el-phone__card-bottom {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 10px;
   position: relative;
   z-index: 2
}

.el-phone__card-name,
.el-phone__card-exp {
   font-size: 11px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: rgba(0, 0, 0, 0.70);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18)
}

.el-phone__activities {
   margin-top: 12px;
   flex: 1;
   min-height: 0;
   overflow: auto;
   padding-bottom: 6px
}

.el-phone__activities::-webkit-scrollbar {
   width: 0;
   height: 0
}

.el-phone__activities-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 10px
}

.el-phone__activities-title {
   font-size: 18px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.92)
}

.el-phone__activities-link {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.45)
}

.el-phone__activity {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 12px 0;
   border-top: 1px solid rgba(255, 255, 255, 0.08)
}

.el-phone__activity-icon {
   width: 38px;
   height: 38px;
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.10);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.95)
}

.el-phone__activity-icon svg {
   width: 18px;
   height: 18px;
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35))
}

.el-phone__activity-icon--pink {
   background: linear-gradient(135deg, rgba(236, 72, 153, 0.85), rgba(168, 85, 247, 0.65));
   border-color: rgba(236, 72, 153, 0.35)
}

.el-phone__activity-icon--starbucks {
   background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.55));
   border-color: rgba(16, 185, 129, 0.30)
}

.el-phone__activity-icon--lime {
   background: linear-gradient(135deg, rgba(163, 230, 53, 0.95), rgba(34, 197, 94, 0.55));
   border-color: rgba(163, 230, 53, 0.30)
}

.el-phone__activity-main {
   flex: 1;
   min-width: 0
}

.el-phone__activity-name {
   font-size: 14px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.92);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.el-phone__activity-meta {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.45);
   margin-top: 2px
}

.el-phone__activity-amt {
   font-size: 16px;
   font-weight: 800;
   color: rgba(255, 255, 255, 0.92)
}

.el-phone__activity-amt--pos {
   color: rgba(34, 197, 94, 0.98)
}

/* ═══════════════════════════════
   HOW IT WORKS
   ═══════════════════════════════ */
.el-how__header {
   text-align: center;
   margin-bottom: 32px;
   position: relative
}

.el-how__header::after {
   content: '';
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 400px;
   height: 300px;
   background: radial-gradient(closest-side, rgba(255, 115, 22, 0.06), transparent);
   pointer-events: none;
   z-index: -1
}

.el-how__title {
   font-family: var(--font-display);
   font-size: 44px;
   font-weight: 800;
   letter-spacing: -0.02em;
   margin: 0 0 8px
}

.el-how__desc {
   font-size: 15px;
   color: var(--text-dim)
}

.el-how__flow {
   display: flex;
   justify-content: center
}

.el-how__steps {
   width: min(1100px, 100%);
   display: flex;
   align-items: stretch;
   gap: 12px;
   position: relative
}

.el-how__card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 18px;
   padding: 22px 24px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   flex: 1 1 0;
   min-width: 0;
   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease
}

.el-how__card-top {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 6px
}

.el-how__num {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: rgba(255, 115, 22, 0.18);
   color: var(--accent);
   font-size: 13px;
   font-weight: 800;
   letter-spacing: 0.04em
}

.el-how__eyebrow {
   font-size: 11px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--text-dim)
}

.el-how__card-title {
   font-family: var(--font-body);
   font-size: 18px;
   font-weight: 700;
   margin: 0
}

.el-how__card-desc {
   font-size: 14px;
   color: var(--text-dim);
   line-height: 1.5;
   margin: 0
}

.el-how__card:hover {
   border-color: rgba(255, 115, 22, 0.45);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
   transform: translateY(-3px)
}

.el-how__card:focus-visible {
   outline: 2px solid rgba(255, 115, 22, 0.7);
   outline-offset: 2px
}

.el-how__card.is-active {
   background: var(--accent);
   color: #0a0a0b;
   border-color: rgba(255, 115, 22, 0.8);
   box-shadow: 0 16px 40px rgba(255, 115, 22, 0.35);
   transform: translateY(-2px)
}

.el-how__card.is-active .el-how__card-title,
.el-how__card.is-active .el-how__card-desc,
.el-how__card.is-active .el-how__eyebrow {
   color: rgba(0, 0, 0, 0.78)
}

.el-how__card.is-active .el-how__num {
   background: rgba(0, 0, 0, 0.14);
   color: #0a0a0b
}

.el-how__connector {
   position: relative;
   width: 64px;
   flex: 0 0 64px;
   display: flex;
   align-items: center;
   justify-content: center
}

.el-how__line {
   position: absolute;
   left: 0;
   right: 0;
   top: 50%;
   height: 3px;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 115, 22, 0.55), rgba(255, 255, 255, 0.06));
   border-radius: 999px;
   transform: translateY(-50%);
   box-shadow: 0 0 12px rgba(255, 115, 22, 0.22)
}

.el-how__arrow {
   position: absolute;
   left: 0;
   top: 50%;
   margin-top: -6px;
   width: 12px;
   height: 12px;
   border-radius: 999px;
   background: var(--accent);
   box-shadow: 0 0 8px rgba(255, 115, 22, 0.35);
   opacity: 0
}

.el-how__arrow::after {
   content: none
}

.el-how__connector.is-animating .el-how__arrow {
   opacity: 1;
   animation: el-arrow-travel-x var(--arrow-travel, 1200ms) ease-in-out forwards
}

/* ═══════════════════════════════
   COMPARE
   ═══════════════════════════════ */
.el-compare__header {
   text-align: center;
   margin-bottom: 48px
}

.el-compare__title {
   font-family: var(--font-display);
   font-size: 44px;
   font-weight: 800;
   letter-spacing: -0.02em;
   margin-bottom: 14px
}

.el-compare__struck {
   text-decoration: line-through;
   text-decoration-thickness: 3px;
   text-decoration-color: rgba(255, 115, 22, 0.5);
   opacity: 0.7
}

.el-compare__desc {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.55);
   max-width: 600px;
   margin: 0 auto;
   line-height: 1.6
}

.el-compare__grid {
   display: flex;
   align-items: center;
   gap: 28px;
   margin-bottom: 28px
}

.el-compare__card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 28px;
   position: relative;
   min-height: 260px;
   flex: 1;
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.el-compare__card:hover {
   transform: translateY(-3px);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
   border-color: var(--border-hover)
}

.el-compare__card--eat {
   background: linear-gradient(140deg, #ff6a00 0%, #ff831f 45%, #ff9a44 100%);
   border-color: rgba(255, 255, 255, 0.22);
   box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 0 18px rgba(255, 115, 22, 0.45);
   color: #0a0a0b
}

.el-compare__card--eat .el-compare__card-badge,
.el-compare__card--eat .el-compare__card-label,
.el-compare__card--eat .el-compare__card-item,
.el-compare__card--eat .el-compare__card-item .icon,
.el-compare__card--eat .el-compare__card-item .icon svg {
   color: #0a0a0b;
   stroke: currentColor
}

.el-compare__card--eat .el-compare__card-label {
   color: #0a0a0b !important
}

.el-compare__card--eat .el-compare__icon--check {
   background: rgba(0, 0, 0, 0.18);
   color: #0a0a0b
}

.el-compare__card-badge {
   display: inline-block;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-dim);
   margin-bottom: 12px
}

.el-compare__card-label {
   margin: 0 0 12px
}

.el-compare__card-item {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 14px;
   color: var(--text-muted);
   margin-bottom: 8px
}

.el-compare__card-item:last-child {
   margin-bottom: 0
}

.el-compare__card-item .icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   border-radius: 8px;
   flex: 0 0 22px
}

.el-compare__card-item .icon svg {
   width: 14px;
   height: 14px;
   display: block
}

.el-compare__icon--x {
   background: rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.6)
}

.el-compare__icon--check {
   background: rgba(255, 115, 22, 0.12);
   color: #ff7316
}

.el-compare__vs {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: linear-gradient(135deg, #ff7316, #ff9a44);
   color: #fff;
   font-size: 14px;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   flex: 0 0 52px
}

/* ═══════════════════════════════
   EARN
   ═══════════════════════════════ */
.el-earn__inner {
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
   gap: 64px;
   align-items: start
}

.el-earn__text {
   display: flex;
   flex-direction: column;
   gap: 16px
}

.el-earn__title {
   font-family: var(--font-display);
   font-size: 44px;
   font-weight: 800;
   letter-spacing: -0.02em;
   margin: 0
}

.el-earn__desc {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.6;
   margin: 0
}

.el-earn__features {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 72px;
   --earn-icon: 46px
}

.el-earn__feature {
   display: flex;
   align-items: flex-start;
   gap: 18px;
   transition: transform .2s ease
}

.el-earn__feature:hover {
   transform: translateX(4px)
}

.el-earn__feature.is-active {
   transform: translateX(4px)
}

.el-earn__feature-icon {
   width: var(--earn-icon);
   height: var(--earn-icon);
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: transform .2s ease, box-shadow .2s ease;
   position: relative
}

.el-earn__feature-icon:hover {
   transform: scale(1.08)
}

.el-earn__feature.is-active .el-earn__feature-icon {
   transform: scale(1.1);
   box-shadow: 0 0 0 1px rgba(255, 115, 22, 0.4), 0 0 18px rgba(255, 115, 22, 0.45)
}

.el-earn__feature-icon--orange {
   background: rgba(255, 115, 22, 0.12);
   color: #ff7316
}

.el-earn__feature-icon--green {
   background: rgba(255, 115, 22, 0.18);
   color: #ff7316
}

.el-earn__feature-icon--violet {
   background: rgba(255, 115, 22, 0.18);
   color: #ff7316
}

.el-earn__feature-icon svg {
   width: 22px;
   height: 22px;
   display: block
}

.el-earn__feature-title {
   font-family: var(--font-body);
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 6px
}

.el-earn__feature-desc {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.6
}

.el-earn__connector {
   position: relative;
   height: 18px
}

.el-earn__line {
   position: absolute;
   left: calc(var(--earn-icon) / 2);
   top: 0;
   bottom: 0;
   width: 2px;
   transform: translateX(-1px);
   background: rgba(255, 115, 22, 0.18);
   border-radius: 2px;
   overflow: hidden
}

.el-earn__line::after {
   content: "";
   position: absolute;
   inset: -100% 0;
   background: linear-gradient(180deg, rgba(255, 115, 22, 0), rgba(255, 115, 22, 0.35) 45%, rgba(255, 115, 22, 0.95) 50%, rgba(255, 115, 22, 0.35) 55%, rgba(255, 115, 22, 0) 100%);
   opacity: 0
}

.el-earn__connector.is-animating .el-earn__line::after {
   opacity: 1;
   animation: el-earn-line-travel var(--earn-line-travel, 1200ms) ease-in-out forwards
}

@keyframes el-earn-line-travel {
   from {
      transform: translateY(-50%)
   }

   to {
      transform: translateY(50%)
   }
}

.el-earn__bonus {
   position: absolute;
   left: 50%;
   top: 100%;
   transform: translate(-50%, -6px);
   opacity: 0;
   color: #22c55e;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   pointer-events: none
}

.el-earn__bonus.is-dropping {
   animation: el-earn-drop 1.6s ease-out forwards
}

@keyframes el-earn-drop {
   0% {
      opacity: 0;
      transform: translate(-50%, -10px) scale(0.92)
   }

   20% {
      opacity: 1
   }

   70% {
      opacity: 1;
      transform: translate(-50%, 18px) scale(1)
   }

   100% {
      opacity: 0;
      transform: translate(-50%, 26px) scale(1)
   }
}

/* ═══════════════════════════════
   COMMUNITY
   ═══════════════════════════════ */
.el-community {
   position: relative
}

.el-community::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 30%;
   transform: translateX(-50%);
   width: 600px;
   height: 400px;
   background: radial-gradient(closest-side, rgba(255, 115, 22, 0.05), transparent);
   pointer-events: none;
   z-index: 0
}

.el-community__header {
   margin-bottom: 32px;
   max-width: 760px;
   position: relative;
   z-index: 1
}

.el-community__title {
   font-family: var(--font-display);
   font-size: 44px;
   font-weight: 800;
   letter-spacing: -0.02em;
   margin: 0 0 8px
}

.el-community__sub {
   font-size: 16px;
   color: var(--text-dim);
   margin: 0
}

.el-community__nowrap {
   white-space: nowrap
}

.el-community__header {
   text-align: center;
   margin: 0 auto 32px;
   max-width: 820px
}

.el-community__bento {
   display: flex;
   justify-content: center
}

.el-community__card {
   position: relative;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid var(--border);
   border-radius: 22px;
   padding: 20px;
   overflow: hidden;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.el-community__card:hover {
   transform: translateY(-2px);
   border-color: var(--border-hover)
}

.el-community__card--value {
   width: min(980px, 100%);
   padding: 28px 30px;
   background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0) 55%), rgba(255, 255, 255, 0.02)
}

.el-community__card--value::before {
   content: '';
   position: absolute;
   inset: -40%;
   background: radial-gradient(closest-side, rgba(255, 115, 22, 0.25), transparent);
   opacity: .7
}

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

.el-community__value-label {
   font-size: 12px;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--text-dim)
}

.el-community__value-amount {
   font-family: var(--font-display);
   font-size: 72px;
   font-weight: 900;
   letter-spacing: -0.03em;
   line-height: 1;
   margin: 10px 0 8px;
   color: #ffffff;
   text-shadow: 0 0 28px rgba(255, 115, 22, 0.45), 0 0 70px rgba(255, 115, 22, 0.25)
}

.el-community__value-growth {
   font-size: 16px;
   font-weight: 800;
   color: var(--accent)
}

.el-community__value-foot {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 14px;
   position: relative;
   z-index: 1
}

.el-community__value-chip {
   padding: 6px 10px;
   border-radius: 999px;
   font-size: 11px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: var(--text-dim)
}

.el-community__value-orbit {
   position: absolute;
   right: -40px;
   bottom: -40px;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   border: 1px dashed rgba(255, 255, 255, 0.18);
   opacity: .6
}

.el-community__subcards {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px;
   margin-top: 24px;
   position: relative;
   z-index: 1
}

.el-community__subcard {
   background: rgba(0, 0, 0, 0.45);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 18px;
   padding: 16px 18px;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04)
}

.el-community__subcard .el-community__stat-number {
   font-size: 26px
}

.el-community__subcard .el-community__stat-note {
   font-size: 12px
}

.el-community__card-eyebrow {
   font-size: 11px;
   color: var(--text-dim);
   letter-spacing: 0.14em;
   text-transform: uppercase
}

.el-community__stat-number {
   font-size: 30px;
   font-weight: 900;
   margin-top: 8px
}

.el-community__stat-note {
   font-size: 12px;
   color: var(--text-dim);
   margin-top: 6px
}

.el-community__spark {
   position: absolute;
   right: 16px;
   top: 16px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--accent);
   box-shadow: 0 0 18px rgba(255, 115, 22, 0.6)
}

.el-community__meter {
   height: 6px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.08);
   overflow: hidden;
   margin-top: 14px
}

.el-community__meter span {
   display: block;
   height: 100%;
   width: 60%;
   background: linear-gradient(90deg, var(--accent), #ff9a44)
}

.el-community__pulse-dot {
   position: absolute;
   right: 18px;
   bottom: 18px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--accent);
   box-shadow: 0 0 0 0 rgba(255, 115, 22, 0.45);
   animation: el-pulse 2s infinite
}

.el-community__chart-band {
   margin-top: 0
}

.el-community__chart-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 8px
}

.el-community__chart-label {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase
}

.el-community__chart-range {
   font-size: 12px;
   color: var(--text-dim)
}

.el-community__chart {
   width: 100%;
   height: 120px;
   display: block
}

.el-community__chart-area {
   opacity: .9
}

.el-community__chart-line {
   fill: none;
   stroke: var(--accent);
   stroke-width: 3;
   stroke-linecap: round;
   stroke-linejoin: round
}

/* ═══════════════════════════════
   MISSION
   ═══════════════════════════════ */
.el-mission {
   position: relative
}

.el-mission::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 15%;
   transform: translateX(-50%);
   width: 500px;
   height: 350px;
   background: radial-gradient(closest-side, rgba(255, 115, 22, 0.06), transparent);
   pointer-events: none;
   z-index: 0
}

.el-mission__grid {
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
   gap: 48px;
   align-items: start;
   position: relative;
   z-index: 1
}

.el-mission__intro {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.el-mission__big {
   font-family: var(--font-display);
   font-size: 56px;
   font-weight: 800;
   line-height: 1;
   margin: 0
}

.el-mission__sub {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.55);
   margin: 0
}

.el-mission__text {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.6;
   margin: 0
}

.el-mission__impact {
   display: flex;
   flex-direction: column;
   gap: 20px
}

.el-mission__stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
   margin: 0;
   position: relative;
   z-index: 1
}

.el-mission__stat-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 24px;
   text-align: center;
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.el-mission__stat-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
   border-color: var(--border-hover)
}

.el-mission__stat-num {
   font-family: var(--font-display);
   font-size: 32px;
   font-weight: 800;
   margin-bottom: 4px
}

.el-mission__stat-desc {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.55)
}

.el-mission__progress {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 24px;
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
   position: relative;
   z-index: 1
}

.el-mission__bar-hdr {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 10px;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.55)
}

.el-mission__bar-title {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: rgba(255, 255, 255, 0.55)
}

.el-mission__bar-track {
   width: 100%;
   height: 10px;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 999px;
   overflow: hidden;
   position: relative
}

.el-mission__bar-fill {
   height: 100%;
   background: linear-gradient(90deg, #ff7316, #ff9a44);
   border-radius: 999px;
   position: relative;
   overflow: hidden
}

.el-mission__bar-fill::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
   animation: el-shimmer 2.5s ease-in-out infinite
}

.el-mission__progress-count {
   font-size: 13px;
   color: #ff7316;
   font-weight: 600;
   margin-bottom: 4px
}

.el-mission__progress-title {
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 8px
}

.el-mission__progress-desc {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.5
}

/* ═══════════════════════════════
   BENEFITS
   ═══════════════════════════════ */
.el-benefits__header {
   text-align: center;
   max-width: 720px;
   margin: 0 auto 28px
}

.el-benefits__title {
   font-family: var(--font-display);
   font-size: 44px;
   font-weight: 800;
   letter-spacing: -0.02em;
   margin: 0 0 16px
}

.el-benefits__progress {
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: center
}

.el-benefits__progress-bar {
   width: 100%;
   max-width: 520px;
   height: 10px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 999px;
   overflow: hidden;
   position: relative
}

.el-benefits__progress-fill {
   height: 100%;
   background: linear-gradient(90deg, #ff7316, #ff9a44);
   position: relative;
   overflow: hidden
}

.el-benefits__progress-fill::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
   animation: el-shimmer 2.5s ease-in-out infinite
}

.el-benefits__progress-text {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6);
   margin: 0
}

.el-benefits__main {
   text-align: center;
   margin-bottom: 28px
}

.el-benefits__main-title {
   font-family: var(--font-display);
   font-size: 28px;
   font-weight: 800;
   margin: 0 0 10px
}

.el-benefits__main-desc {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.6);
   margin: 0
}

.el-benefits__grid {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   justify-content: center;
   counter-reset: benefits-counter
}

.el-benefits__card {
   flex: 1 1 220px;
   max-width: 260px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 18px;
   padding: 20px;
   text-align: center;
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
   counter-increment: benefits-counter
}

.el-benefits__card:hover {
   transform: translateY(-3px);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
   border-color: var(--border-hover)
}

.el-benefits__card-icon {
   width: 38px;
   height: 38px;
   border-radius: 12px;
   background: rgba(255, 115, 22, 0.12);
   color: #ff7316;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   margin: 0 auto 10px;
   transition: transform .2s ease;
   font-size: 0
      /* Hide + */
}

.el-benefits__card-icon::before {
   content: counter(benefits-counter, decimal-leading-zero);
   font-size: 14px;
   font-weight: 700
}

.el-benefits__card-icon:hover {
   transform: scale(1.08)
}

.el-benefits__card-title {
   font-family: var(--font-body);
   font-size: 16px;
   font-weight: 700;
   margin: 0 0 8px
}

.el-benefits__card-desc {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.55);
   margin: 0
}

/* ═══════════════════════════════
   REFER & EARN
   ═══════════════════════════════ */
.el-refer {
   background: transparent;
   color: inherit
}

.el-refer__header {
   text-align: center;
   max-width: 760px;
   margin: 0 auto 48px
}

.el-refer__label {
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: #ff7316;
   margin-bottom: 12px
}

.el-refer__title {
   font-family: var(--font-display);
   font-size: 44px;
   font-weight: 800;
   letter-spacing: -0.02em;
   margin: 0 0 12px
}

.el-refer__subtitle {
   font-size: 18px;
   color: rgba(255, 255, 255, 0.6);
   margin: 0
}

/* Steps row */
.el-refer__steps {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 18px;
   margin-bottom: 48px
}

.el-refer__step-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 20px;
   padding: 24px 22px;
   min-width: 220px;
   max-width: 260px;
   text-align: center;
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.el-refer__step-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
   border-color: var(--border-hover)
}

.el-refer__steps .el-refer__step-card:nth-child(3),
.el-refer__steps .el-refer__step-card:nth-child(5) {
   position: relative;
   isolation: isolate
}

.el-refer__steps .el-refer__step-card:nth-child(3)::before,
.el-refer__steps .el-refer__step-card:nth-child(5)::before {
   content: "";
   position: absolute;
   inset: -1px;
   border-radius: 22px;
   border: 1px solid rgba(255, 115, 22, 0.45);
   box-shadow: inset 0 2px 0 0 rgba(255, 115, 22, 1);
   animation: el-refer-border-pulse 3.2s linear infinite;
   z-index: -1;
   pointer-events: none;
}

@keyframes el-refer-border-pulse {
   0% {
      box-shadow: inset 0 2px 0 0 rgba(255, 115, 22, 1);
   }

   25% {
      box-shadow: inset -2px 0 0 0 rgba(255, 115, 22, 1);
   }

   50% {
      box-shadow: inset 0 -2px 0 0 rgba(255, 115, 22, 1);
   }

   75% {
      box-shadow: inset 2px 0 0 0 rgba(255, 115, 22, 1);
   }

   100% {
      box-shadow: inset 0 2px 0 0 rgba(255, 115, 22, 1);
   }
}

.el-refer__steps .el-refer__step-card:first-of-type {
   background: var(--accent);
   color: #0a0a0b;
   border-color: rgba(255, 115, 22, 0.8);
   box-shadow: 0 16px 40px rgba(255, 115, 22, 0.35)
}

.el-refer__steps .el-refer__step-card:first-of-type .el-refer__step-title,
.el-refer__steps .el-refer__step-card:first-of-type .el-refer__step-desc {
   color: rgba(0, 0, 0, 0.78)
}

.el-refer__steps .el-refer__step-card:first-of-type .el-refer__step-num {
   background: rgba(0, 0, 0, 0.14);
   color: #0a0a0b
}

.el-refer__steps .el-refer__step-card:first-of-type .el-refer__step-icon {
   background: rgba(0, 0, 0, 0.12)
}

.el-refer__step-num {
   width: 36px;
   height: 36px;
   border-radius: 999px;
   background: #ff7316;
   color: #0a0a0b;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   margin: 0 auto 14px
}

.el-refer__step-icon {
   width: 40px;
   height: 40px;
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 14px
}

.el-refer__step-title {
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 6px
}

.el-refer__step-desc {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6)
}

.el-refer__step-arrow {
   font-size: 22px;
   color: #ff7316;
   opacity: 0.6
}

/* Tiers + Leaderboard columns */
.el-refer__columns {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   margin-bottom: 28px
}

.el-refer__col {
   flex: 1 1 360px;
   background: linear-gradient(160deg, rgba(255, 115, 22, 0.12) 0%, rgba(0, 0, 0, 0) 55%), var(--bg-card);
   border: 1px solid rgba(255, 115, 22, 0.22);
   border-radius: 24px;
   padding: 28px;
   box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28)
}

.el-refer__col-title {
   font-family: var(--font-display);
   font-size: 22px;
   font-weight: 800;
   margin-bottom: 16px
}

.el-refer__col-subtitle {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6);
   margin-bottom: 16px
}

.el-refer__col-header {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 6px
}

.el-refer__col-header-icon {
   width: 28px;
   height: 28px;
   border-radius: 8px;
   background: rgba(255, 138, 43, 0.18);
   display: flex;
   align-items: center;
   justify-content: center
}

/* Tier rows */
.el-refer__tiers {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.el-refer__tier {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: rgba(15, 15, 16, 0.9);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 14px;
   padding: 14px 16px;
   transition: background .2s ease, border-color .2s ease
}

.el-refer__tier:hover {
   background: rgba(24, 24, 26, 0.95);
   border-color: rgba(255, 115, 22, 0.35)
}

.el-refer__tier-left {
   display: flex;
   align-items: center;
   gap: 12px
}

.el-refer__tier-icon {
   width: 32px;
   height: 32px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center
}

.el-refer__tier-icon--pioneer {
   background: rgba(255, 115, 22, 0.16)
}

.el-refer__tier-icon--champion {
   background: rgba(255, 138, 43, 0.18)
}

.el-refer__tier-icon--ambassador {
   background: rgba(255, 115, 22, 0.2)
}

.el-refer__tier-icon--legend {
   background: rgba(255, 215, 0, 0.2)
}

.el-refer__tier-name {
   font-weight: 700
}

.el-refer__tier-req {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.55)
}

.el-refer__tier-reward {
   font-weight: 800;
   color: #ff7316
}

.el-refer__waitlist-live {
   margin-top: 14px;
   text-align: center;
   font-size: 14px;
   font-weight: 600;
   line-height: 1.4;
   color: rgba(255, 255, 255, 0.95)
}

.el-refer__waitlist-live-count {
   display: block;
   margin-bottom: 6px;
   font-size: 34px;
   font-weight: 800;
   letter-spacing: 0.02em;
   color: var(--orange);
   text-shadow: 0 0 10px rgba(255, 115, 22, 0.35), 0 0 22px rgba(255, 115, 22, 0.2)
}

.el-refer__waitlist-live-count:not(:empty)::after {
   content: '+'
}

/* Leaderboard rows */
.el-refer__leaderboard {
   display: flex;
   flex-direction: column;
   gap: 10px
}

.el-refer__leader {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 14px;
   padding: 12px 14px;
   transition: background .2s ease, border-color .2s ease
}

.el-refer__leader:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 115, 22, 0.3)
}

.el-refer__leader {
   padding: 16px;
   /* Increased from default/implicit to match cards */
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-radius: 12px;
   margin-bottom: 8px;
   background: var(--bg-card);
   border: 1px solid var(--border)
}

/* Specific styling for #1 */
.el-refer__leader--first {
   background: rgba(255, 115, 22, 0.15) !important;
   border-color: rgba(255, 115, 22, 0.4) !important
}

.el-refer__leader-left {
   display: flex;
   align-items: center;
   gap: 12px
}

.el-refer__leader-rank {
   font-weight: 700;
   color: var(--accent);
   width: 24px
}

.el-refer__leader-name {
   font-weight: 600;
   font-size: 14px
}

.el-refer__leader-refs {
   font-size: 12px;
   color: var(--text-muted)
}

/* Vault bar */
.el-refer__vault {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 16px;
   background: transparent;
   border: none;
   border-radius: 0;
   padding: 0;
   margin-bottom: 28px;
   text-align: center;
   overflow: visible;
   box-shadow: none
}

.el-refer__vault-left {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   padding-top: 12px
}

.el-refer__vault-icon {
   width: 60px;
   height: 60px;
   border-radius: 16px;
   background: rgba(255, 115, 22, 0.18);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   overflow: visible;
   padding: 6px;
   position: relative;
   z-index: 2;
   transform: translateY(0)
}

.el-refer__vault-icon svg {
   width: 24px;
   height: 24px
}

.el-refer__vault-label {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   font-weight: 700
}

.el-refer__vault-amount {
   font-family: var(--font-display);
   font-size: 30px;
   font-weight: 800;
   color: #ff7316
}

.el-refer__vault-desc {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6)
}

.el-refer__cta {
   text-align: center
}

/* ═══════════════════════════════
   FINAL CTA
   ═══════════════════════════════ */
.el-final {
   border-top: none;
   background: linear-gradient(180deg, transparent 0%, rgba(255, 115, 22, 0.03) 100%);
   color: var(--text);
   text-align: center
}

.el-final .el-container {
   text-align: center
}

.el-final__status {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 999px;
   padding: 8px 14px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.65);
   margin-bottom: 16px
}

.el-final__headline {
   font-family: var(--font-display);
   font-size: 36px;
   font-weight: 800;
   letter-spacing: -0.02em;
   margin: 0 auto 12px;
   max-width: 900px
}

.el-final__sub {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.6);
   margin: 0 0 20px
}

/* ═══════════════════════════════
   FOUNDING CTA
   ═══════════════════════════════ */
.el-founding-cta__inner {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 36px;
   text-align: center;
   max-width: 900px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 14px;
   align-items: center
}

.el-founding-cta__title {
   font-family: var(--font-display);
   font-size: 36px;
   font-weight: 800;
   letter-spacing: -0.02em;
   margin: 0
}

.el-founding-cta__desc {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.6);
   margin: 0;
   max-width: 640px
}

/* ═══════════════════════════════
   FAQ
   ═══════════════════════════════ */
.el-faq__title {
   font-family: var(--font-display);
   font-size: 44px;
   font-weight: 800;
   letter-spacing: -0.02em;
   text-align: center;
   margin: 0 0 28px
}

.el-faq__grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 18px
}

.el-faq__item {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 18px;
   padding: 20px;
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.el-faq__item:hover {
   transform: translateY(-3px);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
   border-color: var(--border-hover)
}

.el-faq__q {
   font-family: var(--font-body);
   font-size: 16px;
   font-weight: 700;
   margin: 0 0 8px
}

.el-faq__a {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6);
   margin: 0
}

/* ═══════════════════════════════
   MODAL
   ═══════════════════════════════ */
.el-modal-open {
   overflow: hidden
}

.el-modal {
   position: fixed;
   inset: 0;
   z-index: 5000;
   display: none;
   align-items: center;
   justify-content: center
}

.el-modal.is-open {
   display: flex
}

.el-modal .el-modal__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.82);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   opacity: 0;
   transition: opacity 200ms ease
}

.el-modal.is-open .el-modal__backdrop {
   opacity: 1
}

.el-modal .el-modal__panel {
   position: relative;
   width: min(520px, calc(100vw - 32px));
   border-radius: 20px;
   padding: 40px;
   background: #161618;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-top: 2px solid var(--orange);
   box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
   color: #f5f5f5 !important;
   font-family: var(--font-body);
   -webkit-font-smoothing: antialiased;
   opacity: 0;
   transform: translateY(12px);
   transition: opacity 200ms ease, transform 250ms cubic-bezier(0.2, 0.9, 0.3, 1)
}

.el-modal.is-open .el-modal__panel {
   opacity: 1;
   transform: translateY(0)
}

.el-modal .el-modal__close {
   position: absolute;
   right: 16px;
   top: 16px;
   width: 44px;
   /* Best practice: min 44px */
   height: 44px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(255, 255, 255, 0.04);
   color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   transition: background 150ms ease, color 150ms ease
}

.el-modal .el-modal__close:hover {
   background: rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.8)
}

.el-modal .el-modal__proof {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 0 0 24px 0
}

.el-modal .el-modal__avatars {
   display: flex
}

.el-modal .el-modal__avatars img {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 2px solid #161618;
   margin: 0 -8px 0 0;
   object-fit: cover
}

.el-modal .el-modal__avatars img:last-child {
   margin-right: 0
}

.el-modal .el-modal__proof-text {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.45);
   font-weight: 500
}

.el-modal .el-modal__title {
   font-family: var(--font-display);
   font-size: 36px;
   font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1.1;
   margin: 0 0 10px 0;
   color: #fff !important
}

.el-modal .el-modal__subtitle {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.72) !important;
   line-height: 1.5;
   margin: 0 0 28px 0
}

.el-modal .el-modal__form {
   display: flex;
   flex-direction: column;
   gap: 16px
}

.el-modal .el-modal__field {
   display: flex;
   flex-direction: column;
   gap: 6px
}

.el-modal .el-modal__label {
   font-size: 13px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.55);
   text-transform: uppercase;
   letter-spacing: 0.04em
}

.el-modal .el-modal__optional {
   font-weight: 400;
   text-transform: none;
   letter-spacing: 0;
   color: rgba(255, 255, 255, 0.3)
}

.el-modal .el-modal__input {
   height: 48px;
   border-radius: 10px;
   padding: 0 14px;
   font-size: 15px;
   font-family: var(--font-body);
   color: rgba(255, 255, 255, 0.9);
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.10);
   outline: none;
   transition: border-color 150ms ease, box-shadow 150ms ease
}

.el-modal .el-modal__input::placeholder {
   color: rgba(255, 255, 255, 0.25)
}

.el-modal .el-modal__input:focus {
   border-color: var(--orange);
   box-shadow: 0 0 0 3px rgba(255, 115, 22, 0.15)
}

.el-modal .el-modal__input[aria-invalid="true"] {
   border-color: var(--red);
   box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15)
}

.el-modal .el-modal__submit {
   margin: 4px 0 0 0;
   height: 48px;
   border-radius: 10px;
   border: none;
   cursor: pointer;
   font-size: 15px;
   font-weight: 700;
   font-family: var(--font-body);
   color: #fff;
   background: var(--orange);
   padding: 0;
   transition: transform 100ms ease, box-shadow 150ms ease, background 150ms ease
}

.el-modal .el-modal__submit:hover {
   background: #e86610;
   transform: translateY(-1px);
   box-shadow: 0 8px 24px rgba(255, 115, 22, 0.25)
}

.el-modal .el-modal__submit:active {
   transform: translateY(0)
}

.el-modal .el-modal__submit:disabled {
   opacity: 0.6;
   cursor: default;
   transform: none;
   box-shadow: none
}

.el-modal .el-modal__status {
   min-height: 16px;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.5);
   text-align: center
}

.el-modal .el-modal__status:empty {
   display: none
}

.el-modal .el-modal__status.is-error {
   color: var(--red)
}

.el-modal .el-modal__status.is-success {
   color: var(--green)
}

.el-modal .el-modal__footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 24px 0 0 0;
   padding: 16px 0 0 0;
   border-top: 1px solid rgba(255, 255, 255, 0.06)
}

.el-modal .el-modal__trust {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.3)
}

.el-modal .el-modal__spots {
   font-size: 12px;
   font-weight: 600;
   color: var(--orange)
}

.el-modal .el-modal__result {
   margin: 24px 0 0 0;
   padding: 0
}

.el-modal .el-modal__share-btn {
   width: 100%;
   margin: 12px 0 0 0
}

.el-modal .el-modal__result .el-modal__label {
   margin: 0 0 8px 0
}

.el-modal .el-modal__result-row {
   display: flex;
   gap: 8px
}

.el-modal .el-modal__result-link {
   flex: 1;
   height: 44px;
   border-radius: 8px;
   padding: 0 12px;
   font-size: 14px;
   font-family: var(--font-body);
   color: rgba(255, 255, 255, 0.85);
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.08);
   outline: none;
   cursor: text
}

.el-modal .el-modal__copy-btn {
   height: 44px;
   padding: 0 18px;
   border-radius: 8px;
   border: none;
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
   font-family: var(--font-body);
   color: #fff;
   background: var(--orange);
   white-space: nowrap;
   transition: background 150ms ease
}

.el-modal .el-modal__copy-btn:hover {
   background: #e86610
}

.el-modal .el-modal__copied {
   margin: 8px 0 0 0;
   font-size: 13px;
   color: var(--green);
   display: none
}

/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */
@media (max-width:1100px) {
   .el-community__value-amount {
      font-size: 60px
   }

   .el-community__subcards {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}

@media (max-width:1024px) {
   :root {
      --section-pad: 96px
   }

   .el-hero__inner {
      grid-template-columns: 1fr;
      gap: 32px
   }

   .el-hero__right {
      order: 2
   }

   .el-hero__left {
      order: 1
   }

   .el-hero__device-wrap {
      transform: translateX(20px) scale(.6);
      margin: -80px 0 0
   }

   .el-hero__right::before {
      inset: -110px -80px
   }

   .el-earn__inner {
      grid-template-columns: 1fr;
      gap: 40px
   }

   .el-compare__grid {
      flex-direction: column
   }

   .el-compare__vs {
      order: 0
   }

   .el-refer__columns {
      flex-direction: column
   }

   .el-faq__grid {
      grid-template-columns: 1fr
   }
}

@media (max-width:900px) {

   /* 900px: Connector adjustments only */

   .el-how__connector {
      width: auto;
      height: 30px;
      flex: 0 0 auto;
      position: relative
   }

   .el-how__line {
      left: 50%;
      right: auto;
      top: 0;
      width: 3px;
      height: 100%;
      transform: none
   }

   .el-how__arrow {
      left: 50%;
      top: 0;
      margin-left: -8px;
      margin-top: 0
   }

   .el-how__arrow::after {
      transform: rotate(135deg)
   }

   .el-how__connector.is-animating .el-how__arrow {
      animation: el-arrow-travel-y var(--arrow-travel, 1200ms) ease-in-out forwards
   }
}

@media (max-width:1024px) {
   :root {
      --section-pad: 56px
   }

   .eat-landing .el-container {
      padding-left: 16px !important;
      padding-right: 16px !important
   }

   /* ═══ NAV (tablet & down) ═══ */
   .el-nav {
      padding: 14px 0
   }

   .el-nav__inner {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px
   }

   .el-nav__links {
      display: none
   }

   .el-nav__cart-wrap {
      display: none
   }

   .el-nav__menu-toggle {
      display: inline-flex;
      margin-left: auto
   }

   .el-nav.is-menu-open .el-nav__mobile-menu {
      display: grid;
      gap: 4px
   }

   /* ═══ HERO MOBILE ═══ */
   .el-hero {
      padding: 16px 0 48px
   }

   .el-hero__title {
      font-size: 32px;
      line-height: 1.1;
      margin-bottom: 24px;
      text-align: left
         /* Left align title */
   }

   .el-hero__left {
      text-align: left;
      padding-right: 16px
         /* Add right padding to prevent text hitting edge */
   }

   .el-hero__avatars {
      justify-content: flex-start;
      /* Left align avatars */
      margin-bottom: 20px
   }

   .el-hero__props {
      gap: 10px;
      /* Tighter tracing */
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 24px;
      /* Reduced from 32px to pull button up */
      padding: 0
   }

   .el-hero__prop {
      font-size: 14px;
      padding: 0;
      width: auto;
      justify-content: flex-start;
      /* Left align prop text */
      text-align: left;
      background: none;
      display: flex;
      align-items: baseline
         /* Optically align checkmark with text */
   }

   .el-hero__prop-icon {
      width: 16px;
      /* Smaller bullets */
      height: 16px;
      font-size: 10px;
      margin-right: 10px;
      transform: translateY(1px)
   }

   .el-btn--primary {
      width: auto;
      /* Not full width */
      display: inline-flex;
      min-width: 160px;
      /* Minimum width for presence */
      min-height: 48px;
      /* Touch safe */
      font-size: 15px;
      justify-content: center;
      padding: 0 32px;
      /* Generous internal padding */
      border-radius: 100px;
      margin-top: 4px;
      /* Shift button up */
      margin-right: auto
         /* Ensure it stays left if container is flex */
   }

   .el-hero__sub {
      font-size: 13px;
      text-align: left;
      /* Left align subtext */
      margin-top: 20px;
      line-height: 1.4;
      padding: 0;
      opacity: 0.7;
      max-width: 90%
         /* Prevent awkward single word orphans */
   }

   .el-hero__partners {
      justify-content: flex-start;
      /* Left align partners */
      font-size: 12px;
      gap: 12px;
      margin-top: 32px;
      opacity: 0.6
   }

   .el-hero__ghost-card {
      display: none
   }

   /* Hide full iPhone on mobile, show standalone card */
   .el-hero__right {
      display: none
   }

   .el-hero__mobile-card {
      display: block
   }

   .el-meals-counter {
      left: 12px;
      bottom: 12px;
      padding: 8px 14px;
      font-size: 12px;
      border-radius: 12px
   }

   /* ═══ MOBILE ALIGNMENT ═══ */
   .el-section-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin: 0 auto 10px
   }

   .el-how__desc,
   .el-compare__desc,
   .el-earn__desc,
   .el-community__sub,
   .el-mission__sub,
   .el-mission__text,
   .el-refer__subtitle,
   .el-final__sub {
      text-align: center;
      margin-left: auto;
      margin-right: auto
   }

   .el-earn__text {
      text-align: center;
      align-items: center
   }

   .el-community__card--value {
      text-align: center
   }

   .el-community__card-top {
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap
   }

   .el-community__value-foot {
      justify-content: center
   }

   .el-community__subcards,
   .el-community__subcard {
      text-align: center
   }

   .el-mission__progress-info {
      text-align: center
   }

   .el-mission__bar-hdr {
      flex-direction: column;
      align-items: center;
      gap: 4px;
      text-align: center
   }

   .el-how__header,
   .el-compare__header,
   .el-community__header,
   .el-benefits__header,
   .el-refer__header {
      margin-bottom: 24px
   }

   /* ═══ MOBILE BEST PRACTICES (Global) ═══ */
   body {
      -webkit-text-size-adjust: 100%;
   }

   .el-btn,
   button,
   a {
      min-height: 48px;
      /* Touch target size */
      touch-action: manipulation;
   }

   /* Bump small fonts for readability */
   .el-hero__sub,
   .el-hero__partners,
   .el-hero__avatar-count,
   .el-hero__prop {
      font-size: 13px !important;
   }

   .el-section-label {
      font-size: 13px
   }

   /* ═══ HOW IT WORKS MOBILE (Redesign: 2x2 Snake Grid) ═══ */
   .el-how__title {
      font-size: 28px;
      text-align: left;
      margin-bottom: 24px;
      line-height: 1.1;
      padding-left: 4px
   }

   .el-how__desc {
      display: none !important
   }

   .el-how__steps {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 12px;
      padding: 0;
      width: 100%;
      flex-direction: row !important
   }

   .el-how__card {
      padding: 20px 16px;
      text-align: left;
      align-items: flex-start;
      border: 1px solid var(--border);
      background: var(--bg-card);
      box-shadow: none;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 140px;
      position: relative;
      margin: 0 !important
   }

   .el-how__card-num {
      width: 32px;
      height: 32px;
      font-size: 14px;
      margin-bottom: 8px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%
   }

   .el-how__card-top {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px
   }

   .el-how__eyebrow {
      font-size: 11px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 600
   }

   .el-how__card-title {
      font-size: 15px;
      margin-bottom: 0;
      color: var(--text);
      line-height: 1.3;
      font-weight: 600
   }

   /* STRICTLY HIDE SUBTEXT */
   .el-how__card-desc {
      display: none !important
   }

   .el-how__connector {
      display: none !important
   }

   /* Connectors removed - clean card layout */

   /* Cards follow natural DOM order: 1(TL), 2(TR), 3(BL), 4(BR) */

   /* ═══ COMPARE SECTION MOBILE - Side-by-Side Redesign ═══ */
   .el-compare {
      padding: 48px 0
   }

   .el-compare__header {
      margin-bottom: 24px;
      text-align: center
   }

   .el-compare__title {
      font-size: 24px;
      line-height: 1.2;
      margin-bottom: 8px
   }

   .el-compare__desc {
      font-size: 13px;
      color: var(--text-muted);
      max-width: 280px;
      margin: 0 auto
   }

   /* Side-by-side grid */
   .el-compare__grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px;
      padding: 0;
      align-items: stretch
   }

   /* Hide VS badge - layout speaks for itself */
   .el-compare__vs {
      display: none
   }

   .el-compare__card {
      width: 100%;
      padding: 16px 12px;
      text-align: left;
      margin: 0;
      border-radius: 12px;
      display: flex;
      flex-direction: column
   }

   /* Traditional card - muted */
   .el-compare__card:not(.el-compare__card--eat) {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      opacity: 0.8
   }

   /* EAT card - prominent */
   .el-compare__card--eat {
      order: 0 !important;
      background: linear-gradient(135deg, var(--accent) 0%, #ff8c42 100%);
      border: none
   }

   .el-compare__card-badge {
      font-size: 9px;
      padding: 3px 8px;
      margin-bottom: 8px;
      letter-spacing: 0.1em
   }

   .el-compare__card-label {
      font-size: 14px;
      margin-bottom: 12px;
      font-weight: 700;
      line-height: 1.3
   }

   .el-compare__card-list {
      display: flex;
      flex-direction: column;
      gap: 6px
   }

   .el-compare__card-item {
      font-size: 12px;
      gap: 6px;
      line-height: 1.4;
      align-items: flex-start
   }

   .el-compare__icon--check,
   .el-compare__icon--x {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      margin-top: 2px
   }

   /* ═══ EARN SECTION MOBILE - Compact Horizontal ═══ */
   .el-earn {
      padding: 48px 0
   }

   .el-earn__inner {
      gap: 24px
   }

   .el-earn__title {
      font-size: 24px;
      text-align: center;
      margin-bottom: 8px;
      line-height: 1.2
   }

   .el-earn__desc {
      font-size: 13px;
      text-align: center;
      color: var(--text-muted);
      margin-bottom: 8px
   }

   /* Hide connectors on mobile */
   .el-earn__connector {
      display: none
   }

   .el-earn__features {
      margin-top: 20px;
      grid-template-columns: 1fr;
      gap: 12px
   }

   /* Horizontal card: icon left, text right */
   .el-earn__feature {
      padding: 16px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 12px;
      text-align: left
   }

   .el-earn__feature-icon {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      margin-bottom: 0
   }

   .el-earn__bonus {
      font-size: 10px;
      padding: 2px 6px
   }

   .el-earn__feature-title {
      font-size: 14px;
      margin-bottom: 4px;
      font-weight: 600
   }

   .el-earn__feature-desc {
      font-size: 12px;
      line-height: 1.4;
      color: var(--text-muted)
   }

   /* ═══ COMMUNITY SECTION MOBILE - Compact Stats ═══ */
   .el-community {
      padding: 48px 0
   }

   .el-community__header {
      margin-bottom: 20px;
      text-align: center
   }

   .el-community__title {
      font-size: 22px;
      line-height: 1.2;
      margin-bottom: 8px
   }

   .el-community__sub {
      font-size: 13px;
      color: var(--text-muted)
   }

   .el-community__card {
      padding: 20px 16px;
      border-radius: 16px
   }

   .el-community__value-label {
      font-size: 11px
   }

   .el-community__value-amount {
      font-size: 32px;
      margin-bottom: 4px
   }

   .el-community__value-growth {
      font-size: 12px
   }

   .el-community__value-foot {
      margin-top: 12px;
      gap: 6px
   }

   .el-community__value-chip {
      font-size: 10px;
      padding: 4px 8px
   }

   /* 2-column subcards grid */
   .el-community__subcards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 16px
   }

   .el-community__subcard {
      padding: 12px;
      text-align: center
   }

   .el-community__stat-number {
      font-size: 20px
   }

   .el-community__card-eyebrow {
      font-size: 9px
   }

   .el-community__stat-note {
      font-size: 10px
   }

   /* Hide decorative elements on mobile */
   .el-community__value-orbit,
   .el-community__chart-wrap {
      display: none
   }

   /* ═══ MISSION SECTION MOBILE - Compact Impact ═══ */
   .el-mission {
      padding: 48px 0
   }

   .el-mission__grid {
      grid-template-columns: 1fr;
      gap: 24px;
      text-align: center
   }

   .el-mission__intro {
      display: flex;
      flex-direction: column;
      align-items: center
   }

   .el-mission__big {
      font-size: 28px;
      margin-bottom: 8px;
      line-height: 1.1
   }

   .el-mission__sub {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 8px
   }

   .el-mission__text {
      font-size: 12px;
      color: var(--text-muted);
      display: none
         /* Hide on mobile for brevity */
   }

   /* 2-column stats grid */
   .el-mission__stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
   }

   .el-mission__stat-card {
      padding: 16px 12px;
      text-align: center;
      background: var(--bg-card);
      border-radius: 12px
   }

   .el-mission__stat-num {
      font-size: 20px;
      margin-bottom: 2px
   }

   .el-mission__stat-desc {
      font-size: 11px;
      color: var(--text-muted)
   }

   .el-mission__progress {
      padding: 0;
      background: transparent;
      margin-top: 12px
   }

   .el-mission__bar {
      padding: 12px
   }

   .el-mission__bar-hdr {
      font-size: 11px;
      margin-bottom: 8px
   }

   .el-mission__bar-fill {
      height: 8px;
      border-radius: 4px
   }

   /* ═══ BENEFITS SECTION MOBILE - 2-Column Compact ═══ */
   .el-benefits {
      padding: 48px 0
   }

   .el-benefits__header {
      margin-bottom: 20px;
      text-align: center
   }

   .el-benefits__title {
      font-size: 22px;
      margin-bottom: 8px
   }

   .el-benefits__sub {
      font-size: 13px;
      color: var(--text-muted)
   }

   /* 2-column grid */
   .el-benefits__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
   }

   .el-benefits__card {
      max-width: 100%;
      padding: 14px 12px;
      text-align: left;
      margin: 0;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px
   }

   .el-benefits__card-icon {
      width: 28px;
      height: 28px;
      /* Inherits font-size: 0 and counter logic from desktop base styles */
   }

   /* No need to redeclare ::before, it inherits from desktop */

   .el-benefits__card-title {
      font-size: 13px;
      margin-bottom: 0;
      font-weight: 600
   }

   .el-benefits__card-desc {
      font-size: 11px;
      line-height: 1.4;
      color: var(--text-muted);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
   }

   /* ═══ REFER SECTION MOBILE - Reordered & Visible Steps ═══ */
   .el-refer {
      padding: 48px 0
   }

   /* Make container flex to reorder children */
   .el-refer .el-container {
      display: flex;
      flex-direction: column
   }

   .el-refer__header {
      margin-bottom: 20px;
      text-align: center;
      order: 1
   }

   .el-refer__steps {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 32px;
      order: 2
   }

   .el-refer__columns {
      order: 3
   }

   .el-refer__vault {
      order: 4;
      padding: 16px;
      text-align: center;
      border-radius: 12px;
      margin-top: 20px
   }

   /* CTA moved to bottom */
   .el-refer__cta {
      order: 6;
      margin-top: 24px;
      margin-bottom: 0
   }

   .el-refer__title {
      font-size: 22px;
      margin-bottom: 8px
   }

   .el-refer__sub {
      font-size: 13px;
      color: var(--text-muted)
   }

   .el-refer__step-card {
      padding: 16px;
      /* Force override of any desktop/theme styles including specific :first-of-type rules */
      background: var(--bg-card) !important;
      border: 1px solid var(--border) !important;
      border-radius: 12px !important;
      display: flex;
      align-items: center;
      gap: 12px;
      text-align: left;
      width: 100%;
      min-height: 72px;
      /* Ensure uniform height */
      margin-bottom: 0;
      /* Reset desktop shadows/colors */
      box-shadow: none !important;
      color: var(--text-main) !important
   }

   /* Kill desktop pseudo-element borders/glows */
   .el-refer__steps .el-refer__step-card::before,
   .el-refer__steps .el-refer__step-card::after {
      display: none !important;
      content: none !important
   }

   /* Restore First Card Orange Style */
   .el-refer__steps .el-refer__step-card:first-of-type {
      background: linear-gradient(135deg, var(--accent) 0%, #ff8c42 100%) !important;
      border: none !important;
      box-shadow: 0 8px 20px rgba(255, 115, 22, 0.3) !important;
      color: #ffffff !important
   }

   .el-refer__steps .el-refer__step-card:first-of-type .el-refer__step-title {
      color: #ffffff !important;
      font-weight: 700 !important
   }

   .el-refer__steps .el-refer__step-card:first-of-type .el-refer__step-desc {
      color: rgba(255, 255, 255, 0.9) !important
   }

   .el-refer__steps .el-refer__step-card:first-of-type .el-refer__step-num {
      background: rgba(255, 255, 255, 0.25) !important;
      color: #ffffff !important
   }

   .el-refer__step-num {
      width: 36px;
      height: 36px;
      background: rgba(255, 115, 22, 0.1) !important;
      color: var(--accent) !important;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      flex-shrink: 0
   }

   .el-refer__step-icon {
      display: none
   }

   .el-refer__step-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 2px
   }

   .el-refer__step-desc {
      font-size: 12px;
      color: var(--text-muted)
   }

   .el-refer__step-arrow {
      display: none
   }

   /* Horizontal scroll for tiers */
   .el-refer__tiers {
      display: flex;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 12px;
      margin: 0 -16px 20px;
      padding-left: 16px;
      padding-right: 16px;
      gap: 10px;
      scroll-snap-type: x mandatory
   }

   .el-refer__tier {
      min-width: 180px;
      flex-shrink: 0;
      scroll-snap-align: start;
      padding: 16px;
      border-radius: 12px
   }

   .el-refer__tier-name {
      font-size: 13px
   }

   .el-refer__tier-reward {
      font-size: 18px
   }

   .el-refer__tier-desc {
      font-size: 11px
   }

   .el-refer__waitlist-live {
      margin-top: 10px;
      font-size: 13px;
      line-height: 1.35;
      padding: 0 8px
   }

   .el-refer__waitlist-live-count {
      margin-bottom: 4px;
      font-size: 24px;
      text-shadow: 0 0 8px rgba(255, 115, 22, 0.3), 0 0 16px rgba(255, 115, 22, 0.18)
   }

   /* Show only top 3 leaderboard entries */
   .el-refer__leader:nth-child(n+4) {
      display: none
   }

   .el-refer__vault-amount {
      font-size: 24px
   }

   /* ═══ FINAL CTA MOBILE - Compact ═══ */
   .el-final {
      padding: 48px 0
   }

   .el-final__status {
      font-size: 11px;
      margin-bottom: 12px
   }

   .el-final__headline {
      font-size: 20px;
      text-align: center;
      line-height: 1.3;
      margin-bottom: 8px
   }

   .el-final__sub {
      font-size: 13px;
      text-align: center;
      color: var(--text-muted);
      margin-bottom: 16px
   }

   .el-final .el-btn {
      width: 100%;
      justify-content: center
   }

   /* ═══ FOUNDING CTA MOBILE - Compact ═══ */
   .el-founding-cta {
      padding: 0
   }

   .el-founding-cta__inner {
      padding: 24px 16px;
      border-radius: 16px;
      text-align: center
   }

   .el-founding-cta .el-badge {
      font-size: 10px;
      margin-bottom: 12px
   }

   .el-founding-cta__title {
      font-size: 20px;
      margin-bottom: 8px
   }

   .el-founding-cta__desc {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 16px
   }

   .el-founding-cta .el-btn {
      width: 100%;
      justify-content: center
   }

   /* ═══ FAQ MOBILE - 2-Column Compact ═══ */
   .el-faq {
      padding: 48px 0
   }

   .el-faq__title {
      font-size: 22px;
      text-align: center;
      margin-bottom: 20px
   }

   /* 2-column FAQ grid */
   .el-faq__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
   }

   .el-faq__item {
      padding: 14px 12px;
      border-radius: 12px
   }

   .el-faq__q {
      font-size: 12px;
      margin-bottom: 6px;
      font-weight: 600
   }

   .el-faq__a {
      font-size: 11px;
      line-height: 1.4;
      color: var(--text-muted)
   }
}

@media (max-width:640px) {
   :root {
      --section-pad: 48px
   }

   /* ═══ HERO 640px ═══ */
   .el-hero__title {
      font-size: 28px
   }

   .el-hero__partners {
      flex-wrap: wrap;
      gap: 4px
   }

   .el-hero__device-wrap {
      transform: translateX(0) scale(.42);
      margin: -110px 0 -50px
   }

   .el-hero__right::before {
      inset: -120px -60px;
      filter: blur(60px)
   }

   /* ═══ SECTION TITLES 640px ═══ */
   .el-how__title,
   .el-compare__title,
   .el-earn__title,
   .el-community__title,
   .el-benefits__title,
   .el-faq__title {
      font-size: 26px
   }

   .el-community__value-amount {
      font-size: 36px
   }

   .el-community__nowrap {
      white-space: normal
   }

   .el-community__subcards {
      grid-template-columns: 1fr
   }

   .el-mission__big {
      font-size: 28px
   }

   .el-final__headline,
   .el-founding-cta__title,
   .el-refer__title {
      font-size: 22px
   }

   /* ═══ CARDS 640px ═══ */
   .el-how__card,
   .el-compare__card,
   .el-earn__feature,
   .el-benefits__card,
   .el-refer__step-card,
   .el-refer__vault,
   .el-mission__stat-card,
   .el-mission__progress,
   .el-faq__item {
      padding: 16px
   }

   .el-community__card {
      padding: 20px 16px
   }

   /* ═══ TYPOGRAPHY 640px ═══ */
   .el-how__card-title,
   .el-compare__card-title,
   .el-earn__feature-title,
   .el-benefits__card-title {
      font-size: 16px
   }

   .el-how__card-desc,
   .el-compare__card-desc,
   .el-earn__feature-desc,
   .el-benefits__card-desc,
   .el-faq__a {
      font-size: 13px
   }

   /* ═══ REFER SECTION 640px ═══ */
   .el-refer__tier {
      min-width: 180px
   }

   .el-refer__tier-icon {
      width: 36px;
      height: 36px
   }

   .el-refer__tier-name {
      font-size: 14px
   }

   .el-refer__leaderboard {
      padding: 16px
   }

   .el-refer__leader {
      padding: 10px 0
   }
}

@media (max-width:480px) {
   :root {
      --section-pad: 40px
   }

   .eat-landing .el-container {
      padding-left: 14px !important;
      padding-right: 14px !important
   }

   /* ═══ HERO 480px ═══ */
   .el-hero {
      padding: 12px 0 40px
   }

   .el-hero__title {
      font-size: 24px
   }

   .el-hero__avatars {
      margin-bottom: 12px
   }

   .el-hero__avatar {
      width: 28px;
      height: 28px
   }

   .el-hero__avatar-count {
      font-size: 11px
   }

   .el-hero__prop {
      padding: 8px 12px;
      font-size: 13px
   }

   .el-hero__prop-icon {
      width: 20px;
      height: 20px
   }

   .el-btn--primary {
      min-height: 48px;
      font-size: 15px;
      padding: 14px 20px
   }

   .el-hero__sub {
      font-size: 11px
   }

   .el-hero__device-wrap {
      transform: scale(.36);
      margin: -120px 0 -60px
   }

   .el-hero__right::before {
      inset: -100px -50px;
      filter: blur(50px);
      opacity: 0.7
   }

   .el-meals-counter {
      left: 10px;
      bottom: 10px;
      padding: 6px 12px;
      font-size: 11px
   }

   /* ═══ SECTION TITLES 480px (Improved readability) ═══ */
   .el-how__title,
   .el-compare__title,
   .el-earn__title,
   .el-community__title,
   .el-benefits__title,
   .el-faq__title {
      font-size: 24px
   }

   .el-mission__big {
      font-size: 28px
   }

   .el-final__headline,
   .el-founding-cta__title,
   .el-refer__title {
      font-size: 22px
   }

   /* ═══ COMMUNITY 480px ═══ */
   .el-community__value-amount {
      font-size: 32px
   }

   .el-community__stat-number {
      font-size: 24px
   }

   .el-community__chart-wrap {
      display: none
   }

   /* ═══ CARDS 480px ═══ */
   .el-how__card,
   .el-compare__card,
   .el-earn__feature,
   .el-benefits__card,
   .el-refer__step-card,
   .el-refer__vault,
   .el-mission__stat-card,
   .el-mission__progress,
   .el-faq__item,
   .el-community__card {
      padding: 14px
   }

   .el-founding-cta__inner {
      padding: 24px 16px
   }

   /* ═══ REFER 480px ═══ */
   .el-refer__tier {
      min-width: 160px
   }

   .el-refer__columns {
      gap: 20px
   }

   /* ═══ MODAL 480px ═══ */
   .el-modal .el-modal__panel {
      padding: 24px 16px;
      border-radius: 14px;
      margin: 12px
   }

   .el-modal .el-modal__title {
      font-size: 24px
   }

   .el-modal .el-modal__subtitle {
      font-size: 13px;
      margin: 0 0 16px 0
   }

   .el-modal .el-modal__field {
      margin-bottom: 14px
   }

   .el-modal .el-modal__input {
      padding: 14px 16px;
      font-size: 15px
   }

   .el-modal .el-modal__submit {
      min-height: 48px;
      font-size: 15px
   }

   .el-modal .el-modal__footer {
      flex-direction: column;
      gap: 6px;
      text-align: center;
      font-size: 12px
   }

   .el-modal .el-modal__result-row {
      flex-direction: column;
      gap: 8px
   }
}

/* ═══ VERY SMALL PHONES (iPhone SE, etc) ═══ */
@media (max-width:375px) {
   .el-hero__title {
      font-size: 22px
   }

   .el-hero__prop {
      padding: 6px 10px;
      font-size: 12px
   }

   .el-hero__device-wrap {
      transform: scale(.32);
      margin: -130px 0 -70px
   }

   .el-how__title,
   .el-compare__title,
   .el-earn__title,
   .el-community__title,
   .el-benefits__title,
   .el-faq__title {
      font-size: 20px
   }

   .el-community__value-amount {
      font-size: 28px
   }

   .el-mission__big {
      font-size: 22px
   }

   .el-final__headline,
   .el-founding-cta__title,
   .el-refer__title {
      font-size: 18px
   }

   .el-refer__tier {
      min-width: 140px
   }
}

/* ───── Reduced motion ───── */
@media (prefers-reduced-motion:reduce) {
   .el-reveal {
      opacity: 1;
      transform: none;
      transition: none
   }

   .el-btn--primary {
      animation: none
   }

   .el-compare__card--eat {
      animation: none
   }

   .el-mission__bar-fill::after,
   .el-benefits__progress-fill::after {
      animation: none
   }

   .el-modal .el-modal__panel,
   .el-modal .el-modal__backdrop,
   .el-modal .el-modal__submit {
      transition: none
   }

   .el-how__card,
   .el-compare__card,
   .el-benefits__card,
   .el-faq__item,
   .el-refer__step-card,
   .el-mission__stat-card,
   .el-earn__feature {
      transition: none
   }

   .el-community__value-orbit,
   .el-community__pulse-dot {
      animation: none
   }
}

/* ───── Touch devices: disable hover lifts ───── */
@media (hover:none) {

   .el-how__card:hover,
   .el-compare__card:hover,
   .el-benefits__card:hover,
   .el-faq__item:hover,
   .el-refer__step-card:hover,
   .el-mission__stat-card:hover,
   .el-earn__feature:hover {
      transform: none;
      box-shadow: none
   }

   .el-community__card:hover {
      transform: none;
      box-shadow: none
   }
}

/* ───── Cart drawer ───── */
.cart-open {
   overflow: hidden;
}

.cart-drawer {
   position: fixed;
   inset: 0;
   z-index: 2000;
   pointer-events: none;
}

.cart-drawer__overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.55);
   opacity: 0;
   transition: opacity 0.25s ease;
}

.cart-drawer__panel {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   max-height: 100dvh;
   width: min(420px, 92vw);
   box-sizing: border-box;
   background: #050505;
   border-left: 1px solid rgba(255, 255, 255, 0.12);
   transform: translateX(100%);
   transition: transform 0.3s ease;
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 22px 20px max(18px, env(safe-area-inset-bottom));
   box-shadow: -20px 0 40px rgba(0, 0, 0, 0.4);
   overflow: hidden;
}

.cart-drawer.is-open {
   pointer-events: auto;
}

.cart-drawer.is-open .cart-drawer__overlay {
   opacity: 1;
}

.cart-drawer.is-open .cart-drawer__panel {
   transform: translateX(0);
}

.cart-drawer__top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
}

.cart-drawer__eyebrow {
   font-size: 11px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.5);
   margin: 0 0 6px;
   font-weight: 700;
}

.cart-drawer__title {
   margin: 0;
   font-size: 20px;
   font-weight: 800;
}

.cart-drawer__close {
   border: none;
   background: rgba(255, 255, 255, 0.08);
   color: var(--text);
   width: 36px;
   height: 36px;
   border-radius: 10px;
   cursor: pointer;
   font-size: 20px;
   line-height: 1;
}

.cart-drawer__meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 13px;
   color: var(--muted);
}

.cart-drawer__status {
   color: var(--accent);
   font-weight: 600;
}

.cart-drawer__content {
   flex: 1 1 auto;
   min-height: 0;
   overflow: auto;
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding: 4px 2px;
}

.cart-drawer__empty {
   text-align: center;
   color: var(--muted);
   padding: 40px 16px;
}

.cart-item {
   display: grid;
   grid-template-columns: 64px 1fr auto;
   gap: 12px;
   align-items: center;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 14px;
   padding: 10px;
   background: rgba(255, 255, 255, 0.02);
}

.cart-item__media {
   width: 64px;
   height: 64px;
   border-radius: 12px;
   overflow: hidden;
   background: #0b0b0b;
}

.cart-item__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.cart-item__placeholder {
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(255, 122, 26, 0.2), rgba(0, 0, 0, 0.2));
}

.cart-item__info {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.cart-item__title {
   font-size: 14px;
   font-weight: 700;
}

.cart-item__variant {
   font-size: 12px;
   color: var(--muted);
}

.cart-item__meta {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.6);
}

.cart-item__price {
   font-size: 13px;
   font-weight: 700;
}

.cart-item__aside {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 8px;
}

.cart-item__remove {
   border: 1px solid rgba(255, 255, 255, 0.2);
   background: rgba(255, 255, 255, 0.02);
   color: rgba(255, 255, 255, 0.7);
   font-size: 11px;
   padding: 4px 10px;
   border-radius: 999px;
   cursor: pointer;
   transition: border-color 0.2s ease, color 0.2s ease;
}

.cart-item__remove:hover {
   border-color: rgba(255, 255, 255, 0.4);
   color: var(--text);
}

.cart-item__remove:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

.cart-drawer__footer {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: 12px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   flex-shrink: 0;
}

.cart-drawer__subtotal {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 14px;
   color: var(--muted);
}

.cart-drawer__subtotal strong {
   color: var(--text);
   font-size: 16px;
}

.cart-drawer__checkout {
   border: none;
   background: var(--accent);
   color: #050505;
   font-weight: 700;
   border-radius: 12px;
   padding: 12px 16px;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cart-drawer__checkout:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   box-shadow: none;
}

.cart-drawer__checkout:not(:disabled):hover {
   transform: translateY(-1px);
   box-shadow: 0 10px 24px rgba(255, 122, 26, 0.3);
}