:root{
    --paper:#f4eee7;
    --paper-strong:#ece2d7;
    --surface:#fffdfa;
    --ink:#121418;
    --ink-muted:#5c616a;
    --ink-soft:#7e838c;
    --dark:#17191d;
    --dark-soft:#23262d;
    --line:rgba(18,20,24,.1);
    --line-strong:rgba(18,20,24,.16);
    --accent:#ff5b00;
    --accent-deep:#d94d00;
    --accent-soft:#ffe8dc;
    --radius-lg:18px;
    --radius-md:14px;
    --radius-sm:10px;
    --shadow-soft:0 18px 40px rgba(18,20,24,.08);
    --shadow-card:0 10px 24px rgba(18,20,24,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    margin:0;
    min-width:320px;
    font-family:Commissioner,system-ui,sans-serif;
    color:var(--ink);
    background:linear-gradient(180deg,#e7e1d78c,#f2eee700),var(--paper);
    line-height:1.45;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}

.page{
    max-width:520px;
    margin:0 auto;
    padding:0 16px 32px;
    padding-bottom:calc(32px + env(safe-area-inset-bottom));
}

/* Hero */
.hero{
    position:relative;
    margin:0 -16px 24px;
    overflow:hidden;
    color:#fffaf3;
    isolation:isolate;
}
.hero__image{
    position:absolute;
    inset:0;
    background:url('assets/hero.jpg') center/cover no-repeat;
    transform:scale(1.02);
}
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(23,25,29,.25) 0%,rgba(23,25,29,.55) 60%,rgba(23,25,29,.88) 100%);
    z-index:1;
}
.hero__overlay{
    position:relative;
    z-index:2;
    padding:32px 20px 28px;
    padding-top:calc(24px + env(safe-area-inset-top));
    min-height:360px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:14px;
}
.brand{
    position:absolute;
    top:20px;
    top:calc(16px + env(safe-area-inset-top));
    left:20px;
    z-index:3;
}
.brand img{
    height:38px;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.hero__pills{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.pill{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.02em;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.hero__title{
    font-family:Manrope,Commissioner,sans-serif;
    font-weight:800;
    font-size:1.55rem;
    line-height:1.15;
    letter-spacing:-.02em;
    margin:4px 0 0;
    text-wrap:balance;
}
.hero__lede{
    margin:0;
    font-size:.95rem;
    color:rgba(255,250,243,.88);
    max-width:32ch;
}

/* Sections */
.section{
    margin:0 0 22px;
}
.section--form{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);
    padding:22px 18px;
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:10px;
}
.section__title{
    font-family:Manrope,Commissioner,sans-serif;
    font-size:1.3rem;
    font-weight:800;
    letter-spacing:-.02em;
    margin:2px 0 6px;
}
.section__lede{
    margin:0 0 16px;
    color:var(--ink-muted);
    font-size:.95rem;
}

/* Tap buttons (taplink-style) */
.tap{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    margin-bottom:10px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.tap:active{
    transform:scale(.985);
}
.tap:hover{
    border-color:var(--line-strong);
    box-shadow:0 14px 28px rgba(18,20,24,.09);
}
.tap__icon{
    flex:0 0 44px;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--accent-soft);
    color:var(--accent);
}
.tap__icon svg{width:22px;height:22px}
.tap__icon--plain{
    background:var(--paper-strong);
    padding:8px;
}
.tap__icon--plain img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.tap__body{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.tap__label{
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
}
.tap__value{
    font-weight:700;
    font-size:1rem;
    letter-spacing:-.01em;
    color:var(--ink);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.tap__chev{
    flex:0 0 10px;
    width:10px;
    height:10px;
    border-right:2px solid var(--ink-soft);
    border-top:2px solid var(--ink-soft);
    transform:rotate(45deg);
    margin-right:4px;
}
.tap--primary{
    background:linear-gradient(180deg,#ff6a1c 0%,var(--accent) 100%);
    border-color:transparent;
    color:#fffaf3;
    box-shadow:0 14px 28px rgba(255,91,0,.28);
}
.tap--primary .tap__icon{background:rgba(255,255,255,.18);color:#fffaf3}
.tap--primary .tap__label{color:rgba(255,250,243,.85)}
.tap--primary .tap__value{color:#fffaf3}
.tap--primary .tap__chev{border-color:#fffaf3}

/* Form */
.lead-form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{
    font-size:.78rem;
    font-weight:600;
    color:var(--ink-muted);
    letter-spacing:.02em;
}
.field input,
.field textarea{
    width:100%;
    padding:13px 14px;
    border:1px solid var(--line-strong);
    border-radius:var(--radius-sm);
    background:var(--paper);
    font-size:1rem;
    outline:none;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.field input:focus,
.field textarea:focus{
    border-color:var(--accent);
    background:#fff;
    box-shadow:0 0 0 3px rgba(255,91,0,.18);
}
.field textarea{resize:vertical;min-height:80px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:.82rem;
    color:var(--ink-muted);
    line-height:1.35;
    margin-top:2px;
}
.consent input{
    margin-top:2px;
    accent-color:var(--accent);
}

.button{
    display:inline-grid;
    place-items:center;
    min-height:54px;
    padding:0 22px;
    width:100%;
    border:1px solid transparent;
    border-radius:var(--radius-md);
    background-clip:padding-box;
    text-align:center;
    font-size:1rem;
    font-weight:700;
    line-height:1;
    letter-spacing:-.01em;
    box-shadow:0 10px 24px rgba(18,20,24,.08);
    cursor:pointer;
    transition:transform .22s ease,background-color .22s ease,box-shadow .22s ease;
    margin-top:6px;
}
.button:active{transform:translateY(1px)}
.button--primary{
    color:#fffaf3;
    background:linear-gradient(180deg,#ff6a1c 0%,var(--accent) 100%);
    border-color:rgba(255,255,255,.08);
}
.button--primary:hover{
    background:linear-gradient(180deg,#ff7227 0%,var(--accent-deep) 100%);
    box-shadow:0 14px 28px rgba(255,91,0,.28);
}

/* Footer */
.foot{
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid var(--line);
    text-align:center;
    color:var(--ink-muted);
    font-size:.85rem;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.foot__site{
    color:var(--accent);
    font-weight:600;
}

/* Small tablets — немного увеличим hero */
@media (min-width:540px){
    .hero__overlay{min-height:420px}
    .hero__title{font-size:1.85rem}
    .page{padding:0 20px 40px}
    .hero{margin:0 -20px 28px}
}