/* Section backgrounds, for every page (first made for the homepage, hero
   down). Quiet on purpose: each section is told apart by a texture, a shade
   or a faint light of its own, never a loud band. The hero keeps the page's
   one key light. Each has a job:

     .sbg-seam    a new chapter: a hairline that brightens to the middle and
                  spills a little light down
     .sbg-ai      AI: a violet pool behind what's in it
     .sbg-step    the one thing a page most wants to show: its one lifted
                  shade, closed by hairlines, a faint grid in it
     .sbg-dots    one card to look at: a field of dots fading out round it
     .sbg-grain   reading (FAQs): fine grain, nothing to read past
     .sbg-rise    the last call to act: a soft blue halo behind the card,
                  the page's last light answering the hero's

   On a page, sections with one take turns with plain ones, the same one
   never twice in a row, and .sbg-rise comes last.

   Each uses the section's own ::before (texture, under) and ::after (light,
   over it), both behind the content, and everything stays inside the
   section's box (.section is content-visibility:auto, which clips what
   spills out). A section in a page's column (not a full-width .section)
   has its layers reach out to the window's edges (end of file). */


.sbg-seam,.sbg-ai,.sbg-step,.sbg-dots,.sbg-grain,.sbg-rise{position:relative;isolation:isolate}
:is(.sbg-seam,.sbg-ai,.sbg-step,.sbg-dots,.sbg-grain,.sbg-rise)::before,
:is(.sbg-seam,.sbg-ai,.sbg-step,.sbg-dots,.sbg-grain,.sbg-rise)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}

/* ---- Live demo: seam light ---- */
.sbg-seam{padding-top:clamp(84px,9vw,124px)}
.sbg-seam::after{background:
  linear-gradient(90deg,transparent 6%,rgba(147,197,253,.13) 28%,rgba(165,180,252,.36) 50%,rgba(147,197,253,.13) 72%,transparent 94%) 0 0/100% 1px no-repeat,
  radial-gradient(42% 340px at 50% 0,rgba(59,130,246,.085),transparent),
  radial-gradient(32% 46% at 74% 58%,rgba(20,184,166,.065),transparent 72%)}

/* ---- AI: a violet pool ---- */
.sbg-ai::after{background:
  radial-gradient(44% 72% at 50% 50%,rgba(124,58,237,.075),transparent 72%),
  radial-gradient(26% 54% at 26% 44%,rgba(59,130,246,.05),transparent 72%)}

/* ---- Beyond the call: one lifted shade, a faint grid in it ---- */
.sbg-step{margin:clamp(24px,4vw,56px) 0;padding:clamp(80px,8vw,112px) 0}
.sbg-step::before{background:linear-gradient(180deg,#0A0E1F,#090C1B);
  box-shadow:inset 0 1px 0 rgba(147,197,253,.085),inset 0 -1px 0 rgba(147,197,253,.06)}
.sbg-step::after{background-image:linear-gradient(rgba(147,197,253,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(147,197,253,.04) 1px,transparent 1px);
  background-size:64px 64px;background-position:50% 0;
  -webkit-mask-image:radial-gradient(62% 58% at 50% 38%,#000 12%,transparent 78%);mask-image:radial-gradient(62% 58% at 50% 38%,#000 12%,transparent 78%)}

/* ---- Referral: a field of dots ---- */
.sbg-dots::before{background-image:radial-gradient(circle,rgba(147,197,253,.18) 1px,transparent 1.5px);background-size:22px 22px;background-position:50% 50%;
  -webkit-mask-image:radial-gradient(46% 62% at 50% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(46% 62% at 50% 50%,#000 20%,transparent 80%)}

/* ---- FAQ: grain ---- */
.sbg-grain::before{opacity:.07;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.sbg-grain::after{background:radial-gradient(50% 60% at 50% 40%,rgba(59,130,246,.035),transparent 72%)}

/* ---- the last call to act: a halo behind the card ---- */
.sbg-rise{padding-bottom:clamp(80px,8vw,128px)!important}
.sbg-rise::after{background:
  radial-gradient(46% 64% at 50% 40%,rgba(37,99,235,.1),transparent 72%),
  radial-gradient(24% 40% at 50% 46%,rgba(45,212,191,.045),transparent 72%)}

@media(max-width:640px){
  .sbg-seam{padding-top:64px}
  .sbg-seam::after{background:
    linear-gradient(90deg,transparent,rgba(165,180,252,.3) 50%,transparent) 0 0/100% 1px no-repeat,
    radial-gradient(80% 260px at 50% 0,rgba(59,130,246,.085),transparent),
    radial-gradient(70% 34% at 60% 80%,rgba(20,184,166,.06),transparent 72%)}
  .sbg-ai::after{background:radial-gradient(90% 60% at 50% 50%,rgba(124,58,237,.075),transparent 72%)}
  .sbg-step{margin:16px 0;padding:60px 0 64px}
  .sbg-step::after{background-size:48px 48px;-webkit-mask-image:radial-gradient(90% 45% at 50% 30%,#000 12%,transparent 80%);mask-image:radial-gradient(90% 45% at 50% 30%,#000 12%,transparent 80%)}
  .sbg-dots::before{-webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(80% 70% at 50% 50%,#000 20%,transparent 80%)}
  .sbg-rise{padding-bottom:64px!important}
  .sbg-rise::after{background:radial-gradient(100% 60% at 50% 42%,rgba(37,99,235,.1),transparent 72%)}
}

/* A section in a page's column (the product pages' section.blk, and the
   others': everything but a full-width .section): its layers reach out to
   the window's edges instead of stopping at the column, and the spacings
   suit the column. */
:is(.sbg-seam,.sbg-ai,.sbg-step,.sbg-dots,.sbg-grain,.sbg-rise):not(.section)::before,
:is(.sbg-seam,.sbg-ai,.sbg-step,.sbg-dots,.sbg-grain,.sbg-rise):not(.section)::after{left:calc(50% - 50vw);right:calc(50% - 50vw)}
.sbg-seam:not(.section){padding-top:clamp(72px,8vw,112px)}
.sbg-step:not(.section){margin:clamp(24px,4vw,48px) 0;padding:clamp(72px,8vw,104px) 0}
.sbg-rise:not(.section){padding-bottom:clamp(72px,8vw,120px)}
@media(max-width:640px){
  .sbg-seam:not(.section){padding-top:60px}
  .sbg-step:not(.section){margin:16px 0;padding:56px 0 60px}
  .sbg-rise:not(.section){padding-bottom:64px}
}