/* =========================
   DROXIN PREMIUM THEME V3 FINAL
========================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family: Arial, sans-serif;
    background:#0b1120;
    color:#e5e7eb;
    line-height:1.7;
    overflow-x:hidden;
    padding-top:80px;
}

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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#0f172a;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    border-radius:20px;
}

/* =========================
   NAVBAR (REAL GLASS PRO)
========================= */

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    padding:16px 0;
    background:transparent;

    transition:.35s ease;
}

.navbar.scrolled{
    background:rgba(11,17,32,.6) !important;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:0 15px 50px rgba(0,0,0,.45);
}

/* BRAND */
.navbar-brand{
    font-size:26px;
    font-weight:900;
    color:#fff!important;
    display:flex;
    align-items:center;
    gap:10px;
}

.logo-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    box-shadow:0 10px 30px rgba(37,99,235,.25);
}

/* NAV LINKS */
.nav-link{
    color:#cbd5e1!important;
    margin-left:14px;
    font-weight:500;
    position:relative;
    transition:.25s;
}

.nav-link::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background:#3b82f6;
    transition:.3s;
}

.nav-link:hover{
    color:#fff!important;
}

.nav-link:hover::after{
    width:100%;
}

/* CTA */
.nav-btn{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff!important;
    padding:10px 20px;
    border-radius:12px;
    font-weight:800;
    box-shadow:0 12px 30px rgba(37,99,235,.25);
    transition:.3s;
}

.nav-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 45px rgba(37,99,235,.35);
}

/* =========================
   HERO (DEPTH UPGRADED)
========================= */

.hero{
    position:relative;
    padding:150px 0 120px;
    text-align:center;
    overflow:hidden;

    background:
        radial-gradient(circle at 20% 20%, rgba(37,99,235,.25), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(29,78,216,.18), transparent 50%),
        linear-gradient(135deg,#0b1120,#0a0f1d);
}

/* animated grid */
.hero::before{
    content:'';
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);

    background-size:60px 60px;
    opacity:.10;

    animation:gridMove 30s linear infinite;
}

/* moving glow */
.hero::after{
    content:'';
    position:absolute;
    width:800px;
    height:800px;

    left:-300px;
    top:-300px;

    background:radial-gradient(circle,#2563eb,transparent 60%);
    filter:blur(150px);
    opacity:.16;

    animation:floatGlow 12s ease-in-out infinite;
}

/* TEXT */
.hero h1{
    font-size:58px;
    font-weight:900;
    line-height:1.05;
    color:#fff;
    position:relative;
    z-index:2;
}

.hero p{
    font-size:18px;
    color:#cbd5e1;
    max-width:760px;
    margin:22px auto;
    position:relative;
    z-index:2;
}

/* =========================
   BUTTONS (POLISHED)
========================= */

.btn-main{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    padding:14px 30px;
    border-radius:14px;
    font-weight:900;
    text-decoration:none;
    transition:.3s;
    box-shadow:0 18px 45px rgba(37,99,235,.25);
    position:relative;
    z-index:2;
}

.btn-main:hover{
    transform:translateY(-3px);
    box-shadow:0 25px 60px rgba(37,99,235,.35);
}

.btn-outline-main{
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    padding:14px 30px;
    border-radius:14px;
    transition:.3s;
}

.btn-outline-main:hover{
    background:#fff;
    color:#0b1120;
}

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

section{
    padding:95px 0;
}

/* =========================
   FORM (FULL SaaS UX FIX)
========================= */

.form-control{
    background:rgba(15,23,42,.75) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    color:#e5e7eb !important;

    border-radius:14px;
    padding:14px 16px;

    backdrop-filter:blur(10px);

    transition:.25s;
}

.form-control:hover{
    border-color:rgba(37,99,235,.35);
}

.form-control::placeholder{
    color:#94a3b8;
}

.form-control:focus{
    background:rgba(15,23,42,.95) !important;
    border-color:#2563eb !important;
    color:#fff !important;
    box-shadow:0 0 0 .25rem rgba(37,99,235,.25);
}

.form-label{
    color:#e5e7eb;
    font-weight:700;
}

/* =========================
   CARDS (SAAS POLISH)
========================= */

.feature-card{
    background:#111827;
    border:1px solid rgba(255,255,255,.06);
    border-radius:22px;
    padding:32px;
    height:100%;
    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.feature-card:hover{
    transform:translateY(-12px);
    border-color:rgba(37,99,235,.5);
    box-shadow:0 25px 70px rgba(37,99,235,.15);
}

/* =========================
   BADGES
========================= */

.badge-box{
    background:#111827;
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    padding:24px;
    text-align:center;
    transition:.3s;
}

.badge-box:hover{
    transform:translateY(-8px);
    border-color:#2563eb;
}

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

.footer{
    background:#070d19;
    padding:80px 0 30px;
}

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

@keyframes gridMove{
    from{transform:translateY(0);}
    to{transform:translateY(60px);}
}

@keyframes floatGlow{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(60px,40px);}
}