/* =========================================
   HUB FOUNDATION
========================================= */

html{
  scroll-behavior:smooth;
}

:root{

  --bg-primary:#05070b;
  --bg-secondary:#0b1119;
  --bg-panel:#0f1722;

  --border-soft:rgba(255,255,255,0.06);
  --border-strong:rgba(125,211,252,0.14);

  --text-primary:#f8fafc;
  --text-secondary:rgba(255,255,255,0.72);
  --text-muted:rgba(255,255,255,0.48);

  --accent-blue:#38bdf8;
  --accent-green:#14b8a6;

  --shadow-panel:
    0 20px 60px rgba(0,0,0,0.35);

  --blur-panel:blur(18px);

  --radius-panel:24px;

}

body{
  overflow-x:hidden;
}

body{
background:

  radial-gradient(
    circle at top,
    rgba(37,99,235,0.08),
    transparent 30%
  ),

  linear-gradient(
    180deg,
    #03050a 0%,
    #05070b 30%,
    #071019 70%,
    #05070b 100%
  );

  color:#fff;
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}


.hub-section::after{
  content:"";

  position:absolute;
  left:50%;
  bottom:0;

  width:82%;
  height:1px;

  transform:translateX(-50%);

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.06),
    transparent
  );
}

/*==============================
FURTHER UPDATE
==============================*/

.hub-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
  linear-gradient(
    rgba(255,255,255,0.015) 1px,
    transparent 1px
  ),
  linear-gradient(
    90deg,
    rgba(255,255,255,0.015) 1px,
    transparent 1px
  );

  background-size:48px 48px;
  pointer-events:none;
  opacity:0.18;
}

/* STATUS BAR */

.section-status-bar{

  width:180px;
  height:4px;

  margin-top:22px;

  border-radius:999px;

  background:
  rgba(255,255,255,0.06);

  overflow:hidden;
}

.section-status-bar span{

  display:block;

  height:100%;

  border-radius:999px;

  background:
  linear-gradient(
    90deg,
    #2563eb,
    #38bdf8
  );
}


/* =========================================
   GLOBAL AMBIENT LIGHTING
========================================= */

body::before{
  content:"";

  position:fixed;
  inset:0;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(59,130,246,0.08),
      transparent 28%
    ),

    radial-gradient(
      circle at 80% 70%,
      rgba(16,185,129,0.05),
      transparent 32%
    );

  pointer-events:none;

  z-index:-1;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
  repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.012),
    rgba(255,255,255,0.012) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity:0.035;
  pointer-events:none;
  z-index:1;
}


/* =========================================
   GLOBAL SECTION SPACING
========================================= */



/*=========================================
TERMINAL STRIP 
==========================================*/

.terminal-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:20px;
}

.terminal-strip span{
  padding:8px 12px;
  border-radius:10px;
  background:
  rgba(255,255,255,0.04);
  border:
  1px solid rgba(255,255,255,0.05);
  color:#7dd3fc;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
}

/*======================
HUB HEAT
=======================*/

.hub-heat-header,
.hub-map-header{

  margin-bottom:22px;
}

.hub-heat-header h3,
.hub-map-header h2{

  margin-top:12px;
}

.hub-heat-section,
.hub-reliability-section{

  position:relative;
}

.hub-heat-section::before,
.hub-reliability-section::before{

  content:"";

  position:absolute;

  top:-28px;
  left:0;

  width:100%;
  height:1px;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.06),
    transparent
  );
}



/*=======================
PANEL 
==================*/
.panel-id{
  display:block;
  margin-bottom:18px;
  line-height:1;
  color:rgba(255,255,255,0.38);
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
}
/* =========================================
   HERO
========================================= */

.hub-hero-content{
  animation:
  heroFade 1.2s ease forwards;
}

@keyframes heroFade{

  from{
    opacity:0;
    transform:translateY(30px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

.hub-hero{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:110px 8% 80px;
}

.hub-hero-bg{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    rgba(5,7,11,0.78),
    rgba(5,7,11,0.88)
  ),
  url("../assets/hub/hero-bg.jpg")
  center/cover no-repeat;

  transform:scale(1.04);
}

.hub-hero-overlay{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(59,130,246,0.20),
      transparent 34%
    ),

    linear-gradient(
      90deg,
      rgba(5,7,11,0.78),
      rgba(5,7,11,0.58)
    );
}

.hub-hero-grid{
  position:relative;
  z-index:2;

  width:100%;

  display:grid;
  grid-template-columns:1.4fr 0.6fr;
  gap:80px;
  align-items:start;
}

.hub-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 18px;

  border-radius:999px;

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  color:#7dd3fc;

  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;

  margin-bottom:24px;
}

.method-card,
.roadmap-card,
.hub-live-card,
.hub-reliability-card,
.hub-heat-card{

  background:
  linear-gradient(
    180deg,
    rgba(18,24,38,0.92),
    rgba(8,11,18,0.92)
  );

  border:
  1px solid rgba(255,255,255,0.06);
}

.hub-hero h1{
  font-size:clamp(48px,5vw,74px);

  line-height:0.96;

  letter-spacing:-3px;

  margin-bottom:24px;

  font-weight:700;
}

.hub-hero p{
  max-width:620px;

  font-size:17px;

  line-height:1.85;

  color:rgba(255,255,255,0.74);

  margin-bottom:36px;
}

/* =========================================
   HERO ACTIONS
========================================= */

.hub-hero-actions{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.hub-btn-primary,
.hub-btn-secondary{
  padding:16px 28px;
  border-radius:16px;
  text-decoration:none;

  transition:0.35s ease;
}

.hub-btn-primary{
  background:#2563eb;
  color:#fff;
}

.hub-btn-primary:hover{
  transform:translateY(-4px);
}

.hub-btn-secondary{
  border:1px solid rgba(255,255,255,0.1);
  color:#fff;
  background:rgba(255,255,255,0.04);
}

/* =========================================
   HERO PANELS
========================================= */

.hub-hero-panel{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.hero-panel-card{
  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  border-radius:28px;

  padding:30px;

  backdrop-filter:blur(18px);

  transition:0.35s ease;
}

.hero-panel-card:hover{
  transform:translateY(-6px);
}

.hero-panel-card span{
  display:block;

  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;

  color:#7dd3fc;

  margin-bottom:12px;
}

.hero-panel-card strong{
  font-size:24px;
  line-height:1.4;
}

/*====================================
PREMIUM 
=====================================*/

.premium-panel{

  position:relative;

  display:flex;
  flex-direction:column;

  justify-content:flex-start;

  min-height:240px;

  padding:26px;

  border-radius:24px;

  background:
  linear-gradient(
    180deg,
    rgba(8,18,38,0.94) 0%,
    rgba(3,10,22,0.98) 100%
  );

  border:1px solid rgba(82,130,255,0.14);

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.015),
    0 10px 40px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.03);

  overflow:hidden;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

/* subtle intelligence glow */

.premium-panel::before{

  content:"";

  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(59,130,246,0.08),
      transparent 42%
    );

  pointer-events:none;
}

/* hover refinement */

.premium-panel:hover{

  transform:translateY(-4px);

  border-color:rgba(96,165,250,0.22);

  box-shadow:
    0 18px 50px rgba(0,0,0,0.55),
    0 0 24px rgba(37,99,235,0.08);
}

.panel-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:18px;
}

.panel-kicker{

  display:inline-flex;

  align-items:center;

  gap:6px;

  font-size:11px;

  font-weight:700;

  line-height:1.3;

  letter-spacing:0.10em;

  text-transform:uppercase;

  color:rgba(140,170,220,0.68);
}

.panel-value{

  font-size:26px;

  font-weight:700;

  letter-spacing:-0.03em;
}

/* BLUE */

.panel-value.blue{

  color:#38bdf8;

  text-shadow:
  0 0 18px rgba(56,189,248,0.22);
}

/* GREEN */

.panel-value.green{

  color:#22c55e;

  text-shadow:
  0 0 18px rgba(34,197,94,0.22);
}

/* ORANGE */

.panel-value.orange{

  color:#f59e0b;

  text-shadow:
  0 0 18px rgba(245,158,11,0.22);
}

.premium-panel h3{

  font-size:20px;

  margin-bottom:10px;

  color:#ffffff;
}

.premium-panel p{

  color:rgba(255,255,255,0.62);

  font-size:13px;

  line-height:1.7;

  margin-bottom:18px;
}

/*========================================
STATUS + COLOUR
========================================*/

.system-status strong{
  font-size:13px;
}

.system-status div{
  position:relative;
  overflow:hidden;
}

.system-status div::before{
  content:"";

  position:absolute;

  top:18px;
  right:18px;

  width:8px;
  height:8px;

  border-radius:50%;
}

/* NEUTRAL */

.status-neutral::before{
  background:#38bdf8;

  box-shadow:
  0 0 12px rgba(56,189,248,0.75);
}

/* INFO */

.status-info::before{
  background:#14b8a6;

  box-shadow:
  0 0 12px rgba(20,184,166,0.75);
}

/* POSITIVE */

.status-positive::before{
  background:#22c55e;

  box-shadow:
  0 0 12px rgba(34,197,94,0.75);
}

.status-neutral strong{
  color:#dbeafe;
}

.status-info strong{
  color:#ccfbf1;
}

.status-positive strong{
  color:#dcfce7;
}



/* =========================================
   STICKY NAV
========================================= */

.hub-anchor-nav{
  position:sticky;
  top:0;
  z-index:50;

  -webkit-overflow-scrolling:touch;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.04),
    0 10px 30px rgba(0,0,0,0.25);

    text-transform:uppercase;
    letter-spacing:1px;
    font-size:12px;

  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;

  padding:22px;

  background:rgba(5,7,11,0.72);

  backdrop-filter:blur(18px);

  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.hub-anchor-nav a{
  font-size:14px;
  font-weight:500;
  letter-spacing:0.2px;
  color:rgba(255,255,255,0.72);
  text-decoration:none;

  padding:10px 14px;
  border-radius:10px;
  transition:0.25s ease;
}

.hub-anchor-nav a:hover{
  background:
  rgba(255,255,255,0.04);
  color:#fff;
}

/* =========================================
   SECTION LAYOUT
========================================= */

.hub-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:70px;
  align-items:center;
}

.hub-grid,
.hub-hero-grid{
  width:100%;
}

.hub-copy{
  max-width:720px;
}
.hub-section-header{
  max-width:900px;
  margin-bottom:50px;
}

.hub-copy h2,
.hub-section-header h2{

  font-size:clamp(34px,4vw,54px);

  line-height:1.08;

  margin-bottom:24px;

  letter-spacing:-2px;

  font-weight:700;
}

/* =========================================
   ROADMAP HEADING NOTE
========================================= */

.roadmap-heading-row{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}

.roadmap-hover-note{

  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 16px;

  border-radius:999px;

  background:
  rgba(255,255,255,0.04);

  border:
  1px solid rgba(125,211,252,0.10);

  color:
  rgba(255,255,255,0.68);

  font-size:13px;

  letter-spacing:0.2px;

  backdrop-filter:blur(12px);
}

/*========================================
    UK MAP
=========================================*/

.uk-map-wrapper::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:
  radial-gradient(
    circle,
    rgba(59,130,246,0.12),
    transparent 65%
  );

  filter:blur(80px);

  z-index:0;
}

.uk-map{
  position:relative;
  z-index:2;
}

.uk-map-wrapper{
  max-width:980px;
  margin:0 auto;
}

/* =========================================
   PULSE DOT
========================================= */

.hover-pulse{

  width:8px;
  height:8px;

  border-radius:50%;

  background:#7dd3fc;

  box-shadow:
  0 0 12px rgba(125,211,252,0.6);

  animation:
  pulseDot 2s infinite;
}

@keyframes pulseDot{

  0%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.5);
    opacity:0.5;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }

}

.hub-copy p{
  font-size:15px;
  line-height:1.95;
  color:var(--text-secondary);
  max-width:760px;
}

/*========================================
TERMINAL GLOW
=========================================*/

@keyframes terminalGlow{
  0%{
    border-color:rgba(255,255,255,0.05);
  }
  50%{
    border-color:rgba(56,189,248,0.12);
  }
  100%{
    border-color:rgba(255,255,255,0.05);
  }
}

.hub-live-card{
  animation:terminalGlow 6s infinite;
}

/*=======================================
TERMINAL TICKER
========================================*/

.terminal-ticker{

  position:absolute;
  top:20px;
  left:0;

  height:32px;
  display:flex;
  align-items:center;

  width:100%;

  overflow:hidden;

  z-index:10;

  border-top:1px solid rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.04);

  background:
  rgba(5,7,11,0.82);

  backdrop-filter:blur(12px);
}

.ticker-track{

  display:flex;
  gap:80px;

  width:max-content;

  padding:12px 0;

  animation:tickerMove 32s linear infinite;
}

.ticker-track span{

  color:#7dd3fc;

  font-size:11px;

  letter-spacing:1.5px;

  text-transform:uppercase;

  white-space:nowrap;
}

@keyframes tickerMove{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}

/* =========================================
   IMAGE
========================================= */

.hub-main-image{
  width:100%;
  border-radius:32px;

  border:1px solid rgba(255,255,255,0.08);

  box-shadow:
  0 30px 80px rgba(0,0,0,0.45);
}

/* =========================================
   FLOATING CARDS
========================================= */

.hub-floating-cards{
  margin-top:28px;

  display:grid;
  gap:18px;
}

.hub-stat-card{
  padding:24px;
}

.hub-stat-card span{
  display:block;

  color:#7dd3fc;

  margin-bottom:10px;

  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.hub-stat-card strong{
  font-size:20px;
}

/* =========================================
   LIVE INFRASTRUCTURE GRID
========================================= */

.hub-live-grid{
  display:grid;
  grid-template-columns:
  repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:38px;
  align-items:stretch;
}

.hub-live-card{

  position:relative;

  min-height:220px;

  padding:22px 22px 20px;

  border-radius:22px;

  background:
  linear-gradient(
    180deg,
    rgba(5,14,30,0.94),
    rgba(3,10,20,0.98)
  );

  border:1px solid rgba(80,130,255,0.10);

  overflow:hidden;

  transition:
  transform 0.35s ease,
  border-color 0.35s ease,
  box-shadow 0.35s ease;
}

.hub-live-card::after{
  content:"";
  position:absolute;
  top:18px;
  right:18px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:
  0 0 12px rgba(34,197,94,0.8);
}

.hub-live-card span{
  display:block;
  margin-bottom:14px;
  color:#7dd3fc;
  font-size:11px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  border-radius:22px;
  opacity:0.85;
}

.hub-live-card strong{
  display:block;
  font-size:64px;
  font-weight:700;
  letter-spacing:-4px;
  line-height:0.92;
  color:#fff;
  margin-bottom:18px 0;
  font-variant-numeric:tabular-nums;
}

.hub-live-card h3{
  font-size:40px;
  line-height:1;
  margin-top:28px;
  margin-bottom:26px;
  font-weight:700;
  letter-spacing:-0.03em;
}

.hub-live-card p{
  font-size:13px;
  line-height:1.75;
  color:rgba(255,255,255,0.62);
  max-width:92%;
}

/*==========================================
METRIC TREND
===========================================*/

.metric-trend{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:26px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

/* POSITIVE */

.metric-trend.positive{
  color:#22c55e;
  text-shadow:
  0 0 12px rgba(34,197,94,0.25);
}

/* NEUTRAL */

.metric-trend.neutral{
  color:#38bdf8;
  text-shadow:
  0 0 12px rgba(56,189,248,0.22);
}

/* WARNING */

.metric-trend.warning{
  color:#f59e0b;
  text-shadow:
  0 0 12px rgba(245,158,11,0.20);
}

/*  METRIC DOT */

.metric-dot{

  position:absolute;

  top:18px;
  right:18px;

  width:8px;
  height:8px;

  border-radius:50%;
}

/* GREEN */

.metric-dot.positive{

  background:#22c55e;

  box-shadow:
  0 0 14px rgba(34,197,94,0.65);
}

/* BLUE */

.metric-dot.neutral{

  background:#38bdf8;

  box-shadow:
  0 0 14px rgba(56,189,248,0.65);
}

/* AMBER */

.metric-dot.warning{

  background:#f59e0b;

  box-shadow:
  0 0 14px rgba(245,158,11,0.65);
}

/*=======================================
SUBTITLE
========================================*/

.panel-subtitle{

  position:relative;
  z-index:2;

  margin-top:18px;
  margin-bottom:22px;

  font-size:15px;

  font-weight:500;

  line-height:1.6;
}

.signal-high{

  color:#38bdf8;
}

.signal-positive{

  color:#22c55e;
}

.signal-emerging{

  color:#f59e0b;
}

/*========================================
REALIABILITY COLOUR SCHEMES
=========================================*/

.panel-subtitle{
  margin-top:16px;
  font-size:15px;
  font-weight:500;
  line-height:1.6;
}

/* STRONG NETWORK */

.signal-high{
  color:#38bdf8;
}

/* POSITIVE AVAILABILITY */

.signal-positive{
  color:#22c55e;
}

/* MODERATE */

.signal-moderate{
  color:#14b8a6;
}

/* WARNING / VARIABLE */

.signal-warning{
  color:#f59e0b;
}

/* =========================================
   REGIONAL HEAT INDICATORS
========================================= */

.hub-heat-section{
  margin-top:42px;
}

.hub-heat-header h3{
  font-size:22px;
  margin-top:14px;
  letter-spacing:-0.5px;
}

.hub-heat-grid{
  display:grid;
  grid-template-columns:
  repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:30px;
  align-items:stretch;
}

.hub-heat-grid,
.hub-reliability-grid{
  display:grid;

  grid-template-columns:repeat(3, minmax(0,1fr));

  gap:24px;

  align-items:stretch;
}

/*RESPONSIVE*/

@media (max-width:1024px){

  .hub-heat-grid
  .hub-reliability-grid{

    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:640px){

  .hub-heat-grid
  .hub-reliability-grid{

    grid-template-columns:1fr;
  }
}


.hub-heat-card:hover{

  transform:
  translateY(-6px);

  border-color:
  rgba(125,211,252,0.18);
}

.hub-heat-card h4{
  font-size:16px;
  font-weight:600;
  margin-bottom:18px;
}

.hub-heat-meta{

  display:flex;
  justify-content:space-between;
  margin-bottom:18px;
  color:
  rgba(255,255,255,0.72);
  letter-spacing:0.3px;
  font-size:11px;
}

.hub-heat-bar{
  margin-top:auto;
  width:100%;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:
  rgba(255,255,255,0.06);
}

.hub-heat-fill{
  height:100%;
  border-radius:999px;
  transition:
  width 1.2s ease;
}

/* =========================================
   CHARGING RELIABILITY
========================================= */

.hub-reliability-grid{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
  margin-top:24px;
}


.hub-reliability-card:hover{

  transform:
  translateY(-6px);

  border-color:
  rgba(125,211,252,0.18);

  box-shadow:
    0 18px 50px rgba(0,0,0,0.38),
    0 0 24px rgba(59,130,246,0.10);
}

.hub-reliability-top{

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:18px;

  margin-bottom:22px;
}

.hub-reliability-top h4{

  font-size:17px;

  line-height:1.4;

  font-weight:600;

  letter-spacing:-0.3px;

  color:#fff;

  max-width:180px;
}

.hub-reliability-score{
  font-size:34px;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  text-shadow:
  0 0 18px rgba(255,255,255,0.08);
  line-height:1;
  letter-spacing:-1px;
  color:#fff;
}

.hub-reliability-status{
  font-size:13px;
  color:rgba(255,255,255,0.62);
  margin-bottom:18px;
  letter-spacing:0.2px;
}

.hub-reliability-bar{
  position:relative;
  width:100%;
  height:6px;
  border-radius:999px;
  overflow:hidden;
  background:
  rgba(255,255,255,0.06);
}

.hub-reliability-fill{

  height:100%;

  border-radius:999px;
}

.reliability-high .hub-reliability-fill{

  background:
  linear-gradient(
    90deg,
    #22c55e,
    #34d399
  );
}

.reliability-medium .hub-reliability-fill{

  background:
  linear-gradient(
    90deg,
    #f59e0b,
    #fb923c
  );
}

.reliability-low .hub-reliability-fill{

  background:
  linear-gradient(
    90deg,
    #ef4444,
    #f87171
  );
}

/* =========================================
   UK MAP STAGE
========================================= */

.uk-map-stage{
  width:100%;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:560px;
  padding:40px;
  border-radius:24px;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      rgba(10,14,24,0.78),
      rgba(5,7,11,0.92)
    );

  border:
  1px solid rgba(255,255,255,0.06);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 40px 100px rgba(0,0,0,0.42);

  backdrop-filter:blur(16px);
}

.uk-map-inner{
  position:relative;
  width:420px;
  max-width:100%;
}

.uk-map-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
  radial-gradient(
    circle,
    rgba(59,130,246,0.10),
    transparent 60%
  );
  animation:
  mapGlow 14s linear infinite;

  opacity:0.6;
  pointer-events:none;
}

@keyframes mapGlow{
  from{
    transform:rotate(0deg) scale(1);
  }
  to{
    transform:rotate(360deg) scale(1.05);
  }
}

/* =========================================
   MAP IMAGE
========================================= */

.uk-map-image{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:2;
  opacity:0.96;
  filter:
    drop-shadow(0 0 40px rgba(59,130,246,0.12))
    brightness(0.9);
  user-select:none;
  pointer-events:none;
}

/* =========================================
   HOTSPOT LAYER
========================================= */

.uk-hotspot-layer{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
}

/* =========================================
   HOTSPOT
========================================= */

.uk-hotspot{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#7dd3fc;
  border:2px solid rgba(255,255,255,0.9);
  transform:translate(-50%,-50%);
  z-index:5;
  box-shadow:
    0 0 0 10px rgba(125,211,252,0.08),
    0 0 22px rgba(125,211,252,0.45);
  animation:
    hotspotPulse 3s infinite;
}

.hotspot-core{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#7dd3fc;
  box-shadow:
  0 0 20px rgba(125,211,252,0.9);
}

.hotspot-ring{

  position:absolute;

  top:50%;
  left:50%;

  width:30px;
  height:30px;

  border-radius:50%;

  border:
  1px solid rgba(125,211,252,0.35);

  transform:
  translate(-50%,-50%);

  animation:
  hotspotPulse 2.8s infinite;
}

@keyframes hotspotPulse{

  0%{
    transform:scale(1);
    opacity:0.9;
  }

  50%{
    transform:scale(1.8);
    opacity:0.35;
  }

  100%{
    transform:scale(1);
    opacity:0.9;
  }

}

.hotspot-label{

  margin-top:12px;

  font-size:11px;

  font-weight:500;

  color:#fff;

  white-space:nowrap;

  text-shadow:
  0 0 14px rgba(0,0,0,0.9);
}

/* =========================================
   UK MAP SYSTEM
========================================= */

.uk-map-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(
      rgba(125,211,252,0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(125,211,252,0.035) 1px,
      transparent 1px
    );

  background-size:40px 40px;
  mask-image:
    radial-gradient(
      circle at center,
      black 35%,
      transparent 100%
    );

  z-index:1;
}

.uk-map-shell{
  position:relative;
  padding:48px;
  border-radius:34px;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.015)
    );
  border:
    1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(24px);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.uk-map-stage{
  position:relative;
  min-height:460px;
  padding:42px 48px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02),
      rgba(255,255,255,0.01)
    );

  border:
  1px solid rgba(255,255,255,0.05);
}

/* =========================================
   AMBIENT LIGHT
========================================= */

.uk-map-ambient{

  position:absolute;

  inset:0;

  background:

    radial-gradient(
      circle at 50% 50%,
      rgba(59,130,246,0.10),
      transparent 55%
    ),

    radial-gradient(
      circle at 65% 70%,
      rgba(16,185,129,0.06),
      transparent 40%
    );

  filter:blur(40px);

  opacity:0.9;
}

/* =========================================
   MAP IMAGE
========================================= */

.uk-map-image{
  position:relative;
   width:min(420px,52%);
  z-index:1;
  opacity:0.96;
  filter:
    brightness(0.88)
    drop-shadow(0 0 40px rgba(59,130,246,0.12));

  user-select:none;

  pointer-events:none;
}

/* =========================================
   NETWORK LINES
========================================= */

.uk-network-lines{
  position:absolute;
  mix-blend-mode:screen;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  opacity:0.22;
   pointer-events:none;
}

.uk-network-lines line{
  stroke:#38bdf8;
  stroke-width:1.2;
  stroke-dasharray:8 10;
  animation:
  networkFlow 8s linear infinite;
}

@keyframes networkFlow{
  from{
    stroke-dashoffset:0;
  }
  to{
    stroke-dashoffset:-120;
  }
}

/* =========================================
   HOTSPOTS + TIPS
========================================= */

.uk-hotspot-layer{
  position:absolute;
  inset:0;
  z-index:5;
}

.uk-hotspot{
  position:absolute;
  transform:
  translate(-50%,-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:#7dd3fc;
  border:
  2px solid rgba(255,255,255,0.8);
  box-shadow:
    0 0 10px rgba(125,211,252,0.25);
  z-index:30;
}

.uk-hotspot-tooltip{
  position:absolute;
  left:22px;
  top:50%;
  transform:translateY(-50%);
  min-width:130px;
  padding:12px 14px;
  border-radius:16px;
  background:
    rgba(8,12,18,0.92);
  border:
    1px solid rgba(125,211,252,0.12);
  backdrop-filter:blur(18px);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35);

  display:flex;
  flex-direction:column;
  gap:6px;
}

.uk-hotspot-tooltip strong{
  font-size:13px;
  color:#fff;
}

.uk-hotspot-tooltip span{
  font-size:11px;
  color:rgba(255,255,255,0.66);
}

.uk-hotspot-tooltip{
  position:absolute;
  min-width:150px;
  padding:12px 14px;
  border-radius:14px;
  background:
  rgba(8,12,18,0.94);
  border:
  1px solid rgba(125,211,252,0.12);
  backdrop-filter:blur(18px);
  box-shadow:
  0 10px 30px rgba(0,0,0,0.32);
  opacity:0;
  visibility:hidden;
  transition:0.25s ease;
  pointer-events:none;
}

/* RIGHT */
.uk-hotspot.right .uk-hotspot-tooltip{
  left:18px;
  top:50%;
  transform:translateY(-50%);
}

.uk-hotspot:hover .uk-hotspot-tooltip{
  opacity:1;
  visibility:visible;
}

/* LEFT */
.uk-hotspot.left .uk-hotspot-tooltip{
  right:18px;
  top:50%;
  transform:translateY(-50%);
}

/* TOP */
.uk-hotspot.top .uk-hotspot-tooltip{
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
}

/* BOTTOM */
.uk-hotspot.bottom .uk-hotspot-tooltip{
  left:50%;
  top:18px;
  transform:translateX(-50%);
}

.uk-hotspot:hover .uk-hotspot-tooltip{
  opacity:1;
  visibility:visible;
}

.uk-hotspot-tooltip strong{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  color:#fff;
}

.uk-hotspot-tooltip span{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,0.66);
  line-height:1.7;
}

/* =========================================
   HOTSPOT CORE
========================================= */

.hotspot-core{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#7dd3fc;
  box-shadow:
    0 0 18px rgba(125,211,252,0.9),
    0 0 40px rgba(125,211,252,0.4);
}

/* =========================================
   HOTSPOT RINGS
========================================= */

.hotspot-ring{
  position:absolute;
  top:50%;
  left:50%;
  width:36px;
  height:36px;
  border-radius:50%;
  border:
  1px solid rgba(125,211,252,0.35);
  transform:
  translate(-50%,-50%);
  animation:
  hotspotPulse 2.8s infinite;
}

@keyframes hotspotPulse{

  0%{

    transform:
    translate(-50%,-50%)
    scale(0.5);

    opacity:1;
  }

  100%{

    transform:
    translate(-50%,-50%)
    scale(2.2);

    opacity:0;
  }

}

/* =========================================
   LABELS
========================================= */

.hotspot-label{

  margin-top:14px;

  font-size:11px;

  font-weight:500;

  letter-spacing:0.3px;

  color:#fff;

  white-space:nowrap;

  text-shadow:
  0 0 12px rgba(0,0,0,0.9);
}

/* =========================================
   HOTSPOTS
========================================= */

.uk-hotspot{
  position:absolute;
  transform:
  translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:
  rgba(125,211,252,0.18);
}


/* =========================================
   RELIABILITY STATES
========================================= */

.reliability-high .hub-reliability-fill{

  background:
  linear-gradient(
    90deg,
    #2563eb,
    #38bdf8
  );
}

.reliability-medium .hub-reliability-fill{

  background:
  linear-gradient(
    90deg,
    #14b8a6,
    #22c55e
  );
}

.reliability-low .hub-reliability-fill{

  background:
  linear-gradient(
    90deg,
    #f59e0b,
    #f97316
  );
}

/* =========================================
   HEAT LEVELS
========================================= */

.heat-high .hub-heat-fill{

  background:
  linear-gradient(
    90deg,
    #2563eb,
    #38bdf8
  );
}

.heat-medium .hub-heat-fill{

  background:
  linear-gradient(
    90deg,
    #0ea5e9,
    #14b8a6
  );
}

.heat-low .hub-heat-fill{

  background:
  linear-gradient(
    90deg,
    #f59e0b,
    #f97316
  );
}



/* =========================================
   METHOD GRID
========================================= */

.method-grid{
  margin-top:60px;
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(420px,1fr));
  gap:24px;
}

.method-card{
    background:
    linear-gradient(
      180deg,
      rgba(18,24,38,0.78),
      rgba(8,10,16,0.92)
    );
  padding:36px;
}

.method-card,
.roadmap-card,
.hub-stat-card,
.hero-panel-card,
.hub-live-card,
.hub-reliability-card,
.hub-heat-card,
.hub-intel-card{

  position:relative;

  overflow:hidden;

  padding:32px;

  border-radius:26px;

  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  background:
  linear-gradient(
    180deg,
    rgba(10,18,32,0.92),
    rgba(5,8,14,0.96)
  );

  border:
  1px solid rgba(255,255,255,0.06);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.03);

  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.method-card::before,
.roadmap-card::before,
.hero-panel-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    135deg,
    rgba(59,130,246,0.08),
    transparent 40%
  );

  opacity:0;

  transition:0.45s ease;
}

.method-card:hover,
.roadmap-card:hover,
.hub-stat-card:hover,
.hero-panel-card:hover,
.hub-live-card:hover,
.hub-reliability-card:hover,
.hub-heat-card:hover,
.hub-intel-card:hover{

  transform:
  translateY(-8px);

  border-color:
  rgba(125,211,252,0.18);

  box-shadow:
    0 22px 60px rgba(0,0,0,0.42),
    0 0 30px rgba(37,99,235,0.10);
}

.method-card:hover::before,
.roadmap-card:hover::before,
.hero-panel-card:hover::before{
  opacity:1;
}

.method-card h3{
  font-size:22px;

  margin-bottom:16px;

  letter-spacing:-0.5px;

  font-weight:600;
}

.method-card p{
  font-size:14px;
  color:rgba(255,255,255,0.68);
  line-height:1.85;
}

/*=========================================
SECTION TITLE UPGRADE
==========================================*/

.section-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:
  rgba(56,189,248,0.06);
  border:
  1px solid rgba(56,189,248,0.10);
  color:#7dd3fc;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:22px;
}

.hub-copy h2,
.hub-section-header h2{

  font-weight:700;

  letter-spacing:-2px;
}

/*=====================================
FURTHER STYLING
======================================*/

.hub-section{
  position:relative;
  padding:88px 0;
}

.hub-section::before{

  content:"";

  position:absolute;

  top:0;
  left:50%;

  width:88%;
  height:1px;

  transform:translateX(-50%);

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.05),
    transparent
  );
}

/* =========================================
   ROADMAP
========================================= */

.roadmap-grid{
  margin-top:60px;
  overflow:visible;
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
}

.roadmap-card{
  background:rgba(255,255,255,0.04);
  min-height:150px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:28px;
  padding:36px;
}

.roadmap-card span{
  color:#7dd3fc;
  font-size:14px;
}

.roadmap-card h3{

  font-size:22px;

  line-height:1.18;

  letter-spacing:-0.02em;

  margin-top:10px;

  margin-bottom:0;

  max-width:220px;
}

/* SIGNAL */

.intel-signal-line{

  width:120px;
  height:2px;

  margin-top:18px;
  margin-bottom:28px;

  background:
  linear-gradient(
    90deg,
    #2d8cff,
    #00d4ff
  );

  border-radius:999px;
}

/*=============================
MAPSHELL UPDATE
===============================*/
.hub-map-shell{

  position:relative;

  margin-top:100px;
  margin-bottom:100px;

  padding:70px 70px;

  border-radius:32px;

  background:
  linear-gradient(
    180deg,
    rgba(5,10,22,0.92),
    rgba(3,7,18,0.96)
  );

  border:
  1px solid rgba(80,140,255,0.08);

  overflow:hidden;
}

/*===============================
DISCLAIMER
===============================*/

.data-disclaimer{
  margin-top:34px;
  padding-top:22px;
  border-top:
  1px solid rgba(255,255,255,0.06);
  max-width:760px;
  font-size:11px;
  line-height:1.9;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.34);
}

/*===================================
TIMESTAMP
=====================================*/

.intel-timestamp{
  margin-top:12px;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.42);
}

.intel-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#00e08a;
  display:inline-block;
  margin-right:8px;
  box-shadow:0 0 10px rgba(0,224,138,0.8);
  animation:intelPulse 2s infinite;
}

@keyframes intelPulse{

  0%{
    opacity:0.4;
    transform:scale(1);
  }

  50%{
    opacity:1;
    transform:scale(1.2);
  }

  100%{
    opacity:0.4;
    transform:scale(1);
  }
}

/* =========================================
   HUB MAIN
========================================= */

.hub-main{
  position:relative;
  overflow:hidden;
}

/* =========================================
   CONTAINER SYSTEM
========================================= */

.container{
  width:min(100% - 120px, 1780px);
  margin-inline:auto;
  position:relative;
}

.hub-grid,
.hub-live-grid,
.hub-heat-section,
.hub-reliability-section,
.hub-map-section,
.method-grid,
.roadmap-wrapper{
  width:100%;
}

.hub-live-grid,
.hub-heat-section,
.hub-reliability-section,
.hub-map-section{

  margin-top:56px;
}

.hub-reliability-section{
  margin-top:48px;
}

/*===============================
HUB MAP HEADER
=================================*/

.hub-map-header{

  max-width:760px;
}

.hub-map-header h2{

  margin-top:26px;
  margin-bottom:18px;
}

.hub-map-header p{

  margin-top:22px;

  max-width:720px;

  line-height:1.9;
}
/*======================================
HUB MAP SECTION 
==========================================*/

.hub-map-section{

  max-width:1120px;
  margin:0 auto;

  display:flex;
  flex-direction:column;
  gap:42px;
}


.hub-map-section::before{
  content:"";
  position:absolute;
  top:-140px;
  left:50%;
  transform:translateX(-50%);
  width:1400px;
  height:1px;
  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );
}

.hub-map-header h2{
  margin-bottom:14px;
}

.hub-map-header p{
  font-size:14px;
  line-height:1.8;
  opacity:0.72;
}

/*==========================================
FURTHER MAP UPDATE ------------------- ----
==========================================*/
.uk-hotspot-label{

  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;

}

.uk-hotspot.up .uk-hotspot-label{
  bottom:28px;
}

.uk-hotspot.down .uk-hotspot-label{
  top:28px;
}

.uk-hotspot.left .uk-hotspot-label{
  right:28px;
  left:auto;
  top:50%;
  transform:translateY(-50%);
}

.uk-hotspot.right .uk-hotspot-label{
  left:28px;
  top:50%;
  transform:translateY(-50%);
}

.uk-hotspot{
  position:absolute;
}

/*========================================
STATUS GLOW COLOURS
=========================================*/

.reliability-high::after,
.reliability-medium::after,
.reliability-low::after{

  content:"";

  position:absolute;

  top:18px;
  right:18px;

  width:8px;
  height:8px;

  border-radius:50%;
}

.reliability-high::after{
  background:#22c55e;
  box-shadow:0 0 12px rgba(34,197,94,0.8);
}

.reliability-medium::after{
  background:#38bdf8;
  box-shadow:0 0 12px rgba(56,189,248,0.8);
}

.reliability-low::after{
  background:#f59e0b;
  box-shadow:0 0 12px rgba(245,158,11,0.8);
}

/* =========================================
   UK INFRASTRUCTURE SIGNAL PANEL
========================================= */

.hub-intel-card{

  position:relative;

  padding:38px 42px;

  border-radius:26px;

  background:
  linear-gradient(
    180deg,
    rgba(8,16,30,0.96),
    rgba(3,8,18,0.98)
  );

  border:
  1px solid rgba(80,140,255,0.08);

  box-shadow:
  0 20px 60px rgba(0,0,0,0.32);

  max-width:1040px;

  margin:0 auto;
}

.hub-intel-card .intel-kicker{

  display:inline-flex;

  width:max-content;

  padding:10px 18px;

  border-radius:999px;

  background:
  rgba(37,99,235,0.10);

  border:
  1px solid rgba(59,130,246,0.14);

  color:#7dd3fc;

  font-size:11px;

  font-weight:600;

  letter-spacing:1.8px;

  text-transform:uppercase;
}

.hub-intel-card h3{

  max-width:680px;

  font-size:clamp(18px,1.7vw,30px);

  line-height:1.18;

  letter-spacing:-0.02em;

  margin-top:16px;
  margin-bottom:16px;

  font-weight:650;
}

.hub-intel-card p{

  max-width:760px;

  font-size:16px;

  line-height:1.8;

  color:rgba(255,255,255,0.72);
}

/* =========================================
   RESPONSIVE SYSTEM
========================================= */

/* =========================
   TABLET
========================= */

@media (max-width:1024px){

  .hub-heat-grid{

    grid-template-columns:
    repeat(2,minmax(0,1fr));
  }
}

@media (max-width:1024px){

  .hub-live-grid{

    grid-template-columns:
    repeat(2,minmax(0,1fr));

    gap:18px;
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width:640px){

  .hub-live-grid{

    grid-template-columns:1fr;

    gap:16px;
  }
}

@media (max-width:640px){

  .hub-heat-grid{

    grid-template-columns:1fr;

    gap:16px;
  }
}

/* =========================================
   DESKTOP LARGE
========================================= */

@media(max-width:1400px){

  .container{
    width:min(100% - 72px, 1480px);
  }

  .hub-hero-grid{
    gap:64px;
  }

  .hub-grid{
    gap:56px;
  }

  .hub-live-card strong{
    font-size:56px;
  }

}

/* =========================================
   TABLET LANDSCAPE
========================================= */

@media(max-width:1200px){

  .hub-section{
    padding:100px 0;
  }

  .hub-hero{
    padding:150px 6% 90px;
  }

  .hub-hero-grid,
  .hub-grid{
    gap:48px;
  }

  .hub-live-grid{
    grid-template-columns:
    repeat(2,minmax(0,1fr));
  }

  .hub-heat-grid{
    grid-template-columns:
    repeat(2,minmax(0,1fr));
  }

  .method-grid{
    grid-template-columns:
    repeat(2,minmax(0,1fr));
  }

  .roadmap-grid{
    grid-template-columns:
    repeat(2,minmax(0,1fr));
  }

  .hub-hero h1{
    font-size:clamp(48px,6vw,64px);
  }

  .hub-copy h2,
  .hub-section-header h2{
    font-size:clamp(36px,4vw,48px);
  }

  .hub-intel-card{
    padding:34px;
  }

  .hub-intel-card h3{
    font-size:clamp(18px,2vw,28px);
  }

}

/* =========================================
   TABLET PORTRAIT
========================================= */

@media(max-width:980px){

  .container{
    width:min(100% - 48px, 100%);
  }

  .hub-hero-grid,
  .hub-grid{
    grid-template-columns:1fr;
  }

  .hub-hero-grid{
    gap:56px;
  }

  .hub-grid{
    gap:56px;
  }

  .hub-hero{
    min-height:auto;
  }

  .hub-hero-panel{
    width:100%;
  }

  .hub-live-grid{
    grid-template-columns:1fr 1fr;
  }

  .hub-reliability-grid{
    grid-template-columns:1fr 1fr;
  }

  .hub-map-section{
    gap:34px;
  }

  .uk-map-shell{
    padding:34px;
  }

  .uk-map-stage{
    min-height:420px;
    padding:30px;
  }

  .hub-anchor-nav{
    overflow-x:auto;
    justify-content:flex-start;
    flex-wrap:nowrap;
    padding:16px 20px;
    scrollbar-width:none;
  }

  .hub-anchor-nav::-webkit-scrollbar{
    display:none;
  }

  .hub-anchor-nav a{
    white-space:nowrap;
  }

  .system-status{
    grid-template-columns:1fr;
  }

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

  .container{
    width:min(100% - 32px, 100%);
  }

  .hub-section{
    padding:78px 0;
  }

  .hub-hero{
    padding:130px 0 72px;
  }

  .hub-hero-grid{
    gap:42px;
  }

  .hub-hero h1{
    font-size:42px;
    line-height:1;
    letter-spacing:-2px;
  }

  .hub-hero p{
    font-size:15px;
    line-height:1.8;
  }

  .hub-copy h2,
  .hub-section-header h2{
    font-size:34px;
    line-height:1.08;
    letter-spacing:-1.5px;
  }

  .hub-copy p{
    font-size:14px;
    line-height:1.85;
  }

  .hub-live-grid,
  .hub-heat-grid,
  .hub-reliability-grid,
  .method-grid,
  .roadmap-grid{
    grid-template-columns:1fr;
  }

  .hub-live-card,
  .hub-reliability-card,
  .hub-heat-card,
  .method-card,
  .roadmap-card,
  .hub-intel-card,
  .hero-panel-card{
    padding:26px;
  }

  .hub-live-card strong{
    font-size:46px;
    letter-spacing:-2px;
  }

  .hub-intel-card h3{
    font-size:clamp(20px,6vw,28px);
    line-height:1.12;
  }

  .hub-map-header h2{
    font-size:32px;
  }

  .hub-main-image{
    border-radius:22px;
  }

  .uk-map-shell{
    padding:24px;
    border-radius:24px;
  }

  .uk-map-stage{
    min-height:320px;
    padding:18px;
  }

  .uk-map-image{
    width:min(320px,88%);
  }

  .uk-hotspot-label{
    display:none;
  }

  .terminal-strip{
    gap:8px;
  }

  .terminal-strip span{
    font-size:10px;
    padding:7px 10px;
  }

  .hub-btn-primary,
  .hub-btn-secondary{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .hub-hero-actions{
    flex-direction:column;
  }

  .roadmap-popup{
    display:none;
  }

}

/* =========================================
   SMALL MOBILE
========================================= */

@media(max-width:480px){

  .hub-hero{
    padding-top:120px;
  }

  .hub-hero h1{
    font-size:36px;
  }

  .hub-copy h2,
  .hub-section-header h2{
    font-size:30px;
  }

  .hub-live-card strong{
    font-size:40px;
  }

  .hub-intel-card{
    padding:22px;
  }

  .hub-intel-card h3{
    font-size:24px;
  }

  .hub-map-header h2{
    font-size:28px;
  }

  .section-tag,
  .hub-kicker{
    font-size:10px;
    letter-spacing:1px;
  }

  .hub-anchor-nav a{
    font-size:12px;
  }

}



/* =========================================
   METHODOLOGY BACKGROUND
========================================= */

.methodology-section{
  position:relative;
  overflow:hidden;
  border-top:
  1px solid rgba(255,255,255,0.04);
  border-bottom:
  1px solid rgba(255,255,255,0.04);
}

.methodology-bg{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
 rgba(5,7,11,0.70),
 rgba(5,7,11,0.82)
 ),
  url("../assets/hub/methodology-bg.jpg")
  center center/cover no-repeat;

 

  opacity:0.48;

  filter:
  brightness(0.75)
  saturate(1.1);

  transform:scale(1.04);

  z-index:0;
}

.methodology-section .hub-section-header,
.methodology-section .method-grid{
  position:relative;
  z-index:2;
}

/* =========================================
   ROADMAP BACKGROUND
========================================= */

.roadmap-section{
  position:relative;
  overflow:hidden;
  padding-top:70px;
}

.roadmap-section .hub-section-header{
  margin-bottom:34px;
}

.roadmap-bg{
  position:absolute;
  inset:0;

background:
linear-gradient(
rgba(5,7,11,0.70),
rgba(5,7,11,0.82)
),
  url("../assets/hub/roadmap-bg.jpg")
  center center/cover no-repeat;

  opacity:0.44;

  filter:
  saturate(1.2)
  brightness(0.72);

  transform:scale(1.05);

  z-index:0;
}

.roadmap-section .hub-section-header,
.roadmap-section .roadmap-wrapper{
  position:relative;
  z-index:2;
}

.roadmap-card{
  overflow:hidden;
}

.roadmap-card::after{
  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:120%;
  height:100%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.06),
    transparent
  );

  transition:0.8s ease;
}

.roadmap-card:hover::after{
  left:120%;
}

/*=======================================
BACKDROP FILTER
========================================*/

.hero-panel-card,
.method-card,
.roadmap-card,
.hub-stat-card{

  -webkit-backdrop-filter:blur(20px);

  backdrop-filter:blur(20px);
}

/*========================================
STATUS
========================================*/

.system-status{

  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:12px;

  margin-top:18px;
}

.system-status div{

  padding:14px;

  border-radius:14px;

  background:
  rgba(255,255,255,0.03);

  border:
  1px solid rgba(255,255,255,0.05);
}

.system-status span{

  display:block;

  font-size:10px;

  letter-spacing:1.5px;

  opacity:0.5;

  margin-bottom:8px;
}

.system-status strong{

  font-size:13px;
}

/* =========================================
   ROADMAP POPUP
========================================= */

.roadmap-card{

  min-height:170px;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:26px 28px;

  border-radius:24px;

  border-top:
  2px solid rgba(56,189,248,0.16);

  background:
  linear-gradient(
    180deg,
    rgba(14,20,32,0.88),
    rgba(6,8,14,0.96)
  );

  position:relative;

  isolation:isolate;

  overflow:visible;

  cursor:pointer;

  transition:
  transform 0.35s ease,
  border-color 0.35s ease,
  box-shadow 0.35s ease;

  backface-visibility:hidden;

  will-change:transform;
}

.roadmap-popup{
  position:absolute;
  cursor:pointer;
  left:50%;
  bottom:110%;

  transform-style:preserve-3d;

  backface-visibility:hidden;

  will-change:
  opacity,
  transform;

  transform:
  translateX(-50%)
  translateY(20px);

  width:320px;

  padding:22px;

  border-radius:22px;

  background:
  linear-gradient(
    180deg,
    rgba(15,23,42,0.96),
    rgba(5,7,11,0.96)
  );

  border:
  1px solid rgba(125,211,252,0.12);

  backdrop-filter:blur(24px);

  box-shadow:
  0 20px 60px rgba(0,0,0,0.42);

  opacity:0;
  visibility:hidden;

  transition:
  opacity 0.35s ease,
  transform 0.35s ease;

  z-index:30;
}

.roadmap-card span{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#4fb7ff;
  opacity:0.9;
  margin-bottom:14px;
}

.hub-main::before{

  content:"";

  position:fixed;

  top:0;
  left:0;

  width:1px;
  height:100vh;

  background:
  linear-gradient(
    to bottom,
    transparent,
    rgba(56,189,248,0.3),
    transparent
  );

  z-index:999;
}

.roadmap-popup h4{
  font-size:18px;

  margin-bottom:14px;

  color:#fff;

  letter-spacing:-0.5px;
}

.roadmap-card:hover{
  z-index:40;
}

.roadmap-popup p{
  font-size:14px;

  line-height:1.8;

  color:rgba(255,255,255,0.72);
}

.roadmap-card:hover .roadmap-popup{

  opacity:1;
  visibility:visible;

  transform:
  translateX(-50%)
  translateY(0);
}

.roadmap-popup::after{

  content:"";

  position:absolute;

  left:50%;
  bottom:-10px;

  width:20px;
  height:20px;

  background:
  rgba(10,14,24,0.96);

  border-right:
  1px solid rgba(125,211,252,0.10);

  border-bottom:
  1px solid rgba(125,211,252,0.10);

  transform:
  translateX(-50%)
  rotate(45deg);
}


/* =========================================
   SECTION GLOWS
========================================= */

.methodology-section::after{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  top:-200px;
  right:-220px;

  background:
  radial-gradient(
    circle,
    rgba(59,130,246,0.10),
    transparent 70%
  );

  pointer-events:none;
}

.roadmap-section::before{
  content:"";

  position:absolute;

  width:650px;
  height:650px;

  bottom:-240px;
  left:-180px;

  background:
  radial-gradient(
    circle,
    rgba(16,185,129,0.08),
    transparent 70%
  );

  pointer-events:none;
}

/* =========================================
   REVEAL ANIMATIONS
========================================= */

.hub-copy,
.method-card,
.roadmap-card,
.hub-visual-wrap{

  opacity:0;
  transform:translateY(50px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.revealed{
  opacity:1;
  transform:translateY(0);
}

/* =========================================
   ACTIVE ANCHOR
========================================= */

.active-anchor{
  color:#7dd3fc !important;

  text-shadow:
  0 0 12px rgba(125,211,252,0.45);
}

/*========================================
PROGESS BAR
=========================================*/
.hub-progress-bar{
  position:fixed;
  top:0;
  left:0;

  width:0%;
  height:2px;

  z-index:9999;

  background:
  linear-gradient(
    90deg,
    #2563eb,
    #7dd3fc
  );
}

/*=========================================
IMAGE HOVER
=========================================*/

.hub-main-image{
  transition:
  transform 0.7s ease,
  box-shadow 0.7s ease;
}

.hub-main-image:hover{
  transform:scale(1.02);

  box-shadow:
  0 40px 100px rgba(0,0,0,0.45),
  0 0 30px rgba(59,130,246,0.12);
}

.hub-hero::after{
  content:"";

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to bottom,
    transparent 70%,
    #05070b 100%
  );

  z-index:1;
}

.hub-hero::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    radial-gradient(
      circle at 20% 30%,
      rgba(59,130,246,0.12),
      transparent 28%
    ),

    radial-gradient(
      circle at 80% 20%,
      rgba(16,185,129,0.08),
      transparent 24%
    );

  z-index:1;

  pointer-events:none;
}