:root{
  --ink:#0B1220;
  --muted:rgba(11,18,32,.70);

  --g1:#0E8B50;
  --g0:#0B6E40;

  --gold:#C6A26B;

  --paper:#FBFBF7;
  --cream:#F7F4EE;
  --mist:#ECF6EF;
  --mist2:#E7F2EC;

  --line:rgba(11,18,32,.10);
  --shadow:0 22px 80px rgba(11,18,32,.14);
  --shadow2:0 12px 34px rgba(11,18,32,.12);

  --r-lg:18px;
  --r-xl:26px;
  --max:1120px;

  --headerH: 84px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    linear-gradient(180deg, #f8f3ec 0%, #fcfaf7 26%, #f3f7f3 100%);
}

button, input, select, textarea{font:inherit;letter-spacing:inherit}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max), calc(100% - 40px)); margin-inline:auto}

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;border-radius:12px;z-index:999}
.skip:focus{left:12px;top:12px}

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.84);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(14,139,80,.10);
  transition: background .25s ease, box-shadow .25s ease;
}
.header.is-scrolled{background:rgba(255,255,255,.94); box-shadow:0 10px 28px rgba(11,18,32,.08)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}

.brand{display:flex;align-items:center;gap:12px}
.brand__logo{
  width:54px;height:54px;border-radius:999px;
  border:1px solid var(--line);background:#fff;object-fit:contain
}
.brand__logoFallback{
  width:54px;height:54px;border-radius:999px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(14,139,80,.20), rgba(198,162,107,.12));
  border:1px solid var(--line);
  font-weight:800;
  font-size:18px;
}
.brand__name{font-weight:800;letter-spacing:-.02em;font-size:18px}

.nav{display:none;align-items:center;gap:16px}
.nav a{
  font-size:14px;color:rgba(11,18,32,.78);
  padding:8px 10px;border-radius:999px;
  transition: background .2s ease, color .2s ease;
}
.nav a:hover{background:rgba(14,139,80,.10); color:rgba(11,18,32,.92)}
.nav a.is-active{
  background:rgba(14,139,80,.14);
  border:1px solid rgba(14,139,80,.18);
  color:rgba(11,18,32,.96);
}

.menuBtn{
  border:0;background:transparent;box-shadow:none;
  padding:10px 8px;cursor:pointer;
  display:grid;gap:5px;
}
.menuBtn span{
  width:22px;height:2px;
  background:rgba(11,18,32,.82);
  border-radius:2px;
}

.mnav{
  display:none;border-top:1px solid rgba(11,18,32,.08);
  padding:10px 20px 14px;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
}
.mnav.is-open{display:grid}
.mnav a{padding:10px 0;color:rgba(11,18,32,.84)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 18px;border-radius:999px;
  font-weight:800;letter-spacing:-.01em;
  border:1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  user-select:none;
  font-size:16px;
}
.btn:active{transform:scale(.99)}
.btn--primary{
  color:#fff;
  background:linear-gradient(120deg, var(--g1), var(--g0), #1C7A4A);
  background-size:200% 200%;
  box-shadow:0 18px 55px rgba(14,139,80,.22);
}
.btn--primary:hover{transform:translateY(-2px);filter:brightness(.99)}
.btn--light{
  background:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.34);
  color:rgba(11,18,32,.92);
  box-shadow:0 18px 60px rgba(0,0,0,.14);
}
.btn--light:hover{transform:translateY(-2px)}
.btn:focus-visible,.menuBtn:focus-visible{outline:3px solid rgba(198,162,107,.35);outline-offset:2px}

.hero{position:relative;overflow:hidden;padding:0}
.hero--green{
  background:
    radial-gradient(72rem 28rem at 8% -6%, rgba(31,106,86,.18), transparent 60%),
    radial-gradient(52rem 26rem at 92% 8%, rgba(196,155,103,.18), transparent 58%),
    linear-gradient(180deg, #f8f1e8 0%, #fcfaf6 38%, #f1f7f2 100%);
}
.hero__bg{
  position:absolute; inset:-140px -140px auto -140px; height:520px;
  background:
    radial-gradient(380px 280px at 15% 30%, rgba(14,139,80,.20), transparent 65%),
    radial-gradient(340px 260px at 55% 30%, rgba(14,139,80,.14), transparent 65%),
    radial-gradient(420px 320px at 90% 10%, rgba(14,139,80,.10), transparent 70%);
  filter: blur(10px); opacity:.85;
  animation: floatBg 10s ease-in-out infinite;
  pointer-events:none;
}
@keyframes floatBg{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}

.hero__frame{
  min-height: calc(100svh - var(--headerH));
  padding: 18px 0 14px;
  display:flex;
  flex-direction:column;
}
.hero__grid{
  flex:1;
  display:grid;
  gap:12px;
  align-content:center;
  align-items:center;
}
.hero__title{
  margin:6px 0 10px;
  font-size:clamp(34px, 5.1vw, 72px);
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:800;
}
.hero__break{display:none}
.hero__desc{
  margin:0;
  color:var(--muted);
  font-size:15px;
  max-width:54ch;
}
.btn--hero{width:100%; justify-content:center; padding:13px 18px; font-size:15px}

.heroCard{
  position:relative;border-radius:var(--r-xl);
  border:1px solid rgba(11,18,32,.12);
  overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(135deg, rgba(14,139,80,.12), rgba(198,162,107,.10));
  transform-style:preserve-3d;
}
.heroCard__img{
  width:100%;
  height:260px;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform .5s ease, opacity .6s ease;
}
.heroCard:hover .heroCard__img{transform:scale(1.08)}
.heroSlider{position:relative;min-height:260px}
.heroSlider .heroCard__img{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}
.heroSlider .heroCard__img.is-active{
  opacity:1;
  pointer-events:auto;
}

.heroTrust{
  margin-top:auto;
  text-align:center;
  padding-top: 10px;
}
.heroTrust__label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(11,18,32,.62);
  margin:0 0 10px;
}

.section{padding:56px 0;position:relative;overflow:hidden}
.section--mist{
  background:linear-gradient(180deg, #f5f8f4 0%, #edf4ee 100%);
  border-top:1px solid rgba(14,139,80,.08);
  border-bottom:1px solid rgba(14,139,80,.08);
}
.section--mistAlt{
  background:
    radial-gradient(42rem 18rem at 0% 0%, rgba(31,106,86,.08), transparent 60%),
    linear-gradient(180deg, #eef5ef 0%, #f7faf7 100%);
  border-top:1px solid rgba(14,139,80,.08);
  border-bottom:1px solid rgba(14,139,80,.08);
}
.section--paperWarm{
  background:
    radial-gradient(56rem 18rem at 15% 0%, rgba(196,155,103,.12), transparent 58%),
    linear-gradient(180deg, #fbf6ef 0%, #f8f2ea 100%);
  border-top:1px solid rgba(14,139,80,.08);
  border-bottom:1px solid rgba(14,139,80,.08);
}
.section--paperClean{
  background:
    radial-gradient(42rem 18rem at 100% 0%, rgba(196,155,103,.09), transparent 58%),
    linear-gradient(180deg, #fbfaf6 0%, #f4f8f4 100%);
  border-top:1px solid rgba(14,139,80,.08);
  border-bottom:1px solid rgba(14,139,80,.08);
}
.section--cream{
  background:
    radial-gradient(42rem 18rem at 100% 0%, rgba(31,106,86,.08), transparent 60%),
    linear-gradient(180deg, #f8f2e9 0%, #faf5ef 100%);
  border-top:1px solid rgba(14,139,80,.08);
  border-bottom:1px solid rgba(14,139,80,.08);
}
.section--greenTint,
.section--deepGreen{
  background:
    radial-gradient(760px 420px at 15% 0%, rgba(14,139,80,.12), transparent 60%),
    radial-gradient(760px 420px at 85% 0%, rgba(14,139,80,.08), transparent 60%),
    linear-gradient(180deg, #fff, var(--mist));
  border-top:1px solid rgba(14,139,80,.08);
  border-bottom:1px solid rgba(14,139,80,.08);
}
.section--glow::before{
  content:"";position:absolute;inset:-240px -240px auto -240px;height:520px;
  background:
    radial-gradient(360px 260px at 20% 40%, rgba(198,162,107,.18), transparent 65%),
    radial-gradient(360px 260px at 70% 20%, rgba(14,139,80,.18), transparent 65%);
  filter: blur(10px);opacity:.85;pointer-events:none;
}

.head{max-width:900px;margin:0 auto 20px;text-align:center}
.head h2{
  margin:0 0 10px;
  font-size:clamp(38px, 3.4vw, 56px);
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:800;
}
.head p{margin:0;color:var(--muted);font-size:15px}
.head--light h2{color:var(--ink)}
.head--light p{color:var(--muted)}

#kami-hadir .head h2{font-size:clamp(34px, 3.9vw, 56px);line-height:1.08}
#kami-hadir .head p{font-size:clamp(15px, 1.6vw, 18px)}

.grid4{display:grid;gap:16px}
.featureGrid{display:grid;gap:16px}

.cardX, .featureCard{
  text-align:left;
  border-radius:var(--r-xl);
  background: rgba(255,255,255,.92);
  box-shadow:var(--shadow2);
  padding:18px;
  border:1px solid rgba(14,139,80,.12);
  transition: transform .18s ease, box-shadow .18s ease;
  position:relative;
  overflow:hidden;
}
.cardX:hover,.featureCard:hover{transform:translateY(-4px);box-shadow:0 28px 90px rgba(11,18,32,.16)}
.cardX__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.chipNum{
  font-weight:800;color:rgba(11,18,32,.72);
  background:rgba(255,255,255,.70);
  border:1px solid rgba(11,18,32,.10);
  padding:6px 10px;border-radius:999px;box-shadow:var(--shadow2)
}
.cardX__icon{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(14,139,80,.10);
  border:1px solid rgba(14,139,80,.18);
}
.cardX h3,.featureCard h3{margin:0 0 8px;letter-spacing:-.02em;font-weight:800}
.cardX p,.featureCard p{margin:0;color:var(--muted)}
.featureCard__icon{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(198,162,107,.14);
  border:1px solid rgba(198,162,107,.26);
  font-weight:800;margin-bottom:10px;
}

.ctaBox{
  margin-top:18px;border-radius:var(--r-xl);padding:18px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.86);
  box-shadow:var(--shadow2);
  display:grid;gap:14px;
}
.ctaBox__copy{text-align:left}
.ctaBox__copy h3{margin:0 0 6px;letter-spacing:-.02em;font-weight:800}
.ctaBox__copy p{margin:0;color:var(--muted)}

.ctaBox--dark{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(14,139,80,.12);
}
.ctaBox--dark .ctaBox__copy h3{color:var(--ink)}
.ctaBox--dark .ctaBox__copy p{color:var(--muted)}

.ctaBox--glass{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
}
.ctaBox--glass .ctaBox__copy h3{color:rgba(255,255,255,.92)}
.ctaBox--glass .ctaBox__copy p{color:rgba(255,255,255,.74)}

.stepsShell{
  border-radius:var(--r-xl);
  border:1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.62);
  box-shadow:var(--shadow2);
  padding:12px;
  position:relative;
}
.stepsShell--soft{background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18)}
.stepsShell--clean{background: rgba(255,255,255,.82)}
.stepsShell--light{background: rgba(255,255,255,.82); border:1px solid rgba(11,18,32,.10)}
.stepsTrack{
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding:6px 2px;
  cursor:grab;
}
.stepsTrack.is-dragging{cursor:grabbing}

.stepCard{
  min-width:84%;
  scroll-snap-align:center;
  border-radius:var(--r-xl);
  border:1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.92);
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.stepCard__media{position:relative;overflow:hidden}
.stepCard__media img{width:100%;height:300px;object-fit:cover}
.stepBody{padding:14px 16px 16px;text-align:center}
.stepBody h3{margin:0 0 6px;letter-spacing:-.02em;font-weight:800}
.stepBody p{margin:0;color:var(--muted)}

.certCard--step{
  min-width:84%;
  scroll-snap-align:center;
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.18);
  overflow:hidden;
}
.certCard--light{
  border:1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
}
.certTop{
  height:190px;
  display:grid;place-items:center;
  background:
    radial-gradient(300px 160px at 20% 0%, rgba(198,162,107,.20), transparent 60%),
    radial-gradient(280px 160px at 90% 10%, rgba(14,139,80,.22), transparent 60%),
    rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.certTop--light{
  background:
    radial-gradient(300px 160px at 20% 0%, rgba(198,162,107,.14), transparent 60%),
    radial-gradient(280px 160px at 90% 10%, rgba(14,139,80,.12), transparent 60%),
    rgba(255,255,255,.92);
  border-bottom:1px solid rgba(11,18,32,.10);
}
.certTop img{width:96px;height:96px;object-fit:contain;filter: drop-shadow(0 14px 26px rgba(0,0,0,.22))}
.certBody{padding:14px 16px 16px;text-align:center}
.certTitle{font-weight:800;letter-spacing:-.02em;color:rgba(255,255,255,.92)}
.certTitle--light{color:var(--ink)}
.certSub{margin-top:2px;font-size:13px;color:rgba(255,255,255,.74)}
.certSub--light{color:var(--muted)}

.about{display:grid;gap:16px}
.aboutImageCard{
  width:100%;
  max-width:560px;
  margin-inline:auto;
  align-self:start;
  border-radius:var(--r-xl);
  border:1px solid rgba(11,18,32,.12);
  overflow:hidden;
  box-shadow:var(--shadow2);
  background:linear-gradient(135deg, rgba(14,139,80,.10), rgba(255,255,255,.94));
}
.aboutImageCard[data-about-slider] {
  position: relative;
  aspect-ratio: 4/3;
}
.aboutImageCard[data-about-slider] .aboutImageCard__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, opacity .6s ease;
}
.aboutImageCard[data-about-slider] .aboutImageCard__img.is-active {
  opacity: 1;
}
.aboutImageCard__img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}
.about__panel{
  border-radius:var(--r-xl);
  border:1px solid rgba(14,139,80,.12);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow2);
  padding:20px;
  text-align:left;
  align-self:start;
}
.about__panel h3{margin:0 0 10px;letter-spacing:-.02em;font-weight:800}
.about__panel p{margin:0;color:var(--muted)}

.faq{display:grid;gap:12px}
.faqItem{
  border-radius:var(--r-xl);
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow2);
  padding:6px 14px; overflow:hidden;
}
.faqItem summary{
  list-style:none; cursor:pointer;
  padding:12px 0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-weight:800;letter-spacing:-.01em;
  text-align:left;
}
.faqItem summary::-webkit-details-marker{display:none}
.faqPlus{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  font-size: 28px; 
  font-weight: 400; 
  color: var(--ink);
  transition: transform .18s ease;
  flex-shrink: 0; 
}
.faqItem[open] .faqPlus{transform: rotate(45deg)}
.faqBody{padding:0 0 14px;color:var(--muted);text-align:left}

.marquee{
  position:relative;
  border-radius:var(--r-xl);
  border:1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.72);
  box-shadow:var(--shadow2);
  overflow:hidden;
  padding: 12px 0;
}
.marquee__track{
  display:flex;gap: 14px;align-items:center;width: max-content;
  animation: marquee 66s linear infinite;
  padding: 6px 14px;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state: paused}
.marquee__fade{position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none}
.marquee__fade--l{left:0;background:linear-gradient(90deg, rgba(255,255,255,.86), rgba(255,255,255,0))}
.marquee__fade--r{right:0;background:linear-gradient(270deg, rgba(255,255,255,.86), rgba(255,255,255,0))}

.logoTile{
  width: 172px; height: 92px;
  border-radius: 18px;
  border:1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  display:grid;place-items:center;
}
.logoTile img{
  width: 78%;
  height: 72%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05) opacity(.82);
  transition: filter .18s ease, transform .18s ease;
}
.logoTile:hover img{filter: grayscale(0) opacity(1); transform: scale(1.02)}

.marquee--hero{
  background: rgba(255,255,255,.55);
  box-shadow: 0 14px 42px rgba(11,18,32,.10);
  padding: 10px 0;
}
.marquee--hero .marquee__fade--l{background:linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,0))}
.marquee--hero .marquee__fade--r{background:linear-gradient(270deg, rgba(255,255,255,.70), rgba(255,255,255,0))}
.marquee--hero .logoTile{width:160px;height:84px;border-radius:16px}
.marquee--hero .marquee__track{animation-duration:60s}

.manyMore{
  margin:10px 0 0;
  font-weight:800;
  letter-spacing:-.02em;
  color:rgba(11,18,32,.78);
  text-align:center;
  font-size:14px;
}

.prodTabs{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.prodTab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;

  background: rgba(255,255,255,.88);
  border:1px solid rgba(14,139,80,.22);
  box-shadow:0 14px 42px rgba(14,139,80,.10);

  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease,
              background .18s ease, color .18s ease, border-color .18s ease;
}
.prodTab:hover{transform:translateY(-2px);box-shadow:0 18px 55px rgba(14,139,80,.16)}
.prodTab.is-active{
  color:#fff;
  background:linear-gradient(120deg, var(--g1), var(--g0));
  border-color:transparent;
  box-shadow:0 18px 55px rgba(14,139,80,.22);
}
.prodTab:focus-visible{outline:3px solid rgba(198,162,107,.35);outline-offset:2px}

.prodPanels{margin-top:16px}
.prodPanel{display:none}
.prodPanel.is-active{display:block}

.stepsTrack--prodPhotos{gap:14px}
.prodPhoto{
  min-width:84%;
  scroll-snap-align:center;
  border-radius: var(--r-xl);
  border:1px solid rgba(11,18,32,.12);
  overflow:hidden;
  box-shadow: var(--shadow2);
  background:#fff;
}
.prodPhoto img{width:100%;height:230px;object-fit:cover}
.prodPhoto__text{
  padding:12px 14px 14px;
  text-align:center;
  font-weight:700;
  color:var(--ink);
  background:#fff;
}

.footer{padding:46px 0 22px}
.footer--green{
  background:
    radial-gradient(60rem 24rem at 12% -8%, rgba(31,106,86,.28), transparent 65%),
    radial-gradient(40rem 22rem at 92% 0%, rgba(196,155,103,.18), transparent 60%),
    linear-gradient(180deg, #0f1b17 0%, #09110e 100%);
  border-top:1px solid rgba(255,255,255,.12);
}
.footer--black{
  background:#000;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer__grid{display:grid;gap:18px}
.footer__brand{font-weight:800;letter-spacing:-.02em;color:rgba(255,255,255,.92)}
.footer__title{font-weight:800;margin-bottom:10px}
.footer__title--light{color:rgba(255,255,255,.92)}
.footer__muted{margin-top:6px}
.footer__muted--light{color:rgba(255,255,255,.76)}
.footer__muted--light a{color:rgba(255,255,255,.92);text-decoration:underline;text-underline-offset:3px}
.footer__bottom{margin-top:18px;padding-top:14px;font-size:13px}
.footer__bottom--light{border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72)}

.social{display:flex;gap:10px;flex-wrap:wrap}
.socialBtn{
  width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(11,18,32,.12);
  display:grid;place-items:center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.socialBtn svg{width:22px;height:22px}
.socialBtn--light{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
}
.socialBtn--light svg{color:rgba(255,255,255,.88)}
.socialBtn--light:hover{transform:translateY(-2px);background: rgba(255,255,255,.18)}

[data-reveal]{
  opacity:0;
  transform: translateY(14px) scale(.985);
  filter: blur(4px);
  transition: opacity .60s ease, transform .60s ease, filter .60s ease;
  transition-delay: calc(var(--stagger, 0) * 85ms);
}
[data-reveal].is-visible{opacity:1;transform:translateY(0) scale(1);filter: blur(0)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
  .marquee__track{animation:none}
  .btn,.cardX,.featureCard,.stepCard,.prodTab{transition:none}
}

@media (max-width: 859px){
  .container{width: calc(100% - 28px)}
  .header__inner{padding:12px 0}

  main section:not(#faq) .container,
  .hero__copy,
  .hero__cta,
  .about,
  .about__panel,
  .featureGrid,
  .stepBody,
  .ctaBox,
  .ctaBox__copy,
  .head{
    text-align:center;
  }

  #faq .head{ text-align:center; }
  .faqItem, .faqItem summary, .faqBody, .footer, .footer *{ text-align:left; }
  #why-us .featureCard{ text-align:center; }
  #why-us .featureCard__icon{ margin-inline:auto; }

  .hero__copy{text-align:center}
  .hero__desc{margin-inline:auto}
  
  .heroCard__img,
  .aboutImageCard__img{height:100%; object-fit:cover;}
  
  .btn--hero{padding:12px 16px;font-size:14.5px}
  .hero__title{font-size:clamp(28px, 7.8vw, 40px); line-height:1.06;}
  .hero__break{display:block;}

  .head h2{font-size: clamp(30px, 9vw, 44px)}
  .head p{font-size:16px}

  .ctaBox__copy{text-align:center}

  .marquee--hero .logoTile{width:140px;height:76px}
  .manyMore{font-size:13px}

  .prodPhoto img{
    aspect-ratio:5/4;
    height:auto;
  }
}

@media (min-width: 860px){
  .nav{display:flex}
  .menuBtn{display:none}

  .hero__grid--mobileStack{
    grid-template-columns: 1.08fr .92fr;
    column-gap: 18px;
    row-gap: 10px;
    align-items:center;
  }
  .hero__title{font-size:clamp(56px, 5.3vw, 78px); line-height:1.02;}
  .hero__copy{grid-column:1;grid-row:1}
  .hero__cta{grid-column:1;grid-row:2;align-self:start}
  .hero__visual{grid-column:2;grid-row:1 / span 2; align-self:stretch}
  .btn--hero{width:fit-content; min-width: 280px}

  .heroCard{height:100%}
  .heroCard__img{height:100%}
  .aboutImageCard{margin:0;align-self:stretch}
  .about__panel{align-self:stretch}
  .aboutImageCard__img{height:auto}
  .heroSlider{min-height:100%}

  .grid4{grid-template-columns: repeat(2, 1fr)}
  .featureGrid{grid-template-columns: repeat(2, 1fr)}
  .ctaBox{grid-template-columns: 1fr auto; align-items:center}
  .about{grid-template-columns: 1.15fr .85fr; align-items:stretch}

  .stepsTrack{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    cursor: default;
  }
  .stepsTrack--certs{
    grid-template-columns: repeat(4, 1fr);
  }
  
  .stepCard,.certCard--step{min-width:0}

  .stepsTrack--prodPhotos{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    cursor: default;
  }
  .prodPhoto{min-width:0}
  .prodPhoto img{height:170px}

  .footer__grid{grid-template-columns: 1.2fr 1fr 1fr}
}

@media (max-width: 859px){
  .hero__copy{order:1}
  .hero__visual{order:2}
  .hero__cta{order:3}
}

.body--cta{
  min-height:100vh;
}

.ctaPage{
  min-height:calc(100svh - var(--headerH));
  display:grid;
  place-items:center;
  padding:32px 0 56px;
}

.ctaPage__shell{
  width:min(760px, 100%);
}

.ctaPage__card{
  border-radius:32px;
  border:1px solid rgba(14,139,80,.14);
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow);
  padding:28px 22px;
  position:relative;
  overflow:hidden;
  text-align:center;
}

.ctaPage__card::before{
  content:"";
  position:absolute;
  inset:auto -120px -160px auto;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(198,162,107,.20) 0%, rgba(198,162,107,0) 68%);
  pointer-events:none;
}

.ctaPage__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(14,139,80,.12);
  background:rgba(14,139,80,.07);
  color:rgba(11,18,32,.74);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.ctaPage__title{
  margin:14px 0 10px;
  font-size:clamp(30px, 4vw, 50px);
  line-height:1.06;
  letter-spacing:-.04em;
  font-weight:800;
}

.mobile-break{display:none}

.ctaPage__desc{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  max-width:56ch;
}

.ctaChoices{
  display:grid;
  gap:14px;
  margin-top:24px;
}

.ctaChoice{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:22px 18px;
  border-radius:24px;
  border:1px solid rgba(14,139,80,.12);
  background:rgba(255,255,255,.86);
  box-shadow:var(--shadow2);
  text-align:center;
}

.ctaChoice__meta{
  min-width:0;
  display:grid;
  gap:4px;
  justify-items:center;
}

.ctaChoice__head{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:center;
}

.ctaChoice__text{
  display:grid;
  gap:4px;
  text-align:left;
}

.waBadge{
  width:52px;
  height:52px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  color:var(--g1);
  border:1px solid rgba(14,139,80,.14);
  box-shadow:0 12px 30px rgba(14,139,80,.12);
  flex:0 0 auto;
}

.waBadge svg{
  width:28px;
  height:28px;
}

.ctaChoice__label{
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
}

.ctaChoice__number{
  margin:0;
  color:var(--muted);
  font-size:15px;
  word-break:break-word;
}

.btn--choice{
  min-width:220px;
  width:100%;
  max-width:320px;
}

@media (max-width: 859px){
  .body--cta .container{
    width:calc(100% - 28px);
  }

  .ctaPage{
    padding:24px 0 42px;
  }

  .ctaPage__shell{
    width:100%;
    max-width:100%;
    margin-inline:auto;
    padding-inline:0;
  }

  .ctaPage__card{
    padding:22px 18px;
    border-radius:24px;
    margin-inline:auto;
    width:100%;
  }

  .ctaPage__title{
    font-size:clamp(20px, 6.8vw, 30px);
    line-height:1.12;
  }

  .mobile-break{display:block}

  .ctaChoices{
    gap:14px;
    margin-top:20px;
  }

  .ctaChoice{
    padding:20px 16px;
    border-radius:22px;
  }

  .ctaChoice__head{
    gap:12px;
    align-items:center;
  }

  .ctaChoice__text{
    min-width:0;
  }

  .ctaChoice__label{
    font-size:18px;
  }

  .ctaChoice__number{
    font-size:14px;
  }

  .waBadge{
    width:48px;
    height:48px;
  }

  .waBadge svg{
    width:26px;
    height:26px;
  }

  .btn--choice{
    width:100%;
    min-width:0;
    max-width:none;
  }
}