/* FloraVerse homepage - full-bleed botanical landing */
:root{
  --landing-ink:#14261c;
  --landing-fallback:#eef7e9;
}
::selection{background:rgba(139,203,138,.35); color:inherit}

/* Hero fills the first screen; the page scrolls to the ecosystem below. */
html,body{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  width:100%;
  min-height:100%;
  overflow-x:hidden !important;
  overflow-x:clip !important;
  background:var(--landing-fallback) !important;
}
body{
  display:flex !important;
  flex-direction:column;
  min-height:100% !important;
  animation:none !important;
  transform:none !important;
}
body > section.landing-hero,
body > nav + section.landing-hero,
body > section:first-of-type,
body > section.landing-hero:first-of-type,
section.landing-hero{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Navbar — same design as every other page (style.css); fixed so the hero stays full-bleed, no separator line */
.navbar{
  position:fixed;
  top:0; left:0; right:0;
  border-bottom:0 !important;
}

/* ===== HERO — full-bleed background image ===== */
.landing-hero{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:clamp(3.75rem,5.5vh,4.5rem) 1.25rem clamp(4.25rem,11vh,6rem);
  margin:0 !important;
  background:linear-gradient(180deg, #7eb8e0 0%, #a8d4ef 38%, #c5e2c8 68%, #7fbf7a 100%);
  isolation:isolate;
}
.landing-hero-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:inherit;
}
.landing-hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
  filter:saturate(1.06) contrast(1.03);
  pointer-events:none;
  animation:heroDrift 30s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{transform:scale(1)}
  to{transform:scale(1.045)}
}
/* Atmospheric layering: soft blue-gray sky, clear hills, warm pale-green fog at the bottom edge */
.landing-hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(84,128,164,.22) 0%, rgba(96,136,166,.12) 22%, rgba(6,26,36,.05) 42%, rgba(6,26,36,0) 60%),
    linear-gradient(180deg, rgba(238,247,233,0) 68%, rgba(238,247,233,.12) 80%, rgba(238,247,233,.3) 90%, rgba(238,247,233,.58) 96%, rgba(238,247,233,.84) 99%, #eef7e9 100%);
  pointer-events:none;
}

.landing-hero-content{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  opacity:1 !important;
  transform:none !important;
}
/* Subtle low-contrast pocket behind the typography — not a visible overlay */
.landing-hero-content::before{
  content:'';
  position:absolute;
  inset:-14% -24%;
  z-index:-1;
  background:radial-gradient(ellipse 80% 70% at 50% 46%, rgba(247,252,244,.2) 0%, rgba(247,252,244,.09) 50%, rgba(247,252,244,0) 72%);
  pointer-events:none;
}
.hero-eyebrow{
  margin:0 0 .65rem;
  color:#46665A;
  font-family:'Outfit',sans-serif;
  font-size:clamp(.68rem,1vw,.75rem);
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-shadow:0 1px 2px rgba(255,255,255,.4);
  animation:heroTitleIn .75s cubic-bezier(.2,.8,.2,1) both;
}
.hero-title{
  font-family:'Outfit','Nunito',sans-serif;
  color:#18352A;
  font-size:clamp(2.55rem,5.7vw,4.15rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.028em;
  text-wrap:balance;
  text-shadow:0 1px 2px rgba(247,252,244,.28);
  opacity:1 !important;
  transform:none !important;
  animation:heroTitleIn .85s .08s cubic-bezier(.2,.8,.2,1) both;
}
.hero-sub{
  max-width:30rem;
  margin-top:1.15rem;
  color:#355344;
  font-family:'Outfit',sans-serif;
  font-size:clamp(.94rem,1.3vw,1.05rem);
  font-weight:500;
  line-height:1.6;
  letter-spacing:.01em;
  text-wrap:pretty;
  text-shadow:0 1px 2px rgba(247,252,244,.22);
  opacity:1 !important;
  transform:none !important;
  animation:heroTitleIn .85s .16s cubic-bezier(.2,.8,.2,1) both;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  margin-top:1.85rem;
  opacity:1 !important;
  transform:none !important;
  animation:heroTitleIn .85s .26s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes heroTitleIn{
  from{opacity:.01; transform:translateY(16px)}
  to{opacity:1; transform:translateY(0)}
}

/* Primary CTA — typographic invitation with a quiet expanding rule */
.hero-cta{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:.55rem;
  padding-bottom:.55rem;
  background:none;
  border:0;
  color:#fff;
  font-family:'Outfit',sans-serif;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.01em;
  text-decoration:none;
  text-shadow:0 1px 3px rgba(3,20,26,.35);
  cursor:pointer;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),
             color .24s cubic-bezier(.2,.8,.2,1);
}
.hero-cta::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.55);
  transform:scaleX(.72);
  transform-origin:left center;
  transition:transform .26s cubic-bezier(.2,.8,.2,1), background-color .26s cubic-bezier(.2,.8,.2,1);
}
.hero-cta:hover,
.hero-cta:focus-visible{
  transform:translateY(-2px);
  color:#fff;
}
.hero-cta:hover::after,
.hero-cta:focus-visible::after{
  transform:scaleX(1);
  background:rgba(255,255,255,.95);
}
.hero-cta:focus-visible{outline:none}
.hero-cta:focus-visible::after{background:#fff}
.hero-cta:active{transform:translateY(0); transition-duration:.1s}
.hero-cta-arrow{
  font-size:1.02rem;
  line-height:1;
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.hero-cta:hover .hero-cta-arrow,
.hero-cta:focus-visible .hero-cta-arrow{transform:translateX(6px)}

/* ===== SECTION SHARED ===== */
.section-eyebrow{
  margin-bottom:.4rem;
  color:#3f7a4a;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ===== ECOSYSTEM — editorial index of destinations ===== */
.home-ecosystem{
  position:relative;
  margin:0 !important;
  padding:clamp(2.5rem,4.5vw,3.75rem) clamp(1.1rem,4vw,2rem) clamp(3rem,6vw,4.5rem);
  background:linear-gradient(180deg,#eef7e9 0%,#f6faf2 40%,#fbfdf6 100%);
}
.ecosystem-inner{max-width:1140px; margin:0 auto}
.ecosystem-head{max-width:620px}
.ecosystem-head h2{
  color:var(--landing-ink);
  font-weight:800;
  font-size:clamp(1.8rem,3.4vw,2.8rem);
  line-height:1.08;
  letter-spacing:-.038em;
}
.ecosystem-lead{
  margin-top:.55rem;
  max-width:34rem;
  color:#5a6a5e;
  font-size:.95rem;
  line-height:1.6;
}
.ecosystem-strip{
  --eco-line:#dde8dc;
  margin-top:clamp(1.35rem,2vw,1.85rem);
}
.eco-cell{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) max-content;
  grid-template-rows:auto auto;
  align-items:start;
  column-gap:1.5rem;
  row-gap:.4rem;
  padding:1.8rem .4rem;
  border-top:1px solid var(--eco-line);
  background:transparent;
  text-decoration:none;
  color:var(--landing-ink);
  transition:border-color .25s ease, background .25s ease;
}
.eco-cell[data-eco=tanaman]{--eco-accent:#5f9e63}
.eco-cell[data-eco=belajar]{--eco-accent:#d9a83f}
.eco-cell[data-eco=komunitas]{--eco-accent:#e07d8e}
.eco-cell[data-eco=belanja]{--eco-accent:#dd9258}
.eco-cell[data-eco=kebunku]{--eco-accent:#6f9ed4}
.eco-cell:last-child{border-bottom:1px solid var(--eco-line)}
.eco-cell:hover,.eco-cell:focus-visible{
  border-color:color-mix(in srgb, var(--eco-accent) 45%, transparent);
  background:rgba(139,203,138,.085);
}
.eco-num{
  grid-column:1;
  grid-row:1 / span 2;
  padding-top:.2rem;
  font-size:clamp(1.7rem,2.4vw,2.25rem);
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  color:rgba(20,38,28,.26);
  transition:color .2s ease;
}
.eco-cell:hover .eco-num,
.eco-cell:focus-visible .eco-num{color:var(--eco-accent)}
.eco-name{
  grid-column:2;
  grid-row:1;
  font-family:'Nunito','Outfit',sans-serif;
  font-weight:800;
  font-size:clamp(1.3rem,1.8vw,1.65rem);
  letter-spacing:-.02em;
  line-height:1.2;
  transition:transform .2s ease;
}
.eco-cell:hover .eco-name,
.eco-cell:focus-visible .eco-name{transform:translateX(6px)}
.eco-desc{
  grid-column:2;
  grid-row:2;
  font-size:.88rem;
  line-height:1.55;
  color:#67746a;
  max-width:48ch;
}
.eco-go{
  grid-column:3;
  grid-row:1;
  padding-top:.4rem;
  display:flex;
  align-items:center;
  gap:.3rem;
  font-size:.88rem;
  font-weight:700;
  color:#2f3f34;
  white-space:nowrap;
  opacity:.75;
  transition:transform .2s ease, opacity .2s ease;
}
.eco-cell:hover .eco-go,
.eco-cell:focus-visible .eco-go{opacity:1; color:var(--eco-accent); transform:translateX(8px)}

/* ===== RESPONSIVE ===== */
@media (max-width:1023px){
  .hero-title{font-size:clamp(2.5rem,6vw,3.6rem)}
  .eco-cell{column-gap:1rem}
}

@media (max-width:767px){
  .landing-hero{padding:5.25rem 1.1rem 2.75rem; min-height:86dvh}
  .landing-hero-media{object-position:center 55%}
  .hero-eyebrow{font-size:.64rem; letter-spacing:.12em; margin-bottom:.65rem}
  h1.hero-title,
  .landing-hero h1.hero-title{
    font-size:clamp(2.35rem,11vw,3.35rem) !important;
    line-height:1.05 !important;
    letter-spacing:-.03em !important;
  }
  .hero-sub{margin-top:.95rem; font-size:.9rem; max-width:340px; line-height:1.55}
  .hero-actions{margin-top:1.35rem; width:100%; flex-direction:column; gap:.65rem}
  .hero-cta{font-size:.95rem; padding-block:.8rem .7rem}

  .home-ecosystem{padding:2.5rem 1.1rem 3rem}
  .eco-cell{
    grid-template-columns:3.4rem minmax(0,1fr) max-content;
    column-gap:.85rem;
    row-gap:.3rem;
    padding:1.25rem .2rem;
  }
  .eco-num{font-size:1.5rem; padding-top:.1rem}
  .eco-desc{max-width:none; font-size:.8rem}

  body > nav + section.landing-hero,
  body > section:first-of-type,
  body > section.landing-hero:first-of-type{
    margin-top:0 !important;
  }
}

@media (max-width:359px){
  .hero-title{font-size:2.2rem !important}
  .hero-eyebrow{display:none}
}

@media (min-width:1440px){
  .landing-hero-content{max-width:940px}
  .hero-sub{max-width:32rem}
}

@media (prefers-reduced-motion:reduce){
  .hero-title,.hero-sub,.hero-actions,.hero-eyebrow{animation:none}
  .landing-hero-media{animation:none}
}