*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --bg: #09090b;
    --bg-raised: #111113;
    --bg-card: #18181b;
    --border: #27272a;
    --border-light: #3f3f46;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-tertiary: #71717a;
    --accent: #7c3aed;
    --accent-light: #a78bfa;
    --accent-dim: rgba(124, 58, 237, 0.12);
    --green: #10b981;
    --blue: #3b82f6;
    --radius: 12px;
    --radius-lg: 20px;
}
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: var(--bg); color: var(--text-primary);
    line-height: 1.6; overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── Animations ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes subtle-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
@keyframes gradient-x { 0% { background-position:0% 50% } 50% { background-position:100% 50% } 100% { background-position:0% 50% } }
@keyframes beam { 0% { opacity:0;left:-20% } 50% { opacity:1 } 100% { opacity:0;left:120% } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1); }
.reveal.vis { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay:.08s } .reveal.d2 { transition-delay:.16s } .reveal.d3 { transition-delay:.24s }
.reveal.d4 { transition-delay:.32s } .reveal.d5 { transition-delay:.4s }

/* ── Icons ── */
.icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.icon-lg svg { width:24px; height:24px; }
.icon-xl svg { width:32px; height:32px; }

/* ── Buttons ── */
.btn {
    display:inline-flex; align-items:center; gap:8px; padding:12px 24px;
    border-radius:10px; font:inherit; font-size:.875rem; font-weight:600;
    text-decoration:none; cursor:pointer; border:none;
    transition: all .2s ease;
}
.btn-primary {
    background:var(--accent); color:#fff;
    box-shadow: 0 0 0 1px rgba(124,58,237,.5), 0 1px 2px rgba(0,0,0,.3);
}
.btn-primary:hover { background:#6d28d9; box-shadow: 0 0 0 1px rgba(124,58,237,.7), 0 4px 16px rgba(124,58,237,.25); transform:translateY(-1px); }
.btn-secondary {
    background:transparent; color:var(--text-primary);
    box-shadow: 0 0 0 1px var(--border);
}
.btn-secondary:hover { box-shadow: 0 0 0 1px var(--border-light); background:var(--bg-raised); }
.btn-lg { padding:14px 32px; font-size:.95rem; border-radius:12px; }

/* ── Nav ── */
nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(9,9,11,.75); backdrop-filter:blur(16px) saturate(1.5);
    border-bottom:1px solid var(--border);
}
nav .container { display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { font-size:1.1rem; font-weight:700; color:var(--text-primary); text-decoration:none; display:flex; align-items:center; gap:10px; letter-spacing:-.3px; }
.logo-mark { width:28px; height:28px; border-radius:8px; background:var(--accent); display:flex; align-items:center; justify-content:center; }
.logo-mark svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-links a { color:var(--text-secondary); text-decoration:none; font-size:.875rem; font-weight:500; padding:8px 14px; border-radius:8px; transition:all .15s; }
.nav-links a:hover { color:var(--text-primary); background:rgba(255,255,255,.04); }
.nav-cta { margin-left:8px; }
.nav-cta .btn { color:#fff; }

/* ── Hero ── */
.hero { padding:160px 0 120px; text-align:center; position:relative; overflow:hidden; }
.hero-glow {
    position:absolute; top:-300px; left:50%; transform:translateX(-50%);
    width:800px; height:600px;
    background:radial-gradient(ellipse, rgba(124,58,237,.08) 0%, transparent 70%);
    pointer-events:none;
}
.hero-grid-bg {
    position:absolute; inset:0; pointer-events:none;
    background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 20%, transparent 100%);
}
.hero-tag {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 16px 6px 8px; border-radius:100px;
    border:1px solid var(--border); background:var(--bg-raised);
    font-size:.8rem; color:var(--text-secondary); margin-bottom:32px;
}
.hero-tag-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px rgba(16,185,129,.5); margin:0 4px; }
.hero h1 {
    font-size:clamp(2.75rem,5.5vw,4.25rem); font-weight:800;
    letter-spacing:-.04em; line-height:1.08; margin-bottom:20px;
    color:var(--text-primary);
}
.hero h1 em {
    font-style:normal;
    background:linear-gradient(135deg, var(--accent-light) 0%, #c084fc 40%, #7c3aed 100%);
    background-size:200% auto; animation: gradient-x 6s ease infinite;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-desc { font-size:1.125rem; color:var(--text-secondary); max-width:520px; margin:0 auto 40px; line-height:1.7; }
.hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:56px; }
.hero-proof { display:flex; gap:36px; justify-content:center; flex-wrap:wrap; }
.hero-proof-item { display:flex; align-items:center; gap:8px; color:var(--text-tertiary); font-size:.8rem; font-weight:500; }
.hero-proof-item .icon { color:var(--text-tertiary); }

/* ── Logos ── */
.logos { padding:56px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.logos-label { text-align:center; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--text-tertiary); margin-bottom:28px; }
.logos-row { display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; opacity:.35; }
.logos-row span { font-size:1.2rem; font-weight:700; letter-spacing:-.02em; color:var(--text-primary); white-space:nowrap; }

/* ── Section ── */
.section { padding:120px 0; }
.section-header { text-align:center; margin-bottom:64px; }
.section-label { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-light); margin-bottom:16px; }
.section-title { font-size:clamp(1.875rem,3.5vw,2.75rem); font-weight:800; letter-spacing:-.03em; line-height:1.15; margin-bottom:16px; }
.section-desc { font-size:1.05rem; color:var(--text-secondary); max-width:520px; margin:0 auto; line-height:1.7; }
.section-alt { background:var(--bg-raised); }

/* ── Products ── */
.products { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.product { background:var(--bg); padding:40px 32px; transition:background .2s; }
.product:hover { background:var(--bg-card); }
.product-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.product-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--accent-dim); color:var(--accent-light); }
.product-icon svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.product-badge { font-size:.7rem; font-weight:600; color:var(--accent-light); background:var(--accent-dim); padding:4px 10px; border-radius:6px; }
.product h3 { font-size:1.15rem; font-weight:700; margin-bottom:6px; letter-spacing:-.02em; }
.product-desc { color:var(--text-secondary); font-size:.875rem; margin-bottom:20px; line-height:1.6; }
.product-price { font-size:1.75rem; font-weight:800; letter-spacing:-.03em; margin-bottom:24px; }
.product-price small { font-size:.45em; font-weight:500; color:var(--text-tertiary); }
.product-list { list-style:none; }
.product-list li { padding:7px 0; font-size:.85rem; color:var(--text-secondary); display:flex; align-items:center; gap:10px; }
.product-list li .check { color:var(--green); flex-shrink:0; }
.product-list li .check svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.product-cta { margin-top:28px; }
.product-cta .btn { width:100%; justify-content:center; }

/* ── Use Cases grid ── */
.cases-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.case-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:28px 20px; text-align:center;
    transition:all .25s ease; cursor:default;
}
.case-card:hover { border-color:var(--border-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.case-icon { width:40px; height:40px; border-radius:10px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.04); color:var(--text-secondary); }
.case-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.case-card:hover .case-icon { background:var(--accent-dim); color:var(--accent-light); }
.case-name { font-size:.8rem; font-weight:600; color:var(--text-secondary); }
.case-card:hover .case-name { color:var(--text-primary); }

/* ── Features bento ── */
.bento { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.bento-item { background:var(--bg); padding:40px 32px; transition:background .2s; }
.bento-item:hover { background:var(--bg-card); }
.bento-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; background:rgba(255,255,255,.04); color:var(--text-secondary); }
.bento-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.bento-item h3 { font-size:1rem; font-weight:700; margin-bottom:8px; letter-spacing:-.01em; }
.bento-item p { color:var(--text-secondary); font-size:.875rem; line-height:1.65; }

/* ── Geo ── */
.geo-tags { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:700px; margin:0 auto; }
.geo-tag {
    display:flex; align-items:center; gap:6px;
    padding:8px 16px; border-radius:100px;
    border:1px solid var(--border); background:var(--bg-card);
    font-size:.8rem; font-weight:500; color:var(--text-secondary);
    transition:all .2s;
}
.geo-tag:hover { border-color:var(--border-light); color:var(--text-primary); background:rgba(255,255,255,.03); }
.geo-flag { font-style:normal; }
.geo-stat { text-align:center; margin-bottom:48px; }
.geo-stat-num { font-size:4rem; font-weight:800; letter-spacing:-.05em; background:linear-gradient(180deg,var(--text-primary),var(--text-tertiary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.geo-stat-label { color:var(--text-tertiary); font-size:.9rem; }

/* ── Pricing ── */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.pricing-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:40px 32px;
    transition:all .3s; position:relative;
}
.pricing-card:hover { border-color:var(--border-light); }
.pricing-card.featured { border-color:var(--accent); }
.pricing-card.featured::before { content:'Популярный'; position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:.7rem; font-weight:700; padding:3px 14px; border-radius:100px; white-space:nowrap; }
.pricing-name { font-size:.85rem; font-weight:600; color:var(--text-secondary); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em; }
.pricing-price { font-size:2.5rem; font-weight:800; letter-spacing:-.04em; margin-bottom:4px; }
.pricing-price small { font-size:.35em; font-weight:500; color:var(--text-tertiary); }
.pricing-desc { font-size:.85rem; color:var(--text-tertiary); margin-bottom:28px; }
.pricing-divider { border:none; border-top:1px solid var(--border); margin:0 0 24px; }
.pricing-features { list-style:none; margin-bottom:32px; }
.pricing-features li { padding:6px 0; font-size:.85rem; color:var(--text-secondary); display:flex; align-items:center; gap:10px; }
.pricing-features li .check { color:var(--green); flex-shrink:0; }
.pricing-features li .check svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

/* ── Testimonials ── */
.testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.testimonial { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; }
.testimonial-text { color:var(--text-secondary); font-size:.9rem; line-height:1.75; margin-bottom:24px; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:36px; height:36px; border-radius:50%; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:var(--text-tertiary); }
.testimonial-meta .name { font-size:.85rem; font-weight:600; }
.testimonial-meta .role { font-size:.75rem; color:var(--text-tertiary); }
.stars { color:var(--accent-light); font-size:.75rem; margin-bottom:16px; letter-spacing:2px; }

/* ── FAQ ── */
.faq-list { max-width:680px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q { padding:20px 0; font-size:.95rem; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; color:var(--text-primary); transition:color .15s; user-select:none; }
.faq-q:hover { color:var(--accent-light); }
.faq-arrow { width:20px; height:20px; transition:transform .25s; color:var(--text-tertiary); flex-shrink:0; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1); }
.faq-a-inner { padding:0 0 20px; color:var(--text-secondary); font-size:.875rem; line-height:1.75; }
.faq-item.open .faq-a { max-height:200px; }

/* ── CTA ── */
.cta { padding:120px 0; text-align:center; position:relative; overflow:hidden; }
.cta-glow { position:absolute; bottom:-200px; left:50%; transform:translateX(-50%); width:600px; height:400px; background:radial-gradient(ellipse,rgba(124,58,237,.06),transparent 70%); pointer-events:none; }
.cta h2 { font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.03em; margin-bottom:16px; }
.cta p { color:var(--text-secondary); font-size:1.05rem; margin-bottom:40px; }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── Footer ── */
footer { padding:64px 0 32px; border-top:1px solid var(--border); }
.footer-top { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:48px; margin-bottom:48px; }
.footer-brand p { color:var(--text-tertiary); font-size:.8rem; line-height:1.7; margin-top:12px; max-width:280px; }
.footer-col h4 { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-tertiary); margin-bottom:16px; }
.footer-col a { display:block; color:var(--text-secondary); text-decoration:none; font-size:.85rem; padding:4px 0; transition:color .15s; }
.footer-col a:hover { color:var(--text-primary); }
.footer-bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; font-size:.75rem; color:var(--text-tertiary); }
.footer-bottom a { color:var(--text-tertiary); text-decoration:none; }
.footer-bottom a:hover { color:var(--text-secondary); }

/* ── Responsive ── */
@media(max-width:900px) {
    .products, .bento { grid-template-columns:1fr; }
    .cases-grid { grid-template-columns:repeat(3,1fr); }
    .pricing-grid, .testimonials { grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; }
    .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
    .logos-row { gap:32px; }
}
@media(max-width:640px) {
    .nav-links a:not(.nav-cta .btn) { display:none; }
    .cases-grid { grid-template-columns:repeat(2,1fr); }
    .hero { padding:120px 0 80px; }
    .section { padding:80px 0; }
    .footer-top { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; gap:8px; }
}