/*
 * Package 78 - Modern Homepage + Signup Funnel Polish
 */

.so78-home{
    --so78-primary:var(--so76-primary,#f33286);
    --so78-secondary:var(--so76-secondary,#6b7cff);
    --so78-accent:var(--so76-accent,#ffbd8a);
    --so78-navy:var(--so76-navy,#111a3d);
    --so78-bg:var(--so76-bg,#f8f7ff);
    max-width:1240px;
    margin:0 auto;
    padding:24px 16px 70px;
}

.so78-hero{
    position:relative;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:28px;
    align-items:center;
    padding:36px;
    border-radius:36px;
    background:
        radial-gradient(circle at 86% 12%,rgba(243,50,134,.13),transparent 34%),
        radial-gradient(circle at 8% 88%,rgba(107,124,255,.13),transparent 35%),
        linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
    border:1px solid rgba(17,26,61,.08);
    box-shadow:0 28px 78px rgba(17,26,61,.12);
    overflow:hidden;
}

.so78-hero::before{
    content:"";
    position:absolute;
    right:-80px;
    top:-80px;
    width:260px;
    height:260px;
    border-radius:999px;
    background:linear-gradient(135deg,rgba(243,50,134,.22),rgba(255,189,138,.25));
    filter:blur(18px);
    pointer-events:none;
}

.so78-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:#fff;
    border:1px solid rgba(17,26,61,.08);
    box-shadow:0 10px 28px rgba(17,26,61,.06);
    color:var(--so78-navy);
    font-weight:1000;
    margin-bottom:14px;
}

.so78-kicker span{
    color:var(--so78-primary);
}

.so78-hero h1{
    color:var(--so78-navy);
    font-size:clamp(2.5rem,6vw,5.35rem);
    line-height:.94;
    letter-spacing:-.065em;
    margin:0 0 18px;
}

.so78-hero p{
    color:#5b668a;
    font-size:1.12rem;
    max-width:680px;
    line-height:1.65;
}

.so78-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.so78-hero-actions .btn{
    border-radius:999px!important;
    font-weight:1000;
    padding-left:22px;
    padding-right:22px;
}

.so78-hero-note{
    margin-top:14px;
    color:#75809f;
    font-weight:850;
    font-size:.92rem;
}

.so78-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:24px;
}

.so78-stats>div{
    padding:14px;
    border-radius:20px;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(17,26,61,.06);
}

.so78-stats strong{
    display:block;
    color:var(--so78-navy);
    font-size:1.15rem;
}

.so78-stats span{
    display:block;
    color:#75809f;
    font-size:.82rem;
    font-weight:900;
}

.so78-hero-visual{
    position:relative;
    min-height:570px;
}

.so78-photo-stack{
    position:relative;
    height:100%;
    min-height:570px;
}

.so78-photo-card{
    position:absolute;
    overflow:hidden;
    background:#fff;
    border:6px solid rgba(255,255,255,.9);
    box-shadow:0 24px 70px rgba(17,26,61,.18);
}

.so78-photo-card img,
.so78-fallback-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.so78-photo-card.main{
    width:72%;
    height:82%;
    left:8%;
    top:5%;
    border-radius:36px;
}

.so78-photo-card.small{
    width:34%;
    height:34%;
    border-radius:28px;
}

.so78-photo-card.small.one{
    right:2%;
    top:14%;
    transform:rotate(6deg);
}

.so78-photo-card.small.two{
    right:8%;
    bottom:5%;
    transform:rotate(-5deg);
}

.so78-fallback-photo{
    background:
        linear-gradient(to top,rgba(17,26,61,.36),transparent 48%),
        radial-gradient(circle at 35% 30%,rgba(255,255,255,.60),transparent 14%),
        linear-gradient(135deg,#ffd1e2,#b7c2ff 48%,#ffd1bb);
    position:relative;
}

.so78-fallback-photo::after{
    content:"♡";
    position:absolute;
    right:18px;
    top:12px;
    color:#fff;
    font-size:3rem;
    opacity:.65;
}

.so78-fallback-photo.alt{
    background:linear-gradient(135deg,#fbc2eb,#a6c1ee);
}

.so78-fallback-photo.alt2{
    background:linear-gradient(135deg,#ffecd2,#fcb69f);
}

.so78-photo-caption{
    position:absolute;
    left:16px;
    right:16px;
    bottom:16px;
    padding:13px 14px;
    border-radius:18px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(14px);
    color:var(--so78-navy);
}

.so78-photo-caption strong{
    display:block;
    font-size:1.15rem;
}

.so78-photo-caption span{
    color:#5b668a;
    font-weight:850;
    font-size:.86rem;
}

.so78-floating-match{
    position:absolute;
    left:0;
    bottom:12%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border-radius:20px;
    background:rgba(255,255,255,.90);
    backdrop-filter:blur(14px);
    border:1px solid rgba(17,26,61,.08);
    box-shadow:0 18px 48px rgba(17,26,61,.15);
}

.so78-floating-match span{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,var(--so78-primary),var(--so78-secondary));
}

.so78-floating-match strong,
.so78-floating-match small{
    display:block;
}

.so78-floating-match small{
    color:#75809f;
}

.so78-section{
    margin-top:56px;
}

.so78-section-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:end;
    margin-bottom:18px;
}

.so78-section-head h2,
.so78-premium h2,
.so78-final h2,
.so78-safety h2{
    color:var(--so78-navy);
    letter-spacing:-.04em;
    font-size:clamp(1.8rem,4vw,3rem);
    margin:6px 0 0;
}

.so78-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.so78-feature-card,
.so78-steps article,
.so78-safety,
.so78-premium,
.so78-final{
    border-radius:28px;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(17,26,61,.08);
    box-shadow:0 18px 48px rgba(17,26,61,.08);
}

.so78-feature-card{
    padding:22px;
}

.so78-feature-icon{
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border-radius:20px;
    color:#fff;
    background:linear-gradient(135deg,var(--so78-primary),var(--so78-secondary));
    font-size:1.7rem;
    box-shadow:0 14px 34px rgba(243,50,134,.20);
}

.so78-feature-card h3{
    color:var(--so78-navy);
    margin:16px 0 8px;
}

.so78-feature-card p{
    color:#5b668a;
}

.so78-feature-card a{
    color:var(--so78-primary);
    font-weight:1000;
    text-decoration:none;
}

.so78-steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.so78-steps article{
    padding:24px;
}

.so78-steps span{
    display:inline-flex;
    color:var(--so78-primary);
    font-weight:1000;
    margin-bottom:18px;
}

.so78-steps h3{
    color:var(--so78-navy);
}

.so78-steps p{
    color:#5b668a;
}

.so78-premium{
    margin-top:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:30px;
    background:
        radial-gradient(circle at 86% 20%,rgba(243,50,134,.14),transparent 32%),
        linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.76));
}

.so78-premium p{
    color:#5b668a;
    max-width:720px;
}

.so78-safety{
    padding:30px;
    display:grid;
    grid-template-columns:1fr 360px;
    gap:20px;
    align-items:center;
}

.so78-safety p{
    color:#5b668a;
}

.so78-safety-list{
    display:grid;
    gap:10px;
}

.so78-safety-list span{
    display:block;
    padding:11px 13px;
    border-radius:16px;
    background:#f8f7ff;
    color:var(--so78-navy);
    font-weight:900;
}

.so78-final{
    margin-top:56px;
    padding:36px 24px;
    text-align:center;
    background:
        radial-gradient(circle at 20% 20%,rgba(255,189,138,.22),transparent 28%),
        radial-gradient(circle at 82% 20%,rgba(243,50,134,.14),transparent 30%),
        rgba(255,255,255,.90);
}

.so78-final p{
    color:#5b668a;
}

.so78-final>div{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}

/* Admin */
.so78-admin-form{
    display:grid;
    gap:18px;
}

.so78-admin-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.so78-admin-grid label:not(.check-row),
.so78-admin-form>label{
    display:grid;
    gap:7px;
    color:#334155;
    font-weight:900;
}

.so78-admin-preview{
    margin-top:18px;
}

.so78-hero.mini{
    transform:scale(.98);
    min-height:0;
}

.so78-hero.mini .so78-hero-visual,
.so78-hero.mini .so78-photo-stack{
    min-height:360px;
}

@media(max-width:1000px){
    .so78-hero,
    .so78-safety,
    .so78-premium,
    .so78-feature-grid,
    .so78-steps,
    .so78-admin-grid{
        grid-template-columns:1fr;
    }

    .so78-premium{
        display:grid;
    }

    .so78-hero-visual,
    .so78-photo-stack{
        min-height:460px;
    }

    .so78-photo-card.main{
        width:76%;
        left:0;
    }
}

@media(max-width:700px){
    .so78-home{
        padding:16px 12px 60px;
    }

    .so78-hero{
        padding:22px 16px;
        border-radius:26px;
    }

    .so78-hero h1{
        font-size:clamp(2.35rem,13vw,3.4rem);
    }

    .so78-stats{
        grid-template-columns:1fr;
    }

    .so78-section-head{
        display:grid;
        align-items:start;
    }

    .so78-hero-actions .btn,
    .so78-final .btn{
        width:100%;
    }

    .so78-hero-visual,
    .so78-photo-stack{
        min-height:390px;
    }

    .so78-photo-card.main{
        width:82%;
        height:80%;
        left:0;
        border-radius:28px;
    }

    .so78-photo-card.small{
        width:34%;
        height:30%;
        border-radius:22px;
    }

    .so78-floating-match{
        left:8px;
        right:8px;
        bottom:3%;
    }
}