@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --green-1:#1f6b45;
  --green-2:#2f9e5a;
  --green-3:#6fd37f;
  --green-4:#a8f0a0;
  --sunset-1:#241544;
  --sunset-2:#5a2c6b;
  --sunset-3:#c84b6b;
  --sunset-4:#ff8a5c;
  --sunset-5:#ffd27a;
  --cream:#fff8ec;
  --sand:#fff1d6;
  --ink:#1d1330;
  --muted-on-dark: rgba(255,248,236,0.82);
  --muted-on-light: rgba(29,19,48,0.68);
}

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

html{
  overflow-x: hidden;
  width: 100%;
}

body{
  width: 100%;
  font-family: 'Space Grotesk', sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3{
  font-family: 'Baloo 2', sans-serif;
}

a{ text-decoration: none; color: inherit; }

img, canvas{ display: block; }

/* ---------- NAV ---------- */

#site-nav{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  box-sizing: border-box;
  /* Opaque enough to read as a deliberate dark-purple bar on its own -
     at page load, nothing dark is scrolled under it yet (the hero's dark
     top only slides under once you scroll), so a low-alpha value here
     blends against the cream body background instead and looks washed out. */
  background: rgba(36, 21, 68, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 250ms ease, box-shadow 250ms ease, padding 250ms ease;
  padding: 22px 0;
}

#site-nav.nav-scrolled{
  background: rgba(24, 14, 46, 0.86);
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  padding: 12px 0;
}

.nav-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.logo{
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  transition: font-size 250ms ease;
  letter-spacing: 0.3px;
}

#site-nav.nav-scrolled .logo{
  font-size: 1.25rem;
}

.logo-cactus{ color: var(--green-3); }
.logo-robot{ color: var(--sunset-5); }
.logo-dot{ color: var(--muted-on-dark); font-weight: 500; font-size: 0.85em; }

.nav-link{
  display: inline-block;
  background: var(--green-2);
  color: var(--cream);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background 250ms ease, padding 250ms ease, transform 180ms ease, box-shadow 180ms ease;
  white-space: nowrap;
}

#site-nav.nav-scrolled .nav-link{
  padding: 9px 18px;
  font-size: 0.88rem;
}

.nav-link:hover{
  background: var(--green-1);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(47, 158, 90, 0.4);
}

.nav-link:focus-visible{
  outline: 3px solid var(--sunset-5);
  outline-offset: 2px;
}

/* ---------- HERO ---------- */

.hero{
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-height: 92vh;
  background: linear-gradient(180deg, var(--sunset-1) 0%, var(--sunset-2) 32%, var(--sunset-3) 58%, var(--sunset-4) 80%, var(--sunset-5) 100%);
  display: flex;
  /* Was align-items:center, which put the text block's bottom edge down
     into the robot-scene's territory (scene occupies the bottom 42% of
     hero height) - hence the paragraph visually tangling with the robot
     and cacti. Top-aligning with generous padding keeps them separate. */
  align-items: flex-start;
  justify-content: center;
  padding: 16vh 24px 8vh;
}

#bg-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.robot-scene{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.desert-ground{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,210,122,0.0) 0%, rgba(214,122,62,0.35) 100%);
}

.scene-figures{
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  width: min(620px, 90vw);
  height: 100%;
}

.cactus{
  position: absolute;
  bottom: 0;
  border-radius: 40% 40% 18% 18%;
  background: linear-gradient(160deg, var(--green-3), var(--green-1));
  box-shadow: inset -6px 0 10px rgba(0,0,0,0.15);
}

.cactus::before, .cactus::after{
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.cactus-1{
  left: 4%;
  width: 46px;
  height: 120px;
  animation: sway 6s ease-in-out infinite;
  transform-origin: bottom center;
  animation-delay: 0.4s;
}
.cactus-1::before{ width: 26px; height: 50px; left: -18px; top: 20px; border-radius: 40% 60% 60% 40%; }

.cactus-2{
  left: 72%;
  width: 56px;
  height: 150px;
  animation: sway 7s ease-in-out infinite;
  transform-origin: bottom center;
  animation-delay: 1.1s;
}
.cactus-2::after{ width: 24px; height: 46px; right: -16px; top: 30px; border-radius: 60% 40% 40% 60%; }

.cactus-3{
  left: 36%;
  width: 40px;
  height: 90px;
  animation: cactus-pulse 4s ease-in-out infinite;
  transform-origin: bottom center;
}

.robot{
  position: absolute;
  left: 18%;
  bottom: 0;
  width: 92px;
  height: 128px;
  animation: bob 3s ease-in-out infinite;
}

.robot-head{
  position: absolute;
  top: 0;
  left: 14px;
  width: 64px;
  height: 48px;
  background: linear-gradient(160deg, #e9edf2, #b9c3cf);
  border-radius: 16px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.robot-antenna{
  position: absolute;
  top: -18px;
  left: 44px;
  width: 4px;
  height: 18px;
  background: #9aa5b1;
}
.robot-antenna::after{
  content: "";
  position: absolute;
  top: -8px;
  left: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sunset-5);
  box-shadow: 0 0 8px var(--sunset-5);
}

.robot-eye{
  position: absolute;
  top: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green-2);
  box-shadow: 0 0 6px var(--green-3);
}
.robot-eye.left{ left: 24px; }
.robot-eye.right{ left: 44px; }

.robot-body{
  position: absolute;
  top: 46px;
  left: 6px;
  width: 80px;
  height: 58px;
  background: linear-gradient(160deg, #cfd6de, #97a3b0);
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.robot-arm{
  position: absolute;
  top: 54px;
  right: -22px;
  width: 44px;
  height: 10px;
  background: #a7b1bd;
  border-radius: 6px;
  transform-origin: left center;
  animation: tilt-can 4s ease-in-out infinite;
}

.watering-can{
  position: absolute;
  top: -10px;
  right: -18px;
  width: 30px;
  height: 20px;
  background: linear-gradient(160deg, var(--sunset-5), var(--sunset-4));
  border-radius: 6px 10px 10px 6px;
}
.watering-can::before{
  content:"";
  position: absolute;
  top: 2px;
  right: -14px;
  width: 16px;
  height: 6px;
  background: inherit;
  border-radius: 4px;
  transform: rotate(-20deg);
}

.water-drop{
  position: absolute;
  top: 6px;
  right: -30px;
  width: 6px;
  height: 8px;
  border-radius: 0 50% 50% 50%;
  background: #bfe8ff;
  opacity: 0;
  animation: drop-fall 4s ease-in infinite;
}
.water-drop:nth-child(2){ right: -36px; animation-delay: 0.15s; }
.water-drop:nth-child(3){ right: -24px; animation-delay: 0.3s; }

@keyframes tilt-can{
  0%, 15% { transform: rotate(0deg); }
  32%, 55% { transform: rotate(-38deg); }
  72%, 100% { transform: rotate(0deg); }
}

@keyframes drop-fall{
  0%, 28% { opacity: 0; transform: translateY(0); }
  34% { opacity: 1; transform: translateY(4px); }
  52% { opacity: 1; transform: translateY(34px); }
  58%, 100% { opacity: 0; transform: translateY(38px); }
}

@keyframes cactus-pulse{
  0%, 48% { transform: scale(1); }
  56% { transform: scale(1.08); }
  64%, 100% { transform: scale(1); }
}

@keyframes sway{
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes bob{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-content{
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 820px;
}

.hero-content h1{
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 800;
  color: var(--cream);
  line-height: 1.15;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero-content p{
  margin: 24px auto 0;
  max-width: 680px;
  color: var(--muted-on-dark);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* ---------- CARDS ---------- */

.cards-section{
  position: relative;
  z-index: 2;
  background: var(--cream);
  padding: 90px 24px;
}

.cards-grid{
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.card{
  background: #ffffff;
  border-radius: 18px;
  padding: 38px 36px;
  box-shadow: 0 6px 20px rgba(29, 19, 48, 0.08);
  border-top: 4px solid var(--green-2);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.card:nth-child(odd){ transform: rotate(-1deg); }
.card:nth-child(even){ transform: rotate(1deg); }

.card:hover{
  transform: rotate(0deg) translateY(-8px);
  box-shadow: 0 16px 32px rgba(29, 19, 48, 0.14);
}

.card-icon{
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
}

.card-icon svg{
  width: 100%;
  height: 100%;
}

.card h3{
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 14px;
}

.card p{
  color: var(--muted-on-light);
  font-size: 1rem;
}

/* ---------- CTA ---------- */

.cta-section{
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, var(--green-1), var(--green-2) 60%, var(--green-3));
  padding: 110px 24px 130px;
  text-align: center;
}

.cta-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
}

.signal-status{
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--sand);
  text-transform: uppercase;
}

.signal-cta{
  display: inline-block;
  background: var(--cream);
  color: var(--green-1);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  padding: 20px 48px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  border: 2px solid transparent;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.signal-cta:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 36px rgba(0,0,0,0.28);
  background: var(--sand);
}

.signal-cta:focus-visible{
  outline: 3px solid var(--sunset-5);
  outline-offset: 3px;
}

.signal-sub{
  color: rgba(255,248,236,0.85);
  font-size: 0.95rem;
}

/* ---------- FOOTER ---------- */
/* Footer markup itself is injected via SSI and shouldn't be edited per-domain -
   spacing and contrast live here instead. */

footer{
  position: relative;
  z-index: 2;
  background: var(--cream);
  color: var(--ink);
  padding: 28px 20px;
  text-align: center;
  font-size: 0.85rem;
}

footer div{ margin: 4px 0; }

footer a{ color: var(--green-1); }

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce){
  .robot, .robot-arm, .water-drop, .cactus-1, .cactus-2, .cactus-3{
    animation: none !important;
  }
  #site-nav, .logo, .nav-link, .card, .signal-cta{
    transition: none !important;
  }
  .card:nth-child(odd), .card:nth-child(even){
    transform: none;
  }
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 480px){
  .nav-inner{ padding: 0 16px; }
  .logo{ font-size: 1.15rem; }
  .nav-link{ padding: 9px 16px; font-size: 0.8rem; }

  #site-nav.nav-scrolled .logo{ font-size: 1rem; }
  #site-nav.nav-scrolled .nav-link{ padding: 7px 14px; font-size: 0.72rem; }

  .hero{ padding: 14vh 16px 6vh; min-height: 80vh; }
  .hero-content p{ font-size: 0.95rem; }
  .cards-section{ padding: 60px 16px; }
  .card{ padding: 30px 24px; }
  .cta-section{ padding: 80px 16px 100px; }
  .signal-cta{ padding: 16px 32px; }
}