:root { --brand-orange-1:#E5913B; --brand-orange-2:#E56E3B; --brand-gold:#FFC879; --bg:#0B0E12; --surface:#11161E; --surface-2:#0E131A; --text:#FFFFFF; --text-dim:#C9D1D9; --border:#202633; --shadow:0 8px 26px rgba(0,0,0,0.35); }
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; color:var(--text); font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',Arial,sans-serif; background:radial-gradient(1200px 500px at 10% -10%, rgba(229,110,59,0.20), transparent 70%), radial-gradient(1000px 500px at 90% 10%, rgba(229,145,59,0.14), transparent 70%), linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%) }
.container{ max-width:1100px; margin:0 auto; padding:0 20px }
.flex{ display:flex }
.between{ justify-content:space-between }
.center{ align-items:center; text-align:center }
.grid2{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:28px }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.section{ padding:64px 0 }
.section.alt{ background:linear-gradient(180deg, var(--surface-2), var(--surface)); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:16px; top:16px; background:var(--surface); color:var(--text); padding:8px 12px; border-radius:6px }
.header{ position:sticky; top:0; z-index:50; background:linear-gradient(90deg, var(--brand-orange-1), var(--brand-orange-2)); border-bottom:1px solid var(--border); box-shadow:0 6px 18px rgba(229,110,59,0.25) }
.header .brand img{ display:block; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35)) drop-shadow(0 0 6px rgba(0,0,0,0.12)) }
.nav{ display:flex; gap:12px }
.header .btn.ghost{ color:#0B0E12; background:rgba(255,255,255,0.92); border-color:rgba(11,14,18,0.22) }
.hero{ padding:80px 0 48px }
.hero__content h1{ margin:0 0 12px; font-size:46px; line-height:1.12; letter-spacing:-0.01em }
.hero__content .lead{ margin:0 0 22px; color:var(--text-dim); font-size:18px }
.hero__badges{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0 }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#141a22; border:1px solid var(--border); color:var(--text-dim); font-size:12px }
.hero__media img{ width:100%; height:auto; border-radius:16px; border:1px solid var(--border); background:#0a0f15; box-shadow:var(--shadow) }
.features{ padding:24px 0 64px }
.card{ background:linear-gradient(180deg,#141a22,#10161e); border:1px solid var(--border); border-radius:14px; padding:22px; text-align:left; box-shadow:var(--shadow) }
.card h2{ margin:0 0 8px; font-size:20px }
.card p{ margin:0; color:var(--text-dim) }
.cta-stack{ display:grid; gap:14px; margin-top:18px }
.accent{ color:var(--brand-gold) }
.footer{ border-top:1px solid var(--border); padding:28px 0 48px; color:var(--text-dim) }
.micro{ font-size:12px; color:var(--text-dim) }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 20px; border-radius:12px; border:1px solid var(--border); color:var(--text); text-decoration:none; transition:transform .08s ease, box-shadow .2s ease, background .2s ease }
.btn:hover{ transform:translateY(-1px) scale(1.01) }
.btn.primary:hover, .btn.gradient:hover{ box-shadow:0 14px 34px rgba(229,110,59,0.38) }
.btn:active{ transform:translateY(0) }
.btn.ghost{ background:transparent }
.btn.primary{ background:linear-gradient(90deg,var(--brand-orange-1),var(--brand-orange-2)); border:none; box-shadow:0 10px 26px rgba(229,110,59,0.35) }
.btn.gradient{ background:linear-gradient(90deg,var(--brand-orange-1),var(--brand-orange-2)); border:none; height:50px; padding:0 24px; box-shadow:0 14px 30px rgba(229,110,59,0.35) }
.faq{ padding:24px 0 64px }
.accordion{ display:grid; gap:12px }
.accordion details{ background:#121822; border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow) }
.accordion details{ transition: background .2s ease, border-color .2s ease }
.accordion summary{ cursor:pointer; list-style:none; font-weight:600 }
.accordion summary::after{ content:"▾"; float:right; transition:transform .2s ease; opacity:.9 }
.accordion details[open] > summary::after{ transform:rotate(180deg) }
.accordion summary::-webkit-details-marker{ display:none }
.accordion p{ margin:10px 0 0; color:var(--text-dim) }
/* Белый текст внутри FAQ */
.accordion details, .accordion details p, .accordion details li, .accordion details a, .accordion details summary{ color:#FFFFFF }
@media (max-width:960px){ .grid2{ grid-template-columns:1fr } .grid3{ grid-template-columns:1fr } .hero{ padding:48px 0 32px } .hero__content h1{ font-size:36px } }
@media (prefers-color-scheme:light){ :root{ --bg:#FAFAFA; --surface:#FFFFFF; --surface-2:#F5F7FA; --text:#0B0E12; --text-dim:#4B5565; --border:#E4E7EC; --shadow:0 8px 24px rgba(0,0,0,0.08) } .badge{ background:#fff } }
@media (prefers-color-scheme: light){ .header{ background:var(--brand-gold) } .btn.primary, .btn.gradient{ color:#FFFFFF } .accent{ color:var(--brand-orange-2) } .accordion details{ background:#121822; border-color:#202633 } .accordion details, .accordion details p, .accordion details li, .accordion details a, .accordion details summary{ color:#FFFFFF } .header .brand img{ filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35)) drop-shadow(0 0 6px rgba(0,0,0,0.12)) } .header .btn.ghost{ color:#0B0E12; border-color:rgba(11,14,18,0.22) } }