/* فيودكس — بوابة الاستقبال start.fudex.com.sa — نظام تصميم موحّد (عربي RTL) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Readex+Pro:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#0A0E2A; --ink2:#11173F; --ink3:#1A2150;
  --purple:#6A5BFF; --purple2:#8E80FF; --indigo:#4A3FD6; --violet:#B6ABFF;
  --cyan:#3FD9D2; --gold:#FFC861;
  --paper:#FBFBFF; --lav:#EEF0FF; --line:#E6E7F5;
  --text:#1A1F46; --muted:#6E739B; --muted2:#9aa0c4;
  --ok:#23B574; --warn:#F0883E;
  --radius:18px; --radius-lg:26px;
  --shadow:0 18px 50px -18px rgba(40,30,120,.35);
  --shadow-soft:0 10px 30px -14px rgba(40,30,120,.25);
  --maxw:1160px;
  --grad:linear-gradient(135deg,#6A5BFF 0%,#4A3FD6 55%,#3A2FB0 100%);
  --grad-soft:linear-gradient(135deg,#7C6DFF 0%,#5B4DE6 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Readex Pro','Tajawal',system-ui,'Segoe UI',Tahoma,sans-serif;
  color:var(--text); background:var(--paper); direction:rtl; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:'Tajawal','Readex Pro',sans-serif; line-height:1.25; margin:0; font-weight:800}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.muted{color:var(--muted)}
.center{text-align:center}

/* أزرار */
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:999px;
  font-family:'Tajawal',sans-serif; font-weight:700; font-size:1.02rem; cursor:pointer; border:0;
  transition:transform .18s ease, box-shadow .25s ease, background .2s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 14px 34px -10px rgba(106,91,255,.65)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 22px 46px -12px rgba(106,91,255,.8)}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.28); backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-light{background:#fff; color:var(--indigo); box-shadow:var(--shadow-soft)}
.btn-light:hover{transform:translateY(-2px)}
.btn-lg{padding:18px 40px; font-size:1.15rem}
.btn .ic{font-size:1.2em; line-height:0}

/* شريط علوي */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(10,14,42,.72); border-bottom:1px solid rgba(255,255,255,.08)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px}
.nav .brand{display:flex; align-items:center; gap:12px}
.nav .brand img{height:34px}
.nav .brand b{color:#fff; font-family:'Tajawal'; font-weight:800; font-size:1.25rem; letter-spacing:.2px}
.nav .links{display:flex; align-items:center; gap:26px}
.nav .links a{color:rgba(255,255,255,.82); font-size:.97rem; font-weight:500}
.nav .links a:hover{color:#fff}
@media(max-width:780px){.nav .links a:not(.btn){display:none}}

/* الواجهة الداكنة (هيرو) */
.dark{background:
  radial-gradient(1100px 600px at 85% -10%, rgba(106,91,255,.34), transparent 60%),
  radial-gradient(900px 500px at 5% 0%, rgba(63,217,210,.14), transparent 55%),
  linear-gradient(180deg,#0A0E2A 0%, #0C1136 60%, #0A0E2A 100%); color:#fff}
.hero{padding:64px 0 96px; position:relative; overflow:hidden}
.hero .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:var(--violet);
  font-weight:600; font-size:.9rem; margin-bottom:24px}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.7rem); font-weight:900; color:#fff; letter-spacing:-.5px}
.hero h1 .grad{background:linear-gradient(110deg,#9D90FF,#3FD9D2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero p.lead{font-size:clamp(1.05rem,2.3vw,1.3rem); color:rgba(255,255,255,.82); max-width:660px; margin:22px 0 36px}
.hero .cta{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.hero .glow{position:absolute; inset:auto -120px -160px auto; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(106,91,255,.5),transparent 62%); filter:blur(20px); pointer-events:none}

/* شارات الثقة تحت الهيرو */
.trust{display:flex; gap:28px; flex-wrap:wrap; margin-top:48px; opacity:.92}
.trust .it{display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.8); font-size:.95rem}
.trust .it b{color:#fff; font-family:'Tajawal'; font-weight:800; font-size:1.25rem}

/* أقسام عامة */
section{padding:78px 0}
.sec-head{text-align:center; max-width:680px; margin:0 auto 48px}
.sec-head .kicker{color:var(--purple); font-weight:700; font-family:'Tajawal'; letter-spacing:.5px; margin-bottom:10px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem); color:var(--ink)}
.sec-head p{color:var(--muted); font-size:1.08rem; margin-top:14px}

/* منتجات فيودكس */
.products{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media(max-width:900px){.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.products{grid-template-columns:1fr}}
.pcard{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 22px;
  box-shadow:var(--shadow-soft); transition:transform .2s, box-shadow .25s; position:relative; overflow:hidden}
.pcard:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.pcard::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad)}
.pcard .logo{height:40px; margin-bottom:18px; object-fit:contain; object-position:right}
.pcard h3{font-size:1.18rem; margin-bottom:8px; color:var(--ink)}
.pcard p{color:var(--muted); font-size:.97rem; margin:0}

/* مسارات الفرز */
.paths{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media(max-width:760px){.paths{grid-template-columns:1fr}}
.path{border-radius:var(--radius-lg); padding:38px 32px; position:relative; overflow:hidden; color:#fff}
.path.company{background:linear-gradient(135deg,#4A3FD6,#6A5BFF)}
.path.founder{background:linear-gradient(135deg,#11173F,#2A2F66)}
.path .ic{font-size:2.4rem; margin-bottom:14px}
.path h3{font-size:1.5rem; color:#fff; margin-bottom:10px}
.path p{color:rgba(255,255,255,.85); margin-bottom:22px}
.path ul{list-style:none; padding:0; margin:0 0 24px}
.path li{display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; color:rgba(255,255,255,.92); font-size:.98rem}
.path li::before{content:"✦"; color:var(--violet)}

/* كيف يعمل — خطوات */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.step{background:var(--lav); border-radius:var(--radius); padding:26px 22px; position:relative}
.step .n{width:42px; height:42px; border-radius:12px; background:var(--grad); color:#fff; display:grid; place-items:center;
  font-family:'Tajawal'; font-weight:800; font-size:1.2rem; margin-bottom:16px; box-shadow:0 8px 20px -8px rgba(106,91,255,.7)}
.step h4{color:var(--ink); font-size:1.1rem; margin-bottom:8px}
.step p{color:var(--muted); font-size:.95rem; margin:0}

/* شريط CTA سفلي */
.cta-band{background:var(--grad); border-radius:32px; padding:54px 40px; text-align:center; color:#fff; position:relative; overflow:hidden}
.cta-band h2{font-size:clamp(1.6rem,3.4vw,2.3rem); color:#fff; margin-bottom:12px}
.cta-band p{color:rgba(255,255,255,.9); max-width:560px; margin:0 auto 28px; font-size:1.08rem}

/* الفوتر */
footer{background:var(--ink); color:rgba(255,255,255,.75); padding:48px 0 30px; margin-top:20px}
footer .grid{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:center}
footer .brand{display:flex; align-items:center; gap:12px}
footer .brand img{height:30px}
footer .brand b{color:#fff; font-family:'Tajawal'; font-weight:800; font-size:1.15rem}
footer a{color:rgba(255,255,255,.72)}
footer a:hover{color:#fff}
footer .cols{display:flex; gap:34px; flex-wrap:wrap}
footer small{display:block; text-align:center; margin-top:30px; color:var(--muted2); font-size:.85rem}

/* ── شات سعيد (overlay) ── */
.chat-fab{position:fixed; inset-block-end:26px; inset-inline-start:26px; z-index:60;
  background:var(--grad); color:#fff; border:0; border-radius:999px; padding:15px 26px; cursor:pointer;
  font-family:'Tajawal'; font-weight:800; font-size:1.05rem; display:flex; align-items:center; gap:10px;
  box-shadow:0 18px 40px -10px rgba(106,91,255,.7); animation:fabin .5s ease}
@keyframes fabin{from{transform:translateY(20px); opacity:0}to{transform:none; opacity:1}}
.chat-fab .dot{width:10px; height:10px; border-radius:50%; background:#48f0a0; box-shadow:0 0 0 0 rgba(72,240,160,.6); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(72,240,160,.55)}70%{box-shadow:0 0 0 12px rgba(72,240,160,0)}100%{box-shadow:0 0 0 0 rgba(72,240,160,0)}}

.chat-overlay{position:fixed; inset:0; z-index:70; background:rgba(8,10,30,.55); backdrop-filter:blur(4px);
  display:none; align-items:flex-end; justify-content:flex-start; padding:0}
.chat-overlay.open{display:flex}
.chat-panel{width:420px; max-width:100vw; height:100dvh; background:#fff; display:flex; flex-direction:column;
  box-shadow:0 0 60px rgba(0,0,0,.3); animation:slidein .3s ease}
@media(max-width:480px){.chat-panel{width:100vw}}
@keyframes slidein{from{transform:translateX(-30px); opacity:.4}to{transform:none; opacity:1}}
.chat-head{background:var(--grad); color:#fff; padding:18px 20px; display:flex; align-items:center; gap:14px}
.chat-head .ava{position:relative}
.chat-head .ava img,.chat-head .ava .ph{width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); background:#fff}
.chat-head .ava .ph{display:grid; place-items:center; color:var(--indigo); font-family:'Tajawal'; font-weight:800; font-size:1.2rem}
.chat-head .ava .st{position:absolute; inset-block-end:0; inset-inline-end:0; width:13px; height:13px; border-radius:50%; background:#48f0a0; border:2px solid #fff}
.chat-head .meta{flex:1}
.chat-head .meta b{display:block; font-family:'Tajawal'; font-weight:800; font-size:1.08rem}
.chat-head .meta span{font-size:.85rem; color:rgba(255,255,255,.85)}
.chat-head .x{background:rgba(255,255,255,.18); border:0; color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1.1rem}
.chat-head .ava.off img,.chat-head .ava.off .ph{filter:grayscale(1) opacity(.5)}
.chat-head .ava.off .st{background:#9aa0c4}

.chat-body{flex:1; overflow-y:auto; padding:20px; background:linear-gradient(180deg,#F7F7FE,#fff); display:flex; flex-direction:column; gap:12px}
.msg{max-width:82%; padding:12px 16px; border-radius:16px; font-size:.97rem; line-height:1.7; white-space:pre-wrap; word-wrap:break-word; animation:msgin .25s ease}
@keyframes msgin{from{transform:translateY(8px); opacity:0}to{transform:none; opacity:1}}
.msg.bot{align-self:flex-start; background:#fff; border:1px solid var(--line); border-start-start-radius:4px; box-shadow:var(--shadow-soft)}
.msg.me{align-self:flex-end; background:var(--grad); color:#fff; border-start-end-radius:4px}
.msg .who{display:block; font-size:.72rem; color:var(--purple); font-weight:700; margin-bottom:3px}
.msg.sys{align-self:center; max-width:90%; background:rgba(106,91,255,.1); color:var(--indigo); border:1px dashed var(--violet);
  font-size:.85rem; font-weight:600; padding:8px 16px; text-align:center; box-shadow:none}
.typing{align-self:flex-start; display:flex; gap:5px; padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:16px}
.typing span{width:8px; height:8px; border-radius:50%; background:var(--muted2); animation:tp 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes tp{0%,60%,100%{transform:translateY(0); opacity:.5}30%{transform:translateY(-6px); opacity:1}}

.chips{display:flex; gap:8px; flex-wrap:wrap; padding:0 20px 10px}
.chip{border:1.4px solid var(--violet); background:#fff; color:var(--indigo); border-radius:999px; padding:9px 16px;
  font-size:.9rem; cursor:pointer; font-family:'Tajawal'; font-weight:600; transition:all .15s; box-shadow:0 4px 14px -8px rgba(106,91,255,.5)}
.chip:hover{background:var(--purple); color:#fff; border-color:var(--purple); transform:translateY(-1px)}
.chip .e{margin-inline-end:5px}

.chat-input{display:flex; gap:10px; padding:14px; border-top:1px solid var(--line); background:#fff}
.chat-input input{flex:1; border:1.5px solid var(--line); border-radius:999px; padding:13px 18px; font-family:inherit; font-size:.98rem; outline:none}
.chat-input input:focus{border-color:var(--purple)}
.chat-input button{background:var(--grad); border:0; color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:1.2rem; flex:0 0 auto}

/* صفحات المحتوى (بروفايل/خارطة/قريباً) */
.page-hero{padding:90px 0 60px; text-align:center}
.page-hero h1{font-size:clamp(2rem,4.4vw,3rem); color:#fff}
.page-hero p{color:rgba(255,255,255,.8); max-width:620px; margin:18px auto 0; font-size:1.1rem}
.content{max-width:820px; margin:-40px auto 0; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:46px 44px; position:relative}
@media(max-width:600px){.content{padding:30px 22px}}
.content h2{color:var(--ink); font-size:1.5rem; margin:34px 0 14px}
.content h2:first-child{margin-top:0}
.content h3{color:var(--indigo); font-size:1.15rem; margin:22px 0 8px}
.content p{color:var(--text); margin:0 0 14px}
.content ul{padding-inline-start:22px; margin:0 0 16px}
.content li{margin-bottom:8px}
.content .lead{font-size:1.12rem; color:var(--muted)}
.divider{height:1px; background:var(--line); margin:30px 0}

/* صفحة «قريباً» — نموذج اهتمام */
.soon-badge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,200,97,.16); color:var(--gold); border:1px solid rgba(255,200,97,.4); padding:8px 18px; border-radius:999px; font-weight:700; margin-bottom:22px}
.interest{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.interest input{flex:1; min-width:200px; border:1.5px solid var(--line); border-radius:14px; padding:14px 18px; font-family:inherit; font-size:1rem; outline:none}
.interest input:focus{border-color:var(--purple)}
.interest .ok{color:var(--ok); font-weight:700; padding:12px 0}
.feat{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px}
@media(max-width:560px){.feat{grid-template-columns:1fr}}
.feat .f{background:var(--lav); border-radius:16px; padding:20px; display:flex; gap:14px; align-items:flex-start}
.feat .f .e{font-size:1.6rem}
.feat .f b{display:block; color:var(--ink); margin-bottom:4px; font-family:'Tajawal'}
.feat .f span{color:var(--muted); font-size:.94rem}
.backlink{display:inline-flex; align-items:center; gap:8px; color:var(--violet); margin-top:30px; font-weight:600}