/* Home page rhythm: group sections by visitor intent and keep every surface
   boundary crisp. Content and document order stay intact. */
:root{
  --rhythm-concrete:#e8ece7;
  --rhythm-concrete-deep:#dfe7df;
  --rhythm-forest:#075d20;
  --rhythm-forest-deep:#082d16;
  --rhythm-accent:#55c22c;
  --rhythm-section-gap:96px;
}

/* Main reading rhythm: the proof strip remains compact; full sections share
   one vertical scale so the quiz no longer feels heavier than the catalogue. */
#top>section:not(.hero-premium){padding-top:var(--rhythm-section-gap);padding-bottom:var(--rhythm-section-gap)}
#top>#solutions{padding-top:var(--rhythm-section-gap);padding-bottom:var(--rhythm-section-gap)}
#top>.proof{padding-top:22px;padding-bottom:22px}

/* A quiet paper field gives the catalogue a pause after the decision path. */
#solutions{position:relative;isolation:isolate;background:var(--paper)}

/* Rational / data-led surfaces use a solid concrete field. */
#selector,
#compare{
  position:relative;
  isolation:isolate;
  background:var(--rhythm-concrete);
}
#selector .quiz-shell{color:#fff}
#selector .head h2{color:var(--ink)}
#selector .head p{color:var(--muted)}
#selector .quiz-shell{position:relative;z-index:1}
#compare .wrap,#selector .wrap{position:relative;z-index:1}

/* Blueprint texture belongs only inside the dark conversion surface. A solid
   section background prevents it from leaking into neighbouring light zones. */
#contacts::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M0 24h96M0 48h96M0 72h96M24 0v96M48 0v96M72 0v96M0 0l96 96' fill='none' stroke='%23d9f2d8' stroke-width='1'/%3E%3C/svg%3E");
  background-size:96px 96px;
}

/* Emotional / visual proof forms one uninterrupted dark chapter. */
#before-after{
  position:relative;
  isolation:isolate;
  color:#fff;
  border-top:2px solid var(--rhythm-accent);
  background:var(--rhythm-forest);
}
#factory{
  position:relative;
  isolation:isolate;
  margin-top:0;
  color:#fff;
  border-bottom:2px solid var(--rhythm-accent);
  background:var(--rhythm-forest);
}
#before-after .wrap,#factory .wrap{position:relative;z-index:1}
#before-after .head h2,
#factory .head h2{color:#fff}
#before-after .head p,
#factory .head p{color:#c9ddcc}
#before-after .before-after__frame{border-color:rgba(222,243,223,.34);box-shadow:0 28px 70px rgba(3,25,10,.25)}
#before-after .before-after__note{color:#c9ddcc}
#before-after .before-after__note strong{color:#f2fff3}
#factory .factory-card{box-shadow:0 22px 58px rgba(3,25,10,.24)}

/* Trust surfaces deliberately return to neutral so the page can breathe
   before the final call to action. */
#reviews-proof,
.home-trust{
  position:relative;
  isolation:isolate;
  background:var(--rhythm-concrete);
}
#reviews-proof .wrap,
#faq .wrap,
.home-trust .wrap{position:relative;z-index:1}
#faq{position:relative;isolation:isolate;background:var(--paper)}
#faq .wrap{position:relative;z-index:1}

/* The final form is the one deliberate stop in the scroll. */
#contacts{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-top:2px solid var(--rhythm-accent);
  border-bottom:2px solid var(--rhythm-accent);
  background:var(--rhythm-forest);
}
#contacts .wrap{position:relative;z-index:1}

/* Give the compact trust ticker enough air without turning it into another
   visual block. */
.home-trust{padding-top:64px!important;padding-bottom:64px!important;border:0}

@media(max-width:640px){
  :root{--rhythm-section-gap:56px}
  #top>section:not(.hero-premium){padding-top:var(--rhythm-section-gap);padding-bottom:var(--rhythm-section-gap)}
  #top>#solutions{padding-top:var(--rhythm-section-gap);padding-bottom:var(--rhythm-section-gap)}
  #top>.proof{padding-top:18px;padding-bottom:18px}
    .home-trust{padding-top:48px!important;padding-bottom:48px!important}
  #contacts::after{opacity:.04;background-size:72px 72px}
}

@media(prefers-reduced-motion:reduce){
  #before-after .before-after__frame{box-shadow:none}
  #factory .factory-card{box-shadow:none}
}