/* Five AiMega chapters share their edge colors. Each middle tone changes
   the section's character without drawing a visible seam at its boundary. */
:root {
  --flow-white: #ffffff;
  --flow-mist: #f5f9fe;
  --flow-mist-blue: #eef5fc;
  --flow-blue: #e8f4ff;
  --flow-green: #f1fffd;
  --flow-sky: color-mix(in srgb, #e8f4ff 82%, #51a9ff);
  --flow-mint: color-mix(in srgb, #f1fffd 78%, #7af7e8);
}

main { background: var(--flow-white); }
main > section:is(.hero, .products, .s-detail, .c-detail, .contact) {
  background: linear-gradient(
    180deg,
    var(--flow-from) 0%,
    var(--flow-middle) 51%,
    var(--flow-to) 100%
  );
  border-block: 0;
}

/* White → blue → mint → corporate blue → mint. The same blue/green
   identity runs across both products and the contact area. */
.hero {
  --flow-from: var(--flow-white);
  --flow-middle: var(--flow-mist);
  --flow-to: var(--flow-blue);
}
.products {
  --flow-from: var(--flow-blue);
  --flow-middle: var(--flow-mint);
  --flow-to: var(--flow-green);
}
.s-detail {
  --flow-from: var(--flow-green);
  --flow-middle: var(--flow-mist);
  --flow-to: var(--flow-mist-blue);
}
.c-detail {
  --flow-from: var(--flow-mist-blue);
  --flow-middle: var(--flow-sky);
  --flow-to: var(--flow-blue);
}
.contact {
  --flow-from: var(--flow-blue);
  --flow-middle: var(--flow-mint);
  --flow-to: var(--flow-green);
}
.footer {
  /* AiMega-C ends in blue while the contact banner is temporarily hidden. */
  background: linear-gradient(180deg, var(--flow-blue), var(--flow-green) 65%, var(--flow-blue));
  border-top: 0;
}

/* Wide displays need less empty space between adjacent chapters. */
@media (min-width: 1600px) and (min-height: 720px) {
  .hero, .products, .product-detail {
    min-height: min(740px, calc(80svh - var(--header-height)));
  }
}