/* =============================================
   DINSTAR-1.CSS — Main Sections Only Color Change
   Header & Footer: UNCHANGED (original styles kept)
   Main Sections: Corporate Blue (#1b497a) palette
   ============================================= */

/* ── SECTION-LEVEL COLOR VARS ── */
:root {
    --ds-blue:        #1b497a;
    --ds-blue-light:  #2667ac;
    --ds-blue-dark:   #102b48;
    --ds-navy:        #201b7a;
    --ds-bg:          #f6f7f9;
    --ds-surface:     #ffffff;
    --ds-text:        #151e28;
    --ds-text-soft:   #475569;
    --ds-border:      rgba(27,73,122,0.13);
    --ds-blue-bg:     rgba(27,73,122,0.08);
    --ds-blue-bdr:    rgba(27,73,122,0.22);
}

/* ====================================================
   GLOBAL BODY — light background
   ==================================================== */
body {
    background: var(--ds-bg) !important;
    color: var(--ds-text) !important;
}

/* ====================================================
   BUTTONS — Blue themed
   ==================================================== */
.btn-micron-primary,
.btn-cta-primary,
.btn-select {
    background: var(--ds-blue) !important;
    color: #ffffff !important;
    border: 2px solid var(--ds-blue) !important;
    box-shadow: 0 4px 16px rgba(27,73,122,0.25) !important;
    transition: all 0.22s ease !important;
}

.btn-micron-primary:hover,
.btn-cta-primary:hover,
.btn-select:hover {
    background: var(--ds-blue-light) !important;
    border-color: var(--ds-blue-light) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(38,103,172,0.35) !important;
    transform: translateY(-2px) !important;
}

.btn-micron-secondary,
.btn-cta-secondary,
.btn-quote {
    background: #eef2f8 !important;
    color: var(--ds-blue) !important;
    border: 2px solid rgba(27,73,122,0.28) !important;
    transition: all 0.22s ease !important;
}

.btn-micron-secondary:hover,
.btn-cta-secondary:hover,
.btn-quote:hover {
    background: var(--ds-blue) !important;
    border-color: var(--ds-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(27,73,122,0.25) !important;
    transform: translateY(-1px) !important;
}

/* ====================================================
   HERO — Blue gradient (section, not header)
   ==================================================== */
.micron-hero {
    background: linear-gradient(140deg, #102b48 0%, #1b497a 40%, #2667ac 100%) !important;
    position: relative;
}

.micron-hero::before {
    content: '';
    position: absolute;
    top: -10%; left: -5%;
    width: 700px; height: 700px;
    background: radial-gradient(ellipse, rgba(38,103,172,0.25) 0%, transparent 65%);
    pointer-events: none; z-index: 1;
}

.micron-hero-bg { position: relative; z-index: 2; }
.hero-wave svg path { fill: var(--ds-bg) !important; }
.micron-title    { color: #ffffff !important; }
.micron-subtitle { color: rgba(255,255,255,0.82) !important; }

.brand-badge-large {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
}

.brand-badge-large i { color: #e8f1fb !important; }

.central-icon {
    background: #ffffff !important;
    color: var(--ds-blue) !important;
    box-shadow: 0 0 0 22px rgba(255,255,255,0.10), 0 0 0 44px rgba(255,255,255,0.05) !important;
}

.floating-card {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(27,73,122,0.12) !important;
    color: var(--ds-text) !important;
    box-shadow: 0 8px 30px rgba(27,73,122,0.18) !important;
}

.floating-card i { color: var(--ds-blue) !important; }

/* ====================================================
   SECTION TAGS
   ==================================================== */
.section-tag,
.section-label {
    background: var(--ds-blue-bg) !important;
    color: var(--ds-blue) !important;
    border: 1px solid var(--ds-blue-bdr) !important;
}

/* ====================================================
   ABOUT BRAND
   ==================================================== */
.about-brand { background: var(--ds-surface) !important; }

.about-image {
    background: #eef2f8 !important;
    color: var(--ds-blue) !important;
    border: 1px solid rgba(27,73,122,0.15) !important;
}

.experience-badge {
    background: linear-gradient(135deg, var(--ds-blue), var(--ds-blue-light)) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 40px rgba(27,73,122,0.28) !important;
}

.experience-badge .years,
.experience-badge .text { color: #ffffff !important; }

.about-content h2 { color: var(--ds-text) !important; }
.about-content p  { color: var(--ds-text-soft) !important; }

.stat-item i {
    background: var(--ds-blue-bg) !important;
    color: var(--ds-blue) !important;
}
.stat-number { color: var(--ds-blue) !important; }
.stat-label  { color: var(--ds-text-soft) !important; }

/* ====================================================
   PRODUCTS
   ==================================================== */
.micron-products { background: var(--ds-bg) !important; }
.products-section-header h2 { color: var(--ds-text) !important; }
.products-section-header p  { color: var(--ds-text-soft) !important; }

.product-category-block            { border-top-color:    var(--ds-border) !important; }
.product-category-block:last-child { border-bottom-color: var(--ds-border) !important; }

.cat-icon.ssd         { background: var(--ds-blue-bg) !important; color: var(--ds-blue) !important; }
.cat-icon.memory      { background: #e8eaf6 !important;            color: #3949ab !important; }
.cat-icon.nvme        { background: #fff8e1 !important;             color: #f9a825 !important; }
.cat-icon.storage-net { background: #e8f5e9 !important;             color: #2e7d32 !important; }

.hpe-left h3 { color: var(--ds-text) !important; }
.hpe-left p  { color: var(--ds-text-soft) !important; }

.view-all-link        { color: var(--ds-blue) !important; font-weight: 600 !important; }
.view-all-link:hover  { color: var(--ds-blue-light) !important; }

.product-card-hpe {
    background: var(--ds-surface) !important;
    border: 1.5px solid var(--ds-border) !important;
    box-shadow: 0 2px 12px rgba(27,73,122,0.06) !important;
    transition: all 0.25s ease !important;
}

.product-card-hpe:hover {
    border-color: var(--ds-blue) !important;
    box-shadow: 0 16px 50px rgba(27,73,122,0.16) !important;
    transform: translateY(-6px) !important;
}

.ssd-bg         { background: rgba(27,73,122,0.07) !important; color: var(--ds-blue) !important; }
.ssd-bg-alt     { background: #dce7f7 !important;              color: var(--ds-blue-dark) !important; }
.memory-bg      { background: #e8eaf6 !important;              color: #3949ab !important; }
.memory-bg-alt  { background: #e3e6f5 !important;              color: #283593 !important; }
.nvme-bg        { background: #fff8e1 !important;              color: #f9a825 !important; }
.nvme-bg-alt    { background: #fff3cd !important;              color: #e65100 !important; }
.storage-net-bg { background: #e8f5e9 !important;              color: #2e7d32 !important; }

.tag.popular   { background: #eef2f8 !important; color: var(--ds-blue) !important; border: 1px solid var(--ds-border) !important; }
.tag.new       { background: #059669 !important; color: #fff !important; }
.tag.ai        { background: var(--ds-blue) !important; color: #fff !important; }
.tag.edge      { background: #ea580c !important; color: #fff !important; }
.tag.high-perf { background: #dc2626 !important; color: #fff !important; }

.card-top h4 { color: var(--ds-text) !important; }
.sku         { color: #94a3b8 !important; }

.card-bottom {
    background: var(--ds-bg) !important;
    border-top: 1px solid rgba(27,73,122,0.07) !important;
}

.desc { color: var(--ds-text-soft) !important; }

.spec-badges span {
    background: #eef2f8 !important;
    border: 1px solid var(--ds-border) !important;
    color: var(--ds-text-soft) !important;
}

/* ====================================================
   VALUE PROP
   ==================================================== */
.value-prop { background: var(--ds-surface) !important; }

.value-card {
    background: var(--ds-bg) !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: 0 2px 10px rgba(27,73,122,0.06) !important;
    transition: all 0.25s ease !important;
}

.value-card:hover {
    border-color: var(--ds-blue) !important;
    box-shadow: 0 8px 28px rgba(27,73,122,0.14) !important;
    transform: translateY(-4px) !important;
}

.value-card .value-icon { color: var(--ds-blue) !important; }
.value-card h4 { color: var(--ds-text) !important; }
.value-card p  { color: var(--ds-text-soft) !important; }
.section-header h2 { color: var(--ds-text) !important; }
.section-header p  { color: var(--ds-text-soft) !important; }

/* ====================================================
   USE CASES
   ==================================================== */
.use-cases { background: var(--ds-bg) !important; }

.use-cases .section-tag {
    background: var(--ds-blue-bg) !important;
    color: var(--ds-blue) !important;
    border-color: var(--ds-blue-bdr) !important;
}

.use-cases .section-header h2 { color: var(--ds-text) !important; }

.use-case-card {
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: 0 2px 10px rgba(27,73,122,0.06) !important;
    transition: all 0.25s ease !important;
}

.use-case-card:hover {
    border-color: var(--ds-blue) !important;
    box-shadow: 0 10px 30px rgba(27,73,122,0.14) !important;
    transform: translateY(-4px) !important;
}

.use-case-icon {
    background: var(--ds-blue) !important;
    color: #ffffff !important;
}

.use-case-card:hover .use-case-icon {
    box-shadow: 0 0 16px rgba(27,73,122,0.35) !important;
}

.use-case-card h4 { color: var(--ds-text) !important; }
.use-case-card p  { color: var(--ds-text-soft) !important; }

/* ====================================================
   WHY US
   ==================================================== */
.why-us { background: var(--ds-surface) !important; }
.why-us h2 { color: var(--ds-text) !important; }

.why-us .section-tag {
    background: var(--ds-blue-bg) !important;
    color: var(--ds-blue) !important;
    border-color: var(--ds-blue-bdr) !important;
}

.lead-text { color: var(--ds-text-soft) !important; }

.benefit-icon {
    background: var(--ds-blue-bg) !important;
    color: var(--ds-blue) !important;
    border: 1px solid var(--ds-blue-bdr) !important;
}

.benefit-content h4 { color: var(--ds-text) !important; }
.benefit-content p  { color: var(--ds-text-soft) !important; }

.partnership-badge {
    background: var(--ds-bg) !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: 0 10px 30px rgba(27,73,122,0.12) !important;
}

.partnership-badge i { color: var(--ds-blue) !important; }
.badge-title    { color: var(--ds-text-soft) !important; }
.badge-subtitle { color: var(--ds-text) !important; }

.region {
    background: var(--ds-bg) !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.region i    { color: var(--ds-blue) !important; }
.region span { color: var(--ds-text-soft) !important; }

.region.active {
    background: var(--ds-blue) !important;
    border-color: var(--ds-blue) !important;
    box-shadow: 0 8px 20px rgba(27,73,122,0.25) !important;
}

.region.active i,
.region.active span { color: #ffffff !important; }

/* ====================================================
   CTA SECTION
   ==================================================== */
.cta-section-micron { background: var(--ds-blue-dark) !important; }

.cta-box-micron {
    background: linear-gradient(135deg, #0e2440 0%, #1b497a 50%, #2667ac 100%) !important;
    border: 1px solid rgba(38,103,172,0.35) !important;
    box-shadow: 0 0 80px rgba(27,73,122,0.18) !important;
}

.cta-box-micron::before {
    background: rgba(255,255,255,0.04) !important;
    opacity: 1 !important;
}

.cta-box-micron h2 { color: #ffffff !important; }
.cta-box-micron p  { color: rgba(255,255,255,0.75) !important; }

/* ====================================================
   BACK TO TOP — blue
   ==================================================== */
.back-to-top {
    background: var(--ds-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(27,73,122,0.35) !important;
}

.back-to-top:hover {
    background: var(--ds-blue-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 28px rgba(27,73,122,0.50) !important;
    transform: translateY(-2px) !important;
}

/* ====================================================
   NOTE: Header (.header, .navbar, .free-call-btn,
         .btn-theme-yellow) and Footer (.zen-mega-footer
         and all .zen-* classes) are INTENTIONALLY
         left unchanged — they inherit from dinstar.css
         or style.css as originally designed.
   ==================================================== */