@import url("./theme.css");

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--hyro-background);
    color: var(--hyro-text);
    font-family: var(--hyro-font);
}

a {
    color: inherit;
}

.hyro-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* Navigation */

.hyro-nav {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid var(--hyro-border);
    backdrop-filter: blur(16px);
}

.hyro-nav-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.hyro-brand {
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.hyro-brand strong {
    font-size: 23px;
    letter-spacing: 1.2px;
}

.hyro-brand span {
    margin-top: 3px;
    color: var(--hyro-muted);
    font-size: 10px;
    letter-spacing: 0.8px;
}

.hyro-menu {
    display: flex;
    align-items: center;
    gap: 26px;
}

.hyro-menu a {
    color: var(--hyro-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.hyro-menu a:hover {
    color: var(--hyro-primary);
}

/* Buttons */

.hyro-button {
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--hyro-radius-small);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--hyro-font);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.22s ease;
}

.hyro-button:hover {
    transform: translateY(-2px);
}

.hyro-button-primary {
    color: #ffffff;
    background: var(--hyro-gradient);
    box-shadow: 0 14px 30px rgba(236, 72, 153, 0.22);
}

.hyro-button-secondary {
    color: var(--hyro-text);
    background: #ffffff;
    border-color: var(--hyro-border);
}

/* Homepage Hero */

.homepage-hero {
    position: relative;
    overflow: hidden;
    padding: 92px 0 100px;
    background:
        radial-gradient(
            circle at 13% 20%,
            rgba(236, 72, 153, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 87% 16%,
            rgba(192, 132, 252, 0.20),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--hyro-soft-background) 100%
        );
}

.homepage-hero::after {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    right: -210px;
    bottom: -260px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.08);
}

.homepage-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}

.homepage-hero-eyebrow {
    width: fit-content;
    padding: 9px 14px;
    border: 1px solid var(--hyro-border);
    border-radius: 999px;
    color: var(--hyro-accent);
    background: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 700;
}

.homepage-hero h1 {
    max-width: 730px;
    margin: 22px 0 20px;
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1.04;
    letter-spacing: -3px;
}

.homepage-hero h1 span {
    display: block;
    color: transparent;
    background: var(--hyro-gradient);
    background-clip: text;
    -webkit-background-clip: text;
}

.homepage-hero-description {
    max-width: 650px;
    margin: 0;
    color: var(--hyro-muted);
    font-size: 18px;
    line-height: 1.8;
}

.homepage-hero-actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.homepage-hero-proof {
    margin-top: 27px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    color: var(--hyro-muted);
    font-size: 13px;
}

/* Product preview */

.homepage-product-preview {
    position: relative;
    padding: 24px;
    border: 1px solid rgba(243, 232, 255, 0.9);
    border-radius: var(--hyro-radius-large);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--hyro-shadow);
    backdrop-filter: blur(16px);
}

.homepage-preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.homepage-preview-brand {
    font-size: 15px;
    font-weight: 700;
}

.homepage-preview-live {
    padding: 7px 10px;
    border-radius: 999px;
    color: #15803d;
    background: #f0fdf4;
    font-size: 10px;
    font-weight: 700;
}

.homepage-preview-banner {
    padding: 22px;
    border-radius: 18px;
    color: #ffffff;
    background: var(--hyro-gradient);
}

.homepage-preview-banner small,
.homepage-preview-banner strong {
    display: block;
}

.homepage-preview-banner small {
    opacity: 0.82;
}

.homepage-preview-banner strong {
    margin-top: 8px;
    font-size: 24px;
}

.homepage-preview-cards {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
}

.homepage-preview-card {
    min-height: 112px;
    padding: 17px;
    border: 1px solid var(--hyro-border);
    border-radius: 16px;
    background: #ffffff;
}

.homepage-preview-card span,
.homepage-preview-card strong {
    display: block;
}

.homepage-preview-card span {
    color: var(--hyro-muted);
    font-size: 11px;
}

.homepage-preview-card strong {
    margin-top: 11px;
    font-size: 23px;
}

@media (max-width: 900px) {
    .hyro-menu {
        display: none;
    }

    .homepage-hero-grid {
        grid-template-columns: 1fr;
    }

    .homepage-hero-content {
        text-align: center;
    }

    .homepage-hero-eyebrow {
        margin: 0 auto;
    }

    .homepage-hero-description {
        margin: 0 auto;
    }

    .homepage-hero-actions,
    .homepage-hero-proof {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .hyro-container {
        width: min(100% - 24px, 1180px);
    }

    .hyro-nav-inner {
        min-height: 68px;
    }

    .hyro-nav .hyro-button {
        min-height: 42px;
        padding: 0 14px;
        font-size: 12px;
    }

    .homepage-hero {
        padding: 65px 0 72px;
    }

    .homepage-hero h1 {
        letter-spacing: -1.7px;
    }

    .homepage-hero-actions {
        flex-direction: column;
    }

    .homepage-hero-actions .hyro-button {
        width: 100%;
    }
}



/* ==========================================
   Homepage Trust Section
========================================== */

.homepage-trust-section{
    padding:36px 0;
    background:#FFFFFF;
    border-top:1px solid var(--hyro-border);
    border-bottom:1px solid var(--hyro-border);
}

.homepage-trust-heading{
    margin-bottom:22px;
    color:var(--hyro-muted);
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-align:center;
    text-transform:uppercase;
}

.homepage-trust-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
}

.homepage-trust-item{
    min-height:110px;
    padding:17px;
    border:1px solid var(--hyro-border);
    border-radius:var(--hyro-radius-medium);
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--hyro-surface);
    transition:.22s ease;
}

.homepage-trust-item:hover{
    transform:translateY(-3px);
    box-shadow:var(--hyro-shadow);
}

.homepage-trust-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--hyro-soft-background);
    font-size:21px;
}

.homepage-trust-item strong,
.homepage-trust-item span{
    display:block;
}

.homepage-trust-item strong{
    color:var(--hyro-text);
    font-size:13px;
}

.homepage-trust-item span{
    margin-top:5px;
    color:var(--hyro-muted);
    font-size:11px;
    line-height:1.5;
}

@media(max-width:1000px){
    .homepage-trust-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:560px){
    .homepage-trust-grid{
        grid-template-columns:1fr;
    }

    .homepage-trust-item{
        min-height:auto;
    }
}


/* ==========================================
   Homepage Products Section
========================================== */

.homepage-products-section{
    padding:90px 0;
    background:linear-gradient(
        180deg,
        #FFFFFF 0%,
        var(--hyro-soft-background) 100%
    );
}

.homepage-section-heading{
    max-width:760px;
    margin:0 auto 46px;
    text-align:center;
}

.homepage-section-eyebrow{
    color:var(--hyro-primary);
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
}

.homepage-section-heading h2{
    margin:12px 0 14px;
    color:var(--hyro-text);
    font-size:clamp(31px,4vw,50px);
    line-height:1.16;
    letter-spacing:-1.7px;
}

.homepage-section-heading p{
    margin:0;
    color:var(--hyro-muted);
    font-size:16px;
    line-height:1.8;
}

.homepage-products-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.homepage-product-card{
    padding:28px;
    border:1px solid var(--hyro-border);
    border-radius:var(--hyro-radius-large);
    display:flex;
    flex-direction:column;
    background:#FFFFFF;
    box-shadow:0 14px 45px rgba(139,92,246,.07);
    transition:.25s ease;
}

.homepage-product-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--hyro-shadow);
}

.homepage-product-card.featured{
    border-color:rgba(236,72,153,.38);
    box-shadow:0 18px 55px rgba(236,72,153,.12);
}

.homepage-product-topline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.homepage-product-icon{
    width:54px;
    height:54px;
    border-radius:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--hyro-soft-background);
    font-size:27px;
}

.homepage-product-status{
    padding:7px 10px;
    border-radius:999px;
    font-size:10px;
    font-weight:700;
}

.homepage-product-status.live{
    color:#15803D;
    background:#F0FDF4;
}

.homepage-product-card h3{
    margin:24px 0 11px;
    color:var(--hyro-text);
    font-size:24px;
}

.homepage-product-card p{
    margin:0;
    color:var(--hyro-muted);
    font-size:14px;
    line-height:1.75;
}

.homepage-product-features{
    margin:24px 0 28px;
    padding:0;
    list-style:none;
}

.homepage-product-features li{
    position:relative;
    margin:11px 0;
    padding-left:24px;
    color:var(--hyro-text);
    font-size:13px;
}

.homepage-product-features li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--hyro-primary);
    font-weight:700;
}

.homepage-product-actions{
    margin-top:auto;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.homepage-product-link{
    color:var(--hyro-accent);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.homepage-coming-products{
    margin-top:38px;
    padding:28px;
    border:1px solid var(--hyro-border);
    border-radius:var(--hyro-radius-large);
    background:rgba(255,255,255,.72);
}

.homepage-coming-heading{
    margin-bottom:22px;
    color:var(--hyro-text);
    font-size:16px;
    font-weight:700;
    text-align:center;
}

.homepage-coming-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
}

.homepage-coming-item{
    padding:16px 10px;
    border:1px solid var(--hyro-border);
    border-radius:15px;
    text-align:center;
    background:#FFFFFF;
}

.homepage-coming-item span,
.homepage-coming-item strong,
.homepage-coming-item small{
    display:block;
}

.homepage-coming-item span{
    font-size:24px;
}

.homepage-coming-item strong{
    margin-top:9px;
    color:var(--hyro-text);
    font-size:12px;
}

.homepage-coming-item small{
    margin-top:4px;
    color:var(--hyro-muted);
    font-size:10px;
}

@media(max-width:1000px){
    .homepage-products-grid{
        grid-template-columns:1fr;
    }

    .homepage-coming-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:560px){
    .homepage-products-section{
        padding:65px 0;
    }

    .homepage-coming-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .homepage-product-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .homepage-product-actions .hyro-button{
        width:100%;
    }

    .homepage-product-link{
        text-align:center;
    }
}


/*==================================================
 BUILT FOR BUSINESS GROWTH
==================================================*/

.homepage-growth-section{

    padding:100px 0;

    background:#ffffff;

}

.homepage-growth-grid{

    display:grid;

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

    gap:25px;

}

.growth-card{

    padding:35px;

    border-radius:22px;

    border:1px solid var(--hyro-border);

    background:#ffffff;

    transition:.30s;

    box-shadow:0 15px 40px rgba(0,0,0,.04);

}

.growth-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--hyro-shadow);

}

.growth-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    background:var(--hyro-soft-background);

    margin-bottom:22px;

}

.growth-card h3{

    margin:0;

    font-size:24px;

    color:var(--hyro-text);

}

.growth-card p{

    margin-top:16px;

    color:var(--hyro-muted);

    line-height:1.8;

    font-size:15px;

}

@media(max-width:1000px){

.homepage-growth-grid{

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

}

}

@media(max-width:650px){

.homepage-growth-grid{

grid-template-columns:1fr;

}

}

/* ==========================================
   Homepage Product Preview
========================================== */

.homepage-preview-section{
    padding:105px 0;
    overflow:hidden;
    background:linear-gradient(
        180deg,
        var(--hyro-soft-background) 0%,
        #FFFFFF 100%
    );
}

.homepage-preview-layout{
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    align-items:center;
    gap:65px;
}

.homepage-preview-content h2{
    margin:14px 0 20px;
    color:var(--hyro-text);
    font-size:clamp(34px,4.3vw,55px);
    line-height:1.13;
    letter-spacing:-2px;
}

.homepage-preview-content > p{
    margin:0;
    color:var(--hyro-muted);
    font-size:16px;
    line-height:1.85;
}

.homepage-preview-benefits{
    margin:29px 0 32px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.homepage-preview-benefit{
    display:flex;
    gap:13px;
}

.homepage-preview-benefit > span{
    width:25px;
    height:25px;
    flex:0 0 25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#FFFFFF;
    background:var(--hyro-gradient);
    font-size:11px;
    font-weight:700;
}

.homepage-preview-benefit strong,
.homepage-preview-benefit small{
    display:block;
}

.homepage-preview-benefit strong{
    color:var(--hyro-text);
    font-size:14px;
}

.homepage-preview-benefit small{
    margin-top:5px;
    color:var(--hyro-muted);
    font-size:12px;
    line-height:1.6;
}

/* Application Window */

.homepage-app-window{
    border:1px solid var(--hyro-border);
    border-radius:24px;
    overflow:hidden;
    background:#FFFFFF;
    box-shadow:0 30px 90px rgba(139,92,246,.18);
    transform:perspective(1200px) rotateY(-3deg);
}

.homepage-app-toolbar{
    min-height:52px;
    padding:0 16px;
    display:flex;
    align-items:center;
    gap:16px;
    background:#FFFFFF;
    border-bottom:1px solid var(--hyro-border);
}

.homepage-app-dots{
    display:flex;
    gap:6px;
}

.homepage-app-dots span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#F9A8D4;
}

.homepage-app-dots span:nth-child(2){
    background:#DDD6FE;
}

.homepage-app-dots span:nth-child(3){
    background:#C4B5FD;
}

.homepage-app-address{
    flex:1;
    max-width:270px;
    margin:0 auto;
    padding:7px 13px;
    border-radius:999px;
    color:var(--hyro-muted);
    background:var(--hyro-soft-background);
    font-size:10px;
    text-align:center;
}

.homepage-app-cloud{
    color:#16A34A;
    font-size:9px;
    font-weight:700;
}

.homepage-app-body{
    min-height:460px;
    display:grid;
    grid-template-columns:145px 1fr;
    background:#FAFAFF;
}

.homepage-app-sidebar{
    padding:20px 14px;
    background:linear-gradient(
        180deg,
        #FFFFFF,
        var(--hyro-soft-background)
    );
    border-right:1px solid var(--hyro-border);
}

.homepage-app-logo{
    margin-bottom:25px;
    color:var(--hyro-primary);
    font-size:13px;
    font-weight:700;
}

.homepage-app-menu{
    margin:7px 0;
    padding:10px 12px;
    border-radius:10px;
    color:var(--hyro-muted);
    font-size:10px;
    font-weight:600;
}

.homepage-app-menu.active{
    color:#FFFFFF;
    background:var(--hyro-gradient);
}

.homepage-app-content{
    padding:22px;
}

.homepage-app-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.homepage-app-header small,
.homepage-app-header strong{
    display:block;
}

.homepage-app-header small{
    color:var(--hyro-muted);
    font-size:9px;
}

.homepage-app-header strong{
    margin-top:4px;
    font-size:17px;
}

.homepage-app-avatar{
    width:34px;
    height:34px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#FFFFFF;
    background:var(--hyro-gradient);
    font-size:12px;
    font-weight:700;
}

.homepage-app-stats{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:11px;
}

.homepage-app-stat{
    padding:15px;
    border:1px solid var(--hyro-border);
    border-radius:13px;
    background:#FFFFFF;
}

.homepage-app-stat span,
.homepage-app-stat strong,
.homepage-app-stat small{
    display:block;
}

.homepage-app-stat span{
    color:var(--hyro-muted);
    font-size:9px;
}

.homepage-app-stat strong{
    margin-top:9px;
    font-size:17px;
}

.homepage-app-stat small{
    margin-top:6px;
    color:var(--hyro-primary);
    font-size:8px;
}

.homepage-app-panels{
    margin-top:13px;
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:12px;
}

.homepage-app-panel{
    min-height:210px;
    padding:16px;
    border:1px solid var(--hyro-border);
    border-radius:14px;
    background:#FFFFFF;
}

.homepage-app-panel-title{
    font-size:10px;
    font-weight:700;
}

.homepage-chart-bars{
    height:140px;
    margin-top:24px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:9px;
}

.homepage-chart-bars span{
    width:100%;
    border-radius:7px 7px 2px 2px;
    background:linear-gradient(
        180deg,
        var(--hyro-secondary),
        var(--hyro-primary)
    );
}

.homepage-app-list-item{
    margin-top:14px;
    padding:10px;
    border-radius:9px;
    background:var(--hyro-soft-background);
}

.homepage-app-list-item span,
.homepage-app-list-item strong{
    display:block;
}

.homepage-app-list-item span{
    color:var(--hyro-primary);
    font-size:8px;
}

.homepage-app-list-item strong{
    margin-top:4px;
    font-size:9px;
}

@media(max-width:1000px){
    .homepage-preview-layout{
        grid-template-columns:1fr;
    }

    .homepage-app-window{
        transform:none;
    }
}

@media(max-width:650px){
    .homepage-preview-section{
        padding:70px 0;
    }

    .homepage-app-body{
        grid-template-columns:1fr;
    }

    .homepage-app-sidebar{
        display:none;
    }

    .homepage-app-stats,
    .homepage-app-panels{
        grid-template-columns:1fr;
    }

    .homepage-app-panel.large{
        display:none;
    }
}


/*==================================================
Customer Journey
==================================================*/

.homepage-journey-section{

padding:110px 0;

background:#ffffff;

}

.journey-timeline{

margin-top:60px;

display:flex;

align-items:flex-start;

justify-content:space-between;

gap:18px;

}

.journey-step{

flex:1;

text-align:center;

}

.journey-number{

width:74px;

height:74px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--hyro-gradient);

color:#fff;

font-size:28px;

font-weight:700;

box-shadow:var(--hyro-shadow);

}

.journey-step h3{

margin:24px 0 12px;

font-size:22px;

}

.journey-step p{

margin:0;

font-size:14px;

line-height:1.8;

color:var(--hyro-muted);

}

.journey-line{

height:4px;

flex:0 0 45px;

margin-top:35px;

background:linear-gradient(
90deg,
var(--hyro-primary),
var(--hyro-secondary)
);

border-radius:20px;

}

@media(max-width:1100px){

.journey-timeline{

flex-direction:column;

align-items:center;

}

.journey-line{

width:4px;

height:55px;

margin:10px 0;

}

.journey-step{

max-width:420px;

}

}


/* ==========================================
   Homepage Pricing Preview
========================================== */

.homepage-pricing-section{
    padding:105px 0;
    background:linear-gradient(
        180deg,
        var(--hyro-soft-background) 0%,
        #FFFFFF 100%
    );
}

.homepage-pricing-toolbar{
    margin-bottom:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.homepage-pricing-location{
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 15px;
    border:1px solid var(--hyro-border);
    border-radius:14px;
    background:#FFFFFF;
}

.homepage-pricing-location > span{
    font-size:24px;
}

.homepage-pricing-location small,
.homepage-pricing-location strong{
    display:block;
}

.homepage-pricing-location small{
    color:var(--hyro-muted);
    font-size:10px;
}

.homepage-pricing-location strong{
    margin-top:3px;
    color:var(--hyro-text);
    font-size:12px;
}

.homepage-billing-toggle{
    padding:5px;
    border:1px solid var(--hyro-border);
    border-radius:14px;
    display:flex;
    background:#FFFFFF;
}

.homepage-billing-button{
    min-height:39px;
    padding:0 16px;
    border:0;
    border-radius:10px;
    color:var(--hyro-muted);
    background:transparent;
    font-family:var(--hyro-font);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.homepage-billing-button span{
    margin-left:5px;
    color:var(--hyro-primary);
    font-size:9px;
}

.homepage-billing-button.active{
    color:#FFFFFF;
    background:var(--hyro-gradient);
}

.homepage-billing-button.active span{
    color:#FFFFFF;
}

.homepage-pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    align-items:stretch;
}

.homepage-pricing-card{
    position:relative;
    padding:31px;
    border:1px solid var(--hyro-border);
    border-radius:var(--hyro-radius-large);
    display:flex;
    flex-direction:column;
    background:#FFFFFF;
    box-shadow:0 15px 50px rgba(139,92,246,.07);
    transition:.25s ease;
}

.homepage-pricing-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--hyro-shadow);
}

.homepage-pricing-card.featured{
    border-color:rgba(236,72,153,.48);
    box-shadow:0 25px 70px rgba(236,72,153,.14);
}

.homepage-pricing-popular{
    position:absolute;
    top:0;
    right:26px;
    padding:7px 13px;
    border-radius:0 0 11px 11px;
    color:#FFFFFF;
    background:var(--hyro-gradient);
    font-size:9px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.homepage-pricing-plan{
    color:var(--hyro-primary);
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.homepage-pricing-card h3{
    min-height:58px;
    margin:13px 0 20px;
    color:var(--hyro-text);
    font-size:23px;
    line-height:1.3;
}

.homepage-price{
    display:flex;
    align-items:baseline;
    gap:6px;
}

.homepage-price-currency{
    color:var(--hyro-muted);
    font-size:13px;
    font-weight:700;
}

.homepage-price-value{
    color:var(--hyro-text);
    font-size:47px;
    line-height:1;
    letter-spacing:-2px;
}

.homepage-price-period{
    color:var(--hyro-muted);
    font-size:11px;
}

.homepage-pricing-card > p{
    min-height:74px;
    margin:19px 0 0;
    color:var(--hyro-muted);
    font-size:13px;
    line-height:1.75;
}

.homepage-pricing-features{
    margin:23px 0 28px;
    padding:0;
    list-style:none;
}

.homepage-pricing-features li{
    position:relative;
    margin:12px 0;
    padding-left:24px;
    color:var(--hyro-text);
    font-size:13px;
}

.homepage-pricing-features li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--hyro-primary);
    font-weight:700;
}

.homepage-pricing-card .hyro-button{
    width:100%;
    margin-top:auto;
}

.homepage-pricing-note{
    margin-top:27px;
    padding:18px 21px;
    border:1px solid var(--hyro-border);
    border-radius:17px;
    display:flex;
    align-items:center;
    gap:14px;
    background:#FFFFFF;
}

.homepage-pricing-note > div{
    font-size:25px;
}

.homepage-pricing-note p{
    flex:1;
    margin:0;
    color:var(--hyro-muted);
    font-size:12px;
    line-height:1.7;
}

.homepage-pricing-note a{
    color:var(--hyro-accent);
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
}

@media(max-width:960px){
    .homepage-pricing-grid{
        grid-template-columns:1fr;
    }

    .homepage-pricing-card h3,
    .homepage-pricing-card > p{
        min-height:auto;
    }
}

@media(max-width:650px){
    .homepage-pricing-section{
        padding:70px 0;
    }

    .homepage-pricing-toolbar,
    .homepage-pricing-note{
        flex-direction:column;
        align-items:stretch;
    }

    .homepage-billing-toggle{
        width:100%;
    }

    .homepage-billing-button{
        flex:1;
    }

    .homepage-pricing-note{
        text-align:center;
    }
}


/* ==========================================
   Homepage FAQ
========================================== */

.homepage-faq-section{
    padding:105px 0;
    background:#FFFFFF;
}

.homepage-faq-layout{
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    align-items:start;
    gap:70px;
}

.homepage-faq-intro{
    position:sticky;
    top:110px;
}

.homepage-faq-intro h2{
    margin:14px 0 18px;
    color:var(--hyro-text);
    font-size:clamp(34px,4vw,52px);
    line-height:1.14;
    letter-spacing:-1.8px;
}

.homepage-faq-intro p{
    margin:0 0 28px;
    color:var(--hyro-muted);
    font-size:15px;
    line-height:1.8;
}

.homepage-faq-list{
    display:flex;
    flex-direction:column;
    gap:13px;
}

.homepage-faq-item{
    border:1px solid var(--hyro-border);
    border-radius:18px;
    background:#FFFFFF;
    overflow:hidden;
    transition:.22s ease;
}

.homepage-faq-item[open]{
    border-color:rgba(236,72,153,.34);
    box-shadow:0 16px 45px rgba(139,92,246,.09);
}

.homepage-faq-item summary{
    position:relative;
    padding:21px 58px 21px 22px;
    color:var(--hyro-text);
    font-size:15px;
    font-weight:700;
    line-height:1.5;
    cursor:pointer;
    list-style:none;
}

.homepage-faq-item summary::-webkit-details-marker{
    display:none;
}

.homepage-faq-item summary::after{
    content:"+";
    position:absolute;
    top:50%;
    right:21px;
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--hyro-primary);
    background:var(--hyro-soft-background);
    font-size:20px;
    font-weight:400;
    transform:translateY(-50%);
}

.homepage-faq-item[open] summary::after{
    content:"−";
    color:#FFFFFF;
    background:var(--hyro-gradient);
}

.homepage-faq-answer{
    padding:0 22px 22px;
    color:var(--hyro-muted);
    font-size:13px;
    line-height:1.8;
}

@media(max-width:900px){
    .homepage-faq-layout{
        grid-template-columns:1fr;
        gap:40px;
    }

    .homepage-faq-intro{
        position:static;
        text-align:center;
    }
}

@media(max-width:560px){
    .homepage-faq-section{
        padding:70px 0;
    }

    .homepage-faq-item summary{
        padding:18px 52px 18px 18px;
        font-size:14px;
    }

    .homepage-faq-answer{
        padding:0 18px 18px;
    }
}


/* ==========================================
   Homepage Final CTA
========================================== */

.homepage-final-cta{
    padding:95px 0;
    background:#FFFFFF;
}

.homepage-final-cta-card{
    position:relative;
    overflow:hidden;
    padding:72px 45px;
    border-radius:32px;
    text-align:center;
    color:#FFFFFF;
    background:var(--hyro-gradient);
    box-shadow:0 35px 90px rgba(139,92,246,.24);
}

.homepage-final-cta-glow{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.13);
}

.homepage-final-cta-glow.glow-one{
    width:360px;
    height:360px;
    top:-230px;
    left:-100px;
}

.homepage-final-cta-glow.glow-two{
    width:420px;
    height:420px;
    right:-210px;
    bottom:-280px;
}

.homepage-final-cta-content{
    position:relative;
    z-index:1;
    max-width:760px;
    margin:0 auto;
}

.homepage-final-cta-eyebrow{
    font-size:11px;
    font-weight:700;
    letter-spacing:1.8px;
    opacity:.85;
}

.homepage-final-cta h2{
    margin:16px 0 18px;
    font-size:clamp(36px,5vw,62px);
    line-height:1.1;
    letter-spacing:-2px;
}

.homepage-final-cta p{
    max-width:650px;
    margin:0 auto;
    font-size:16px;
    line-height:1.8;
    opacity:.9;
}

.homepage-final-cta-actions{
    margin-top:31px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:13px;
}

.homepage-final-primary{
    color:var(--hyro-primary);
    background:#FFFFFF;
    box-shadow:0 14px 35px rgba(31,41,55,.16);
}

.homepage-final-secondary{
    color:#FFFFFF;
    border-color:rgba(255,255,255,.48);
    background:rgba(255,255,255,.10);
}

.homepage-final-cta-proof{
    margin-top:25px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 24px;
    font-size:12px;
    opacity:.85;
}

/* ==========================================
   Premium Footer
========================================== */

/* ==========================================
   Premium Footer v2
========================================== */
/* ==========================================
   HYRO ONE Premium Footer v3
========================================== */
/* ==========================================
   HYRO ONE Footer — Pink + Lavender Only
========================================== */

.hyro-site-footer{
    padding:80px 0 30px;
    background:linear-gradient(
        135deg,
        #FAD7EA 0%,
        #E9D8FF 100%
    );
    border-top:1px solid rgba(236,72,153,.18);
    color:var(--hyro-text);
}

.hyro-footer-main{
    display:grid;
    grid-template-columns:1.6fr repeat(3,1fr);
    gap:60px;
    padding-bottom:50px;
}

.hyro-footer-brand .hyro-brand{
    color:var(--hyro-text);
}

.hyro-footer-brand .hyro-brand span{
    color:var(--hyro-primary);
}

.hyro-footer-brand p{
    margin:22px 0;
    color:#5F556B;
    line-height:1.9;
    font-size:14px;
}

.hyro-footer-company{
    color:var(--hyro-primary);
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
}

.hyro-footer-column h3{
    margin:0 0 18px;
    color:var(--hyro-text);
    font-size:15px;
}

.hyro-footer-column a,
.hyro-footer-column span{
    display:block;
    margin:12px 0;
    color:#675D73;
    font-size:12px;
    line-height:1.5;
    text-decoration:none;
}

.hyro-footer-column a:hover{
    color:var(--hyro-primary);
}

.hyro-footer-column span{
    opacity:.7;
}

.hyro-footer-bottom{
    margin-top:10px;
    padding-top:24px;
    border-top:1px solid rgba(139,92,246,.18);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    color:#6C6378;
    font-size:12px;
}

.hyro-footer-legal{
    display:flex;
    gap:22px;
}

.hyro-footer-legal a{
    color:#6C6378;
    text-decoration:none;
}

.hyro-footer-legal a:hover{
    color:var(--hyro-primary);
}

@media(max-width:900px){
    .hyro-footer-main{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .hyro-footer-main{
        grid-template-columns:1fr;
        gap:34px;
    }

    .hyro-footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }
}

.hyro-footer-main{

    display:grid;

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

    gap:60px;

    padding-bottom:50px;

}

.hyro-footer-brand .hyro-brand{

    color:var(--hyro-text);

}

.hyro-footer-brand .hyro-brand span{

    color:var(--hyro-primary);

}

.hyro-footer-brand p{

    margin:22px 0;

    color:var(--hyro-muted);

    line-height:1.9;

    font-size:14px;

}

.hyro-footer-company{

    color:var(--hyro-primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}

.hyro-footer-column h3{

    color:var(--hyro-text);

    margin-bottom:18px;

    font-size:15px;

}

.hyro-footer-column a{

    display:block;

    margin:12px 0;

    color:var(--hyro-muted);

    text-decoration:none;

    transition:.25s;

}

.hyro-footer-column a:hover{

    color:var(--hyro-primary);

    padding-left:6px;

}

.hyro-footer-column span{

    display:block;

    margin:12px 0;

    color:#A0A0A0;

}

.hyro-footer-bottom{

    margin-top:10px;

    padding-top:24px;

    border-top:1px solid rgba(236,72,153,.10);

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    color:var(--hyro-muted);

    font-size:12px;

}

.hyro-footer-legal{

    display:flex;

    gap:22px;

}

.hyro-footer-legal a{

    color:var(--hyro-muted);

    text-decoration:none;

}

.hyro-footer-legal a:hover{

    color:var(--hyro-primary);

}
.hyro-footer-main{
    display:grid;
    grid-template-columns:1.55fr repeat(3,1fr);
    gap:55px;
    padding-bottom:55px;
}

.hyro-footer-brand .hyro-brand{
    color:#FFFFFF;
}

.hyro-footer-brand .hyro-brand span{
    color:#CFC5D8;
}

.hyro-footer-brand p{
    max-width:390px;
    margin:22px 0 17px;
    color:#BDAFC9;
    font-size:13px;
    line-height:1.8;
}

.hyro-footer-company{
    color:#FFFFFF;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
}

.hyro-footer-column h3{
    margin:0 0 19px;
    color:#FFFFFF;
    font-size:13px;
}

.hyro-footer-column a,
.hyro-footer-column span{
    display:block;
    margin:11px 0;
    color:#BDAFC9;
    font-size:12px;
    line-height:1.5;
    text-decoration:none;
}

.hyro-footer-column a:hover{
    color:#FFFFFF;
}

.hyro-footer-column span{
    opacity:.65;
}

.hyro-footer-bottom{
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:#9F91AA;
    font-size:11px;
}

.hyro-footer-legal{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.hyro-footer-legal a{
    color:#9F91AA;
    text-decoration:none;
}

.hyro-footer-legal a:hover{
    color:#FFFFFF;
}

@media(max-width:900px){
    .hyro-footer-main{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .homepage-final-cta{
        padding:70px 0;
    }

    .homepage-final-cta-card{
        padding:52px 22px;
        border-radius:24px;
    }

    .homepage-final-cta-actions{
        flex-direction:column;
    }

    .homepage-final-cta-actions .hyro-button{
        width:100%;
    }

    .hyro-footer-main{
        grid-template-columns:1fr;
        gap:34px;
    }

    .hyro-footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }
}