/*=========================================================
  RYTHON HERO V4
  Part 1 - Foundation
=========================================================*/

:root{

    --hero-max-width:1280px;

    --hero-gap:72px;

    --hero-radius:28px;

    --hero-shadow:
        0 25px 60px rgba(15,23,42,.08);

    --hero-border:
        1px solid rgba(255,255,255,.35);

    --hero-blue:#2563EB;

    --hero-blue-dark:#1747C9;

    --hero-text:#0F172A;

    --hero-muted:#64748B;

    --hero-light:#F8FBFF;

    --hero-bg:#FFFFFF;

}


/*=========================================================
  SECTION
=========================================================*/

.rh-hero{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );

    padding:

        150px
        0
        110px;

}


/*=========================================================
  BACKGROUND
=========================================================*/

.rh-bg-glow{

    position:absolute;

    width:720px;

    height:720px;

    background:

        radial-gradient(
            circle,
            rgba(37,99,235,.12),
            transparent 72%
        );

    top:-260px;

    right:-180px;

    pointer-events:none;

    z-index:0;

}

.rh-bg-dots{

    position:absolute;

    inset:0;

    opacity:.35;

    background-image:

        radial-gradient(
            rgba(37,99,235,.16) 1px,
            transparent 1px
        );

    background-size:32px 32px;

    z-index:0;

}


/*=========================================================
  GRID
=========================================================*/

.rh-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:

        1.08fr
        .92fr;

    align-items:center;

    gap:var(--hero-gap);

}


/*=========================================================
  CONTENT
=========================================================*/

.rh-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


/*=========================================================
  TAG
=========================================================*/

.rh-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:

        10px
        18px;

    border-radius:999px;

    background:

        rgba(37,99,235,.08);

    color:

        var(--hero-blue);

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:28px;

}


/*=========================================================
  TITLE
=========================================================*/

.rh-title{

    font-size:clamp(
        3rem,
        5vw,
        5rem
    );

    line-height:1.08;

    font-weight:900;

    color:

        var(--hero-text);

    letter-spacing:-.04em;

    margin:0;

}

.rh-title span{

    display:block;

    margin-top:10px;

    color:

        var(--hero-blue);

}


/*=========================================================
  DESCRIPTION
=========================================================*/

.rh-text{

    margin-top:30px;

    max-width:640px;

    font-size:20px;

    line-height:1.85;

    color:

        var(--hero-muted);

}


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

.rh-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:42px;

}

.rh-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:

        18px
        34px;

    border-radius:16px;

    text-decoration:none;

    font-weight:700;

    transition:

        .35s ease;

}

.rh-btn-primary{

    color:#fff;

    background:

        var(--hero-blue);

    box-shadow:

        0 18px 40px
        rgba(37,99,235,.25);

}

.rh-btn-primary:hover{

    transform:

        translateY(-4px);

    background:

        var(--hero-blue-dark);

}

.rh-btn-outline{

    color:

        var(--hero-blue);

    border:

        1.5px solid
        rgba(37,99,235,.22);

    background:#fff;

}

.rh-btn-outline:hover{

    transform:

        translateY(-4px);

    border-color:

        var(--hero-blue);

}


/*=========================================================
  FEATURES
=========================================================*/

.rh-features{

    display:grid;

    grid-template-columns:

        repeat(2,minmax(220px,1fr));

    gap:18px;

    margin-top:48px;

}

.rh-feature{

    display:flex;

    align-items:center;

    gap:14px;

    padding:

        18px
        22px;

    background:#fff;

    border-radius:18px;

    border:

        1px solid
        rgba(15,23,42,.05);

    box-shadow:

        0 10px 24px
        rgba(15,23,42,.05);

}

.rh-feature i{

    color:

        var(--hero-blue);

    width:22px;

    height:22px;

}

.rh-feature span{

    font-weight:600;

    color:

        var(--hero-text);

}

/*=========================================================
  HERO VISUAL
=========================================================*/

.rh-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:680px;

}


/*=========================================================
  ORBIT
=========================================================*/

.rh-orbit{

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

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

    animation:rhOrbit 30s linear infinite;

    z-index:1;

}

.rh-orbit::before{

    content:"";

    position:absolute;

    inset:40px;

    border-radius:50%;

    border:1px dashed rgba(37,99,235,.12);

}

.rh-orbit::after{

    content:"";

    position:absolute;

    inset:80px;

    border-radius:50%;

    border:1px dashed rgba(37,99,235,.08);

}


/*=========================================================
  IMAGE
=========================================================*/

.rh-image{

    position:relative;

    width:560px;

    aspect-ratio:1/1;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:32px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(248,251,255,.98)
        );

    border:1px solid rgba(255,255,255,.45);

    box-shadow:

        0 35px 80px rgba(15,23,42,.10);

    backdrop-filter:blur(18px);

    overflow:hidden;

    z-index:2;

}

.rh-image::before{

    content:"";

    position:absolute;

    width:180%;

    height:180%;

    background:

        radial-gradient(
            circle,
            rgba(37,99,235,.10),
            transparent 65%
        );

    animation:heroGlow 8s linear infinite;

}

.rh-image img{

    position:relative;

    z-index:2;

    width:88%;

    height:auto;

    object-fit:contain;

    transition:.6s ease;

}

.rh-image:hover img{

    transform:

        scale(1.03);

}


/*=========================================================
  FLOATING CARDS
=========================================================*/

.rh-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 22px;

    background:

        rgba(255,255,255,.92);

    backdrop-filter:blur(16px);

    border-radius:18px;

    border:1px solid rgba(255,255,255,.65);

   box-shadow:
    0 12px 30px rgba(15,23,42,.08),
    0 2px 8px rgba(37,99,235,.08);

    z-index:3;

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

}

.rh-card i{

    width:22px;

    height:22px;

    color:var(--hero-blue);

}

.rh-card span{

    font-size:15px;

    font-weight:700;

    color:var(--hero-text);

    white-space:nowrap;

}


/*=========================================================
  CARD POSITIONS
=========================================================*/

.rh-top{

    top:20px;

    left:50%;

    transform:translateX(-50%);

}

.rh-right{

    right:-20px;

    top:48%;

}

.rh-left{

    left:-30px;

    top:48%;

}

.rh-bottom{

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

}


/* Different animation delay for each floating card */

.rh-top{
    animation-delay:0s;
}

.rh-right{
    animation-delay:.8s;
}

.rh-left{
    animation-delay:1.5s;
}

.rh-bottom{
    animation-delay:.4s;
}

/*=========================================================
  ANIMATIONS
=========================================================*/

@keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }
    
}

@keyframes rhOrbit{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes heroGlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*=========================================================
  HOVER EFFECTS
=========================================================*/

.rh-card:hover{

    transform:

        translateY(-6px)
        scale(1.03);

    transition:.35s ease;

    box-shadow:

        0 24px 55px rgba(37,99,235,.18);

}

.rh-image:hover{
    
    transform:translateY(-6px);

    transition:.45s ease;


    box-shadow:

        0 45px 90px rgba(37,99,235,.16);

}


/*=========================================================
  DECORATIVE GLOW
=========================================================*/

.rh-visual::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

        radial-gradient(
            rgba(37,99,235,.18),
            transparent 70%
        );

    top:40px;

    right:20px;

    filter:blur(20px);

    z-index:0;

}

.rh-visual::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

        radial-gradient(
            rgba(37,99,235,.12),
            transparent 70%
        );

    bottom:20px;

    left:0;

    filter:blur(20px);

    z-index:0;

}

/*=========================================================
  HERO RESPONSIVE
=========================================================*/


/*======================
  1400px
======================*/

@media (max-width:1400px){

    .rh-grid{

        gap:56px;

    }

    .rh-image{

        width:520px;

    }

    .rh-title{

        font-size:4.4rem;

    }

}


/*======================
  1200px
======================*/

@media (max-width:1200px){

    .rh-hero{

        padding:140px 0 90px;

    }

    .rh-grid{

        gap:48px;

    }

    .rh-image{

        width:470px;

    }

    .rh-orbit{

        width:540px;
        height:540px;

    }

    .rh-title{

        font-size:3.9rem;

    }

    .rh-text{

        font-size:18px;

    }

}


/*======================
  992px
======================*/

@media (max-width:992px){
    

    .rh-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .rh-content{

        align-items:center;

        order:2;

    }

    .rh-visual{

    order:1;

    width:100%;

    min-height:auto;

    margin:0 auto 40px;

}

    .rh-text{

        max-width:700px;

    }

    .rh-buttons{

        justify-content:center;

    }

    .rh-features{

        width:100%;

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

    }

   .rh-image{

    width:100%;

    max-width:720px;

    aspect-ratio:16/10;

    border-radius:26px;

}

.rh-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.rh-card{

    z-index:20;

}

.rh-top{

    top:-18px;

    left:50%;

    transform:translateX(-50%);

}

.rh-left{

    left:16px;

    top:50%;

    transform:translateY(-50%);

}

.rh-right{

    right:16px;

    top:50%;

    transform:translateY(-50%);

}

.rh-bottom{

    left:50%;

    bottom:-18px;

    transform:translateX(-50%);

}

}


/*======================
  768px
======================*/

@media (max-width:768px){

    .rh-hero{

        padding:120px 0 70px;

    }

    .rh-title{

        font-size:3rem;

        line-height:1.15;

    }

    .rh-text{

        font-size:17px;

        line-height:1.8;

    }

    .rh-image{

    width:100%;

    max-width:100%;

    aspect-ratio:16/10;

    border-radius:22px;

}

    .rh-orbit{

        width:400px;
        height:400px;

    }

    .rh-card{

        padding:14px 18px;

    }

    .rh-card span{

        font-size:13px;

    }

}


/*======================
  576px
======================*/

@media (max-width:576px){

    .rh-title{

        font-size:2.35rem;

    }

    .rh-buttons{

        width:100%;

        flex-direction:column;

    }

    .rh-btn{

        width:100%;

    }

    .rh-features{

        grid-template-columns:1fr;

    }

   .rh-image{

    width:100%;

    border-radius:20px;

}

    .rh-orbit{

        width:340px;
        height:340px;

    }

    .rh-card{

        display:none;

    }

}


/*======================
  400px
======================*/

@media (max-width:400px){

    .rh-title{

        font-size:2rem;

    }

    .rh-tag{

        font-size:11px;

        padding:8px 14px;

    }

    .rh-text{

        font-size:15px;

    }

    .rh-image{

        width:270px;

    }

    .rh-orbit{

        width:290px;
        height:290px;

    }

}


/*======================
  320px
======================*/

@media (max-width:320px){

    .rh-title{

        font-size:1.8rem;

    }

    .rh-text{

        font-size:14px;

    }

    .rh-image{

        width:235px;

    }

    .rh-orbit{

        width:250px;
        height:250px;

    }

}