/* ============================================================
   GROZY — design tokens
   ============================================================ */
:root{
  --forest: #0F3D2E;
  --forest-deep: #0A2A20;
  --leaf: #0fa44a;
  --leaf-bright: #4FBE6C;
  --sprout: #C7E86C;
  --cream: #FBF6EC;
  --paper: #FFFDF8;
  --mist: #EAF3E2;
  --charcoal: #17201A;
  --charcoal-soft: rgba(23,32,26,.62);
  --white: #ffffff;

  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --container: 1240px;
  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--font-display); margin:0; font-weight:450; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #866434;
  margin: 0 0 14px;
}
.section-title{
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  color: #000;
  letter-spacing: -.01em;
}

.section-title em {
  color:#0fa44a;
}
.section-sub{
  font-size: 1.08rem;
  color: var(--charcoal-soft);
  max-width: 46ch;
  margin-top: 16px;
  line-height:1.55;
}

.nav__logo img {
    width: 45%;
}

a.nav__logo {
    width: 26%;
}

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

/* ============================================================
   Route progress bar (signature motif)
   ============================================================ */
.route-progress{
  position: fixed; top:0; left:0; right:0; height:4px; z-index: 900;
  pointer-events:none;
}
.route-progress svg{ width:100%; height:100%; display:block; }
.route-progress__track{ stroke: rgba(15,61,46,.12); stroke-width:4; }
.route-progress__fill{ stroke: var(--leaf); stroke-width:4; stroke-dasharray: 100; stroke-dashoffset: 100; transform-origin:0 0; }
.route-progress__scooter{
  position:absolute; top:-9px; left:0%; font-size: 14px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

/* ============================================================
   Navigation
   ============================================================ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 800;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px clamp(20px,5vw,64px) 16px;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), padding .3s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-scrolled{
  padding-top:12px; padding-bottom:12px;
  background: rgba(251,246,236,.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 30px rgba(15,61,46,.06);
}
.nav__logo{
  font-family: var(--font-display); font-size: 1.4rem; font-weight:600;
  color: var(--forest); letter-spacing: .02em;
}
.nav__links{ display:flex; gap: 34px; }
.nav__links a{ font-size:.92rem; font-weight:600; color: var(--charcoal); opacity:.75; position:relative; }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--leaf);
  transition: width .3s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ width:100%; }

.nav__cta{
  font-size:.86rem; font-weight:700; background: #0fa44a; color: var(--cream);
  padding: 11px 22px; border-radius: 100px; transition: transform .3s var(--ease), background .3s;
}
.nav__cta:hover{ background: #866434; transform: translateY(-2px); }

.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:900; }
.nav__burger span{ width:22px; height:2px; background: var(--forest); border-radius:2px; transition: transform .3s, opacity .3s; }

.nav__mobile{
  position: fixed; inset:0; background: var(--forest); z-index:750;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transform: translateY(-100%); transition: transform .5s var(--ease);
}
.nav__mobile.is-open{ transform: translateY(0); }
.nav__mobile a{ color: var(--cream); font-size:1.3rem; font-family: var(--font-display); }
.nav__mobile .nav__cta{ margin-top:10px; background: var(--sprout); color: var(--forest); }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 16px 30px; border-radius: 100px; font-weight:700; font-size: .96rem;
  position: relative; overflow:hidden;
}
.btn span{ position:relative; z-index:2; }
.btn--primary{ background: #0fa44a; color: var(--cream); }
.btn--primary:hover{ background: #866434; }
.btn--ghost{ border: 1.5px solid #0fa44a; color: #0fa44a; }
.btn--ghost:hover{  border: 1.5px solid #866434; color: #866434; }
.btn{ transition: transform .25s var(--ease), background .25s var(--ease); }

.hero__actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 38px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative; min-height: 100vh; display:flex; align-items:center;
  padding: 140px clamp(20px,6vw,80px) 80px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cream) 0%, var(--mist) 100%);
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }
.hero__glow{
  position:absolute; width:900px; height:900px; border-radius:50%; right:-320px; top:-260px;
  background: radial-gradient(circle at center, rgba(63,163,92,.25), transparent 65%);
  filter: blur(10px); z-index:0; pointer-events:none;
}
.hero__content{ position:relative; z-index:2; max-width: 620px; }
.hero__headline{ font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; color: #000; letter-spacing:-.015em; }
.hero__headline .line{ display:block; overflow:hidden; }
.hero__headline em{ font-style: italic; color: #0fa44a; }
.hero__sub{ margin-top: 22px; font-size: 1.15rem; color: var(--charcoal-soft); max-width: 480px; line-height:1.6; }

.hero__stage{
  position:absolute; right: 6%; top:50%; width: 560px; height: 560px;
  transform: translateY(-50%);
  perspective: 1400px; z-index:1;
}
@media(max-width: 1100px){ .hero__stage{ right:-8%; width:460px; height:460px; opacity:.85; } }

/* phone (hero) */
.hero__phone{
  position:absolute; left:50%; top:57%; width: 275px; height: 554px;
  transform: translate(-50%,-50%) rotateY(-18deg) rotateX(6deg);
  transform-style: preserve-3d;
}
.phone__frame{
  width:100%; height:100%; border-radius: 42px; background: linear-gradient(155deg,#1c2620,#0f1512);
  padding: 12px; box-shadow: 0 40px 70px -20px rgba(15,45,32,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  transform-style: preserve-3d;
}
.phone__notch{ width:70px; height:8px; background:#0a0f0c; border-radius:6px; margin: 0 auto 8px; }
.phone__screen{
  width:100%; height: calc(100% - 24px); background: var(--paper); border-radius: 30px; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(15,61,46,.08);
}

.app-screen{ padding: 18px 16px; height:100%; display:flex; flex-direction:column; gap:14px; }
.app-screen__topbar{ display:flex; align-items:center; gap:8px; }
.app-screen__topbar .dot{ width:10px; height:10px; border-radius:50%; background: var(--leaf); }
.app-screen__title{ font-family: var(--font-display); font-weight:600; font-size:1.05rem; color: var(--forest); flex:1; }
.app-screen__cart{ position:relative; font-size:1.1rem; }
.app-screen__cart i{ position:absolute; top:-6px; right:-10px; background:var(--leaf); color:#fff; font-style:normal; font-size:.6rem; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.app-screen__search{ background: var(--mist); border-radius: 12px; padding: 10px 14px; font-size:.78rem; color: var(--charcoal-soft); font-family: var(--font-mono); }
.app-screen__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; flex:1; }
.chip{ background: var(--white); border-radius: 14px; padding: 12px 10px; display:flex; flex-direction:column; gap:4px; font-size:1.3rem; box-shadow: 0 6px 16px rgba(15,61,46,.06); }
.chip span{ font-size:.72rem; font-weight:700; color: var(--charcoal); font-family: var(--font-body); }
.chip b{ font-size:.7rem; color: var(--leaf); font-family: var(--font-mono); font-weight:500; }
.app-screen__btn{ background: var(--forest); color: var(--cream); border:none; padding: 13px; border-radius: 100px; font-weight:700; font-size:.85rem; }

/* floating grocery objects */
.float-obj{
  position:absolute; left:50%; top:50%; font-size: 2.6rem;
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
  filter: drop-shadow(0 14px 18px rgba(15,61,46,.22));
  animation: floaty var(--d,10s) ease-in-out infinite;
  display: none;
}
@keyframes floaty{
  0%,100%{ transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(-4deg); }
  50%{ transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 22px)) rotate(4deg); }
}

.scroll-cue{
  position:absolute; bottom: 34px; left: clamp(20px,6vw,80px); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; color: var(--charcoal-soft);
}
.scroll-cue span{ width:1px; height: 34px; background: linear-gradient(var(--charcoal-soft), transparent); }

/* ============================================================
   JOURNEY (pinned scrollytelling)
   ============================================================ */
.journey{ background: var(--forest); color: var(--cream); padding: 120px 0 0; position:relative; }
.journey__intro{ text-align:center; max-width:640px; margin:0 auto 40px; padding: 0 24px; }
.journey .eyebrow{ color: var(--sprout); }
.journey .section-title{ color: var(--cream); }
.journey .section-sub{ color: rgba(251,246,236,.65); margin-inline:auto; }

.journey__pin{ height: 500vh; position:relative; }
.journey__stage{
  position: sticky; top:0; height:100vh; width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* the shared 3D phone for steps 1-3 */
.jphone{ position:relative; width: 260px; height: 530px; perspective: 1200px; }
.jphone__frame{
  width:100%; height:100%; border-radius: 44px; background: linear-gradient(155deg,#22302a,#101a15);
  padding: 12px; box-shadow: 0 50px 80px -20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}
.jphone__screen{ position:relative; width:100%; height:100%; background: var(--paper); border-radius: 32px; overflow:hidden; }

.jscreen{ position:absolute; inset:0; padding: 26px 20px; opacity:0; }
.jscreen__label{ font-family: var(--font-display); font-size:1.2rem; color: var(--forest); margin-bottom:16px; }
.jscreen--discover .jscreen__cats{ display:flex; flex-wrap:wrap; gap:10px; }
.jscreen--discover .jscreen__cats span{ background: var(--mist); color: var(--forest); font-weight:700; font-size:.78rem; padding: 9px 14px; border-radius: 100px; }

.jscreen__cartcount{ font-family: var(--font-mono); color: var(--leaf); font-size:.85rem; margin-bottom:14px; }
.jscreen__cartline{ display:flex; justify-content:space-between; padding:10px 0; border-bottom: 1px solid var(--mist); font-size:.85rem; }
.jscreen__cartline b{ color: var(--leaf); font-family: var(--font-mono); font-weight:600; }

.jcheck{ width: 70px; height:70px; margin: 10px 0 16px; }
.jcheck circle{ fill:none; stroke: var(--leaf); stroke-width:3; stroke-dasharray: 176; stroke-dashoffset: 176; }
.jcheck path{ fill:none; stroke: var(--leaf); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.jscreen__pay{ font-family: var(--font-mono); font-size:.78rem; color: var(--charcoal-soft); }
.jscreen__price{ font-family: var(--font-mono); color: var(--leaf); font-size:1.1rem; margin-bottom:16px; }
.jscreen__grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }

/* packing scene */
.jscene{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; }
.pack-bag{ position:relative; width: 220px; height: 260px; }
.pack-bag__body{
  position:absolute; bottom:0; left:0; right:0; height: 190px; background: linear-gradient(160deg,var(--sprout),var(--leaf));
  border-radius: 18px 18px 8px 8px; box-shadow: 0 40px 60px -20px rgba(0,0,0,.4);
}
.pack-bag__body::before{
  content:''; position:absolute; top:-26px; left: 50%; transform: translateX(-50%); width:110px; height:40px;
  border: 10px solid var(--leaf); border-bottom:none; border-radius: 60px 60px 0 0;
}
.pack-item{ position:absolute; font-size: 2.4rem; filter: drop-shadow(0 10px 14px rgba(0,0,0,.3)); }
.pack-item--rice{ left:20px; top:20px; }
.pack-item--oil{ right:10px; top:0px; }
.pack-item--dal{ left:60px; top:-40px; }
.pack-item--flour{ right:50px; top:-60px; }

/* delivery route scene */
.jscene--deliver .route{ position:absolute; width: 78%; height: 46%; top:28%; left:11%; overflow:visible; }
.route path{ fill:none; }
#routePath, #routePath2{ stroke: rgba(251,246,236,.18); stroke-width:2; }
#routePathGlow, #routePath2Glow{ stroke: var(--sprout); stroke-width:2.6; stroke-dasharray: 1000; stroke-dashoffset: 1000; filter: drop-shadow(0 0 6px var(--sprout)); }
.route-pin{ position:absolute; font-size: 1.8rem; }
.route-pin--store{ left: 6%; top: 62%; }
.route-pin--home{ right: 4%; top: 12%; }
.scooter{ position:absolute; font-size: 2.4rem; left:0; top:0; filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); }

/* delivered scene */
.jscene--delivered{ flex-direction:column; gap:18px; }
.door{ font-size: 5rem; filter: drop-shadow(0 20px 20px rgba(0,0,0,.3)); }
.handoff-bag{ font-size: 3rem; position:absolute; transform: translateY(30px); }

/* caption panel */
.journey__caption{
  position:absolute; left: 8%; bottom: 12%; max-width: 380px; z-index:3;
}
@media(max-width: 900px){ .journey__caption{ left:6%; right:6%; bottom:8%; max-width:none; } }
.jstep{ opacity:0; position:absolute; bottom:0; left:0; }
.jstep__num{ font-family: var(--font-mono); font-size:.76rem; letter-spacing:.1em; color: var(--sprout); text-transform:uppercase; }
.jstep h3{ font-size: clamp(1.5rem,3vw,2.1rem); margin-top:10px; line-height:1.2; color: var(--cream); }

/* ============================================================
   FEATURES
   ============================================================ */
.features{ padding: 90px clamp(20px,6vw,80px); max-width: var(--container); margin:0 auto; }
.features__grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 56px; }
@media(max-width: 860px){ .features__grid{ grid-template-columns: 1fr 1fr; } }
@media(max-width: 560px){ .features__grid{ grid-template-columns: 1fr; } }

.fcard{
  background: var(--paper); border-radius: var(--radius-md); padding: 34px 28px;
  box-shadow: 0 10px 30px rgba(15,61,46,.06);
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow .3s var(--ease);
}
.fcard:hover{ box-shadow: 0 26px 50px rgba(15,61,46,.14); }
.fcard__icon{
  font-size: 2rem; width:60px; height:60px; display:flex; align-items:center; justify-content:center;
  background: var(--mist); border-radius: 16px; margin-bottom: 20px;
}
.fcard h3{ font-size: 1.25rem; color: var(--forest); margin-bottom: 10px; }
.fcard p{ color: var(--charcoal-soft); font-size: .95rem; line-height:1.5; }

/* ============================================================
   CATEGORIES (horizontal scroll)
   ============================================================ */
.categories{ background: var(--mist); padding: 90px 0; overflow:hidden; }
.categories__intro{ text-align:center; margin-bottom: 56px; padding: 0 24px; }
.categories__track{
  display:flex; gap: 26px; padding: 20px clamp(20px,8vw,120px);
  perspective: 1200px;
}
.ccard{
  flex: 0 0 220px; height: 280px; background: var(--paper); border-radius: var(--radius-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  box-shadow: 0 20px 40px rgba(15,61,46,.08);
  transform-style: preserve-3d;
}
.ccard__ico{ font-size: 3.6rem; filter: drop-shadow(0 14px 16px rgba(15,61,46,.18)); }
.ccard h3{ color: var(--forest); font-size: 1.2rem; }

/* ============================================================
   APP EXPERIENCE
   ============================================================ */
.appshow{ background: var(--forest); color: var(--cream); }
.appshow__pin{ height: 400vh; position:relative; }
.appshow .appshow__phone, .appshow__labels{ position: sticky; top:0; }
.appshow__pin::before{ content:''; }
.appshow__pin{ display:block; }
.appshow__phone{
  position: sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; float:left; width:55%;
}
.appshow__labels{
  position: sticky; top:0; height:100vh; display:flex; align-items:center; float:right; width:45%; padding-right: clamp(20px,6vw,80px);
}
.appshow__pin::after{ content:''; display:table; clear:both; }

.jphone--app .jscreen__label{ color: var(--forest); }
.ascreen{ position:absolute; inset:0; padding: 26px 20px; opacity:0; }
.ascreen .jscreen__grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.track-status{ font-family: var(--font-mono); color: var(--leaf); font-weight:600; font-size:.95rem; margin-top:8px; }

.appshow__labels{ position:relative; }
.alabel{ position:absolute; opacity:0; max-width: 340px; }
.alabel .jstep__num{ color: var(--sprout); }
.alabel p{ font-size: clamp(1.2rem,2.2vw,1.7rem); font-family: var(--font-display); color: var(--cream); margin-top:12px; line-height:1.25; }

@media(max-width: 900px){
  .appshow__phone, .appshow__labels{ float:none; width:100%; }
  .appshow__phone{ height:60vh; }
  .appshow__labels{ height:40vh; padding: 0 24px; justify-content:center; }
}

/* ============================================================
   DELIVERY EXPERIENCE (city + status)
   ============================================================ */
.delivery{ padding: 90px clamp(20px,6vw,80px) 100px; max-width: var(--container); margin:0 auto; text-align:center; }
.delivery__pin{ margin-top: 60px; }
.delivery__scene{
  position:relative; height: 380px; margin: 0 auto; max-width: 1040px;
  background: linear-gradient(180deg, var(--mist), var(--paper));
  border-radius: var(--radius-lg); overflow:hidden;
}
.delivery__city{ position:absolute; inset:0; display:flex; align-items:flex-end; gap: 30px; padding: 0 40px 0; opacity:.5; }
.building{ background: var(--forest); opacity:.12; border-radius: 6px 6px 0 0; }
.b1{ width:60px; height:120px; } .b2{ width:80px; height:180px; } .b3{ width:50px; height:90px; }
.b4{ width:70px; height:150px; } .b5{ width:45px; height:100px; }
.route--wide{ position:absolute; width:86%; height:56%; top:18%; left:7%; overflow:visible; }
.scooter--wide{ font-size: 2.4rem; z-index:4; position:absolute; left:0; top:0; }

/* stop markers, positioned by JS with left/top matching the actual path */
.stop{ position:absolute; left:0; top:0; transform: translate(-50%,-50%); z-index:5; display:flex; flex-direction:column; align-items:center; }
.stop__pin{
  position:relative; z-index:2; font-size: 1.5rem; width: 42px; height:42px; border-radius:50%;
  background: var(--paper); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px rgba(15,61,46,.16); opacity:.45; transform: scale(.82);
  transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.stop__ring{
  position:absolute; width:42px; height:42px; border-radius:50%; border: 2px solid var(--leaf);
  opacity:0; transform: scale(1);
}
.stop.is-active .stop__pin{ opacity:1; transform: scale(1.08); box-shadow: 0 12px 24px rgba(63,163,92,.35); }
.stop.is-active .stop__ring{ animation: stopPulse 1.6s ease-out infinite; }
@keyframes stopPulse{
  0%{ opacity:.55; transform: scale(1); }
  100%{ opacity:0; transform: scale(1.9); }
}
.stop__card{
  margin-top: 10px; background: var(--forest); color: var(--cream); padding: 8px 14px; border-radius: 12px;
  text-align:center; white-space:nowrap; opacity:0; transform: translateY(-6px) scale(.92);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow: 0 10px 24px rgba(15,61,46,.25); pointer-events:none;
}
.stop__card b{ display:block; font-size:.78rem; font-family: var(--font-body); }
.stop__card small{ display:block; font-family: var(--font-mono); font-size:.66rem; color: var(--sprout); margin-top:2px; }
.stop.is-active .stop__card{ opacity:1; transform: translateY(0) scale(1); }

.status-track{ display:flex; justify-content:center; gap: 40px; margin-top: 46px; flex-wrap:wrap; }
.status-step{
  font-family: var(--font-mono); font-size:.82rem; color: var(--charcoal-soft);
  display:flex; align-items:center; gap:10px; opacity:.4; transition: opacity .3s var(--ease), color .3s var(--ease);
}
.status-step.is-active{ opacity:1; color: var(--forest); font-weight:600; }
.status-step.is-active .status-dot{ box-shadow: 0 0 0 5px rgba(63,163,92,.18); }
.status-dot{ width:9px; height:9px; border-radius:50%; background: currentColor; transition: box-shadow .3s var(--ease); }

/* ============================================================
   REWARDS
   ============================================================ */
.rewards{
  background: var(--forest); color: var(--cream); padding: 100px clamp(20px,6vw,80px);
  display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: 60px;
}
@media(max-width: 880px){ .rewards{ grid-template-columns:1fr; text-align:center; } }
.rewards .eyebrow{ color: var(--sprout); }
.rewards .section-title{ color: var(--cream); }
.rewards .section-sub{ color: rgba(251,246,236,.65); }

/* Order -> Earn -> Redeem steps */
.rewards__steps{ margin-top: 40px; display:flex; flex-direction:column; gap: 20px; }
@media(max-width: 880px){ .rewards__steps{ align-items:center; } }
.rstep{
  display:flex; align-items:flex-start; gap: 16px; max-width: 380px;
  opacity:0; transform: translateY(16px);
}
.rstep__ico{
  flex: 0 0 auto; width: 44px; height:44px; border-radius: 14px; background: rgba(199,232,108,.12);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.rstep b{ display:block; font-family: var(--font-display); font-size:1.05rem; color: var(--cream); font-weight:600; }
.rstep p{ margin-top:2px; font-size:.88rem; color: rgba(251,246,236,.6); line-height:1.4; }

/* clean reward card */
.rewards__stage{ display:flex; justify-content:center; align-items:center; }
.rcard{
  width: 100%; max-width: 340px; background: var(--paper); border-radius: var(--radius-lg);
  padding: 32px 30px; box-shadow: 0 30px 60px rgba(0,0,0,.35);
  opacity:0; transform: translateY(24px) scale(.96);
}
.rcard__top{ display:flex; align-items:center; gap:10px; }
.rcard__coin{ font-size:1.4rem; }
.rcard__label{ font-family: var(--font-mono); font-size:.78rem; letter-spacing:.06em; color: var(--charcoal-soft); text-transform:uppercase; }
.rcard__count{ margin-top: 18px; display:flex; align-items:baseline; gap:8px; }
.rcard__count span{ font-family: var(--font-display); font-size: 3.4rem; color: var(--forest); line-height:1; }
.rcard__count small{ font-family: var(--font-mono); color: var(--leaf); font-size:.9rem; }
.rcard__bar{ margin-top: 22px; height: 10px; border-radius: 100px; background: var(--mist); overflow:hidden; }
.rcard__bar-fill{ height:100%; width:0%; border-radius:100px; background: linear-gradient(90deg, var(--leaf), var(--sprout)); }
.rcard__meta{ margin-top: 10px; display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:.72rem; color: var(--charcoal-soft); }

/* ============================================================
   LANGUAGE
   ============================================================ */
.language{
  display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: 60px;
  padding: 130px clamp(20px,6vw,80px); max-width: var(--container); margin: 0 auto;
}
@media(max-width: 880px){ .language{ grid-template-columns: 1fr; } }
.lang-toggle{
  margin-top: 34px; display:inline-flex; background: var(--mist); border-radius: 100px; padding: 6px; border:none;
}
.lang-toggle__opt{
  padding: 12px 26px; border-radius: 100px; font-weight:700; font-size:.9rem; color: var(--charcoal-soft);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lang-toggle__opt.is-active{ background: var(--forest); color: var(--cream); }
.language__right{ display:flex; justify-content:center; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{ background: var(--mist); padding: 80px clamp(20px,6vw,80px); text-align:center; }
.testimonials__grid{
  display:flex; gap: 22px; overflow-x:auto; margin-top: 56px; padding: 10px 4px 30px;
  scroll-snap-type: x proximity;
}
.tcard{
  flex: 0 0 300px; background: var(--paper); border-radius: var(--radius-md); padding: 30px 26px;
  text-align:left; box-shadow: 0 16px 34px rgba(15,61,46,.08); scroll-snap-align:start;
  transform-style: preserve-3d;
}
.tcard__stars{ color: var(--leaf); letter-spacing: 2px; margin-bottom: 14px; }
.tcard p{ font-family: var(--font-display); font-size: 1.15rem; color: var(--forest); line-height:1.4; }
.tcard__name{ display:block; margin-top: 18px; font-family: var(--font-mono); font-size:.78rem; color: var(--charcoal-soft); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{
  position:relative; background: var(--forest); color: var(--cream); overflow:hidden;
  padding: 60px clamp(5px,6vw,45px) 72px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero__glow--cta{ right:auto; left:50%; top:-200px; transform:translateX(-50%); background: radial-gradient(circle, rgba(199,232,108,.18), transparent 65%); animation: ctaGlow 6s ease-in-out infinite; }
@keyframes ctaGlow{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
.final-cta__stage{ position:relative; width: 100%; max-width:560px; height: 420px; margin-bottom: 20px; display: none; }
.jphone--final{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%) scale(.82); }
.final-cta .float-obj{ font-size: 2.2rem; }
.final-cta__content h2{ font-size: clamp(2.2rem,5vw,3.6rem); color: var(--cream); line-height:1.05; }
.final-cta__content p{ margin-top: 18px; color: rgba(251,246,236,.68); font-size: 1.1rem; }
.final-cta .hero__actions{ justify-content:center; }
.final-cta .btn--ghost{ border-color: rgba(251,246,236,.3); color: var(--cream); }
.final-cta .btn--ghost:hover{ background: rgba(251,246,236,.08); }

.play-badge{
  margin-top: 30px; display:inline-flex; align-items:center; gap:10px;
  border: 1px solid rgba(251,246,236,.25); padding: 12px 22px; border-radius: 100px;
  font-size:.85rem; font-weight:600; color: var(--cream);
}
.play-badge span{ background: var(--sprout); color: var(--forest); width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.6rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background: var(--forest-deep); color: rgba(251,246,236,.5);
  padding: 34px clamp(20px,6vw,80px); display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-mono); font-size:.78rem;
}
.footer span{ font-family: var(--font-display); color: var(--cream); font-size:1.1rem; }

/* ============================================================
   Mobile overrides
   ============================================================ */
@media(max-width: 720px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .hero{ padding-top: 120px; text-align:left; }
  .hero__stage{ position:relative; right:auto; top:auto; transform:none; width:100%; height: 420px; margin-top: 40px; }
  .hero__phone{ transform: translate(-50%,-50%) rotateY(-10deg) scale(.85); }
  .journey__pin{ height: 420vh; }
  .journey__caption{ bottom: 6%; }
  .jphone{ width: 200px; height: 410px; }
  .rewards, .language{ text-align:center; }
}



/* ==========================================
   GROZY COUNTER SECTION
========================================== */

.grozy-stats-section {
    width: 100%;
    background: #0F3D2E;
    padding: 62px 30px 52px;
    box-sizing: border-box;
}

.grozy-stats-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.grozy-stat-item {
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.grozy-stat-number {
    color: #fefffe;
    
    font-size: 45px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1.5px;
    margin-bottom: 25px;
    white-space: nowrap;
}

.grozy-rating-counter {
    letter-spacing: -2px;
}

.grozy-stat-label {
    color: #ffffff;
    
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
}


/* ==========================================
   GROZY BENEFITS SECTION
========================================== */

.grozy-benefits-section {
    width: 100%;
    background: #eaf3e2;
    padding: 25px 30px 27px;
    box-sizing: border-box;
    border-bottom: 1px solid #eeeeee;
}

.grozy-benefits-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 36px;
    row-gap: 17px;
}

.grozy-benefit-item {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #0ca143;
    
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.grozy-check-icon {
    width: 25px;
    height: 25px;
    min-width: 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #825e2a;
    color: #fff;

    border-radius: 50%;

    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1000px) {

    .grozy-stats-section {
        padding: 52px 20px 45px;
    }

    .grozy-stats-container {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 45px;
    }

    .grozy-stat-number {
        font-size: 46px;
        margin-bottom: 17px;
    }

    .grozy-stat-label {
        font-size: 16px;
    }

    .grozy-benefits-container {
        column-gap: 25px;
    }

    .grozy-benefit-item {
        font-size: 15px;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .grozy-stats-section {
        padding: 42px 15px 38px;
    }

    .grozy-stats-container {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 38px;
    }

    .grozy-stat-item {
        padding: 0 5px;
    }

    .grozy-stat-number {
        font-size: 36px;
        letter-spacing: -1px;
        margin-bottom: 13px;
    }

    .grozy-stat-label {
        font-size: 13px;
        line-height: 1.35;
    }

    .grozy-benefits-section {
        padding: 23px 18px;
    }

    .grozy-benefits-container {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .grozy-benefit-item {
        font-size: 14px;
        white-space: normal;
        gap: 10px;
    }

    .grozy-check-icon {
        width: 23px;
        height: 23px;
        min-width: 23px;
        font-size: 15px;
    }
}



/* =========================================
   GROZY FAQ SECTION
========================================= */

.grozy-faq-section {
    width: 100%;
    background: #FBF6EC;
    padding: 70px 6%;
    box-sizing: border-box;
    overflow: hidden;
}

.grozy-faq-wrapper {
    width: 100%;
    max-width: 1660px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 40% 56%;
    align-items: center;
    gap: 46px;
}


/* =========================================
   LEFT IMAGE
========================================= */

.grozy-faq-image-box {
    width: 100%;
    height: 675px;

    background: #fffaf3;
    border-radius: 18px;
    overflow: hidden;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.grozy-faq-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}


/* =========================================
   FAQ WHITE BOX
========================================= */

.grozy-faq-content {
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px 30px;

    box-sizing: border-box;
}


/* =========================================
   FAQ ITEM
========================================= */

.grozy-faq-item {
    border-bottom: 1px solid #dddddd;
}

.grozy-faq-item:last-child {
    border-bottom: none;
}


/* =========================================
   QUESTION
========================================= */

.grozy-faq-question {
    width: 100%;
    min-height: 83px;

    padding: 15px 0;
    font-family: 'Fraunces';
    border: 0;
    outline: none;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    color: #111111;
   
    font-size: 20px;
    font-weight: 700;
    text-align: left;

    cursor: pointer;
}


/* =========================================
   ARROW CIRCLE
========================================= */

.grozy-faq-arrow {
    width: 38px;
    height: 38px;
    min-width: 38px;

    border-radius: 50%;
    background: #eeeeee;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        background-color 0.3s ease,
        transform 0.35s ease;
}

.grozy-faq-arrow svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: #172f43;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.35s ease;
}


/* =========================================
   ACTIVE ARROW
========================================= */

.grozy-faq-item.grozy-faq-active
.grozy-faq-arrow {
    background: #e9e9e9;
}

.grozy-faq-item.grozy-faq-active
.grozy-faq-arrow svg {
    transform: rotate(180deg);
}


/* =========================================
   ANSWER
========================================= */

.grozy-faq-answer {
    max-height: 0;
    overflow: hidden;

    transition:
        max-height 0.45s ease,
        padding 0.35s ease;
}

.grozy-faq-answer p {
    margin: 0;

    padding: 0 75px 0 0;

    color: #555555;

    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}


/* =========================================
   ACTIVE ANSWER
========================================= */

.grozy-faq-item.grozy-faq-active
.grozy-faq-answer {
    max-height: 300px;
    padding-bottom: 22px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .grozy-faq-section {
        padding: 70px 4%;
    }

    .grozy-faq-wrapper {
        grid-template-columns: 38% 62%;
        gap: 30px;
    }

    .grozy-faq-image-box {
        height: 650px;
    }

    .grozy-faq-content {
        padding: 18px 35px;
    }

    .grozy-faq-question {
        font-size: 17px;
        min-height: 82px;
    }

    .grozy-faq-arrow {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .grozy-faq-section {
        padding: 70px 16px;
    }

    .grozy-faq-wrapper {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .hero{
      display: flex;
      flex-direction: column;
      padding-bottom: 0px;
    }
    .hero__phone {
    position: absolute;
    left: 50%;
    top: 60%;
    }

    .grozy-faq-image-box {
        width: 100%;
        height: 480px;
        border-radius: 16px;
    }


    .grozy-faq-content {
        width: 100%;
        padding: 8px 22px;

        border-radius: 16px;
    }


    .grozy-faq-question {
        min-height: 78px;

        font-size: 16px;
        line-height: 1.35;

        gap: 15px;
    }


    .grozy-faq-arrow {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }


    .grozy-faq-arrow svg {
        width: 16px;
        height: 16px;
    }


    .grozy-faq-answer p {
        padding-right: 10px;

        font-size: 14px;
        line-height: 1.6;
    }


    .grozy-faq-item.grozy-faq-active
    .grozy-faq-answer {
        padding-bottom: 18px;
    }

}



 /* =========================
       GROZY COMPARISON SECTION
    ========================== */

    .grozy-comparison-section {
        width: 100%;
        padding: 90px 20px 90px;
        background: #fdfdf9;
    }

    .grozy-comparison-container {
        width: 100%;
        max-width: 1160px;
        margin: 0 auto;
    }

    /* Heading */

    .grozy-comparison-heading {
        text-align: center;
        margin-bottom: 58px;
    }

    .grozy-comparison-label {
        display: block;
        font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #866434;
    margin: 0 0 14px;
    }

    .grozy-comparison-title {
        margin: 0;
        font-size: 48px;
        line-height: 1.15;
        font-weight: 800;
        color: #062b20;
    }

    .grozy-comparison-title em {
        color: #28a45e;
        font-style: italic;
    }

    .grozy-comparison-description {
        max-width: 650px;
        margin: 16px auto 0;
        
        line-height: 1.65;
           font-size: 1.08rem;
    color: var(--charcoal-soft);
        font-family: 'Manrope', sans-serif;
    }

    /* =========================
       TABLE
    ========================== */

    .grozy-comparison-table {
        width: 100%;
        overflow: hidden;
        border-radius: 21px;
        background: #ffffff;
        box-shadow: 0 4px 20px rgba(0, 50, 30, 0.04);
    }

    .grozy-comparison-row {
        display: grid;
        grid-template-columns: 36% 30% 34%;
        min-height: 88px;
            font-family: 'Manrope';
    }

    /* =========================
       TABLE HEADER
    ========================== */

    .grozy-comparison-header {
        min-height: 55px;
    }

    .grozy-comparison-header .grozy-comparison-cell {
        display: flex;
        align-items: center;
        padding: 0 21px;
    }

    .grozy-comparison-header .grozy-comparison-cell:first-child {
        background: #0e5732;
    }

    .grozy-comparison-header .grozy-comparison-cell:nth-child(2) {
        background: #2ca45d;
        color: #fff;
    }

    .grozy-comparison-header .grozy-comparison-cell:nth-child(3) {
        background: #0d5430;
    }

    .grozy-comparison-header-title {
     font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    font-family: 'Fraunces';
}
    

    .grozy-comparison-header .grozy-comparison-cell:nth-child(2)
    .grozy-comparison-header-title {
        color: #063c27;
    }

    /* =========================
       CELLS
    ========================== */

    .grozy-comparison-cell {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        border-bottom: 1px solid #dfe8e2;
    }

    .grozy-comparison-row:last-child .grozy-comparison-cell {
        border-bottom: none;
    }

    .grozy-comparison-row:not(.grozy-comparison-header)
    .grozy-comparison-cell:nth-child(2) {
        background: #f0f8f2;
    }

    .grozy-comparison-row:not(.grozy-comparison-header)
    .grozy-comparison-cell:nth-child(3) {
        background: #ffffff;
    }

    /* =========================
       WHAT MATTERS
    ========================== */

    .grozy-comparison-matter {
        gap: 13px;
    }

    .grozy-comparison-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e8f3eb;
        color: #062b20;
        font-size: 16px;
        font-weight: 700;
    }

    .grozy-comparison-matter-text {
        font-size: 14px;
        line-height: 1.35;
        font-weight: 700;
        color: #062b20;
    }

    /* =========================
       GROZY CONTENT
    ========================== */

    .grozy-comparison-content {
        gap: 10px;
    }

    .grozy-comparison-check {
        width: 20px;
        height: 20px;
        min-width: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #2baa61;
        color: #ffffff;
        font-size: 12px;
        font-weight: 900;
    }

    .grozy-comparison-content-text {
        font-size: 14px;
        line-height: 1.45;
        font-weight: 400;
        color: #063c2a;
       
    }

    /* =========================
       LOCAL STORE
    ========================== */

    .grozy-comparison-warning {
        gap: 10px;
    }

    .grozy-comparison-warning-icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #d6a81d;
        color: #ffffff;
        font-size: 12px;
        font-weight: 900;
    }

    .grozy-comparison-warning-text {
        font-size: 14px;
        line-height: 1.45;
        font-weight: 400;
        color: #61716d;
    }

    /* =========================
       TABLE BORDERS
    ========================== */

    .grozy-comparison-row:not(.grozy-comparison-header)
    .grozy-comparison-cell:nth-child(1) {
        border-right: 0;
    }

    /* =========================
       TABLET
    ========================== */

    @media (max-width: 900px) {

        .grozy-comparison-section {
            padding: 80px 16px 80px;
        }

        .grozy-comparison-title {
            font-size: 34px;
        }

        .grozy-comparison-heading {
            margin-bottom: 35px;
        }

        .grozy-comparison-row {
            grid-template-columns: 34% 33% 33%;
        }

        .grozy-comparison-cell {
            padding: 16px 14px;
        }

        .grozy-comparison-header .grozy-comparison-cell {
            padding: 0 14px;
        }

        .grozy-comparison-content-text,
        .grozy-comparison-warning-text,
        .grozy-comparison-matter-text {
            font-size: 13px;
        }
    }

    /* =========================
       MOBILE
    ========================== */

    @media (max-width: 650px) {

        .grozy-comparison-section {
            padding: 80px 12px 80px;
        }

        .grozy-comparison-label {
            font-size: 9px;
            letter-spacing: 2px;
        }

        .grozy-comparison-title {
            font-size: 28px;
            line-height: 1.2;
        }

        .grozy-comparison-description {
            font-size: 13px;
            line-height: 1.55;
            margin-top: 12px;
        }

        .grozy-comparison-heading {
            margin-bottom: 28px;
        }

        .grozy-comparison-table {
            border-radius: 15px;
            overflow-x: auto;
        }

        .grozy-comparison-row {
            min-width: 720px;
            grid-template-columns: 32% 34% 34%;
            min-height: 82px;
        }

        .grozy-comparison-header {
            min-height: 52px;
        }

        .grozy-comparison-cell {
            padding: 14px 12px;
        }

        .grozy-comparison-header .grozy-comparison-cell {
            padding: 0 12px;
        }

        .grozy-comparison-header-title {
            font-size: 10px;
            letter-spacing: .7px;
        }

        .grozy-comparison-icon {
            width: 30px;
            height: 30px;
            min-width: 30px;
            font-size: 14px;
        }

        .grozy-comparison-matter {
            gap: 9px;
        }

        .grozy-comparison-check,
        .grozy-comparison-warning-icon {
            width: 18px;
            height: 18px;
            min-width: 18px;
            font-size: 10px;
        }

        .grozy-comparison-content,
        .grozy-comparison-warning {
            gap: 7px;
        }

        .grozy-comparison-content-text,
        .grozy-comparison-warning-text,
        .grozy-comparison-matter-text {
            font-size: 12px;
        }
    }

    .grozy-localities {
    margin-top: 14px;
    display: flex;
   flex-direction: row;
    align-items: center;
    gap: 7px;
    justify-content: center;
}

.grozy-locality {
    display: flex;
    align-items: center;
    gap: 1px;
    font-size: 14px;
    font-weight: 500;
}
.grozy-locality span {
    color: #fff;
}

.grozy-locality svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #8bcbb0;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}