:root{
    --pastel-green:#c6f2cb;
    --light-green:#dff7df;
    --primary-green:#6ccf85;
    --dark-green:#165a37;
    --accent-green:#2fa36a;
    --cream:#f7fff7;
    --text-dark:#0b2a1a;
    --text-medium:#2f5b45;
    --gold: #d4af37;
  }

  /* Reset & base */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(130deg, var(--pastel-green) 0%, var(--light-green) 35%, var(--primary-green) 100%);
    color:var(--text-dark);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* full hero canvas */
  .hero {
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6vh 6vw;
    overflow:hidden;
  }

  /* subtle animated gradient overlay (motion) */
  .bg-shift{
    position: absolute;
    inset:0;
    background: linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    pointer-events:none;
    mix-blend-mode: overlay;
    z-index:0;
    animation: bgShift 20s linear infinite;
  }
  @keyframes bgShift{0%{transform:translateX(-10%)}50%{transform:translateX(10%)}100%{transform:translateX(-10%)}}

  /* watermark (darker, behind) */
  .watermark{
    position:absolute;
    left:-10%;
    top:18%;
    font-size:10vw;
    font-weight:800;
    color:rgba(8,45,27,0.09); /* darker than before */
    letter-spacing:6px;
    transform:translateZ(0);
    white-space:nowrap;
    z-index:0;
    pointer-events:none;
    animation: watermarkMove 0s linear infinite;
  }
  @keyframes watermarkMove{0%{transform:translateX(0)}100%{transform:translateX(260%)}}

  /* many floating keywords */
  .floating-word{
    position:absolute;
    font-weight:700;
    color: rgba(7,47,26,0.65);
    letter-spacing:1px;
    font-size:clamp(0.9rem,1.6vw,1.3rem);
    pointer-events:none;
    opacity:0.95;
    transform-origin:center;
    animation: floaty 8s ease-in-out infinite;
  }
  .floating-word:nth-child(1){top:8%; left:6%; animation-delay:0s}
  .floating-word:nth-child(2){top:20%; right:6%; animation-delay:1.2s}
  .floating-word:nth-child(3){bottom:20%; left:5%; animation-delay:2.1s}
  .floating-word:nth-child(4){top:40%; right:16%; animation-delay:0.5s}
  .floating-word:nth-child(5){bottom:12%; right:8%; animation-delay:1.6s}
  .floating-word:nth-child(6){top:60%; left:18%; animation-delay:2.6s}
  .floating-word:nth-child(7){top:34%; left:44%; animation-delay:3.3s}
  @keyframes floaty{
    0%{transform:translateY(0) rotate(-1deg)}
    50%{transform:translateY(-18px) rotate(1deg)}
    100%{transform:translateY(0) rotate(-1deg)}
  }

  /* main layout — product large image right, content left */
  .hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem,4vw,4rem);
    align-items:center;
    width:100%;
    max-width:1400px;
  }

  /* text area */
  .content{
    padding: clamp(1rem,2vw,2rem);
    align-self:start;
    transform:translateY(0);
  }
  .kicker{
    color:var(--dark-green);
    font-weight:700;
    letter-spacing:1px;
    font-size:0.95rem;
    margin-bottom:0.9rem;
  }
  h1.product-title{
    font-size:clamp(2.2rem,4.2vw,3.6rem);
    line-height:1.02;
    margin-bottom:1rem;
    color:var(--text-dark);
    font-weight:800;
  }
  p.lead{
    color:var(--text-medium);
    font-size:clamp(1rem,1.6vw,1.05rem);
    margin-bottom:1.4rem;
    max-width:56ch;
  }

  ul.features{
    list-style:none;
    padding:0;
    margin:0 0 1.8rem 0;
    display:grid;
    gap:0.8rem;
  }
  ul.features li{
    display:flex;
    align-items:center;
    gap:0.8rem;
    color:var(--text-dark);
    font-weight:600;
  }
  ul.features li i{ color:var(--primary-green); font-size:1rem; }

  /* CTAs */
  .ctas{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
  .btn-primary{
    background:linear-gradient(180deg,var(--dark-green),var(--accent-green));
    color:white;
    border:none;
    padding:0.95rem 1.8rem;
    border-radius:999px;
    font-weight:700;
    box-shadow: 0 12px 30px rgba(10,45,20,0.18);
    transform:translateZ(0);
    transition: transform .28s ease, box-shadow .28s;
  }
  .btn-primary:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 20px 40px rgba(10,45,20,0.22)}
  .btn-ghost{
    background:transparent;
    color:var(--dark-green);
    border:2px solid rgba(10,45,20,0.12);
    padding:0.8rem 1.6rem;
    border-radius:999px;
    font-weight:700;
    transition: all .2s;
  }
  .btn-ghost:hover{ background:rgba(255,255,255,0.06); transform:translateY(-4px); border-color:rgba(10,45,20,0.18) }

  /* small floating product badge */
  .product-badge{
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    margin-top:2.4rem;
    padding:0.7rem 1rem;
    background: rgba(255,255,255,0.85);
    border-radius:14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    font-weight:700;
    color:var(--text-dark);
    width:fit-content;
  }
  .product-badge img{width:36px;height:28px;object-fit:cover;border-radius:6px}

  /* product visual (bigger than content) - center right */
  .visual-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    perspective:1400px;
  }
  .visual-card{
    width:min(56vw,820px);
    max-width:900px;
    aspect-ratio: 1.1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    transform-style:preserve-3d;
    transition: transform 0.45s cubic-bezier(.2,.9,.25,1), box-shadow .3s;
    will-change:transform;
    filter: drop-shadow(0 30px 60px rgba(7,42,24,0.16));
  }

  /* the actual image "plane" */
  .visual-card .product-img{
    width:92%;
    height:92%;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform-origin:center;
    transition: transform .6s cubic-bezier(.2,.9,.25,1);
    backface-visibility:hidden;
    position:relative;
    overflow:visible;
  }
  .visual-card .product-img img{
    width:88%;
    height:auto;
    object-fit:contain;
    transform: translateZ(40px) rotateZ(-6deg);
    transition: transform .9s cubic-bezier(.2,.9,.25,1);
    will-change:transform;
  }

  /* small accent shadow element behind product */
  .visual-card::before{
    content:'';
    position:absolute;
    inset:auto -6% -6% -6%;
    width:120%;
    height:70%;
    background: radial-gradient(60% 40% at 50% 50%, rgba(20,80,40,0.12), rgba(10,50,30,0.04));
    border-radius:40%;
    z-index:-1;
    filter: blur(30px);
  }

  /* interactions: hover tilt and float */
  .visual-card:hover{ transform: translateY(-12px) rotateX(6deg) rotateZ(-2deg); }
  .visual-card:active{ transform: translateY(0) rotateX(0) rotateZ(0) }
  .visual-card.float{ animation: subtleFloat 6s ease-in-out infinite; }
  @keyframes subtleFloat{0%{transform: translateY(0)}50%{transform: translateY(-14px)}100%{transform: translateY(0)}}

  /* responsive adjustments */
  @media (max-width:1100px){
    .hero-grid{ grid-template-columns:1fr; gap: clamp(1.5rem,5vw,2.8rem); align-items:center}
    .visual-card{ width:86vw; aspect-ratio: 1.05/1 }
    .watermark{ display:block; font-size:14vw; top:10%}
  }
  @media (max-width:600px){
    .kicker{font-size:0.85rem}
    .product-title{font-size:2rem}
    .product-badge{margin-top:1.6rem}
    .product-desc{font-size:0.98rem}
    .visual-card .product-img img{ transform: translateZ(30px) rotateZ(-4deg); width:95% }
  }

  /* subtle entrance */
  .reveal-up{ transform: translateY(18px); opacity:0; animation:revealUp .9s forwards .25s }
  @keyframes revealUp{ to{transform:none; opacity:1} }