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

.hero{

    position:relative;

    min-height:100vh;

    display:grid;

    grid-template-columns:

        1.05fr
        .95fr;

    align-items:center;

    gap:7rem;

    padding:

        calc(var(--nav-height) + 3rem)
        6vw
        6rem;

    overflow:hidden;

}

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

.hero-content{

    position:relative;

    z-index:2;

    max-width:760px;

}

.hero-label{

    display:inline-flex;

    align-items:center;

    gap:.7rem;

    margin-bottom:2rem;

    padding:10px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(20px);

    border:var(--border-light);

    color:var(--blue-600);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.hero-label::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--blue-500);

    box-shadow:0 0 18px rgba(62,145,255,.6);

}

.hero h1{

    display:flex;

    flex-direction:column;

    gap:.2rem;

    font-size:var(--hero-title);

    line-height:.88;

    margin-bottom:2rem;

}

.hero h1 span{

    display:block;

    transform:translateY(40px);

    opacity:0;

}

.hero-copy{

    max-width:620px;

    font-size:var(--hero-copy);

    line-height:1.8;

    color:var(--text-secondary);

    margin-bottom:3rem;

}

.hero-buttons{

    display:flex;

    align-items:center;

    gap:1rem;

    flex-wrap:wrap;

}

/* ==========================================================
   PHONE STAGE
========================================================== */

.phone-stage{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.phone-shadow{

    position:absolute;

    width:320px;

    height:70px;

    bottom:25px;

    border-radius:999px;

    background:rgba(25,40,70,.12);

    filter:blur(45px);

    transform:scale(.9);

}

.phone{

    position:relative;

    width:340px;

    height:690px;

    padding:14px;

    border-radius:56px;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #eef3f8
        );

    box-shadow:

        var(--shadow-phone);

    border:

        1px solid rgba(255,255,255,.92);

    overflow:hidden;

    animation:

        phoneFloat 7s ease-in-out infinite;

}

.phone::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:56px;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.8),

            rgba(255,255,255,0)

        );

    pointer-events:none;

}

.phone-notch{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    top:18px;

    width:135px;

    height:28px;

    border-radius:20px;

    background:#101828;

    z-index:10;

}

.phone-screen{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

    border-radius:44px;

    padding:2.3rem 1.4rem;

    background:

        linear-gradient(

            180deg,

            #fafdff,

            #edf7ff

        );

}

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

.screen-header{

    margin-top:1.5rem;

    margin-bottom:2rem;

}

.screen-title{

    font-size:1.45rem;

    font-weight:700;

    color:var(--text-primary);

    margin-bottom:.35rem;

}

.screen-subtitle{

    font-size:.92rem;

    color:var(--text-muted);

}

.prayer-card{

    position:relative;

    padding:1.4rem;

    margin-bottom:1.2rem;

    border-radius:24px;

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

    backdrop-filter:blur(22px);

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

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

    transition:var(--transition);

}

.prayer-card:hover{

    transform:translateY(-6px);

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

}

.prayer-card h3{

    font-size:1.1rem;

    line-height:1.45;

    margin:1rem 0;

}

.actions{

    color:var(--blue-600);

    font-weight:600;

    font-size:.95rem;

}

.tag{

    display:inline-flex;

    align-items:center;

    padding:7px 12px;

    border-radius:999px;

    font-size:.7rem;

    font-weight:700;

    letter-spacing:.08em;

    background:var(--sky-50);

    color:var(--blue-600);

}

.tag.answered{

    background:#eaf9f0;

    color:#23945e;

}

/* ==========================================================
   HERO LIGHT
========================================================== */

.hero::before{

    content:"";

    position:absolute;

    width:950px;

    height:950px;

    right:-320px;

    top:-260px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(140,205,255,.18),

            rgba(140,205,255,0)

        );

    pointer-events:none;

}

.hero::after{

    content:"";

    position:absolute;

    width:750px;

    height:750px;

    left:-280px;

    bottom:-260px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(220,238,255,.85),

            rgba(220,238,255,0)

        );

    pointer-events:none;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes phoneFloat{

    0%{

        transform:
            translateY(0)
            rotate(-1deg);

    }

    25%{

        transform:
            translateY(-10px)
            rotate(-.3deg);

    }

    50%{

        transform:
            translateY(-18px)
            rotate(1deg);

    }

    75%{

        transform:
            translateY(-8px)
            rotate(.2deg);

    }

    100%{

        transform:
            translateY(0)
            rotate(-1deg);

    }

}