/* ─── RESET & TOKENS ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:          #2D5A27;
  --green-light:    #3d7a35;
  --green-pale:     #eef5ec;
  --green-mist:     #f4f9f3;
  --sand:           #f5f0e8;
  --sand-mid:       #ede5d4;
  --sand-dark:      #d9ccb4;
  --amber:          #c87941;
  --cream:          #faf8f3;
  --bark:           #3a2810;
  --text:           #1c1812;
  --text-muted:     #7a6a54;
  --status-green:   #3a8a3a;
  --status-yellow:  #b8860b;
  --status-red:     #b03030;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Instrument Sans', sans-serif;
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
}

@media (pointer: fine) {
  body { cursor: none; }
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: .65;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23g)' opacity='.032'/%3E%3C/svg%3E");
}

/* Custom cursor */
#cursor {
  width: 10px; height: 10px;
  background: var(--green);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .18s, height .18s, background .18s, opacity .18s;
  mix-blend-mode: multiply;
}
#cursor.big { width: 36px; height: 36px; background: var(--amber); opacity: .45; }


/* ─── NAV ─── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 18px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250, 248, 243, .88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(217, 204, 180, .5);
}

.nav-logo {
  font-family: 'Comfortaa', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--green);
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
}
.nav-links a {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover { color: var(--text); }

.nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--green);
  color: #cce8c8;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: 100px;
  border: none;
  cursor: none;
  text-decoration: none;
  transition: background .2s;
}
.nav-btn:hover { background: var(--green-light); }


/* ─── HERO ─── */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 72px;
  position: relative;
  overflow: hidden;
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 52px 80px 64px;
  position: relative;
  z-index: 2;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--green);
  color: #b8ddb4;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 100px;
  width: fit-content;
  margin-bottom: 40px;
  animation: fadeUp .55s ease both;
}
.pill-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #6ed86a;
  animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero-title {
  font-family: 'Comfortaa', sans-serif;
  font-size: clamp(48px, 5.6vw, 80px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 26px;
  animation: fadeUp .55s .08s ease both;
}
.hero-title .accent { color: var(--green); }
.hero-title .mark {
  position: relative;
  display: inline-block;
}
.hero-title .mark::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 0; right: 0;
  height: 2.5px;
  background: var(--amber);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: lineIn .45s .9s ease forwards;
}
@keyframes lineIn { to { transform: scaleX(1); } }

.hero-sub {
  font-size: 15.5px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 360px;
  margin-bottom: 44px;
  animation: fadeUp .55s .16s ease both;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  animation: fadeUp .55s .24s ease both;
}

.btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: #cce8c8;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  padding: 13px 26px;
  border-radius: 100px;
  border: none;
  cursor: none;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.btn-primary:hover { background: var(--green-light); transform: translateY(-2px); }

.btn-ghost {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: none;
  text-decoration: none;
  transition: color .2s;
}
.btn-ghost:hover { color: var(--text); }

.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid var(--sand-dark);
  animation: fadeUp .55s .32s ease both;
}
.stat-val {
  font-family: 'Comfortaa', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--green);
}
.stat-label {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}


/* ─── HERO RIGHT ─── */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.map-canvas {
  position: absolute;
  inset: 0;
  background: var(--green-mist);
}
/* grid */
.map-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--sand-mid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sand-mid) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .38;
}
/* diagonal streets */
.map-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(32deg,  transparent 40%, var(--sand-mid) 40%, var(--sand-mid) 42%, transparent 42%),
    linear-gradient(-20deg, transparent 55%, var(--sand-mid) 55%, var(--sand-mid) 57%, transparent 57%),
    linear-gradient(75deg,  transparent 30%, var(--sand-mid) 30%, var(--sand-mid) 34%, transparent 34%);
  opacity: .5;
}

.park-blob {
  position: absolute;
  background: #b4d4ae;
  border-radius: 45% 55% 52% 48% / 48% 52% 58% 42%;
  opacity: .55;
}

/* Phone mockup */
.phone {
  width: 252px;
  background: var(--cream);
  border-radius: 38px;
  box-shadow: 0 40px 80px rgba(28, 24, 18, .2), 0 0 0 1px rgba(28, 24, 18, .07);
  overflow: hidden;
  position: relative;
  z-index: 2;
  animation: phoneFloat 4.5s ease-in-out infinite;
}
@keyframes phoneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.phone-notch {
  height: 26px;
  background: #111;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.phone-notch::after {
  content: '';
  width: 74px; height: 9px;
  background: #0a0a0a;
  border-radius: 0 0 7px 7px;
}

.phone-screen {
  background: var(--green-mist);
  min-height: 476px;
  position: relative;
  overflow: hidden;
}

/* Map grid inside phone */
.p-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--sand-mid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sand-mid) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: .3;
}
.p-park   { position: absolute; background: #bdd9b7; border-radius: 45% 55% 50% 50% / 48% 52% 60% 40%; }
.p-street { position: absolute; background: var(--sand-mid); opacity: .55; }

/* Phone top bar */
.p-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  background: rgba(250, 248, 243, .92);
  backdrop-filter: blur(10px);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(217, 204, 180, .45);
}
.p-logo {
  font-family: 'Comfortaa', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
}
.p-walk-btn {
  background: var(--green);
  color: #cce8c8;
  font-size: 9.5px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 100px;
  border: none;
  cursor: none;
}

/* Dog pins */
.pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: pinBob var(--d, 3.5s) ease-in-out infinite;
  cursor: none;
}
@keyframes pinBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.pin-av {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2.5px solid var(--sc, var(--status-green));
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .11);
  position: relative;
}
.pin-av::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--sc, var(--status-green));
  opacity: .28;
  animation: pinRing 2s ease-in-out infinite;
}
@keyframes pinRing { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(1.55); opacity: 0; } }

.pin-tail {
  width: 2px; height: 7px;
  background: var(--sc, var(--status-green));
  border-radius: 0 0 2px 2px;
  opacity: .55;
}

/* Pin popup */
.pin-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cream);
  border-radius: 11px;
  padding: 7px 11px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
  border: 1px solid var(--sand-dark);
  white-space: nowrap;
  pointer-events: none;
}
.pop-name { font-weight: 500; font-size: 11px; color: var(--text); }
.pop-sub  { font-size: 9.5px; color: var(--text-muted); margin-top: 1px; display: flex; align-items: center; gap: 4px; }
.pop-dot  { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* My location dot */
.my-loc {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--green);
  border: 2.5px solid white;
  box-shadow: 0 0 0 7px rgba(45, 90, 39, .14);
}

/* Phone bottom bar */
.p-bot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(250, 248, 243, .95);
  backdrop-filter: blur(10px);
  padding: 12px 14px 18px;
  border-top: 1px solid var(--sand-dark);
}
.p-bot-label {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 9px;
}
.p-chips { display: flex; gap: 7px; }
.chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--sand);
  border-radius: 100px;
  padding: 4px 9px 4px 4px;
  border: 1px solid var(--sand-dark);
}
.chip-av {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green-pale);
  border: 1.5px solid var(--status-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chip-name { font-size: 10px; font-weight: 500; color: var(--text); }
.chip-dist { font-size: 8.5px; color: var(--text-muted); }

/* Floating notification */
.float-notif {
  position: absolute;
  right: -28px;
  top: 28%;
  background: var(--cream);
  border-radius: 16px;
  padding: 13px 16px;
  width: 210px;
  box-shadow: 0 14px 36px rgba(28, 24, 18, .13);
  border: 1px solid var(--sand-dark);
  z-index: 10;
  animation: notifIn .5s 1.1s ease both, floatY 4.2s 1.6s ease-in-out infinite;
}
@keyframes notifIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.fn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fn-ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fn-app  { font-size: 9px; font-weight: 500; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; }
.fn-body { font-size: 11.5px; color: var(--text); line-height: 1.55; }
.fn-body strong { color: var(--green); font-weight: 500; }

/* Floating coin badge */
.float-coin {
  position: absolute;
  left: -38px;
  bottom: 28%;
  background: var(--amber);
  color: #fff;
  border-radius: 100px;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 8px 22px rgba(200, 121, 65, .32);
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 10;
  white-space: nowrap;
  animation: coinIn .5s 1.4s ease both, floatY 3.8s 1.9s ease-in-out infinite;
}
@keyframes coinIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }


/* ─── TICKER ─── */
.ticker {
  background: var(--green);
  padding: 18px 0;
  overflow: hidden;
}
.ticker-track {
  display: flex;
  animation: tickerScroll 22s linear infinite;
  white-space: nowrap;
}
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tick-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #b8ddb4;
  font-size: 13px;
  font-weight: 400;
  padding: 0 36px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.tick-item svg { opacity: .7; }


/* ─── CARDS ─── */
.cards {
  padding: 100px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  background: var(--cream);
}

.card {
  background: var(--sand);
  border-radius: 22px;
  padding: 34px;
  border: 1px solid var(--sand-dark);
  cursor: none;
  position: relative;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(28, 24, 18, .09); }
.card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 110px; height: 110px;
  border-radius: 0 22px 0 110px;
  background: var(--ca, #ddeedd);
  opacity: .55;
}
.card:nth-child(1) { --ca: #cee4ca; }
.card:nth-child(2) { --ca: #e4d8c4; }
.card:nth-child(3) { --ca: #c8d8e4; grid-column: 3; grid-row: 1 / 3; }
.card:nth-child(4) { --ca: #e4d8ca; }
.card:nth-child(5) { --ca: #d4e4d0; }

.card-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card-h {
  font-family: 'Comfortaa', sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 10px;
}
.card-h em { font-style: normal; color: var(--green); }
.card-p {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.72;
}

/* Map mini preview */
.map-feat {
  margin-top: 20px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--sand-dark);
  height: 180px;
  position: relative;
}
.mf-bg {
  position: absolute;
  inset: 0;
  background: var(--green-mist);
  background-image:
    linear-gradient(var(--sand-mid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sand-mid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.mf-park { position: absolute; background: #b8d4b4; border-radius: 45% 55% 50% 50%; opacity: .6; }
.mf-pin {
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--sc, var(--status-green));
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mf-pin::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--sc, var(--status-green));
  opacity: .25;
  animation: pinRing 2.2s ease-in-out infinite;
}
.mf-me {
  position: absolute;
  left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid white;
  box-shadow: 0 0 0 5px rgba(45, 90, 39, .15);
}
.mf-radius {
  position: absolute;
  left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  width: 90px; height: 90px;
  border-radius: 50%;
  border: 1px dashed rgba(45, 90, 39, .25);
  background: rgba(45, 90, 39, .04);
}

/* Tinder preview */
.tinder {
  margin-top: 22px;
  background: var(--cream);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--sand-dark);
}
.tinder-row { display: flex; align-items: center; gap: 11px; }
.tinder-av {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--green-pale);
  border: 2.5px solid var(--status-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tinder-name  { font-weight: 500; font-size: 14px; color: var(--text); }
.tinder-breed { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.energy-row   { display: flex; gap: 3px; margin-top: 6px; }
.edot         { width: 7px; height: 7px; border-radius: 50%; background: var(--sand-dark); }
.edot.on      { background: var(--amber); }
.t-btns { display: flex; gap: 8px; margin-top: 12px; }
.t-btn {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  border: none;
  font-size: 11.5px;
  font-weight: 500;
  cursor: none;
  font-family: 'Instrument Sans', sans-serif;
  transition: opacity .2s;
}
.t-btn:hover { opacity: .78; }
.t-pass { background: var(--sand-dark); color: var(--text-muted); }
.t-hi   { background: var(--green); color: #cce8c8; }

/* Leaderboard */
.lb { margin-top: 20px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--sand-dark);
}
.lb-row:last-child { border: none; }
.lb-rank {
  font-family: 'Comfortaa', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-muted);
  width: 22px;
  text-align: center;
}
.lb-rank.gold { color: var(--amber); }
.lb-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lb-name { flex: 1; }
.lb-n    { font-size: 12.5px; font-weight: 500; color: var(--text); }
.lb-d    { font-size: 10.5px; color: var(--text-muted); }
.lb-coins { font-size: 12px; font-weight: 500; color: var(--amber); display: flex; align-items: center; gap: 5px; }

/* Community help */
.help-btn {
  margin-top: 22px;
  width: 100%;
  padding: 16px;
  background: var(--green);
  color: #cce8c8;
  border: none;
  border-radius: 14px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: none;
  transition: background .2s;
}
.help-btn:hover { background: var(--green-light); }
.help-label {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}


/* ─── FOOTER ─── */
footer {
  background: var(--bark);
  color: #7a6a54;
  padding: 44px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.f-logo {
  font-family: 'Comfortaa', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #d8c8a8;
}
.f-copy { font-size: 12.5px; font-weight: 300; }
.f-tag  { font-family: 'Comfortaa', sans-serif; font-size: 12.5px; color: var(--green-light); }


/* ─── MOBILE ─── */
@media (max-width: 768px) {
  /* Hide custom cursor on touch */
  #cursor { display: none; }
  body, a, button, .card, .pin, .nav-btn, .p-walk-btn, .t-btn, .help-btn { cursor: auto; }

  /* Nav */
  nav {
    padding: 14px 20px;
  }
  .nav-links { display: none; }

  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-left {
    padding: 40px 20px 32px;
  }
  .hero-title {
    font-size: 36px;
  }
  .hero-sub {
    font-size: 14px;
    max-width: 100%;
  }
  .hero-stats {
    gap: 20px;
    margin-top: 36px;
  }
  .stat-val {
    font-size: 24px;
  }
  .hero-right {
    height: 420px;
  }
  .float-notif {
    right: 8px;
    top: 12%;
    width: 180px;
    padding: 10px 12px;
    font-size: 10px;
  }
  .float-coin {
    left: 8px;
    bottom: 18%;
    font-size: 11px;
    padding: 6px 12px;
  }

  /* Cards */
  .cards {
    padding: 48px 20px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .card:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }

  /* Footer */
  footer {
    padding: 32px 20px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 30px;
  }
  .phone {
    width: 210px;
  }
  .phone-screen {
    min-height: 400px;
  }
  .hero-right {
    height: 380px;
  }
  .p-chips {
    flex-wrap: wrap;
  }
}