/* =========================================================
   ePostcode site-wide brand feel
   Align remaining content pages with homepage / product polish
   Palette: #EC2E5E · #8B1538 · #1A1A1A
   ========================================================= */

:root {
    --primary-color: #EC2E5E;
    --primary-dark: #D11E4A;
    --primary-light: #FF4576;
    --primary-deep: #8B1538;
    --secondary-color: #1A1A1A;
    --gradient-start: #EC2E5E;
    --gradient-end: #8B1538;
    --text-dark: #2C2C2C;
    --text-light: #666666;
    --bg-light: #F8F9FA;
    --border-color: #E5E7EB;
}

/* Premium page heroes (shared) */
.page-hero,
.dd-hero,
.ob-hero,
.contact-hero,
.about-hero,
.enterprise-hero,
.getaddress-hero,
.demos-hero,
.developers-hero,
.faq-hero,
.resellers-hero,
.api-hero,
.mcp-hero,
.switch-hero,
.blog-hero,
.content-hero {
    width: 100%;
}

/* Soft section rhythm */
.section,
.content-section,
.dd-features,
.dd-technical,
.dd-pricing,
.dd-api,
.dd-cta,
.ob-features,
.ob-pricing,
.ob-cta {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Section headers */
.section-header {
    text-align: center;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.section-badge,
.badge.section-badge,
.product-section-badge {
    display: inline-block;
    background: linear-gradient(135deg, #EC2E5E 0%, #8B1538 100%);
    color: #fff !important;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
    box-shadow: 0 8px 18px rgba(236, 46, 94, 0.18);
}

.section-title {
    letter-spacing: -0.02em;
    color: #1A1A1A;
}

/* Cards / feature tiles */
.feature-card,
.service-card,
.core-service-card,
.step-card,
.info-card,
.pricing-card,
.resource-card,
.demo-card,
.doc-card,
.faq-item {
    border-radius: 16px;
}

.feature-icon,
.core-service-icon,
.service-icon,
.step-number,
.hexagon-icon,
.technical-icon,
.tech-icon {
    background: linear-gradient(145deg, #EC2E5E 0%, #8B1538 100%) !important;
    color: #fff !important;
}

.feature-icon i,
.core-service-icon i,
.service-icon i,
.technical-icon i,
.tech-icon i {
    color: #fff !important;
}

/* Primary buttons */
.btn-primary,
a.btn-primary,
button.btn-primary {
    background: linear-gradient(145deg, #EC2E5E 0%, #8B1538 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.btn-primary:hover,
a.btn-primary:hover {
    background: linear-gradient(145deg, #FF4576 0%, #EC2E5E 55%, #8B1538 100%) !important;
    color: #fff !important;
}

/* Links accent */
a:not(.btn):not(.nav-link):not(.social-link):not(.partner-logo) {
    /* don't force all links brand - only explicit text links in content */
}

.content-section a,
.info-box a,
.article-content a,
.faq-answer a {
    color: #EC2E5E;
}

/* CTA bands */
.cta,
.dd-cta,
.ob-cta,
.final-cta,
.cta-section:not(.signup-form-card) {
    background: linear-gradient(135deg, #EC2E5E 0%, #8B1538 100%);
}

/* Contact / simple content cards */
.contact-card,
.form-card,
.panel-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.05);
}

/* Tables */
table thead th,
.comparison-table thead th {
    background: linear-gradient(145deg, #EC2E5E 0%, #8B1538 100%) !important;
    color: #fff !important;
}

/* Accents that used old purple tints */
[style*="#f8f9ff"],
[style*="#f0f2ff"] {
    /* handled by bulk replace already; keep fallbacks */
}

/* Form focus */
input:focus,
textarea:focus,
select:focus {
    border-color: #EC2E5E !important;
    box-shadow: 0 0 0 3px rgba(236, 46, 94, 0.12) !important;
    outline: none;
}

/* Error pages if linked */
.error-page .btn-primary {
    background: linear-gradient(145deg, #EC2E5E 0%, #8B1538 100%) !important;
}

/* Wide content rails for policy/docs */
.legal-content,
.policy-content,
.docs-content {
    max-width: min(920px, 100%);
    margin-left: auto;
    margin-right: auto;
}

/* Blog cards */
.blog-card,
.post-card,
.article-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-card:hover,
.post-card:hover,
.article-card:hover {
    transform: translateY(-3px);
    border-color: rgba(236, 46, 94, 0.28);
    box-shadow: 0 14px 32px rgba(16, 24, 40, 0.1);
}

/* Soft page background for content shells */
body.brand-page main,
.brand-page .main-content {
    background: #f8fafc;
}

/* =========================================================
   Content-page heroes — consistent brand wash
   ========================================================= */
.demo-hero,
.dev-hero,
.mcp-hero,
.enterprise-hero,
.faq-hero,
.reseller-hero,
.blog-hero,
.hero-section {
    position: relative;
    color: #fff;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(18, 12, 16, 0.92) 0%, rgba(26, 10, 16, 0.78) 48%, rgba(236, 46, 94, 0.42) 100%),
        #1A1A1A !important;
    padding: clamp(5.5rem, 11vw, 7rem) 0 clamp(2.75rem, 5vw, 4rem) !important;
}

.demo-hero h1,
.dev-hero h1,
.mcp-hero h1,
.enterprise-hero h1,
.faq-hero h1,
.reseller-hero h1,
.blog-hero h1,
.hero-section h1,
.demo-hero .hero-title,
.dev-hero .hero-title {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
}

.demo-hero p,
.dev-hero p,
.mcp-hero p,
.enterprise-hero p,
.faq-hero p,
.reseller-hero p,
.blog-hero p,
.hero-section p,
.demo-hero .lead,
.dev-hero .lead,
.faq-hero .lead {
    color: rgba(255, 255, 255, 0.94) !important;
}

.demo-hero .badge,
.dev-hero .badge,
.mcp-hero .badge,
.enterprise-hero .badge,
.faq-hero .badge,
.reseller-hero .badge {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff !important;
}

/* Contact / about already use dd-hero lifestyle overlays */
.contact-hero.dd-hero,
.about-hero.dd-hero {
    min-height: clamp(360px, 48vh, 520px);
}

/* Switch-provider hero polish */
.brand-page .hero[style*="background"] {
    background: linear-gradient(135deg, #1A1A1A 0%, #3a1020 55%, #8B1538 100%) !important;
}

/* Docs / API pages without full hero */
.dev-section > .container > h1:first-child,
.docs-header h1 {
    letter-spacing: -0.02em;
    color: #1A1A1A;
}

/* Footer already brand-aligned via style.css; reinforce accents */
.footer a:hover {
    color: #FF4576;
}

/* Price comparison band */
.section[style*="#FF4576"] {
    background: linear-gradient(135deg, #EC2E5E 0%, #8B1538 100%) !important;
}

/* Soft white sections */
.section[style*="background: #f8f9fa"],
.section[style*="background:#f8f9fa"],
.section[style*="background: #f9fafb"] {
    background: #f8fafc !important;
}

/* Cards on content pages */
.brand-page .card,
.brand-page .info-box,
.brand-page .panel {
    border-radius: 16px;
}

/* Ensure nav portal/signup buttons use brand */
.nav-link.btn-contact {
    background: linear-gradient(145deg, #EC2E5E 0%, #8B1538 100%) !important;
    color: #fff !important;
    border-radius: 999px;
}

.nav-link.btn-portal {
    border-color: #EC2E5E !important;
    color: #EC2E5E !important;
}

/* 404 / 500 */
.error-hero,
.error-page header,
body.error-page {
    /* soft */
}

/* Mobile spacing */
@media (max-width: 768px) {
    .demo-hero,
    .dev-hero,
    .mcp-hero,
    .enterprise-hero,
    .faq-hero,
    .reseller-hero,
    .blog-hero,
    .hero-section {
        padding-top: 5.25rem !important;
        padding-bottom: 2.25rem !important;
    }
}