/* =========================================================
   ABSTRACT MOBILE SECTION MARKERS
   ========================================================= */

.section-marker {
  --marker-light: #e8f8dc;
  --marker-mid: #a8e68d;
  --marker-soft: #8ed99a;
  --marker-main: #48bb72;
  --marker-deep: #168657;

  --marker-shape-a: rgba(72, 210, 110, 0.96);
  --marker-shape-b: rgba(0, 135, 95, 0.98);
  --marker-shadow: rgba(20, 105, 72, 0.5);

  --gradient-angle: 145deg;

  --glow-x: 25%;
  --glow-y: 15%;
  --mist-x: 80%;
  --mist-y: 28%;

  --blob-top: auto;
  --blob-right: -32%;
  --blob-bottom: -18%;
  --blob-left: auto;
  --blob-width: 120%;
  --blob-height: 75%;
  --blob-radius: 50%;
  --blob-rotate: -28deg;
  --blob-blur: 16px;
  --blob-shadow-x: -10px;
  --blob-shadow-y: 12px;
  --blob-shadow-blur: 28px;

  --shadow-top: auto;
  --shadow-right: auto;
  --shadow-bottom: -15%;
  --shadow-left: -25%;
  --shadow-width: 110%;
  --shadow-height: 25%;
  --shadow-radius: 999px;
  --shadow-rotate: 24deg;
  --shadow-blur: 9px;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    radial-gradient(
      circle at var(--glow-x) var(--glow-y),
      var(--marker-light) 0%,
      color-mix(in srgb, var(--marker-mid) 82%, transparent) 34%,
      transparent 68%
    ),
    radial-gradient(
      ellipse at var(--mist-x) var(--mist-y),
      color-mix(in srgb, var(--marker-soft) 74%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      var(--gradient-angle),
      var(--marker-light) 0%,
      var(--marker-mid) 46%,
      var(--marker-main) 75%,
      var(--marker-deep) 100%
    );
}

.section-marker::before {
  content: "";
  position: absolute;
  z-index: -1;

  top: var(--blob-top);
  right: var(--blob-right);
  bottom: var(--blob-bottom);
  left: var(--blob-left);

  width: var(--blob-width);
  height: var(--blob-height);
  border-radius: var(--blob-radius);

  background:
    linear-gradient(
      135deg,
      var(--marker-shape-a),
      var(--marker-shape-b)
    );

  box-shadow:
    var(--blob-shadow-x)
    var(--blob-shadow-y)
    var(--blob-shadow-blur)
    var(--marker-shadow);

  filter: blur(var(--blob-blur));
  transform: rotate(var(--blob-rotate));
}

.section-marker::after {
  content: "";
  position: absolute;
  z-index: -1;

  top: var(--shadow-top);
  right: var(--shadow-right);
  bottom: var(--shadow-bottom);
  left: var(--shadow-left);

  width: var(--shadow-width);
  height: var(--shadow-height);
  border-radius: var(--shadow-radius);

  background: var(--marker-shadow);

  filter: blur(var(--shadow-blur));
  transform: rotate(var(--shadow-rotate));
}


/* =========================================================
   1. GREEN — broad rising curve from lower right
   ========================================================= */

.section-marker--green {
  --marker-light: #e2f8d0;
  --marker-mid: #a9e88d;
  --marker-soft: #b2efbd;
  --marker-main: #48bb72;
  --marker-deep: #168657;
  --marker-shape-a: rgba(72, 210, 110, 0.96);
  --marker-shape-b: rgba(0, 135, 95, 0.98);
  --marker-shadow: rgba(20, 105, 72, 0.52);

  --gradient-angle: 145deg;
  --glow-x: 18%;
  --glow-y: 10%;
  --mist-x: 75%;
  --mist-y: 20%;

  --blob-right: -32%;
  --blob-bottom: -20%;
  --blob-width: 125%;
  --blob-height: 78%;
  --blob-radius: 50%;
  --blob-rotate: -28deg;
  --blob-blur: 16px;

  --shadow-left: -28%;
  --shadow-bottom: -13%;
  --shadow-width: 115%;
  --shadow-height: 24%;
  --shadow-rotate: 24deg;
  --shadow-blur: 9px;
}


/* =========================================================
   2. BLUE — tall vertical sweep from the right
   ========================================================= */

.section-marker--blue {
  --marker-light: #dcefff;
  --marker-mid: #9fd4ff;
  --marker-soft: #9ddfff;
  --marker-main: #43a7f5;
  --marker-deep: #147fd1;
  --marker-shape-a: rgba(0, 190, 220, 0.96);
  --marker-shape-b: rgba(0, 105, 235, 0.98);
  --marker-shadow: rgba(30, 92, 165, 0.52);

  --gradient-angle: 160deg;
  --glow-x: 35%;
  --glow-y: 6%;
  --mist-x: 12%;
  --mist-y: 48%;

  --blob-top: 30%;
  --blob-right: -20%;
  --blob-bottom: auto;
  --blob-width: 68%;
  --blob-height: 105%;
  --blob-radius: 48% 42% 25% 60%;
  --blob-rotate: 27deg;
  --blob-blur: 18px;

  --blob-shadow-x: -20px;
  --blob-shadow-y: 8px;
  --blob-shadow-blur: 32px;

  --shadow-right: -18%;
  --shadow-bottom: -18%;
  --shadow-left: auto;
  --shadow-width: 105%;
  --shadow-height: 18%;
  --shadow-rotate: -16deg;
  --shadow-blur: 7px;
}


/* =========================================================
   3. VIOLET — large floating form from upper left
   ========================================================= */

.section-marker--violet {
  --marker-light: #eee7ff;
  --marker-mid: #c9b4ff;
  --marker-soft: #d8c2ff;
  --marker-main: #9a6cf0;
  --marker-deep: #6437bd;
  --marker-shape-a: rgba(169, 108, 255, 0.96);
  --marker-shape-b: rgba(95, 45, 190, 0.98);
  --marker-shadow: rgba(72, 35, 135, 0.52);

  --gradient-angle: 125deg;
  --glow-x: 82%;
  --glow-y: 12%;
  --mist-x: 22%;
  --mist-y: 70%;

  --blob-top: -45%;
  --blob-right: auto;
  --blob-bottom: auto;
  --blob-left: -24%;
  --blob-width: 112%;
  --blob-height: 110%;
  --blob-radius: 42% 58% 50% 46%;
  --blob-rotate: 18deg;
  --blob-blur: 20px;

  --blob-shadow-x: 25px;
  --blob-shadow-y: 28px;
  --blob-shadow-blur: 38px;

  --shadow-right: -20%;
  --shadow-bottom: -8%;
  --shadow-left: auto;
  --shadow-width: 85%;
  --shadow-height: 28%;
  --shadow-rotate: -28deg;
  --shadow-blur: 12px;
}


/* =========================================================
   4. PINK — horizontal ribbon crossing the lower centre
   ========================================================= */

.section-marker--pink {
  --marker-light: #ffe2f0;
  --marker-mid: #f8a9cf;
  --marker-soft: #ffc0dd;
  --marker-main: #e85b9a;
  --marker-deep: #b72d6d;
  --marker-shape-a: rgba(245, 95, 165, 0.96);
  --marker-shape-b: rgba(190, 40, 115, 0.98);
  --marker-shadow: rgba(132, 34, 88, 0.5);

  --gradient-angle: 175deg;
  --glow-x: 20%;
  --glow-y: 20%;
  --mist-x: 88%;
  --mist-y: 5%;

  --blob-top: 42%;
  --blob-right: -18%;
  --blob-bottom: auto;
  --blob-width: 132%;
  --blob-height: 48%;
  --blob-radius: 999px 40% 999px 55%;
  --blob-rotate: -11deg;
  --blob-blur: 14px;

  --blob-shadow-x: -12px;
  --blob-shadow-y: 18px;
  --blob-shadow-blur: 24px;

  --shadow-left: -12%;
  --shadow-bottom: -22%;
  --shadow-width: 72%;
  --shadow-height: 48%;
  --shadow-radius: 50%;
  --shadow-rotate: 12deg;
  --shadow-blur: 17px;
}


/* =========================================================
   4. PINK — offset diagonal bloom sweeping across the centre
   ========================================================= */

.section-marker--pink-2 {
  --marker-light: #ffe2f0;
  --marker-mid: #f8a9cf;
  --marker-soft: #ffc0dd;
  --marker-main: #e85b9a;
  --marker-deep: #b72d6d;
  --marker-shape-a: rgba(245, 95, 165, 0.96);
  --marker-shape-b: rgba(190, 40, 115, 0.98);
  --marker-shadow: rgba(132, 34, 88, 0.5);

  --gradient-angle: 138deg;
  --glow-x: 82%;
  --glow-y: 14%;
  --mist-x: 10%;
  --mist-y: 88%;

  --blob-top: -18%;
  --blob-right: -12%;
  --blob-bottom: auto;
  --blob-width: 82%;
  --blob-height: 138%;
  --blob-radius: 62% 38% 54% 46% / 42% 58% 38% 62%;
  --blob-rotate: 34deg;
  --blob-blur: 10px;

  --blob-shadow-x: -20px;
  --blob-shadow-y: 22px;
  --blob-shadow-blur: 30px;

  --shadow-left: -16%;
  --shadow-bottom: -28%;
  --shadow-width: 88%;
  --shadow-height: 74%;
  --shadow-radius: 58% 42% 68% 32% / 52% 64% 36% 48%;
  --shadow-rotate: -24deg;
  --shadow-blur: 22px;
}

/* =========================================================
   4. PINK — split-wave bloom with opposing corner movement
   ========================================================= */

.section-marker--pink-3 {
  --marker-light: #ffe2f0;
  --marker-mid: #f8a9cf;
  --marker-soft: #ffc0dd;
  --marker-main: #e85b9a;
  --marker-deep: #b72d6d;
  --marker-shape-a: rgba(245, 95, 165, 0.96);
  --marker-shape-b: rgba(190, 40, 115, 0.98);
  --marker-shadow: rgba(132, 34, 88, 0.5);

  --gradient-angle: 214deg;
  --glow-x: 18%;
  --glow-y: 16%;
  --mist-x: 86%;
  --mist-y: 82%;

  --blob-top: 18%;
  --blob-right: -24%;
  --blob-bottom: auto;
  --blob-width: 118%;
  --blob-height: 68%;
  --blob-radius: 38% 62% 44% 56% / 58% 42% 66% 34%;
  --blob-rotate: -28deg;
  --blob-blur: 12px;

  --blob-shadow-x: -26px;
  --blob-shadow-y: -14px;
  --blob-shadow-blur: 28px;

  --shadow-left: -20%;
  --shadow-bottom: -34%;
  --shadow-width: 78%;
  --shadow-height: 92%;
  --shadow-radius: 72% 28% 62% 38% / 36% 64% 42% 58%;
  --shadow-rotate: 32deg;
  --shadow-blur: 20px;
}


/* =========================================================
   5. RED — strong diagonal rising from lower left
   ========================================================= */

.section-marker--red {
  --marker-light: #ffe4df;
  --marker-mid: #ffb09e;
  --marker-soft: #ffc0af;
  --marker-main: #ef6954;
  --marker-deep: #b93732;
  --marker-shape-a: rgba(255, 105, 75, 0.96);
  --marker-shape-b: rgba(190, 45, 45, 0.98);
  --marker-shadow: rgba(130, 42, 40, 0.52);

  --gradient-angle: 135deg;
  --glow-x: 68%;
  --glow-y: 10%;
  --mist-x: 18%;
  --mist-y: 30%;

  --blob-top: 32%;
  --blob-right: auto;
  --blob-bottom: auto;
  --blob-left: -40%;
  --blob-width: 135%;
  --blob-height: 58%;
  --blob-radius: 35% 65% 50% 40%;
  --blob-rotate: 34deg;
  --blob-blur: 13px;

  --blob-shadow-x: 18px;
  --blob-shadow-y: 14px;
  --blob-shadow-blur: 26px;

  --shadow-right: -30%;
  --shadow-bottom: -20%;
  --shadow-left: auto;
  --shadow-width: 95%;
  --shadow-height: 34%;
  --shadow-rotate: -22deg;
  --shadow-blur: 11px;
}


/* =========================================================
   6. ORANGE — central warm bloom with low curved shadow
   ========================================================= */

.section-marker--orange {
  --marker-light: #fff0d6;
  --marker-mid: #ffc77b;
  --marker-soft: #ffd39c;
  --marker-main: #f28d35;
  --marker-deep: #bd571c;
  --marker-shape-a: rgba(255, 153, 55, 0.96);
  --marker-shape-b: rgba(205, 75, 20, 0.98);
  --marker-shadow: rgba(140, 70, 26, 0.5);

  --gradient-angle: 155deg;
  --glow-x: 50%;
  --glow-y: 8%;
  --mist-x: 8%;
  --mist-y: 65%;

  --blob-top: 25%;
  --blob-right: -16%;
  --blob-bottom: auto;
  --blob-width: 105%;
  --blob-height: 72%;
  --blob-radius: 60% 30% 52% 42%;
  --blob-rotate: -8deg;
  --blob-blur: 19px;

  --blob-shadow-x: -5px;
  --blob-shadow-y: 24px;
  --blob-shadow-blur: 34px;

  --shadow-right: 8%;
  --shadow-bottom: -22%;
  --shadow-left: auto;
  --shadow-width: 94%;
  --shadow-height: 42%;
  --shadow-radius: 50%;
  --shadow-rotate: 4deg;
  --shadow-blur: 15px;
}


/* =========================================================
   7. TEAL — opposing diagonal sweeps
   ========================================================= */

.section-marker--teal {
  --marker-light: #d8f7f4;
  --marker-mid: #8edfd6;
  --marker-soft: #a4ece4;
  --marker-main: #2ab8aa;
  --marker-deep: #087c74;
  --marker-shape-a: rgba(32, 205, 190, 0.96);
  --marker-shape-b: rgba(0, 125, 120, 0.98);
  --marker-shadow: rgba(20, 95, 92, 0.5);

  --gradient-angle: 115deg;
  --glow-x: 12%;
  --glow-y: 14%;
  --mist-x: 90%;
  --mist-y: 55%;

  --blob-top: -22%;
  --blob-right: -32%;
  --blob-bottom: auto;
  --blob-width: 92%;
  --blob-height: 120%;
  --blob-radius: 45% 55% 35% 65%;
  --blob-rotate: 38deg;
  --blob-blur: 17px;

  --blob-shadow-x: -24px;
  --blob-shadow-y: 14px;
  --blob-shadow-blur: 30px;

  --shadow-left: -30%;
  --shadow-bottom: -8%;
  --shadow-width: 105%;
  --shadow-height: 22%;
  --shadow-rotate: -32deg;
  --shadow-blur: 8px;
}

/* =========================================================
   8. YELLOW — fresh citrus diagonal sweeps
   Predominantly yellow with restrained green depth
   ========================================================= */

.section-marker--yellow {
  --marker-light: #fffbd8;
  --marker-mid: #f5e86e;
  --marker-soft: #f8ef9a;
  --marker-main: #e9d63a;
  --marker-deep: #a6b83f;

  --marker-shape-a: rgba(244, 225, 73, 0.94);
  --marker-shape-b: rgba(174, 194, 67, 0.82);

  /* Very light, cool shadow to avoid a gold appearance */
  --marker-shadow: rgba(84, 104, 56, 0.16);

  --gradient-angle: 115deg;
  --glow-x: 12%;
  --glow-y: 14%;
  --mist-x: 90%;
  --mist-y: 55%;

  --blob-top: -22%;
  --blob-right: -32%;
  --blob-bottom: auto;
  --blob-width: 92%;
  --blob-height: 120%;
  --blob-radius: 45% 55% 35% 65%;
  --blob-rotate: 38deg;
  --blob-blur: 14px;

  /* Reduced depth and displacement */
  --blob-shadow-x: -10px;
  --blob-shadow-y: 8px;
  --blob-shadow-blur: 18px;

  --shadow-left: -30%;
  --shadow-bottom: -8%;
  --shadow-width: 105%;
  --shadow-height: 18%;
  --shadow-rotate: -32deg;
  --shadow-blur: 5px;
}

/* =========================================================
   8. Slate — broad foggy mass and subtle lower slash
   ========================================================= */

.section-marker--slate {
  --marker-light: #f4f4f5;
  --marker-mid: #d4d4d8;
  --marker-soft: #e4e4e7;
  --marker-main: #a1a1aa;
  --marker-deep: #52525b;
  --marker-shape-a: rgba(161, 161, 170, 0.95);
  --marker-shape-b: rgba(63, 63, 70, 0.98);
  --marker-shadow: rgba(39, 39, 42, 0.48);

  --gradient-angle: 150deg;
  --glow-x: 42%;
  --glow-y: 5%;
  --mist-x: 72%;
  --mist-y: 68%;

  --blob-top: 18%;
  --blob-right: -12%;
  --blob-bottom: auto;
  --blob-width: 118%;
  --blob-height: 75%;
  --blob-radius: 55% 35% 60% 42%;
  --blob-rotate: 13deg;
  --blob-blur: 24px;

  --blob-shadow-x: -8px;
  --blob-shadow-y: 20px;
  --blob-shadow-blur: 40px;

  --shadow-left: -18%;
  --shadow-bottom: -18%;
  --shadow-width: 88%;
  --shadow-height: 18%;
  --shadow-rotate: 18deg;
  --shadow-blur: 6px;
}

/* =========================================================
   9.1 ZINC DARK — near-zinc-800 graphite with black depth
   ========================================================= */

.section-marker--zinc-dark-1 {
  --marker-light: #71717a; /* zinc-500 */
  --marker-mid: #52525b;   /* zinc-600 */
  --marker-soft: #3f3f46;  /* zinc-700 */
  --marker-main: #27272a;  /* zinc-800 */
  --marker-deep: #18181b;  /* zinc-900 */

  --marker-shape-a: rgba(39, 39, 42, 0.99);
  --marker-shape-b: rgba(9, 9, 11, 1);
  --marker-shadow: rgba(0, 0, 0, 0.72);

  --gradient-angle: 142deg;
  --glow-x: 15%;
  --glow-y: 6%;
  --mist-x: 84%;
  --mist-y: 22%;

  /* Broad graphite sweep */
  --blob-top: 40%;
  --blob-right: -24%;
  --blob-bottom: auto;
  --blob-left: auto;
  --blob-width: 134%;
  --blob-height: 48%;
  --blob-radius: 999px 42% 999px 36%;
  --blob-rotate: -18deg;
  --blob-blur: 15px;

  --blob-shadow-x: -18px;
  --blob-shadow-y: 20px;
  --blob-shadow-blur: 30px;

  /* Dense lower black shadow */
  --shadow-top: auto;
  --shadow-right: auto;
  --shadow-bottom: -12%;
  --shadow-left: -28%;
  --shadow-width: 100%;
  --shadow-height: 19%;
  --shadow-radius: 999px;
  --shadow-rotate: 25deg;
  --shadow-blur: 8px;
}



   /* =========================================================
      9B. ZINC-2 — horizontally mirrored
      ========================================================= */

   .section-marker--zinc-2 {
     --marker-light: #c7cdd4;
     --marker-mid: #89929e;
     --marker-soft: #a4acb6;
     --marker-main: #505966;
     --marker-deep: #202731;
     --marker-shape-a: rgba(82, 92, 104, 0.98);
     --marker-shape-b: rgba(24, 30, 39, 1);
     --marker-shadow: rgba(10, 14, 20, 0.58);

     --gradient-angle: 206deg;
     --glow-x: 72%;
     --glow-y: 4%;
     --mist-x: 24%;
     --mist-y: 68%;

     /* Broad upright graphite mass — mirrored to left */
     --blob-top: -20%;
     --blob-right: auto;
     --blob-bottom: auto;
     --blob-left: -12%;
     --blob-width: 72%;
     --blob-height: 138%;
     --blob-radius: 999px 44% 999px 38%;
     --blob-rotate: -12deg;
     --blob-blur: 11px;

     /* Shadow now falls down and right */
     --blob-shadow-x: 24px;
     --blob-shadow-y: 30px;
     --blob-shadow-blur: 38px;

     /* Soft compressed grounding shadow */
     --shadow-top: auto;
     --shadow-right: auto;
     --shadow-bottom: -14%;
     --shadow-left: -8%;
     --shadow-width: 78%;
     --shadow-height: 34%;
     --shadow-radius: 999px 52% 999px 46%;
     --shadow-rotate: 8deg;
     --shadow-blur: 18px;
   }


   /* =========================================================
      9C. ZINC-3 — horizontally mirrored
      ========================================================= */

   .section-marker--zinc-3 {
     --marker-light: #c7cdd4;
     --marker-mid: #89929e;
     --marker-soft: #a4acb6;
     --marker-main: #505966;
     --marker-deep: #202731;
     --marker-shape-a: rgba(82, 92, 104, 0.98);
     --marker-shape-b: rgba(24, 30, 39, 1);
     --marker-shadow: rgba(10, 14, 20, 0.58);

     --gradient-angle: 234deg;
     --glow-x: 84%;
     --glow-y: 16%;
     --mist-x: 28%;
     --mist-y: 38%;

     /* Irregular organic graphite body — mirrored to left */
     --blob-top: -18%;
     --blob-right: auto;
     --blob-bottom: auto;
     --blob-left: -20%;
     --blob-width: 112%;
     --blob-height: 118%;
     --blob-radius: 38% 62% 46% 54% / 58% 44% 56% 42%;
     --blob-rotate: 9deg;
     --blob-blur: 13px;

     /* Deep offset shadow creates a folded underside */
     --blob-shadow-x: 28px;
     --blob-shadow-y: 24px;
     --blob-shadow-blur: 34px;

     /* Secondary organic shadow */
     --shadow-top: auto;
     --shadow-right: auto;
     --shadow-bottom: -18%;
     --shadow-left: -18%;
     --shadow-width: 92%;
     --shadow-height: 42%;
     --shadow-radius: 42% 58% 36% 64% / 46% 52% 48% 54%;
     --shadow-rotate: -14deg;
     --shadow-blur: 16px;
   }


   /* =========================================================
      9D. ZINC PORTRAIT — horizontally mirrored
      ========================================================= */

   .section-marker--zinc-portrait {
     --marker-light: #c7cdd4;
     --marker-mid: #89929e;
     --marker-soft: #a4acb6;
     --marker-main: #505966;
     --marker-deep: #202731;
     --marker-shape-a: rgba(82, 92, 104, 0.98);
     --marker-shape-b: rgba(24, 30, 39, 1);
     --marker-shadow: rgba(10, 14, 20, 0.58);

     --gradient-angle: 218deg;
     --glow-x: 80%;
     --glow-y: 10%;
     --mist-x: 16%;
     --mist-y: 18%;

     /* Angular structural graphite slab — mirrored to left */
     --blob-top: 8%;
     --blob-right: auto;
     --blob-bottom: auto;
     --blob-left: -16%;
     --blob-width: 108%;
     --blob-height: 74%;
     --blob-radius: 8% 18% 12% 22% / 10% 14% 16% 20%;
     --blob-rotate: 11deg;
     --blob-blur: 8px;

     /* Architectural depth */
     --blob-shadow-x: 18px;
     --blob-shadow-y: 22px;
     --blob-shadow-blur: 20px;

     /* Long foundation shadow */
     --shadow-top: auto;
     --shadow-right: auto;
     --shadow-bottom: -9%;
     --shadow-left: -10%;
     --shadow-width: 88%;
     --shadow-height: 20%;
     --shadow-radius: 18% 10% 16% 8%;
     --shadow-rotate: -7deg;
     --shadow-blur: 9px;
   }


   /* =========================================================
      9E. ZINC-5 — horizontally mirrored
      ========================================================= */

   .section-marker--zinc-5 {
     background-image:
       linear-gradient(
         248deg,
         transparent 0 37%,
         rgba(255, 255, 255, 0.018) 37.1% 37.35%,
         transparent 37.5%
       ),
       linear-gradient(
         283deg,
         transparent 0 71%,
         rgba(255, 255, 255, 0.012) 71.1% 71.35%,
         transparent 71.5%
       ),
       radial-gradient(
         circle at 83% 8%,
         rgba(42, 47, 55, 0.18) 0,
         rgba(24, 28, 34, 0.1) 20%,
         transparent 43%
       ),
       radial-gradient(
         ellipse at 14% 76%,
         rgba(28, 33, 40, 0.14) 0,
         transparent 46%
       ),
       linear-gradient(
         315deg,
         #15191f 0%,
         #0e1217 68%,
         #090c10 81%,
         #030507 100%
       );
   }
   /* =========================================================
      10. PLUM — luminous folded ribbon with deep plum shadow
      ========================================================= */

   .section-marker--plum {
     --marker-light: #ddd6fe;
     --marker-mid: #a78bfa;
     --marker-soft: #c4b5fd;
     --marker-main: #7c3aed;
     --marker-deep: #3b0764;
     --marker-shape-a: rgba(124, 58, 237, 0.98);
     --marker-shape-b: rgba(59, 7, 100, 1);
     --marker-shadow: rgba(37, 12, 68, 0.56);

     --gradient-angle: 132deg;
     --glow-x: 24%;
     --glow-y: 12%;
     --mist-x: 78%;
     --mist-y: 34%;

     /* Curved ribbon entering from the upper-left */
     --blob-top: -24%;
     --blob-right: auto;
     --blob-bottom: auto;
     --blob-left: -18%;
     --blob-width: 118%;
     --blob-height: 76%;
     --blob-radius: 58% 42% 68% 32% / 40% 64% 36% 60%;
     --blob-rotate: 18deg;
     --blob-blur: 10px;

     /* Offset shadow creates the folded lower edge */
     --blob-shadow-x: 22px;
     --blob-shadow-y: 28px;
     --blob-shadow-blur: 30px;

     /* Separate crescent shadow crossing the lower-right */
     --shadow-top: auto;
     --shadow-right: -24%;
     --shadow-bottom: -16%;
     --shadow-left: auto;
     --shadow-width: 102%;
     --shadow-height: 28%;
     --shadow-radius: 999px 42% 999px 36%;
     --shadow-rotate: -21deg;
     --shadow-blur: 13px;
   }