:root{
--primary:#3b82f6;
--primary-dark:#2563eb;
--secondary:#8b5cf6;
--background:#050816;
--surface:#0b1225;
--surface-light:#121d36;
--text:#ffffff;
--text-secondary:#aab7d4;
--border:rgba(255,255,255,.08);
--radius:22px;
--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",sans-serif;
background:var(--background);
color:var(--text);
overflow-x:hidden;
line-height:1.6;
}

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(59,130,246,.12),transparent 40%),
radial-gradient(circle at 80% 30%,rgba(139,92,246,.12),transparent 40%),
radial-gradient(circle at 50% 90%,rgba(37,99,235,.08),transparent 45%);
pointer-events:none;
z-index:-2;
}

.noise{
position:fixed;
inset:0;
opacity:.03;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
pointer-events:none;
z-index:-1;
}

.container{
width:min(1280px,92%);
margin:auto;
}

section{
padding:120px 0;
}

img{
display:block;
max-width:100%;
height:auto;
}

a{
text-decoration:none;
color:inherit;
transition:var(--transition);
}

ul{
list-style:none;
}

button{
font:inherit;
border:none;
cursor:pointer;
}

.btn-primary,
.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 34px;
border-radius:50px;
font-weight:700;
transition:var(--transition);
}

.btn-primary{
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff;
box-shadow:0 20px 40px rgba(37,99,235,.35);
}

.btn-primary:hover{
transform:translateY(-4px);
}

.btn-secondary{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:#fff;
}

.btn-secondary:hover{
transform:translateY(-4px);
border-color:var(--primary);
}

.section-header{
text-align:center;
max-width:850px;
margin:0 auto 70px;
}

.section-header span{
display:inline-block;
padding:8px 18px;
border-radius:30px;
background:#102040;
color:#5caeff;
font-size:13px;
font-weight:700;
letter-spacing:2px;
margin-bottom:22px;
}

.section-header h2{
font-size:52px;
margin-bottom:20px;
}

.section-header p{
font-size:20px;
line-height:1.8;
color:var(--text-secondary);
}

.fade-up{
opacity:0;
transform:translateY(40px);
transition:.8s;
}

.fade-up.show{
opacity:1;
transform:none;
}

/* =========================================================
   XELORI FINAL LAYOUT
   ========================================================= */

.navbar{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
background:rgba(6,7,13,.55);
border-bottom:1px solid rgba(255,255,255,.06);
transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease;
}

.navbar .container.navbar-inner{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;

    padding-left: 24px;
    padding-right: 30px;
}

.navbar nav{margin-left:auto;}

.nav-links{
display:flex;
align-items:center;
justify-content:flex-end;
gap:30px;
margin:0;
padding:0;
}

.nav-links a{
display:inline-flex;
align-items:center;
min-height:42px;
white-space:nowrap;
color:rgba(255,255,255,.72);
font-size:14px;
font-weight:500;
}

.nav-links a:hover,
.nav-links a.active{color:#fff;}

.nav-links .nav-login{
padding:10px 18px;
border:1px solid rgba(255,255,255,.12);
border-radius:999px;
background:rgba(255,255,255,.04);
}

.nav-toggle{
display:none;
width:44px;
height:44px;
padding:8px;
background:transparent;
border:1px solid rgba(255,255,255,.1);
border-radius:12px;
}

.nav-toggle span{
display:block;
width:20px;
height:2px;
margin:4px auto;
background:#fff;
border-radius:2px;
}

.hero{
min-height:100vh;
padding-top:78px;
}

.hero-wrapper{
min-height:calc(100vh - 78px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
align-items:center;
gap:60px;
}

.hero-left{
position:relative;
z-index:10;
max-width:720px;
}

.hero-left h1{
max-width:720px;
margin-bottom:24px;
line-height:1.02;
}

.hero-left>p{
max-width:650px;
margin-bottom:30px;
color:var(--text-secondary);
}

.hero-buttons{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:14px;
}

.hero-stats{
display:flex;
flex-wrap:wrap;
gap:42px;
margin-top:48px;
}

.hero-stats .stat{min-width:100px;}
.hero-stats .stat h2{margin-bottom:4px;}
.hero-stats .stat p{color:var(--text-secondary);font-size:13px;}

.hero-right{
min-width:0;
position:relative;
z-index:2;
}

.robot-frame{
position:relative;
width:min(100%,620px);
height:560px;
margin-left:auto;
overflow:hidden;
}

#ai-network{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:2;
}

#ai-network canvas{
display:block;
width:100%!important;
height:100%!important;
}

.robot-light{z-index:0;}
.floating-card{z-index:10;}

.product-card{
overflow:hidden;
}

.product-card .product-content{
width:100%;
}

@media(max-width:1100px){
.nav-links{gap:18px;}
.nav-links a{font-size:13px;}
.hero-wrapper{gap:35px;}
}

@media(max-width:980px){
.navbar .container.navbar-inner{min-height:70px;}
.nav-toggle{display:block;}
.navbar nav{
position:absolute;
top:70px;
left:0;
width:100%;
padding:14px 4%;
background:rgba(6,7,13,.97);
border-bottom:1px solid rgba(255,255,255,.08);
opacity:0;
visibility:hidden;
transform:translateY(-8px);
transition:.25s ease;
}
.nav-links{
flex-direction:column;
align-items:stretch;
gap:4px;
}
.nav-links a{width:100%;padding:13px 14px;}
.nav-links .nav-login{justify-content:center;}
.navbar nav.nav-open{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.hero{padding-top:70px;}
.hero-wrapper{
min-height:auto;
grid-template-columns:1fr;
gap:10px;
padding-top:40px;
padding-bottom:70px;
}
.hero-right{order:-1;}
.robot-frame{
height:460px;
margin:0 auto;
}
.hero-left{
text-align:center;
margin:0 auto;
}
.hero-left>p{
margin-left:auto;
margin-right:auto;
}
.hero-buttons,.hero-stats{justify-content:center;}
}

@media(max-width:600px){
.hero-wrapper{padding-top:20px;}
.robot-frame{height:350px;}
.floating-card{transform:scale(.8);}
.floating-card.top-left{transform-origin:left top;}
.floating-card.top-right{transform-origin:right top;}
.floating-card.bottom-left{transform-origin:left bottom;}
.floating-card.bottom-right{transform-origin:right bottom;}
.hero-stats{gap:24px;}
.section-header h2{font-size:38px;}
.section-header p{font-size:17px;}
}

@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*{transition:none!important;animation:none!important;}
}
.navbar .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 28px;
}

.logo {
    display: flex;
    align-items: center;
    width: 150px;
    height: 65px;
    background: transparent;
}

.logo img {
    display: block;
    width: 200px;
    height: 100px;
    object-fit: contain;
    background: transparent;
    filter: invert(1);
}
.navbar .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
/* =========================================================
   XELORI FOOTER
   ========================================================= */

.footer {
    position: relative;
    margin-top: 80px;
    padding: 80px 0 0;
    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 22, 0.3) 0%,
            rgba(3, 6, 16, 0.98) 100%
        );
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer .container {
    width: min(1280px, 92%);
    margin: 0 auto;
}

/* Pagrindinis 4 stulpelių išdėstymas */

.footer-grid {
    display: grid;
    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap: 70px;

    padding-bottom: 70px;
}

/* XELORI aprašymas */

.footer-grid > div:first-child {
    max-width: 360px;
}

.footer h3 {
    margin: 0 0 18px;

    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #8fbaff
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.footer-grid > div:first-child p {
    margin: 0;

    color: var(--text-secondary);

    font-size: 15px;
    line-height: 1.8;
}

/* Stulpelių pavadinimai */

.footer h4 {
    margin: 4px 0 20px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Nuorodos */

.footer ul {
    display: flex;
    flex-direction: column;
    gap: 11px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.footer li {
    margin: 0;
    padding: 0;
}

.footer a {
    color: #9eabc5;

    font-size: 14px;
    line-height: 1.5;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer a:hover {
    color: #ffffff;
}

/* Kontaktų nuorodos */

.footer-grid > div:last-child a[href^="mailto:"] {
    color: #6fa9ff;
}

.footer-grid > div:last-child a[href^="mailto:"]:hover {
    color: #9ec7ff;
}

/* Apatinė footer dalis */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 70px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-bottom p {
    margin: 0;

    color: #66738e;

    font-size: 13px;
}

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

@media (max-width: 900px) {

    .footer {
        padding-top: 60px;
    }

    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 45px 35px;

        padding-bottom: 55px;
    }

    .footer-grid > div:first-child {
        grid-column: 1 / -1;
        max-width: 600px;
    }

}

@media (max-width: 560px) {

    .footer {
        margin-top: 50px;
        padding-top: 50px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;

        padding-bottom: 45px;
    }

    .footer-grid > div:first-child {
        grid-column: auto;
    }

    .footer-bottom {
        min-height: 65px;
    }

    .footer-bottom p {
        font-size: 12px;
    }

}

/* =========================================
   AUTH NAVBAR
   ========================================= */

/* =========================================
   AUTH NAVBAR
   ========================================= */

.nav-auth {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 8px;
    white-space: nowrap;
}


/* Vartotojo paskyra */

.nav-account {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(59, 130, 246, 0.10);

    border: 1px solid rgba(59, 130, 246, 0.25);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Žmogeliuko ikona */

.nav-account::before {
    content: "👤";

    display: inline-flex;

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

    width: 22px;
    height: 22px;

    font-size: 13px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.10);
}


/* Hover */

.nav-account:hover {
    background: rgba(59, 130, 246, 0.20);

    border-color:
        rgba(59, 130, 246, 0.45);

    transform:
        translateY(-1px);
}


/* Atsijungti */

.nav-logout {
    display: inline-flex;

    align-items: center;

    color:
        var(--text-secondary);

    font-size:
        14px;

    text-decoration:
        none;

    padding:
        8px 4px;

    transition:
        color 0.25s ease;
}


.nav-logout:hover {
    color:
        #ffffff;
}


/* Prisijungimo mygtukas */

.nav-login {
    white-space:
        nowrap;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 800px) {

    .nav-auth {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            8px;

        margin-left:
            0;

    }

}