/* =====================================================
   DURAKHSHAN ENTERPRISE ERP
   LUXURY SYSTEM IDENTITY DESIGN
===================================================== */


/* ---------- ROOT ---------- */

:root {

    --gold:#d4af37;

    --gold-light:#f5d77a;

    --dark:#05070d;

    --dark-2:#0b1020;

    --glass:rgba(255,255,255,.06);

    --text:#e8edf7;

    --muted:#9aa8c5;

}



/* ---------- GLOBAL ---------- */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



body {

    background:

    radial-gradient(
    circle at top,
    #17213b,
    #05070d 60%
    );


    color:var(--text);

    font-family:

    "Segoe UI",
    Tahoma,
    sans-serif;


    min-height:100vh;

}



.erp-page {

    width:100%;

    overflow:hidden;

}



/* ---------- HEADER ---------- */


.lux-header {


    width:90%;

    max-width:1400px;

    margin:40px auto;


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:25px 35px;


    background:

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


    backdrop-filter:blur(20px);


    border:

    1px solid rgba(212,175,55,.25);


    border-radius:30px;


}



.brand-area {


    display:flex;

    align-items:center;

    gap:20px;


}



.brand-logo {

    width:90px;

}



.brand-area h2 {


    color:var(--gold-light);

    font-size:26px;


}



.brand-area span {


    color:var(--muted);

    letter-spacing:2px;


}



/* LIVE */


.live-system {


    display:flex;

    align-items:center;

    gap:12px;


    color:#00e676;

    letter-spacing:3px;


}



.live-system span {


    width:14px;

    height:14px;

    background:#00e676;


    border-radius:50%;


    box-shadow:

    0 0 20px #00e676;


}



/* ---------- FOUNDER HERO ---------- */


.founder-hero {


    width:90%;

    max-width:1400px;


    margin:100px auto;


    display:grid;


    grid-template-columns:

    500px 1fr;


    gap:100px;


    align-items:center;


}




/* IMAGE */


.founder-visual {


    position:relative;


    display:flex;

    justify-content:center;


}



.energy-ring {


    position:absolute;


    width:470px;

    height:470px;


    border-radius:50%;


    border:

    2px solid rgba(212,175,55,.4);


    animation:

    rotateRing 15s linear infinite;


}



@keyframes rotateRing {


from {

transform:rotate(0);

}


to {

transform:rotate(360deg);

}


}



.founder-image {


    width:360px;

    height:480px;


    position:relative;


    z-index:2;


    border-radius:40px;


    overflow:hidden;


    border:

    2px solid var(--gold);


    box-shadow:


    0 0 70px rgba(212,175,55,.35);



}



.founder-image img {


    width:100%;


    height:100%;


    object-fit:cover;


}



.founder-badge {


    position:absolute;


    bottom:25px;


    left:50%;


    transform:translateX(-50%);


    background:

    linear-gradient(
    135deg,
    #f5d77a,
    #b8860b
    );


    color:#050505;


    padding:15px 35px;


    border-radius:20px;


    font-weight:bold;


    text-align:center;


    letter-spacing:2px;


}



/* ---------- CONTENT ---------- */


.eyebrow {


    color:var(--gold);


    letter-spacing:6px;


    margin-bottom:25px;


}



.founder-content h1 {


    font-size:60px;


    color:var(--gold-light);


}



.founder-content h2 {


    margin-top:20px;


    color:white;


    font-weight:400;


}



.gold-line {


    width:180px;

    height:3px;


    background:

    linear-gradient(
    90deg,
    var(--gold),
    transparent
    );


    margin:35px 0;


}



.founder-content p {


    color:var(--muted);


    font-size:20px;


    line-height:2;


}



.vision-box {


    margin-top:40px;


    padding:35px;


    background:

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


    border-right:

    3px solid var(--gold);


    border-radius:25px;


    font-size:22px;


    line-height:2;


}



/* ---------- SIGNATURE ---------- */


.signature-section {


    text-align:center;


    margin:80px auto;


}



.signature-title {

    color:var(--gold);

    letter-spacing:6px;

    margin-bottom:25px;

    font-size:14px;

}


.founder-signature {


    width:560px;


    max-width:95%;


    filter:


    drop-shadow(
    0 0 35px rgba(212,175,55,.7)
    );


}



.signature-section h3 {

    margin-top:18px;

    color:#f5d77a;

    font-size:30px;

}


.signature-section p {

    margin-top:8px;

    color:#9aa8c5;

    letter-spacing:3px;

}


/* =====================================================
   DURAKHSHAN ENGINE
===================================================== */


.engine-section {


    width:90%;

    max-width:1400px;

    margin:150px auto;


}



.section-header {


    text-align:center;

    margin-bottom:70px;


}



.section-header span {


    color:var(--gold);

    letter-spacing:7px;


}



.section-header h2 {


    margin-top:25px;


    font-size:45px;


    color:var(--gold-light);


}



.section-header p {


    margin-top:20px;

    color:var(--muted);

    font-size:18px;


}





.engine-grid {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:30px;


}




.engine-card {


    min-height:330px;


    padding:40px 30px;


    background:


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


    border:


    1px solid rgba(212,175,55,.25);


    border-radius:35px;


    text-align:center;


    backdrop-filter:blur(20px);


    transition:.5s;


}




.engine-card:hover {


    transform:

    translateY(-15px);


    border-color:

    var(--gold);


    box-shadow:


    0 30px 70px rgba(212,175,55,.2);


}




.engine-icon {


    width:80px;


    height:80px;


    margin:auto;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    linear-gradient(
    135deg,
    #f5d77a,
    #b8860b
    );


    color:#111;


    font-size:25px;


    font-weight:bold;


}



.engine-card h3 {


    margin-top:35px;


    color:white;


    font-size:22px;


}



.engine-card p {


    margin-top:20px;


    color:var(--muted);


    line-height:2;


}


/* =====================================================
   EXECUTIVE COMMAND CENTER
===================================================== */


.command-section {

    width:90%;

    max-width:1400px;

    margin:150px auto;

}





.status-grid {


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:30px;


}





.status-card {


    position:relative;


    padding:40px 30px;


    min-height:240px;


    text-align:center;


    background:


    linear-gradient(
    145deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.02)
    );


    border:


    1px solid rgba(212,175,55,.25);


    border-radius:35px;


    backdrop-filter:blur(20px);


    transition:.5s;


}




.status-card:hover {


    transform:translateY(-12px);


    border-color:#d4af37;


    box-shadow:


    0 30px 70px rgba(212,175,55,.25);


}





.status-light {


    width:18px;


    height:18px;


    margin:0 auto 25px;


    border-radius:50%;


    background:#00e676;


    box-shadow:


    0 0 25px #00e676;


    animation:pulseStatus 2s infinite;


}




@keyframes pulseStatus {


0%{

opacity:.5;

}


50%{

opacity:1;

}


100%{

opacity:.5;

}


}





.status-card h3 {


    color:#f5d77a;


    font-size:25px;


}




.status-card p {


    margin-top:15px;


    color:#9aa8c5;


}




.status-card strong {


    display:block;


    margin-top:25px;


    color:#00e676;


    letter-spacing:3px;


}


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


.lux-footer {


    width:90%;

    max-width:1400px;

    margin:120px auto 50px;


    padding:50px;


    text-align:center;


    background:


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


    border-top:


    1px solid rgba(212,175,55,.3);


    border-radius:40px;


}



.footer-brand img {


    width:100px;


}



.footer-brand h2 {


    margin-top:20px;


    color:#f5d77a;


    font-size:28px;


}



.footer-brand p {


    margin-top:15px;


    color:#9aa8c5;


    letter-spacing:3px;


}




.footer-founder {


    margin-top:40px;


}



.footer-founder h3 {


    color:white;


    font-size:25px;


}



.footer-founder span {


    display:block;


    margin-top:10px;


    color:#d4af37;


    letter-spacing:3px;


}




.footer-copy {


    margin-top:40px;


    color:#7f8da8;


    line-height:2;


}

.reveal {

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}


.visible {

    opacity:1;

    transform:none;

}



.cursor-glow {


    position:fixed;


    width:120px;

    height:120px;


    border-radius:50%;


    pointer-events:none;


    background:

    radial-gradient(
    circle,
    rgba(212,175,55,.25),
    transparent 70%
    );


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


    z-index:9999;


}


/* ================= FOUNDER LEFT ALIGN ================= */


.founder-hero {

    direction:ltr;

}


.founder-visual {

    order:1;

}


.founder-content {

    order:2;

    direction:rtl;

    text-align:right;

}


/* =====================================================
   LUXURY WHATSAPP BUTTON
===================================================== */


.whatsapp-float {

    position:fixed;

    right:35px;

    bottom:35px;

    width:75px;

    height:75px;

    border-radius:50%;

    background:

    linear-gradient(
    145deg,
    #2cff85,
    #0b8f45
    );


    display:flex;

    align-items:center;

    justify-content:center;


    color:white;

    text-decoration:none;


    font-size:38px;


    z-index:9999;


    border:

    2px solid rgba(255,255,255,.35);


    box-shadow:

    0 0 35px rgba(37,211,102,.7),

    inset 0 0 20px rgba(255,255,255,.3);


    transition:.5s ease;


}



/* Golden outer ring */


.whatsapp-float::before {


    content:"";


    position:absolute;


    width:95px;


    height:95px;


    border-radius:50%;


    border:

    1px solid rgba(212,175,55,.6);


    animation:

    whatsappPulse 2.5s infinite;


}





.whatsapp-float:hover {


    transform:

    scale(1.15)
    rotate(5deg);


    box-shadow:

    0 0 60px rgba(37,211,102,1);


}





.whatsapp-float span {


    position:relative;

    z-index:2;


}





@keyframes whatsappPulse {


0% {

transform:scale(.8);

opacity:.8;

}


100% {

transform:scale(1.25);

opacity:0;

}


}