/* ============================================================
   MOTE — style.css
   Gelatinous acid green / lime. No sharp edges anywhere.
   ============================================================ */

:root{
  /* Surfaces */
  --lime-a:      #E7E85B;
  --lime-b:      #C9DE6B;
  --cream:       #F3F3DE;
  --deep-a:      #0D5A26;
  --deep-b:      #1A7A34;

  /* Ink — all checked against their own background for >= 4.5:1 */
  --ink:         #14421D;   /* body text on lime / cream      ~ 8.1:1 on lime  */
  --ink-strong:  #0B3717;   /* headings on lime / cream                        */
  --ink-soft:    rgba(20,66,29,.72);
  --on-deep:     #F3F3DE;   /* body text on deep green        ~ 11.7:1         */
  --on-deep-soft:rgba(243,243,222,.80);

  /* Accent. #6FD03A is decorative only — it fails on lime.
     --signal-text is the readable variant used for text on deep green (5.7:1). */
  --signal:      #6FD03A;
  --signal-text: #8AE04F;
  --signal-deep: #2E7D18;

  /* Radii — nothing under 20px */
  --r-sm: 20px;
  --r-md: 28px;
  --r-lg: 40px;
  --r-xl: 48px;
  --r-pill: 999px;

  /* Shadows — wide, diffuse, never hard */
  --sh-soft:  0 18px 50px -20px rgba(13,90,38,.30);
  --sh-lift:  0 30px 80px -28px rgba(13,90,38,.42);
  --sh-deep:  0 34px 90px -30px rgba(4,40,16,.55);

  --ease-jelly: cubic-bezier(.34,1.56,.64,1);
  --ease-soft:  cubic-bezier(.22,.61,.36,1);

  --wrap: 1140px;
  --wrap-narrow: 780px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:"Outfit","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(1rem, .96rem + .22vw, 1.125rem);
  line-height:1.75;
  letter-spacing:.005em;
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 82% -8%, rgba(255,255,255,.42), transparent 58%),
    linear-gradient(168deg, var(--lime-a) 0%, var(--lime-a) 26%, var(--lime-b) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.025em;
  color:var(--ink-strong);
  margin:0;
  text-wrap:balance;
}

p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--signal); color:#0B3717; }

:focus-visible{
  outline:3px solid var(--signal-deep);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--deep-a); color:var(--cream);
  padding:.85rem 1.4rem; border-radius:0 0 var(--r-md) 0;
  text-decoration:none; font-weight:500;
}
.skip-link:focus{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem); }
.wrap--narrow{ max-width:var(--wrap-narrow); }

/* ============================================================
   Texture + decorative blobs
   ============================================================ */

.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

.blobfield{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.blob{
  position:absolute; display:block;
  filter:blur(6px);
  opacity:.34;
  will-change:border-radius, transform;
  animation:morph 20s ease-in-out infinite, drift 26s ease-in-out infinite;
}
.blob--1{
  width:min(38vw,460px); aspect-ratio:1; top:-6%; left:-9%;
  background:radial-gradient(60% 60% at 36% 32%, rgba(111,208,58,.95), rgba(26,122,52,.75) 70%);
}
.blob--2{
  width:min(30vw,380px); aspect-ratio:1; top:22%; right:-11%;
  background:radial-gradient(60% 60% at 40% 34%, rgba(201,222,107,.95), rgba(111,208,58,.72) 72%);
  animation-duration:20s, 32s; animation-delay:-7s, -4s;
}
.blob--3{
  width:min(34vw,420px); aspect-ratio:1; bottom:6%; left:-8%;
  background:radial-gradient(60% 60% at 42% 30%, rgba(138,224,79,.9), rgba(13,90,38,.6) 74%);
  animation-delay:-13s, -11s;
  opacity:.24;
}
.blob--4{
  width:min(26vw,320px); aspect-ratio:1; bottom:-8%; right:4%;
  background:radial-gradient(60% 60% at 38% 36%, rgba(231,232,91,.95), rgba(111,208,58,.7) 70%);
  animation-duration:20s, 30s; animation-delay:-4s, -17s;
  opacity:.26;
}

@keyframes morph{
  0%,100%{ border-radius:58% 42% 47% 53% / 44% 51% 49% 56%; }
  25%    { border-radius:44% 56% 61% 39% / 57% 43% 57% 43%; }
  50%    { border-radius:51% 49% 38% 62% / 46% 60% 40% 54%; }
  75%    { border-radius:63% 37% 54% 46% / 39% 48% 52% 61%; }
}
@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg); }
  33%    { transform:translate3d(2.5%,-3%,0) rotate(4deg); }
  66%    { transform:translate3d(-2%,3.5%,0) rotate(-3deg); }
}

/* ============================================================
   Buttons — jelly on hover
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; gap:.62em;
  font:inherit; font-weight:600; letter-spacing:-.01em; line-height:1;
  text-decoration:none; cursor:pointer; border:0;
  padding:.95em 1.6em;
  border-radius:var(--r-pill);
  transition:
    transform .45s var(--ease-jelly),
    border-radius .45s var(--ease-jelly),
    box-shadow .45s var(--ease-soft),
    background-color .3s var(--ease-soft),
    color .3s var(--ease-soft);
  will-change:transform, border-radius;
}
.btn__x{ width:1em; height:1em; fill:currentColor; flex:none; }

.btn--primary{
  background:linear-gradient(150deg, var(--deep-b), var(--deep-a));
  color:var(--cream);
  box-shadow:var(--sh-lift);
}
.btn--primary:hover,
.btn--primary:focus-visible{
  color:#fff;
  transform:scale(1.045) rotate(-.5deg);
  border-radius:46% 54% 52% 48% / 55% 48% 52% 45%;
  box-shadow:0 38px 90px -26px rgba(13,90,38,.55);
}
.btn--primary:active{ transform:scale(.985); border-radius:var(--r-pill); }

.btn--lg{ padding:1.1em 2.2em; font-size:clamp(1rem,.95rem+.32vw,1.2rem); }

.btn--ghost{
  background:rgba(243,243,222,.62);
  color:var(--ink-strong);
  box-shadow:inset 0 0 0 1.5px rgba(13,90,38,.22), var(--sh-soft);
  padding:.72em 1.25em;
  font-size:.95rem;
}
.btn--ghost:hover,
.btn--ghost:focus-visible{
  background:var(--deep-a); color:var(--cream);
  box-shadow:inset 0 0 0 1.5px rgba(13,90,38,0), var(--sh-lift);
  transform:scale(1.05) rotate(.6deg);
  border-radius:54% 46% 48% 52% / 47% 55% 45% 53%;
}
.btn--ghost:active{ transform:scale(.98); border-radius:var(--r-pill); }

/* ============================================================
   Header
   ============================================================ */

.site-header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgba(231,232,91,.92), rgba(231,232,91,.68));
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid rgba(13,90,38,.10);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.7rem;
}
.brand{
  display:inline-flex; align-items:center; gap:.65rem;
  text-decoration:none; color:var(--ink-strong);
}
.brand__mark{
  width:42px; height:42px; flex:none;
  border-radius:44% 56% 52% 48% / 50% 45% 55% 50%;
  object-fit:cover;
  box-shadow:0 10px 26px -12px rgba(13,90,38,.55);
  transition:border-radius .6s var(--ease-jelly), transform .5s var(--ease-jelly);
}
.brand:hover .brand__mark{
  border-radius:56% 44% 46% 54% / 44% 56% 44% 56%;
  transform:rotate(-6deg) scale(1.05);
}
.brand__name{
  font-weight:700; font-size:1.22rem; letter-spacing:-.03em;
}

/* ============================================================
   Layout bands
   ============================================================ */

.band{ position:relative; z-index:1; padding-block:clamp(4.5rem,10vw,8rem); }

.band--cream{
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(170deg, var(--cream), #EDEED6);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  margin-top:clamp(-2rem,-4vw,-1rem);
  box-shadow:0 -30px 70px -40px rgba(13,90,38,.35);
}
.band--cream + .band--lime{
  background:linear-gradient(178deg, #E1E766 0%, var(--lime-b) 100%);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  margin-top:-1px;
}
.band--deep{
  color:var(--on-deep);
  background:
    radial-gradient(80% 120% at 78% 8%, rgba(111,208,58,.34), transparent 62%),
    linear-gradient(158deg, var(--deep-b), var(--deep-a) 78%);
  border-radius:var(--r-xl);
  margin-inline:clamp(.75rem,3vw,2rem);
  box-shadow:var(--sh-deep);
  overflow:hidden;
}
.band--deep h2,.band--deep h3{ color:var(--on-deep); }

/* Section furniture */
.eyebrow{
  font-size:.82rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--signal-deep);
  margin-bottom:.9rem;
}
.eyebrow--on-deep{ color:var(--signal-text); }

.section-title{
  font-size:clamp(1.9rem,1.3rem+2.6vw,3.1rem);
  max-width:20ch;
  margin-bottom:clamp(2.25rem,5vw,3.25rem);
}

/* ============================================================
   Hero
   ============================================================ */

.hero{ position:relative; z-index:1; padding-block:clamp(2.5rem,6vw,4.5rem) clamp(4rem,9vw,7rem); }
.hero__inner{ text-align:center; }

.hero__art{
  margin:0 auto clamp(2rem,5vw,3.25rem);
  max-width:920px;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-lift);
  background:rgba(243,243,222,.35);
}
.hero__art img{ width:100%; }

.hero__title{
  font-size:clamp(2.5rem,1.35rem+5.4vw,5.5rem);
  letter-spacing:-.042em;
  max-width:16ch; margin-inline:auto;
}
.hero__sub{
  margin:clamp(1.1rem,2.4vw,1.7rem) auto 0;
  max-width:34ch;
  font-size:clamp(1.1rem,1rem+.6vw,1.5rem);
  line-height:1.55;
  color:var(--ink-soft);
}
.hero__cta{ margin-top:clamp(2rem,4vw,2.75rem); }
.hero__note{
  margin-top:1.35rem;
  font-size:.92rem;
  color:var(--ink-soft);
  letter-spacing:.005em;
}

/* ============================================================
   Problem cards
   ============================================================ */

.cards{
  display:grid; gap:clamp(1rem,2.4vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.card{
  background:linear-gradient(165deg,#FFFFFF,#F7F7E6);
  border-radius:var(--r-lg) var(--r-md) var(--r-lg) var(--r-md);
  padding:clamp(1.75rem,3.5vw,2.5rem);
  box-shadow:var(--sh-soft);
  transition:transform .5s var(--ease-jelly), border-radius .6s var(--ease-jelly), box-shadow .5s var(--ease-soft);
}
.card:hover{
  transform:translateY(-6px);
  border-radius:var(--r-md) var(--r-lg) var(--r-md) var(--r-lg);
  box-shadow:var(--sh-lift);
}
.card__figure{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem;
  margin-bottom:.85rem;
}
.card__amount{
  font-size:clamp(2rem,1.4rem+2.1vw,2.9rem);
  font-weight:600; letter-spacing:-.045em; line-height:1;
  color:var(--ink-strong);
  font-variant-numeric:tabular-nums;
}
.card__ticker{
  font-size:clamp(.95rem,.9rem+.3vw,1.15rem);
  font-weight:600; letter-spacing:.02em;
  color:var(--signal-deep);
  background:rgba(111,208,58,.16);
  padding:.28em .7em;
  border-radius:var(--r-pill);
}
.card__text{ color:var(--ink-soft); line-height:1.6; }

.closer{
  margin-top:clamp(2.25rem,4.5vw,3.25rem);
  font-size:clamp(1.15rem,1rem+.85vw,1.7rem);
  font-weight:500;
  line-height:1.45;
  letter-spacing:-.02em;
  color:var(--ink-strong);
  max-width:30ch;
  text-wrap:balance;
}

/* ============================================================
   Steps
   ============================================================ */

.steps{ position:relative; }

.steps__thread{
  position:absolute;
  top:26px; left:2%; width:96%; height:120px;
  overflow:visible; pointer-events:none;
  z-index:0;
}
.steps__thread path{
  fill:none;
  stroke:rgba(13,90,38,.30);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:10 14;
  vector-effect:non-scaling-stroke;
}

.steps__list{
  position:relative; z-index:1;
  display:grid; gap:clamp(1.5rem,3vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));
}
.step{
  background:rgba(243,243,222,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2rem);
  box-shadow:var(--sh-soft);
  transition:transform .5s var(--ease-jelly), border-radius .6s var(--ease-jelly);
}
.step:hover{
  transform:translateY(-5px);
  border-radius:var(--r-xl) var(--r-md) var(--r-xl) var(--r-md);
}
.step__num{
  display:grid; place-items:center;
  width:52px; height:52px;
  margin-bottom:1.15rem;
  font-weight:700; font-size:1.3rem; line-height:1;
  color:var(--cream);
  background:linear-gradient(150deg, var(--deep-b), var(--deep-a));
  border-radius:48% 52% 55% 45% / 52% 46% 54% 48%;
  box-shadow:0 14px 30px -14px rgba(13,90,38,.7);
  animation:morph 20s ease-in-out infinite;
}
.step:nth-child(2) .step__num{ animation-delay:-5s; }
.step:nth-child(3) .step__num{ animation-delay:-10s; }
.step:nth-child(4) .step__num{ animation-delay:-15s; }

.step__title{
  font-size:clamp(1.2rem,1.1rem+.45vw,1.45rem);
  margin-bottom:.5rem;
}
.step__text{ color:var(--ink-soft); font-size:.98rem; line-height:1.6; }

/* ============================================================
   One price
   ============================================================ */

.statement{
  font-size:clamp(1.7rem,1.05rem+3.1vw,3.4rem);
  line-height:1.14;
  letter-spacing:-.035em;
  max-width:18ch;
  margin-bottom:clamp(2rem,4vw,2.75rem);
}
.hl{ color:var(--signal-text); }

.guards{ display:grid; gap:1rem; max-width:52ch; }
.guards li{
  position:relative;
  padding-left:2.1rem;
  color:var(--on-deep-soft);
  line-height:1.6;
}
.guards li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:12px; height:12px;
  background:var(--signal);
  border-radius:52% 48% 45% 55% / 48% 52% 48% 52%;
  animation:morph 20s ease-in-out infinite;
}
.guards li:nth-child(2)::before{ animation-delay:-9s; }

/* ============================================================
   FAQ
   ============================================================ */

.faq{ display:grid; gap:clamp(.75rem,1.6vw,1rem); }

.faq__item{
  background:linear-gradient(165deg,#FFFFFF,#F8F8E8);
  border-radius:var(--r-md);
  box-shadow:var(--sh-soft);
  overflow:hidden;
  transition:border-radius .5s var(--ease-jelly), box-shadow .4s var(--ease-soft);
}
.faq__item.is-open{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lift);
}
.faq__h{ margin:0; font-size:inherit; font-weight:inherit; }

.faq__q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  padding:clamp(1.15rem,2.4vw,1.55rem) clamp(1.35rem,3vw,2rem);
  background:none; border:0; cursor:pointer;
  font:inherit; font-weight:600; text-align:left;
  font-size:clamp(1.05rem,1rem+.35vw,1.25rem);
  letter-spacing:-.015em;
  color:var(--ink-strong);
  border-radius:inherit;
  transition:color .3s var(--ease-soft), background-color .3s var(--ease-soft);
}
.faq__q:hover{ color:var(--signal-deep); background:rgba(111,208,58,.09); }

.faq__icon{
  position:relative; flex:none;
  width:30px; height:30px;
  background:rgba(111,208,58,.20);
  border-radius:50% 50% 46% 54% / 52% 48% 52% 48%;
  transition:transform .45s var(--ease-jelly), background-color .3s var(--ease-soft);
}
.faq__icon::before,
.faq__icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:13px; height:2.5px; border-radius:2px;
  background:var(--signal-deep);
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease-jelly), opacity .3s var(--ease-soft);
}
.faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item.is-open .faq__icon{ transform:rotate(135deg) scale(1.06); background:rgba(111,208,58,.34); }
.faq__item.is-open .faq__icon::after{ opacity:0; }

.faq__panel{
  overflow:hidden;
  height:0;
  transition:height .42s var(--ease-soft);
}
.faq__item.is-open .faq__panel{ height:auto; }
.faq__body{
  padding:0 clamp(1.35rem,3vw,2rem) clamp(1.35rem,2.8vw,1.75rem);
  color:var(--ink-soft);
  max-width:56ch;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer{
  position:relative; z-index:1;
  margin-top:clamp(3rem,7vw,5rem);
  color:var(--on-deep);
  background:
    radial-gradient(70% 130% at 20% 0%, rgba(111,208,58,.28), transparent 60%),
    linear-gradient(168deg, var(--deep-b), var(--deep-a) 70%);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-deep);
}
.site-footer__inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.25rem,3vw,2rem);
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.site-footer__brand{ display:flex; align-items:center; gap:.85rem; }
.site-footer__brand .brand__mark{ width:48px; height:48px; }
.site-footer__domain{
  font-weight:600; font-size:1.1rem; letter-spacing:-.02em; color:var(--cream);
}
.footer-x{
  display:inline-flex; align-items:center; gap:.55em;
  color:var(--signal-text); text-decoration:none; font-weight:500;
  padding:.55em .95em;
  border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px rgba(138,224,79,.35);
  transition:transform .45s var(--ease-jelly), border-radius .45s var(--ease-jelly),
             background-color .3s var(--ease-soft), color .3s var(--ease-soft);
}
.footer-x:hover,
.footer-x:focus-visible{
  background:var(--signal-text); color:#0B3717;
  transform:scale(1.05) rotate(-.8deg);
  border-radius:54% 46% 47% 53% / 48% 54% 46% 52%;
}
.disclaimer{
  flex:1 1 100%;
  padding-top:clamp(1.25rem,3vw,1.75rem);
  border-top:1px solid rgba(243,243,222,.18);
  font-size:.88rem; line-height:1.6;
  color:var(--on-deep-soft);
  max-width:62ch;
}
.site-footer :focus-visible{ outline-color:var(--signal-text); }

/* ============================================================
   Scroll reveal
   ============================================================ */

/* Only armed once JS is confirmed — without it nothing is ever hidden. */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease-soft), transform .85s var(--ease-soft);
  transition-delay:var(--reveal-delay,0ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

.js .steps__thread path{
  opacity:0;
  transition:opacity .9s var(--ease-soft);
}
.js .steps.is-in .steps__thread path{ opacity:1; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:900px){
  .steps__thread{ display:none; }
  .steps__list{
    grid-template-columns:1fr;
    position:relative;
  }
  /* vertical soft connector between stacked steps */
  .steps__list::before{
    content:""; position:absolute;
    left:clamp(1.5rem,3vw,2rem); top:52px; bottom:52px;
    width:3px; margin-left:24.5px;
    background:repeating-linear-gradient(to bottom,
      rgba(13,90,38,.30) 0 10px, transparent 10px 24px);
    border-radius:var(--r-pill);
  }
  .step{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

@media (max-width:560px){
  :root{ --r-xl:34px; --r-lg:30px; }
  .site-header__inner{ padding-block:.55rem; }
  .brand__name{ font-size:1.08rem; }
  .brand__mark{ width:36px; height:36px; }
  .btn--ghost{ font-size:.88rem; padding:.68em 1.05em; }
  .hero__title{ letter-spacing:-.035em; }
  .site-footer__inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:380px){
  .btn--ghost span{ display:none; }
  .btn--ghost{ padding:.7em; }
  .btn--ghost .btn__x{ width:1.15em; height:1.15em; }
}

/* ============================================================
   Reduced motion — everything stops
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .steps__thread path{ opacity:1 !important; }
  .blob{ animation:none !important; }
  .btn:hover,.btn:focus-visible,.card:hover,.step:hover,.footer-x:hover{ transform:none !important; }
}