/* Knoppen op de website (homepage, solutions, industries, checkout-uitleg).
   .btn-shiny: de bewegende knop voor "Get Started" / "Get started today",
     in CEO Capital-blauw. Omgezet uit de React-component "ShinyButton":
     een lichtrand die rondloopt, een glans die meedraait en een fijne
     puntjestextuur; bij hover breder licht en een gloed van binnen.
   .btn-white: dezelfde vorm, wit en stilstaand, voor alle andere knoppen.
   .btn-xl: het grote formaat van de component (alleen "Get Started").
   Zonder ondersteuning voor @property blijft het een gewone blauwe knop. */

@property --shiny-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --shiny-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --shiny-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --shiny-shine { syntax: "<color>"; initial-value: white; inherits: false; }

.btn.btn-shiny {
  --shiny-fill-top: #3a6ad8;
  --shiny-fill-bottom: #2450c0;
  --shiny-inset: #1c3f9c;
  --shiny-accent: #7cb4ff;
  --shiny-accent-soft: #c7dcff;
  --shiny-duration: 3s;
  --shiny-ease: .8s cubic-bezier(.25, 1, .5, 1);
  isolation: isolate; position: relative; overflow: hidden;
  color: #fff; border: 1px solid transparent; filter: none;
  background:
    linear-gradient(180deg, var(--shiny-fill-top), var(--shiny-fill-bottom)) padding-box,
    conic-gradient(
      from calc(var(--shiny-angle) - var(--shiny-offset)),
      transparent,
      var(--shiny-accent) var(--shiny-percent),
      var(--shiny-shine) calc(var(--shiny-percent) * 2),
      var(--shiny-accent) calc(var(--shiny-percent) * 3),
      transparent calc(var(--shiny-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-inset), 0 10px 26px -14px rgba(37, 99, 235, .85);
  transition: var(--shiny-ease);
  transition-property: --shiny-offset, --shiny-percent, --shiny-shine, box-shadow, transform;
  animation: shiny-angle var(--shiny-duration) linear infinite;
}
.btn.btn-shiny::before,
.btn.btn-shiny::after {
  content: ""; pointer-events: none; position: absolute; left: 50%; top: 50%;
  translate: -50% -50%; z-index: -1;
}
/* Fijne puntjes die meelopen met het licht. */
.btn.btn-shiny::before {
  width: calc(100% - 6px); height: calc(100% - 6px); border-radius: inherit;
  background: radial-gradient(circle at 2px 2px, #fff .5px, transparent 0) padding-box;
  background-size: 4px 4px; background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--shiny-angle) + 45deg), #000, transparent 10% 90%, #000);
  mask-image: conic-gradient(from calc(var(--shiny-angle) + 45deg), #000, transparent 10% 90%, #000);
  opacity: .4;
  animation: shiny-angle var(--shiny-duration) linear infinite;
}
/* Glans die meedraait. */
.btn.btn-shiny::after {
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shiny-accent), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  opacity: .55;
  animation: shiny-rotate var(--shiny-duration) linear infinite;
}
.btn.btn-shiny:is(:hover, :focus-visible) {
  --shiny-percent: 20%;
  --shiny-offset: 95deg;
  --shiny-shine: var(--shiny-accent-soft);
  filter: none; transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--shiny-inset), inset 0 -1ex 2rem 4px rgba(124, 180, 255, .45),
              0 14px 30px -14px rgba(37, 99, 235, .95);
}
.btn.btn-shiny:active { transform: translateY(1px); }

@keyframes shiny-angle { to { --shiny-angle: 360deg; } }
@keyframes shiny-rotate { to { rotate: 360deg; } }

/* Wit en stilstaand: dezelfde vorm, zonder beweging. */
.btn.btn-white {
  color: #0a0e17; filter: none;
  background: linear-gradient(180deg, #ffffff 0%, #e9eef8 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 -1px 0 rgba(10, 14, 23, .08), 0 10px 26px -16px rgba(0, 0, 0, .8);
}
.btn.btn-white:hover { filter: none; transform: translateY(-1px); background: #fff; color: #0a0e17;
  box-shadow: inset 0 -1px 0 rgba(10, 14, 23, .08), 0 14px 30px -16px rgba(0, 0, 0, .9); }
.btn.btn-white:active { transform: translateY(1px); }

/* Groot formaat (component): alleen de "Get Started"-knop. */
.btn.btn-xl {
  padding: 1.1rem 2.25rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.2; border-radius: 32px;
}
/* De knop ernaast: dezelfde vorm, maar duidelijk kleiner, midden uitgelijnd. */
:is(div, p):has(> .btn-xl) { align-items: center; }
:is(div, p):has(> .btn-xl) > .btn:not(.btn-xl) {
  padding: .7rem 1.4rem; font-size: .9375rem; font-weight: 500; line-height: 1.2; border-radius: 32px;
}
@media (max-width: 600px) {
  .btn.btn-xl { padding: .95rem 1.5rem; font-size: 1rem; }
  :is(div, p):has(> .btn-xl) > .btn:not(.btn-xl) { padding: .65rem 1.1rem; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn.btn-shiny, .btn.btn-shiny::before, .btn.btn-shiny::after { animation: none; }
  .btn.btn-shiny { transition: none; }
}

/* Alle blauwe "Get started"-knoppen: volledig rond en iets groter (desktop en mobiel).
   De grote kopknop (.btn-xl) houdt zijn eigen maat, alleen de vorm wordt rond. */
.btn.btn-shiny{ border-radius:999px; }
.btn.btn-shiny:not(.btn-xl){ padding:13px 28px; font-size:var(--t-body); }
.btn.btn-shiny.btn-lg:not(.btn-xl){ padding:15px 32px; }
@media (max-width:600px){
  .btn.btn-shiny:not(.btn-xl){ padding:13px 26px; }
  .btn.btn-shiny.btn-lg:not(.btn-xl){ padding:14px 28px; }
}
/* De witte knop naast een blauwe in dezelfde rij krijgt dezelfde vorm en maat. */
.cta-row .btn.btn-white.btn-lg{ border-radius:999px; padding:15px 32px; }
@media (max-width:600px){ .cta-row .btn.btn-white.btn-lg{ padding:14px 28px; } }