:root{
    --bg:#060a14;
    --bg-alt:#0a1220;
    --card:#0d1a2c;
    --card-2:#0f2036;
    --border:#1c3554;
    --border-soft:#152941;
    --blue:#2fb8ff;
    --blue-2:#67e3ff;
    --blue-dim:#1a7bb0;
    --text:#eaf3ff;
    --text-dim:#8fa6c2;
    --text-faint:#5d7592;
    --danger:#ff6b6b;
    --radius-lg:22px;
    --radius-md:14px;
    --radius-sm:8px;
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      /* brand is inherently dark-neon; keep dark even on light system pref for identity consistency */
    }
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:
      radial-gradient(ellipse 900px 500px at 50% -10%, rgba(47,184,255,0.16), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 30%, rgba(47,184,255,0.08), transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:'Cairo', sans-serif;
    line-height:1.7;
    overflow-x:hidden;
    min-height:100vh;
  }
  .wrap{max-width:640px; margin:0 auto; padding:0 20px;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  button{font-family:inherit; cursor:pointer;}

  /* ---------- divider motif (brand element: glow line with center diamond) ---------- */
  .divider{
    display:flex; align-items:center; gap:10px;
    margin:14px auto 26px; max-width:340px;
  }
  .divider::before,.divider::after{
    content:""; flex:1; height:1px;
    background:linear-gradient(90deg, transparent, var(--blue-dim), transparent);
  }
  .divider span{
    width:6px; height:6px; background:var(--blue-2);
    transform:rotate(45deg);
    box-shadow:0 0 8px var(--blue-2);
    flex-shrink:0;
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(6,10,20,0.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border-soft);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; max-width:640px; margin:0 auto;
  }
  .brand-mini{display:flex; align-items:center; gap:10px;}
  .brand-mini img{width:34px; height:34px; border-radius:50%;}
  .brand-mini strong{
    font-family:'Orbitron', sans-serif; font-size:13px; letter-spacing:0.5px;
    color:var(--text);
  }
  .nav-cta{
    font-size:13px; font-weight:700; color:var(--bg);
    background:linear-gradient(135deg, var(--blue-2), var(--blue));
    padding:8px 16px; border-radius:999px;
    box-shadow:0 0 18px rgba(47,184,255,0.35);
  }

  /* ---------- hero ---------- */
  .hero{
    padding:56px 20px 40px; text-align:center; position:relative;
  }
  .crest-link{display:inline-block; position:relative;}
  .crest-link img{
    width:148px; height:148px; border-radius:50%;
    box-shadow:0 0 0 1px rgba(103,227,255,0.35), 0 0 40px rgba(47,184,255,0.35);
    transition:box-shadow .25s ease, transform .25s ease;
  }
  .crest-link:hover img{
    box-shadow:0 0 0 1px rgba(103,227,255,0.6), 0 0 60px rgba(47,184,255,0.55);
    transform:translateY(-2px);
  }
  .crest-badge{
    position:absolute; bottom:2px; left:2px;
    background:var(--bg); border:1px solid var(--border);
    border-radius:50%; width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 12px rgba(0,0,0,0.6);
  }
  .crest-badge svg{width:16px; height:16px;}
  h1.wordmark{
    font-family:'Orbitron', sans-serif; font-weight:900;
    font-size:clamp(28px, 8vw, 38px);
    letter-spacing:1px; margin-top:22px;
    background:linear-gradient(180deg, #ffffff 10%, var(--blue-2) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .wordmark small{
    display:block; font-family:'Orbitron', sans-serif;
    font-size:13px; letter-spacing:6px; color:var(--blue-dim);
    margin-top:6px;
  }
  .tagline{
    color:var(--text-dim); font-size:16px; margin-top:16px;
    max-width:420px; margin-inline:auto;
  }
  .hero-ctas{
    display:flex; gap:12px; justify-content:center; margin-top:28px;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 22px; border-radius:999px; font-weight:700; font-size:15px;
    border:1px solid transparent;
  }
  .btn-primary{
    background:linear-gradient(135deg, var(--blue-2), var(--blue));
    color:#04121c;
    box-shadow:0 4px 24px rgba(47,184,255,0.4);
  }
  .btn-outline{
    border-color:var(--border); color:var(--text);
    background:rgba(255,255,255,0.02);
  }
  .btn-outline:hover{border-color:var(--blue-dim);}

  /* ---------- trust row ---------- */
  .trust{
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px 8px;
    padding:8px 20px 44px; max-width:520px; margin:0 auto;
  }
  .trust-item{text-align:center;}
  .trust-item .ic{
    width:44px; height:44px; margin:0 auto 8px; border-radius:50%;
    background:var(--card); border:1px solid var(--border-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .trust-item .ic svg{width:20px; height:20px; stroke:var(--blue-2);}
  .trust-item span{font-size:12.5px; color:var(--text-dim); font-weight:600;}

  /* ---------- section shell ---------- */
  section{padding:46px 20px;}
  .section-alt{background:linear-gradient(180deg, transparent, rgba(47,184,255,0.035), transparent);}
  .eyebrow-icon{font-size:26px; display:block; text-align:center; margin-bottom:6px;}
  h2{
    font-size:23px; font-weight:800; text-align:center;
    color:var(--text);
  }
  .lede{
    color:var(--text-dim); text-align:center; font-size:15px;
    max-width:460px; margin:12px auto 0;
  }

  /* ---------- services banner image ---------- */
  .services-media{
    border-radius:var(--radius-lg); overflow:hidden; margin-top:26px;
    border:1px solid var(--border-soft);
    box-shadow:0 20px 50px -20px rgba(0,0,0,0.6);
  }
  .services-media img{width:100%;}
  .chip-row{
    display:flex; flex-wrap:wrap; gap:9px; justify-content:center;
    margin-top:22px;
  }
  .chip{
    font-size:13.5px; font-weight:600; color:var(--text);
    background:var(--card); border:1px solid var(--border-soft);
    padding:8px 14px; border-radius:999px;
  }

  /* ---------- trial box ---------- */
  .trial-box{
    margin-top:24px; border:1px solid var(--border-soft);
    border-radius:var(--radius-lg); padding:22px;
    background:var(--card);
    display:flex; flex-direction:column; gap:14px;
  }
  .trial-opts{display:flex; gap:12px;}
  .trial-opt{
    flex:1; text-align:center; padding:16px 8px; border-radius:var(--radius-md);
    border:1px solid var(--border-soft); background:var(--bg-alt);
    color:var(--text); cursor:pointer;
  }
  .trial-opt strong{display:block; font-size:20px; color:var(--blue-2); font-family:'Orbitron',sans-serif;}
  .trial-opt span{font-size:12.5px; color:var(--text-dim);}
  .trial-opt.active{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue-dim) inset;}
  .trial-opt.active strong{color:var(--blue-2);}

  /* ---------- pricing ---------- */
  .calc{
    margin-top:26px; border:1px solid var(--border-soft);
    border-radius:var(--radius-lg); background:var(--card);
    padding:22px; box-shadow:0 20px 60px -30px rgba(47,184,255,0.25);
  }
  .calc-label{font-size:13px; color:var(--text-dim); margin-bottom:10px; font-weight:600;}
  .dur-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  }
  .dur-btn{
    padding:10px 4px; border-radius:var(--radius-sm);
    border:1px solid var(--border-soft); background:var(--bg-alt);
    color:var(--text-dim); font-size:13px; font-weight:700;
  }
  .dur-btn.active{
    border-color:var(--blue); color:var(--bg);
    background:linear-gradient(135deg, var(--blue-2), var(--blue));
  }
  .calc-result{
    margin-top:20px; display:flex; align-items:flex-end; justify-content:space-between;
    padding-top:18px; border-top:1px dashed var(--border-soft);
  }
  .calc-price{font-family:'Orbitron', sans-serif; font-size:34px; font-weight:800; color:var(--blue-2);}
  .calc-price sub{font-family:'Cairo',sans-serif; font-size:14px; color:var(--text-dim); font-weight:600;}
  .calc-save{
    font-size:12.5px; color:#7fe0a0; background:rgba(60,200,120,0.1);
    border:1px solid rgba(60,200,120,0.25); padding:6px 10px; border-radius:999px;
    font-weight:700; white-space:nowrap;
  }
  .calc-note{font-size:12px; color:var(--text-faint); margin-top:14px;}
  .price-table{width:100%; margin-top:22px; border-collapse:collapse; font-size:14px;}
  .price-table th{
    color:var(--text-faint); font-weight:600; font-size:12px; text-align:start;
    padding-bottom:8px; border-bottom:1px solid var(--border-soft);
  }
  .price-table td{padding:10px 4px; border-bottom:1px solid var(--border-soft); color:var(--text-dim);}
  .price-table td:first-child{color:var(--text); font-weight:600;}
  .price-table td:last-child{color:var(--blue-2); font-weight:700; text-align:end;}

  /* ---------- notice / policy callouts ---------- */
  .note-box{
    margin-top:24px; border:1px solid var(--border-soft); border-radius:var(--radius-md);
    padding:16px 18px; background:var(--card); font-size:14px; color:var(--text-dim);
    display:flex; gap:12px; align-items:flex-start;
  }
  .note-box .ic{flex-shrink:0; font-size:18px;}
  .warn-box{
    margin-top:16px; border:1px solid rgba(255,107,107,0.35); border-radius:var(--radius-md);
    padding:16px 18px; background:rgba(255,107,107,0.06); font-size:13.5px; color:#ffb8b8;
    display:flex; gap:12px; align-items:flex-start;
  }
  .guarantee-box{
    margin-top:24px; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
    padding:22px; background:linear-gradient(180deg, rgba(47,184,255,0.06), transparent);
  }
  .guarantee-box h3{font-size:17px; margin-bottom:8px; color:var(--text);}
  .guarantee-box p{font-size:14px; color:var(--text-dim);}

  /* ---------- testimonials ---------- */
  .testi-wrap{
    margin-top:26px; border-radius:var(--radius-lg); overflow:hidden;
    border:1px solid var(--border-soft); position:relative;
  }
  .testi-wrap img{width:100%;}
  .testi-cards{margin-top:18px; position:relative; min-height:118px;}
  .testi-card{
    border:1px solid var(--border-soft); background:var(--card);
    border-radius:var(--radius-md); padding:18px;
    position:absolute; inset:0; opacity:0; transform:translateY(6px);
    transition:opacity .35s ease, transform .35s ease; pointer-events:none;
  }
  .testi-card.active{opacity:1; transform:translateY(0); pointer-events:auto;}
  .testi-stars{color:var(--blue-2); font-size:13px; letter-spacing:2px; margin-bottom:8px;}
  .testi-text{font-size:14.5px; color:var(--text); line-height:1.8;}
  .testi-name{margin-top:10px; font-size:12.5px; color:var(--text-faint);}
  .testi-dots{display:flex; justify-content:center; gap:6px; margin-top:14px;}
  .testi-dots button{
    width:7px; height:7px; border-radius:50%; border:none;
    background:var(--border); padding:0;
  }
  .testi-dots button.active{background:var(--blue-2); box-shadow:0 0 6px var(--blue-2);}

  /* ---------- FAQ ---------- */
  .faq{margin-top:24px; display:flex; flex-direction:column; gap:10px;}
  .faq-item{
    border:1px solid var(--border-soft); border-radius:var(--radius-md);
    background:var(--card); overflow:hidden;
  }
  .faq-q{
    width:100%; text-align:start; background:none; border:none; color:var(--text);
    padding:16px 18px; font-size:14.5px; font-weight:700;
    display:flex; justify-content:space-between; align-items:center; gap:10px;
  }
  .faq-q .plus{
    font-family:'Orbitron',sans-serif; font-size:18px; color:var(--blue-2);
    transition:transform .25s ease; flex-shrink:0;
  }
  .faq-item.open .faq-q .plus{transform:rotate(45deg);}
  .faq-a{
    max-height:0; overflow:hidden; transition:max-height .3s ease;
    font-size:13.5px; color:var(--text-dim); padding:0 18px;
  }
  .faq-item.open .faq-a{padding-bottom:16px;}

  /* ---------- order form ---------- */
  .form-card{
    margin-top:26px; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
    background:var(--card); padding:22px;
  }
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:13px; color:var(--text-dim); margin-bottom:7px; font-weight:600;}
  .field input, .field select, .field textarea{
    width:100%; background:var(--bg-alt); border:1px solid var(--border-soft);
    color:var(--text); border-radius:var(--radius-sm); padding:12px 14px; font-size:14.5px;
    font-family:inherit;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:2px solid var(--blue-dim); outline-offset:1px; border-color:var(--blue);
  }
  .field textarea{resize:vertical; min-height:70px;}
  .payment-note{
    margin-top:10px; font-size:12.5px; color:var(--text-dim);
    background:var(--bg-alt); border:1px solid var(--border-soft);
    border-radius:var(--radius-sm); padding:10px 12px; line-height:1.8;
  }
  .summary-box{
    margin-top:6px; border:1px dashed var(--border-soft); border-radius:var(--radius-md);
    padding:14px 16px; font-size:13.5px; color:var(--text-dim); white-space:pre-line;
    background:var(--bg-alt); line-height:1.9;
  }
  .form-actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
  .form-actions .btn{flex:1; justify-content:center;}
  .send-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px;}
  .send-opt{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:12px 4px; border-radius:var(--radius-md);
    border:1px solid var(--border-soft); background:var(--bg-alt);
    color:var(--text-dim); font-size:12.5px; font-weight:700;
  }
  .send-opt svg{width:20px; height:20px; color:var(--blue-2);}
  .send-opt:hover{border-color:var(--blue-dim); color:var(--text);}
  .telegram-note{
    margin-top:14px; border:1px solid var(--border-soft); border-radius:var(--radius-md);
    padding:16px; background:var(--card); text-align:center;
  }
  .telegram-note p{font-size:13.5px; color:var(--text-dim); margin-bottom:12px;}
  .copy-msg{
    font-size:12.5px; color:#7fe0a0; margin-top:10px; text-align:center; min-height:16px;
  }

  /* ---------- footer ---------- */
  footer{
    padding:44px 20px 60px; text-align:center; border-top:1px solid var(--border-soft);
    margin-top:20px;
  }
  footer img{width:52px; height:52px; border-radius:50%; margin:0 auto 14px;}
  footer .future{
    font-size:13.5px; color:var(--text-dim); max-width:360px; margin:16px auto 0;
  }
  .social-row{display:flex; justify-content:center; gap:14px; margin-top:22px;}
  .social-ic{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    width:76px; padding:14px 4px; border-radius:var(--radius-md);
    border:1px solid var(--border-soft); background:var(--card);
    color:var(--text-dim); font-size:11.5px; font-weight:600;
  }
  .social-ic svg{width:22px; height:22px; color:var(--blue-2);}
  .social-ic:hover{border-color:var(--blue-dim); color:var(--text);}
  footer .flag{font-size:13px; color:var(--text-faint); margin-top:18px;}
  footer .copyright{font-size:11.5px; color:var(--text-faint); margin-top:6px;}

  @media (max-width:380px){
    .trial-opts{flex-direction:column;}
  }

  /* ================= v2 additions ================= */
  :focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  .nav{gap:10px; padding-inline:14px;}
  .nav-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
  .nav-cta.is-account{font-weight:800;}
  .nav-menu-wrap{position:relative;}
  .nav-menu-btn{border:none; background:var(--card,rgba(255,255,255,.08)); color:inherit; width:38px; height:38px; border-radius:10px; font-size:17px; cursor:pointer; line-height:1;}
  .nav-menu-panel{position:absolute; top:calc(100% + 8px); inset-inline-end:0; min-width:190px; background:var(--card,#1c1c22); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:50; display:flex; flex-direction:column; gap:2px;}
  .nav-menu-panel[hidden]{display:none;}

  /* notifications */
  .notif-dot{position:absolute; top:2px; inset-inline-end:2px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:var(--danger); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px var(--bg);}
  .nav-menu-btn{position:relative;}
  .notif-panel{min-width:300px; max-width:88vw; padding:10px;}
  .notif-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px 10px; border-bottom:1px solid var(--border-soft); margin-bottom:6px;}
  .notif-head strong{font-size:14px;}
  .notif-head .linkish{font-size:12px; padding:2px;}
  #notifList{max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:6px;}
  .notif-item{display:flex; gap:8px; align-items:flex-start; padding:10px; border-radius:var(--radius-sm); background:var(--bg-alt); border:1px solid var(--border-soft); cursor:pointer; text-align:start;}
  .notif-item.unread{border-color:var(--blue-dim); background:rgba(47,184,255,0.06);}
  .notif-item:hover{border-color:var(--blue-dim);}
  .notif-item .ni-dot{width:8px; height:8px; border-radius:50%; background:var(--blue-2); flex-shrink:0; margin-top:6px; visibility:hidden;}
  .notif-item.unread .ni-dot{visibility:visible;}
  .notif-item .ni-body{flex:1; min-width:0;}
  .notif-item .ni-title{font-size:13px; font-weight:700; color:var(--text);}
  .notif-item .ni-text{font-size:12.5px; color:var(--text-dim); margin-top:2px; line-height:1.6;}
  .notif-item .ni-time{font-size:11px; color:var(--text-faint); margin-top:4px;}
  .notif-item .ni-del{flex-shrink:0; background:none; border:none; color:var(--text-faint); font-size:16px; line-height:1; padding:2px 4px; border-radius:6px;}
  .notif-item .ni-del:hover{color:var(--danger); background:rgba(255,107,107,0.1);}
  .notif-empty{padding:22px 10px; text-align:center; color:var(--text-dim); font-size:13px;}

  /* subscriptions dashboard */
  .sub-card{background:var(--bg-alt); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:14px; margin-top:10px;}
  .sub-card.is-current{border-color:var(--blue-dim);}
  .sub-card .uc-actions{margin-top:12px;}
  .nav-menu-item{width:100%; text-align:start; background:transparent; border:none; color:inherit; padding:10px 12px; border-radius:8px; font-size:14px; cursor:pointer; white-space:nowrap;}
  .nav-menu-item:hover{background:rgba(255,255,255,.08);}
  .nav-cta{border:none; line-height:1.4; cursor:pointer; white-space:nowrap;}
  .lang-btn{
    display:inline-flex; align-items:center; gap:5px; line-height:1;
    font-size:12px; font-weight:700; color:var(--text);
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    border-radius:999px; padding:8px 11px;
  }
  .lang-btn:hover{border-color:var(--blue-dim);}
  .lang-btn svg{width:14px; height:14px; stroke:var(--blue-2);}

  /* segmented switch (currency, auth tabs) */
  .seg{
    display:inline-flex; gap:2px; padding:3px;
    background:var(--bg-alt); border:1px solid var(--border-soft); border-radius:999px;
  }
  .seg button{
    border:none; background:transparent; color:var(--text-dim);
    font-size:12.5px; font-weight:700; padding:7px 16px; border-radius:999px;
  }
  .seg button.active{
    background:linear-gradient(135deg, var(--blue-2), var(--blue)); color:var(--bg);
  }
  .seg.full{display:flex; width:100%;}
  .seg.full button{flex:1;}
  .calc-head{margin-bottom:16px;}
  .calc-head .calc-label{margin-bottom:10px;}
  .calc-head .seg{display:flex; width:100%;}
  .calc-head .seg button{flex:1;}
  .calc-result{flex-wrap:wrap; gap:10px;}
  .calc-price{white-space:nowrap;}
  .calc-note + .calc-note{margin-top:4px;}
  .price-table th:last-child{text-align:end;}
  .testi-cards{min-height:150px;}

  /* auth modal */
  .modal{
    position:fixed; inset:0; z-index:100; display:none;
    align-items:center; justify-content:center; padding:16px;
    background:rgba(3,6,12,0.74); backdrop-filter:blur(6px);
  }
  .modal.open{display:flex;}
  .modal-card{
    width:100%; max-width:440px; max-height:calc(100vh - 32px); overflow-y:auto;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:22px; box-shadow:0 30px 80px -20px rgba(0,0,0,0.8), 0 0 40px rgba(47,184,255,0.12);
  }
  .modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .modal-head h3{font-size:18px; font-weight:800;}
  .modal-close{
    width:34px; height:34px; border-radius:50%; border:1px solid var(--border-soft);
    background:var(--bg-alt); color:var(--text-dim); font-size:18px; line-height:1;
  }
  .modal-close:hover{border-color:var(--blue-dim); color:var(--text);}
  .auth-form{display:none; margin-top:18px;}
  .auth-form.active{display:block;}
  .ltr-input{direction:ltr; text-align:left;}
  .ltr-input::placeholder{text-align:left;}
  .phone-row{display:flex; gap:8px; direction:ltr;}
  .phone-row select{width:112px; flex-shrink:0;}
  .phone-row input{flex:1; min-width:0;}
  .pass-wrap{position:relative;}
  .pass-wrap input{padding-right:48px;}
  .pass-toggle{
    position:absolute; top:50%; right:6px; transform:translateY(-50%);
    width:38px; height:38px; border:none; background:transparent; color:var(--text-dim);
    display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm);
  }
  .pass-toggle:hover{color:var(--blue-2);}
  .pass-toggle svg{width:20px; height:20px;}
  .pass-toggle[aria-pressed="false"] .eye-off{display:none;}
  .pass-toggle[aria-pressed="true"] .eye{display:none;}
  .hint{font-size:12px; color:var(--text-faint); margin-top:6px; line-height:1.7;}
  .hint.wa{
    color:var(--text-dim); background:var(--bg-alt); border:1px solid var(--border-soft);
    border-radius:var(--radius-sm); padding:9px 12px;
  }
  .err{font-size:12px; color:var(--danger); margin-top:6px; line-height:1.7;}
  .err:empty{display:none;}
  .field input.invalid, .field select.invalid{border-color:var(--danger);}
  .form-msg{
    margin-top:14px; font-size:13px; color:#ffd58a; text-align:center; min-height:0;
    background:rgba(255,190,80,0.08); border:1px solid rgba(255,190,80,0.25);
    border-radius:var(--radius-sm); padding:10px 12px;
  }
  .form-msg:empty{display:none;}
  .form-msg{margin-bottom:10px;}
  .auth-form .btn{width:100%; justify-content:center; margin-top:6px;}
  .privacy-line{font-size:11.5px; color:var(--text-faint); text-align:center; margin-top:14px; line-height:1.7;}

  .brand-mini{min-width:0;}
  .brand-mini strong{white-space:nowrap;}
  @media (max-width:420px){
    .brand-mini strong{font-size:11px; letter-spacing:0.3px;}
    .nav-cta{padding:8px 14px; font-size:12.5px;}
    .lang-btn{padding:8px 10px;}
  }
  @media (max-width:340px){
    .brand-mini strong{display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .testi-card, .faq-a, .faq-q .plus{transition:none;}
  }

  /* v3: accounts, verification, admin */
  .nav-cta{max-width:130px; overflow:hidden; text-overflow:ellipsis;}
  .auth-view{display:none;}
  .auth-view.active{display:block;}
  .auth-view > .btn{width:100%; justify-content:center; margin-top:10px;}
  .modal-card.wide{max-width:600px;}
  .verify-text{font-size:14px; color:var(--text-dim); line-height:1.9; margin:4px 0 16px; word-break:break-word;}
  .code-input{letter-spacing:8px; text-align:center; font-size:22px; font-weight:700;}
  .verify-actions{display:flex; justify-content:space-between; gap:10px; margin-top:6px;}
  .linkish{background:none; border:none; color:var(--blue-2); font-size:13px; text-decoration:underline; padding:6px 2px;}
  .linkish:disabled{color:var(--text-faint); text-decoration:none; cursor:default;}
  .form-msg.ok{color:#8ff0b5; background:rgba(60,220,140,0.08); border-color:rgba(60,220,140,0.28);}
  .acc-row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px dashed var(--border-soft); font-size:14px;}
  .acc-row span{color:var(--text-dim);}
  .acc-row strong{word-break:break-all; text-align:end;}
  .btn-sm{padding:8px 14px; font-size:13px;}
  .btn-danger{color:#ff9a9a; border-color:rgba(255,107,107,0.4);}
  .admin-tools{display:flex; gap:8px; margin-bottom:8px;}
  .admin-tools input{flex:1; min-width:0;}
  .user-card{background:var(--bg-alt); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:14px; margin-top:10px;}
  .user-card.is-banned{border-color:rgba(255,107,107,0.4);}
  .uc-head{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:6px;}
  .uc-name{font-size:15px; direction:ltr;}
  .uc-badges{display:flex; gap:6px; flex-wrap:wrap;}
  .badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid var(--border);}
  .b-admin{color:var(--blue-2); border-color:var(--blue-dim);}
  .b-ban{color:#ff9a9a; border-color:rgba(255,107,107,0.4);}
  .b-pend{color:#ffd58a; border-color:rgba(255,190,80,0.35);}
  .uc-line{font-size:13px; color:var(--text-dim); margin-top:3px; word-break:break-all;}
  .uc-date{color:var(--text-faint); font-size:12px;}
  .uc-wa{color:var(--blue-2); text-decoration:none;}
  .uc-actions{display:flex; gap:8px; margin-top:12px;}

  .admin-tools input{
    background:var(--bg-alt); border:1px solid var(--border-soft); color:var(--text);
    border-radius:var(--radius-sm); padding:12px 14px; font-size:14.5px; font-family:inherit;
  }
  .admin-tools input:focus{outline:2px solid var(--blue-dim); outline-offset:1px; border-color:var(--blue);}
  #verifyForm .btn{width:100%; justify-content:center; margin-top:6px;}

  .form-msg{white-space:pre-line;}

  /* v3: account required to order / request a trial */
  .gate-note{
    display:flex; flex-direction:column; align-items:stretch; gap:10px;
    background:rgba(47,184,255,0.07); border:1px solid var(--blue-dim);
    border-radius:var(--radius-md); padding:14px; margin:6px 0 14px;
  }
  .gate-note[hidden]{display:none;}
  .gate-note p{font-size:13.5px; color:var(--text-dim); line-height:1.8; margin:0; text-align:center;}
  .gate-note .btn{width:100%; justify-content:center;}
  .gate-msg{
    font-size:13.5px; color:var(--text); line-height:1.8; text-align:center;
    background:rgba(47,184,255,0.08); border:1px solid var(--blue-dim);
    border-radius:var(--radius-sm); padding:10px 12px; margin:0 0 14px;
  }
  .gate-msg[hidden]{display:none;}
  .send-opt.is-locked, #copyBtn.is-locked{opacity:.55;}

  /* v4: forgot password */
  .forgot-row{text-align:start; margin:-4px 0 12px;}
  #resetForm1 .btn, #resetForm2 .btn{width:100%; justify-content:center; margin-top:6px;}
  #vReset .verify-actions{justify-content:center; margin-top:10px;}

  /* v6: account settings + two-factor */
  .acc-list{margin:8px 0 10px;}
  .acc-link{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:none; border:none; border-bottom:1px dashed var(--border-soft);
    color:var(--text); font-size:14.5px; font-weight:600; padding:14px 2px; text-align:start;
  }
  .acc-link:hover{color:var(--blue-2);}
  .acc-link .chev{color:var(--text-faint); font-size:20px; line-height:1;}
  [dir="rtl"] .acc-link .chev{transform:scaleX(-1);}
  #vChEmail .btn, #vChPhone .btn, #vChPass .btn, #vMfa .btn, #vMfaLogin .btn{width:100%; justify-content:center; margin-top:6px;}
  #vChEmail .verify-actions, #vChPhone .verify-actions, #vChPass .verify-actions, #vMfa .verify-actions, #vMfaLogin .verify-actions{justify-content:center; margin-top:12px;}
  .mfa-status{font-size:14.5px; font-weight:700; text-align:center; margin:4px 0 14px;}
  .qr-box{display:flex; justify-content:center; margin:6px 0 14px;}
  .qr-box img{width:190px; height:190px; background:#fff; border-radius:var(--radius-md); padding:10px;}
  .secret-box{
    font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; letter-spacing:1px; text-align:center;
    background:var(--bg-alt); border:1px dashed var(--border); border-radius:var(--radius-sm);
    padding:10px; word-break:break-all; user-select:all;
  }
  .field[hidden]{display:none;}

  /* v7: orders, reviews, legal, admin tabs */
  .place-box{margin:6px 0 12px;}
  .place-box .hint{text-align:center; margin:0 0 10px;}
  .place-box .btn, .review-form .btn{width:100%; justify-content:center;}
  .placed-card{
    background:rgba(60,220,140,0.08); border:1px solid rgba(60,220,140,0.3);
    border-radius:var(--radius-md); padding:14px; margin:6px 0 12px; text-align:center;
  }
  .placed-card strong{color:#8ff0b5; font-size:15px;}
  .placed-card p{font-size:13.5px; color:var(--text-dim); line-height:1.8; margin:6px 0 0;}
  #placeMsg{margin:0 0 12px;}

  /* reviews: real cards, height follows the text */
  .testi-cards{min-height:0;}
  .testi-card{position:static; inset:auto; opacity:1; transform:none; pointer-events:auto; display:none;}
  .testi-card.active{display:block;}
  .testi-text{white-space:pre-line; word-break:break-word;}
  .testi-card.empty{text-align:center; color:var(--text-dim); font-size:14px;}
  .review-form{
    margin-top:30px; background:var(--card); border:1px solid var(--border-soft);
    border-radius:var(--radius-lg); padding:18px;
  }
  .review-form h3{font-size:17px; margin-bottom:4px; text-align:center;}
  .review-form > .hint{text-align:center; margin:0 0 12px;}
  .stars-pick{display:flex; justify-content:center; gap:6px; direction:ltr; margin:6px 0 4px;}
  .stars-pick button{
    background:none; border:none; font-size:34px; line-height:1; padding:2px 4px;
    color:var(--border); transition:color .15s, transform .15s;
  }
  .stars-pick button.on{color:#ffc857; text-shadow:0 0 10px rgba(255,200,87,0.45);}
  .stars-pick button:active{transform:scale(1.15);}
  .field textarea.invalid{border-color:var(--danger);}
  .consent-row{margin:4px 0 12px;}
  .check{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-dim); line-height:1.7; cursor:pointer;}
  .check input{width:18px; height:18px; margin-top:3px; flex-shrink:0; accent-color:var(--blue);}
  .check a, .legal-links a{color:var(--blue-2); text-decoration:underline;}
  .legal-links{font-size:12.5px; margin-top:16px; color:var(--text-faint);}
  .legal-body{font-size:13.5px; color:var(--text-dim); line-height:1.9;}
  .legal-body h4{color:var(--text); font-size:14.5px; margin:16px 0 4px;}
  .legal-body ul{padding-inline-start:20px; margin:4px 0;}
  .legal-body li{margin:3px 0;}
  .legal-body p{margin:4px 0;}
  .adm-tabs{margin-bottom:10px;}
  .adm-tabs button{padding:8px 6px; font-size:12.5px;}
  #admFilter{
    flex:1; min-width:0; background:var(--bg-alt); border:1px solid var(--border-soft); color:var(--text);
    border-radius:var(--radius-sm); padding:10px 12px; font-size:14px; font-family:inherit;
  }
  #admFilter[hidden]{display:none;}
  .uc-actions{flex-wrap:wrap;}
  .badge.b-new{color:#ffd58a; border-color:rgba(255,190,80,0.35);}
  .badge.b-paid{color:#7fd0ff; border-color:rgba(47,184,255,0.45);}
  .badge.b-active{color:#8ff0b5; border-color:rgba(60,220,140,0.4);}
  .badge.b-cancelled{color:#ff9a9a; border-color:rgba(255,107,107,0.4);}
  .uc-stars{color:#ffc857; letter-spacing:2px; font-size:14px;}
  .uc-body{font-size:13.5px; color:var(--text); line-height:1.8; margin-top:6px; white-space:pre-line; word-break:break-word;}
  .ord-card{background:var(--bg-alt); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:14px; margin-top:10px;}

  /* ================= v8 ================= */
  /* animated background (sits behind everything; the page keeps its own look) */
  #bgFx{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none;}

  /* Google button */
  .g-btn{
    width:100%; height:52px; display:flex; align-items:center; justify-content:center; gap:12px;
    background:var(--card,#202020); border:1px solid var(--border-soft,#3b3b3b); border-radius:999px;
    color:var(--text,#fff); font-size:15.5px; font-weight:600; font-family:inherit;
    transition:background .15s, border-color .15s;
  }
  .g-btn:hover{background:var(--bg-alt,#292929); border-color:var(--blue-2,#5a5a5a);}
  .g-btn:disabled{opacity:.6;}
  .g-logo{flex-shrink:0;}
  .g-note{text-align:center; margin:8px 0 0; font-size:12px;}
  .g-note a{color:var(--blue-2); text-decoration:underline;}
  .or-sep{display:flex; align-items:center; gap:10px; margin:14px 0 6px; color:var(--text-faint); font-size:12.5px;}
  .or-sep::before, .or-sep::after{content:''; flex:1; height:1px; background:var(--border-soft);}
  #googleMsg{margin-bottom:12px;}
  #vComplete .btn, #vInvite .btn{width:100%; justify-content:center; margin-top:8px;}

  /* invite a friend */
  .inv-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
  .inv-stats div{background:var(--bg-alt); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:12px 8px; text-align:center;}
  .inv-stats strong{display:block; font-size:22px; color:var(--blue-2); line-height:1.3;}
  .inv-stats span{font-size:12px; color:var(--text-dim); line-height:1.5; display:block;}

  /* renewal + trial cards */
  #rnPlaced .btn{width:100%; justify-content:center; margin-top:10px;}
  #rnBox .btn, #trialPlaceBox .btn{width:100%; justify-content:center;}
  #trialMsg, #rnMsg{margin:0 0 12px;}
  .hero-ctas .btn{flex:0 1 auto;}

  /* reviews: my own list */
  .my-reviews{margin-top:18px; border-top:1px dashed var(--border-soft); padding-top:14px;}
  .my-reviews h4{font-size:14.5px; margin-bottom:6px; text-align:center;}
  .mr-item{background:var(--bg-alt); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:12px; margin-top:8px;}
  .mr-item .stars{color:#ffc857; letter-spacing:2px; font-size:14px;}
  .mr-item p{font-size:13.5px; color:var(--text); line-height:1.8; margin:6px 0; white-space:pre-line; word-break:break-word;}
  .mr-actions{display:flex; gap:8px; flex-wrap:wrap;}
  .mr-item.editing{border-color:var(--blue-dim);}

  /* admin: scrollable tab strip + settings */
  .adm-tabs{display:flex; width:100%; overflow-x:auto; flex-wrap:nowrap; gap:2px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
  .adm-tabs::-webkit-scrollbar{display:none;}
  .adm-tabs button{flex:0 0 auto; white-space:nowrap; padding:9px 14px;}
  #admList{display:grid; grid-template-columns:1fr; gap:0 12px;}
  #admList > .hint{grid-column:1 / -1;}
  #admList > .set-box{grid-column:1 / -1;}
  .set-box{background:var(--bg-alt); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:14px; margin-top:12px;}
  .set-box h4{font-size:15px; margin-bottom:4px;}
  .set-box > .hint{margin:0 0 6px;}
  .set-box .hint.warn{color:#ffd58a;}
  .set-row{border:1px solid var(--border-soft); background:var(--card); border-radius:var(--radius-sm); padding:10px 12px; margin-top:8px;}
  .set-row .sr-top{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;}
  .set-form{margin-top:10px;}
  .set-form .field{margin-bottom:10px;}
  .set-form .row{display:flex; gap:8px; flex-wrap:wrap;}
  .set-form .check{margin:4px 0 10px;}
  .set-msg{margin-top:8px;}
  .uc-actions .btn-sm{padding:8px 12px;}

  /* confirm dialog */
  .confirm-card{max-width:380px; text-align:center;}
  .confirm-card p{font-size:15.5px; line-height:1.9; margin:6px 0 18px; color:var(--text);}
  .cf-actions{display:flex; gap:10px;}
  .cf-actions .btn{flex:1; justify-content:center;}
  .btn-danger-solid{
    background:linear-gradient(135deg,#ff8a8a,#ff4d4d) !important; color:#fff !important;
    border-color:transparent !important; box-shadow:0 8px 22px -10px rgba(255,77,77,0.7) !important;
  }

  /* bigger screens: roomier windows and two-column admin lists */
  @media (min-width:768px){
    .modal-card.wide{max-width:760px;}
    .modal-card{padding:26px;}
  }
  @media (min-width:1000px){
    .modal-card.wide{max-width:920px;}
    #admList{grid-template-columns:1fr 1fr;}
  }
  @media (prefers-reduced-motion:reduce){ #bgFx{display:block;} }

  .admin-tools[hidden]{display:none;}
  .badge.b-confirmed{color:#8ff0b5; border-color:rgba(60,220,140,0.4);}
  .badge.b-expired{color:#ffd58a; border-color:rgba(255,190,80,0.35);}
  .ord-h{font-size:14px; color:var(--text-dim); margin:14px 0 2px;}

  #inputModal input{width:100%; background:var(--bg-alt); border:1px solid var(--border-soft); color:var(--text); border-radius:var(--radius-sm); padding:12px 14px; font-size:15px; font-family:inherit; text-align:center;}
  #inputModal .err{text-align:center;}

  .g-btn{direction:ltr;}   /* logo on the left of the text, like the reference picture, in Arabic and English */

/* ===== v21: payment ===== */
.pay-card{max-width:560px}
.pay-amount{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,rgba(47,184,255,.14),rgba(47,184,255,.04));border:1px solid var(--blue-dim);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:12px}
.pay-amount-l{display:flex;flex-direction:column}
.pay-amount-l span{font-size:12.5px;color:var(--text-dim)}
.pay-amount-l strong{font-family:'Orbitron',sans-serif;font-size:24px;color:var(--blue-2)}
.pay-sec{background:var(--bg-alt);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px;margin:10px 0}
.pay-sec h4,.pay-proof h4{font-size:15px;margin-bottom:4px}
.pay-sec .hint{margin:6px 0}
.pay-seg{margin:6px 0 10px;flex-wrap:wrap}
.pay-seg button{min-width:90px}
.pay-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:10px 12px;margin-top:8px}
.pay-row-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.pay-row-label{font-size:12px;color:var(--text-dim)}
.pay-row-value{font-size:14px;word-break:break-all;user-select:all;text-align:start}
.pay-copy{flex-shrink:0;border:1px solid var(--border);background:transparent;color:var(--blue-2);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700}
.pay-copy:hover{border-color:var(--blue-dim)}
.pay-copy.done{color:#8ff0b5;border-color:rgba(60,220,140,.4)}
.pay-warn{font-size:12.5px;color:#ffd58a;background:rgba(255,190,80,.08);border:1px solid rgba(255,190,80,.25);border-radius:var(--radius-sm);padding:9px 12px;margin-top:8px;line-height:1.8}
.pay-notes{border:1px solid rgba(255,107,107,.35);background:rgba(255,107,107,.06);border-radius:var(--radius-md);padding:12px 16px;margin:10px 0;font-size:13px;color:#ffb8b8}
.pay-notes ul{padding-inline-start:20px;margin-top:6px}
.pay-notes li{margin:4px 0;line-height:1.8}
.pay-proof{border-top:1px dashed var(--border-soft);margin-top:14px;padding-top:14px}
.pay-proof input[type=file]{padding:10px}
.pay-status{border-radius:var(--radius-md);padding:12px 14px;margin:10px 0;border:1px solid var(--border-soft);background:var(--bg-alt)}
.pay-status strong{display:block;margin-bottom:4px}
.pay-status p{font-size:13.5px;color:var(--text-dim);line-height:1.8}
.pay-status-pending{border-color:rgba(255,190,80,.35)}
.pay-status-confirmed{border-color:rgba(60,220,140,.4);background:rgba(60,220,140,.08)}
.pay-status-short,.pay-status-not_received,.pay-status-rejected{border-color:rgba(255,107,107,.4);background:rgba(255,107,107,.06)}
.pay-hist-h{font-size:13px;margin:10px 0 4px;color:var(--text-dim)}
.pay-hist{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--border-soft)}
.pay-help{border-top:1px dashed var(--border-soft);margin-top:14px;padding-top:14px;text-align:center}
.pay-help .hint{margin:4px 0 10px}
.support-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.guarantee-box .support-links{margin-top:14px}
.pay-open{width:100%;justify-content:center;margin-top:10px}
.pay-line-confirmed{color:#8ff0b5}
.pay-line-short,.pay-line-not_received,.pay-line-rejected{color:#ff9a9a}
.pay-line-pending{color:#ffd58a}
.badge.b-pay-pending{color:#ffd58a;border-color:rgba(255,190,80,.35)}
.badge.b-pay-confirmed{color:#8ff0b5;border-color:rgba(60,220,140,.4)}
.badge.b-pay-short,.badge.b-pay-not_received,.badge.b-pay-rejected{color:#ff9a9a;border-color:rgba(255,107,107,.4)}
.social-row{flex-wrap:wrap}
#placedCard .btn,#rnPlaced .btn{width:100%;justify-content:center;margin-top:10px}