/* ════════════════════════════════════════════════════════
   PetCare — Hero section: sky scene (day/night), content,
   stats, phone + laptop mockups.
   ════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  padding-top: 70px;
  background: linear-gradient(160deg, var(--hero-scene-1) 0%, var(--hero-scene-2) 45%, var(--hero-scene-3) 100%);
  transition: background .35s;
}

/* ── STARS (night only) ── */
.stars {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  transition: opacity .6s ease;
  background-image:
    radial-gradient(1.5px 1.5px at 8%  12%, rgba(255,255,255,.85) 0%,transparent 100%),
    radial-gradient(1px   1px   at 22% 6%,  rgba(255,255,255,.6)  0%,transparent 100%),
    radial-gradient(2px   2px   at 38% 18%, rgba(255,255,255,.9)  0%,transparent 100%),
    radial-gradient(1px   1px   at 52% 4%,  rgba(255,255,255,.5)  0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 10%, rgba(255,255,255,.8)  0%,transparent 100%),
    radial-gradient(1px   1px   at 82% 7%,  rgba(255,255,255,.65) 0%,transparent 100%),
    radial-gradient(1px   1px   at 93% 15%, rgba(255,255,255,.5)  0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 14% 32%, rgba(255,255,255,.6)  0%,transparent 100%),
    radial-gradient(1px   1px   at 30% 28%, rgba(255,255,255,.5)  0%,transparent 100%),
    radial-gradient(1px   1px   at 58% 25%, rgba(255,255,255,.45) 0%,transparent 100%),
    radial-gradient(2px   2px   at 76% 22%, rgba(255,255,255,.75) 0%,transparent 100%),
    radial-gradient(1px   1px   at 88% 38%, rgba(255,255,255,.5)  0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 5%  55%, rgba(255,255,255,.6)  0%,transparent 100%),
    radial-gradient(1px   1px   at 45% 48%, rgba(255,255,255,.4)  0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 45%, rgba(255,255,255,.7)  0%,transparent 100%);
}
[data-theme="light"] .stars { opacity: 0; }

/* ── MOON (night) → SUN (day) ── */
.hero-moon {
  position: absolute; top: 90px; right: 14%; z-index: 1;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 30%, rgba(220,210,255,.55) 62%, transparent 80%);
  box-shadow: 0 0 50px 18px rgba(200,190,255,.2);
  pointer-events: none;
}
[data-theme="light"] .hero-moon {
  top: 72px; right: 13%;
  width: 100px; height: 100px;
  background: radial-gradient(circle,
    #ffffff 8%,
    #FFF9C4 26%,
    #FFD600 50%,
    rgba(255,200,0,.45) 70%,
    transparent 88%);
  box-shadow:
    0 0 60px 25px rgba(255,220,0,.55),
    0 0 120px 60px rgba(255,170,0,.25),
    0 0 200px 90px rgba(255,130,0,.12);
  animation: sunPulse 4s ease-in-out infinite;
}

/* ── CLOUDS (day only) ── */
.hero-cloud {
  position: absolute; z-index: 1;
  border-radius: 50px;
  background: rgba(255,255,255,.9);
  filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
[data-theme="light"] .hero-cloud { opacity: 1; }
.cloud-1 {
  top: 108px; left: 7%;
  width: 160px; height: 42px;
  box-shadow: 55px -16px 0 7px rgba(255,255,255,.88), 95px -6px 0 12px rgba(255,255,255,.88);
}
.cloud-2 {
  top: 168px; left: 40%;
  width: 110px; height: 32px;
  box-shadow: 40px -12px 0 5px rgba(255,255,255,.85), 68px -4px 0 9px rgba(255,255,255,.85);
}
.cloud-3 {
  top: 130px; right: 28%;
  width: 90px; height: 28px;
  box-shadow: 32px -10px 0 4px rgba(255,255,255,.8), 55px -3px 0 7px rgba(255,255,255,.8);
}

/* ── MOUNTAINS (silhouettes at night → green by day) ── */
.hero-mtn {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
  pointer-events: none;
}
.hero-mtn path { transition: fill .6s ease; }
[data-theme="light"] .hero-mtn path:nth-child(1) { fill: rgba(34,116,47,.62); }
[data-theme="light"] .hero-mtn path:nth-child(2) { fill: rgba(22,88,32,.82); }

/* ── HERO CONTENT ── */
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 6% 100px;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 16px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-ll);
}
.hero h1 {
  margin-bottom: 18px;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.3rem, 4.5vw, 3.7rem);
  font-weight: 400; line-height: 1.12;
  color: var(--hero-text);
}
.hero p {
  max-width: 430px;
  margin-bottom: 36px;
  font-size: 1.06rem; line-height: 1.75;
  color: var(--hero-muted);
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .store-btns { margin-top: 18px; }

/* ── HERO STATS ── */
.hero-stats {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 36px;
}
.hero-stat { text-align: center; }
.hero-stat-num {
  display: inline-block;
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem; font-weight: 700;
  color: var(--orange-l);
}
.hero-stat-label {
  margin-top: 2px;
  font-size: .75rem;
  letter-spacing: .05em;
  opacity: .85;
}

/* ── PHONE MOCKUP ── */
.hero-device {
  position: relative;
  display: flex; justify-content: center; align-items: flex-end;
}
.device-stack { position: relative; }
.phone-frame {
  position: relative; z-index: 2;
  width: 210px; flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 36px;
  background: #080814;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.04);
}
.phone-notch {
  display: flex; align-items: center; justify-content: center;
  height: 24px;
  background: #080814;
}
.phone-notch::after {
  content: '';
  width: 56px; height: 12px;
  border-radius: 0 0 10px 10px;
  background: #111128;
}
.phone-screen { background: linear-gradient(160deg,#2D1B69 0%,#1B2A6B 50%,#1a4a7a 100%); }
.phone-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 13px 7px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.28);
}
.phone-header-title { font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: #fff; }
.p-tabs { display: flex; gap: 7px; }
.p-tab { padding: 2px 5px; font-size: .56rem; font-weight: 600; color: rgba(255,255,255,.4); }
.p-tab.on { border-bottom: 1.5px solid rgba(255,176,124,.8); color: #fff; }

.phone-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  padding: 9px 9px 3px;
}
.p-card {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 68px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: linear-gradient(160deg,rgba(107,95,207,.4),rgba(60,40,130,.5));
  cursor: pointer;
  transition: outline .15s, filter .2s;
}
.p-card.g { background: linear-gradient(160deg,rgba(76,175,112,.35),rgba(30,100,60,.5)); }
.p-card.t { background: linear-gradient(160deg,rgba(91,191,181,.3),rgba(20,80,80,.5)); }
.p-card.r { background: linear-gradient(160deg,rgba(240,96,122,.3),rgba(130,30,60,.45)); }
.p-card.selected { outline: 2px solid rgba(255,176,124,.85); filter: brightness(1.15); }
.p-card-e { margin-bottom: 3px; font-size: 1.3rem; }
.p-card-n { font-size: .58rem; font-weight: 700; color: #fff; }
.p-card-s { font-size: .5rem; color: rgba(255,255,255,.5); }

/* Phone bottom nav */
.phone-nav {
  display: flex;
  margin: 7px 9px 9px;
  border-radius: 50px;
  background: rgba(255,255,255,.06);
}
.pn-item {
  flex: 1;
  padding: 6px 0;
  text-align: center;
  font-size: .5rem; font-weight: 600;
  color: rgba(255,255,255,.4);
}
.pn-item.on { color: #fff; }
.pn-item .pi {
  display: block;
  width: 14px; height: 14px;
  margin: 0 auto 2px;
}
.pn-item .pi svg { display: block; width: 100%; height: 100%; }

/* ── LAPTOP MOCKUP ── */
.laptop-frame {
  position: absolute; right: -24px; bottom: 0; z-index: 1;
  width: 270px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px 10px 0 0;
  background: #0e0e1c;
  box-shadow: var(--shadow);
}
.laptop-bar {
  display: flex; align-items: center; gap: 5px;
  height: 20px;
  padding: 0 9px;
  background: #090912;
}
.l-dot { width: 5.5px; height: 5.5px; border-radius: 50%; }
.l-dot--r { background: #ff5f57; }
.l-dot--y { background: #ffbd2e; }
.l-dot--g { background: #28c840; }
.laptop-screen {
  position: relative;
  overflow: hidden;
  min-height: 160px;
  padding: 12px;
  background: linear-gradient(170deg,#1a1248,#1a2a5a 60%,#142a50 100%);
}
.l-moon {
  position: absolute; top: 14px; right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(255,255,255,.9) 30%,rgba(200,220,255,.5) 65%,transparent 80%);
  box-shadow: 0 0 16px 5px rgba(180,200,255,.18);
}
.l-mtn { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; }
.l-card {
  position: relative; z-index: 2;
  max-width: 170px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  color: #fff; font-size: .62rem;
  backdrop-filter: blur(8px);
}
.l-card-t { margin-bottom: 5px; font-size: .67rem; font-weight: 700; }
.l-score-row {
  display: flex; justify-content: space-between;
  margin-bottom: 4px;
  font-size: .58rem; color: rgba(255,255,255,.55);
}
.l-bar-bg {
  height: 5px;
  margin-bottom: 7px;
  overflow: hidden;
  border-radius: 50px;
  background: rgba(255,255,255,.1);
}
.l-bar-fill {
  width: 82%; height: 100%;
  border-radius: 50px;
  background: linear-gradient(90deg,#FFB07C,#5BBFB5);
  transition: width .6s cubic-bezier(.22,1,.36,1);
}
.l-pets { display: flex; gap: 4px; }
.l-pet { padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.08); font-size: .72rem; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero p { margin: 0 auto 36px; }
  .hero-cta { justify-content: center; }
  .hero-eyebrow { justify-content: center; }
  .hero .store-btns, .hero-stats { justify-content: center; }
  .hero-device { margin-top: 20px; }
  .laptop-frame { display: none; }
}
@media (max-width: 640px) {
  .hero-inner { padding: 60px 5% 80px; }
}