/* ===================== RESET & TOKENS ===================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg-deep:#0A0B1E;
  --bg-panel:#12132C;
  --bg-panel-2:#171840;
  --violet:#7C3AED;
  --violet-2:#A855F7;
  --cyan:#22D3EE;
  --magenta:#E947C1;
  --ink:#F4F3FB;
  --ink-dim:#B7B4D6;
  --ink-faint:#6E6B95;
  --line:rgba(255,255,255,0.09);
  --grad-brand: linear-gradient(120deg, var(--violet) 0%, var(--violet-2) 45%, var(--magenta) 100%);
  --grad-cool: linear-gradient(120deg, var(--cyan) 0%, var(--violet-2) 100%);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --maxw: 1240px;
  --shadow-glow: 0 20px 60px -20px rgba(124,58,237,0.45);
}
html{scroll-behavior:smooth;}
body{
  font-family:'Tajawal',sans-serif;
  background:var(--bg-deep);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand,.stat-num{font-family:'Cairo',sans-serif;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:24px;}
section{position:relative;}
::selection{background:var(--violet-2);color:#fff;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

/* ===================== ICON SYSTEM (inline SVG) ===================== */
.ico{
  width:1em;height:1em;display:inline-block;vertical-align:-0.14em;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.core-icon{stroke:url(#gradBrand);}
.process-step .ico{stroke:url(#gradCool);}

/* Ambient background glows */
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.35;pointer-events:none;z-index:0;}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:100px;font-weight:700;font-size:15px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn .ico{font-size:13px;}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:0 10px 30px -8px rgba(124,58,237,.6);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -8px rgba(124,58,237,.75);}
.btn-outline{border:1.5px solid var(--line);color:var(--ink);background:rgba(255,255,255,0.03);}
.btn-outline:hover{border-color:var(--violet-2);background:rgba(124,58,237,0.12);}
.btn-sm{padding:10px 20px;font-size:13px;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--violet-2);
  background:rgba(124,58,237,0.12);border:1px solid rgba(124,58,237,0.3);
  padding:7px 16px;border-radius:100px;margin-bottom:18px;
}
.eyebrow .ico{font-size:11px;color:var(--cyan);}

/* ===================== HEADER ===================== */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,11,30,0.75);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease, padding .3s ease;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding-block:16px;gap:24px;}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;letter-spacing:.5px;flex-shrink:0;}
.brand .mark{
  width:38px;height:38px;border-radius:11px;background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;color:#fff;
  box-shadow:0 8px 20px -6px rgba(124,58,237,.7);
}
.brand small{display:block;font-size:10px;font-weight:500;color:var(--ink-faint);font-family:'Tajawal',sans-serif;margin-top:-2px;}
nav.main-nav{display:flex;align-items:center;gap:32px;}
nav.main-nav a{font-size:14.5px;font-weight:500;color:var(--ink-dim);position:relative;padding-block:4px;transition:color .2s;}
nav.main-nav a::after{content:'';position:absolute;bottom:-4px;inset-inline-start:0;width:0;height:2px;background:var(--grad-cool);transition:width .25s ease;}
nav.main-nav a:hover{color:var(--ink);}
nav.main-nav a:hover::after{width:100%;}
.nav-actions{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.lang-switch{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-dim);border:1px solid var(--line);border-radius:100px;padding:7px 14px;}
.lang-switch .ico{font-size:12px;}
.burger{display:none;font-size:22px;background:none;border:none;color:var(--ink);}

/* ===================== HERO ===================== */
.hero{padding:70px 0 60px;overflow:hidden;}
.hero .glow.g1{width:520px;height:520px;background:var(--violet);top:-220px;inset-inline-start:-160px;}
.hero .glow.g2{width:420px;height:420px;background:var(--cyan);bottom:-160px;inset-inline-end:-120px;opacity:.22;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1;}
.hero h1{font-size:clamp(34px,4.4vw,54px);font-weight:800;line-height:1.28;margin-bottom:22px;}
.hero h1 .grad{background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.lead{font-size:17px;color:var(--ink-dim);max-width:520px;margin-bottom:32px;}
.hero-feats{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px;}
.hero-feat{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.04);border:1px solid var(--line);padding:10px 16px;border-radius:100px;font-size:13.5px;color:var(--ink-dim);}
.hero-feat .ico{color:var(--cyan);font-size:14px;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}

/* hero visual: orbiting platform badges around a device stack */
.hero-visual{position:relative;height:440px;display:flex;align-items:center;justify-content:center;}
.device-stack{
  position:relative;width:300px;height:300px;border-radius:30px;
  background:linear-gradient(155deg,#1b1c44,#0e0f28);
  border:1px solid var(--line);box-shadow:var(--shadow-glow);
  display:flex;align-items:center;justify-content:center;
}
.device-stack::before{
  content:'';position:absolute;inset:14px;border-radius:20px;
  background:radial-gradient(circle at 30% 20%, rgba(124,58,237,.5), transparent 60%),
             radial-gradient(circle at 80% 80%, rgba(34,211,238,.35), transparent 55%);
}
.device-stack .core-icon{position:relative;font-size:64px;}
.orbit{position:absolute;top:50%;left:50%;border:1px dashed rgba(255,255,255,0.14);border-radius:50%;transform:translate(-50%,-50%);}
.orbit.o1{width:330px;height:330px;animation:spin 26s linear infinite;}
.orbit.o2{width:430px;height:430px;animation:spin 38s linear infinite reverse;}
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
.badge{
  position:absolute;width:56px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.55);
  animation:counterspin 26s linear infinite;
}
.orbit.o2 .badge{animation:counterspin2 38s linear infinite;}
@keyframes counterspin{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
@keyframes counterspin2{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.b-fb{top:-28px;right:50%;transform:translateX(50%);background:#1877F2;}
.b-ig{top:50%;right:-28px;transform:translateY(-50%);background:linear-gradient(45deg,#feda75,#d62976,#4f5bd5);}
.b-tt{bottom:-28px;right:50%;transform:translateX(50%);background:#000;}
.b-gg{top:50%;left:-28px;transform:translateY(-50%);background:linear-gradient(45deg,#4285F4,#EA4335,#FBBC05,#34A853);}
.orbit.o2 .b-shop{top:-24px;left:12%;background:#95BF47;}
.orbit.o2 .b-ai{bottom:-24px;right:12%;background:var(--grad-cool);}

/* ===================== TRUST / STATS BAR ===================== */
.trustbar{background:var(--bg-panel);border-block:1px solid var(--line);padding-block:34px;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:34px;}
.stat{text-align:center;border-inline-end:1px solid var(--line);}
.stat:last-child{border-inline-end:none;}
.stat-num{font-size:clamp(26px,3vw,34px);font-weight:800;background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat-label{font-size:13.5px;color:var(--ink-dim);margin-top:4px;}
.partners{display:flex;align-items:center;justify-content:center;gap:46px;flex-wrap:wrap;opacity:.75;}
.partners span{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--ink-dim);}
.partners .ico{font-size:19px;}

/* ===================== SECTION HEADS ===================== */
.sec-head{max-width:640px;margin-bottom:48px;}
.sec-head.center{margin-inline:auto;text-align:center;}
.sec-head h2{font-size:clamp(26px,3.2vw,38px);font-weight:800;line-height:1.35;}
.sec-head p{color:var(--ink-dim);font-size:15.5px;margin-top:14px;}
.section-pad{padding-block:90px;}

/* ===================== SERVICES ===================== */
.services-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:stretch;}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.svc-card{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.svc-card:hover{border-color:rgba(124,58,237,.45);transform:translateY(-4px);background:var(--bg-panel-2);}
.svc-card .icon-box{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;font-size:19px;color:#fff;
}
.svc-card:nth-child(1) .icon-box{background:linear-gradient(135deg,#F43F5E,#F59E0B);}
.svc-card:nth-child(2) .icon-box{background:linear-gradient(135deg,#3B82F6,#22D3EE);}
.svc-card:nth-child(3) .icon-box{background:linear-gradient(135deg,#A855F7,#E947C1);}
.svc-card:nth-child(4) .icon-box{background:linear-gradient(135deg,#22C55E,#22D3EE);}
.svc-card h3{font-size:17px;font-weight:700;margin-bottom:12px;}
.svc-card ul li{font-size:13.5px;color:var(--ink-dim);padding-block:5px;display:flex;align-items:center;gap:8px;}
.svc-card ul li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cyan);flex-shrink:0;}

.services-highlight{
  background:linear-gradient(160deg,var(--bg-panel-2),var(--bg-panel));
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.services-highlight::after{content:'';position:absolute;width:220px;height:220px;background:var(--violet);filter:blur(90px);opacity:.35;bottom:-80px;inset-inline-start:-60px;}
.services-highlight h3{font-size:24px;font-weight:800;margin-bottom:14px;position:relative;}
.services-highlight p{color:var(--ink-dim);font-size:14.5px;margin-bottom:24px;position:relative;}

/* ===================== PARTNER SECTION (Why Us) ===================== */
.why-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;}
.why-visual{
  aspect-ratio:4/3.1;border-radius:var(--radius-lg);
  background:linear-gradient(155deg,#171840,#0c0d24);
  border:1px solid var(--line);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.why-visual .grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(124,58,237,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.12) 1px,transparent 1px);background-size:34px 34px;}
.why-visual .center-badge{position:relative;width:130px;height:130px;border-radius:50%;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;font-size:48px;color:#fff;box-shadow:0 0 60px rgba(124,58,237,.6);}
.why-feats{display:flex;flex-direction:column;gap:22px;margin-top:28px;}
.why-feat{display:flex;gap:16px;}
.why-feat .num{
  width:44px;height:44px;flex-shrink:0;border-radius:12px;background:rgba(124,58,237,.14);border:1px solid rgba(124,58,237,.35);
  display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--cyan);
}
.why-feat h4{font-size:15.5px;font-weight:700;margin-bottom:4px;}
.why-feat p{font-size:13.5px;color:var(--ink-dim);}

/* ===================== PROCESS ===================== */
.process-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.process-step{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:22px 16px;text-align:center;position:relative;
}
.process-step .step-no{font-family:'Cairo',sans-serif;font-size:12px;font-weight:800;color:var(--ink-faint);margin-bottom:14px;}
.process-step .ico{font-size:22px;margin-bottom:12px;display:block;margin-inline:auto;}
.process-step h4{font-size:14.5px;font-weight:700;margin-bottom:6px;}
.process-step p{font-size:12px;color:var(--ink-dim);}

/* ===================== CASE STUDIES ===================== */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.case-card{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-panel);transition:transform .3s ease, box-shadow .3s ease;
}
.case-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -14px rgba(0,0,0,.55);}
.case-cover{height:150px;display:flex;align-items:center;justify-content:center;font-size:34px;color:rgba(255,255,255,.85);position:relative;}
.case-cover span.tag{position:absolute;top:12px;inset-inline-end:12px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);font-size:11.5px;padding:5px 12px;border-radius:100px;font-weight:600;}
.cc1{background:linear-gradient(135deg,#F97316,#EF4444);}
.cc2{background:linear-gradient(135deg,#0EA5E9,#6366F1);}
.cc3{background:linear-gradient(135deg,#8B5CF6,#EC4899);}
.case-body{padding:22px;}
.case-body h3{font-size:16.5px;font-weight:700;margin-bottom:12px;}
.case-metrics{display:flex;gap:18px;margin-bottom:14px;}
.case-metrics div b{display:block;font-family:'Cairo',sans-serif;font-size:18px;color:var(--cyan);}
.case-metrics div span{font-size:11.5px;color:var(--ink-faint);}
.case-body p{font-size:13px;color:var(--ink-dim);margin-bottom:16px;}
.case-link{font-size:13px;font-weight:700;color:var(--violet-2);display:inline-flex;align-items:center;gap:6px;}

/* ===================== INDUSTRIES ===================== */
.industry-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;}
.industry-card{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:20px 10px;text-align:center;transition:.25s;
}
.industry-card:hover{background:var(--bg-panel-2);border-color:rgba(124,58,237,.4);}
.industry-card .ico{font-size:20px;color:var(--violet-2);margin-bottom:10px;display:block;margin-inline:auto;}
.industry-card span{font-size:12.5px;color:var(--ink-dim);}

/* ===================== DASHBOARD SHOWCASE ===================== */
.dash-wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.dash-panel{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--shadow-glow);
}
.dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.dash-head h4{font-size:14px;font-weight:700;}
.dash-head span{font-size:11px;color:var(--ink-faint);}
.dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
.dash-kpi{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:12px;}
.dash-kpi b{display:block;font-family:'Cairo',sans-serif;font-size:16px;}
.dash-kpi span{font-size:10.5px;color:var(--ink-faint);}
.dash-kpi .up{color:#4ADE80;font-size:10.5px;}
.chart-area{height:140px;position:relative;}
.chart-area svg{width:100%;height:100%;}

/* ===================== PRICING ===================== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}
.price-card{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 28px;position:relative;transition:.3s;
}
.price-card.feat{
  background:linear-gradient(160deg,var(--bg-panel-2),#1b0f3a);
  border:1px solid rgba(168,85,247,.5);transform:scale(1.04);box-shadow:var(--shadow-glow);
}
.price-badge{position:absolute;top:-13px;inset-inline-end:28px;background:var(--grad-brand);font-size:11.5px;font-weight:700;padding:6px 16px;border-radius:100px;}
.price-card h3{font-size:16px;font-weight:700;color:var(--ink-dim);margin-bottom:6px;}
.price-amt{font-family:'Cairo',sans-serif;font-size:38px;font-weight:800;margin-bottom:4px;}
.price-amt span{font-size:14px;font-weight:500;color:var(--ink-faint);}
.price-card p.desc{font-size:12.5px;color:var(--ink-faint);margin-bottom:22px;}
.price-card ul{margin-bottom:26px;display:flex;flex-direction:column;gap:11px;}
.price-card ul li{font-size:13.5px;color:var(--ink-dim);display:flex;align-items:center;gap:10px;}
.price-card ul li .ico{color:var(--cyan);font-size:14px;}
.price-card .btn{width:100%;justify-content:center;}

/* ===================== FAQ + AI ===================== */
.faq-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;}
.ai-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px;}
.ai-tag{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px 12px;text-align:center;}
.ai-tag .ico{font-size:20px;color:var(--cyan);margin-bottom:8px;display:block;margin-inline:auto;}
.ai-tag span{font-size:12px;color:var(--ink-dim);}
.faq-item{border-bottom:1px solid var(--line);padding-block:18px;}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;font-size:15px;gap:16px;}
.faq-q .ico{transition:transform .3s ease;color:var(--violet-2);flex-shrink:0;}
.faq-item.open .faq-q .ico{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{padding-top:12px;color:var(--ink-dim);font-size:13.5px;max-width:560px;}

/* ===================== CTA BANNER ===================== */
.cta-banner{
  background:var(--grad-brand);border-radius:28px;padding:56px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.cta-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.25), transparent 55%);}
.cta-banner h2{font-size:clamp(22px,3vw,30px);font-weight:800;max-width:480px;position:relative;color:#fff;}
.cta-banner p{color:rgba(255,255,255,.85);margin-top:10px;font-size:14.5px;position:relative;}
.cta-banner .btn-primary{background:#fff;color:var(--violet);box-shadow:none;position:relative;}
.cta-banner .btn-primary:hover{transform:translateY(-2px) scale(1.02);}

/* ===================== FOOTER ===================== */
footer{background:var(--bg-panel);border-top:1px solid var(--line);padding-top:70px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px;}
.footer-brand p{font-size:13.5px;color:var(--ink-dim);margin:16px 0 20px;max-width:280px;}
.social-row{display:flex;gap:10px;}
.social-row a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.25s;}
.social-row a:hover{background:var(--grad-brand);border-color:transparent;}
.social-row .ico{width:16px;height:16px;}
.footer-col h5{font-size:14.5px;font-weight:700;margin-bottom:18px;}
.footer-col ul li{margin-bottom:11px;}
.footer-col ul li a{font-size:13.5px;color:var(--ink-dim);transition:color .2s;}
.footer-col ul li a:hover{color:var(--cyan);}
.footer-contact li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-dim);margin-bottom:14px;}
.footer-contact .ico{color:var(--violet-2);width:16px;height:16px;}
.footer-bottom{border-top:1px solid var(--line);padding-block:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--ink-faint);}
.footer-bottom a{color:var(--ink-faint);}
.footer-bottom a:hover{color:var(--cyan);}

/* ===================== BACK TO TOP ===================== */
#backTop{
  position:fixed;
  bottom:calc(26px + env(safe-area-inset-bottom, 0px));
  inset-inline-start:calc(26px + env(safe-area-inset-left, 0px));
  width:46px;height:46px;border-radius:50%;
  background:var(--grad-brand);display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 10px 26px -6px rgba(124,58,237,.7);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:.3s;z-index:90;font-size:16px;-webkit-tap-highlight-color:transparent;
}
#backTop.show{opacity:1;visibility:visible;transform:translateY(0);}

/* ===================== REVEAL ANIMATION ===================== */
.reveal{opacity:1;transform:translateY(0);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ===================== CROSS-DEVICE BASICS ===================== */
/* iOS/Android notch & home-indicator safe areas */
header{padding-top:env(safe-area-inset-top, 0px);}
footer{padding-bottom:env(safe-area-inset-bottom, 0px);}
.container{padding-inline:max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px));}

/* Only apply hover effects on devices that truly support hover (mouse/trackpad) —
   prevents "stuck hover" state after tapping on touchscreens (phones/tablets) */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -8px rgba(124,58,237,.75);}
  .btn-outline:hover{border-color:var(--violet-2);background:rgba(124,58,237,0.12);}
  nav.main-nav a:hover{color:var(--ink);}
  nav.main-nav a:hover::after{width:100%;}
  .svc-card:hover{border-color:rgba(124,58,237,.45);transform:translateY(-4px);background:var(--bg-panel-2);}
  .industry-card:hover{background:var(--bg-panel-2);border-color:rgba(124,58,237,.4);}
  .case-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -14px rgba(0,0,0,.55);}
  .footer-col ul li a:hover{color:var(--cyan);}
  .footer-bottom a:hover{color:var(--cyan);}
  .social-row a:hover{background:var(--grad-brand);border-color:transparent;}
  .lang-switch:hover{border-color:var(--violet-2);color:var(--ink);}
  .cta-banner .btn-primary:hover{transform:translateY(-2px) scale(1.02);}
}
/* Comfortable minimum touch targets (44x44) on touch devices, per iOS/Android guidelines */
@media (pointer:coarse){
  .btn, .lang-switch{min-height:44px;}
  .burger, 
  .faq-q{min-height:44px;}
  .social-row a{width:44px;height:44px;}
}
a, button, .btn, .faq-q, .lang-switch, .burger{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}

/* ===================== RESPONSIVE (phones, tablets, laptops, desktops, wide/4K monitors) ===================== */

/* Extra-wide / large desktop & 4K monitors: keep content comfortably capped, add breathing room */
@media (min-width:1600px){
  .container{max-width:1360px;}
  .hero h1{font-size:clamp(46px,3.6vw,62px);}
}

/* Small laptops / large tablets landscape */

@media (max-width:1080px){
  .stats-row{grid-template-columns:repeat(2,1fr);row-gap:26px;}
  .stat:nth-child(2){border-inline-end:none;}
  .industry-grid{grid-template-columns:repeat(4,1fr);}
  .process-grid{grid-template-columns:repeat(3,1fr);}
  .price-card.feat{transform:none;}
}

/* Tablets (portrait) — iPad, Android tablets */
@media (max-width:1024px) and (min-width:901px){
  .hero-grid{gap:36px;}
  .services-wrap{grid-template-columns:1fr;}
  .svc-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:900px){
  
  
  .hero-grid,.why-wrap,.services-wrap,.dash-wrap,.faq-wrap{grid-template-columns:1fr;}
  .hero-visual{order:-1;height:320px;}
  .svc-grid{grid-template-columns:1fr;}
  .case-grid{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:1fr;}
  .industry-grid{grid-template-columns:repeat(3,1fr);}
}

/* Large phones (iPhone Pro Max, Android phablets) in portrait */
@media (max-width:767px) and (min-width:641px){
  .process-grid{grid-template-columns:repeat(3,1fr);}
  .industry-grid{grid-template-columns:repeat(4,1fr);}
}

@media (max-width:640px){
  .section-pad{padding-block:64px;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .industry-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .cta-banner{flex-direction:column;text-align:center;padding:40px 26px;}
  .device-stack{width:220px;height:220px;}
  .orbit.o1{width:250px;height:250px;}
  .orbit.o2{width:330px;height:330px;}
  .badge{width:46px;height:46px;font-size:18px;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn{justify-content:center;}
}

/* Small phones — iPhone SE/mini, compact Android */
@media (max-width:400px){
  .container{padding-inline:16px;}
  .hero h1{font-size:clamp(28px,8vw,36px);}
  .footer-grid{grid-template-columns:1fr;}
  .industry-grid{grid-template-columns:1fr 1fr;}
  .device-stack{width:190px;height:190px;}
  .orbit.o1{width:220px;height:220px;}
  .orbit.o2{width:290px;height:290px;}
  .price-card{padding:26px 20px;}
}

/* Landscape phones (short viewport height) */
@media (max-height:480px) and (orientation:landscape){
  .hero{padding:32px 0 24px;}
  .hero-visual{height:220px;}
  .section-pad{padding-block:40px;}
}










.lang-switch{cursor:pointer;transition:.2s;}

/* ===================== SERVICE PAGE ADD-ONS ===================== */
.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-faint);padding-block:18px;}
.breadcrumb a{color:var(--ink-dim);transition:color .2s;}
.breadcrumb a:hover{color:var(--cyan);}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:var(--ink);font-weight:600;}

.stats-row.cols-3{grid-template-columns:repeat(3,1fr);}
.stats-row.mini{margin-bottom:0;}

.process-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.process-grid.cols-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.process-grid.cols-4{grid-template-columns:1fr;}}

.offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media (max-width:900px){.offer-grid{grid-template-columns:1fr;}}
.offer-card{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.offer-card:hover{border-color:rgba(124,58,237,.45);background:var(--bg-panel-2);}
.offer-card .icon-box{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:21px;color:#fff;}
.offer-card:nth-child(1) .icon-box{background:linear-gradient(135deg,#F43F5E,#F59E0B);}
.offer-card:nth-child(2) .icon-box{background:linear-gradient(135deg,#3B82F6,#22D3EE);}
.offer-card:nth-child(3) .icon-box{background:linear-gradient(135deg,#A855F7,#E947C1);}
.offer-card:nth-child(4) .icon-box{background:linear-gradient(135deg,#22C55E,#22D3EE);}
.offer-card h3{font-size:18px;font-weight:700;margin-bottom:10px;}
.offer-card > p{font-size:13.5px;color:var(--ink-dim);margin-bottom:16px;}
.offer-card ul li{font-size:13.5px;color:var(--ink-dim);padding-block:5px;display:flex;align-items:center;gap:8px;}
.offer-card ul li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cyan);flex-shrink:0;}

.channels-panel{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px;text-align:center;
}
.channels-row{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:22px;}
.channels-row span{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--ink-dim);}
.channels-row .ico{font-size:19px;}

.spotlight{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-panel);
}
@media (max-width:900px){.spotlight{grid-template-columns:1fr;}}
.spotlight-cover{background:linear-gradient(135deg,#F97316,#EF4444);display:flex;align-items:center;justify-content:center;padding:40px;position:relative;min-height:220px;}
.spotlight-cover .ico{font-size:56px;color:rgba(255,255,255,.9);}
.spotlight-cover span.tag{position:absolute;top:16px;inset-inline-start:16px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);font-size:11.5px;padding:5px 12px;border-radius:100px;font-weight:600;color:#fff;}
.spotlight-body{padding:32px;}
.spotlight-body h3{font-size:19px;font-weight:700;margin-bottom:12px;}
.spotlight-body p{font-size:14px;color:var(--ink-dim);margin-bottom:18px;}
.spotlight-metrics{display:flex;gap:28px;margin-bottom:20px;flex-wrap:wrap;}
.spotlight-metrics div b{display:block;font-family:'Cairo',sans-serif;font-size:24px;color:var(--cyan);}
.spotlight-metrics div span{font-size:12px;color:var(--ink-faint);}

.price-teaser{
  background:linear-gradient(160deg,var(--bg-panel-2),var(--bg-panel));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:44px;text-align:center;max-width:640px;margin-inline:auto;position:relative;overflow:hidden;
}
.price-teaser::after{content:'';position:absolute;width:220px;height:220px;background:var(--violet);filter:blur(90px);opacity:.3;top:-80px;inset-inline-end:-60px;}
.price-teaser .amt{font-family:'Cairo',sans-serif;font-size:42px;font-weight:800;margin:10px 0;position:relative;}
.price-teaser .amt span{font-size:15px;font-weight:500;color:var(--ink-faint);}
.price-teaser p{color:var(--ink-dim);font-size:14px;margin-bottom:24px;position:relative;}

.related-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px;}
.related-chip{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,0.03);font-size:13.5px;color:var(--ink-dim);
  transition:.2s;
}
@media (hover:hover) and (pointer:fine){
  .related-chip:hover{border-color:var(--violet-2);color:var(--ink);background:rgba(124,58,237,0.1);}
}
.related-chip .ico{color:var(--violet-2);font-size:14px;}

/* ===================== SOCIAL MEDIA PAGE ADD-ONS ===================== */

/* --- platform tabs --- */
.sm-tabs{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:34px;
}
.sm-tab{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:100px;
  border:1px solid var(--line);background:rgba(255,255,255,0.03);
  font-family:'Cairo',sans-serif;font-weight:700;font-size:14px;color:var(--ink-dim);
  transition:background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;white-space:nowrap;
}
.sm-tab .ico{font-size:16px;}
.sm-tab.active{
  background:var(--pf, var(--violet));border-color:transparent;color:#fff;
  box-shadow:0 10px 26px -10px var(--pf, var(--violet));
}
/* TikTok / X use black brand colors — lighten their active state for dark UI contrast */
.sm-tab[data-panel="tt"].active,.sm-tab[data-panel="tw"].active{
  background:#2b2b3d;box-shadow:0 10px 26px -10px rgba(255,255,255,.25);
}
@media (hover:hover) and (pointer:fine){
  .sm-tab:not(.active):hover{border-color:var(--violet-2);color:var(--ink);background:rgba(124,58,237,.1);}
}

/* --- panels --- */
.sm-panel{display:none;}
.sm-panel.active{display:block;animation:smFade .35s ease;}
@keyframes smFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.sm-panel.active{animation:none;}}

.sm-panel-head{
  display:flex;align-items:center;gap:18px;margin-bottom:30px;
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;
}
.sm-panel-icon{
  width:54px;height:54px;border-radius:15px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;
}
.sm-panel-head h3{font-size:19px;font-weight:800;margin-bottom:6px;}
.sm-panel-head p{font-size:13.5px;color:var(--ink-dim);max-width:760px;}

/* --- 5-package grid (shared with the web-dev page conventions) --- */
.pkg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:stretch;}
.pkg-card{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 20px;position:relative;display:flex;flex-direction:column;min-width:0;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .pkg-card:hover{border-color:rgba(124,58,237,.45);transform:translateY(-4px);background:var(--bg-panel-2);}
}
.pkg-card.feat{
  background:linear-gradient(160deg,var(--bg-panel-2),#1b0f3a);
  border:1px solid rgba(168,85,247,.55);box-shadow:var(--shadow-glow);
}
.pkg-badge{
  position:absolute;top:-13px;inset-inline-start:50%;transform:translateX(-50%);
  background:var(--grad-brand);font-size:11px;font-weight:700;padding:6px 16px;border-radius:100px;
  white-space:nowrap;color:#fff;
}
html[dir="rtl"] .pkg-badge{transform:translateX(50%);}
.pkg-icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin-bottom:15px;font-size:18px;color:#fff;
}
.pkg-card h3{font-size:16.5px;font-weight:800;margin-bottom:4px;}
.pkg-card .pkg-for{font-size:12px;color:var(--ink-faint);margin-bottom:15px;min-height:34px;}
.pkg-amt{font-family:'Cairo',sans-serif;font-size:28px;font-weight:800;line-height:1.2;}
.pkg-amt small{font-size:12px;font-weight:500;color:var(--ink-faint);display:block;margin-top:2px;}
.pkg-meta{display:flex;align-items:center;gap:7px;font-size:11.8px;color:var(--cyan);margin:13px 0 17px;}
.pkg-meta .ico{font-size:13px;flex-shrink:0;}
.pkg-card ul{display:flex;flex-direction:column;gap:9px;margin-bottom:22px;flex:1;}
.pkg-card ul li{font-size:12.6px;color:var(--ink-dim);display:flex;align-items:flex-start;gap:8px;line-height:1.6;}
.pkg-card ul li .ico{color:var(--cyan);font-size:13px;margin-top:4px;flex-shrink:0;}
.pkg-card .btn{width:100%;justify-content:center;margin-top:auto;}
.pkg-card h3,.pkg-amt,.pkg-card ul li span,.pkg-card .pkg-for{overflow-wrap:anywhere;}

/* --- why-social strip --- */
.sm-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.sm-why-card{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px 20px;}
.sm-why-card .ico{font-size:22px;color:var(--cyan);margin-bottom:12px;display:block;}
.sm-why-card h4{font-size:15px;font-weight:700;margin-bottom:6px;}
.sm-why-card p{font-size:12.8px;color:var(--ink-dim);}

/* --- platform reach stats --- */
.reach-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;}
.reach-card{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:20px 8px;text-align:center;
}
.reach-card .ico{font-size:20px;margin-bottom:9px;display:block;margin-inline:auto;color:var(--violet-2);}
.reach-card b{display:block;font-family:'Cairo',sans-serif;font-size:17px;
  background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent;}
.reach-card span{font-size:11.5px;color:var(--ink-faint);}

/* =====================================================================
   FULL DEVICE COVERAGE
   Desktops, laptops, wide/4K monitors, tablets, Android & iPhone
   ===================================================================== */

/* --- Ultra-wide / 4K (1600px+) --- */
@media (min-width:1600px){
  .pkg-grid{grid-template-columns:repeat(5,1fr);gap:22px;}
  .pkg-card{padding:30px 24px;}
  .sm-tab{padding:13px 24px;font-size:14.5px;}
}

/* --- Standard desktop (1200–1599px): 5 columns, tightened --- */
@media (min-width:1200px) and (max-width:1599px){
  .pkg-grid{grid-template-columns:repeat(5,1fr);gap:13px;}
  .pkg-card{padding:22px 15px;}
  .pkg-card h3{font-size:15px;}
  .pkg-amt{font-size:24px;}
  .pkg-card ul li{font-size:12px;}
  .pkg-card .btn{padding:12px 14px;font-size:13px;}
}

/* --- Small laptops / large tablets landscape (1000–1199px) --- */
@media (min-width:1000px) and (max-width:1199px){
  .pkg-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
  .reach-grid{grid-template-columns:repeat(4,1fr);}
}

/* --- Tablets portrait: iPad, Android tablets (681–999px) --- */
@media (min-width:681px) and (max-width:999px){
  .pkg-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .pkg-card .pkg-for{min-height:0;}
  .sm-why-grid{grid-template-columns:repeat(2,1fr);}
  .reach-grid{grid-template-columns:repeat(4,1fr);}
  .sm-panel-head{padding:20px;gap:14px;}
}

/* --- Phones (≤680px) --- */
@media (max-width:680px){
  .pkg-grid{grid-template-columns:1fr;gap:20px;}
  .pkg-card{padding:26px 22px;}
  .pkg-card .pkg-for{min-height:0;margin-bottom:12px;}
  .pkg-card.feat{margin-top:14px;}
  .sm-why-grid{grid-template-columns:1fr;}
  .reach-grid{grid-template-columns:repeat(3,1fr);}
  .sm-panel-head{flex-direction:column;text-align:center;padding:22px 18px;}
  .sm-panel-head p{font-size:13px;}
  /* tabs become a horizontal swipe strip so all 7 stay reachable */
  .sm-tabs{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding-bottom:10px;margin-inline:-24px;padding-inline:24px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:var(--violet) transparent;
  }
  .sm-tabs::-webkit-scrollbar{height:6px;}
  .sm-tabs::-webkit-scrollbar-track{background:transparent;}
  .sm-tabs::-webkit-scrollbar-thumb{background:var(--violet);border-radius:100px;}
  .sm-tab{flex:0 0 auto;scroll-snap-align:start;padding:11px 17px;font-size:13.5px;}
}

/* --- Small phones: iPhone SE/mini, compact Android (≤400px) --- */
@media (max-width:400px){
  .pkg-card{padding:24px 18px;}
  .pkg-amt{font-size:26px;}
  .pkg-card h3{font-size:16px;}
  .pkg-card ul li{font-size:12.3px;}
  .reach-grid{grid-template-columns:repeat(2,1fr);}
  .sm-tabs{margin-inline:-16px;padding-inline:16px;}
  .sm-panel-icon{width:48px;height:48px;font-size:21px;}
}

/* --- Landscape phones (short viewports) --- */
@media (max-height:480px) and (orientation:landscape){
  .pkg-grid{grid-template-columns:repeat(3,1fr);}
  .pkg-card{padding:20px 15px;}
  .sm-panel-head{padding:16px;}
}

/* --- Touch-friendly targets (iOS/Android guidelines) --- */
@media (pointer:coarse){
  .sm-tab{min-height:46px;}
  .pkg-card .btn{min-height:46px;}
  .reach-card{min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
}

/* --- swipe hint for the tab strip --- */
.sm-tabs-hint{display:none;text-align:center;font-size:12px;color:var(--ink-faint);margin-bottom:22px;}
@media (pointer:coarse) and (max-width:680px){.sm-tabs-hint{display:block;}}

/* ===================== ACCOUNT MANAGEMENT PAGE ADD-ONS ===================== */
.manage-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;}
.manage-card{
  background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:18px 6px;text-align:center;
}
.manage-card .ico{font-size:19px;margin-bottom:9px;display:block;margin-inline:auto;color:var(--violet-2);}
.manage-card b{display:block;font-family:'Cairo',sans-serif;font-size:13.5px;}
.manage-card span{font-size:10.8px;color:var(--ink-faint);}

@media (max-width:1200px){.manage-grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width:640px){.manage-grid{grid-template-columns:repeat(3,1fr);gap:9px;}}
@media (max-width:400px){.manage-grid{grid-template-columns:repeat(2,1fr);}}
@media (pointer:coarse){.manage-card{min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;}}


.skip-link{position:absolute!important;top:-9999px!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;z-index:99999!important;}
.skip-link:focus,.skip-link:active{position:fixed!important;top:10px!important;left:10px!important;right:auto!important;width:auto!important;height:auto!important;padding:10px 18px!important;background:#7C3AED!important;color:#fff!important;border-radius:8px!important;font-weight:700!important;overflow:visible!important;box-shadow:0 4px 20px rgba(0,0,0,0.5)!important;}
.skip-link:focus,.skip-link:active{position:fixed!important;top:10px!important;left:10px!important;right:auto!important;width:auto!important;height:auto!important;padding:10px 18px!important;background:#7C3AED!important;color:#fff!important;border-radius:8px!important;font-weight:700!important;overflow:visible!important;box-shadow:0 4px 20px rgba(0,0,0,0.5)!important;}