:root{
     --ink:#0f172a;
     --muted:#64748b;
     --brand:#2563eb;
     --ok:#16a34a;
     --bad:#ef4444;
     --bg:#f7f9ff;
     --ring:0 0 0 3px rgba(37,99,235,.25);
     --r:16px;
     --shadow-1:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
     --shadow-2:0 10px 30px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08);
}
 *{
    box-sizing:border-box
}
 body{
    margin:0;
    font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:linear-gradient(180deg,var(--bg),#fff)
}
 a{
    color:var(--brand);
    text-decoration:none
}
 a:hover{
    text-decoration:underline
}
 .wrap{
    max-width:1100px;
    margin:0 auto;
    padding:0 18px
}
 .bar{
    position:sticky;
    top:0;
    z-index:50;
    background:#fff;
    box-shadow:var(--shadow-1)
}
 .bar .row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0
}
 .brand{
    display:flex;
    gap:10px;
    align-items:center;
    font-weight:800;
    font-size: 24pt;
}
 .logo{
    width:34px;
    height:34px;
    border-radius:10px;
    background:conic-gradient(#22c55e,#2563eb,#0ea5e9,#22c55e)
}
 .call a{
    font-weight:800
}
 .hero{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:22px;
    margin:24px 0
}
 @media (max-width:900px){
    .hero{
        grid-template-columns:1fr
    }
}
 .card{
    background:#fff;
    border-radius:var(--r);
    box-shadow:var(--shadow-2);
    padding:clamp(16px,3vw,28px)
}
 h1{
    font-size:clamp(1.8rem,3.5vw,3rem);
    line-height:1.05;
    margin:.2rem 0 .7rem
}
 .lede{
    color:var(--muted);
    margin:0 0 1rem
}
 .badges{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:.5rem
}
 .badge{
    background:#eef2ff;
    color:#1d4ed8;
    border-radius:999px;
    padding:8px 12px;
    font-weight:700;
    font-size:.9rem
}
 .cta{
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
 .btn{
    border:0;
    border-radius:12px;
    padding:12px 16px;
    font-weight:800;
    cursor:pointer
}
 .btn:focus-visible{
    outline:none;
    box-shadow:var(--ring)
}
 .btn-primary{
    background:var(--brand);
    color:#fff
}
 .btn-ghost{
    background:#e5e7eb;
    color:var(--ink)
}
 .ill{
     max-width: 500px;
     max-height: 500px;
     display:grid;
    place-items:center
}
 .ill .ph{
    width:min(92%,520px);
    aspect-ratio:16/10;
    background:#fff;
    border-radius:18px;
    box-shadow:var(--shadow-2);
    display:grid;
    place-items:center;
    color:#475569;
    font-weight:800
}
/* sections */
 section{
    margin:26px 0
}
 h2{
    font-size:1.6rem;
    margin:.2rem 0 .6rem
}
 .muted{
    color:var(--muted)
}
/* steps */
 .grid3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
 @media (max-width:900px){
    .grid3{
        grid-template-columns:1fr 1fr
    }
}
 @media (max-width:640px){
    .grid3{
        grid-template-columns:1fr
    }
}
 .step .n{
    display:inline-grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:10px;
    background:#eef2ff;
    color:#1d4ed8;
    font-weight:800;
    margin-bottom:.4rem
}
/* reasons chips */
 .chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px
}
 .chip{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:8px 12px;
    box-shadow:var(--shadow-1)
}
/* gallery */
 .gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px
}
 @media (max-width:900px){
    .gallery{
        grid-template-columns:1fr 1fr
    }
}
 @media (max-width:640px){
    .gallery{
        grid-template-columns:1fr
    }
}
 .imgph{
    aspect-ratio:4/3;
    background:#e5e7eb;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:#475569;
    font-weight:800
}
/* comparison */
 .compare{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}
 @media (max-width:800px){
    .compare{
        grid-template-columns:1fr
    }
}
 .table{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    overflow:hidden
}
 .table h3{
    margin:0;
    padding:12px 14px;
    background:#f8fafc;
    border-bottom:1px solid #e5e7eb
}
 .row{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:10px;
    padding:12px 14px;
    border-top:1px solid #f1f5f9
}
 .good{
    color:var(--ok);
    font-weight:800
}
 .bad{
    color:var(--bad);
    font-weight:800
}
/* form */
 form .row2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
 @media (max-width:640px){
    form .row2{
        grid-template-columns:1fr
    }
}
 .field{
    display:grid;
    gap:6px;
    margin-bottom:12px
}
 label{
    font-weight:700;
    font-size:.92rem
}
 input,select,textarea{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #e5e7eb;
    background:#fff;
    font:inherit;
    color:inherit
}
 input:focus,select:focus,textarea:focus{
    outline:none;
    box-shadow:var(--ring);
    border-color:#c7d2fe
}
 .hint{
    font-size:.85rem;
    color:#ef4444;
    min-height:1.1em
}
/* footer & snackbar */
 footer{
    margin-top:30px;
    background:#0b1220;
    color:#c7d2fe
}
 footer .row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:22px 0
}
 footer a{
    color:#93c5fd
}
 .snack{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:18px;
    background:#111827;
    color:#fff;
    padding:10px 14px;
    border-radius:10px;
    display:none;
    box-shadow:var(--shadow-2);
    z-index:60
}
 .snack.show{
    display:block;
    animation:fade .25s ease
}
 @keyframes fade{
    from{
        opacity:0;
        transform:translate(-50%,6px)
    }
    to{
        opacity:1;
        transform:translate(-50%,0)
    }
}