/* =========================================
MOBILITY PAGE PREMIUM UI
========================================= */

*{
  box-sizing:border-box;
  min-width:0;
}

body{
  margin:0;
  overflow-x:hidden;

  background:
  #030508;

  font-family:Inter,sans-serif;
  color:#fff;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* =========================================
WRAPPER
========================================= */

.featured-wrapper{
  position:relative;

  overflow:hidden;

  padding:
  24px 0 72px;

  background:
  #04070b;
}

.mobility-shell{

  width:min(1320px, calc(100vw - 48px));

  margin-inline:auto;

  display:flex;
  flex-direction:column;

  gap:28px;

  position:relative;
  z-index:2;
}

/* =========================================
LIVE BLOOMBERG TICKER
========================================= */

.mobility-ticker:hover .mobility-ticker-marquee{
  animation-play-state:paused;
}

.mobility-ticker{
  position:relative;

  width:100%;

  height:44px;
  white-space:nowrap;
  overflow:hidden;

  display:flex;
  align-items:center;

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

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

  background:
  linear-gradient(
    90deg,
    rgba(2,6,12,1),
    rgba(4,10,18,1)
  );

  box-shadow:
  inset 0 -1px 0 rgba(255,255,255,0.02);
}

.mobility-ticker::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:1px;

  background:
  rgba(120,255,170,0.28);

  box-shadow:
  0 0 12px rgba(120,255,170,0.24);
}

.mobility-ticker-marquee{
  display:flex;

  width:max-content;

  animation:
  tickerLoop 42s linear infinite;

  will-change:transform;
}

.mobility-ticker-track{
  flex:none;

  display:flex;
  align-items:center;
}

.ticker-item{
  flex:none;

  display:flex;
  align-items:center;

  gap:10px;

  min-width:max-content;

  padding:
  0 28px;

  height:44px;

  white-space:nowrap;

  font-size:12px;
  font-weight:700;

  letter-spacing:0.03em;

  color:#78ff9e;

  text-transform:uppercase;
}

.ticker-label{
  color:
  rgba(120,255,170,0.72);
}

.ticker-item strong{
  font-size:12px;
  font-weight:800;

  color:#79ffae;
}


.ticker-divider{
  flex:none;

  width:1px;
  height:16px;

  background:
  rgba(120,255,170,0.16);
}

.mobility-ticker-fade{
  position:absolute;
  top:0;
  bottom:0;

  width:120px;

  z-index:3;

  pointer-events:none;
}

.mobility-ticker-fade.left{
  left:0;

  background:
  linear-gradient(
    90deg,
    #030508,
    transparent
  );
}

.mobility-ticker-fade.right{
  right:0;

  background:
  linear-gradient(
    270deg,
    #030508,
    transparent
  );
}

@keyframes tickerLoop{

  from{
    transform:translateX(0);
  }

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


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


.mobility-hero{
  position:relative;
  min-height:560px;
  border-radius:30px;
  overflow:hidden;

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

  background:#09111d;

  box-shadow:
  0 30px 90px rgba(0,0,0,0.42);
}

.mobility-hero-media{
  position:absolute;
  inset:0;
}

.mobility-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

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

  background:

  linear-gradient(
    90deg,
    rgba(2,4,8,0.96) 0%,
    rgba(3,6,12,0.86) 28%,
    rgba(4,8,16,0.54) 55%,
    rgba(4,8,16,0.18) 100%
  ),

  linear-gradient(
    180deg,
    rgba(0,0,0,0.10),
    rgba(0,0,0,0.58)
  );
}

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

  display:grid;
  grid-template-columns:
    minmax(0, 1fr)
    320px;
  gap:30px;

  min-height:560px;
  padding:
    54px
    54px
    48px;
}

.mobility-hero-left{
  max-width:760px;
  align-self:flex-start;
}

.mobility-kicker{
  display:inline-flex;
  align-items:center;

  padding:10px 14px;

  border-radius:999px;

  background:
  rgba(0,120,255,0.12);

  border:
  1px solid rgba(120,180,255,0.14);

  font-size:11px;
  font-weight:700;
  letter-spacing:0.14em;

  color:#73b7ff;

  margin-bottom:24px;
}

.mobility-title{
  margin:0 0 28px;

  font-size:clamp(64px, 6vw, 104px);

  line-height:0.88;

  letter-spacing:-0.07em;

  font-weight:800;

  max-width:760px;

  text-wrap:balance;

  text-shadow:
  0 10px 30px rgba(0,0,0,0.42);
}

.mobility-description{
  font-size:15px;
  line-height:1.9;

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

  max-width:560px;
}

.mobility-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:

  radial-gradient(
    circle at 15% 20%,
    rgba(0,120,255,0.12),
    transparent 34%
  ),

  radial-gradient(
    circle at 82% 14%,
    rgba(0,90,255,0.08),
    transparent 30%
  );

  z-index:1;
}

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

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
  linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,0.34) 72%,
    rgba(0,0,0,0.65) 100%
  );

  z-index:1;
}

.mobility-live-strip{
  position:relative;
  margin-top:0;
  z-index:20;
}

.mobility-live-strip,
.mobility-command-bar,
.mobility-intel-grid,
.mobility-scenarios,
.mobility-product-section,
.mobility-bottom-grid{

  margin-top:48px;
}

/* =========================================
SIDE PANEL
========================================= */

.mobility-side-panel{
  position:relative;

  align-self:flex-start;

  padding:38px 34px;

  border-radius:34px;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    rgba(10,18,34,0.94),
    rgba(4,8,18,0.98)
  );

  border:
  1px solid rgba(120,170,255,0.10);

  backdrop-filter:blur(28px);

  box-shadow:
  0 30px 70px rgba(0,0,0,0.34);
}

.mobility-side-panel::before{
  content:"";

  position:absolute;
  inset:0;

  background:
  radial-gradient(
    circle at top right,
    rgba(0,140,255,0.12),
    transparent 42%
  );

  pointer-events:none;
}



.featured-badge{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.14em;

  color:#6cb7ff;

  margin-bottom:20px;
}

.mobility-side-label{
  margin-bottom:34px;

  font-size:14px;

  font-weight:700;

  letter-spacing:0.12em;

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

.mobility-side-panel h2{
  margin:0 0 18px;

  font-size:42px;
  line-height:1;
  letter-spacing:-0.04em;
}

.mobility-side-panel p{
  color:rgba(255,255,255,0.78);
  line-height:1.7;
}

.mobility-side-context{
  margin-top:20px;

  font-size:14px;
  line-height:1.7;

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

.mobility-stats{
  margin-top:34px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.mobility-stat{
  padding:18px;
  border-radius:18px;

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

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

.mobility-stat span{
  display:block;

  font-size:11px;
  letter-spacing:0.10em;
  text-transform:uppercase;

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

  margin-bottom:8px;
}

.mobility-stat strong{
  font-size:18px;
  color:#8dd1ff;
}

/* =========================================
LIVE STRIP
========================================= */

.mobility-live-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;

}

.mobility-live-card{
  position:relative;

  display:flex;
  flex-direction:column;

  justify-content:center;

  min-height:180px;

  padding:34px;

  border-radius:30px;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    rgba(8,14,24,0.96),
    rgba(4,8,16,1)
  );

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

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

.mobility-live-card span{
  display:block;

  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.10em;

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

  margin-bottom:12px;
}

.mobility-live-card strong{
  margin-top:18px;

  font-size:56px;

  line-height:0.9;

  letter-spacing:-0.07em;

  color:#fff;
}

.mobility-live-status{
  margin-top:20px;

  padding-top:18px;

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

  font-size:11px;

  font-weight:700;

  letter-spacing:0.12em;

  text-transform:uppercase;

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

.mobility-live-card.reliability strong{
  color:#7dffbe;
}

.mobility-live-card.demand strong{
  color:#6ec5ff;
}

.mobility-live-card.pressure strong{
  color:#ffd76a;
}

.mobility-live-card.assistance strong{
  color:#ff9d6e;
}

/* =========================================
COMMAND BAR
========================================= */

.mobility-command-bar{

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  padding:24px 28px;

  border-radius:24px;

  background:
  rgba(5,12,22,0.92);

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

.command-mini{
  font-size:10px;
  letter-spacing:0.12em;
  color:#67b8ff;

  margin-bottom:8px;
}

.mobility-command-left h3{
  margin:0;
  font-size:24px;
}

.mobility-command-right{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.command-pill{
  padding:12px 18px;
  border-radius:999px;

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

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

  font-size:13px;
}

.command-pill.active{
  background:
  rgba(0,140,255,0.12);

  color:#8fd4ff;
}

/* =========================================
INTEL GRID
========================================= */

.mobility-intel-grid{

  display:grid;
  grid-template-columns:
    1.2fr
    repeat(3, 1fr);
  gap:20px;
}

.mobility-mini-chart{
  gap:28px;
}

.mobility-intel-main,
.mobility-mini-chart{
  position:relative;

  overflow:hidden;

  min-height:320px;

  padding:34px;

  border-radius:30px;

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

  background:
  linear-gradient(
    180deg,
    rgba(9,14,24,0.98),
    rgba(3,6,12,1)
  );

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

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

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

.mobility-intel-main:hover,
.mobility-mini-chart:hover{

  transform:
  translateY(-6px);

  border-color:
  rgba(120,170,255,0.14);

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

.mobility-intel-main::before,
.mobility-mini-chart::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:1px;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(120,170,255,0.34),
    transparent
  );

  opacity:0.7;
}

.mobility-intel-tag{
  font-size:10px;
  letter-spacing:0.12em;
  color:#72bcff;

  margin-bottom:18px;
}

.mobility-intel-main h2{
  margin:0 0 24px;

  font-size:clamp(38px, 3vw, 52px);

  line-height:0.96;

  letter-spacing:-0.06em;

  max-width:420px;
}

.mobility-intel-main p{
  color:rgba(255,255,255,0.7);
  line-height:1.8;
}

.mobility-mini-chart span{
  display:block;

  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.10em;

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

  margin-bottom:14px;
}

.mobility-mini-chart strong{
  font-size:42px;

  line-height:1;

  letter-spacing:-0.06em;

  color:#8fd4ff;
}

.mobility-mini-chart::after{
  content:"LIVE";

  position:absolute;

  top:22px;
  right:22px;

  height:24px;

  padding:0 10px;

  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:10px;
  font-weight:700;

  letter-spacing:0.12em;

  color:#79ffae;

  background:
  rgba(120,255,170,0.08);

  border:
  1px solid rgba(120,255,170,0.14);
}

.mobility-intel-main::after,
.mobility-mini-chart .data-grid{
  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:32px 32px;

  mask-image:
  linear-gradient(
    180deg,
    rgba(0,0,0,0.4),
    transparent
  );

  pointer-events:none;
}

/*========================
MOBILITY STRIP
========================*/

.mobility-field-strip{
  display:grid;

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

  gap:24px;

  margin-top:70px;
}

.mobility-field-strip div{
  padding:30px;

  border-radius:28px;

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

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

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

  line-height:1.8;
}

/*=======================
ADDITIONAL FOOTER STYLING
=========================*/

.footer{
  position:relative;
}

.footer::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:-120px;

  height:160px;

  background:
  linear-gradient(
    180deg,
    transparent,
    rgba(0,0,0,0.55)
  );

  pointer-events:none;
}

/*========================================
INTEL FOOTER
==========================================*/

.mobility-mini-content{
  display:flex;
  flex-direction:column;

  gap:24px;
}

.mobility-mini-content p{
  margin:0;

  max-width:260px;

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

  font-size:14px;

  line-height:1.8;
}

.intel-footer{
  margin-top:auto;

  font-size:12px;

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

  line-height:1.5;

  letter-spacing:0.02em;
}

/* =========================================
SCENARIOS
========================================= */

.mobility-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:38px;
}

.mobility-card-tag{
  font-size:11px;

  font-weight:700;

  letter-spacing:0.14em;

  color:#7ec7ff;
}

.mobility-card-signal{
  height:28px;

  padding:0 14px;

  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
  rgba(120,255,170,0.08);

  border:
  1px solid rgba(120,255,170,0.14);

  color:#79ffae;

  font-size:11px;
  font-weight:700;

  letter-spacing:0.08em;
}

.mobility-card,
.mobility-live-card,
.mobility-mini-chart{
  min-height:140px;
}

.mobility-scenarios,
.mobility-product-section{
  padding-top:10px;
}

.section-title{
  font-size:34px;
  margin-bottom:24px;
}

.mobility-grid{
  display:grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));
  gap:28px;
}

.mobility-card{
  position:relative;

  overflow:hidden;

  min-height:300px;

  padding:34px;

  border-radius:30px;

  display:flex;
  flex-direction:column;

  background:
  linear-gradient(
    180deg,
    rgba(8,14,24,0.98),
    rgba(3,6,12,1)
  );

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

  box-shadow:
  0 24px 70px rgba(0,0,0,0.34);

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

.mobility-card-footer{
  margin-top:auto;

  padding-top:24px;

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

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

  font-size:12px;

  letter-spacing:0.03em;
}

.mobility-card::before{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);

  background-size:32px 32px;

  opacity:0.4;

  pointer-events:none;
}



.mobility-card:hover{

  transform:
  translateY(-8px);

  border-color:
  rgba(120,170,255,0.14);

  background:
  linear-gradient(
    180deg,
    rgba(14,18,26,0.98),
    rgba(8,10,16,1)
  );

  box-shadow:
  0 34px 90px rgba(0,0,0,0.42);
}

.mobility-card-icon{
  font-size:28px;
  margin-bottom:18px;
}

.mobility-card h3{
  margin:0 0 22px;

  max-width:320px;

  font-size:42px;

  line-height:0.95;

  letter-spacing:-0.06em;
}

.mobility-card p{
  max-width:340px;

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

  font-size:15px;

  line-height:1.9;
}


.btn-primary,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:190px;
  padding:16px 24px;
}

/*========================================
MOBILITY INSIGHT UPDATE
=========================================*/

.mobility-insight-band h2{
  margin:0 0 30px;

  max-width:980px;

  font-size:clamp(40px,4vw,62px);

  line-height:1.02;

  letter-spacing:-0.06em;

  color:#fff;

  text-wrap:balance;
}

.mobility-insight-band p{
  margin:0;

  max-width:1050px;

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

  font-size:22px;

  line-height:1.9;

  letter-spacing:-0.01em;
}

.mobility-insight-band{
  position:relative;

  padding:72px 78px;

  border-radius:38px;

  overflow:hidden;

  background:
  linear-gradient(
    145deg,
    rgba(6,12,22,0.98),
    rgba(2,6,12,1)
  );

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

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

  isolation:isolate;
}

.mobility-insight-band::after{
  content:"";

  position:absolute;

  top:50px;
  left:0;

  width:4px;
  height:140px;

  border-radius:999px;

  background:
  linear-gradient(
    180deg,
    #4db2ff,
    transparent
  );

  opacity:0.85;
}

.mobility-insight-meta{
  display:flex;

  flex-wrap:wrap;

  gap:14px;

  margin-top:34px;
}

.mobility-insight-meta span{
  padding:12px 18px;

  border-radius:999px;

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

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

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

  font-size:13px;
}

.mobility-insight-band::before{
  content:"";

  position:absolute;
  inset:0;

  background:

  radial-gradient(
    circle at 12% 50%,
    rgba(0,120,255,0.12),
    transparent 34%
  ),

  radial-gradient(
    circle at 85% 10%,
    rgba(0,120,255,0.08),
    transparent 32%
  );

  pointer-events:none;

  z-index:0;
}

.mobility-insight-band > *{
  position:relative;
  z-index:2;
}

.mobility-insight-band h2,
.mobility-insight-band p{
  max-width:1100px;
}

.mobility-insight-kicker{
  display:inline-flex;

  align-items:center;

  gap:10px;

  margin-bottom:28px;

  padding:10px 16px;

  border-radius:999px;

  background:
  rgba(0,120,255,0.08);

  border:
  1px solid rgba(120,170,255,0.10);

  font-size:11px;

  font-weight:700;

  letter-spacing:0.16em;

  text-transform:uppercase;

  color:#7fc8ff;
}

.mobility-insight-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#3dff9c;

  box-shadow:
    0 0 12px rgba(61,255,156,0.7);
}



/* =========================================
PREMIUM PRODUCT COMPOSITION
========================================= */

.mobility-product-lead{
  max-width:720px;

  margin-bottom:50px;

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

  font-size:22px;

  line-height:2;
}

.mobility-product-shell{
  position:relative;

  display:grid;

 grid-template-columns:
  minmax(420px, 540px)
  minmax(620px, 1fr);

  gap:64px;

  isolation:isolate;

  align-items:center;

  padding:90px;

  border-radius:42px;

  overflow:hidden;

  background:
  linear-gradient(
    145deg,
    rgba(4,8,16,0.98),
    rgba(2,4,10,1)
  );

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

  box-shadow:
    0 50px 140px rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.mobility-product-shell::after{
  content:"";

  position:absolute;

  width:700px;
  height:700px;

  right:-180px;
  top:-180px;
  opacity:0.9;
  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(0,120,255,0.10),
    transparent 70%
  );

  filter:blur(40px);

  pointer-events:none;
}

.mobility-product-shell::before{
  content:"";

  position:absolute;
  inset:0;

  background:

  radial-gradient(
    circle at 18% 50%,
    rgba(0,120,255,0.16),
    transparent 34%
  ),

  radial-gradient(
    circle at 82% 20%,
    rgba(0,120,255,0.10),
    transparent 32%
  );

  pointer-events:none;
}

.mobility-product-visual{
  position:relative;
  padding:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;

  min-height:460px;

  border-radius:38px;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    rgba(10,18,30,0.92),
    rgba(4,8,16,1)
  );

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

  backdrop-filter:blur(30px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 40px 120px rgba(0,0,0,0.48);
}

.mobility-product-shell:hover{

  box-shadow:
    0 70px 160px rgba(0,0,0,0.56),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.mobility-product-micro{
  max-width:520px;

  margin-bottom:42px;

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

  font-size:14px;

  line-height:1.8;

  letter-spacing:0.02em;
}

.mobility-product-visual::after{
  content:"";

  position:absolute;

  inset:-40%;

  background:
  linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,0.08) 50%,
    transparent 80%
  );

  transform:
  rotate(8deg);

  backdrop-filter:blur(10px);
  mix-blend-mode:screen;
  opacity:0.55;

  animation:
  productSweep 9s linear infinite;

  pointer-events:none;

  z-index:2;
}

@keyframes productSweep{

  from{
    transform:
      translateX(-30%)
      rotate(8deg);
  }

  to{
    transform:
      translateX(30%)
      rotate(8deg);
  }
}

.mobility-product-visual::before{
  content:"";

  position:absolute;

  width:520px;
  height:160px;

  bottom:30px;
  left:50%;

  transform:translateX(-50%);

  border-radius:50%;

  background:
  radial-gradient(
    ellipse,
    rgba(0,0,0,0.68),
    transparent 72%
  );

  filter:blur(26px);

  z-index:1;
}

.mobility-product-glow{
  position:absolute;

  width:680px;
  height:680px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(0,120,255,0.18),
    transparent 68%
  );

  filter:blur(60px);

  opacity:0.9;
}

.mobility-product-visual img{
  position:relative;
  z-index:3;

  width:100%;
  max-width:520px;

  animation:
  productFloat 6s ease-in-out infinite;

  object-fit:contain;

  transform:
    perspective(1400px)
    rotateY(-5deg)
    translateY(-80px);

  filter:
    drop-shadow(0 60px 100px rgba(0,0,0,0.62));

  transition:
    transform 0.45s ease;
}

@keyframes productFloat{

  0%{
    transform:
      perspective(1400px)
      rotateY(-5deg)
      translateY(-18px);
  }

  50%{
    transform:
      perspective(1400px)
      rotateY(-3deg)
      translateY(-28px);
  }

  100%{
    transform:
      perspective(1400px)
      rotateY(-5deg)
      translateY(-18px);
  }

}




.mobility-product-shell:hover .mobility-product-visual img{

  transform:
    perspective(1400px)
    rotateY(-4deg)
    translateY(-18px)
    scale(1.03);
}

.mobility-product-main{
  position:relative;
  z-index:2;

  padding-right:20px;

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

  max-width:760px;
}

.mobility-product-main h2{
  margin:0 0 38px;

  max-width:780px;

  font-size:clamp(72px, 6vw, 108px);

  line-height:0.9;

  letter-spacing:-0.10em;

  text-wrap:balance;
}


.mobility-product-highlights{
  display:grid;

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

  gap:24px;

  margin-top:38px;
}

.mobility-highlight{
  position:relative;

  display:flex;
  flex-direction:column;

  justify-content:space-between;

  min-height:190px;

  padding:30px;

  border-radius:28px;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    rgba(10,18,30,0.95),
    rgba(4,8,16,1)
  );

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

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

.mobility-highlight:hover{
  transform:
  translateY(-8px);

  border-color:
  rgba(120,170,255,0.18);

  background:
  linear-gradient(
    180deg,
    rgba(12,22,40,0.98),
    rgba(4,8,16,1)
  );

  box-shadow:
    0 24px 70px rgba(0,0,0,0.34);
}

.mobility-highlight::before{
  content:"";

  position:absolute;

  width:260px;
  height:260px;

  top:-120px;
  right:-120px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(0,120,255,0.08),
    transparent 72%
  );

  pointer-events:none;
}

.mobility-highlight strong{
  display:block;

  margin-bottom:16px;

  max-width:240px;

  font-size:24px;

  line-height:1;

  letter-spacing:-0.05em;

  color:#fff;
}

.mobility-highlight-tag{
  margin-bottom:20px;

  font-size:10px;

  font-weight:700;

  letter-spacing:0.18em;

  text-transform:uppercase;

  color:#7fc8ff;
}

.mobility-highlight-footer{
  margin-top:26px;

  padding-top:18px;

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

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

  font-size:11px;

  letter-spacing:0.05em;

  text-transform:uppercase;
}

.mobility-highlight p{
  margin:0;

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

  font-size:13px;

  line-height:1.7;
}

.mobility-highlight span{
  color:rgba(255,255,255,0.62);
  line-height:1.7;
}

.mobility-product-section{
  display:flex;
  flex-direction:column;
  gap:34px;
}

/*========================
MOBILITY - SPEC BAR
===========================*/

.mobility-spec-bar{
  display:grid;
  align-items:stretch;
  grid-template-columns:
    repeat(4,1fr);

  gap:18px;

  margin-bottom:46px;
}

.mobility-spec-bar div{
  padding:20px 18px;

  border-radius:22px;

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

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

.mobility-spec-bar span{
  display:block;

  margin-bottom:10px;

  font-size:11px;

  letter-spacing:0.14em;

  text-transform:uppercase;

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

.mobility-spec-bar strong{
  font-size:18px;

  color:#9fd6ff;
}

/*========================*/

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:240px;

  padding:18px 30px;

  border-radius:18px;

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

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

  color:#fff;

  text-decoration:none;

  font-weight:700;

  letter-spacing:-0.02em;

  transition:
  transform 0.3s ease,
  border-color 0.3s ease,
  background 0.3s ease;
}

.btn-secondary:hover{

  transform:
  translateY(-3px);

  border-color:
  rgba(120,170,255,0.16);

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

.mobility-product-shell::before{
  animation:
  productAmbient 8s ease-in-out infinite alternate;
}

@keyframes productAmbient{

  from{
    transform:translateX(-20px);
  }

  to{
    transform:translateX(20px);
  }
}

.mobility-product-intelligence{
  position:relative;

  width:100%;

  max-width:420px;

  padding:36px 34px;

  border-radius:34px;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    rgba(8,16,30,0.98),
    rgba(3,6,12,1)
  );

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

  backdrop-filter:blur(30px);

  box-shadow:
    0 30px 90px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.mobility-product-intelligence::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:1px;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(120,170,255,0.34),
    transparent
  );
}

.mobility-intel-item{
  position:relative;

  padding:22px 0;

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

.mobility-intel-item:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.mobility-intel-item span{
  display:block;

  margin-bottom:10px;

  font-size:11px;

  font-weight:700;

  letter-spacing:0.14em;

  text-transform:uppercase;

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

.mobility-intel-item strong{
  display:block;

  font-size:34px;

  line-height:1;

  letter-spacing:-0.05em;

  color:#9ed8ff;
}

.mobility-side-label::after{
  content:"LIVE SIGNAL";

  margin-left:14px;

  padding:6px 10px;

  border-radius:999px;

  background:
  rgba(120,255,170,0.08);

  border:
  1px solid rgba(120,255,170,0.14);

  color:#79ffae;

  font-size:10px;

  vertical-align:middle;
}

.mobility-product-intelligence::after{
  content:"";

  position:absolute;

  width:380px;
  height:380px;

  top:-180px;
  right:-180px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(0,120,255,0.14),
    transparent 70%
  );

  filter:blur(40px);

  pointer-events:none;
}

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

@media (max-width: 1200px){

  .mobility-product-shell{
    grid-template-columns:1fr;
    padding:34px;
  }

  .mobility-product-intelligence{
    position:relative;

    top:auto;
    right:auto;

    width:100%;
  }

}

@media (max-width: 1100px){

  .mobility-product-highlights{
    grid-template-columns:1fr;
  }

}

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

@media (max-width: 768px){

  .mobility-product-shell,
  .mobility-bottom-grid,
  .mobility-field-strip{
    grid-template-columns:1fr;
  }

  .mobility-insight-band{
    padding:80px 24px;
  }

  .mobility-insight-band h2{
    font-size:54px;
  }

  .mobility-product-shell{
    padding:22px;
    gap:28px;
  }

  .mobility-product-main h2{
    font-size:48px;
  }

  .mobility-product-visual{
    min-height:420px;
  }

  .mobility-product-lead{
    font-size:16px;
    line-height:1.8;
  }

  .mobility-product-actions{
    flex-direction:column;
  }

  .btn-primary,
  .btn-secondary{
    width:100%;
  }

}

/* =========================================
PRODUCT
========================================= */



.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:220px;

  padding:18px 30px;

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    #1570ff,
    #49b0ff
  );

  color:#fff;

  text-decoration:none;

  font-weight:700;

  letter-spacing:-0.02em;

  box-shadow:
  0 14px 40px rgba(21,112,255,0.34);

  transition:0.28s ease;
}

.mobility-product-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  align-self:flex-start;
  gap:18px;
  margin-top:0;
  width:100%;
  flex-wrap:nowrap;
}

.mobility-product-main{
  align-items:flex-start;
}

.mobility-product-actions .btn-primary,
.mobility-product-actions .btn-secondary{
  flex:0 0 auto;
}

.mobility-product-actions .btn-primary{
  width:340px;
  background:
  linear-gradient(
    135deg,
    #1677ff,
    #4db2ff
  );

  color:#fff;

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

  box-shadow:
    0 10px 30px rgba(21,112,255,0.18);
}

.mobility-product-actions .btn-secondary{

  width:260px;

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

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

  color:#fff;

  backdrop-filter:blur(20px);
}

.mobility-product-actions .btn-primary:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 16px 40px rgba(21,112,255,0.24);
}

.mobility-product-actions .btn-primary{
  min-width:320px;
}

.mobility-product-actions .btn-secondary:hover{

  transform:
    translateY(-2px);

  border-color:
    rgba(120,170,255,0.18);

  background:
    rgba(10,20,38,0.88);
}

.mobility-product-actions .btn-primary,
.mobility-product-actions .btn-secondary{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  height:64px;

  padding:0 30px;

  border-radius:18px;

  font-size:15px;

  font-weight:700;

  letter-spacing:-0.02em;

  text-decoration:none;

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

.mobility-card,
.mobility-live-card,
.mobility-mini-chart,
.mobility-highlight,
.mobility-side-panel,
.mobility-product-shell{

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

.mobility-live-card:hover,
.mobility-mini-chart:hover,
.mobility-highlight:hover{

  transform:
  translateY(-4px);

  border-color:
  rgba(120,170,255,0.12);

  box-shadow:
  0 18px 40px rgba(0,0,0,0.34);
}

.mobility-highlight > *{
  position:relative;
  z-index:2;
}

/*=======================================
TRUST BAR
=======================================*/

.mobility-trust-bar{
  display:grid;

  grid-template-columns:
  repeat(4,minmax(120px,1fr));

  gap:18px;

  margin-top:8px;
}

.mobility-trust-item{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:84px;

  border-radius:22px;

  background:
  linear-gradient(
    180deg,
    rgba(14,20,30,0.92),
    rgba(7,10,16,0.98)
  );

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

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

  font-size:14px;

  font-weight:600;

  backdrop-filter:blur(20px);

  box-shadow:
  0 10px 30px rgba(0,0,0,0.22);
}


/* =========================================
BOTTOM GRID
========================================= */

.mobility-bottom-grid{

  display:grid;

  grid-template-columns:
  minmax(0,1.4fr)
  minmax(340px,480px);

  gap:24px;
}

.mobility-social,
.mobility-contact{
  padding:34px;
  border-radius:28px;
  backdrop-filter:blur(18px);

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

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

.insight-tag{
  font-size:10px;
  letter-spacing:0.12em;
  color:#74bcff;

  margin-bottom:18px;
}

.mobility-form{
  display:flex;
  gap:14px;
  margin-top:24px;
}

.mobility-form input{
  flex:1;

  height:56px;

  border:none;
  outline:none;

  border-radius:14px;

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

  padding:0 18px;

  color:#fff;
}

.mobility-form button{
  height:56px;
  padding:0 22px;

  border:none;
  border-radius:14px;

  background:#1570ff;
  color:#fff;

  font-weight:700;
  cursor:pointer;
}

/*=========================================
RESPONSIVENESS 
==========================================*/

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

@media (max-width: 1200px){

  .mobility-hero-grid,
  .mobility-product-grid,
  .mobility-intel-grid,
  .mobility-bottom-grid{
    grid-template-columns:1fr;
  }

  .mobility-live-strip{
    grid-template-columns:repeat(2,1fr);
  }

}

@media (max-width: 980px){

  .mobility-product-highlights{
    grid-template-columns:1fr;
  }

  .mobility-product-shell{
    grid-template-columns:1fr;

    gap:60px;

    padding:50px 32px;
  }

  .mobility-product-main h2{
    font-size:72px;
  }

  .mobility-spec-bar{
    grid-template-columns:
    repeat(2,1fr);
  }

}

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

@media (max-width: 768px){

  .mobility-hero{
    border-radius:24px;
  }

  .mobility-hero-grid{
    padding:28px 24px 24px;
  }

  .mobility-product-shell{
    gap:34px;
  }

  .mobility-shell{
    width:calc(100vw - 20px);
  }

  .mobility-title{
    font-size:48px;
  }

  .mobility-hero-grid{
    padding:22px;
  }

  .mobility-live-strip,
  .mobility-grid{
    grid-template-columns:1fr;
  }

  .mobility-command-bar{
    flex-direction:column;
    align-items:flex-start;
  }

  .mobility-form{
    flex-direction:column;
  }

  .mobility-form button{
    width:100%;
  }

  .mobility-product-visual{
  min-height:340px;
  }

  .mobility-product-visual img{
    max-width:340px;
  }

  .mobility-card{
    min-height:auto;
  }

  /* =========================================
     NEW PREMIUM MOBILE REFINEMENT
  ========================================= */

  .mobility-trust-bar{
    grid-template-columns:1fr;
  }

  .mobility-title{
    font-size:54px;
  }

  .mobility-product-shell{
    padding:28px 22px;
  }

  .mobility-product-main h2{
    font-size:52px;
  }

  .mobility-side-panel{
    padding:28px;
  }

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

  .mobility-ticker{
    height:40px;
  }

  .ticker-item{
    font-size:11px;
  }

  .ticker-item strong{
    font-size:11px;
  }

  .mobility-ticker-track{
    gap:18px;
    padding-left:20px;
  }

}