body{margin:0;background:#07111f;color:#fff;font-family:Arial}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 6%;background:#081424;position:sticky;top:0}
nav a{color:#fff;text-decoration:none;margin-left:16px}.brand{display:flex;align-items:center;font-weight:bold}
.brand img{width:54px;height:54px;border-radius:50%;margin-right:12px}
.hero{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:center;padding:80px 6%}
.hero-logo{width:280px;border-radius:50%;box-shadow:0 0 40px #3b82f6}
.btn{
display:inline-block;
padding:10px 22px;
background:#377dff;
border-radius:12px;
color:#fff;
text-decoration:none;
font-size:16px;
font-weight:600;
min-width:130px;
transition:.25s;
}

.btn:hover{

background:#4d8dff;

transform:translateY(-2px);

}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:22px;
padding:0 6% 60px
}
.card,.device,details{background:#102036;border:1px solid #234;padding:22px;border-radius:18px}
.featured{outline:2px solid #4f7cff}.price{font-size:34px;color:#59b2ff;font-weight:bold}
.device{text-decoration:none;color:#fff;text-align:center}
.device span{color:#7ec8ff}section h2{text-align:center;padding:30px 0}footer{text-align:center;padding:40px;color:#9ab}@media(max-width:800px){.hero{grid-template-columns:1fr;text-align:center}
.hero-logo{margin:auto}nav a{display:none}.btn{display:inline-block}}
body{
background:
radial-gradient(circle at 20% 15%, rgba(52,152,255,.30), transparent 30%),
radial-gradient(circle at 80% 75%, rgba(0,255,220,.18), transparent 30%),
linear-gradient(135deg,#050b18,#08172b,#06111f);
background-attachment:fixed;
}
.hero{position:relative}
.hero:after{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at center,rgba(80,160,255,.08),transparent 60%);
pointer-events:none;
}
.device{
background:#102036;
border:1px solid rgba(102,217,255,.12);
border-radius:20px;
padding:34px 24px;
text-align:center;
transition:.25s;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:18px;
}

.device:hover{
transform:translateY(-6px);
border-color:#3b82f6;
box-shadow:0 18px 45px rgba(0,0,0,.35);
}
.device span{
display:block;
font-size:18px;
margin-top:10px;
}
.guide{
max-width:900px;
margin:0 auto 60px;
display:grid;
gap:14px;
}
.guide div{
background:#102036;
border:1px solid #234;
padding:18px;
border-radius:14px;
font-size:18px;
}

.device svg{
width:56px;
height:56px;
display:block;
margin:0 auto;
}
.device b{
display:block;
font-size:20px;
font-weight:700;
margin-top:6px;
margin-bottom:10px;
}
.guide a,.guide a:visited{color:#66d9ff;text-decoration:none;font-weight:700}

header{
box-shadow:0 10px 30px rgba(0,0,0,.35);
border-bottom:1px solid rgba(102,217,255,.18);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
nav{
display:flex;
align-items:center;
gap:8px;
}
nav a{
padding:10px 16px;
border-radius:12px;
transition:.25s;
font-weight:600;
}
nav a:not(.btn):hover{
background:rgba(102,217,255,.12);
color:#66d9ff;
}
.brand{
gap:14px;
}
.brand span{
font-size:24px;
letter-spacing:.08em;
}
html{

    scroll-behavior:smooth;

}
.faq-wrap{max-width:900px;margin:0 auto 60px;display:grid;gap:16px}
.faq-wrap details{background:#102036;border:1px solid rgba(102,217,255,.18);border-radius:16px;padding:0;overflow:hidden}
.faq-wrap summary{cursor:pointer;list-style:none;padding:20px 24px;font-size:20px;font-weight:700}
.faq-wrap summary::-webkit-details-marker{display:none}
.faq-wrap p{padding:0 24px 22px 24px;font-size:17px;line-height:1.7;color:#d9e8ff}
.faq-wrap a{color:#66d9ff;text-decoration:none;font-weight:700}
.secondary{
background:transparent;
border:1px solid #3b82f6;
}

.secondary:hover{
background:rgba(59,130,246,.12);
}

/* ===== Devices V1 ===== */
.devices-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:18px;
padding:0 6% 60px;
}
.device-card{
background:#102036;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:18px;
display:flex;
flex-direction:column;
align-items:center;
transition:.25s;
}
.device-card:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(0,0,0,.35);
border-color:#3b82f6;
}
.device-card svg{width:58px;height:58px;margin:4px 0 18px}
.device-title{font-size:20px;font-weight:700;margin-bottom:18px}
.device-btn,.device-btn-outline{
display:block;
width:120px;
text-align:center;
padding:8px 0;
border-radius:999px;
text-decoration:none;
font-weight:600;
font-size:14px;
margin:4px 0;
transition:.2s;
}
.device-btn{background:#3d73f1;color:#fff;}
.device-btn:hover{background:#5385fa}
.device-btn-outline{
border:1px solid #4b8dff;
color:#fff;
background:transparent;
}
.device-btn-outline:hover{background:rgba(75,141,255,.12);}

/* ===== SEO блок ===== */

.seo-section {
    padding: 90px 20px;
    background: linear-gradient(180deg, #071425 0%, #0b1f35 100%);
}

.seo-container {
    max-width: 1200px;
    margin: 0 auto;
}

.seo-title {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 60px;
}

.seo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
}

.seo-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 35px;
    transition: .3s;
}

.seo-card:hover {
    transform: translateY(-6px);
    border-color: #35b8ff;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.seo-card h3 {
    color: #35b8ff;
    font-size: 28px;
    margin-bottom: 18px;
}

.seo-card p {
    color: #d8e5f1;
    font-size: 18px;
    line-height: 1.9;
    text-align: justify;
}

@media (max-width: 900px) {

    .seo-grid {
        grid-template-columns: 1fr;
    }

    .seo-title {
        font-size: 34px;
    }

    .seo-card {
        padding: 28px;
    }

    .seo-card h3 {
        font-size: 24px;
    }

    .seo-card p {
        font-size: 17px;
        line-height: 1.8;
    }

}

/* ===== Преимущества ===== */

.advantages{

    padding:90px 20px;

    background:linear-gradient(135deg,#081425,#0b2742);

}

.advantages .container{

    max-width:1200px;

    margin:auto;

}

.advantages h2{

    text-align:center;

    color:#fff;

    font-size:42px;

    margin-bottom:60px;

}

.advantages-grid{

    display:grid;

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

    gap:30px;

}

.advantage-card{

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

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

    border-radius:18px;

    padding:35px;

    text-align:center;

    transition:.3s;

}

.advantage-card:hover{

    transform:translateY(-8px);

    border-color:#36b8ff;

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

}

.advantage-icon{

    width:75px;

    height:75px;

    margin:0 auto 20px;

    border-radius:50%;

    background:linear-gradient(135deg,#35b8ff,#00d4ff);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    box-shadow:0 0 25px rgba(53,184,255,.4);

}

.advantage-card h3{

    color:#fff;

    font-size:24px;

    margin-bottom:15px;

}

.advantage-card p{

    color:#cfd9e5;

    font-size:17px;

    line-height:1.7;

}

@media(max-width:768px){

    .advantages h2{

        font-size:32px;

    }

    .advantage-card{

        padding:28px;

    }

}

/* Заголовок секции */

.section-header{

    max-width:900px;

    margin:0 auto 60px;

    text-align:center;

}

.section-header h2{

    margin-bottom:20px;

}

.section-description{

    font-size:18px;

    line-height:1.8;

    color:#d4dde8;

}


/* SEO текст после карточек */

.pricing-seo{

    max-width:900px;

    margin:70px auto 0;

    text-align:left;

}

.pricing-seo h3{

    text-align:center;

    font-size:32px;

    margin-bottom:25px;

    color:#fff;

}

.pricing-seo p{

    font-size:18px;

    line-height:1.9;

    color:#d4dde8;

    text-align:justify;

}


/* Мобильные устройства */

@media (max-width:768px){

    .section-header{

        margin-bottom:40px;

    }

    .section-description,

    .pricing-seo p{

        font-size:16px;

        line-height:1.8;

        text-align:left;

    }

    .pricing-seo h3{

        font-size:26px;

    }

}