/* ==========================================================
   CREASPARK — BALANCED AURORA FULL-WEBSITE THEME
   ----------------------------------------------------------
   DESIGN INTENT
   - Keep the TOP/HERO rich and strong.
   - Make MIDDLE + LOWER sections lighter, cleaner and premium.
   - Use 4 different soft colour moods across the whole site.
   - Avoid the heavy/dark look in the middle of the page.
   ========================================================== */

:root{
  --cs-white:#FFFFFF;
  --cs-card:rgba(252,253,255,.96);
  --cs-border:rgba(63,100,142,.13);
  --cs-shadow:rgba(32,62,98,.09);
}

/* ==========================================================
   1) WHOLE-SITE BASE
   Light neutral blue-lilac background behind everything.
   ========================================================== */

html{
  background:#DCE9F5 !important;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 10%, rgba(74,151,207,.22) 0%, transparent 24%),
    radial-gradient(circle at 92% 12%, rgba(225,163,109,.16) 0%, transparent 22%),
    radial-gradient(circle at 78% 84%, rgba(154,133,199,.13) 0%, transparent 24%),
    linear-gradient(135deg,#D9E8F4 0%,#E3E0EF 52%,#EEE2D8 100%) !important;
  background-attachment:fixed !important;
}

/* Keep structural wrappers transparent */
main,
.main,
.page,
.page-wrapper,
.site-wrapper,
.content-wrapper{
  background:transparent !important;
}

/* ==========================================================
   2) NAVIGATION
   ========================================================== */

.nav-inner{
  background:rgba(250,252,255,.92) !important;
  border-color:rgba(33,87,145,.12) !important;
  box-shadow:0 10px 30px rgba(28,58,95,.09) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* ==========================================================
   3) DEFAULT SECTION BACKGROUND
   Lighter than the previous version.
   This affects the whole page if a section has no special class.
   ========================================================== */

main section:not(.professional-v3),
body > section:not(.professional-v3),
.section:not(.professional-v3){
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 10% 22%, rgba(79,154,210,.18) 0%, transparent 27%),
    radial-gradient(circle at 88% 24%, rgba(221,158,105,.13) 0%, transparent 24%),
    linear-gradient(135deg,#D8E7F3 0%,#E2E1ED 56%,#ECE0D6 100%) !important;
  border-color:var(--cs-border) !important;
}

/* ==========================================================
   4) FOUR LIGHTER SECTION MOODS
   These repeat automatically down the page.
   ========================================================== */

/* MOOD 1 — Ice Blue + Soft Lilac */
main section:nth-of-type(4n+1):not(.professional-v3),
body > section:nth-of-type(4n+1):not(.professional-v3){
  background:
    radial-gradient(circle at 8% 20%, rgba(67,145,205,.24) 0%, transparent 28%),
    radial-gradient(circle at 75% 18%, rgba(150,130,198,.14) 0%, transparent 24%),
    linear-gradient(135deg,#D3E5F3 0%,#DFDFEE 58%,#E8E1ED 100%) !important;
}

/* MOOD 2 — Aqua + Warm Cream */
main section:nth-of-type(4n+2):not(.professional-v3),
body > section:nth-of-type(4n+2):not(.professional-v3){
  background:
    radial-gradient(circle at 10% 24%, rgba(63,170,174,.20) 0%, transparent 28%),
    radial-gradient(circle at 90% 72%, rgba(223,164,105,.16) 0%, transparent 24%),