/* ============================================================
   PAGES — Shared overrides for inner pages
   Ensures page heroes and elements match cool-blue palette
   ============================================================ */

/* --- Hero Sections (About, Services, Contact, Platform, Labs, Blog) --- */
.about-hero,
.services-hero,
.platform-hero,
.labs-hero,
.blog-hero {
    background: linear-gradient(160deg, hsl(220,15%,7%) 0%, hsl(210,18%,10%) 50%, hsl(220,14%,8%) 100%) !important;
    position: relative;
}

.about-hero::before {
    background: radial-gradient(circle at 30% 30%, hsla(200,80%,50%,.08), transparent 50%),
                radial-gradient(circle at 70% 70%, hsla(220,70%,50%,.06), transparent 50%) !important;
}

.platform-hero::before {
    background: radial-gradient(circle at 20% 20%, hsla(200,80%,50%,.1), transparent 55%),
                radial-gradient(circle at 80% 30%, hsla(220,70%,55%,.1), transparent 55%),
                radial-gradient(circle at 50% 90%, hsla(190,100%,50%,.06), transparent 55%) !important;
}

/* Contact hero gets the cool gradient instead of gold */
.contact-hero {
    background: linear-gradient(135deg, hsl(210,80%,45%), hsl(220,70%,40%)) !important;
    color: hsl(0,0%,95%);
}

.contact-hero::before {
    opacity: 0.15 !important;
}

/* --- Section Titles (override hot gold with cool blue gradient) --- */
.section-title,
.about-title,
.services-title,
.platform-title,
.labs-title,
.blog-title,
.approach-title,
.cta-title,
.form-title,
.info-title,
.faq-question,
.skill-title,
.personal-title,
.widget-title,
.service-title {
    color: hsl(0,0%,95%) !important;
}

/* Timeline line and markers */
.career-timeline::before {
    background: linear-gradient(180deg, hsl(200,100%,50%), hsl(220,70%,50%)) !important;
}

.timeline-marker {
    background: hsl(200,100%,50%) !important;
    border-color: hsl(220,18%,5%) !important;
}

.timeline-year {
    color: hsl(190,100%,70%) !important;
}

.timeline-company {
    color: hsl(200,80%,60%) !important;
}

.timeline-achievements li::before {
    color: hsl(190,100%,70%) !important;
}

/* Profile image border */
.profile-image {
    border-color: hsl(200,100%,50%) !important;
}

/* Card hovers — cool glow instead of gold */
.service-card:hover,
.skill-category:hover,
.personal-card:hover,
.approach-step:hover,
.availability-card:hover,
.faq-card:hover,
.certification-badge:hover,
.blog-post:hover,
.recent-post:hover,
.labs-card:hover,
.info-card:hover {
    border-color: hsla(200,80%,60%,.3) !important;
    box-shadow: 0 8px 32px hsla(210,80%,30%,.2) !important;
}

/* Service icon gradient */
.service-icon {
    background: linear-gradient(135deg, hsl(210,80%,45%), hsl(200,100%,50%)) !important;
}

/* Featured post badge */
.blog-post.featured {
    border-color: hsl(200,100%,50%) !important;
}

.blog-post.featured::before {
    background: linear-gradient(135deg, hsl(200,100%,50%), hsl(220,70%,50%)) !important;
    color: #fff !important;
}

/* Post image gradient */
.post-image {
    background: linear-gradient(135deg, hsl(210,80%,45%), hsl(200,100%,50%)) !important;
}

/* Accent tag colour */
.post-date {
    color: hsl(190,100%,70%) !important;
}

/* Service link */
.service-link {
    color: hsl(190,100%,70%) !important;
}

.service-link:hover {
    color: hsl(200,80%,60%) !important;
}

/* Service feature arrow */
.service-features li::before {
    color: hsl(200,80%,60%) !important;
}

/* Step number badges */
.step-number {
    background: linear-gradient(135deg, hsl(200,100%,50%), hsl(220,70%,50%)) !important;
    color: #fff !important;
}

/* Tech tags */
.tech-tag:hover {
    background: linear-gradient(135deg, hsl(200,100%,50%), hsl(220,70%,50%)) !important;
    color: #fff !important;
}

/* CTA buttons */
.cta-button,
.coming-soon-cta,
.form-button,
.newsletter-button {
    background: linear-gradient(135deg, hsl(200,100%,50%), hsl(220,80%,55%)) !important;
    color: #fff !important;
    border: none !important;
}

.cta-button:hover,
.coming-soon-cta:hover,
.form-button:hover,
.newsletter-button:hover {
    box-shadow: 0 4px 24px hsla(210,100%,50%,.3) !important;
}

/* Labs card button */
.labs-card a {
    background: linear-gradient(135deg, hsl(200,100%,50%), hsl(220,80%,55%)) !important;
    color: #fff !important;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

.labs-card a:hover {
    box-shadow: 0 4px 16px hsla(210,100%,50%,.3);
    transform: translateY(-2px);
}

/* Form focus */
.form-input:focus,
.newsletter-input:focus {
    border-color: hsl(200,80%,55%) !important;
    box-shadow: 0 0 0 2px hsla(200,80%,55%,.2) !important;
}

/* Info card top border */
.info-card::before {
    background: linear-gradient(90deg, hsl(200,100%,50%), hsl(220,70%,55%)) !important;
}

/* Pill tags on platform */
.pill {
    border-color: hsla(200,80%,50%,.2) !important;
    background: hsla(200,80%,50%,.06) !important;
}

/* Platform action links */
.action-link:hover {
    border-color: hsl(200,80%,55%) !important;
    color: hsl(190,100%,70%) !important;
}

/* Platform note box */
.note {
    background: hsla(200,80%,50%,.06) !important;
    border-color: hsla(200,80%,50%,.16) !important;
}

/* Asset card hover */
.asset-card:hover {
    border-color: hsla(200,80%,60%,.4) !important;
}