:root{
  /* --gradient-light: #94D640;
  --gradient-dark: #00662F; */
  --border-color: #CEE5C9;
  /* --gradient: linear-gradient(to right, var(--gradient-dark), var(--gradient-light) ); */
  --gap: 24px;
  --Hdr-bg: #ffffffa1;
  --bg-base: #fff;
  /* --Hdr-pos: fixed; */
  --menu-pos: absolute;
  --menu-backdrop: blur(7px);
  --Hdr-h: 6rem;
  --menu-el-padd: .8em .8em;
  --brand: #4db239;
  --brand-dark: #00662F;
  /* --brand-lite: #8fff00; */
  --brand-lite: #94D640;
  --gradient: linear-gradient(to right, var(--brand-dark), var(--brand-lite) );
  --ftr-bg: #e6efe8;
  --block-rnd: 24px;
  --mt: var(--col-gap);
  --mb: var(--col-gap);
  --col-gap05x: .5rem;
  --col-gap: 1rem;
  --col-gap2x: 2rem;
  --col-gap3x: 3rem;
  --col-gap4x: 4rem;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.-gap-0 {gap: 0rem;}
.-gap-025 {gap: calc(var(--gap)/4);}
.-gap-05 {gap: calc(var(--gap)/2);}
.-gap-1 {gap: var(--gap);}
body{ overflow-x: hidden;
view-transition-name: page;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 100px 0px 0px 0px;
font-family: 'Montserrat', sans-serif;
gap:var(--gap)
}
body > section {
  max-width: 1200px;
}
body > script + * {position: absolute;}
.Hero-img {height: 80vh; min-height: 600px;}
.Hero-img:before {content:''; position: absolute; bottom: 0%; left: 0; width: 100%; aspect-ratio: 2/1; background: var(--brand); border-radius: 50%; filter: blur(100px); opacity: .4;}
.Hero-img img { --hero-delay: 0s; --hero-play: 3s; mask-size: contain; height: 80vh; min-height: 600px;
  -webkit-mask-image: url('img/mask.svg'); mask-image: url('img/mask.svg');
  animation: hero-img calc(var(--hero-play) * 7) linear infinite; position: absolute;
  right: 0; left: 0; top: 0; bottom: 0; margin: auto;
  animation-delay: calc(var(--hero-delay) * var(--hero-play));
  transform: rotate(-15deg);
  transform-origin: center;
}
.Hero-img img:nth-child(2) { --hero-delay: 1;}
.Hero-img img:nth-child(3) { --hero-delay: 2;}
.Hero-img img:nth-child(4) { --hero-delay: 3;}
.Hero-img img:nth-child(5) { --hero-delay: 4;}
.Hero-img img:nth-child(6) { --hero-delay: 5;}
.Hero-img img:nth-child(7) { --hero-delay: 6;}
@keyframes hero-img {
  0% {opacity: 0; z-index: 10; }
  4% {opacity: 1;}
  96% {opacity: 1;}
  100% {opacity: 0; z-index: 0;}
}
.home-content {padding: 3rem 24px; background: #fff; z-index: 11; margin-top: -35vh; border-radius: var(--block-rnd);}
.hero{
  display: flex;
  width: 100%;
  max-width: 1200px;
}

.Hero-img, .home-txt {
  /* position: sticky; top: -100px; */
  animation: hero ease-out forwards;
  animation-timeline: view();
  animation-range: 100vh 250vh;
}
@keyframes hero {
  to { transform: scale(.8);}
}
.-fw-b {font-weight: bold}
.home-phn{
  display: block;
  margin: 0 auto;
}
.-bg{
  z-index: -1;
}
.-base-bg {background: var(--bg-base);}
.-phone-bg{
  left: 98px;
  z-index: -1;
  position: absolute;
  top: 40px;
}
.-id-bg{
  z-index: -1;
  max-width: 100%;
}

/* COUNTER */
/* Define a custom CSS property '--num' that can be animated as an integer */
@property --num {
  syntax: "<integer>";
  initial-value: 12990;
  inherits: false;
}
/* Base style for number animation elements */
.number-animation {
  --num: 13990;
  counter-reset: num var(--num);
}
/* Use the ::after pseudo-element to display the current value of the counter */
.number-animation::before {
  content: counter(num);
}
/* Keyframe animations to animate --num from 0 up to the target number */
/* Example animation from 0 to 50 */
@keyframes counter--50 {
  from {--num: 14590;}
  to {--num: 15000;}
}
@keyframes counter--50a {
  from {--num: 7590;}
  to {--num: 8000;}
}
/* Animation classes that apply the corresponding keyframe animations */
.animate--50 {
  animation: counter--50 1.5s ease forwards;
}
.isFarm .animate--50 {
  animation: counter--50a 1.5s ease forwards;
}
/* COUNTER */
.txt-section{
  flex-direction: column;
  display: flex;
  gap: 12px;
}
.txt-block {
  --pd-b: 40px;
  border-radius: var(--block-rnd);
  /* background: #ffff; */
  background: var(--bg, linear-gradient(0deg, #fff 0%, #F9F9F9 100%));
  box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .05);
  border: 1px solid #eee;
  padding: 20px 28px var(--pd-b) 28px;
  overflow: clip;
}
.txt-block.--py {--pd-b:20px}
.txt-block-cntnt{
  display: flex;
  flex-direction: column;
}
.txt-block-cntnt:not(class*=-gap-) {gap: 16px}
.cntnt-wrapper{ 
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding-left: var(--gap);
  padding-right: var(--gap);
}
.cntnt-wrapper.homescreen {padding: 0;}
.mask-img{
  color: transparent;
  position: absolute;
  height: 100%;
}

.features{
  gap: 72px;
  display: flex;
}

/* FAQ */
.faq-entry{
  transition: border-radius ease-out .4s;
  padding: 24px 36px;
  background: var(--bg, linear-gradient(0deg, #fff 0%, #F9F9F9 100%));
  box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .05);
  border: 1px solid #eee;
  border-radius: var(--block-rnd);
}
.faq-entry figcaption {font-weight: 400; padding:  0 2em 0 0;}
.faq-entry:has(.question:checked) { border-radius: calc(var(--block-rnd)/2);}
.faq-txt{
  min-height: 2.5em;
  align-content: center;
}
.state-ico{
  rotate: 180deg;
  top: 1rem;
  margin: -0.75em auto auto -2em;
  top: 50%;
  height: 1.5em;
  width: 1.5em;
  transition: all ease-out 0.1s;
  background:url(img/arrow.svg);
  background-size: contain;
  right: 0;
}
.answer {
  max-height: 0;
  opacity: 0;
  transition: all ease-out 0.2s;
}
input:checked~figcaption .state-ico {
  rotate: 0deg;
  transition: rotate cubic-bezier(0, 0, 0, 1.44) 0.5s 0.2s;
}
.question:checked~.answer {
  /* min-height: 2.5em;
  align-content: center; */
  opacity: 1;
  max-height: 450px;
  transform: translateY(0px);
  transition: max-height cubic-bezier(0.4, 0, 1, 1) 0.4s, opacity linear 0.3s 0.1s;
}
/* FAQ */
/* UNIVERSAL */
.btn {
  cursor: pointer; font-family: inherit;
  min-width: fit-content;
  padding: .75em 1.5em; border-radius: 1.5em; border: 0;
  background: var(--gradient);
  color: white;
  transition: all ease-out .4s;
  overflow: clip;
}
.btn.-raw {background: transparent; padding: 0;
    line-height: 1em;
    min-width: 1em;
    text-align: center;
  }
.btn:hover {background-position: 100% 100%;}
.--col{flex-direction: column;}
.-rnd {border-radius: 1em;}
img.-rnd {border-radius: 12px;}
img.-sh {box-shadow: 10px 20px 40px rgba(0,0,0,0.4);}
.-abs-c{
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
}
[class*=btn]:not(.-abs) {position: relative}
[class*=btn]:after {
  content: "";
  position: absolute;
  background: #000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0, 0);
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 500px;
  opacity:.2;
  transition: transform ease-in-out 0.3s, opacity ease-in-out 0.2s 0.1s;
  mix-blend-mode: overlay;
}
[class*=btn]:hover:after {transform: translate(-50%, -50%) scale(1, 1); opacity: .5;}
/* .-rel {
  position: relative
} */
.-jc-c{justify-content: center;}
.-jc-sb{justify-content: space-between;}
.-jc-end{justify-content: flex-end;}
.-jc-start{justify-content: flex-start;}
.-ta-c{text-align: center;}
.-ai-c{align-items: center;}
.ac-c{align-content: center}
.-wa-h1{
  width: auto;
  height: 100%;
}
.-flx{
  display: flex;
  flex-wrap: wrap;
}
.-gap-1{gap: 24px}
.-spc-b{justify-content:space-between}
.-h100{height:100%}
.-w100{width:100%}
.-r{right:0}
.-t{top:0}
.-l{left:0}
.-bright-w{filter: brightness(5)}
[class*=-t-] {color:var(--t)}
.-t-white{--t: white}
.-t-brand {--t: var(--brand)}

[class*=-bg-] {background:var(--bg)}
.-bg-brand {--bg:var(--brand)}
.-bg-base {--bg:var(--bg-base)}
.-bg-gradient {--bg:var(--gradient)}

.img-c{
  display: block;
  margin: 0px auto;
  max-height: 600px;
}
/* MENU */
.menu{
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 20px;
  right: 20px;
}
.menu-cntnt{
  max-width: 1200px;
  display: flex; flex-wrap: nowrap;
  align-items: center;
  margin-top: 20px;
  padding: 12px 24px;
  margin: auto;
  /* gap: 48px; */
}
.menu-cntnt:before { content:''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;
  background: #ffffffc9;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--block-rnd);
  box-shadow: 0px 0px 20px #00000025;
}
/* MENU */
.toggle-section{
  padding: 40px 0;
}

/* Care guide / cultivation tips */
.guides-left > * {
  width: 100%;
}
.img-r{
 top: -10px;
 right: 0px;
  margin-bottom: -280px;
}
.img-size {
  height: 460px;
  width: auto;
  display: block;
}
.img-size:not([class*=mt-]) {margin: auto;}
.img-sub{
  /* width: auto; */
  /* height: 30%; */
  position: absolute;
  left: -40px;
  top: 60px;
  object-fit: contain;
  max-width: 230px;
  animation-duration: 2s !important;
  animation-timing-function: cubic-bezier(0.33, 0.27, 0.41, 1.16) !important;
}
/* Care guide / cultivation tips */

/* Care reminder / disease and pests */
.reminder-txt{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.feature-header{
  display: flex;
}
/* Text */
*, p, h1, h2, h3, h4, h5, h6{
  margin: 0;
  font-size: var(--f-size);
}
.h0{--f-size: 56px}
h1, .h1{--f-size: 40px}
h2, .h2{--f-size: 32px}
h3, .h3{--f-size: 26px}
h4, .h4{--f-size: 22px}
h5, .h5{--f-size: 18px}
p, .p{--f-size: 14px; line-height: 1.4em;}
h6, .h6{--f-size: 11px}
/* Text */
svg.-icon {width: 1em; height: 1em;}
h1 sup {font-size: .5em;}

/* Popup */
:where(dialog)::backdrop {
    background: oklch(0% 0 0/0.3)
}

:where(dialog)::backdrop,:where(dialog,[popover]) {
    opacity: 0;
    transition: opacity .2s ease-out, display .15s allow-discrete, overlay .15s allow-discrete
}

:where(dialog[open])::backdrop,:where(dialog[open],:popover-open) {
    opacity: 1
}

@starting-style {
    :where(dialog[open])::backdrop,:where(dialog[open], :popover-open) {
        opacity:0
    }
}

dialog {transition: opacity linear 0.2s,transform ease-out 0.2s; margin: auto;
    border: none; background: transparent;
    width: 95vw;
    max-width: 500px;}
dialog:open {
    opacity: 1;
    transform: scale(1)
}
dialog:open ::backdrop {
    opacity: 1
}

dialog ::backdrop {
    backdrop-filter: blur(5px);
    background: rgba(0,0,0,0.4);
    opacity: 0
}
@starting-style {
    dialog:open {
        opacity:0;
        transform: scale(0.8)
    }

    dialog:open ::backdrop {
        opacity:0
    }
}

.popup-box {
  background: white;
  border-radius: var(--block-rnd);
  padding: 24px 36px 36px 36px;
  /* transform: scale(0.7) translateY(100px);
  transition: all 0.2s 0.1s cubic-bezier(0.3, 0.5, 0.7, 1); */
  flex-direction: column;
  display: flex;
  gap: 12px;
}

.form :where(input, select, textarea){
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #bbbbbb15;
}
.form :where(input:focus, select:focus, textarea:focus) {
  outline: var(--brand);
}
.active{
  visibility: visible;
  opacity: 1;
}
#modal-x {width: 1em; cursor: pointer; margin-top: -1rem; transition: transform ease-out .3s;}
#modal-x:hover {transform: scale(1.1);}

.active > .popup-box {
transform: scale(1) translateY(0)
}
/* Popup */
.s-pd{
  padding-bottom: 96px;
}

.footer{
  background:var(--ftr-bg);
  overflow: hidden;
}
.ftr-hldr{
  margin: auto;
  max-width: 1200px;
  gap: 12px;
}
.ftr-link{
  text-decoration: underline;
  cursor: pointer;
}
.ftr-link:hover{
  color: var(--brand-dark);
}
.ftr-c{
  gap: 48px;
}
.question{
  left: 0;
  top: 0;
  cursor: pointer;
  appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.-ar-2x1 {aspect-ratio: 2/1;}
.-opaq-07 {opacity: .7;}
.-opaq-05 {opacity: .5;}
.-opaq-03 {opacity: .3;}
.-opaq-02 {opacity: .2;}
.-opaq-01 {opacity: .1;}
.content :where(p, ul, h1, h2, h3, h4, h5) {
  padding: 1em 0 .25em 0;
}
.content a {color: var(--brand-dark);transition: all ease-out 0.2s; text-underline-offset: 0.3em;}
.content a:hover {text-decoration-thickness: 1.5px;
    text-underline-offset: 0.4em;}
/* -----------------------------------------scroll transitions */
@keyframes hdr-h {
  from { margin-top: 20px; padding: 12px 16px; }
  to { margin-top: 10px; padding: 4px 16px; }
}
@keyframes hdr-logo-h {
  to {transform: scale(.85);}
}
@keyframes hdr-toggl-h {
  to {transform: scale(.85);}
}
@keyframes fade-up {
	to {
		opacity: 1;
    transform: translate(0);
	}
}
@keyframes shrink-in {
	to {
		opacity: 1;
    margin: 0px 0px;
	}
}
@keyframes toggle-wrap {
  0% {
		opacity: 0; margin: 0px -50px;transform: scale(1)
	}
	20%, 80% {
		opacity: 1; margin: 0px 0px; transform: scale(1)
	}
  100% {
		opacity: 0; margin: 0px 0px; transform: scale(.9);
	}
}
@keyframes zoom {
	to {
		opacity: 1;
    transform: scale(1);
	}
}
@keyframes up {
	to {transform: translateY(-50px);}
}
[class*=---] {
  --scroll-shift: 50px;
}
.---fade-l, .---fade-r, .---fade-up, .---fade-down {
    opacity: 0;
    animation: fade-up ease-out forwards;
    animation-timeline: view();
    animation-range: 50px 30%;
}
.---fade-up {transform: translateY(var(--scroll-shift));}
.---fade-down {transform: translateY(calc(-1 * var(--scroll-shift))); }
.---fade-l {transform: translateX(var(--scroll-shift)); }
.---fade-r {transform: translateX(calc(-1 * var(--scroll-shift))); }
.---delay-01 {animation-range: 0px 40%;}
.---delay-02 {animation-range: 150px 50%;}
.---delay-03 {animation-range: 250px 60%;}

.---hdr-logo-h {--scroll-a: hdr-logo-h;}
.---hdr-h {--scroll-a: hdr-h;}
.---hdr-toggl-h {--scroll-a: hdr-toggl-h;}
.---hdr-h, .---hdr-logo-h, .---hdr-toggl-h {animation: var(--scroll-a) ease-out forwards;
  animation-timeline:scroll();
  animation-range: -10px 80px;}

.---toggle-wrap { opacity: 0;
  animation: toggle-wrap linear forwards;
  animation-timeline: view();
  animation-range: 100px  108vh;
}
.---shrink-in { 
  margin: 0px -50px;
   animation: shrink-in ease-out forwards;
}
.---zoom {
  transform: scale(0.9);
  animation: zoom ease-out forwards;
}
.---zoom, .---shrink-in {opacity: 0; 
  animation-timeline: view();
  animation-range: 100px  25%;}
.----long {animation-range: 100px  100%; --scroll-shift: 150px;}

.svglogo {width: 120px; transform-origin: 0% 50%;}
.svglogo path {fill: var(--brand)}
.svglogo #logo-o {stroke: var(--brand);}
@media (min-width: 22.5rem) {
  .img-c{
    max-height: 420px;
  }
  .img-sub{
    left: 0;
  }
  .ftr-hldr{
    padding: 24px;
  }
}
@media (min-width: 35.5rem) {
    :root {
    --block-rnd: 36px;
  }
  .svglogo {width: 150px;}
  .Omniplant-txt{
    font-size: 88px;
  }
  .h0{--f-size: 72px}
  h1, .h1{--f-size: 56px}
  h2, .h2{--f-size: 40px}
  h3, .h3{--f-size: 32px}
  h4, .h4{--f-size: 28px}
  h5, .h5{--f-size: 24px}
  p, .p{--f-size: 16px}
  h6, .h6{--f-size: 12px}
  
  .img-c{
    max-height: 600px;
  }
  .s-pd{
    padding-bottom: 96px;
  }
  .img-sub{
    left: -40px;
  }
}
@media (min-width: 48rem) {
  .home-content {margin-top: 0;}
  .Hero-img:before {bottom: 15%;
    left: -20%;
    width: 95%;
    transform: rotate(79deg) skew(-5deg, -20deg);
    background: linear-gradient(45deg, transparent, #e7e7e7);
    border-radius: 40px;
    filter: blur(5px);}
  .svglogo {width: 180px;}
}
@media (min-width: 1000px) {
  .Omniplant-txt{
    font-size: 88px;
  }
  .h0{--f-size: 80px}
  h1, .h1{--f-size: 60px}
  h2, .h2{--f-size: 44px}
  h3, .h3{--f-size: 36px}
  h4, .h4{--f-size: 28px}
  h5, .h5{--f-size: 24px}
  p, .p{--f-size: 16px}
  h6, .h6{--f-size: 12px}
}
@media (min-width: 64rem) {
  Omniplant-txt{font-size: 96px;}
  :root {
    --block-rnd: 40px;
  }
  .hero{
    gap: 24px;
  }
  .txt-block{ --pd-b: 64px;
    padding: 32px 36px var(--pd-b) 36px;
  }
  .txt-block.--py {--pd-b:32px}
  .s-pd {
      padding-bottom: 96px;
  }
  .ftr-hldr{
    padding: 36px;
  }
}