/* Marketing site */
:root { --brand: #e23744; --brand-dark: #c81f2d; --brand-soft: #fdecee; --saffron: #f2a53a; --paper: #fbf8f3; --ink: #18181c; --ink2: #3b3b45; --muted: #6a6a76; --line: #e7e0d4; --leaf: #1f8a4c; --radius: 14px; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.nav-s { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.nav-s .logo { display: flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--ink); text-decoration: none; font-size: 1.1rem; }
.nav-s .logo span { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; }
.nav-s a.l { color: var(--ink2); text-decoration: none; font-weight: 500; font-size: .95rem; }
.btn-b { background: var(--brand); color: #fff; border: 0; border-radius: 10px; padding: .7rem 1.2rem; font-weight: 700; text-decoration: none; display: inline-block; min-height: 44px; }
.btn-b:hover { background: var(--brand-dark); color: #fff; }
.btn-o { border: 1.5px solid var(--ink); color: var(--ink); border-radius: 10px; padding: .65rem 1.15rem; font-weight: 700; text-decoration: none; display: inline-block; min-height: 44px; background: #fff; }
.hero { padding: 4rem 0 3rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero p.lead { color: var(--ink2); font-size: 1.15rem; max-width: 560px; }
.badge-s { display: inline-block; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; font-weight: 600; color: var(--ink2); }
.mock { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px rgba(24,24,28,.12); padding: 1rem; }
.mock .bar { display: flex; gap: .4rem; margin-bottom: .8rem; } .mock .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.mock .room { display: flex; gap: .8rem; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; margin-bottom: .6rem; align-items: center; }
.mock .img { width: 72px; height: 54px; border-radius: 8px; background: linear-gradient(135deg, #0f766e, #14b8a6); flex: 0 0 72px; }
.mock .img.b { background: linear-gradient(135deg, #b45309, var(--saffron)); } .mock .img.c { background: linear-gradient(135deg, #4338ca, #818cf8); }
.mock .pr { margin-left: auto; font-weight: 800; }
.sec { padding: 4rem 0; } .sec h2 { font-weight: 800; font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: -.01em; }
.feat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; height: 100%; }
.feat i { font-size: 1.5rem; color: var(--brand); background: var(--brand-soft); width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: .8rem; }
.feat h3 { font-size: 1.05rem; font-weight: 700; } .feat p { color: var(--muted); font-size: .92rem; margin: 0; }
.steps { counter-reset: s; } .step { position: relative; padding-left: 3.2rem; margin-bottom: 1.4rem; }
.step::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; height: 100%; }
.price-card.hl { border: 2px solid var(--brand); box-shadow: 0 16px 40px rgba(226,55,68,.12); }
.price-card .amt { font-size: 2.2rem; font-weight: 800; }
.price-card ul { list-style: none; padding: 0; } .price-card li { padding: .3rem 0; } .price-card li::before { content: '✓'; color: var(--leaf); font-weight: 800; margin-right: .5rem; }
.cmp td, .cmp th { padding: .7rem; } .cmp th { font-size: .85rem; color: var(--muted); }
.cta { background: var(--ink); color: #fff; border-radius: 20px; padding: 3rem 2rem; }
.cta .form-control { min-height: 46px; border-radius: 10px; }
footer.s { color: var(--muted); font-size: .88rem; padding: 2rem 0 3rem; }
@media (max-width: 767px) { .nav-s a.l { display: none; } .hero { padding-top: 2rem; } }