/* ── Two-column hero grid ──────────────────────────── */
  .hero__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    width: 100%;
    /* The site nav is position:fixed, so the hero must reserve its own
       clearance. A bare clamp() resolves below --nav-height on narrower
       desktops (51px at 1025px, 64px at 1280px), which slides the badge
       and headline underneath the nav bar. Anchor the top padding to
       --nav-height so clearance is guaranteed at every width. */
    padding-top: calc(var(--nav-height) + clamp(1rem, 2vw, 2rem));
    padding-bottom: clamp(3rem, 5vw, 5rem);
  }
  .hero__split .hero__content { max-width: none; }
  /* 2×2 grid for stats in the narrower split-layout column */
  .hero__split .hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-8);
  }

  /* ── Visual container ──────────────────────────────── */
  .hero-visual {
    position: relative;
    height: 490px;
    user-select: none;
  }

  /* ── Ambient background glows ──────────────────────── */
  .hv-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .hv-ambient::before {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,52,42,0.14) 0%, transparent 70%);
    top: 35%; left: 45%;
    transform: translate(-50%, -50%);
  }
  .hv-ambient::after {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29,161,242,0.10) 0%, transparent 70%);
    bottom: 50px; right: 20px;
  }

  /* ── Parallax layer (JS sets transform) ────────────── */
  .hv-layer {
    position: absolute;
    will-change: transform;
  }
  /* Floating animation wrapper (child of .hv-layer) */
  .hv-float { display: block; }
  .hv-float--a { animation: hvFloatA  9s ease-in-out infinite; }
  .hv-float--b { animation: hvFloatB 11s ease-in-out 1.5s infinite; }
  .hv-float--c { animation: hvFloatC  8s ease-in-out 3.0s infinite; }
  .hv-float--d { animation: hvFloatD 12s ease-in-out 0.8s infinite; }
  .hv-float--e { animation: hvFloatE 14s ease-in-out 2.2s infinite; }

  @keyframes hvFloatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  @keyframes hvFloatB { 0%,100%{transform:translateY(0)} 40%{transform:translateY(5px)} 80%{transform:translateY(-4px)} }
  @keyframes hvFloatC { 0%,100%{transform:translateY(0)} 35%{transform:translateY(-8px)} }
  @keyframes hvFloatD { 0%,100%{transform:translateY(0)} 55%{transform:translateY(-5px)} }
  @keyframes hvFloatE { 0%,100%{transform:translateY(0)} 45%{transform:translateY(4px)} }

  @media (prefers-reduced-motion: reduce) {
    .hv-float--a,.hv-float--b,.hv-float--c,.hv-float--d,.hv-float--e { animation: none; }
  }

  /* ── Layer positions ───────────────────────────────── */
  .hv-layer--main  { top: 20px;  left: 0;     z-index: 1; }
  .hv-layer--wp    { bottom: 0;  right: -20px; z-index: 2; }
  .hv-layer--woo   { bottom: 58px; left: 6px; z-index: 3; }
  .hv-layer--perf  { top: 10px; right: 14px;  z-index: 3; }
  .hv-layer--badge { top: -8px;  left: 10px;  z-index: 4; }

  /* ── Shared browser chrome ─────────────────────────── */
  .hv-browser {
    border-radius: 9px;
    overflow: hidden;
    box-shadow:
      0 24px 64px rgba(0,0,0,0.50),
      0 4px 16px rgba(0,0,0,0.28),
      0 1px 0 rgba(255,255,255,0.06) inset;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .hv-browser__chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    background: #080f1e;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    height: 30px;
    box-sizing: border-box;
  }
  .hv-browser__dots { display:flex; gap:4px; flex-shrink:0; }
  .hv-browser__dots span {
    width: 8px; height: 8px; border-radius: 50%; display: block;
  }
  .hv-browser__dots span:nth-child(1) { background: #ff5f57; }
  .hv-browser__dots span:nth-child(2) { background: #febc2e; }
  .hv-browser__dots span:nth-child(3) { background: #28c840; }
  .hv-browser__bar {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 9px;
    /* 0.38 alpha measured 3.53:1 against the chrome bar (Lighthouse
       color-contrast). Raised to 0.52 => ~5:1 so the mock chrome is
       legible rather than muddy, without losing its recessive feel. */
    color: rgba(255,255,255,0.52);
    font-family: var(--font-mono, monospace);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Main browser (460 × 290 total) ──────────────── */
  .hv-browser--main { background: #0a1628; width: 460px; }
  .hv-browser--main .hv-browser__viewport {
    height: 260px;
    overflow: hidden;
    background: #f5f7fa;
  }

  /* Fake site nav bar */
  .hv-site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 26px;
    background: #0a1628;
  }
  .hv-site-nav__logo {
    width: 56px; height: 9px; border-radius: 3px;
    background: rgba(232,52,42,0.8); flex-shrink: 0;
  }
  .hv-site-nav__links { display:flex; gap:5px; flex:1; }
  .hv-site-nav__links span {
    height: 5px; border-radius: 2px; background: rgba(255,255,255,0.18);
  }
  .hv-site-nav__cta {
    width: 28px; height: 10px; border-radius: 5px;
    background: var(--color-accent); flex-shrink: 0;
  }

  /* Fake site hero (inside main browser) */
  .hv-site-hero {
    display: flex;
    gap: 8px;
    padding: 12px 10px;
    height: 108px;
    background: #0a1628;
    box-sizing: border-box;
    align-items: center;
  }
  .hv-site-hero__copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .hv-site-hero__graphic {
    width: 72px; height: 72px;
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(232,52,42,0.35), rgba(29,161,242,0.25));
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
  }
  .hv-site-hero__graphic::after {
    content: '';
    position: absolute;
    bottom: 8px; left: 8px;
    width: 24px; height: 24px;
    border-radius: 4px;
    background: rgba(255,255,255,0.12);
  }

  /* Text line stubs */
  .hv-line {
    border-radius: 3px;
    background: rgba(255,255,255,0.18);
    display: block;
  }
  .hv-line--xs { height: 4px; }
  .hv-line--sm { height: 5px; }
  .hv-line--md { height: 7px; }
  .hv-line--lg { height: 9px; }
  .hv-line--accent { background: rgba(232,52,42,0.75); }
  .hv-line--white  { background: rgba(255,255,255,0.82); }
  .hv-line--gray   { background: #d0d5dd; }

  .hv-cta-row { display:flex; gap:5px; margin-top:4px; }
  .hv-cta-pill { height: 12px; border-radius: 6px; }
  .hv-cta-pill--primary { width: 42px; background: var(--color-accent); }
  .hv-cta-pill--outline { width: 36px; border: 1px solid rgba(255,255,255,0.3); }

  /* Mini cards row */
  .hv-cards-row {
    display: flex;
    gap: 7px;
    padding: 8px 10px;
    background: #f0f3f7;
    height: 126px;
    box-sizing: border-box;
    align-items: flex-start;
  }
  .hv-mini-card {
    flex: 1;
    background: #fff;
    border-radius: 6px;
    padding: 7px;
    border: 1px solid #e4e7ec;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    box-sizing: border-box;
  }
  .hv-mini-card__icon {
    width: 16px; height: 16px;
    border-radius: 4px;
    background: rgba(232,52,42,0.12);
    margin-bottom: 2px;
  }
  .hv-mini-card:nth-child(2) .hv-mini-card__icon { background: rgba(29,161,242,0.12); }
  .hv-mini-card:nth-child(3) .hv-mini-card__icon { background: rgba(16,163,74,0.12); }

  /* ── WP Editor browser (285 × 190 total) ─────────── */
  .hv-browser--wp { background: #1a2233; width: 285px; }
  .hv-browser--wp .hv-browser__viewport {
    height: 160px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .hv-wp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 0 8px;
    height: 24px;
    background: #141d2b;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
  }
  .hv-wp-tb-btns { display:flex; gap:3px; }
  .hv-wp-tb-btn {
    height: 9px; border-radius: 3px;
    background: rgba(255,255,255,0.1);
  }
  .hv-wp-tb-btn--pub { background: #1DA1F2; width: 30px; }
  .hv-wp-toolbar__label {
    font-size: 8px;
    font-family: var(--font-sans, sans-serif);
    /* Was 3.54:1 at 0.38 alpha — see .hv-browser__bar note above. */
    color: rgba(255,255,255,0.52);
    flex: 1;
    text-align: center;
  }
  .hv-wp-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
  }
  .hv-wp-sidebar {
    width: 54px;
    background: #111827;
    border-right: 1px solid rgba(255,255,255,0.05);
    padding: 6px 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
  }
  .hv-wp-block-item {
    height: 15px; border-radius: 3px;
    background: rgba(255,255,255,0.06);
  }
  .hv-wp-block-item--active {
    background: rgba(29,161,242,0.2);
    border: 1px solid rgba(29,161,242,0.3);
  }
  /* Light editor canvas — mirrors the real block editor and
     gives the composition a second light surface for balance */
  .hv-wp-canvas {
    flex: 1;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #fff;
  }
  .hv-wp-canvas-block {
    border-radius: 3px;
    background: #eef1f6;
  }
  /* The first block reads as the currently-selected block */
  .hv-wp-canvas-block:first-child {
    background: linear-gradient(135deg, #0A1628 0%, #1b3357 100%);
    box-shadow: 0 0 0 1.5px var(--color-secondary);
    position: relative;
  }
  .hv-wp-canvas-block:first-child::after {
    content: '';
    position: absolute;
    left: 7px; top: 8px;
    width: 46px; height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.65);
    box-shadow: 0 7px 0 -0.5px var(--color-accent);
  }
  .hv-wp-canvas-row { display:flex; gap:5px; flex:1; }
  .hv-wp-canvas-col {
    flex: 1; border-radius: 3px;
    background: #f5f7fa;
    border: 1px dashed #d8dde6;
  }

  /* ── WooCommerce product card (162px wide) ─────────── */
  .hv-woo-card {
    width: 162px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.16);
    border: 1px solid rgba(255,255,255,0.10);
  }
  .hv-woo-card__image {
    height: 82px;
    background: linear-gradient(140deg, #0A1628 0%, #1b3357 48%, #1DA1F2 100%);
    position: relative;
  }
  .hv-woo-card__image::before {
    content: '';
    position: absolute;
    bottom: 8px; left: 10px;
    width: 30px; height: 30px;
    border-radius: 6px;
    background: rgba(255,255,255,0.18);
  }
  .hv-woo-card__image::after {
    content: '';
    position: absolute;
    top: 10px; right: 10px;
    width: 20px; height: 20px;
    border-radius: 4px;
    background: rgba(255,255,255,0.12);
  }
  .hv-woo-card__body { padding: 8px 10px; }
  .hv-woo-card__tag {
    font-size: 7.5px;
    font-family: var(--font-sans, sans-serif);
    font-weight: 700;
    color: #9c44ef;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
  }
  .hv-woo-card__name { height: 6px; border-radius: 2px; background: #d0d5dd; margin-bottom: 8px; }
  .hv-woo-card__footer { display:flex; align-items:center; justify-content:space-between; }
  .hv-woo-card__price {
    font-size: 13px;
    font-weight: 800;
    color: #0A1628;
    font-family: var(--font-sans, sans-serif);
  }
  .hv-woo-card__btn {
    display: inline-block;
    font-size: 7px;
    font-family: var(--font-sans, sans-serif);
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 5px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    cursor: default;
    pointer-events: none;
  }
  .hv-woo-card__badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: #f5f7fa;
    border-top: 1px solid #e4e7ec;
    font-size: 7.5px;
    font-family: var(--font-sans, sans-serif);
    font-weight: 600;
    color: #667085;
  }
  .hv-woo-card__badge::before {
    content: '';
    width: 9px; height: 9px;
    border-radius: 2px;
    background: #9c44ef;
    flex-shrink: 0;
  }

  /* ── Analytics chip (124px wide) ───────────────────────
     Abstract UI only — deliberately carries no numeric
     score, metric or result, so it makes no performance
     claim on behalf of Eagle Vision IT. ───────────────── */
  .hv-perf-card {
    width: 124px;
    background: #fff;
    border-radius: 10px;
    padding: 10px 11px 11px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.10);
  }
  .hv-perf-card__header { display:flex; align-items:center; gap:5px; margin-bottom:9px; }
  .hv-perf-dot { width:6px; height:6px; border-radius:50%; background:var(--color-secondary); flex-shrink:0; }
  .hv-perf-card__label {
    font-size: 7.5px; font-family: var(--font-sans, sans-serif);
    color: #667085; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  /* Ascending bar chart — no axis labels, no values */
  .hv-perf-bars {
    display: flex; align-items: flex-end; gap: 4px;
    height: 38px;
  }
  .hv-perf-bars span {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: rgba(29,161,242,0.28);
  }
  .hv-perf-bars span:nth-child(1) { height: 34%; }
  .hv-perf-bars span:nth-child(2) { height: 50%; }
  .hv-perf-bars span:nth-child(3) { height: 41%; }
  .hv-perf-bars span:nth-child(4) { height: 68%; }
  .hv-perf-bars span:nth-child(5) { height: 57%; }
  .hv-perf-bars span:nth-child(6) { height: 100%; background: var(--color-accent); }
  .hv-perf-foot {
    display: flex; gap: 4px; margin-top: 9px;
  }
  .hv-perf-foot i {
    height: 4px; border-radius: 2px; background: #e4e7ec;
  }
  .hv-perf-foot i:nth-child(1) { width: 38%; }
  .hv-perf-foot i:nth-child(2) { width: 24%; }

  /* ── Capability badge pill ──────────────────────────── */
  /* Was a "Built on WordPress" pill with the WordPress mark and its brand
     blue (#21759b). It sat beside the headline as a second hero badge and
     re-anchored the whole hero on one platform, which is the thing this
     page is moving away from. Same pill, platform-neutral content. The
     whole .hero-visual is aria-hidden, so this is decoration only. */
  .hv-wp-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: rgba(8, 15, 30, 0.90);
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    white-space: nowrap;
    backdrop-filter: blur(6px);
  }
  .hv-wp-badge__icon {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .hv-wp-badge__text {
    font-size: 9.5px;
    font-family: var(--font-sans, sans-serif);
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    letter-spacing: 0.02em;
  }
  .hv-wp-badge__check {
    width: 14px; height: 14px; border-radius: 50%;
    background: rgba(22,163,74,0.18);
    border: 1px solid rgba(22,163,74,0.40);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  /* ── Responsive: collapse to single-column ─────────── */
  @media (max-width: 1024px) {
    .hero__split { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
  }

  /* At <=768px responsive.css gives .hero its own
     calc(var(--nav-height) + var(--space-16)) padding, so the split
     must drop its padding here to avoid doubling the nav clearance.
     Between 769px and 1024px .hero has no padding, so the base rule
     above is what keeps the headline clear of the nav. */
  @media (max-width: 768px) {
    .hero__split { padding-block: 0; }
  }