:root{

--bg:#05070D;
--card:#0F172A;
--green:#22C55E;
--white:#ffffff;
--text:#94A3B8;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{
    font-family: Inter, sans-serif;
    background:
        radial-gradient(circle at top right, rgba(34,197,94,.12), transparent 35%),
        radial-gradient(circle at bottom left, rgba(34,197,94,.06), transparent 30%),
        #05070D;
    color:#fff;
    overflow-x:hidden;
    animation:fadePage 0.8s ease;
}

body::before{

content:"";
position:fixed;
inset:0;

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:50px 50px;

pointer-events:none;

z-index:-1;

}

.navbar{
    background:rgba(5,7,13,.55);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:all .35s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    padding:20px 0;
}

.nav-link{

    position:relative;

    color:#CBD5E1!important;

    transition:.3s;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--green);

    transition:.3s;

}

.nav-link:hover{

    color:white!important;

}

.nav-link:hover::after{

    width:100%;

}

.btn-download{

border-radius:50px;
padding:10px 24px;

}

.hero{

min-height:90vh;
display:flex;
align-items:center;
padding-top:100px;
position:relative;
overflow:hidden;

}

.badge-title{

display:inline-block;
background:#16202d;
padding:8px 18px;
border-radius:50px;
color:var(--green);
font-size:14px;

}

.hero h1{

    font-size:72px;

    font-weight:800;

    line-height:1.12;

    letter-spacing:-2px;

}

.hero h1 span{

color:var(--green);

}

.hero p{

font-size:20px;
line-height:1.6;
max-width:620px;
color:var(--text);

}

.hero-buttons{

display:flex;
gap:20px;
margin-bottom:40px;

}

.hero-buttons .btn{

min-width:200px;

}

.hero-features{

display:flex;
gap:28px;
margin-top:40px;
font-size:15px;
color:#cbd5e1;
align-items:center;
flex-wrap:wrap;

}

.hero-phone{

width:100%;
max-width:520px;
height:auto;

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

filter:drop-shadow(0 30px 60px rgba(34,197,94,.25));

}

.hero::after{

content:"";

position:absolute;

z-index:2;

width:650px;
height:650px;

right:-180px;
top:80px;

background:rgba(34,197,94,.12);

filter:blur(120px);

border-radius:50%;

z-index:-1;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

.container{
    max-width:1320px;
}

.logo{

font-family:Orbitron;
font-size:34px;
font-weight:700;
letter-spacing:2px;
color:white!important;
display:flex;
align-items:center;
gap:12px;

}

.logo img{

width:45px;
height:45px;
object-fit:contain;

}

.logo span{

font-family:Orbitron;
font-size:34px;
font-weight:700;
letter-spacing:2px;
color:#fff;

}

.btn-success{

background:#22C55E;
border:none;
padding:15px 34px;
border-radius:50px;
font-weight:600;
transition: all .35s ease;

}

.btn-success:hover{

transform:translateY(-3px);
box-shadow:0 15px 35px rgba(34,197,94,.35);

}

html{

scroll-behavior:smooth;

}

::selection{

background:var(--green);
color:white;

}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0F172A;

}

::-webkit-scrollbar-thumb{

background:var(--green);
border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#16A34A;

}

@keyframes fadePage{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:none;

}

}

.nav-link.active{

color:var(--green)!important;

}

.nav-link.active::after{

content:"";

display:block;

height:2px;

margin-top:8px;

background:var(--green);

}

.floating-card{

position:absolute;

display:flex;
align-items:center;
gap:15px;

padding:18px 20px;

background:rgba(15,23,42,.85);

backdrop-filter:blur(18px);

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

border-radius:20px;

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

animation:floatCard 5s ease-in-out infinite;

}

.icon-circle{

width:52px;
height:52px;

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

background:var(--green);

border-radius:50%;

font-size:22px;

color:white;

}

.floating-card h5{

margin:0;
font-weight:700;

}

.floating-card small{

color:#94A3B8;

}

.income-card{

top:50px;
left:-20px;
animation-delay:0s;

}

.pc-card{

bottom:90px;
right:-30px;
animation-delay:1s;

}

.cloud-card{

top:260px;
right:-60px;
animation-delay:2s;

}

@keyframes floatCard{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

/* ===========================================
   TRUST STRIP
=========================================== */

.trust-strip{

padding:30px 0;

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

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

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

}

.trust-items{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

}

.trust-item{

display:flex;

align-items:center;

gap:10px;

font-weight:600;

color:#CBD5E1;

}

.trust-item i{

font-size:22px;

color:var(--green);

}

@media (max-width:768px){

    .trust-items{

        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:18px 12px;

    }

    .trust-item{

        justify-content:flex-start;
        font-size:14px;

    }

    .trust-item i{

        font-size:18px;

    }

}

/* ===========================================
   WHY SECTION
=========================================== */

.why-section{

padding:120px 0;

}

.section-tag{

display:inline-block;

padding:8px 18px;

background:#16202d;

border-radius:50px;

color:var(--green);

margin-bottom:20px;

}

.why-section h2{

font-size:56px;

font-weight:800;

line-height:1.15;

margin-bottom:30px;

}

.why-section p{

color:var(--text);

font-size:20px;

line-height:1.8;

margin-bottom:35px;

}

.benefits{

display:flex;

flex-direction:column;

gap:18px;

}

.benefit{

display:flex;

align-items:center;

gap:15px;

font-size:18px;

font-weight:600;

}

.benefit i{

color:var(--green);

font-size:24px;

}

.dashboard-card{

height:500px;

border-radius:24px;

background:#111827;

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

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

color:#94A3B8;

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

position:relative;

overflow:hidden;

}

.dashboard-card::before{

content:"";

position:absolute;

width:280px;
height:280px;

right:-80px;
top:-80px;

background:rgba(34,197,94,.10);

filter:blur(100px);

border-radius:50%;

z-index:0;

}

.dashboard-card img{

position:relative;

z-index:2;

}

/* ===========================================
   ECOSYSTEM
=========================================== */

.ecosystem{

padding:120px 0;

}

.section-title{

font-size:58px;

font-weight:800;

margin-top:20px;

}

.section-description{

max-width:700px;

margin:auto;

margin-top:25px;

font-size:20px;

color:var(--text);

line-height:1.8;

}

.eco-card{

display:flex;

flex-direction:column;

justify-content:center;

background:rgba(15,23,42,.75);

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

border-radius:24px;

padding:45px;

height:100%;

transition:.35s;

backdrop-filter:blur(20px);

}

.eco-card:hover{

transform:translateY(-10px);

border-color:var(--green);

box-shadow:0 25px 50px rgba(34,197,94,.15);

}

.eco-card i{

font-size:42px;

color:var(--green);

margin-bottom:25px;

display:block;

}

.eco-card h4{

font-weight:700;

margin-bottom:18px;

}

.eco-card p{

color:var(--text);

line-height:1.8;

}

/* ===========================================
   PRODUCTS
=========================================== */

.products-section{

padding:120px 0;

}

.product-card{

background:#111827;

padding:45px;

border-radius:24px;

height:100%;

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

transition:.35s;

}

.product-card:hover{

transform:translateY(-10px);

border-color:var(--green);

box-shadow:0 25px 60px rgba(34,197,94,.15);

}

.product-card i{

font-size:55px;

color:var(--green);

margin-bottom:25px;

display:block;

}

.product-card h3{

font-weight:700;

margin-bottom:20px;

}

.product-card p{

color:var(--text);

line-height:1.8;

margin-bottom:30px;

}

.product-badge{

display:inline-block;

background:var(--green);

color:white;

padding:6px 16px;

border-radius:30px;

font-size:13px;

font-weight:700;

margin-bottom:25px;

}

.featured{

border:2px solid var(--green);

}

/* ===========================================
   PRICING
=========================================== */

.pricing-section{

padding:120px 0;

}

.pricing-card{

background:#111827;

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

border-radius:24px;

padding:45px;

height:100%;

transition:.35s;

position:relative;

}

.pricing-card:hover{

transform:translateY(-10px);

border-color:var(--green);

box-shadow:0 25px 50px rgba(34,197,94,.15);

}

.featured-price{

border:2px solid var(--green);

}

.popular-tag{

position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);

background:var(--green);

padding:8px 18px;

border-radius:30px;

font-size:13px;

font-weight:700;

color:white;

}

.price{

font-size:42px;

font-weight:800;

margin:25px 0;

color:var(--green);

}

.pricing-card ul{

list-style:none;

padding:0;

margin-bottom:35px;

}

.pricing-card li{

padding:10px 0;

color:var(--text);

}

.demo-section{

padding:120px 0;

}

.demo-box{

background:#111827;

border-radius:30px;

padding:80px;

text-align:center;

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

}

.demo-placeholder{

margin-top:40px;

padding:80px;

border-radius:24px;

border:2px dashed rgba(255,255,255,.08);

}

.demo-placeholder i{

font-size:90px;

color:var(--green);

margin-bottom:20px;

}

/* ===========================================
   DOWNLOADS
=========================================== */

.download-section{

padding:120px 0;

}

.download-card{

background:#111827;

padding:40px;

border-radius:24px;

height:100%;

text-align:center;

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

transition:.35s;

}

.download-card:hover{

transform:translateY(-10px);

border-color:var(--green);

box-shadow:0 25px 60px rgba(34,197,94,.15);

}

.download-card i{

font-size:60px;

color:var(--green);

margin-bottom:25px;

display:block;

}

.download-card h4{

margin-bottom:15px;

font-weight:700;

}

.download-card p{

margin-bottom:30px;

color:var(--text);

}

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

.footer{

    position:relative;

    overflow:hidden;

    padding:80px 0 30px;

    background:#04060A;

    margin-top:120px;

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

    isolation:isolate;

}



.footer-logo{

font-family:Orbitron;

font-size:34px;

margin-bottom:20px;

}

.footer h5{

margin-bottom:20px;

font-weight:700;

}

.footer ul{

list-style:none;

padding:0;

}

.footer li{

margin-bottom:12px;

}

.footer a{

color:var(--text);

text-decoration:none;

transition:.3s;

}

.footer a:hover{

color:var(--green);

}

.footer-small{

color:var(--text);

}

.footer hr{

margin:50px 0;

border-color:rgba(255,255,255,.05);

}

.footer-bottom{

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

    gap:20px;

    flex-wrap:wrap;

    color:var(--text);

}

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

.footer-copyright{

    color:var(--text);

}

.footer-legal-links{

    display:flex;
    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.footer-legal-links a{

    color:var(--text);

    text-decoration:none;

    transition:.3s;

}

.footer-legal-links a:hover{

    color:var(--green);

}

.footer-legal-links span{

    color:rgba(255,255,255,.25);

}

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

.footer-brand{

    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;

}

.footer-logo-icon{

    width:42px;
    height:42px;
    object-fit:contain;
    flex-shrink:0;

}

.footer-logo{

    margin:0;
    font-family:Orbitron;
    font-size:30px;
    font-weight:700;
    letter-spacing:2px;
    color:#fff;

}

@media (max-width:767px){

    .footer-bottom{

        flex-direction:column;

        justify-content:center;

        text-align:center;

        gap:12px;

    }

    .footer-legal-links{

        justify-content:center;

    }

}

.hero-stats{

display:flex;

gap:50px;

margin-top:45px;

flex-wrap:wrap;

}

.stat h3{

font-size:34px;

font-weight:800;

color:var(--green);

margin-bottom:5px;

}

.stat span{

color:var(--text);

font-size:15px;

}

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

/* Laptop */
@media (max-width:1200px){

.hero h1{
    font-size:68px;
}

.hero-phone{
    max-width:460px;
}

}

/* Tablet */
@media (max-width:992px){

.hero{
    text-align:center;
    padding-top:140px;
}

.hero h1{
    font-size:52px;
}

.hero p{
    margin:auto;
}

.hero-buttons{
    justify-content:center;
    flex-wrap:wrap;
}

.hero-features{
    justify-content:center;
}

.hero-phone{
    max-width:320px;
    margin:auto;
}

/*
.hero .row{

    flex-direction:column-reverse;

}
*/

.hero-content{

    text-align:center;

}

.floating-card{
    display:none;
}

.section-title{
    font-size:42px;
}

}

/* Mobile */
@media (max-width:768px){

.logo span{
    font-size:26px;
}

.logo-icon{
    width:34px;
    height:34px;
}

.hero h1{
    font-size:42px;
}

.hero p{
    font-size:18px;
}

.btn{
    width:100%;
}

.hero-buttons{
    flex-direction:column;
}

.download-card,
.product-card,
.pricing-card,
.eco-card{

    padding:30px;

}

.dashboard-card{

    height:auto;

}

}

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

.download-hero{

    padding:180px 0 120px;

}

.download-hero h1{

    font-size:72px;

    font-weight:800;

}

.download-hero h1 span{

    color:var(--green);

}

.download-hero p{

    font-size:20px;

    color:var(--text);

    max-width:600px;

}

.latest-version-card{

    background:var(--card);

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

    border-radius:24px;

    padding:45px;

    text-align:center;

}

.latest-version-card small{

    color:var(--green);

}

.latest-version-card h2{

    font-size:64px;

    margin:15px 0;

    font-weight:800;

}

/* ===========================================
   DOWNLOADS PAGE
=========================================== */

.latest-downloads{

    padding:180px 0 100px;

}

.download-box{

    background:#141C2C;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:40px;
    height:100%;
    transition:.3s;

}

.download-box:hover{

    transform:translateY(-8px);
    border-color:var(--green);

}

.download-box i{

    font-size:48px;
    color:var(--green);
    margin-bottom:20px;

}

.download-box h3{

    color:#fff;
    margin-bottom:20px;

}

.download-box ul{

    list-style:none;
    padding:0;
    margin-bottom:30px;

}

.download-box li{

    color:#CBD5E1;
    margin-bottom:12px;

}

/* ===========================================
   PRODUCTS PAGE
=========================================== */

.products-hero{

    padding:180px 0 120px;

}

.products-hero-image img{

    max-width:460px;
    width:100%;

}

.hero-buttons{

    display:flex;
    gap:15px;
    margin-top:35px;
    flex-wrap:wrap;

}

/* ===========================================
   ECOSYSTEM
=========================================== */

.ecosystem-section{

    padding:100px 0;

}

.ecosystem-flow{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:nowrap;

    gap:20px;

}

.eco-card{

    width:100%;

    height:100%;

    padding:35px;

    text-align:center;

    background:#141C2C;

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

    border-radius:20px;

    transition:.3s;

}

.eco-card:hover{

    transform:translateY(-8px);

    border-color:var(--green);

    box-shadow:0 20px 45px rgba(34,197,94,.15);

}

.eco-card i{

    font-size:42px;

    color:var(--green);

    margin-bottom:20px;

}

.eco-card h4{

    color:#fff;

    margin-bottom:15px;

}

.eco-card{

    flex:0 0 240px;

    min-height:220px;

    padding:35px;

    text-align:center;

    background:#141C2C;

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

    border-radius:20px;

    transition:.3s;

}

.eco-arrow{

    font-size:30px;

    color:var(--green);

}

/* ===========================================
   PRODUCT CARDS
=========================================== */

.products-section{

    padding:100px 0;

}

.product-card{

    background:#141C2C;

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

    border-radius:22px;

    padding:40px;

    height:100%;

    transition:.3s;

}

.product-card:hover{

    transform:translateY(-10px);

    border-color:var(--green);

    box-shadow:0 25px 60px rgba(34,197,94,.15);

}

.product-card i{

    font-size:52px;

    color:var(--green);

    margin-bottom:20px;

}

.product-card h3{

    color:#fff;

    margin-bottom:15px;

}

.product-card p{

    color:#CBD5E1;

    margin-bottom:30px;

}

/* ===========================================
   WHY SECTION
=========================================== */

.why-section{

    padding:100px 0;

}

.why-card{

    background:#141C2C;

    border-radius:20px;

    padding:35px;

    height:100%;

    text-align:center;

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

    transition:.3s;

}

.why-card:hover{

    transform:translateY(-8px);

    border-color:var(--green);

}

.why-card i{

    font-size:44px;

    color:var(--green);

    margin-bottom:20px;

}

.why-card h4{

    color:#fff;

    margin-bottom:15px;

}

.why-card p{

    color:#CBD5E1;

}

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

.products-cta{

    padding:100px 0 120px;

}

.cta-box{

    padding:70px;

    background:linear-gradient(135deg,#16202d,#101826);

    border-radius:30px;

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

}

.cta-box h2{

    color:#fff;

    margin:20px 0;

}

.cta-box p{

    color:#CBD5E1;

    max-width:700px;

    margin:0 auto;

}

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

@media(max-width:992px){

    .products-hero{

        text-align:center;

        padding-top:150px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .ecosystem-flow{

        flex-direction:column;

    }

    .eco-arrow{

        transform:rotate(90deg);

    }

}

.product-features{

    list-style:none;

    padding:0;

    margin:25px 0;

}

.product-features li{

    color:#CBD5E1;

    margin-bottom:12px;

    display:flex;

    align-items:center;

    gap:10px;

}

.product-features i{

    color:var(--green);

    font-size:15px;

}

.products-hero-image{

    position:relative;

    height:500px;

}

.floating-product{

    position:absolute;

    width:120px;

    background:#141C2C;

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

    border-radius:22px;

    padding:18px;

    text-align:center;

    transition:.35s;

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.floating-product:hover{

    transform:translateY(-10px) scale(1.03);

    border-color:var(--green);

}

.floating-product i{

    font-size:24px;

    color:var(--green);

    margin-bottom:15px;

}

.floating-product h5{

    color:#fff;

    margin-bottom:5px;

}

.floating-product small{

    color:#CBD5E1;

}

/* Positions */

.main-card{

    top:150px;

    left:160px;
    

}

.top-card{

    top:-20px;

    left:170px;

    animation:floating 4.5s ease-in-out infinite;

}

.left-card{

    top:170px;

    left:-30px;

    animation:floating 5.3s ease-in-out infinite;

}

.right-card{

    top:170px;

    right:-20px;

    animation:floating 6.1s ease-in-out infinite;

}

.bottom-card{

    bottom:20px;

    left:170px;

    animation:floating 5.7s ease-in-out infinite;

}

.product-preview{

    width:100%;

    border-radius:18px;

    margin-bottom:25px;

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

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

}

.products-hero-image::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    background:#22c55e;

    opacity:.18;

    filter:blur(120px);

    border-radius:50%;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    z-index:0;

}

.hero-screenlock{

    width:420px;
    max-width:100%;

    border-radius:22px;

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

    box-shadow:0 30px 80px rgba(0,0,0,.45);

    position:absolute;

    transition:.35s;

    top:90px;

    left:50%;

    transform:translateX(-50%);

    z-index:2;

}

.hero-screenlock:hover{

    transform:translateX(-50%) scale(1.02);

}

@keyframes floating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/* ===========================================
   STORE PAGE
=========================================== */

.store-hero{

    padding:180px 0 120px;

}

.license-preview{

    position:relative;

    background:#141C2C;

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

    border-radius:28px;

    padding:45px;

    max-width:420px;

    margin:auto;

    box-shadow:0 25px 60px rgba(0,0,0,.30);

    transition:.35s;

}

.license-preview:hover{

    transform:translateY(-8px);

    border-color:var(--green);

}

.license-badge{

    display:inline-block;

    background:var(--green);

    color:#000;

    font-weight:700;

    padding:8px 18px;

    border-radius:40px;

    margin-bottom:25px;

}

.license-preview h1{

    font-size:58px;

    color:#fff;

}

.license-preview h2{

    color:#fff;

}

.license-preview p{

    color:#CBD5E1;

}

.license-preview ul{

    list-style:none;

    padding:0;

    margin-top:25px;

}

.license-preview li{

    color:#CBD5E1;

    margin-bottom:12px;

}

/* ===========================================
   PRICING
=========================================== */

.pricing-section{

    padding:100px 0;

}

.pricing-card{

    background:#141C2C;

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

    border-radius:24px;

    padding:40px;

    height:100%;

    text-align:center;

    transition:.35s;

    position:relative;

}

.pricing-card:hover{

    transform:translateY(-10px);

    border-color:var(--green);

    box-shadow:0 25px 60px rgba(34,197,94,.15);

}

.pricing-card h2{

    color:var(--green);

    margin:20px 0;

}

.pricing-card h3{

    color:#fff;

}

.pricing-card p{

    color:#CBD5E1;

}

.featured{

    border:2px solid var(--green);

    transform:scale(1.04);

}

.popular-badge{

    position:absolute;

    top:-14px;

    left:50%;

    transform:translateX(-50%);

    background:var(--green);

    color:#000;

    padding:7px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

}

/* ===========================================
   PURCHASE PROCESS
=========================================== */

.purchase-process{

    padding:100px 0;

}

.step-card{

    background:#141C2C;

    border-radius:20px;

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

    padding:35px 20px;

    text-align:center;

    height:100%;

    transition:.35s;

    position:relative;

}

.step-card:hover{

    transform:translateY(-8px);

    border-color:var(--green);

}

.step-number{

    position:absolute;

    top:12px;

    right:12px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:var(--green);

    color:#000;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

}

.step-card i{

    font-size:42px;

    color:var(--green);

    margin-bottom:20px;

}

.step-card h5{

    color:#fff;

}

/* ===========================================
   FAQ
=========================================== */

.faq-section{

    padding:100px 0;

}

.accordion-item{

    background:#141C2C;

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

    margin-bottom:15px;

    border-radius:15px;

    overflow:hidden;

}

.accordion-button{

    background:#141C2C;

    color:#fff;

}

.accordion-button:not(.collapsed){

    background:#1B2638;

    color:var(--green);

}

.accordion-body{

    background:#141C2C;

    color:#CBD5E1;

}

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

.store-cta{

    padding:100px 0 120px;

}

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

@media(max-width:992px){

    .store-hero{

        text-align:center;

        padding-top:150px;

    }

    .license-preview{

        margin-top:50px;

    }

    .featured{

        transform:none;

    }

}

/* ==================================================
   SUPPORT PAGE
================================================== */


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

.support-hero{
    min-height: 720px;
    display: flex;
    align-items: center;
    padding: 150px 0 90px;
    position: relative;
    overflow: hidden;
}

.support-hero::before{
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.08);
    filter: blur(100px);
    right: -150px;
    top: 100px;
    pointer-events: none;
}

.support-preview{
    max-width: 430px;
    margin-left: auto;
    padding: 55px 40px;
    background: rgba(18, 27, 39, 0.85);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    text-align: center;
    position: relative;
    box-shadow: 0 25px 70px rgba(0,0,0,0.35);
    transition: .35s ease;
}

.support-preview:hover{
    transform: translateY(-8px);
    border-color: rgba(34,197,94,0.35);
}

.support-preview-icon{
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34,197,94,0.12);
    color: var(--green);
    font-size: 38px;
}

.support-preview h3{
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 18px;
}

.support-preview p{
    color: #9ca3af;
    line-height: 1.9;
    margin-bottom: 25px;
}

.support-status{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 30px;
    background: rgba(34,197,94,0.08);
    color: #b7f7c8;
    font-size: 14px;
}

.status-dot{
    width: 9px;
    height: 9px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(34,197,94,.8);
}


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

.support-options{
    padding: 100px 0;
    background: #0d141e;
}

.support-option-card{
    height: 100%;
    padding: 35px 28px;
    background: #111b27;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    text-align: center;
    transition: .3s ease;
}

.support-option-card:hover{
    transform: translateY(-7px);
    border-color: rgba(34,197,94,.35);
    box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.support-option-icon{
    width: 65px;
    height: 65px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(34,197,94,.1);
    color: var(--green);
    font-size: 28px;
}

.support-option-card h3{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.support-option-card p{
    color: #9ca3af;
    line-height: 1.7;
    min-height: 82px;
}


/* =========================
   SUPPORT CATEGORIES
========================= */

.support-categories{
    padding: 100px 0;
}

.support-category-card{
    height: 100%;
    padding: 32px 28px;
    background: #111b27;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    transition: .3s ease;
}

.support-category-card:hover{
    transform: translateY(-6px);
    border-color: rgba(34,197,94,.3);
}

.support-category-icon{
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 22px;
    background: rgba(34,197,94,.1);
    color: var(--green);
    font-size: 25px;
}

.support-category-card h3{
    font-size: 20px;
    margin-bottom: 14px;
}

.support-category-card p{
    color: #9ca3af;
    line-height: 1.7;
}

.support-category-link{
    color: var(--green);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.support-category-link:hover{
    color: #fff;
}


/* =========================
   SUPPORT FORM
========================= */

.support-form-section{
    padding: 110px 0;
    background: #0d141e;
}

.support-info-list{
    margin-top: 35px;
}

.support-info-item{
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 25px;
}

.support-info-item > i{
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(34,197,94,.1);
    color: var(--green);
    font-size: 20px;
}

.support-info-item h5{
    margin-bottom: 5px;
    font-size: 17px;
}

.support-info-item p{
    color: #9ca3af;
    margin: 0;
}

.support-form-card{
    padding: 40px;
    background: #111b27;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(0,0,0,.2);
}

.support-form-card .form-label{
    color: #d1d5db;
    font-weight: 500;
}

.support-form-card .form-control,
.support-form-card .form-select{
    min-height: 52px;
    background: #0b121b;
    border: 1px solid rgba(255,255,255,.09);
    color: #fff;
    border-radius: 10px;
}

.support-form-card textarea.form-control{
    min-height: 150px;
}

.support-form-card .form-control::placeholder{
    color: #6b7280;
}

.support-form-card .form-control:focus,
.support-form-card .form-select:focus{
    background: #0b121b;
    color: #fff;
    border-color: var(--green);
    box-shadow: 0 0 0 .2rem rgba(34,197,94,.1);
}

.support-form-card .form-select option{
    background: #111b27;
    color: #fff;
}

.support-form-note{
    color: #6b7280;
    font-size: 13px;
}


/* =========================
   SUPPORT FAQ
========================= */

.support-faq{
    padding: 110px 0;
}

.support-faq .accordion{
    max-width: 900px;
    margin: auto;
}

.support-faq .accordion-item{
    background: #111b27;
    border: 1px solid rgba(255,255,255,.07);
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
}

.support-faq .accordion-button{
    background: #111b27;
    color: #fff;
    font-weight: 600;
    padding: 20px 22px;
    box-shadow: none;
}

.support-faq .accordion-button:not(.collapsed){
    background: rgba(34,197,94,.08);
    color: var(--green);
}

.support-faq .accordion-button:focus{
    box-shadow: none;
}

.support-faq .accordion-button::after{
    filter: invert(1);
}

.support-faq .accordion-body{
    color: #9ca3af;
    line-height: 1.8;
    padding: 20px 22px;
}

.support-faq .accordion-body a{
    color: var(--green);
    text-decoration: none;
}

.support-faq .accordion-body a:hover{
    text-decoration: underline;
}


/* =========================
   FINAL SUPPORT CTA
========================= */

.support-final-cta{
    padding: 80px 0 110px;
}

.support-cta-box{
    max-width: 1000px;
    margin: auto;
    padding: 65px 30px;
    border-radius: 24px;
    background:
        radial-gradient(
            circle at top,
            rgba(34,197,94,.12),
            transparent 55%
        ),
        #111b27;
    border: 1px solid rgba(34,197,94,.18);
}

.support-cta-icon{
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(34,197,94,.1);
    color: var(--green);
    font-size: 30px;
}

.support-cta-box .section-description{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.support-cta-buttons{
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}


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

@media (max-width: 991px){

    .support-hero{
        min-height: auto;
        padding: 140px 0 80px;
    }

    .support-preview{
        margin: 60px auto 0;
    }

}


@media (max-width: 767px){

    .support-hero{
        text-align: center;
    }

    .support-hero .hero-buttons{
        justify-content: center;
    }

    .support-options,
    .support-categories,
    .support-form-section,
    .support-faq{
        padding: 75px 0;
    }

    .support-form-card{
        padding: 28px 20px;
    }

    .support-cta-box{
        padding: 50px 20px;
    }

    .support-cta-buttons{
        flex-direction: column;
    }

    .support-cta-buttons .btn{
        width: 100%;
    }

}

/* ==================================================
   404 ERROR PAGE
================================================== */

.error-page{
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 150px 0 100px;
    position: relative;
    overflow: hidden;
}

.error-page::before{
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.08);
    filter: blur(120px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.error-content{
    max-width: 850px;
    margin: auto;
    position: relative;
    z-index: 1;
}

.error-icon{
    width: 75px;
    height: 75px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(34, 197, 94, 0.1);
    color: var(--green);
    font-size: 32px;
}

.error-code{
    font-size: clamp(100px, 18vw, 190px);
    line-height: .9;
    font-weight: 800;
    letter-spacing: -8px;
    color: rgba(255,255,255,.04);
    margin-bottom: -25px;
    user-select: none;
}

.error-title{
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 800;
    margin: 20px 0;
}

.error-title span{
    color: var(--green);
}

.error-description{
    max-width: 650px;
    margin: 0 auto;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1.8;
}

.error-actions{
    margin-top: 35px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.error-links{
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: #6b7280;
}

.error-links a{
    color: #9ca3af;
    text-decoration: none;
    transition: .2s ease;
}

.error-links a:hover{
    color: var(--green);
}


/* MOBILE */

@media (max-width: 767px){

    .error-page{
        padding: 130px 0 80px;
    }

    .error-code{
        letter-spacing: -4px;
        margin-bottom: -10px;
    }

    .error-actions{
        flex-direction: column;
    }

    .error-actions .btn{
        width: 100%;
    }

}

/* ==================================================
   LEGAL PAGES
   Privacy Policy / Terms & Conditions
================================================== */

.legal-page{
    padding: 150px 0 110px;
    min-height: 100vh;
    position: relative;
}

.legal-page::before{
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.06);
    filter: blur(120px);
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}


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

.legal-header{
    max-width: 850px;
    margin: 0 auto 65px;
    position: relative;
    z-index: 1;
}

.legal-header .section-title{
    font-size: clamp(38px, 5vw, 58px);
    margin-bottom: 20px;
}

.legal-header .section-description{
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.legal-updated{
    display: inline-block;
    margin-top: 20px;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    color: #9ca3af;
    font-size: 14px;
}


/* =========================
   LEGAL CONTENT
========================= */

.legal-content{
    max-width: 950px;
    margin: auto;
    padding: 50px;
    background: #111b27;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 22px;
    box-shadow: 0 25px 70px rgba(0,0,0,.18);
    position: relative;
    z-index: 1;
}


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

.legal-section{
    padding-bottom: 35px;
    margin-bottom: 35px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.legal-section:last-child{
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.legal-section h2{
    color: #ffffff;
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 18px;
}

.legal-section p{
    color: #9ca3af;
    line-height: 1.9;
    margin-bottom: 16px;
}

.legal-section ul,
.legal-section ol{
    color: #9ca3af;
    line-height: 1.9;
    padding-left: 24px;
    margin-bottom: 18px;
}

.legal-section li{
    margin-bottom: 8px;
}

.legal-section strong{
    color: #ffffff;
}


/* =========================
   LEGAL LINKS
========================= */

.legal-section a{
    color: var(--green);
    text-decoration: none;
    transition: .2s ease;
}

.legal-section a:hover{
    color: #ffffff;
    text-decoration: underline;
}


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

@media (max-width: 767px){

    .legal-page{
        padding: 130px 0 80px;
    }

    .legal-header{
        margin-bottom: 45px;
    }

    .legal-content{
        padding: 30px 20px;
        border-radius: 16px;
    }

    .legal-section{
        padding-bottom: 28px;
        margin-bottom: 28px;
    }

    .legal-section h2{
        font-size: 20px;
    }

}

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

.academy-hero{

    min-height: 720px;

    display: flex;

    align-items: center;

    padding: 150px 0 90px;

    position: relative;

    overflow: hidden;

}

.academy-preview{

    max-width: 430px;

    margin-left: auto;

}

.academy-card{

    padding: 55px 40px;

    background: rgba(18,27,39,.85);

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

    border-radius: 24px;

    text-align: center;

}

@media (max-width:991px){

    .ecosystem-flow{

        flex-direction:column;

    }

    .eco-arrow{

        transform:rotate(90deg);

    }

    .eco-card{

        width:100%;

        max-width:420px;

    }

}

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

.final-cta{

    padding:120px 0;

}

.cta-box{

    background:#141b2d;

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

    border-radius:28px;

    padding:80px 60px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.cta-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(34,197,94,.10),
    transparent 45%);

    pointer-events:none;

}

.cta-box .section-title{

    margin-top:20px;

    margin-bottom:20px;

}

.cta-box .section-description{

    max-width:760px;

    margin:0 auto;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;

}

.cta-highlights{

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

    margin-top:45px;

    color:#9ca3af;

    font-size:15px;

}

.cta-highlights span{

    display:flex;

    align-items:center;

    gap:8px;

}

.cta-highlights i{

    color:#22c55e;

}