/* ============================================================
   GOVI Cloud — صفحة الهبوط v5 (البادئة lx-) — اعتُمد اتجاه «ب» الرسمي بلون عودي
   عودي داكن رسمي + ذهبي بتدرّجات (خط علوي، أزرار، بطاقة التحول الرقمي، الدعوة الختامية)، والخلفية بيضاء بالكامل،
   محايدات دافئة، خط Noto Kufi Arabic، خريطة المملكة المنقّطة والرياض مضيئة.
   الرموز (--brand، --gold، --oud-grad…) في portal.css. تُحمَّل في الرئيسية فقط.
   ============================================================ */

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html { scroll-padding-top: 80px; }

/* ---------- عناصر مشتركة ---------- */
.lx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 26px;
    border-radius: 8px; border: 1px solid transparent; background: var(--oud-btn); color: #fff;
    font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: filter .2s, background .2s, border-color .2s;
}
.lx-btn:hover { filter: brightness(1.12); }
.lx-btn-o { background: #fff; color: var(--brand); border-color: var(--brand-line); }
.lx-btn-o:hover { background: var(--brand-soft); filter: none; }
.lx-btn-gold { background: linear-gradient(135deg, #b8893f 0%, #d9b672 100%); color: #24150f; }
.lx-btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.lx-btn-line:hover { background: rgba(255, 255, 255, .08); filter: none; }

.lx-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--brand); }
.lx-link .i, .lx-quick .i, .lx-more .i { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.lx-link:hover .i, .lx-quick a:hover .i, .lx-card:hover .lx-more .i { transform: translateX(-3px); }

.lx-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--gold-d); }
.lx-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold-line); }
.lx-eyebrow.gold { color: #e0c07e; }

.lx-head { max-width: 680px; margin-bottom: 44px; }
.lx-head h2, .lx-h2 { margin-top: 12px; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.5; font-weight: 700; color: var(--ink); text-wrap: balance; }
.lx-head p, .lx-p { margin-top: 12px; font-size: 15.5px; line-height: 1.95; color: var(--muted); }

.lx-sec { padding: 96px 0; }
.lx-tint { background: #fff; }

.lx-ico { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #f7efe6, #efe2d3); color: var(--brand); box-shadow: inset 0 0 0 1px rgba(90, 52, 36, .08); }
.lx-ico .i { width: 24px; height: 24px; }

.lx-seg { display: inline-flex; gap: 2px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.lx-seg button { height: 38px; padding: 0 16px; border: 0; border-radius: 7px; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.lx-seg button small { font-size: 11px; font-weight: 700; color: var(--gold-d); background: var(--gold-soft); padding: 1px 7px; border-radius: 99px; }
.lx-seg button.on { background: var(--oud-btn); color: #fff; }
.lx-seg button.on small { background: rgba(255, 255, 255, .16); color: #f2d99f; }
.lx-seg.full { display: flex; width: 100%; }
.lx-seg.full button { flex: 1; justify-content: center; }

/* خانة الاستعلام */
.lx-query-box { display: flex; align-items: center; gap: 8px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(34, 24, 20, .04), 0 16px 34px -22px rgba(63, 36, 26, .35); transition: border-color .2s, box-shadow .2s; }
.lx-query-box:focus-within { border-color: #d3b99e; box-shadow: 0 0 0 4px rgba(194, 154, 82, .14), 0 16px 34px -22px rgba(63, 36, 26, .35); }
.lx-query-box > .i { width: 20px; height: 20px; color: var(--faint); margin-inline-start: 10px; }
.lx-query-box input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; font-size: 16px; text-align: right; }
.lx-query-box input::placeholder { color: var(--faint); }
.lx-query-box .lx-btn { height: 46px; }

/* ---------- الهيرو ---------- */
.lx-hero { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line-2); }
.lx-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; padding: 72px 0 40px; }
.lx-hero h1 { margin-top: 18px; font-size: clamp(30px, 3.5vw, 46px); line-height: 1.45; font-weight: 700; color: var(--ink); text-wrap: balance; }
.lx-lead { margin-top: 16px; max-width: 560px; font-size: 16.5px; line-height: 2; color: var(--muted); }

.lx-query { margin-top: 30px; max-width: 580px; }
.lx-query label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.lx-tlds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lx-tlds span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.lx-tlds b { color: var(--brand); font-weight: 700; }

.lx-quick { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 22px; font-size: 14px; }
.lx-quick a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); }
.lx-quick a:hover { color: var(--brand); }

/* الخريطة */
.lx-map { position: relative; }
.lx-map .ksa-map { width: 100%; height: auto; display: block; }
.ksa-dots circle { fill: #dccbbb; }
.ksa-ryd circle { fill: none; stroke: var(--gold); stroke-width: 1.3; transform-box: fill-box; transform-origin: center; }
.ksa-ryd .c { fill: var(--brand); stroke: #f2d99f; stroke-width: 2; }
.ksa-ryd .r1 { animation: lx-ring 3s ease-out infinite; }
.ksa-ryd .r2 { animation: lx-ring 3s ease-out 1s infinite; }
.ksa-ryd .r3 { animation: lx-ring 3s ease-out 2s infinite; }
@keyframes lx-ring { from { opacity: .95; transform: scale(.4); } to { opacity: 0; transform: scale(1.45); } }
.lx-map-tag { position: absolute; top: 66%; left: 57%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 8px; background: var(--oud-grad); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(31, 18, 13, .6); }
.lx-map-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #e0c07e; box-shadow: 0 0 0 3px rgba(224, 192, 126, .25); }

/* الحقائق */
.lx-facts { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.lx-facts > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 26px 24px; border-inline-start: 1px solid var(--line); }
.lx-facts > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.lx-facts .i { grid-row: span 2; width: 22px; height: 22px; margin-top: 2px; color: var(--gold-d); }
.lx-facts b { font-size: 15px; font-weight: 700; }
.lx-facts span { font-size: 13px; color: var(--muted); }

/* ---------- المنظومة ---------- */
.lx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lx-card { position: relative; display: flex; flex-direction: column; padding: 30px 26px 26px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.lx-card::before { content: ""; position: absolute; top: -1px; inset-inline: 26px; height: 2px; background: var(--gold-line); transform: scaleX(.3); transform-origin: right; transition: transform .45s var(--ease); }
.lx-card:hover { transform: translateY(-3px); border-color: #e2d3c5; box-shadow: 0 26px 50px -32px rgba(63, 36, 26, .45); }
.lx-card:hover::before { transform: scaleX(1); }
.lx-card h3 { margin-top: 22px; font-size: 18px; font-weight: 700; }
.lx-card p { margin-top: 8px; flex: 1; font-size: 14px; line-height: 1.95; color: var(--muted); }
.lx-card-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); }
.lx-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--brand); }

/* ---------- الخوادم السحابية ---------- */
.lx-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.lx-head-row .lx-head { margin-bottom: 0; }
.lx-servers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.lx-server { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.lx-server.pop { border: 0; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(160deg, #5a3424, #c29a52) border-box; border: 1.5px solid transparent; box-shadow: 0 30px 60px -36px rgba(63, 36, 26, .55); }
.lx-tag { position: absolute; top: -12px; inset-inline-start: 22px; padding: 3px 12px; border-radius: 99px; background: var(--oud-btn); color: #f2d99f; font-size: 11.5px; font-weight: 700; }
.lx-server-h b { display: block; font-size: 18px; font-weight: 700; }
.lx-server-h span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.lx-price { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.lx-price b { font-size: 34px; line-height: 1; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lx-price span { font-size: 13px; color: var(--muted); }
.lx-specs { list-style: none; margin: 14px 0 22px; padding: 0; flex: 1; }
.lx-specs li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; border-bottom: 1px dashed var(--line-2); }
.lx-specs li:last-child { border-bottom: 0; }
.lx-specs span { color: var(--muted); }
.lx-specs b { font-weight: 700; color: var(--ink); }
.lx-server .lx-btn { width: 100%; }
.lx-incl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 28px; padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; color: var(--ink-2); }
.lx-incl b { font-weight: 700; }
.lx-incl span { display: inline-flex; align-items: center; gap: 7px; }
.lx-incl .i { width: 17px; height: 17px; color: var(--gold-d); }
.lx-incl .lx-link { margin-inline-start: auto; font-size: 13.5px; }

/* ---------- النطاقات والبريد (عمودان) ---------- */
.lx-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.lx-checks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.lx-checks li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.lx-checks .i { width: 17px; height: 17px; color: var(--gold-d); }

.lx-tld-table { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 26px 50px -38px rgba(63, 36, 26, .45); }
.lx-tld-h, .lx-tld-r { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; padding: 13px 22px; align-items: center; }
.lx-tld-h { background: var(--oud-grad); color: #f1e3cf; font-size: 12.5px; font-weight: 700; }
.lx-tld-r { border-top: 1px solid var(--line-2); font-size: 14px; }
.lx-tld-r b { font-weight: 700; color: var(--brand); text-align: right; }
.lx-tld-r span:last-child { color: var(--muted); }
.lx-tld-r.sa { background: #fbf6ef; }
.lx-tld-r.sa span { color: var(--gold-d); font-weight: 600; }

.lx-mail { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 560px; }
.lx-note { margin-top: 10px; font-size: 13px; color: var(--muted); }
.lx-steps { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.lx-steps ol { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: s; display: grid; gap: 14px; }
.lx-steps li { position: relative; padding-inline-start: 40px; counter-increment: s; }
.lx-steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--oud-btn); color: #f2d99f; font-size: 13px; font-weight: 700; }
.lx-steps b { display: block; font-size: 14.5px; font-weight: 700; }
.lx-steps span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.8; }

.lx-inbox { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 60px -40px rgba(63, 36, 26, .5); overflow: hidden; }
.lx-inbox-h { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: var(--oud-grad); color: #fff; }
.lx-inbox-h .i { width: 20px; height: 20px; color: #e0c07e; }
.lx-inbox-h b { flex: 1; font-size: 14.5px; }
.lx-ok { padding: 3px 10px; border-radius: 99px; background: rgba(224, 192, 126, .18); color: #f2d99f; font-size: 12px; font-weight: 700; }
.lx-inbox ul { list-style: none; margin: 0; padding: 6px 20px; }
.lx-inbox li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.lx-inbox li:last-child { border-bottom: 0; }
.lx-inbox .av { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gold-soft); color: var(--brand); font-weight: 700; }
.lx-inbox li b { display: block; font-size: 14.5px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.lx-inbox li small { display: block; font-size: 12.5px; color: var(--muted); }
.lx-inbox-f { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: var(--subtle); border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ok); font-weight: 600; }
.lx-inbox-f .i { width: 17px; height: 17px; }

/* ---------- بطاقة التحول الرقمي (داخل الحاوية حتى تبقى الخلفية بيضاء) ---------- */
.lx-band-sec { padding: 0 0 96px; }
.lx-band { position: relative; overflow: hidden; background: var(--oud-grad); color: #fff; padding: 56px 52px; border-radius: 18px; }
.lx-band::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gold-line); }
.lx-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(224, 192, 126, .14) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, #000, transparent 60%); -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); }
.lx-band > * { position: relative; z-index: 1; }
.lx-band-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.lx-band h2 { margin-top: 12px; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.5; font-weight: 700; }
.lx-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.lx-chips a { padding: 8px 14px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(224, 192, 126, .3); font-size: 13.5px; color: #f6ecdd; transition: background .2s, border-color .2s; }
.lx-chips a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(224, 192, 126, .6); }

/* ---------- الأسئلة ---------- */
.lx-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.lx-faq-grid .lx-head { margin-bottom: 0; }
.lx-faq { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px 24px; }
.lx-q + .lx-q { border-top: 1px solid var(--line-2); }
.lx-q button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; background: none; border: 0; cursor: pointer; text-align: start; font-size: 15px; font-weight: 700; color: var(--ink); }
.lx-q button .i { width: 18px; height: 18px; flex: none; color: var(--faint); transition: transform .35s var(--ease), color .25s; }
.lx-q.on button .i { transform: rotate(45deg); color: var(--gold-d); }
.lx-q p { padding-bottom: 20px; font-size: 14.5px; line-height: 1.95; color: var(--muted); }

/* ---------- الدعوة الختامية ---------- */
.lx-end { padding: 0 0 96px; }
.lx-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 48px 52px; border-radius: 18px; background: var(--oud-grad); color: #fff; }
.lx-cta::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gold-line); }
.lx-cta::after { content: ""; position: absolute; left: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 192, 126, .2), transparent); pointer-events: none; }
.lx-cta > * { position: relative; z-index: 1; }
.lx-cta h2 { font-size: 26px; line-height: 1.5; font-weight: 700; }
.lx-cta p { margin-top: 6px; font-size: 15px; color: #dccbb8; }
.lx-cta-a { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- الحركة (فقط مع JS) ---------- */
.lx-js .lx-in { animation: lx-rise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
@keyframes lx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lx-js [data-r] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.lx-js [data-r].in { opacity: 1; transform: none; }

/* ---------- الشاشات ---------- */
@media (max-width: 1100px) {
    .lx-cards, .lx-servers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .lx-hero-grid, .lx-split, .lx-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .lx-map { max-width: 440px; }
    .lx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
    .lx-facts > div, .lx-facts > div:first-child { border: 0; padding: 18px 0; }
    .lx-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
    .lx-hero-grid { padding: 44px 0 20px; }
    .lx-lead { font-size: 15.5px; }
    .lx-query-box > .i { display: none; }
    .lx-query-box input { padding-inline-start: 10px; font-size: 15px; }
    .lx-query-box .lx-btn { padding: 0 18px; }
    .lx-sec { padding: 64px 0; }
    .lx-head { margin-bottom: 30px; }
    .lx-cards, .lx-servers { grid-template-columns: minmax(0, 1fr); }
    .lx-incl .lx-link { margin-inline-start: 0; }
    .lx-seg.full button { font-size: 13px; padding: 0 8px; }
    .lx-band { padding: 40px 24px; }
    .lx-band-sec { padding-bottom: 64px; }
    .lx-end { padding-bottom: 64px; }
    .lx-cta { padding: 32px 24px; }
    .lx-cta-a, .lx-cta-a .lx-btn { width: 100%; }
    .lx-facts span { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .lx-js .lx-in, .lx-js [data-r] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
    .ksa-ryd circle { animation: none !important; }
}