/* ==========================================
   HERO FINAL V3
========================================== */

/* Hero Full Width */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:
    radial-gradient(circle at right top,#dbeafe 0%,transparent 40%),
    #fff;
}

/* Bigger Layout */
.hero-container{
    display:grid;
    grid-template-columns:45% 55%;
    gap:40px;
    align-items:center;
    position:relative;
    z-index:2;
}

/* Bigger Heading */
.hero-left h1{
    font-size:86px;
    line-height:1.02;
    letter-spacing:-3px;
}

/* Better Paragraph */
.hero-description{
    max-width:620px;
    font-size:20px;
    line-height:1.9;
}

/* Bigger Image */
.hero-image{

    height:720px;

    border-radius:35px;

    overflow:hidden;

    box-shadow:0 35px 90px rgba(0,0,0,.15);

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* Orbit */

.hero-right{

    position:relative;

}

.hero-right::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    border:2px dashed rgba(37,99,235,.18);

    border-radius:50%;

    top:-90px;

    left:-120px;

    z-index:0;

}

/* Floating Dots */

.hero::after{

content:"";

position:absolute;

width:180px;

height:180px;

top:80px;

left:54%;

background-image:radial-gradient(#9ec5ff 1.6px,transparent 1.6px);

background-size:18px 18px;

opacity:.45;

}

/* Floating Badges */

.hero-badge{

position:absolute;

display:flex;

align-items:center;

gap:12px;

padding:18px 24px;

background:#fff;

border-radius:18px;

box-shadow:0 20px 55px rgba(0,0,0,.12);

font-weight:600;

z-index:5;

}

.hero-badge svg{

width:22px;

height:22px;

color:#2563EB;

}

/* Badge Position */

.badge-top{

top:25px;

left:-70px;

}

.badge-right{

top:220px;

right:-70px;

}

.badge-left{

bottom:230px;

left:-70px;

}

.badge-bottom{

bottom:40px;

right:20px;

}

/* Better Feature Chips */

.hero-feature{

border:none;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.35s;

}

.hero-feature:hover{

transform:translateY(-8px);

box-shadow:0 22px 45px rgba(37,99,235,.15);

}

/* ======================================================
   RYTHON HERO V3
====================================================== */

.rh-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#fff;
    padding:70px 0 90px;
}

.rh-bg-glow{
    position:absolute;
    width:900px;
    height:900px;
    right:-280px;
    top:-220px;
    background:radial-gradient(circle,#dbeafe 0%,transparent 70%);
    pointer-events:none;
}

.rh-bg-dots{
    position:absolute;
    top:80px;
    left:52%;
    width:180px;
    height:180px;
    background-image:radial-gradient(#b6d1ff 1.6px,transparent 1.6px);
    background-size:18px 18px;
    opacity:.45;
}

.rh-grid{
    display:grid;
    grid-template-columns:46% 54%;
    gap:45px;
    align-items:center;
}

.rh-content{
    position:relative;
    z-index:5;
}

.rh-tag{
    display:inline-block;
    color:#2563EB;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:3px;
    font-weight:700;
    margin-bottom:28px;
}

.rh-title{

    font-size:82px;

    line-height:1.02;

    font-weight:800;

    color:#081B4B;

    letter-spacing:-3px;

    margin-bottom:28px;

}

.rh-title span{

    display:block;

    color:#2563EB;

}

.rh-text{

    max-width:600px;

    font-size:20px;

    line-height:1.9;

    color:#64748B;

    margin-bottom:40px;

}

.rh-buttons{

    display:flex;

    gap:20px;

    margin-bottom:42px;

}

.rh-btn{

    padding:18px 34px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.rh-btn-primary{

    background:#2563EB;

    color:#fff;

}

.rh-btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(37,99,235,.25);

}

.rh-btn-outline{

    border:2px solid #2563EB;

    color:#2563EB;

    background:#fff;

}

.rh-btn-outline:hover{

    background:#2563EB;

    color:#fff;

}

.rh-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.rh-feature{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    background:#fff;

    border-radius:18px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.rh-feature:hover{

    transform:translateY(-6px);

    box-shadow:0 22px 50px rgba(37,99,235,.16);

}

.rh-feature svg{

    width:22px;

    height:22px;

    color:#2563EB;

}

.rh-feature span{

    font-weight:600;

    color:#081B4B;

}

/* ======================================================
   RYTHON HERO V3 VISUAL
====================================================== */

.rh-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:760px;
}

/* Orbit Circle */

.rh-orbit{

    position:absolute;

    width:900px;

    height:900px;

    border:2px dashed rgba(37,99,235,.18);

    border-radius:50%;

    animation:orbitRotate 80s linear infinite;

}

/* Hero Image */

.rh-image{

    position:relative;

    width:100%;

    max-width:760px;

    height:720px;

    border-radius:34px;

    overflow:hidden;

    box-shadow:
        0 45px 90px rgba(0,0,0,.16),
        0 0 120px rgba(37,99,235,.12);

    z-index:2;

}

.rh-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.rh-image:hover img{

    transform:scale(1.04);

}

/* Floating Cards */

.rh-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:12px;

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

    backdrop-filter:blur(14px);

    padding:18px 24px;

    border-radius:18px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    font-weight:600;

    color:#081B4B;

    z-index:5;

    transition:.35s;

}

.rh-card:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 70px rgba(37,99,235,.18);

}

.rh-card svg{

    width:22px;

    height:22px;

    color:#2563EB;

}

/* Card Positions */

.rh-top{

    top:20px;

    left:-35px;

}

.rh-right{

    right:-55px;

    top:190px;

}

.rh-left{

    left:-60px;

    bottom:210px;

}

.rh-bottom{

    right:20px;

    bottom:35px;

}

/* Animations */

@keyframes orbitRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* Floating Effect */

.rh-top,
.rh-right,
.rh-left,
.rh-bottom{

    animation:floatCard 6s ease-in-out infinite;

}

.rh-right{

    animation-delay:1.5s;

}

.rh-left{

    animation-delay:3s;

}

.rh-bottom{

    animation-delay:4.5s;

}

@keyframes floatCard{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}