/* =======================================================
   AVD POSEIDON
   Modern Corporate Landing
======================================================= */

:root{

--bg:#06111f;
--bg2:#091b31;
--card:rgba(18,38,65,.75);

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

--primary:#2b8cff;

--primary2:#5ab2ff;

--text:#ffffff;

--text2:#b6c6d8;

--radius:18px;

--shadow:0 20px 60px rgba(0,0,0,.35);

--transition:.35s;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:
Inter,
Segoe UI,
Arial,
sans-serif;

background:
linear-gradient(180deg,#071320,#0b1830);

color:var(--text);

overflow-x:hidden;

}

a{

text-decoration:none;

color:inherit;

}

.container{

width:min(1200px,92%);

margin:auto;

}

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

header{

position:fixed;

left:0;

top:0;

width:100%;

z-index:1000;

backdrop-filter:blur(18px);

background:rgba(6,17,31,.55);

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

}

nav{

height:82px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo-icon{

width:48px;

height:48px;

border-radius:14px;

background:

linear-gradient(135deg,

var(--primary),

#72c8ff);

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

font-weight:bold;

color:white;

box-shadow:0 0 30px rgba(43,140,255,.4);

}

.logo-text{

display:flex;

flex-direction:column;

}

.logo-text span{

font-size:12px;

letter-spacing:3px;

color:#9fb8d7;

}

.logo-text b{

font-size:22px;

letter-spacing:2px;

}

nav ul{

display:flex;

gap:38px;

list-style:none;

}

nav li{

transition:var(--transition);

}

nav li:hover{

color:var(--primary2);

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:90px;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

right:-250px;

top:-250px;

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(43,140,255,.28),

transparent 70%);

filter:blur(20px);

}

.hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:70px;

align-items:center;

}

.badge{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

background:rgba(43,140,255,.12);

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

color:#9ecbff;

font-size:14px;

margin-bottom:28px;

}

.hero h1{

font-size:68px;

line-height:1.08;

margin-bottom:28px;

font-weight:800;

}

.hero p{

font-size:20px;

line-height:1.8;

max-width:640px;

color:var(--text2);

margin-bottom:40px;

}

/* =======================================
BUTTONS
======================================= */

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn-primary{

background:

linear-gradient(135deg,

var(--primary),

var(--primary2));

padding:16px 34px;

border-radius:14px;

font-weight:700;

transition:var(--transition);

box-shadow:

0 15px 40px

rgba(43,140,255,.35);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:

0 25px 60px

rgba(43,140,255,.45);

}

.btn-secondary{

padding:16px 34px;

border-radius:14px;

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

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

transition:var(--transition);

}

.btn-secondary:hover{

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

}

/* =======================================
GLASS CARD
======================================= */

.hero-card{

display:flex;

justify-content:center;

}

.glass{

width:420px;

padding:36px;

border-radius:26px;

background:var(--card);

backdrop-filter:blur(24px);

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

box-shadow:var(--shadow);

}

.glass h3{

font-size:28px;

margin-bottom:24px;

}

.status{

display:flex;

align-items:center;

gap:12px;

font-size:18px;

margin-bottom:28px;

}

.green{

width:14px;

height:14px;

border-radius:50%;

background:#39d353;

box-shadow:

0 0 20px #39d353;

}

.glass hr{

border:none;

height:1px;

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

margin:25px 0;

}

.spec{

display:flex;

justify-content:space-between;

padding:16px 0;

font-size:18px;

}

.spec span{

color:var(--text2);

}

/* =======================================================
   SECTIONS
======================================================= */

section{
    padding:110px 0;
    position:relative;
}

section h2{
    text-align:center;
    font-size:46px;
    margin-bottom:25px;
    font-weight:800;
}

.section-text{
    max-width:900px;
    margin:auto;
    text-align:center;
    color:var(--text2);
    line-height:1.9;
    font-size:19px;
}

/* =======================================================
   SERVICES
======================================================= */

.cards{

    display:grid;

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

    gap:28px;

    margin-top:70px;

}

.card{

    position:relative;

    padding:35px;

    border-radius:22px;

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

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

    backdrop-filter:blur(12px);

    transition:.35s;

    overflow:hidden;

}

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(140deg,

    rgba(43,140,255,.18),

    transparent);

    opacity:0;

    transition:.35s;

}

.card:hover{

    transform:translateY(-12px);

    border-color:rgba(43,140,255,.4);

    box-shadow:

    0 25px 60px rgba(0,0,0,.35);

}

.card:hover::before{

    opacity:1;

}

.icon{

width:70px;
height:70px;

display:flex;
align-items:center;
justify-content:center;

border-radius:18px;

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

margin-bottom:25px;

transition:.35s;

}

.icon svg{

width:34px;
height:34px;

stroke:#5ab2ff;
stroke-width:1.7;

fill:none;

transition:.35s;

}

.card:hover .icon{

background:#2b8cff;

transform:translateY(-5px);

}

.card:hover svg{

stroke:white;

}

.card h3{

    margin-bottom:18px;

    font-size:25px;

}

.card p{

    color:var(--text2);

    line-height:1.8;

}

/* =======================================================
   STATS
======================================================= */

.stats{

    background:

    linear-gradient(180deg,

    rgba(255,255,255,.02),

    rgba(255,255,255,.01));

}

.stats .container{

    display:grid;

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

    gap:30px;

}

.stat{

    text-align:center;

}

.stat h2{

    color:var(--primary2);

    font-size:60px;

    margin-bottom:12px;

}

.stat span{

    color:var(--text2);

    letter-spacing:1px;

}

/* =======================================================
   TECHNOLOGY
======================================================= */

.tech-grid{

    display:grid;

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

    gap:25px;

    margin-top:60px;

}

.tech-grid div{

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

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

    padding:28px;

    border-radius:18px;

    text-align:center;

    font-size:18px;

    transition:.3s;

}

.tech-grid div:hover{

    background:rgba(43,140,255,.12);

    transform:scale(1.04);

}

/* =======================================================
   CONTACT
======================================================= */

.contact-box{

    max-width:650px;

    margin:auto;

    text-align:center;

    padding:60px;

    border-radius:30px;

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

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

    backdrop-filter:blur(18px);

}

.contact-box h3{

    font-size:34px;

    margin-bottom:25px;

}

.contact-box p{

    color:var(--text2);

    margin-bottom:12px;

    font-size:18px;

}

.contact-box .btn-primary{

    display:inline-block;

    margin-top:35px;

}

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

footer{

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

    padding:40px 0;

}

.footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#8fa7c5;

    font-size:15px;

}

/* =======================================================
   SCROLLBAR
======================================================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#07111e;

}

::-webkit-scrollbar-thumb{

    background:#2b8cff;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#5ab2ff;

}

/* =======================================================
   ANIMATIONS
======================================================= */

.fade{

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}

.fade.show{

    opacity:1;

    transform:none;

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

.hero-card{

    animation:float 6s ease-in-out infinite;

}

/* =======================================================
   RESPONSIVE
======================================================= */

@media(max-width:1100px){

.cards{

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

}

.tech-grid{

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

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.glass{

margin-top:40px;

}

}

@media(max-width:768px){

nav ul{

display:none;

}

.hero h1{

font-size:48px;

}

section h2{

font-size:34px;

}

.cards{

grid-template-columns:1fr;

}

.stats .container{

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

}

.tech-grid{

grid-template-columns:1fr;

}

.footer{

flex-direction:column;

gap:15px;

text-align:center;

}

.contact-box{

padding:35px;

}

}

@media(max-width:480px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:18px;

}

.stats .container{

grid-template-columns:1fr;

}

.logo-text b{

font-size:18px;

}

.logo-icon{

width:42px;

height:42px;

}

}

/* =======================================
BACKGROUND PARTICLES
======================================= */

#particles{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

overflow:hidden;

z-index:-2;

}

#bgCanvas{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:
radial-gradient(circle at top,#0c2345,#07111d);

}

/* красивое свечение сверху */

body::before{

content:"";

position:fixed;

left:-20%;

top:-30%;

width:700px;

height:700px;

border-radius:50%;

background:
radial-gradient(circle,
rgba(43,140,255,.25),
transparent 70%);

filter:blur(60px);

pointer-events:none;

z-index:-1;

}

/* небольшое свечение справа */

body::after{

content:"";

position:fixed;

right:-250px;

bottom:-250px;

width:700px;

height:700px;

border-radius:50%;

background:
radial-gradient(circle,
rgba(0,140,255,.18),
transparent 70%);

filter:blur(80px);

pointer-events:none;

z-index:-1;

}

/*==========================
FEATURES
==========================*/

.features{

padding:110px 0;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:42px;

margin-bottom:20px;

font-weight:700;

}

.section-title p{

font-size:18px;

color:#9fb6d8;

max-width:700px;

margin:auto;

line-height:1.8;

}

.cards{

display:grid;

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

gap:30px;

}

.card{

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

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

padding:40px;

border-radius:22px;

transition:.35s;

backdrop-filter:blur(12px);

position:relative;

overflow:hidden;

}

.card:hover{

transform:translateY(-10px);

border-color:#2b8cff;

box-shadow:

0 25px 60px rgba(0,90,255,.18);

}

.icon{

font-size:42px;

margin-bottom:25px;

}

.card h3{

margin-bottom:18px;

font-size:23px;

}

.card p{

color:#aac0de;

line-height:1.8;

}

/*==========================
STATISTICS
==========================*/

.stats{

padding:90px 0;

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

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

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

}

.stats .container{

display:grid;

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

gap:40px;

text-align:center;

}

.stat{

padding:30px;

}

.stat span{

font-size:58px;

font-weight:700;

color:#5ab2ff;

}

.stat small{

font-size:22px;

margin-left:6px;

color:#5ab2ff;

}

.stat p{

margin-top:18px;

font-size:18px;

color:#b6c8df;

letter-spacing:.5px;

}