/* ==========================================================================
   ALFATH MEDIA - REDESIGNED INTELLIGENCE PAGE STYLES
   Color Palette: Black (#000000), Blue (#1A5DAC), White (#FFFFFF), 
                  Cream (#F9EFE8), Grey (#A09FA3), Magenta (#9F1850), Purple (#8D1EA4)
   Typography: Headings -> 'Bebas Neue', Body -> 'Aptos' (Base 18px)
   ========================================================================== */

@font-face {
    font-family: 'Aptos';
    src: local('Aptos'), local('Segoe UI'), local('Calibri');
    font-weight: 400;
    font-style: normal;
}

:root {
    --color-black: #000000;
    --color-blue: #1A5DAC;
    --color-white: #FFFFFF;
    --color-cream: #F9EFE8;
    --color-grey: #A09FA3;
    --color-dark-grey: #2C2C2C;
    
    --accent-magenta: #9F1850;
    --accent-purple: #8D1EA4;

    --font-heading: 'Bebas Neue', sans-serif;
    --font-body: 'Aptos', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 18px; /* Strict 18px base size */
    background-color: var(--color-black);
    color: var(--color-black);
}

body {
    font-family: var(--font-body);
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Common Eyebrow Label */
.section-label-blue {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-blue);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* ==========================================================================
   SECTION 1: HERO
   ========================================================================== */
.intel-hero {
    position: relative;
    width: 100%;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 190px 6vw 130px 6vw;
    background-color: var(--color-black);
    overflow: hidden;
}

.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(7, 19, 31, 0.4) 0%, rgba(0, 0, 0, 0.96) 100%);
    z-index: 2;
}

.ambient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 2;
    opacity: 0.25;
}

.blob-purple {
    top: 20%;
    right: 15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--accent-purple) 0%, transparent 70%);
}

.blob-blue {
    bottom: 10%;
    left: 10%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, var(--color-blue) 0%, transparent 70%);
}

.hero-container {
    position: relative;
    z-index: 3;
    max-width: 960px;
    width: 100%;
    /* .intel-hero is display:flex, making this its flex item. Flex items
       default to min-width:auto, so without this the browser won't shrink
       it below its own heading text's natural width — on very small
       phones that overflows the screen instead of just wrapping. */
    min-width: 0;
    margin: 0 auto;
    text-align: center;
    color: var(--color-white);
}

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-blue);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.hero-heading {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1.02;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 28px;
}

.hero-subtitle {
    font-size: clamp(1.13rem, 1.42vw, 1.32rem);
    font-weight: 300;
    color: var(--color-grey);
    max-width: 780px;
    margin: 0 auto 40px auto;
    line-height: 1.75;
}

.btn-hero-action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: var(--color-blue);
    color: var(--color-white);
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-hero-action:hover {
    background-color: #144988;
    transform: translateY(-3px);
}

/* ==========================================================================
   SECTION 2: WHY INTELLIGENCE MATTERS (CREAM BACKGROUND)
   ========================================================================== */
.why-intel-section {
    background-color: var(--color-cream);
    padding: 160px 6vw;
    color: var(--color-black);
}

.why-container {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: start;
}

/* Grid items default to min-width:auto, so without this the browser won't
   shrink either column below its own content's natural width. At very
   small phone widths that content (the heading text on the left, the
   cards on the right) is wider than the screen, which was pushing the
   whole page into horizontal scroll instead of just wrapping. */
.why-container > .why-editorial,
.why-container > .why-cards-grid {
    min-width: 0;
}

.why-heading {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.8vw, 4.8rem);
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 20px;
}

.why-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-dark-grey);
}

.why-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.why-card {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 36px 28px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(26, 93, 172, 0.15);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.why-card-top-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-blue);
    transition: background-color 0.35s ease;
}

.why-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-color: rgba(26, 93, 172, 0.08);
    color: var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: background-color 0.35s ease, color 0.35s ease;
}

.why-card-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 10px;
}

.why-card-desc {
    font-size: 0.95rem;
    color: var(--color-dark-grey);
    line-height: 1.65;
}

.why-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-magenta);
    box-shadow: 0 20px 40px rgba(26, 93, 172, 0.08);
}

.why-card:hover .why-card-top-border {
    background: var(--accent-magenta);
}

.why-card:hover .why-icon-wrap {
    background-color: var(--color-blue);
    color: var(--color-white);
}

/* ==========================================================================
   SECTION 3: OUR INTELLIGENCE ECOSYSTEM (BENTO GRID + FEATURE CARD)
   ========================================================================== */
/* ==========================================================================
   SAMPLE SITE NETWORK MAP (Illustrative Visual)
   ========================================================================== */
.map-sample-section {
    position: relative;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 140px 6vw 170px 6vw;
    overflow: hidden;
}

.map-sample-container {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
}

.map-sample-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 56px auto;
}

.map-sample-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 16px;
}

.map-sample-subtext {
    font-size: 1.05rem;
    color: var(--color-grey);
    font-weight: 300;
    line-height: 1.7;
}

.map-card {
    position: relative;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(26, 93, 172, 0.25);
    border-radius: 24px;
    padding: 32px 32px 24px 32px;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.map-card-glow {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(141, 30, 164, 0.14) 0%, transparent 70%);
    pointer-events: none;
}

.map-card-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.map-card-label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-blue);
}

.map-card-badge {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-grey);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 5px 14px;
}

.map-svg-wrap {
    position: relative;
    width: 100%;
    height: 560px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #0b0b10 0%, #111111 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

#karachi-coverage-map {
    width: 100%;
    height: 100%;
    background: #0b0b10;
}

/* Leaflet control theming to match the site's dark UI */
.leaflet-control-zoom a {
    background-color: rgba(17, 17, 17, 0.9) !important;
    color: var(--color-white) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.leaflet-control-zoom a:hover {
    background-color: var(--color-blue) !important;
}

.leaflet-control-attribution {
    background: rgba(17, 17, 17, 0.75) !important;
    color: rgba(160, 159, 163, 0.8) !important;
    font-size: 0.68rem !important;
}

.leaflet-control-attribution a {
    color: rgba(160, 159, 163, 0.95) !important;
}

.leaflet-popup-content-wrapper {
    background: #111111;
    color: var(--color-white);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.leaflet-popup-tip {
    background: #111111;
}

.karachi-map-popup {
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.karachi-map-popup strong {
    color: var(--color-blue);
}

.road-label-tooltip {
    background: rgba(17, 17, 17, 0.85) !important;
    border: 1px solid rgba(26, 93, 172, 0.5) !important;
    color: var(--color-white) !important;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 6px;
    box-shadow: none;
}

.road-label-tooltip.road-label-local {
    border-color: rgba(141, 30, 164, 0.55) !important;
}

.road-label-tooltip::before {
    border-top-color: rgba(26, 93, 172, 0.5) !important;
}

.road-label-tooltip.road-label-local::before {
    border-top-color: rgba(141, 30, 164, 0.55) !important;
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-grey);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

.legend-line {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    flex: none;
}

.map-note {
    margin-top: 18px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: rgba(160, 159, 163, 0.7);
    font-style: italic;
    line-height: 1.6;
}

.artery-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.artery-chip {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 6px 14px;
}

.ecosystem-section {
    position: relative;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 170px 6vw;
    overflow: hidden;
}

.purple-ambient-glow {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(141, 30, 164, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.ecosystem-container {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
}

.ecosystem-header {
    text-align: center;
    margin-bottom: 80px;
}

.ecosystem-heading {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.8vw, 4.8rem);
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 16px;
}

.ecosystem-subtext {
    font-size: 1.15rem;
    color: var(--color-grey);
    font-weight: 300;
}

/* Modern Bento Grid Structure */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.bento-card {
    position: relative;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(26, 93, 172, 0.25);
    border-radius: 20px;
    padding: 40px 32px;
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.bento-wide {
    grid-column: span 2;
}

.bento-card-border {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, var(--color-blue), var(--accent-magenta));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bento-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: rgba(26, 93, 172, 0.12);
    color: var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.bento-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 12px;
    color: var(--color-white);
}

.bento-desc {
    font-size: 1.025rem;
    color: var(--color-grey);
    line-height: 1.7;
    font-weight: 300;
}

.bento-card:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.bento-card:hover .bento-card-border {
    opacity: 1;
}

/* Visually Distinct Highlight Feature Card */
.outcome-feature-card {
    position: relative;
    background: linear-gradient(135deg, rgba(26, 93, 172, 0.15) 0%, rgba(159, 24, 80, 0.12) 100%);
    border: 1px solid rgba(159, 24, 80, 0.4);
    border-radius: 24px;
    padding: 56px 48px;
    text-align: center;
    overflow: hidden;
    backdrop-filter: blur(16px);
}

.outcome-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-magenta);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.outcome-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 20px;
}

.outcome-desc {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
    font-weight: 300;
}

/* ==========================================================================
   SECTION 4: CONTINUOUS PROCESS JOURNEY (LIGHT PREMIUM CREAM THEME)
   ========================================================================== */
.process-section.process-light-theme {
    position: relative;
    background-color: var(--color-cream); /* Official Brand Cream #F9EFE8 */
    color: var(--color-black);
    padding: 160px 6vw;
    overflow: hidden;
}

/* Very Subtle Dotted Grid Background Texture (6% Opacity) */
.process-grid-texture {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(26, 93, 172, 0.12) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.6;
    pointer-events: none;
}

.process-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.process-header {
    text-align: center;
    margin-bottom: 90px;
}

.process-heading {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.8vw, 4.8rem);
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 20px;
    color: var(--color-black);
}

.process-subtext {
    font-size: 1.15rem;
    color: var(--color-dark-grey);
    font-weight: 400;
}

/* Continuous Vertical Journey Track */
.continuous-timeline-wrapper {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
}

/* Single Vertical Animated Gradient Line */
.timeline-vertical-track {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    width: 2px;
    background: rgba(26, 93, 172, 0.15); /* Light Blue Guide Line */
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-vertical-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%; /* Animated via GSAP */
    background: linear-gradient(180deg, var(--color-blue) 0%, var(--accent-magenta) 100%);
}

.timeline-traveling-dot {
    position: absolute;
    top: 0%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-magenta);
    box-shadow: 0 0 10px rgba(159, 24, 80, 0.4);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Tightened Journey Step Spacing */
.journey-cards-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 75px; /* Reduced spacing for continuous reading flow */
}

.journey-step {
    position: relative;
    width: 50%;
}

.step-left {
    align-self: flex-start;
    padding-right: 48px;
}

.step-right {
    align-self: flex-end;
    padding-left: 48px;
}

/* Node Dot on Line */
.journey-node-dot {
    position: absolute;
    top: 36px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 2px solid var(--color-blue);
    z-index: 3;
    transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

.step-left .journey-node-dot {
    right: -7px;
}

.step-right .journey-node-dot {
    left: -7px;
}

/* Premium Elegant White Cards */
.journey-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid rgba(26, 93, 172, 0.18); /* Thin Blue Border */
    border-radius: 20px;
    padding: 38px 34px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03); /* Soft Premium Shadow */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.card-num-badge {
    position: absolute;
    top: 28px;
    right: 32px;
    font-family: var(--font-heading);
    font-size: 2.1rem;
    color: rgba(26, 93, 172, 0.2);
    transition: color 0.4s ease;
}

.journey-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background-color: rgba(26, 93, 172, 0.08);
    color: var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.journey-title {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 12px;
    color: var(--color-black);
}

.journey-desc {
    font-size: 1.025rem;
    color: var(--color-dark-grey);
    line-height: 1.7;
    font-weight: 400;
}

/* Highlighted Final Outcome Card */
.journey-card-highlight {
    background: linear-gradient(135deg, #FFFFFF 0%, #FDF4F7 100%);
    border-color: rgba(159, 24, 80, 0.35);
}

/* Magenta Hover Micro-Interactions */
.journey-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-magenta); /* Subtle Magenta Border Accent */
    box-shadow: 0 20px 40px rgba(26, 93, 172, 0.08), 0 10px 20px rgba(159, 24, 80, 0.06);
}

.journey-step:hover .journey-node-dot {
    border-color: var(--accent-magenta);
    background-color: var(--accent-magenta);
    box-shadow: 0 0 10px rgba(159, 24, 80, 0.4);
}

.journey-card:hover .journey-icon-wrap {
    background-color: var(--color-blue);
    color: var(--color-white);
    transform: scale(1.05);
}

.journey-card:hover .card-num-badge {
    color: var(--accent-magenta);
}

/* ==========================================================================
   SECTION 5: OOH INTELLIGENCE ENGINE (SPLIT LAYOUT)
   ========================================================================== */
.engine-split-section {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 170px 6vw;
}

.engine-split-container {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

/* Same fix as .why-container above: grid items default to min-width:auto,
   which was stopping either column from shrinking below its content's
   natural width on very small phones. */
.engine-split-container > .split-visual-side,
.engine-split-container > .split-content-side {
    min-width: 0;
}

/* Visual Dashboard Asset Placeholder */
.vector-dashboard-frame {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(26, 93, 172, 0.3);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.dashboard-header-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 28px;
}

.dashboard-header-bar .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dot.red { background: #FF5F56; }
.dot.yellow { background: #FFBD2E; }
.dot.green { background: #27C93F; }

.dash-title {
    font-size: 0.75rem;
    color: var(--color-grey);
    letter-spacing: 0.15em;
    margin-left: auto;
}

.dashboard-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dash-widget {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px;
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 120px;
    margin-bottom: 16px;
}

.bar {
    flex: 1;
    background: var(--color-blue);
    border-radius: 6px 6px 0 0;
}
.bar-1 { height: 45%; }
.bar-2 { height: 70%; }
.bar-3 { height: 55%; }
.bar-4 { height: 90%; background: var(--accent-magenta); }
.bar-5 { height: 65%; }

.widget-label {
    font-size: 0.75rem;
    color: var(--color-grey);
    letter-spacing: 0.15em;
}

.dash-widget-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.widget-val {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--color-white);
}

.widget-sub {
    font-size: 0.75rem;
    color: var(--color-grey);
    letter-spacing: 0.1em;
}

/* Narrative & Feature List */
.split-heading {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.5vw, 4.5rem);
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 20px;
}

.split-description {
    font-size: 1.1rem;
    color: var(--color-grey);
    line-height: 1.8;
    margin-bottom: 40px;
    font-weight: 300;
}

.engine-features-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.feature-item-card {
    display: flex;
    gap: 20px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    transition: border-color 0.3s ease;
}

.feature-item-card:hover {
    border-color: rgba(26, 93, 172, 0.5);
}

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(26, 93, 172, 0.12);
    color: var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.feature-desc {
    font-size: 0.95rem;
    color: var(--color-grey);
    line-height: 1.6;
}

/* ==========================================================================
   SECTION 6: CALL TO ACTION
   ========================================================================== */
.intel-cta {
    position: relative;
    background: linear-gradient(135deg, #07131F 0%, #1A5DAC 100%);
    color: var(--color-white);
    padding: 170px 6vw;
    text-align: center;
    overflow: hidden;
}

.cta-mesh-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.4;
}

.cta-purple-ambient {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(141, 30, 164, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.cta-container {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.cta-heading {
    font-family: var(--font-heading);
    font-size: clamp(3.0rem, 5.2vw, 5.2rem);
    line-height: 1.02;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.cta-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 300;
    margin-bottom: 56px;
    line-height: 1.8;
}

.cta-btn-wrapper {
    display: inline-block;
}

.btn-cta-magnetic {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 20px 40px;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.btn-gradient-outline {
    position: absolute;
    inset: -2px;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--color-blue), var(--accent-magenta));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.btn-cta-magnetic:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.btn-cta-magnetic:hover .btn-gradient-outline {
    opacity: 1;
}

.btn-arrow-icon {
    font-size: 1.3rem;
    transition: transform 0.3s ease;
}

.btn-cta-magnetic:hover .btn-arrow-icon {
    transform: translateX(6px);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (ALL SPECIFIED DEVICE RANGES)
   1920px, 1600px, 1440px, 1366px, 1280px, 1024px, 912px, 820px, 768px, 
   540px, 430px, 414px, 390px, 375px, 360px, 320px
   ========================================================================== */

/* Ultra-Wide (1600px - 1920px+) */
@media screen and (min-width: 1600px) {
    .why-container,
    .ecosystem-container,
    .process-container,
    .engine-split-container {
        /* Was 1440px (matching production) — widened further so these
           bands use more of a genuinely wide/ultra-wide monitor instead of
           leaving large empty margins either side. */
        max-width: 1680px;
    }
}

/* Large Desktop (1280px - 1440px) */
@media screen and (max-width: 1440px) {
    .bento-grid { gap: 24px; }
    .engine-split-container { gap: 50px; }
}

/* Laptops & Tablets (1024px - 1280px) */
@media screen and (max-width: 1280px) {
    .why-container { grid-template-columns: 1fr; gap: 40px; }
    .engine-split-container { grid-template-columns: 1fr; gap: 50px; }
}

/* Tablet Landscape & Portrait (820px - 1024px) */
@media screen and (max-width: 1024px) {
    .intel-hero { padding-top: 140px; min-height: 70vh; }
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-wide { grid-column: span 1; }
    .process-block { width: 100%; float: none; padding: 0 !important; margin-top: 0 !important; }
}

/* Foldables & Mid-Tablets (540px - 819px) */
@media screen and (max-width: 819px) {
    .why-cards-grid, .bento-grid { grid-template-columns: 1fr; }
    .outcome-feature-card { padding: 40px 28px; }
    .dash-widget-row { grid-template-columns: 1fr; }
    .map-svg-wrap { height: 420px; }
}

/* Smartphones (320px - 539px) */
@media screen and (max-width: 539px) {
    .intel-hero { min-height: 60vh; padding: 120px 6vw 70px 6vw; }
    .why-intel-section, .ecosystem-section, .process-section, .engine-split-section, .intel-cta { padding: 100px 6vw; }
    .process-card, .why-card, .bento-card { padding: 32px 24px; }
    .btn-cta-magnetic { width: 100%; justify-content: center; padding: 20px 32px; }
    .map-svg-wrap { height: 340px; }
    .map-card { padding: 22px 18px 18px 18px; }
}

/* Micro Phones (320px - 375px) */
@media screen and (max-width: 375px) {
    .hero-heading { font-size: 2.6rem; }
    .hero-subtitle, .why-description, .ecosystem-subtext, .process-subtext, .split-description, .cta-description { font-size: 0.975rem; }
    .process-card, .why-card, .bento-card { padding: 24px 18px; }
}

/* Touch Guideline Compliance */
@media (pointer: coarse) {
    .btn-cta-magnetic, .btn-hero-action { min-height: 52px; }
}

/* Responsive Adaptations for Mobile & Tablet */
@media screen and (max-width: 912px) {
    .process-section.process-light-theme {
        padding: 120px 6vw;
    }

    .journey-cards-wrapper {
        gap: 50px;
    }

    .timeline-vertical-track {
        left: 20px;
        transform: none;
    }

    .journey-step {
        width: 100%;
        padding-left: 55px !important;
        padding-right: 0 !important;
    }

    .step-left, .step-right {
        align-self: flex-start;
    }

    .journey-node-dot {
        left: 13px !important;
        right: auto !important;
    }
}

@media screen and (max-width: 480px) {
    .process-section.process-light-theme {
        padding: 100px 5vw;
    }

    .journey-cards-wrapper {
        gap: 36px;
    }

    .journey-card {
        padding: 28px 22px;
    }

    .card-num-badge {
        top: 20px;
        right: 20px;
        font-size: 1.6rem;
    }
}