﻿
body {

    .hero-background {
        background-image: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 100%), url('/images/ana/hero.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 2rem 1rem;
        padding-top: clamp(4vh, 8vh, 10vh);
        position: relative;
        filter: brightness(1) contrast(1.1);
    }

        .hero-background::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(229, 62, 62, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }
   

    .tracking-input {
        flex: 1;
        padding: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.2);
        color: #333;
        backdrop-filter: blur(10px);
        min-height: 48px;
        width: 100%;
        box-sizing: border-box;
        font-weight: 400;
        transition: all 0.3s ease;
    }

        .tracking-input::placeholder {
            color: rgba(0, 0, 0, 0.6);
        }

        .tracking-input:focus {
            outline: none;
            border-color: rgba(78, 173, 234, 0.4);
            background: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 20px rgba(28, 30, 135, 0.2);
        }

    .track-button {
        background: linear-gradient(135deg, rgba(29, 62, 161, 0.9) 0%, rgba(29, 62, 161, 1) 100%);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 1rem 2rem;
        border-radius: 8px;
        font-size: 1rem;
        cursor: pointer;
        white-space: nowrap;
        backdrop-filter: blur(10px);
        min-height: 48px;
        box-sizing: border-box;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 15px rgba(78, 173, 234, 0.3);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

        .track-button::before {
            content: '';
            position: absolute !important;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
        }

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

        .track-button:hover,
        .track-button:active {
            background: linear-gradient(135deg, rgba(78, 173, 234, 0.9) 0%, rgba(78, 173, 234, 1) 100%);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(78, 173, 234, 0.4);
        }
}
