/* =========================================================
   UnixCloud – Global app.css (FULL DROP-IN)
   Dark + Pink + Grey + Lime accents
   Includes: Public site, mega menu, homepage bands,
   postcode checker + modal, cart/configure/contact,
   portal + customer login styles.
   ========================================================= */

:root{
  --bg:#070812;
  --panel:#0f1120;
  --panel2:#141835;
  --stroke:#2a2f55;

  --text:#ffffff;
  --muted:#a7aac3;
  --grey:#cfd2e2;

  --pink:#ff4fd8;
  --pink2:#ff86e7;
  --lime:#b7ff2a;

  --shadow: 0 34px 90px rgba(0,0,0,.55);
  --shadowSoft: 0 18px 60px rgba(0,0,0,.35);

  --radius: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(255,79,216,.20), transparent 60%),
    radial-gradient(900px 520px at 90% -10%, rgba(183,255,42,.10), transparent 60%),
    var(--bg);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
hr{ border:0; border-top:1px solid rgba(42,47,85,.55); }

.uc-container{ max-width:1320px; margin:0 auto; padding:22px 26px; }
.muted{ color:var(--muted); }
.error{ color:#ff6b6b; margin-top:10px; }
.pink{ color: var(--pink); }
.lime{ color: var(--lime); }

/* =========================================================
   Common UI
   ========================================================= */

.uc-pill{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(42,47,85,.8);
  background: rgba(20,24,53,.45);
  color: rgba(255,255,255,.88);
  font-weight:1100; font-size:11px; letter-spacing:.2px;
}

.badge{
  display:inline-flex; align-items:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(42,47,85,.85);
  background: rgba(20,24,53,.45);
  color: var(--muted);
  font-weight:1100;
  font-size:12px;
}

.uc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:10px 14px; border-radius:14px;
  border:1px solid rgba(255,79,216,.25);
  background: linear-gradient(90deg,var(--pink),var(--pink2));
  color:#0b0c10; font-weight:1200; letter-spacing:.2px;
  box-shadow: 0 16px 48px rgba(255,79,216,.16);
  cursor:pointer; user-select:none;
}
.uc-btn:hover{ filter:brightness(1.05); }

.uc-btn-ghost{
  background: rgba(20,24,53,.55);
  color: var(--text);
  border:1px solid rgba(42,47,85,.9);
  box-shadow:none;
}
.uc-btn-muted{
  background: rgba(20,24,53,.35);
  color: rgba(255,255,255,.92);
  border:1px solid rgba(42,47,85,.7);
  box-shadow:none;
}
.uc-btn-muted:hover{ border-color: rgba(255,79,216,.25); }
.uc-btn-compact{ padding:9px 12px; border-radius:12px; }

.uc-select{
  width:100%;
  background: rgba(20,24,53,.55);
  border:1px solid rgba(42,47,85,.85);
  color:var(--text);
  border-radius:14px;
  padding:12px;
  outline:none;
}

.uc-spinner{
  width:14px; height:14px;
  border-radius:999px;
  border:2px solid rgba(0,0,0,.25);
  border-top-color: rgba(0,0,0,.7);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* Center overlay loader */
.uc-loading-overlay{
  position:fixed;
  inset:0;
  z-index:4000;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(6px);
}
.uc-loading-overlay.open{ display:flex; }
.uc-loading-box{
  min-width: 260px;
  border-radius: 20px;
  border:1px solid rgba(42,47,85,.85);
  background: rgba(15,17,32,.96);
  box-shadow: var(--shadow);
  padding: 18px 18px;
  text-align:center;
}
.uc-loading-wheel{
  width:42px;height:42px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.16);
  border-top-color: rgba(255,79,216,.85);
  animation: spin .8s linear infinite;
  margin: 0 auto 10px;
}
.uc-loading-text{ font-weight: 1200; letter-spacing: -.2px; }
.uc-loading-sub{ margin-top:6px; color: var(--muted); font-size: 13px; line-height: 1.4; }

/* =========================================================
   Public nav + mega menus
   ========================================================= */

.uc-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(42,47,85,.55);
  background: rgba(7,8,18,.72);
  backdrop-filter: blur(10px);
}
.uc-header-inner{
  max-width:1320px;
  margin:0 auto;
  padding:14px 26px;
  display:flex;
  align-items:center;
  gap:14px;
}

.uc-brand{
  display:flex; align-items:center; gap:10px;
  min-width:240px;
}
.uc-brand-badge{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(255,79,216,.95), rgba(255,134,231,.45));
  box-shadow: 0 18px 60px rgba(255,79,216,.14);
  font-weight:1200;
}
.uc-brand-text{ display:flex; flex-direction:column; line-height:1.12; }
.uc-brand-name{ font-weight:1200; letter-spacing:-.4px; }
.uc-brand-tag{ font-size:12px; color:var(--muted); font-weight:1100; margin-top:3px; }

.uc-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  justify-content:center;
}

.uc-nav-link{
  display:inline-flex; align-items:center;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(42,47,85,.55);
  background: rgba(20,24,53,.25);
  color: rgba(255,255,255,.94);
  font-weight:1200;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.uc-nav-link:hover{
  border-color: rgba(255,79,216,.35);
  background: rgba(20,24,53,.55);
  transform: translateY(-1px);
}

.uc-actions{ display:flex; align-items:center; gap:10px; }

.uc-nav-dd{ position:relative; }
.uc-nav-dd::after{
  content:"";
  position:absolute;
  left:0; top:100%;
  width:100%; height:16px;
  background:transparent;
}

.uc-caret{
  display:inline-block;
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid rgba(255,255,255,.75);
  margin-left:6px;
  transform: translateY(1px);
}
.uc-dd-btn{ appearance:none; -webkit-appearance:none; border:none; font:inherit; cursor:pointer; }

.uc-mega{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:820px;
  display:none;
  gap:14px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(42,47,85,.9);
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(255,79,216,.16), transparent 60%),
    radial-gradient(600px 220px at 85% 0%, rgba(183,255,42,.10), transparent 60%),
    rgba(15,17,32,.92);
  box-shadow: var(--shadow);
}
.uc-nav-dd:hover .uc-mega,
.uc-nav-dd:focus-within .uc-mega{
  display:grid;
  grid-template-columns: 1fr 1fr .9fr;
}
.uc-mega-col{
  border:1px solid rgba(42,47,85,.7);
  background: rgba(20,24,53,.52);
  border-radius:18px;
  padding:12px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.uc-mega-col:hover{
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255,79,216,.30);
  box-shadow: var(--shadowSoft);
}
.uc-mega-title{ font-weight:1200; margin-bottom:10px; }
.uc-mega-link{
  display:block;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(42,47,85,.55);
  background: rgba(7,8,18,.35);
}
.uc-mega-sub{ color:var(--muted); font-size:12px; line-height:1.45; margin-top:8px; }
.uc-mega-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.uc-mega-cta{
  border-radius:18px;
  padding:12px;
  border:1px solid rgba(183,255,42,.20);
  background: linear-gradient(135deg, rgba(183,255,42,.10), rgba(255,79,216,.10));
}
.uc-mega-badge{ font-size:11px; font-weight:1200; color:var(--lime); margin-bottom:10px; }
.uc-mega-cta-title{ font-weight:1200; margin-bottom:6px; }

.uc-burger{
  display:none;
  background: rgba(20,24,53,.25);
  border:1px solid rgba(42,47,85,.55);
  cursor:pointer;
  padding:10px;
  border-radius:14px;
}
.uc-burger span{
  display:block; width:22px; height:2px;
  background:#fff; margin:5px 0; opacity:.92;
}

.uc-mobile{
  display:none;
  max-width:1320px;
  margin:0 auto;
  padding:0 26px 14px;
}
.uc-mobile.show{ display:block; }
.uc-mobile a{
  display:block;
  padding:12px 6px;
  border-bottom:1px solid rgba(42,47,85,.45);
  color: rgba(255,255,255,.92);
}

/* Cart icon */
.uc-cart{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(42,47,85,.55);
  background: rgba(20,24,53,.25);
}
.uc-cart:hover{ border-color: rgba(255,79,216,.35); background: rgba(20,24,53,.55); }
.uc-cart-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px; height:18px;
  padding:0 6px;
  border-radius:999px;
  display:grid; place-items:center;
  font-size:11px;
  font-weight:1200;
  background: var(--pink);
  color:#0b0c10;
  border:1px solid rgba(255,255,255,.25);
}

/* =========================================================
   Generic sections used across site
   ========================================================= */

.uc-section{
  margin-top:18px;
  border-radius:22px;
  border:1px solid rgba(42,47,85,.75);
  background: rgba(15,17,32,.65);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.uc-section::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(520px 240px at 18% 10%, rgba(255,79,216,.12), transparent 65%),
    radial-gradient(520px 240px at 82% 10%, rgba(183,255,42,.08), transparent 65%);
  pointer-events:none;
}
.uc-section-head{ position:relative; margin-bottom:14px; }
.uc-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:1200;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(207,210,226,.75);
}
.uc-kicker::before{
  content:"";
  width:10px;height:10px;border-radius:3px;
  background: var(--lime);
  box-shadow: 0 0 18px rgba(183,255,42,.25);
}
.uc-section-title{ margin:6px 0 0; font-size:28px; font-weight:1250; letter-spacing:-.4px; }
.uc-section-sub{ margin:8px 0 0; color:var(--muted); line-height:1.6; max-width:72ch; }

/* 3-col feature grid */
.uc-grid3{ position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.uc-feature{
  position:relative;
  border-radius:20px;
  border:1px solid rgba(42,47,85,.70);
  background: rgba(20,24,53,.42);
  padding:16px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.uc-feature::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:3px;
  background: linear-gradient(90deg, rgba(255,79,216,.9), rgba(183,255,42,.55));
  opacity:.55;
}
.uc-feature:hover{
  transform: translateY(-4px);
  border-color: rgba(255,79,216,.30);
  box-shadow: var(--shadowSoft);
  background: rgba(20,24,53,.55);
}
.uc-feature-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.uc-icon{
  width:42px;height:42px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid rgba(42,47,85,.75);
  background: rgba(7,8,18,.35);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  font-size:14px;
  font-weight:1200;
}
.uc-feature h3{ margin:0; font-weight:1250; letter-spacing:-.2px; }
.uc-feature p{ margin:0; color:var(--muted); line-height:1.6; }
.uc-feature-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

/* =========================================================
   HERO + checker (homepage)
   ========================================================= */

.uc-hero{
  margin-top:18px;
  border-radius:26px;
  border:1px solid rgba(42,47,85,.75);
  background:
    radial-gradient(900px 280px at 15% 0%, rgba(255,79,216,.18), transparent 60%),
    radial-gradient(900px 280px at 85% 0%, rgba(183,255,42,.10), transparent 60%),
    rgba(15,17,32,.72);
  overflow: visible;
  position:relative;
}
.uc-hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  padding:22px;
  align-items:center;
}
.uc-hero h1{ font-size:48px; line-height:1.05; margin:0 0 10px; font-weight:1200; letter-spacing:-.8px; }
.uc-hero p{ margin:0; color:var(--muted); line-height:1.6; max-width:62ch; }
.uc-hero-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

.uc-hero-art{
  border-radius:22px;
  border:1px solid rgba(42,47,85,.65);
  background:
    linear-gradient(180deg, rgba(7,8,18,.45), rgba(7,8,18,.82)),
    url("/assets/img/banner.png") right center / contain no-repeat;
  background-color: rgba(15,17,32,.55);
  min-height:420px;
  position:relative;
  overflow:hidden;
}
.uc-fibre-line{
  position:absolute; left:8%; right:10%; bottom:18%;
  height:6px; border-radius:999px;
  background:
    linear-gradient(90deg, rgba(183,255,42,0) 0%, rgba(255,79,216,.70) 50%, rgba(183,255,42,0) 100%);
  background-size: 240% 100%;
  animation: fibreSweep 2.2s linear infinite;
  opacity:.95;
}
@keyframes fibreSweep{ 0%{ background-position: 0% 50%; } 100%{ background-position: 240% 50%; } }

.uc-hero-checker{ padding:0 22px 22px; }
.uc-checkbar{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(42,47,85,.85);
  background: rgba(7,8,18,.55);
  backdrop-filter: blur(8px);
}
.uc-checkbar input{
  width:100%;
  background: rgba(20,24,53,.55);
  border:1px solid rgba(42,47,85,.85);
  color:var(--text);
  border-radius:14px;
  padding:14px 14px;
  outline:none;
}
.uc-checkbar input:focus{
  border-color: rgba(255,79,216,.45);
  box-shadow: 0 0 0 4px rgba(255,79,216,.10);
}
.uc-checkbar-stack{ grid-template-columns: 1fr auto; }
.uc-input-wrap{ position:relative; z-index: 9999; }

/* Dropdown */
.uc-dd{
  position:absolute; left:0; right:0; top: calc(100% + 8px);
  z-index: 99999;
  pointer-events:auto;
  border-radius:16px;
  border:1px solid rgba(42,47,85,.85);
  background: rgba(15,17,32,.98);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  overflow:hidden;
  max-height: 420px;
  overflow-y:auto;
  display:none;
}
.uc-dd-item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:0;
  background:transparent;
  color: rgba(255,255,255,.92);
  cursor:pointer;
  border-bottom:1px solid rgba(42,47,85,.45);
  line-height:1.25;
}
.uc-dd-item:hover{ background: rgba(20,24,53,.55); }
.uc-dd-item:last-child{ border-bottom:0; }

/* =========================================================
   NEW – Homepage alternating bands (image/text)
   ========================================================= */

.uc-band{
  margin-top:18px;
  border-radius:26px;
  border:1px solid rgba(42,47,85,.75);
  background: rgba(15,17,32,.62);
  overflow:hidden;
}
.uc-band-inner{
  padding:20px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:center;
}
@media (max-width: 980px){
  .uc-band.reverse .uc-band-media{ order:1; }
  .uc-band.reverse .uc-band-copy{ order:2; }
}

.uc-band-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:1200;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(207,210,226,.75);
}
.uc-band-kicker::before{
  content:"";
  width:10px;height:10px;border-radius:3px;
  background: var(--lime);
  box-shadow: 0 0 18px rgba(183,255,42,.25);
}
.uc-band h2{
  margin:10px 0 0;
  font-size:30px;
  font-weight:1250;
  letter-spacing:-.4px;
}
.uc-band p{
  margin:10px 0 0;
  color: var(--muted);
  line-height:1.7;
  max-width: 72ch;
}

.uc-bullets{ margin-top:12px; display:grid; gap:10px; }
.uc-bullet{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(42,47,85,.65);
  background: rgba(7,8,18,.28);
}
.uc-bullet .dot{
  width:10px;height:10px;border-radius:3px;
  margin-top:5px;
  background: var(--pink);
  box-shadow: 0 0 18px rgba(255,79,216,.18);
}
.uc-bullet strong{ font-weight:1250; }
.uc-bullet span{ color: var(--muted); display:block; margin-top:4px; line-height:1.6; }

.uc-band-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

.uc-band-media{
  border-radius:22px;
  border:1px solid rgba(42,47,85,.65);
  background: rgba(7,8,18,.25);
  overflow:hidden;
  min-height:320px;
  position:relative;
}
.uc-band-media::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(340px 240px at 62% 60%, rgba(255,79,216,.18), transparent 65%),
    radial-gradient(320px 240px at 70% 50%, rgba(183,255,42,.08), transparent 70%);
  pointer-events:none;
}
.uc-media-label{
  position:absolute;
  top:14px; left:14px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(42,47,85,.7);
  background: rgba(15,17,32,.72);
  font-weight:1200;
  font-size:12px;
}
.uc-media-art{
  position:absolute;
  inset:0;
  background: url("/assets/img/banner.png") center / cover no-repeat;
  opacity:.35;
  filter:saturate(1.05);
}

.uc-highlight-row{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.uc-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(42,47,85,.65);
  background: rgba(20,24,53,.35);
  color: rgba(255,255,255,.92);
  font-weight:1100;
  font-size:12px;
}
.uc-chip .sq{
  width:10px;height:10px;border-radius:3px;
  background: var(--lime);
  box-shadow:0 0 16px rgba(183,255,42,.22);
}

/* Compact showcase rows */
.uc-showcase{ margin-top:14px; display:grid; gap:10px; }
.uc-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(42,47,85,.65);
  background: rgba(20,24,53,.35);
}
.uc-item strong{ font-weight:1250; }
.uc-item .meta{ color: var(--muted); font-size:12px; margin-top:4px; line-height:1.5; max-width: 72ch; }
.uc-item .price{ text-align:right; min-width: 150px; }
.uc-item .price .big{ font-weight:1250; font-size:16px; }
.uc-item .price .small{ color: var(--muted); font-size:12px; margin-top:4px; }
.uc-item .cta{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* =========================================================
   Modal + “tech cards” used on packages/configure/portal
   ========================================================= */

.uc-modal{ position:fixed; inset:0; display:none; z-index:2000; }
.uc-modal.open{ display:block; }
.uc-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.60); backdrop-filter: blur(6px); }

.uc-modal-panel{
  position:relative;
  width:min(1060px, calc(100% - 28px));
  margin: 70px auto 20px;
  border-radius:22px;
  border:1px solid rgba(42,47,85,.85);
  background:
    radial-gradient(600px 240px at 20% 0%, rgba(255,79,216,.16), transparent 60%),
    radial-gradient(600px 240px at 85% 0%, rgba(183,255,42,.10), transparent 60%),
    rgba(15,17,32,.96);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.uc-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 16px 10px;
  border-bottom:1px solid rgba(42,47,85,.55);
}
.uc-modal-title{
  font-weight:1250;
  font-size:22px;
  letter-spacing:-.2px;
  margin-top:4px;
}
.uc-modal-sub{ margin-top:6px; color:var(--muted); }
.uc-modal-x{
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid rgba(42,47,85,.7);
  background: rgba(20,24,53,.45);
  color: rgba(255,255,255,.92);
  font-size:22px;
  cursor:pointer;
}
.uc-modal-body{ padding:16px; }
.uc-modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 16px;
  border-top:1px solid rgba(42,47,85,.55);
  background: rgba(7,8,18,.35);
}

/* Tech grid/cards used in many places */
.uc-tech-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; }
.uc-tech-card{
  border-radius:18px;
  border:1px solid rgba(42,47,85,.70);
  background: rgba(20,24,53,.42);
  padding:12px;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.uc-tech-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,79,216,.28);
  box-shadow: var(--shadowSoft);
}
.uc-tech-card::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:3px;
  background: linear-gradient(90deg, rgba(255,79,216,.85), rgba(183,255,42,.55));
  opacity:.85;
}
.uc-tech-top{ display:flex; gap:10px; align-items:flex-start; }
.uc-tech-icon{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid rgba(42,47,85,.75);
  background: rgba(7,8,18,.45);
  font-weight:1250; font-size:12px; letter-spacing:.10em;
}
.uc-tech-name{ font-weight:1250; letter-spacing:-.2px; font-size:16px; line-height:1.15; }

/* Pills & stats used in modal cards */
.uc-pillrow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.uc-mini-pill{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(42,47,85,.65);
  background: rgba(20,24,53,.35);
  color: rgba(255,255,255,.92);
  font-weight:1100; font-size:12px;
}
.uc-status{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(42,47,85,.75);
  background: rgba(7,8,18,.35);
  font-weight:1100; font-size:12px;
  margin-top:8px;
}
.uc-dot{ width:10px;height:10px;border-radius:3px; display:inline-block; background:var(--lime); box-shadow:0 0 18px rgba(183,255,42,.25); }

/* Arrow icons used in speed tiles */
.uc-arrow{
  width:22px;height:22px;border-radius:8px;
  display:grid;place-items:center;
  border:1px solid rgba(42,47,85,.65);
  background: rgba(7,8,18,.35);
  position:relative;
}
.uc-arrow::before,
.uc-arrow::after{
  content:"";
  width:7px;height:7px;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  position:absolute;
}
.uc-arrow-down::before{ transform: rotate(45deg); top:5px; }
.uc-arrow-down::after{  transform: rotate(45deg); top:11px; }
.uc-arrow-up::before{ transform: rotate(-135deg); top:5px; }
.uc-arrow-up::after{  transform: rotate(-135deg); top:11px; }

.uc-speed-tiles{ margin-top:10px; display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.uc-speed-tile{
  border-radius:16px;
  border:1px solid rgba(42,47,85,.65);
  background: rgba(20,24,53,.35);
  padding:10px;
}
.uc-speed-tile .label{
  color: var(--muted);
  font-weight:1100;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.uc-speed-tile .val{
  margin-top:6px;
  font-weight:1300;
  font-size:18px;
  letter-spacing:-.2px;
}

.uc-range{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(42,47,85,.65);
  background: rgba(7,8,18,.25);
  color: rgba(255,255,255,.92);
  font-size:13px;
  line-height:1.5;
}

.uc-empty{
  padding:14px;
  border-radius:18px;
  border:1px dashed rgba(42,47,85,.65);
  background: rgba(7,8,18,.35);
}

/* =========================================================
   Contact page
   ========================================================= */

.uc-contact-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  margin-top:14px;
}
.uc-contact-card{
  border-radius:22px;
  border:1px solid rgba(42,47,85,.75);
  background: rgba(15,17,32,.65);
  padding:16px;
}
.uc-contact-form label{
  display:block; font-weight:1100; font-size:12px;
  color:rgba(255,255,255,.88);
  margin:12px 0 6px;
}
.uc-contact-form input,
.uc-contact-form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(42,47,85,.85);
  background: rgba(20,24,53,.45);
  color: rgba(255,255,255,.95);
  outline:none;
}
.uc-contact-form textarea{ min-height:140px; resize:vertical; }
.uc-contact-form input:focus,
.uc-contact-form textarea:focus{
  border-color: rgba(255,79,216,.45);
  box-shadow: 0 0 0 4px rgba(255,79,216,.10);
}
.uc-map-box{
  border-radius:22px;
  border:1px solid rgba(42,47,85,.75);
  background: rgba(15,17,32,.65);
  overflow:hidden;
  min-height: 320px;
}
.uc-map-box iframe{ width:100%; height:100%; border:0; }

/* =========================================================
   Configure page + cart pages
   ========================================================= */

.uc-config-wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  margin-top:14px;
}
.uc-config-hero{
  border-radius:22px;
  border:1px solid rgba(42,47,85,.75);
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(255,79,216,.14), transparent 60%),
    radial-gradient(600px 220px at 85% 0%, rgba(183,255,42,.08), transparent 60%),
    rgba(15,17,32,.65);
  padding:16px;
}
.uc-config-hero-top{ display:flex; gap:12px; align-items:center; }
.uc-config-image{
  width:88px;height:88px;
  border-radius:18px;
  border:1px solid rgba(42,47,85,.75);
  background: rgba(7,8,18,.35);
  display:grid; place-items:center;
  font-weight:1200;
}
.uc-config-title{ margin:0; font-size:22px; font-weight:1250; letter-spacing:-.2px; }
.uc-config-summary{ margin-top:8px; color:var(--muted); line-height:1.6; }
.uc-config-form{ margin-top:12px; display:grid; gap:12px; }

.uc-summary{
  border-radius:22px;
  border:1px solid rgba(42,47,85,.75);
  background: rgba(15,17,32,.65);
  padding:16px;
  position: sticky;
  top: 90px;
  height: fit-content;
}
.uc-summary h3{ margin:0 0 10px 0; }
.uc-summary-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(42,47,85,.35);
}
.uc-summary-line:last-child{ border-bottom:0; }
.uc-summary-total{ font-weight:1250; font-size:18px; }
.uc-summary-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.uc-summary-actions .uc-btn{ flex:1; }

/* Cart page helpers (if you use them) */
.uc-cart-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; margin-top:14px; }
.uc-cart-list{ display:grid; gap:12px; }
.uc-cart-item-title{ font-weight:1250; letter-spacing:-.2px; }
.uc-cart-item-sub{ margin-top:6px; color: var(--muted); line-height:1.6; }
.uc-cart-actions{ margin-top:12px; display:flex; justify-content:flex-end; }

/* =========================================================
   Portal + customer login styling
   ========================================================= */

.uc-portal .uc-header{ display:none; }

.p-topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  border-bottom:1px solid rgba(42,47,85,.55);
  background: rgba(7,8,18,.78);
  backdrop-filter: blur(10px);
}
.p-burger{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(42,47,85,.55);
  background: rgba(20,24,53,.25);
  cursor:pointer;
  display:none;
}
.p-burger span{ display:block; width:20px;height:2px; background:#fff; margin:5px auto; opacity:.92; }

.p-shell{ display:grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 70px); }
.p-side{ border-right:1px solid rgba(42,47,85,.55); background: rgba(15,17,32,.62); padding:14px; }
.p-nav{ display:flex; flex-direction:column; gap:8px; }
.p-group{
  margin-top:10px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(207,210,226,.72);
  font-weight:1200;
}
.p-link{
  display:block;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(42,47,85,.55);
  background: rgba(20,24,53,.25);
  color: rgba(255,255,255,.92);
  font-weight:1100;
}
.p-link:hover{ border-color: rgba(255,79,216,.30); background: rgba(20,24,53,.55); }
.p-main{ padding:18px; }

.p-login-wrap{ min-height: calc(100vh - 40px); display:grid; place-items:center; padding:20px; }
.p-login-card{
  width:min(440px, 100%);
  border-radius:22px;
  border:1px solid rgba(42,47,85,.85);
  background: rgba(15,17,32,.92);
  box-shadow: var(--shadow);
  padding:18px;
}
.p-login-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.p-login-logo{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(255,79,216,.95), rgba(255,134,231,.45));
  box-shadow: 0 18px 60px rgba(255,79,216,.14);
  font-weight:1200;
}
.p-login-title{ font-weight:1250; letter-spacing:-.3px; font-size:18px; }
.p-login-sub{ margin-top:4px; color:var(--muted); font-size:13px; }

.p-field{ margin-top:12px; }
.p-field label{ display:block; font-weight:1100; font-size:12px; color:rgba(255,255,255,.88); margin-bottom:6px; }

.p-field input,
.p-field textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(42,47,85,.85);
  background: rgba(20,24,53,.45);
  color: rgba(255,255,255,.95);
  outline:none;
}
.p-field textarea{ resize:vertical; min-height:120px; }
.p-field input:focus,
.p-field textarea:focus{
  border-color: rgba(255,79,216,.45);
  box-shadow: 0 0 0 4px rgba(255,79,216,.10);
}

.p-login-actions{ margin-top:14px; display:flex; gap:10px; }
.p-login-actions .uc-btn{ width:100%; }

.p-login-error{
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(255,79,216,.25);
  background: rgba(255,79,216,.08);
  color: rgba(255,255,255,.92);
  padding:10px 12px;
}

/* Segmented control (Residential / Business) */
.uc-seg{
  width: min(520px, 100%);
  margin: 12px auto 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:0;
  border-radius:999px;
  border:1px solid rgba(42,47,85,.75);
  background: rgba(7,8,18,.35);
  overflow:hidden;
}
.uc-seg-btn{
  appearance:none;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.88);
  font-weight:1200;
  padding:10px 12px;
  cursor:pointer;
}
.uc-seg-btn:hover{ background: rgba(20,24,53,.35); }
.uc-seg-btn.active{
  background: linear-gradient(90deg,var(--pink),var(--pink2));
  color:#0b0c10;
}

/* =========================================================
   Footer
   ========================================================= */

.footer{
  border-top:1px solid rgba(42,47,85,.55);
  padding:18px 22px;
  color:var(--muted);
  margin-top:44px;
}

/* =========================================================
   Responsive rules
   ========================================================= */

@media (max-width: 1100px){
  .uc-tech-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-contact-grid{ grid-template-columns: 1fr; }
  .uc-config-wrap{ grid-template-columns: 1fr; }
  .uc-cart-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 980px){
  .uc-nav{ display:none; }
  .uc-burger{ display:block; }
  .uc-hero-grid{ grid-template-columns:1fr; }
  .uc-checkbar-stack{ grid-template-columns: 1fr; }

  .uc-grid3{ grid-template-columns:1fr; }
  .uc-band-inner{ grid-template-columns:1fr; }
  .uc-band.reverse .uc-band-media{ order:1; }
  .uc-band.reverse .uc-band-copy{ order:2; }
  .uc-band-media{ min-height:260px; }

  .uc-tech-grid{ grid-template-columns:1fr; }
  .uc-speed-tiles{ grid-template-columns:1fr; }

  .p-shell{ grid-template-columns: 1fr; }
  .p-burger{ display:block; }
  .p-side{
    position:fixed;
    top:70px;
    left:0;
    width:280px;
    height: calc(100vh - 70px);
    transform: translateX(-105%);
    transition: transform .2s ease;
    z-index:200;
  }
  .p-side.open{ transform: translateX(0); }
}