/* A single canvas lets decorative colour cross section boundaries. */
.home { position: relative; isolation: isolate; overflow: clip; --flow-fade: linear-gradient(to bottom, transparent, black 24%, black 72%, transparent); }
.cloud-regions { position: relative; isolation: auto; overflow: visible; --cloud-dim: 1; }
.cloud-regions > :is(.sec, .software-guide) { position: relative; isolation: auto; overflow: visible; background: none !important; border-bottom-color: transparent; --cloud-side: 100%; --cloud-other: 0%; --cloud-tone: #80b8dc; --cloud-turn: 0deg; --cloud-strength: .45; --glass: 94%; }
.cloud-regions .sec { border-bottom-color: transparent; }
/* Fixed art direction: no random changes between visits or while scrolling. */
.cloud-regions > .sec-videos { --cloud-strength: .65; --cloud-side: 100%; }
.cloud-regions > .software-guide { --cloud-strength: .76; --cloud-side: 0%; --cloud-other: 100%; --cloud-tone: #819ed8; --cloud-turn: 8deg; --glass: 94%; }
.cloud-regions > .sec-packages { --cloud-strength: .80; --cloud-side: 0%; }
.cloud-regions > .sec-spotlight { --cloud-strength: .54; --cloud-side: 100%; --cloud-tone: #80b8dc; --glass: 90%; }
.cloud-regions > .sec-people:not(.per-4):not(.per-5) { --cloud-strength: .38; --cloud-side: 0%; --cloud-other: 100%; --cloud-tone: #879ace; --cloud-turn: 12deg; }
.cloud-regions > .sec-testimonials { --cloud-strength: .34; --cloud-side: 100%; --cloud-tone: #87afcd; --cloud-turn: -5deg; --glass: 92%; }
.cloud-regions > .sec-features { --cloud-strength: .60; --cloud-side: 0%; }
.cloud-regions > .per-4 { --cloud-strength: .58; --cloud-side: 100%; --cloud-tone: #849bcf; --cloud-turn: 11deg; }
.cloud-regions > .per-5 { --cloud-strength: .43; --cloud-side: 0%; --cloud-other: 100%; --cloud-tone: #81b5ce; --cloud-turn: -8deg; }
.cloud-regions > .sec-rep { --cloud-strength: .40; --cloud-side: 100%; }
.cloud-regions > :is(.sec,.software-guide)::before { content: ""; position: absolute; inset: -180px -8%; z-index: -1; pointer-events: none; opacity: calc(var(--cloud-strength) * var(--cloud-dim)); background: radial-gradient(ellipse 60% 55% at var(--cloud-side) 74%, var(--stone), transparent 80%); -webkit-mask-image: var(--flow-fade); mask-image: var(--flow-fade); }
/* Blended sections: smooth filled cores with a soft, textured perimeter. */
.cloud-regions > :is(.software-guide,.sec-people:not(.per-4))::before {
 inset: -150px -8%; opacity: calc(var(--cloud-strength) * var(--cloud-dim));
 background: radial-gradient(ellipse 70% 70% at var(--cloud-other) 5%, color-mix(in srgb, var(--surface) 90%, transparent), transparent 78%), radial-gradient(ellipse 70% 72% at var(--cloud-side) 48%, color-mix(in srgb, var(--cloud-tone) 58%, transparent) 0%, color-mix(in srgb, var(--cloud-tone) 47%, transparent) 34%, color-mix(in srgb, var(--cloud-tone) 22%, transparent) 62%, transparent 92%), radial-gradient(ellipse 65% 45% at var(--cloud-other) 82%, var(--stone), transparent 80%);
 -webkit-mask-image: var(--flow-fade); mask-image: var(--flow-fade);
}
/* Organic sections: looser colour and diffusion; quieter around testimonials. */
.cloud-regions > :is(.sec-spotlight,.sec-testimonials,.per-4)::before {
 inset: -180px -8%; opacity: calc(var(--cloud-strength) * var(--cloud-dim));
 background: radial-gradient(ellipse 62% 54% at var(--cloud-side) 48%, color-mix(in srgb, var(--cloud-tone) 55%, transparent), transparent 78%), radial-gradient(ellipse 46% 30% at var(--cloud-side) 20%, color-mix(in srgb, var(--cloud-tone) 24%, transparent), transparent 83%), radial-gradient(ellipse 65% 44% at var(--cloud-side) 90%, color-mix(in srgb, var(--cloud-tone) 20%, transparent), transparent 80%);
 -webkit-mask-image: var(--flow-fade); mask-image: var(--flow-fade);
}
.cloud-regions > :is(.software-guide,.sec-people,.sec-spotlight,.sec-testimonials)::after {
 content: ""; position: absolute; inset: -180px -8%; z-index: -1; pointer-events: none; opacity: calc(var(--cloud-strength) * var(--cloud-dim) * .34); filter: hue-rotate(var(--cloud-turn));
 background: url("/images/cloud-flow-texture.svg") var(--cloud-side) center / 1500px 1200px no-repeat;
 -webkit-mask-image: var(--flow-fade), radial-gradient(ellipse 65% 65% at var(--cloud-side) 48%, transparent 0%, black 57%, transparent 90%); -webkit-mask-composite: source-in;
 mask-image: var(--flow-fade), radial-gradient(ellipse 65% 65% at var(--cloud-side) 48%, transparent 0%, black 57%, transparent 90%); mask-composite: intersect;
}
.cloud-regions :is(.quiz,.quiz-body,.tile,.crystals,.spot,.video,.feature,.explore-card,.quote) { background: color-mix(in srgb, var(--surface) var(--glass), transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cloud-regions .quiz { background: color-mix(in srgb, var(--mint) 91%, transparent); }
.cloud-regions .quiz-body { background: color-mix(in srgb, var(--surface) 90%, transparent); }
.cloud-regions > .sec-white { background: none !important; }
.cloud-regions > .sec-white::before { content: none; }
:root[data-theme="dark"] .cloud-regions { --cloud-dim: .43; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cloud-regions { --cloud-dim: .43; } }
@media(max-width:767px) { .cloud-regions :is(.quiz,.quiz-body,.tile,.crystals,.spot,.video,.feature,.explore-card,.quote) { -webkit-backdrop-filter:none;backdrop-filter:none; } }

/* Stone uses the same diffusion, texture and section strengths as blue.
   Tint the shared alpha texture with the stone token instead of blue pixels. */
.cloud-regions > :is(.sec-videos,.sec-packages,.sec-features,.sec-rep)::after {
 content: ""; position: absolute; inset: -180px -8%; z-index: -1; pointer-events: none;
 opacity: calc(var(--cloud-strength) * var(--cloud-dim) * .34);
 background: radial-gradient(ellipse 65% 60% at var(--cloud-side) 74%, var(--stone), transparent 85%);
 -webkit-mask-image: url("/images/cloud-flow-texture.svg"), var(--flow-fade);
 -webkit-mask-size: 1500px 1200px, 100% 100%; -webkit-mask-composite: source-in;
 mask-image: url("/images/cloud-flow-texture.svg"), var(--flow-fade);
 mask-size: 1500px 1200px, 100% 100%; mask-composite: intersect;
}

/* The masthead keeps its light and blue palette, but its paint now extends
   below its box. Content remains unmasked and in its original position. */
.home > .hero { isolation: auto; overflow: visible; background: none; }
.home > .hero::after {
 content: ""; position: absolute; inset: 0 0 -200px; z-index: -2; pointer-events: none;
 background:
  radial-gradient(ellipse var(--lamp-w) var(--lamp-h) at var(--lamp-x) 0%, var(--lamp-core) 0%, var(--lamp-mid) 30%, transparent 70%),
  radial-gradient(ellipse var(--bloom-w) var(--bloom-h) at var(--bloom-x) var(--bloom-y), var(--bloom) 0%, var(--bloom-soft) 45%, transparent 100%),
  linear-gradient(var(--lamp-stone), var(--lamp-stone)),
  radial-gradient(ellipse 60% 70% at 100% 100%, var(--stone), transparent 70%);
 -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 260px), transparent);
 mask-image: linear-gradient(to bottom, black calc(100% - 260px), transparent);
}
.home > .hero::before {
 bottom: -200px;
 -webkit-mask-image: radial-gradient(ellipse var(--bloom-w) var(--bloom-h) at var(--bloom-x) var(--bloom-y), black 20%, transparent 100%), linear-gradient(to bottom, black calc(100% - 260px), transparent);
 -webkit-mask-composite: source-in;
 mask-image: radial-gradient(ellipse var(--bloom-w) var(--bloom-h) at var(--bloom-x) var(--bloom-y), black 20%, transparent 100%), linear-gradient(to bottom, black calc(100% - 260px), transparent);
 mask-composite: intersect;
}
/* The stone ribbon has a filled centre and a misted edge in BOTH directions. */
.home > .ribbon { position: relative; background: none; }
.home > .ribbon::before, .home > .ribbon::after {
 content: ""; position: absolute; inset: -160px 0 -240px; z-index: -1; pointer-events: none;
 background: linear-gradient(90deg, var(--ribbon), transparent 85%);
 -webkit-mask-image: linear-gradient(to bottom, transparent, black 160px, black calc(100% - 240px), transparent);
 mask-image: linear-gradient(to bottom, transparent, black 160px, black calc(100% - 240px), transparent);
}
.home > .ribbon::after {
 opacity: .4;
 -webkit-mask-image: url("/images/cloud-flow-texture.svg"), linear-gradient(to bottom, transparent, black 140px, black calc(100% - 160px), transparent);
 -webkit-mask-size: 1500px 600px, 100% 100%; -webkit-mask-composite: source-in;
 mask-image: url("/images/cloud-flow-texture.svg"), linear-gradient(to bottom, transparent, black 140px, black calc(100% - 160px), transparent);
 mask-size: 1500px 600px, 100% 100%; mask-composite: intersect;
}