/* =============================================
   TABATALK-1.CSS — Middle Sections Only
   Header & Footer: UNCHANGED (original styles kept)
   Main Sections: TabaTalk-Inspired Green Palette
   Palette: Deep Forest Green · Mint · White
   Primary: #00714c / #00865b
   ============================================= */

/* ── SECTION-LEVEL COLOR VARS ── */
:root {
    --tt-green:          #00714c;
    --tt-green-light:    #00865b;
    --tt-green-bright:   #00ae75;
    --tt-green-dark:     #003d28;
    --tt-green-deeper:   #002218;
    --tt-mint:           #ebf8ee;
    --tt-mint-medium:    #d0edda;
    --tt-mint-dark:      #a8d8ba;
    --tt-mint-bdr:       rgba(0,113,76,0.20);
    --tt-bg:             #f5f9f7;
    --tt-surface:        #ffffff;
    --tt-dark:           #152822;
    --tt-dark-2:         #0d1f18;
    --tt-text:           #152822;
    --tt-text-soft:      #3d5a4e;
    --tt-border:         #c8ddd5;
}

/* ====================================================
   GLOBAL BODY — soft green-tinted background
   ==================================================== */
body {
    background: var(--tt-bg) !important;
    color: var(--tt-text) !important;
}

/* ====================================================
   BUTTONS — Green themed
   ==================================================== */
.btn-micron-primary,
.btn-cta-primary,
.btn-select {
    background: var(--tt-green) !important;
    color: #ffffff !important;
    border: 2px solid var(--tt-green) !important;
    box-shadow: 0 4px 18px rgba(0,113,76,0.30) !important;
    font-weight: 700 !important;
    transition: all 0.22s ease !important;
}

.btn-micron-primary:hover,
.btn-cta-primary:hover,
.btn-select:hover {
    background: var(--tt-green-light) !important;
    border-color: var(--tt-green-light) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 28px rgba(0,113,76,0.40) !important;
    transform: translateY(-2px) !important;
}

/* Secondary — used on dark hero backgrounds */
.btn-micron-secondary,
.btn-cta-secondary {
    background: transparent !important;
    color: rgba(255,255,255,0.90) !important;
    border: 2px solid rgba(255,255,255,0.45) !important;
    font-weight: 600 !important;
    transition: all 0.22s ease !important;
}

.btn-micron-secondary:hover,
.btn-cta-secondary:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.75) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* btn-quote — lives inside light card-bottom */
.btn-quote {
    background: transparent !important;
    color: var(--tt-green) !important;
    border: 2px solid var(--tt-green) !important;
    font-weight: 600 !important;
    transition: all 0.22s ease !important;
}

.btn-quote:hover {
    background: var(--tt-green) !important;
    color: #ffffff !important;
    border-color: var(--tt-green) !important;
    transform: translateY(-1px) !important;
}

/* ====================================================
   HERO — Deep forest green (TabaTalk style)
   ==================================================== */
.micron-hero {
    background: linear-gradient(145deg, var(--tt-green-deeper) 0%, var(--tt-dark) 50%, var(--tt-green-dark) 100%) !important;
    position: relative;
    overflow: hidden;
}

.micron-hero::before {
    content: '';
    position: absolute;
    top: -15%; right: -5%;
    width: 650px; height: 650px;
    background: radial-gradient(ellipse, rgba(0,174,117,0.14) 0%, transparent 65%);
    pointer-events: none; z-index: 1;
}

.micron-hero-bg { position: relative; z-index: 2; }
.hero-wave svg path { fill: var(--tt-bg) !important; }
.micron-title    { color: #ffffff !important; }
.micron-subtitle { color: rgba(255,255,255,0.78) !important; }

.brand-badge-large {
    background: rgba(0,113,76,0.20) !important;
    color: var(--tt-green-bright) !important;
    border: 1px solid rgba(0,174,117,0.35) !important;
}

.brand-badge-large i { color: var(--tt-green-bright) !important; }

.central-icon {
    background: var(--tt-green) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 22px rgba(0,113,76,0.12), 0 0 0 44px rgba(0,113,76,0.06) !important;
}

.floating-card {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(0,113,76,0.18) !important;
    color: var(--tt-text) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.20) !important;
}

.floating-card i { color: var(--tt-green) !important; }

/* ====================================================
   SECTION TAGS
   ==================================================== */
.section-tag,
.section-label {
    background: rgba(0,113,76,0.10) !important;
    color: var(--tt-green) !important;
    border: 1px solid rgba(0,113,76,0.28) !important;
}

/* ====================================================
   ABOUT BRAND — Light mint
   ==================================================== */
.about-brand { background: var(--tt-mint) !important; }

.about-image {
    background: var(--tt-mint-medium) !important;
    color: var(--tt-green) !important;
    border: 1px solid var(--tt-mint-bdr) !important;
}

.experience-badge {
    background: linear-gradient(135deg, var(--tt-dark), var(--tt-green-dark)) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.30) !important;
    border: 2px solid var(--tt-green-bright) !important;
}

.experience-badge .years { color: var(--tt-green-bright) !important; }
.experience-badge .text  { color: rgba(255,255,255,0.82) !important; }

.about-content h2 { color: var(--tt-text) !important; }
.about-content p  { color: var(--tt-text-soft) !important; }

.stat-item i {
    background: rgba(0,113,76,0.12) !important;
    color: var(--tt-green) !important;
}
.stat-number { color: var(--tt-dark) !important; }
.stat-label  { color: var(--tt-text-soft) !important; }

/* ====================================================
   PRODUCTS — Clean bg
   ==================================================== */
.micron-products { background: var(--tt-bg) !important; }
.products-section-header h2 { color: var(--tt-text) !important; }
.products-section-header p  { color: var(--tt-text-soft) !important; }

.product-category-block            { border-top-color:    var(--tt-border) !important; }
.product-category-block:last-child { border-bottom-color: var(--tt-border) !important; }

.cat-icon.ssd         { background: rgba(0,113,76,0.12) !important; color: var(--tt-green) !important; }
.cat-icon.memory      { background: var(--tt-mint-medium) !important; color: var(--tt-green-dark) !important; }
.cat-icon.nvme        { background: #e6f4f1 !important;               color: var(--tt-green-light) !important; }
.cat-icon.storage-net { background: #dcf0e8 !important;               color: var(--tt-green) !important; }

.hpe-left h3 { color: var(--tt-text) !important; }
.hpe-left p  { color: var(--tt-text-soft) !important; }

.view-all-link       { color: var(--tt-green) !important; font-weight: 600 !important; }
.view-all-link:hover { color: var(--tt-green-light) !important; }

.product-card-hpe {
    background: var(--tt-surface) !important;
    border: 1.5px solid var(--tt-border) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
    transition: all 0.25s ease !important;
}

.product-card-hpe:hover {
    border-color: var(--tt-green) !important;
    box-shadow: 0 16px 50px rgba(0,113,76,0.16) !important;
    transform: translateY(-6px) !important;
}

.ssd-bg         { background: rgba(0,113,76,0.09) !important;  color: var(--tt-green) !important; }
.ssd-bg-alt     { background: rgba(0,113,76,0.16) !important;  color: var(--tt-green-dark) !important; }
.memory-bg      { background: var(--tt-mint-medium) !important; color: var(--tt-green-dark) !important; }
.memory-bg-alt  { background: #c6e8d6 !important;              color: var(--tt-green-dark) !important; }
.nvme-bg        { background: #ddf2e9 !important;              color: var(--tt-green) !important; }
.nvme-bg-alt    { background: #cceadb !important;              color: var(--tt-green-dark) !important; }
.storage-net-bg { background: #d4ede2 !important;              color: var(--tt-green) !important; }

.tag.popular   { background: rgba(0,113,76,0.12) !important; color: var(--tt-green) !important; border: 1px solid rgba(0,113,76,0.30) !important; }
.tag.new       { background: var(--tt-green-bright) !important; color: #fff !important; }
.tag.ai        { background: var(--tt-dark) !important;         color: var(--tt-green-bright) !important; }
.tag.edge      { background: #0f766e !important;                color: #fff !important; }
.tag.high-perf { background: #0d9488 !important;                color: #fff !important; }

.card-top h4 { color: var(--tt-text) !important; }
.sku         { color: #94a3b8 !important; }

.card-bottom {
    background: var(--tt-bg) !important;
    border-top: 1px solid var(--tt-border) !important;
}

.desc { color: var(--tt-text-soft) !important; }

.spec-badges span {
    background: var(--tt-mint) !important;
    border: 1px solid var(--tt-border) !important;
    color: var(--tt-text-soft) !important;
}

/* ====================================================
   VALUE PROP — Mint green tinted
   ==================================================== */
.value-prop { background: var(--tt-mint) !important; }

.value-card {
    background: var(--tt-surface) !important;
    border: 1px solid var(--tt-mint-bdr) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    transition: all 0.25s ease !important;
}

.value-card:hover {
    border-color: var(--tt-green) !important;
    box-shadow: 0 8px 28px rgba(0,113,76,0.16) !important;
    transform: translateY(-4px) !important;
}

.value-card .value-icon { color: var(--tt-green) !important; }
.value-card h4 { color: var(--tt-text) !important; }
.value-card p  { color: var(--tt-text-soft) !important; }
.section-header h2 { color: var(--tt-text) !important; }
.section-header p  { color: var(--tt-text-soft) !important; }

/* ====================================================
   USE CASES — Light bg
   ==================================================== */
.use-cases { background: var(--tt-bg) !important; }

.use-cases .section-tag {
    background: rgba(0,113,76,0.10) !important;
    color: var(--tt-green) !important;
    border-color: rgba(0,113,76,0.28) !important;
}

.use-cases .section-header h2 { color: var(--tt-text) !important; }

.use-case-card {
    background: var(--tt-surface) !important;
    border: 1px solid var(--tt-border) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
    transition: all 0.25s ease !important;
}

.use-case-card:hover {
    border-color: var(--tt-green) !important;
    box-shadow: 0 10px 30px rgba(0,113,76,0.16) !important;
    transform: translateY(-4px) !important;
}

.use-case-icon {
    background: var(--tt-green) !important;
    color: #ffffff !important;
}

.use-case-card:hover .use-case-icon {
    box-shadow: 0 0 16px rgba(0,113,76,0.35) !important;
}

.use-case-card h4 { color: var(--tt-text) !important; }
.use-case-card p  { color: var(--tt-text-soft) !important; }

/* ====================================================
   WHY US — White surface
   ==================================================== */
.why-us { background: var(--tt-surface) !important; }
.why-us h2 { color: var(--tt-text) !important; }

.why-us .section-tag {
    background: rgba(0,113,76,0.10) !important;
    color: var(--tt-green) !important;
    border-color: rgba(0,113,76,0.28) !important;
}

.lead-text { color: var(--tt-text-soft) !important; }

.benefit-icon {
    background: rgba(0,113,76,0.10) !important;
    color: var(--tt-green) !important;
    border: 1px solid rgba(0,113,76,0.25) !important;
}

.benefit-content h4 { color: var(--tt-text) !important; }
.benefit-content p  { color: var(--tt-text-soft) !important; }

.partnership-badge {
    background: var(--tt-mint) !important;
    border: 1px solid var(--tt-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07) !important;
}

.partnership-badge i { color: var(--tt-green) !important; }
.badge-title    { color: var(--tt-text-soft) !important; }
.badge-subtitle { color: var(--tt-text) !important; }

.region {
    background: var(--tt-bg) !important;
    border: 1px solid var(--tt-border) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.region i    { color: var(--tt-green) !important; }
.region span { color: var(--tt-text-soft) !important; }

.region.active {
    background: var(--tt-green) !important;
    border-color: var(--tt-green) !important;
    box-shadow: 0 8px 20px rgba(0,113,76,0.30) !important;
}

.region.active i,
.region.active span { color: #ffffff !important; }

/* ====================================================
   CTA SECTION — Deep green
   ==================================================== */
.cta-section-micron { background: var(--tt-green) !important; }

.cta-box-micron {
    background: linear-gradient(135deg, var(--tt-green) 0%, var(--tt-green-light) 60%, var(--tt-green-bright) 100%) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    box-shadow: 0 0 60px rgba(0,113,76,0.30) !important;
}

.cta-box-micron::before {
    background: rgba(255,255,255,0.06) !important;
    opacity: 1 !important;
}

.cta-box-micron h2 { color: #ffffff !important; }
.cta-box-micron p  { color: rgba(255,255,255,0.80) !important; }

.cta-section-micron .btn-cta-primary,
.cta-box-micron .btn-cta-primary {
    background: #ffffff !important;
    color: var(--tt-green) !important;
    border-color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
}

.cta-section-micron .btn-cta-primary:hover,
.cta-box-micron .btn-cta-primary:hover {
    background: var(--tt-mint) !important;
    color: var(--tt-green-dark) !important;
    transform: translateY(-2px) !important;
}

.cta-section-micron .btn-cta-secondary,
.cta-box-micron .btn-cta-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255,255,255,0.50) !important;
}

.cta-section-micron .btn-cta-secondary:hover,
.cta-box-micron .btn-cta-secondary:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.85) !important;
}

/* ====================================================
   BACK TO TOP — Green
   ==================================================== */
.back-to-top {
    background: var(--tt-green) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0,113,76,0.40) !important;
}

.back-to-top:hover {
    background: var(--tt-green-light) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 28px rgba(0,113,76,0.55) !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 style.css
         as originally designed.
   ==================================================== */