/* ==========================================
       3. HERO SECTION LAYOUT
       ========================================== */
    .hero {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0.75rem 2rem 5rem 2rem;
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      gap: 3.5rem;
      align-items: center;
      min-height: calc(100vh - var(--header-height));
    }

    /* ==========================================
       4. HERO COPY (LEFT COLUMN)
       ========================================== */
    .hero-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      transform: translateY(-28px);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background-color: #F1F5F9;
      border: 1px solid var(--color-border-light);
      padding: 0.375rem 0.875rem;
      border-radius: 9999px;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--color-text-muted);
      margin-bottom: 1.25rem;
      letter-spacing: -0.01em;
    }

    .badge-dot {
      width: 6px;
      height: 6px;
      background-color: var(--color-primary-blue);
      border-radius: 50%;
    }

    .hero-title {
      font-size: 3.5rem;
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.035em;
      color: var(--color-text-main);
      margin-bottom: 1.5rem;
    }

    .hero-description {
      font-size: 1.125rem;
      color: var(--color-text-muted);
      line-height: 1.6;
      margin-bottom: 2.5rem;
      max-width: 490px;
    }

    .hero-cta-group {
      display: flex;
      align-items: center;
      gap: 1.25rem;
    }

    .btn-primary-lg {
      background-color: var(--color-text-main);
      color: #FFFFFF;
      padding: 0.875rem 1.75rem;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
    }

    .btn-primary-lg:hover {
      background-color: #1E293B;
      transform: translateY(-1px);
    }

    .btn-secondary-lg {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--color-text-main);
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      padding: 0.875rem 1rem;
    }

    .btn-secondary-lg:hover {
      color: var(--color-primary-blue);
    }

    .arrow-icon {
      width: 16px;
      height: 16px;
      transition: transform 0.2s ease;
    }

    .btn-secondary-lg:hover .arrow-icon {
      transform: translateX(4px);
    }

    /* ==========================================
       5. CUSTOMER JOURNEY STAGE (RIGHT COLUMN)
       ========================================== */
    .hero-visual-stage {
      position: relative;
      background-color: var(--color-neutral-fill);
      border: 1px solid var(--color-border-light);
      border-radius: 24px;
      padding: 2.5rem 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 560px;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    }

    /* Preserve the stage's existing layout while grouping its visual-only DOM. */
    .hero-journey-visual {
      display: contents;
    }

    /* Desktop Canvas Container with Expanded Spacing */
    .journey-container {
      position: relative;
      width: 100%;
      height: 340px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* Global SVG Connection Paths Overlay Layer */
    .journey-svg-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    /* Animation State Helpers (Prepared for Phase 2 triggers) */
    .journey-path {
      stroke-width: 2;
      fill: none;
      transition: stroke 0.3s ease, opacity 0.3s ease;

vector-effect: non-scaling-stroke;
shape-rendering: geometricPrecision;

transform-box: fill-box;
transform-origin: center;

backface-visibility: hidden;
-webkit-backface-visibility: hidden;

transform: translateZ(0);
    }
    
    .journey-path.state-active {
      stroke: var(--color-line-active);
      stroke-dasharray: none;
    }

    .journey-path.state-dotted {
      stroke: var(--color-line-inactive);
      stroke-dasharray: 4 4;
    }

    .journey-path.state-hidden {
      opacity: 0;
    }

    /* Journey Node Elements */
    .journey-node-group {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Node 1: Marketing Channels (Clean Uniform Text-Based Pills) */
    .channels-stack {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
    }

    .channel-pill {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #FFFFFF;
      border: 1px solid var(--color-border-light);
      padding: 0.375rem 0.75rem;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--color-text-muted);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
      width: 100px;
      text-align: center;
    }

    /* Node 2: Mobile Device Node */
    .mobile-device-card {
      background: #FFFFFF;
      border: 2px solid var(--color-text-main);
      border-radius: 18px;
      width: 82px;
      height: 154px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.5rem;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
      position: relative;
    }

    .mobile-speaker-notch {
      position: absolute;
      top: 6px;
      width: 24px;
      height: 3px;
      background-color: var(--color-border-light);
      border-radius: 2px;
    }

    .mobile-screen-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.375rem;
      text-align: center;
    }

    .check-circle-blue {
      width: 24px;
      height: 24px;
      background-color: #E0F2FE;
      color: var(--color-primary-blue);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-status-text {
      font-size: 0.625rem;
      font-weight: 600;
      color: var(--color-text-main);
      line-height: 1.15;
    }

    /* Node 3: User Entity Node */
    .user-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.375rem;
    }

    .user-avatar-circle {
      width: 38px;
      height: 38px;
      background-color: #FFFFFF;
      border: 1px solid var(--color-border-light);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text-main);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }

    .node-label {
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--color-text-muted);
    }

    /* Node 4: CTVBridge Node (Increased Prominence + Sub-caption) */
    .ctvbridge-hero-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }

    .ctvbridge-glow-wrapper {
      width: 64px;
      height: 64px;
      background: #FFFFFF;
      border: 1.5px solid var(--color-primary-blue);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 20px rgba(2, 132, 199, 0.18), 0 4px 6px -1px rgba(0,0,0,0.05);
      position: relative;
    }

    .ctvbridge-hero-svg {
      width: 42px;
      height: 42px;
    }

    .ctvbridge-node-label {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--color-primary-blue);
      letter-spacing: -0.01em;
    }

    /* Node 5: Connected TV Node */
    .ctv-node-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .verification-pill {
      position: absolute;
      top: -36px;
      white-space: nowrap;
      background-color: var(--color-verified-bg);
      border: 1px solid var(--color-verified-border);
      color: var(--color-verified-green);
      padding: 0.25rem 0.625rem;
      border-radius: 9999px;
      font-size: 0.6875rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.375rem;
      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.08);
    }

    .ctv-display-card {
      background-color: var(--color-text-main);
      border-radius: 6px;
      width: 90px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      position: relative;
    }

    .ctv-stand-stem {
      width: 16px;
      height: 8px;
      background-color: #334155;
    }

    .ctv-stand-base {
      width: 36px;
      height: 3px;
      background-color: #334155;
      border-radius: 2px;
    }

    .verified-check-indicator {
      position: absolute;
      bottom: -4px;
      right: -4px;
      background-color: var(--color-verified-green);
      color: #FFFFFF;
      border: 2px solid #FFFFFF;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.625rem;
    }

    /* ==========================================
       6. BUSINESS INSIGHT CARD (SECONDARY EVIDENCE)
       ========================================== */
    .business-insight-card {
      width: 100%;
      max-width: 460px;
      background-color: var(--color-card-bg);
      border: 1px solid var(--color-border-light);
      border-radius: 12px;
      padding: 0.875rem 1.25rem;
      margin-top: 1.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    }

    .insight-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.625rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--color-border-light);
    }

    .insight-card-title {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--color-text-main);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .insight-pill {
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--color-verified-green);
      background-color: var(--color-verified-bg);
      padding: 0.125rem 0.5rem;
      border-radius: 4px;
    }

    .insight-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
    }

    .insight-metric {
      display: flex;
      flex-direction: column;
    }

    .metric-label {
      font-size: 0.625rem;
      color: var(--color-text-subtle);
      font-weight: 500;
    }

    .metric-value {
      font-size: 0.75rem;
      color: var(--color-text-main);
      font-weight: 600;
      white-space: nowrap;
    }


    /* ==========================================
       7. HERO ANIMATION
       ========================================== */
    :root {
      --animation-duration: 10s;
    }

    .channels-stack,
    .mobile-device-card,
    .user-node,
    .ctv-node-wrapper,
    .ctvbridge-hero-node,
    .verification-pill,
    .verified-check-indicator,
    .business-insight-card,
    .attribution-unknown-label,
    .path-channels-group,
    .path-phone-user,
    .path-gap-dotted,
    .path-user-ctvbridge,
    .path-ctvbridge-tv,
    .journey-pulse {
      animation-duration: var(--animation-duration);
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
    }

    .channels-stack { animation-name: channelsSequence; }
    .mobile-device-card { animation-name: phoneSequence; }
        .user-node { animation-name: userSequence; }
        .ctv-node-wrapper { animation-name: tvSequence; }
    .path-gap-dotted { animation-name: dottedGapSequence; }
    .attribution-unknown-label { animation-name: unknownSequence; }
    .ctvbridge-hero-node { animation-name: bridgeSequence; }
        .verification-pill,
    .verified-check-indicator { animation-name: verificationSequence; }
    .business-insight-card { animation-name: insightSequence; }
    .journey-pulse { animation-name: pulseSequence; }

    .attribution-unknown-label {
      position: absolute;
      z-index: 3;
      left: 68.8%;
      top: 88px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      color: var(--color-text-muted);
      font-size: 0.72rem;
      font-weight: 600;
      line-height: 1.15;
      text-align: center;
      white-space: normal;
      width: 120px;
      pointer-events: none;
    }

    .unknown-mark {
      font-size: 1.8rem;
      line-height: 1;
      font-weight: 700;
      color: var(--color-text-muted);
    }

    .journey-pulse {
      fill: var(--color-primary-blue);
      filter: drop-shadow(0 0 5px rgba(2,132,199,.55));
      opacity: 0;
    }

    .ctvbridge-node-asset {
      width: 46px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    .ctvbridge-node-asset svg {
      width: 46px;
      height: 52px;
      display: block;
      transform: none;
    }

    @keyframes channelsSequence {
      0%, 3% { opacity: 0; transform: translateX(-10px); }
      8%, 88% { opacity: 1; transform: translateX(0); }
      96%, 100% { opacity: 0; transform: translateX(-6px); }
    }

    @keyframes channelLinesSequence {
      0%, 6% { opacity: 0; }
      11%, 88% { opacity: 1; }
      96%, 100% { opacity: 0; }
    }

    @keyframes phoneSequence {
      0%, 8% { opacity: 0; transform: scale(.94); }
      13%, 100% { opacity: 1; transform: scale(1); }
      100% { opacity: 1; transform: scale(1); }
    }

    @keyframes userSequence {
      0%, 17% { opacity: 0; transform: translateY(8px); }
      22%, 88% { opacity: 1; transform: translateY(0); }
      96%, 100% { opacity: 0; transform: translateY(4px); }
    }

    @keyframes phoneUserSequence {
      0%, 19% { opacity: 0; }
      24%, 88% { opacity: 1; }
      96%, 100% { opacity: 0; }
    }

    @keyframes tvSequence {
      0%, 24% { opacity: 0; transform: translateX(8px); }
      29%, 88% { opacity: 1; transform: translateX(0); }
      96%, 100% { opacity: 0; transform: translateX(4px); }
    }

    @keyframes dottedGapSequence {
      0%, 25% { opacity: 0; }
      30%, 45% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }

    @keyframes unknownSequence {
      0%, 28% { opacity: 0; transform: translate(-50%, 4px); }
      33%, 44% { opacity: 1; transform: translate(-50%, 0); }
      49%, 100% { opacity: 0; transform: translate(-50%, -3px); }
    }

    @keyframes bridgeSequence {
      0%, 43% { opacity: 0; transform: scale(.72); filter: blur(3px); }
      50%, 88% { opacity: 1; transform: scale(1); filter: blur(0); }
      96%, 100% { opacity: 0; transform: scale(.9); }
    }

    @keyframes restoredPathSequence {
      0%, 47% { opacity: 0; }
      53%, 88% { opacity: 1; }
      96%, 100% { opacity: 0; }
    }

    @keyframes verificationSequence {
      0%, 63% { opacity: 0; transform: translateY(5px) scale(.96); }
      69%, 88% { opacity: 1; transform: translateY(0) scale(1); }
      96%, 100% { opacity: 0; transform: translateY(-3px) scale(.98); }
    }

    @keyframes insightSequence {
      0%, 72% { opacity: 0; transform: translateY(10px); }
      79%, 88% { opacity: 1; transform: translateY(0); }
      96%, 100% { opacity: 0; transform: translateY(6px); }
    }

    @keyframes pulseSequence {
      0%, 54% { opacity: 0; }
      56%, 66% { opacity: 1; }
      68%, 100% { opacity: 0; }
    }


    /* Premium motion refinements */
    .journey-path {
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .path-channels-group .journey-path,
    .path-phone-user .journey-path,
    .path-user-ctvbridge .journey-path,
    .path-ctvbridge-tv .journey-path {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }

    .path-channels-group .journey-path { animation: drawChannels var(--animation-duration) ease-in-out infinite; }
    .path-phone-user .journey-path { animation: drawPhoneUser var(--animation-duration) ease-in-out infinite; }
    .path-user-ctvbridge .journey-path,
    .path-ctvbridge-tv .journey-path { animation: drawRestored var(--animation-duration) ease-in-out infinite; }

    .ctvbridge-glow-wrapper::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 20px;
      background: radial-gradient(circle, rgba(2,132,199,.22) 0%, rgba(2,132,199,0) 72%);
      opacity: 0;
      transform: scale(.82);
      animation: bridgeGlow var(--animation-duration) ease-in-out infinite;
      pointer-events: none;
      z-index: -1;
    }

    .ctv-node-wrapper {
      transform-origin: center center;
    }

    .ctv-display-card {
      overflow: hidden;
      transform-origin: center center;
      animation: tvConfirm var(--animation-duration) ease-in-out infinite;
    }

    .ctv-screen-highlight {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
      opacity: 0;
      animation: tvHighlight var(--animation-duration) ease-in-out infinite;
      pointer-events: none;
    }

    .business-insight-card {
      animation: insightSequencePremium var(--animation-duration) cubic-bezier(.22,.61,.36,1) infinite;
      will-change: transform, opacity;
    }

    @keyframes drawChannels {
      0%, 5% { opacity: 0; stroke-dashoffset: 1; }
      8% { opacity: 1; stroke-dashoffset: 1; }
      18%, 88% { opacity: 1; stroke-dashoffset: 0; }
      96% {
    opacity: 0;
    stroke-dashoffset: 0;
}

100% {
    opacity: 0;
    stroke-dashoffset: 1;
}
    }

    @keyframes drawPhoneUser {
      0%, 19% { opacity: 0; stroke-dashoffset: 1; }
      22% { opacity: 1; stroke-dashoffset: 1; }
      28%, 88% { opacity: 1; stroke-dashoffset: 0; }
      96% {
    opacity: 0;
    stroke-dashoffset: 0;
}

100% {
    opacity: 0;
    stroke-dashoffset: 1;
}
    }

    @keyframes drawRestored {
      0%, 48% { opacity: 0; stroke-dashoffset: 1; }
      51% { opacity: 1; stroke-dashoffset: 1; }
      59%, 88% { opacity: 1; stroke-dashoffset: 0; }
      96% {
    opacity: 0;
    stroke-dashoffset: 0;
}

100% {
    opacity: 0;
    stroke-dashoffset: 1;
}
    }

    @keyframes bridgeGlow {
      0%, 47% { opacity: 0; transform: scale(.82); }
      52% { opacity: .75; transform: scale(1); }
      61% { opacity: .28; transform: scale(1.18); }
      72%, 88% { opacity: .12; transform: scale(1.05); }
      96%, 100% { opacity: 0; transform: scale(.9); }
    }

    @keyframes tvConfirm {
      0%, 63% { transform: scale(1); }
      67% { transform: scale(1.035); }
      72%, 88% { transform: scale(1); }
      96%, 100% { transform: scale(1); }
    }

    @keyframes tvHighlight {
      0%, 63% { opacity: 0; }
      67% { opacity: 1; }
      73%, 88% { opacity: .18; }
      96%, 100% { opacity: 0; }
    }

    @keyframes insightSequencePremium {
      0%, 72% { opacity: 0; transform: translateY(16px) scale(.985); }
      79% { opacity: 1; transform: translateY(0) scale(1); }
      88% { opacity: 1; transform: translateY(0) scale(1); }
      96%, 100% { opacity: 0; transform: translateY(8px) scale(.992); }
    }


    @media (prefers-reduced-motion: reduce) {
      .channels-stack,
      .mobile-device-card,
      .user-node,
      .ctv-node-wrapper,
      .ctvbridge-hero-node,
      .verification-pill,
      .verified-check-indicator,
      .business-insight-card,
      .attribution-unknown-label,
      .path-channels-group,
      .path-phone-user,
      .path-gap-dotted,
      .path-user-ctvbridge,
      .path-ctvbridge-tv,
      .journey-pulse {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }

      .path-gap-dotted,
      .attribution-unknown-label,
      .journey-pulse {
        display: none !important;
      }
    }


    /* ==========================================
       8. RESPONSIVE DESIGN & MOBILE STACK
       ========================================== */
    @media (max-width: 1024px) {

      .hero-copy {
        transform: none;
      }

      .hero {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding-top: 1rem;
      }

      .hero-copy {
        align-items: center;
        text-align: center;
      }

      .hero-description {
        max-width: 100%;
      }

      .hero-title {
        font-size: 2.75rem;
      }
    }

    /* Native Vertical Mobile Layout (No Horizontal Scrollbar) */
    @media (max-width: 680px) {

      .brand-logo-asset {
        width: 180px;
      }

      .navbar {
        padding: 0 1.25rem;
      }

      .hero {
        padding: 1rem 1rem 3rem 1rem;
      }

      .hero-title {
        font-size: 2.125rem;
      }

      .hero-visual-stage {
        padding: 2rem 1rem;
        min-height: auto;
      }

      /* Convert horizontal journey to vertical stack */
      .journey-container {
        flex-direction: column;
        height: auto;
        gap: 1.75rem;
        width: 100%;
      }

      .journey-svg-layer {
        display: none; /* Hide horizontal curves on mobile stack */
      }

      .attribution-unknown-label,
      .journey-pulse {
        display: none;
      }


      .channels-stack {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
      }

      .channel-pill {
        width: auto;
        padding: 0.375rem 0.625rem;
      }

      /* Vertical connecting indicators for mobile stack */
      .journey-node-group::after {
        content: '';
        width: 2px;
        height: 16px;
        background-color: var(--color-primary-blue);
        margin-top: 0.75rem;
        display: block;
      }

      .journey-node-group:last-child::after {
        display: none;
      }

      .business-insight-card {
        margin-top: 2rem;
      }

      .insight-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
      }
    }
  
@media (max-width: 350px){
  .channels-stack{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:300px!important}
  .channel-pill{font-size:.72rem!important;padding:.48rem .52rem!important}
}