/* =========================================================
   EntryLap V23 — softer square-grid backgrounds
   Keeps every layout, motion and content unchanged.
   Applies consistently on desktop, tablet and mobile.
   ========================================================= */

:root{
  --el-grid:rgba(116,91,87,.032);
  --el-grid-strong:rgba(116,91,87,.052);
  --el-dark-grid:rgba(255,255,255,.026);
}

/* Homepage hero: retain the technical signal field without letting it
   compete with the headline, video or product preview. */
.hero-grid-bg{
  opacity:.56 !important;
  background-image:
    linear-gradient(rgba(177,151,145,.105) 1px,transparent 1px),
    linear-gradient(90deg,rgba(177,151,145,.105) 1px,transparent 1px),
    radial-gradient(circle,rgba(239,78,68,.19) 1px,transparent 1.4px) !important;
}

/* Light marketing sections. */
.product-intro::before{
  background:
    radial-gradient(circle at 7% 22%,var(--el-coral-soft),transparent 24%),
    radial-gradient(circle at 94% 72%,var(--el-purple-soft),transparent 25%),
    linear-gradient(rgba(116,91,87,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(116,91,87,.032) 1px,transparent 1px) !important;
}

.shopify-section::before{
  background-image:
    linear-gradient(rgba(54,139,104,.027) 1px,transparent 1px),
    linear-gradient(90deg,rgba(54,139,104,.027) 1px,transparent 1px) !important;
}

.faq-section::before{
  background-image:
    linear-gradient(rgba(133,105,100,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(133,105,100,.026) 1px,transparent 1px) !important;
}

.site-footer::before{
  background-image:
    linear-gradient(rgba(119,91,86,.027) 1px,transparent 1px),
    linear-gradient(90deg,rgba(119,91,86,.027) 1px,transparent 1px),
    radial-gradient(circle,rgba(239,78,68,.13) 1px,transparent 1.5px) !important;
}

/* Dark sections: keep the grid just visible enough to add depth. */
.story-section::before{
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(116deg,transparent 0 52%,rgba(255,129,120,.055) 52.15% 52.3%,transparent 52.48% 100%) !important;
}

.final-cta::before{
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,129,120,.24) 1px,transparent 1.6px) !important;
}

/* Impact / model visual. */
.impact-visual::after{
  background-image:
    radial-gradient(circle at 78% 49%,rgba(255,255,255,.19) 0 1px,transparent 1.8px),
    repeating-radial-gradient(ellipse at 88% 53%,transparent 0 40px,rgba(195,157,255,.08) 41px 42px,transparent 43px 78px),
    linear-gradient(rgba(255,255,255,.023) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.023) 1px,transparent 1px) !important;
  opacity:.68 !important;
}

/* Individual feature cells that intentionally use square grids. */
.value-card:nth-child(1)::after{
  background:
    linear-gradient(153deg,transparent 0 48%,rgba(239,78,68,.16) 48.4% 49.3%,transparent 49.7%) 78% 33%/42% 46% no-repeat,
    linear-gradient(28deg,transparent 0 51%,rgba(217,79,121,.13) 51.4% 52.2%,transparent 52.6%) 96% 44%/40% 38% no-repeat,
    linear-gradient(rgba(137,104,99,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(137,104,99,.024) 1px,transparent 1px) !important;
}

.module-card:nth-child(1){
  background:
    linear-gradient(rgba(239,78,68,.021) 1px,transparent 1px),
    linear-gradient(90deg,rgba(239,78,68,.021) 1px,transparent 1px),
    linear-gradient(145deg,#fff,#fff8f6) !important;
}

.module-card:nth-child(5){
  background:
    linear-gradient(rgba(59,130,196,.019) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,130,196,.019) 1px,transparent 1px),
    linear-gradient(145deg,#fff,#f6faff) !important;
}

.trust-grid article:nth-child(1){
  background:
    linear-gradient(rgba(239,78,68,.021) 1px,transparent 1px),
    linear-gradient(90deg,rgba(239,78,68,.021) 1px,transparent 1px),
    linear-gradient(145deg,#fff,#fff8f6) !important;
}

/* Public EntryLap AI panel. */
.el-ai-shell{
  background:
    linear-gradient(rgba(231,224,220,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(231,224,220,.085) 1px,transparent 1px),
    radial-gradient(circle at 72% 10%,rgba(239,77,77,.05),transparent 32%),
    #fff !important;
}

/* Legal, trust, support and contact pages. */
.legal-page::before{
  background:
    linear-gradient(rgba(153,124,119,.044) 1px,transparent 1px),
    linear-gradient(90deg,rgba(153,124,119,.044) 1px,transparent 1px),
    radial-gradient(circle at 38% 2%,rgba(239,78,68,.11),transparent 44%),
    radial-gradient(circle at 82% 20%,rgba(181,74,224,.06),transparent 32%) !important;
}

/* Verified Purchase Signals and shared product visuals. */
.technology-visual::before{
  background:
    linear-gradient(90deg,rgba(239,68,68,.026) 1px,transparent 1px),
    linear-gradient(0deg,rgba(37,99,235,.029) 1px,transparent 1px) !important;
}

/* Tablet/mobile: grids should be even quieter because the cells occupy
   a larger share of the viewport. */
@media (max-width:1024px){
  .hero-grid-bg{opacity:.46 !important}
  .product-intro::before,
  .shopify-section::before,
  .faq-section::before,
  .site-footer::before,
  .legal-page::before{opacity:.78}
  .story-section::before,
  .final-cta::before{opacity:.76}
  .el-ai-shell{
    background:
      linear-gradient(rgba(231,224,220,.066) 1px,transparent 1px),
      linear-gradient(90deg,rgba(231,224,220,.066) 1px,transparent 1px),
      radial-gradient(circle at 72% 10%,rgba(239,77,77,.045),transparent 32%),
      #fff !important;
  }
}

@media (max-width:640px){
  .hero-grid-bg{opacity:.40 !important}
  .product-intro::before,
  .shopify-section::before,
  .faq-section::before,
  .site-footer::before,
  .legal-page::before{opacity:.68}
  .story-section::before,
  .final-cta::before{opacity:.66}
}

.legal-assist::before{
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px) !important;
}