*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --ink-900:#0A0F1C; --ink-850:#0C1322; --ink-800:#101A30; --ink-700:#15213B; --ink-600:#1B2A4A;
  --panel: rgba(18,28,50,0.55);
  --line: rgba(120,150,210,0.12); --line-soft: rgba(120,150,210,0.07);
  --text:#EAEEF8; --text-dim:#97A4C2; --text-mute:#5E6C8C;
  --brand:#4A6FE0; --brand-2:#3DB5E6; --brand-soft: rgba(74,111,224,0.16);
  --silk: cubic-bezier(0.16, 1, 0.3, 1);
}
html { scroll-behavior:smooth; font-size:16px; scroll-padding-top:84px; overflow-x:hidden; }
body { font-family:'Satoshi','IBM Plex Sans Arabic',system-ui,sans-serif; background:var(--ink-900); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.t-ar { display:none; }
html[lang="ar"] .t-en { display:none; }
html[lang="ar"] .t-ar { display:inline; }
.t-ar { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:normal !important; font-style:normal !important; }
.grain { position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.02; mix-blend-mode:overlay; }
.atmosphere { position:fixed; inset:0; z-index:0; background:radial-gradient(1200px 620px at 50% -12%, rgba(74,111,224,0.14), transparent 62%), radial-gradient(900px 500px at 85% 6%, rgba(61,181,230,0.07), transparent 60%), linear-gradient(180deg,#0A0F1C 0%, #0E1424 42%, #0A0F1C 100%); }

/* NAV */
.top-nav { position:fixed; top:0; inset-inline:0; z-index:600; display:flex; justify-content:space-between; align-items:center; padding:18px 40px; transition:background .7s var(--silk), padding .7s var(--silk), border-color .7s var(--silk); border-bottom:1px solid transparent; }
.top-nav.scrolled { background:rgba(10,15,28,0.74); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border-bottom:1px solid var(--line-soft); padding:12px 40px; }
.nav-brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand-badge { position:relative; width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff; letter-spacing:-0.02em; box-shadow:0 4px 16px rgba(74,111,224,0.35); flex-shrink:0; }
.brand-badge::after { content:''; position:absolute; top:5px; right:5px; width:4px; height:4px; border-radius:1px; background:#fff; opacity:.85; box-shadow:5px -1px 0 rgba(255,255,255,.5); }
.brand-text { display:flex; flex-direction:column; line-height:1; }
.brand-name { font-size:17px; font-weight:700; color:var(--text); letter-spacing:-0.01em; }
.brand-tag { font-family:'IBM Plex Mono',monospace; font-size:8.5px; font-weight:400; letter-spacing:0.22em; color:var(--text-mute); margin-top:3px; }
.nav-links { display:flex; gap:34px; list-style:none; align-items:center; }
.nav-links a { font-size:13px; font-weight:500; color:var(--text-dim); text-decoration:none; position:relative; padding:8px 0; transition:color .5s var(--silk); }
.nav-links a::after { content:''; position:absolute; bottom:0; inset-inline-start:0; width:0; height:1px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:width .5s var(--silk); }
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.lang-toggle { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:34px; padding:0 13px; border-radius:100px; background:rgba(120,150,210,0.05); border:1px solid var(--line); color:var(--text-dim); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; cursor:pointer; transition:color .4s var(--silk), border-color .4s var(--silk), background .4s var(--silk); }
.lang-toggle:hover { color:var(--text); border-color:var(--brand-soft); background:var(--brand-soft); }
.nav-cta { padding:10px 22px; border-radius:100px; font-family:inherit; font-size:12px; font-weight:700; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border:none; cursor:pointer; text-decoration:none; transition:transform .5s var(--silk), box-shadow .5s var(--silk); }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(74,111,224,0.4); }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; width:32px; height:24px; position:relative; padding:0; }
.toggle-bar { display:block; width:100%; height:1.5px; background:var(--text); position:absolute; inset-inline-start:0; transition:transform .5s var(--silk), top .5s var(--silk); }
.toggle-bar:nth-child(1){ top:6px; } .toggle-bar:nth-child(2){ top:16px; }
.nav-toggle.active .toggle-bar:nth-child(1){ top:11px; transform:rotate(45deg); }
.nav-toggle.active .toggle-bar:nth-child(2){ top:11px; transform:rotate(-45deg); }

/* MOBILE MENU */
.mobile-menu { position:fixed; inset:0; z-index:550; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .5s var(--silk), visibility .5s var(--silk); }
.mobile-menu.open { opacity:1; visibility:visible; pointer-events:auto; }
.mobile-menu-inner { position:absolute; inset:0; background:rgba(10,15,28,0.97); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); display:flex; flex-direction:column; justify-content:center; padding:100px 40px 60px; overflow-y:auto; }
.mobile-menu-links { display:flex; flex-direction:column; flex:1; justify-content:center; }
.mobile-menu-link { display:flex; align-items:baseline; gap:16px; font-size:clamp(1.7rem,6vw,2.5rem); font-weight:500; color:var(--text); text-decoration:none; padding:16px 0; border-bottom:1px solid var(--line-soft); opacity:0; transform:translateY(20px); transition:opacity .3s ease, transform .3s ease, color .5s var(--silk); }
.mobile-menu.open .mobile-menu-link { opacity:1; transform:translateY(0); transition:opacity .5s var(--silk), transform .5s var(--silk), color .5s var(--silk); }
.mobile-menu.open .mobile-menu-link:nth-child(1){transition-delay:.06s}.mobile-menu.open .mobile-menu-link:nth-child(2){transition-delay:.12s}.mobile-menu.open .mobile-menu-link:nth-child(3){transition-delay:.18s}.mobile-menu.open .mobile-menu-link:nth-child(4){transition-delay:.24s}.mobile-menu.open .mobile-menu-link:nth-child(5){transition-delay:.30s}
.mobile-menu-link::before { content:attr(data-index); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; color:var(--brand-2); opacity:.7; min-width:26px; }
.mobile-menu-link:hover { color:var(--brand-2); }
.mobile-menu-footer { display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--line-soft); opacity:0; transition:opacity .3s ease; }
.mobile-menu.open .mobile-menu-footer { opacity:1; transition:opacity .5s var(--silk) .4s; }
.mobile-menu-footer a { font-size:12px; color:var(--text-mute); text-decoration:none; }
body.menu-open { overflow:hidden; }

/* SIDE PANELS */
.side-panel { position:fixed; top:50%; transform:translateY(-50%); width:56px; z-index:100; display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px 0; }
.side-panel.left { inset-inline-start:18px; } .side-panel.right { inset-inline-end:18px; }
.side-label { writing-mode:vertical-rl; text-orientation:mixed; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--text-mute); opacity:.7; }
.side-track { width:1px; height:150px; background:var(--line); position:relative; }
.side-track-fill { position:absolute; top:0; inset-inline-start:0; width:100%; height:0%; background:linear-gradient(to bottom,var(--brand-2),var(--brand)); transition:height 1s var(--silk); }
.side-dot { width:6px; height:6px; border-radius:50%; background:var(--text-mute); opacity:.25; transition:all .6s var(--silk); }
.side-dot.active { opacity:1; background:var(--brand); box-shadow:0 0 12px rgba(74,111,224,.5); transform:scale(1.4); }
.side-readout { font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--text-mute); opacity:.6; }

/* SHARED */
.main { position:relative; z-index:10; max-width:1160px; margin:0 auto; padding:0 40px; }
.section { padding:120px 0; position:relative; }
.section-center { text-align:center; }
.eyebrow { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--brand-2); margin-bottom:18px; }
.eyebrow::before { content:'— '; opacity:.5; }
.eyebrow.t-ar { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:.1em; }
.section-title { font-size:clamp(2rem,4vw,3.1rem); font-weight:700; letter-spacing:-0.03em; line-height:1.15; color:var(--text); margin-bottom:20px; }
.section-title.light { font-weight:400; }
.section-title strong { font-weight:700; background:linear-gradient(120deg,var(--text),var(--brand-2) 55%,var(--brand)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-body { font-size:1rem; font-weight:400; line-height:1.85; color:var(--text-dim); max-width:580px; }
.section-center .section-body { margin-inline:auto; }
.silk-divider { width:100px; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); margin:0 auto; }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 36px; border-radius:100px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-family:inherit; font-size:13px; font-weight:700; border:none; cursor:pointer; text-decoration:none; transition:transform .5s var(--silk), box-shadow .5s var(--silk); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 40px rgba(74,111,224,.4); }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; padding:15px 36px; border-radius:100px; background:rgba(120,150,210,0.04); color:var(--text); font-family:inherit; font-size:13px; font-weight:500; border:1px solid var(--line); cursor:pointer; text-decoration:none; transition:transform .5s var(--silk), border-color .5s var(--silk), background .5s var(--silk); }
.btn-secondary:hover { transform:translateY(-2px); border-color:var(--brand-soft); background:var(--brand-soft); }
.reveal { opacity:0; transform:translateY(34px); transition:opacity 1s var(--silk), transform 1s var(--silk); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}

/* HERO */
.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:120px 0 70px; position:relative; }
.hero-glow { position:absolute; top:24%; inset-inline-start:50%; transform:translateX(-50%); width:640px; height:380px; z-index:0; pointer-events:none; background:radial-gradient(ellipse at center,rgba(74,111,224,0.2),rgba(61,181,230,0.05) 45%,transparent 70%); filter:blur(22px); }
.hero > *:not(.hero-glow) { position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:10px; padding:9px 20px; border-radius:100px; background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(20px); margin-bottom:30px; opacity:0; transform:translateY(16px); animation:fadeUp 1s var(--silk) .2s forwards; }
.hero-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--brand-2); box-shadow:0 0 10px rgba(61,181,230,.6); animation:pulse 3s ease-in-out infinite; }
.hero-badge span { font-size:12px; font-weight:500; color:var(--text-dim); }
.hero h1 { font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:700; letter-spacing:-0.04em; line-height:1.05; opacity:0; transform:translateY(24px); animation:fadeUp 1.1s var(--silk) .36s forwards; }
.hero h1 em { font-style:normal; background:linear-gradient(120deg,#fff,var(--brand-2),var(--brand)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:clamp(.95rem,1.2vw,1.05rem); font-weight:400; line-height:1.75; color:var(--text-dim); max-width:560px; margin:22px auto 38px; opacity:0; transform:translateY(16px); animation:fadeUp 1.1s var(--silk) .54s forwards; }
.hero-ctas { display:flex; gap:14px; opacity:0; transform:translateY(16px); animation:fadeUp 1.1s var(--silk) .72s forwards; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ECOSYSTEM CONSTELLATION */
.ecosystem { position:relative; width:min(340px,80vw); aspect-ratio:1; margin:44px auto 0; container-type:size; opacity:0; transform:translateY(16px) scale(.96); animation:fadeUp 1.2s var(--silk) .9s forwards; }
.eco-ring-guide { position:absolute; inset:11%; border-radius:50%; border:1px dashed var(--line); }
.eco-ring-guide.two { inset:27%; opacity:.5; }
.eco-core { position:absolute; inset:0; margin:auto; width:74px; height:74px; display:flex; align-items:center; justify-content:center; z-index:3; }
.eco-badge { width:74px; height:74px; border-radius:20px; font-size:30px; animation:ecoPulse 3.6s ease-in-out infinite; }
@keyframes ecoPulse { 0%,100%{box-shadow:0 6px 36px rgba(74,111,224,.4)} 50%{box-shadow:0 6px 58px rgba(61,181,230,.6)} }
.eco-ring { position:absolute; inset:0; animation:ecoSpin 75s linear infinite; }
.eco-node-pos { position:absolute; transform:translate(-50%,-50%); }
.eco-node { display:block; animation:ecoSpinRev 75s linear infinite; position:relative; }
.eco-dot { display:block; width:32px; height:32px; width:clamp(24px,10cqmin,34px); height:clamp(24px,10cqmin,34px); border-radius:50%; background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 72%, #fff), var(--c)); border:2px solid color-mix(in srgb, var(--c) 55%, #0A0F1C); box-shadow:0 0 14px color-mix(in srgb, var(--c) 55%, transparent); transition:transform .4s var(--silk); }
.eco-node-pos:hover { z-index:6; }
.eco-node-pos:hover .eco-dot { transform:scale(1.45); }
.eco-label { position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:10.5px; font-weight:600; color:var(--text); background:rgba(10,15,28,.92); border:1px solid var(--line); padding:3px 9px; border-radius:7px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.eco-node-pos:hover .eco-label { opacity:1; }
.ecosystem:hover .eco-ring, .ecosystem:hover .eco-node { animation-play-state:paused; }
@keyframes ecoSpin { to { transform:rotate(360deg) } }
@keyframes ecoSpinRev { to { transform:rotate(-360deg) } }
.eco-caption { text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--text-mute); margin-top:26px; opacity:0; animation:fadeUp 1.2s var(--silk) 1.1s forwards; }
.eco-caption .t-ar { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:.04em; }

/* TICKER */
.logo-ticker { padding:48px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); overflow:hidden; position:relative; z-index:10; }
.logo-ticker-label { text-align:center; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute); margin-bottom:30px; }
.logo-ticker-label.t-ar { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:.08em; }
.ticker-wrap { position:relative; }
.ticker-wrap::before,.ticker-wrap::after { content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.ticker-wrap::before { inset-inline-start:0; background:linear-gradient(90deg,var(--ink-900),transparent); }
.ticker-wrap::after { inset-inline-end:0; background:linear-gradient(270deg,var(--ink-900),transparent); }
.ticker-track { display:flex; width:max-content; animation:tickerScroll 34s linear infinite; }
.ticker-track:hover { animation-play-state:paused; }
.ticker-item { flex-shrink:0; padding:0 36px; font-size:15px; font-weight:600; color:var(--text-dim); opacity:.42; transition:opacity .5s var(--silk), color .5s var(--silk); }
.ticker-item:hover { opacity:.9; color:var(--text); }
.ticker-dot { width:4px; height:4px; border-radius:50%; background:var(--brand); opacity:.35; margin:0 36px; flex-shrink:0; align-self:center; }
@keyframes tickerScroll { to { transform:translateX(-50%); } }
html[dir="rtl"] .ticker-track { animation-name:tickerScrollRtl; }
@keyframes tickerScrollRtl { to { transform:translateX(50%); } }

/* SERVICES CONTROLS */
.svc-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:48px 0 4px; }
.svc-search { position:relative; flex:1; min-width:220px; max-width:340px; }
.svc-search svg { position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--text-mute); pointer-events:none; }
.svc-search input { width:100%; padding:12px 16px; padding-inline-start:42px; border-radius:100px; background:rgba(120,150,210,.05); border:1px solid var(--line); color:var(--text); font-family:inherit; font-size:13px; outline:none; transition:border-color .4s var(--silk), background .4s var(--silk); }
.svc-search input:focus { border-color:var(--brand-soft); background:var(--brand-soft); }
.svc-search input::placeholder { color:var(--text-mute); }
.svc-filters { display:flex; gap:8px; flex-wrap:wrap; }
.svc-chip { padding:9px 16px; border-radius:100px; background:rgba(120,150,210,.04); border:1px solid var(--line); color:var(--text-dim); font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; transition:color .4s var(--silk), border-color .4s var(--silk), background .4s var(--silk); }
.svc-chip:hover { color:var(--text); border-color:var(--brand-soft); }
.svc-chip.active { background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-color:transparent; }
.svc-empty { display:none; text-align:center; color:var(--text-mute); font-size:14px; padding:48px 0; }
.svc-empty.show { display:block; }

/* SERVICES HUB */
.svc-cat { margin-top:60px; }
.svc-cat:first-of-type { margin-top:0; }
.svc-cat-head { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.svc-cat-title { font-size:.98rem; font-weight:700; color:var(--text); }
.svc-cat-line { flex:1; height:1px; background:var(--line); }
.svc-cat-count { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-mute); }
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:16px; }
.svc-card { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:20px; border-radius:20px; background:linear-gradient(160deg,var(--ink-700),var(--ink-850)); border:1px solid var(--line); text-decoration:none; transition:transform .5s var(--silk), border-color .5s var(--silk), box-shadow .5s var(--silk); }
.svc-card::before { content:''; position:absolute; top:0; inset-inline:0; height:3px; background:var(--c); opacity:.85; }
.svc-card::after { content:''; position:absolute; top:-40%; inset-inline-end:-20%; width:60%; height:80%; background:radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%); opacity:0; transition:opacity .5s var(--silk); pointer-events:none; }
.svc-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow:0 18px 44px -14px color-mix(in srgb, var(--c) 45%, transparent); }
.svc-card:hover::after { opacity:.5; }
.svc-tile { width:100%; height:92px; border-radius:13px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.svc-tile img { max-width:82%; max-height:78%; object-fit:contain; }
.svc-tile.icon { background:color-mix(in srgb, var(--c) 11%, #0E1424); border:1px solid color-mix(in srgb, var(--c) 22%, transparent); }
.svc-tile.icon svg { width:52px; height:52px; color:var(--c); }
.svc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.svc-name { font-size:1.02rem; font-weight:700; color:var(--text); }
.svc-status { font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:100px; color:var(--c); background:color-mix(in srgb, var(--c) 13%, transparent); border:1px solid color-mix(in srgb, var(--c) 28%, transparent); white-space:nowrap; }
.svc-status .t-ar { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:0; }
.svc-desc { font-size:.86rem; font-weight:400; line-height:1.65; color:var(--text-dim); flex:1; }
.svc-link { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--c); margin-top:2px; }
.svc-link .arrow { transition:transform .4s var(--silk); }
html[dir="rtl"] .svc-link .arrow { transform:scaleX(-1); }
.svc-card:hover .svc-link .arrow { transform:translateX(4px); }
html[dir="rtl"] .svc-card:hover .svc-link .arrow { transform:scaleX(-1) translateX(4px); }

/* TESTIMONIALS */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.testimonial-card { background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:34px; backdrop-filter:blur(20px); text-align:start; transition:transform .6s var(--silk), border-color .6s var(--silk); }
.testimonial-card:hover { transform:translateY(-3px); border-color:var(--brand-soft); }
.testimonial-quote { font-size:.95rem; font-weight:400; line-height:1.8; color:var(--text-dim); margin-bottom:26px; }
.testimonial-quote::before { content:'\201C'; display:block; font-size:2.4rem; line-height:.4; color:var(--brand); opacity:.5; margin-bottom:14px; }
html[dir="rtl"] .testimonial-quote::before { content:'\201D'; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--ink-600),var(--ink-800)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; color:var(--brand-2); }
.testimonial-name { font-size:.88rem; font-weight:700; color:var(--text); }
.testimonial-role { font-size:.78rem; font-weight:400; color:var(--text-mute); margin-top:2px; }

/* FAQ */
.faq-list { max-width:760px; margin:48px auto 0; text-align:start; }
.faq-controls { display:flex; justify-content:flex-end; margin-bottom:8px; }
html[dir="rtl"] .faq-controls { justify-content:flex-start; }
.faq-toggle-all { background:none; border:1px solid var(--line); border-radius:100px; padding:8px 18px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); cursor:pointer; transition:color .5s var(--silk), border-color .5s var(--silk); }
.faq-toggle-all.t-ar { font-family:'IBM Plex Sans Arabic',sans-serif; }
.faq-toggle-all:hover { color:var(--text); border-color:var(--brand-soft); }
.faq-item { border-bottom:1px solid var(--line-soft); overflow:hidden; }
.faq-question { width:100%; background:none; border:none; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; font-family:inherit; font-size:1.02rem; font-weight:500; color:var(--text); text-align:start; transition:color .5s var(--silk); }
.faq-question:hover { color:var(--brand-2); }
.faq-icon { width:20px; height:20px; position:relative; flex-shrink:0; }
.faq-icon::before,.faq-icon::after { content:''; position:absolute; background:var(--brand); transition:transform .5s var(--silk), opacity .3s ease; }
.faq-icon::before { width:13px; height:1.5px; top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-icon::after { width:1.5px; height:13px; top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-item.open .faq-icon::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .7s var(--silk); }
.faq-answer-inner { overflow:hidden; font-size:.92rem; font-weight:400; line-height:1.85; color:var(--text-dim); transition:padding .6s var(--silk); padding:0; }
.faq-item.open .faq-answer { grid-template-rows:1fr; }
.faq-item.open .faq-answer-inner { padding:0 0 26px; }

/* FOOTER */
.footer-cta { padding:120px 0 50px; text-align:center; }
.footer-ctas { display:flex; justify-content:center; gap:14px; margin-top:38px; }
.footer-bar { display:flex; justify-content:space-between; align-items:flex-start; padding-top:44px; margin-top:80px; border-top:1px solid var(--line-soft); gap:32px; flex-wrap:wrap; text-align:start; }
.footer-col { display:flex; flex-direction:column; gap:10px; }
.footer-brand { display:inline-flex; align-items:center; gap:10px; margin-bottom:4px; }
.footer-brand .brand-badge { width:32px; height:32px; border-radius:9px; font-size:13px; }
.footer-brand .brand-name { font-size:15px; }
.footer-addr { font-size:12px; line-height:1.7; color:var(--text-mute); max-width:240px; }
.footer-contact a { font-size:12.5px; color:var(--text-dim); text-decoration:none; display:inline-flex; align-items:center; gap:7px; transition:color .4s var(--silk); }
.footer-contact a:hover { color:var(--brand-2); }
.footer-social { display:flex; gap:10px; margin-top:6px; }
.footer-apps { margin-top:20px; }
.footer-apps-label { display:block; font-size:.78rem; font-weight:600; color:var(--text-dim); margin-bottom:11px; }
.footer-social a { width:34px; height:34px; border-radius:9px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:color .4s var(--silk), border-color .4s var(--silk), background .4s var(--silk); }
.footer-social a:hover { color:#fff; border-color:var(--brand-soft); background:var(--brand-soft); }
.footer-links-col { display:flex; flex-direction:column; gap:11px; }
.footer-links-head { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mute); margin-bottom:4px; }
.footer-links-col a { font-size:12.5px; color:var(--text-dim); text-decoration:none; transition:color .4s var(--silk); }
.footer-links-col a:hover { color:var(--brand-2); }
.footer-copy { width:100%; text-align:center; margin-top:36px; padding-top:24px; border-top:1px solid var(--line-soft); font-size:11px; color:var(--text-mute); }
.footer-blurb { font-size:12.5px; line-height:1.7; color:var(--text-mute); max-width:300px; margin:2px 0 4px; }
.footer-col { max-width:330px; }
.footer-links { display:grid; grid-template-columns:repeat(4,auto); gap:30px 46px; }
@media (max-width:900px){ .footer-links { gap:28px 32px; } }
@media (max-width:768px){
  .footer-col { max-width:none; }
  .footer-links { grid-template-columns:repeat(2,1fr); gap:30px 22px; width:100%; }
}
@media (max-width:400px){ .footer-links { grid-template-columns:1fr; } }
@media (max-width:480px){
  .ishow-device { padding:12px; }
  .browser-screen { padding:13px; min-height:200px; }
  .phone-screen { padding:36px 11px 14px; }
  .ishow-name { font-size:1.25rem; }
  .ishow-desc { font-size:.92rem; }
}

/* RESPONSIVE */
@media (max-width:1024px){
  .main { padding:0 32px; }
  .nav-links,.nav-cta { display:none; }
  .nav-toggle { display:block; }
  .side-panel { display:none; }
  .testimonials-grid { grid-template-columns:1fr; max-width:520px; margin:48px auto 0; }
}
@media (max-width:768px){
  .main { padding:0 22px; }
  .top-nav { padding:14px 22px; }
  .top-nav.scrolled { padding:12px 22px; }
  .hero { min-height:100svh; padding:104px 0 56px; }
  .hero-ctas { flex-direction:column; align-items:center; width:100%; }
  .btn-primary,.btn-secondary { width:100%; max-width:300px; }
  .section { padding:84px 0; }
  .footer-bar { flex-direction:column; gap:28px; }
  .footer-ctas { flex-direction:column; align-items:center; }
  .mobile-menu-inner { padding:90px 24px 40px; }
}
@media (max-width:600px){
  .svc-controls { flex-direction:column; align-items:stretch; }
  .svc-search { max-width:none; }
  .svc-filters { justify-content:flex-start; overflow-x:auto; padding-bottom:4px; }
  .svc-chip { white-space:nowrap; }
}
@media (max-width:420px){
  .hero h1 { font-size:2.4rem; }
  .section-title { font-size:1.8rem; }
  .svc-grid { grid-template-columns:1fr; }
}
.btn-primary:focus-visible,.btn-secondary:focus-visible,.nav-links a:focus-visible,.nav-toggle:focus-visible,.lang-toggle:focus-visible,.nav-cta:focus-visible,.mobile-menu-link:focus-visible,.faq-question:focus-visible,.faq-toggle-all:focus-visible,.svc-card:focus-visible,.svc-chip:focus-visible,.svc-search input:focus-visible,.footer-social a:focus-visible,.eco-node-pos:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }
.eco-node-pos:focus-visible .eco-label { opacity:1; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ticker-track,.eco-ring,.eco-node { animation:none; }
  .reveal,.ecosystem,.eco-caption { opacity:1; transform:none; }
  .hero-badge,.hero h1,.hero-sub,.hero-ctas { opacity:1; transform:none; }
}
</style>

<style>
/* ═══ STATS BAND ═══ */
.stats-band { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:50px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); position:relative; z-index:10; }
.stat-cell { text-align:center; position:relative; }
.stat-cell:not(:last-child)::after { content:''; position:absolute; inset-inline-end:-12px; top:50%; transform:translateY(-50%); width:1px; height:48px; background:var(--line); }
.stat-num { font-size:clamp(2.2rem,4.2vw,3.3rem); font-weight:700; letter-spacing:-0.03em; line-height:1; background:linear-gradient(135deg,var(--text),var(--brand-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label { font-size:.82rem; font-weight:600; color:var(--text); margin-top:11px; }
.stat-sub { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin-top:5px; }
.stat-sub.t-ar { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:.04em; }

/* ═══ HOW IT WORKS ═══ */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px; }
.step { position:relative; padding:30px 24px; border-radius:20px; background:linear-gradient(160deg,var(--ink-700),var(--ink-850)); border:1px solid var(--line); transition:transform .5s var(--silk), border-color .5s var(--silk); }
.step:hover { transform:translateY(-4px); border-color:var(--brand-soft); }
.step-num { font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; color:var(--brand-2); letter-spacing:.1em; }
.step-icon { width:50px; height:50px; border-radius:14px; background:var(--brand-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--brand-2); margin:18px 0 18px; }
.step-icon svg { width:24px; height:24px; }
.step-title { font-size:1.02rem; font-weight:700; color:var(--text); margin-bottom:10px; }
.step-desc { font-size:.85rem; line-height:1.65; color:var(--text-dim); }
.step-connector { position:absolute; top:55px; inset-inline-start:calc(100% + 1px); width:18px; height:1px; background:linear-gradient(90deg,var(--brand-soft),transparent); z-index:1; }
html[dir="rtl"] .step-connector { background:linear-gradient(270deg,var(--brand-soft),transparent); }
.step:last-child .step-connector { display:none; }

/* ═══ FEATURE SHOWCASE — device frames ═══ */
.device-row { display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; margin-top:108px; }
.device-row:first-of-type { margin-top:64px; }
.device-row.flip .device-visual { order:2; }
.device-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--c); margin-bottom:16px; }
.device-eyebrow.t-ar { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:.04em; }
.device-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); }
.device-title { font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:700; letter-spacing:-0.02em; line-height:1.2; color:var(--text); margin-bottom:16px; }
.device-desc { font-size:.95rem; line-height:1.8; color:var(--text-dim); margin-bottom:22px; }
.device-feats { display:flex; flex-direction:column; gap:13px; margin-bottom:26px; }
.device-feat { display:flex; align-items:flex-start; gap:11px; font-size:.88rem; color:var(--text-dim); }
.device-feat svg { width:18px; height:18px; color:var(--c); flex-shrink:0; margin-top:1px; }
.device-cta { display:inline-flex; align-items:center; gap:7px; font-size:.88rem; font-weight:600; color:var(--c); text-decoration:none; }
.device-cta .arrow { transition:transform .4s var(--silk); }
html[dir="rtl"] .device-cta .arrow { transform:scaleX(-1); }
.device-cta:hover .arrow { transform:translateX(4px); }
html[dir="rtl"] .device-cta:hover .arrow { transform:scaleX(-1) translateX(4px); }
.device-visual { position:relative; }
.device-glow { position:absolute; inset:-10%; border-radius:24px; background:radial-gradient(circle at 50% 45%, color-mix(in srgb,var(--c) 24%,transparent), transparent 62%); filter:blur(36px); z-index:0; pointer-events:none; }
.device-visual > .browser, .device-visual > .phone { position:relative; z-index:1; }

.browser { width:100%; border-radius:14px; overflow:hidden; background:var(--ink-850); border:1px solid var(--line); box-shadow:0 34px 90px -34px rgba(0,0,0,.7); }
.browser-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:rgba(120,150,210,.05); border-bottom:1px solid var(--line); }
.browser-dot { width:10px; height:10px; border-radius:50%; }
.browser-url { margin-inline-start:8px; flex:1; height:22px; border-radius:6px; background:rgba(120,150,210,.06); display:flex; align-items:center; padding:0 11px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--text-mute); direction:ltr; }
.browser-screen { padding:18px; min-height:250px; background:linear-gradient(165deg,#0C1322,#0A0F1C); position:relative; }
.phone { width:226px; margin:0 auto; border-radius:34px; padding:9px; background:#0B1120; border:1px solid var(--line); box-shadow:0 34px 90px -34px rgba(0,0,0,.7); position:relative; }
.phone-notch { position:absolute; top:18px; left:50%; transform:translateX(-50%); width:46px; height:5px; border-radius:3px; background:rgba(120,150,210,.22); z-index:4; }
.phone-screen { border-radius:25px; overflow:hidden; min-height:432px; background:linear-gradient(175deg,#0E1424,#0A0F1C); padding:40px 15px 18px; position:relative; }

/* analytics mock */
.m-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:18px; }
.m-kpi { padding:11px 12px; border-radius:11px; background:rgba(120,150,210,.05); border:1px solid var(--line); }
.m-kpi-label { display:block; font-size:8px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.07em; }
.m-kpi-num { display:block; font-size:18px; font-weight:700; color:var(--text); margin-top:5px; line-height:1; }
.m-kpi-trend { font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:500; color:#14B8A6; }
.m-chart { width:100%; height:auto; display:block; }
.m-chart .m-area { opacity:0; transition:opacity 1.1s ease; }
.m-chart .m-line { stroke-dasharray:600; stroke-dashoffset:600; }
.m-chart .m-pt { opacity:0; }
[data-mock].in .m-chart .m-area { opacity:1; transition-delay:.7s; }
[data-mock].in .m-chart .m-line { animation:draw 1.7s var(--silk) .2s forwards; }
[data-mock].in .m-chart .m-pt { animation:fadeDot .5s ease 1.5s forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes fadeDot { to { opacity:1; } }

/* unified chat mock */
.m-chat { display:grid; grid-template-columns:94px 1fr; gap:11px; height:214px; }
.m-chat-list { display:flex; flex-direction:column; gap:6px; }
.m-conv { display:flex; align-items:center; gap:7px; padding:7px 6px; border-radius:9px; transition:background .4s; }
.m-conv.active { background:rgba(99,102,241,.12); box-shadow:inset 0 0 0 1px rgba(99,102,241,.32); }
.m-ava { width:21px; height:21px; border-radius:50%; flex-shrink:0; }
.m-ava[data-p="wa"]{ background:#25D366; } .m-ava[data-p="ig"]{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); } .m-ava[data-p="ms"]{ background:#0084FF; }
.m-conv b { font-size:9px; color:var(--text); display:block; line-height:1.2; } .m-conv small { font-size:7.5px; color:var(--text-mute); }
.m-chat-thread { display:flex; flex-direction:column; gap:7px; justify-content:flex-end; padding:8px; border-radius:12px; background:rgba(120,150,210,.03); border:1px solid var(--line); }
.m-bub { max-width:80%; padding:7px 10px; border-radius:13px; font-size:10px; line-height:1.4; opacity:0; transform:translateY(8px); }
.m-bub.inn { align-self:flex-start; background:rgba(120,150,210,.1); color:var(--text); border-end-start-radius:4px; }
.m-bub.out { align-self:flex-end; background:linear-gradient(135deg,#6366F1,#4A6FE0); color:#fff; border-end-end-radius:4px; }
[data-mock].in .m-bub { animation:bubIn .5s var(--silk) forwards; }
[data-mock].in .m-bub:nth-of-type(1){ animation-delay:.3s; } [data-mock].in .m-bub:nth-of-type(2){ animation-delay:.8s; } [data-mock].in .m-bub:nth-of-type(3){ animation-delay:1.3s; }
@keyframes bubIn { to { opacity:1; transform:translateY(0); } }
.m-typing { align-self:flex-start; display:flex; gap:3px; padding:8px 10px; border-radius:13px; background:rgba(120,150,210,.1); opacity:0; }
[data-mock].in .m-typing { animation:bubIn .4s ease 1.8s forwards; }
.m-typing i { width:5px; height:5px; border-radius:50%; background:var(--text-mute); animation:typing 1.2s infinite; }
.m-typing i:nth-child(2){ animation-delay:.2s; } .m-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes typing { 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* OTP mock */
.m-sms-head { text-align:center; font-size:10px; color:var(--text-mute); margin-bottom:18px; font-weight:600; }
.m-sms-from { font-size:8.5px; color:var(--text-mute); margin-bottom:6px; padding-inline-start:4px; }
.m-sms-bub { background:rgba(120,150,210,.1); color:var(--text); padding:11px 13px; border-radius:15px; border-end-start-radius:4px; font-size:11px; line-height:1.5; max-width:90%; opacity:0; transform:translateY(10px); margin-bottom:24px; }
.m-sms-bub b { color:#FF4D6D; font-weight:700; letter-spacing:.06em; }
[data-mock].in .m-sms-bub { animation:bubIn .6s var(--silk) .3s forwards; }
.m-otp-boxes { display:flex; gap:5px; justify-content:center; margin-bottom:24px; }
.m-otp-boxes span { width:29px; height:38px; border-radius:9px; background:rgba(120,150,210,.05); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:var(--text); opacity:0; transform:scale(.8); }
[data-mock].in .m-otp-boxes span { animation:otpPop .4s var(--silk) forwards; }
@keyframes otpPop { to { opacity:1; transform:scale(1); border-color:rgba(225,29,72,.45); } }
.m-otp-ok { display:flex; align-items:center; justify-content:center; gap:7px; color:#22C55E; font-size:12px; font-weight:600; opacity:0; transform:scale(.9); }
.m-otp-ok svg { width:18px; height:18px; }
[data-mock].in .m-otp-ok { animation:otpPop .5s var(--silk) 1.8s forwards; }

/* monitoring mock */
.m-mon-banner { display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:11px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:#22C55E; font-size:11.5px; font-weight:600; margin-bottom:14px; }
.m-pulse { width:9px; height:9px; border-radius:50%; background:#22C55E; animation:pulseDot 2s infinite; }
@keyframes pulseDot { 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5); } 70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }
.m-mon-rows { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.m-mon-row { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-radius:9px; background:rgba(120,150,210,.04); font-size:10.5px; color:var(--text-dim); }
.m-up { display:inline-flex; align-items:center; gap:6px; color:#22C55E; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.m-up::before { content:''; width:6px; height:6px; border-radius:50%; background:#22C55E; }
.m-uptime { padding:12px; border-radius:11px; background:rgba(120,150,210,.04); }
.m-uptime-top { display:flex; justify-content:space-between; align-items:center; }
.m-uptime-label { font-size:8.5px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.08em; }
.m-uptime-pct { font-size:12px; font-weight:700; color:#22C55E; }
.m-uptime-bars { display:flex; gap:2px; align-items:flex-end; height:30px; margin-top:9px; }
.m-uptime-bars i { flex:1; background:#22C55E; border-radius:1px; height:100%; transform:scaleY(.15); transform-origin:bottom; opacity:.85; }
.m-uptime-bars i.warn { background:#EAB308; }
[data-mock].in .m-uptime-bars i { animation:barUp .6s var(--silk) forwards; }
@keyframes barUp { to { transform:scaleY(1); } }

/* ecommerce store mock */
.m-store-head { display:flex; align-items:center; justify-content:space-between; padding:0 2px 12px; border-bottom:1px solid rgba(120,150,210,.1); margin-bottom:15px; }
.m-store-title { font-size:13px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.m-store-cart { position:relative; display:inline-flex; align-items:center; gap:6px; color:#E6A700; }
.m-store-cart > svg { width:18px; height:18px; }
.m-cart-count { font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700; background:#E6A700; color:#0A0F1C; min-width:17px; height:17px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.m-store-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.m-prod { background:rgba(120,150,210,.05); border:1px solid rgba(120,150,210,.09); border-radius:12px; padding:8px; opacity:0; transform:translateY(9px); }
.m-prod-img { aspect-ratio:1/1; border-radius:8px; background:linear-gradient(135deg,var(--g1),var(--g2)); margin-bottom:8px; position:relative; overflow:hidden; }
.m-prod-img::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 25%,rgba(255,255,255,.28),transparent 55%); }
.m-prod-name { font-size:10px; font-weight:600; color:var(--text); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-prod-row { display:flex; align-items:center; justify-content:space-between; }
.m-prod-price { font-size:11px; font-weight:700; color:#E6A700; }
.m-prod-add { font-size:8.5px; font-weight:600; color:var(--text-dim); background:rgba(230,167,0,.12); border:1px solid rgba(230,167,0,.28); border-radius:6px; padding:3px 7px; }
.m-store-toast { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:15px; padding:10px; border-radius:10px; background:rgba(230,167,0,.1); border:1px solid rgba(230,167,0,.28); color:#E6A700; font-size:11px; font-weight:600; opacity:0; transform:scale(.9); }
.m-store-toast svg { width:14px; height:14px; }
[data-mock].in .m-prod { animation:prodIn .55s var(--silk) forwards; }
[data-mock].in .m-prod:nth-of-type(1){ animation-delay:.3s; }
[data-mock].in .m-prod:nth-of-type(2){ animation-delay:.48s; }
[data-mock].in .m-prod:nth-of-type(3){ animation-delay:.66s; }
[data-mock].in .m-store-toast { animation:otpPop .5s var(--silk) 1.6s forwards; }
[data-mock].in .m-cart-count { animation:cartBump .45s var(--silk) 1.75s; }
@keyframes prodIn { to { opacity:1; transform:none; } }
@keyframes cartBump { 0%,100%{ transform:scale(1); } 45%{ transform:scale(1.4); } }

/* ═══ INTERACTIVE SHOWCASE ═══ */
.ishow { display:grid; grid-template-columns:336px 1fr; gap:30px; margin-top:54px; align-items:start; }
.ishow-tabs { display:flex; flex-direction:column; gap:5px; min-width:0; }
.ishow-tab { display:flex; align-items:center; gap:13px; text-align:start; padding:13px 15px; border-radius:14px; background:transparent; border:1px solid transparent; cursor:pointer; transition:background .4s var(--silk), border-color .4s var(--silk); width:100%; font-family:inherit; }
.ishow-tab:hover { background:rgba(120,150,210,.045); }
.ishow-tab.active { background:linear-gradient(110deg, color-mix(in srgb,var(--c) 13%,transparent), transparent 80%); border-color:color-mix(in srgb,var(--c) 28%,var(--line)); }
.ishow-tab-bar { width:3px; height:32px; border-radius:3px; background:var(--c); opacity:.22; transform:scaleY(.5); transition:opacity .4s var(--silk), transform .4s var(--silk); flex-shrink:0; }
.ishow-tab.active .ishow-tab-bar { opacity:1; transform:scaleY(1); }
.ishow-tab-text { flex:1; min-width:0; }
.ishow-tab-name { display:block; font-size:.94rem; font-weight:700; color:var(--text-dim); transition:color .4s; }
.ishow-tab.active .ishow-tab-name { color:var(--text); }
.ishow-tab-line { display:block; font-size:.75rem; color:var(--text-mute); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
.ishow-tab-arr { color:var(--c); opacity:0; transform:translateX(-5px); transition:opacity .4s var(--silk), transform .4s var(--silk); flex-shrink:0; }
.ishow-tab.active .ishow-tab-arr { opacity:1; transform:none; }
html[dir="rtl"] .ishow-tab-arr { transform:scaleX(-1) translateX(-5px); }
html[dir="rtl"] .ishow-tab.active .ishow-tab-arr { transform:scaleX(-1); }
.ishow-stage { position:relative; min-width:0; }
.ishow-panel { display:none; }
.ishow-panel.active { display:block; animation:ishowIn .5s var(--silk); }
@keyframes ishowIn { from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.ishow-device { position:relative; padding:26px; border-radius:20px; background:radial-gradient(130% 120% at 50% 0%, color-mix(in srgb,var(--c) 11%,transparent), transparent 64%), linear-gradient(170deg,var(--ink-700),var(--ink-850)); border:1px solid var(--line); display:flex; justify-content:center; }
.ishow-device > .browser { max-width:560px; }
.ishow-info { margin-top:26px; padding-inline:4px; }
.ishow-cat { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--c); }
.ishow-cat.t-ar { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:.04em; }
.ishow-name { font-size:1.5rem; font-weight:700; letter-spacing:-.02em; color:var(--text); margin:7px 0 11px; }
.ishow-desc { font-size:.98rem; line-height:1.7; color:var(--text-dim); margin-bottom:18px; max-width:580px; }
.ishow-feats { display:flex; flex-wrap:wrap; gap:11px 22px; }
.ishow-feat { display:inline-flex; align-items:center; gap:8px; font-size:.86rem; color:var(--text-dim); }
.ishow-feat svg { width:16px; height:16px; color:var(--c); flex-shrink:0; }
@media (max-width:860px){
  .ishow { grid-template-columns:1fr; gap:22px; }
  .ishow-tabs { flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:8px; scrollbar-width:none; }
  .ishow-tabs::-webkit-scrollbar { display:none; }
  .ishow-tab { flex-direction:row; align-items:center; min-width:max-content; }
  .ishow-tab-line, .ishow-tab-arr { display:none; }
  .ishow-tab-bar { width:20px; height:3px; }
  .ishow-device { padding:18px; }
  .ishow-name { font-size:1.3rem; }
}

/* whatsapp mock */
.m-wa-top { display:flex; align-items:center; gap:10px; padding:9px 4px 13px; border-bottom:1px solid rgba(120,150,210,.1); margin-bottom:13px; }
.m-wa-ava { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#25D366,#128C7E); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; flex-shrink:0; }
.m-wa-id { flex:1; } .m-wa-id b { display:block; font-size:12px; color:var(--text); } .m-wa-id small { font-size:9px; color:#25D366; }
.m-wa-call { width:16px; height:16px; color:var(--text-mute); }
.m-wa-thread { display:flex; flex-direction:column; gap:8px; }
.m-wa-day { align-self:center; font-size:8px; color:var(--text-mute); background:rgba(120,150,210,.06); padding:3px 9px; border-radius:6px; letter-spacing:.05em; }
.m-wa-m { max-width:82%; font-size:11px; line-height:1.45; color:var(--text); padding:7px 26px 7px 10px; border-radius:10px; position:relative; }
.m-wa-m.in { align-self:flex-start; background:rgba(120,150,210,.07); border-bottom-left-radius:3px; }
.m-wa-m.out { align-self:flex-end; background:rgba(37,211,102,.15); border-bottom-right-radius:3px; }
.m-wa-t { position:absolute; bottom:5px; inset-inline-end:8px; font-size:7.5px; color:var(--text-mute); display:inline-flex; align-items:center; gap:2px; }
.m-wa-t svg { width:12px; height:7px; color:#3DB5E6; }
.m-wa-quick { display:flex; gap:7px; margin-top:4px; align-self:center; flex-wrap:wrap; justify-content:center; }
.m-wa-quick span { font-size:9.5px; color:#25D366; border:1px solid rgba(37,211,102,.35); border-radius:14px; padding:5px 11px; }

/* calendar mock */
.m-cal-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.m-cal-title { font-size:13px; font-weight:700; color:var(--text); }
.m-cal-nav { display:flex; gap:6px; } .m-cal-nav span { width:22px; height:22px; border-radius:6px; background:rgba(120,150,210,.06); color:var(--text-dim); display:flex; align-items:center; justify-content:center; font-size:13px; }
.m-cal-week { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:6px; }
.m-cal-week span { text-align:center; font-size:8px; color:var(--text-mute); font-weight:600; }
.m-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.m-cal-cell { aspect-ratio:1/1; border-radius:7px; background:rgba(120,150,210,.04); padding:4px 0 0 5px; position:relative; }
.m-cal-cell.empty { background:transparent; }
.m-cal-cell.has { background:rgba(61,181,230,.08); border:1px solid rgba(61,181,230,.2); }
.m-cal-dn { font-size:8px; color:var(--text-mute); }
.m-cal-chips { display:flex; gap:2px; position:absolute; bottom:5px; inset-inline-start:5px; }
.m-cal-chips i { width:9px; height:3px; border-radius:2px; background:#3DB5E6; }
.m-cal-foot { display:flex; align-items:center; gap:7px; margin-top:13px; font-size:10px; color:var(--text-dim); }
.m-cal-foot-dot { width:7px; height:7px; border-radius:50%; background:#3DB5E6; }

/* email mock */
.m-mail-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.m-mail-subj-label { display:block; font-size:8px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }
.m-mail-subj b { font-size:12.5px; color:var(--text); font-weight:600; }
.m-mail-badge { font-size:8.5px; font-weight:600; color:#FF7A59; background:rgba(255,122,89,.12); border:1px solid rgba(255,122,89,.3); border-radius:20px; padding:3px 10px; white-space:nowrap; }
.m-mail-prev { border:1px solid var(--line); border-radius:11px; padding:14px; margin-bottom:14px; background:rgba(120,150,210,.02); }
.m-mail-prev-bar { height:30px; border-radius:7px; background:linear-gradient(120deg,#FF7A59,#FFB199); margin-bottom:11px; }
.m-mail-prev-lines { display:flex; flex-direction:column; gap:6px; margin-bottom:13px; }
.m-mail-prev-lines i { height:6px; border-radius:3px; background:rgba(120,150,210,.1); }
.m-mail-prev-btn { display:inline-block; font-size:10px; font-weight:600; color:#fff; background:#FF7A59; border-radius:7px; padding:6px 14px; }
.m-mail-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.m-mail-stat { padding:11px; border-radius:10px; background:rgba(120,150,210,.04); text-align:center; }
.m-mail-stat span { display:block; font-size:8.5px; color:var(--text-mute); margin-bottom:4px; }
.m-mail-stat b { font-size:15px; color:var(--text); }

/* qr mock */
.m-qr-main { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.m-qr-box { display:grid; grid-template-columns:repeat(13,1fr); gap:1.5px; width:106px; height:106px; padding:8px; background:#fff; border-radius:10px; flex-shrink:0; }
.m-qr-box i { border-radius:.5px; background:transparent; } .m-qr-box i.on { background:#0A0F1C; }
.m-qr-side { flex:1; min-width:0; }
.m-qr-link { font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:700; color:#EAB308; }
.m-qr-dest { font-size:9.5px; color:var(--text-mute); margin:5px 0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-qr-num b { font-size:22px; color:var(--text); font-weight:700; } .m-qr-num span { font-size:9px; color:var(--text-mute); margin-inline-start:6px; }
.m-qr-chart { padding:12px; border-radius:11px; background:rgba(120,150,210,.04); }
.m-qr-chart-label { font-size:8.5px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.06em; margin-bottom:9px; }
.m-qr-bars { display:flex; gap:4px; align-items:flex-end; height:38px; }
.m-qr-bars i { flex:1; background:#EAB308; opacity:.85; border-radius:2px 2px 0 0; }

/* servers mock */
.m-srv-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:14px; }
.m-srv-stat { padding:11px; border-radius:10px; background:rgba(120,150,210,.04); }
.m-srv-stat-top { display:flex; justify-content:space-between; font-size:9.5px; color:var(--text-dim); margin-bottom:7px; } .m-srv-stat-top b { color:var(--text); }
.m-srv-bar { height:5px; border-radius:3px; background:rgba(120,150,210,.1); overflow:hidden; }
.m-srv-bar i { display:block; height:100%; border-radius:3px; background:#0E9F8E; }
.m-srv-term { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(4,8,16,.5); }
.m-srv-term-bar { display:flex; align-items:center; gap:5px; padding:8px 11px; border-bottom:1px solid var(--line-soft); }
.m-srv-term-bar i { width:7px; height:7px; border-radius:50%; } .m-srv-term-bar i:nth-child(1){background:#E0524F;} .m-srv-term-bar i:nth-child(2){background:#E5A33D;} .m-srv-term-bar i:nth-child(3){background:#3DBE6E;}
.m-srv-term-bar span { margin-inline-start:6px; font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--text-mute); }
.m-srv-term code { display:flex; flex-direction:column; gap:4px; padding:11px 13px; font-family:'IBM Plex Mono',monospace; font-size:10px; }
.c-dim { color:var(--text-dim); } .c-ok { color:#0E9F8E; }
.m-srv-cursor { display:inline-block; width:5px; height:11px; background:#0E9F8E; margin-inline-start:3px; vertical-align:middle; animation:blink 1.1s step-end infinite; }

/* domains mock */
.m-dom-bar { display:flex; align-items:center; gap:9px; padding:12px 14px; border-radius:11px; background:rgba(120,150,210,.05); border:1px solid color-mix(in srgb,#8B5CF6 30%,var(--line)); margin-bottom:14px; }
.m-dom-bar svg { width:16px; height:16px; color:var(--text-mute); flex-shrink:0; }
.m-dom-q { font-size:13px; color:var(--text); font-family:'IBM Plex Mono',monospace; }
.m-dom-cursor { width:2px; height:15px; background:#8B5CF6; animation:blink 1.1s step-end infinite; }
.m-dom-list { display:flex; flex-direction:column; gap:7px; }
.m-dom-item { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-radius:10px; background:rgba(120,150,210,.04); }
.m-dom-d { font-size:12px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; } .m-dom-d b { color:var(--text); }
.m-dom-tag { font-size:9px; font-weight:600; color:#22C55E; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); border-radius:20px; padding:3px 10px; }
.m-dom-tag.taken { color:var(--text-mute); background:rgba(120,150,210,.06); border-color:var(--line); }
.m-dom-item.taken .m-dom-d, .m-dom-item.taken .m-dom-d b { color:var(--text-mute); text-decoration:line-through; }

/* ═══ BENTO ═══ */
.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:152px; grid-auto-flow:dense; gap:14px; margin-top:56px; }
.bento-cell { position:relative; overflow:hidden; border-radius:20px; background:linear-gradient(160deg,var(--ink-700),var(--ink-850)); border:1px solid var(--line); padding:20px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; transition:transform .5s var(--silk), border-color .5s var(--silk); }
.bento-cell:hover { transform:translateY(-3px); border-color:var(--brand-soft); }
.bento-lg { grid-column:span 2; grid-row:span 2; }
.bento-w { grid-column:span 2; }
.bento-eyebrow { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); }
.bento-eyebrow.t-ar { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:.04em; }
.bento-h { font-size:1.02rem; font-weight:700; color:var(--text); line-height:1.3; }
.bento-lg .bento-h { font-size:1.6rem; letter-spacing:-.02em; }
.bento-p { font-size:.8rem; color:var(--text-dim); line-height:1.6; }
.bento-num { font-size:2.7rem; font-weight:700; letter-spacing:-.03em; line-height:1; background:linear-gradient(135deg,var(--text),var(--brand-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.bento-foot { font-size:.78rem; font-weight:600; color:var(--text-dim); }
.bento-dots { display:flex; gap:6px; flex-wrap:wrap; }
.bento-dots i { width:12px; height:12px; border-radius:50%; }
.bento-constellation { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.bento-constellation i { width:14px; height:14px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.bento-badge { width:48px; height:48px; border-radius:14px; font-size:19px; }
.bento-spark { width:100%; height:42px; display:block; }
.bento-spark .m-line { stroke-dasharray:400; stroke-dashoffset:400; }
[data-mock].in .bento-spark .m-line { animation:draw 1.6s var(--silk) .3s forwards; }
.bento-chat { display:flex; flex-direction:column; gap:5px; }
.bento-chat span { font-size:9px; padding:5px 9px; border-radius:10px; max-width:85%; line-height:1.3; }
.bento-chat .ci { align-self:flex-start; background:rgba(120,150,210,.1); color:var(--text); border-end-start-radius:3px; }
.bento-chat .co { align-self:flex-end; background:linear-gradient(135deg,#6366F1,#4A6FE0); color:#fff; border-end-end-radius:3px; }
.bento-qr { width:54px; height:54px; }
.bento-bars { display:flex; gap:2px; align-items:flex-end; height:30px; }
.bento-bars i { flex:1; background:#22C55E; border-radius:1px; opacity:.85; transform:scaleY(.2); transform-origin:bottom; }
[data-mock].in .bento-bars i { animation:barUp .6s var(--silk) forwards; }
.bento-cta { background:linear-gradient(135deg,var(--brand),var(--brand-2)); border-color:transparent; }
.bento-cta .bento-h, .bento-cta .bento-eyebrow { color:#fff; }
.bento-cta .bento-eyebrow { opacity:.7; }
.bento-cta-arrow { display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:.86rem; font-weight:700; }
html[dir="rtl"] .bento-cta-arrow svg { transform:scaleX(-1); }

/* ═══ RESPONSIVE for new sections ═══ */
@media (max-width:1024px){
  .steps { grid-template-columns:repeat(2,1fr); }
  .step-connector { display:none; }
  .device-row { grid-template-columns:1fr; gap:36px; }
  .device-row.flip .device-visual { order:0; }
  .device-text { text-align:center; }
  .device-eyebrow { justify-content:center; }
  .device-feats { display:inline-flex; text-align:start; }
  .bento { grid-template-columns:repeat(2,1fr); }
  .bento-lg { grid-column:span 2; grid-row:span 2; }
  .bento-w { grid-column:span 2; }
}
@media (max-width:640px){
  .stats-band { grid-template-columns:repeat(2,1fr); gap:32px 24px; }
  .stat-cell:nth-child(2)::after { display:none; }
  .steps { grid-template-columns:1fr; }
  .bento { grid-template-columns:1fr; grid-auto-rows:auto; }
  .bento-cell { min-height:128px; }
  .bento-lg,.bento-w { grid-column:auto; grid-row:auto; }
  .bento-lg { min-height:180px; }
}
@media (prefers-reduced-motion: reduce){
  .m-chart .m-area,.m-chart .m-pt,.m-bub,.m-typing,.m-sms-bub,.m-otp-boxes span,.m-otp-ok { opacity:1 !important; transform:none !important; }
  .m-chart .m-line,.bento-spark .m-line { stroke-dashoffset:0 !important; }
  .m-uptime-bars i,.bento-bars i { transform:scaleY(1) !important; }
}

/* ═══ SERVICE DETAIL MODAL ═══ */
body.modal-open { overflow:hidden; }
.svc-modal { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px; }
.svc-modal[hidden] { display:none; }
.svc-modal-overlay { position:absolute; inset:0; background:rgba(5,8,16,.74); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); animation:ovIn .3s ease; }
@keyframes ovIn { from{opacity:0;} to{opacity:1;} }
.svc-modal-card { position:relative; z-index:1; width:100%; max-width:780px; max-height:88vh; overflow-y:auto; background:linear-gradient(165deg,var(--ink-800),var(--ink-900)); border:1px solid var(--line); border-radius:24px; box-shadow:0 44px 130px -30px rgba(0,0,0,.85); animation:modalIn .42s var(--silk); }
@keyframes modalIn { from{opacity:0;transform:translateY(22px) scale(.985);} to{opacity:1;transform:none;} }
.svc-modal-close { position:absolute; top:18px; inset-inline-end:18px; z-index:4; width:38px; height:38px; border-radius:11px; background:rgba(120,150,210,.08); border:1px solid var(--line); color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s, color .3s; }
.svc-modal-close:hover { background:rgba(120,150,210,.16); color:var(--text); }
.svc-modal-body { padding:42px; }
.svc-detail { display:none; }
.svc-detail.active { display:block; animation:ovIn .35s ease; }
.svc-detail-head { display:flex; align-items:center; gap:16px; margin-bottom:24px; padding-inline-end:46px; }
.svc-detail-tile .svc-tile { width:56px; height:56px; border-radius:15px; }
.svc-detail-tile .svc-tile img { max-width:62%; max-height:62%; }
.svc-detail-cat { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--c); }
.svc-detail-cat.t-ar { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:.04em; }
.svc-detail-name { font-size:1.55rem; font-weight:700; letter-spacing:-.02em; color:var(--text); margin-top:6px; }
.svc-detail-soon { margin-inline-start:auto; align-self:flex-start; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent); border:1px solid color-mix(in srgb,var(--c) 30%,transparent); padding:5px 10px; border-radius:30px; white-space:nowrap; }
.svc-detail-desc { font-size:1rem; line-height:1.8; color:var(--text-dim); margin-bottom:30px; }
.svc-detail-grid { display:grid; grid-template-columns:1.08fr 1fr; gap:34px; margin-bottom:32px; }
.svc-detail-h { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text); margin-bottom:18px; }
.svc-steps { display:flex; flex-direction:column; gap:15px; }
.svc-step { display:flex; gap:13px; align-items:flex-start; }
.svc-step-num { flex-shrink:0; width:27px; height:27px; border-radius:8px; background:color-mix(in srgb,var(--c) 16%,transparent); color:var(--c); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; }
.svc-step p { font-size:.88rem; line-height:1.55; color:var(--text-dim); padding-top:4px; }
.svc-feats { list-style:none; display:flex; flex-direction:column; gap:13px; }
.svc-feats li { display:flex; gap:11px; align-items:flex-start; font-size:.88rem; color:var(--text-dim); }
.svc-feats li svg { width:17px; height:17px; color:var(--c); flex-shrink:0; margin-top:2px; }
.svc-detail-apps { border-top:1px solid var(--line); padding-top:26px; }
.svc-apps-label { display:block; font-size:.84rem; font-weight:600; color:var(--text); margin-bottom:15px; }
.app-badges { display:flex; gap:12px; flex-wrap:wrap; }
.app-badge { display:inline-flex; align-items:center; gap:10px; padding:9px 17px; border-radius:12px; background:#000; border:1px solid rgba(255,255,255,.2); text-decoration:none; transition:border-color .3s, transform .3s; }
.app-badge:hover { border-color:rgba(255,255,255,.42); transform:translateY(-2px); }
.app-badge-ic { display:flex; }
.app-badge-ic svg { width:22px; height:22px; display:block; }
.app-badge-txt { display:flex; flex-direction:column; line-height:1.12; text-align:start; }
.app-badge-txt small { font-size:8.5px; color:#c2c2c2; text-transform:uppercase; letter-spacing:.03em; }
.app-badge-txt b { font-size:14.5px; color:#fff; font-weight:600; letter-spacing:.01em; }
html[dir="rtl"] .app-badge-txt { text-align:start; }
@media (max-width:640px){
  .svc-modal { padding:0; }
  .svc-modal-card { max-width:100%; max-height:100vh; height:100vh; border-radius:0; }
  .svc-modal-body { padding:30px 22px; }
  .svc-detail-grid { grid-template-columns:1fr; gap:28px; }
  .svc-detail-name { font-size:1.32rem; }
  .svc-detail-head { padding-inline-end:42px; }
}