/* Reset */
* { box-sizing: border-box; }

/* Typography - Outfit + Sora only */
body { font-family: 'Sora', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; font-weight: 300; }
.font-outfit { font-weight: 300; }

html { scroll-behavior: smooth; }

.hero-gradient {
    background: linear-gradient(135deg, #0a0a0a 0%, #0d1b2a 25%, #1b2838 50%, #0d1b2a 75%, #0a0a0a 100%);
    background-size: 200% 200%;
    animation: gradientShift 30s ease infinite;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.75) 0%, rgba(13, 27, 42, 0.8) 50%, rgba(10, 10, 10, 0.75) 100%);
    z-index: 2;
}

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

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(1deg); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes floatReverse {
    0%, 100% { transform: translateY(-3px); }
    50% { transform: translateY(3px); }
}

.float { animation: float 10s ease-in-out infinite; }
.float-slow { animation: floatSlow 12s ease-in-out infinite; }
.float-reverse { animation: floatReverse 11s ease-in-out infinite; }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 113, 227, 0.4); }
    50% { box-shadow: 0 0 40px rgba(0, 113, 227, 0.8), 0 0 60px rgba(0, 113, 227, 0.4); }
}

.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }

@keyframes wave {
    0% { transform: translateX(0); }
    50% { transform: translateX(-25%); }
    100% { transform: translateX(-50%); }
}

.wave-animation { animation: wave 30s linear infinite; }
.wave-animation-slow { animation: wave 40s linear infinite reverse; }

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotate-slow { animation: rotate 60s linear infinite; }
.rotate-reverse { animation: rotate 50s linear infinite reverse; }

@keyframes bubble-rise {
    0% { transform: translateY(100vh) scale(0.5); opacity: 0; }
    10% { opacity: 0.4; }
    90% { opacity: 0.4; }
    100% { transform: translateY(-100vh) scale(1); opacity: 0; }
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 113, 227, 0.15), rgba(0, 113, 227, 0.05));
    animation: bubble-rise linear infinite;
}

.card-hover {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-hover:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 113, 227, 0.25);
}

.gradient-text {
    background: linear-gradient(135deg, #0071E3, #0077ED, #339af0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #0071E3, #0077ED);
    z-index: 9999;
    transition: width 0.1s;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f3f4f6; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0071E3, #0077ED);
    border-radius: 4px;
}

.ring-decoration {
    border: 2px solid rgba(0, 113, 227, 0.3);
    border-radius: 50%;
}

.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 113, 227, 0.1);
}

/* iOS 26 Liquid Glass
   Core properties from Apple's design:
   - Blurs content behind it (content visible but softened)
   - Reflects color and light of surrounding content (saturate/brightness)
   - Refracts — bends/warps the image behind like real glass (SVG displacement)
   - Edge highlights where light catches the glass rim
   - Depth shadow beneath the glass pane
   - Reacts to interaction (hover transitions) */
.liquid-glass {
    /* Near-invisible tint — the glass itself is clear */
    background: rgba(255, 255, 255, 0.05);

    /* Fallback for Safari/Firefox: blur + color enhancement */
    -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(115%);
    backdrop-filter: blur(16px) saturate(180%) brightness(115%);

    /* Glass edge refraction — bright rim where light bends at the edge */
    border: 1.5px solid rgba(255, 255, 255, 0.15);

    /* Layered shadows: edge glow + depth + inner rim light */
    box-shadow:
        /* Inner top rim — specular highlight on glass edge */
        inset 2px 2px 0px -1px rgba(255, 255, 255, 0.5),
        inset 0 0 4px 1px rgba(255, 255, 255, 0.12),
        /* Inner bottom/right rim — faint secondary refraction */
        inset -1px -1px 0px 0px rgba(255, 255, 255, 0.08),
        /* Depth shadow — glass floating above content */
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);

    position: relative;
    overflow: hidden;
    isolation: isolate;

    /* Smooth spring-like transition for hover */
    transition:
        backdrop-filter 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
        border-color 0.4s cubic-bezier(0.2, 0.9, 0.3, 1),
        transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Chromium: add real refraction via SVG displacement map */
@supports (backdrop-filter: url(#a)) {
    .liquid-glass {
        backdrop-filter: url(#liquid-glass-refract) blur(1.5px) saturate(200%) brightness(130%);
    }
}

/* Top specular highlight — light hitting the curved glass surface */
.liquid-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.04) 40%,
        transparent 100%
    );
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* Caustic refraction spot — bright area where light concentrates through the lens */
.liquid-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 50% at 30% 20%,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
}

/* Hover: glass elevates, catches more light */
.liquid-glass:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow:
        inset 2px 2px 0px -1px rgba(255, 255, 255, 0.6),
        inset 0 0 6px 1px rgba(255, 255, 255, 0.15),
        inset -1px -1px 0px 0px rgba(255, 255, 255, 0.1),
        0 12px 48px rgba(0, 0, 0, 0.35),
        0 4px 16px rgba(0, 0, 0, 0.2);
}

nav#navbar {
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.section-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer-btn {
    position: relative;
    overflow: hidden;
}

.shimmer-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #93c5fd;
    border-radius: 50%;
    animation: sparkle 2s ease-in-out infinite;
}

/* Buttons */
.btn-primary {
    background: #0071E3;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: 980px;
    transition: background 0.2s;
    display: inline-block;
    text-align: center;
}

.btn-primary:hover {
    background: #0077ED;
}

.btn-secondary {
    border: 2px solid #0071E3;
    color: #0071E3;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: 980px;
    transition: all 0.2s;
    display: inline-block;
    text-align: center;
}

.btn-secondary:hover {
    background: #0071E3;
    color: white;
}

/* Clean card for new sections */
.card-clean {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 1rem;
    padding: 2rem;
    transition: box-shadow 0.3s;
}

.card-clean:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.text-accent { color: #0071E3; }
.text-secondary { color: #86868B; }

/* Mobile Optimizations */
@media (max-width: 768px) {
    .ring-decoration { display: none; }
    .sparkle { display: none; }
    .wave-animation, .wave-animation-slow { display: none; }

    .card-hover:hover {
        transform: none;
        box-shadow: none;
    }

    nav .glass {
        padding: 0.5rem 1rem;
        border-radius: 1rem;
    }

    nav .font-outfit {
        font-size: 1.25rem;
    }

    nav a[href="#apply"] {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .hero-gradient {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: 60px;
    }

    section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .stats-grid-mobile {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    input, select, textarea {
        font-size: 16px !important;
    }

    .glass {
        backdrop-filter: blur(5px);
    }

    a, button {
        min-height: 44px;
    }

    .overflow-hidden {
        overflow-x: hidden;
    }
}

@media (max-width: 640px) {
    .px-6 { padding-left: 1rem; padding-right: 1rem; }
    h1 { font-size: 3.3rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.25rem !important; }
    .pricing-card { margin-bottom: 1rem; }
}

@media (hover: none) {
    .card-hover:hover {
        transform: none;
    }
    .shimmer-btn::after {
        display: none;
    }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay.hidden {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-out;
    cursor: pointer;
}

.modal-container {
    position: relative;
    max-width: 700px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 10000;
}

.modal-content {
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.35);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2.5rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    transition: color 0.2s, transform 0.2s;
    padding: 0.25rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.modal-close:hover {
    color: #0071E3;
    transform: scale(1.1);
}

.modal-container.modal-opening {
    animation: expandFromCenter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes expandFromCenter {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
    .modal-container {
        width: 95%;
    }
    .modal-content {
        padding: 1.5rem;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Realistic Marker Highlight */
.marker-highlight {
    position: relative;
}

.marker-highlight:before {
    content: "";
    background-color: #FFFFFF;
    width: calc(100% + 0.5em);
    height: 1em;
    position: absolute;
    z-index: -1;
    filter: url(#marker-shape);
    left: -0.25em;
    top: 0.1em;
    padding: 0 0.25em;
    opacity: 1;
}

/* Hide reCAPTCHA badge */
.grecaptcha-badge {
    visibility: hidden !important;
}