/* frontend/static/css/public.css */

/* frontend/static/css/public.css */

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
    margin:0;
    min-width:320px;
    background:#fff;
    color:#171717;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height:1.6;
    overflow-x:hidden;
}

body,button,input,textarea,select{font:inherit;}

img{display:block;max-width:100%;}

a{color:inherit;text-decoration:none;}

button{border:0;}

:root{
    --text:#171717;
    --muted:#707070;
    --border:#ebebeb;
    --border-strong:#dedede;
    --surface:#fafafa;
    --accent:#e11d48;
    --accent-dark:#be123c;
    --accent-soft:#fff0f3;
    --max-width:1200px;
    --radius:20px;
    --radius-lg:30px;
    --shadow-sm:0 8px 30px rgba(0,0,0,.06);
    --shadow:0 25px 80px rgba(0,0,0,.08);
}

.skip-link{
    position:fixed;
    top:10px;
    left:10px;
    z-index:9999;
    padding:10px 15px;
    border-radius:10px;
    background:var(--text);
    color:#fff;
    transform:translateY(-150%);
}

.skip-link:focus{transform:translateY(0);}

.public-container{
    width:min(var(--max-width),calc(100% - 40px));
    margin-inline:auto;
}

.public-header{
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid rgba(0,0,0,.06);
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(18px);
}

.public-header-inner{
    width:min(var(--max-width),calc(100% - 40px));
    height:72px;
    margin-inline:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.public-brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    font-size:22px;
    font-weight:850;
    letter-spacing:-.04em;
}

.public-brand-logo{
    width:38px;
    height:38px;
    object-fit:contain;
}

.public-nav{
    display:flex;
    align-items:center;
    gap:25px;
    font-size:14px;
    font-weight:650;
}

.public-nav>a:not(.public-nav-button){
    color:#606060;
    transition:color .2s ease;
}

.public-nav>a:not(.public-nav-button):hover,
.public-nav>a.active{
    color:var(--accent);
}

.public-nav-button,
.public-primary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:11px 17px;
    border-radius:12px;
    background:var(--accent);
    color:#fff;
    font-size:14px;
    font-weight:750;
    transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}

.public-nav-button:hover,
.public-primary-button:hover{
    background:var(--accent-dark);
    transform:translateY(-1px);
    box-shadow:0 10px 25px rgba(225,29,72,.15);
}

.public-nav-button svg,
.public-primary-button svg{
    width:17px;
    height:17px;
}

.public-mobile-button{display:none;}

.public-hero{
    position:relative;
    overflow:hidden;
    padding:105px 0 100px;
    border-bottom:1px solid var(--border);
    background:
        radial-gradient(circle at 75% 25%,rgba(225,29,72,.09),transparent 28%),
        linear-gradient(180deg,#fff,#fffafa);
}

.public-hero::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-140px;
    bottom:-220px;
    border-radius:50%;
    background:rgba(225,29,72,.09);
    filter:blur(70px);
    pointer-events:none;
}

.public-hero .public-container{
    position:relative;
    z-index:1;
}

.public-eyebrow,
.public-label{
    display:inline-block;
    color:var(--accent);
    font-size:11px;
    font-weight:850;
    letter-spacing:.16em;
}

.public-hero h1{
    max-width:850px;
    margin:16px 0 20px;
    font-size:clamp(48px,7vw,82px);
    line-height:.98;
    letter-spacing:-.065em;
}

.public-hero h1 span{color:var(--accent);}

.public-hero p{
    max-width:680px;
    margin:0;
    color:var(--muted);
    font-size:18px;
    line-height:1.75;
}

.public-section{padding:105px 0;}

.public-soft-section{
    background:var(--surface);
    border-block:1px solid var(--border);
}

.public-content-grid{
    display:grid;
    grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);
    gap:90px;
    align-items:start;
}

.public-content-grid h2,
.contact-intro h2{
    margin:12px 0 0;
    font-size:clamp(34px,4vw,52px);
    line-height:1.05;
    letter-spacing:-.05em;
}

.public-copy{
    max-width:700px;
    color:var(--muted);
    font-size:16px;
    line-height:1.8;
}

.public-copy p{margin:0 0 22px;}

.public-section-heading{
    max-width:720px;
    margin:0 auto 50px;
    text-align:center;
}

.public-section-heading h2{
    margin:10px 0 0;
    font-size:clamp(34px,4vw,52px);
    line-height:1.05;
    letter-spacing:-.05em;
}

.public-card-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.public-info-card{
    min-height:250px;
    padding:30px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    transition:transform .2s ease,box-shadow .2s ease;
}

.public-info-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-sm);
}

.public-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--accent-soft);
    color:var(--accent);
}

.public-icon svg{
    width:22px;
    height:22px;
}

.public-info-card h3{
    margin:22px 0 8px;
    font-size:19px;
    letter-spacing:-.02em;
}

.public-info-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}

.public-cta{padding:0 0 100px;}

.public-cta-card{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:55px 60px;
    border-radius:var(--radius-lg);
    background:linear-gradient(135deg,#fff5f7,#fffafa);
}

.public-cta-card h2{
    margin:10px 0 8px;
    font-size:clamp(30px,4vw,46px);
    line-height:1.05;
    letter-spacing:-.05em;
}

.public-cta-card p{
    margin:0;
    color:var(--muted);
}

.public-footer{border-top:1px solid var(--border);}

.public-footer-top{
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.public-footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    color:#777;
    font-size:13px;
}

.public-footer-links a:hover{color:var(--accent);}

.public-footer-bottom{
    min-height:65px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--border);
    color:#888;
    font-size:12px;
}

.legal-layout{
    display:grid;
    grid-template-columns:220px minmax(0,760px);
    justify-content:center;
    gap:80px;
}

.legal-sidebar{
    position:sticky;
    top:105px;
    align-self:start;
}

.legal-sidebar nav{
    display:grid;
    gap:5px;
    margin-top:18px;
}

.legal-sidebar a{
    padding:8px 0;
    color:#777;
    font-size:13px;
    font-weight:650;
}

.legal-sidebar a:hover{color:var(--accent);}

.legal-content{
    color:#555;
    font-size:15px;
    line-height:1.8;
}

.legal-updated{
    margin:0 0 45px;
    color:#999;
    font-size:12px;
}

.legal-content h2{
    margin:48px 0 12px;
    color:var(--text);
    font-size:26px;
    line-height:1.2;
    letter-spacing:-.03em;
}

.legal-content h2:first-of-type{margin-top:0;}

.legal-content p{margin:0 0 18px;}

.legal-content a{
    color:var(--accent);
    font-weight:700;
}

.contact-grid{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(400px,1.1fr);
    gap:80px;
    align-items:start;
}

.contact-intro>p{
    max-width:520px;
    margin:18px 0 30px;
    color:var(--muted);
}

.contact-option{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:18px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
}

.contact-option h3{
    margin:1px 0 3px;
    font-size:15px;
}

.contact-option p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}

.contact-form-card{
    padding:32px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.form-field{
    display:grid;
    gap:7px;
    margin-bottom:18px;
}

.form-field label{
    color:var(--text);
    font-size:13px;
    font-weight:750;
}

.form-field input,
.form-field textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    outline:0;
    background:#fff;
    color:var(--text);
    padding:12px 14px;
    font-size:14px;
    transition:border-color .2s ease,box-shadow .2s ease;
}

.form-field input:focus,
.form-field textarea:focus{
    border-color:#e8a7b7;
    box-shadow:0 0 0 3px rgba(225,29,72,.08);
}

.form-field textarea{
    min-height:150px;
    resize:vertical;
}

.contact-form-card .public-primary-button{
    width:100%;
    cursor:pointer;
}

/* TABLET */
@media (max-width:950px){
    .public-nav{display:none;}

    .public-mobile-button{
        width:42px;
        height:42px;
        display:grid;
        place-items:center;
        border-radius:11px;
        background:var(--accent-soft);
        color:var(--accent);
    }

    .public-mobile-button svg{
        width:20px;
        height:20px;
    }

    .public-content-grid,
    .contact-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .public-content-grid h2,
    .contact-intro h2{
        max-width:700px;
    }

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

    .legal-layout{
        grid-template-columns:1fr;
        gap:35px;
    }

    .legal-sidebar{
        position:static;
    }

    .legal-sidebar nav{
        display:flex;
        flex-wrap:wrap;
        gap:5px 20px;
    }

    .public-cta-card{
        padding:45px;
    }
}

/* MOBILE */
@media (max-width:700px){
    .public-container,
    .public-header-inner{
        width:min(100% - 28px,var(--max-width));
    }

    .public-header-inner{height:64px;}

    .public-brand{
        font-size:20px;
    }

    .public-brand-logo{
        width:34px;
        height:34px;
    }

    .public-hero{
        padding:70px 0 65px;
    }

    .public-hero h1{
        font-size:clamp(42px,12vw,62px);
    }

    .public-hero p{font-size:16px;}

    .public-section{padding:75px 0;}

    .public-content-grid h2,
    .contact-intro h2,
    .public-section-heading h2{
        font-size:34px;
    }

    .public-card-grid{
        grid-template-columns:1fr;
    }

    .public-info-card{min-height:auto;}

    .public-cta{padding-bottom:75px;}

    .public-cta-card{
        flex-direction:column;
        align-items:flex-start;
        padding:38px 24px;
    }

    .public-cta-card .public-primary-button{
        width:100%;
    }

    .public-footer-top{
        min-height:auto;
        padding:40px 0;
        align-items:flex-start;
        flex-direction:column;
    }

    .public-footer-links{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        width:100%;
        gap:12px;
    }

    .public-footer-bottom{
        min-height:auto;
        padding:18px 0;
        flex-direction:column;
        align-items:flex-start;
        gap:5px;
    }

    .legal-content h2{
        font-size:23px;
    }

    .contact-form-card{
        padding:24px 18px;
    }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}

    *,
    *::before,
    *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
}