/* ========== Exascent Landing (RTL, Arabic) ========== */
:root{
  --bg:#0B2147;
  --accent:#00B7A2;
  --accent-2:#B5D334;
  --accent-3:#36E2D7;
  --text:#FFFFFF;
  --muted:#A6B1C2;
  --card:#0f2b5b;
  --surface:#0e2752;
  --soft:#102a54;
  --shadow:0 10px 30px rgba(0,0,0,.15);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.8;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px,92%);margin-inline:auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(11,33,71,.95), rgba(11,33,71,.85));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:14px 0;
}
.brand{justify-self:start}
.header-cta{justify-self:center}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.25rem;border-radius:14px;
  font-weight:700;border:1px solid transparent;box-shadow:var(--shadow);
  transition:.2s ease;
}
.btn-accent{background:var(--accent);color:#052a26}
.btn-accent:hover{filter:brightness(1.05) saturate(1.1);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.2);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* Sections */
.section{padding:64px 0}
.section-muted{background:linear-gradient(180deg, var(--surface), var(--bg))}
.section-title{
  font-size:clamp(28px,3vw,38px);
  margin:0 0 8px;font-weight:800;letter-spacing:.2px
}
.section-subtitle{
  color:var(--muted);margin:0 0 32px;font-weight:500
}

/* Hero */
.hero{padding:92px 0 64px;background:
 radial-gradient(1200px 600px at 20% -10%, rgba(54,226,215,.15), transparent 60%),
 radial-gradient(800px 500px at 90% 0%, rgba(0,183,162,.14), transparent 60%);
}
.hero-grid{display:grid;grid-template-columns: 1.15fr .85fr;align-items:center;gap:36px}
.hero-text h1{font-size:clamp(32px,4vw,56px);margin:0 0 12px;font-weight:800}
.highlight{color:var(--accent-2)}
.lead{color:#e4ecff;max-width:52ch}
.hero-actions{display:flex;gap:12px;margin:18px 0 8px;flex-wrap:wrap}
.hero-bullets{display:flex;gap:16px;flex-wrap:wrap;padding:0;margin:16px 0 0;list-style:none;color:#e4ecff}
.hero-bullets li{background:rgba(255,255,255,.06);padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
.hero-img{border-radius:20px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:var(--card);border:1px solid rgba(255,255,255,.06);
  border-radius:18px;padding:20px;box-shadow:var(--shadow);transition:.2s
}
.card:hover{transform:translateY(-3px)}
.card-icon{font-size:28px;filter:grayscale(0)}
.card h3{margin:.4rem 0 .3rem;font-size:22px}
.card p{color:#dbe6ff}

/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tab{
  background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text);
  padding:.6rem 1rem;border-radius:14px;cursor:pointer;font-weight:700
}
.tab.is-active{background:var(--accent);color:#052a26;border-color:transparent}
.tab-panels{background:var(--soft);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:fade .25s}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{padding:10px 12px;border-bottom:1px dashed rgba(255,255,255,.12)}
.checklist li:last-child{border-bottom:0}

/* Timeline */
.timeline{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.tl-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:transparent;color:var(--text);cursor:pointer
}
.tl-btn[disabled]{opacity:.4;cursor:not-allowed}
.tl-track{overflow:hidden;scrollbar-width:none}
.tl-track::-webkit-scrollbar{display:none}
.tl-track{display:grid;grid-auto-flow:column;grid-auto-columns: minmax(260px, 1fr);gap:14px}
.tl-item{
  background:var(--soft);border:1px solid rgba(255,255,255,.06);
  padding:16px;border-radius:16px;min-height:180px;box-shadow:var(--shadow)
}
.tl-step{
  display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:#052a26;font-weight:800;margin-bottom:8px
}
.tl-progress{height:4px;background:rgba(255,255,255,.12);border-radius:999px;margin-top:12px;position:relative}
.tl-progress span{position:absolute;inset-inline-end:0;inset-block:0;width:14%;background:var(--accent-3);border-radius:999px;}

/* Grid deliverables */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-item{background:var(--soft);border:1px solid rgba(255,255,255,.06);padding:16px;border-radius:16px}
.grid-item h3{margin:.2rem 0 .3rem}
.grid-item p{color:#dbe6ff}
.check{display:inline-block;background:var(--accent-2);color:#0a2100;font-weight:900;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}

/* Accordion */
.accordion{display:grid;gap:10px}
.acc-head{
  width:100%;text-align:inherit;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.15);
  background:transparent;color:var(--text);font-weight:700;display:flex;align-items:center;justify-content:space-between
}
.acc-panel{padding:12px 14px;background:var(--soft);border:1px dashed rgba(255,255,255,.18);border-radius:12px;margin-top:8px;color:#e7f0ff}
.acc-icon{opacity:.8;}

/* CTA */
.cta{background:linear-gradient(180deg, var(--accent), var(--accent-3));color:#052a26}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cta .btn-ghost{border-color:#052a26}

/* Footer */
.site-footer{padding:26px 0;border-top:1px solid rgba(255,255,255,.08)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;color:var(--muted)}

/* Floating WhatsApp and to-top */
.wa-float{
  position:fixed;inset-inline-start:16px;inset-block-end:16px;
  background:#25D366;color:#053a1d;font-weight:900;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;box-shadow:var(--shadow);z-index:60
}
.to-top{
  position:fixed;inset-inline-end:16px;inset-block-end:16px;
  width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:var(--text);box-shadow:var(--shadow);cursor:pointer;z-index:60
}

/* Utilities */
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .cta-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .header-inner{grid-template-columns:1fr auto}
  .header-cta{justify-self:end}
}


/* === Dynamic Background Canvas & Cursor Glow === */
.bg-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0.6;
}
/* layered animated gradient for subtle motion */
body::before{
  content:""; position:fixed; inset:-10%; z-index:0; pointer-events:none;
  background:
   radial-gradient(600px 400px at 15% 10%, rgba(54,226,215,.10), transparent 60%),
   radial-gradient(500px 380px at 85% 20%, rgba(0,183,162,.10), transparent 60%),
   radial-gradient(700px 520px at 50% 120%, rgba(181,211,52,.07), transparent 60%);
  animation: floatGrad 12s ease-in-out infinite alternate;
  filter: saturate(1.1);
}
@keyframes floatGrad{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(2%, -1%, 0) scale(1.03); }
  100%{ transform: translate3d(-2%, 1%, 0) scale(1.01); }
}

/* ensure content above background layers */
.section, .site-header, .site-footer{ position:relative; z-index:1; }

/* Cursor glow */
.cursor-glow{
  position:fixed; top:0; left:0; width:260px; height:260px;
  transform: translate(-50%, -50%);
  border-radius:50%; pointer-events:none; z-index:2;
  background: radial-gradient(circle at center,
    rgba(54,226,215,.25) 0%,
    rgba(0,183,162,.18) 40%,
    rgba(181,211,52,.12) 65%,
    transparent 75%);
  filter: blur(28px);
  mix-blend-mode: screen;
  opacity:.85;
  transition: opacity .2s ease, transform .08s linear;
}
.cursor-glow.is-hidden{ opacity:0; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
  .bg-canvas{ display:none; }
  .cursor-glow{ display:none; }
}


/* === Glass transparency for content blocks === */
.card,
.tl-item,
.grid-item,
.tab-panels,
.acc-panel,
.hero-bullets li{
  background: rgba(16, 42, 84, 0.48) !important;
  backdrop-filter: blur(6px);
}

.section-muted{
  background: linear-gradient(180deg, rgba(14,39,82,0.65), rgba(11,33,71,0.65)) !important;
}

.site-header{
  background: linear-gradient(180deg, rgba(11,33,71,.80), rgba(11,33,71,.70)) !important;
  backdrop-filter: blur(8px);
}


/* === Attachments interactive section === */
.req-switch, .entity-kind{
  display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 18px;
}
.switch-opt, .switch-sub{
  display:flex; align-items:center; gap:8px;
  background: rgba(16, 42, 84, 0.45);
  border:1px solid rgba(255,255,255,.12);
  padding:8px 12px; border-radius:14px; cursor:pointer; user-select:none;
}
.switch-opt input, .switch-sub input{ accent-color: var(--accent); width:18px; height:18px; }
.entity-kind .note{ width:100%; color:var(--muted); margin-bottom:4px; }

.req-panel{ margin-top:10px; }
.req-group{
  background: rgba(16, 42, 84, 0.40);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:16px; margin-bottom:12px;
  backdrop-filter: blur(6px);
}
.req-group h3{ margin:0 0 6px; font-size:20px; }
.group-hint{ color:var(--muted); margin:0 0 10px; }
.req-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.req-list li{ background: rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.10); padding:10px; border-radius:12px; }
.req-list.bullets li{ background: transparent; border-style: solid; }
.req-list input[type="checkbox"]{ accent-color: var(--accent); transform: scale(1.15); margin-inline-end:8px; }
.req-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.generator .gen-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.generator input, .generator select, .generator textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color:var(--text);
}
.gen-preview{ min-height:180px; white-space:pre-wrap; }
.form-actions{ display:flex; gap:10px; align-items:center; margin-top:6px; }

@media (max-width:720px){
  .generator .gen-form .form-row{ grid-template-columns:1fr; }
}


/* === Conversion boosters: Sticky bar, Modal, Wizard === */
.stickybar{
  position: fixed; inset-inline:0; inset-block-end:0; z-index:70;
  background: rgba(11,33,71,.82); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.12); padding: 10px 0;
}
.sticky-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sticky-msg{ font-weight:700; }
.badge{ background: var(--accent-2); color:#0a2100; padding:4px 8px; border-radius:999px; margin-inline-start:8px; font-weight:800; }
.sticky-actions{ display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:560px){ .sticky-msg{ font-size:14px } }

/* Modal */
.modal{ position:fixed; inset:0; z-index:80; display:none; }
.modal[aria-hidden="false"]{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.modal-card{
  position:relative; margin:5vh auto 0; width:min(720px, 92%);
  background: rgba(16, 42, 84, 0.92); border:1px solid rgba(255,255,255,.12); border-radius:18px;
  padding:18px; box-shadow: var(--shadow);
}
.modal-close{ position:absolute; inset-inline-start:10px; inset-block-start:8px; background:transparent; border:0; color:var(--text); font-size:26px; cursor:pointer }
.modal-sub{ color: var(--muted); margin-top:-6px }
#lead-form .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin:10px 0 }
#lead-form label{ display:grid; gap:6px; font-weight:700 }
#lead-form input, #lead-form select, #lead-form textarea{
  background: rgba(255,255,255,.06); color:var(--text); border:1px solid rgba(255,255,255,.18);
  padding:10px 12px; border-radius:12px;
}
#lead-form .wide{ grid-column: 1 / -1 }
.tiny{ color:var(--muted); font-size:12px }
@media (max-width:720px){ #lead-form .form-row{ grid-template-columns:1fr } }

/* Wizard */
.wiz-list{ list-style: none; padding:0; margin: 0 0 10px; display:grid; gap:12px }
.wiz-list > li{ background: rgba(16, 42, 84, 0.42); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px }
.choices{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px }
.choices input{ accent-color: var(--accent) }
.wiz-actions{ display:flex; gap:10px; margin-top:8px }
.wiz-result{ background: rgba(16, 42, 84, 0.48); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px; margin-top:10px }
.wiz-result .score{ font-size:28px; font-weight:800; margin:6px 0 }
.wiz-result .next{ color:#e6f1ff }

/* Exit-intent prompt */
.exit-intent{
  position:fixed; inset:0; z-index:75; display:none;
}
.exit-intent[aria-hidden="false"]{ display:block }
.exit-intent .wrap{
  position:relative; margin:10vh auto 0; width:min(680px,92%);
  background: rgba(11, 33, 71, 0.94); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:18px;
}
.exit-intent .actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.exit-intent .close{ position:absolute; inset-inline-start:10px; inset-block-start:8px; background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer }


/* === Timeline glow & interactivity upgrades === */
#timeline{ position:relative; }
#timeline::before{
  content:""; position:absolute; inset:-20px 0 -20px 0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 240px at 20% 0%, rgba(54,226,215,.12), transparent 60%),
    radial-gradient(700px 260px at 80% 10%, rgba(0,183,162,.10), transparent 60%);
  filter: blur(16px);
  opacity:.9;
  animation: tlAura 10s ease-in-out infinite alternate;
}
@keyframes tlAura{
  0%{ transform: translate3d(0,0,0) }
  100%{ transform: translate3d(1.5%, -1%, 0) }
}

.tl-controls{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; position:relative; z-index:1;
}
.tl-speed select{
  background: rgba(255,255,255,.06); color: var(--text); border:1px solid rgba(255,255,255,.2);
  padding:8px 10px; border-radius:12px;
}
.tl-dots{ display:flex; gap:8px; flex-wrap:wrap; margin-inline-start:auto }
.tl-dots button{
  width:12px; height:12px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.1); cursor:pointer; transition: transform .15s;
}
.tl-dots button[aria-selected="true"]{
  background: var(--accent-3); border-color: var(--accent-3);
  box-shadow: 0 0 0 4px rgba(54,226,215,.15), 0 0 18px rgba(54,226,215,.45);
  transform: scale(1.15);
}

.tl-item{
  position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tl-item.is-active{
  box-shadow:
    0 0 0 1px rgba(54,226,215,.55),
    0 0 26px rgba(54,226,215,.45),
    0 0 60px rgba(0,183,162,.25);
  transform: translateY(-2px);
}
.tl-item::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background: radial-gradient(220px 120px at 80% -20%, rgba(181,211,52,.25), transparent 70%);
  transition: opacity .25s ease;
}
.tl-item.is-active::after{ opacity:1 }

.tl-step{ box-shadow: 0 0 0 2px rgba(11,33,71,.9), 0 0 20px rgba(54,226,215,.35) }
.tl-progress span{ transition: width .35s ease; box-shadow: 0 0 12px rgba(54,226,215,.55) }

.tl-details{
  margin-top:14px; background: rgba(16,42,84,.45);
  border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:14px; backdrop-filter: blur(6px);
}
.tl-details-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.tl-details-title{ margin:0; font-size:20px }
.tl-tasks{ list-style: none; margin:10px 0 0; padding:0; display:grid; gap:8px }
.tl-tasks li{ background: rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.12); padding:10px; border-radius:10px }
.tl-details.is-collapsed .tl-tasks{ display:none }

/* Hover glow on arrows */
.tl-btn:hover{ box-shadow: 0 0 14px rgba(54,226,215,.45) }

.header-actions{ display:inline-flex; align-items:center; gap:8px; justify-self:center }
.lang-switch{ white-space:nowrap }