/* ============================================================
   Commercely — Main Stylesheet
   Consolidated from all <style> blocks
   ============================================================ */
:root{
  --cyan:#00C2CB;--cyan-light:#33D4DC;--cyan-glow:rgba(0,194,203,0.18);--cyan-glow-sm:rgba(0,194,203,0.10);
  --navy:#070D1F;--navy-2:#0C1428;--navy-3:#111B33;--navy-card:#0F1830;
  --violet:#6C63FF;--violet-light:#8B85FF;--green:#4ADE80;--orange:#FB923C;
  --white:#FFFFFF;--off-white:#F4F8FF;
  --border-light:rgba(255,255,255,0.08);--border-cyan:rgba(0,194,203,0.25);
  --font-en:'Plus Jakarta Sans',sans-serif;--font-ar:'Tajawal',sans-serif;--font:var(--font-en);
  --r-sm:8px;--r-md:12px;--r-lg:20px;--r-xl:32px;
  --ease:cubic-bezier(0.4,0,0.2,1);--max-w:1200px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:32px;
  --transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
[lang="ar"]{--font:var(--font-ar);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:var(--font);background:var(--navy);color:#fff;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
body.ar-mode{font-family:var(--font-ar);direction:rtl;text-align:right;}

/* ============================================================
   DESIGN UPGRADE — spacing, typography, depth, micro-details
   ============================================================ */

/* Better section spacing */
section { position: relative; }

/* Upgraded section tag */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--cyan);
  margin-bottom: 16px;
  background: rgba(0,194,203,.07);
  border: 1px solid rgba(0,194,203,.18);
  border-radius: 20px;
  padding: 5px 14px 5px 10px;
}
.section-tag::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
}
body.ar-mode .section-tag { flex-direction: row-reverse; }
body.ar-mode .section-tag::before { order: unset; }

/* Upgraded section titles */
.section-title {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.12;
  margin-bottom: 16px;
}

/* Tighter, more readable section subtitles */
.section-subtitle, .section-sub {
  font-size: 1rem;
  color: rgba(255,255,255,.5);
  line-height: 1.8;
  max-width: 560px;
}

/* Upgraded buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 40px;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: var(--cyan);
  color: var(--navy);
  transition: var(--transition);
  font-family: var(--font);
  text-decoration: none;
  letter-spacing: .01em;
}
.btn-primary:hover {
  background: var(--cyan-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,194,203,.4);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 40px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  color: #fff;
  transition: var(--transition);
  font-family: var(--font);
  text-decoration: none;
  backdrop-filter: blur(10px);
  letter-spacing: .01em;
}
.btn-secondary:hover {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.09);
  transform: translateY(-2px);
}

/* Upgraded nav */
nav {
  height: 68px;
}
.nav-logo {
  font-size: 1.4rem;
  letter-spacing: -.03em;
}
.nav-links a {
  font-size: .85rem;
  font-weight: 500;
  padding: 7px 13px 5px;
  border-radius: 8px;
}
.btn-nav-cta {
  padding: 8px 18px;
  font-size: .83rem;
  border-radius: 20px;
}
.btn-nav-login {
  padding: 8px 18px;
  font-size: .83rem;
}

/* Upgraded hero */
.hero-title {
  font-size: clamp(2.8rem, 5.5vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1.06;
}
.hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,.52);
  line-height: 1.8;
  max-width: 520px;
}
.hero-badge {
  padding: 6px 16px 6px 7px;
  font-size: .75rem;
  gap: 7px;
  border-radius: 40px;
}
.hero-badge-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
}

/* Trust bar upgrade */
#trust-bar {
  padding: 28px max(24px,calc((100% - var(--max-w))/2));
}
.trust-value {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.03em;
}
.trust-label {
  font-size: .75rem;
  color: rgba(255,255,255,.42);
  margin-top: 3px;
}
.trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

/* Upgraded cards — problem, why, testi */
.problem-item {
  padding: 22px 22px;
  border-radius: 14px;
  gap: 14px;
}
.problem-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 17px;
}
.problem-text h4 { font-size: .92rem; font-weight: 700; margin-bottom: 5px; }
.problem-text p { font-size: .8rem; line-height: 1.6; }

.solution-card {
  border-radius: 24px;
  padding: 44px 36px;
}
.solution-icon-big {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  font-size: 32px;
}
.solution-card h3 { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; }

/* Why cards upgrade */
.why-card {
  padding: 32px 24px;
  border-radius: 18px;
}
.why-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 22px;
  margin-bottom: 18px;
}
.why-card h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 10px; }
.why-card p { font-size: .82rem; line-height: 1.7; }

/* Testimonial cards upgrade */
.testi-card {
  padding: 28px 24px;
  border-radius: 18px;
}
.testi-stars { font-size: 14px; letter-spacing: 1px; margin-bottom: 14px; }
.testi-text { font-size: .88rem; line-height: 1.75; }
.testi-avatar { width: 38px; height: 38px; font-size: .78rem; }
.testi-name { font-size: .88rem; font-weight: 700; }
.testi-role { font-size: .75rem; }

/* Pricing cards upgrade */
.pricing-card {
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
}
.pricing-card .pricing-tier {
  font-size: .68rem;
  letter-spacing: .14em;
}
.pricing-card .pricing-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.pricing-amount {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -2px;
}
.pricing-currency {
  font-size: .9rem;
}
.pricing-period {
  font-size: .75rem;
}

/* Footer upgrade */
footer {
  padding-top: 72px;
  padding-bottom: 40px;
}
.footer-col h4 {
  font-size: .72rem;
  letter-spacing: .14em;
}
.footer-links a {
  font-size: .82rem;
}
.footer-bottom p {
  font-size: .78rem;
}

/* Scroll progress — thicker */
#scroll-progress {
  height: 3px;
}

/* Module tabs upgrade */
.mod-tab {
  border-radius: 40px;
  font-size: .82rem;
  padding: 9px 18px;
}

/* Saudi stat cards */
.saudi-stat-card {
  border-radius: 16px;
}

/* Better focus states */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Smoother page transitions */
.page { animation: pageIn .4s cubic-bezier(.4,0,.2,1) both; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Upgraded mobile menu */
.mobile-menu {
  box-shadow: 0 32px 64px rgba(0,0,0,.6);
}

/* Selection color */
::selection {
  background: rgba(0,194,203,.25);
  color: #fff;
}

/* ── PAGE-SPECIFIC SEO TITLE TAGS (injected via JS) ── */

body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:0.5;}
::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:var(--navy);}::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:3px;}

/* PAGE TRANSITION */
.page{display:block;animation:pageIn .35s ease both;}
.page.active{display:block;}
@keyframes pageIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

/* CURSOR + PROGRESS */
#cursor-glow{position:fixed;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(0,194,203,.07) 0%,transparent 70%);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform;}
#scroll-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--cyan),var(--violet-light));z-index:9998;transition:width .1s linear;}

/* NAVBAR */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 max(24px,calc((100% - var(--max-w))/2));height:72px;display:flex;align-items:center;justify-content:space-between;background:rgba(7,13,31,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-light);transition:var(--transition);}
nav.scrolled{background:rgba(7,13,31,.95);border-bottom-color:var(--border-cyan);}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:#fff;cursor:pointer;}
.nav-logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--cyan),#0099A8);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--navy);box-shadow:0 0 20px var(--cyan-glow);}
.nav-links{display:flex;align-items:center;gap:8px;list-style:none;}
.nav-links li{position:relative;}
.nav-links a{color:rgba(255,255,255,.7);text-decoration:none;font-size:.9rem;font-weight:500;padding:8px 14px 6px;border-radius:var(--r-sm);transition:var(--transition);cursor:pointer;}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06);}
.nav-links li.current a{color:var(--cyan);}
.nav-indicator{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%) scaleX(0);width:20px;height:2px;background:var(--cyan);border-radius:1px;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.nav-links li.current .nav-indicator{transform:translateX(-50%) scaleX(1);}
.nav-right{display:flex;align-items:center;gap:12px;}
.lang-toggle{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.06);border-radius:20px;padding:3px;border:1px solid var(--border-light);}
.lang-btn{padding:5px 12px;border-radius:16px;font-size:.78rem;font-weight:600;cursor:pointer;border:none;background:transparent;color:rgba(255,255,255,.5);transition:var(--transition);font-family:var(--font-en);}
.lang-btn.active{background:var(--cyan);color:var(--navy);}
.btn-nav-login{padding:9px 20px;border-radius:20px;font-size:.88rem;font-weight:600;cursor:pointer;border:1px solid var(--border-cyan);background:transparent;color:var(--cyan);transition:var(--transition);font-family:var(--font);}
.btn-nav-login:hover{background:var(--cyan-glow-sm);}
.btn-nav-cta{padding:9px 20px;border-radius:20px;font-size:.88rem;font-weight:700;cursor:pointer;border:none;background:var(--cyan);color:var(--navy);transition:var(--transition);font-family:var(--font);white-space:nowrap;}
.btn-nav-cta:hover{background:var(--cyan-light);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,194,203,.4);}
/* ============ MOBILE MENU — REDESIGNED ============ */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:8px;background:none;border:none;width:40px;height:40px;border-radius:var(--radius-sm);transition:var(--transition);}
.hamburger:hover{background:rgba(255,255,255,.06);}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .35s cubic-bezier(.77,0,.18,1), opacity .2s ease, width .3s ease;transform-origin:center;}
/* Animate to X when open */
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;width:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:block;
  position:fixed;
  top:72px;left:0;right:0;
  background:linear-gradient(180deg,var(--navy-2) 0%,rgba(7,13,31,.98) 100%);
  border-bottom:1px solid var(--border-cyan);
  padding:0 20px;
  z-index:999;
  overflow:hidden;
  max-height:0;
  opacity:0;
  pointer-events:none;
  transition:max-height .4s cubic-bezier(.77,0,.18,1), opacity .3s ease, padding .4s ease;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 48px rgba(0,0,0,.5);
}
.mobile-menu.open{
  max-height:520px;
  opacity:1;
  pointer-events:all;
  padding:20px 20px 28px;
}

/* Nav links inside mobile menu */
.mobile-menu-links{display:flex;flex-direction:column;gap:2px;margin-bottom:20px;}
.mobile-menu-links a{
  display:flex;align-items:center;justify-content:space-between;
  color:rgba(255,255,255,.8);
  text-decoration:none;
  font-size:1.05rem;font-weight:600;
  padding:14px 16px;
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:var(--transition);
  border:1px solid transparent;
}
.mobile-menu-links a:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
  border-color:var(--border-light);
}
.mobile-menu-links a .arrow{font-size:.8rem;color:rgba(255,255,255,.3);transition:var(--transition);}
.mobile-menu-links a:hover .arrow{color:var(--cyan);transform:translateX(3px);}

/* Divider */
.mobile-menu-divider{height:1px;background:var(--border-light);margin:4px 0 20px;}

/* CTA button */
.mobile-menu-cta{
  display:block;width:100%;
  padding:15px;border-radius:40px;
  background:var(--cyan);color:var(--navy);
  font-weight:800;font-size:1rem;
  text-align:center;cursor:pointer;
  border:none;font-family:var(--font);
  letter-spacing:-.01em;
  transition:var(--transition);
  box-shadow:0 8px 24px rgba(0,194,203,.35);
  margin-bottom:16px;
}
.mobile-menu-cta:hover{background:var(--cyan-light);transform:translateY(-1px);box-shadow:0 12px 32px rgba(0,194,203,.5);}

/* Lang toggle inside mobile menu */
.mobile-menu-lang{
  display:flex;gap:8px;
}
.mobile-menu-lang .lang-btn{
  flex:1;text-align:center;
  padding:10px;border-radius:var(--radius-sm);
  border:1px solid var(--border-light);
  font-size:.85rem;
}
.mobile-menu-lang .lang-btn.active{
  background:var(--cyan);color:var(--navy);border-color:var(--cyan);
}
@media(max-width:768px){.nav-links{display:none;}.btn-nav-login{display:none;}.hamburger{display:flex;}}

/* SHARED UTILS */
.pad{padding-left:max(24px,calc((100% - var(--max-w))/2));padding-right:max(24px,calc((100% - var(--max-w))/2));}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(0,194,203,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,194,203,.04) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;}
.section-tag{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--cyan);margin-bottom:20px;}
.section-tag::before{content:'';display:block;width:24px;height:2px;background:var(--cyan);border-radius:1px;}
.section-title{font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:20px;}
.section-sub{font-size:1.05rem;color:rgba(255,255,255,.55);line-height:1.75;max-width:580px;}
.accent{color:var(--cyan);}.accent-v{color:var(--violet-light);}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:40px;font-size:.95rem;font-weight:700;cursor:pointer;border:none;background:var(--cyan);color:var(--navy);transition:var(--transition);font-family:var(--font);text-decoration:none;}
.btn-primary:hover{background:var(--cyan-light);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,194,203,.45);}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:40px;font-size:.95rem;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;transition:var(--transition);font-family:var(--font);text-decoration:none;backdrop-filter:blur(10px);}
.btn-secondary:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1);transform:translateY(-2px);}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible,.reveal.on{opacity:1;transform:translateY(0);}
.reveal-left,.reveal-l,.rev-l{opacity:0;transform:translateX(-44px);transition:opacity .7s ease,transform .7s ease;}
.reveal-left.visible,.reveal-l.visible,.reveal-left.on,.reveal-l.on,.rev-l.on{opacity:1;transform:translateX(0);}
.reveal-right,.reveal-r,.rev-r{opacity:0;transform:translateX(44px);transition:opacity .7s ease,transform .7s ease;}
.reveal-right.visible,.reveal-r.visible,.reveal-right.on,.reveal-r.on,.rev-r.on{opacity:1;transform:translateX(0);}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}
.sge{position:relative;}
.sge::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;transition:opacity .8s ease;pointer-events:none;}
.sge.glowing::after{opacity:1;}
footer{background:var(--navy-2);border-top:1px solid var(--border-light);padding:64px max(24px,calc((100% - var(--max-w))/2)) 32px;position:relative;}
footer::before{content:'';position:absolute;top:-80px;left:0;right:0;height:80px;background:linear-gradient(to bottom,transparent,var(--navy-2));pointer-events:none;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.footer-brand p{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.7;margin:16px 0 24px;max-width:280px;}
.footer-social{display:flex;gap:10px;}
.social-btn{width:36px;height:36px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:var(--transition);text-decoration:none;color:rgba(255,255,255,.7);}
.social-btn:hover{border-color:var(--border-cyan);background:rgba(0,194,203,.08);color:var(--cyan);}
.footer-col h4{font-size:.85rem;font-weight:700;color:#fff;margin-bottom:20px;text-transform:uppercase;letter-spacing:.08em;}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-links a{font-size:.85rem;color:rgba(255,255,255,.5);text-decoration:none;transition:var(--transition);display:flex;align-items:center;gap:6px;cursor:pointer;}
.footer-links a:hover{color:var(--cyan);}
.footer-links .coming{font-size:.6rem;background:rgba(108,99,255,.2);color:var(--violet-light);padding:2px 6px;border-radius:20px;font-weight:700;}
.footer-bottom{padding-top:24px;border-top:1px solid var(--border-light);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-bottom p{font-size:.8rem;color:rgba(255,255,255,.35);}
.footer-bottom-links{display:flex;gap:20px;}
.footer-bottom-links a{font-size:.8rem;color:rgba(255,255,255,.35);text-decoration:none;transition:var(--transition);cursor:pointer;}
.footer-bottom-links a:hover{color:var(--cyan);}
.footer-vat{display:inline-flex;align-items:center;gap:6px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);border-radius:20px;padding:6px 14px;font-size:.75rem;font-weight:600;color:#4ADE80;margin-top:16px;}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr;}.footer-bottom{flex-direction:column;text-align:center;}}

/* ── HOMEPAGE STYLES ── */

/* ============ HERO ============ */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 120px max(24px, calc((100% - 1200px)/2)) 80px;
}
.hero-orb-1 {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,203,0.12) 0%, transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
}
.hero-orb-2 {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108,99,255,0.10) 0%, transparent 70%);
  bottom: -100px; left: -100px;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  flex: 1;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,194,203,0.1);
  border: 1px solid var(--border-cyan);
  border-radius: 40px;
  padding: 7px 16px 7px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cyan);
  margin-bottom: 28px;
  animation: fadeSlideUp 0.6s ease both;
}
.hero-badge-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  color: var(--navy);
}
.hero-title {
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  animation: fadeSlideUp 0.6s ease 0.1s both;
}
.hero-title .accent { color: var(--cyan); }
.hero-title .accent-v { color: var(--violet-light); }
.hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 500px;
  animation: fadeSlideUp 0.6s ease 0.2s both;
  font-weight: 400;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  animation: fadeSlideUp 0.6s ease 0.3s both;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 40px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: var(--cyan);
  color: var(--navy);
  transition: var(--transition);
  font-family: var(--font);
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--cyan-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,194,203,0.45);
}
.btn-primary svg { transition: transform 0.2s; }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 40px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  color: var(--white);
  transition: var(--transition);
  font-family: var(--font);
  text-decoration: none;
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}
.hero-trust {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 24px;
  animation: fadeSlideUp 0.6s ease 0.4s both;
}
.hero-trust-avatars {
  display: flex;
}
.hero-trust-avatars span {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: -8px;
  background: linear-gradient(135deg, #00C2CB, #6C63FF);
}
.hero-trust-avatars span:first-child { margin-left: 0; }
.hero-trust-text { font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.4; }
.hero-trust-text strong { color: var(--white); }

/* HERO DASHBOARD VISUAL */
.hero-visual {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 2;
  padding-left: 60px;
  animation: fadeSlideUp 0.8s ease 0.2s both;
}
.dashboard-mockup {
  width: 100%;
  max-width: 560px;
  background: rgba(11,18,40,0.9);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-cyan);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 60px rgba(0,194,203,0.1);
  position: relative;
}
.db-topbar {
  background: var(--navy-3);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
}
.db-dots { display: flex; gap: 7px; }
.db-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.db-dots span:nth-child(1) { background: #FF5F57; }
.db-dots span:nth-child(2) { background: #FEBC2E; }
.db-dots span:nth-child(3) { background: #28C840; }
.db-url-bar {
  flex: 1;
  margin: 0 16px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
}
.db-body { padding: 20px; display: flex; gap: 16px; }
.db-sidebar {
  width: 140px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.db-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: var(--transition);
}
.db-nav-item.active {
  background: rgba(0,194,203,0.15);
  color: var(--cyan);
}
.db-nav-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.db-main { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.db-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.db-stat {
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  padding: 12px;
}
.db-stat-label { font-size: 0.65rem; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.db-stat-value { font-size: 1.1rem; font-weight: 700; }
.db-stat-value.cyan { color: var(--cyan); }
.db-stat-value.violet { color: var(--violet-light); }
.db-stat-value.green { color: #4ADE80; }
.db-stat-value.orange { color: #FB923C; }
.db-stat-delta {
  font-size: 0.62rem;
  color: #4ADE80;
  margin-top: 3px;
}
.db-chart-area {
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  padding: 12px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.db-chart-label { font-size: 0.65rem; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.db-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 65px;
}
.db-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: rgba(0,194,203,0.2);
  transition: height 1s ease;
  position: relative;
}
.db-bar.active {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0,194,203,0.5);
}
.db-table-area {
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  padding: 12px;
}
.db-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 0.65rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.db-table-row:last-child { border-bottom: none; }
.db-status {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.58rem;
  font-weight: 600;
}
.db-status.paid { background: rgba(74,222,128,0.15); color: #4ADE80; }
.db-status.pending { background: rgba(251,146,60,0.15); color: #FB923C; }
.db-status.processing { background: rgba(0,194,203,0.15); color: var(--cyan); }
.float-card {
  position: absolute;
  background: var(--navy-card);
  border: 1px solid var(--border-cyan);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  animation: floatCard 4s ease-in-out infinite;
  z-index: 10;
}
.float-card-1 {
  bottom: -20px;
  left: -30px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 0.75rem;
}
.float-card-1 .icon { font-size: 20px; }
.float-card-1 strong { color: var(--cyan); font-size: 1rem; }
.float-card-2 {
  top: 40px;
  right: -20px;
  font-size: 0.72rem;
  text-align: right;
  animation-delay: 2s;
}
.float-card-2 .mini-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); margin-top: 5px; overflow: hidden; }
.float-card-2 .mini-bar-fill { height: 100%; background: var(--cyan); border-radius: 2px; }

/* ============ TRUST BAR ============ */
#trust-bar {
  background: var(--navy-2);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 32px max(24px, calc((100% - 1200px)/2));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.trust-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(0,194,203,0.1);
  border: 1px solid var(--border-cyan);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--cyan);
}
.trust-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}
.trust-label { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
.trust-divider {
  width: 1px;
  background: var(--border-light);
  align-self: stretch;
  display: none;
}

/* ============ PROBLEM SECTION ============ */
#problem {
  padding: 100px max(24px, calc((100% - 1200px)/2));
  position: relative;
  overflow: hidden;
}
.problem-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 500px at 50% 50%, rgba(108,99,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 20px;
}
.section-tag::before {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: var(--cyan);
  border-radius: 1px;
}
.section-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 20px;
}
.section-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  max-width: 560px;
}
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 60px;
  align-items: center;
}
.problem-list { display: flex; flex-direction: column; gap: 20px; }
.problem-item {
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: var(--transition);
  cursor: default;
}
.problem-item:hover {
  border-color: var(--border-cyan);
  background: rgba(0,194,203,0.04);
  transform: translateX(6px);
}
body.ar-mode .problem-item:hover { transform: translateX(-6px); }
.problem-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255,79,79,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: #FF6B6B;
}
.problem-text h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.problem-text p { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.5; }
.solution-card {
  background: linear-gradient(135deg, rgba(0,194,203,0.08), rgba(108,99,255,0.08));
  border: 1px solid var(--border-cyan);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.solution-card::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,203,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.solution-icon-big {
  width: 80px; height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--cyan), #0099A8);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  font-size: 36px;
  box-shadow: 0 0 40px rgba(0,194,203,0.35);
}
.solution-card h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.solution-card p {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 28px;
}
.solution-features { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.solution-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}
.solution-feat::before {
  content: '';
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,194,203,0.2);
  border: 1px solid var(--cyan);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%2300C2CB' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  flex-shrink: 0;
}

/* ============ MODULES ============ */
#modules {
  padding: 100px max(24px, calc((100% - 1200px)/2));
  background: var(--navy-2);
  position: relative;
}
.modules-header { text-align: center; margin-bottom: 60px; }
.modules-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.mod-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-light);
  background: transparent;
  color: rgba(255,255,255,0.6);
  transition: var(--transition);
  font-family: var(--font);
  white-space: nowrap;
}
.mod-tab:hover {
  border-color: var(--border-cyan);
  color: var(--white);
  background: rgba(0,194,203,0.05);
}
.mod-tab.active {
  background: var(--cyan);
  color: var(--navy);
  border-color: var(--cyan);
}
.mod-tab .badge {
  font-size: 0.62rem;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 700;
}
.mod-tab.active .badge {
  background: rgba(7,13,31,0.3);
  color: var(--navy);
}
.mod-tab:not(.active) .badge {
  background: rgba(0,194,203,0.15);
  color: var(--cyan);
}
.mod-tab .soon-badge {
  font-size: 0.58rem;
  padding: 2px 6px;
  border-radius: 20px;
  font-weight: 700;
  background: rgba(108,99,255,0.2);
  color: var(--violet-light);
}
.mod-content { }
.mod-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,194,203,0.1);
  border: 1px solid var(--border-cyan);
  border-radius: 40px;
  padding: 5px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 20px;
}
.mod-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  line-height: 1.2;
}
.mod-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  margin-bottom: 32px;
}
.mod-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.mod-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mod-feat-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(0,194,203,0.1);
  border: 1px solid var(--border-cyan);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 2px;
}
.mod-feat-text h5 { font-size: 0.88rem; font-weight: 700; margin-bottom: 3px; }
.mod-feat-text p { font-size: 0.8rem; color: rgba(255,255,255,0.5); line-height: 1.5; }
.mod-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-cyan);
  background: rgba(11,18,40,0.8);
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 0 40px rgba(0,194,203,0.08);
  position: relative;
}
/* Module visual cards */
.mv-card {
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  padding: 16px;
  margin-bottom: 12px;
}
.mv-card:last-child { margin-bottom: 0; }
.mv-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mv-label { font-size: 0.72rem; color: rgba(255,255,255,0.5); }
.mv-value { font-size: 0.85rem; font-weight: 700; }
.mv-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.mv-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cyan), var(--violet-light)); }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mv-stat { text-align: center; }
.mv-stat-n { font-size: 1.2rem; font-weight: 800; color: var(--cyan); }
.mv-stat-l { font-size: 0.65rem; color: rgba(255,255,255,0.45); }

/* ============ WHY SECTION ============ */
#why {
  padding: 100px max(24px, calc((100% - 1200px)/2));
  position: relative;
  overflow: hidden;
}
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
.why-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: var(--transition);
}
.why-card:hover {
  border-color: var(--border-cyan);
  background: rgba(0,194,203,0.04);
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.why-card:hover::before { opacity: 1; }
.why-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.why-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; }
.why-card p { font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.7; }
.why-number {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 4rem;
  font-weight: 900;
  color: rgba(255,255,255,0.03);
  line-height: 1;
  letter-spacing: -0.05em;
  pointer-events: none;
}
body.ar-mode .why-number { right: auto; left: 20px; }

/* ============ SAUDI SECTION ============ */
#saudi {
  padding: 80px max(24px, calc((100% - 1200px)/2));
  background: linear-gradient(135deg, rgba(0,194,203,0.06), rgba(108,99,255,0.06));
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}
.saudi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.saudi-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.saudi-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}
.saudi-badge span { font-size: 16px; }
.saudi-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.saudi-stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: var(--transition);
}
.saudi-stat-card:hover {
  border-color: var(--border-cyan);
  background: rgba(0,194,203,0.05);
}
.saudi-stat-card .flag { font-size: 24px; margin-bottom: 10px; }
.saudi-stat-card h4 { font-size: 1.3rem; font-weight: 800; color: var(--cyan); margin-bottom: 4px; }
.saudi-stat-card p { font-size: 0.72rem; color: rgba(255,255,255,0.5); line-height: 1.4; }
.saudi-stat-card.featured {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(0,194,203,0.12), rgba(108,99,255,0.12));
  border-color: var(--border-cyan);
  display: flex;
  align-items: center;
  gap: 20px;
}
.saudi-stat-card.featured .big-icon {
  font-size: 40px;
  flex-shrink: 0;
}

/* ============ TESTIMONIALS ============ */
#testimonials {
  padding: 100px max(24px, calc((100% - 1200px)/2));
  background: var(--navy-2);
  position: relative;
  overflow: hidden;
}
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.testi-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.testi-card:hover {
  border-color: var(--border-cyan);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.testi-stars {
  display: flex;
  gap: 3px;
  color: #FBBF24;
  font-size: 14px;
}
.testi-text { font-size: 0.9rem; color: rgba(255,255,255,0.7); line-height: 1.7; flex: 1; font-style: italic; }
.testi-text::before { content: '"'; font-size: 1.2rem; font-style: normal; }
.testi-text::after { content: '"'; font-size: 1.2rem; font-style: normal; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.testi-name { font-size: 0.88rem; font-weight: 700; }
.testi-role { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* ============ PRICING ============ */
#pricing {
  padding: 100px max(24px, calc((100% - 1200px)/2));
  position: relative;
  overflow: hidden;
}
.pricing-header { text-align: center; margin-bottom: 48px; }
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-light);
  border-radius: 40px;
  padding: 6px;
  margin: 24px auto 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
}
.pricing-toggle-btn {
  padding: 8px 20px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.6);
  transition: var(--transition);
  font-family: var(--font);
}
.pricing-toggle-btn.active {
  background: var(--white);
  color: var(--navy);
}
.save-tag {
  background: rgba(74,222,128,0.15);
  color: #4ADE80;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 36px 28px;
  transition: var(--transition);
  position: relative;
}
.pricing-card.featured {
  background: linear-gradient(135deg, rgba(0,194,203,0.1), rgba(108,99,255,0.1));
  border-color: var(--cyan);
  transform: scale(1.03);
  box-shadow: 0 0 60px rgba(0,194,203,0.15);
}
.pricing-card:hover:not(.featured) {
  border-color: var(--border-cyan);
  transform: translateY(-4px);
}
.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--cyan), var(--violet-light));
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 20px;
  white-space: nowrap;
}
.pricing-tier { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); margin-bottom: 8px; }
.pricing-name { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; }
.pricing-desc { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-bottom: 24px; line-height: 1.5; }
.pricing-price { margin-bottom: 28px; }
.pricing-currency { font-size: 1.1rem; font-weight: 700; vertical-align: top; margin-top: 8px; display: inline-block; color: rgba(255,255,255,0.7); }
.pricing-amount { font-size: 3rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.pricing-amount.annual { display: inline; }
.pricing-amount.monthly-price { display: none; }
.pricing-period { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 4px; }
.pricing-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.pricing-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.83rem;
  color: rgba(255,255,255,0.75);
}
.pricing-feat .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,194,203,0.15);
  border: 1px solid var(--cyan);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--cyan);
}
.pricing-feat .cross {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  color: rgba(255,255,255,0.25);
}
.btn-pricing {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 40px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font);
  text-align: center;
  text-decoration: none;
}
.btn-pricing-outline {
  border: 1px solid var(--border-cyan);
  background: transparent;
  color: var(--cyan);
}
.btn-pricing-outline:hover {
  background: var(--cyan-glow);
  transform: translateY(-2px);
}
.btn-pricing-filled {
  border: none;
  background: var(--cyan);
  color: var(--navy);
}
.btn-pricing-filled:hover {
  background: var(--cyan-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,194,203,0.4);
}

/* ============ FINAL CTA ============ */
#final-cta {
  padding: 100px max(24px, calc((100% - 1200px)/2));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 1000px 600px at 50% 50%, rgba(0,194,203,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.final-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}
.final-cta-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}
.final-cta-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 40px;
  line-height: 1.7;
}
.final-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.final-note {
  margin-top: 20px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
}
.final-note span { color: #4ADE80; margin-right: 4px; }

/* ============ FOOTER ============ */
footer {
  background: var(--navy-2);
  border-top: 1px solid var(--border-light);
  padding: 64px max(24px, calc((100% - 1200px)/2)) 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin: 16px 0 24px;
  max-width: 280px;
}
.footer-social { display: flex; gap: 10px; }
.social-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: rgba(255,255,255,0.7);
}
.social-btn:hover { border-color: var(--border-cyan); background: rgba(0,194,203,0.08); color: var(--cyan); }
.footer-col h4 { font-size: 0.85rem; font-weight: 700; color: var(--white); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.08em; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-links a:hover { color: var(--cyan); }
.footer-links a .coming { font-size: 0.6rem; background: rgba(108,99,255,0.2); color: var(--violet-light); padding: 2px 6px; border-radius: 20px; font-weight: 700; }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.35); }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 0.8rem; color: rgba(255,255,255,0.35); text-decoration: none; transition: var(--transition); }
.footer-bottom-links a:hover { color: var(--cyan); }
.footer-vat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.2);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4ADE80;
  margin-top: 16px;
}

/* ============ ANIMATIONS ============ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,194,203,0.3); }
  50% { box-shadow: 0 0 40px rgba(0,194,203,0.6); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* GLOWING DOTS DECORATION */
.glow-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--cyan);
  filter: blur(1px);
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  #hero { flex-direction: column; text-align: center; padding-top: 100px; }
  .hero-content { max-width: 100%; }
  .hero-subtitle { max-width: 100%; }
  .hero-ctas { justify-content: center; }
  .hero-trust { justify-content: center; }
  .hero-visual { padding-left: 0; padding-top: 48px; justify-content: center; }
  #trust-bar { grid-template-columns: repeat(2, 1fr); }
  .problem-grid { grid-template-columns: 1fr; }
  .solution-card { order: -1; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .saudi-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .pricing-card.featured { transform: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .btn-nav-login { display: none; }
  .hamburger { display: flex; }
  #trust-bar { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .modules-tabs { gap: 6px; }
  .mod-tab { font-size: 0.78rem; padding: 8px 14px; }
  .dashboard-mockup { display: none; }
  .hero-visual { display: none; }
}
@media (max-width: 480px) {
  #trust-bar { grid-template-columns: 1fr 1fr; gap: 16px; }
  .trust-value { font-size: 1.2rem; }
  .btn-primary, .btn-secondary { padding: 13px 20px; font-size: 0.88rem; }
  .final-cta-btns { flex-direction: column; align-items: center; }
}

/* ============ 1. CURSOR GLOW ============ */
#cursor-glow {
  position: fixed;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,203,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: opacity 0.4s ease;
  will-change: transform;
}

/* ============ 2. PARTICLE CANVAS ============ */
#particle-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ============ 3. TYPING HEADLINE ============ */
.typed-word {
  display: inline;
  border-right: 3px solid var(--cyan);
}
.typed-word.done { border-right: none; }

/* ============ 4. ANIMATED DASHBOARD ============ */
.db-stat-value.animating { transition: all 0.05s ease; }
@keyframes barGrow {
  from { height: 0 !important; opacity: 0; }
  to { opacity: 1; }
}
.db-bar { animation: barGrow 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.db-bar:nth-child(1){animation-delay:0.1s}
.db-bar:nth-child(2){animation-delay:0.18s}
.db-bar:nth-child(3){animation-delay:0.26s}
.db-bar:nth-child(4){animation-delay:0.34s}
.db-bar:nth-child(5){animation-delay:0.42s}
.db-bar:nth-child(6){animation-delay:0.50s}
.db-bar:nth-child(7){animation-delay:0.58s}

@keyframes statusCycle {
  0%,30%   { opacity:1; }
  35%,95%  { opacity:0; }
  100%     { opacity:1; }
}
.db-status-cycle { animation: statusCycle 4s ease-in-out infinite; }
.db-status-cycle:nth-child(2) { animation-delay: 1.3s; }
.db-status-cycle:nth-child(3) { animation-delay: 2.6s; }

/* ============ 5. MODULE TAB FADE TRANSITION ============ */
@media(max-width:1024px){
  }
#modules { --mod-panel-container: 1; }
.modules-panel-wrap {
  position: relative;
  min-height: 420px;
}

/* ============ 6. PRICING SHIMMER + GLOW ============ */
.pricing-card {
  overflow: hidden;
}
.pricing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(0,194,203,0.06) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.pricing-card:hover::after { transform: translateX(100%); }
.pricing-card.featured {
  animation: featuredPulse 3s ease-in-out infinite;
}
@keyframes featuredPulse {
  0%,100% { box-shadow: 0 0 40px rgba(0,194,203,0.12), 0 0 0 1px rgba(0,194,203,0.3); }
  50%     { box-shadow: 0 0 70px rgba(0,194,203,0.22), 0 0 0 1px rgba(0,194,203,0.5); }
}

/* ============ 7. NAV ACTIVE INDICATOR ============ */
.nav-links li { position: relative; }
.nav-indicator {
  position: absolute;
  bottom: -2px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 20px; height: 2px;
  background: var(--cyan);
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.nav-links li.active .nav-indicator { transform: translateX(-50%) scaleX(1); }
.nav-links a { padding-bottom: 6px; }

/* ============ 8. TRUST BAR LINE DRAW ============ */
.trust-line {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet-light), transparent);
  transition: width 1.4s cubic-bezier(0.4,0,0.2,1);
}
#trust-bar { position: relative; overflow: hidden; }
#trust-bar.line-drawn .trust-line { width: 100%; }

/* ============ 9. SECTION ALTERNATING SLIDE ============ */
.reveal-left  { opacity:0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.on{opacity:1;transform:translateX(0);}
.reveal-right { opacity:0; transform: translateX(40px);  transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right.on{opacity:1;transform:translateX(0);}
.reveal-left.visible, .reveal-right.visible { opacity:1; transform: translateX(0); }

/* ============ 10. FOOTER GRADIENT FADE + MOBILE SWIPE ============ */
footer { position: relative; }
footer::before {
  content: '';
  position: absolute;
  top: -80px; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--navy-2));
  pointer-events: none;
}
/* Mobile horizontal scroll tabs */
@media(max-width:768px){
  .modules-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .modules-tabs::-webkit-scrollbar { display: none; }
  .mod-tab { flex-shrink: 0; }
  .modules-panel-wrap { min-height: 600px; }
}

/* ============ PARALLAX MOUSE EFFECT ON HERO ============ */
.hero-parallax { transition: transform 0.12s ease-out; will-change: transform; }

/* ============ DASHBOARD LIVE PULSE ============ */
@keyframes livePulse {
  0%,100% { opacity:1; transform: scale(1); }
  50%      { opacity:0.6; transform: scale(0.85); }
}
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  margin-right: 5px;
  animation: livePulse 1.8s ease-in-out infinite;
}

/* ============ SCROLL PROGRESS BAR ============ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--violet-light));
  z-index: 9998;
  transition: width 0.1s linear;
}

/* ============ SECTION ENTRY GLOW ============ */
.section-glow-enter {
  position: relative;
}
.section-glow-enter::after {
  content:'';
  position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:600px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0;
  transition:opacity 0.8s ease;
}
.section-glow-enter.glowing::after { opacity:1; }


/* ── ABOUT STYLES ── */

/* ── HERO ─────────────────────────────────────────── */
#about-hero{min-height:88vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:140px max(24px,calc((100% - var(--max-w))/2)) 100px;}
.hero-orb-1{position:absolute;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(0,194,203,.09) 0%,transparent 70%);top:-300px;right:-200px;pointer-events:none;}
.hero-orb-2{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(108,99,255,.08) 0%,transparent 70%);bottom:-200px;left:-100px;pointer-events:none;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(0,194,203,.08);border:1px solid var(--border-cyan);border-radius:40px;padding:7px 18px;font-size:.8rem;font-weight:700;color:var(--cyan);margin-bottom:32px;animation:fadeUp .6s ease both;}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}}
.hero-title{font-size:clamp(3rem,6vw,5rem);font-weight:900;letter-spacing:-.04em;line-height:1.05;margin-bottom:32px;animation:fadeUp .6s ease .1s both;}
.hero-title em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);position:relative;}
.hero-title em::after{content:attr(data-text);position:absolute;left:0;top:0;-webkit-text-stroke:0;color:var(--cyan);clip-path:inset(0 100% 0 0);animation:revealText 1.2s cubic-bezier(.77,0,.18,1) .8s forwards;}
@keyframes revealText{to{clip-path:inset(0 0% 0 0);}}
.hero-sub{font-size:1.15rem;color:rgba(255,255,255,.6);line-height:1.75;max-width:620px;margin-bottom:48px;animation:fadeUp .6s ease .2s both;}
.hero-sub strong{color:var(--white);}
.hero-founded{display:flex;align-items:center;gap:20px;animation:fadeUp .6s ease .3s both;flex-wrap:wrap;}
.hero-founded-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--border-light);border-radius:40px;padding:8px 16px;font-size:.82rem;color:rgba(255,255,255,.6);}
.hero-founded-chip strong{color:var(--white);}
.hero-scroll-hint{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.3);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;animation:fadeUp .6s ease .6s both;}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--cyan),transparent);animation:scrollDrop 2s ease-in-out infinite;}
@keyframes scrollDrop{0%{opacity:0;transform:scaleY(0);transform-origin:top;}50%{opacity:1;}100%{opacity:0;transform:scaleY(1);transform-origin:bottom;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}

/* ── MANIFESTO STRIP ─────────────────────────────── */
#manifesto{padding:80px max(24px,calc((100% - var(--max-w))/2));}
.manifesto-inner{background:linear-gradient(135deg,rgba(0,194,203,.08),rgba(108,99,255,.08));border:1px solid var(--border-cyan);border-radius:var(--radius-xl);padding:64px 72px;position:relative;overflow:hidden;}
.manifesto-inner::before{content:'';position:absolute;top:-60px;right:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(0,194,203,.12) 0%,transparent 70%);pointer-events:none;}
.manifesto-quote{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:700;line-height:1.45;letter-spacing:-.02em;max-width:800px;position:relative;}
.manifesto-quote::before{content:'"';font-size:6rem;color:rgba(0,194,203,.15);position:absolute;top:-20px;left:-20px;line-height:1;font-family:Georgia,serif;pointer-events:none;}
body.ar-mode .manifesto-quote::before{left:auto;right:-20px;}
.manifesto-source{margin-top:28px;display:flex;align-items:center;gap:12px;}
.manifesto-line{width:40px;height:2px;background:var(--cyan);border-radius:1px;}
.manifesto-source span{font-size:.85rem;color:rgba(255,255,255,.5);font-weight:500;}
@media(max-width:768px){.manifesto-inner{padding:40px 28px;}.manifesto-quote::before{display:none;}}

/* ── STORY ───────────────────────────────────────── */
#story{padding:100px max(24px,calc((100% - var(--max-w))/2));}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-top:60px;}
.story-text p{font-size:1rem;color:rgba(255,255,255,.65);line-height:1.85;margin-bottom:24px;}
.story-text p:last-child{margin-bottom:0;}
.story-text p strong{color:var(--white);}
.pull-quote{border-left:3px solid var(--cyan);padding:20px 28px;margin:32px 0;background:rgba(0,194,203,.05);border-radius:0 var(--radius-md) var(--radius-md) 0;}
body.ar-mode .pull-quote{border-left:none;border-right:3px solid var(--cyan);border-radius:var(--radius-md) 0 0 var(--radius-md);}
.pull-quote p{font-size:1.05rem;font-style:italic;color:rgba(255,255,255,.8);line-height:1.7;margin:0;}
.story-visual{display:flex;flex-direction:column;gap:16px;position:sticky;top:100px;}
.story-card{background:rgba(255,255,255,.04);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:24px 28px;transition:var(--transition);}
.story-card:hover{border-color:var(--border-cyan);background:rgba(0,194,203,.04);transform:translateY(-4px);}
.story-card-icon{font-size:28px;margin-bottom:12px;}
.story-card h4{font-size:1rem;font-weight:700;margin-bottom:8px;}
.story-card p{font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.6;}
.story-card-stat{font-size:2rem;font-weight:900;color:var(--cyan);letter-spacing:-.03em;margin-bottom:4px;}
@media(max-width:1024px){.story-grid{grid-template-columns:1fr;gap:40px;}.story-visual{position:static;flex-direction:row;flex-wrap:wrap;}.story-card{flex:1;min-width:220px;}}

/* ── MISSION & VISION ─────────────────────────────── */
#mission{padding:80px max(24px,calc((100% - var(--max-w))/2));background:var(--navy-2);position:relative;overflow:hidden;}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px;}
.mv-card{border-radius:var(--radius-xl);padding:52px 44px;position:relative;overflow:hidden;}
.mv-card.mission-card{background:linear-gradient(135deg,rgba(0,194,203,.1),rgba(0,194,203,.04));border:1px solid var(--border-cyan);}
.mv-card.vision-card{background:linear-gradient(135deg,rgba(108,99,255,.1),rgba(108,99,255,.04));border:1px solid rgba(108,99,255,.25);}
.mv-card::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;pointer-events:none;}
.mission-card::before{background:radial-gradient(circle,rgba(0,194,203,.12) 0%,transparent 70%);}
.vision-card::before{background:radial-gradient(circle,rgba(108,99,255,.12) 0%,transparent 70%);}
.mv-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:20px;display:flex;align-items:center;gap:8px;}
.mission-card .mv-label{color:var(--cyan);}
.vision-card .mv-label{color:var(--violet-light);}
.mv-label::before{content:'';width:20px;height:2px;border-radius:1px;background:currentColor;}
.mv-statement{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700;line-height:1.45;letter-spacing:-.02em;}
.mv-sub{font-size:.88rem;color:rgba(255,255,255,.5);line-height:1.7;margin-top:20px;}
@media(max-width:768px){.mv-grid{grid-template-columns:1fr;}.mv-card{padding:36px 28px;}}

/* ── NUMBERS ──────────────────────────────────────── */
#numbers{padding:80px max(24px,calc((100% - var(--max-w))/2));}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-light);border-radius:var(--radius-lg);overflow:hidden;margin-top:56px;}
.num-item{background:rgba(255,255,255,.03);padding:40px 32px;text-align:center;transition:var(--transition);position:relative;}
.num-item:hover{background:rgba(0,194,203,.05);}
.num-item::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--cyan);transition:width .4s ease;}
.num-item:hover::after{width:60%;}
.num-value{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:900;letter-spacing:-.04em;line-height:1;margin-bottom:8px;background:linear-gradient(135deg,var(--white),rgba(255,255,255,.7));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.num-label{font-size:.82rem;color:rgba(255,255,255,.45);font-weight:500;}
.num-sub{font-size:.72rem;color:var(--cyan);margin-top:4px;font-weight:600;}
@media(max-width:768px){.numbers-grid{grid-template-columns:repeat(2,1fr);}}

/* ── VALUES ───────────────────────────────────────── */
#values{padding:100px max(24px,calc((100% - var(--max-w))/2));background:var(--navy-2);position:relative;overflow:hidden;}
.values-bg{position:absolute;inset:0;background:radial-gradient(ellipse 900px 600px at 50% 50%,rgba(108,99,255,.05) 0%,transparent 70%);pointer-events:none;}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px;}
.value-card{background:rgba(255,255,255,.03);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:36px 28px;position:relative;overflow:hidden;cursor:default;transition:var(--transition);}
.value-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;transition:opacity .4s ease;}
.value-card:hover{border-color:var(--border-cyan);background:rgba(0,194,203,.04);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.3);}
.value-card:hover::before{opacity:1;}
.value-icon{width:56px;height:56px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:20px;transition:var(--transition);}
.value-card:hover .value-icon{transform:scale(1.12) rotate(-4deg);}
.value-card h3{font-size:1.05rem;font-weight:700;margin-bottom:12px;}
.value-card p{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.7;}
.value-detail{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-light);font-size:.8rem;color:rgba(255,255,255,.4);line-height:1.65;}
.value-card:hover .value-detail{display:block;}
.value-num{position:absolute;bottom:16px;right:20px;font-size:3.5rem;font-weight:900;color:rgba(255,255,255,.025);line-height:1;pointer-events:none;}
body.ar-mode .value-num{right:auto;left:20px;}
@media(max-width:1024px){.values-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.values-grid{grid-template-columns:1fr;}}

/* ── TIMELINE ─────────────────────────────────────── */
#timeline{padding:100px max(24px,calc((100% - var(--max-w))/2));}
.timeline-wrap{position:relative;margin-top:60px;padding-left:48px;}
body.ar-mode .timeline-wrap{padding-left:0;padding-right:48px;}
.timeline-line{position:absolute;left:16px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--cyan),rgba(108,99,255,.6),transparent);}
body.ar-mode .timeline-line{left:auto;right:16px;}
.timeline-line::after{content:'';position:absolute;top:0;left:0;right:0;height:0;background:linear-gradient(to bottom,var(--cyan),rgba(108,99,255,.8));transition:height 1.8s cubic-bezier(.4,0,.2,1);}
#timeline.line-grown .timeline-line::after{height:100%;}
.timeline-item{position:relative;padding-bottom:52px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{position:absolute;left:-40px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--navy);border:2px solid var(--border-light);transition:var(--transition);display:flex;align-items:center;justify-content:center;}
body.ar-mode .timeline-dot{left:auto;right:-40px;}
.timeline-item.visible .timeline-dot{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 16px rgba(0,194,203,.5);}
.timeline-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--navy);opacity:0;transition:opacity .3s ease;}
.timeline-item.visible .timeline-dot::after{opacity:1;}
.timeline-year{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--cyan);margin-bottom:6px;}
.timeline-card{background:rgba(255,255,255,.03);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:24px 28px;transition:var(--transition);}
.timeline-item.visible .timeline-card{border-color:var(--border-cyan);background:rgba(0,194,203,.03);}
.timeline-card h4{font-size:1rem;font-weight:700;margin-bottom:8px;}
.timeline-card p{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.65;}
.timeline-tag{display:inline-block;background:rgba(0,194,203,.1);border:1px solid var(--border-cyan);border-radius:20px;padding:3px 12px;font-size:.68rem;font-weight:700;color:var(--cyan);margin-top:12px;}

/* ── GCC COMMITMENT ───────────────────────────────── */
#gcc{padding:80px max(24px,calc((100% - var(--max-w))/2));position:relative;overflow:hidden;}
.gcc-inner{background:linear-gradient(135deg,rgba(0,194,203,.07),rgba(108,99,255,.07));border:1px solid var(--border-cyan);border-radius:var(--radius-xl);padding:72px 80px;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.gcc-inner::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(0,194,203,.1) 0%,transparent 70%);pointer-events:none;}
.gcc-flags{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.gcc-flag{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--border-light);border-radius:40px;padding:8px 16px;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);transition:var(--transition);}
.gcc-flag:hover{border-color:var(--border-cyan);background:rgba(0,194,203,.08);color:var(--white);}
.gcc-visual{display:flex;flex-direction:column;gap:14px;}
.gcc-point{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;background:rgba(255,255,255,.04);border:1px solid var(--border-light);border-radius:var(--radius-md);transition:var(--transition);}
.gcc-point:hover{border-color:var(--border-cyan);transform:translateX(6px);}
body.ar-mode .gcc-point:hover{transform:translateX(-6px);}
.gcc-point-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:rgba(0,194,203,.1);border:1px solid var(--border-cyan);}
.gcc-point h5{font-size:.9rem;font-weight:700;margin-bottom:4px;}
.gcc-point p{font-size:.78rem;color:rgba(255,255,255,.5);line-height:1.5;}
@media(max-width:1024px){.gcc-inner{grid-template-columns:1fr;padding:48px 36px;gap:40px;}}

/* ── JOIN US CTA ──────────────────────────────────── */
#join{padding:100px max(24px,calc((100% - var(--max-w))/2));text-align:center;position:relative;overflow:hidden;}
.join-bg{position:absolute;inset:0;background:radial-gradient(ellipse 1000px 600px at 50% 50%,rgba(0,194,203,.09) 0%,transparent 70%);pointer-events:none;}
.join-inner{position:relative;z-index:2;max-width:680px;margin:0 auto;}
.join-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:20px;}
.join-sub{font-size:1rem;color:rgba(255,255,255,.6);margin-bottom:44px;line-height:1.7;}
.join-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:48px;text-align:left;}
.join-card{background:rgba(255,255,255,.04);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:28px;transition:var(--transition);}
.join-card:hover{border-color:var(--border-cyan);background:rgba(0,194,203,.05);transform:translateY(-4px);}
.join-card-icon{font-size:28px;margin-bottom:14px;}
.join-card h4{font-size:1rem;font-weight:700;margin-bottom:8px;}
.join-card p{font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.6;}
.join-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
@media(max-width:600px){.join-cards{grid-template-columns:1fr;}}

/* ── FOOTER ───────────────────────────────────────── */
footer{background:var(--navy-2);border-top:1px solid var(--border-light);padding:64px max(24px,calc((100% - var(--max-w))/2)) 32px;position:relative;}
footer::before{content:'';position:absolute;top:-80px;left:0;right:0;height:80px;background:linear-gradient(to bottom,transparent,var(--navy-2));pointer-events:none;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.footer-brand p{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.7;margin:16px 0 24px;max-width:280px;}
.footer-social{display:flex;gap:10px;}
.social-btn{width:36px;height:36px;border-radius:var(--radius-sm);background:rgba(255,255,255,.05);border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:var(--transition);text-decoration:none;color:rgba(255,255,255,.7);}
.social-btn:hover{border-color:var(--border-cyan);background:rgba(0,194,203,.08);color:var(--cyan);}
.footer-col h4{font-size:.85rem;font-weight:700;color:var(--white);margin-bottom:20px;text-transform:uppercase;letter-spacing:.08em;}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-links a{font-size:.85rem;color:rgba(255,255,255,.5);text-decoration:none;transition:var(--transition);display:flex;align-items:center;gap:6px;}
.footer-links a:hover{color:var(--cyan);}
.footer-links a .coming{font-size:.6rem;background:rgba(108,99,255,.2);color:var(--violet-light);padding:2px 6px;border-radius:20px;font-weight:700;}
.footer-bottom{padding-top:24px;border-top:1px solid var(--border-light);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-bottom p{font-size:.8rem;color:rgba(255,255,255,.35);}
.footer-bottom-links{display:flex;gap:20px;}
.footer-bottom-links a{font-size:.8rem;color:rgba(255,255,255,.35);text-decoration:none;transition:var(--transition);}
.footer-bottom-links a:hover{color:var(--cyan);}
.footer-vat{display:inline-flex;align-items:center;gap:6px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);border-radius:20px;padding:6px 14px;font-size:.75rem;font-weight:600;color:#4ADE80;margin-top:16px;}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr;}.footer-bottom{flex-direction:column;text-align:center;}}

/* ── SECTION GLOW ENTER ───────────────────────────── */
.sge{position:relative;}
.sge::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;transition:opacity .8s ease;}
.sge.glowing::after{opacity:1;}

/* ── MODULES STYLES ── */

/* ── HERO ── */
#hero{min-height:78vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:140px max(24px,calc((100% - var(--max-w))/2)) 80px;}
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;}
.hero-orb-1{width:700px;height:700px;background:radial-gradient(circle,rgba(0,194,203,.1) 0%,transparent 70%);top:-200px;right:-150px;}
.hero-orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(108,99,255,.08) 0%,transparent 70%);bottom:-100px;left:-100px;}
.hero-content{position:relative;z-index:2;max-width:780px;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,194,203,.08);border:1px solid var(--border-cyan);border-radius:40px;padding:7px 18px;font-size:.8rem;font-weight:700;color:var(--cyan);margin-bottom:28px;animation:fadeUp .6s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.hero-title{font-size:clamp(2.8rem,5.5vw,4.4rem);font-weight:900;letter-spacing:-.04em;line-height:1.08;margin-bottom:24px;animation:fadeUp .6s ease .1s both;}
.hero-sub{font-size:1.1rem;color:rgba(255,255,255,.6);line-height:1.75;max-width:620px;margin-bottom:40px;animation:fadeUp .6s ease .2s both;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp .6s ease .3s both;}
.hero-mod-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;animation:fadeUp .6s ease .4s both;}
.mod-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);border:1px solid var(--border-light);border-radius:40px;padding:7px 16px;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.65);transition:all .3s;cursor:pointer;text-decoration:none;}
.mod-pill:hover,.mod-pill.live{border-color:var(--border-cyan);color:var(--cyan);background:rgba(0,194,203,.06);}
.mod-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--border-light);}
.mod-pill.live .dot{background:var(--green);box-shadow:0 0 6px var(--green);}
.mod-pill.soon .dot{background:var(--violet-light);}

/* ── ECOSYSTEM ── */
#ecosystem{padding:80px max(24px,calc((100% - var(--max-w))/2));background:var(--navy-2);position:relative;overflow:hidden;}
.eco-header{text-align:center;margin-bottom:56px;}
.eco-canvas-wrap{position:relative;width:100%;max-width:780px;margin:0 auto;}
#eco-canvas{width:100%;display:block;border-radius:var(--r-xl);cursor:default;}
.eco-legend{display:flex;justify-content:center;gap:24px;margin-top:24px;flex-wrap:wrap;}
.eco-leg-item{display:flex;align-items:center;gap:8px;font-size:.78rem;color:rgba(255,255,255,.5);}
.eco-leg-dot{width:10px;height:10px;border-radius:50%;}

/* ── MODULE SPOTLIGHT ── */
.mod-section{padding:100px max(24px,calc((100% - var(--max-w))/2));position:relative;overflow:hidden;}
.mod-section:nth-child(even){background:var(--navy-2);}
.mod-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.mod-grid.flip{direction:rtl;}
.mod-grid.flip > *{direction:ltr;}
body.ar-mode .mod-grid{direction:rtl;}
body.ar-mode .mod-grid.flip{direction:ltr;}
body.ar-mode .mod-grid.flip > *{direction:rtl;}
.mod-label{display:inline-flex;align-items:center;gap:8px;background:rgba(0,194,203,.08);border:1px solid var(--border-cyan);border-radius:40px;padding:6px 16px;font-size:.75rem;font-weight:700;color:var(--cyan);margin-bottom:20px;}
.mod-title{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.18;margin-bottom:16px;}
.mod-desc{font-size:.98rem;color:rgba(255,255,255,.6);line-height:1.8;margin-bottom:32px;}
.mod-feats{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;}
.mod-feat{display:flex;align-items:flex-start;gap:12px;}
.feat-check{width:22px;height:22px;border-radius:6px;background:rgba(0,194,203,.12);border:1px solid var(--border-cyan);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:11px;color:var(--cyan);}
.feat-text h5{font-size:.88rem;font-weight:700;margin-bottom:2px;}
.feat-text p{font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.5;}
.mod-stat-strip{display:flex;gap:24px;margin-bottom:32px;flex-wrap:wrap;}
.mod-stat{text-align:center;}
.mod-stat-n{font-size:1.6rem;font-weight:900;color:var(--cyan);letter-spacing:-.03em;line-height:1;}
.mod-stat-l{font-size:.68rem;color:rgba(255,255,255,.45);margin-top:3px;}
.mod-ctas{display:flex;gap:12px;flex-wrap:wrap;}

/* MODULE UI PREVIEWS */
.mod-preview{background:rgba(11,18,40,.9);border:1px solid var(--border-cyan);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 32px 72px rgba(0,0,0,.5),0 0 50px rgba(0,194,203,.08);position:relative;}
.mp-header{background:var(--navy-3);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-light);}
.mp-dots{display:flex;gap:6px;}
.mp-dots span{width:10px;height:10px;border-radius:50%;}
.mp-dots span:nth-child(1){background:#FF5F57;}
.mp-dots span:nth-child(2){background:#FEBC2E;}
.mp-dots span:nth-child(3){background:#28C840;}
.mp-tab{font-size:.65rem;color:rgba(255,255,255,.4);background:rgba(255,255,255,.05);padding:4px 12px;border-radius:20px;}
.mp-body{padding:20px;}
.mp-row{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:rgba(255,255,255,.03);border-radius:var(--r-sm);margin-bottom:8px;border:1px solid var(--border-light);transition:all .3s;}
.mp-row:hover{border-color:var(--border-cyan);background:rgba(0,194,203,.04);}
.mp-row:last-child{margin-bottom:0;}
.mp-row-label{font-size:.72rem;color:rgba(255,255,255,.6);}
.mp-row-val{font-size:.78rem;font-weight:700;}
.mp-badge{padding:3px 10px;border-radius:20px;font-size:.62rem;font-weight:700;}
.mp-badge.green{background:rgba(74,222,128,.15);color:var(--green);}
.mp-badge.cyan{background:rgba(0,194,203,.15);color:var(--cyan);}
.mp-badge.orange{background:rgba(251,146,60,.15);color:var(--orange);}
.mp-badge.violet{background:rgba(108,99,255,.15);color:var(--violet-light);}
.mp-chart{display:flex;align-items:flex-end;gap:4px;height:70px;margin-top:14px;padding:0 4px;}
.mp-bar{flex:1;border-radius:3px 3px 0 0;background:rgba(0,194,203,.2);animation:barIn .8s cubic-bezier(.34,1.56,.64,1) both;}
.mp-bar.hi{background:var(--cyan);box-shadow:0 0 10px rgba(0,194,203,.4);}
@keyframes barIn{from{transform:scaleY(0);transform-origin:bottom;}to{transform:scaleY(1);}}
.mp-bar:nth-child(1){animation-delay:.05s}.mp-bar:nth-child(2){animation-delay:.1s}.mp-bar:nth-child(3){animation-delay:.15s}.mp-bar:nth-child(4){animation-delay:.2s}.mp-bar:nth-child(5){animation-delay:.25s}.mp-bar:nth-child(6){animation-delay:.3s}.mp-bar:nth-child(7){animation-delay:.35s}
.mp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.mp-mini-card{background:rgba(255,255,255,.04);border:1px solid var(--border-light);border-radius:var(--r-sm);padding:12px;text-align:center;}
.mp-mini-n{font-size:1.1rem;font-weight:800;color:var(--cyan);}
.mp-mini-l{font-size:.62rem;color:rgba(255,255,255,.4);margin-top:2px;}
.mp-progress-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.mp-prog{display:flex;flex-direction:column;gap:5px;}
.mp-prog-top{display:flex;justify-content:space-between;font-size:.68rem;}
.mp-prog-top span:first-child{color:rgba(255,255,255,.6);}
.mp-prog-top span:last-child{color:var(--cyan);}
.mp-prog-bar{height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.mp-prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--violet-light));transition:width 1.2s cubic-bezier(.4,0,.2,1);}
.mp-map{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.mp-zone{background:rgba(255,255,255,.04);border:1px solid var(--border-light);border-radius:var(--r-sm);padding:10px 12px;display:flex;align-items:center;gap:8px;}
.mp-zone-icon{font-size:16px;}
.mp-zone-info h6{font-size:.7rem;font-weight:700;margin-bottom:2px;}
.mp-zone-info p{font-size:.6rem;color:rgba(255,255,255,.4);}
.mp-zone-tag{margin-left:auto;font-size:.58rem;padding:2px 8px;border-radius:20px;font-weight:700;}
.mp-float{position:absolute;background:var(--navy-card);border:1px solid var(--border-cyan);border-radius:var(--r-md);padding:11px 16px;box-shadow:0 16px 40px rgba(0,0,0,.4);animation:floatY 4s ease-in-out infinite;z-index:5;font-size:.72rem;white-space:nowrap;}
.mp-float-1{bottom:-16px;left:-20px;animation-delay:0s;}
.mp-float-2{top:30px;right:-20px;animation-delay:2s;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* ── COMING SOON ── */
#coming-soon{padding:80px max(24px,calc((100% - var(--max-w))/2));}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.cs-card{background:rgba(255,255,255,.03);border:1px solid var(--border-light);border-radius:var(--r-xl);padding:40px 32px;position:relative;overflow:hidden;transition:all .3s var(--ease);}
.cs-card:hover{border-color:rgba(108,99,255,.3);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.3);}
.cs-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--violet-light),transparent);opacity:0;transition:opacity .4s;}
.cs-card:hover::before{opacity:1;}
.cs-icon{font-size:36px;margin-bottom:18px;}
.cs-soon-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(108,99,255,.12);border:1px solid rgba(108,99,255,.25);border-radius:40px;padding:4px 12px;font-size:.68rem;font-weight:700;color:var(--violet-light);margin-bottom:16px;}
.cs-card h3{font-size:1.2rem;font-weight:800;margin-bottom:10px;letter-spacing:-.02em;}
.cs-card p{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:24px;}
.cs-features{display:flex;flex-direction:column;gap:8px;margin-bottom:28px;}
.cs-feat{display:flex;align-items:center;gap:8px;font-size:.78rem;color:rgba(255,255,255,.6);}
.cs-feat::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--violet-light);flex-shrink:0;}
.cs-timeline{font-size:.72rem;color:rgba(255,255,255,.4);margin-bottom:20px;display:flex;align-items:center;gap:6px;}
.cs-timeline::before{content:'📅';font-size:12px;}
.cs-waitlist{display:flex;align-items:center;gap:10px;background:rgba(108,99,255,.08);border:1px solid rgba(108,99,255,.2);border-radius:var(--r-md);padding:12px 16px;cursor:pointer;transition:all .3s;text-decoration:none;}
.cs-waitlist:hover{background:rgba(108,99,255,.14);border-color:rgba(108,99,255,.4);}
.cs-waitlist span{font-size:.82rem;font-weight:600;color:var(--violet-light);}
.cs-waitlist-count{margin-left:auto;font-size:.68rem;color:rgba(255,255,255,.4);}
@media(max-width:1024px){.cs-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.cs-grid{grid-template-columns:1fr;}}

/* ── DATA FLOW ── */
#data-flow{padding:100px max(24px,calc((100% - var(--max-w))/2));background:var(--navy-2);overflow:hidden;}
.df-header{text-align:center;margin-bottom:64px;}
.df-flow{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:0;}
.df-step{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;gap:0;}
.df-step-left,.df-step-right{padding:20px 24px;background:rgba(255,255,255,.04);border:1px solid var(--border-light);border-radius:var(--r-md);transition:all .4s var(--ease);}
.df-step.active .df-step-left,.df-step.active .df-step-right{border-color:var(--border-cyan);background:rgba(0,194,203,.05);}
.df-step-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;}
.df-arrow{width:2px;height:40px;background:var(--border-light);position:relative;overflow:hidden;}
.df-arrow::after{content:'';position:absolute;top:-100%;width:100%;height:100%;background:var(--cyan);transition:top .6s ease;}
.df-step.active .df-arrow::after{top:100%;}
.df-arrow-head{color:rgba(255,255,255,.2);font-size:12px;margin-top:-4px;transition:color .4s;}
.df-step.active .df-arrow-head{color:var(--cyan);}
.df-step{opacity:1;transition:opacity .4s ease;}.df-step-left,.df-step-right{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:20px 24px;transition:all .4s ease;}.df-arrow{width:2px;height:50px;background:rgba(255,255,255,.1);margin:0 auto;position:relative;overflow:hidden;}.df-arrow div{position:absolute;top:0;left:0;right:0;height:0;background:linear-gradient(to bottom,var(--cyan),rgba(0,194,203,.3));}.df-arrow-head{color:rgba(255,255,255,.2);text-align:center;font-size:12px;transition:color .4s ease;}.df-conn-line{width:2px;height:20px;background:var(--border-light);margin:0 auto;}
.df-step-icon{font-size:22px;margin-bottom:6px;}
.df-step-title{font-size:.88rem;font-weight:700;margin-bottom:4px;}
.df-step-desc{font-size:.75rem;color:rgba(255,255,255,.5);line-height:1.5;}
.df-module-tag{display:inline-block;font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(0,194,203,.1);color:var(--cyan);margin-bottom:8px;}
.df-play-btn{display:flex;align-items:center;gap:8px;background:rgba(0,194,203,.1);border:1px solid var(--border-cyan);border-radius:40px;padding:10px 20px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--cyan);margin:0 auto 48px;transition:all .3s;font-family:var(--font);}
.df-play-btn:hover{background:rgba(0,194,203,.18);}
@media(max-width:768px){.df-step{grid-template-columns:1fr;gap:8px;}.df-step-mid{display:none;}.df-step+.df-conn-line{height:8px;}}

/* ── SOCIAL PROOF ── */
#social-proof{padding:80px max(24px,calc((100% - var(--max-w))/2));}
.sp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;}
.sp-card{background:rgba(255,255,255,.03);border:1px solid var(--border-light);border-radius:var(--r-lg);padding:28px 24px;position:relative;overflow:hidden;transition:all .3s var(--ease);}
.sp-card:hover{border-color:var(--border-cyan);transform:translateY(-4px);}
.sp-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;transition:opacity .4s;}
.sp-card:hover::after{opacity:1;}
.sp-icon{font-size:24px;margin-bottom:14px;}
.sp-value{font-size:2rem;font-weight:900;color:var(--cyan);letter-spacing:-.03em;line-height:1;margin-bottom:6px;}
.sp-label{font-size:.82rem;font-weight:600;margin-bottom:6px;}
.sp-sub{font-size:.75rem;color:rgba(255,255,255,.45);line-height:1.5;}
@media(max-width:1024px){.sp-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.sp-grid{grid-template-columns:1fr 1fr;}}

/* ── FINAL CTA ── */
#final-cta{padding:100px max(24px,calc((100% - var(--max-w))/2));text-align:center;position:relative;overflow:hidden;}
.cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse 1000px 600px at 50% 50%,rgba(0,194,203,.09) 0%,transparent 70%);pointer-events:none;}
.cta-inner{position:relative;z-index:2;max-width:700px;margin:0 auto;}
.cta-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:20px;}
.cta-sub{font-size:1rem;color:rgba(255,255,255,.6);margin-bottom:40px;line-height:1.7;}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta-note{margin-top:20px;font-size:.78rem;color:rgba(255,255,255,.35);}
.cta-note span{color:var(--green);}

/* ── FOOTER ── */
footer{background:var(--navy-2);border-top:1px solid var(--border-light);padding:64px max(24px,calc((100% - var(--max-w))/2)) 32px;position:relative;}
footer::before{content:'';position:absolute;top:-80px;left:0;right:0;height:80px;background:linear-gradient(to bottom,transparent,var(--navy-2));pointer-events:none;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.footer-brand p{font-size:.85rem;color:rgba(255,255,255,.5);line-height:1.7;margin:16px 0 24px;max-width:280px;}
.footer-social{display:flex;gap:10px;}
.social-btn{width:36px;height:36px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .3s;text-decoration:none;color:rgba(255,255,255,.7);}
.social-btn:hover{border-color:var(--border-cyan);background:rgba(0,194,203,.08);color:var(--cyan);}
.footer-col h4{font-size:.85rem;font-weight:700;color:#fff;margin-bottom:20px;text-transform:uppercase;letter-spacing:.08em;}
.footer-links{display:flex;flex-direction:column;gap:10px;}
.footer-links a{font-size:.85rem;color:rgba(255,255,255,.5);text-decoration:none;transition:all .3s;display:flex;align-items:center;gap:6px;}
.footer-links a:hover{color:var(--cyan);}
.footer-links .coming{font-size:.6rem;background:rgba(108,99,255,.2);color:var(--violet-light);padding:2px 6px;border-radius:20px;font-weight:700;}
.footer-bottom{padding-top:24px;border-top:1px solid var(--border-light);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-bottom p{font-size:.8rem;color:rgba(255,255,255,.35);}
.footer-bottom-links{display:flex;gap:20px;}
.footer-bottom-links a{font-size:.8rem;color:rgba(255,255,255,.35);text-decoration:none;transition:all .3s;}
.footer-bottom-links a:hover{color:var(--cyan);}
.footer-vat{display:inline-flex;align-items:center;gap:6px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);border-radius:20px;padding:6px 14px;font-size:.75rem;font-weight:600;color:var(--green);margin-top:16px;}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px;}.mod-grid{grid-template-columns:1fr;gap:40px;}.mod-grid.flip{direction:ltr;}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr;}.footer-bottom{flex-direction:column;text-align:center;}}


@keyframes ringPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6;}50%{transform:translate(-50%,-50%) scale(1.04);opacity:.3;}}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}}





.reveal-l.on,.rev-l.on{opacity:1;transform:translateX(0);}
.reveal-r.on,.rev-r.on{opacity:1;transform:translateX(0);}

.reveal.on{opacity:1;transform:translateY(0);}

/* ============ NEW PAGES CSS ============ */
.gcc-country-card:hover {
  border-color: var(--border-cyan) !important;
  background: rgba(0,194,203,.06) !important;
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.contact-method:hover {
  border-color: var(--border-cyan) !important;
  background: rgba(0,194,203,.05) !important;
}
.contact-type-btn {
  padding: 8px 16px;
  border-radius: 40px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-light);
  background: transparent;
  color: rgba(255,255,255,.6);
  transition: var(--transition);
  font-family: var(--font-en);
  white-space: nowrap;
}
.contact-type-btn:hover {
  border-color: var(--border-cyan);
  color: var(--white);
  background: rgba(0,194,203,.05);
}
.contact-type-btn.active {
  background: var(--cyan);
  color: var(--navy);
  border-color: var(--cyan);
}
.pricing-faq-item:hover { border-color: var(--border-cyan) !important; }
.pricing-faq-item.open { border-color: var(--border-cyan) !important; background: rgba(0,194,203,.04) !important; }
.pricing-faq-item.open .faq-body { display: block !important; }
.pricing-faq-item.open .faq-arrow { transform: rotate(45deg); background: var(--cyan) !important; color: var(--navy) !important; }
@media (max-width: 1024px) {
  #page-contact > section { grid-template-columns: 1fr !important; }
  #page-contact > section > div:last-child { border-left: none !important; border-top: 1px solid var(--border-light); padding: 60px 24px !important; }
  .gcc-countries-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 600px) {
  .gcc-countries-grid { grid-template-columns: 1fr !important; }
  #page-contact > section > div:first-child { padding: 100px 20px 40px !important; }
}


/* ============ MODULE PANELS — single source of truth ============ */
.modules-panel-wrap { position: relative; min-height: 480px; }
.module-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.module-panel.active {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 1024px) {
  .module-panel.active { grid-template-columns: 1fr; }
  .modules-panel-wrap { min-height: 640px; }
}
@media (max-width: 768px) {
  .modules-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    justify-content: flex-start; padding-bottom: 8px; scrollbar-width: none; }
  .modules-tabs::-webkit-scrollbar { display: none; }
  .mod-tab { flex-shrink: 0; }
  .modules-panel-wrap { min-height: 720px; }
}
/* ============================================================
   COMPREHENSIVE ARABIC RTL FIXES
   ============================================================ */

/* section-tag bar — flip to right side in RTL */
body.ar-mode .section-tag::before { margin-left: 0; margin-right: 0; order: 1; }
body.ar-mode .section-tag { flex-direction: row-reverse; }

/* Nav — flip indicator and right-side items */
body.ar-mode .nav-indicator { left: auto; right: 50%; transform: translateX(50%) scaleX(0); }
body.ar-mode .nav-links li.current .nav-indicator { transform: translateX(50%) scaleX(1); }
body.ar-mode .live-dot { margin-right: 0; margin-left: 5px; }

/* Hero trust avatars — flip overlap direction */
body.ar-mode .hero-trust-avatars span { margin-right: 0; margin-left: -10px; }
body.ar-mode .hero-trust-avatars span:first-child { margin-left: -10px; }

/* Float cards — flip positions for RTL hero */
body.ar-mode .float-card-1 { left: auto; right: -30px; }
body.ar-mode .float-card-2 { right: auto; left: -20px; }

/* Solution features check icons */
body.ar-mode .solution-feat::before { margin-right: 0; margin-left: 10px; }

/* Module tabs — no directional override needed, grid handles it */
body.ar-mode .mod-grid { direction: rtl; }
body.ar-mode .mod-grid.flip { direction: ltr; }
body.ar-mode .mod-grid.flip > * { direction: rtl; }

/* Why section number watermark */
body.ar-mode .why-number { right: auto; left: 20px; }

/* Saudi section stat cards */
body.ar-mode .saudi-stat-card .flag { margin-right: 0; margin-left: 12px; }

/* Footer social icons & links */
body.ar-mode .footer-links { text-align: right; }
body.ar-mode .footer-links a { flex-direction: row-reverse; }

/* Timeline RTL (About page) */
body.ar-mode .timeline-wrap { padding-left: 0; padding-right: 48px; }
body.ar-mode .timeline-line { left: auto; right: 16px; }
body.ar-mode .tl-item { padding-left: 0; padding-right: 48px; }
body.ar-mode .tl-dot { left: auto; right: -40px; }

/* Values number watermark (About) */
body.ar-mode .value-num { right: auto; left: 20px; }

/* Pull quote border side (About story) */
body.ar-mode .pull-quote { border-left: none; border-right: 3px solid var(--cyan); padding-left: 0; padding-right: 20px; border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* GCC page hover direction */
body.ar-mode .gcc-point:hover { transform: translateX(-6px); }

/* Manifesto quote mark */
body.ar-mode .manifesto-quote::before { left: auto; right: -20px; }

/* Form labels — already inherit RTL from body, but inputs should be LTR */
body.ar-mode input, body.ar-mode textarea, body.ar-mode select { direction: ltr; text-align: left; }
body.ar-mode label { display: block; text-align: right; }

/* Pricing check/cross alignment */
body.ar-mode .pricing-feat { flex-direction: row-reverse; }

/* Contact type buttons */
body.ar-mode .contact-type-btn { font-family: var(--font-ar); }

/* ============================================================
   COMPREHENSIVE RESPONSIVE FIXES
   ============================================================ */

/* --- Nav: hide CTA text on very small screens, show hamburger --- */
@media (max-width: 768px) {
  .btn-nav-cta { display: none; }
  .hamburger { display: flex !important; }
  .nav-links { display: none; }
  .btn-nav-login { display: none; }
}
@media (max-width: 480px) {
  .lang-toggle { display: none; } /* hide lang on tiny screens — in mobile menu instead */
}

/* --- Mobile menu: add lang toggle + CTA inside mobile menu --- */
/* --- Hero --- */
@media (max-width: 768px) {
  #hero { padding: 100px 20px 60px; min-height: auto; }
  .hero-title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-subtitle { font-size: 1rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary { justify-content: center; }
  .hero-trust { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-mod-pills { gap: 8px; }
}
@media (max-width: 480px) {
  .hero-title { font-size: clamp(1.8rem, 9vw, 2.4rem); }
  .hero-badge { font-size: .72rem; }
}

/* --- Trust bar --- */
@media (max-width: 480px) {
  #trust-bar { grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px 16px; }
  .trust-value { font-size: 1.1rem; }
  .trust-label { font-size: .7rem; }
}

/* --- Problem section --- */
@media (max-width: 768px) {
  .problem-grid { grid-template-columns: 1fr; }
  .solution-card { order: -1; padding: 32px 24px; }
}

/* --- Why grid --- */
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-card { padding: 28px 20px; }
}

/* --- Saudi section --- */
@media (max-width: 768px) {
  .saudi-grid { grid-template-columns: 1fr; gap: 40px; }
  .saudi-visual { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .saudi-visual { grid-template-columns: 1fr; }
}

/* --- Testimonials --- */
@media (max-width: 600px) {
  .testi-grid { grid-template-columns: 1fr; }
}

/* --- Pricing page --- */
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .pricing-card.featured { transform: none; }
  .pricing-toggle { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 480px) {
  .pricing-grid { max-width: 100%; }
}

/* --- Contact page --- */
@media (max-width: 1024px) {
  #page-contact > section { grid-template-columns: 1fr !important; }
  #page-contact > section > div:last-child {
    border-left: none !important;
    border-top: 1px solid var(--border-light);
    padding: 60px 24px !important;
  }
}
@media (max-width: 600px) {
  #page-contact > section > div:first-child { padding: 100px 20px 40px !important; }
  #page-contact > section > div:last-child { padding: 40px 20px !important; }
  .contact-type-btn { font-size: .78rem; padding: 8px 12px; }
}

/* --- About page hero --- */
@media (max-width: 768px) {
  #about-hero { padding: 110px 20px 60px; min-height: auto; }
  .hero-title { font-size: clamp(2.2rem, 7vw, 3rem); }
  .hero-sub { font-size: 1rem; }
  .hero-ctas { flex-wrap: wrap; gap: 10px; }
}

/* --- About timeline --- */
@media (max-width: 768px) {
  .timeline-wrap { padding-left: 32px; }
  .tl-item { padding-left: 32px; }
  .tl-dot { left: -28px; width: 14px; height: 14px; }
}

/* --- About numbers --- */
@media (max-width: 480px) {
  .numbers-grid { grid-template-columns: 1fr 1fr; }
}

/* --- About values --- */
@media (max-width: 480px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* --- Story grid --- */
@media (max-width: 768px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-visual { flex-direction: row; flex-wrap: wrap; }
  .story-card { flex: 1; min-width: 200px; }
}

/* --- Mission/Vision --- */
@media (max-width: 768px) {
  .mv-grid { grid-template-columns: 1fr; }
}

/* --- GCC page --- */
@media (max-width: 768px) {
  .gcc-inner { grid-template-columns: 1fr; padding: 40px 20px; }
  .gcc-countries-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  .gcc-countries-grid { grid-template-columns: 1fr !important; }
}

/* --- Footer --- */
@media (max-width: 768px) {
  footer { padding: 48px 20px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* --- General section padding on mobile --- */
@media (max-width: 768px) {
  section { padding-left: 20px !important; padding-right: 20px !important; }
  .pad { padding-left: 20px; padding-right: 20px; }
}


/* ── PRICING PAGE MODULE CARDS ── */
.mod-cat-pill{padding:7px 16px;border-radius:20px;font-size:.78rem;font-weight:600;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.42);cursor:pointer;background:transparent;transition:var(--transition);font-family:var(--font);}
.mod-cat-pill:hover{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.75);}
.mod-cat-pill.on{background:#00c2cb;border-color:#00c2cb;color:#070d1f;}
.pmod-card{background:#0c1428;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px 14px;transition:var(--transition);}
.pmod-card:hover{border-color:rgba(255,255,255,.16);transform:translateY(-2px);}
.pmod-card.hidden{display:none;}
.pmod-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);}
.pmod-cat{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.27);margin-bottom:4px;}
.pmod-name{font-size:.82rem;font-weight:700;margin-bottom:8px;line-height:1.3;}
.pmod-price-row{display:flex;align-items:baseline;gap:3px;margin-bottom:7px;}
.pmod-price{font-size:1rem;font-weight:800;color:#00c2cb;}
.pmod-price.pmod-included{font-size:.78rem;color:#4ade80;font-weight:700;}
.pmod-per{font-size:.7rem;color:rgba(255,255,255,.3);}
.pmod-tags{display:flex;gap:4px;flex-wrap:wrap;}
.pmod-tag{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;}
.pmod-all{background:rgba(255,255,255,.07);color:rgba(255,255,255,.38);}
.pmod-scale{background:rgba(0,194,203,.11);color:rgba(0,194,203,.8);}
@media(max-width:1024px){#pricing-mod-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:768px){#pricing-mod-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){#pricing-mod-grid{grid-template-columns:1fr 1fr;gap:8px;}.pmod-card{padding:12px 10px;}}


/* === Integrations Page Styles === */
/* ── SHARED NEW PAGE HERO ── */
.page-hero{min-height:56vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:140px max(24px,calc((100% - 1200px)/2)) 80px;}
.page-hero-inner{position:relative;z-index:2;text-align:center;width:100%;}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:900;letter-spacing:-.04em;line-height:1.1;margin-bottom:20px;}
.page-hero p{font-size:1.05rem;color:rgba(255,255,255,.6);max-width:560px;margin:0 auto 36px;line-height:1.75;}
@media(max-width:768px){.page-hero{padding:110px 20px 60px;min-height:auto;}.page-hero h1{font-size:clamp(2rem,7vw,2.8rem);}}

/* ── INTEGRATIONS PAGE ── */
.int-category{padding:80px max(24px,calc((100% - 1200px)/2));}
.int-category:nth-child(odd){background:var(--navy-2);}
.int-cat-header{text-align:center;margin-bottom:48px;}
.int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.int-card{background:rgba(255,255,255,.03);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:28px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;transition:var(--transition);position:relative;overflow:hidden;}
.int-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,194,203,.04),transparent);opacity:0;transition:var(--transition);}
.int-card:hover{border-color:var(--border-cyan);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.3);}
.int-card:hover::before{opacity:1;}
.int-logo{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.int-card h4{font-size:.95rem;font-weight:700;margin-bottom:2px;}
.int-card p{font-size:.8rem;color:rgba(255,255,255,.5);line-height:1.5;}
.int-badge{display:inline-flex;align-items:center;gap:4px;font-size:.65rem;font-weight:700;padding:3px 10px;border-radius:20px;margin-top:auto;}
.int-badge.live{background:rgba(74,222,128,.12);color:#4ADE80;border:1px solid rgba(74,222,128,.2);}
.int-badge.soon{background:rgba(108,99,255,.12);color:var(--violet-light);border:1px solid rgba(108,99,255,.2);}
.int-badge.partner{background:rgba(0,194,203,.12);color:var(--cyan);border:1px solid var(--border-cyan);}
.int-cta{padding:80px max(24px,calc((100% - 800px)/2));text-align:center;}
@media(max-width:1024px){.int-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:768px){.int-grid{grid-template-columns:repeat(2,1fr);}.int-category{padding:60px 20px;}}
@media(max-width:480px){.int-grid{grid-template-columns:1fr 1fr;gap:12px;}.int-card{padding:20px 16px;}}

/* ── CASE STUDIES PAGE ── */
.cs-featured{padding:0 max(24px,calc((100% - 1200px)/2)) 80px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;}
.cs-card-big{background:linear-gradient(135deg,rgba(0,194,203,.08),rgba(108,99,255,.06));border:1px solid var(--border-cyan);border-radius:var(--radius-xl);padding:44px 40px;display:flex;flex-direction:column;gap:24px;transition:var(--transition);cursor:pointer;}
.cs-card-big:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.35);}
.cs-logo-wrap{display:flex;align-items:center;gap:12px;}
.cs-avatar{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;}
.cs-industry{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);}
.cs-quote{font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.85);font-style:italic;}
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px;background:rgba(0,0,0,.2);border-radius:var(--radius-md);}
.cs-metric{text-align:center;}
.cs-metric-val{font-size:1.6rem;font-weight:800;color:var(--cyan);letter-spacing:-.03em;}
.cs-metric-lbl{font-size:.68rem;color:rgba(255,255,255,.45);margin-top:3px;}
.cs-author{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border-light);}
.cs-author-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;}
.cs-author-name{font-size:.88rem;font-weight:700;}
.cs-author-role{font-size:.75rem;color:rgba(255,255,255,.5);}
.cs-grid-small{padding:0 max(24px,calc((100% - 1200px)/2)) 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.cs-card-sm{background:rgba(255,255,255,.03);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:28px;transition:var(--transition);cursor:pointer;}
.cs-card-sm:hover{border-color:var(--border-cyan);background:rgba(0,194,203,.04);transform:translateY(-4px);}
.cs-tag{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cyan);background:rgba(0,194,203,.1);border-radius:20px;padding:3px 10px;margin-bottom:16px;}
.cs-card-sm h3{font-size:1rem;font-weight:700;margin-bottom:10px;line-height:1.4;}
.cs-card-sm p{font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:20px;}
.cs-mini-metrics{display:flex;gap:20px;}
.cs-mini-val{font-size:1.2rem;font-weight:800;color:var(--cyan);}
.cs-mini-lbl{font-size:.65rem;color:rgba(255,255,255,.4);}
@media(max-width:1024px){.cs-featured{grid-template-columns:1fr;}.cs-grid-small{grid-template-columns:1fr 1fr;}}
@media(max-width:768px){.cs-featured{padding:0 20px 60px;}.cs-grid-small{grid-template-columns:1fr;padding:0 20px 60px;}.cs-card-big{padding:28px 24px;}.cs-metrics{grid-template-columns:repeat(3,1fr);}}
@media(max-width:480px){.cs-metrics{gap:8px;}.cs-metric-val{font-size:1.2rem;}}

/* ── HELP CENTER PAGE ── */
.hc-search-wrap{padding:0 max(24px,calc((100% - 720px)/2)) 60px;position:relative;z-index:2;}
.hc-search{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid var(--border-cyan);border-radius:40px;padding:14px 24px;transition:var(--transition);}
.hc-search:focus-within{background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(0,194,203,.15);}
.hc-search input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:1rem;font-family:var(--font);}
.hc-search input::placeholder{color:rgba(255,255,255,.35);}
.hc-search-icon{color:var(--cyan);font-size:18px;flex-shrink:0;}
.hc-cats{padding:0 max(24px,calc((100% - 1200px)/2)) 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.hc-cat{background:rgba(255,255,255,.03);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:32px 28px;transition:var(--transition);cursor:pointer;}
.hc-cat:hover{border-color:var(--border-cyan);background:rgba(0,194,203,.04);transform:translateY(-4px);}
.hc-cat-icon{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px;}
.hc-cat h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;}
.hc-cat p{font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:16px;}
.hc-cat-count{font-size:.75rem;color:var(--cyan);font-weight:600;}
.hc-popular{padding:0 max(24px,calc((100% - 1200px)/2)) 80px;display:grid;grid-template-columns:2fr 1fr;gap:48px;}
.hc-faqs{display:flex;flex-direction:column;gap:4px;}
.hc-faq{background:rgba(255,255,255,.03);border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden;transition:var(--transition);}
.hc-faq.open{border-color:var(--border-cyan);background:rgba(0,194,203,.03);}
.hc-faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;cursor:pointer;font-weight:600;font-size:.92rem;gap:12px;}
.hc-faq-icon{width:26px;height:26px;border-radius:50%;border:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:var(--transition);color:rgba(255,255,255,.5);}
.hc-faq.open .hc-faq-icon{background:var(--cyan);border-color:var(--cyan);color:var(--navy);transform:rotate(45deg);}
.hc-faq-a{display:none;padding:0 20px 18px;font-size:.85rem;color:rgba(255,255,255,.55);line-height:1.75;}
.hc-faq.open .hc-faq-a{display:block;}
.hc-sidebar{display:flex;flex-direction:column;gap:16px;}
.hc-contact-card{background:linear-gradient(135deg,rgba(0,194,203,.08),rgba(108,99,255,.06));border:1px solid var(--border-cyan);border-radius:var(--radius-lg);padding:28px;text-align:center;}
.hc-contact-card h4{font-size:1rem;font-weight:700;margin-bottom:8px;}
.hc-contact-card p{font-size:.82rem;color:rgba(255,255,255,.55);margin-bottom:20px;line-height:1.6;}
.hc-stat-card{background:rgba(255,255,255,.03);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:24px;text-align:center;}
.hc-stat-val{font-size:2rem;font-weight:800;color:var(--cyan);letter-spacing:-.03em;}
.hc-stat-lbl{font-size:.78rem;color:rgba(255,255,255,.45);margin-top:4px;}
@media(max-width:1024px){.hc-popular{grid-template-columns:1fr;}.hc-cats{grid-template-columns:repeat(3,1fr);}}
@media(max-width:768px){.hc-cats{grid-template-columns:1fr 1fr;padding:0 20px 60px;}.hc-popular{padding:0 20px 60px;}.hc-search-wrap{padding:0 20px 40px;}}
@media(max-width:480px){.hc-cats{grid-template-columns:1fr;}}

/* ── CHANGELOG PAGE ── */
.cl-timeline{padding:0 max(24px,calc((100% - 900px)/2)) 100px;}
.cl-entry{display:grid;grid-template-columns:140px 1fr;gap:32px;padding:40px 0;border-bottom:1px solid var(--border-light);position:relative;}
.cl-entry:last-child{border-bottom:none;}
.cl-entry::before{content:'';position:absolute;left:139px;top:0;bottom:0;width:1px;background:var(--border-light);}
.cl-date-col{text-align:right;padding-top:4px;}
.cl-date{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.08em;}
.cl-version{font-size:1rem;font-weight:800;color:var(--cyan);margin-top:4px;}
.cl-dot{position:absolute;left:132px;top:44px;width:16px;height:16px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(0,194,203,.5);border:3px solid var(--navy);}
.cl-dot.major{width:20px;height:20px;left:130px;background:linear-gradient(135deg,var(--cyan),var(--violet-light));}
.cl-content{padding-left:32px;}
.cl-release-badge{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:4px 12px;border-radius:20px;margin-bottom:12px;}
.cl-release-badge.major{background:linear-gradient(90deg,rgba(0,194,203,.15),rgba(108,99,255,.15));color:var(--cyan);border:1px solid var(--border-cyan);}
.cl-release-badge.minor{background:rgba(74,222,128,.1);color:#4ADE80;border:1px solid rgba(74,222,128,.2);}
.cl-release-badge.fix{background:rgba(251,146,60,.1);color:#FB923C;border:1px solid rgba(251,146,60,.2);}
.cl-content h2{font-size:1.3rem;font-weight:800;margin-bottom:8px;letter-spacing:-.02em;}
.cl-content > p{font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:20px;}
.cl-items{display:flex;flex-direction:column;gap:8px;}
.cl-item{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:rgba(255,255,255,.75);line-height:1.5;}
.cl-item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.cl-item-dot.new{background:var(--cyan);}
.cl-item-dot.improved{background:#4ADE80;}
.cl-item-dot.fixed{background:#FB923C;}
.cl-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;}
.cl-tag{font-size:.65rem;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);border:1px solid var(--border-light);}
.cl-subscribe{padding:60px max(24px,calc((100% - 600px)/2));text-align:center;background:var(--navy-2);border-top:1px solid var(--border-light);}
.cl-subscribe h3{font-size:1.4rem;font-weight:800;margin-bottom:8px;}
.cl-subscribe p{font-size:.88rem;color:rgba(255,255,255,.5);margin-bottom:24px;}
.cl-email-row{display:flex;gap:10px;max-width:420px;margin:0 auto;}
.cl-email-row input{flex:1;padding:12px 18px;border-radius:40px;background:rgba(255,255,255,.05);border:1px solid var(--border-light);color:#fff;font-size:.9rem;outline:none;font-family:var(--font);}
.cl-email-row input:focus{border-color:var(--border-cyan);}
.cl-email-row button{padding:12px 22px;border-radius:40px;background:var(--cyan);color:var(--navy);font-weight:700;border:none;cursor:pointer;font-family:var(--font);white-space:nowrap;transition:var(--transition);}
.cl-email-row button:hover{background:var(--cyan-light);transform:translateY(-1px);}
@media(max-width:768px){.cl-timeline{padding:0 20px 60px;}.cl-entry{grid-template-columns:1fr;gap:8px;}.cl-entry::before{display:none;}.cl-dot{display:none;}.cl-date-col{text-align:left;display:flex;gap:10px;align-items:center;}.cl-content{padding-left:0;}.cl-email-row{flex-direction:column;}.cl-subscribe{padding:48px 20px;}}

/* === Changelog / Privacy Page Styles === */
.pp-wrap{max-width:820px;margin:0 auto;padding:140px max(24px,calc((100% - 820px)/2)) 100px;}
.pp-hero{text-align:center;margin-bottom:64px;}
.pp-hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-.04em;margin-bottom:16px;}
.pp-hero p{font-size:.92rem;color:rgba(255,255,255,.45);}
.pp-last-updated{display:inline-flex;align-items:center;gap:8px;background:rgba(0,194,203,.08);border:1px solid var(--border-cyan);border-radius:20px;padding:6px 16px;font-size:.75rem;font-weight:700;color:var(--cyan);margin-bottom:28px;}
.pp-toc{background:rgba(255,255,255,.03);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:28px 32px;margin-bottom:56px;}
.pp-toc h4{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);margin-bottom:16px;}
.pp-toc ol{list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:toc;}
.pp-toc ol li{counter-increment:toc;display:flex;align-items:center;gap:10px;font-size:.88rem;cursor:pointer;color:rgba(255,255,255,.7);transition:var(--transition);}
.pp-toc ol li::before{content:counter(toc,decimal-leading-zero);font-size:.7rem;font-weight:700;color:var(--cyan);min-width:22px;}
.pp-toc ol li:hover{color:var(--cyan);}
.pp-section{margin-bottom:52px;padding-bottom:52px;border-bottom:1px solid var(--border-light);}
.pp-section:last-of-type{border-bottom:none;}
.pp-section-num{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--cyan);margin-bottom:10px;}
.pp-section h2{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin-bottom:20px;}
.pp-section p{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.85;margin-bottom:16px;}
.pp-section p:last-child{margin-bottom:0;}
.pp-section ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:16px 0;}
.pp-section ul li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:rgba(255,255,255,.6);line-height:1.65;}
.pp-section ul li::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--cyan);flex-shrink:0;margin-top:7px;}
.pp-section strong{color:rgba(255,255,255,.85);font-weight:600;}
.pp-highlight{background:rgba(0,194,203,.06);border:1px solid var(--border-cyan);border-radius:var(--radius-md);padding:20px 24px;margin:20px 0;font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.75;}
.pp-highlight strong{color:var(--cyan);}
.pp-contact-box{background:linear-gradient(135deg,rgba(0,194,203,.08),rgba(108,99,255,.06));border:1px solid var(--border-cyan);border-radius:var(--radius-lg);padding:32px;text-align:center;margin-top:56px;}
.pp-contact-box h3{font-size:1.1rem;font-weight:800;margin-bottom:8px;}
.pp-contact-box p{font-size:.85rem;color:rgba(255,255,255,.55);margin-bottom:20px;}
@media(max-width:768px){.pp-wrap{padding:110px 20px 80px;}.pp-toc{padding:20px;}.pp-section h2{font-size:1.15rem;}}

/* === New Privacy Page Layout (Two-Column with Sticky TOC) === */
.priv-hero{min-height:46vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;padding:140px max(24px,calc((100% - 1100px)/2)) 60px;}
.priv-hero-inner{position:relative;z-index:2;max-width:640px;}
.priv-last-updated{display:inline-flex;align-items:center;gap:8px;background:rgba(0,194,203,.08);border:1px solid var(--border-cyan);border-radius:20px;padding:6px 16px;font-size:.75rem;font-weight:700;color:var(--cyan);margin-bottom:28px;}
.priv-hero h1{font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:900;letter-spacing:-.04em;line-height:1.1;margin-bottom:16px;}
.priv-hero p{font-size:.95rem;color:rgba(255,255,255,.5);line-height:1.75;max-width:520px;}
.priv-body{display:grid;grid-template-columns:220px 1fr;gap:48px;max-width:1100px;margin:0 auto;padding:0 max(24px,calc((100% - 1100px)/2)) 100px;align-items:start;}
.priv-toc{position:sticky;top:88px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:22px 20px;}
.priv-toc-heading{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:14px;}
.priv-toc ol{list-style:none;display:flex;flex-direction:column;gap:2px;counter-reset:toc;}
.priv-toc ol li{counter-increment:toc;display:flex;align-items:flex-start;gap:8px;font-size:.78rem;cursor:pointer;color:rgba(255,255,255,.45);transition:color .2s;padding:5px 6px;border-radius:7px;line-height:1.4;}
.priv-toc ol li::before{content:counter(toc,decimal-leading-zero);font-size:.62rem;font-weight:700;color:var(--cyan);min-width:18px;flex-shrink:0;margin-top:1px;}
.priv-toc ol li:hover{color:#fff;background:rgba(255,255,255,.04);}
.priv-toc ol li.active{color:var(--cyan);background:rgba(0,194,203,.07);}
.priv-toc-divider{height:1px;background:rgba(255,255,255,.06);margin:14px 0;}
.priv-toc-updated{font-size:.68rem;color:rgba(255,255,255,.25);display:flex;align-items:center;gap:5px;}
.priv-content{}
.priv-section{padding-bottom:48px;margin-bottom:48px;border-bottom:1px solid rgba(255,255,255,.06);}
.priv-section:last-of-type{border-bottom:none;}
.priv-section-num{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px;}
.priv-section h2{font-size:1.25rem;font-weight:800;letter-spacing:-.025em;margin-bottom:18px;line-height:1.25;}
.priv-section p{font-size:.9rem;color:rgba(255,255,255,.58);line-height:1.85;margin-bottom:14px;}
.priv-section p:last-child{margin-bottom:0;}
.priv-section ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:14px 0;}
.priv-section ul li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:rgba(255,255,255,.58);line-height:1.7;}
.priv-section ul li::before{content:'';display:block;width:5px;height:5px;border-radius:50%;background:var(--cyan);flex-shrink:0;margin-top:8px;}
.priv-section strong{color:rgba(255,255,255,.85);font-weight:600;}
.priv-highlight{background:rgba(0,194,203,.05);border:1px solid rgba(0,194,203,.2);border-left:3px solid var(--cyan);border-radius:12px;padding:18px 22px;margin:18px 0;font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.8;}
.priv-highlight strong{color:var(--cyan);}
.priv-cta{background:linear-gradient(135deg,rgba(0,194,203,.07),rgba(108,99,255,.05));border:1px solid rgba(0,194,203,.2);border-radius:20px;padding:36px;text-align:center;margin-top:20px;}
.priv-cta h3{font-size:1.1rem;font-weight:800;margin-bottom:8px;}
.priv-cta p{font-size:.85rem;color:rgba(255,255,255,.5);margin-bottom:22px;max-width:380px;margin-left:auto;margin-right:auto;}
@media(max-width:900px){.priv-body{grid-template-columns:1fr;}.priv-toc{position:static;}}
@media(max-width:640px){.priv-hero{padding-bottom:40px;}.priv-hero h1{font-size:1.8rem;}.priv-section h2{font-size:1.1rem;}}