/* ==========================================================
   TrueVitaHub Hero
   ========================================================== */

.tvh-hero{
    position:relative;
    overflow:hidden;
    padding:100px 0;
    background:#ffffff;
}

.tvh-container{
    width:min(1280px,92%);
    margin:0 auto;
}

.tvh-hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:80px;
}

/* ==========================================================
   LEFT
   ========================================================== */

.tvh-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:999px;
    background:#eef4ff;
    color:#2563eb;
    font-weight:700;
    font-size:14px;
    margin-bottom:28px;
}

.tvh-title{
    font-size:64px;
    line-height:1.08;
    font-weight:800;
    color:#0f172a;
    margin:0 0 28px;
}

.tvh-title span{
    color:#2563eb;
}

.tvh-description{
    max-width:640px;
    color:#64748b;
    font-size:20px;
    line-height:1.8;
    margin-bottom:40px;
}

/* ==========================================================
   SEARCH
   ========================================================== */

.tvh-search-form{
    display:flex;
    align-items:center;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    margin-bottom:35px;
}

.tvh-search-form input{
    flex:1;
    border:none;
    outline:none;
    padding:20px 24px;
    font-size:16px;
    background:transparent;
}

.tvh-search-form button{
    border:none;
    cursor:pointer;
    background:#2563eb;
    color:#ffffff;
    font-weight:700;
    padding:20px 34px;
    transition:.25s;
}

.tvh-search-form button:hover{
    background:#1d4ed8;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.tvh-hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:55px;
}

.tvh-btn-primary,
.tvh-btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 30px;
    border-radius:14px;
    text-decoration:none;
    font-weight:700;
    transition:.25s;
}

.tvh-btn-primary{
    background:#2563eb;
    color:#fff;
}

.tvh-btn-primary:hover{
    transform:translateY(-2px);
    background:#1d4ed8;
}

.tvh-btn-secondary{
    border:1px solid #dbe2ea;
    color:#0f172a;
    background:#fff;
}

.tvh-btn-secondary:hover{
    background:#f8fafc;
}

/* ==========================================================
   STATS
   ========================================================== */

.tvh-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.tvh-stat{
    text-align:center;
}

.tvh-stat h3{
    font-size:36px;
    color:#2563eb;
    margin:0;
}

.tvh-stat span{
    display:block;
    margin-top:8px;
    color:#64748b;
}
/* ==========================================================
   RIGHT VISUAL
========================================================== */

.tvh-hero-visual{
    position:relative;
    min-height:620px;
}

.tvh-card{
    position:absolute;
    width:280px;
    padding:26px;
    border-radius:24px;
    background:#ffffff;
    border:1px solid #edf2f7;
    box-shadow:
        0 20px 50px rgba(15,23,42,.08),
        0 8px 20px rgba(15,23,42,.04);
    transition:.35s ease;
}

.tvh-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 35px 80px rgba(37,99,235,.18),
        0 15px 30px rgba(15,23,42,.08);
}

.tvh-card-header{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:700;
    color:#2563eb;
    background:#eef4ff;
    padding:8px 14px;
    border-radius:999px;
    margin-bottom:18px;
}

.tvh-card h4{
    margin:0;
    font-size:24px;
    color:#0f172a;
}

.tvh-card p{
    margin-top:12px;
    color:#64748b;
    line-height:1.7;
}

/* Floating Positions */

.card-1{
    top:0;
    left:20px;
    z-index:3;
}

.card-2{
    top:180px;
    right:0;
    z-index:2;
}

.card-3{
    bottom:20px;
    left:70px;
    z-index:1;
}

/* Decorative Blur */

.tvh-hero::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-180px;
    top:-180px;
    background:#2563eb;
    opacity:.08;
    border-radius:50%;
    filter:blur(120px);
}

.tvh-hero::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    left:-160px;
    bottom:-160px;
    background:#38bdf8;
    opacity:.08;
    border-radius:50%;
    filter:blur(120px);
}

/* ==========================================
   Featured AI Card
========================================== */

.tvh-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.tvh-card-logo{
    width:56px;
    height:56px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef4ff;
    font-size:28px;
}

.tvh-card-rating{
    text-align:right;
}

.tvh-card-rating span{
    color:#f59e0b;
    font-size:15px;
}

.tvh-card-rating small{
    display:block;
    color:#64748b;
    margin-top:4px;
}

.tvh-card h3{
    font-size:24px;
    margin:18px 0 12px;
    color:#0f172a;
}

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

.tvh-card-features li{
    padding:8px 0;
    color:#475569;
    font-size:15px;
}

.tvh-card-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid #edf2f7;
}

.tvh-price{
    font-weight:700;
    color:#2563eb;
}

.tvh-card-footer a{
    text-decoration:none;
    color:#2563eb;
    font-weight:700;
}

/* ==========================================================
   Hero Animation
========================================================== */

.tvh-card{

    animation:tvhFloat 5s ease-in-out infinite;

}

@keyframes tvhFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================================
   Entrance Animation
========================================================== */

.tvh-hero-content{

    animation:tvhFadeLeft .9s ease forwards;

}

.tvh-hero-visual{

    animation:tvhFadeRight .9s ease forwards;

}

@keyframes tvhFadeLeft{

    from{

        opacity:0;
        transform:translateX(-40px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes tvhFadeRight{

    from{

        opacity:0;
        transform:translateX(40px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

/* ==========================================================
   Glass Effect
========================================================== */

.tvh-card{

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

/* ==========================================================
   Gradient Background
========================================================== */

.tvh-hero{

    background:
        radial-gradient(circle at top right,#dbeafe 0%,transparent 35%),
        radial-gradient(circle at bottom left,#e0f2fe 0%,transparent 35%),
        #ffffff;

}