*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#252329;background:#fff}a{text-decoration:none;color:inherit}.hero{min-height:100vh;display:grid;place-items:center;padding:28px;background:linear-gradient(160deg,#fff5f7,#fff,#fff4f0)}.hero-card{width:min(720px,100%);text-align:center}.brand{font-weight:800;font-size:20px;margin-bottom:28px}.hero h1{font-size:clamp(36px,7vw,64px);line-height:1.06;margin:0 0 24px}.lead{font-size:19px;line-height:1.7;color:#666;max-width:620px;margin:0 auto 28px}.pill-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}.pill-row span{padding:8px 13px;background:#fff;border:1px solid #eee;border-radius:999px}.btn{display:inline-block;border:0;border-radius:14px;padding:15px 22px;font-size:16px;font-weight:750;cursor:pointer}.primary{background:#f04f70;color:white}.full{width:100%;text-align:center}.micro,.hint{font-size:13px;color:#888}.section{padding:70px 22px;max-width:1080px;margin:auto;text-align:center}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.info-card{padding:28px;text-align:left;border:1px solid #eee;border-radius:20px}.info-card b{font-size:28px;color:#f04f70}.soft-bg{background:#fff7f8;min-height:100vh}.quiz-wrap{max-width:650px;margin:auto;padding:28px 18px}.progress{height:8px;background:#eee;border-radius:10px;overflow:hidden;margin:10px 0 40px}.progress span{display:block;height:100%;background:#f04f70;transition:.25s}.q{display:none}.q.active{display:block}.q h2{font-size:34px;margin:18px 0 26px}.step{color:#999}.input{width:100%;padding:15px 14px;border:1px solid #ddd;border-radius:13px;background:#fff;font-size:16px;margin:7px 0}.choice-grid,.tag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.stack{display:grid;gap:12px}.choice-grid label,.tag-grid label,.stack label{cursor:pointer}.choice-grid input,.tag-grid input,.stack input{display:none}.choice-grid span,.tag-grid span,.stack span{display:block;padding:16px;border:1px solid #ddd;background:#fff;border-radius:14px}.choice-grid input:checked+span,.tag-grid input:checked+span,.stack input:checked+span{border-color:#f04f70;background:#fff0f3}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.result-wrap{max-width:760px;margin:auto;padding:30px 18px 70px}.report-card,.empty-card,.form-card,.success-card{background:#fff;border:1px solid #eee;border-radius:24px;padding:26px;box-shadow:0 10px 30px rgba(0,0,0,.04)}.eyebrow{font-size:13px;letter-spacing:.08em;color:#f04f70;font-weight:800}.section-title{margin:34px 0 15px}.match-list{display:grid;gap:20px}.match-card{background:#fff;border:1px solid #eee;border-radius:24px;overflow:hidden}.photo-wrap{position:relative;aspect-ratio:4/3;background:#eee}.photo-wrap img{width:100%;height:100%;object-fit:cover}.photo-placeholder{display:grid;place-items:center;height:100%;color:#888}.score-badge{position:absolute;top:14px;right:14px;background:#111;color:#fff;padding:8px 10px;border-radius:999px;font-weight:800}.match-body{padding:22px}.match-body h3{margin:0 0 8px;font-size:25px}.meta{color:#777}.verified{font-size:13px;color:#157a55}.reason-box{background:#fff7f8;border-radius:14px;padding:14px;margin:16px 0;line-height:1.9}.locked{padding:12px 0;color:#777}.form-card,.success-card{max-width:560px;margin:50px auto}.form-card h1,.success-card h1{margin-top:0}.whatsapp{background:#1fa855;color:#fff}.text-link{display:block;text-align:center;margin-top:18px;color:#777}.success-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#e8fff1;color:#147a45;font-size:30px;margin-bottom:18px}@media(max-width:700px){.grid3{grid-template-columns:1fr}.choice-grid,.tag-grid{grid-template-columns:1fr}.hero h1{font-size:42px}}


/* =========================================================
   AI Match Homepage UI v2
   Desktop + Tablet + Mobile
   ========================================================= */
.home-page{
    --pink:#f13f68;
    --pink-2:#ff6688;
    --navy:#111744;
    --text:#353247;
    --muted:#6f6b7d;
    --glass:rgba(255,255,255,.78);
    background:#fff8fa;
    color:var(--text);
}
.site-header{
    position:absolute;
    z-index:50;
    top:0; left:0; right:0;
    padding:18px 22px 0;
}
.nav-shell{
    width:min(1380px,100%);
    min-height:72px;
    margin:auto;
    padding:0 22px;
    display:flex;
    align-items:center;
    gap:24px;
    border:1px solid rgba(255,255,255,.7);
    border-radius:22px;
    background:rgba(255,255,255,.72);
    box-shadow:0 12px 35px rgba(105,48,75,.08);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.site-brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--navy);
    min-width:205px;
}
.brand-heart{
    width:45px;height:45px;
    display:grid;place-items:center;
    font-size:30px;
    color:white;
    border-radius:16px 16px 16px 4px;
    transform:rotate(-8deg);
    background:linear-gradient(135deg,#ff7b9a,#ef315f);
    box-shadow:0 8px 20px rgba(240,63,104,.26);
}
.site-brand strong{display:block;font-size:24px;line-height:1}
.site-brand small{display:block;margin-top:6px;color:#81788e;font-size:12px}
.desktop-nav{
    flex:1;
    display:flex;
    justify-content:center;
    gap:34px;
}
.desktop-nav a{
    position:relative;
    padding:26px 0 24px;
    color:#2e2946;
    font-weight:650;
    font-size:15px;
}
.desktop-nav a.active{color:var(--pink)}
.desktop-nav a.active:after{
    content:"";
    position:absolute;left:0;right:0;bottom:15px;
    height:2px;border-radius:2px;background:var(--pink);
}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-login,.nav-test{
    min-width:96px;
    text-align:center;
    padding:11px 18px;
    border-radius:999px;
    font-weight:750;
    font-size:14px;
}
.nav-login{border:1px solid rgba(241,63,104,.34);color:var(--pink);background:rgba(255,255,255,.58)}
.nav-test{color:#fff;background:linear-gradient(135deg,#ff6384,#ee315f);box-shadow:0 9px 22px rgba(239,49,95,.22)}
.menu-button{display:none;border:0;background:transparent;padding:8px;margin-left:auto}
.menu-button span{display:block;width:24px;height:2px;background:#19163c;margin:5px 0;border-radius:2px}
.mobile-menu{display:none}

.match-hero{
    position:relative;
    min-height:920px;
    overflow:hidden;
    isolation:isolate;
    background:#fff6f8;
}
.hero-bg{
    position:absolute;inset:0;
    z-index:-5;
    background:
        linear-gradient(90deg,rgba(255,248,251,.98) 0%,rgba(255,248,251,.94) 35%,rgba(255,247,250,.30) 66%,rgba(255,247,250,.08) 100%),
        url("/assets/images/hero-bg-desktop.webp") center/cover no-repeat;
}
.hero-bg:after{
    content:"";
    position:absolute;inset:0;
    background:
        radial-gradient(circle at 55% 32%,rgba(255,255,255,.55),transparent 29%),
        linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,228,237,.16));
}
.hero-container{
    width:min(1380px,100%);
    min-height:825px;
    margin:auto;
    padding:148px 48px 190px;
    display:grid;
    grid-template-columns:minmax(470px,.92fr) minmax(520px,1.08fr);
    align-items:center;
    gap:35px;
}
.hero-copy{position:relative;z-index:4;max-width:650px}
.hero-kicker{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    color:var(--pink);
    background:rgba(255,255,255,.72);
    border:1px solid rgba(241,63,104,.15);
    box-shadow:0 8px 22px rgba(240,63,104,.08);
    font-size:14px;
    font-weight:750;
    margin-bottom:24px;
}
.hero-copy h1{
    margin:0;
    color:var(--navy);
    font-size:clamp(52px,5.1vw,78px);
    line-height:1.08;
    letter-spacing:-2.5px;
    font-weight:900;
}
.hero-copy h1 span{display:block;color:var(--pink);margin-top:8px}
.hero-subtitle{
    max-width:620px;
    margin:24px 0 30px;
    color:#514b63;
    font-size:19px;
    line-height:1.8;
}
.hero-benefits{display:grid;gap:18px}
.benefit-row{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center}
.benefit-icon{
    width:46px;height:46px;
    display:grid;place-items:center;
    border-radius:50%;
    color:var(--pink);
    background:rgba(255,255,255,.86);
    box-shadow:0 7px 20px rgba(128,53,82,.12);
    font-weight:900;
}
.benefit-icon.shield{font-size:18px}
.benefit-row strong{display:block;color:#1b1942;font-size:17px;margin-bottom:3px}
.benefit-row p{margin:0;color:#656074;font-size:14px;line-height:1.55}
.hero-cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px}
.hero-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    min-width:242px;
    padding:16px 26px;
    border-radius:999px;
    color:#fff;
    font-size:17px;
    font-weight:800;
    background:linear-gradient(135deg,#ff5f81,#ed315f);
    box-shadow:0 14px 30px rgba(238,49,95,.23);
    transition:.2s ease;
}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(238,49,95,.29)}
.cta-note{color:#8a8290;font-size:13px}
.hero-proof{display:flex;align-items:center;gap:14px;margin-top:27px}
.proof-bubbles{display:flex}
.proof-bubbles span{
    width:39px;height:39px;margin-left:-7px;
    display:grid;place-items:center;
    border-radius:50%;
    color:#fff;font-size:13px;font-weight:800;
    border:3px solid rgba(255,255,255,.92);
    background:linear-gradient(145deg,#ef6684,#b96c83);
}
.proof-bubbles span:first-child{margin-left:0}
.hero-proof strong{display:block;color:var(--pink);font-size:14px}
.hero-proof small{display:block;color:#7c7482;margin-top:4px}

.hero-visual{
    position:relative;
    min-height:610px;
    align-self:end;
    z-index:2;
}
.hero-visual img{
    position:absolute;
    right:-18px;
    bottom:24px;
    width:min(690px,48vw);
    height:610px;
    object-fit:cover;
    object-position:center;
    border-radius:48% 48% 34% 34% / 34% 34% 18% 18%;
    box-shadow:0 30px 70px rgba(102,51,73,.12);
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%);
}
.heart-outline{
    position:absolute;
    width:520px;height:460px;
    top:18px;right:38px;
    opacity:.72;
}
.heart-outline:before,
.heart-outline:after{
    content:"";
    position:absolute;
    width:250px;height:385px;
    border:3px solid rgba(255,255,255,.88);
    border-bottom:0;
    border-radius:150px 150px 0 0;
}
.heart-outline:before{left:75px;transform:rotate(-44deg);transform-origin:0 100%}
.heart-outline:after{right:75px;transform:rotate(44deg);transform-origin:100% 100%}
.floating-heart{
    position:absolute;
    color:#fa4b75;
    filter:drop-shadow(0 8px 10px rgba(236,54,98,.18));
    opacity:.78;
}
.floating-heart.h1{font-size:44px;right:-10px;top:160px;transform:rotate(12deg)}
.floating-heart.h2{font-size:24px;left:28px;bottom:145px;opacity:.45}

.wave{
    position:absolute;left:-4%;right:-4%;
    bottom:105px;height:155px;
    border-radius:50% 50% 0 0 / 65% 65% 0 0;
    pointer-events:none;
}
.wave-back{
    z-index:5;
    bottom:115px;
    background:rgba(245,74,116,.22);
    transform:rotate(-1.8deg) scaleX(1.06);
}
.wave-front{
    z-index:6;
    bottom:80px;
    background:rgba(255,250,252,.96);
    transform:rotate(1.2deg) scaleX(1.05);
}
.hero-feature-bar{
    position:absolute;
    z-index:10;
    left:50%;bottom:28px;
    transform:translateX(-50%);
    width:min(1180px,calc(100% - 56px));
    min-height:118px;
    padding:24px 34px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    align-items:center;
    border:1px solid rgba(255,255,255,.75);
    border-radius:26px;
    background:rgba(255,255,255,.83);
    box-shadow:0 18px 45px rgba(112,55,78,.09);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.feature-item{display:flex;align-items:center;justify-content:center;gap:15px;min-width:0}
.feature-circle{
    width:56px;height:56px;flex:0 0 auto;
    display:grid;place-items:center;
    border-radius:50%;
    color:var(--pink);
    background:linear-gradient(145deg,#fff,#ffe7ed);
    box-shadow:inset 0 0 0 1px rgba(241,63,104,.08);
    font-size:26px;font-weight:900;
}
.feature-circle.chat{font-size:15px;letter-spacing:1px}
.feature-circle.shield{font-size:22px}
.feature-item strong{display:block;color:#1c1940;font-size:17px;margin-bottom:4px}
.feature-item small{display:block;color:#77717d;line-height:1.45}

.home-how{
    max-width:1180px;
    margin:0 auto;
    padding:88px 24px 100px;
}
.section-heading{text-align:center;max-width:720px;margin:0 auto 45px}
.section-heading span{color:var(--pink);font-size:12px;font-weight:850;letter-spacing:.12em}
.section-heading h2{font-size:38px;color:var(--navy);margin:10px 0 12px}
.section-heading p{margin:0;color:#77717d;line-height:1.7}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.how-grid article{
    position:relative;
    min-height:210px;
    padding:28px;
    border-radius:22px;
    background:#fff;
    border:1px solid #f0e7eb;
    box-shadow:0 12px 32px rgba(70,36,51,.05);
}
.how-grid b{display:block;color:#f6a1b5;font-size:32px;margin-bottom:30px}
.how-grid h3{color:#1c1940;font-size:20px;margin:0 0 10px}
.how-grid p{color:#77717d;line-height:1.75;margin:0}

@media(max-width:1050px){
    .desktop-nav{gap:20px}
    .hero-container{grid-template-columns:1fr 1fr;padding-left:34px;padding-right:34px}
    .hero-copy h1{font-size:58px}
    .hero-visual img{width:52vw}
}
@media(max-width:820px){
    .site-header{padding:12px 12px 0}
    .nav-shell{min-height:64px;padding:0 16px;border-radius:18px}
    .site-brand{min-width:auto}
    .site-brand strong{font-size:20px}
    .site-brand small{font-size:10px}
    .brand-heart{width:38px;height:38px;font-size:24px;border-radius:13px 13px 13px 4px}
    .desktop-nav,.nav-actions{display:none}
    .menu-button{display:block}
    .mobile-menu{
        position:absolute;
        left:12px;right:12px;top:82px;
        padding:12px;
        border-radius:18px;
        background:rgba(255,255,255,.96);
        box-shadow:0 18px 44px rgba(69,35,49,.12);
        backdrop-filter:blur(18px);
    }
    .mobile-menu.open{display:grid}
    .mobile-menu a{padding:13px 12px;border-radius:10px;color:#26213e;font-weight:700}
    .mobile-menu-cta{background:linear-gradient(135deg,#ff6082,#ed315f);color:#fff!important;text-align:center;margin-top:6px}

    .match-hero{min-height:auto;padding-bottom:0}
    .hero-bg{
        background:
            linear-gradient(180deg,rgba(255,247,250,.96) 0%,rgba(255,247,250,.88) 44%,rgba(255,247,250,.35) 68%,rgba(255,247,250,.14) 100%),
            url("/assets/images/hero-bg-mobile.webp") center top/cover no-repeat;
    }
    .hero-container{
        display:flex;
        flex-direction:column;
        min-height:auto;
        padding:112px 20px 0;
        gap:15px;
    }
    .hero-copy{text-align:left;max-width:none;width:100%}
    .hero-kicker{font-size:12px;margin-bottom:16px}
    .hero-copy h1{font-size:46px;letter-spacing:-1.7px;line-height:1.08}
    .hero-copy h1 span{margin-top:5px}
    .hero-subtitle{font-size:16px;line-height:1.65;margin:18px 0 24px;max-width:95%}
    .hero-benefits{gap:13px}
    .benefit-row{grid-template-columns:42px 1fr;gap:12px}
    .benefit-icon{width:40px;height:40px}
    .benefit-row strong{font-size:15px}
    .benefit-row p{font-size:12px}
    .hero-cta-row{display:block;margin-top:24px}
    .hero-cta{width:100%;min-width:0;padding:15px 20px}
    .cta-note{display:block;text-align:center;margin-top:9px}
    .hero-proof{margin-top:20px}
    .proof-bubbles span{width:34px;height:34px;font-size:11px}
    .hero-proof strong{font-size:13px}
    .hero-proof small{font-size:11px}

    .hero-visual{
        width:calc(100% + 40px);
        min-height:365px;
        margin-left:-20px;
        overflow:hidden;
        align-self:auto;
    }
    .hero-visual img{
        width:100%;
        height:380px;
        right:0;
        bottom:0;
        object-position:58% center;
        border-radius:0;
        -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 88%,transparent 100%);
        mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 88%,transparent 100%);
        box-shadow:none;
    }
    .heart-outline{display:none}
    .floating-heart.h1{font-size:32px;right:22px;top:105px}
    .floating-heart.h2{left:30px;bottom:85px}
    .wave{height:90px;bottom:118px}
    .wave-back{bottom:112px}
    .wave-front{bottom:92px}
    .hero-feature-bar{
        position:relative;
        left:auto;bottom:auto;
        transform:none;
        width:calc(100% - 24px);
        margin:-6px auto 0;
        padding:20px 12px;
        grid-template-columns:repeat(3,1fr);
        gap:4px;
        border-radius:22px;
    }
    .feature-item{display:grid;justify-items:center;text-align:center;gap:8px}
    .feature-circle{width:46px;height:46px;font-size:21px}
    .feature-item strong{font-size:13px}
    .feature-item small{font-size:10px;line-height:1.35}

    .home-how{padding:68px 16px 78px}
    .section-heading h2{font-size:30px}
    .how-grid{grid-template-columns:1fr}
}
@media(max-width:390px){
    .hero-copy h1{font-size:40px}
    .hero-subtitle{font-size:15px}
    .feature-item strong{font-size:12px}
    .feature-item small{font-size:9px}
}


/* Brand Logo Upgrade */
.site-brand .brand-logo{
    width:52px;
    height:52px;
    object-fit:contain;
    flex-shrink:0;
    filter:drop-shadow(0 8px 18px rgba(240,63,104,.18));
}

@media(max-width:820px){
    .site-brand .brand-logo{
        width:40px;
        height:40px;
    }
}