/* =========================
   /style.css  (Shared)
   ========================= */
:root{
  --bg:#ffffff;
  --ink:#0f1a12;
  --muted:#4e6a57;
  --line:#e7efe9;

  --g1:#0b7a3b;
  --g2:#17b15a;
  --g3:#0a5f34;
  --gold:#c9a43a;

  --card:#ffffff;
  --shadow: 0 18px 55px rgba(16,24,18,.12);
  --shadow2: 0 10px 25px rgba(16,24,18,.10);

  --r:18px;
  --r2:24px;
  --w:1180px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background: var(--bg);
  overflow-x:hidden;
}

/* Animated background (subtle) */
.bgGlow{
  position:fixed; inset:-30%;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(23,177,90,.18), transparent 62%),
    radial-gradient(780px 460px at 80% 20%, rgba(11,122,59,.14), transparent 62%),
    radial-gradient(900px 520px at 60% 90%, rgba(201,164,58,.10), transparent 62%);
  opacity:.95;
  animation: drift 14s ease-in-out infinite;
}
.grain{
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode:multiply;
}
@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(2.5%, -1.5%, 0) scale(1.02); }
}

a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--w); margin:0 auto; padding:0 18px; }

header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 12px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  min-width: 260px;
}
.logoMark{
  width:42px; height:42px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 14px 34px rgba(23,177,90,.20);
  position:relative;
  border: 1px solid rgba(255,255,255,.7);
}
.logoMark:before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,26,18,.08);
}
.logoMark:after{
  content:"";
  position:absolute;
  left:12px; right:12px; top:13px; height:11px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(11,122,59,.95), rgba(23,177,90,.95));
  opacity:.95;
}
.brand h1{
  margin:0;
  font-size: 14px;
  letter-spacing:.7px;
  text-transform: uppercase;
}
.brand span{
  display:block;
  margin-top:2px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing:.2px;
}

.links{
  display:flex; align-items:center; gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.links a{
  font-size: 13px;
  color: var(--muted);
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: .18s ease;
  white-space:nowrap;
}
.links a:hover{
  color: var(--ink);
  border-color: var(--line);
  background: #fff;
  box-shadow: var(--shadow2);
  transform: translateY(-1px);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  transition: .18s ease;
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.btn:hover{ transform: translateY(-1px); }
.btn.primary{
  border-color: rgba(23,177,90,.25);
  background: linear-gradient(135deg, var(--g1), var(--g2));
  color:#ffffff;
  box-shadow: 0 18px 55px rgba(23,177,90,.18);
}

main{ position:relative; z-index:1; }

section{ padding: 52px 0; }
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.pad{ padding: 22px; }

.sectionTitle{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.sectionTitle h2{
  margin:0;
  font-size: 26px;
  letter-spacing: -0.2px;
}
.sectionTitle p{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  max-width: 80ch;
}

.grid4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  padding: 16px;
  transition: .18s ease;
  min-height: 128px;
}
.tile:hover{ transform: translateY(-2px); }
.ic{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(23,177,90,.16), rgba(11,122,59,.10));
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  color: var(--g3);
}
.tile h3{ margin: 10px 0 6px; font-size: 15px; }
.tile p{ margin:0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* Models/cards */
.models{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.model{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--shadow2);
  overflow:hidden;
  transition: .18s ease;
}
.model:hover{ transform: translateY(-2px); }

.thumb{
  height: 168px;
  background: linear-gradient(135deg, rgba(23,177,90,.12), rgba(11,122,59,.08));
  border-bottom: 1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.03);
  transform: scale(1.02);
  transition: transform .35s ease;
}
.model:hover .thumb img{ transform: scale(1.06); }
.thumbFallback{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  color: rgba(10,95,52,.65);
  font-weight: 900;
  letter-spacing:.3px;
  text-transform: uppercase;
  font-size: 13px;
  padding: 14px;
  text-align:center;
}

.modelBody{ padding: 16px; }
.modelTop{
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  margin-bottom: 10px;
}
.model h3{ margin:0; font-size: 15px; letter-spacing:.1px; }
.meta{
  color: var(--muted);
  font-size: 12px;
  display:flex; gap: 8px; flex-wrap:wrap;
  margin-top: 6px;
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12px;
  color: var(--muted);
  box-shadow: 0 6px 14px rgba(16,24,18,.07);
  white-space:nowrap;
}
.price{
  display:flex; flex-direction:column; align-items:flex-end;
  gap: 3px;
  min-width: 120px;
}
.price strong{ font-size: 18px; letter-spacing: -0.2px; }
.price span{ font-size: 11px; color: var(--muted); }

.featRow{ display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 0; }
.feat{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 6px 14px rgba(16,24,18,.06);
  font-size: 12px;
  color: var(--muted);
}
.feat b{ color: var(--ink); font-weight: 900; }

.bul{
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height:1.55;
}
.bul li{ margin: 6px 0; }

.note{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(23,177,90,.20);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  box-shadow: var(--shadow2);
}
.note b{ color: var(--ink); }

/* Hero (shared) */
.hero{ padding: 38px 0 24px; }
.heroGrid{
  display:grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 16px;
  align-items: stretch;
}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  box-shadow: var(--shadow2);
}
.dot{
  width:9px; height:9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 0 0 4px rgba(23,177,90,.10);
}
.heroTitle{
  margin: 12px 0 10px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.7px;
}
.lead{
  margin:0 0 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 70ch;
}
.heroBadges{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top: 14px;
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  box-shadow: var(--shadow2);
  font-size: 13px;
}
.badge b{ color: var(--ink); font-weight: 900; }
.pill{
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(23,177,90,.10);
  border: 1px solid rgba(23,177,90,.22);
  color: var(--g3);
  font-weight: 900;
  font-size: 11px;
}
.heroVisual{
  position:relative;
  background:
    radial-gradient(620px 340px at 20% 20%, rgba(23,177,90,.16), transparent 60%),
    radial-gradient(580px 340px at 80% 70%, rgba(11,122,59,.12), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7fbf9);
  border-left: 1px solid var(--line);
  overflow:hidden;
}
.stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding: 18px;
}
.mock{
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.85), transparent 45%),
    linear-gradient(135deg, rgba(23,177,90,.14), rgba(11,122,59,.10));
  box-shadow: 0 22px 60px rgba(16,24,18,.14);
  position:relative;
  overflow:hidden;
  animation: float 6.5s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.roof{
  position:absolute; left:18%; right:18%; top:12%;
  height: 22%;
  transform: skewX(-16deg);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  opacity:.92;
}
.panel{
  position:absolute; left:24%; right:24%; top:17%;
  height: 12%;
  transform: skewX(-16deg);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(15,26,18,.78), rgba(15,26,18,.38));
  border: 1px solid rgba(15,26,18,.10);
  overflow:hidden;
}
.panel:after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 4px, transparent 4px 12px);
  opacity:.7;
}
.base{
  position:absolute; left:16px; right:16px; bottom:16px; height: 46%;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,26,18,.08);
}
.bubble{
  position:absolute;
  width: 86px; height: 86px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,26,18,.10);
  box-shadow: var(--shadow2);
  display:flex; align-items:center; justify-content:center;
  font-size: 28px;
  animation: bob 5.2s ease-in-out infinite;
}
.bubble.b1{ left: 18px; top: 18px; animation-delay: .2s; }
.bubble.b2{ right: 18px; top: 18px; animation-delay: .6s; }
.bubble.b3{ right: 18px; bottom: 18px; animation-delay: .9s; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-4px);} }

/* Two-column utility */
.twoCol{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items:start;
}

/* FAQ/accordion */
details{
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow2);
  padding: 14px 14px;
  transition: .18s ease;
}
details + details{ margin-top: 10px; }
summary{
  cursor:pointer;
  font-weight: 900;
  font-size: 13px;
  color: var(--ink);
  list-style:none;
}
summary::-webkit-details-marker{ display:none; }
details[open]{ border-color: rgba(23,177,90,.25); }
.ans{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height:1.65;
}

.side{
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
}
.side h3{ margin:0 0 8px; font-size: 15px; }
.side p{ margin:0 0 12px; color: var(--muted); font-size: 13px; line-height:1.6; }

.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
label{ font-size: 12px; color: var(--muted); }
input, select, textarea{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  color: var(--ink);
  outline:none;
  font-size: 13px;
  box-shadow: 0 6px 14px rgba(16,24,18,.06);
}
textarea{ min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus{
  border-color: rgba(23,177,90,.40);
  box-shadow: 0 0 0 4px rgba(23,177,90,.12);
}
.full{ grid-column: 1 / -1; }

footer{
  padding: 28px 0 34px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.foot{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px; flex-wrap:wrap;
}

/* Scroll reveal */
.reveal{ opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 980px){
  .heroGrid{ grid-template-columns: 1fr; }
  .heroVisual{ border-left:none; border-top: 1px solid var(--line); min-height: 320px; }
  .twoCol{ grid-template-columns: 1fr; }
  .models{ grid-template-columns: repeat(2, 1fr); }
  .grid4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .links{ display:none; }
  .heroTitle{ font-size: 34px; }
  .models{ grid-template-columns: 1fr; }
  .form{ grid-template-columns: 1fr; }
}
.mockImg{
  position:absolute;
  right: 112px;         /* sits just left of b3 (which is right:18px) */
  bottom: 22px;         /* near b3 (which is bottom:18px) */
  width: 290px;
  height: 125px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(15,26,18,.10);
  background: rgba(255,255,255,.65);
  box-shadow: 0 18px 45px rgba(16,24,18,.16);
  opacity: .95;
  transform: rotate(-1deg);
}

/* Keep it responsive */
@media (max-width: 520px){
  .mockImg{
    width: 280px;
    height: 175px;
    right: 96px;
    bottom: 18px;
  }
}