/* --- SERVICES PAGE STYLES --- */
#services-hero { padding-top: 10rem; padding-bottom: 0; text-align: center; background-color: var(--background); position: relative; z-index: 1;}
.dark #services-hero { background: linear-gradient(145deg, #00031F 0%, #0C2B33 96%); }
#services-section { background-color: var(--secondary); padding-top: 0; overflow: visible; position: relative; z-index: 0; }
#services-section .container { padding-top: 4rem; }
@media (min-width: 1024px) { #services-section .container { padding-top: 6rem; } }
#services-section .cs-container { width: 100%; max-width: 67.5rem; margin: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 4vw, 3rem); position: relative; z-index: 1; padding-bottom: 4rem;}
@media (min-width: 1024px) { #services-section .cs-container { padding-bottom: 6rem;} }
#services-section .cs-content { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; }
#services-section .cs-flex-group { width: 100%; display: flex; flex-direction: column; gap: 2rem; position: relative; }
#services-section .cs-button-group { display: flex; justify-content: center; align-items: stretch; align-content: flex-start; gap: 0.75rem; align-self: stretch; flex-wrap: wrap; margin-bottom: 1rem; }
#services-section .cs-option { font-family: var(--font-inter); font-size: clamp(0.875rem, 2vw, 1rem); font-weight: 700; text-transform: uppercase; line-height: 1.2em; box-sizing: border-box; padding: 0.75rem 1.5rem; background-color: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 0.5rem; position: relative; z-index: 1; transition: all 0.3s var(--ease-out-cubic), transform 0.2s var(--ease-out-cubic); cursor: pointer; }
#services-section .cs-option:before { content: ""; width: 100%; height: 100%; background: var(--primary); opacity: 0; display: block; position: absolute; top: 0; left: 0; z-index: -1; transition: opacity 0.3s; border-radius: 0.5rem; }
#services-section .cs-option:hover { cursor: pointer; border-color: var(--primary); transform: translateY(2px); }
#services-section .cs-option:hover:before { opacity: 0.15; }
#services-section .cs-option.cs-active { color: var(--primary); border-color: var(--primary); transform: scale(1.05) translateY(-2px); box-shadow: 0 4px 12px hsla(var(--primary-hsl), 0.1); }
#services-section .cs-option.cs-active:before { opacity: 0.1; }
#services-section .cs-wrapper { position: relative; width: 100%; }
#services-section .cs-services-group { width: 100%; margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem); display: block; background: var(--card); border-radius: 1rem; border: 1px solid transparent; box-shadow: 0 10px 20px hsla(var(--foreground-hsl), 0.05); transition: transform 0.6s ease-out, opacity 0.4s ease-out, visibility 0.4s, border-color 0.4s ease-out; transform-origin: top; will-change: transform, opacity; }
#services-section .cs-services-group.service-active { border-color: var(--border); }
#services-section .cs-services-group.cs-hidden { pointer-events: none; opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; transform: translateY(20px) scale(0.98); }
#services-section .service-content-block h3 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--foreground); letter-spacing: -0.02em; }
#services-section .service-content-block h4 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em;}
#services-section .service-content-block h4 i { font-size: 1.3em; }
#services-section .service-content-block p { line-height: 1.7; margin-bottom: 1rem; color: var(--muted-foreground); }
#services-section .service-content-block ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1.5rem; }
#services-section .service-content-block li { position: static; padding-left: 0; margin-bottom: 0.75rem; line-height: 1.6; color: var(--muted-foreground); }
#services-section .service-content-block li::before { content: none; }
#services-section .service-content-block p a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s ease-out;}
#services-section .service-content-block p a:hover { color: var(--accent); }
.dark #services-section .cs-option { color: var(--muted-foreground); background-color: transparent; border-color: var(--border); }
.dark #services-section .cs-option:hover { border-color: #ffffff; color: #ffffff; }
.dark #services-section .cs-option.cs-active { 
  border-color: #ffffff;
  color: #ffffff;
  animation: ulGlow 7.2s forwards infinite;
  box-shadow:
    rgba(67, 183, 255, 0.2) 0px 0px 14px,
    inset rgba(67, 183, 255, 0.2) 0px 0px 10px,
    inset rgba(67, 183, 255, 0.2) 0px 0px 25px,
    rgba(67, 183, 255, 0.2) 0px 0px 25px;
}
.dark #services-section .cs-services-group { background-color: var(--card); border-color: var(--border); box-shadow: none; }
.dark #services-section .cs-services-group.service-active { border-color: hsla(var(--primary-hsl), 0.5); }

/* --- DECORATIVE BUBBLES (positions only; base in root.css) --- */
#services-section { overflow: visible; }
#services-section .cs-container { position: relative; }
#services-section .cs-bubbles:not(.cs-bubbles2) { bottom: 0.625em; right: -16.25em; }
#services-section .cs-bubbles.cs-bubbles2 { font-size: min(1.5vw, 0.5rem); height: 26.6875em; width: 26.1875em; bottom: auto; right: auto; left: -7.5rem; top: 15.625rem; transform: rotate(45deg); }

/* CTA styles consolidated in root.css */

/* --- Footer Swoosh --- */
.cs-footer-swoosh-container { color: var(--secondary); background-color: transparent; position: relative; z-index: 5; line-height: 0; pointer-events: none;}
.cs-footer-swoosh { width: 100%; height: auto; display: block; }

#services-community { background-color: var(--secondary); padding-top: 0; padding-bottom: 8rem; }

.dark #services-section .cs-services-group.service-active {
    border-color: hsla(var(--primary-hsl), 0.5);
    /* This animation creates the pulsing glow effect */
    animation: ulGlow 7.2s forwards infinite;
    /* This is the base box-shadow for the glow */
    box-shadow: rgba(67, 183, 255, 0.2) 0px 0px 14px, inset rgba(67, 183, 255, 0.2) 0px 0px 10px, inset rgba(67, 183, 255, 0.2) 0px 0px 25px, rgba(67, 183, 255, 0.2) 0px 0px 25px;
  }

    .community-grid-new {
        display: grid;
        grid-template-columns: 1fr; /* Stack on mobile */
        gap: 1.5rem; /* Gap between cards */
    }

    @media (min-width: 768px) { /* Medium screens and up */
        .community-grid-new {
            grid-template-columns: repeat(3, 1fr); /* Three columns */
            gap: 2rem;
        }
    }

    .community-card {
        background-color: var(--card);
        border: 1px solid var(--border);
        border-radius: 1rem; /* Consistent rounded corners */
        padding: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center; /* Center content */
        text-align: center;
        transition: transform 0.3s var(--ease-out-cubic), box-shadow 0.3s var(--ease-out-cubic);
        position: relative;
    }

    /* Subtle accent bar for uniqueness */
    .community-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, hsl(var(--accent-hsl)), hsl(var(--primary-hsl)));
        opacity: 0.6;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        pointer-events: none;
    }

    .community-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px hsla(var(--foreground-hsl), 0.08);
    }

    .dark .community-card:hover {
         box-shadow: 0 10px 20px hsla(var(--primary-hsl), 0.2);
    }

    .community-icon {
        width: 5rem; /* Larger icon container */
        height: 5rem;
        border-radius: 9999px; /* Make it circular */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: .25rem; /* Space below icon */
    }
    .community-icon i { font-size: 2rem; line-height: 1; }
    @media (min-width: 768px) { .community-icon i { font-size: 2.25rem; } }

    .community-card-title {
        font-size: 1.3rem; /* Slightly larger title */
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--foreground);
        margin-bottom: 0.75rem;
    }

    .community-card-text {
        color: var(--muted-foreground);
        line-height: 1.6;
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    /* Mobile-first: Community card base styles */
        .community-grid-new { gap: 1rem; }
        .community-card { padding: 1rem; border-radius: 0.75rem; }
        .community-icon { width: 3.5rem; height: 3.5rem; }
        .community-icon i { font-size: 1.5rem; }
        .community-card-title { font-size: 1.1rem; margin-bottom: 0.5rem; }
        .community-card-text { font-size: 0.9rem; line-height: 1.5; }

    /* Tablet and up: 768px - Larger cards */
    @media (min-width: 768px) {
        .community-grid-new { gap: 1.5rem; }
        .community-card { padding: 2rem; border-radius: 1rem; }
        .community-icon { width: 5rem; height: 5rem; }
        .community-icon i { font-size: 2rem; }
        .community-card-title { font-size: 1.3rem; margin-bottom: 0.75rem; }
        .community-card-text { font-size: 0.95rem; line-height: 1.6; }
    }

    /* Ensure reveal-up works correctly */
    .reveal-up {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s var(--ease-out-cubic), transform 0.8s var(--ease-out-cubic);
    }
    .reveal-up.is-visible {
      opacity: 1;
      transform: translateY(0);
    }