@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
    --bg: #F4F8FD;
    --panel: #FFFFFF;
    --panel-2: #EAF2FC;
    --line: #D9E6F7;
    --text: #16233B;
    --muted: #667490;
    --signal: #1863DC;  
    --signal-dim: #E7F0FE;
    --amber: #E38A00;
    --danger: #D93A54;
}

*{ box-sizing: border-box; }

body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Tajawal', sans-serif;
    margin: 0;
    direction: rtl;
    line-height: 1.7;
}


.mono{ font-family: 'IBM Plex Mono', monospace; direction: ltr; unicode-bidi: embed; }

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

.container{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 0; border-bottom: 1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:900; font-size:1.15rem; }
.brand img{ width:38px; height:38px; border-radius:10px; object-fit:cover; border:1px solid var(--line); }
.nav a{ color: var(--muted); margin-inline-start: 24px; font-weight:500; }
.nav a:hover{ color: var(--signal); }

.btn{
    display:inline-block; padding: 11px 22px; border-radius:10px;
    font-weight:700; border: 1px solid transparent; cursor:pointer; font-size:.95rem;
}
.btn-primary{ background: var(--signal); color:#fff; }
.btn-primary:hover{ opacity:.9; }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.btn-ghost{ background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover{ border-color: var(--signal); color: var(--signal); }
.btn-danger{ background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-copy{ background: var(--signal-dim); color: var(--signal); border-color: var(--signal-dim); font-size:.85rem; padding: 8px 14px; }

.hero{ padding: 72px 0 48px; display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; }
.hero h1{ font-size: 2.5rem; font-weight:900; margin:0 0 16px; line-height:1.35; }
.hero h1 span{ color: var(--signal); }
.hero p{ color: var(--muted); font-size:1.05rem; max-width: 46ch; }
.hero-cta{ display:flex; gap:12px; margin-top: 28px; }

.pulse-card{
    background: var(--panel); border:1px solid var(--line); border-radius:16px;
    padding: 22px; position:relative; overflow:hidden; box-shadow: 0 8px 24px rgba(24,99,220,.06);
}
.pulse-dot{
    width:10px; height:10px; border-radius:50%; background: var(--signal);
    display:inline-block; box-shadow: 0 0 0 0 rgba(24,99,220,.6);
    animation: pulse 1.8s infinite;
}
@keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(24,99,220,.5); }
    70%{ box-shadow: 0 0 0 12px rgba(24,99,220,0); }
    100%{ box-shadow: 0 0 0 0 rgba(24,99,220,0); }
}
@media (prefers-reduced-motion: reduce){ .pulse-dot{ animation:none; } }

.code-block{
    background: #0E1A2E; border-radius:12px; padding:18px; margin-top:14px;
    font-size: .85rem; color:#BFE0FF; overflow-x:auto;
}
.code-block .k{ color:#7C93B8; }
.code-block .s{ color:#7FD3A3; }

.pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin: 20px 0 40px; }
.price-card{
    background: var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; text-align:center;
}
.price-card .amount{ font-size:1.6rem; font-weight:900; color: var(--signal); margin: 8px 0; }

.channel-list{ display:grid; gap:10px; margin: 16px 0 36px; }
.channel-row{
    display:flex; justify-content:space-between; align-items:center;
    background: var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 18px;
}
.channel-row .price{ font-weight:800; color: var(--amber); }

.auth-wrap{ max-width: 420px; margin: 60px auto; }
.card{ background: var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow: 0 4px 16px rgba(22,35,59,.04); }
.field{ margin-bottom:16px; }
.field label{ display:block; margin-bottom:6px; color: var(--muted); font-size:.9rem; }
.field input, .field select, .field textarea{
    width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
    background: #fff; color: var(--text); font-family:inherit; font-size:.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--signal); border-color:var(--signal); }
.alert{ padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:.9rem; }
.alert-error{ background: rgba(217,58,84,.08); color: var(--danger); border:1px solid rgba(217,58,84,.25); }
.alert-ok{ background: var(--signal-dim); color: var(--signal); border:1px solid rgba(24,99,220,.25); }

.dash-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin: 24px 0; }
.stat{ background: var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; }
.stat .label{ color:var(--muted); font-size:.85rem; }
.stat .value{ font-size:1.7rem; font-weight:900; margin-top:6px; }

table{ width:100%; border-collapse: collapse; background: var(--panel); border-radius:12px; overflow:hidden; }
th, td{ padding:12px 14px; text-align:right; border-bottom:1px solid var(--line); font-size:.9rem; }
th{ color: var(--muted); font-weight:600; background: var(--panel-2); }

.badge{ padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }
.badge-sent{ background: var(--signal-dim); color: var(--signal); }
.badge-pending{ background: rgba(227,138,0,.12); color: var(--amber); }
.badge-failed{ background: rgba(217,58,84,.12); color: var(--danger); }

.key-reveal{
    background:#0E1A2E; border:1px dashed var(--signal); border-radius:10px; padding:16px;
    font-family:'IBM Plex Mono',monospace; direction:ltr; text-align:left; word-break:break-all; color:#8FD3FF;
}

.pay-methods{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin: 16px 0; }
.pay-method{
    position:relative; border:2px solid var(--line); border-radius:14px; padding:18px;
    text-align:center; cursor:pointer; background:#fff; transition: border-color .15s, box-shadow .15s;
}
.pay-method img{ max-width:100%; height:56px; object-fit:contain; margin-bottom:10px; }
.pay-method input{ position:absolute; top:12px; left:12px; width:18px; height:18px; accent-color: var(--signal); }
.pay-method span{ font-weight:700; color: var(--muted); }
.pay-method.selected{ border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-dim); }
.pay-method.selected span{ color: var(--signal); }

.pay-target{
    background: var(--signal-dim); border:1px solid rgba(24,99,220,.25); border-radius:12px;
    padding:18px; margin-top:6px;
}
.pay-target .num{ font-family:'IBM Plex Mono',monospace; direction:ltr; text-align:left; font-size:1.15rem; font-weight:700; color: var(--signal); }
.pay-target .warn{ color: var(--danger); font-weight:800; margin-top:10px; }
.copy-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }

.phone-mock{
    max-width: 320px; margin: 0 auto; background:#0B141A; border-radius: 34px; padding: 14px;
    box-shadow: 0 12px 30px rgba(22,35,59,.18);
}
.phone-screen{ background:#E5DDD5; border-radius:22px; overflow:hidden; min-height:420px; display:flex; flex-direction:column; }
.wa-header{ background:#075E54; color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; font-weight:700; }
.wa-header .dot{ width:34px; height:34px; border-radius:50%; background:#128C7E; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.wa-body{ flex:1; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; }
.wa-bubble{
    background:#fff; border-radius:10px; padding:10px 14px; max-width:85%;
    box-shadow: 0 1px 1px rgba(0,0,0,.1); font-size:.9rem; color:#111; align-self:flex-start;
}
.wa-bubble b{ color:#075E54; }
.wa-time{ font-size:.72rem; color:#999; margin-top:4px; text-align:left; direction:ltr; }

footer{ text-align:center; color: var(--muted); padding: 40px 0; font-size:.85rem; }

@media (max-width: 800px){
    .hero{ grid-template-columns: 1fr; }
    .pricing-grid, .dash-grid, .pay-methods{ grid-template-columns: 1fr; }
    .nav a{ margin-inline-start: 14px; font-size:.85rem; }
}

body.rtl{ direction: rtl; }
body.ltr{ direction: ltr; }

.sidebar{
    position: fixed; top:0; bottom:0; width: 248px;
    background: #0F2246; color:#DCE7F8; display:flex; flex-direction:column;
    padding: 20px 14px; z-index: 50;
}
body.rtl .sidebar{ right:0; }
body.ltr .sidebar{ left:0; }

.sb-brand{ display:flex; align-items:center; gap:11px; padding: 4px 8px 20px; }
.sb-brand img{ width:40px; height:40px; border-radius:11px; object-fit:cover; }
.sb-brand-name{ font-weight:900; font-size:1rem; color:#fff; line-height:1.3; }
.sb-brand-sub{ font-size:.72rem; color:#7E9AC8; }

.sb-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.sb-link{
    display:flex; align-items:center; gap:11px; padding: 11px 13px; border-radius:10px;
    color:#A9BFE0; font-weight:600; font-size:.92rem; transition: background .15s, color .15s;
}
.sb-link:hover{ background: rgba(255,255,255,.07); color:#fff; }
.sb-link.active{ background: var(--signal); color:#fff; }
.sb-link .ico{ width:19px; height:19px; flex-shrink:0; }
.sb-badge{
    margin-inline-start:auto; background: var(--danger); color:#fff; font-style:normal;
    font-size:.7rem; font-weight:800; padding:1px 7px; border-radius:999px;
}

.sb-foot{ border-top:1px solid rgba(255,255,255,.1); padding-top:10px; display:flex; flex-direction:column; gap:4px; }
.sb-user{ display:flex; align-items:center; gap:10px; padding:12px 13px 4px; }
.sb-avatar{
    width:34px; height:34px; border-radius:50%; background: var(--signal);
    display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; flex-shrink:0;
}
.sb-user-name{ font-size:.85rem; font-weight:700; color:#fff; }
.sb-user-bal{ font-size:.75rem; color:#7FD3A3; }

.main{ min-height:100vh; }
body.rtl .main{ margin-right: 248px; }
body.ltr .main{ margin-left: 248px; }
.main-inner{ max-width: 1000px; margin:0 auto; padding: 36px 30px 0; }

.sb-toggle{
    display:none; position:fixed; top:14px; z-index:60; background: var(--signal); color:#fff;
    border:none; width:42px; height:42px; border-radius:11px; font-size:1.1rem; cursor:pointer;
}
body.rtl .sb-toggle{ right:14px; }
body.ltr .sb-toggle{ left:14px; }
.sb-overlay{ display:none; }

@media (max-width: 900px){
    .sidebar{ transform: translateX(100%); transition: transform .25s; }
    body.ltr .sidebar{ transform: translateX(-100%); }
    body.sb-open .sidebar{ transform: none; }
    body.rtl .main, body.ltr .main{ margin:0; }
    .main-inner{ padding: 70px 18px 0; }
    .sb-toggle{ display:block; }
    body.sb-open .sb-overlay{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; }
}

.public-nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 0; border-bottom:1px solid var(--line);
}
.lang-pill{
    border:1px solid var(--line); border-radius:999px; padding:5px 14px;
    font-weight:800; font-size:.8rem; color:var(--signal); margin-inline-start:20px;
}
.lang-pill:hover{ background: var(--signal-dim); }

.notif{
    display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius:12px;
    padding:16px 18px; margin-bottom:10px; position:relative;
}
.notif.unread{ border-inline-start:4px solid var(--signal); background: #FBFDFF; }
.notif-dot{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.05rem; }
.notif-info{ background: var(--signal-dim); }
.notif-success{ background:#E4F7ED; }
.notif-warning{ background:#FDF1DE; }
.notif-error{ background:#FCE8EC; }
.notif-title{ font-weight:800; }
.notif-body{ color:var(--muted); font-size:.9rem; }
.notif-time{ color:var(--muted); font-size:.76rem; margin-top:4px; }
.notif .new-tag{ position:absolute; top:14px; inset-inline-end:16px; background:var(--signal); color:#fff; font-size:.68rem; font-weight:800; padding:1px 8px; border-radius:999px; }

.support-hero{
    display:flex; align-items:center; gap:22px; background:linear-gradient(135deg,#EAF2FC,#F6FAFF);
    border:1px solid var(--line); border-radius:16px; padding:24px; margin-bottom:24px;
}
.support-hero svg{ width:104px; height:104px; flex-shrink:0; }
.ticket-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px;
}
.ticket-row:hover{ border-color: var(--signal); }
.chat{ display:flex; flex-direction:column; gap:12px; margin: 18px 0; }
.chat-msg{ max-width:76%; padding:12px 16px; border-radius:14px; font-size:.92rem; }
.chat-user{ align-self:flex-start; background:#fff; border:1px solid var(--line); }
.chat-admin{ align-self:flex-end; background: var(--signal); color:#fff; }
.chat-meta{ font-size:.72rem; opacity:.7; margin-top:5px; }

.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin: 30px 0 12px; }
.section-head h3{ margin:0; }
.section-head a{ color: var(--signal); font-weight:700; font-size:.88rem; }
.search-bar{ display:flex; gap:10px; margin-bottom:16px; }
.search-bar input{ flex:1; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-family:inherit; }
.pill{ background: var(--panel-2); border-radius:999px; padding:3px 12px; font-size:.8rem; font-weight:700; color: var(--signal); }

.btn-google{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:12px 18px; border:1px solid var(--line); border-radius:10px;
    background:#fff; color:var(--text) !important; font-weight:700; font-size:.95rem;
    transition:border-color .15s, box-shadow .15s;
}
.btn-google:hover{ border-color:var(--signal); box-shadow:0 2px 10px rgba(24,99,220,.12); }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--muted); font-size:.84rem; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); }

.linked-account{
    display:flex; align-items:center; gap:12px; background:var(--signal-dim);
    border:1px solid rgba(24,99,220,.25); border-radius:12px; padding:14px; margin-bottom:18px;
}
.linked-dot{
    width:30px; height:30px; border-radius:50%; background:var(--signal); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:900; flex-shrink:0;
}

.captcha-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.captcha-img{ border:1px solid var(--line); border-radius:10px; display:block; }

.price-card .btn{ margin-top:14px; width:100%; text-align:center; }

.nav a.btn, .public-nav a.btn{ color:#fff; }
.nav a.btn-ghost, .public-nav a.btn-ghost{ color: var(--text); }
.nav a.btn-ghost:hover, .public-nav a.btn-ghost:hover{ color: var(--signal); }
a.btn-primary, button.btn-primary{ color:#fff; }
a.btn-primary:hover{ color:#fff; opacity:.9; }

.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:18px 0 46px; }
.feature{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; }
.feature .fico{ width:40px; height:40px; border-radius:11px; background:var(--signal-dim);
    display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:10px; }
.feature h4{ margin:0 0 5px; font-size:.98rem; }
.feature p{ margin:0; color:var(--muted); font-size:.85rem; line-height:1.6; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:18px 0 46px; }
.step{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; position:relative; }
.step-num{ width:32px; height:32px; border-radius:50%; background:var(--signal); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.9rem; margin-bottom:12px; }
.step h4{ margin:0 0 6px; font-size:1rem; }
.step p{ margin:0; color:var(--muted); font-size:.87rem; }

.price-card{ position:relative; display:flex; flex-direction:column; }
.price-card.featured{ border:2px solid var(--signal); box-shadow:0 10px 30px rgba(24,99,220,.14); }
.pkg-tag{ position:absolute; top:-13px; inset-inline-start:50%; transform:translateX(50%);
    background:var(--signal); color:#fff; font-size:.74rem; font-weight:800;
    padding:4px 14px; border-radius:999px; white-space:nowrap; }
body.ltr .pkg-tag{ transform:translateX(-50%); }
.pkg-meta{ border-top:1px solid var(--line); margin-top:14px; padding-top:12px;
    color:var(--muted); font-size:.83rem; text-align:start; }
.pkg-meta li{ margin-bottom:5px; }
.pkg-meta ul{ margin:0; padding-inline-start:18px; }

.pay-showcase{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:18px 0 12px; }
.pay-box{ background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:22px; display:flex; align-items:center; gap:18px; }
.pay-box img{ width:96px; height:60px; object-fit:contain; flex-shrink:0; }
.pay-box h4{ margin:0 0 4px; font-size:1rem; }
.pay-box p{ margin:0; color:var(--muted); font-size:.85rem; }

.faq details{ background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:14px 18px; margin-bottom:10px; }
.faq summary{ cursor:pointer; font-weight:700; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; float:inline-end; color:var(--signal); font-weight:900; }
.faq details[open] summary::after{ content:'-'; }
.faq p{ color:var(--muted); font-size:.9rem; margin:10px 0 0; }

.cta-band{ background:linear-gradient(135deg,#0F2246,#1863DC); border-radius:18px;
    padding:38px; text-align:center; color:#fff; margin:46px 0 20px; }
.cta-band h2{ color:#fff; margin:0 0 8px; }
.cta-band p{ color:#C3D9F7; margin:0 0 20px; }
.cta-band .btn-primary{ background:#fff; color:var(--signal) !important; }

@media (max-width:900px){
    .feature-grid{ grid-template-columns:repeat(2,1fr); }
    .steps, .pay-showcase{ grid-template-columns:1fr; }
}

.site-footer{ border-top:1px solid var(--line); margin-top:56px; padding-top:36px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:34px; padding-bottom:28px; }
.footer-col h4{ margin:0 0 14px; font-size:.95rem; }
.footer-col > a{ display:block; color:var(--muted); font-size:.88rem; margin-bottom:9px; }
.footer-col > a:hover{ color:var(--signal); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.footer-brand img{ width:36px; height:36px; border-radius:10px; object-fit:cover; border:1px solid var(--line); }
.footer-about{ color:var(--muted); font-size:.86rem; margin:0; line-height:1.7; max-width:34ch; }

.contact-line{ display:flex !important; align-items:center; gap:10px; }
.ci{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center;
     justify-content:center; color:#fff; flex-shrink:0; }
.ci-wa{ background:#25D366; }
.ci-mail{ background:#EA4335; }
.ci-ig{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }
.ci-fb{ background:#1877F2; }

.footer-bottom{ border-top:1px solid var(--line); padding:18px 0 30px;
    text-align:center; color:var(--muted); font-size:.84rem; }

.contact-quick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:12px; margin-bottom:24px; }
.contact-quick a{ display:flex; align-items:center; gap:11px; background:var(--panel);
    border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.contact-quick a:hover{ border-color:var(--signal); }
.contact-quick .label{ font-size:.76rem; color:var(--muted); display:block; }
.contact-quick .val{ font-weight:700; font-size:.88rem; }

@media (max-width:800px){
    .footer-grid{ grid-template-columns:1fr; gap:26px; }
}

.pkg-note{ color:var(--muted); font-size:.79rem; margin-bottom:8px; }
.pkg-row{ display:flex; justify-content:space-between; align-items:center;
    font-size:.85rem; padding:5px 0; border-bottom:1px dashed var(--line); }
.pkg-row:last-of-type{ border-bottom:none; }
.pkg-row span{ color:var(--muted); }
.pkg-row strong{ color:var(--text); }
.pkg-row.pkg-rate{ margin-top:6px; border-top:1px solid var(--line);
    border-bottom:none; padding-top:9px; }
.pkg-row.pkg-rate strong{ color:var(--signal); }

.quota-bar{ display:flex; align-items:center; gap:30px; flex-wrap:wrap;
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:16px 20px; margin-bottom:20px; }
.quota-label{ display:block; color:var(--muted); font-size:.78rem; }
.quota-val{ font-weight:900; font-size:1.15rem; }
.quota-val.full{ color:var(--danger); }
.quota-bar .btn{ margin-inline-start:auto; }

.verify-icon{
    width:62px; height:62px; border-radius:50%; background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.otp-input{
    width:100%; padding:16px; text-align:center; font-size:1.9rem; font-weight:800;
    letter-spacing:.5em; text-indent:.5em; border:2px solid var(--line); border-radius:12px;
    font-family:'IBM Plex Mono',monospace; direction:ltr; background:#fff; color:var(--text);
}
.otp-input:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-dim); }

.soon-tag{
    display:inline-block; background:var(--panel-2); color:var(--muted);
    border:1px dashed var(--line); border-radius:999px;
    padding:2px 10px; font-size:.72rem; font-weight:800;
    margin-inline-start:8px; vertical-align:middle; white-space:nowrap;
}
.channel-row.row-soon{ opacity:.62; }
.channel-row.row-soon .price{ color:var(--muted); }