:root{
  --green-600: #1f8f4a;
  --green-700: #176f38;
  --yellow-500: #f6d64c;
  --bg: #ffffff;
  --muted: #6b7280;
  --glass: rgba(255,255,255,0.7);
  --card-shadow: 0 8px 30px rgba(17,24,39,0.08);
  --accent-grad: linear-gradient(135deg,var(--green-600), #3aa76b 60%, var(--yellow-500));

  /* Replace this with your hero/background image path */
  --hero-img: url('/images/hero-simple-bg.jpg');

  /* How far the hero-card is pulled up (negative = pulled up). Tweak to taste. */
  --hero-card-lift: -80px;
  --hero-card-lift-mobile: -30px; /* gentler lift for phones */
}

/* Page reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  position:relative;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding-bottom:64px;
  background: radial-gradient(circle at 10% 10%, rgba(31,143,74,0.03), transparent 20%), #f3f7f5;
  -webkit-font-smoothing:antialiased;
}

/* Fixed full-page background image (desktop & tablet) */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* fallback overridden on mobile in media queries below */
  z-index: -9999;
  will-change: transform;
}

/* translucent brand tint over the background image */
body::after{
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(31,143,74,0.12), rgba(31,143,74,0.04));
  mix-blend-mode: multiply;
  z-index: -9998;
  pointer-events: none;
}

/* Container (content) */
.container{max-width:1200px;margin:0 auto;padding:28px;position:relative;z-index:2}

/* ---------- NOTE: header/topbar styles removed as requested ---------- */

/* HERO
   Transparent so the fixed background image shows through.
   Align at the top so the hero-card (form) sits nearer the top of the page.
*/
.hero{
  display:flex;
  align-items:flex-start;       /* keep content at the top of the hero area */
  justify-content:center;
  gap:28px;
  margin-top:18px;
  background: transparent;      /* page image handled via body::before */
  border-radius:18px;
  padding:8px 28px 48px;        /* small top padding so card is higher */
  position:relative;
  overflow:visible;
  /* use a moderate min-height on larger screens; we'll remove for phones */
  min-height:85vh;
  z-index:2;
}

/* tiny inner overlay to keep readability on busier images */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));
  mix-blend-mode: normal;
  pointer-events:none;
  z-index:1;
}

/* hero card: visual styles preserved; pulled up using --hero-card-lift */
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.82));
  padding:36px;
  border-radius:20px;
  box-shadow:var(--card-shadow);
  position:relative;
  overflow:hidden;
  max-width:720px;
  width:100%;
  z-index:3; /* above overlays and fixed image */
  backdrop-filter:blur(6px);
  border: 1px solid rgba(17,24,39,0.04);

  /* pull the card up */
  margin-top: var(--hero-card-lift);
}

/* typography inside hero (unchanged) */
.hero h2{font-size:28px;margin:0 0 12px 0;color:var(--green-700)}
.hero p{margin:0 0 18px;color:rgba(15,23,42,0.75)}

/* Center the form (no change to internal visual rules) */
.hero-card .cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center; /* centers the search + buttons */
}

/* search input (kept identical) */
.search{
  display:flex;
  gap:8px;
  background:rgba(247,251,249,0.92);
  padding:10px;
  border-radius:12px;
  align-items:center;
  border:1px solid rgba(17,24,39,0.04);
  flex:1;
  min-width:260px;
}
.search input{border:0;background:transparent;outline:none;padding:10px 8px;font-size:15px;width:100%}

/* Buttons default — keep visual; we will make them full-width on phones */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:none;background:transparent;cursor:pointer}
.btn.primary{background:var(--green-600);color:white;box-shadow:0 6px 18px rgba(17,24,39,0.12)}
.btn.ghost{background:transparent;color:var(--green-700);border:1px solid rgba(23,111,56,0.08)}

/* Hero visual placeholder (unchanged) */
.visual{display:none}
.visual{
  height:340px;border-radius:18px;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;
  color:#08321b;font-weight:700;position:relative;overflow:hidden;
}
.visual .floating{position:absolute;border-radius:50%;filter:blur(18px);opacity:0.4}
.visual .f1{width:160px;height:160px;left:-40px;top:-30px;background:#dff7d5}
.visual .f2{width:100px;height:100px;right:-20px;bottom:-20px;background:#fff6cc}
.visual svg{width:80%;height:auto;max-width:360px}

/* Grid of feature cards (unchanged visuals) */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.feature-card{
  position:relative;padding:18px;border-radius:20px;
  background:linear-gradient(180deg,#ffffff, #f8fff7);
  box-shadow:var(--card-shadow);
  overflow:visible;cursor:pointer;
  transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s
}
.feature-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(17,24,39,0.12)}
.feature-card::before{content:'';position:absolute;right:-36px;top:-36px;width:160px;height:160px;background:var(--yellow-500);border-radius:18px;transform:rotate(25deg);opacity:0.12}
.feature-card .badge{display:inline-flex;padding:6px 10px;border-radius:999px;font-weight:600;background:linear-gradient(90deg, rgba(31,143,74,0.12), rgba(246,214,76,0.11));color:var(--green-700);font-size:12px}
.feature-card h3{margin:12px 0 6px 0;font-size:18px}
.feature-card p{margin:0;color:var(--muted);font-size:14px}

/* Icon container (unchanged) */
.ic{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:white;background:var(--green-700);box-shadow:0 10px 30px rgba(23,111,56,0.08)}

/* CTA strip & footer (unchanged) */
.strip{margin-top:26px;padding:16px;border-radius:14px;background:linear-gradient(90deg, rgba(31,143,74,0.06), rgba(246,214,76,0.03));display:flex;align-items:center;justify-content:space-between}
.strip .note{color:var(--muted);font-size:14px}
.footer{margin-top:48px;color:var(--muted);font-size:13px;text-align:center;position:relative;z-index:2}

/* ----------------------
   Responsive: tablet & phone fixes
   ---------------------- */
@media (max-width:980px){
  .hero{padding:6px 18px 36px; min-height:70vh}
  .hero-card{
    padding:28px;
    margin-top: calc(var(--hero-card-lift) / 2);
  }
  .visual{height:220px}
}

/* Phone (narrow) layout improvements */
@media (max-width:600px){
  /* many mobile browsers don't respect fixed background-attachment; fall back to scroll */
  body::before{ background-attachment: scroll; /* fallback for mobile */ }

  .container{ padding:16px; }

  /* remove forced large viewport height on phones to avoid strange empty spaces */
  .hero{ padding:8px 14px 28px; min-height:auto; margin-top:8px; }

  /* reduce lift so the card doesn't overlap the viewport top too much */
  .hero-card{
    margin-top: var(--hero-card-lift-mobile);
    border-radius:14px;
    padding:20px;
    max-width:720px;
  }

  /* stack the form vertically for easier input & tapping */
  .hero-card .cta-row{
    flex-direction:column;
    gap:12px;
    align-items:stretch;
  }

  /* make the search take full width and buttons full width */
  .search{ min-width:0; width:100%; }
  .btn{ width:100%; justify-content:center; padding:12px; }

  /* tighten typography and spacing */
  .hero h2{ font-size:20px; }
  .hero p{ font-size:14px; margin-bottom:14px; }

  /* feature cards -> single column */
  .grid{ grid-template-columns: 1fr; gap:12px; margin-top:18px; }

  /* footer spacing */
  .footer{ margin-top:28px; font-size:13px; }
}

/* Extra small phones */
@media (max-width:420px){
  .hero-card{ margin-top: calc(var(--hero-card-lift-mobile) / 1.2); padding:16px; }
  .hero h2{ font-size:18px; }
  .hero p{ font-size:13px; }
  .btn{ padding:10px; font-size:15px; }
}

/* small interactive tilt */
.tilt-wrap{perspective:1200px}
.tilt-inner{transition:transform .18s ease-out}

/* subtle entrance */
.fade-up{opacity:0;transform:translateY(10px);animation:fadeUp .7s forwards}
.fade-up.delay{animation-delay:.12s}
@keyframes fadeUp{to{opacity:1;transform:none}}