/* =============================================
   YEALINK-1.CSS — Middle Sections Only
   Header: SAME blue as existing (unchanged)
   Footer: SAME blue as existing (unchanged)
   Middle Sections:
     - Backgrounds: white / #f5f7f7 (light)
     - Text: dark #151d28
     - Buttons & links: GREEN #078855 ONLY
     - No green tints on backgrounds
   ============================================= */

/* ── GREEN VARS for sections ── */
:root {
    --yl-green:       #078855;
    --yl-green-light: #0ac279;
    --yl-green-dark:  #044e31;
    --yl-bg:          #f5f7f7;
    --yl-surface:     #ffffff;
    --yl-text:        #151d28;
    --yl-text-soft:   #475569;
    --yl-border:      rgba(0,0,0,0.09);
    --yl-green-bg:    rgba(7,136,85,0.07);
    --yl-green-bdr:   rgba(7,136,85,0.18);
}

/* ====================================================
   GLOBAL BODY — light/white (no green tint)
   ==================================================== */
body {
    background: var(--yl-bg) !important;
    color: var(--yl-text) !important;
}

/* ====================================================
   SECTION BUTTONS — GREEN only
   ==================================================== */
.btn-micron-primary,
.btn-cta-primary,
.btn-select {
    background: #078855 !important;
    color: #ffffff !important;
    border: 2px solid #078855 !important;
    box-shadow: 0 4px 16px rgba(7,136,85,0.25) !important;
    transition: all 0.22s ease !important;
}
.btn-micron-primary:hover,
.btn-cta-primary:hover,
.btn-select:hover {
    background: #0ac279 !important;
    border-color: #0ac279 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(10,194,121,0.35) !important;
    transform: translateY(-2px) !important;
}

.btn-micron-secondary,
.btn-cta-secondary,
.btn-quote {
    background: #ffffff !important;
    color: #078855 !important;
    border: 2px solid #078855 !important;
    transition: all 0.22s ease !important;
}
.btn-micron-secondary:hover,
.btn-cta-secondary:hover,
.btn-quote:hover {
    background: #078855 !important;
    border-color: #078855 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(7,136,85,0.28) !important;
    transform: translateY(-1px) !important;
}

/* ====================================================
   HERO — dark near-black
   ==================================================== */
.micron-hero {
    background: linear-gradient(140deg, #0b0d10 0%, #101215 55%, #181c22 100%) !important;
    position: relative;
}
.micron-hero::before {
    content: '';
    position: absolute;
    top: -10%; left: -5%;
    width: 700px; height: 700px;
    background: radial-gradient(ellipse, rgba(7,136,85,0.10) 0%, transparent 65%);
    pointer-events: none; z-index: 1;
}
.micron-hero-bg { position: relative; z-index: 2; }
.hero-wave svg path { fill: var(--yl-bg) !important; }
.micron-title    { color: #ffffff !important; }
.micron-subtitle { color: rgba(255,255,255,0.75) !important; }

.brand-badge-large {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: none !important;
}
.brand-badge-large i { color: #0ac279 !important; }

.central-icon {
    background: #078855 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 22px rgba(7,136,85,0.10), 0 0 0 44px rgba(7,136,85,0.05) !important;
}
.floating-card {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    color: #151d28 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18) !important;
}
.floating-card i { color: #078855 !important; }

/* ====================================================
   SECTION TAGS — green label
   ==================================================== */
.section-tag,
.section-label {
    background: rgba(7,136,85,0.07) !important;
    color: #078855 !important;
    border: 1px solid rgba(7,136,85,0.18) !important;
}

/* ====================================================
   ABOUT BRAND — white bg, dark text
   ==================================================== */
.about-brand { background: #ffffff !important; }
.about-image {
    background: #f0f2f2 !important;
    color: #078855 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}
.about-image::before {
    background: radial-gradient(circle, rgba(7,136,85,0.06) 0%, transparent 70%) !important;
}
.experience-badge {
    background: #078855 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 40px rgba(7,136,85,0.28) !important;
}
.experience-badge .years,
.experience-badge .text { color: #ffffff !important; }

.about-content h2 { color: #151d28 !important; }
.about-content p  { color: #475569 !important; }

.stat-item i { background: rgba(7,136,85,0.08) !important; color: #078855 !important; }
.stat-number { color: #078855 !important; }
.stat-label  { color: #475569 !important; }

/* ====================================================
   PRODUCTS — soft gray bg, white cards
   ==================================================== */
.micron-products { background: #f5f7f7 !important; }
.products-section-header h2 { color: #151d28 !important; }
.products-section-header p  { color: #475569 !important; }

.product-category-block            { border-top-color:    rgba(0,0,0,0.09) !important; }
.product-category-block:last-child { border-bottom-color: rgba(0,0,0,0.09) !important; }

.cat-icon.ssd         { background: rgba(7,136,85,0.08) !important; color: #078855 !important; }
.cat-icon.memory      { background: #e0f2fe !important;              color: #0369a1 !important; }
.cat-icon.nvme        { background: #fff8e1 !important;               color: #f9a825 !important; }
.cat-icon.storage-net { background: #e8f5e9 !important;               color: #2e7d32 !important; }

.hpe-left h3 { color: #151d28 !important; }
.hpe-left p  { color: #475569 !important; }

/* links GREEN */
.view-all-link       { color: #078855 !important; font-weight: 600 !important; }
.view-all-link:hover { color: #0ac279 !important; }

.product-card-hpe {
    background: #ffffff !important;
    border: 1.5px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    transition: all 0.25s ease !important;
}
.product-card-hpe:hover {
    border-color: #078855 !important;
    box-shadow: 0 16px 50px rgba(7,136,85,0.14) !important;
    transform: translateY(-6px) !important;
}

.ssd-bg         { background: rgba(7,136,85,0.07) !important; color: #078855 !important; }
.ssd-bg-alt     { background: #e6f4ee !important;              color: #044e31 !important; }
.memory-bg      { background: #e0f2fe !important;              color: #0369a1 !important; }
.memory-bg-alt  { background: #dbeafe !important;              color: #1e40af !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: #f0f2f2 !important; color: #151d28 !important; border: 1px solid rgba(0,0,0,0.12) !important; }
.tag.new       { background: #078855 !important; color: #fff !important; }
.tag.ai        { background: #101215 !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: #151d28 !important; }
.sku         { color: #94a3b8 !important; }

.card-bottom {
    background: #f5f7f7 !important;
    border-top: 1px solid rgba(0,0,0,0.07) !important;
}
.desc { color: #475569 !important; }

.spec-badges span {
    background: #f0f2f2 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    color: #475569 !important;
}

/* ====================================================
   VALUE PROP — white
   ==================================================== */
.value-prop { background: #ffffff !important; }

.value-card {
    background: #f5f7f7 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: all 0.25s ease !important;
}
.value-card:hover {
    border-color: #078855 !important;
    box-shadow: 0 8px 28px rgba(7,136,85,0.14) !important;
    transform: translateY(-4px) !important;
}
.value-card .value-icon { color: #078855 !important; }
.value-card h4          { color: #151d28 !important; }
.value-card p           { color: #475569 !important; }
.section-header h2      { color: #151d28 !important; }
.section-header p       { color: #475569 !important; }

/* ====================================================
   USE CASES — soft gray
   ==================================================== */
.use-cases { background: #f5f7f7 !important; }

.use-cases .section-tag {
    background: rgba(7,136,85,0.07) !important;
    color: #078855 !important;
    border-color: rgba(7,136,85,0.18) !important;
}
.use-cases .section-header h2 { color: #151d28 !important; }

.use-case-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: all 0.25s ease !important;
}
.use-case-card:hover {
    border-color: #078855 !important;
    box-shadow: 0 10px 30px rgba(7,136,85,0.14) !important;
    transform: translateY(-4px) !important;
}
/* icon GREEN */
.use-case-icon { background: #078855 !important; color: #ffffff !important; }
.use-case-card:hover .use-case-icon { box-shadow: 0 0 16px rgba(7,136,85,0.35) !important; }
.use-case-card h4 { color: #151d28 !important; }
.use-case-card p  { color: #475569 !important; }

/* ====================================================
   WHY US — white
   ==================================================== */
.why-us { background: #ffffff !important; }
.why-us h2 { color: #151d28 !important; }

.why-us .section-tag {
    background: rgba(7,136,85,0.07) !important;
    color: #078855 !important;
    border-color: rgba(7,136,85,0.18) !important;
}
.lead-text { color: #475569 !important; }

.benefit-icon {
    background: rgba(7,136,85,0.07) !important;
    color: #078855 !important;
    border: 1px solid rgba(7,136,85,0.16) !important;
}
.benefit-content h4 { color: #151d28 !important; }
.benefit-content p  { color: #475569 !important; }

.partnership-badge {
    background: #f5f7f7 !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}
.partnership-badge i { color: #078855 !important; }
.badge-title    { color: #475569 !important; }
.badge-subtitle { color: #151d28 !important; }

.region {
    background: #f5f7f7 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.region i    { color: #078855 !important; }
.region span { color: #475569 !important; }

/* active region — solid GREEN fill */
.region.active {
    background: #078855 !important;
    border-color: #078855 !important;
    box-shadow: 0 8px 20px rgba(7,136,85,0.25) !important;
}
.region.active i, .region.active span { color: #ffffff !important; }

/* ====================================================
   CTA SECTION — dark banner
   ==================================================== */
.cta-section-micron { background: #101215 !important; }

.cta-box-micron {
    background: linear-gradient(135deg, #0b0d10 0%, #101215 60%, #181c22 100%) !important;
    border: 1px solid rgba(7,136,85,0.22) !important;
    box-shadow: 0 0 80px rgba(7,136,85,0.08) !important;
}
.cta-box-micron::before {
    background: rgba(7,136,85,0.05) !important;
    opacity: 1 !important;
}
.cta-box-micron h2 { color: #ffffff !important; }
.cta-box-micron p  { color: rgba(255,255,255,0.70) !important; }

/* ====================================================
   BACK TO TOP — green
   ==================================================== */
.back-to-top {
    background: #078855 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(7,136,85,0.35) !important;
}
.back-to-top:hover {
    background: #044e31 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 28px rgba(7,136,85,0.48) !important;
    transform: translateY(-2px) !important;
}

/* ====================================================
   NOTE: Header (.header, .navbar-nav, .free-call-btn,
   .btn-theme-yellow) and Footer (.zen-mega-footer and
   all .zen-* classes) are INTENTIONALLY UNCHANGED —
   they keep the original blue styles from yealink.css
   ==================================================== */