/* =========================================================
   Manarah — Premium agency landing
   Design tokens (blue / white / black, glassmorphism)
   ========================================================= */
:root{
  /* color */
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe;
  --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb;
  --blue-700:#1d4ed8; --blue-900:#1e3a8a;
  --ink:#0f172a;            /* near-black headings (light theme) */
  --ink-2:#334155;
  --muted:#64748b;          /* body secondary */
  --line:#e2e8f0;
  --bg:#ffffff;
  --bg-tint:#f6f9ff;
  --white:#ffffff;

  /* semantic */
  --text:#475569;
  --primary:var(--blue-600);
  --primary-strong:#2563eb;
  --wa:#25d366;

  /* effects */
  --radius:18px; --radius-lg:26px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,22,42,.04),0 2px 8px rgba(16,22,42,.05);
  --shadow:0 8px 24px -8px rgba(20,40,90,.10),0 2px 8px rgba(20,40,90,.05);
  --shadow-lg:0 30px 60px -20px rgba(20,40,90,.18),0 10px 24px -12px rgba(20,40,90,.10);
  --glass-bg:#ffffff;
  --glass-brd:#e2e8f0;
  --card:#ffffff;

  /* type */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[lang="ar"]{ --font:'Tajawal',system-ui,Segoe UI,Tahoma,sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  background:#ffffff;
  background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 50%,#eef4fc 100%) no-repeat;
  background-attachment:scroll;
  min-height:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; font-family:var(--font); color:var(--text);
  line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:transparent;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; color:var(--ink); line-height:1.15; font-weight:800; letter-spacing:-.02em; }
p{ margin:0; }
:focus-visible{ outline:3px solid var(--blue-400); outline-offset:2px; border-radius:6px; }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

.container{ width:min(1180px,92vw); margin-inline:auto; }
.container--narrow{ width:min(820px,92vw); }

/* ---------- buttons ---------- */
.btn{
  --bh:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:var(--bh); padding:0 22px; border:0; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.97rem; border-radius:var(--radius-pill);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
  white-space:nowrap; text-align:center;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--sm{ --bh:42px; padding:0 16px; font-size:.9rem; }
.btn--lg{ --bh:56px; padding:0 30px; font-size:1.03rem; }
.btn--block{ display:flex; width:100%; }
.btn--primary{
  background:linear-gradient(180deg,#4f8dff,var(--blue-700));
  color:#fff; box-shadow:0 10px 28px -6px rgba(37,99,235,.75),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -10px rgba(37,99,235,.85),0 0 0 4px rgba(59,130,246,.18); }
.btn--ghost{
  background:#ffffff; color:var(--ink); border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{ transform:translateY(-2px); border-color:rgba(37,99,235,.45); background:rgba(37,99,235,.05); box-shadow:var(--shadow); }
.btn--whatsapp{ background:var(--wa); color:#053d1c; box-shadow:0 10px 22px -10px rgba(37,211,102,.7); }
.btn--whatsapp:hover{ transform:translateY(-2px); filter:brightness(1.03); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent; transition:border-color .25s,box-shadow .25s,background .25s;
}
.nav.is-stuck{ border-color:var(--line); box-shadow:0 4px 24px -16px rgba(20,40,90,.4); }
.nav__inner{ display:flex; align-items:center; gap:18px; height:70px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.22rem; color:var(--ink); letter-spacing:-.02em; }
.brand__mark{ display:inline-flex; filter:drop-shadow(0 6px 12px rgba(37,99,235,.35)); }
.brand__dot{ color:var(--primary); }
.brand--light{ color:var(--ink); }
.nav__links{ display:flex; gap:6px; margin-inline:auto; }
.nav__links a{
  padding:9px 13px; border-radius:10px; color:var(--ink-2); font-weight:600; font-size:.93rem;
  transition:background .18s,color .18s;
}
.nav__links a:hover{ background:rgba(37,99,235,.08); color:var(--blue-700); }
.nav__actions{ display:flex; align-items:center; gap:10px; }
.lang-toggle{
  height:42px; padding:0 14px; border-radius:var(--radius-pill); cursor:pointer;
  background:#f1f5fb; border:1.5px solid var(--line); color:var(--ink); font-family:inherit;
  font-weight:700; font-size:.88rem; transition:border-color .18s,background .18s;
}
.lang-toggle:hover{ border-color:rgba(37,99,235,.4); background:rgba(37,99,235,.08); }
.nav__burger{ display:none; width:44px; height:44px; border:1.5px solid var(--line); background:#f1f5fb; border-radius:12px; cursor:pointer; padding:0; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav__burger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s,opacity .2s; }
.nav.is-open .nav__links{ background:#ffffff !important; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{ position:relative; padding:64px 0 0; overflow:hidden; background:transparent; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.blob--1{ width:680px; height:680px; top:-260px; inset-inline-end:-180px; background:radial-gradient(circle,#bcd6ff 0%,#dbeafe 45%,transparent 72%); opacity:.7; }
.blob--2{ width:520px; height:520px; bottom:-200px; inset-inline-start:-180px; background:radial-gradient(circle,#e0e7ff 0%,#dbeafe 50%,transparent 72%); opacity:.55; }
.blob--3{ width:600px; height:600px; top:-60px; inset-inline-end:6%; background:radial-gradient(circle,#cfe0ff 0%,transparent 68%); opacity:.4; }
.grid-fade{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px);
  background-size:46px 46px; opacity:.8;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 75%);
}
.hero__inner{
  position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
  gap:40px; align-items:center; padding-bottom:56px;
}
.pill{
  display:inline-flex; align-items:center; gap:9px; padding:7px 16px; border-radius:var(--radius-pill);
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18); box-shadow:var(--shadow-sm);
  font-weight:700; font-size:.85rem; color:var(--blue-700); letter-spacing:.04em; text-transform:uppercase;
}
.pill__dot{ width:8px; height:8px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 4px rgba(37,211,102,.18); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(37,211,102,.18); } 50%{ box-shadow:0 0 0 7px rgba(37,211,102,.08); } }
.hero__title{ font-size:clamp(2.2rem,5vw,3.7rem); margin:18px 0 0; line-height:1.07; }
.gradient-text{
  background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:inline;
}
.hero__sub{ margin-top:18px; font-size:1.12rem; color:var(--muted); max-width:46ch; }
.hero__cta{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.hero__stats{ display:flex; gap:28px; margin-top:36px; flex-wrap:wrap; }
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats strong{ font-size:1.5rem; color:var(--ink); font-weight:800; }
.hero__stats span{ font-size:.85rem; color:var(--muted); }

/* hero 3D scene */
.hero__scene{ position:relative; height:440px; perspective:1100px; }
.scene{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .3s var(--ease); }
.hero__scene::after{ content:""; position:absolute; left:10%; right:10%; bottom:-6px; height:46px; background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 72%); filter:blur(10px); transform:translateZ(-60px); z-index:-1; }
.float-a{ animation:floatA 7s ease-in-out infinite; }
.float-b{ animation:floatB 8s ease-in-out infinite; }
.float-c{ animation:floatC 6s ease-in-out infinite; }
@keyframes floatA{ 50%{ transform:translateY(-14px) rotateX(8deg) rotateY(-12deg); } }
@keyframes floatB{ 50%{ transform:translateY(16px) rotate(-1deg); } }
@keyframes floatC{ 50%{ transform:translateY(-10px); } }

/* spinning 3D cube — solid, shaded faces */
.cube-wrap{ position:absolute; top:-9%; inset-inline-start:3%; width:52px; height:52px; perspective:600px; z-index:4; pointer-events:none; }
.cube-wrap--br{ top:auto; inset-inline-start:auto; bottom:6%; inset-inline-end:2%; width:36px; height:36px; }
.cube3d{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(-22deg) rotateY(-30deg); animation:spinCube 9s ease-in-out infinite; }
.cube3d--sm{ animation:spinCube2 12s ease-in-out infinite; transform:rotateX(30deg) rotateY(20deg); }
@keyframes spinCube{ 0%,100%{ transform:rotateX(-22deg) rotateY(-30deg); } 50%{ transform:rotateX(-18deg) rotateY(30deg); } }
@keyframes spinCube2{ 0%,100%{ transform:rotateX(30deg) rotateY(20deg); } 50%{ transform:rotateX(-15deg) rotateY(-40deg); } }
.cube3d__f{ position:absolute; top:0; left:0; width:50px; height:50px; border-radius:9px; backface-visibility:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.cube3d__f--front{ transform:translateZ(25px); background:linear-gradient(150deg,#3b82f6,#1d4ed8); }
.cube3d__f--back{ transform:rotateY(180deg) translateZ(25px); background:linear-gradient(150deg,#2f6bf0,#1742b8); }
.cube3d__f--right{ transform:rotateY(90deg) translateZ(25px); background:linear-gradient(150deg,#2456c9,#16307e); }
.cube3d__f--left{ transform:rotateY(-90deg) translateZ(25px); background:linear-gradient(150deg,#2456c9,#16307e); }
.cube3d__f--top{ transform:rotateX(90deg) translateZ(25px); background:linear-gradient(150deg,#6ea8f5,#3b82f6); }
.cube3d__f--bottom{ transform:rotateX(-90deg) translateZ(25px); background:linear-gradient(150deg,#13245a,#0c1838); }

.device--laptop{
  position:absolute; z-index:2; inset-inline-start:0; top:30px; width:58%;
  transform:rotateX(8deg) rotateY(-12deg);
}
.laptop__screen{
  border-radius:14px 14px 4px 4px; padding:9px; background:linear-gradient(160deg,#1b2336,#0a0e1a);
  box-shadow:var(--shadow-lg);
}
.laptop__base{ height:14px; border-radius:0 0 14px 14px; background:linear-gradient(#cfd8ea,#9fb0d0); margin:0 -7%; box-shadow:0 16px 24px -12px rgba(20,40,90,.4); }
.dash{ display:grid; grid-template-columns:30px 1fr; gap:7px; background:#fff; border-radius:8px; padding:8px; height:200px; }
.dash__side{ display:flex; flex-direction:column; gap:7px; align-items:center; padding-top:4px; }
.dash__logo{ width:18px; height:18px; border-radius:6px; background:linear-gradient(var(--blue-500),var(--blue-700)); }
.dash__nav{ width:18px; height:6px; border-radius:3px; background:var(--blue-100); }
.dash__nav.is-active{ background:var(--blue-600); }
.dash__main{ display:flex; flex-direction:column; gap:8px; }
.dash__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.kpi{ background:var(--blue-50); border:1px solid var(--blue-100); border-radius:6px; padding:6px; display:flex; flex-direction:column; gap:4px; }
.kpi b{ height:9px; width:70%; border-radius:3px; background:var(--blue-600); }
.kpi i{ height:5px; width:90%; border-radius:3px; background:var(--blue-200); }
.dash__chart{ display:flex; align-items:flex-end; gap:5px; height:70px; padding:6px; background:#f7f9ff; border-radius:6px; }
.dash__chart span{ flex:1; height:var(--h); border-radius:3px 3px 0 0; background:linear-gradient(var(--blue-400),var(--blue-600)); }
.dash__list{ display:flex; flex-direction:column; gap:5px; }
.dash__list span{ height:7px; border-radius:3px; background:#e9eef9; }
.dash__list span:nth-child(2){ width:80%; } .dash__list span:nth-child(3){ width:60%; }

.device--phone{
  position:absolute; z-index:2; inset-inline-end:0; top:0; width:30%; max-width:200px;
  background:#0a0e1a; border-radius:26px; padding:8px; box-shadow:var(--shadow-lg);
  border:2px solid #232b40;
}
.phone__notch{ width:42%; height:14px; background:#0a0e1a; border-radius:0 0 10px 10px; margin:0 auto 6px; }
.phone__screen{ background:#fff; border-radius:18px; overflow:hidden; }
.store__hero{ height:64px; background:linear-gradient(135deg,var(--blue-500),var(--blue-900)); position:relative; }
.store__hero::after{ content:""; position:absolute; inset:auto 10px 8px 10px; height:8px; border-radius:4px; background:rgba(255,255,255,.6); }
.store__grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px; }
.store__grid span{ height:42px; border-radius:8px; background:var(--blue-50); border:1px solid var(--blue-100); }
.store__bar{ display:flex; align-items:center; gap:6px; padding:8px; border-top:1px solid var(--line); }
.store__bar i{ width:22px; height:22px; border-radius:6px; background:var(--blue-100); }
.store__bar b{ flex:1; height:26px; border-radius:8px; background:linear-gradient(var(--blue-500),var(--blue-700)); color:#fff; font-size:.62rem; display:flex; align-items:center; justify-content:center; }

.chip{
  position:absolute; z-index:6; display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px; border-radius:14px; background:var(--glass-bg);
  border:1px solid var(--glass-brd); box-shadow:var(--shadow); color:var(--primary-strong);
  font-weight:700; font-size:.82rem;
}
.chip em{ font-style:normal; color:var(--ink); }
.chip svg{ color:var(--primary); }
/* chips sit on the device edges as attached badges (in front, slight overlap) */
.chip--1{ top:-4%; inset-inline-end:6%; }      /* Orders   — phone top-right */
.chip--2{ bottom:33%; inset-inline-start:2%; } /* Loyalty  — laptop bottom-left */
.chip--3{ bottom:33%; inset-inline-end:4%; }   /* POS      — phone bottom-right */
.chip--4{ bottom:33%; inset-inline-start:33%; }/* Analytics— laptop bottom-center */

/* ---------- stats band ---------- */
.stats-band{
  background:#ffffff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:0;
}
.stats-band .container{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat-item{
  display:flex; align-items:center; gap:16px; padding:28px 24px;
  border-right:1px solid var(--line);
  transition:background .2s var(--ease);
}
.stat-item:last-child{ border-right:none; }
.stat-item:hover{ background:rgba(37,99,235,.04); }
.stat-icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  flex-shrink:0; color:#fff;
}
.stat-icon--1{ background:linear-gradient(150deg,#3b82f6,#1d4ed8); box-shadow:0 10px 22px -10px rgba(37,99,235,.75); }
.stat-icon--2{ background:linear-gradient(150deg,#06b6d4,#0e7490); box-shadow:0 10px 22px -10px rgba(6,182,212,.7); }
.stat-icon--3{ background:linear-gradient(150deg,#6366f1,#4338ca); box-shadow:0 10px 22px -10px rgba(99,102,241,.7); }
.stat-icon--4{ background:linear-gradient(150deg,#8b5cf6,#6d28d9); box-shadow:0 10px 22px -10px rgba(139,92,246,.7); }
.stat-info strong{
  display:block; font-size:1.85rem; font-weight:800; line-height:1.1;
  background:linear-gradient(160deg,#8fc0ff,#4f8cf8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat-info span{ font-size:.85rem; color:var(--muted); font-weight:500; margin-top:2px; display:block; }
@media(max-width:768px){
  .stats-band .container{ grid-template-columns:repeat(2,1fr); }
  .stat-item{ border-right:none; border-bottom:1px solid var(--line); }
  .stat-item:nth-child(odd){ border-right:1px solid var(--line); }
}
@media(max-width:480px){
  .stats-band .container{ grid-template-columns:1fr; }
  .stat-item:nth-child(odd){ border-right:none; }
}

/* marquee */
.marquee{ position:relative; z-index:1; border-block:1px solid var(--line); background:#f6f9ff; overflow:hidden; padding:14px 0; }
.marquee__track{ display:flex; gap:24px; width:max-content; animation:scrollx 32s linear infinite; color:var(--ink-2); font-weight:700; font-size:.95rem; }
.marquee__track span:nth-child(even){ color:var(--blue-600); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
html[dir="rtl"] .marquee__track{ animation-direction:reverse; }

/* ---------- sections ---------- */
.section{ padding:88px 0; position:relative; }
.section--tint{ background:#f6f9ff; }
.section--blue{ background:radial-gradient(ellipse 70% 80% at 50% -10%,rgba(59,130,246,.07),transparent 62%); }
.section--dark{ background:#f0f5ff; }
.section--dark .eyebrow{ background:rgba(37,99,235,.1); color:var(--blue-700); }
.section--dark .section__title{ color:var(--ink); }
.section--dark .section__lead{ color:var(--muted); }
.section--dark .showcase__feats li{ background:#fff; border-color:var(--line); color:var(--ink-2); }
.section--dark .showcase__feats li:hover{ border-color:var(--blue-400); }

/* built-in feature grid */
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feat{
  display:flex; align-items:center; gap:13px; padding:16px; border-radius:16px;
  background:var(--card); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .2s var(--ease),box-shadow .2s;
}
.feat:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.feat__icon{ width:44px; height:44px; flex-shrink:0; border-radius:13px; display:grid; place-items:center; }
.feat span{ font-weight:700; color:var(--ink); font-size:.95rem; }
.section__head{ max-width:680px; margin:0 auto 52px; text-align:center; }
.eyebrow{ display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-700); background:rgba(37,99,235,.1); padding:6px 13px; border-radius:var(--radius-pill); }
.section__title{ font-size:clamp(1.7rem,3.6vw,2.6rem); margin:16px 0 0; }
.section__lead{ margin-top:14px; color:var(--muted); font-size:1.08rem; }
.section__head--light .section__title,.section__head--light{ color:var(--ink); }
.section__head--light .section__lead{ color:var(--muted); }
.section__head--light .eyebrow{ background:rgba(37,99,235,.1); color:var(--blue-700); }

.glass{
  background:var(--glass-bg); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
}

/* ---------- colorful gradient icons (cool palette, on-brand) ---------- */
.ic--1,.ic--2,.ic--3,.ic--4,.ic--5,.ic--6{ color:#fff !important; border:0 !important; }
.ic--1{ background:linear-gradient(150deg,#3b82f6,#1d4ed8) !important; box-shadow:0 12px 22px -10px rgba(37,99,235,.75) !important; }
.ic--2{ background:linear-gradient(150deg,#06b6d4,#0e7490) !important; box-shadow:0 12px 22px -10px rgba(6,182,212,.7) !important; }
.ic--3{ background:linear-gradient(150deg,#6366f1,#4338ca) !important; box-shadow:0 12px 22px -10px rgba(99,102,241,.7) !important; }
.ic--4{ background:linear-gradient(150deg,#0ea5e9,#0369a1) !important; box-shadow:0 12px 22px -10px rgba(14,165,233,.7) !important; }
.ic--5{ background:linear-gradient(150deg,#8b5cf6,#6d28d9) !important; box-shadow:0 12px 22px -10px rgba(139,92,246,.7) !important; }
.ic--6{ background:linear-gradient(150deg,#2563eb,#1e3a8a) !important; box-shadow:0 12px 22px -10px rgba(30,58,138,.7) !important; }

/* gradient numerals for extra pop */
.price__amount,.hero__stats strong{
  background:linear-gradient(160deg,#8fc0ff,#4f8cf8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* bold filled "Most Popular" plan */
.plan--featured{ background:linear-gradient(165deg,#2f6bf6,#1b3aa0) !important; border:0 !important; color:#fff; box-shadow:0 34px 64px -22px rgba(30,64,175,.65); }
.plan--featured .plan__name{ color:#fff; }
.plan--featured .plan__for{ color:#d2e1ff; }
.plan--featured .price__amount{ background:none; -webkit-text-fill-color:#fff; color:#fff; }
.plan--featured .price__unit b{ color:#fff; }
.plan--featured .price__unit i{ color:#d2e1ff; }
.plan--featured .plan__feats li{ color:#eef4ff; }
.plan--featured .plan__feats li::before{
  background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.plan--featured .plan__badge{ background:#fff; color:#1d4ed8; }
.plan--featured .btn--primary{ background:#fff; color:#1d4ed8; box-shadow:0 10px 22px -8px rgba(0,0,0,.28); }
.plan--featured .btn--primary:hover{ background:#eaf1ff; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:s; }
.step{ position:relative; padding:30px 26px; overflow:hidden; transition:transform .25s var(--ease),box-shadow .25s; }
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.step__num{ position:absolute; top:14px; inset-inline-end:18px; font-size:2.6rem; font-weight:800; color:rgba(123,160,255,.18); letter-spacing:-.04em; }
.step__icon{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,var(--blue-500),var(--blue-700)); box-shadow:0 12px 22px -10px rgba(37,99,235,.7); margin-bottom:18px; }
.step h3{ font-size:1.22rem; margin-bottom:8px; }
.step p{ color:var(--muted); }
.steps .step:not(:last-child)::after{
  content:""; position:absolute; top:46px; inset-inline-end:-13px; width:26px; height:2px;
  background:linear-gradient(90deg,var(--blue-300,#93c5fd),transparent);
}

/* ---------- base package ---------- */
.basecard{ display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; padding:38px; align-items:start; }
.basecard__left{ position:sticky; top:90px; }
.badge--soft{ display:inline-block; background:rgba(37,99,235,.1); color:var(--blue-700); font-weight:700; font-size:.82rem; padding:6px 12px; border-radius:var(--radius-pill); }
.basecard__name{ font-size:1.5rem; margin:14px 0 18px; }
.price{ display:flex; align-items:flex-end; gap:8px; }
.price__amount{ font-size:3.4rem; font-weight:800; color:var(--primary-strong); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.price__unit{ display:flex; flex-direction:column; padding-bottom:6px; }
.price__unit b{ color:var(--ink); font-size:1rem; } .price__unit i{ color:var(--muted); font-style:normal; font-size:.85rem; }
.price--sm .price__amount{ font-size:2.5rem; }
.basecard__note{ color:var(--muted); margin:14px 0 22px; font-size:.95rem; }
.basecard__feats{ display:grid; grid-template-columns:1fr 1fr; gap:13px 22px; }
.basecard__feats li{ position:relative; padding-inline-start:30px; color:var(--ink-2); font-weight:500; }
.basecard__feats li::before{
  content:""; position:absolute; inset-inline-start:0; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- add-ons ---------- */
.addons-layout{ display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start; }
.addons-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.addon{
  position:relative; padding:22px; border-radius:var(--radius); background:var(--card);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1.5px solid var(--line); box-shadow:var(--shadow);
  transition:transform .22s var(--ease),box-shadow .22s,border-color .22s; cursor:pointer;
}
.addon:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--blue-200); }
.addon.is-added{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12),var(--shadow); }
.addon__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.addon__icon{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center; color:var(--primary-strong);
  background:linear-gradient(150deg,var(--blue-50),#fff); border:1px solid var(--blue-100);
  box-shadow:inset 0 1px 0 #fff,0 8px 16px -10px rgba(37,99,235,.5);
}
.addon__price{ font-weight:800; color:var(--primary-strong); font-size:1.05rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.addon__price small{ display:block; font-weight:600; color:var(--muted); font-size:.72rem; text-align:end; }
.addon h3{ font-size:1.1rem; margin-bottom:7px; }
.addon p{ color:var(--muted); font-size:.92rem; min-height:38px; }
.addon__btn{
  margin-top:14px; width:100%; min-height:42px; border-radius:12px; cursor:pointer; font-family:inherit;
  font-weight:700; font-size:.9rem; border:1.5px solid rgba(37,99,235,.25); background:rgba(37,99,235,.08); color:var(--blue-700);
  display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:background .18s,color .18s,border-color .18s;
}
.addon__btn:hover{ background:rgba(37,99,235,.14); }
.addon.is-added .addon__btn{ background:var(--primary); border-color:var(--primary); color:#fff; }
.addon__btn svg{ transition:transform .2s; }
.addon.is-added .addon__btn svg{ transform:rotate(45deg); }

/* calculator */
.calc{ position:sticky; top:90px; padding:24px; }
.calc__title{ font-size:1.15rem; margin-bottom:16px; }
.calc__row,.calc__total{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; }
.calc__row{ border-bottom:1px dashed var(--line); color:var(--ink-2); font-weight:600; font-size:.92rem; }
.calc__row b{ font-variant-numeric:tabular-nums; }
.calc__selected{ display:flex; flex-direction:column; }
.calc__line{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:.88rem; color:var(--ink-2); animation:fadein .25s var(--ease); }
.calc__line b{ font-variant-numeric:tabular-nums; color:var(--primary-strong); font-weight:700; }
.calc__line button{ width:20px; height:20px; border-radius:6px; border:0; background:#fdecec; color:#d83a3a; cursor:pointer; font-weight:800; line-height:1; flex-shrink:0; }
@keyframes fadein{ from{ opacity:0; transform:translateY(-4px); } }
.calc__empty{ color:var(--muted); font-size:.88rem; padding:14px 0; text-align:center; }
.calc__total{ margin-top:8px; padding-top:16px; border-top:2px solid var(--line); }
.calc__total span{ font-weight:700; color:var(--ink); } .calc__total b{ font-size:1.5rem; color:var(--primary-strong); font-variant-numeric:tabular-nums; }
.calc .btn{ margin-top:8px; }
.calc__hint{ margin-top:10px; color:var(--muted); font-size:.78rem; text-align:center; }

/* ---------- plans ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.plan{ padding:30px 26px; transition:transform .25s var(--ease),box-shadow .25s; }
.plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.plan--featured{ border:2px solid var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,.08),var(--shadow-lg); position:relative; transform:translateY(-8px); background:#fff; }
.plan--featured:hover{ transform:translateY(-14px); }
.plan__badge{ position:absolute; top:-13px; inset-inline-start:50%; transform:translateX(-50%); background:linear-gradient(var(--blue-500),var(--blue-700)); color:#fff; font-weight:700; font-size:.78rem; padding:6px 16px; border-radius:var(--radius-pill); box-shadow:0 10px 20px -8px rgba(37,99,235,.7); white-space:nowrap; }
html[dir="rtl"] .plan__badge{ transform:translateX(50%); }
.plan__name{ font-size:1.4rem; }
.plan__for{ color:var(--muted); margin:8px 0 18px; font-size:.92rem; min-height:42px; }
.plan__feats{ display:flex; flex-direction:column; gap:12px; margin:20px 0 24px; }
.plan__feats li{ position:relative; padding-inline-start:28px; color:var(--ink-2); }
.plan__feats li::before{
  content:""; position:absolute; inset-inline-start:0; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------- dashboard showcase ---------- */
.showcase{ display:grid; grid-template-columns:1.25fr .75fr; gap:36px; align-items:center; }
.showcase__stage{ perspective:1500px; }
.bigdash{ background:#fff; transform:rotateY(8deg) rotateX(4deg); transform-style:preserve-3d; padding:0; overflow:hidden; transition:transform .4s var(--ease); }
.showcase__stage:hover .bigdash{ transform:rotateY(0) rotateX(0); }
.bigdash__top{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:linear-gradient(#fff,#f7f9ff); border-bottom:1px solid var(--line); }
.bigdash__brand{ width:90px; height:14px; border-radius:5px; background:linear-gradient(var(--blue-500),var(--blue-700)); }
.bigdash__pillrow{ display:flex; gap:8px; } .bigdash__pillrow i{ width:26px; height:10px; border-radius:5px; background:var(--blue-100); }
.bigdash__body{ display:grid; grid-template-columns:64px 1fr; gap:0; }
.bigdash__side{ display:flex; flex-direction:column; gap:10px; padding:16px 12px; background:#0a0e1a; }
.bigdash__side span{ height:10px; border-radius:4px; background:#26314e; } .bigdash__side span.on{ background:var(--blue-500); }
.bigdash__content{ padding:18px; }
.bigdash__kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.bigdash__kpis span{ background:var(--blue-50); border:1px solid var(--blue-100); border-radius:10px; padding:12px 10px; }
.bigdash__kpis b{ display:block; height:14px; width:60%; border-radius:4px; background:var(--blue-600); }
.bigdash__chart{ display:flex; align-items:flex-end; gap:8px; height:120px; padding:14px; background:#f7f9ff; border-radius:12px; margin-bottom:14px; }
.bigdash__chart i{ flex:1; height:var(--h); border-radius:5px 5px 0 0; background:linear-gradient(var(--blue-400),var(--blue-600)); }
.bigdash__table{ display:flex; flex-direction:column; gap:8px; }
.bigdash__table span{ height:12px; border-radius:4px; background:#eef2fb; }
.bigdash__table span:nth-child(2){ width:85%; } .bigdash__table span:nth-child(3){ width:70%; } .bigdash__table span:nth-child(4){ width:55%; }
.showcase__feats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.showcase__feats li{
  display:flex; align-items:center; gap:9px; padding:13px 14px; border-radius:13px; background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); font-weight:600; font-size:.9rem; color:var(--ink-2);
  transition:transform .2s,border-color .2s;
}
.showcase__feats li:hover{ transform:translateX(4px); border-color:var(--blue-200); }
html[dir="rtl"] .showcase__feats li:hover{ transform:translateX(-4px); }
.showcase__feats li::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--primary); flex-shrink:0; }

/* ---------- who grid ---------- */
.who-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.who-card{
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding:24px 14px; border-radius:var(--radius); background:var(--card); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line);
  box-shadow:var(--shadow); transition:transform .22s var(--ease),box-shadow .22s;
}
.who-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.who-card__icon{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; color:var(--primary-strong); background:linear-gradient(150deg,var(--blue-50),#fff); border:1px solid var(--blue-100); }
.who-card span{ font-weight:700; font-size:.92rem; color:var(--ink); }

/* ---------- why grid ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.why-card{ display:flex; gap:14px; padding:22px; border-radius:var(--radius); background:var(--card); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s; }
.why-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.why-card__icon{ width:44px; height:44px; flex-shrink:0; border-radius:13px; display:grid; place-items:center; color:#fff; background:linear-gradient(150deg,var(--blue-500),var(--blue-700)); box-shadow:0 10px 18px -10px rgba(37,99,235,.7); }
.why-card h3{ font-size:1.02rem; margin-bottom:5px; }
.why-card p{ color:var(--muted); font-size:.88rem; }

/* ---------- process ---------- */
.process{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.process__step{ position:relative; padding:24px 18px; border-radius:var(--radius); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.process__n{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(150deg,var(--blue-500),var(--blue-700)); box-shadow:0 10px 18px -10px rgba(37,99,235,.8); margin-bottom:14px; }
.process__step h3{ color:var(--ink); font-size:1rem; margin-bottom:6px; }
.process__step p{ color:var(--muted); font-size:.85rem; }
.process__step:not(:last-child)::after{ content:""; position:absolute; top:42px; inset-inline-end:-9px; width:18px; height:2px; background:linear-gradient(90deg,var(--blue-500),transparent); }

/* ---------- cta band ---------- */
.ctaband{ position:relative; overflow:hidden; text-align:center; padding:60px 32px; border-radius:32px; background:linear-gradient(150deg,#2f6bf6,#1d4ed8); box-shadow:0 30px 60px -20px rgba(37,99,235,.5); }
.ctaband__glow{ position:absolute; width:600px; height:600px; top:-300px; inset-inline-start:50%; transform:translateX(-50%); background:radial-gradient(circle,rgba(255,255,255,.35),transparent 65%); filter:blur(20px); }
.ctaband__title{ position:relative; color:#fff; font-size:clamp(1.7rem,3.6vw,2.6rem); }
.ctaband__sub{ position:relative; color:#dbe7ff; max-width:60ch; margin:16px auto 0; font-size:1.05rem; }
.ctaband__btns{ position:relative; display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.ctaband__btns .btn--primary{ background:#fff; color:var(--blue-700); box-shadow:0 12px 26px -8px rgba(0,0,0,.3); }
.ctaband__btns .btn--primary:hover{ background:#eaf1ff; box-shadow:0 16px 32px -10px rgba(0,0,0,.35),0 0 0 4px rgba(255,255,255,.25); }

/* ---------- faq ---------- */
.faq{ display:flex; flex-direction:column; gap:12px; }
.faq__item{ background:var(--card); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 22px; background:none; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:1.02rem; color:var(--ink); text-align:start; }
.faq__q svg{ flex-shrink:0; color:var(--primary); transition:transform .25s var(--ease); }
.faq__item.is-open .faq__q svg{ transform:rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq__a p{ padding:0 22px 20px; color:var(--muted); }

/* ---------- footer ---------- */
.footer{ background:#f4f8ff; color:var(--ink-2); padding-top:64px; border-top:1px solid var(--line); }
.footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; padding-bottom:48px; }
.footer__desc{ margin:16px 0 20px; color:var(--muted); font-size:.95rem; max-width:42ch; }
.footer__col h4{ color:var(--ink); font-size:1rem; margin-bottom:16px; }
.footer__col a,.footer__col span{ display:block; color:var(--muted); margin-bottom:11px; font-size:.93rem; transition:color .18s; }
.footer__col a:hover{ color:var(--blue-600); }
.footer__bar{ border-top:1px solid var(--line); padding:20px 0; }
.footer__barin{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.footer__barin span{ color:var(--muted); font-size:.85rem; }

/* fallback when backdrop-filter is unsupported — keep cards defined */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .addon,.feat,.who-card,.why-card,.faq__item,.basecard,.step,.plan,.calc{
    background:#ffffff; border-color:var(--line);
  }
  .nav{ background:rgba(255,255,255,.98); }
  .pill,.btn--ghost,.lang-toggle,.nav__burger{ background:#f1f5fb; }
  .marquee,.process__step{ background:#f6f9ff; }
}

/* ---------- interactive 3D tilt ---------- */
.addons-grid,.feat-grid,.plans,.who-grid,.why-grid,.steps{ perspective:1100px; }
[data-tilt]{ transform-style:preserve-3d; will-change:transform; }
/* depth pop only while actively hover-tilting (avoids perspective displacement at rest) */
[data-tilt].tilting>*{ transform:translateZ(15px); }
[data-tilt].tilting .addon__icon,[data-tilt].tilting .feat__icon,[data-tilt].tilting .who-card__icon,[data-tilt].tilting .why-card__icon{ transform:translateZ(40px); }
[data-tilt].tilting{ box-shadow:0 44px 80px -30px rgba(20,40,90,.25),0 0 0 1px rgba(37,99,235,.2); z-index:5; }

/* ---------- reveal animation ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .float-a,.float-b,.float-c,.marquee__track,.cube3d{ animation:none; }
  [data-tilt]>*,[data-tilt] .addon__icon,[data-tilt] .feat__icon,[data-tilt] .who-card__icon,[data-tilt] .why-card__icon{ transform:none; }
}

/* ---------- perf: blur only on sticky nav (Firefox-friendly) ---------- */
.glass,.addon,.feat,.who-card,.why-card,.faq__item,.plan,.step,.basecard,.calc,.chip,
.pill,.btn--ghost,.lang-toggle,.nav__burger,.marquee,.process__step{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.process__step{ background:#ffffff; }
.marquee{ background:#f6f9ff; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav.is-open .nav__links{
    display:flex; position:absolute; top:70px; inset-inline:0; flex-direction:column; gap:2px;
    background:#fff; padding:14px; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  }
  .hero__inner{ grid-template-columns:1fr; }
  .hero__scene{ height:440px; order:-1; }
  .hero__title{ font-size:clamp(1.9rem,7vw,2.6rem); }
  .basecard{ grid-template-columns:1fr; } .basecard__left{ position:static; }
  .addons-layout{ grid-template-columns:1fr; }
  .calc{ position:static; }
  .showcase{ grid-template-columns:1fr; } .bigdash{ transform:none; }
  .who-grid{ grid-template-columns:repeat(3,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(2,1fr); }
  .process__step::after{ display:none; }
}
@media (max-width:640px){
  .section{ padding:60px 0; }
  .nav__actions .btn--sm{ display:none; }
  .steps{ grid-template-columns:1fr; } .steps .step::after{ display:none; }
  .plans{ grid-template-columns:1fr; } .plan--featured{ transform:none; } .plan--featured:hover{ transform:translateY(-6px); }
  .addons-grid{ grid-template-columns:1fr; }
  .basecard__feats{ grid-template-columns:1fr; }
  .who-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:1fr; }
  .feat-grid{ grid-template-columns:1fr; }
  .showcase__feats{ grid-template-columns:1fr; }
  .process{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; gap:30px; }
  .hero__stats{ gap:18px; }
}

/* =========================================================
   SCREENSHOT GALLERY (dashboard section)
   ========================================================= */
.scrn-gallery{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.scrn-tabs{
  display:flex; gap:4px; padding:16px 20px;
  background:#f6f9ff;
  border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none;
}
.scrn-tabs::-webkit-scrollbar{ display:none; }
.scrn-tab{
  padding:9px 20px; border-radius:var(--radius-pill); border:0; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.9rem;
  color:var(--muted); background:transparent;
  transition:background .18s,color .18s; white-space:nowrap; flex-shrink:0;
}
.scrn-tab:hover{ background:rgba(37,99,235,.08); color:var(--ink); }
.scrn-tab.is-active{
  background:linear-gradient(150deg,var(--blue-500),var(--blue-700));
  color:#fff; box-shadow:0 8px 20px -8px rgba(37,99,235,.6);
}
.scrn-viewport{ position:relative; line-height:0; min-height:300px; }
.scrn-panel{ display:none; }
.scrn-panel.is-active{ display:block; }
.scrn-panel.fade-in{ animation:scrnFade .3s var(--ease); }
@keyframes scrnFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.scrn-img{
  width:100%; height:auto; display:block;
  border-radius:0 0 4px 4px;
  image-rendering:auto;
}
.scrn-footer{
  padding:16px 20px;
  background:#f6f9ff;
  border-top:1px solid var(--line);
  display:flex; justify-content:center;
}

/* feat footer "see all" */
.feat-footer{ text-align:center; margin-top:36px; }

/* =========================================================
   FEATURES PAGE (features.html)
   ========================================================= */
.feat-hero{
  padding:80px 0 56px; text-align:center;
  background:radial-gradient(ellipse 70% 60% at 50% -5%,rgba(59,130,246,.22),transparent 65%);
  position:relative; overflow:hidden;
}
.feat-hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px; opacity:.35;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 80%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000,transparent 80%);
}
.feat-hero .container{ position:relative; }
.feat-hero__pill{
  display:inline-flex; align-items:center; gap:9px; padding:7px 16px;
  border-radius:var(--radius-pill); background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18); font-weight:700; font-size:.82rem;
  color:var(--blue-700); margin-bottom:22px;
}
.feat-hero h1{ font-size:clamp(2rem,4.5vw,3.2rem); margin-bottom:18px; }
.feat-hero p{ color:var(--muted); font-size:1.1rem; max-width:55ch; margin:0 auto 32px; }
.feat-hero__stats{
  display:flex; gap:32px; justify-content:center; flex-wrap:wrap; margin-top:24px;
}
.feat-hero__stats li{ display:flex; flex-direction:column; align-items:center; }
.feat-hero__stats strong{ font-size:2rem; font-weight:800; background:linear-gradient(160deg,#8fc0ff,#4f8cf8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.feat-hero__stats span{ font-size:.82rem; color:var(--muted); }

/* category nav strip */
.cat-nav{
  position:sticky; top:70px; z-index:50;
  background:rgba(255,255,255,.9); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  padding:12px 0; overflow-x:auto; scrollbar-width:none;
}
.cat-nav::-webkit-scrollbar{ display:none; }
.cat-nav__inner{ display:flex; gap:8px; width:min(1180px,92vw); margin-inline:auto; padding:0 2px; }
.cat-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border-radius:var(--radius-pill); border:1.5px solid var(--line);
  background:#ffffff; color:var(--ink-2); font-weight:700; font-size:.83rem;
  cursor:pointer; white-space:nowrap; flex-shrink:0; text-decoration:none;
  transition:background .18s,border-color .18s,color .18s;
}
.cat-pill:hover{ background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.35); color:var(--ink); }
.cat-pill.is-active{ background:linear-gradient(150deg,var(--blue-500),var(--blue-700)); border-color:transparent; color:#fff; }
.cat-pill__icon{ width:20px; height:20px; display:grid; place-items:center; }

/* feature sections */
.feat-section{
  padding:72px 0;
  border-bottom:1px solid var(--line);
}
.feat-section:nth-child(even){ background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(37,99,235,.07),transparent 70%); }
.feat-section__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start;
}
.feat-section__inner.has-screenshot{ grid-template-columns:1.1fr .9fr; }
.feat-section__inner.flip{ direction:rtl; }
.feat-section__inner.flip>*{ direction:ltr; }
html[dir="rtl"] .feat-section__inner.flip{ direction:ltr; }
html[dir="rtl"] .feat-section__inner.flip>*{ direction:rtl; }

.feat-section__header{ margin-bottom:28px; }
.feat-section__icon{
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  color:#fff; margin-bottom:18px; box-shadow:0 16px 28px -12px rgba(37,99,235,.6);
}
.feat-section__title{ font-size:1.9rem; margin-bottom:10px; }
.feat-section__desc{ color:var(--muted); font-size:1rem; max-width:48ch; }
.feat-section__badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--radius-pill); font-weight:700; font-size:.78rem;
  margin-top:12px;
}
.badge--start{ background:rgba(148,163,184,.15); color:#94a3b8; border:1px solid rgba(148,163,184,.2); }
.badge--growth{ background:rgba(6,182,212,.12); color:#06b6d4; border:1px solid rgba(6,182,212,.2); }
.badge--pro{ background:rgba(139,92,246,.12); color:#a78bfa; border:1px solid rgba(139,92,246,.2); }
.badge--all{ background:rgba(37,99,235,.1); color:var(--blue-700); border:1px solid rgba(37,99,235,.2); }

/* feature checklist */
.feat-list{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-top:4px;
}
.feat-list--wide{ grid-template-columns:1fr 1fr 1fr; }
.feat-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:#ffffff; border:1px solid var(--line);
  font-size:.88rem; font-weight:500; color:var(--ink-2);
  box-shadow:var(--shadow-sm);
  transition:background .18s, border-color .18s;
}
.feat-item:hover{ background:rgba(37,99,235,.05); border-color:rgba(37,99,235,.25); color:var(--ink); }
.feat-item__check{
  width:18px; height:18px; border-radius:6px; flex-shrink:0; margin-top:1px;
  background:linear-gradient(150deg,var(--blue-500),var(--blue-700));
  display:grid; place-items:center;
}
.feat-item__check svg{ display:block; }

/* screenshot inside feature section */
.feat-section__screenshot{
  position:sticky; top:100px;
}
.feat-ss{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  transition:transform .4s var(--ease), box-shadow .4s;
}
.feat-ss:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 44px 80px -24px rgba(20,40,90,.25), 0 0 0 1px rgba(37,99,235,.18);
}
.feat-ss img{ width:100%; height:auto; display:block; }
.feat-ss + .feat-ss{ margin-top:16px; }
.feat-ss__caption{
  padding:10px 14px; font-size:.8rem; font-weight:600; color:var(--muted);
  background:#f6f9ff; border-top:1px solid var(--line);
  text-align:center;
}

/* no-screenshot layout: wide checklist */
.feat-section__content--full{ grid-column:1/-1; }

/* plan comparison table */
.compare-wrap{ overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--line); }
.compare-table{ width:100%; border-collapse:collapse; }
.compare-table th,.compare-table td{ padding:14px 18px; border-bottom:1px solid var(--line); text-align:start; font-size:.92rem; }
.compare-table th{ background:#f6f9ff; color:var(--ink); font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; }
.compare-table td{ color:var(--ink-2); }
.compare-table tr:last-child td,.compare-table tr:last-child th{ border-bottom:0; }
.compare-table tr:hover td{ background:rgba(37,99,235,.03); }
.compare-table td:not(:first-child){ text-align:center; }
.compare-table th:not(:first-child){ text-align:center; }
.chk--yes{ color:var(--blue-600); font-size:1.1rem; }
.chk--no{ color:#cbd5e1; font-size:1.1rem; }
.col-featured{ background:rgba(37,99,235,.08) !important; }

/* search bar */
.feat-search-wrap{ margin-bottom:16px; }
.feat-search{
  width:100%; max-width:520px; margin:0 auto; display:block;
  padding:13px 20px 13px 46px; border-radius:var(--radius-pill);
  background:#ffffff; border:1.5px solid var(--line);
  color:var(--ink); font-family:inherit; font-size:.95rem;
  box-shadow:var(--shadow-sm);
  transition:border-color .18s, background .18s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%2393a4c6' stroke-width='2'/%3E%3Cpath d='m20 20-3.5-3.5' stroke='%2393a4c6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:14px center;
}
html[dir="rtl"] .feat-search{ padding:13px 46px 13px 20px; background-position:calc(100% - 14px) center; }
.feat-search:focus{ outline:none; border-color:var(--blue-400); background-color:#ffffff; box-shadow:0 0 0 4px rgba(59,130,246,.12); }
.feat-search::placeholder{ color:var(--muted); }

/* highlight matched text */
mark.hl{ background:rgba(96,165,250,.3); color:var(--ink); border-radius:3px; padding:0 2px; }

@media (max-width:980px){
  .feat-section__inner,.feat-section__inner.has-screenshot{ grid-template-columns:1fr; }
  .feat-section__inner.flip{ direction:ltr; }
  .feat-section__screenshot{ position:static; }
  .cat-nav{ top:70px; }
}
@media (max-width:640px){
  .feat-list{ grid-template-columns:1fr; }
  .feat-list--wide{ grid-template-columns:1fr 1fr; }
  .feat-hero__stats{ gap:20px; }
  .scrn-tabs{ padding:12px 14px; }
  .scrn-tab{ padding:8px 14px; font-size:.82rem; }
}

/* =========================================================
   HERO REEL — rotating real screenshots
   ========================================================= */
.hero-reel{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
}
.hero-reel__screen{
  display:flex; flex-direction:column; align-items:center;
  width:100%;
  animation:floatLaptop 7s ease-in-out infinite;
  transform-style:preserve-3d;
}
@keyframes floatLaptop{
  0%,100%{ transform:rotateX(8deg) rotateY(-12deg) translateY(0); }
  50%{ transform:rotateX(8deg) rotateY(-12deg) translateY(-16px); }
}
.hero-reel__base{
  width:107%; height:14px;
  border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#cfd8ea,#9fb0d0);
  box-shadow:0 16px 24px -12px rgba(20,40,90,.5);
}
.hero-reel__frame{
  position:relative;
  width:100%; max-width:560px; height:340px;
  border-radius:16px; overflow:hidden;
  background:#f0f4ff;
  box-shadow:0 30px 70px -22px rgba(20,40,90,.35), 0 0 0 1px rgba(20,40,90,.06);
}
.hero-reel__slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:top center;
  background:#f0f4ff;
  opacity:0;
  transition:opacity .9s cubic-bezier(.4,0,.2,1);
  border-radius:16px;
}
.hero-reel__slide.is-active{ opacity:1; }
.hero-reel__caption{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero-reel__label{
  font-size:.95rem; font-weight:700; letter-spacing:.04em;
  color:var(--blue-700); background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18);
  padding:6px 20px; border-radius:var(--radius-pill);
  transition:opacity .3s;
}
.hero-reel__dots{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:200px;
}
.hero-reel__dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(37,99,235,.22);
  transition:background .3s, transform .3s;
  cursor:pointer;
}
.hero-reel__dot.is-active{
  background:var(--blue-600); transform:scale(1.4);
}