/* Services Components */
.hero-orb{
  position:absolute;right:-160px;top:90px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,102,0,.20),rgba(90,174,255,.10) 42%,transparent 70%);
  filter:blur(4px);
}
.command-panel{
  position:relative;border-radius:34px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  width:100%;max-width:600px;margin:0 auto;
  border:1px solid rgba(255,255,255,.11);box-shadow:0 30px 80px rgba(0,0,0,.32),0 0 55px rgba(255,102,0,.08);
  overflow:hidden;
}
.command-panel::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 16%,rgba(255,102,0,.14),transparent 24%),
    radial-gradient(circle at 84% 20%,rgba(90,174,255,.12),transparent 24%);
}
.command-inner{position:relative;z-index:1;border-radius:26px;background:rgba(6,11,25,.65);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.window-top{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.dots{display:flex;gap:8px}.dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}.dots span:first-child{background:var(--orange)}.dots span:nth-child(2){background:var(--blue)}.dots span:nth-child(3){background:var(--purple)}
.console{padding:20px;display:grid;gap:13px}
.console-row{
  display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:14px;border-radius:18px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.065);
}
.row-icon{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:rgba(255,102,0,.13);color:var(--orange)}
.console-row strong{display:block}.console-row span{display:block;color:var(--muted2);font-size:12px;margin-top:4px}
.status{font-size:11px;font-weight:900;border-radius:99px;padding:7px 10px;background:rgba(24,201,139,.10);color:#baffdf;border:1px solid rgba(24,201,139,.22)}

.service-icon{
  width:56px;height:56px;border-radius:20px;display:grid;place-items:center;margin-bottom:22px;
  background:linear-gradient(180deg,rgba(255,102,0,.22),rgba(90,174,255,.10));
  border:1px solid rgba(255,255,255,.11);box-shadow:0 0 28px rgba(255,102,0,.13);
}
.service-icon svg{width:29px;height:29px;stroke:var(--orange)}

.card h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.card h3 a:hover {
  color: var(--orange, #ff9148);
}

.section-head-stacked{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.section-head-stacked .section-copy{max-width:100% !important}

.process{
  position:relative;border-radius:36px;padding:28px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.105);
  overflow:hidden;
}
.process::before{content:"";position:absolute;left:7%;right:7%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,102,0,.50),rgba(90,174,255,.45),transparent)}
.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.step{text-align:center;padding:22px 12px;border-radius:24px;background:rgba(7,12,28,.70);border:1px solid rgba(255,255,255,.08)}
.step-num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:linear-gradient(180deg,var(--orange2),var(--orange));font-weight:900}
.step strong{display:block;margin-bottom:8px}.step span{color:var(--muted);font-size:13px;line-height:1.55}

.featured{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* Split Card Layout */
.split-card { display: flex; flex-direction: column; justify-content: space-between; border-radius: 30px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; padding: 38px; }
.split-card .card-text { margin-bottom: 24px; }
.split-card h3 { font-size: 38px; line-height: 1; letter-spacing: -.06em; margin-bottom: 12px; }
.split-card .card-image { width: 100%; }
.split-card .card-image img { width: 100%; height: 350px; object-fit: cover; object-position: top center; border-radius: 20px; cursor: zoom-in; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid rgba(255, 255, 255, 0.08); }
.split-card .card-image img:hover { transform: scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

/* Lightbox Styling */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.9); backdrop-filter: blur(8px); z-index: 100000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.lightbox-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox-content { position: relative; width: min(92%, 1440px); max-height: 85vh; display: flex; justify-content: center; align-items: center; transform: translateY(20px) scale(0.98); transition: transform 0.3s ease; }
.lightbox-overlay.active .lightbox-content { transform: translateY(0) scale(1); }
.lightbox-image { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 90px rgba(0,0,0,0.8); }
.lightbox-close { position: absolute; top: 16px; right: 16px; border: none; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); color: #fff; font-size: 28px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; z-index: 100001; transition: background 0.2s ease, transform 0.2s ease; line-height: 1; }
.lightbox-close:hover { background: rgba(255,102,0,0.8); transform: scale(1.05); }
body.lightbox-active { overflow: hidden !important; }

@media(max-width:1120px){
  .featured{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .process::before{display:none}
}
@media(max-width:880px){
  .steps{grid-template-columns:1fr}
}

/* FTTx CTA Section */
.xg-fttx-entry { position: relative; width: 100%; margin: 0 auto; overflow: hidden; border: 1px solid rgba(139, 160, 220, 0.24); border-radius: 30px; background: linear-gradient(115deg, rgba(34, 42, 79, .86), rgba(15, 23, 48, .82) 54%, rgba(11, 17, 35, .96)); box-shadow: 0 28px 80px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.035); isolation: isolate; }
.xg-fttx-entry::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, black, transparent 80%); }
.xg-fttx-entry::after { content: ""; position: absolute; width: 520px; height: 520px; right: -190px; top: -220px; border-radius: 50%; background: rgba(40, 100, 255, .15); filter: blur(80px); z-index: -1; }
.xg-fttx-entry__inner { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(460px, .97fr); min-height: 440px; }
.xg-fttx-entry__content { padding: 62px 38px 58px 58px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.xg-fttx-entry__tag { width: fit-content; display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; margin-bottom: 24px; border: 1px solid rgba(255, 107, 11, .38); border-radius: 999px; background: rgba(255, 107, 11, .105); color: #ffd8bf; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .145em; text-transform: uppercase; }
.xg-fttx-entry__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px rgba(255,107,11,.85); }
.xg-fttx-entry h2 { margin: 0; max-width: 680px; color: #fff; font-size: clamp(38px, 4.3vw, 62px); line-height: .98; letter-spacing: -.052em; font-weight: 800; }
.xg-fttx-entry h2 span { color: var(--orange); }
.xg-fttx-entry__lead { max-width: 650px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.xg-fttx-entry__types { display: flex; flex-wrap: wrap; gap: 10px; margin: 27px 0 31px; }
.xg-fttx-entry__type { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; border: 1px solid rgba(139, 160, 220, .22); border-radius: 999px; background: rgba(7, 13, 29, .34); color: #e7ebf6; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.xg-fttx-entry__type i { width: 7px; height: 7px; border-radius: 50%; background: #4388ff; box-shadow: 0 0 11px rgba(67,136,255,.75); }
.xg-fttx-entry__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.xg-fttx-entry__cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 25px; border-radius: 12px; background: linear-gradient(100deg, #ff6500, #ffad73); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 14px 32px rgba(255, 101, 0, .20); transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.xg-fttx-entry__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(255, 101, 0, .28); filter: saturate(1.08); }
.xg-fttx-entry__cta svg { transition: transform .22s ease; }
.xg-fttx-entry__cta:hover svg { transform: translateX(4px); }
.xg-fttx-entry__visual { position: relative; min-height: 440px; overflow: hidden; border-left: 1px solid rgba(139, 160, 220, .13); background: linear-gradient(90deg, rgba(7,11,22,.38), rgba(7,11,22,.02) 28%), url("../images/services/services-fttx-cta.webp") center center / cover no-repeat; }
.xg-fttx-entry__visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,18,.05), rgba(4,8,18,.16)); pointer-events: none; }
.xg-fttx-entry__visual::after { content: ""; position: absolute; inset: 0; box-shadow: inset 28px 0 48px rgba(5,9,18,.38); pointer-events: none; }
@media (max-width: 980px) { .xg-fttx-entry__inner { grid-template-columns: 1fr; } .xg-fttx-entry__content { padding: 48px 34px 36px; } .xg-fttx-entry__visual { min-height: 390px; border-left: 0; border-top: 1px solid rgba(139,160,220,.13); } }
@media (max-width: 560px) { .xg-fttx-entry { border-radius: 22px; } .xg-fttx-entry__content { padding: 36px 22px 30px; } .xg-fttx-entry h2 { font-size: 38px; } .xg-fttx-entry__lead { font-size: 15px; } .xg-fttx-entry__visual { min-height: 335px; } }