/* ============================================================
   NOOR FINAL POLISH V1
   Same visual family as NOOR ERP
   ============================================================ */

:root{
    --np-bg:#070b14;
    --np-bg2:#0b1220;
    --np-surface:#111827;
    --np-surface2:#172033;
    --np-surface3:#0f172a;

    --np-border:#263244;
    --np-border2:#334155;

    --np-text:#f8fafc;
    --np-text2:#cbd5e1;
    --np-muted:#94a3b8;

    --np-blue:#2563eb;
    --np-blue2:#1d4ed8;
    --np-green:#22c55e;

    --np-radius:16px;
}

/* ============================================================
   BODY
   ============================================================ */

html{
    background:#070b14 !important;
}

body{
    background:
        radial-gradient(circle at 85% 8%,rgba(37,99,235,.10),transparent 28%),
        #070b14 !important;

    color:var(--np-text) !important;
}

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

header,
nav,
.navbar,
.site-header,
.main-header,
[class*="header"]{
    border-color:var(--np-border) !important;
}

header,
.site-header,
.main-header{
    background:rgba(5,9,20,.94) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

/* nav links */
header a,
nav a,
.navbar a{
    color:var(--np-text2) !important;
    transition:.18s ease !important;
}

header a:hover,
nav a:hover,
.navbar a:hover{
    color:#fff !important;
}

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

.hero,
.home-hero,
.hero-section,
[class*="hero"]{
    background:
        radial-gradient(circle at 75% 20%,rgba(37,99,235,.22),transparent 34%),
        radial-gradient(circle at 20% 80%,rgba(34,197,94,.08),transparent 30%),
        linear-gradient(135deg,#070b14,#0b1220 55%,#101a2e) !important;

    border:1px solid rgba(51,65,85,.55) !important;
    border-radius:22px !important;
    box-shadow:0 24px 70px rgba(0,0,0,.30) !important;
}

.hero h1,
.home-hero h1,
.hero-section h1,
[class*="hero"] h1{
    color:#fff !important;
    letter-spacing:-.02em;
}

.hero p,
.home-hero p,
.hero-section p,
[class*="hero"] p{
    color:var(--np-text2) !important;
}

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

main{
    background:transparent !important;
}

section{
    border-color:var(--np-border) !important;
}

section + section{
    margin-top:18px;
}

/* ============================================================
   TITLES
   ============================================================ */

h1,h2,h3,h4,h5,h6{
    color:var(--np-text) !important;
}

h2{
    letter-spacing:-.015em;
}

p{
    color:var(--np-text2);
}

/* ============================================================
   CARDS - STRONG NORMALIZATION
   ============================================================ */

.card,
[class$="-card"],
[class*="-card "],
[class*=" card"],
.service-card,
.feature-card,
.info-card,
.stat-card,
.contact-card,
.knowledge-card,
.service-item,
.feature-item,
[class*="service-item"],
[class*="feature-item"]{
    background:
        linear-gradient(
            145deg,
            rgba(17,24,39,.98),
            rgba(11,18,32,.98)
        ) !important;

    color:var(--np-text) !important;

    border:1px solid var(--np-border) !important;
    border-radius:var(--np-radius) !important;

    box-shadow:
        0 12px 32px rgba(0,0,0,.20) !important;

    transition:
        transform .20s ease,
        border-color .20s ease,
        box-shadow .20s ease,
        background .20s ease !important;
}

.card:hover,
[class$="-card"]:hover,
.service-card:hover,
.feature-card:hover,
.info-card:hover,
.stat-card:hover,
.contact-card:hover,
.knowledge-card:hover,
.service-item:hover,
.feature-item:hover{
    background:var(--np-surface2) !important;

    border-color:#3b82f6 !important;

    transform:translateY(-4px);

    box-shadow:
        0 18px 42px rgba(0,0,0,.28),
        0 0 0 1px rgba(59,130,246,.08) !important;
}

/* Card text */
.card p,
[class$="-card"] p,
.service-card p,
.feature-card p{
    color:var(--np-muted) !important;
}

.card h2,
.card h3,
.card h4,
[class$="-card"] h2,
[class$="-card"] h3,
.service-card h3,
.feature-card h3{
    color:#f8fafc !important;
}

/* ============================================================
   ERP / CRM / BI / SEC STYLE BLOCKS
   ============================================================ */

[class*="module"],
[class*="platform"],
[class*="system-box"],
[class*="feature-box"]{
    border-radius:16px !important;
    border:1px solid var(--np-border) !important;
}

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

button,
.btn,
a.btn,
.button,
[class*="btn-"],
[class*="button-"],
input[type="submit"]{
    min-height:42px;

    border-radius:10px !important;

    font-weight:700 !important;

    text-decoration:none !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease,
        border-color .16s ease !important;
}

/* Primary */
.btn-primary,
.primary-btn,
.button-primary,
a[class*="primary"],
button[class*="primary"],
input[type="submit"]{
    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    ) !important;

    border:1px solid #3b82f6 !important;
    color:#fff !important;

    box-shadow:
        0 8px 22px rgba(37,99,235,.20) !important;
}

.btn-primary:hover,
.primary-btn:hover,
.button-primary:hover,
a[class*="primary"]:hover,
button[class*="primary"]:hover,
input[type="submit"]:hover{
    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(37,99,235,.30) !important;
}

/* Secondary */
.btn-secondary,
.secondary-btn,
.button-secondary,
.btn-outline,
.btn-outline-primary{
    background:#172033 !important;
    color:#f8fafc !important;
    border:1px solid #334155 !important;
}

.btn-secondary:hover,
.secondary-btn:hover,
.button-secondary:hover,
.btn-outline:hover,
.btn-outline-primary:hover{
    background:#1e293b !important;
    border-color:#3b82f6 !important;
}

/* ============================================================
   LOGIN / REGISTER MAIN LINKS
   ============================================================ */

a[href*="login"]{
    border-radius:10px !important;
}

a[href*="register"]{
    border-radius:10px !important;
}

/* ============================================================
   WHATSAPP
   ============================================================ */

a[href*="wa.me"],
a[href*="whatsapp"]{
    background:#14532d !important;
    color:#dcfce7 !important;
    border:1px solid #22c55e !important;
    border-radius:10px !important;
}

a[href*="wa.me"]:hover,
a[href*="whatsapp"]:hover{
    background:#166534 !important;
    color:#fff !important;
    box-shadow:0 10px 26px rgba(34,197,94,.18) !important;
}

/* ============================================================
   INPUTS
   ============================================================ */

input,
textarea,
select{
    background:#0f172a !important;

    color:#f8fafc !important;

    border:1px solid #334155 !important;

    border-radius:10px !important;
}

input:focus,
textarea:focus,
select:focus{
    border-color:#3b82f6 !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.15) !important;

    outline:none !important;
}

input::placeholder,
textarea::placeholder{
    color:#64748b !important;
}

/* ============================================================
   REMOVE LIGHT / WHITE BLOCKS
   ============================================================ */

.bg-white,
.bg-light,
[class*="bg-white"],
[class*="bg-light"]{
    background:#111827 !important;
    color:#f8fafc !important;
}

.text-dark{
    color:#f8fafc !important;
}

/* ============================================================
   SERVICE AREA
   ============================================================ */

[id*="service"],
[class*="services"]{
    border-color:var(--np-border) !important;
}

[class*="services"] h2,
[id*="service"] h2{
    color:#fff !important;
}

/* ============================================================
   LINKS INSIDE CONTENT
   ============================================================ */

main a:not(.btn):not([href*="wa.me"]){
    color:#60a5fa;
}

main a:not(.btn):not([href*="wa.me"]):hover{
    color:#93c5fd;
}

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

footer,
.site-footer,
.main-footer,
[class*="footer"]{
    background:#050914 !important;

    color:#94a3b8 !important;

    border-top:1px solid #263244 !important;
}

footer a{
    color:#cbd5e1 !important;
}

footer a:hover{
    color:#fff !important;
}

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

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

::-webkit-scrollbar-track{
    background:#070b14;
}

::-webkit-scrollbar-thumb{
    background:#334155;
    border-radius:30px;
}

::-webkit-scrollbar-thumb:hover{
    background:#475569;
}

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

@media(max-width:768px){

    .hero,
    .home-hero,
    .hero-section,
    [class*="hero"]{
        border-radius:16px !important;
    }

    .card,
    [class$="-card"],
    .service-card,
    .feature-card{
        border-radius:14px !important;
    }

    button,
    .btn,
    a.btn,
    .button{
        min-height:44px;
    }
}

/* ============================================================
   END NOOR FINAL POLISH
   ============================================================ */