:root{
    --wine:#6f2945;
    --wine-2:#4b1730;
    --rose:#d9a8b7;
    --gold:#b58a45;
    --cream:#fffaf5;
    --paper:#f6eee8;
    --ink:#261e22;
    --muted:#766b70;
    --white:#fff;
    --line:rgba(83,45,58,.12);
    --shadow:0 24px 70px rgba(60,31,43,.13);
    --radius:28px;
    --safe-bottom:env(safe-area-inset-bottom,0px)
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:78px
}

body{
    margin:0;
    color:var(--ink);
    background:var(--cream);
    font-family:"DM Sans",sans-serif;
    line-height:1.55;
    overflow-x:hidden
}

body.modal-open{
    overflow:hidden
}

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

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

button{
    cursor:pointer
}

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

.container{
    width:min(1180px,calc(100% - 36px));
    margin:auto
}

.section{
    padding:96px 0
}

.soft{
    background:var(--paper)
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--wine);
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.17em;
    text-transform:uppercase
}

.eyebrow:before{
    content:"";
    width:24px;
    height:1px;
    background:var(--gold)
}

h1,
h2,
h3,
.display{
    font-family:"Italiana",serif;
    font-weight:400;
    line-height:1.02
}
h1{
    font-size:clamp(3.4rem,8vw,6.5rem);
    margin:18px 0 22px;
    letter-spacing:-.04em
}

h2{
    font-size:clamp(2.55rem,5.2vw,4.6rem);
    margin:12px 0 18px;
    letter-spacing:-.035em
}

h3{
    font-size:1.65rem;
    margin:0 0 10px
}

.lead{
    font-size:1.08rem;
    color:var(--muted);
    max-width:690px
}

.section-head{
    text-align:center;
    max-width:780px;
    margin:0 auto 44px
}

.section-head .lead{
    margin:0 auto
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:1px solid transparent;
    border-radius:999px;
    padding:14px 23px;
    font-weight:700;
    transition:.25s ease;
    min-height:50px
}

.btn-primary{
    background:var(--wine);
    color:#fff;
    box-shadow:0 12px 28px rgba(111,41,69,.22)
}

.btn-primary:hover{
    background:var(--wine-2);
    transform:translateY(-2px)
}

.btn-secondary{
    background:rgba(255,255,255,.78);
    border-color:rgba(111,41,69,.22);
    color:var(--wine)
}

.btn-gold{
    background:var(--gold);
    color:#fff
}

.icon-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff;
    display:grid;
    place-items:center
}

/* Header */
.header{
    position:fixed;
    inset:0 0 auto;
    z-index:80;
    background:rgba(255,250,245,.88);
    backdrop-filter:blur(15px);
    border-bottom:1px solid rgba(181,138,69,.12)
}

.nav{
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.brand{
    display:flex;
    align-items:center;
    gap:10px
}

.brand-mark{
    width:40px;
    height:40px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:1px solid var(--gold);
    font-family:"Italiana",serif;
    font-size:1.45rem;
    color:var(--wine);
    background:#fff
}

.brand-name{
    font-family:"Italiana",serif;
    font-size:1.65rem
}

.desktop-menu{
    display:flex;
    align-items:center;
    gap:22px;
    font-size:.9rem;
    font-weight:600
}

.desktop-menu a:hover{
    color:var(--wine)
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:10px
}

.menu-toggle{
    display:none
}

/* Hero */
.hero{
    min-height:790px;
    padding-top:76px;
    display:grid;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 8% 12%,rgba(213,161,180,.23),transparent 28%),radial-gradient(circle at 92% 16%,rgba(181,138,69,.18),transparent 24%),linear-gradient(135deg,#fffaf5,#f5e9e5)
}

.hero:after{
    content:"";
    position:absolute;
    width:640px;
    height:640px;
    border-radius:50%;
    border:1px solid rgba(181,138,69,.23);
    right:-330px;
    bottom:-280px
}

.hero-grid{
    display:grid;
    grid-template-columns:1.06fr .94fr;
    gap:54px;
    align-items:center;
    position:relative;
    z-index:2
}

.hero-copy{
    padding:90px 0
}

.hero-copy .lead, .hero-actions{
    max-width:620px
}

.hero-actions{
    display:grid;
    flex-wrap:wrap;
    gap:12px;
    margin: auto;
    margin-top:30px
}

.proof{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:28px;
    color:var(--muted);
    font-size:.88rem
}

.proof span{
    display:flex;
    align-items:center;
    gap:6px
}

.hero-visual{
    min-height:620px;
    position:relative;
    display:grid;
    place-items:center
}

.phone{
    width:340px;
    height:680px;
    border:9px solid #201d20;
    border-radius:48px;
    background:#201d20;
    padding:9px;
    box-shadow:0 38px 90px rgba(50,23,36,.28);
    transform:rotate(3deg);
    position:relative
}

.phone:before{
    content:"";
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    width:105px;
    height:23px;
    border-radius:0 0 15px 15px;
    background:#201d20;
    z-index:4
}

.phone-screen{
    height:100%;
    border-radius:33px;
    overflow:hidden;
    position:relative;
    background:linear-gradient(180deg,#f4dfe6,#fbf5f1);
    display:flex;
    flex-direction:column
}

.demo-hero{
    min-height:330px;
    padding:72px 26px 32px;
    text-align:center;
    background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.9),transparent 32%),linear-gradient(150deg,#f2d8e0,#fff9f5)
}

.demo-kicker{
    font-size:.65rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:#6f2945;
    font-weight:700
}

.demo-name{
    font-family:"Italiana",serif;
    font-size:3.6rem;
    line-height:.86;
    margin:24px 0 18px;
    color:#6f2945
}

.demo-divider{
    width:62px;
    height:1px;
    background:#b58a45;
    margin:0 auto 18px
}

.demo-copy{
    font-family:Georgia,serif;
    font-size:.94rem;
    color:#6c5961
}

.demo-info{
    padding:24px 22px;
    display:grid;
    gap:12px;
    background:#fff
}

.demo-row{
    display:flex;
    gap:12px;
    align-items:center;
    font-size:.76rem
}

.demo-icon{
    width:31px;
    height:31px;
    border-radius:50%;
    background:#f3e5e9;
    display:grid;
    place-items:center
}

.demo-rsvp{
    margin:8px 22px 24px;
    background:#6f2945;
    color:#fff;
    border-radius:999px;
    text-align:center;
    padding:12px;
    font-size:.78rem;
    font-weight:700
}

.float-card{
    position:absolute;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(12px);
    border:1px solid rgba(181,138,69,.22);
    box-shadow:var(--shadow);
    border-radius:18px;
    padding:13px 16px;
    font-size:.85rem;
    font-weight:600;
    z-index: 2
}

.float-a{
    left:-65px;
    top: 60px
}

.float-b{
    right:-3px;
    bottom:135px
}

/* category rail */
.category-rail{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:13px
}

.category-pill{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:20px 12px;
    text-align:center;
    transition:.25s
}

.category-pill:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow)
}

.category-pill span{
    display:block;
    font-size:1.9rem;
    margin-bottom:8px
}

.category-pill strong{
    font-size:.84rem
}

/* features */
.features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.feature{
    background:#fff;
    border-radius:var(--radius);
    padding:30px;
    border:1px solid rgba(181,138,69,.13);
    box-shadow:0 12px 32px rgba(60,31,43,.055)
}

.feature-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    background:#f4e6eb;
    display:grid;
    place-items:center;
    font-size:1.35rem;
    margin-bottom:18px
}

.feature p{
    color:var(--muted);
    margin-bottom:0
}

/* catalog */
.catalog-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px
}

.filters{
    display:flex;
    gap:9px;
    overflow:auto;
    scrollbar-width:none;
    padding:2px
}

.filters::-webkit-scrollbar{
    display:none
}

.filter-btn{
    white-space:nowrap;
    border:1px solid var(--line);
    background:#fff;
    border-radius:999px;
    padding:10px 17px;
    font-weight:700;
    color:var(--muted)
}

.filter-btn.active{
    background:var(--wine);
    color:#fff;
    border-color:var(--wine)
}

.catalog-count{
    color:var(--muted);
    font-size:.88rem;
    white-space:nowrap
}

.catalog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}

.catalog-card{
    background:#fff;
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 16px 42px rgba(60,31,43,.09);
    border:1px solid rgba(83,45,58,.06);
    transition:.25s
}

.catalog-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 58px rgba(60,31,43,.14)
}

.site-thumb{
    height:420px;
    padding:18px;
    position:relative;
    overflow:hidden
}

.site-frame{
    height:100%;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    box-shadow:0 15px 30px rgba(30,20,24,.16)
}

.site-top{
    height:25px;
    background:rgba(255,255,255,.78);
    display:flex;
    align-items:center;
    gap:5px;
    padding-left:10px;
    position:relative;
    z-index:2
}

.site-top i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(0,0,0,.25)
}

.invite-mini{
    height:calc(100% - 25px);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:26px 18px;
    position:relative
}

.invite-mini:after{
    content:"";
    position:absolute;
    inset:15px;
    border:1px solid currentColor;
    opacity:.24;
    border-radius:100px 100px 16px 16px
}

.mini-kicker{
    font-size:.58rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    font-weight:700
}

.mini-name{
    font-family:"Italiana",serif;
    font-size:2.55rem;
    line-height:.9;
    margin:22px 0 16px;
    position:relative;
    z-index:1
}

.mini-date{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.12em
}

.mini-button{
    margin-top:24px;
    border:1px solid currentColor;
    border-radius:999px;
    padding:8px 13px;
    font-size:.62rem;
    font-weight:700
}

.theme-blush{
    background:linear-gradient(150deg,#f7e4e9,#fff9f5);
    color:#74354d
}

.theme-noir{
    background:radial-gradient(circle at 50% 15%,#55464e,#201c21 62%);
    color:#f0d49d
}

.theme-lilac{
    background:linear-gradient(155deg,#efe4f6,#d9c1e8);
    color:#65437c
}

.theme-sky{
    background:linear-gradient(155deg,#eef8fb,#bfdce3);
    color:#315d67
}

.theme-olive{
    background:linear-gradient(155deg,#f2f5eb,#c9d7b9);
    color:#49613c
}

.theme-peach{
    background:linear-gradient(155deg,#fff1e6,#f1c3a8);
    color:#8a5135
}

.theme-red{
    background:linear-gradient(155deg,#fff3f1,#e9b7b0);
    color:#8c3935
}

.theme-navy{
    background:linear-gradient(155deg,#e8edf4,#aebfd3);
    color:#293f5a
}

.theme-sand{
    background:linear-gradient(155deg,#faf5e9,#e2d0ae);
    color:#70552e
}

.catalog-body{
    padding:20px
}

.catalog-topline{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px
}

.tag{
    display:inline-flex;
    border-radius:999px;
    background:#f4ecef;
    color:var(--wine);
    padding:5px 9px;
    font-size:.67rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em
}

.catalog-card h3{
    font-size:1.5rem;
    margin-top:10px
}

.catalog-desc{
    color:var(--muted);
    font-size:.86rem;
    margin:0 0 17px
}

.catalog-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px
}

.catalog-actions button,.catalog-actions a{
    border-radius:12px;
    padding:11px 10px;
    text-align:center;
    font-weight:700;
    font-size:.82rem
}

.preview-btn{
    border:1px solid var(--line);
    background:#fff;
    color:var(--wine)
}

.customize-btn{
    border:0;
    background:var(--wine);
    color:#fff
}

/* simulator */
.simulator{
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    background:#fff;
    border-radius:34px;
    padding:28px;
    gap:28px;
    box-shadow:var(--shadow)
}

.sim-form{
    padding:12px
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}

.field{
    margin-bottom:14px
}

.field label{
    display:block;
    font-weight:700;
    font-size:.82rem;
    margin-bottom:6px
}

.field input,.field select,.field textarea{
    width:100%;
    border:1px solid #ddd3d7;
    background:#fffdfb;
    border-radius:12px;
    padding:13px 14px;
    outline:none
}

.field input:focus,.field select:focus,.field textarea:focus{
    border-color:var(--wine);
    box-shadow:0 0 0 3px rgba(111,41,69,.08)
}

.preview-stage{
    min-height:680px;
    background:linear-gradient(145deg,#eee4e0,#f9f5f2);
    border-radius:26px;
    padding:24px;
    display:grid;
    place-items:center
}

.preview-phone{
    width:min(360px,100%);
    height:640px;
    background:#222;
    border:8px solid #222;
    border-radius:42px;
    padding:8px;
    box-shadow:0 28px 55px rgba(42,22,31,.22)
}

.live-invite{
    height:100%;
    border-radius:28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    padding:42px 24px;
    position:relative;
    overflow:hidden
}

.live-invite:before{
    content:"";
    position:absolute;
    inset:20px;
    border:1px solid currentColor;
    opacity:.24;
    border-radius:120px 120px 14px 14px
}

.live-content{
    position:relative;
    z-index:2
}

.live-type{
    font-size:.64rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    font-weight:700
}

.live-name{
    font-family:"Italiana",serif;
    font-size:3.45rem;
    line-height:.9;
    margin:28px 0 18px
}

.live-message{
    font-family:Georgia,serif;
    font-size:1rem
}

.live-date{
    font-size:.78rem;
    font-weight:700;
    margin-top:22px
}

.live-place{
    font-size:.72rem;
    margin-top:8px
}

.live-rsvp{
    display:inline-block;
    margin-top:25px;
    border:1px solid currentColor;
    border-radius:999px;
    padding:10px 15px;
    font-size:.68rem;
    font-weight:700
}

/* steps, prices, testimonials */
.steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    counter-reset:item
}

.step{
    background:#fff;
    border-radius:24px;
    padding:26px;
    counter-increment:item;
    border:1px solid var(--line)
}

.step:before{
    content:"0" counter(item);
    font-family:"Italiana",serif;
    font-size:2.4rem;
    color:var(--gold)
}

.step p{
    color:var(--muted);
    font-size:.88rem;
    margin-bottom:0
}

.pricing{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    align-items:stretch
}

.price-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:27px;
    padding:31px;
    position:relative
}

.price-card.featured{
    background:var(--wine-2);
    color:#fff;
    transform:scale(1.03);
    box-shadow:0 25px 55px rgba(71,23,48,.24)
}

.badge{
    position:absolute;
    top:18px;
    right:18px;
    background:var(--gold);
    color:#fff;
    border-radius:999px;
    padding:6px 10px;
    font-size:.67rem;
    font-weight:700
}

.price{
    font-family:"Italiana",serif;
    font-size:3rem;
    margin:15px 0
}

.price small{
    font-family:"DM Sans",sans-serif;
    font-size:.75rem
}

.benefits{
    list-style:none;
    padding:0;
    margin:22px 0
}

.benefits li{
    margin:10px 0;
    display:flex;
    gap:8px;
    font-size:.9rem
}

.benefits li:before{
    content:"✓";
    color:var(--gold);
    font-weight:800
}

.testimonials{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.testimonial{
    background:#fff;
    border-radius:24px;
    padding:27px;
    border:1px solid var(--line)
}

.stars{
    color:var(--gold);
    letter-spacing:.12em
}

.person{
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:18px
}

.avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#f0dfe5;
    color:var(--wine);
    font-weight:800
}

.testimonial p{
    color:#53474c
}

/* FAQ & payments */
.faq{
    max-width:860px;
    margin:auto
}

.faq-item{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    margin-bottom:11px;
    overflow:hidden
}

.faq-q{
    width:100%;
    border:0;
    background:none;
    padding:19px 21px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    text-align:left;
    font-weight:700
}

.faq-a{
    max-height:0;
    overflow:hidden;
    transition:.3s
}

.faq-a p{
    padding:0 21px 19px;
    color:var(--muted);
    margin:0
}

.faq-item.open .faq-a{
    max-height:220px
}

.faq-item.open .plus{
    transform:rotate(45deg)
}

.payments{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:34px;
    align-items:center
}

.payment-card{
    background:#fff;
    border-radius:26px;
    padding:30px;
    box-shadow:var(--shadow)
}

.payment-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:11px
}

.pay-logo{
    min-height:66px;
    border:1px solid var(--line);
    border-radius:13px;
    display:grid;
    place-items:center;
    text-align:center;
    font-weight:800;
    font-size:.83rem;
    background:#fff
}

.secure{
    margin-top:20px;
    background:#f3e8ec;
    border-radius:14px;
    padding:14px;
    color:var(--wine);
    font-size:.88rem
}

/* CTA footer */
.final-cta{
    text-align:center;
    padding:92px 0;
    background:radial-gradient(circle at 50% 0,rgba(213,161,180,.24),transparent 30%),var(--wine-2);
    color:#fff
}

.final-cta p{
    max-width:670px;
    margin:0 auto 26px;
    color:#e5d7dd
}

.footer{
    background:#211a1e;
    color:#d9ced3;
    padding:58px 0 28px
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(3,1fr);
    gap:34px
}

.footer h4{
    color:#fff;
    margin:0 0 15px
}

.footer a{
    display:block;
    margin:9px 0;
    font-size:.88rem
}

.copyright{
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:34px;
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    gap:15px;
    font-size:.78rem
}

/* modal */
.modal{
    position:fixed;
    inset:0;
    z-index:120;
    background:rgba(25,17,21,.72);
    backdrop-filter:blur(9px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px
}

.modal.open{
    display:flex
}

.modal-card{
    width:min(1000px,100%);
    max-height:94vh;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    position:relative
}

.modal-close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:3
}

.modal-demo{
    min-height:620px;
    padding:30px;
    background:#ede4e0;
    display:grid;
    place-items:center
}

.modal-phone{
    width:330px;
    height:590px;
    border:8px solid #222;
    background:#222;
    padding:7px;
    border-radius:40px
}

.modal-invite{
    height:100%;
    border-radius:27px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    padding:35px 24px;
    position:relative
}

.modal-invite:after{
    content:"";
    position:absolute;
    inset:20px;
    border:1px solid currentColor;
    opacity:.25;
    border-radius:110px 110px 12px 12px
}

.modal-info{
    padding:54px 42px;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.modal-info ul{
    padding-left:18px;
    color:var(--muted)
}

.modal-info .btn{
    margin-top:15px
}

.mobile-bottom{
    display:none
}

@media(max-width:900px){

    .float-a{
        left: 5px;
        top: 60px
    }
    .desktop-menu,.nav-actions .btn{
        display:none
    }

    .menu-toggle{
        display:grid
    }

    .desktop-menu.open{
        display:flex;
        position:absolute;
        top:76px;
        left:0;
        right:0;
        background:#fff;
        flex-direction:column;
        align-items:stretch;
        padding:18px;
        border-bottom:1px solid var(--line);
        box-shadow:0 18px 35px rgba(50,30,39,.12)
    }

    .desktop-menu.open a{
        padding:10px 6px
    }

    .hero-grid,.simulator,.payments{
        grid-template-columns:1fr
    }

    .hero-copy{
        text-align:center;
        padding:80px 0 30px
    }

    .hero-copy .lead{
        margin:auto
    }

    .hero h1{
        font-size:clamp(3.5rem,16vw,8rem);
        max-width:770px;
    }

    .proof{
        justify-content:center
    }

    .hero-visual{
        min-height:560px
    }

    .features{
        grid-template-columns:repeat(2,1fr)
    }

    .catalog-grid{
        grid-template-columns:repeat(2,1fr)
    }

    .steps{
        grid-template-columns:repeat(2,1fr)
    }

    .pricing{
        grid-template-columns:1fr;
        max-width:620px;
        margin:auto
    }

    .price-card.featured{
        transform:none
    }

    .testimonials{
        grid-template-columns:1fr
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr)
    }

    .modal-card{
        grid-template-columns:1fr;
        overflow:auto
    }

    .modal-demo{
        min-height:500px
    }

    .modal-info{
        padding:30px
    }

    .category-rail{
        grid-template-columns:repeat(3,1fr)
    }

}
@media(max-width:640px){

    .container{
        width:min(100% - 24px,1180px)
    }

    .section{
        padding:68px 0
    }

    .section-head{
        margin-bottom:30px
    }

    .header .container{
        width:calc(100% - 24px)
    }

    .nav{
        height:68px
    }

    .hero{
        padding-top:68px;
        min-height:auto
    }
    
    .hero-grid{
        gap: 15px;
    }

    .hero-copy{
        padding:56px 0 22px
    }

    .hero h1{
        font-size:clamp(3.05rem,16vw,5.8rem);
        max-width: 570px;
    }

    .hero-copy .lead{
        font-size:1rem
    }

    .hero-actions{
        display:grid;
        grid-template-columns:1fr
    }

    .hero-actions .btn{
        width:100%
    }

    .proof{
        gap:10px 14px;
        font-size:.79rem
    }

    .hero-visual{
        min-height:480px;
        transform:scale(.83);
        margin:-35px 0 -55px
    }

    .float-a{
        left:-17px
    }

    .float-b{
        right:-18px
    }

    .category-rail{
        grid-template-columns:repeat(2,1fr)
    }

    .category-pill{
        min-width:138px;
        scroll-snap-align:start
    }

    .features{
        display:flex;
        overflow:auto;
        scroll-snap-type:x mandatory;
        margin-right:-12px;
        padding:2px 12px 16px 0;
        scrollbar-width:none
    }

    .feature{
        min-width:84vw;
        scroll-snap-align:start
    }

    .catalog-toolbar{
        display:block
    }

    .catalog-count{
        display:none
    }

    .filters{
        margin-right:-12px;
        padding-right:12px
    }

    .catalog-grid{
        display:flex;
        overflow:auto;
        scroll-snap-type:x mandatory;
        margin-right:-12px;
        padding:3px 12px 20px 0;
        gap:16px;
        scrollbar-width:none
    }

    .catalog-card{
        min-width:86vw;
        scroll-snap-align:center
    }

    .site-thumb{
        height:430px
    }

    .simulator{
        padding:13px;
        border-radius:24px
    }

    .sim-form{
        padding:9px
    }

    .form-grid{
        grid-template-columns:1fr
    }

    .preview-stage{
        min-height:auto;
        padding:15px
    }

    .preview-phone{
        height:580px;
        width:100%;
        max-width:340px
    }

    .steps{
        display:flex;
        overflow:auto;
        scroll-snap-type:x mandatory;
        margin-right:-12px;
        padding:2px 12px 16px 0
    }

    .step{
        min-width:78vw;
        scroll-snap-align:start
    }

    .price-card{
        padding:27px
    }

    .testimonials{
        display:flex;
        overflow:auto;
        scroll-snap-type:x mandatory;
        margin-right:-12px;
        padding:2px 12px 16px 0
    }

    .testimonial{
        min-width:85vw;
        scroll-snap-align:center
    }

    .payment-grid{
        grid-template-columns:repeat(2,1fr)
    }

    .footer{
        padding-bottom:100px
    }

    .footer-grid{
        grid-template-columns:1fr
    }

    .copyright{
        flex-direction:column
    }

    .modal{
        padding:0;
        align-items:flex-end
    }

    .modal-card{
        max-height:96vh;
        border-radius:26px 26px 0 0
    }

    .modal-demo{
        min-height:445px;
        padding:20px
    }

    .modal-phone{
        width:270px;
        height:430px
    }

    .modal-info{
        padding:26px 22px 34px
    }

    .mobile-bottom{
        display:grid;
        grid-template-columns:1fr auto;
        gap:10px;
        position:fixed;
        z-index:90;
        left:10px;
        right:10px;
        bottom:calc(10px + var(--safe-bottom));
        background:rgba(255,255,255,.92);
        backdrop-filter:blur(14px);
        padding:8px;
        border-radius:18px;
        border:1px solid rgba(83,45,58,.12);
        box-shadow:0 14px 40px rgba(45,24,33,.22)
    }

    .mobile-bottom .btn{
        min-height:48px;
        padding:12px 16px
    }

    .mobile-bottom .icon-btn{
        width:48px;
        height:48px;
        background:#e9f7ec;
        color:#207a3c;
        border:0
    }

    .eyebrow{
        font-size:.69rem
    }
    
    h2{
        font-size:2.75rem
    }

}
@media(max-width:380px){
    
    .category-rail{
        display:flex;
        overflow:auto;
        scroll-snap-type:x mandatory;
        margin-right:-12px;
        padding:2px 12px 15px 0;
        scrollbar-width:none
    }
    
    .phone{
        width:300px;
    }
    
}
@media(prefers-reduced-motion:reduce){

    *{
        scroll-behavior:auto!important;
        transition:none!important
    }

}