:root {
  /* Site Theme: DARK */
  --cp-bg: #0d1117;
  --cp-surface: #161b22;
  --cp-surface-lgt: #21262d;
  --cp-accent: #ff4d6d;
  --cp-accent-hover: #ff708d;
  --cp-highlight: #00f5d4;
  --cp-ink-primary: #f0f6fc;
  --cp-ink-secondary: #8b949e;
  --cp-border: #30363d;
  
  /* Fonts */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Roboto', sans-serif;
  
  /* Layout Specs */
  --cp-max-width: 1180px; /* random width between 960px and 1380px */
  --cp-radius: 16px; /* soft style (12–20px) */
  --cp-radius-sm: 8px;
  
  /* Deep shadow depth + spread */
  --cp-shadow: 0 20px 40px -15px rgba(255, 77, 109, 0.25), 0 10px 20px -10px rgba(0, 0, 0, 0.6);
}

/* Headings styles based on instructions */
.cp-heading {
  font-family: var(--font-display);
  text-transform: uppercase; /* random choice: uppercase */
  letter-spacing: 0.05em;
}

/* Smooth transition elements */
.cp-action-trigger {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 15px rgba(0, 245, 212, 0.2);
}

.cp-action-trigger:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 8px 25px rgba(0, 245, 212, 0.4);
}

.cp-stage-wrap img {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
  transition: transform 0.5s ease;
}

.cp-stage-wrap:hover img {
  transform: scale(1.02);
}

/* Base custom styles to align formatting */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* SVG pulse effect decoration */
@keyframes cp-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
}

.cp-icon-heart {
  animation: cp-pulse 2s infinite ease-in-out;
}

/* Custom design borders for elements */
.cp-visual-card {
  position: relative;
  overflow: hidden;
}

.cp-visual-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--cp-accent), var(--cp-highlight));
}

/* Focus and active accessibility states */
a:focus, button:focus {
  outline: 2px solid var(--cp-highlight);
  outline-offset: 2px;
}