/* ==========================================================
     ZAIFER LANDING — Black/Neon (SCOPED) + Day/Night
     ========================================================== */
  .zf-landing{
    --bg: #070A10;
    --card: rgba(16, 20, 28, .86);
    --card2: rgba(12, 16, 24, .72);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.68);
    --line: rgba(255,255,255,.10);
    --chip: rgba(0, 255, 209, .12);
    --brand: #00FFD1;
    --brand2: #7C5CFF;
    --gold: #FFD36A;

    --glass: rgba(0,0,0,.18);
    --glass2: rgba(0,0,0,.22);
    --glass3: rgba(10,12,16,.72);
    --popbg: rgba(10,12,16,.88);
    --btnbg: rgba(255,255,255,.06);
    --floatbg: rgba(10,12,16,.78);
    --toastbg: rgba(10,12,16,.82);

    color: var(--text);
    background:
      radial-gradient(900px 500px at 20% -10%, rgb(0 255 209 / 64%), #00000078 60%),
      radial-gradient(900px 500px at 95% 10%, rgb(124 92 255), #700ca196 55%),
      radial-gradient(900px 500px at 35% 110%, rgb(255 211 106 / 65%), #b3218d24 55%),
      linear-gradient(180deg, #05070c 0%, #540855 60%, #1544f191 100%);
    padding: 26px 14px 44px;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  }

  .zf-landing[data-theme="light"]{
    --bg: #F6F8FC;
    --card: rgba(255,255,255,.86);
    --card2: rgba(255,255,255,.72);
    --text: rgba(12,14,18,.92);
    --muted: rgba(12,14,18,.70);
    --line: rgba(12,14,18,.14);
    --chip: rgba(0, 165, 140, .12);

    --glass: rgba(255,255,255,.72);
    --glass2: rgba(255,255,255,.82);
    --glass3: rgba(255,255,255,.78);
    --popbg: rgba(250,251,253,.92);
    --btnbg: rgba(0,0,0,.04);
    --floatbg: rgba(255,255,255,.80);
    --toastbg: rgba(255,255,255,.88);

    background:
      radial-gradient(900px 500px at 20% -10%, rgba(0, 255, 209, .22), transparent 60%),
      radial-gradient(900px 500px at 95% 10%, rgba(124, 92, 255, .18), transparent 55%),
      radial-gradient(900px 500px at 35% 110%, rgba(255, 211, 106, .22), transparent 55%),
      linear-gradient(180deg, #F7F9FF 0%, #FFFFFF 60%, #F4F7FF 100%);
  }

  .zf-landing .wrap{ max-width: 1180px; margin: 0 auto; }

  .zf-landing .topbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom: 14px;
  }
  .zf-landing .brand{ display:flex; align-items:center; gap:10px; min-width:0; }
  .zf-landing .brand .logo{
    width: 36px; height: 36px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(0,255,209,.18), rgba(124,92,255,.18));
    border: 1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 12px 26px rgba(0,0,0,.32);
    overflow:hidden;
  }
  .zf-landing .brand .logo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .zf-landing .brand .name{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
  .zf-landing .brand .name strong{ font-size: 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .zf-landing .brand .name span{ font-size: 12px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .zf-landing .lang{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
  .zf-landing .lang a,
  .zf-landing .mode-btn{
    text-decoration:none;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--btnbg);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
  }
  .zf-landing .lang a.active{
    border-color: rgba(0,255,209,.45);
    background: rgba(0,255,209,.10);
    box-shadow: 0 0 0 3px rgba(0,255,209,.08);
  }
  .zf-landing .mode-btn{
    font-weight: 900;
    display:inline-flex; align-items:center; gap:8px;
  }
  .zf-landing .mode-dot{
    width: 10px; height: 10px; border-radius: 999px;
    background: linear-gradient(135deg, rgba(0,255,209,.85), rgba(124,92,255,.65));
    box-shadow: 0 0 0 3px rgba(0,255,209,.10);
  }

  .zf-landing .hero{
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow: 0 26px 50px rgba(0,0,0,.45);
    overflow:hidden;
  }
  .zf-landing[data-theme="light"] .hero{
    box-shadow: 0 22px 44px rgba(0,0,0,.12);
  }

  .zf-landing .hero-inner{
    display:grid;
    grid-template-columns: 280px 1fr;
    align-items: stretch;
  }
  @media (max-width: 980px){
    .zf-landing .hero-inner{ grid-template-columns: 1fr; }
  }

  .zf-landing .hero-media{
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, rgba(0,255,209,.08), rgba(124,92,255,.10));
    border-right: 1px solid var(--line);
    padding: 18px;
  }
  @media (max-width: 980px){
    .zf-landing .hero-media{
      border-right: 0;
      border-bottom: 1px solid var(--line);
      padding: 16px;
    }
  }

  .zf-landing .hero-media .frame{
    width: 225px;
    border-radius: 18px;
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: var(--glass2);
    box-shadow: 0 18px 36px rgba(0,0,0,.35);
    position: relative;
  }
  .zf-landing .hero-media img,
  .zf-landing .hero-media video{
    width:100%;
    height:auto;
    display:block;
  }

  .zf-landing .hero-play{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }
  .zf-landing .hero-play .pbtn{
    width: 54px; height: 54px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 16px 32px rgba(0,0,0,.35);
    display:flex; align-items:center; justify-content:center;
    font-size: 18px;
    color: rgba(255,255,255,.92);
  }

  .zf-landing .zoom-hint{
    position:absolute; left: 50%; bottom: 18px;
    transform: translateX(-50%);
    font-size: 12px; color: rgba(255,255,255,.75);
    padding: 6px 10px; border-radius: 999px;
    background: rgba(0,0,0,.36);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(8px);
  }

  .zf-landing .hero-content{ padding: 22px 22px 20px; }
  .zf-landing .badge{
    display:inline-flex; align-items:center; gap:8px;
    font-size: 12px; letter-spacing:.28em; text-transform:uppercase;
    color: rgb(49 183 158 / 92%);
    background: rgb(35 147 127 / 32%);
    border: 1px solid rgba(0,255,209,.18);
    padding: 7px 10px;
    border-radius: 999px;
  }
  .zf-landing h1{ margin: 12px 0 6px; font-size: 38px; letter-spacing: -.02em; line-height: 1.05; }
  @media (max-width: 520px){ .zf-landing h1{ font-size: 32px; } }
  .zf-landing .subtitle{ color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0 0 10px; }
  .zf-landing .micro{ color: rgba(255,255,255,.70); font-size: 12.5px; margin-bottom: 14px; }
  .zf-landing[data-theme="light"] .micro{ color: rgba(12,14,18,.62); }

  .zf-landing .ctas{ display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 12px; }

  .zf-landing .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    text-decoration:none;
    color: var(--text);
    background: var(--btnbg);
    font-weight: 800;
    font-size: 13px;
  }
  .zf-landing .btn.primary{
    border-color: rgba(0,255,209,.40);
    background: linear-gradient(135deg, rgba(0,255,209,.16), rgba(124,92,255,.10));
    box-shadow: 0 0 0 3px rgba(0,255,209,.08);
  }

  .zf-landing .section{ margin-top: 74px; }
  .zf-landing .section-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    margin: 18px 0 10px;
  }
  .zf-landing .section-head h2{ margin: 0; font-size: 18px; }
  .zf-landing .section-head p{ margin: 0; color: var(--muted); font-size: 13px; }

  .zf-landing .grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  @media (max-width: 980px){ .zf-landing .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px){ .zf-landing .grid{ grid-template-columns: 1fr; } }

  .zf-landing .card{
    display:block;
    text-decoration:none;
    color: inherit;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 18px 32px rgba(0,0,0,.30);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .zf-landing[data-theme="light"] .card{ box-shadow: 0 18px 28px rgba(0,0,0,.10); }
  .zf-landing .card:hover{
    transform: translateY(-2px);
    border-color: rgba(0,255,209,.22);
    box-shadow: 0 24px 44px rgba(0,0,0,.40);
  }
  .zf-landing .card-tag{
    margin-left:auto;
    font-size: 11px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,211,106,.24);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.90);
  }
  .zf-landing[data-theme="light"] .card-tag{ color: rgba(12,14,18,.82); background: rgba(0,0,0,.04); }

  /* SYSTEMS shell */
  .zf-landing .ws-shell{
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.03);
    box-shadow: 0 22px 44px rgba(0,0,0,.35);
    overflow:hidden;
  }
  .zf-landing[data-theme="light"] .ws-shell{ box-shadow: 0 20px 38px rgba(0,0,0,.10); }

  .zf-landing .ws-toolbar{
    position: sticky;
    top: 0;
    z-index: 50;
    display:flex; align-items:center; gap:10px;
    padding: 10px 12px;
    background:
      radial-gradient(900px 120px at 20% 0%, rgba(0,255,209,.14), transparent 55%),
      radial-gradient(900px 120px at 90% 0%, rgba(124,92,255,.12), transparent 55%),
      var(--glass3);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .zf-landing .ws-toolbar::after{
    content:"";
    position:absolute;
    left: 10px; right: 10px; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,255,209,.55), rgba(124,92,255,.45), transparent);
    opacity: .65;
    pointer-events: none;
  }

  .zf-landing .ws-search{
    flex: 1 1 auto;
    display:flex; align-items:center; gap:10px;
    border: 1px solid rgba(255,255,255,.12);
    background:
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
      var(--glass);
    border-radius: 14px;
    padding: 0 12px;
    min-height: 40px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
  }
  .zf-landing[data-theme="light"] .ws-search{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
  .zf-landing .ws-search:focus-within{
    border-color: rgba(0,255,209,.35);
    box-shadow: 0 0 0 3px rgba(0,255,209,.08), 0 14px 28px rgba(0,0,0,.35);
  }
  .zf-landing .ws-search .ico{ opacity: .9; }
  .zf-landing .ws-search input{
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    padding: 10px 0;
  }
  .zf-landing .ws-search input::placeholder{ color: rgba(255,255,255,.45); }
  .zf-landing[data-theme="light"] .ws-search input::placeholder{ color: rgba(12,14,18,.45); }

  .zf-landing .ws-tip{
    color: rgba(255,255,255,.58);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    display:none;
  }
  .zf-landing[data-theme="light"] .ws-tip{ color: rgba(12,14,18,.62); }
  @media (min-width: 980px){ .zf-landing .ws-tip{ display:inline-flex; } }

  .zf-landing .ws-panels{
    display:grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,.02);
  }
  @media (max-width: 980px){
    .zf-landing .ws-panels{ grid-template-columns: 1fr; }
  }

  .zf-landing .ws-card{
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 18px 32px rgba(0,0,0,.28);
  }
  .zf-landing[data-theme="light"] .ws-card{ box-shadow: 0 16px 28px rgba(0,0,0,.10); }

  .zf-landing .ws-card-title{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-weight: 900;
    margin-bottom: 10px;
  }
  .zf-landing .ws-card-title .badge{
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.82);
    font-weight: 800;
  }
  .zf-landing[data-theme="light"] .ws-card-title .badge{ color: rgba(12,14,18,.78); background: rgba(0,0,0,.04); }

  .zf-landing .ws-quick{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  @media (max-width: 820px){
    .zf-landing .ws-quick{ grid-template-columns: 1fr; }
  }

  .zf-landing .ws-q{
    display:flex; gap:10px; align-items:flex-start;
    text-decoration:none;
    color: inherit;
    border: 1px solid rgb(211 200 200 / 76%);
    background: rgb(215 208 208 / 24%);
    border-radius: 16px;
    padding: 12px;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
  }
  .zf-landing .ws-q:hover{
    transform: translateY(-1px);
    border-color: rgba(0,255,209,.22);
    background: rgba(0,255,209,.06);
  }
  .zf-landing .ws-q .qico{ width: 26px; text-align:center; font-size: 16px; }
  .zf-landing .ws-q .qtxt{ display:flex; flex-direction:column; gap:2px; }
  .zf-landing .ws-q .qname{ font-weight: 900; font-size: 13px; }
  .zf-landing .ws-q .qdesc{ color: rgba(255,255,255,.66); font-size: 12.5px; line-height: 1.35; }
  .zf-landing[data-theme="light"] .ws-q .qdesc{ color: rgba(12,14,18,.66); }

  /* STAFF */
  .zf-landing .staff-sub{
    margin: 0 0 12px;
    color: rgba(255,255,255,.70);
    font-size: 13px;
    line-height: 1.35;
  }
  .zf-landing[data-theme="light"] .staff-sub{ color: rgba(12,14,18,.70); }

  .zf-landing .staff-list{ display:flex; flex-direction:column; gap:10px; }
  .zf-landing .staff-item{
    cursor:pointer;
    display:flex; align-items:center; gap:12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: var(--glass);
    box-shadow: 0 14px 26px rgba(0,0,0,.22);
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
  }
  .zf-landing[data-theme="light"] .staff-item{ box-shadow: 0 14px 22px rgba(0,0,0,.10); }
  .zf-landing .staff-item:hover{
    transform: translateY(-1px);
    border-color: rgba(0,255,209,.22);
    background: rgba(0,255,209,.06);
  }
  .zf-landing .staff-avatar{
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    letter-spacing: .02em;
    color: rgb(0 0 0 / 92%);
    background: linear-gradient(135deg, rgb(15 245 171 / 58%), rgb(96 249 235));
    border: 1px solid rgb(26 131 165);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .20);
    flex: 0 0 auto;
  }
  .zf-landing .staff-meta{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .zf-landing .staff-name{
    font-weight: 950;
    font-size: 14px;
    line-height: 1.05;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .zf-landing .staff-pill{
    display:inline-flex;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.88);
    margin-left: 8px;
  }
  .zf-landing[data-theme="light"] .staff-pill{ color: rgba(12,14,18,.80); background: rgba(0,0,0,.04); }

  /*  PROMO CODES */
  .zf-landing .promo{
    margin-top: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: radial-gradient(420px 220px at 39% 50%, rgb(31 211 203 / 22%), #ffd7072e 55%),
                radial-gradient(420px 220px at 90% 0%, rgb(23 175 147 / 54%), #0f1f203b 55%),
                linear-gradient(82deg, rgb(26 215 163 / 47%), rgb(45 134 211 / 63%));
    padding: 14px;
    position: relative;
    overflow: hidden;
  }
  .zf-landing .promo::before{
    content:"";
    position:absolute;
    inset:-40px;
    background:
      radial-gradient(220px 140px at 30% 30%, rgba(0,255,209,.18), transparent 60%),
      radial-gradient(240px 160px at 70% 70%, rgba(255,211,106,.12), transparent 65%);
    filter: blur(10px);
    opacity: .85;
    animation: zlPromoGlow 2.6s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes zlPromoGlow{
    0%   { transform: translateY(0) scale(1); opacity: .75; }
    50%  { transform: translateY(-4px) scale(1.02); opacity: .95; }
    100% { transform: translateY(0) scale(1); opacity: .75; }
  }

  .zf-landing .promo .row{
    position:relative;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-bottom: 8px;
  }
  .zf-landing .promo .title{
    font-weight: 950;
    letter-spacing: .02em;
  }
  .zf-landing .promo .badge{
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(124,92,255,.35);
    background: rgba(124,92,255,.14);
    color: rgba(255,255,255,.92);
  }
  .zf-landing .promo p{
    position:relative;
    margin: 0 0 12px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.4;
  }

  .zf-landing .promo-list{
    position:relative;
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .zf-landing .promo-code{
    position:relative;
    width: 100%;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--glass2);
    border-radius: 16px;
    padding: 12px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    cursor:pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
    overflow:hidden;
  }
  .zf-landing .promo-code::before{
    content:"";
    position:absolute;
    inset:-2px;
    background: linear-gradient(90deg, transparent, rgba(0,255,209,.18), rgba(124,92,255,.14), transparent);
    opacity: .0;
    transition: opacity .12s ease;
    pointer-events:none;
  }
  .zf-landing .promo-code::after{
    content:"";
    position:absolute;
    top:-30%;
    left:-60%;
    width: 55%;
    height: 160%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    opacity: .0;
    pointer-events:none;
  }
  .zf-landing .promo-code:hover{
    transform: translateY(-1px);
    border-color: rgba(0,255,209,.22);
    background: rgba(0,255,209,.06);
    box-shadow: 0 18px 30px rgba(0,0,0,.28);
  }
  .zf-landing .promo-code:hover::before{ opacity: .9; }
  .zf-landing .promo-code:hover::after{
    opacity: .7;
    animation: zlPromoShine .9s ease-out;
  }
  @keyframes zlPromoShine{
    from { left:-60%; }
    to   { left:120%; }
  }

  .zf-landing .promo-text{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-weight: 950;
    letter-spacing: .06em;
    color: rgba(255,255,255,.94);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
  }
  .zf-landing[data-theme="light"] .promo-text{ color: rgb(0 0 0); }

  .zf-landing .promo-btn{
    flex: 0 0 auto;
    border: 1px solid rgba(0,255,209,.22);
    background: linear-gradient(135deg, rgba(0,255,209,.14), rgba(124,92,255,.10));
    color: rgba(255,255,255,.92);
    font-weight: 950;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(0,255,209,.06);
    transition: transform .12s ease, filter .12s ease;
  }
  .zf-landing .promo-code:active .promo-btn{ transform: scale(.98); }

  .zf-landing .promo-code.is-copied{
    border-color: rgba(255,211,106,.32);
    box-shadow: 0 0 0 3px rgba(255,211,106,.10), 0 22px 38px rgba(0,0,0,.35);
    animation: zlPromoPulse .55s ease-out;
  }
  @keyframes zlPromoPulse{
    0%   { transform: scale(1); }
    40%  { transform: scale(1.015); }
    100% { transform: scale(1); }
  }

  .zf-landing .promo-spark{
    position:absolute;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(0,255,209,.85), rgba(124,92,255,.55));
    pointer-events:none;
    opacity: 0;
    animation: zlSpark .55s ease-out forwards;
    filter: drop-shadow(0 0 6px rgba(0,255,209,.45));
  }
  @keyframes zlSpark{
    0%   { transform: translate(0,0) scale(.75); opacity: .0; }
    15%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
  }

  .zf-landing .promo-empty{
    position:relative;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 16px;
    padding: 12px;
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 800;
  }
  .zf-landing[data-theme="light"] .promo-empty{
    background: rgba(0,0,0,.04);
    color: rgba(12,14,18,.72);
    border-color: rgba(12,14,18,.18);
  }

  /* CONTACT WHATSAPP */
  .zf-landing .contact{
    margin-top: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: var(--glass);
    padding: 14px;
  }
  .zf-landing .contact .row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-bottom: 8px;
  }
  .zf-landing .contact .title{
    font-weight: 950;
    letter-spacing: .02em;
  }
  .zf-landing .contact .badge{
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,255,209,.18);
    background: rgb(39 255 0 / 56%);
    color: rgba(255,255,255,.90);
  }
  .zf-landing .contact p{
    margin: 0 0 10px;
    color: rgba(255,255,255,.70);
    font-size: 13px;
    line-height: 1.4;
  }
  .zf-landing[data-theme="light"] .contact p{ color: rgba(12,14,18,.70); }

  /* MODAL difuminado */
  .zf-landing .zl-pop{
    position: fixed;
    inset: 0;
    display:none;
    align-items:center;
    justify-content:center;
    padding: 18px;
    z-index: 99999;
  }
  .zf-landing .zl-pop.is-open{ display:flex; }
  .zf-landing .zl-pop-back{
    position:absolute;
    inset:0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .zf-landing .zl-pop-box{
    position: relative;
    width: min(1100px, 96vw);
    height: min(720px, 86vh);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--popbg);
    box-shadow: 0 30px 70px rgba(0,0,0,.55);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .zf-landing[data-theme="light"] .zl-pop-box{ box-shadow: 0 28px 58px rgba(0,0,0,.18); }

  .zf-landing .zl-pop-bar{
    display:flex; align-items:center; justify-content:space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background:
      radial-gradient(900px 120px at 20% 0%, rgba(0,255,209,.12), transparent 55%),
      radial-gradient(900px 120px at 90% 0%, rgba(124,92,255,.10), transparent 55%),
      var(--glass3);
  }
  .zf-landing .zl-pop-title{
    font-weight: 950;
    color: var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .zf-landing .zl-pop-close{
    cursor:pointer;
    border: 1px solid rgba(255,255,255,.14);
    background: var(--btnbg);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 12px;
  }
  .zf-landing .zl-pop-body{
    position:relative;
    flex: 1 1 auto;
    overflow:hidden;
  }
  .zf-landing .zl-pop-iframe{
    width:100%;
    height:100%;
    border:0;
    display:none;
    background:#000;
  }
  .zf-landing .zl-pop-staff{
    padding: 14px;
    overflow:auto;
    height:100%;
    display:none;
  }
  .zf-landing .zl-pop-staff h3{
    margin: 0 0 8px;
    font-size: 18px;
    letter-spacing: -.01em;
  }
  .zf-landing .zl-pop-k{
    margin-top: 12px;
    font-weight: 950;
    color: rgba(0,255,209,.92);
  }
  .zf-landing .zl-pop-tags{
    display:flex;
    gap: 8px;
    flex-wrap:wrap;
    margin-top: 8px;
  }
  .zf-landing .zl-tag{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.88);
    font-weight: 900;
    font-size: 12px;
  }
  .zf-landing[data-theme="light"] .zl-tag{ color: rgba(12,14,18,.80); background: rgba(0,0,0,.04); }

  .zf-landing .zl-pop-p{
    margin: 10px 0 0;
    color: rgba(255,255,255,.70);
    line-height: 1.45;
    font-size: 13px;
  }
  .zf-landing[data-theme="light"] .zl-pop-p{ color: rgba(12,14,18,.70); }

  .zf-landing .zl-loading{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    color: rgba(255,255,255,.75);
    font-weight: 900;
    background: rgba(0,0,0,.25);
  }
  .zf-landing[data-theme="light"] .zl-loading{ color: rgba(12,14,18,.72); background: rgba(255,255,255,.55); }
  .zf-landing .zl-loading.is-on{ display:flex; }

  /* ZOOM (checkbox modal) — base */
  .zf-landing .zl-zoomchk{ position:absolute; opacity:0; pointer-events:none; }
  .zf-landing .zl-zoom-open{ display:block; cursor:pointer; }
  .zf-landing .zl-modal{
    position:fixed; inset:0;
    background: rgba(0,0,0,.68);
    display:none;
    align-items:center; justify-content:center;
    padding: 18px;
    z-index: 9999;
  }
  .zf-landing[data-theme="light"] .zl-modal{ background: rgba(0,0,0,.52); }
  .zf-landing .zl-zoomchk:checked ~ .zl-modal{ display:flex; }

  .zf-landing .zl-modal-box{
    width: min(1100px, 96vw);
    max-height: 92vh;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--popbg);
    box-shadow: 0 30px 70px rgba(0,0,0,.55);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .zf-landing .zl-modal-media{
    flex: 1 1 auto;
    min-height: 200px;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position: relative;
  }
  .zf-landing .zl-modal-img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display:block;
  }
  .zf-landing .zl-modal-vid{
    width: 100%;
    height: 100%;
    display:block;
    background:#000;
  }
  .zf-landing .zl-modal-yt{
    width: 100%;
    height: 100%;
    border: 0;
    display:block;
    background:#000;
  }

  .zf-landing .zl-modal-bar{
    flex: 0 0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,.10);
  }
  .zf-landing .zl-modal-bar .hint{ color: rgba(255,255,255,.65); font-size: 12px; }
  .zf-landing[data-theme="light"] .zl-modal-bar .hint{ color: rgba(12,14,18,.62); }

  .zf-landing .zl-close{
    cursor:pointer;
    border: 1px solid rgba(255,255,255,.14);
    background: var(--btnbg);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 12px;
  }

  .zf-landing .footer{
    margin-top: 20px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  }
  .zf-landing[data-theme="light"] .footer{ color: rgba(12,14,18,.55); }

  /* QUICK GUIDES — imagen izquierda + abre nueva ventana */
  .zf-landing .guide-card .g-wrap{
    display:flex;
    align-items:center;
    gap: 12px;
  }
  .zf-landing .guide-card .g-img{
    width: 80px;
    height: 91px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: var(--glass2);
    overflow:hidden;
    flex: 0 0 auto;
    box-shadow: 0 14px 26px rgba(0,0,0,.22);
  }
  .zf-landing[data-theme="light"] .guide-card .g-img{ box-shadow: 0 14px 22px rgba(0,0,0,.10); }

  .zf-landing .guide-card .g-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .zf-landing .guide-card .g-body{ min-width: 0; flex: 1 1 auto; }
  .zf-landing .guide-card .g-top{
    display:flex;
    align-items:center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .zf-landing .guide-card .g-top h3{
    margin: 0;
    font-size: 15px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .zf-landing .guide-card p{
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
  }

  /* FLOATING VOTE */
  .zf-landing .vote-float{
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 99998;
    display:flex;
    align-items:center;
    gap: 10px;
    text-decoration:none;
    color: var(--text);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--floatbg);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 12px;
    transform-origin: 80% 80%;
    animation: zlVoteFloat 1.8s ease-in-out infinite;
  }
  .zf-landing[data-theme="light"] .vote-float{ box-shadow: 0 18px 34px rgba(0,0,0,.14); }

  .zf-landing .vote-float:hover{
    animation-play-state: paused;
    border-color: rgba(0,255,209,.26);
    box-shadow: 0 22px 52px rgba(0,0,0,.55);
  }
  .zf-landing .vote-float:active{ transform: scale(.98); }

  .zf-landing .vote-float::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius: 22px;
    background:
      radial-gradient(120px 80px at 20% 30%, rgba(0,255,209,.28), transparent 60%),
      radial-gradient(120px 80px at 80% 70%, rgba(124,92,255,.20), transparent 60%);
    filter: blur(10px);
    opacity: .8;
    z-index:-1;
    animation: zlVoteGlow 1.8s ease-in-out infinite;
  }

  .zf-landing .vote-float .vote-img{
    width: 54px;
    height: 54px;
    border-radius: 16px;
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: var(--glass2);
    flex: 0 0 auto;
  }
  .zf-landing .vote-float .vote-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .zf-landing .vote-float .vote-txt{
    display:flex;
    flex-direction:column;
    line-height:1.05;
    min-width: 0;
  }
  .zf-landing .vote-float .vote-txt strong{
    font-weight: 950;
    font-size: 13px;
    letter-spacing: .02em;
    white-space:nowrap;
  }
  .zf-landing .vote-float .vote-txt span{
    font-size: 12px;
    color: rgba(255,255,255,.70);
    white-space:nowrap;
  }
  .zf-landing[data-theme="light"] .vote-float .vote-txt span{ color: rgba(12,14,18,.62); }

  @keyframes zlVoteFloat{
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-6px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
  }
  @keyframes zlVoteGlow{
    0%   { opacity: .65; transform: scale(1); }
    50%  { opacity: .95; transform: scale(1.03); }
    100% { opacity: .65; transform: scale(1); }
  }

  @media (max-width: 520px){
    .zf-landing .vote-float{
      right: 12px;
      bottom: 12px;
      padding: 9px 10px;
      border-radius: 16px;
    }
    .zf-landing .vote-float .vote-img{
      width: 48px;
      height: 48px;
      border-radius: 14px;
    }
  }

  /*  TOAST */
  .zf-landing .zl-toast{
    position: fixed;
    left: 18px;
    bottom: 92px;
    z-index: 99999;
    pointer-events: none;
    display:none;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: var(--toastbg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    color: var(--text);
    font-weight: 900;
    font-size: 12.5px;
    max-width: min(520px, 92vw);
  }
  .zf-landing[data-theme="light"] .zl-toast{ box-shadow: 0 18px 34px rgba(0,0,0,.14); }
  .zf-landing .zl-toast.is-on{ display:block; animation: zlToastIn .16s ease-out; }
  @keyframes zlToastIn{
    from { transform: translateY(6px); opacity: .0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  /*  JS REQUIRED overlay */
  .zf-landing .js-req{
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,.86);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 18px;
  }
  .zf-landing .js-req .box{
    width: min(720px, 94vw);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(10,12,16,.92);
    box-shadow: 0 30px 70px rgba(0,0,0,.65);
    padding: 16px;
  }
  .zf-landing .js-req h2{
    margin: 0 0 6px;
    font-size: 18px;
    letter-spacing: -.01em;
  }
  .zf-landing .js-req p{
    margin: 0;
    color: rgba(255,255,255,.72);
    line-height: 1.45;
    font-size: 13px;
  }
 
 
 
 .zf-landing .online-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}

.zf-landing .online-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background: var(--ok, #43f3d1);
  box-shadow: 0 0 0 4px rgba(67,243,209,.12), 0 0 16px rgba(67,243,209,.35);
  animation: zlOnlinePulse 1.6s ease-in-out infinite;
}

.zf-landing .online-num{
  font-weight:900;
}

@keyframes zlOnlinePulse{
  0%,100%{ transform: scale(1); opacity: .9; }
  50%{ transform: scale(1.2); opacity: 1; }
}





    .zf-landing .live-stats{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
    .zf-landing .live-stat{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:999px;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
    .zf-landing[data-theme="light"] .live-stat{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.08)}
    .zf-landing .live-stat .k{font-size:12px;opacity:.85;letter-spacing:.02em}
    .zf-landing .live-stat .v{font-weight:900;font-size:14px}
    .zf-landing .db-warn{margin-top:10px;font-size:12px;opacity:.85}

    /* ==========================================================
        Downloads & WoE (NUEVO) — centrado perfecto y mismo size
       - Se alinea con el ancho de Systems (ws-shell)
       - Dos cards iguales (stretch) y responsive
       ========================================================== */
    .zf-landing .dw-head{
      text-align:center;
      margin: 6px 0 14px;
    }
    .zf-landing .dw-head h2{margin:0 0 6px}
    .zf-landing .dw-head p{margin:0;opacity:.85}
    .zf-landing .dw-shell{display:flex;justify-content:center}
    .zf-landing .dw-grid{
      width:100%;
      margin: 0 auto;
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:14px;
      align-items:stretch;
    }
    @media (max-width: 980px){
      .zf-landing .dw-grid{grid-template-columns: 1fr}
    }
    .zf-landing .dw-card{
    background: rgb(89 101 124 / 31%);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    padding: 15px 26px 14px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;

    }
    .zf-landing[data-theme="light"] .dw-card{
      background: rgba(255,255,255,.70);
      border-color: rgba(0,0,0,.08);
      box-shadow: 0 16px 45px rgba(0,0,0,.12);
    }
    .zf-landing .dw-top{
      display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
      margin-bottom: 8px;
    }
    .zf-landing .dw-top .ttl{font-weight:900;font-size:16px}
    .zf-landing .dw-pill{
      font-size:11px;letter-spacing:.22em;text-transform:uppercase;
      padding:7px 10px;border-radius:999px;
      background: rgba(0, 255, 220, .10);
      border: 1px solid rgba(0, 255, 220, .22);
      color: rgba(0, 255, 220, .95);
      white-space:nowrap;
    }
    .zf-landing .dw-desc{margin:0 0 10px;opacity:.90}
    .zf-landing .dw-list{display:flex;flex-direction:column;gap:10px;margin-top:auto}
    .zf-landing .dw-item{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:12px 12px;
      border-radius:14px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
      text-decoration:none;
      color: inherit;
    }
    .zf-landing[data-theme="light"] .dw-item{
      background: rgba(0,0,0,.04);
      border-color: rgba(0,0,0,.08);
    }
    .zf-landing .dw-item .l{display:flex;align-items:center;gap:12px;min-width:0}
    .zf-landing .dw-item .ico{
      width:28px;height:28px;border-radius:10px;
      display:grid;place-items:center;
      background: rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.12);
      flex:0 0 auto;
    }
    .zf-landing[data-theme="light"] .dw-item .ico{
      background: rgba(0,0,0,.04);
      border-color: rgba(0,0,0,.08);
    }
    .zf-landing .dw-item .tx{min-width:0}
    .zf-landing .dw-item .tx .t{font-weight:900;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .zf-landing .dw-item .tx .d{font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
    .zf-landing .dw-item .r{
      opacity:.85;
      font-weight:900;
      padding-left:10px;
      flex:0 0 auto;
    }
    .zf-landing .dw-row{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:12px 12px;
      border-radius:14px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
    }
    .zf-landing[data-theme="light"] .dw-row{
      background: rgba(0,0,0,.04);
      border-color: rgba(0,0,0,.08);
    }
    .zf-landing .dw-row .k{font-size:12px;opacity:.85}
    .zf-landing .dw-row .v{font-weight:900}
    .zf-landing .dw-woe{display:flex;flex-direction:column;gap:10px;margin-top:auto}
    .zf-landing .dw-woe .ev .lbl{font-weight:900}
    .zf-landing .dw-woe .ev .sub{font-size:12px;opacity:.85;margin-top:2px}
    .zf-landing .dw-woe .time{font-weight:900;white-space:nowrap}