/* style.css — редактируемые стили для лендинга */
:root{
  --accent:#2f5be8;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#fbfbff;
  --radius:12px;
  --container:1100px;
}
*{box-sizing:border-box}
body{font-family: 'Inter', 'Segoe UI', Arial, sans-serif; margin:0; color:#0f1724; background:var(--bg);}
a{color:var(--accent);}

.site-header{display:flex; justify-content:space-between; align-items:center; padding:16px 24px; background:#fff; box-shadow: 0 2px 6px rgba(2,6,23,0.06); position:sticky; top:0; z-index:20;}
.site-header .logo img{height:44px}
.btn-cta{border:1px solid var(--accent); background:transparent; color:var(--accent); padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:600}

.container{max-width:var(--container); margin:36px auto; padding:0 16px}

/* HERO */
.hero{display:flex; gap:36px; align-items:center; padding:24px; border-radius:var(--radius); background: linear-gradient(180deg, rgba(47,91,232,0.03), rgba(47,91,232,0.01));}
.hero-left{flex:1; display:flex; justify-content:center}
.hero-left img{max-width:100%; border-radius:10px; box-shadow:0 10px 30px rgba(2,6,23,0.06)}
.hero-right{flex:1.05}
.hero-right h1{margin:0 0 8px; font-size:28px}
.lead{margin:0 0 12px; color:var(--muted)}

/* benefits */
.benefits{list-style:none; padding:0; margin:12px 0}
.benefits li{position:relative; padding-left:22px; margin:8px 0}
.benefits li:before{content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:14px; height:14px; background:var(--accent); border-radius:4px}

/* form */
.form-card{margin-top:14px; background:var(--card); padding:14px; border-radius:10px; box-shadow:0 6px 18px rgba(2,6,23,0.04)}
.form-card input, .form-card textarea{width:100%; padding:10px 12px; margin-bottom:10px; border-radius:8px; border:1px solid #e6e7ee; font-size:15px}
.form-card textarea{resize:vertical}
.submit{background:var(--accent); color:#fff; border:none; padding:12px; border-radius:10px; cursor:pointer; width:100%; font-weight:700}

/* info section */
.info{margin-top:26px}
.info h2{margin:0 0 8px}
.cards{display:flex; gap:16px; margin-top:12px}
.card{flex:1; background:#fff; padding:14px; border-radius:10px; text-align:center; box-shadow:0 8px 24px rgba(2,6,23,0.04)}
.card img{height:54px; margin-bottom:8px}

/* footer */
.site-footer{margin-top:30px; padding:20px; text-align:center; color:var(--muted); background:#f9fafb; border-radius:0 0 var(--radius) var(--radius)}

/* responsive */
@media (max-width:900px){
  .hero{flex-direction:column-reverse}
  .cards{flex-direction:column}
}