/* =========================================================
   PAGE: Leased Line (enterprise polish)
   Depends on: global.css + services.css
========================================================= */

#leased-line .service-header p{
  max-width: 900px;
}

/* CTA buttons */
.ll-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Cards grid (replaces inline styles) */
.ll-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 36px;
  margin-bottom: 40px;
}

/* Your simplified-card isn't defined in your CSS; define it here */
.simplified-card{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.75);
  overflow: hidden;
  position: relative;
}

/* Slight accent for the “Why choose” card if you want (optional) */
.simplified-card:first-child{
  background:
    radial-gradient(900px 420px at 30% 10%, rgba(247,150,51,0.18), transparent 55%),
    rgba(255,255,255,0.03);
  border-color: rgba(247,150,51,0.25);
}

.simplified-card h4{
  font-size: 1.3rem;
  margin-bottom: 14px;
  color: #fff;
}

/* List styling (replaces inline UL margin-left) */
.ll-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ll-list li{
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  position: relative;
  padding-left: 18px;
}

.ll-list li::before{
  content:"";
  position:absolute;
  left:0;
  top: 0.9em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
  transform: translateY(-50%);
}

/* RTL list bullets */
body.rtl .ll-list li{
  padding-left: 0;
  padding-right: 18px;
}
body.rtl .ll-list li::before{
  left: auto;
  right: 0;
}

/* Mobile */
@media (max-width: 900px){
  .ll-cards{
    grid-template-columns: 1fr;
  }
}


/* ===== Leased Line Premium Upgrades ===== */

/* subtle background depth (less boring) */
#leased-line{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(247,150,51,0.12), transparent 60%),
    radial-gradient(900px 420px at 80% 90%, rgba(247,150,51,0.08), transparent 60%),
    var(--bg);
}

/* KPI badges */
.ll-kpis{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
  margin-bottom: 4px;
}

.ll-kpi{
  padding:8px 14px;
  border-radius:999px;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  font-weight:700;
  font-size:0.9rem;
  color:#eaeaea;
  backdrop-filter: blur(6px);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.ll-kpi:hover{
  background: rgba(247,150,51,0.12);
  border-color: rgba(247,150,51,0.55);
  transform: translateY(-3px);
}


/* divider between the two cards (desktop only) */
.ll-cards{
  position: relative;
}

.ll-cards::before{
  content:"";
  position:absolute;
  top: 22px;
  bottom: 22px;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(255,255,255,0.12), transparent);
  transform: translateX(-50%);
}

@media (max-width: 900px){
  .ll-cards::before{ display:none; }
}

/* ===== Architecture Strip ===== */
.ll-arch{
  margin: 36px auto 10px;
  max-width: 1010px;
  display: grid;
  grid-template-columns:  auto 120px auto 120px auto;
  align-items: center;
  gap: 10px;
}

.ll-arch-item{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 16px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 18px 45px rgba(0,0,0,0.55);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.ll-arch-item:hover{
  transform: translateY(-4px);
  background: rgba(247,150,51,0.08);
  border-color: rgba(247,150,51,0.35);
}

.ll-arch-core{
  background:
    radial-gradient(900px 420px at 30% 10%, rgba(247,150,51,0.18), transparent 55%),
    rgba(255,255,255,0.03);
  border-color: rgba(247,150,51,0.22);
}

.ll-arch-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--primary);
  flex: 0 0 auto;
}

.ll-arch-text{
  display: grid;
  gap: 2px;
}

.ll-arch-title{
  font-weight: 800;
  color: #fff;
  font-size: 1.02rem;
  line-height: 1.2;
  margin: 0;
}

.ll-arch-sub{
  color: rgba(255,255,255,0.72);
  font-size: 0.92rem;
  margin: 0;
}

.ll-arch-line{
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(247,150,51,0.85), transparent);
  opacity: 0.75;
}

/* RTL: reverse direction visually */
body.rtl .ll-arch{
  direction: rtl;
}
body.rtl .ll-arch-line{
  background: linear-gradient(270deg, transparent, rgba(247,150,51,0.85), transparent);
}

/* Responsive */
@media (max-width: 950px){
  .ll-arch{
    grid-template-columns: 1fr;
  }
  .ll-arch-line{
    height: 1px;
  }
}


/* make animations look smooth */
.ll-kpi, .simplified-card, .ll-arch-item{
  will-change: transform, opacity;
}

/* glow pulse helper */
.ll-glow{
  box-shadow: 0 0 0 rgba(247,150,51,0);
}


/* ===== Wire Connector (SVG) + Packet Animation ===== */
.ll-arch-connector{
  position: relative;
  height: 18px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.ll-wire{
  width: 100%;
  height: 18px;
}

.ll-wire-path{
  fill: none;
  stroke: rgba(247,150,51,0.75);
  stroke-width: 3.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(247,150,51,0.35));
}

/* moving packet */
.ll-packet{
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--primary);
  box-shadow: 0 0 14px rgba(247,150,51,0.7);
  opacity: 0;
}
.ll-wire-path{
  stroke: var(--primary);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(247,150,51,0.4));
}
/* On mobile (stacked), hide connectors completely (since grid becomes 1 column) */
@media (max-width: 950px){
  .ll-arch-connector,
  .ll-arch-line{
    display: none !important;
  }
}