:root{
    --hero-blue:#1E90FF; --hero-orange:#F2632E;
    --card:#fff; --ink:#0f2544; --muted:#64748b; --line:#E6EDF7; --tile:#244B8A; --radius:18px; --maxw:1200px;
  }
  *{box-sizing:border-box}
  body{ margin:0; background:#fff; color:var(--ink); font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}

  .zone-hero{
    position:relative; overflow:hidden; color:#fff; isolation:isolate;
    background:
      radial-gradient(900px 600px at -10% -10%, rgba(255,255,255,.14), transparent 60%),
      linear-gradient(135deg, var(--hero-blue) 0%, var(--hero-orange) 100%);
    padding: clamp(56px,8vw,120px) 0 clamp(140px,12vw,200px);
    min-height: clamp(380px, 42vw, 520px);
  }
  .zone-hero .wrap{ width:min(var(--maxw),92%); margin-inline:auto; position:relative; z-index:2; }

  .z-eyebrow{ font-weight:900; letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px; font-size:14px; }
  .z-title{ margin:0; font-weight:900; line-height:1.04; font-size: clamp(38px,6.8vw,68px); letter-spacing:-.01em; }
  .z-desc{ margin:0; color:#f8fbff; font-size: clamp(15px,2vw,19px); line-height:1.7; max-width: 60ch; }

  .z-benefits{ margin:22px 0 0; padding:0; list-style:none; display:grid; gap:10px; font-size:15px; color:#f1f6ff; }
  .z-benefits li{ display:flex; align-items:center; gap:10px; }
  .z-benefits i{ color:#fff; font-size:14px; background:rgba(255,255,255,.25); border-radius:6px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }

  .streaks{ position:absolute; inset:0; z-index:1; pointer-events:none; }
  .streaks .cluster{ position:absolute; transform: rotate(-24deg); filter: drop-shadow(0 2px 6px rgba(0,0,0,.12)); }
  .streaks .left{ top:14%; left:22%; width:260px; }
  .streaks .right{ bottom:10%; right:6%; width:300px; }
  .streak-line{
    height:2px; margin:20px 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
    opacity:.35; border-radius:4px;
  }
  .streaks .left .streak-line:nth-child(1){ width:66%; }
  .streaks .left .streak-line:nth-child(2){ width:52%; }
  .streaks .left .streak-line:nth-child(3){ width:60%; }
  .streaks .right .streak-line:nth-child(1){ width:58%; }
  .streaks .right .streak-line:nth-child(2){ width:46%; }
  .streaks .right .streak-line:nth-child(3){ width:64%; }

  .hero-bubbles{ position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; opacity:.65; }
  .hero-bubbles span{
    position:absolute; bottom:-12vh; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.92), rgba(255,255,255,.28) 65%, rgba(255,255,255,0) 80%);
    will-change: transform, opacity;
    animation: rise var(--dur,12s) linear var(--delay,0s) infinite;
  }
  @keyframes rise{
    0%   { transform: translateY(0) translateX(0) scale(var(--scale,1)); opacity:0; }
    10%  { opacity: var(--op, .22); }
    55%  { transform: translateY(-58vh) translateX(var(--drift,0px)) scale(var(--scale,1)); }
    90%  { opacity: calc(var(--op, .22) * .35); }
    100% { transform: translateY(-115vh) translateX(calc(var(--drift,0px) * 1.5)) scale(var(--scale,1)); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){ .hero-bubbles span{ animation:none; opacity:.08; } }

  .wrap{ width:min(var(--maxw),92%); margin:30px auto; }
  .wizard{ display:grid; grid-template-columns:1fr 360px; gap:22px; }
  @media(max-width:980px){ .wizard{ grid-template-columns:1fr; } }

  .card, .summary{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 18px rgba(2,6,23,.10); padding:18px; }
  .summary{ position:sticky; top:14px; align-self:start; display:grid; gap:12px; }

  .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
  .field label{ font-weight:800; font-size:14.5px; }
  .field input, .field select, .field textarea{ padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:15px; }
  .hint{ color:var(--muted); font-size:13px; }

  .summary .row{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:15.5px; padding:6px 0; }
  .summary .muted{ color:#6b7280; }
  .summary .total{ font-weight:900; font-size:16.5px; border-top:1px dashed #e6eaf2; padding-top:8px; }

  .progress{ display:grid; gap:8px; }
  .progress__head{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#334155; font-weight:800; }
  .progress__track{ position:relative; height:10px; background:#eef2ff; border-radius:999px; overflow:hidden; border:1px solid #e2e8f0; }
  .progress__bar{ position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg, #1E90FF, #8FD3FF); border-radius:999px; transition: inset 260ms ease, width 260ms ease, right 260ms ease; }

  .wizard-nav{ display:flex; gap:12px; justify-content:space-between; margin-top:6px; }
  .btn{ display:inline-flex; align-items:center; gap:8px; background:var(--tile); color:#fff; border:0; padding:10px 14px; border-radius:12px; font-size:14px; font-weight:800; cursor:pointer; }
  .btn.ghost{ background:#fff; color:var(--tile); border:1px solid var(--line); }
  .btn.secondary{ background:#0f2544; }

  #orderToast{
    position:fixed; top:16px; right:16px; z-index:99999; min-width:260px; max-width:92vw; padding:12px 14px;
    border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.22); background:#111827; color:#fff; font-weight:800; line-height:1.3;
    opacity:0; transform:translateY(-10px) scale(.98); pointer-events:none; transition:.22s ease; border:1px solid rgba(255,255,255,.08);
    display:flex; gap:10px; align-items:center;
  }
  #orderToast.show{ opacity:1; transform:translateY(0) scale(1); }
  #orderToast.ok{ background:linear-gradient(180deg,#16a34a,#15803d); }
  #orderToast.err{ background:linear-gradient(180deg,#ef4444,#b91c1c); }
  
.device-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #f9fafb;
}

.device-row select {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}

.device-row .qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.device-row .qty input {
  width: 40px;
  text-align: center;
  border: none;
  font-size: 14px;
}

.device-row .qty button {
  background: var(--tile);
  color: #fff;
  border: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.device-row .qty button:hover {
  background: var(--accent);
}

.device-row .btn-remove {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}

.device-row .btn-remove:hover {
  background: #dc2626;
}

:root{
  --pad: 20px;
  --card-r: 12px;
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --line: #CBD5E1;
  --line-soft:#E6EDF7;
  --brand:#0ea5e9;
  --brand-2:#22d3ee;
  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#e11d48;
}

*{ box-sizing:border-box; }
img,svg{ max-width:100%; display:block; }

body{
  color:var(--text);
  background:#f8fafc;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  overflow-x:hidden;
}

.eq-small{ font-size:.85em; opacity:.75; }
.muted-note{ font-size:.82em; opacity:.72; }
.muted{ color:var(--muted); }
.compact-label{ font-size:1em; }
.compact-price{ font-size:.95em; opacity:.98; white-space:nowrap; display:inline-block; }

.wrap{ max-width:1380px; margin:0 auto; padding:0 var(--pad); }
.card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--card-r); padding:14px; }



@keyframes rise{
  to{ transform: translateY(-110vh) translateX(var(--drift,0)) scale(var(--scale,1)); }
}

.wizard{
  display:grid;
  grid-template-columns: 1fr 460px;
  gap:28px;
  align-items:start;
  margin-top:-180px;
  position:relative;
  z-index:5;
}
.summary{ position:sticky; top:18px; }
.summary h4{ margin:10px 0 6px; font-size:17px; }
.summary .row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:8px 0; font-size:15.5px;
}
.summary .total{ font-weight:700; }
.hint{ color:#334155; font-size:.92em; }
.hint-row{ margin:-4px 0 6px 0; }

.field{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
label{ font-weight:600; color:#0f172a; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:10px 12px;
  font: inherit;
  outline:none;
}
textarea{ min-height:110px; resize:vertical; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:10px; border: none; cursor:pointer; font-weight:600;
  color:#fff; background:var(--brand);
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 1px 2px rgba(2,6,23,.08);
}
.btn:hover{ filter:brightness(1.03); }
.btn:active{ transform: translateY(1px); }
.btn.secondary{ background:#0ea5e9; }
.btn.ghost{
  background:#fff; color:var(--text);
  border:1px solid var(--line-soft);
}
.wizard-nav{ display:flex; gap:10px; justify-content:space-between; }

.device-list{ width:100%; display:grid; gap:10px; }
.device-row{
  display:grid; grid-template-columns: 1fr auto auto; gap:10px;
  align-items:center;
  padding:10px; border:1px dashed var(--line-soft); border-radius:12px; width:100%;
}
.device-row select{ width:100%; min-width:0; }
.device-row .qty{ display:inline-flex; gap:8px; border:1px solid var(--line-soft); border-radius:12px; padding:6px 10px; }
.device-row .qty button {
  background: var(--brand); 
  color: #fff;                
  border: none;              
  font-weight: bold;
  transition: background 0.2s ease;
}

.device-row .qty button:hover {
  background: var(--brand-2); 
}


.device-row .btn-remove{
  background:#fff; color:var(--text); border:1px solid var(--line-soft);
  border-radius:10px; padding:8px 10px; white-space:nowrap; cursor:pointer;
}

.progress{ border:1px solid var(--line); border-radius:14px; padding:14px; background:#fff; margin-bottom:10px; }
.progress__head{ display:flex; justify-content:space-between; align-items:center; font-size:14px; }
.progress__track{
  position:relative; height:12px; background:#E8EFF8; border-radius:999px; overflow:hidden; margin-top:10px;
}
.progress__bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  position:relative; border-radius:999px; transition:width .35s ease; isolation:isolate;
}
.progress__bar::after{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:.25;
  background-image: linear-gradient(45deg, rgba(255,255,255,.9) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.9) 75%, transparent 75%, transparent);
  background-size:28px 28px;
  animation: prog-stripes 1.2s linear infinite;
  mix-blend-mode: soft-light;
}
@keyframes prog-stripes{
  0%{ background-position:0 0; }
  100%{ background-position:28px 0; }
}

#orderToast{
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%) translateY(-20px);
  z-index: 9999; display:flex; gap:10px; align-items:center;
  background:#ecfeff; color:#0c4a6e; border:1px solid #bae6fd;
  padding:10px 14px; border-radius:12px; box-shadow:0 6px 16px rgba(2,6,23,.12);
  opacity:0; pointer-events:none; transition: all .25s ease;
  min-width: 260px;
}
#orderToast.ok{ background:#f0fdf4; color:#14532d; border-color:#bbf7d0; }
#orderToast.err{ background:#fef2f2; color:#7f1d1d; border-color:#fecaca; }
#orderToast .icon{ display:inline-flex; }
#orderToast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

.wizard h3 i.fa-solid { color: var(--brand); }

.wizard i.fa-gauge-high,
.summary i.fa-gauge-high,
.wizard-nav i.fa-gauge-high,
#orderToast i.fa-gauge-high { color:#16a34a; }     

.wizard i.fa-file-invoice,
.summary i.fa-file-invoice,
.wizard-nav i.fa-file-invoice,
#orderToast i.fa-file-invoice { color:#0ea5e9; }      

.wizard i.fa-screwdriver-wrench,
.summary i.fa-screwdriver-wrench,
.wizard-nav i.fa-screwdriver-wrench,
#orderToast i.fa-screwdriver-wrench { color:#f59e0b; } 

.wizard i.fa-gift,
.summary i.fa-gift,
.wizard-nav i.fa-gift,
#orderToast i.fa-gift { color:#e11d48; }               

.wizard i.fa-wifi,
.summary i.fa-wifi,
.wizard-nav i.fa-wifi,
#orderToast i.fa-wifi { color:#0ea5e9; }

.wizard i.fa-location-dot,
.summary i.fa-location-dot,
.wizard-nav i.fa-location-dot,
#orderToast i.fa-location-dot { color:#f43f5e; }

.wizard i.fa-address-card,
.summary i.fa-address-card,
.wizard-nav i.fa-address-card,
#orderToast i.fa-address-card { color:#6366f1; }

.wizard-nav i.fa-arrow-left,
.wizard-nav i.fa-arrow-right { color:#0ea5e9; }
#orderToast i.fa-check-circle{ color:#16a34a; }
#orderToast i.fa-triangle-exclamation{ color:#e11d48; }
.step button i.fa-paper-plane{ color:#22c55e; }

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }


@media (max-width: 1180px){
  .wizard{ grid-template-columns: 1fr 420px; }
}

@media (max-width: 980px){
  .wrap{ padding:0 12px; }
  .wizard{ display:block; margin-top:0; }
  .summary{ position:static; margin-top:12px; }
  .zone-hero{ padding:60px 0 140px; }
}

@media (max-width: 640px){
  .device-row{ grid-template-columns: 1fr; align-items:stretch; }
  .device-row .qty{ justify-content:space-between; }
  .device-row .btn-remove{ width:100%; }
  .summary .row{ font-size:15px; }
  .compact-price{ font-size:.95em; }
}

@media (max-width: 380px){
  .btn{ width:100%; }
  .wizard-nav{ flex-direction:column; }
}

@media (min-width: 1440px){
  .wrap{ max-width:1480px; }
}

  .summary{display:flex;flex-direction:column;}
  .receipt{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;background:#fff;border:1px dashed #d8d8d8;border-radius:10px;padding:12px;box-shadow:0 1px 0 rgba(0,0,0,.04) inset;}
  .receipt .line{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px;line-height:1.4;margin:2px 0;}
  .receipt .name{flex:0 1 auto;}
  .receipt .dots{flex:1 1 auto;border-bottom:1px dotted #bdbdbd;margin:0 6px;transform:translateY(-2px);}
  .receipt .price{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .receipt .muted-note{opacity:.7;font-size:12px;margin-left:2px;}
  .receipt .sep{border:0;border-top:1px dashed #d6d6d6;margin:8px 0;}
  .receipt .small{font-size:12px;opacity:.85;}

  .summary .pill{font-weight:700;color:#555;}

  #row_total_once strong{font-weight:800;color:#000;}
  #row_connect strong{font-weight:800;color:#000;}
  #row_selected_plan strong{color:#555;font-weight:700;}
  .eq-sale{font-weight:800;color:#000;}
  .eq-small{font-size:.9em;opacity:.85;}

  @media (max-width:640px){.zone-hero{padding-top:8px;padding-bottom:132px}.zone-hero .z-title{margin-top:0}.hero-hack{margin-top:-132px!important}}
  @media (min-width:641px) and (max-width:900px){.zone-hero{padding-bottom:120px}.hero-hack{margin-top:-120px!important}}

  .wizard .wizard-nav{display:flex;gap:10px;align-items:center;}
  .wizard .wizard-nav #btnNext{margin-left:auto;}

  .summary #row_total_once{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:17px !important;font-weight:800;line-height:1.25;
    margin-top:8px;padding:8px 0;border-top:1px dashed #d6d6d6;white-space:nowrap;
  }
  .summary #row_total_once > span,
  .summary #row_total_once > strong{ font-weight:800;color:#000; }
  @media (max-width:640px){ .summary #row_total_once{ font-size:16px !important; } }

  :root{
    --brand:#2b7fff;--brand-hover:#1e6efc;--minus-bg:#e9eef6;--minus-hover:#dce5f2;
    --card-border:#ececec;--soft-border:#e6e6e6;--chip-bg:#f8f8f8;--focus-ring:rgba(43,127,255,.28);
  }
  .device-list{ display:flex; flex-direction:column; gap:8px; }
  .device-list .device-row{
    display:flex; align-items:center; gap:10px;
    padding:6px 8px; background:#fff; border:1px solid var(--card-border); border-radius:10px; flex-wrap:nowrap;
  }
  .device-list .device-row select{ flex:1 1 auto; min-width:0; height:36px; max-width:100%; font-size:14px; }
  .device-list .device-row .qty{
    display:flex; align-items:center; height:36px; border:1px solid var(--soft-border); background:#fff; border-radius:10px; overflow:hidden; flex:0 0 auto;
  }
  .device-list .device-row .qty button{
    width:36px; height:36px; border:0; -webkit-appearance:none; appearance:none; font-size:18px; line-height:1; cursor:pointer;
    transition:background-color .15s ease, box-shadow .15s ease, transform .05s ease;
  }
  .device-list .device-row .qty button:first-child{ background:var(--minus-bg); color:#0f172a; }
  .device-list .device-row .qty button:last-child{  background:var(--brand);    color:#fff; }
  .device-list .device-row .qty button:first-child:hover{ background:var(--minus-hover); }
  .device-list .device-row .qty button:last-child:hover{  background:var(--brand-hover); }
  .device-list .device-row .qty button:active{ transform:translateY(1px); }
  .device-list .device-row .qty input[type="number"]{
    width:50px; height:36px; border:0; padding:0; text-align:center; font-size:14px; font-variant-numeric:tabular-nums; -moz-appearance:textfield;
  }
  .device-list .device-row .qty input[type="number"]::-webkit-outer-spin-button,
  .device-list .device-row .qty input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .device-list .device-row .btn-remove{
    flex:0 0 auto; height:36px; padding:0 10px; font-size:13.5px; white-space:nowrap; border-radius:10px; border:1px solid #e8e8e8; background:var(--chip-bg);
    transition:background-color .15s ease, box-shadow .15s ease;
  }
  @media (max-width:900px){
    .device-list .device-row{ display:grid; grid-template-columns: 1fr auto; gap:10px; }
    .device-list .device-row .btn-remove{ grid-column:1 / -1; justify-self:end; }
  }
  @media (max-width:640px){
    .device-list .device-row select{ height:40px; font-size:15px; }
    .device-list .device-row .qty{ height:40px; }
    .device-list .device-row .qty button{ width:40px; height:40px; }
    .device-list .device-row .qty input[type="number"]{ height:40px; width:56px; font-size:15px; }
    .device-list .device-row .btn-remove{ height:40px; }
  }
  
    i.fa-solid.fa-arrow-right::before { content: '→'; }