/* ══════════════════════════════════════
   REVONEXIS COMMERCIAL INTELLIGENCE HUB HERO
   v2.5 — position & hover fix pass
   ══════════════════════════════════════ */

.ci-hero {
  grid-template-columns: minmax(0, 0.82fr) minmax(560px, 1.18fr);
  gap: clamp(2rem, 4vw, 5rem);
  min-height: 94vh;
  padding-top: 8.5rem;
  padding-bottom: 4.25rem;
  overflow: visible;
}

.ci-hero::after {
  content: '';
  position: absolute;
  inset: 4rem -18% auto 36%;
  height: 82%;
  background:
    radial-gradient(circle at 54% 42%, rgba(0,210,255,0.22), transparent 28%),
    radial-gradient(circle at 70% 52%, rgba(0,130,255,0.14), transparent 38%),
    radial-gradient(circle at 48% 62%, rgba(0,80,200,0.10),  transparent 44%);
  pointer-events: none;
  opacity: 1;
  z-index: 0;
}

.ci-hero .hero-tag      { align-self: end; margin-bottom: 0; }
.ci-hero-content        { max-width: 650px; overflow: visible; }
.ci-hero .hero-sub      { max-width: 640px; margin-left: 0; margin-right: 0; }
.ci-hero .hero-entry-clarity {
  max-width: 630px;
  margin: -1.2rem 0 2.2rem;
  color: rgba(0,210,255,0.78);
}

/* ── HUB VISUAL ── */
.ci-hub-visual {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  height: min(720px, 54vw);
  min-height: 610px;
  justify-self: center;
  align-self: center;
  filter:
    drop-shadow(0 0 64px rgba(0,210,255,0.18))
    drop-shadow(0 0 24px rgba(0,210,255,0.10));
}

/* ── MAP / DOT GRID ── */
.ci-hub-map {
  position: absolute;
  inset: 5% 3% 2%;
  opacity: 0.82;
  background:
    radial-gradient(circle at 48% 44%, rgba(0,210,255,0.30), transparent 8%),
    radial-gradient(circle at 38% 37%, rgba(0,210,255,0.18), transparent 14%),
    radial-gradient(circle at 62% 47%, rgba(0,210,255,0.16), transparent 17%),
    radial-gradient(circle at 33% 55%, rgba(0,210,255,0.14), transparent 14%),
    radial-gradient(circle at 68% 58%, rgba(0,210,255,0.12), transparent 14%),
    radial-gradient(circle at 50% 50%, rgba(0,130,255,0.12), transparent 48%);
  mask-image: radial-gradient(circle at 50% 50%, black 0 52%, transparent 74%);
}

.ci-hub-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,210,255,0.52) 1px, transparent 1.5px);
  background-size: 13px 13px;
  opacity: 0.48;
  animation: ciMapDrift 28s linear infinite;
}

.ci-hub-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,160,255,0.28) 1.5px, transparent 2px);
  background-size: 26px 26px;
  opacity: 0.24;
  animation: ciMapDrift 42s linear infinite reverse;
}

/* ── SVG LINES ── */
.ci-hub-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ci-orbit {
  fill: none;
  stroke: rgba(0,210,255,0.24);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ci-orbit-1 { stroke-dasharray: 4 12; animation: ciOrbit 32s linear infinite; transform-origin: 50% 50%; }
.ci-orbit-2 { stroke-dasharray: 1 18; opacity: 0.75; animation: ciOrbit 46s linear infinite reverse; transform-origin: 50% 50%; }

.ci-line {
  fill: none;
  stroke: rgba(0,210,255,0.72);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 8 14;
  filter: drop-shadow(0 0 8px rgba(0,210,255,0.55));
  animation: ciLinePulse 4.0s ease-in-out infinite;
}
.ci-line-2  { animation-delay: .22s; }
.ci-line-3  { animation-delay: .44s; }
.ci-line-4  { animation-delay: .66s; }
.ci-line-5  { animation-delay: .88s; }
.ci-line-6  { animation-delay: 1.10s; }
.ci-line-7  { animation-delay: 1.32s; }
.ci-line-8  { animation-delay: 1.54s; }
.ci-line-9  { animation-delay: 1.76s; }
.ci-line-10 { animation-delay: 1.98s; }
.ci-line-11 { animation-delay: 2.20s; }
.ci-line-12 { animation-delay: 2.42s; }

.ci-node {
  fill: #00d2ff;
  filter: drop-shadow(0 0 14px rgba(0,210,255,1)) drop-shadow(0 0 5px #fff);
  animation: ciNodePulse 3.2s ease-in-out infinite;
  transform-origin: center;
}
.ci-node.n2  { animation-delay: .18s; }
.ci-node.n3  { animation-delay: .36s; }
.ci-node.n4  { animation-delay: .54s; }
.ci-node.n5  { animation-delay: .72s; }
.ci-node.n6  { animation-delay: .90s; }
.ci-node.n7  { animation-delay: 1.08s; }
.ci-node.n8  { animation-delay: 1.26s; }
.ci-node.n9  { animation-delay: 1.44s; }
.ci-node.n10 { animation-delay: 1.62s; }
.ci-node.n11 { animation-delay: 1.80s; }
.ci-node.n12 { animation-delay: 1.98s; }

/* ── HUB CORE ── */
.ci-hub-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 32%, rgba(0,210,255,0.26), transparent 40%),
    rgba(4,7,14,0.94);
  border: 1px solid rgba(0,210,255,0.72);
  box-shadow:
    0 0 72px rgba(0,210,255,0.38),
    0 0 28px rgba(0,210,255,0.24),
    inset 0 0 52px rgba(0,210,255,0.13),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  animation: ciHubBreath 4.8s ease-in-out infinite;
  z-index: 4;
}
.ci-hub-core::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(0,210,255,0.38);
  animation: ciHubRing 4.8s ease-in-out infinite;
  pointer-events: none;
}
.ci-hub-core::after {
  content: '';
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  border: 1px solid rgba(0,210,255,0.20);
  animation: ciHubRing 4.8s ease-in-out infinite;
  animation-delay: 1.2s;
  pointer-events: none;
  opacity: 0.6;
}

.ci-core-brand {
  font-family: 'Syne', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: 0.45rem;
  text-shadow: 0 0 24px rgba(0,210,255,0.3);
}
.ci-core-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.80rem;
  line-height: 1.32;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.7rem;
  text-shadow: 0 0 12px rgba(0,210,255,0.6);
}
.ci-core-line {
  font-size: 0.80rem;
  line-height: 1.38;
  color: rgba(232,237,245,0.92);
}

/* ══════════════════════════════════════
   SATELLITE CARDS
   ══════════════════════════════════════ */
.ci-satellite {
  position: absolute;
  width: 178px;          /* slightly narrower to give spacing room */
  min-height: 108px;
  padding: 0.9rem 1rem 0.85rem;
  border: 1px solid rgba(0,210,255,0.32);
  border-top: 2px solid rgba(0,210,255,0.60);
  border-radius: 8px;
  background:
    linear-gradient(160deg,
      rgba(0,210,255,0.07) 0%,
      rgba(4,8,18,0.88) 40%,
      rgba(2,5,12,0.95) 100%);
  box-shadow:
    0 0 32px rgba(0,210,255,0.10),
    0 4px 24px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  z-index: 5;
  /* ─ FIX: transition only visual properties, NOT transform ─
     transform is managed per-position-class to avoid hover clobbering translateX */
  transition: border-color .28s ease, box-shadow .28s ease, background .28s ease;
  will-change: transform;
}

/* ─── FIX: hover uses translate3d(0,-5px,0) scale(1.018) so it ADDS to existing transform
           instead of replacing it. Each pos-* class sets its own hover override below. ─── */
.ci-satellite:hover {
  border-color: rgba(0,210,255,0.65);
  border-top-color: rgba(0,210,255,0.90);
  box-shadow:
    0 0 52px rgba(0,210,255,0.22),
    0 8px 32px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  background: linear-gradient(160deg,
    rgba(0,210,255,0.11) 0%,
    rgba(5,10,22,0.92) 42%,
    rgba(3,6,14,0.97) 100%);
}

/* Cards without a translateX — safe to apply translateY directly */
.ci-satellite:not(.pos-top):not(.pos-bottom):hover {
  transform: translateY(-5px) scale(1.018);
}

/* Cards WITH translateX(-50%) — must preserve it on hover */
.pos-top:hover    { transform: translateX(-50%) translateY(-5px) scale(1.018); }
.pos-bottom:hover { transform: translateX(-50%) translateY(-5px) scale(1.018); }

.ci-satellite strong {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 0.90rem;
  font-weight: 700;
  line-height: 1.16;
  color: #e8edf5;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding-left: 2.2rem;
  margin-bottom: 0.5rem;
}
.ci-satellite small {
  display: block;
  font-size: 0.74rem;
  line-height: 1.48;
  color: rgba(176,192,220,0.88);
  padding-left: 2.2rem;
}
.ci-icon {
  position: absolute;
  left: 0.9rem;
  top: 0.85rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.1rem;
  color: var(--cyan);
  text-shadow:
    0 0 14px rgba(0,210,255,0.95),
    0 0  6px rgba(0,210,255,0.6);
}

/* ══════════════════════════════════════
   SATELLITE POSITIONS — 12-clock layout
   Coordinates calculated from hub centre (50%, 50%)
   at 30° intervals, orbit radius ~241px
   ══════════════════════════════════════

   klo 12  → pos-top           LEAD INTELLIGENCE
   klo  1  → pos-upper-right   REVENUE SYSTEMS
   klo  2  → pos-right         EXPORT & MARKET INTELLIGENCE
   klo  3  → pos-lower-right   AI SEARCH READINESS
   klo  4  → pos-bottom-right  AI AGENTS
   klo  5  → pos-bottom-left   AI WORKFLOW DESIGN
   klo  6  → pos-bottom        INTERNATIONAL GROWTH
   klo  7  → pos-lower-left    BUSINESS INTELLIGENCE
   klo  8  → pos-left          COMMERCIAL PRESENCE
   klo  9  → pos-upper-left    CUSTOMER JOURNEY OPTIMISATION
   klo 10  → pos-analytics     SALES PROCESS ENGINEERING
   klo 11  → pos-analytics-2   STRATEGIC ANALYTICS
   ══════════════════════════════════════ */

/* klo 12 — top centre */
.pos-top {
  left: 50%;
  top: -1%;
  transform: translateX(-50%);
}

/* klo 1 */
.pos-upper-right {
  right: 9%;
  top: 5%;
}

/* klo 2 */
.pos-right {
  right: -3%;
  top: 24%;
}

/* klo 3 */
.pos-lower-right {
  right: -7%;
  top: 42.5%;
}

/* klo 4 */
.pos-bottom-right {
  right: -3%;
  top: 61%;
}

/* klo 5 */
.pos-bottom-left {
  right: 9%;
  top: 80%;
  left: auto;
}

/* klo 6 — bottom centre */
.pos-bottom {
  left: 50%;
  bottom: -1%;
  transform: translateX(-50%);
}

/* klo 7 */
.pos-lower-left {
  left: 9%;
  top: 82%;
}

/* klo 8 */
.pos-left {
  left: -3%;
  top: 61%;
}

/* klo 9 */
.pos-upper-left {
  left: -7%;
  top: 42.5%;
}

/* klo 10 */
.pos-analytics {
  left: -3%;
  top: 21%;
}

/* klo 11 */
.pos-analytics-2 {
  left: 9%;
  top: 5%;
}

/* ══════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════ */
@keyframes ciHubBreath {
  0%, 100% {
    box-shadow:
      0 0 52px rgba(0,210,255,0.24),
      0 0 22px rgba(0,210,255,0.16),
      inset 0 0 38px rgba(0,210,255,0.10);
  }
  50% {
    box-shadow:
      0 0 96px rgba(0,210,255,0.42),
      0 0 40px rgba(0,210,255,0.26),
      inset 0 0 58px rgba(0,210,255,0.18);
  }
}
@keyframes ciHubRing {
  0%, 100% { opacity: 0.30; transform: scale(0.982); }
  50%       { opacity: 0.80; transform: scale(1.040); }
}
@keyframes ciLinePulse {
  0%, 100% { opacity: 0.32; stroke-dashoffset: 0; }
  50%       { opacity: 0.90; stroke-dashoffset: -40; }
}
@keyframes ciNodePulse {
  0%, 100% { opacity: 0.65; r: 5; }
  50%       { opacity: 1;   r: 9; }
}
@keyframes ciOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ciMapDrift {
  from { background-position: 0 0; }
  to   { background-position: 130px 65px; }
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
/* Headline scale — desktop default */
.ci-hero h1 {
  font-size: clamp(2.55rem, 3.45vw, 4.35rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 760px;
  overflow: visible;
  hyphens: none;
  word-break: keep-all;
}

@media (max-width: 1280px) {
  .ci-hero {
    grid-template-columns: minmax(0, 0.85fr) minmax(520px, 1.15fr);
    gap: 2.5rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .ci-hub-visual { transform: scale(0.88); transform-origin: center; margin-right: -3rem; }
}

@media (max-width: 1100px) {
  .ci-hero { grid-template-columns: 1fr; padding-top: 7rem; }
  .ci-hub-visual {
    width: min(760px, 100%);
    height: 620px;
    min-height: 600px;
    transform: none;
    margin: 0 auto;
    order: 2;
  }
  .ci-hero-content { order: 1; }
  .ci-satellite { width: 166px; min-height: 102px; padding: 0.85rem; }
  .ci-satellite strong, .ci-satellite small { padding-left: 2rem; }
}

@media (max-width: 760px) {
  .ci-hero { padding: 6.25rem 1.15rem 3.5rem; gap: 1.6rem; }
  .ci-hero::after { inset: 18rem -25% auto -20%; height: 55%; }
  .ci-hub-visual {
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 1rem 0 0;
  }
  .ci-hub-map, .ci-hub-lines { display: none; }
  .ci-hub-core {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 210px; height: 210px;
    margin: 0 auto 1rem;
  }
  /* On mobile all position classes reset — hover also resets */
  .ci-satellite,
  .ci-satellite:hover,
  .ci-satellite:not(.pos-top):not(.pos-bottom):hover,
  .pos-top:hover, .pos-bottom:hover,
  .pos-top, .pos-upper-right, .pos-right, .pos-lower-right,
  .pos-bottom-right, .pos-bottom, .pos-bottom-left,
  .pos-lower-left, .pos-left, .pos-upper-left, .pos-analytics, .pos-analytics-2 {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    width: 100%;
    min-height: auto;
  }
  .ci-satellite:nth-of-type(n+8) { display: none; }
  .ci-satellite strong { font-size: 0.88rem; }
  .ci-satellite small  { font-size: 0.74rem; }
}

@media (max-width: 430px) {
  .ci-hero h1      { font-size: clamp(1.75rem, 9vw, 2.6rem); }
  .ci-hero .hero-sub { font-size: 0.98rem; }
  .ci-core-brand   { font-size: 1.35rem; }
  .ci-core-title   { font-size: 0.76rem; }
  .ci-core-line    { font-size: 0.76rem; }
}

/* Headline scale */
@media (max-width: 1100px) {
  .ci-hero h1 { font-size: clamp(2.2rem, 6.5vw, 3.8rem); line-height: 1.09; overflow: visible; }
}
@media (max-width: 520px) {
  .ci-hero h1 { font-size: clamp(1.8rem, 8.5vw, 2.75rem); line-height: 1.10; }
}

/* Prevent line-highlight span from clipping at container edge */
.ci-hero h1 .line-highlight {
  display: inline;
  white-space: normal;
  overflow: visible;
}