/* Reference: https://akhavandp.ir/ — base and gradients checked against main.css. */
body[data-page="home"] {
  --bg: #060a18;
  --panel: #101421;
  --ink: #f0f4fa;
  --muted: #a3abc3;
  --line: #c3d0ff1f;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(47,139,255,.14), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(242,196,109,.06), transparent 60%);
}
body[data-page="home"] .site-header { background: rgba(6,10,24,.72); }
body[data-page="home"] .site-footer { background: #080b17; }
body[data-page="home"] .discipline-strip { background: #0c101d80; }
body[data-page="home"] .experience-section { background: #0d111fb8; }
body[data-page="home"] .path-card,
body[data-page="home"] .faqs details { background: linear-gradient(145deg, #141827f5, #0b0e1cf5); }
body[data-page="home"] .prompt-card { background: #0b0e1cf2; }
body[data-page="home"] .final-cta { background: linear-gradient(105deg, #181c2bee, #101421f2); }
body[data-page="home"] .experience-copy:before,
body[data-page="home"] .faq-section>div:first-child:before {
  background: radial-gradient(ellipse, #060a18a8, transparent 78%);
}
body[data-page="home"] .method-section .step-number {
  background: #141827;
  box-shadow: 0 0 0 6px #060a18, 0 0 28px #49baff18;
}
body[data-page="home"] .site-card,
body[data-page="home"] .site-directory { background: #101421; }
body[data-page="home"] .button-outline,
body[data-page="home"] .site-menu-button { background: #121624; }

/* The reference's active particle scene uses a transparent canvas over this wash. */
body[data-page="home"] .hero { position: relative; isolation: isolate; }
body[data-page="home"] .hero::before,
body[data-page="home"] .hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - 100vw) / 2);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
}
body[data-page="home"] .hero::before {
  background: radial-gradient(50% 40% at 80% 90%, rgba(242,196,109,.08), transparent 70%);
}
body[data-page="home"] .hero::after {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
}
body[data-page="home"] .art-grid { opacity: 0; }