
/* ════════════════════════════════════════════
   LANDMARK: SMART OFFERS — PREMIUM FINAL HARD OVERRIDE
   Must stay at the very bottom of wlos.css.
═════════════════════════════════════════════ */

#ai-boss .smart-offers.smart-offers-premium{
  position:relative !important;
  overflow:hidden !important;
  margin-top:34px !important;
  padding:34px !important;
  border-radius:34px !important;
  background:
    radial-gradient(circle at 92% 0%,rgba(155,123,255,.22),transparent 36%),
    radial-gradient(circle at 8% 100%,rgba(240,78,35,.14),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.082),rgba(255,255,255,.032)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
  color:#fff !important;
}

#ai-boss .smart-offers-premium::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.032) 1px,transparent 1px) !important;
  background-size:38px 38px !important;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.62),transparent 88%) !important;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.62),transparent 88%) !important;
  pointer-events:none !important;
}

#ai-boss .smart-offers-orb{
  position:absolute !important;
  right:-90px !important;
  top:-90px !important;
  width:280px !important;
  height:280px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(155,123,255,.30),transparent 68%) !important;
  pointer-events:none !important;
}

#ai-boss .so-premium-head{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:24px !important;
  margin-bottom:24px !important;
}

#ai-boss .so-eyebrow{
  display:inline-flex !important;
  margin-bottom:12px !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  background:rgba(155,123,255,.15) !important;
  border:1px solid rgba(155,123,255,.28) !important;
  color:#c9bcff !important;
  font-family:var(--mono) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

#ai-boss .so-premium-head h4{
  margin:0 0 10px !important;
  color:#fff !important;
  font-family:var(--head) !important;
  font-size:clamp(32px,3.2vw,48px) !important;
  line-height:.96 !important;
  font-weight:950 !important;
  letter-spacing:-.03em !important;
}

#ai-boss .so-premium-head p{
  max-width:720px !important;
  color:rgba(255,255,255,.64) !important;
  font-size:15.5px !important;
  line-height:1.7 !important;
  font-weight:600 !important;
}

#ai-boss .so-premium-badge{
  width:118px !important;
  min-height:118px !important;
  flex:0 0 118px !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  padding:14px !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.18),transparent 48%),
    rgba(255,255,255,.065) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:
    0 20px 44px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

#ai-boss .so-premium-badge strong{
  display:block !important;
  font-family:var(--head) !important;
  font-size:52px !important;
  line-height:.8 !important;
  font-weight:950 !important;
  letter-spacing:-.045em !important;
  color:#9B7BFF !important;
}

#ai-boss .so-premium-badge span{
  display:block !important;
  margin-top:7px !important;
  color:rgba(255,255,255,.66) !important;
  font-size:11px !important;
  line-height:1.18 !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
}

#ai-boss .so-premium-grid{
  position:relative !important;
  z-index:1 !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:13px !important;
}

#ai-boss .so-premium-card{
  position:relative !important;
  overflow:hidden !important;
  min-height:148px !important;
  padding:17px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.11),transparent 38%),
    rgba(255,255,255,.058) !important;
  border:1px solid rgba(255,255,255,.105) !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.075) !important;
  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
}

#ai-boss .so-premium-card::after{
  content:"" !important;
  position:absolute !important;
  inset:auto -40px -60px auto !important;
  width:120px !important;
  height:120px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(155,123,255,.16),transparent 70%) !important;
  opacity:.8 !important;
  pointer-events:none !important;
}

#ai-boss .so-premium-card:hover{
  transform:translateY(-5px) !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(155,123,255,.20),transparent 42%),
    rgba(255,255,255,.082) !important;
  border-color:rgba(155,123,255,.34) !important;
  box-shadow:
    0 24px 54px rgba(0,0,0,.26),
    0 0 36px rgba(107,70,255,.12),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

#ai-boss .so-premium-icon{
  width:40px !important;
  height:40px !important;
  display:grid !important;
  place-items:center !important;
  margin-bottom:15px !important;
  border-radius:16px !important;
  background:rgba(155,123,255,.13) !important;
  border:1px solid rgba(155,123,255,.25) !important;
  font-size:18px !important;
  box-shadow:0 12px 26px rgba(107,70,255,.10) !important;
}

#ai-boss .so-premium-card strong{
  display:block !important;
  margin-bottom:7px !important;
  color:rgba(255,255,255,.94) !important;
  font-family:var(--head) !important;
  font-size:18px !important;
  line-height:1.08 !important;
  font-weight:950 !important;
  letter-spacing:-.014em !important;
}

#ai-boss .so-premium-card span{
  display:block !important;
  color:#c4b5ff !important;
  font-size:13px !important;
  line-height:1.42 !important;
  font-weight:850 !important;
}

#ai-boss .so-premium-footer{
  position:relative !important;
  z-index:1 !important;
  margin-top:18px !important;
  padding:16px 18px !important;
  border-radius:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  text-align:center !important;
  background:rgba(255,255,255,.052) !important;
  border:1px solid rgba(255,255,255,.095) !important;
}

#ai-boss .so-premium-footer span{
  color:rgba(255,255,255,.80) !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
}

#ai-boss .so-premium-footer b{
  color:#9B7BFF !important;
  font-weight:950 !important;
}

@media(max-width:1080px){
  #ai-boss .so-premium-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:680px){
  #ai-boss .smart-offers.smart-offers-premium{
    padding:22px !important;
    border-radius:28px !important;
  }

  #ai-boss .so-premium-head{
    flex-direction:column !important;
  }

  #ai-boss .so-premium-badge{
    width:100% !important;
    min-height:auto !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    text-align:left !important;
    border-radius:22px !important;
  }

  #ai-boss .so-premium-badge strong{
    font-size:42px !important;
  }

  #ai-boss .so-premium-badge span{
    max-width:120px !important;
    margin-top:0 !important;
    text-align:right !important;
  }

  #ai-boss .so-premium-grid{
    grid-template-columns:1fr !important;
  }

  #ai-boss .so-premium-card{
    min-height:auto !important;
  }

  #ai-boss .so-premium-footer{
    justify-content:flex-start !important;
    text-align:left !important;
  }
}

/* ════════════════════════════════════════════
   SMART OFFERS — PREMIUM DATABASE LOGIC SECTION
═════════════════════════════════════════════ */

.smart-offers.smart-offers-premium{
  position:relative;
  overflow:hidden;
  margin-top:28px;
  padding:30px;
  border-radius:32px;
  background:
    radial-gradient(circle at 92% 0%,rgba(107,70,255,.18),transparent 34%),
    radial-gradient(circle at 8% 100%,rgba(240,78,35,.12),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 26px 80px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.smart-offers-premium::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.62),transparent 88%);
  pointer-events:none;
}

.smart-offers-orb{
  position:absolute;
  right:-90px;
  top:-90px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(107,70,255,.24),transparent 68%);
  pointer-events:none;
}

.so-premium-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  margin-bottom:22px;
}

.so-eyebrow{
  display:inline-flex;
  margin-bottom:10px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(107,70,255,.14);
  border:1px solid rgba(107,70,255,.26);
  color:#b9a8ff;
  font-family:var(--mono);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.so-premium-head h4{
  margin:0 0 8px;
  color:#fff;
  font-family:var(--head);
  font-size:clamp(30px,3vw,44px);
  line-height:1;
  font-weight:950;
  letter-spacing:-.025em;
}

.so-premium-head p{
  max-width:720px;
  color:rgba(255,255,255,.58);
  font-size:15px;
  line-height:1.68;
  font-weight:600;
}

.so-premium-badge{
  width:112px;
  min-height:112px;
  flex:0 0 112px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:14px;
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.16),transparent 48%),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 40px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.so-premium-badge strong{
  display:block;
  font-family:var(--head);
  font-size:48px;
  line-height:.82;
  font-weight:950;
  letter-spacing:-.04em;
  color:#9B7BFF;
}

.so-premium-badge span{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.58);
  font-size:11px;
  line-height:1.18;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.so-premium-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.so-premium-card{
  position:relative;
  overflow:hidden;
  min-height:138px;
  padding:16px;
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.10),transparent 38%),
    rgba(255,255,255,.052);
  border:1px solid rgba(255,255,255,.095);
  box-shadow:
    0 14px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.07);
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.so-premium-card:hover{
  transform:translateY(-4px);
  background:
    radial-gradient(circle at 100% 0%,rgba(107,70,255,.18),transparent 42%),
    rgba(255,255,255,.075);
  border-color:rgba(155,123,255,.30);
  box-shadow:
    0 22px 48px rgba(0,0,0,.23),
    0 0 34px rgba(107,70,255,.10),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.so-premium-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border-radius:15px;
  background:rgba(107,70,255,.12);
  border:1px solid rgba(107,70,255,.22);
  font-size:18px;
  box-shadow:0 10px 24px rgba(107,70,255,.08);
}

.so-premium-card strong{
  display:block;
  margin-bottom:6px;
  color:rgba(255,255,255,.90);
  font-family:var(--head);
  font-size:18px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.012em;
}

.so-premium-card span{
  display:block;
  color:#b9a8ff;
  font-size:13px;
  line-height:1.42;
  font-weight:800;
}

.so-premium-footer{
  position:relative;
  z-index:1;
  margin-top:16px;
  padding:15px 16px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.085);
}

.so-premium-footer span{
  color:rgba(255,255,255,.76);
  font-size:13px;
  line-height:1.2;
  font-weight:850;
}

.so-premium-footer b{
  color:#9B7BFF;
  font-weight:950;
}

@media(max-width:1080px){
  .so-premium-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:680px){
  .smart-offers.smart-offers-premium{
    padding:22px;
    border-radius:28px;
  }

  .so-premium-head{
    flex-direction:column;
  }

  .so-premium-badge{
    width:100%;
    min-height:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:left;
    border-radius:22px;
  }

  .so-premium-badge strong{
    font-size:42px;
  }

  .so-premium-badge span{
    max-width:120px;
    margin-top:0;
    text-align:right;
  }

  .so-premium-grid{
    grid-template-columns:1fr;
  }

  .so-premium-card{
    min-height:auto;
  }

  .so-premium-footer{
    justify-content:flex-start;
    text-align:left;
  }
}

/* ════════════════════════════════════════════
   WLOS FULL SYSTEM — FINAL DIRECT ACCENT
   Works only after adding .wlos-full-accent-plan to first card.
═════════════════════════════════════════════ */

#pricing .wlos-full-accent-plan h3{
  color:#F04E23 !important;
  background:none !important;
  -webkit-text-fill-color:#F04E23 !important;
  text-shadow:0 14px 34px rgba(240,78,35,.12) !important;
}

#pricing .wlos-full-accent-plan .plan-for{
  color:#56607F !important;
  font-weight:700 !important;
}

#pricing .wlos-full-accent-plan .plan-for strong{
  color:#F04E23 !important;
  font-weight:950 !important;
}

#pricing .wlos-full-accent-plan .plan-price{
  color:#F04E23 !important;
  background:none !important;
  -webkit-text-fill-color:#F04E23 !important;
  text-shadow:0 18px 44px rgba(240,78,35,.16) !important;
}

#pricing .wlos-full-accent-plan .plan-period{
  color:rgba(240,78,35,.78) !important;
  font-weight:950 !important;
  letter-spacing:.08em !important;
}
/* ════════════════════════════════════════════
   WLOS FULL SYSTEM — PREMIUM EMBER TEXT ACCENT
═════════════════════════════════════════════ */

#pricing .plan.featured h3{
  background:linear-gradient(135deg,#111827 0%,#F04E23 72%,#FF7A52 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}

#pricing .plan.featured .plan-for{
  color:#4F5875 !important;
  font-weight:650 !important;
}

#pricing .plan.featured .plan-for strong{
  color:#F04E23 !important;
  font-weight:900 !important;
}

#pricing .plan.featured .plan-price{
  background:linear-gradient(135deg,#0C0F1E 0%,#F04E23 58%,#FF8A63 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
  text-shadow:0 18px 44px rgba(240,78,35,.10) !important;
}

#pricing .plan.featured .plan-period{
  color:rgba(240,78,35,.72) !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
}
/* ════════════════════════════════════════════
   WLOS PRICING V3 — FINAL CLEAN OFFER CARDS
   Required for new pricing HTML structure.
═════════════════════════════════════════════ */

.wlos-pricing-v3{
  background:
    radial-gradient(circle at 18% 12%,rgba(240,78,35,.08),transparent 34%),
    radial-gradient(circle at 88% 20%,rgba(107,70,255,.08),transparent 34%),
    linear-gradient(180deg,#F5F6FA 0%,#ECEEF6 100%);
  padding:clamp(70px,8vw,110px) 0;
  overflow:hidden;
}

.wlos-pricing-v3 .wrap{
  width:min(1180px,calc(100% - 40px));
  max-width:1180px;
  margin-inline:auto;
}

.wlos-pricing-v3-head{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}

.wlos-pricing-v3-head .s-label{
  margin-left:auto;
  margin-right:auto;
}

.wlos-pricing-v3-head h2{
  max-width:980px;
  margin:0 auto 16px;
  font-family:var(--head);
  font-size:clamp(38px,5vw,72px);
  line-height:1.04;
  letter-spacing:-0.02em;
  font-weight:950;
  color:var(--ink);
}

.wlos-pricing-v3-head h2 span{
  display:block;
  max-width:860px;
  margin:12px auto 0;
  font-family:var(--font);
  font-size:clamp(20px,2.4vw,31px);
  line-height:1.22;
  letter-spacing:-0.006em;
  font-weight:750;
  color:var(--muted);
}

.wlos-pricing-v3-head .lead{
  max-width:780px;
  margin:18px auto 0;
  text-align:center;
  color:var(--muted);
}

.wlos-offer-board{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  margin:54px auto 0;
  width:100%;
  align-items:stretch;
}

.wlos-offer-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:36px;
  border-radius:34px;
  background:
    radial-gradient(circle at 90% 0%,rgba(240,78,35,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.82));
  border:1.5px solid rgba(205,209,232,.90);
  box-shadow:
    0 24px 68px rgba(12,15,30,.10),
    inset 0 1px 0 rgba(255,255,255,.92);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.wlos-offer-card:hover{
  transform:translateY(-4px);
}

.wlos-offer-card-main{
  border-color:rgba(240,78,35,.38);
  box-shadow:
    0 26px 72px rgba(240,78,35,.12),
    0 0 0 4px rgba(240,78,35,.055),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.wlos-offer-card-partner{
  border-color:rgba(107,70,255,.32);
  background:
    radial-gradient(circle at 90% 0%,rgba(107,70,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.82));
  box-shadow:
    0 26px 72px rgba(107,70,255,.12),
    0 0 0 4px rgba(107,70,255,.045),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.wlos-offer-top{
  margin-bottom:28px;
}

.wlos-offer-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  margin-bottom:20px;
  padding:8px 13px;
  border-radius:999px;
  background:var(--e3);
  border:1px solid var(--e4);
  color:var(--e);
  font-family:var(--mono);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.wlos-offer-badge.purple{
  background:var(--ai3);
  border-color:var(--ai4);
  color:var(--ai2);
}

.wlos-offer-card h3{
  max-width:11ch;
  margin:0 0 15px;
  font-family:var(--head);
  font-size:clamp(38px,3.4vw,54px);
  line-height:.96;
  font-weight:950;
  letter-spacing:-0.028em;
  color:var(--ink);
}

.wlos-offer-top p{
  max-width:54ch;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.7;
  font-weight:650;
}

.wlos-offer-price-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
}

.wlos-offer-price-row strong{
  display:block;
  font-family:var(--head);
  font-size:clamp(74px,6vw,102px);
  line-height:.78;
  letter-spacing:-0.035em;
  font-weight:950;
  color:var(--ink);
}

.wlos-offer-price-row span{
  display:block;
  margin-top:11px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--dim);
}

.wlos-offer-zero{
  width:98px;
  height:98px;
  flex:0 0 98px;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:28px;
  background:rgba(240,78,35,.08);
  border:1px solid rgba(240,78,35,.18);
}

.wlos-offer-zero b{
  display:block;
  font-family:var(--head);
  font-size:34px;
  line-height:.9;
  font-weight:950;
  color:var(--e);
}

.wlos-offer-zero small{
  display:block;
  max-width:76px;
  margin:5px auto 0;
  font-size:10px;
  line-height:1.15;
  font-weight:900;
  color:var(--e);
  text-transform:uppercase;
}

.wlos-offer-zero.purple{
  background:rgba(107,70,255,.08);
  border-color:rgba(107,70,255,.18);
}

.wlos-offer-zero.purple b,
.wlos-offer-zero.purple small{
  color:var(--ai);
}

.wlos-offer-note{
  margin-bottom:24px;
  padding:18px 19px;
  border-radius:22px;
  background:rgba(240,78,35,.08);
  border:1px solid rgba(240,78,35,.18);
  color:var(--ink2);
  font-size:14.5px;
  line-height:1.58;
  font-weight:650;
}

.wlos-offer-note.purple{
  background:rgba(107,70,255,.08);
  border-color:rgba(107,70,255,.18);
}

.wlos-offer-note strong{
  display:block;
  margin-bottom:5px;
  color:var(--ink);
  font-family:var(--head);
  font-size:18px;
  line-height:1.18;
  font-weight:950;
  letter-spacing:-0.01em;
}

.wlos-offer-includes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:24px;
}

.wlos-offer-includes div{
  position:relative;
  min-height:116px;
  padding:16px 15px 16px 43px;
  border-radius:20px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(205,209,232,.68);
  box-shadow:0 10px 24px rgba(12,15,30,.045);
}

.wlos-offer-includes div::before{
  content:"✓";
  position:absolute;
  left:15px;
  top:17px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(16,185,129,.12);
  color:#10B981;
  font-size:11px;
  font-weight:950;
  line-height:1;
}

.wlos-offer-card-partner .wlos-offer-includes div{
  border-color:rgba(107,70,255,.16);
}

.wlos-offer-card-partner .wlos-offer-includes div::before{
  background:rgba(107,70,255,.11);
  color:var(--ai);
}

.wlos-offer-includes strong{
  display:block;
  margin-bottom:7px;
  color:var(--ink);
  font-family:var(--head);
  font-size:17px;
  line-height:1.12;
  font-weight:950;
  letter-spacing:-0.012em;
}

.wlos-offer-includes span{
  display:block;
  color:var(--muted);
  font-size:13.2px;
  line-height:1.48;
  font-weight:650;
}

.wlos-offer-extra{
  margin-top:auto;
  margin-bottom:22px;
  padding:16px 18px;
  border-radius:20px;
  background:rgba(12,15,30,.045);
  border:1px solid rgba(205,209,232,.72);
  color:var(--ink2);
  font-size:14px;
  line-height:1.55;
  font-weight:750;
}

.wlos-offer-card .btn{
  width:100%;
  min-height:56px;
  font-size:15.5px;
}

@media(max-width:1080px){
  .wlos-offer-board{
    width:min(760px,100%);
    grid-template-columns:1fr;
  }

  .wlos-offer-card h3{
    max-width:none;
  }

  .wlos-offer-top p{
    max-width:60ch;
  }
}

@media(max-width:680px){
  .wlos-pricing-v3 .wrap{
    width:min(100% - 32px,1180px);
  }

  .wlos-pricing-v3{
    padding:56px 0;
  }

  .wlos-pricing-v3-head{
    text-align:left;
  }

  .wlos-pricing-v3-head .s-label{
    margin-left:0;
    margin-right:0;
  }

  .wlos-pricing-v3-head h2{
    font-size:clamp(34px,11vw,46px);
  }

  .wlos-pricing-v3-head h2 span{
    margin-left:0;
    margin-right:0;
    font-size:18px;
  }

  .wlos-pricing-v3-head .lead{
    text-align:left;
  }

  .wlos-offer-board{
    width:100%;
    margin-top:36px;
    gap:22px;
  }

  .wlos-offer-card{
    padding:24px;
    border-radius:28px;
  }

  .wlos-offer-card h3{
    font-size:clamp(34px,11vw,44px);
  }

  .wlos-offer-price-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .wlos-offer-price-row strong{
    font-size:clamp(64px,18vw,84px);
  }

  .wlos-offer-zero{
    width:100%;
    height:auto;
    min-height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    border-radius:22px;
  }

  .wlos-offer-zero small{
    max-width:none;
    margin:0;
  }

  .wlos-offer-includes{
    grid-template-columns:1fr;
  }

  .wlos-offer-includes div{
    min-height:auto;
  }
}
/* ════════════════════════════════════════════
   WLOS — MASTER CSS CLEAN FINAL
   Fixed, deduplicated, production-ready.
════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   1. DESIGN TOKENS
════════════════════════════════════════════ */

:root{
  --bg:#F5F6FA;
  --bg2:#FFFFFF;
  --bg3:#ECEEF6;
  --bg4:#E6E8F2;

  --dark:#0C0F1E;
  --dark2:#111527;
  --dark3:#161B30;

  --ink:#0C0F1E;
  --ink2:#2D3354;
  --muted:#626884;
  --dim:#9299B8;
  --dimmer:#BEC3D8;

  --line:#E2E5F0;
  --line2:#CDD1E8;
  --lineDark:rgba(255,255,255,.08);

  --e:#F04E23;
  --e2:#FF6B42;
  --e3:rgba(240,78,35,.08);
  --e4:rgba(240,78,35,.16);
  --eGrad:linear-gradient(135deg,#F04E23 0%,#FF7A52 100%);
  --eGlow:0 4px 20px rgba(240,78,35,.28);

  --t:#09B8A6;
  --t2:rgba(9,184,166,.12);
  --t3:rgba(9,184,166,.22);

  --ai:#6B46FF;
  --ai2:#9B7BFF;
  --ai3:rgba(107,70,255,.08);
  --ai4:rgba(107,70,255,.18);
  --aiGrad:linear-gradient(135deg,#6B46FF 0%,#9B7BFF 100%);
  --aiGlow:0 4px 20px rgba(107,70,255,.28);

  --g:#10B981;
  --g2:rgba(16,185,129,.10);
  --g3:rgba(16,185,129,.22);

  --gold:#F59E0B;
  --gold2:rgba(245,158,11,.10);

  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --head:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --wrap:1180px;
  --gap:clamp(56px,7vw,96px);

  --r:10px;
  --rl:16px;
  --rxl:22px;
  --rxxl:30px;

  --sh1:0 1px 3px rgba(12,15,30,.06),0 4px 12px rgba(12,15,30,.06);
  --sh2:0 2px 8px rgba(12,15,30,.07),0 12px 32px rgba(12,15,30,.08);
  --sh3:0 4px 16px rgba(12,15,30,.08),0 24px 56px rgba(12,15,30,.10);
}

/* ════════════════════════════════════════════
   2. RESET / BASE
════════════════════════════════════════════ */

*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font);
  font-size:16px;


  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:none;
}

.wrap{
  width:min(var(--wrap),calc(100% - 40px));
  margin-inline:auto;
}

.section{
  padding:var(--gap) 0;
}

/* ════════════════════════════════════════════
   3. TYPOGRAPHY
════════════════════════════════════════════ */

h1,h2,h3,h4{
  font-family:var(--head);
  color:var(--ink);
}

h1{
  font-weight:800;
  font-size:clamp(38px,5.4vw,72px);
  line-height:1.04;
  letter-spacing:-.015em;
}

h2{
  font-weight:800;
  font-size:clamp(30px,4.2vw,56px);
  line-height:1.06;
  letter-spacing:-.012em;
}

h3{
  font-weight:800;
  font-size:clamp(20px,2.1vw,30px);
  line-height:1.12;
  letter-spacing:-.006em;
}

h4{
  font-weight:800;
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.18;
  letter-spacing:0;
}

.lead{
  font-size:clamp(15px,1.5vw,18px);
  color:var(--muted);
  line-height:1.72;
  font-weight:400;
}

.grad-ember{
  background:var(--eGrad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.grad-ai{
  background:var(--aiGrad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.s-label{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--e);
  margin-bottom:14px;
}

.s-label::before{
  content:'';
  width:18px;
  height:2px;
  background:var(--e);
  border-radius:2px;
}

.s-label.ai{
  color:var(--ai);
}

.s-label.ai::before{
  background:var(--ai);
}

/* ════════════════════════════════════════════
   4. BUTTONS
════════════════════════════════════════════ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 22px;
  border-radius:999px;
  font-family:var(--font);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:all .18s ease;
  white-space:nowrap;
  border:none;
  letter-spacing:-.005em;
}

.btn-lg{
  padding:14px 30px;
  font-size:15px;
}

.btn-sm{
  padding:8px 16px;
  font-size:13px;
}

.btn-ember{
  background:var(--eGrad);
  color:#fff;
  box-shadow:var(--eGlow);
}

.btn-ember:hover{
  box-shadow:0 6px 28px rgba(240,78,35,.40);
  transform:translateY(-1px);
}

.btn-ai{
  background:var(--aiGrad);
  color:#fff;
  box-shadow:var(--aiGlow);
}

.btn-ai:hover{
  box-shadow:0 6px 28px rgba(107,70,255,.40);
  transform:translateY(-1px);
}

.btn-ghost{
  background:var(--bg2);
  color:var(--ink2);
  border:1.5px solid var(--line2);
  box-shadow:var(--sh1);
}

.btn-ghost:hover{
  border-color:var(--e);
  color:var(--e);
  background:var(--e3);
}

.btn-ghost-dark{
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.84);
  border:1.5px solid rgba(255,255,255,.14);
}

.btn-ghost-dark:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.26);
  color:#fff;
}

/* ════════════════════════════════════════════
   5. ANIMATIONS
════════════════════════════════════════════ */

.rv{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .65s cubic-bezier(.2,.8,.3,1),
    transform .65s cubic-bezier(.2,.8,.3,1);
}

.rv.on{
  opacity:1;
  transform:translateY(0);
}

.rv.d1{transition-delay:.08s}
.rv.d2{transition-delay:.16s}
.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}
.rv.d5{transition-delay:.40s}

/* ════════════════════════════════════════════
   6. NAVIGATION
════════════════════════════════════════════ */

.nav-wrap{
  position:sticky;
  top:0;
  z-index:200;
  background:rgba(245,246,250,.94);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s;
}

.nav-wrap.scrolled{
  box-shadow:var(--sh2);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:66px;
  gap:12px;
}

.nav-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--head);
  font-size:21px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.006em;
  white-space:nowrap;
  flex:0 0 auto;
}

.logo-mark{
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--eGrad);
  display:grid;
  place-items:center;
  font-family:var(--head);
  font-size:14px;
  font-weight:800;
  color:#fff;
  box-shadow:var(--eGlow);
  flex:0 0 auto;
}

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

.nav-links a{
  padding:7px 12px;
  border-radius:var(--r);
  font-size:13.5px;
  font-weight:650;
  color:var(--muted);
  transition:all .15s;
  white-space:nowrap;
}

.nav-links a:hover{
  color:var(--ink);
  background:var(--bg3);
}

.nav-links a.hi{
  color:var(--ai);
  font-weight:800;
}

.nav-links a.hi:hover{
  background:var(--ai3);
}

.nav-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.hamburger{
  display:none;
  width:40px;
  height:40px;
  border-radius:var(--r);
  border:1.5px solid var(--line2);
  background:var(--bg2);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.hamburger span{
  width:18px;
  height:2px;
  border-radius:2px;
  background:var(--ink2);
  transition:all .18s;
  display:block;
}

.nav-drawer{
  display:none;
  position:fixed;
  inset:0;
  z-index:300;
}

.nav-drawer.open{
  display:flex;
}

.nav-drawer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,15,30,.5);
}

.nav-drawer-panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(320px,calc(100% - 48px));
  background:var(--bg2);
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
}

.nav-drawer-close{
  align-self:flex-end;
  width:36px;
  height:36px;
  border-radius:var(--r);
  background:var(--bg3);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-size:18px;
  color:var(--muted);
  cursor:pointer;
  margin-bottom:12px;
}

.nav-drawer-link{
  padding:12px 14px;
  border-radius:var(--rl);
  font-size:14px;
  font-weight:650;
  color:var(--ink2);
  border:1px solid transparent;
  transition:all .15s;
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-drawer-link:hover{
  background:var(--bg3);
  border-color:var(--line);
}

.nav-drawer-link .dl-icon{
  width:32px;
  height:32px;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-size:15px;
  background:var(--bg3);
  border:1px solid var(--line);
  flex:0 0 auto;
}

.nav-drawer-sep{
  height:1px;
  background:var(--line);
  margin:8px 0;
}

/* ════════════════════════════════════════════
   7. HERO
════════════════════════════════════════════ */

.wlos-final-hero{
  background:#fffaf3;
  padding:72px 18px 56px;
  overflow:hidden;
}

.wlos-hero-custom{
  max-width:1120px;
  margin:0 auto;
  text-align:center;
}

.wlos-hero-kicker{
  font-family:var(--head);
  font-size:24px;
  font-weight:850;
  color:#ff6a00;
  margin-bottom:22px;
  letter-spacing:-.002em;
}

.wlos-hero-title{
  font-family:var(--head);
  font-size:clamp(44px,7vw,76px);
  line-height:.98;
  font-weight:900;
  color:#050505;
  letter-spacing:-.012em;
  margin:0 auto 28px;
}

.wlos-hero-title span{
  color:#ff5a00;
}

.wlos-hero-phones{
  position:relative;
  max-width:980px;
  margin:0 auto 34px;
}

.wlos-hero-phones img{
  width:100%;
  height:auto;
  display:block;
  position:relative;
  z-index:2;
}

.wlos-hero-shadow{
  position:absolute;
  left:12%;
  right:12%;
  bottom:8px;
  height:38px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.24), transparent 68%);
  filter:blur(12px);
  z-index:1;
}

.wlos-hero-text{
  max-width:760px;
  margin:26px auto 0;
  font-size:clamp(19px, 4.6vw, 30px);
  line-height:1.38;
  font-weight:650;
  color:#1f2933;
  letter-spacing:-0.008em;
}

.wlos-hero-text strong{
  font-weight:950;
  color:#ff5a2f;
}

.wlos-benefits-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  max-width:720px;
  margin:24px auto 0;
}

.wlos-benefit-card{
  padding:18px 14px;
  border-radius:22px;
  background:rgba(255,255,255,.78);
  box-shadow:0 16px 36px rgba(15,23,42,.08);
  text-align:center;
}

.wlos-benefit-card strong{
  display:block;
  font-size:17px;
  font-weight:950;
  color:#111827;
  letter-spacing:-0.004em;
}

.wlos-benefit-card span{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.35;
  font-weight:650;
  color:#4b5563;
}

/* ════════════════════════════════════════════
   8. HERO OBJECT MARQUEE — HIT SYSTEM STRIP
════════════════════════════════════════════ */

.wlos-object-strip{
  position:relative;
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 0%,rgba(240,78,35,.10),transparent 32%),
    radial-gradient(circle at 82% 40%,rgba(107,70,255,.08),transparent 30%),
    linear-gradient(180deg,#FFF9F1 0%,#FFFFFF 100%);
  border-top:1px solid rgba(240,78,35,.10);
  border-bottom:1px solid rgba(12,15,30,.08);
  padding:20px 0 22px;
}

.wlos-object-strip::before,
.wlos-object-strip::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:120px;
  z-index:5;
  pointer-events:none;
}

.wlos-object-strip::before{
  left:0;
  background:linear-gradient(90deg,#fff9f1 0%,rgba(255,249,241,0) 100%);
}

.wlos-object-strip::after{
  right:0;
  background:linear-gradient(270deg,#ffffff 0%,rgba(255,255,255,0) 100%);
}

.wlos-object-strip-head{
  width:min(var(--wrap),calc(100% - 40px));
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.wlos-object-strip-label{
  font-family:var(--head);
  font-size:clamp(23px,2.6vw,36px);
  line-height:1;
  font-weight:950;
  letter-spacing:-.01em;
  color:#101426;
}

.wlos-object-strip-label span{
  color:var(--e);
}

.wlos-object-strip-note{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(45,51,84,.52);
  white-space:nowrap;
}

.wlos-object-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
}

.wlos-object-track{
  display:flex;
  align-items:center;
  gap:28px;
  width:max-content;
  animation:wlosObjectStripMove 30s linear infinite;
  will-change:transform;
}

.wlos-object-marquee:hover .wlos-object-track{
  animation-play-state:paused;
}

.wlos-object-item{
  flex:0 0 auto;
  width:156px;
  min-height:148px;
  padding:14px 12px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  border-radius:26px;
  background:
    radial-gradient(circle at 35% 16%,rgba(255,255,255,.92),rgba(255,255,255,.48) 46%,rgba(240,78,35,.08) 100%),
    rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:
    0 16px 34px rgba(12,15,30,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transform:translateZ(0);
}

.wlos-object-item img{
  width:94px;
  height:94px;
  max-width:94px;
  max-height:94px;
  object-fit:contain;
  display:block;
  filter:
    drop-shadow(0 12px 16px rgba(0,0,0,.14))
    saturate(1.08);
}

.wlos-object-item span{
  display:block;
  max-width:130px;
  font-family:var(--head);
  font-size:16px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.006em;
  color:#111827;
}

@keyframes wlosObjectStripMove{
  0%{
    transform:translateX(0);
  }

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

/* ════════════════════════════════════════════
   9. REVENUE ENGINE
════════════════════════════════════════════ */

.wlos-revenue-engine{
  position:relative;
  padding:clamp(58px,7vw,96px) 0;
  background:
    radial-gradient(circle at 18% 18%,rgba(240,78,35,.12),transparent 34%),
    radial-gradient(circle at 88% 80%,rgba(107,70,255,.11),transparent 34%),
    linear-gradient(180deg,#101426 0%,#0C0F1E 100%);
  overflow:hidden;
}

.wlos-revenue-engine::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:46px 46px;
  pointer-events:none;
  opacity:.55;
}

.wlos-revenue-engine .wrap{
  position:relative;
  z-index:1;
}

.wlos-revenue-head{
  max-width:860px;
  margin:0 auto clamp(34px,5vw,54px);
  text-align:center;
}

.wlos-revenue-head h2{
  color:#fff;
  font-size:clamp(32px,5vw,60px);
  line-height:1.04;
  letter-spacing:-.01em;
  margin-bottom:18px;
}

.wlos-revenue-head h2 span{
  display:block;
  margin-top:6px;
  background:var(--eGrad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.wlos-revenue-head p{
  max-width:740px;
  margin:0 auto;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.72;
  color:rgba(255,255,255,.58);
}

.wlos-revenue-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr 1fr;
  gap:14px;
}

.wlos-revenue-card{
  position:relative;
  min-height:250px;
  padding:26px;
  border-radius:28px;
  background:
    radial-gradient(circle at 80% 16%,rgba(255,255,255,.08),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 20px 52px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.wlos-revenue-card:hover{
  transform:translateY(-5px);
  border-color:rgba(240,78,35,.34);
  box-shadow:
    0 28px 72px rgba(0,0,0,.28),
    0 0 48px rgba(240,78,35,.12),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.wlos-revenue-card-main{
  background:
    radial-gradient(circle at 82% 16%,rgba(240,78,35,.26),transparent 38%),
    radial-gradient(circle at 12% 92%,rgba(107,70,255,.14),transparent 42%),
    linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  border-color:rgba(255,122,82,.36);
}

.wlos-revenue-card::after{
  content:'';
  position:absolute;
  right:-62px;
  bottom:-62px;
  width:190px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,78,35,.18),transparent 66%);
  pointer-events:none;
}

.wlos-revenue-value{
  font-family:var(--head);
  font-size:clamp(42px,5vw,72px);
  line-height:.9;
  font-weight:900;
  letter-spacing:-.018em;
  color:#FF7A52;
  margin-bottom:22px;
}

.wlos-revenue-card-main .wlos-revenue-value{
  font-size:clamp(48px,6vw,86px);
  background:var(--eGrad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.wlos-revenue-card h3{
  position:relative;
  z-index:1;
  color:#fff;
  font-size:clamp(19px,2vw,25px);
  line-height:1.1;
  letter-spacing:-.004em;
  margin-bottom:14px;
}

.wlos-revenue-card p{
  position:relative;
  z-index:1;
  font-size:14px;
  line-height:1.68;
  color:rgba(255,255,255,.60);
}

.wlos-revenue-flow{
  margin-top:18px;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.wlos-revenue-flow span{
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.78);
}

.wlos-revenue-flow b{
  color:#FF7A52;
  font-weight:900;
}

.wlos-revenue-punch{
  margin-top:16px;
  padding:20px 24px;
  border-radius:26px;
  background:
    linear-gradient(135deg,rgba(240,78,35,.14),rgba(107,70,255,.10));
  border:1px solid rgba(255,122,82,.22);
  text-align:center;
}

.wlos-revenue-punch strong{
  display:block;
  color:#fff;
  font-family:var(--head);
  font-size:clamp(20px,2.4vw,30px);
  line-height:1.1;
  letter-spacing:-.004em;
  margin-bottom:8px;
}

.wlos-revenue-punch span{
  display:block;
  max-width:820px;
  margin:0 auto;
  font-size:14.5px;
  line-height:1.65;
  color:rgba(255,255,255,.68);
}

/* ════════════════════════════════════════════
   10. HOW FLOW
════════════════════════════════════════════ */

.wlos-how-flow{
  position:relative;
  padding:clamp(64px,8vw,112px) 0;
  background:
    radial-gradient(circle at 16% 18%,rgba(240,78,35,.10),transparent 34%),
    radial-gradient(circle at 86% 78%,rgba(107,70,255,.10),transparent 34%),
    linear-gradient(180deg,#FFFFFF 0%,#F3F5FB 100%);
  overflow:hidden;
}

.wlos-how-flow::before{
  content:'';
  position:absolute;
  left:50%;
  top:22%;
  width:760px;
  height:760px;
  border-radius:50%;
  transform:translateX(-50%);
  background:
    radial-gradient(circle,rgba(240,78,35,.07),transparent 62%),
    radial-gradient(circle at 72% 32%,rgba(107,70,255,.08),transparent 58%);
  pointer-events:none;
}

.wlos-how-flow .wrap{
  position:relative;
  z-index:1;
}

.wlos-how-head{
  max-width:880px;
  margin:0 auto clamp(34px,5vw,56px);
  text-align:center;
}

.wlos-how-head h2{
  font-size:clamp(32px,5vw,60px);
  line-height:1.04;
  letter-spacing:-.01em;
  margin-bottom:18px;
}

.wlos-how-head h2 span{
  display:block;
  margin-top:6px;
  background:var(--eGrad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.wlos-how-head p{
  max-width:740px;
  margin:0 auto;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.72;
  color:var(--muted);
}

.wlos-how-roles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:22px;
}

.wlos-how-role{
  min-height:132px;
  padding:22px;
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.72));
  border:1px solid rgba(205,209,232,.84);
  box-shadow:
    0 16px 42px rgba(12,15,30,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
  text-align:center;
}

.wlos-how-role-icon{
  width:54px;
  height:54px;
  margin:0 auto 12px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:26px;
  background:var(--e3);
  border:1px solid var(--e4);
  box-shadow:0 10px 24px rgba(240,78,35,.10);
}

.wlos-how-role small{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--e);
  margin-bottom:6px;
}

.wlos-how-role strong{
  display:block;
  font-family:var(--head);
  font-size:21px;
  line-height:1.1;
  letter-spacing:-.004em;
  color:var(--ink);
}

.wlos-how-timeline{
  position:relative;
  display:grid;
  gap:14px;
}

.wlos-how-timeline::before{
  content:'';
  position:absolute;
  left:50%;
  top:20px;
  bottom:20px;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(240,78,35,.18),rgba(107,70,255,.20),rgba(240,78,35,.14));
  pointer-events:none;
}

.wlos-how-step{
  position:relative;
  width:calc(50% - 34px);
  min-height:180px;
  padding:24px;
  border-radius:28px;
  background:
    radial-gradient(circle at 82% 16%,rgba(240,78,35,.08),transparent 36%),
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.76));
  border:1px solid rgba(205,209,232,.86);
  box-shadow:
    0 18px 46px rgba(12,15,30,.09),
    inset 0 1px 0 rgba(255,255,255,.92);
  overflow:hidden;
}

.wlos-how-step:nth-child(odd){
  justify-self:start;
}

.wlos-how-step:nth-child(even){
  justify-self:end;
}

.wlos-how-step::after{
  content:'';
  position:absolute;
  top:34px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--eGrad);
  box-shadow:
    0 0 0 8px rgba(240,78,35,.10),
    0 0 20px rgba(240,78,35,.28);
}

.wlos-how-step:nth-child(odd)::after{
  right:-43px;
}

.wlos-how-step:nth-child(even)::after{
  left:-43px;
}

.wlos-how-step-num{
  position:absolute;
  right:18px;
  bottom:-18px;
  font-family:var(--head);
  font-size:112px;
  line-height:.8;
  font-weight:900;
  letter-spacing:-.03em;
  color:rgba(12,15,30,.045);
  pointer-events:none;
}

.wlos-how-step-body{
  position:relative;
  z-index:1;
}

.wlos-how-step-tag{
  display:inline-flex;
  margin-bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--e3);
  border:1px solid var(--e4);
  font-family:var(--mono);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--e);
}

.wlos-how-step h3{
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.08;
  letter-spacing:-.006em;
  margin-bottom:12px;
  color:var(--ink);
}

.wlos-how-step p{
  font-size:14.5px;
  line-height:1.68;
  color:var(--muted);
}

.wlos-how-step-ai{
  background:
    radial-gradient(circle at 82% 16%,rgba(107,70,255,.14),transparent 38%),
    radial-gradient(circle at 12% 92%,rgba(240,78,35,.10),transparent 40%),
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.76));
  border-color:rgba(107,70,255,.24);
}

.wlos-how-step-ai .wlos-how-step-tag{
  background:var(--ai3);
  border-color:var(--ai4);
  color:var(--ai);
}

.wlos-how-result{
  margin-top:22px;
  padding:22px 26px;
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(240,78,35,.12),rgba(107,70,255,.08)),
    rgba(255,255,255,.82);
  border:1px solid rgba(240,78,35,.18);
  text-align:center;
  box-shadow:
    0 18px 44px rgba(12,15,30,.08),
    inset 0 1px 0 rgba(255,255,255,.90);
}

.wlos-how-result strong{
  display:block;
  font-family:var(--head);
  font-size:clamp(22px,2.6vw,34px);
  line-height:1.08;
  letter-spacing:-.006em;
  color:var(--ink);
  margin-bottom:8px;
}

.wlos-how-result span{
  display:block;
  max-width:780px;
  margin:0 auto;
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
}

/* ════════════════════════════════════════════
   11. PROBLEM V2
════════════════════════════════════════════ */

.wlos-problem-v2{
  position:relative;
  padding:clamp(64px,7vw,104px) 0;
  background:
    radial-gradient(circle at 18% 20%,rgba(240,78,35,.13),transparent 34%),
    radial-gradient(circle at 84% 78%,rgba(107,70,255,.10),transparent 34%),
    linear-gradient(180deg,#0C0F1E 0%,#111527 100%);
  overflow:hidden;
}

.wlos-problem-v2::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 85%);
  pointer-events:none;
}

.wlos-problem-v2 .wrap{
  position:relative;
  z-index:1;
}

.wlos-problem-v2-head{
  max-width:880px;
  margin:0 auto clamp(34px,5vw,58px);
  text-align:center;
}

.wlos-problem-v2-head h2{
  color:#fff;
  font-size:clamp(31px,4.8vw,58px);
  line-height:1.04;
  letter-spacing:-.01em;
  margin-bottom:18px;
}

.wlos-problem-v2-head h2 span{
  display:block;
  margin-top:6px;
  background:var(--eGrad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.wlos-problem-v2-head p{
  max-width:740px;
  margin:0 auto;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.72;
  color:rgba(255,255,255,.58);
}

.wlos-problem-v2-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.wlos-problem-v2-card{
  position:relative;
  isolation:isolate;
  min-height:260px;
  padding:28px;
  border-radius:26px;
  background:
    radial-gradient(circle at 82% 18%,rgba(240,78,35,.16),transparent 34%),
    radial-gradient(circle at 14% 92%,rgba(107,70,255,.11),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 18px 44px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.wlos-problem-v2-card:hover{
  transform:translateY(-5px);
  border-color:rgba(240,78,35,.34);
  box-shadow:
    0 28px 70px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 0 42px rgba(240,78,35,.13);
}

.wlos-problem-v2-featured{
  grid-column:span 2;
  transform:translateY(-4px);
  background:
    radial-gradient(circle at 85% 16%,rgba(240,78,35,.28),transparent 38%),
    radial-gradient(circle at 12% 92%,rgba(107,70,255,.15),transparent 42%),
    linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  border-color:rgba(255,122,82,.46);
  box-shadow:
    0 30px 86px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 0 58px rgba(240,78,35,.16);
}

.wlos-problem-v2-num{
  position:absolute;
  right:18px;
  bottom:-22px;
  font-family:var(--head);
  font-size:clamp(92px,10vw,154px);
  line-height:.8;
  font-weight:900;
  letter-spacing:-.03em;
  color:rgba(255,255,255,.055);
  z-index:0;
  pointer-events:none;
}

.wlos-problem-v2-featured .wlos-problem-v2-num{
  font-size:clamp(120px,14vw,210px);
  color:rgba(255,122,82,.13);
  right:24px;
  bottom:-30px;
}

.wlos-problem-v2-card h3{
  position:relative;
  z-index:2;
  color:#fff;
  font-family:var(--head);
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.1;
  letter-spacing:-.004em;
  margin-bottom:16px;
}

.wlos-problem-v2-card p{
  position:relative;
  z-index:2;
  font-size:14.5px;
  line-height:1.68;
  color:rgba(255,255,255,.64);
}

.wlos-problem-v2-card p strong{
  color:#fff;
  font-weight:900;
}

.wlos-problem-v2-featured p{
  color:rgba(255,255,255,.70);
}

.wlos-problem-v2-joke{
  margin-top:14px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.78);
}

.wlos-problem-v2-joke strong{
  color:#FF7A52;
}

/* ════════════════════════════════════════════
   12. MODULES
════════════════════════════════════════════ */

.modules-section{
  background:var(--bg2);
}

.modules-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:clamp(32px,4vw,52px);
  flex-wrap:wrap;
}

.modules-intro h2{
  max-width:22ch;
}

.modules-intro .lead{
  max-width:36ch;
}

.modules-tagline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  background:var(--e3);
  border:1px solid var(--e4);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  color:var(--e);
  letter-spacing:.10em;
  text-transform:uppercase;
  align-self:flex-start;
  white-space:nowrap;
}

.modules-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.mod-card{
  background:var(--bg2);
  border:1.5px solid var(--line);
  border-radius:var(--rxl);
  padding:clamp(18px,2.2vw,26px);
  position:relative;
  overflow:hidden;
  transition:all .2s;
  display:flex;
  flex-direction:column;
}

.mod-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--eGrad);
  opacity:0;
  transition:opacity .2s;
}

.mod-card:hover{
  border-color:var(--e4);
  box-shadow:0 8px 32px rgba(240,78,35,.09);
  transform:translateY(-3px);
}

.mod-card:hover::before{
  opacity:1;
}

.mod-card.ai-mod{
  border-color:var(--ai4);
  background:linear-gradient(160deg,var(--bg2) 0%,rgba(107,70,255,.03) 100%);
  grid-column:span 2;
}

.mod-card.ai-mod::before{
  background:var(--aiGrad);
}

.mod-card.ai-mod:hover{
  border-color:rgba(107,70,255,.32);
  box-shadow:0 8px 32px rgba(107,70,255,.12);
}

.mod-icon{
  width:46px;
  height:46px;
  border-radius:var(--rl);
  display:grid;
  place-items:center;
  font-size:22px;
  background:var(--bg3);
  border:1px solid var(--line);
  box-shadow:var(--sh1);
  margin-bottom:16px;
  flex:0 0 auto;
}

.mod-card.ai-mod .mod-icon{
  background:var(--ai3);
  border-color:var(--ai4);
}

.mod-name{
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--e);
  margin-bottom:6px;
}

.mod-card.ai-mod .mod-name{
  color:var(--ai);
}

.mod-card h3{
  margin-bottom:10px;
  color:var(--ink);
}

.mod-card p{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.65;
  font-weight:400;
  flex:1;
}

.mod-badge{
  display:inline-flex;
  align-items:center;
  margin-top:14px;
  padding:4px 10px;
  border-radius:5px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  align-self:flex-start;
}

.mb-e{
  background:var(--e3);
  color:var(--e);
  border:1px solid var(--e4);
}

.mb-t{
  background:var(--t2);
  color:var(--t);
  border:1px solid var(--t3);
}

.mb-ai{
  background:var(--ai3);
  color:var(--ai2);
  border:1px solid var(--ai4);
}

.mb-g{
  background:var(--g2);
  color:var(--g);
  border:1px solid var(--g3);
}

.mb-gold{
  background:var(--gold2);
  color:var(--gold);
  border:1px solid rgba(245,158,11,.22);
}

.mod-card.ai-mod .mod-inner{
  display:flex;
  gap:20px;
  align-items:flex-start;
}

.mod-card.ai-mod .mod-inner-right{
  flex:1;
}

.ai-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:14px;
}

.ai-feat{
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding:8px 10px;
  border-radius:var(--r);
  background:var(--ai3);
  border:1px solid var(--ai4);
  font-size:12px;
  font-weight:650;
  color:var(--ink2);
  line-height:1.45;
}

.ai-feat::before{
  content:'→';
  color:var(--ai);
  font-size:11px;
  flex:0 0 auto;
  margin-top:1px;
}

/* ════════════════════════════════════════════
   13. MOCKUPS
════════════════════════════════════════════ */

.more-mockups-section{
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
}

.mockups-head{
  text-align:center;
  margin-bottom:28px;
}

.mockups-head h2{
  max-width:15ch;
  margin-inline:auto;
}

.mockups-head .lead{
  margin-inline:auto;
}

.mockups-grid-main,
.mockups-grid-features{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:6px 2px 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(45,51,84,.24) transparent;
}

.mock-shot-card,
.mock-feature-card{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.86);
  border:1.5px solid var(--line);
  border-radius:30px;
  box-shadow:0 12px 34px rgba(12,15,30,.08);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
  scroll-snap-align:start;
  flex:0 0 auto;
}

.mock-shot-card:hover,
.mock-feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(12,15,30,.12);
  border-color:var(--e4);
}

.mock-shot-card{
  width:clamp(280px,30vw,340px);
  padding:22px 20px 18px;
}

.mock-feature-card{
  width:clamp(320px,42vw,500px);
  padding:24px 22px 20px;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

.mock-shot-card::before,
.mock-feature-card::before{
  content:'';
  position:absolute;
  top:-36px;
  right:-36px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,78,35,.10),transparent 70%);
  pointer-events:none;
}

.mock-shot-card::after,
.mock-feature-card::after{
  content:'';
  position:absolute;
  left:-32px;
  bottom:-32px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(107,70,255,.08),transparent 70%);
  pointer-events:none;
}

.mock-shot-top,
.mock-feature-copy{
  position:relative;
  z-index:2;
}

.mock-shot-top{
  margin-bottom:14px;
}

.mock-shot-top h3,
.mock-feature-copy h3{
  margin-bottom:8px;
  color:var(--ink);
}

.mock-shot-top p,
.mock-feature-copy p{
  font-size:14px;
  color:var(--muted);
  line-height:1.68;
}

.mock-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--e3);
  border:1px solid var(--e4);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--e);
}

.mock-kicker-ai{
  background:var(--ai3);
  border-color:var(--ai4);
  color:var(--ai);
}

.mock-shot-device,
.mock-feature-device{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px 0 2px;
}

.mock-shot-device::after,
.mock-feature-device::after{
  content:'';
  position:absolute;
  top:22px;
  left:50%;
  transform:translateX(-50%);
  width:72px;
  height:18px;
  border-radius:999px;
  background:#0B0F1C;
  z-index:3;
}

.mock-shot-device img,
.mock-feature-device img{
  display:block;
  width:min(100%,280px);
  aspect-ratio:9 / 19.5;
  object-fit:cover;
  object-position:top center;
  border-radius:32px;
  border:9px solid #0B0F1C;
  background:#fff;
  box-shadow:
    0 20px 44px rgba(12,15,30,.18),
    0 4px 16px rgba(12,15,30,.10);
}

.mock-feature-device img{
  width:min(100%,300px);
}

.mockups-head-secondary{
  margin-top:52px;
}

/* ════════════════════════════════════════════
   14. AI BOSS
════════════════════════════════════════════ */

.ai-section{
  background:linear-gradient(160deg,#0E0A22 0%,#130F2E 40%,#0C1128 100%);
  position:relative;
  overflow:hidden;
  padding:var(--gap) 0;
}

.ai-orb-1{
  position:absolute;
  top:-180px;
  right:-120px;
  width:600px;
  height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(107,70,255,.20),transparent 62%);
  pointer-events:none;
}

.ai-orb-2{
  position:absolute;
  bottom:-140px;
  left:-100px;
  width:500px;
  height:500px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,78,35,.12),transparent 65%);
  pointer-events:none;
}

.ai-inner{
  position:relative;
  z-index:1;
}

.ai-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 16px;
  border-radius:999px;
  background:var(--ai3);
  border:1px solid var(--ai4);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  color:var(--ai2);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:20px;
}

.ai-section h2{
  color:#fff;
}

.ai-section .lead{
  color:rgba(255,255,255,.50);
}

.ai-section .lead strong{
  color:rgba(255,255,255,.78);
  font-weight:800;
}

.ai-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:clamp(32px,4vw,48px);
}

.ai-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--rxl);
  padding:22px;
  position:relative;
  overflow:hidden;
  transition:all .2s;
}

.ai-card::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:var(--aiGrad);
}

.ai-card:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(107,70,255,.26);
}

.ai-card-icon{
  font-size:28px;
  margin-bottom:12px;
}

.ai-card h4{
  color:#fff;
  margin-bottom:8px;
}

.ai-card p{
  font-size:13px;
  color:rgba(255,255,255,.45);
  line-height:1.65;
}

.ai-demo{
  margin-top:24px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(107,70,255,.22);
  border-radius:var(--rxl);
  overflow:hidden;
}

.ai-demo-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 18px;
  background:rgba(107,70,255,.10);
  border-bottom:1px solid rgba(107,70,255,.16);
}

.ai-logo-sm{
  width:28px;
  height:28px;
  border-radius:8px;
  background:var(--aiGrad);
  display:grid;
  place-items:center;
  font-family:var(--head);
  font-size:12px;
  font-weight:800;
  color:#fff;
}

.ai-demo-title{
  font-family:var(--head);
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.78);
}

.ai-demo-date{
  margin-left:auto;
  font-family:var(--mono);
  font-size:11px;
  color:rgba(255,255,255,.35);
}

.ai-demo-body{
  padding:16px;
  display:grid;
  gap:10px;
}

.ai-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px;
  border-radius:var(--rl);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}

.ai-row-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--ai3);
  border:1px solid var(--ai4);
  display:grid;
  place-items:center;
  font-size:15px;
  flex:0 0 auto;
}

.ai-row-type{
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ai2);
  margin-bottom:4px;
}

.ai-row-text{
  font-size:13px;
  color:rgba(255,255,255,.62);
  line-height:1.58;
}

.ai-row-text strong{
  color:rgba(255,255,255,.85);
  font-weight:700;
}

.ai-action-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:7px;
  padding:4px 10px;
  border-radius:5px;
  background:rgba(107,70,255,.15);
  border:1px solid rgba(107,70,255,.25);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  color:var(--ai2);
  letter-spacing:.06em;
}

.smart-offers{
  margin-top:20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--rxl);
  padding:22px;
}

.so-head{
  margin-bottom:16px;
}

.so-head h4{
  color:#fff;
  margin-bottom:6px;
}

.so-head p{
  font-size:13px;
  color:rgba(255,255,255,.42);
  line-height:1.60;
}

.so-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.so-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  font-weight:650;
  color:rgba(255,255,255,.62);
  transition:all .18s;
}

.so-pill:hover{
  background:rgba(107,70,255,.12);
  border-color:rgba(107,70,255,.24);
  color:var(--ai2);
}

.so-pill::before{
  content:'→';
  color:var(--ai2);
  font-size:11px;
  font-weight:800;
}

/* ════════════════════════════════════════════
   15. PROOF
════════════════════════════════════════════ */

.proof-section{
  background:var(--bg2);
}

.proof-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,80px);
  align-items:center;
}

.proof-quote-mark{
  font-family:var(--head);
  font-size:clamp(56px,7vw,80px);
  color:var(--e);
  line-height:.5;
  display:block;
  margin-bottom:12px;
  font-weight:800;
}

.proof-author{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
}

.proof-av{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--eGrad);
  display:grid;
  place-items:center;
  font-family:var(--head);
  font-weight:800;
  font-size:14px;
  color:#fff;
  border:2px solid var(--e4);
  flex:0 0 auto;
}

.proof-av-name{
  font-family:var(--head);
  font-weight:800;
  font-size:15px;
  color:var(--ink);
}

.proof-av-role{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.built-strip{
  margin-top:28px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--bg3);
  border:1.5px solid var(--line);
  border-radius:var(--rl);
  padding:16px 18px;
}

.built-icon{
  font-size:20px;
  flex:0 0 auto;
  margin-top:1px;
}

.built-text{
  font-size:13px;
  color:var(--muted);
  line-height:1.60;
}

.built-text strong{
  color:var(--ink2);
  font-weight:800;
}

.proof-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.pm{
  background:var(--bg3);
  border:1.5px solid var(--line);
  border-radius:var(--rxl);
  padding:22px;
  text-align:center;
  transition:all .2s;
}

.pm:hover{
  border-color:var(--e4);
  transform:translateY(-2px);
  box-shadow:var(--sh2);
}

.pm-val{
  font-family:var(--head);
  font-weight:800;
  font-size:clamp(26px,3vw,40px);
  line-height:1;
  letter-spacing:-.006em;
  margin-bottom:7px;
}

.pm-label{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
}

/* ════════════════════════════════════════════
   16. PRICING FINAL
════════════════════════════════════════════ */

#pricing.pricing-section{
  background:
    radial-gradient(circle at 18% 12%,rgba(240,78,35,.08),transparent 34%),
    radial-gradient(circle at 88% 20%,rgba(107,70,255,.08),transparent 34%),
    linear-gradient(180deg,#F5F6FA 0%,#ECEEF6 100%);
  padding:clamp(70px,8vw,110px) 0;
  overflow:hidden;
}

#pricing .wrap{
  max-width:1360px;
}

#pricing > .wrap > .rv:first-child{
  max-width:1080px;
  margin:0 auto;
  text-align:center;
}

#pricing .s-label{
  margin-left:auto;
  margin-right:auto;
}

#pricing h2{
  max-width:980px;
  font-size:clamp(34px,5vw,62px);
  line-height:1.04;
  letter-spacing:-0.018em;
  margin:0 auto 16px;
}

#pricing h2 span{
  display:block;
  margin-top:10px;
  font-size:clamp(20px,2.4vw,30px);
  line-height:1.24;
  letter-spacing:-0.005em;
  color:var(--muted);
  font-family:var(--font);
  font-weight:650;
}

#pricing .lead{
  max-width:820px;
  margin:16px auto 0;
  text-align:center;
}

#pricing .pricing-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin:46px auto 0;
  align-items:stretch;
  width:100%;
}

#pricing .plan{
  width:100%;
  min-height:100%;
  padding:30px 26px;
  border-radius:30px;
  background:
    radial-gradient(circle at 86% 12%,rgba(240,78,35,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.80));
  border:1.5px solid rgba(205,209,232,.90);
  box-shadow:
    0 22px 60px rgba(12,15,30,.10),
    inset 0 1px 0 rgba(255,255,255,.90);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:all .22s ease;
}

#pricing .plan:hover{
  transform:translateY(-4px);
}

#pricing .plan.featured{
  border-color:rgba(240,78,35,.38);
  box-shadow:
    0 26px 72px rgba(240,78,35,.13),
    0 0 0 4px rgba(240,78,35,.055),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#pricing .plan.ai-plan{
  border-color:rgba(107,70,255,.30);
  background:
    radial-gradient(circle at 86% 12%,rgba(107,70,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.80));
  box-shadow:
    0 26px 72px rgba(107,70,255,.12),
    0 0 0 4px rgba(107,70,255,.045),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#pricing .plan-badge{
  display:inline-block;
  width:max-content;
  padding:7px 12px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:18px;
}

#pricing .pb-e{
  background:var(--e3);
  color:var(--e);
  border:1px solid var(--e4);
}

#pricing .pb-ai{
  background:var(--ai3);
  color:var(--ai2);
  border:1px solid var(--ai4);
}

#pricing .pb-soft{
  background:rgba(12,15,30,.055);
  color:var(--ink2);
  border:1px solid rgba(205,209,232,.9);
}

#pricing .pb-gold{
  background:rgba(244,173,63,.16);
  color:#8a5a00;
  border:1px solid rgba(244,173,63,.26);
}

#pricing .pb-setup{
  background:rgba(244,173,63,.14);
  color:#8a5a00;
  border:1px solid rgba(244,173,63,.24);
}

#pricing .pb-roi{
  background:rgba(16,185,129,.12);
  color:#10B981;
  border:1px solid rgba(16,185,129,.24);
}

#pricing .plan h3{
  font-size:clamp(24px,2.3vw,34px);
  line-height:1;
  letter-spacing:-0.01em;
  margin:0 0 10px;
}

#pricing .plan-for{
  font-size:14.5px;
  line-height:1.58;
  color:var(--muted);
  margin-bottom:22px;
}

#pricing .plan-price{
  font-family:var(--head);
  font-size:clamp(46px,4vw,68px);
  line-height:.9;
  letter-spacing:-0.025em;
  font-weight:900;
  margin-bottom:8px;
  color:var(--ink);
}

#pricing .plan-period{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  color:var(--dim);
  margin-bottom:18px;
}

#pricing .plan-note{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(240,78,35,.08);
  border:1px solid rgba(240,78,35,.18);
  color:var(--ink2);
  font-size:15px;
  line-height:1.55;
  font-weight:650;
  margin-bottom:18px;
}

#pricing .ai-plan .plan-note{
  background:rgba(107,70,255,.08);
  border-color:rgba(107,70,255,.18);
}

#pricing .plan-note strong{
  display:block;
  color:var(--ink);
  font-weight:900;
  margin-bottom:3px;
}

#pricing .plan-feats{
  display:grid;
  gap:11px;
  margin:0 0 24px;
  padding:0;
  list-style:none;
  flex:1;
}

/* ════════════════════════════════════════════
   PRICING NOTE BOXES — RICH STYLED VERSION
═════════════════════════════════════════════ */

#pricing .plan-note.plan-note-rich{
  position:relative;
  padding:18px 18px 16px;
  border-radius:22px;
  overflow:hidden;
  text-align:left;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

#pricing .plan-note.plan-note-rich:hover{
  transform:translateY(-2px);
}

#pricing .plan-note-rich::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.42), transparent 34%);
  opacity:.9;
}

#pricing .featured .plan-note.plan-note-rich{
  background:
    linear-gradient(180deg, rgba(255,247,243,.96), rgba(255,241,234,.90));
  border:1.5px solid rgba(240,78,35,.20);
  box-shadow:
    0 14px 34px rgba(240,78,35,.10),
    inset 0 1px 0 rgba(255,255,255,.75);
}

#pricing .ai-plan .plan-note.plan-note-rich{
  background:
    linear-gradient(180deg, rgba(246,242,255,.96), rgba(239,234,255,.90));
  border:1.5px solid rgba(107,70,255,.18);
  box-shadow:
    0 14px 34px rgba(107,70,255,.10),
    inset 0 1px 0 rgba(255,255,255,.75);
}

#pricing .plan-note-top{
  display:flex;
  align-items:flex-start;
  gap:12px;
  position:relative;
  z-index:1;
}

#pricing .plan-note-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:20px;
  flex:0 0 44px;
  box-shadow:0 10px 24px rgba(12,15,30,.08);
}

#pricing .featured .plan-note-icon{
  background:linear-gradient(135deg,#F04E23 0%,#FF8A63 100%);
  color:#fff;
}

#pricing .ai-plan .plan-note-icon{
  background:linear-gradient(135deg,#6B46FF 0%,#9B7BFF 100%);
  color:#fff;
}

#pricing .plan-note-head{
  flex:1;
  min-width:0;
}

#pricing .plan-note-head strong{
  display:block;
  margin:0 0 4px;
  font-family:var(--head);
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--ink);
  font-weight:900;
}

#pricing .plan-note-head small{
  display:block;
  font-size:12.5px;
  line-height:1.5;
  color:var(--muted);
  font-weight:700;
}

#pricing .plan-note-points{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
  margin-top:14px;
}

#pricing .plan-note-point{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:10px;
  align-items:start;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(255,255,255,.55);
}

#pricing .featured .plan-note-point{
  box-shadow:0 6px 16px rgba(240,78,35,.04);
}

#pricing .ai-plan .plan-note-point{
  box-shadow:0 6px 16px rgba(107,70,255,.04);
}

#pricing .plan-note-point span{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  margin-top:1px;
}

#pricing .featured .plan-note-point span{
  background:rgba(240,78,35,.12);
  color:var(--e);
}

#pricing .ai-plan .plan-note-point span{
  background:rgba(107,70,255,.12);
  color:var(--ai);
}

#pricing .plan-note-point p{
  margin:0;
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink2);
  font-weight:650;
}

#pricing .plan-note-point p strong{
  color:var(--ink);
  font-weight:850;
}

@media(max-width:620px){
  #pricing .plan-note.plan-note-rich{
    padding:16px 15px 14px;
    border-radius:18px;
  }

  #pricing .plan-note-top{
    gap:10px;
  }

  #pricing .plan-note-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    font-size:18px;
    flex-basis:40px;
  }

  #pricing .plan-note-head strong{
    font-size:20px;
  }

  #pricing .plan-note-head small{
    font-size:13px;
  }

  #pricing .plan-note-point{
    padding:9px 10px;
    border-radius:12px;
  }

  #pricing .plan-note-point p{
    font-size:13.5px;
  }
}

#pricing .plan-feats li{
  display:flex;
  gap:9px;
  align-items:flex-start;
  font-size:14.5px;
  line-height:1.52;
  color:var(--muted);
}

#pricing .plan-feats li::before{
  content:'✓';
  color:var(--g);
  font-weight:900;
  font-size:12px;
  flex:0 0 auto;
  margin-top:2px;
}

#pricing .plan-extra{
  margin-top:auto;
  margin-bottom:18px;
  padding:15px 16px;
  border-radius:18px;
  background:rgba(12,15,30,.045);
  border:1px solid rgba(205,209,232,.72);
  color:var(--ink2);
  font-size:14px;
  line-height:1.58;
  font-weight:650;
}

#pricing .plan .btn{
  width:100%;
  min-height:52px;
  font-size:15px;
}

#pricing .pricing-grid.pricing-grid-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

#pricing .pricing-tier{
  position:relative;
}

#pricing .pricing-tier-top{
  margin-bottom:18px;
}

#pricing .pricing-tier-price{
  margin-bottom:18px;
}

#pricing .pricing-tier-focus{
  display:grid;
  gap:4px;
  padding:16px 18px;
  margin-bottom:18px;
  border-radius:18px;
  background:rgba(12,15,30,.045);
  border:1px solid rgba(205,209,232,.75);
}

#pricing .pricing-tier-focus strong{
  color:var(--ink);
  font-size:14px;
  font-weight:900;
  line-height:1.2;
}

#pricing .pricing-tier-focus span{
  color:var(--ink2);
  font-size:13.5px;
  line-height:1.5;
  font-weight:650;
}

#pricing .pricing-tier-feats{
  margin-bottom:22px;
}

#pricing .plan-feat-copy{
  display:grid;
  gap:4px;
}

#pricing .plan-feat-copy strong{
  display:block;
  color:var(--ink);
  font-size:14px;
  line-height:1.26;
  font-weight:900;
}

#pricing .plan-feat-copy small{
  display:block;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.46;
  font-weight:700;
}

#pricing .pricing-tier-btn{
  margin-top:auto;
}

#pricing .plan-basic{
  background:
    radial-gradient(circle at 86% 12%,rgba(12,15,30,.05),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,255,.84));
}

#pricing .plan-basic .pricing-tier-focus{
  background:rgba(12,15,30,.04);
  border-color:rgba(205,209,232,.82);
}

#pricing .plan-standard{
  border-color:rgba(240,78,35,.22);
  background:
    radial-gradient(circle at 86% 12%,rgba(240,78,35,.11),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,246,242,.88));
}

#pricing .plan-standard .pricing-tier-focus{
  background:rgba(240,78,35,.08);
  border-color:rgba(240,78,35,.18);
}

#pricing .plan-pro{
  border-color:rgba(244,173,63,.34);
  background:
    radial-gradient(circle at 86% 12%,rgba(244,173,63,.12),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.99),rgba(255,249,238,.90));
  box-shadow:
    0 28px 76px rgba(244,173,63,.14),
    0 0 0 4px rgba(244,173,63,.05),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#pricing .plan-pro .pricing-tier-focus{
  background:rgba(244,173,63,.10);
  border-color:rgba(244,173,63,.22);
}

#pricing .plan-full{
  border-color:rgba(107,70,255,.28);
  background:
    radial-gradient(circle at 86% 12%,rgba(107,70,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,242,255,.88));
  box-shadow:
    0 24px 68px rgba(107,70,255,.11),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#pricing .plan-full .pricing-tier-focus{
  background:rgba(107,70,255,.08);
  border-color:rgba(107,70,255,.18);
}

#pricing .plan-groups{
  display:grid;
  gap:12px;
  margin:0 0 18px;
}

#pricing .plan-group{
  padding:13px 14px;
  border-radius:18px;
  background:rgba(12,15,30,.035);
  border:1px solid rgba(205,209,232,.72);
}

#pricing .featured .plan-group{
  background:rgba(240,78,35,.055);
  border-color:rgba(240,78,35,.14);
}

#pricing .ai-plan .plan-group{
  background:rgba(107,70,255,.055);
  border-color:rgba(107,70,255,.14);
}

#pricing .plan-group-label{
  display:block;
  margin-bottom:10px;
  font-family:var(--mono);
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}

#pricing .plan-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

#pricing .plan-pills li{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(205,209,232,.72);
  color:var(--ink2);
  font-size:12px;
  line-height:1.2;
  font-weight:800;
}

#pricing .featured .plan-pills li{
  background:#fff7f3;
  border-color:rgba(240,78,35,.14);
  color:#b23c19;
}

#pricing .ai-plan .plan-pills li{
  background:#f6f2ff;
  border-color:rgba(107,70,255,.16);
  color:#5d3ee6;
}

#pricing .setup-plan{
  background:
    radial-gradient(circle at 86% 12%,rgba(244,173,63,.12),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,250,240,.88));
  border-color:rgba(244,173,63,.24);
  box-shadow:
    0 22px 60px rgba(138,90,0,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
}

#pricing .setup-plan .plan-price{
  color:#8a5a00;
}

#pricing .setup-plan .plan-note{
  background:rgba(244,173,63,.10);
  border-color:rgba(244,173,63,.20);
}

#pricing .setup-plan .plan-group{
  background:rgba(255,247,229,.92);
  border-color:rgba(244,173,63,.20);
}

#pricing .setup-plan .plan-pills li{
  background:#fffaf0;
  border-color:rgba(244,173,63,.22);
  color:#8a5a00;
}

#pricing .roi-plan{
  background:
    radial-gradient(circle at 12% 30%,rgba(16,185,129,.14),transparent 34%),
    linear-gradient(135deg,#101426 0%,#0C0F1E 100%);
  border:1.5px solid rgba(255,255,255,.10);
  box-shadow:0 26px 80px rgba(12,15,30,.22);
}

#pricing .roi-plan h3{
  color:#fff;
}

#pricing .roi-plan .plan-for,
#pricing .roi-plan .plan-period,
#pricing .roi-plan .plan-group-label{
  color:rgba(255,255,255,.64);
}

#pricing .roi-plan .plan-price{
  color:#10B981;
}

#pricing .roi-plan .plan-note{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.76);
}

#pricing .roi-plan .plan-note strong{
  color:#fff;
}

#pricing .roi-plan .plan-group{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}

#pricing .roi-plan .plan-pills li{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.86);
}

#pricing .roi-plan .plan-extra{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.78);
}

#pricing .pricing-setup-card{
  width:min(1080px,100%);
  margin:26px auto 0;
  padding:32px;
  border-radius:32px;
  background:
    radial-gradient(circle at 90% 10%,rgba(240,78,35,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.78));
  border:1.5px solid rgba(205,209,232,.90);
  box-shadow:0 22px 60px rgba(12,15,30,.09);
  display:grid;
  grid-template-columns:.95fr 1.35fr;
  gap:28px;
  align-items:start;
}

#pricing .pricing-setup-left h3{
  font-size:clamp(28px,3vw,40px);
  line-height:1.04;
  letter-spacing:-0.01em;
  margin-bottom:12px;
}

#pricing .pricing-setup-left p{
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
}

#pricing .pricing-setup-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

#pricing .pricing-setup-grid div{
  padding:13px 14px;
  border-radius:16px;
  background:rgba(12,15,30,.04);
  border:1px solid rgba(205,209,232,.72);
  color:var(--ink2);
  font-size:14px;
  line-height:1.35;
  font-weight:700;
}

#pricing .pricing-setup-grid div::before{
  content:"✓";
  color:var(--g);
  font-weight:900;
  margin-right:8px;
}

#pricing .pricing-roi-card{
  width:min(1080px,100%);
  margin:22px auto 0;
  padding:34px;
  border-radius:34px;
  background:
    radial-gradient(circle at 12% 30%,rgba(16,185,129,.14),transparent 34%),
    linear-gradient(135deg,#101426 0%,#0C0F1E 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 80px rgba(12,15,30,.22);
  display:grid;
  grid-template-columns:190px 1fr;
  gap:28px;
  align-items:center;
}

#pricing .pricing-roi-value{
  font-family:var(--head);
  font-size:clamp(82px,9vw,138px);
  line-height:.8;
  letter-spacing:-0.03em;
  font-weight:900;
  color:#10B981;
}

#pricing .pricing-roi-copy h3{
  color:#fff;
  font-size:clamp(28px,3vw,42px);
  line-height:1.04;
  letter-spacing:-0.01em;
  margin-bottom:12px;
}

#pricing .pricing-roi-copy p{
  color:rgba(255,255,255,.62);
  font-size:15.5px;
  line-height:1.72;
  max-width:850px;
}

#pricing .pricing-roi-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

#pricing .pricing-roi-pills span{
  padding:9px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:800;
}

#pricing .pricing-bottom-cta{
  width:100%;
  margin:24px auto 0;
  padding:24px 28px;
  border-radius:28px;
  background:rgba(255,255,255,.82);
  border:1.5px solid rgba(205,209,232,.90);
  box-shadow:0 18px 44px rgba(12,15,30,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

#pricing .pricing-bottom-cta strong{
  font-family:var(--head);
  font-size:20px;
  font-weight:900;
  color:var(--ink);
}

#pricing .pricing-bottom-cta span{
  flex:1;
  min-width:260px;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.55;
}

#pricing .pricing-bottom-cta .btn{
  flex:0 0 auto;
}

/* ════════════════════════════════════════════
   17. FAQ
════════════════════════════════════════════ */

.faq-section{
  background:var(--bg2);
}

.faq-grid{
  display:grid;
  gap:10px;
  margin-top:clamp(32px,4vw,48px);
}

details{
  background:var(--bg2);
  border:1.5px solid var(--line);
  border-radius:var(--rxl);
  overflow:hidden;
  transition:border-color .18s;
}

details:hover{
  border-color:var(--line2);
}

details[open]{
  border-color:var(--e4);
}

summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  font-family:var(--head);
  font-size:15px;
  font-weight:800;
  color:var(--ink);
  user-select:none;
}

summary::-webkit-details-marker{
  display:none;
}

.faq-chev{
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--bg3);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-size:15px;
  color:var(--e);
  flex:0 0 auto;
  transition:transform .2s;
  font-weight:900;
}

details[open] .faq-chev{
  transform:rotate(180deg);
  background:var(--e3);
  border-color:var(--e4);
}

.faq-answer{
  padding:0 22px 20px;
  font-size:14.5px;
  color:var(--muted);
  line-height:1.72;
}

.faq-answer strong{
  color:var(--ink);
  font-weight:900;
}

/* ════════════════════════════════════════════
   18. CTA / FOOTER
════════════════════════════════════════════ */

.cta-section{
  background:var(--dark);
  padding:var(--gap) 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.cta-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 700px 500px at 20% 50%,rgba(240,78,35,.13),transparent),
    radial-gradient(ellipse 600px 400px at 80% 50%,rgba(107,70,255,.10),transparent);
  pointer-events:none;
}

.cta-inner{
  position:relative;
  z-index:1;
}

.cta-section h2{
  color:#fff;
  margin-bottom:18px;
}

.cta-section .lead{
  color:rgba(255,255,255,.48);
  margin-inline:auto;
  max-width:50ch;
  margin-bottom:36px;
}

.cta-section .lead strong{
  color:rgba(255,255,255,.78);
  font-weight:800;
}

.cta-btns{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:22px;
}

.cta-note{
  font-family:var(--mono);
  font-size:12px;
  color:rgba(255,255,255,.28);
  letter-spacing:.04em;
}

footer{
  background:var(--bg2);
  border-top:1px solid var(--line);
  padding:clamp(28px,3.5vw,44px) 0;
}

.foot-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.foot-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--head);
  font-weight:800;
  font-size:17px;
  color:var(--ink);
}

.foot-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.foot-links a{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  transition:color .15s;
}

.foot-links a:hover{
  color:var(--e);
}

.foot-right{
  font-size:13px;
  color:var(--dim);
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

/* ════════════════════════════════════════════
   19. RESPONSIVE
════════════════════════════════════════════ */

@media(max-width:1080px){
  .wlos-revenue-grid{
    grid-template-columns:1fr 1fr;
  }

  .wlos-revenue-card-main{
    grid-column:span 2;
  }

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

  .mod-card.ai-mod{
    grid-column:span 2;
  }

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

  .proof-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:980px){
  .wlos-problem-v2-grid{
    grid-template-columns:1fr 1fr;
  }

  .wlos-problem-v2-featured{
    grid-column:span 2;
  }
}

@media(max-width:1180px){
  #pricing .wrap{
    max-width:1080px;
  }

  #pricing .pricing-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:900px){
  #pricing .pricing-grid{
    width:100%;
  }

  #pricing .pricing-setup-card{
    grid-template-columns:1fr;
  }

  #pricing .pricing-roi-card{
    grid-template-columns:1fr;
    text-align:left;
  }

  #pricing .pricing-roi-value{
    font-size:96px;
  }
}

@media(max-width:860px){
  .wlos-how-roles{
    grid-template-columns:1fr;
  }

  .wlos-how-timeline::before{
    left:14px;
    transform:none;
  }

  .wlos-how-step,
  .wlos-how-step:nth-child(odd),
  .wlos-how-step:nth-child(even){
    width:calc(100% - 36px);
    justify-self:end;
  }

  .wlos-how-step:nth-child(odd)::after,
  .wlos-how-step:nth-child(even)::after{
    left:-43px;
    right:auto;
  }
}

@media(max-width:760px){
  .wlos-object-strip{
    padding:18px 0 20px;
  }

  .wlos-object-strip::before,
  .wlos-object-strip::after{
    width:54px;
  }

  .wlos-object-strip-head{
    display:block;
    text-align:center;
    margin-bottom:14px;
  }

  .wlos-object-strip-label{
    font-size:25px;
  }

  .wlos-object-strip-note{
    margin-top:7px;
    font-size:10px;
    white-space:normal;
  }

  .wlos-object-track{
    gap:18px;
    animation-duration:25s;
  }

  .wlos-object-item{
    width:118px;
    min-height:118px;
    border-radius:22px;
    padding:11px 9px;
  }

  .wlos-object-item img{
    width:72px;
    height:72px;
    max-width:72px;
    max-height:72px;
  }

  .wlos-object-item span{
    max-width:100px;
    font-size:13px;
  }
}

@media(max-width:680px){
  .wrap{
    width:min(100% - 32px,var(--wrap));
  }

  #pricing .pricing-grid{
    grid-template-columns:1fr;
  }

  .nav-links{
    display:none;
  }

  .nav-right .btn{
    display:none;
  }

  .hamburger{
    display:inline-flex;
  }

  .wlos-final-hero{
    padding:48px 14px 42px;
  }

  .wlos-hero-title{
    font-size:clamp(36px,12vw,54px);
    letter-spacing:-.008em;
  }

  .wlos-hero-text{
    font-size:18px;
  }

  .wlos-benefits-grid{
    grid-template-columns:1fr;
  }

  .wlos-revenue-engine{
    padding:56px 0;
  }

  .wlos-revenue-head{
    text-align:left;
  }

  .wlos-revenue-head h2{
    font-size:clamp(31px,9vw,42px);
  }

  .wlos-revenue-grid{
    grid-template-columns:1fr;
  }

  .wlos-revenue-card-main{
    grid-column:span 1;
  }

  .wlos-revenue-card{
    min-height:auto;
    padding:24px;
    border-radius:24px;
  }

  .wlos-revenue-flow{
    justify-content:flex-start;
    text-align:left;
  }

  .wlos-revenue-punch{
    text-align:left;
  }

  .wlos-how-flow{
    padding:56px 0;
  }

  .wlos-how-head{
    text-align:left;
  }

  .wlos-how-head h2{
    font-size:clamp(31px,9vw,42px);
  }

  .wlos-how-role{
    text-align:left;
    display:flex;
    align-items:center;
    gap:16px;
  }

  .wlos-how-role-icon{
    margin:0;
    flex:0 0 auto;
  }

  .wlos-how-step{
    padding:22px;
    border-radius:24px;
  }

  .wlos-how-step-num{
    font-size:92px;
  }

  .wlos-how-result{
    text-align:left;
  }

  .wlos-problem-v2{
    padding:56px 0;
  }

  .wlos-problem-v2-head{
    text-align:left;
  }

  .wlos-problem-v2-head h2{
    font-size:clamp(31px,9vw,42px);
  }

  .wlos-problem-v2-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .wlos-problem-v2-featured{
    grid-column:span 1;
    transform:none;
  }

  .wlos-problem-v2-card{
    min-height:auto;
    padding:24px;
    border-radius:24px;
  }

  .modules-grid{
    grid-template-columns:1fr;
  }

  .mod-card.ai-mod{
    grid-column:span 1;
  }

  .mod-card.ai-mod .mod-inner{
    flex-direction:column;
  }

  .ai-grid,
  .ai-features,
  .proof-metrics{
    grid-template-columns:1fr;
  }

  .mock-shot-card{
    width:286px;
    padding:18px 16px 16px;
    border-radius:24px;
  }

  .mock-feature-card{
    width:304px;
    padding:18px 16px 16px;
    border-radius:24px;
  }

  .mock-shot-device img,
  .mock-feature-device img{
    width:min(100%,240px);
    border-width:8px;
    border-radius:28px;
  }

  .mock-shot-device::after,
  .mock-feature-device::after{
    width:64px;
    height:16px;
    top:20px;
  }

  .ai-demo-head{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .ai-demo-date{
    margin-left:0;
    width:100%;
  }

  .foot-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media(max-width:620px){
  #pricing.pricing-section{
    padding:56px 0;
  }

  #pricing .plan,
  #pricing .pricing-setup-card,
  #pricing .pricing-roi-card{
    padding:24px 22px;
    border-radius:26px;
  }

  #pricing .plan-group{
    padding:12px;
  }

  #pricing .plan-pills li{
    font-size:11.5px;
  }

  #pricing .pricing-setup-grid{
    grid-template-columns:1fr;
  }

  #pricing .pricing-bottom-cta{
    align-items:flex-start;
    flex-direction:column;
  }

  #pricing .pricing-bottom-cta span{
    min-width:0;
  }

  #pricing .pricing-bottom-cta .btn{
    width:100%;
  }
}

@media(max-width:430px){
  .mock-shot-card{
    width:270px;
  }

  .mock-feature-card{
    width:286px;
  }

  .mock-shot-device img,
  .mock-feature-device img{
    width:min(100%,220px);
  }

  #pricing .pricing-roi-value{
    font-size:68px;
  }
}/* ════════════════════════════════════════════
   FIX — Large heading letter clipping / overlap
════════════════════════════════════════════ */

.wlos-revenue-head h2,
.wlos-revenue-head h2 span,
.wlos-problem-v2-head h2,
.wlos-problem-v2-head h2 span,
.wlos-how-head h2,
.wlos-how-head h2 span,
.pricing-section h2,
.pricing-section h2 span,
.ai-section h2,
.cta-section h2{
  line-height:1.12 !important;
  letter-spacing:-0.018em !important;
  padding-bottom:0.08em !important;
}

.wlos-revenue-head h2{
  margin-bottom:20px !important;
}

.wlos-revenue-head h2 span{
  margin-top:8px !important;
  display:inline-block !important;
}
.wlos-revenue-head{
  overflow:visible !important;
}

.wlos-revenue-head h2{
  overflow:visible !important;
}
/* ════════════════════════════════════════════
   FIX — Infinite object marquee without empty space
════════════════════════════════════════════ */

.wlos-object-marquee{
  width:100vw !important;
  overflow:hidden !important;
  position:relative !important;
  padding:18px 0 34px !important;
  margin-left:50% !important;
  transform:translateX(-50%) !important;
  mask-image:linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%) !important;
}

.wlos-object-track{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:34px !important;
  width:max-content !important;
  min-width:max-content !important;
  animation:wlosObjectsMove 38s linear infinite !important;
  will-change:transform !important;
}

.wlos-object-track:hover{
  animation-play-state:running !important;
}

.wlos-object-item{
  flex:0 0 210px !important;
  width:210px !important;
  height:220px !important;
}

.wlos-object-item img{
  width:150px !important;
  height:150px !important;
  object-fit:contain !important;
}

.wlos-object-item span{
  font-family:var(--head) !important;
  font-size:20px !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  letter-spacing:-0.01em !important;
}

@keyframes wlosObjectsMove{
  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(calc(-33.333%));
  }
}

@media(max-width:760px){
  .wlos-object-track{
    gap:22px !important;
    animation-duration:30s !important;
  }

  .wlos-object-item{
    flex-basis:150px !important;
    width:150px !important;
    height:160px !important;
  }

  .wlos-object-item img{
    width:108px !important;
    height:108px !important;
  }

  .wlos-object-item span{
    font-size:16px !important;
  }
}
/* ════════════════════════════════════════════
   WLOS CONTACT FORM — FINAL CTA
════════════════════════════════════════════ */

.wlos-contact-section{
  background:
    radial-gradient(circle at 18% 18%,rgba(240,78,35,.18),transparent 34%),
    radial-gradient(circle at 88% 78%,rgba(107,70,255,.14),transparent 34%),
    linear-gradient(135deg,#101426 0%,#0C0F1E 100%);
  padding:clamp(70px,8vw,110px) 0;
}

.wlos-contact-section::before{
  opacity:.75;
}

.wlos-contact-shell{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:34px;
  align-items:stretch;
  padding:34px;
  border-radius:38px;
  background:
    radial-gradient(circle at 90% 0%,rgba(240,78,35,.18),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 30px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.wlos-contact-copy{
  padding:18px 10px 18px 4px;
}

.wlos-contact-copy .s-label{
  color:#ffad8d;
}

.wlos-contact-copy .s-label::before{
  background:#ffad8d;
}

.wlos-contact-copy h2{
  color:#fff;
  font-size:clamp(36px,5vw,68px);
  line-height:1.02;
  letter-spacing:-.018em;
  margin-bottom:18px;
}

.wlos-contact-copy p{
  max-width:560px;
  color:rgba(255,255,255,.62);
  font-size:16px;
  line-height:1.74;
}

.wlos-contact-points{
  display:grid;
  gap:10px;
  margin-top:24px;
}

.wlos-contact-points span{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:rgba(255,255,255,.78);
  font-size:14.5px;
  line-height:1.5;
  font-weight:750;
}

.wlos-contact-points span::before{
  content:"✓";
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(16,185,129,.14);
  color:#7cffb0;
  font-size:12px;
  font-weight:900;
  margin-top:1px;
}

.wlos-contact-direct{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.wlos-contact-direct a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 15px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.82);
  font-size:13.5px;
  font-weight:800;
  transition:all .18s ease;
}

.wlos-contact-direct a:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  transform:translateY(-1px);
}

.wlos-contact-form{
  padding:26px;
  border-radius:30px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:
    0 22px 60px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.wlos-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.wlos-contact-form label{
  display:grid;
  gap:7px;
}

.wlos-contact-form label span{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
}

.wlos-contact-form input,
.wlos-contact-form textarea{
  width:100%;
  min-height:48px;
  padding:13px 14px;
  border-radius:16px;
  border:1.5px solid #E2E5F0;
  background:#F8F9FD;
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  font-weight:650;
  outline:none;
  transition:all .18s ease;
}

.wlos-contact-form textarea{
  min-height:112px;
  resize:vertical;
  line-height:1.55;
}

.wlos-contact-form input::placeholder,
.wlos-contact-form textarea::placeholder{
  color:#9BA2BD;
  font-weight:550;
}

.wlos-contact-form input:focus,
.wlos-contact-form textarea:focus{
  border-color:rgba(240,78,35,.42);
  background:#fff;
  box-shadow:
    0 0 0 4px rgba(240,78,35,.08),
    0 10px 24px rgba(12,15,30,.06);
}

.wlos-form-full{
  grid-column:1 / -1;
}

.wlos-form-submit{
  width:100%;
  min-height:58px;
  margin-top:18px;
  font-size:16px;
}

.wlos-form-note{
  margin-top:12px;
  color:var(--dim);
  font-size:12.5px;
  line-height:1.45;
  text-align:center;
}

@media(max-width:900px){
  .wlos-contact-shell{
    grid-template-columns:1fr;
    padding:28px;
  }

  .wlos-contact-copy{
    text-align:left;
    padding:0;
  }
}

@media(max-width:620px){
  .wlos-contact-section{
    padding:58px 0;
  }

  .wlos-contact-shell{
    padding:22px;
    border-radius:28px;
  }

  .wlos-contact-form{
    padding:20px;
    border-radius:24px;
  }

  .wlos-form-grid{
    grid-template-columns:1fr;
  }

  .wlos-contact-copy h2{
    font-size:clamp(34px,10vw,46px);
  }

  .wlos-contact-direct a{
    width:100%;
  }
}
/* ════════════════════════════════════════════
   WLOS CONTACT FORM — OFFER TOGGLE
════════════════════════════════════════════ */

.wlos-offer-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:18px;
}

.wlos-offer-option{
  position:relative;
  cursor:pointer;
}

.wlos-offer-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.wlos-offer-option span{
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:16px 18px;
  border-radius:20px;
  background:#F8F9FD;
  border:1.5px solid #E2E5F0;
  box-shadow:0 8px 22px rgba(12,15,30,.05);
  transition:all .18s ease;
}

.wlos-offer-option strong{
  display:block;
  font-family:var(--head);
  font-size:20px;
  line-height:1.05;
  font-weight:900;
  color:var(--ink);
  letter-spacing:-.01em;
}

.wlos-offer-option small{
  display:block;
  font-size:12.5px;
  line-height:1.35;
  font-weight:700;
  color:var(--muted);
}

.wlos-offer-option input:checked + span{
  background:
    radial-gradient(circle at 90% 0%,rgba(240,78,35,.16),transparent 38%),
    linear-gradient(180deg,#fff,#fff7f3);
  border-color:rgba(240,78,35,.42);
  box-shadow:
    0 0 0 4px rgba(240,78,35,.08),
    0 16px 34px rgba(240,78,35,.12);
}

.wlos-offer-option input:checked + span::after{
  content:"✓";
  position:absolute;
  top:12px;
  right:12px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--eGrad);
  color:#fff;
  font-size:13px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(240,78,35,.24);
}

.wlos-offer-option:hover span{
  transform:translateY(-2px);
  border-color:rgba(240,78,35,.28);
}

@media(max-width:620px){
  .wlos-offer-toggle{
    grid-template-columns:1fr;
  }

  .wlos-offer-option span{
    min-height:78px;
  }
}
/* ════════════════════════════════════════════
   WLOS CONTACT FORM — PREMIUM OFFER SWITCH
   For new HTML: .wlos-offer-switch
════════════════════════════════════════════ */

.wlos-offer-switch{
  display:grid;
  gap:12px;
  margin-bottom:20px;
}

.wlos-offer-switch-4{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.wlos-offer-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.wlos-offer-choice{
  position:relative;
  min-height:94px;
  padding:16px 18px;
  border-radius:22px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  user-select:none;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.56),transparent 34%),
    linear-gradient(180deg,#F8F9FD,#EFF2F8);
  border:1.5px solid rgba(205,209,232,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 14px 34px rgba(12,15,30,.08);
  transition:
    transform .18s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.wlos-offer-choice:hover{
  transform:translateY(-1px);
  border-color:rgba(240,78,35,.24);
}

.wlos-offer-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 8px 18px rgba(12,15,30,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
  font-size:20px;
  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.wlos-offer-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  text-align:left;
}

.wlos-offer-copy strong{
  display:block;
  font-family:var(--head);
  font-size:21px;
  line-height:1.02;
  font-weight:950;
  letter-spacing:-.012em;
  color:var(--ink);
  transition:color .18s ease;
}

.wlos-offer-copy small{
  display:block;
  font-size:12.5px;
  line-height:1.32;
  font-weight:750;
  color:var(--muted);
  transition:color .18s ease;
}

#offerBasic:checked ~ .wlos-offer-basic,
#offerBasic:focus-visible ~ .wlos-offer-basic{
  background:
    radial-gradient(circle at 85% 0%,rgba(255,255,255,.28),transparent 42%),
    linear-gradient(180deg,#64748B,#475569);
  border-color:rgba(71,85,105,.48);
  box-shadow:
    0 18px 36px rgba(71,85,105,.22),
    inset 0 1px 0 rgba(255,255,255,.22);
}

#offerStandard:checked ~ .wlos-offer-standard,
#offerStandard:focus-visible ~ .wlos-offer-standard{
  background:
    radial-gradient(circle at 85% 0%,rgba(255,255,255,.34),transparent 42%),
    var(--eGrad);
  border-color:rgba(240,78,35,.44);
  box-shadow:
    0 18px 36px rgba(240,78,35,.24),
    inset 0 1px 0 rgba(255,255,255,.22);
}

#offerPro:checked ~ .wlos-offer-pro,
#offerPro:focus-visible ~ .wlos-offer-pro{
  background:
    radial-gradient(circle at 85% 0%,rgba(255,255,255,.30),transparent 42%),
    linear-gradient(180deg,#F59E0B,#D97706);
  border-color:rgba(217,119,6,.42);
  box-shadow:
    0 18px 36px rgba(245,158,11,.24),
    inset 0 1px 0 rgba(255,255,255,.22);
}

#offerFull:checked ~ .wlos-offer-full,
#offerFull:focus-visible ~ .wlos-offer-full{
  background:
    radial-gradient(circle at 85% 0%,rgba(255,255,255,.32),transparent 42%),
    var(--aiGrad);
  border-color:rgba(107,70,255,.40);
  box-shadow:
    0 18px 36px rgba(107,70,255,.24),
    inset 0 1px 0 rgba(255,255,255,.22);
}

#offerBasic:checked ~ .wlos-offer-basic .wlos-offer-copy strong,
#offerBasic:checked ~ .wlos-offer-basic .wlos-offer-copy small,
#offerStandard:checked ~ .wlos-offer-standard .wlos-offer-copy strong,
#offerStandard:checked ~ .wlos-offer-standard .wlos-offer-copy small,
#offerPro:checked ~ .wlos-offer-pro .wlos-offer-copy strong,
#offerPro:checked ~ .wlos-offer-pro .wlos-offer-copy small,
#offerFull:checked ~ .wlos-offer-full .wlos-offer-copy strong,
#offerFull:checked ~ .wlos-offer-full .wlos-offer-copy small{
  color:#fff;
}

#offerBasic:checked ~ .wlos-offer-basic .wlos-offer-icon,
#offerStandard:checked ~ .wlos-offer-standard .wlos-offer-icon,
#offerPro:checked ~ .wlos-offer-pro .wlos-offer-icon,
#offerFull:checked ~ .wlos-offer-full .wlos-offer-icon{
  background:rgba(255,255,255,.96);
  transform:scale(1.04);
  box-shadow:
    0 10px 22px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.90);
}

/* Better contact label alignment */

.wlos-contact-copy .s-label{
  margin-left:0;
  margin-right:0;
}

/* Mobile */

@media(max-width:620px){
  .wlos-offer-switch-4{
    grid-template-columns:1fr;
  }

  .wlos-offer-choice{
    min-height:84px;
    padding:14px;
  }

  .wlos-offer-copy strong{
    font-size:20px;
  }

  .wlos-offer-copy small{
    font-size:12px;
  }
}

/* ════════════════════════════════════════════
   LANDMARK: WLOS PRICING — 4 PACKAGES FINAL
   Desktop: 4 cards | Tablet: 2 cards | Mobile: 1 card
════════════════════════════════════════════ */

#pricing .pricing-grid.pricing-grid-4{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
  margin-top:34px !important;
}

#pricing .pricing-tier{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  min-height:100% !important;
  padding:24px 20px 20px !important;
  border-radius:30px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.58),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86)) !important;
  border:1px solid rgba(17,24,39,.08) !important;
  box-shadow:
    0 22px 60px rgba(12,15,30,.10),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#pricing .pricing-tier::before{
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  top:0 !important;
  height:4px !important;
  border-radius:0 0 999px 999px !important;
  opacity:.95 !important;
}

#pricing .plan-basic::before{
  background:linear-gradient(90deg,#64748B,#94A3B8) !important;
}

#pricing .plan-standard::before{
  background:linear-gradient(90deg,#F04E23,#FF8A63) !important;
}

#pricing .plan-pro::before{
  background:linear-gradient(90deg,#F59E0B,#FACC15) !important;
}

#pricing .plan-full::before{
  background:linear-gradient(90deg,#6B46FF,#9B7BFF) !important;
}

#pricing .pricing-tier.plan-pro{
  transform:translateY(-8px) !important;
  border-color:rgba(245,158,11,.24) !important;
  box-shadow:
    0 30px 80px rgba(245,158,11,.16),
    0 16px 44px rgba(12,15,30,.10),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}

#pricing .pricing-tier.plan-full{
  border-color:rgba(107,70,255,.24) !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(155,123,255,.16),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,243,255,.90)) !important;
  box-shadow:
    0 30px 80px rgba(107,70,255,.14),
    0 16px 44px rgba(12,15,30,.10),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}

#pricing .pricing-tier .plan-badge{
  width:max-content !important;
  max-width:100% !important;
  margin:0 0 16px !important;
  padding:8px 11px !important;
  border-radius:999px !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  white-space:normal !important;
}

#pricing .pricing-tier .pb-soft{
  background:rgba(100,116,139,.10) !important;
  color:#475569 !important;
  border:1px solid rgba(100,116,139,.16) !important;
}

#pricing .pricing-tier .pb-gold{
  background:rgba(245,158,11,.12) !important;
  color:#B45309 !important;
  border:1px solid rgba(245,158,11,.22) !important;
}

#pricing .pricing-tier-top{
  min-height:154px !important;
}

#pricing .pricing-tier h3{
  margin:0 0 10px !important;
  font-family:var(--head) !important;
  font-size:clamp(25px,2vw,34px) !important;
  line-height:.96 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  color:var(--ink) !important;
}

#pricing .plan-basic h3{
  color:#334155 !important;
}

#pricing .plan-standard h3{
  color:#F04E23 !important;
}

#pricing .plan-pro h3{
  color:#B45309 !important;
}

#pricing .plan-full h3{
  color:#6B46FF !important;
}

#pricing .pricing-tier .plan-for{
  margin:0 !important;
  color:#596176 !important;
  font-size:13.5px !important;
  line-height:1.55 !important;
  font-weight:650 !important;
}

#pricing .pricing-tier .plan-for strong{
  color:var(--ink) !important;
  font-weight:900 !important;
}

#pricing .pricing-tier-price{
  margin:4px 0 16px !important;
  padding:16px 0 14px !important;
  border-top:1px solid rgba(17,24,39,.07) !important;
  border-bottom:1px solid rgba(17,24,39,.07) !important;
}

#pricing .pricing-tier .plan-price{
  margin:0 !important;
  font-family:var(--head) !important;
  font-size:clamp(42px,3.2vw,58px) !important;
  line-height:.86 !important;
  font-weight:950 !important;
  letter-spacing:-.055em !important;
  color:var(--ink) !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
}

#pricing .plan-basic .plan-price{
  color:#334155 !important;
}

#pricing .plan-standard .plan-price{
  color:#F04E23 !important;
}

#pricing .plan-pro .plan-price{
  color:#B45309 !important;
}

#pricing .plan-full .plan-price{
  color:#6B46FF !important;
}

#pricing .pricing-tier .plan-period{
  margin-top:7px !important;
  color:#7A8298 !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

#pricing .pricing-tier-focus{
  min-height:92px !important;
  margin:0 0 14px !important;
  padding:13px 13px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(17,24,39,.065) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#pricing .pricing-tier-focus strong{
  display:block !important;
  margin-bottom:5px !important;
  color:var(--ink) !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
}

#pricing .pricing-tier-focus span{
  display:block !important;
  color:#596176 !important;
  font-size:13px !important;
  line-height:1.45 !important;
  font-weight:700 !important;
}

#pricing .pricing-tier-feats{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  list-style:none !important;
}

#pricing .pricing-tier-feats li{
  position:relative !important;
  display:block !important;
  margin:0 !important;
  padding:11px 11px 11px 34px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.56) !important;
  border:1px solid rgba(17,24,39,.06) !important;
}

#pricing .pricing-tier-feats li::before{
  content:"✓" !important;
  position:absolute !important;
  left:11px !important;
  top:12px !important;
  width:16px !important;
  height:16px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999px !important;
  font-size:9px !important;
  font-weight:950 !important;
  color:#fff !important;
  background:#F04E23 !important;
}

#pricing .plan-basic .pricing-tier-feats li::before{
  background:#64748B !important;
}

#pricing .plan-standard .pricing-tier-feats li::before{
  background:#F04E23 !important;
}

#pricing .plan-pro .pricing-tier-feats li::before{
  background:#F59E0B !important;
}

#pricing .plan-full .pricing-tier-feats li::before{
  background:#6B46FF !important;
}

#pricing .pricing-tier-feats .plan-feat-copy strong{
  display:block !important;
  margin:0 0 3px !important;
  color:var(--ink) !important;
  font-size:13.5px !important;
  line-height:1.18 !important;
  font-weight:950 !important;
}

#pricing .pricing-tier-feats .plan-feat-copy small{
  display:block !important;
  color:#667085 !important;
  font-size:12.4px !important;
  line-height:1.38 !important;
  font-weight:650 !important;
}

#pricing .pricing-tier-btn{
  width:100% !important;
  min-height:48px !important;
  margin-top:auto !important;
  justify-content:center !important;
  text-align:center !important;
  border-radius:16px !important;
  font-weight:950 !important;
}

@media(max-width:1180px){
  #pricing .pricing-grid.pricing-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px !important;
  }

  #pricing .pricing-tier.plan-pro{
    transform:none !important;
  }

  #pricing .pricing-tier-top{
    min-height:128px !important;
  }
}

@media(max-width:680px){
  #pricing .pricing-grid.pricing-grid-4{
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin-top:26px !important;
  }

  #pricing .pricing-tier{
    padding:22px 18px 18px !important;
    border-radius:26px !important;
  }

  #pricing .pricing-tier-top{
    min-height:auto !important;
  }

  #pricing .pricing-tier-focus{
    min-height:auto !important;
  }

  #pricing .pricing-tier .plan-price{
    font-size:52px !important;
  }

  #pricing .pricing-tier h3{
    font-size:31px !important;
  }

  #pricing .pricing-tier-feats li{
    padding:11px 11px 11px 34px !important;
  }

  #pricing .pricing-tier-btn{
    min-height:52px !important;
  }
}

/* ════════════════════════════════════════════
   CONTACT FORM — 4 PACKAGE SELECTOR
════════════════════════════════════════════ */

.wlos-offer-switch.wlos-offer-switch-4{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  padding:0 !important;
  margin-bottom:22px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.wlos-offer-switch-4 .wlos-offer-switch-bg{
  display:none !important;
}

.wlos-offer-switch-4 input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.wlos-offer-switch-4 .wlos-offer-choice{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-height:82px !important;
  padding:14px !important;
  border-radius:20px !important;
  cursor:pointer !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.70),transparent 38%),
    rgba(255,255,255,.66) !important;
  border:1px solid rgba(17,24,39,.08) !important;
  box-shadow:
    0 14px 34px rgba(12,15,30,.08),
    inset 0 1px 0 rgba(255,255,255,.74) !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

.wlos-offer-switch-4 .wlos-offer-choice:hover{
  transform:translateY(-2px) !important;
  box-shadow:
    0 18px 44px rgba(12,15,30,.12),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.wlos-offer-switch-4 .wlos-offer-icon{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:15px !important;
  font-size:19px !important;
  background:rgba(17,24,39,.06) !important;
}

.wlos-offer-switch-4 .wlos-offer-copy strong{
  display:block !important;
  color:var(--ink) !important;
  font-family:var(--head) !important;
  font-size:17px !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:-.015em !important;
}

.wlos-offer-switch-4 .wlos-offer-copy small{
  display:block !important;
  margin-top:4px !important;
  color:#667085 !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.wlos-offer-switch-4 #offerBasic:checked ~ .wlos-offer-basic,
.wlos-offer-switch-4 #offerStandard:checked ~ .wlos-offer-standard,
.wlos-offer-switch-4 #offerPro:checked ~ .wlos-offer-pro,
.wlos-offer-switch-4 #offerFull:checked ~ .wlos-offer-full{
  transform:translateY(-2px) !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.85),transparent 38%),
    rgba(255,255,255,.92) !important;
  box-shadow:
    0 22px 54px rgba(12,15,30,.16),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.wlos-offer-switch-4 #offerBasic:checked ~ .wlos-offer-basic{
  border-color:rgba(100,116,139,.36) !important;
}

.wlos-offer-switch-4 #offerStandard:checked ~ .wlos-offer-standard{
  border-color:rgba(240,78,35,.42) !important;
}

.wlos-offer-switch-4 #offerPro:checked ~ .wlos-offer-pro{
  border-color:rgba(245,158,11,.42) !important;
}

.wlos-offer-switch-4 #offerFull:checked ~ .wlos-offer-full{
  border-color:rgba(107,70,255,.44) !important;
}

.wlos-offer-switch-4 #offerBasic:checked ~ .wlos-offer-basic .wlos-offer-icon{
  background:linear-gradient(135deg,#64748B,#94A3B8) !important;
  color:#fff !important;
}

.wlos-offer-switch-4 #offerStandard:checked ~ .wlos-offer-standard .wlos-offer-icon{
  background:linear-gradient(135deg,#F04E23,#FF8A63) !important;
  color:#fff !important;
}

.wlos-offer-switch-4 #offerPro:checked ~ .wlos-offer-pro .wlos-offer-icon{
  background:linear-gradient(135deg,#F59E0B,#FACC15) !important;
  color:#fff !important;
}

.wlos-offer-switch-4 #offerFull:checked ~ .wlos-offer-full .wlos-offer-icon{
  background:linear-gradient(135deg,#6B46FF,#9B7BFF) !important;
  color:#fff !important;
}

@media(max-width:680px){
  .wlos-offer-switch.wlos-offer-switch-4{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  .wlos-offer-switch-4 .wlos-offer-choice{
    min-height:72px !important;
    border-radius:18px !important;
  }
}

/* ════════════════════════════════════════════
   WLOS CONTACT FORM — CLEAN PREMIUM PLAN SELECTOR
   Final override. Put at the very bottom of wlos.css
════════════════════════════════════════════ */

.wlos-contact-form .wlos-offer-switch.wlos-offer-switch-4.wlos-plan-selector-clean{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 0 22px !important;
  padding:12px !important;
  border-radius:24px !important;
  background:
    linear-gradient(180deg,rgba(248,249,253,.96),rgba(255,255,255,.92)) !important;
  border:1px solid rgba(205,209,232,.86) !important;
  box-shadow:
    0 16px 38px rgba(12,15,30,.075),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  overflow:hidden !important;
}

.wlos-contact-form .wlos-plan-selector-clean::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 0% 0%,rgba(240,78,35,.075),transparent 34%),
    radial-gradient(circle at 100% 0%,rgba(107,70,255,.07),transparent 34%) !important;
}

.wlos-contact-form .wlos-plan-clean-head{
  position:relative !important;
  z-index:2 !important;
  grid-column:1 / -1 !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:2px 2px 7px !important;
}

.wlos-contact-form .wlos-plan-clean-head strong{
  color:#0C0F1E !important;
  font-family:var(--head) !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:-.018em !important;
}

.wlos-contact-form .wlos-plan-clean-head span{
  max-width:330px !important;
  color:#747C93 !important;
  font-family:var(--font) !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
  text-align:right !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.wlos-contact-form .wlos-plan-selector-clean input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-choice{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:44px 1fr 24px !important;
  align-items:center !important;
  gap:12px !important;
  min-height:88px !important;
  padding:14px 14px !important;
  border-radius:19px !important;
  cursor:pointer !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,248,252,.86)) !important;
  border:1px solid rgba(205,209,232,.78) !important;
  box-shadow:
    0 10px 24px rgba(12,15,30,.055),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
  transform:none !important;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-choice:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(12,15,30,.14) !important;
  box-shadow:
    0 14px 30px rgba(12,15,30,.085),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-choice::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:14px !important;
  bottom:14px !important;
  width:3px !important;
  border-radius:999px !important;
  background:rgba(148,163,184,.70) !important;
  transition:all .16s ease !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-standard::before{
  background:#F04E23 !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-pro::before{
  background:#F59E0B !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-full::before{
  background:#6B46FF !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-plan-mark{
  width:44px !important;
  height:44px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:15px !important;
  background:rgba(12,15,30,.045) !important;
  border:1px solid rgba(205,209,232,.74) !important;
  color:#687087 !important;
  font-family:var(--mono) !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;
  transition:all .16s ease !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-copy{
  min-width:0 !important;
  display:grid !important;
  gap:5px !important;
  text-align:left !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-copy strong{
  display:block !important;
  color:#0C0F1E !important;
  font-family:var(--head) !important;
  font-size:23px !important;
  line-height:.95 !important;
  font-weight:950 !important;
  letter-spacing:-.022em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-copy small{
  display:block !important;
  margin:0 !important;
  color:#6C7488 !important;
  font-family:var(--mono) !important;
  font-size:11px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
  letter-spacing:.045em !important;
  text-transform:uppercase !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-plan-check{
  width:22px !important;
  height:22px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999px !important;
  background:rgba(16,185,129,.12) !important;
  border:1px solid rgba(16,185,129,.20) !important;
  color:#10B981 !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:950 !important;
  opacity:0 !important;
  transform:scale(.72) !important;
  transition:opacity .15s ease, transform .15s ease !important;
}

/* Selected base */
.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full{
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.11),transparent 42%),
    linear-gradient(135deg,#101426 0%,#171B2F 100%) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:
    0 18px 42px rgba(12,15,30,.22),
    0 0 0 3px rgba(12,15,30,.045),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic::before,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard::before,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro::before,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full::before{
  top:0 !important;
  bottom:0 !important;
  width:4px !important;
  border-radius:0 !important;
}

/* Selected accent glow */
.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic{
  box-shadow:
    0 18px 42px rgba(12,15,30,.22),
    0 0 0 3px rgba(100,116,139,.10),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard{
  box-shadow:
    0 18px 42px rgba(12,15,30,.22),
    0 0 0 3px rgba(240,78,35,.12),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro{
  box-shadow:
    0 18px 42px rgba(12,15,30,.22),
    0 0 0 3px rgba(245,158,11,.13),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full{
  box-shadow:
    0 18px 42px rgba(12,15,30,.22),
    0 0 0 3px rgba(107,70,255,.13),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic .wlos-plan-mark,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard .wlos-plan-mark,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro .wlos-plan-mark,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full .wlos-plan-mark{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#fff !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic .wlos-offer-copy strong,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard .wlos-offer-copy strong,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro .wlos-offer-copy strong,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full .wlos-offer-copy strong{
  color:#fff !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic .wlos-offer-copy small,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard .wlos-offer-copy small,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro .wlos-offer-copy small,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full .wlos-offer-copy small{
  color:rgba(255,255,255,.68) !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic .wlos-plan-check,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard .wlos-plan-check,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro .wlos-plan-check,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full .wlos-plan-check{
  opacity:1 !important;
  transform:scale(1) !important;
}

@media(max-width:680px){
  .wlos-contact-form .wlos-offer-switch.wlos-offer-switch-4.wlos-plan-selector-clean{
    grid-template-columns:1fr !important;
    gap:9px !important;
    padding:11px !important;
    border-radius:22px !important;
  }

  .wlos-contact-form .wlos-plan-clean-head{
    display:grid !important;
    gap:5px !important;
  }

  .wlos-contact-form .wlos-plan-clean-head span{
    max-width:none !important;
    text-align:left !important;
  }

  .wlos-contact-form .wlos-plan-selector-clean .wlos-offer-choice{
    min-height:78px !important;
    grid-template-columns:42px 1fr 22px !important;
    padding:12px 13px !important;
    border-radius:17px !important;
  }

  .wlos-contact-form .wlos-plan-selector-clean .wlos-plan-mark{
    width:42px !important;
    height:42px !important;
    border-radius:14px !important;
  }

  .wlos-contact-form .wlos-plan-selector-clean .wlos-offer-copy strong{
    font-size:22px !important;
  }

  .wlos-contact-form .wlos-plan-selector-clean .wlos-offer-copy small{
    font-size:10.5px !important;
  }
}

/* ════════════════════════════════════════════
   WLOS CONTACT FORM — COLORFUL CLEAN PLAN BUTTONS
   Put at the very bottom of wlos.css
════════════════════════════════════════════ */

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-basic{
  --plan:#64748B;
  --plan2:#94A3B8;
  --planSoft:rgba(100,116,139,.105);
  --planSoft2:rgba(100,116,139,.16);
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-standard{
  --plan:#F04E23;
  --plan2:#FF8A63;
  --planSoft:rgba(240,78,35,.105);
  --planSoft2:rgba(240,78,35,.17);
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-pro{
  --plan:#F59E0B;
  --plan2:#FACC15;
  --planSoft:rgba(245,158,11,.12);
  --planSoft2:rgba(245,158,11,.19);
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-full{
  --plan:#6B46FF;
  --plan2:#9B7BFF;
  --planSoft:rgba(107,70,255,.115);
  --planSoft2:rgba(107,70,255,.18);
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-choice{
  min-height:86px !important;
  background:
    radial-gradient(circle at 100% 0%,var(--planSoft2),transparent 42%),
    linear-gradient(180deg,#FFFFFF 0%,#F8F9FD 100%) !important;
  border-color:color-mix(in srgb, var(--plan) 24%, rgba(205,209,232,.78)) !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-choice::before{
  background:linear-gradient(180deg,var(--plan),var(--plan2)) !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-plan-mark{
  background:var(--planSoft) !important;
  border-color:var(--planSoft2) !important;
  color:var(--plan) !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-copy strong{
  color:#0C0F1E !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-copy small{
  display:flex !important;
  align-items:flex-end !important;
  gap:7px !important;
  margin:0 !important;
  color:#7B849A !important;
  font-family:var(--font) !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-copy small b{
  display:block !important;
  color:var(--plan) !important;
  font-family:var(--head) !important;
  font-size:27px !important;
  line-height:.82 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
}

.wlos-contact-form .wlos-plan-selector-clean .wlos-offer-copy small em{
  display:block !important;
  padding-bottom:3px !important;
  color:#7B849A !important;
  font-style:normal !important;
  font-family:var(--mono) !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}

/* selected — цветен, но не крещящ */
.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb, var(--plan) 34%, transparent),transparent 44%),
    linear-gradient(135deg,#101426 0%,#171B2F 100%) !important;
  border-color:color-mix(in srgb, var(--plan) 62%, rgba(255,255,255,.14)) !important;
  box-shadow:
    0 18px 42px rgba(12,15,30,.22),
    0 0 0 3px color-mix(in srgb, var(--plan) 16%, transparent),
    0 0 34px color-mix(in srgb, var(--plan) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.13) !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic .wlos-plan-mark,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard .wlos-plan-mark,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro .wlos-plan-mark,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full .wlos-plan-mark{
  background:linear-gradient(135deg,var(--plan),var(--plan2)) !important;
  border-color:rgba(255,255,255,.18) !important;
  color:#fff !important;
  box-shadow:0 10px 24px color-mix(in srgb, var(--plan) 25%, transparent) !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic .wlos-offer-copy strong,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard .wlos-offer-copy strong,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro .wlos-offer-copy strong,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full .wlos-offer-copy strong{
  color:#fff !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic .wlos-offer-copy small b,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard .wlos-offer-copy small b,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro .wlos-offer-copy small b,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full .wlos-offer-copy small b{
  color:var(--plan2) !important;
  text-shadow:0 0 18px color-mix(in srgb, var(--plan) 30%, transparent) !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic .wlos-offer-copy small em,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard .wlos-offer-copy small em,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro .wlos-offer-copy small em,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full .wlos-offer-copy small em{
  color:rgba(255,255,255,.62) !important;
}

.wlos-contact-form .wlos-plan-selector-clean #offerBasic:checked ~ .wlos-offer-basic .wlos-plan-check,
.wlos-contact-form .wlos-plan-selector-clean #offerStandard:checked ~ .wlos-offer-standard .wlos-plan-check,
.wlos-contact-form .wlos-plan-selector-clean #offerPro:checked ~ .wlos-offer-pro .wlos-plan-check,
.wlos-contact-form .wlos-plan-selector-clean #offerFull:checked ~ .wlos-offer-full .wlos-plan-check{
  background:linear-gradient(135deg,var(--plan),var(--plan2)) !important;
  border-color:rgba(255,255,255,.18) !important;
  color:#fff !important;
  box-shadow:0 10px 22px color-mix(in srgb, var(--plan) 26%, transparent) !important;
}

@media(max-width:680px){
  .wlos-contact-form .wlos-plan-selector-clean .wlos-offer-copy small b{
    font-size:25px !important;
  }

  .wlos-contact-form .wlos-plan-selector-clean .wlos-offer-copy small em{
    font-size:9.5px !important;
  }
}

/* ════════════════════════════════════════════
   FIX — More Mockups heading clipping
   Поправя изрязания текст: "По-висока конверсия"
════════════════════════════════════════════ */

.more-mockups-section .mockups-head{
  max-width:1040px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:16px !important;
  padding-right:16px !important;
  overflow:visible !important;
}

.more-mockups-section .mockups-head h2{
  max-width:min(100%,1040px) !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow:visible !important;
  line-height:1.08 !important;
  letter-spacing:-0.018em !important;
  padding-bottom:.08em !important;
}

.more-mockups-section .mockups-head h2 span{
  display:block !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  padding-right:.12em !important;
}

@media(max-width:760px){
  .more-mockups-section .mockups-head{
    text-align:left !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .more-mockups-section .mockups-head h2{
    font-size:clamp(34px,10vw,48px) !important;
    line-height:1.08 !important;
  }
}

/* ════════════════════════════════════════════
   WLOS DATA ENGINE — ORDERS TO INTELLIGENCE
════════════════════════════════════════════ */

.wlos-data-engine{
  position:relative;
  padding:clamp(66px,8vw,112px) 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 18%,rgba(240,78,35,.12),transparent 34%),
    radial-gradient(circle at 86% 76%,rgba(107,70,255,.11),transparent 34%),
    linear-gradient(180deg,#FFFFFF 0%,#F3F5FB 100%);
}

.wlos-data-engine::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(12,15,30,.028) 1px,transparent 1px),
    linear-gradient(180deg,rgba(12,15,30,.024) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.58),transparent 88%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.58),transparent 88%);
}

.wlos-data-engine .wrap{
  position:relative;
  z-index:1;
}

.wlos-data-head{
  max-width:940px;
  margin:0 auto clamp(34px,5vw,54px);
  text-align:center;
}

.wlos-data-head .s-label{
  margin-left:auto;
  margin-right:auto;
}

.wlos-data-head h2{
  font-size:clamp(34px,5vw,64px);
  line-height:1.06;
  letter-spacing:-.018em;
  margin-bottom:18px;
}

.wlos-data-head h2 span{
  display:block;
  margin-top:7px;
  background:var(--eGrad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.wlos-data-head p{
  max-width:820px;
  margin:0 auto;
  color:var(--muted);
  font-size:clamp(15px,1.55vw,18px);
  line-height:1.75;
  font-weight:550;
}

.wlos-data-hero{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:24px;
  align-items:center;
  margin-bottom:18px;
  padding:30px;
  border-radius:34px;
  background:
    radial-gradient(circle at 92% 0%,rgba(240,78,35,.13),transparent 34%),
    radial-gradient(circle at 8% 100%,rgba(107,70,255,.09),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.76));
  border:1.5px solid rgba(205,209,232,.86);
  box-shadow:
    0 24px 66px rgba(12,15,30,.09),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.wlos-data-number{
  min-height:190px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:24px;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.34),transparent 46%),
    linear-gradient(135deg,#101426 0%,#171B2F 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 22px 54px rgba(12,15,30,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.wlos-data-number strong{
  display:block;
  font-family:var(--head);
  font-size:clamp(76px,8vw,126px);
  line-height:.78;
  letter-spacing:-.04em;
  font-weight:950;
  background:var(--eGrad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.wlos-data-number span{
  display:block;
  margin-top:12px;
  color:rgba(255,255,255,.66);
  font-family:var(--mono);
  font-size:11px;
  line-height:1.3;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.wlos-data-hero-copy h3{
  max-width:760px;
  margin-bottom:14px;
  color:var(--ink);
  font-size:clamp(28px,3.2vw,44px);
  line-height:1.04;
  letter-spacing:-.014em;
}

.wlos-data-hero-copy p{
  max-width:780px;
  color:var(--muted);
  font-size:16px;
  line-height:1.72;
  font-weight:600;
}

.wlos-data-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.wlos-data-card{
  position:relative;
  overflow:hidden;
  min-height:250px;
  padding:25px;
  border-radius:28px;
  background:
    radial-gradient(circle at 88% 12%,rgba(240,78,35,.085),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,255,255,.74));
  border:1.5px solid rgba(205,209,232,.86);
  box-shadow:
    0 18px 46px rgba(12,15,30,.075),
    inset 0 1px 0 rgba(255,255,255,.90);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.wlos-data-card:hover{
  transform:translateY(-4px);
  border-color:rgba(240,78,35,.24);
  box-shadow:
    0 26px 64px rgba(12,15,30,.11),
    0 0 38px rgba(240,78,35,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.wlos-data-card::after{
  content:"";
  position:absolute;
  right:-58px;
  bottom:-58px;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(107,70,255,.08),transparent 68%);
  pointer-events:none;
}

.wlos-data-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:18px;
  background:var(--e3);
  border:1px solid var(--e4);
  font-size:25px;
  box-shadow:0 12px 28px rgba(240,78,35,.08);
}

.wlos-data-card h3{
  position:relative;
  z-index:1;
  margin-bottom:12px;
  color:var(--ink);
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.08;
  letter-spacing:-.008em;
}

.wlos-data-card p{
  position:relative;
  z-index:1;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.68;
  font-weight:600;
}

.wlos-data-ai{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  align-items:center;
  margin-top:18px;
  padding:28px;
  border-radius:32px;
  background:
    radial-gradient(circle at 88% 0%,rgba(155,123,255,.22),transparent 34%),
    linear-gradient(135deg,#101426 0%,#0C0F1E 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 26px 76px rgba(12,15,30,.24),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.wlos-data-ai-badge{
  min-height:118px;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.14),transparent 48%),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#9B7BFF;
  font-family:var(--head);
  font-size:34px;
  line-height:.95;
  font-weight:950;
  letter-spacing:-.03em;
}

.wlos-data-ai h3{
  max-width:900px;
  margin-bottom:10px;
  color:#fff;
  font-size:clamp(25px,3vw,40px);
  line-height:1.04;
  letter-spacing:-.014em;
}

.wlos-data-ai p{
  max-width:900px;
  color:rgba(255,255,255,.62);
  font-size:15.5px;
  line-height:1.72;
  font-weight:600;
}

@media(max-width:980px){
  .wlos-data-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .wlos-data-hero{
    grid-template-columns:220px 1fr;
  }
}

@media(max-width:760px){
  .wlos-data-engine{
    padding:56px 0;
  }

  .wlos-data-head{
    text-align:left;
  }

  .wlos-data-head .s-label{
    margin-left:0;
    margin-right:0;
  }

  .wlos-data-head h2{
    font-size:clamp(32px,9vw,44px);
    line-height:1.08;
  }

  .wlos-data-hero,
  .wlos-data-ai{
    grid-template-columns:1fr;
    padding:22px;
    border-radius:28px;
  }

  .wlos-data-number{
    min-height:150px;
  }

  .wlos-data-grid{
    grid-template-columns:1fr;
  }

  .wlos-data-card{
    min-height:auto;
    padding:22px;
    border-radius:24px;
  }

  .wlos-data-ai-badge{
    min-height:82px;
    font-size:30px;
  }
}


/* ==========================================================
   WLOS LANDING LIVE DEMO V1
   ========================================================== */

.wlos-nav-live-demo {
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  padding:8px 12px !important;
  border:1px solid rgba(240,78,35,.36);
  border-radius:999px;
  background:rgba(240,78,35,.08);
  color:#ff744d !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.07em;
}

.wlos-live-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff5d36;
  box-shadow:
    0 0 0 4px rgba(240,78,35,.1),
    0 0 16px rgba(240,78,35,.75);
  animation:wlos-demo-pulse 1.8s ease-in-out infinite;
}

@keyframes wlos-demo-pulse {
  0%,100% {
    transform:scale(.86);
    opacity:.7;
  }

  50% {
    transform:scale(1.15);
    opacity:1;
  }
}

.wlos-drawer-live-demo {
  border:1px solid rgba(240,78,35,.2) !important;
  background:rgba(240,78,35,.05) !important;
}

.wlos-drawer-live-demo span:nth-child(2) {
  color:#ff744d;
  font-weight:900;
}

.wlos-drawer-live-dot {
  width:8px;
  height:8px;
  margin-left:auto;
  border-radius:50%;
  background:#ff5d36;
  box-shadow:0 0 14px rgba(240,78,35,.7);
}


/* HERO */

.wlos-hero-demo-actions {
  width:100%;
  margin:24px auto 30px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.wlos-hero-demo-primary,
.wlos-hero-demo-secondary {
  min-height:54px;
  border-radius:16px;
  text-decoration:none;
}

.wlos-hero-demo-primary {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:9px 18px 9px 10px;
  background:linear-gradient(135deg,#f04e23,#ff6d43);
  border:1px solid rgba(255,125,80,.46);
  color:#fff;
  font-size:14px;
  font-weight:900;
  box-shadow:0 16px 42px rgba(240,78,35,.24);
  transition:.2s ease;
}

.wlos-hero-demo-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 22px 52px rgba(240,78,35,.34);
}

.wlos-hero-demo-live {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 9px;
  border-radius:10px;
  background:rgba(7,8,10,.83);
  font-family:"JetBrains Mono",monospace;
  font-size:9px;
  letter-spacing:.08em;
}

.wlos-hero-demo-live i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#38e989;
  box-shadow:0 0 10px rgba(56,233,137,.8);
}

.wlos-hero-demo-primary > b {
  font-size:18px;
}

.wlos-hero-demo-secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.66);
  font-size:13px;
  font-weight:800;
}


/* SECTION */

.wlos-live-demo-section {
  position:relative;
  overflow:hidden;
  padding:clamp(82px,10vw,140px) 0;
  background:
    radial-gradient(
      900px 500px at 50% 0%,
      rgba(240,78,35,.09),
      transparent 68%
    ),
    linear-gradient(
      180deg,
      #08090b,
      #0c0d10 48%,
      #08090b
    );
  border-top:1px solid rgba(255,255,255,.045);
  border-bottom:1px solid rgba(255,255,255,.045);
}

.wlos-live-demo-section > .wrap {
  position:relative;
  z-index:2;
}

.wlos-live-demo-glow {
  position:absolute;
  width:600px;
  height:600px;
  border-radius:50%;
  pointer-events:none;
}

.demo-glow-left {
  left:-420px;
  top:80px;
  background:
    radial-gradient(
      circle,
      rgba(240,78,35,.1),
      transparent 70%
    );
}

.demo-glow-right {
  right:-420px;
  bottom:-100px;
  background:
    radial-gradient(
      circle,
      rgba(113,71,255,.08),
      transparent 70%
    );
}


/* HEAD */

.wlos-live-demo-head {
  max-width:860px;
  margin:0 auto 45px;
  text-align:center;
}

.wlos-live-demo-eyebrow {
  width:max-content;
  max-width:100%;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border:1px solid rgba(240,78,35,.23);
  border-radius:999px;
  background:rgba(240,78,35,.06);
  color:#ff744d;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.wlos-live-demo-eyebrow span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#38e989;
  box-shadow:
    0 0 0 5px rgba(56,233,137,.07),
    0 0 15px rgba(56,233,137,.6);
}

.wlos-live-demo-head h2 {
  margin:0;
  color:#fff;
  font-size:clamp(40px,6vw,74px);
  line-height:.98;
  letter-spacing:-.055em;
}

.wlos-live-demo-head h2 span {
  display:block;
  margin-top:8px;
  background:
    linear-gradient(
      110deg,
      #ff6b42,
      #ff9a57 50%,
      #f04e23
    );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.wlos-live-demo-head p {
  max-width:690px;
  margin:22px auto 0;
  color:rgba(255,255,255,.54);
  font-size:16px;
  line-height:1.7;
}


/* MAIN STAGE */

.wlos-live-demo-stage {
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:28px;
  background:
    linear-gradient(
      145deg,
      rgba(19,20,25,.98),
      rgba(9,10,13,.99)
    );
  box-shadow:
    0 40px 100px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.wlos-live-demo-stage-top {
  min-height:48px;
  padding:0 18px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.018);
}

.wlos-live-demo-browser-dots {
  display:flex;
  gap:6px;
}

.wlos-live-demo-browser-dots i {
  width:8px;
  height:8px;
  border-radius:50%;
}

.wlos-live-demo-browser-dots i:nth-child(1) {
  background:#f04e23;
}

.wlos-live-demo-browser-dots i:nth-child(2) {
  background:#e5b74e;
}

.wlos-live-demo-browser-dots i:nth-child(3) {
  background:#38ca7e;
}

.wlos-live-demo-url {
  color:rgba(255,255,255,.3);
  font-family:"JetBrains Mono",monospace;
  font-size:9px;
  text-align:center;
  letter-spacing:.05em;
}

.wlos-live-demo-online {
  display:flex;
  align-items:center;
  gap:7px;
  color:rgba(255,255,255,.4);
  font-family:"JetBrains Mono",monospace;
  font-size:8px;
  letter-spacing:.07em;
}

.wlos-live-demo-online span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#38e989;
  box-shadow:0 0 10px rgba(56,233,137,.7);
}

.wlos-live-demo-stage-body {
  padding:clamp(26px,4vw,52px);
  display:grid;
  grid-template-columns:
    minmax(0,1.05fr)
    minmax(350px,.95fr);
  gap:clamp(28px,5vw,70px);
  align-items:center;
}


/* COPY */

.wlos-live-demo-copy > small {
  color:#f06a44;
  font-family:"JetBrains Mono",monospace;
  font-size:9px;
  font-weight:900;
  letter-spacing:.13em;
}

.wlos-live-demo-copy h3 {
  max-width:620px;
  margin:12px 0 0;
  color:#fff;
  font-size:clamp(32px,4.5vw,56px);
  line-height:1;
  letter-spacing:-.045em;
}

.wlos-live-demo-copy h3 span {
  display:block;
  margin-top:6px;
  color:#ff7047;
}

.wlos-live-demo-copy > p {
  max-width:610px;
  margin:20px 0 0;
  color:rgba(255,255,255,.53);
  font-size:14px;
  line-height:1.68;
}

.wlos-live-demo-proof {
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.wlos-live-demo-proof > div {
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:13px;
  background:rgba(255,255,255,.025);
  display:grid;
  gap:3px;
}

.wlos-live-demo-proof strong {
  color:rgba(255,255,255,.9);
  font-size:12px;
}

.wlos-live-demo-proof span {
  color:rgba(255,255,255,.34);
  font-size:9px;
}

.wlos-live-demo-launch {
  width:max-content;
  max-width:100%;
  min-height:62px;
  margin-top:27px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:9px 17px 9px 10px;
  border:1px solid rgba(255,112,70,.44);
  border-radius:17px;
  background:linear-gradient(135deg,#f04e23,#ff7048);
  color:#fff;
  text-decoration:none;
  box-shadow:0 18px 46px rgba(240,78,35,.22);
  transition:.2s ease;
}

.wlos-live-demo-launch:hover {
  transform:translateY(-2px);
  box-shadow:0 24px 58px rgba(240,78,35,.3);
}

.wlos-live-demo-launch > span {
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(7,8,10,.8);
}

.wlos-live-demo-launch > div {
  display:grid;
  gap:2px;
}

.wlos-live-demo-launch small {
  color:rgba(255,255,255,.65);
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
}

.wlos-live-demo-launch strong {
  font-size:14px;
  font-weight:900;
}

.wlos-live-demo-launch > b {
  margin-left:4px;
  font-size:18px;
}

.wlos-live-demo-note {
  margin-top:10px;
  color:rgba(255,255,255,.28);
  font-size:9px;
}


/* CONSOLE */

.wlos-live-demo-console {
  padding:17px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  background:#08090b;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.015),
    0 24px 60px rgba(0,0,0,.26);
}

.wlos-live-demo-console-head {
  min-height:34px;
  padding:0 3px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.055);
  color:rgba(255,255,255,.57);
  font-family:"JetBrains Mono",monospace;
  font-size:9px;
  font-weight:900;
}

.wlos-live-demo-console-head > div {
  display:flex;
  align-items:center;
  gap:7px;
}

.wlos-live-demo-console-head > div span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#38e989;
  box-shadow:0 0 10px rgba(56,233,137,.65);
}

.wlos-live-demo-console-head small {
  color:rgba(255,255,255,.24);
  font-size:7px;
}

.wlos-live-demo-console-grid {
  margin-top:13px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.wlos-live-demo-console-grid article {
  padding:13px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:13px;
  background:rgba(255,255,255,.025);
  display:grid;
  gap:4px;
}

.wlos-live-demo-console-grid article small {
  color:rgba(255,255,255,.27);
  font-family:"JetBrains Mono",monospace;
  font-size:8px;
}

.wlos-live-demo-console-grid article strong {
  color:#fff;
  font-family:"JetBrains Mono",monospace;
  font-size:20px;
}

.wlos-live-demo-console-grid article.is-ai strong {
  color:#b196ff;
}

.wlos-live-demo-console-grid article span {
  color:rgba(255,255,255,.34);
  font-size:9px;
}

.wlos-live-demo-lines {
  margin-top:12px;
}

.wlos-live-demo-lines > div {
  min-height:40px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.045);
}

.wlos-live-demo-lines > div:last-child {
  border-bottom:0;
}

.wlos-live-demo-lines > div > span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#38e989;
  box-shadow:0 0 9px rgba(56,233,137,.5);
}

.wlos-live-demo-lines .ai-line > span {
  background:#9c78ff;
  box-shadow:0 0 9px rgba(156,120,255,.55);
}

.wlos-live-demo-lines b {
  color:rgba(255,255,255,.7);
  font-size:10px;
}

.wlos-live-demo-lines small {
  color:rgba(255,255,255,.23);
  font-family:"JetBrains Mono",monospace;
  font-size:7px;
}


/* ROLE CARDS */

.wlos-live-demo-journey {
  margin-top:15px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.wlos-live-demo-role {
  position:relative;
  overflow:hidden;
  min-height:210px;
  padding:20px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.028),
      rgba(255,255,255,.012)
    );
}

.wlos-live-demo-role-ai {
  border-color:rgba(135,95,255,.18);
  background:
    linear-gradient(
      145deg,
      rgba(115,76,255,.065),
      rgba(255,255,255,.012)
    );
}

.wlos-live-demo-role-number {
  position:absolute;
  right:16px;
  top:15px;
  color:rgba(255,255,255,.11);
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  font-weight:900;
}

.wlos-live-demo-role-icon {
  width:42px;
  height:42px;
  margin-bottom:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.065);
  border-radius:13px;
  background:rgba(255,255,255,.03);
  font-size:19px;
}

.wlos-live-demo-role > small {
  display:block;
  margin-bottom:7px;
  color:#f06a44;
  font-family:"JetBrains Mono",monospace;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.wlos-live-demo-role-ai > small {
  color:#aa8cff;
}

.wlos-live-demo-role h3 {
  margin:0;
  color:rgba(255,255,255,.92);
  font-size:18px;
}

.wlos-live-demo-role p {
  margin:10px 0 0;
  color:rgba(255,255,255,.39);
  font-size:11px;
  line-height:1.55;
}


/* BOTTOM */

.wlos-live-demo-bottom {
  margin-top:15px;
  padding:19px 21px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid rgba(240,78,35,.13);
  border-radius:18px;
  background:
    linear-gradient(
      110deg,
      rgba(240,78,35,.07),
      rgba(255,255,255,.018)
    );
}

.wlos-live-demo-bottom > div {
  display:grid;
  gap:5px;
}

.wlos-live-demo-bottom small {
  color:#f06a44;
  font-family:"JetBrains Mono",monospace;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}

.wlos-live-demo-bottom strong {
  max-width:730px;
  color:rgba(255,255,255,.8);
  font-size:13px;
  line-height:1.4;
}

.wlos-live-demo-bottom > a {
  flex:0 0 auto;
  min-height:42px;
  padding:0 15px;
  display:flex;
  align-items:center;
  border:1px solid rgba(240,78,35,.3);
  border-radius:12px;
  background:rgba(240,78,35,.1);
  color:#ff744d;
  text-decoration:none;
  font-size:11px;
  font-weight:900;
}


/* TABLET */

@media (max-width:980px) {

  .wlos-live-demo-stage-body {
    grid-template-columns:1fr;
  }

  .wlos-live-demo-console {
    width:100%;
    max-width:720px;
    margin:0 auto;
  }

  .wlos-live-demo-journey {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* MOBILE */

@media (max-width:720px) {

  .wlos-live-demo-section {
    padding:76px 0;
  }

  .wlos-live-demo-head {
    margin-bottom:30px;
  }

  .wlos-live-demo-head h2 {
    font-size:clamp(38px,12vw,56px);
  }

  .wlos-live-demo-head p {
    font-size:13px;
    line-height:1.6;
  }

  .wlos-live-demo-stage {
    border-radius:20px;
  }

  .wlos-live-demo-stage-top {
    padding:0 12px;
    grid-template-columns:auto minmax(0,1fr);
  }

  .wlos-live-demo-online {
    display:none;
  }

  .wlos-live-demo-url {
    text-align:right;
  }

  .wlos-live-demo-stage-body {
    padding:22px 16px 18px;
    gap:30px;
  }

  .wlos-live-demo-copy h3 {
    font-size:clamp(32px,10vw,46px);
  }

  .wlos-live-demo-copy > p {
    font-size:12px;
  }

  .wlos-live-demo-proof {
    grid-template-columns:1fr;
  }

  .wlos-live-demo-launch {
    width:100%;
  }

  .wlos-live-demo-launch > b {
    margin-left:auto;
  }

  .wlos-live-demo-note {
    text-align:center;
  }

  .wlos-live-demo-console {
    padding:13px;
  }

  .wlos-live-demo-journey {
    grid-template-columns:1fr;
  }

  .wlos-live-demo-role {
    min-height:0;
  }

  .wlos-live-demo-bottom {
    align-items:flex-start;
    flex-direction:column;
  }

  .wlos-live-demo-bottom > a {
    width:100%;
    justify-content:center;
  }

}


@media (max-width:520px) {

  .wlos-hero-demo-actions {
    align-items:stretch;
    flex-direction:column;
  }

  .wlos-hero-demo-primary,
  .wlos-hero-demo-secondary {
    width:100%;
    justify-content:center;
  }

  .wlos-hero-demo-primary > b {
    margin-left:auto;
  }

  .wlos-live-demo-console-grid {
    grid-template-columns:1fr;
  }

}


