/*
 * EdOneSolutions: enterprise theme (look and feel inspired by fortinet.com product pages)
 * Loaded LAST on every page, after styles.css and index.html/contact.html inline styles, and overrides them.
 * Original files are unchanged apart from the <link> that loads this file.
 *
 * Language: Inter, charcoal utility strip over a white nav, full-bleed red hero with angled bands,
 * left-aligned headings with a short red rule, icon grids with thin dividers, dark charcoal bands, pill buttons.
 */

:root {
    --ed-red: #da291c;
    --ed-red-dark: #b71f14;
    --ed-red-deep: #8f160d;
    --ed-ink: #111111;
    --ed-charcoal: #2b2b2b;
    --ed-graphite: #1f1f1f;
    --ed-text: #1a1a1a;
    --ed-text-2: #4a4a4a;
    --ed-muted: #767676;
    --ed-line: #e3e3e3;
    --ed-page: #f4f4f4;

    /* remap the site's own palette so every existing accent follows */
    --orange-500: #da291c;
    --orange-600: #b71f14;
    --navy-900: #111111;
    --navy-800: #1f1f1f;
    --navy-700: #2b2b2b;
    --slate-600: #4a4a4a;
    --slate-500: #767676;
    --slate-50: #f4f4f4;
}

/* ---------- Base ---------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    color: var(--ed-text);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6, .logo, .logo-text { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important; }
h1, h2, h3 { letter-spacing: -0.025em; font-weight: 800; }
a { color: var(--ed-red); }

/* ---------- Header: dark utility strip + white nav ---------- */
header {
    background: #fff !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--ed-line) !important;
    box-shadow: none !important;
    padding-top: 34px;
}
header::before {
    content: 'ENTERPRISE AI  ·  CLOUD INFRASTRUCTURE  ·  SECURITY';
    position: absolute; top: 0; left: 0; right: 0; height: 34px;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 max(24px, calc((100vw - 1280px) / 2 + 24px));
    background: var(--ed-charcoal); color: #e6e6e6;
    font-size: 12px; font-weight: 600; letter-spacing: .08em; white-space: pre;
}
header.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.08) !important; }
nav { padding: 14px 24px !important; }
.logo-img { height: 42px; }
.logo-text, .logo { color: var(--ed-ink) !important; font-weight: 800 !important; letter-spacing: -0.03em; }
.nav-links { gap: 34px; }
.nav-links a { color: var(--ed-text) !important; font-weight: 600 !important; font-size: 15px !important; }
.nav-links a:hover { color: var(--ed-red) !important; }
.nav-links a::after { background: var(--ed-red) !important; height: 2px !important; }

/* ---------- Hero: full-bleed red with angled bands ---------- */
.hero {
    text-align: left !important;
    padding: 190px 0 96px !important;
    color: #fff;
    background-color: var(--ed-red) !important;
    background-image:
        linear-gradient(115deg, transparent 58%, rgba(0,0,0,.10) 58%, rgba(0,0,0,.10) 64%, transparent 64%),
        linear-gradient(115deg, transparent 67%, rgba(0,0,0,.14) 67%, rgba(0,0,0,.14) 74%, transparent 74%),
        linear-gradient(115deg, transparent 77%, rgba(0,0,0,.18) 77%, rgba(0,0,0,.18) 86%, transparent 86%),
        linear-gradient(90deg, #d22a1e 0%, #c3241a 100%) !important;
    border-bottom: 0 !important;
}
.hero::before, .hero::after { display: none !important; }
.hero h1, .hero .hero-content h1 {
    color: #fff !important;
    font-size: 54px !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    max-width: 820px !important;
    margin: 0 0 20px !important;
    text-align: left !important;
}
.hero p, .hero .hero-subtitle, .hero .subtitle {
    color: rgba(255,255,255,.92) !important;
    font-size: 19px !important;
    line-height: 1.6 !important;
    max-width: 680px !important;
    margin: 0 0 34px !important;
    text-align: left !important;
}
.hero-content { text-align: left !important; max-width: none !important; margin: 0 !important; }
.hero-highlight { color: #fff !important; background: none !important; -webkit-text-fill-color: #fff !important; box-shadow: inset 0 -0.14em 0 rgba(255,255,255,.35); }
.hero-badge {
    display: inline-flex !important; align-items: center; gap: 8px;
    background: #fff !important; color: var(--ed-ink) !important; border: 0 !important;
    border-radius: 4px !important; padding: 8px 14px !important; margin: 0 0 26px !important;
    font-size: 13px !important; font-weight: 600 !important; box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
}
.hero-badge .badge-dot { background: var(--ed-red) !important; }
.hero-buttons { justify-content: flex-start !important; }
.hero .btn-primary, .hero .cta-button {
    background: #fff !important; color: var(--ed-ink) !important; border: 2px solid #fff !important;
}
.hero .btn-primary:hover, .hero .cta-button:hover { background: transparent !important; color: #fff !important; }
.hero .btn-secondary {
    background: transparent !important; color: #fff !important; border: 2px solid #fff !important;
}
.hero .btn-secondary:hover { background: #fff !important; color: var(--ed-ink) !important; }

/* ---------- Buttons: pill, uppercase ---------- */
.btn-primary, .btn-secondary, .cta-button, .support-btn, .job-apply-btn, .course-btn, .submit-btn,
button[type="submit"], input[type="submit"] {
    border-radius: 999px !important;
    padding: 13px 28px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
.btn-primary, .cta-button, .support-btn, .job-apply-btn, .course-btn, .submit-btn, button[type="submit"], input[type="submit"] {
    background: var(--ed-red) !important; color: #fff !important; border: 2px solid var(--ed-red) !important;
}
.btn-primary:hover, .cta-button:hover, .support-btn:hover, .job-apply-btn:hover, .course-btn:hover, .submit-btn:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
    background: var(--ed-red-dark) !important; border-color: var(--ed-red-dark) !important; color: #fff !important;
}
.btn-secondary { background: #fff !important; color: var(--ed-ink) !important; border: 2px solid var(--ed-ink) !important; }
.btn-secondary:hover { background: var(--ed-ink) !important; color: #fff !important; }
.btn-primary svg, .btn-secondary svg { transition: none !important; }

/* ---------- Trust / stats strip ---------- */
.trust-bar { background: #fff !important; border-bottom: 1px solid var(--ed-line) !important; padding: 44px 0 !important; }
.trust-label { color: var(--ed-muted) !important; font-weight: 700 !important; letter-spacing: .12em !important; }
.trust-stats { gap: 0 !important; }
.trust-stat { padding: 8px 20px; border-left: 1px dashed #cfcfcf; }
.trust-stat:first-child { border-left: 0; }
.trust-stat-number, .about-stat-number, .stat-number { color: var(--ed-ink) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.trust-stat-label, .about-stat-label, .stat-label { color: var(--ed-muted) !important; font-weight: 600 !important; }

/* ---------- Section headings: left-aligned, short red rule ---------- */
.section-header, .section-intro { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.section-label {
    color: var(--ed-red) !important; background: none !important; padding: 0 !important;
    font-size: 13px !important; font-weight: 800 !important; letter-spacing: .14em !important;
}
.section-title, .section h2, .section-intro h2, .section-header h2, .about-content h2, .cta-section h2 {
    text-align: left !important;
    font-size: 36px !important; line-height: 1.15 !important; font-weight: 800 !important;
    color: var(--ed-ink) !important;
    position: relative; padding-bottom: 18px; margin-bottom: 22px !important;
}
.section-title::after, .section h2::after, .section-intro h2::after, .section-header h2::after, .about-content h2::after, .cta-section h2::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; background: var(--ed-red);
}
.section-description, .section-intro p, .section-header p {
    text-align: left !important; margin-left: 0 !important; margin-right: 0 !important;
    max-width: 860px !important; color: var(--ed-text-2) !important; font-size: 17px !important;
}
.content, .features, .about, .content-section { background: #fff !important; }

/* ---------- Feature grid: icon tiles with thin dividers, uppercase titles ---------- */
.features-grid {
    gap: 0 !important;
    border-top: 1px dashed #cfcfcf;
}
.feature-card {
    background: #fff !important;
    border: 0 !important;
    border-right: 1px dashed #cfcfcf !important;
    border-bottom: 1px dashed #cfcfcf !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center;
    padding: 38px 30px 34px !important;
    transform: none !important;
    transition: background .2s ease !important;
}
.feature-card:hover { background: #fafafa !important; transform: none !important; box-shadow: none !important; }
.feature-icon {
    width: auto !important; min-width: 64px; height: 64px !important;
    margin: 0 auto 18px !important; padding: 0 12px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: #fff !important; color: var(--ed-red) !important;
    border: 2px solid var(--ed-red) !important; border-radius: 12px !important;
    font-size: 13px !important; font-weight: 800 !important; letter-spacing: .06em;
    overflow: visible !important; white-space: nowrap; box-shadow: none !important;
}
.feature-card:hover .feature-icon { background: var(--ed-red) !important; color: #fff !important; transform: none !important; }
.feature-title, .feature-card h3, .feature-card h4 {
    font-size: 15px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em !important;
    color: var(--ed-ink) !important; margin-bottom: 10px !important;
}
.feature-description, .feature-card p { color: var(--ed-text-2) !important; font-size: 15px !important; line-height: 1.6 !important; }
.feature-link { color: var(--ed-red) !important; font-weight: 700 !important; }

/* ---------- Cards used on the inner pages ---------- */
.showcase-card, .capability-item, .stat-card, .value-card, .team-card, .benefit-card, .support-card, .job-card,
.course-card, .forum-card, .platform-card, .expertise-card, .contact-item, .faq-item, .doc-section, .integration-logo {
    background: #fff !important;
    border: 1px solid var(--ed-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
}
.showcase-card:hover, .capability-item:hover, .stat-card:hover, .value-card:hover, .team-card:hover, .benefit-card:hover,
.support-card:hover, .job-card:hover, .course-card:hover, .forum-card:hover, .platform-card:hover, .expertise-card:hover {
    border-color: var(--ed-ink) !important; transform: none !important; box-shadow: 0 10px 28px rgba(0,0,0,.07) !important;
}
.showcase-image.gradient-orange  { background: linear-gradient(135deg, #da291c 0%, #8f160d 100%) !important; }
.showcase-image.gradient-purple  { background: linear-gradient(135deg, #3a3a3a 0%, #111 100%) !important; }
.showcase-image.gradient-emerald { background: linear-gradient(135deg, #6b6b6b 0%, #2b2b2b 100%) !important; }
.stats-section { background: var(--ed-page) !important; }
.priority-badge, .job-type, .course-level, .post-count { border-radius: 999px !important; }
.code-block, pre { background: var(--ed-graphite) !important; color: #eaeaea !important; border-radius: 8px !important; }
.faq-question { font-weight: 700 !important; }

/* ---------- Dark band (like "The Fortinet Difference") ---------- */
.cta-section {
    background: linear-gradient(180deg, #3a3a3a 0%, #262626 100%) !important;
    text-align: left !important;
}
.cta-section::before, .cta-section::after { display: none !important; }
.cta-section .container { text-align: left !important; }
.cta-content { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; max-width: 820px !important; }
.cta-section h2 { color: #fff !important; }
.cta-section p { color: rgba(255,255,255,.8) !important; text-align: left !important; margin-left: 0 !important; }
.cta-section .hero-buttons, .cta-section .cta-buttons, .cta-section div[class*="buttons"] { justify-content: flex-start !important; }
.cta-section .btn-secondary { background: transparent !important; color: #fff !important; border-color: #fff !important; }
.cta-section .btn-secondary:hover { background: #fff !important; color: var(--ed-ink) !important; }

/* ---------- About ---------- */
.about { background: var(--ed-page) !important; }
.about-stats { background: #fff !important; border: 1px solid var(--ed-line) !important; border-radius: 8px !important; box-shadow: none !important; }
.about-stat { border-left: 3px solid var(--ed-red); padding-left: 14px; }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    font-family: inherit !important; border-radius: 6px !important; border: 1px solid #cfcfcf !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--ed-ink) !important; box-shadow: 0 0 0 3px rgba(17,17,17,.1) !important; outline: none !important; }

/* ---------- Footer ---------- */
footer { background: var(--ed-graphite) !important; border-top: 4px solid var(--ed-red) !important; }
footer, footer p, .footer-brand p { color: #b8b8b8 !important; }
.footer-brand h3, .footer-brand .logo-text, footer h4 { color: #fff !important; }
footer h4 { text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px !important; }
.footer-links a, footer a { color: #cfcfcf !important; }
.footer-links a:hover, footer a:hover { color: #fff !important; }
.footer-bottom { border-top-color: #3a3a3a !important; color: #8a8a8a !important; }

/* ---------- Cookie banner ---------- */
.cookie-content { border-radius: 8px !important; }
.cookie-accept { background: var(--ed-red) !important; color: #fff !important; border-radius: 999px !important; }
.cookie-decline { border-radius: 999px !important; }

/* ---------- Legal pages ---------- */
.legal-nav a.active, .legal-nav a:hover { color: var(--ed-red) !important; border-color: var(--ed-red) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    header::before { justify-content: center; content: 'AI  ·  CLOUD  ·  SECURITY'; padding: 0 16px; }
    .hero { padding: 150px 0 70px !important; background-image: linear-gradient(90deg, #d22a1e 0%, #c3241a 100%) !important; }
    .hero h1, .hero .hero-content h1 { font-size: 36px !important; }
    .hero p, .hero .hero-subtitle, .hero .subtitle { font-size: 17px !important; }
    .section-title, .section h2, .section-intro h2, .section-header h2, .about-content h2, .cta-section h2 { font-size: 28px !important; }
    .trust-stat { border-left: 0; }
    .feature-card { border-right: 0 !important; }
}