/* --- CUSTOM COLOR PALETTE: COLORFUL / VIBRANT ACTIVE --- */
:root {
  --joint-bg-dark: #070f1a;
  --joint-bg-card: #0d1b2e;
  
  /* Vibrant & energetic accents */
  --joint-accent-color: #ff006e;     /* Energetic deep pink/coral */
  --joint-accent-secondary: #8338ec; /* Royal violet/purple */
  --joint-accent-cyan: #3a86c8;      /* Active ocean blue */
  
  /* Text and details */
  --joint-text-light: #f8f9fa;
  --joint-text-muted: #94a3b8;
  
  --joint-glow-gradient: linear-gradient(135deg, var(--joint-accent-color) 0%, var(--joint-accent-secondary) 100%);
  --font-display: 'Nunito', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

/* --- RESET & BASIC STYLING --- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--joint-bg-dark);
  color: var(--joint-text-light);
  overflow-x: hidden;
}

/* --- HEADER NAVIGATION STYLING --- */
.joint-header-nav {
  background: rgba(7, 15, 26, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.joint-nav-links ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.joint-nav-links a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--joint-text-light);
  transition: color 0.3s ease;
}

.joint-nav-links a:hover {
  color: var(--joint-accent-color);
}

.joint-branding img {
  height: 2.5rem;
  object-fit: contain;
}

/* Hamburger Hack */
#joint-menu-toggle:checked ~ .joint-nav-links {
  display: flex !important;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  flex-direction: column;
  background: var(--joint-bg-card);
  padding: 2rem;
  border-bottom: 2px solid var(--joint-accent-color);
  gap: 1.5rem;
}

#joint-menu-toggle:checked ~ .joint-nav-links ul {
  flex-direction: column;
  width: 100%;
  gap: 1.5rem;
}

@media (max-width: 767px) {
  .joint-nav-links {
    display: none;
  }
}

/* --- SCROLL PROGRESS BAR --- */
.scroll-progress {
  height: 4px;
  width: 0%;
  background: var(--joint-glow-gradient);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  animation: progress-grow linear;
  animation-timeline: scroll();
}

@keyframes progress-grow {
  to { width: 100%; }
}

/* --- HERO SCREEN --- */
.joint-hero-display {
  height: 75vh;
  margin-top: 4rem;
}

/* --- HEADINGS --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.25;
}

/* --- BUTTONS & PILLS (Pill-border-radius style) --- */
.joint-pill-action {
  background: var(--joint-glow-gradient);
  color: var(--joint-text-light) !important;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px -6px rgba(255, 0, 110, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
  display: inline-block;
  text-align: center;
}

.joint-pill-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(255, 0, 110, 0.6);
}

/* --- DIVIDER STRIP --- */
.joint-divider-strip {
  background: var(--joint-bg-card);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- FEATURES CARD GRID (Soft-border-radius & Raised shadow) --- */
.joint-feature-card {
  background: var(--joint-bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px; /* soft border radius */
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); /* raised shadow */
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
}

.joint-feature-card:hover {
  transform: translateY(-6px); /* Hover lift per preset A */
  box-shadow: 0 15px 35px -5px rgba(255, 0, 110, 0.15), 0 10px 30px -10px rgba(0,0,0,0.7);
}

/* --- TESTIMONIAL CARDS (Soft-border-radius & Raised shadow) --- */
.joint-testimonial-card {
  background: var(--joint-bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px; /* soft border-radius */
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); /* raised shadow */
  transition: transform 0.3s ease;
}

.joint-testimonial-card:hover {
  transform: translateY(-4px);
}

/* --- ACCORDION FAQ ELEMENTS --- */
.joint-faq-item {
  background: var(--joint-bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* --- SCROLL REVEAL DRIVEN ANIMATIONS --- */
.reveal {
  animation: slide-up 0.8s ease-out both;
  animation-timeline: view();
  animation-range: entry 5% entry 30%;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- WCAG COMPLIANCE FORM ELEMENTS --- */
input::placeholder, textarea::placeholder {
  color: #64748b;
}

input:focus, textarea:focus {
  border-color: var(--joint-accent-color) !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 110, 0.2);
}