.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:var(--button-height);

    padding-inline:2rem;

    border-radius:var(--radius-round);

    transition:all var(--duration) var(--ease);

}

.button.primary{

    background:var(--color-primary);

    color:white;

}

.button:hover{

    transform:translateY(-3px);

}

.card{

    padding:var(--space-xl);

    border-radius:var(--radius-lg);

    background:var(--glass-background);

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

    backdrop-filter:var(--glass-blur);

    box-shadow:var(--elevation-2);

}

/*==========================================================
Navigation
==========================================================*/

.site-header{

    position:fixed;

    inset:0 0 auto 0;

    z-index:1000;

    padding-top:var(--space-md);

    pointer-events:none;

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:var(--space-xl);

    min-height:var(--navbar-height);

    padding-inline:var(--space-xl);

    border-radius:var(--radius-round);

    transition:
        background var(--duration),
        backdrop-filter var(--duration),
        transform var(--duration);

    pointer-events:auto;

}

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

.hero-content{

    max-width:600px;

}

.hero-eyebrow{

    margin-bottom:var(--space-lg);

    color:var(--color-primary);

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.hero-title{

    margin-bottom:var(--space-xl);

}

.hero-description{

    margin-bottom:var(--space-2xl);

    font-size:var(--text-large);

    color:var(--color-text-secondary);

}

.hero-actions{

    display:flex;

    gap:var(--space-lg);

}
.hero-device{

    display:flex;

    justify-content:center;

}

.phone-placeholder{

    width:320px;

    aspect-ratio:9 / 19.5;

    border-radius:48px;

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

    background:var(--glass-background);

    backdrop-filter:var(--glass-blur);

    box-shadow:var(--elevation-3);

}
.hero{

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    inset:-20%;

    background:
        radial-gradient(
            circle,
            rgba(10,132,255,.18),
            transparent 65%
        );

    filter:blur(80px);

    z-index:-1;

}

.phone {

    animation: float 8s ease-in-out infinite;

}