/* Aanvullingen op de uit Framer overgenomen opmaak */

/* Prijsblok (niet in de Framer-site, toegevoegd op verzoek) in dezelfde stijl */
.gl-pricing { width: 100%; max-width: 1180px; margin: 0 auto; padding: 100px 20px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 20px; font-family: "Inter", sans-serif; color: #f2f2f7; }
.gl-eyebrow { display: flex; align-items: center; gap: 20px; }
.gl-eyebrow p { margin: 0; color: #cf0; font-size: 20px; font-family: "Inter", sans-serif; }
.gl-line { width: 200px; max-width: 25vw; height: 1px; background: linear-gradient(270deg, #cf0 0%, rgba(204,255,0,0) 100%); }
.gl-line-r { background: linear-gradient(90deg, #cf0 0%, rgba(204,255,0,0) 100%); }
.gl-h2 { margin: 0 0 30px; text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500;
  font-size: clamp(36px, 5vw, 60px); letter-spacing: -.4px; line-height: 1.2; color: #f2f2f7; }
.gl-h2 span { color: #cf0; }
.gl-plan { position: relative; overflow: hidden; width: 100%; max-width: 460px; box-sizing: border-box; padding: 40px;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 55px rgba(255,255,255,.06); font-size: 16px; line-height: 1.5; display: flex; flex-direction: column; gap: 14px; }
.gl-plan-glow { position: absolute; left: 50%; bottom: -120px; width: 320px; height: 200px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(204,255,0,.35), rgba(204,255,0,0)); pointer-events: none; }
.gl-plan > *:not(.gl-plan-glow) { position: relative; }
.gl-plan-name { margin: 0; font-size: 18px; color: #c7c7cc; }
.gl-plan-price { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 56px; font-weight: 600; letter-spacing: -1px; }
.gl-plan-price small { font-size: 18px; font-weight: 400; color: #c7c7cc; margin-left: 4px; letter-spacing: 0; }
.gl-plan-sub { margin: 0; color: #c7c7cc; }
.gl-plan ul { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; }
.gl-plan li { padding-left: 28px; position: relative; }
.gl-plan li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 50%;
  background: #cf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23171719' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.gl-btn { margin-top: 10px; display: block; text-align: center; background: #cf0; color: #171719; text-decoration: none;
  font-weight: 700; letter-spacing: .02em; padding: 16px 24px; border-radius: 12px; }
.gl-btn:hover { filter: brightness(1.05); }

/* FAQ-antwoorden */
.gl-faq-answer { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.gl-faq-answer p { margin: 0; padding: 0 0 20px; color: rgba(255,255,255,.74); font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.6; }
[data-gl-open="true"] .gl-faq-answer { max-height: 400px; }
[data-framer-name="Question"] { cursor: pointer; }
[data-framer-name="Arrow"] { transition: transform .3s ease; }
[data-gl-open="true"] [data-framer-name="Arrow"] { transform: translate(-50%, -50%) rotate(180deg) !important; }

/* Social-iconen in de footer (in Framer een losse icoon-component) */
.gl-social { display: block; width: 28px; height: 28px; color: #c7c7cc; }
.gl-social:hover { color: #cf0; }

/* App-foto's in de kaarten "Persoonlijk trainingsschema" en "Inzicht in jouw prestaties" (1-10-2026):
   bovenkant van de telefoon, onderaan zacht weggefadet. De voeding-foto stond in Framer in een groter,
   verschoven vlak dat de kaart afsneed; dat vlak staat nu net als bij de schema-kaart boven de tekst. */
img[src$="/gl-schema.png"], img[src$="/gl-voeding.png"] {
  object-fit: contain !important;
  object-position: center top !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
[data-framer-name="Image"]:has(img[src$="/gl-voeding.png"]) {
  top: 24px !important; left: 24px !important; right: 24px !important; bottom: 134px !important;
  width: auto !important; height: auto !important; transform: none !important;
}
@media (max-width: 809.98px) {
  [data-framer-name="Image"]:has(img[src$="/gl-voeding.png"]) { bottom: 163px !important; }
}