/* AI voor het mkb, ronde 9. Overschrijft de ai-regels in oplossingen.css. */

/* ── Opening: Saturnus als foto (Cassini, NASA/JPL), groot en schuin rechtsboven; de rechterkant valt weg tegen de rand van het scherm, het product schuift eronder.
   Spiegelen, draaien (14°) en de snede rechts zitten in het beeld zelf. ── */
.s-open .ai-hemel { left: auto; right: -120px; top: -78px; width: 666px; aspect-ratio: 1701 / 968; }
.ai-saturnus { display: block; width: 100%; height: auto; user-select: none; }
.s-open:has(.ai-hemel) .s-open__beeld { padding-top: 168px; }
.ag .s-scherm { background: linear-gradient(180deg, rgb(17, 29, 60), rgb(8, 15, 35) 70%); }
.ag .s-scherm__inhoud { min-height: 336px; }
@media (max-width: 1100px) {
  .s-open .ai-hemel { right: -40px; top: -25px; width: 540px; }
  .s-open:has(.ai-hemel) .s-open__beeld { padding-top: 150px; }
}
@media (max-width: 900px) {
  .s-open .ai-hemel { right: -40px; top: -10px; width: 460px; }
  .s-open:has(.ai-hemel) .s-open__beeld { padding-top: 190px; }
}
@media (max-width: 560px) {
  .s-open--product .s-open__beeld:has(.ai-hemel) { margin-top: 24px; }
  .s-open .ai-hemel { left: auto; right: -24px; top: 0; width: calc(100% + 24px); }
  .s-open:has(.ai-hemel) .s-open__beeld { padding-top: 168px; }
}

/* ── s3: de lijst is het enige zwaartepunt; de 17 staat in de casetekst; het sterrenbeeld van Anculus zwak in de diepte ── */
.ai-afwerken-sectie { position: relative; overflow: hidden; padding-top: 88px; padding-bottom: 88px; }
.ai-zk { position: absolute; z-index: 0; left: -120px; bottom: -60px; width: 760px; height: auto; opacity: .34; pointer-events: none; }
.ai-afwerken-sectie::before { content: ""; position: absolute; z-index: 0; right: 4%; top: 50%; width: 900px; height: 640px; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(126, 104, 236, .3), rgba(90, 140, 230, .1) 55%, transparent); pointer-events: none; }
.ai-afwerken { position: relative; z-index: 1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 80px; align-items: center; }
.ai-afwerken__tekst .s-tekst { max-width: 26em; margin-top: 24px; }
.ai-bewijs { margin-top: 40px; padding: 28px 32px 30px; border: 1px solid rgba(171, 225, 246, .16); border-radius: 6px; background: rgba(8, 17, 40, .78); }
.ai-bewijs .s-bewijs__naam { margin: 0 0 10px; font-size: 22px; }
.ai-bewijs p:not(.s-bewijs__naam) { margin: 0 0 16px; color: var(--tekst-2); font-size: 16px; line-height: 1.6; }
.ai-lijst { box-shadow: 0 40px 90px -30px rgba(70, 60, 180, .55); }
.ai-lijst .s-scherm__inhoud { padding: 4px 28px 20px; }
.ai-lijst .s-scherm__noot { margin-top: 12px; }
.ai-groep { padding: 14px 0 12px; }
.ai-groep__kop { font-size: 14px; }
.ai-groep ul { gap: 8px; margin-top: 10px; }
.ai-groep li { gap: 16px; padding: 8px 14px; border-radius: 4px; background: rgba(163, 176, 202, .04); }
.ai-groep li::before { width: 16px; height: 16px; }
.ai-groep li > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ai-groep li b { font-size: 17px; font-weight: 600; }
.ai-groep li small { font-size: 14px; color: var(--tekst-3); }
.ai-groep li em { flex: none; font-style: normal; font-size: 12px; font-weight: 600; color: var(--tekst-2); padding: 3px 8px; border-radius: 3px; border: 1px solid rgba(163, 176, 202, .22); }
.ai-groep--nu li { background: linear-gradient(90deg, rgba(126, 104, 236, .2), rgba(120, 190, 240, .08)); }
.ai-groep--nu li em { color: var(--wit); border-color: rgba(171, 225, 246, .4); }
.ai-groep--later li b { color: var(--tekst-3); font-weight: 500; }

/* ── Slot: één zwaartepunt (kop en gele knop). Diepte: sterren ver weg, de schemering erachter, de donkere planeetrand
   ervoor met de warme rand van de dageraad onder de knop. Alleen in de onderste rand, nooit achter de tekst. ── */
.ai-schemer { position: absolute; z-index: 0; left: 50%; bottom: -96px; width: max(1800px, 136vw); aspect-ratio: 2457 / 736;
  transform: translateX(-50%) scaleX(-1); pointer-events: none;
  background: url("../../sfeer/v2/schemering.webp") center / 100% 100% no-repeat; opacity: .9; filter: blur(1.2px); /* de bron heeft trapjes in de rand */
  -webkit-mask-image: linear-gradient(to bottom, transparent 46%, #000 74%); mask-image: linear-gradient(to bottom, transparent 46%, #000 74%); }
.ai-schemer__bol { position: absolute; left: 0; right: 0; top: 79%; bottom: 0; }
.ai-slot .s-slot__licht { display: none; }

@media (max-width: 1100px) {
  .ai-afwerken { gap: 40px 48px; }
  .ai-zk { width: 600px; }
}
@media (max-width: 900px) {
  .ai-afwerken { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .ai-afwerken__tekst { display: contents; }
  .ai-afwerken__tekst .s-tekst { margin-top: 0; }
  .ai-lijst { order: 2; max-width: 620px; width: 100%; }
  .ai-bewijs { order: 3; margin-top: 0; }
  .ai-afwerken-sectie::before { width: 600px; height: 600px; right: -10%; }
}
@media (max-width: 560px) {
  .ai-lijst .s-scherm__inhoud { padding: 4px 16px 18px; }
  .ai-groep li { padding: 10px; gap: 12px; }
  .ai-groep li b { font-size: 16px; }
  .ai-groep li small { font-size: 13px; }
  .ai-bewijs { padding: 22px 20px 24px; }
  .ai-zk { width: 420px; left: -90px; }
}