/**
 * Homepage Template Styles
 * Pharmaceutical platform landing page with modern, professional design
 */

/* ========================================
   CSS VARIABLES - COLOR SYSTEM
   ======================================== */
:root {
    /* Homepage Brand Colors */
    --hp-primary: #5B5FF5;
    --hp-primary-dark: #4145C7;
    --hp-primary-light: #7377F7;
    --hp-accent: #4145C7;
    --hp-dark: #1A1D2E;
    --hp-darker: #0F1117;
    --hp-light-bg: #F8F9FB;
    --hp-white: #FFFFFF;
    --hp-gray-50: #F9FAFB;
    --hp-gray-100: #F3F4F6;
    --hp-gray-200: #E5E7EB;
    --hp-gray-300: #D1D5DB;
    --hp-gray-500: #6B7280;
    --hp-gray-600: #4B5563;
    --hp-gray-700: #374151;
    --hp-gray-800: #1F2937;
    --hp-gray-900: #111827;
    --hp-success: #10B981;

    /* Spacing Scale */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 2px 8px rgba(91, 95, 245, 0.08);
    --shadow-card-hover: 0 8px 24px rgba(91, 95, 245, 0.15);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Variables */
[data-theme="dark"] {
    --hp-light-bg: #0F1117;
    --hp-white: #0F1117;
    --hp-gray-50: #1F2937;
    --hp-gray-100: #1A1D2E;
    --hp-gray-200: #374151;
    --hp-gray-300: #4B5563;
    --hp-gray-500: #9CA3AF;
    --hp-gray-600: #D1D5DB;
    --hp-gray-700: #E5E7EB;
    --hp-gray-800: #F3F4F6;
    --hp-gray-900: #F9FAFB;
}

/* ========================================
   HOMEPAGE TEMPLATE BASE
   ======================================== */
.homepage-template {
    font-family: var(--font-body);
    color: var(--hp-gray-900);
    background-color: var(--hp-white);
    line-height: 1.6;
}

.homepage-template .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ========================================
   HERO SECTION - TOP
   ======================================== */
.hero-section {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(135deg, var(--hp-gray-50) 0%, var(--hp-white) 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(91, 95, 245, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(91, 95, 245, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hp-primary);
    margin-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    color: var(--hp-gray-900);
    margin-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.hero-title .highlight-text {
    color: var(--hp-primary);
    position: relative;
    display: inline-block;
}

.hero-description {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--hp-gray-600);
    margin-bottom: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.hero-cta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    justify-content: center;
    flex-wrap: wrap;
}

[data-theme="dark"] .hero-section::before {
    background: radial-gradient(circle, rgba(91, 95, 245, 0.05) 0%, transparent 70%);
}

[data-theme="dark"] .hero-section::after {
    background: radial-gradient(circle, rgba(91, 95, 245, 0.04) 0%, transparent 70%);
}


/* ========================================
   BUTTON SYSTEM
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}

.btn .arrow {
    transition: transform var(--transition-base);
}

.btn:hover .arrow {
    transform: translateX(4px);
}

.btn-primary {
    background: var(--hp-primary);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: var(--hp-primary-dark);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--hp-gray-900);
    border-color: var(--hp-gray-300);
}

.btn-secondary:hover {
    background: var(--hp-gray-50);
    border-color: var(--hp-gray-400);
}

.btn-tertiary {
    background: transparent;
    color: var(--hp-gray-900);
    font-weight: 700;
}

.btn-tertiary:hover {
    color: var(--hp-primary);
}

.btn-dark {
    background: var(--hp-dark);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-dark:hover {
    background: var(--hp-darker);
    transform: translateY(-2px);
}

.btn-white {
    background: white;
    color: var(--hp-dark);
    box-shadow: var(--shadow-md);
}

.btn-white:hover {
    background: var(--hp-gray-50);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ========================================
   COMPOUNDING SOLUTIONS SECTION
   ======================================== */
.compounding-solutions-section {
    padding: var(--spacing-3xl) 0;
    background-color: var(--hp-gray-50);
}

.section-heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.5rem);
    text-align: center;
    color: var(--hp-gray-900);
    margin-bottom: var(--spacing-sm);
}

.section-subheading {
    font-size: 1.125rem;
    text-align: center;
    color: var(--hp-gray-600);
    margin-bottom: var(--spacing-2xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.solution-card {
    background: var(--hp-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
}

.solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--hp-primary) 0%, var(--hp-primary-light) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
}

.solution-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.solution-card:hover::before {
    transform: scaleX(1);
}

.solution-card>* {
    position: relative;
    z-index: 2;
}


.card-503a .card-icon {
    color: var(--hp-gray-600);
    margin-bottom: var(--spacing-md);
}

.card-503a::after {
    content: '';
    position: absolute;
    top: -10px;
    right: -20px;
    width: 220px;
    height: 220px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V2.25143C12.8612 2.25311 12.9561 2.25675 13.0446 2.26458C14.8548 2.42465 16.2896 3.85953 16.4497 5.66968C16.4643 5.83512 16.4643 6.02256 16.4643 6.29785L16.4643 7.521C16.4643 11.3903 13.5202 14.5719 9.75001 14.9481V17.0001C9.75001 19.3473 11.6528 21.2501 14 21.2501H14.8824C16.1325 21.2501 17.2247 20.5684 17.8057 19.5558C16.3202 19.0571 15.25 17.6535 15.25 16C15.25 13.9289 16.9289 12.25 19 12.25C21.0711 12.25 22.75 13.9289 22.75 16C22.75 17.9405 21.2761 19.5367 19.3868 19.7303C18.6592 21.5018 16.9174 22.7501 14.8824 22.7501H14C10.8244 22.7501 8.25001 20.1757 8.25001 17.0001V14.9495C4.3217 14.5722 1.25001 11.2625 1.25001 7.23529L1.25 6.29791C1.24997 6.02259 1.24995 5.83514 1.26458 5.66968C1.42465 3.85953 2.85954 2.42465 4.66969 2.26458C4.82536 2.25081 5.00051 2.25002 5.25001 2.24999V2C5.25001 1.58579 5.58579 1.25 6.00001 1.25C6.41422 1.25 6.75001 1.58579 6.75001 2V4C6.75001 4.41421 6.41422 4.75 6.00001 4.75C5.58579 4.75 5.25001 4.41421 5.25001 4V3.75002C4.9866 3.7502 4.88393 3.75148 4.80181 3.75875C3.71573 3.85479 2.85479 4.71572 2.75875 5.80181C2.75074 5.8924 2.75001 6.00802 2.75001 6.3369V7.23529C2.75001 10.6871 5.54823 13.4853 9.00001 13.4853C12.294 13.4853 14.9643 10.815 14.9643 7.521V6.3369C14.9643 6.00802 14.9636 5.8924 14.9555 5.80181C14.8595 4.71572 13.9986 3.85479 12.9125 3.75875C12.8702 3.755 12.8224 3.75285 12.75 3.75162V4C12.75 4.41421 12.4142 4.75 12 4.75C11.5858 4.75 11.25 4.41421 11.25 4V2C11.25 1.58579 11.5858 1.25 12 1.25ZM16.75 16C16.75 14.7574 17.7574 13.75 19 13.75C20.2426 13.75 21.25 14.7574 21.25 16C21.25 17.2426 20.2426 18.25 19 18.25C17.7574 18.25 16.75 17.2426 16.75 16Z' fill='%235B5FF5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

[data-theme="dark"] .card-503a::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V2.25143C12.8612 2.25311 12.9561 2.25675 13.0446 2.26458C14.8548 2.42465 16.2896 3.85953 16.4497 5.66968C16.4643 5.83512 16.4643 6.02256 16.4643 6.29785L16.4643 7.521C16.4643 11.3903 13.5202 14.5719 9.75001 14.9481V17.0001C9.75001 19.3473 11.6528 21.2501 14 21.2501H14.8824C16.1325 21.2501 17.2247 20.5684 17.8057 19.5558C16.3202 19.0571 15.25 17.6535 15.25 16C15.25 13.9289 16.9289 12.25 19 12.25C21.0711 12.25 22.75 13.9289 22.75 16C22.75 17.9405 21.2761 19.5367 19.3868 19.7303C18.6592 21.5018 16.9174 22.7501 14.8824 22.7501H14C10.8244 22.7501 8.25001 20.1757 8.25001 17.0001V14.9495C4.3217 14.5722 1.25001 11.2625 1.25001 7.23529L1.25 6.29791C1.24997 6.02259 1.24995 5.83514 1.26458 5.66968C1.42465 3.85953 2.85954 2.42465 4.66969 2.26458C4.82536 2.25081 5.00051 2.25002 5.25001 2.24999V2C5.25001 1.58579 5.58579 1.25 6.00001 1.25C6.41422 1.25 6.75001 1.58579 6.75001 2V4C6.75001 4.41421 6.41422 4.75 6.00001 4.75C5.58579 4.75 5.25001 4.41421 5.25001 4V3.75002C4.9866 3.7502 4.88393 3.75148 4.80181 3.75875C3.71573 3.85479 2.85479 4.71572 2.75875 5.80181C2.75074 5.8924 2.75001 6.00802 2.75001 6.3369V7.23529C2.75001 10.6871 5.54823 13.4853 9.00001 13.4853C12.294 13.4853 14.9643 10.815 14.9643 7.521V6.3369C14.9643 6.00802 14.9636 5.8924 14.9555 5.80181C14.8595 4.71572 13.9986 3.85479 12.9125 3.75875C12.8702 3.755 12.8224 3.75285 12.75 3.75162V4C12.75 4.41421 12.4142 4.75 12 4.75C11.5858 4.75 11.25 4.41421 11.25 4V2C11.25 1.58579 11.5858 1.25 12 1.25ZM16.75 16C16.75 14.7574 17.7574 13.75 19 13.75C20.2426 13.75 21.25 14.7574 21.25 16C21.25 17.2426 20.2426 18.25 19 18.25C17.7574 18.25 16.75 17.2426 16.75 16Z' fill='white'/%3E%3C/svg%3E");
    opacity: 0.05;
}

.card-503b {
    background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-primary-dark) 100%);
    color: white;
}

.card-503b .card-title,
.card-503b .card-description {
    color: white;
}

.card-503b .card-icon {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-md);
}

.card-503b::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.card-503b::after {
    content: '';
    position: absolute;
    top: 20px;
    right: -20px;
    width: 200px;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='0.15' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--hp-gray-900);
    margin-bottom: var(--spacing-sm);
}

.card-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hp-gray-600);
    margin-bottom: var(--spacing-md);
}

.card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

.card-503b .card-features li {
    color: rgba(255, 255, 255, 0.95);
}

.check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(91, 95, 245, 0.1);
    border-radius: 50%;
    font-size: 0.75rem;
    color: var(--hp-primary);
    flex-shrink: 0;
}

.card-503b .check-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* ========================================
   FORMULARY SECTION
   ======================================== */
.formulary-section {
    padding: var(--spacing-3xl) 0;
    background-color: var(--hp-white);
}

.formulary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.section-eyebrow-alt {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hp-primary);
    margin-bottom: var(--spacing-sm);
}

.section-title-alt {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--hp-gray-900);
    margin-bottom: var(--spacing-sm);
}

.formulary-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--hp-gray-600);
}

.link-arrow {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--hp-primary);
    text-decoration: none;
    transition: all var(--transition-base);
}

.link-arrow:hover {
    color: var(--hp-primary-dark);
    transform: translateX(4px);
}

.formulary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.formulary-card {
    background: var(--hp-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
    cursor: pointer;
    border: 2px solid transparent;
}

.formulary-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.formulary-card:hover {
    background: var(--hp-white);
    border-color: var(--hp-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.formulary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--hp-white);
    border-radius: var(--radius-md);
    color: var(--hp-primary);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.formulary-badge {
    font-family: var(--font-heading);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
    line-height: 1;
}

.status-high-stock {
    background: rgba(91, 95, 245, 0.08);
    color: var(--hp-primary);
}

.status-verified {
    background: rgba(16, 185, 129, 0.08);
    color: var(--hp-success);
}

.status-active-production {
    background: rgba(139, 92, 246, 0.08);
    color: #8B5CF6;
}

.status-available-now {
    background: rgba(245, 158, 11, 0.08);
    color: #F59E0B;
}

.formulary-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--hp-gray-900);
    margin-bottom: var(--spacing-xs);
}

.formulary-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--hp-gray-600);
}

/* ========================================
   HOW IT WORKS SECTION
   ======================================== */
.how-it-works-section {
    padding: var(--spacing-3xl) 0;
    background-color: var(--hp-gray-50);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    position: relative;
}

.step-card {
    text-align: center;
    padding: var(--spacing-lg);
    position: relative;
}

.step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--hp-white);
    border-radius: 50%;
    color: var(--hp-primary);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-slow);
}

.step-card:hover .step-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-xl);
}

.step-badge {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hp-primary);
    margin-bottom: var(--spacing-xs);
}

.step-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--hp-gray-900);
    margin-bottom: var(--spacing-sm);
}

.step-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--hp-gray-600);
}

/* Connecting lines between steps */
.step-card::after,
.step-card::before {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-color: var(--hp-primary);
    opacity: 0.8;
    /* Significantly increased visibility */
}

/* Desktop layout (4 columns) - Horizontal lines */
@media (min-width: 1025px) {
    .step-card:not(:last-child)::after {
        top: 72px;
        /* Top edge of the line */
        left: calc(50% + 50px);
        width: calc(100% + var(--spacing-lg) - 106px);
        height: 2px;
        /* 2px height for perfect centering */
        background-image: linear-gradient(to right, var(--hp-primary) 50%, transparent 50%);
        background-size: 8px 2px;
        /* 4px dash, 4px gap */
        background-repeat: repeat-x;
    }

    /* Arrow pointer */
    .step-card:not(:last-child)::before {
        top: 73px;
        /* Center of the 2px line (72px top + 1px) */
        left: calc(150% + var(--spacing-lg) - 56px);
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 8px solid var(--hp-primary);
        transform: translateY(-50%);
        opacity: 1;
    }
}

/* Tablet layout (2 columns) - Horizontal and Vertical lines */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Horizontal connection for 1->2 and 3->4 */
    .step-card:nth-child(2n+1)::after {
        top: 72px;
        left: calc(50% + 50px);
        width: calc(100% + var(--spacing-lg) - 106px);
        height: 2px;
        background-image: linear-gradient(to right, var(--hp-primary) 50%, transparent 50%);
        background-size: 8px 2px;
        background-repeat: repeat-x;
    }

    .step-card:nth-child(2n+1)::before {
        top: 73px;
        left: calc(150% + var(--spacing-lg) - 56px);
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 8px solid var(--hp-primary);
        transform: translateY(-50%);
        opacity: 1;
    }

    /* Vertical connection for 2->3 (optional, let's keep it simple for now) */
}

/* Mobile layout (1 column) - Vertical lines */
@media (max-width: 768px) {
    .step-card {
        padding-bottom: var(--spacing-xl);
        position: relative;
    }

    .step-card:not(:last-child)::after {
        top: 160px;
        /* Adjusted to start below the icon in the new grid layout */
        left: calc(var(--spacing-lg) + 40px);
        width: 2px;
        height: calc(100% - 183px);
        background-image: linear-gradient(to bottom, var(--hp-primary) 50%, transparent 50%);
        background-size: 2px 8px;
        background-repeat: repeat-y;
        z-index: 1;
    }

    .step-card:not(:last-child)::before {
        bottom: 15px;
        left: calc(var(--spacing-lg) + 41px);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 8px solid var(--hp-primary);
        transform: translateX(-50%);
        opacity: 1;
        z-index: 1;
    }
}

/* Adjust mobile icon center for smaller screens */
@media (max-width: 480px) {
    .step-card:not(:last-child)::after {
        top: 145px;
        left: calc(var(--spacing-md) + 40px);
        height: calc(100% - 168px);
    }

    .step-card:not(:last-child)::before {
        left: calc(var(--spacing-md) + 41px);
        bottom: 15px;
    }
}

/* ========================================
   CTA SECTION - DARK
   ======================================== */
.cta-section-dark {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(135deg, var(--hp-dark) 0%, var(--hp-darker) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section-dark::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(91, 95, 245, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cta-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    color: white;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.cta-description {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--spacing-xl);
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.cta-note {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* ========================================
   SECONDARY CTA CARD
   ======================================== */
.secondary-cta-section {
    padding: var(--spacing-3xl) 0;
    background-color: var(--hp-white);
}

.secondary-cta-card {
    background: var(--hp-gray-50);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-slow);
}

.secondary-cta-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.cta-card-icon {
    flex-shrink: 0;
    color: var(--hp-primary);
}

.cta-card-content {
    flex: 1;
}

.cta-card-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--hp-gray-900);
    margin-bottom: var(--spacing-sm);
}

.cta-card-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hp-gray-600);
}

.cta-card-action {
    flex-shrink: 0;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

/* Scroll-triggered animations - New System */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Delays */
.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

/* Section Specific Overrides if needed, but keeping it generic is better */

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3rem;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .solutions-grid {
        grid-template-columns: 1fr;
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .hero-section,
    .secondary-hero-section,
    .compounding-solutions-section,
    .formulary-section,
    .how-it-works-section,
    .cta-section-dark,
    .secondary-cta-section {
        padding: var(--spacing-2xl) 0;
    }

    /* Left align text content on mobile */
    .hero-content,
    .secondary-hero-content,
    .section-heading,
    .section-subheading,
    .formulary-header,
    .formulary-text,
    .cta-content {
        text-align: left;
    }

    .hero-title {
        font-size: 2.25rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .hero-cta,
    .section-cta,
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .btn {
        justify-content: center;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .step-card {
        text-align: left;
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
        gap: 12px var(--spacing-md);
        align-items: start;
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-xl);
    }

    .step-icon {
        grid-row: 2;
        grid-column: 1;
        margin-bottom: 0;
        justify-self: center;
        width: 80px;
        height: 80px;
    }

    .step-badge {
        grid-row: 1;
        grid-column: 1;
        margin-bottom: 0;
        justify-self: center;
        align-self: baseline;
        text-align: center;
        font-size: 1rem;
        /* Match step-title font-size */
    }

    .step-title {
        grid-row: 1;
        grid-column: 2;
        align-self: baseline;
        margin-bottom: 0;
    }

    .step-description {
        grid-row: 2;
        grid-column: 2;
        align-self: start;
        padding-top: 10px;
    }

    .formulary-grid {
        grid-template-columns: 1fr;
    }

    .formulary-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .secondary-cta-card {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-xl) var(--spacing-lg);
        align-items: center;
        gap: var(--spacing-md);
    }

    .cta-card-action {
        width: 100%;
        margin-top: var(--spacing-md);
    }

    .cta-card-action .btn {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .homepage-template .container {
        padding: 0 var(--spacing-sm);
    }

    .hero-title {
        font-size: 1.875rem;
    }

    .section-heading {
        font-size: 1.75rem;
    }

    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }

    .solution-card,
    .step-card {
        padding: var(--spacing-md);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .homepage-template {
        background: white;
        color: black;
    }

    .btn {
        border: 1px solid black;
    }

    .cta-section-dark {
        background: white;
        color: black;
        border: 2px solid black;
    }
}