@property --cs08-trace {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --pink: #e6007e; --blue: #009fe3; --teal: #27cfc3;
  --grad: linear-gradient(135deg, #e6007e 0%, #009fe3 100%);
  --dark: #0d0d0d; --dark-700: #111111; --dark-600: #1a1a1a;
  --dark-500: #242424; --dark-400: #2e2e2e;
  --grey-500: #676767; --grey-400: #888888; --grey-100: #e0e0e0;
  --white: #ffffff;
  --font-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-serif:   'EB Garamond', Georgia, serif;  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 4px; --radius-lg: 16px;
  --grid-max: 2000px; --grid-margin: clamp(24px, 5vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--dark);
  color: var(--grey-100);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════
   CS-08 — Case study exit CTA card
   ═══════════════════════════════════════════════════════════ */

.cs08-cta {
  width: 100%;
  background: var(--dark);
  padding: clamp(48px, 8vw, 96px) var(--grid-margin);
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

.cs08-cta__inner {
  max-width: var(--grid-max);
  margin: 0 auto;
}

.cs08-card {
  position: relative;
  padding: 2px;
  border-radius: var(--radius-lg);
  background: transparent;
}

/* Animated gradient ring (conic sweep from top-left, clockwise) */
.cs08-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 315deg,
    var(--pink) 0deg,
    var(--blue) calc(var(--cs08-trace) * 0.5),
    transparent calc(var(--cs08-trace))
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.cs08-card.is-visible::before {
  animation: cs08-border-trace 1200ms var(--ease-out) forwards;
}

@keyframes cs08-border-trace {
  to { --cs08-trace: 360deg; }
}

.cs08-card__surface {
  position: relative;
  z-index: 1;
  background: var(--dark-500);
  border-radius: calc(var(--radius-lg) - 2px);
  padding: clamp(32px, 6vw, 48px);
  text-align: center;
}

/* Staggered content reveal after border */
.cs08-card__eyebrow,
.cs08-card__headline,
.cs08-card__question,
.cs08-card__actions {
  opacity: 0;
  transform: translateY(10px);
}

.cs08-card.is-visible .cs08-card__eyebrow,
.cs08-card.is-visible .cs08-card__headline,
.cs08-card.is-visible .cs08-card__question,
.cs08-card.is-visible .cs08-card__actions {
  animation: cs08-fade-up 500ms var(--ease-out) forwards;
}

/* Stagger begins after border trace (1200ms) */
.cs08-card.is-visible .cs08-card__eyebrow { animation-delay: 1400ms; }
.cs08-card.is-visible .cs08-card__headline { animation-delay: 1600ms; }
.cs08-card.is-visible .cs08-card__question { animation-delay: 1800ms; }
.cs08-card.is-visible .cs08-card__actions { animation-delay: 2000ms; }

@keyframes cs08-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cs08-card__eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}

.cs08-card__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.cs08-card__question {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  color: var(--grey-400);
  margin-bottom: 28px;
}

.cs08-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
}

.cs08-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 14px 32px;
  border: 2px solid transparent;
  outline: 2px solid transparent;
  outline-offset: 3px;
  cursor: pointer;
  transition:
    outline-color 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    background-color 220ms var(--ease-out);
}

.cs08-btn:focus-visible {
  outline-color: rgba(0, 159, 227, 0.65);
  outline-offset: 3px;
}

.cs08-btn--primary {
  background: var(--pink);
  color: var(--white);
  box-shadow: 0 0 14px rgba(230, 0, 126, 0.35);
  animation: cs08-btn-glow-primary 3s ease-in-out infinite;
}

.cs08-btn--primary:hover {
  animation: none;
  outline-color: rgba(0, 159, 227, 0.8);
  box-shadow:
    0 0 18px rgba(0, 159, 227, 0.45),
    0 0 28px rgba(0, 159, 227, 0.2);
  transform: translateY(-2px);
}

.cs08-btn--secondary {
  background: transparent;
  color: var(--white);
  border-color: var(--dark-400);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.04);
  animation: cs08-btn-glow-secondary 3s ease-in-out infinite;
}

.cs08-btn--secondary:hover {
  border-color: var(--grey-400);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

@keyframes cs08-btn-glow-primary {
  0%, 100% { box-shadow: 0 0 10px rgba(230, 0, 126, 0.35); }
  50% { box-shadow: 0 0 18px rgba(230, 0, 126, 0.55); }
}

@keyframes cs08-btn-glow-secondary {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 255, 255, 0.04); }
  50% { box-shadow: 0 0 14px rgba(255, 255, 255, 0.09); }
}

.cs08-btn--secondary:hover {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .cs08-card::before {
    animation: none !important;
  }

  .cs08-btn--primary,
  .cs08-btn--secondary {
    animation: none !important;
  }

  .cs08-card.is-visible::before {
    --cs08-trace: 360deg;
  }

  .cs08-card.is-visible .cs08-card__eyebrow,
  .cs08-card.is-visible .cs08-card__headline,
  .cs08-card.is-visible .cs08-card__question,
  .cs08-card.is-visible .cs08-card__actions {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}