.site-header {
            position: sticky; top: 0; z-index: 50;
            display:flex; align-items:center; justify-content:space-between;
            padding: 14px 24px;
            background: rgba(247,244,240,.85);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
        }
        .site-header .brand { display:flex; align-items:center; gap:10px; }
        .site-header .logo-mark {
            width:40px; height:40px; border-radius:50%;
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px;
            flex-shrink:0; overflow:hidden;
        }
        .site-header .logo-mark img { width:100%; height:100%; object-fit:cover; }
        .site-header .brand-name { font-weight:900; font-size:16px; }
        .site-header .brand-tag { font-size:10px; color:var(--text-muted); }
        .site-nav { display:flex; align-items:center; gap:16px; font-size:13px; font-weight:700; }
        .lang-toggle-btn {
            display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
            border:1.5px solid var(--border-color); background:var(--bg-secondary); color:var(--text-secondary);
            font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; transition:var(--transition);
        }
        .lang-toggle-btn:hover { border-color:var(--border-active); color:var(--accent); }
        .auth-lang-toggle-wrap { position:fixed; top:20px; inset-inline-end:20px; z-index:10; }
        .site-nav a:hover { color:var(--accent); }
        .site-nav .nav-cta {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color:#fff !important; padding:9px 18px; border-radius:999px;
        }

        .container-public { max-width: 1000px; margin:0 auto; padding: 0 20px; }

        .btn-primary-lg {
            display:flex; align-items:center; justify-content:center; gap:8px;
            padding: 16px 24px; border:none; border-radius: var(--radius-sm);
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color:#fff; font-weight:800; font-size:15px; font-family:inherit;
            cursor:pointer; transition: var(--transition);
            box-shadow: 0 10px 30px rgba(255,122,26,.25);
        }
        .btn-primary-lg:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,122,26,.35); }
        .btn-outline-lg {
            display:flex; align-items:center; justify-content:center; gap:8px;
            padding: 16px 24px; border:1.5px solid var(--border-color); border-radius: var(--radius-sm);
            background: var(--bg-secondary); color:var(--text-primary); font-weight:800; font-size:15px; font-family:inherit;
            cursor:pointer; transition: var(--transition);
        }
        .btn-outline-lg:hover { border-color:var(--accent); color:var(--accent); }

        .site-footer { text-align:center; padding: 30px 20px; color:var(--text-muted); font-size:12px; }

        .pill { padding:2px 12px; border-radius:999px; font-size:10px; font-weight:700; display:inline-block; }
        .pill-gold { background: var(--accent-glow); color: var(--accent); }

        /* -------- الصفحة الرئيسية -------- */
        .hero { max-width: 640px; margin:0 auto; padding: 40px 20px 20px; text-align:center; }
        .hero-illustration { position:relative; height: 230px; display:flex; align-items:flex-end; justify-content:center; margin-bottom: 20px; }
        .cloud-base {
            position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
            width: 220px; height: 70px; background:#fff; border-radius: 100px;
            box-shadow: -46px 14px 0 -8px #fff, 46px 14px 0 -8px #fff, var(--shadow-sm);
        }
        .server-stack { position:relative; z-index:2; display:flex; flex-direction:column; gap:6px; margin-bottom: 46px; }
        .server-unit {
            width: 168px; height: 40px; border-radius: 9px;
            background: linear-gradient(135deg, #2e2c38, #1c1a22);
            display:flex; align-items:center; padding:0 12px; gap:6px;
            box-shadow: 0 6px 14px rgba(0,0,0,.22);
        }
        .server-unit .led { width:6px; height:6px; border-radius:50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
        .server-unit .slit { margin-right:auto; width:44px; height:3px; background:rgba(255,255,255,.15); border-radius:2px; }
        .shield-badge {
            position:absolute; bottom:-18px; left:50%; transform:translateX(-50%);
            width:52px; height:58px; z-index:3;
            background: linear-gradient(135deg, var(--accent-light), var(--accent));
            clip-path: polygon(50% 0%, 100% 20%, 100% 62%, 50% 100%, 0% 62%, 0% 20%);
            display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px;
            box-shadow: 0 10px 22px rgba(255,122,26,.4);
        }
        .hero-badges-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:380px; margin:0 auto 28px; }
        .floating-badge {
            display:flex; align-items:center; gap:10px; text-align:right;
            background:#fff; border:1px solid var(--border-color); border-radius:16px;
            padding:10px 12px; box-shadow: var(--shadow-sm);
        }
        .floating-badge .badge-icon {
            width:34px; height:34px; border-radius:50%; background:var(--accent-glow); color:var(--accent);
            display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;
        }
        .floating-badge strong { display:block; font-size:11px; }
        .floating-badge span { display:block; font-size:9px; color:var(--text-muted); }

        .eyebrow {
            display:inline-flex; align-items:center; gap:6px;
            font-size:12px; font-weight:700; color:var(--accent);
            background: var(--accent-glow); padding:6px 14px; border-radius:999px; margin-bottom:14px;
        }
        .eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
        .headline { font-size:28px; font-weight:900; line-height:1.4; margin-bottom:12px; }
        .headline .accent-text { color:var(--accent); }
        .sub-headline { font-size:14px; color:var(--text-secondary); line-height:1.9; margin-bottom:26px; }

        .feature-grid-4 { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:26px; }
        .feature-chip {
            background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius-sm);
            padding:16px 10px; text-align:center; transition:var(--transition);
        }
        .feature-chip .chip-icon {
            width:38px; height:38px; margin:0 auto 8px; border-radius:50%;
            background:var(--accent-glow); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:16px;
        }
        .feature-chip strong { display:block; font-size:12px; margin-bottom:2px; }
        .feature-chip span { font-size:10px; color:var(--text-muted); }

        .cta-row { display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
        .trust-row { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; font-size:11px; color:var(--text-muted); }
        .trust-row span { display:flex; align-items:center; gap:5px; }
        .trust-row i { color: var(--accent); }

        /* -------- صفحة الخطط -------- */
        .page-title-block { text-align:center; padding: 34px 20px 10px; }
        .page-title-block h1 { font-size:24px; font-weight:900; margin-bottom:8px; }
        .page-title-block p { color:var(--text-secondary); font-size:13px; }
        .plans-public-grid { display:grid; grid-template-columns:1fr; gap:16px; padding: 24px 20px 50px; max-width:420px; margin:0 auto; }
        @media (min-width: 720px) { .plans-public-grid { max-width:900px; grid-template-columns:repeat(2,1fr); } }
        .plan-public-card {
            background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:var(--radius);
            padding:26px 22px; text-align:center; transition:var(--transition); position:relative;
        }
        .plan-public-card:hover { border-color:var(--border-active); transform:translateY(-3px); box-shadow:var(--shadow); }
        .plan-public-icon { font-size:36px; margin-bottom:6px; }
        .plan-public-card h3 { font-size:18px; font-weight:900; margin-bottom:6px; }
        .plan-public-price { font-size:30px; font-weight:900; color:var(--accent); margin:10px 0; }
        .plan-public-price small { font-size:13px; font-weight:600; color:var(--text-muted); }
        .plan-public-price .price-original { font-size:16px; font-weight:700; color:var(--text-muted); margin-left:6px; }
        .discount-ribbon {
            position:absolute; top:14px; left:14px; background:linear-gradient(135deg,#ef4444,#dc2626);
            color:#fff; font-size:11px; font-weight:800; padding:4px 12px; border-radius:999px;
            box-shadow:0 4px 12px rgba(239,68,68,.3);
        }
        .plan-specs-list { text-align:right; margin:16px 0 20px; display:flex; flex-direction:column; gap:10px; }
        .plan-specs-list li { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-secondary); }
        .plan-specs-list i { color:var(--accent); width:18px; text-align:center; }

        /* -------- تسجيل الدخول / إنشاء حساب -------- */
        .auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
        .auth-card {
            width:100%; max-width:420px; background:var(--bg-secondary); border:1px solid var(--border-color);
            border-radius:var(--radius); padding:36px 28px; box-shadow:var(--shadow); text-align:center;
        }
        .auth-logo {
            width:60px; height:60px; margin:0 auto 16px; border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff;
            display:flex; align-items:center; justify-content:center; font-size:26px;
        }
        .auth-card h1 { font-size:20px; font-weight:900; margin-bottom:6px; }
        .auth-sub { font-size:13px; color:var(--text-muted); margin-bottom:20px; line-height:1.7; }
        .form-alert {
            background:rgba(239,68,68,.1); color:#dc2626; border:1px solid rgba(239,68,68,.25);
            border-radius:var(--radius-sm); padding:10px 14px; font-size:12px; margin-bottom:16px; text-align:right;
        }
        .field-label { display:block; font-size:12px; font-weight:700; color:var(--text-secondary); margin:14px 0 6px; text-align:right; }
        .text-input {
            width:100%; padding:13px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--border-color);
            background:var(--bg-card); color:var(--text-primary); font-size:14px; font-family:inherit; outline:none;
            transition:var(--transition);
        }
        .text-input:focus { border-color:var(--accent); }
        .auth-switch { font-size:12px; color:var(--text-muted); margin-top:14px; }
        .auth-switch a { color:var(--accent); font-weight:700; }

        .btn-google {
            display:flex; align-items:center; justify-content:center; gap:10px;
            width:100%; padding:13px; border-radius:var(--radius-sm); border:1.5px solid var(--border-color);
            background:var(--bg-secondary); color:var(--text-primary); font-weight:700; font-size:14px;
            font-family:inherit; cursor:pointer; transition:var(--transition);
        }
        .btn-google:hover { border-color:var(--border-active); background:var(--bg-card); }
        .btn-google i { color:#EA4335; font-size:16px; }
        .auth-divider { display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--text-muted); font-size:12px; }
        .auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border-color); }
        .auth-terms-check { display:flex; align-items:flex-start; gap:8px; margin-top:14px; font-size:11px; color:var(--text-muted); line-height:1.6; cursor:pointer; text-align:right; }
        .auth-terms-check input { margin-top:2px; flex-shrink:0; accent-color:var(--accent); }
        .auth-terms-check a { color:var(--accent); font-weight:700; }
        .captcha-row { display:flex; align-items:center; gap:10px; }
        .captcha-img { height:52px; border-radius:var(--radius-sm); border:1.5px solid var(--border-color); user-select:none; -webkit-user-select:none; }
        .captcha-refresh {
            width:40px; height:40px; flex-shrink:0; border-radius:var(--radius-sm); border:1.5px solid var(--border-color);
            background:var(--bg-card); color:var(--accent); font-size:14px; cursor:pointer;
        }