*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{

--bg:#020617;
--bg2:#0f172a;
--card:#111827;

--primary:#2563eb;
--primary-hover:#1d4ed8;

--accent:#38bdf8;

--text:#ffffff;
--text-soft:#cbd5e1;

--border:rgba(255,255,255,.08);

}

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

padding-bottom:120px;

}

.container{

width:95%;
max-width:1280px;
margin:auto;

}

/* ==========================
ФОН
========================== */

.bg-glow{

position:fixed;

border-radius:50%;

filter:blur(180px);

z-index:-1;

pointer-events:none;

}

.glow1{

width:600px;
height:600px;

background:#2563eb;

left:-250px;
top:-200px;

opacity:.25;

animation:floatGlow 10s infinite ease-in-out;

}

.glow2{

width:700px;
height:700px;

background:#06b6d4;

right:-250px;
top:200px;

opacity:.15;

animation:floatGlow 14s infinite ease-in-out;

}

@keyframes floatGlow{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-50px);
}

100%{
transform:translateY(0px);
}

}

/* ==========================
HEADER
========================== */

header{

position:sticky;
top:0;

z-index:999;

backdrop-filter:blur(15px);

background:rgba(2,6,23,.85);

border-bottom:1px solid var(--border);

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

}

.logo{

font-size:24px;

font-weight:800;

color:white;

}

nav{

display:flex;

gap:30px;

}

nav a{

color:white;

text-decoration:none;

opacity:.8;

transition:.3s;

font-weight:500;

}

nav a:hover{

opacity:1;

color:var(--accent);

}

/* ==========================
HERO
========================== */

.hero{

padding:120px 0;

text-align:center;

position:relative;

}

.hero-badge{

display:inline-block;

padding:10px 20px;

border-radius:50px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.1);

margin-bottom:30px;

font-size:14px;

}

.hero h1{

font-size:72px;

font-weight:800;

line-height:1.1;

max-width:1000px;

margin:auto;

background:linear-gradient(
90deg,
#ffffff,
#60a5fa
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

max-width:900px;

margin:30px auto;

font-size:22px;

color:var(--text-soft);

line-height:1.8;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:40px;

}

/* ==========================
КНОПКИ
========================== */

.btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 35px;

border-radius:14px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.btn-primary{

background:var(--primary);

color:white;

box-shadow:
0 0 40px rgba(37,99,235,.4);

}

.btn-primary:hover{

background:var(--primary-hover);

transform:translateY(-3px);

box-shadow:
0 0 60px rgba(37,99,235,.6);

}

.btn-outline{

border:1px solid rgba(255,255,255,.15);

color:white;

background:rgba(255,255,255,.03);

}

.btn-outline:hover{

background:rgba(255,255,255,.08);

}

/* ==========================
СЧЕТЧИКИ
========================== */

.downloads-counter{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-top:80px;

}

.counter-card{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

padding:35px;

border-radius:24px;

backdrop-filter:blur(20px);

transition:.3s;

}

.counter-card:hover{

transform:translateY(-6px);

border-color:#2563eb;

}

.counter{

display:block;

font-size:52px;

font-weight:800;

margin-bottom:10px;

color:#60a5fa;

}

/* ==========================
СЕКЦИИ
========================== */

.section{

padding:120px 0;

}

.section h2{

text-align:center;

font-size:48px;

margin-bottom:60px;

}

/* ==========================
КАРТОЧКИ
========================== */

.grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:25px;

}

.card{

background:var(--card);

border-radius:24px;

padding:35px;

border:1px solid var(--border);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

border-color:#2563eb;

box-shadow:
0 15px 40px rgba(0,0,0,.25);

}

.card h3{

font-size:24px;

margin-bottom:15px;

}

.card p{

color:var(--text-soft);

line-height:1.7;

}

/* ==========================
DARK SECTION
========================== */

.dark{

background:var(--bg2);

}

/* ==========================
WORKFLOW
========================== */

.workflow{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.flow-box{

padding:25px 35px;

background:#1e293b;

border-radius:16px;

font-weight:700;

border:1px solid rgba(255,255,255,.08);

}

.arrow{

font-size:34px;

color:#60a5fa;

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{
opacity:.3;
}

50%{
opacity:1;
}

100%{
opacity:.3;
}

}

/* ==========================
ПРИМЕР
========================== */

.example{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}

.before,
.after{

background:#111827;

padding:35px;

border-radius:24px;

border:1px solid rgba(255,255,255,.08);

}

.before h3,
.after h3{

margin-bottom:20px;

font-size:24px;

}

.after{

border-color:#2563eb;

}

/* ==========================
CTA
========================== */

.cta{

padding:140px 0 200px 0;

text-align:center;

}

.cta h2{

font-size:54px;

max-width:900px;

margin:auto auto 40px;

}

.big{

font-size:24px;

padding:24px 50px;

}

/* ==========================
FOOTER
========================== */

footer{

border-top:1px solid rgba(255,255,255,.08);

padding:50px 0;

text-align:center;

color:#94a3b8;

}

/* ==========================
МОБИЛЬНАЯ ВЕРСИЯ
========================== */

@media(max-width:991px){

.hero h1{

font-size:54px;

}

.downloads-counter{

grid-template-columns:1fr;

}

.example{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

nav{
display:none;
}

.hero{

padding:80px 0;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

}

.btn{

width:100%;

}

.section{

padding:80px 0;

}

.section h2{

font-size:34px;

}

.counter{

font-size:42px;

}

.cta{

padding:100px 0 180px 0;

}

.cta h2{

font-size:32px;

}

.big{

width:100%;

font-size:20px;

}

}

@media(max-width:480px){

.hero h1{

font-size:32px;

}

.hero-badge{

font-size:12px;

}

.card{

padding:25px;

}

.counter-card{

padding:25px;

}

}