/* =========================================================
   ECO HOUSE FLORA — Minimal Lookbook Hero
   Palette sampled directly from the logo artwork
   ========================================================= */
:root{
  --charcoal:  #2E2E2C;   /* ring / wordmark */
  --sage:      #9BB09A;   /* leaves — used sparingly */
  --sage-deep: #6E8A6D;   /* leaves, shaded — used sparingly */
  --rose-soft: #F2A99C;   /* rose bloom, highlight */
  --rose:      #E2897C;   /* rose bloom */
  --rose-deep: #C9695B;   /* rose bloom, shaded */
  --blush:     #F7DAD2;   /* petal highlight */
  --paper:     #FFFFFF;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22,.68,0,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
:focus-visible{ outline: 2.5px solid var(--rose-deep); outline-offset: 3px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 60px 24px;
  overflow: hidden;
}

.hero__glow{
  position: absolute; border-radius: 50%; filter: blur(90px);
  opacity: .45; pointer-events: none;
}
.hero__glow--sage{
  width: 42vw; height: 42vw; max-width: 480px; max-height: 480px;
  background: var(--blush); top: -12%; left: -12%;
  opacity: .6;
}
.hero__glow--rose{
  width: 44vw; height: 44vw; max-width: 500px; max-height: 500px;
  background: var(--rose-soft); bottom: -16%; right: -10%;
  opacity: .35;
}

.hero__content{ position: relative; z-index: 2; max-width: 620px; }

.hero__logo{
  width: 128px; height: auto; margin: 0 auto 22px;
  filter: drop-shadow(0 10px 24px rgba(46,46,44,.14));
  animation: fadeUp .9s var(--ease) both;
}

.hero__eyebrow{
  font-family: var(--sans); font-size: .78rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--rose-deep); font-weight: 600; margin: 0 0 16px;
  animation: fadeUp .9s var(--ease) .1s both;
}

.hero__title{
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.5rem, 6.2vw, 4.2rem);
  line-height: 1.08; margin: 0 0 22px; color: var(--charcoal);
  animation: fadeUp .9s var(--ease) .18s both;
}
.hero__title span{
  font-style: italic; font-weight: 500;
  background: linear-gradient(100deg, var(--rose-deep), var(--rose) 55%, var(--rose-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero__subtitle{
  font-size: clamp(1rem, 1.6vw, 1.15rem); color: #5B5B58;
  line-height: 1.7; margin: 0 auto 36px; max-width: 520px;
  animation: fadeUp .9s var(--ease) .26s both;
}

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

/* =========================================================
   BUTTON
   ========================================================= */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: 1rem;
  letter-spacing: .02em;
  padding: 17px 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose-deep), var(--rose));
  color: #fff;
  box-shadow: 0 16px 32px -12px rgba(201,105,91,.5);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  animation: fadeUp .9s var(--ease) .34s both;
}
.btn:hover{ transform: translateY(-3px); box-shadow: 0 22px 40px -12px rgba(201,105,91,.55); }
.btn:active{ transform: translateY(-1px) scale(.98); }
.btn__icon{ font-size: 1.05em; }