/* =========================================================
   RYTHON HERO V5
   Campus One + School Health Assessment
========================================================= */


/* =========================================================
   FOUNDATION
========================================================= */

:root{

    --hero-max-width:1280px;

    --hero-gap:64px;

    --hero-radius:28px;

    --hero-blue:#2563EB;

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

    --hero-text:#0F172A;

    --hero-muted:#64748B;

    --hero-light:#F8FBFF;

    --hero-bg:#FFFFFF;

    --hero-border:#E7EEF9;

    --hero-green:#16A34A;

    --hero-orange:#F59E0B;

    --hero-red:#EF4444;

}


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

.rh-hero{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F8FBFF 100%
        );

    padding:
        145px
        0
        90px;

}


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

.rh-bg-glow{

    position:absolute;

    width:720px;

    height:720px;

    top:-260px;

    right:-180px;

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

    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:
        1fr
        1fr;

    align-items:center;

    gap:var(--hero-gap);

}


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

.rh-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


.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;

}


.rh-title{

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

    line-height:1.08;

    font-weight:900;

    color:
        var(--hero-text);

    letter-spacing:-.045em;

    margin:0;

}


.rh-title span{

    display:block;

    margin-top:10px;

    color:
        var(--hero-blue);

}


.rh-text{

    margin-top:30px;

    max-width:610px;

    font-size:19px;

    line-height:1.8;

    color:
        var(--hero-muted);

}


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

.rh-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-top:38px;

}


.rh-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:
        17px
        30px;

    border-radius:15px;

    text-decoration:none;

    font-weight:700;

    font-size:15px;

    transition:
        .35s ease;

}


.rh-btn-primary{

    color:#FFFFFF;

    background:
        var(--hero-blue);

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

}


.rh-btn-primary:hover{

    transform:
        translateY(-3px);

    background:
        var(--hero-blue-dark);

}


.rh-btn-outline{

    color:
        var(--hero-blue);

    border:
        1.5px solid
        rgba(37,99,235,.25);

    background:#FFFFFF;

}


.rh-btn-outline:hover{

    transform:
        translateY(-3px);

    border-color:
        var(--hero-blue);

}


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

.rh-features{

    display:grid;

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

    gap:14px;

    margin-top:42px;

    width:100%;

    max-width:640px;

}


.rh-feature{

    display:flex;

    align-items:center;

    gap:13px;

    padding:
        15px
        18px;

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

    border-radius:16px;

    border:
        1px solid
        rgba(15,23,42,.055);

    box-shadow:
        0 10px 24px
        rgba(15,23,42,.045);

}


.rh-feature i{

    color:
        var(--hero-blue);

    width:21px;

    height:21px;

    flex-shrink:0;

}


.rh-feature span{

    font-size:14px;

    font-weight:600;

    line-height:1.35;

    color:
        var(--hero-text);

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.rh-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:620px;

}


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

.rh-orbit{

    position:absolute;

    width:570px;

    height:570px;

    border-radius:50%;

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

    animation:
        rhOrbit
        35s
        linear
        infinite;

    z-index:0;

}


.rh-orbit::before{

    content:"";

    position:absolute;

    inset:42px;

    border-radius:50%;

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

}


.rh-orbit::after{

    content:"";

    position:absolute;

    inset:84px;

    border-radius:50%;

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

}


/* =========================================================
   SCHOOL HEALTH PANEL
========================================================= */

.rh-health-panel{

    position:relative;

    z-index:3;

    width:100%;

    max-width:570px;

    padding:28px;

    border-radius:28px;

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

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

    box-shadow:
        0 30px 80px
        rgba(15,23,42,.10),
        0 8px 25px
        rgba(37,99,235,.06);

    backdrop-filter:
        blur(20px);

}


/* =========================================================
   HEALTH HEADER
========================================================= */

.rh-health-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:18px;

}


.rh-health-heading{

    display:flex;

    align-items:center;

    gap:13px;

}


.rh-health-icon{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:14px;

    background:
        rgba(37,99,235,.09);

    color:
        var(--hero-blue);

}


.rh-health-icon svg{

    width:25px;

    height:25px;

}


.rh-health-eyebrow{

    display:block;

    margin-bottom:3px;

    font-size:10px;

    font-weight:800;

    letter-spacing:.09em;

    color:
        var(--hero-blue);

    text-transform:uppercase;

}


.rh-health-heading h2{

    margin:0;

    font-size:19px;

    line-height:1.25;

    color:
        var(--hero-text);

}


.rh-free-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
        7px
        12px;

    border-radius:999px;

    background:
        #ECFDF3;

    color:
        #15803D;

    font-size:11px;

    font-weight:800;

}


/* =========================================================
   INTRO
========================================================= */

.rh-health-intro{

    margin-top:23px;

}


.rh-health-intro h3{

    margin:0;

    font-size:26px;

    line-height:1.2;

    letter-spacing:-.025em;

    color:
        var(--hero-text);

}


.rh-health-intro p{

    margin:
        8px
        0
        0;

    max-width:460px;

    font-size:14px;

    line-height:1.65;

    color:
        var(--hero-muted);

}


/* =========================================================
   SCORE + DOMAINS
========================================================= */

.rh-health-main{

    display:grid;

    grid-template-columns:
        175px
        1fr;

    gap:20px;

    align-items:center;

    margin-top:22px;

}


/* =========================================================
   SCORE BOX
========================================================= */

.rh-score-box{

    display:flex;

    flex-direction:column;

    align-items:center;

}


.rh-score-ring{

    position:relative;

    width:145px;

    height:145px;

}


.rh-score-svg{

    width:100%;

    height:100%;

    transform:
        rotate(-90deg);

}


.rh-score-track{

    fill:none;

    stroke:
        #EAF0F8;

    stroke-width:8;

}


.rh-score-progress{

    fill:none;

    stroke:
        var(--hero-blue);

    stroke-width:8;

    stroke-linecap:round;

    stroke-dasharray:
        327;

    stroke-dashoffset:
        92;

}


.rh-score-value{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}


.rh-score-value strong{

    font-size:34px;

    line-height:1;

    font-weight:900;

    color:
        var(--hero-text);

    letter-spacing:-.04em;

}


.rh-score-value span{

    margin-top:5px;

    font-size:12px;

    font-weight:600;

    color:
        var(--hero-muted);

}


.rh-score-label{

    margin-top:9px;

    font-size:9px;

    font-weight:800;

    letter-spacing:.06em;

    color:
        var(--hero-blue);

    text-align:center;

}


.rh-score-status{

    margin-top:7px;

    padding:
        5px
        11px;

    border-radius:999px;

    background:
        #ECFDF3;

    color:
        #15803D;

    font-size:10px;

    font-weight:800;

}


/* =========================================================
   DOMAIN LIST
========================================================= */

.rh-domains{

    display:flex;

    flex-direction:column;

}


.rh-domain{

    min-height:34px;

    display:grid;

    grid-template-columns:
        25px
        1fr
        39px
        30px;

    align-items:center;

    gap:7px;

    border-bottom:
        1px solid
        #EEF2F7;

}


.rh-domain:last-child{

    border-bottom:none;

}


.rh-domain-icon{

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:7px;

}


.rh-domain-icon svg{

    width:13px;

    height:13px;

}


.rh-green{

    color:#16A34A;

    background:#ECFDF3;

}


.rh-blue{

    color:#2563EB;

    background:#EFF6FF;

}


.rh-orange{

    color:#D97706;

    background:#FFFBEB;

}


.rh-red{

    color:#DC2626;

    background:#FEF2F2;

}


.rh-domain > span{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:11px;

    font-weight:650;

    color:
        var(--hero-text);

}


.rh-domain strong{

    text-align:right;

    font-size:12px;

    font-weight:800;

}


.rh-domain small{

    font-size:9px;

    color:
        #94A3B8;

}


.rh-domain-good{

    color:
        var(--hero-green);

}


.rh-domain-warning{

    color:
        var(--hero-orange);

}


.rh-domain-risk{

    color:
        var(--hero-red);

}


/* =========================================================
   HEALTH CTA
========================================================= */

.rh-health-cta{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    margin-top:22px;

    padding:
        16px
        20px;

    border-radius:14px;

    color:#FFFFFF;

    background:
        linear-gradient(
            135deg,
            var(--hero-blue),
            var(--hero-blue-dark)
        );

    text-decoration:none;

    font-size:14px;

    font-weight:750;

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

    transition:
        .35s ease;

}


.rh-health-cta:hover{

    transform:
        translateY(-3px);

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

}


.rh-health-cta svg{

    width:18px;

    height:18px;

    transition:
        .3s ease;

}


.rh-health-cta:hover svg{

    transform:
        translateX(4px);

}


/* =========================================================
   HEALTH META
========================================================= */

.rh-health-meta{

    display:grid;

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

    margin-top:16px;

}


.rh-health-meta div{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-width:0;

}


.rh-health-meta div + div{

    border-left:
        1px solid
        #E7EEF9;

}


.rh-health-meta svg{

    width:14px;

    height:14px;

    color:
        var(--hero-blue);

    flex-shrink:0;

}


.rh-health-meta span{

    font-size:9.5px;

    font-weight:600;

    color:
        var(--hero-muted);

}


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

.rh-visual::before{

    content:"";

    position:absolute;

    width:230px;

    height:230px;

    border-radius:50%;

    top:25px;

    right:-10px;

    background:
        radial-gradient(
            rgba(37,99,235,.15),
            transparent 70%
        );

    filter:
        blur(20px);

    z-index:0;

}


.rh-visual::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    bottom:20px;

    left:0;

    background:
        radial-gradient(
            rgba(37,99,235,.10),
            transparent 70%
        );

    filter:
        blur(20px);

    z-index:0;

}


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

@keyframes rhOrbit{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   RESPONSIVE : 1400px
========================================================= */

@media (max-width:1400px){

    .rh-grid{

        gap:48px;

    }

    .rh-title{

        font-size:4.25rem;

    }

    .rh-health-panel{

        max-width:550px;

    }

}


/* =========================================================
   RESPONSIVE : 1200px
========================================================= */

@media (max-width:1200px){

    .rh-hero{

        padding:
            130px
            0
            80px;

    }

    .rh-grid{

        gap:38px;

    }

    .rh-title{

        font-size:3.7rem;

    }

    .rh-text{

        font-size:17px;

    }

    .rh-features{

        gap:10px;

    }

    .rh-feature{

        padding:
            13px
            14px;

    }

    .rh-feature span{

        font-size:13px;

    }

    .rh-health-panel{

        padding:23px;

    }

    .rh-health-main{

        grid-template-columns:
            150px
            1fr;

        gap:13px;

    }

    .rh-score-ring{

        width:130px;

        height:130px;

    }

    .rh-orbit{

        width:510px;

        height:510px;

    }

}


/* =========================================================
   RESPONSIVE : 992px
========================================================= */

@media (max-width:992px){

    .rh-hero{

        padding:
            120px
            0
            80px;

    }

    .rh-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .rh-content{

        order:2;

        align-items:center;

        text-align:center;

    }

    .rh-visual{

        order:1;

        width:100%;

        min-height:auto;

        margin:0 auto;

    }

    .rh-title{

        font-size:3.6rem;

    }

    .rh-text{

        max-width:700px;

    }

    .rh-buttons{

        justify-content:center;

    }

    .rh-features{

        max-width:700px;

    }

    .rh-health-panel{

        max-width:680px;

    }

    .rh-orbit{

        width:650px;

        height:650px;

    }

}


/* =========================================================
   RESPONSIVE : 768px
========================================================= */

@media (max-width:768px){

    .rh-hero{

        padding:
            105px
            0
            65px;

    }

    .rh-grid{

        gap:35px;

    }

    .rh-title{

        font-size:3rem;

        line-height:1.12;

    }

    .rh-text{

        font-size:16px;

        line-height:1.75;

    }

    .rh-health-panel{

        padding:21px;

        border-radius:24px;

    }

    .rh-health-intro h3{

        font-size:23px;

    }

    .rh-health-main{

        grid-template-columns:
            145px
            1fr;

    }

    .rh-score-ring{

        width:125px;

        height:125px;

    }

    .rh-score-value strong{

        font-size:30px;

    }

    .rh-domain{

        grid-template-columns:
            24px
            1fr
            38px
            28px;

        gap:5px;

    }

    .rh-domain > span{

        font-size:10px;

    }

    .rh-health-meta span{

        font-size:9px;

    }

    .rh-orbit{

        width:500px;

        height:500px;

    }

}


/* =========================================================
   RESPONSIVE : 576px
========================================================= */

@media (max-width:576px){

    .rh-hero{

        padding:
            95px
            0
            55px;

    }

    .rh-tag{

        font-size:10px;

        padding:
            8px
            13px;

        margin-bottom:20px;

    }

    .rh-title{

        font-size:2.45rem;

    }

    .rh-text{

        font-size:15px;

    }

    .rh-buttons{

        width:100%;

        flex-direction:column;

    }

    .rh-btn{

        width:100%;

        padding:
            16px
            20px;

    }

    .rh-features{

        grid-template-columns:1fr;

    }

    .rh-health-panel{

        padding:18px;

        border-radius:21px;

    }

    .rh-health-header{

        align-items:center;

    }

    .rh-health-heading{

        gap:9px;

    }

    .rh-health-icon{

        width:40px;

        height:40px;

    }

    .rh-health-heading h2{

        font-size:16px;

    }

    .rh-health-eyebrow{

        font-size:8px;

    }

    .rh-free-badge{

        font-size:9px;

        padding:
            6px
            9px;

    }

    .rh-health-intro{

        margin-top:18px;

    }

    .rh-health-intro h3{

        font-size:21px;

    }

    .rh-health-intro p{

        font-size:12px;

    }

    .rh-health-main{

        grid-template-columns:1fr;

        gap:18px;

    }

    .rh-score-box{

        display:grid;

        grid-template-columns:
            auto
            1fr;

        align-items:center;

        column-gap:15px;

        justify-content:start;

    }

    .rh-score-ring{

        width:110px;

        height:110px;

        grid-row:span 2;

    }

    .rh-score-value strong{

        font-size:27px;

    }

    .rh-score-label{

        margin-top:0;

        text-align:left;

    }

    .rh-score-status{

        justify-self:start;

    }

    .rh-domain{

        min-height:36px;

    }

    .rh-domain > span{

        font-size:10.5px;

    }

    .rh-health-cta{

        font-size:13px;

        padding:
            15px
            13px;

    }

    .rh-health-meta{

        grid-template-columns:1fr;

        gap:8px;

    }

    .rh-health-meta div + div{

        border-left:none;

    }

    .rh-orbit{

        width:350px;

        height:350px;

    }

}


/* =========================================================
   RESPONSIVE : 400px
========================================================= */

@media (max-width:400px){

    .rh-title{

        font-size:2.1rem;

    }

    .rh-text{

        font-size:14px;

    }

    .rh-health-panel{

        padding:16px;

    }

    .rh-health-heading h2{

        font-size:14px;

    }

    .rh-health-intro h3{

        font-size:19px;

    }

    .rh-domain{

        grid-template-columns:
            22px
            1fr
            34px
            25px;

    }

    .rh-domain > span{

        font-size:9.5px;

    }

    .rh-domain strong{

        font-size:11px;

    }

    .rh-domain small{

        font-size:8px;

    }

}


/* =========================================================
   RESPONSIVE : 320px
========================================================= */

@media (max-width:320px){

    .rh-title{

        font-size:1.85rem;

    }

    .rh-health-intro h3{

        font-size:18px;

    }

    .rh-score-ring{

        width:95px;

        height:95px;

    }

    .rh-score-value strong{

        font-size:24px;

    }

}