/* Homepage Design Enhancements - Visual Improvements Only */

/* ============================================
   1. SECTION SPACING & LAYOUT
   ============================================ */

/* Increase section padding for better breathing room */
.rit-hero,
.rit-pricing,
.rit-tech-stack,
.rit-industries,
.rit-services,
.rit-why-choose,
.rit-cases,
.rit-process,
.rit-stats,
.rit-social-proof,
.rit-newsletter,
.rit-cta {
    padding: 100px 0 !important;
}

@media (max-width: 767.98px) {
    .rit-hero,
    .rit-pricing,
    .rit-tech-stack,
    .rit-industries,
    .rit-services,
    .rit-why-choose,
    .rit-cases,
    .rit-process,
    .rit-stats,
    .rit-social-proof,
    .rit-newsletter,
    .rit-cta {
        padding: 60px 0 !important;
    }
}

/* Better container spacing */
.container {
    padding-left: clamp(20px, 5vw, 24px) !important;
    padding-right: clamp(20px, 5vw, 24px) !important;
}

/* Visual separators between sections */
.rit-pricing::before,
.rit-services::before,
.rit-cases::before,
.rit-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.2), transparent);
}

.rit-pricing,
.rit-services,
.rit-cases,
.rit-stats {
    position: relative;
}

/* ============================================
   2. CARD DESIGN ENHANCEMENTS
   ============================================ */

/* Multi-layer shadows for depth */
.card,
.rit-pricing .card,
.rit-services .card,
.rit-cases .card,
.rit-tech-stack .card,
.rit-industries .card {
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(229, 231, 235, 0.8) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Enhanced hover effects - 3D lift */
.card:hover,
.rit-pricing .card:hover,
.rit-services .card:hover,
.rit-cases .card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.1),
        0 12px 32px rgba(14, 165, 233, 0.15),
        0 20px 48px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
}

/* Gradient borders on hover */
.rit-pricing .card:hover,
.rit-services .card:hover {
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(34, 211, 238, 0.2)) border-box;
    border: 2px solid transparent !important;
}

/* ============================================
   3. TYPOGRAPHY ENHANCEMENTS
   ============================================ */

/* Gradient text for main headlines */
.rit-hero h1,
.rit-pricing h2,
.rit-services h2,
.rit-cases h2,
.rit-stats h2,
.rit-social-proof h2 {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 50%, rgba(226, 232, 240, 0.95) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none !important;
}

/* For light backgrounds */
.rit-pricing h2,
.rit-services h2,
.rit-cases h2 {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Better text shadows on dark backgrounds */
.rit-hero p,
.rit-stats p,
.rit-social-proof p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Enhanced overline badges */
.overline {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(34, 211, 238, 0.1)) !important;
    padding: 8px 20px !important;
    border-radius: 999px !important;
    display: inline-block !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    backdrop-filter: blur(8px) !important;
}

/* ============================================
   4. CTA BUTTON ENHANCEMENTS
   ============================================ */

/* Enhanced gradient buttons with glow */
.button.btn-gradient,
.btn-primary {
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 12px rgba(14, 165, 233, 0.3),
        0 0 0 0 rgba(14, 165, 233, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.button.btn-gradient:hover,
.btn-primary:hover {
    box-shadow: 
        0 8px 24px rgba(14, 165, 233, 0.4),
        0 0 0 4px rgba(14, 165, 233, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* Shine effect on buttons */
.button.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.button.btn-gradient:hover::before {
    left: 100%;
}

/* ============================================
   5. HERO SECTION ENHANCEMENTS
   ============================================ */

/* Glassmorphism badge */
.rit-hero .overline,
.rit-hero [style*="backdrop-filter"] {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Enhanced hero background with subtle animation */
.rit-hero {
    background: 
        radial-gradient(1200px 600px at 80% -10%, rgba(14, 165, 233, 0.4) 0%, rgba(14, 165, 233, 0) 60%),
        radial-gradient(800px 400px at 20% 50%, rgba(34, 211, 238, 0.2) 0%, transparent 50%),
        linear-gradient(180deg, #0b1220 0%, #0f172a 70%, #0b1220 100%) !important;
    position: relative;
    overflow: hidden;
}

.rit-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(34, 211, 238, 0.1) 0%, transparent 50%);
    animation: heroPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes heroPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* ============================================
   6. STATS SECTION ENHANCEMENTS
   ============================================ */

/* Glassmorphism cards for stats */
.rit-stats .card {
    background: linear-gradient(135deg, rgba(14, 21, 36, 0.9), rgba(11, 18, 32, 0.9)) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    box-shadow: 
        0 8px 24px rgba(2, 6, 23, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.rit-stats .card:hover {
    background: linear-gradient(135deg, rgba(14, 21, 36, 0.95), rgba(11, 18, 32, 0.95)) !important;
    border-color: rgba(14, 165, 233, 0.4) !important;
    box-shadow: 
        0 12px 40px rgba(14, 165, 233, 0.25),
        0 0 0 1px rgba(14, 165, 233, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   7. COLOR & GRADIENT ENHANCEMENTS
   ============================================ */

/* Enhanced gradient backgrounds */
.rit-pricing {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%) !important;
}

.rit-services {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%) !important;
}

.rit-cases {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

/* Accent color highlights */
.rit-tech-stack .card:hover,
.rit-industries .card:hover {
    border-color: rgba(14, 165, 233, 0.3) !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.15) !important;
}

/* ============================================
   8. PORTFOLIO/CASE STUDIES ENHANCEMENTS
   ============================================ */

/* Better image overlays */
.rit-cases .ratio::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.rit-cases .card:hover .ratio::after {
    opacity: 1;
}

/* Enhanced badge styling */
.rit-cases .badge {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   9. PRICING CARDS ENHANCEMENTS
   ============================================ */

/* Popular plan highlight */
.rit-pricing .card[style*="border:2px"] {
    border: 2px solid rgba(14, 165, 233, 0.3) !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(14, 165, 233, 0.1),
        0 12px 32px rgba(14, 165, 233, 0.15) !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

.rit-pricing .card[style*="border:2px"]:hover {
    border-color: rgba(14, 165, 233, 0.5) !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 0 0 2px rgba(14, 165, 233, 0.2),
        0 16px 48px rgba(14, 165, 233, 0.2) !important;
}

/* ============================================
   10. TESTIMONIALS ENHANCEMENTS
   ============================================ */

.rit-social-proof .card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9)) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
}

/* ============================================
   11. FINAL CTA SECTION
   ============================================ */

.rit-cta {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0ea5e9 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 8s ease infinite !important;
    position: relative;
    overflow: hidden;
}

.rit-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   12. RESPONSIVE IMPROVEMENTS
   ============================================ */

@media (max-width: 991.98px) {
    .rit-hero,
    .rit-pricing,
    .rit-services,
    .rit-cases {
        padding: 80px 0 !important;
    }
}

@media (max-width: 767.98px) {
    /* Better mobile card spacing */
    .rit-pricing .row,
    .rit-services .row,
    .rit-cases .row {
        gap: 20px !important;
    }
    
    /* Mobile card adjustments */
    .card {
        margin-bottom: 0 !important;
    }
}

/* ============================================
   13. SMOOTH TRANSITIONS
   ============================================ */

* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================
   14. FOCUS STATES (ACCESSIBILITY)
   ============================================ */

.card:focus-within,
.button:focus,
.btn:focus {
    outline: 3px solid rgba(14, 165, 233, 0.5) !important;
    outline-offset: 2px !important;
}