/* =====================================================================
 * Module 1 — Premium landing / storefront theme  (hand-written CSS3)
 * ---------------------------------------------------------------------
 * Loaded AFTER assets/css/app.css so it can safely restyle the shell.
 * Namespaced with `sx-` so nothing in the admin panel is affected.
 * Colours come from the admin settings via --brand / --brand-secondary.
 * ===================================================================== */

:root {
  --sx-primary: var(--brand, #1d63ed);
  --sx-accent: var(--brand-secondary-color, #f97316);

  --sx-bg: #ffffff;
  --sx-bg-soft: #f5f8ff;
  --sx-bg-elev: #ffffff;
  --sx-text: #0d1526;
  --sx-muted: #5b6880;
  --sx-border: #e4e9f2;
  --sx-shadow: 0 1px 2px rgba(13, 21, 38, .04), 0 12px 32px -12px rgba(13, 21, 38, .12);
  --sx-shadow-lg: 0 24px 60px -24px rgba(29, 99, 237, .35);
  --sx-radius: 18px;
  --sx-ring: rgba(29, 99, 237, .16);
  --sx-header: rgba(255, 255, 255, .82);
}

html.sx-dark {
  --sx-bg: #080c16;
  --sx-bg-soft: #0d1424;
  --sx-bg-elev: #111a2c;
  --sx-text: #eef2f9;
  --sx-muted: #9aa8c0;
  --sx-border: #1e293f;
  --sx-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px -16px rgba(0, 0, 0, .7);
  --sx-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .8);
  --sx-ring: rgba(96, 150, 255, .22);
  --sx-header: rgba(8, 12, 22, .82);
}

html { scroll-behavior: smooth; }

body.sx-body {
  margin: 0;
  background: var(--sx-bg);
  color: var(--sx-text);
  /* Inter renders Latin text; Bengali glyphs fall through to Tiro Bangla. */
  font-family: 'Inter', 'Tiro Bangla', serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

/* English UI uses Inter; Bengali keeps Tiro Bangla. */
html[lang="en"] {
  --default-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[lang="en"] body,
html[lang="en"] body.sx-body,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="en"] button {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
/* Bengali text inside an English page keeps its own face. */
html[lang="en"] :lang(bn),
html[lang="en"] .sx-bn {
  font-family: 'Tiro Bangla', serif;
}


.sx-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 18px; }
.sx-section { padding: 76px 0; }
.sx-section--soft { background: var(--sx-bg-soft); }

/* ---------------------------------------------------------------- type */
.sx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--sx-primary) 10%, transparent);
  color: var(--sx-primary);
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid color-mix(in srgb, var(--sx-primary) 18%, transparent);
}
.sx-h1 { font-size: clamp(22px, 3.4vw, 30px); line-height: 1.14; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 0; }
.sx-h2 { font-size: clamp(24px, 3.6vw, 38px); line-height: 1.2; font-weight: 800; letter-spacing: -.018em; margin: 12px 0 0; }
.sx-h3 { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.sx-lead { color: var(--sx-muted); font-size: clamp(15px, 1.7vw, 17.5px); line-height: 1.75; margin: 16px 0 0; }
.sx-muted { color: var(--sx-muted); }
.sx-grad {
  background: linear-gradient(102deg, var(--sx-primary), var(--sx-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sx-head { max-width: 660px; margin: 0 auto 46px; text-align: center; }

/* -------------------------------------------------------------- buttons */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  font-size: 13.5px; font-weight: 650; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.sx-btn:active { transform: translateY(1px); }
.sx-btn svg { width: 16px; height: 16px; }
.sx-btn--primary {
  background: linear-gradient(102deg, var(--sx-primary), color-mix(in srgb, var(--sx-primary) 68%, var(--sx-accent)));
  color: #fff; box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--sx-primary) 85%, transparent);
}
.sx-btn--primary:hover { box-shadow: 0 18px 36px -14px color-mix(in srgb, var(--sx-primary) 90%, transparent); transform: translateY(-1px); }
.sx-btn--accent { background: var(--sx-accent); color: #fff; }
.sx-btn--accent:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sx-btn--ghost { background: transparent; color: var(--sx-text); border-color: var(--sx-border); }
.sx-btn--ghost:hover { background: var(--sx-bg-soft); border-color: color-mix(in srgb, var(--sx-primary) 35%, var(--sx-border)); }
.sx-btn--wa { background: #22a05b; color: #fff; }
.sx-btn--wa:hover { filter: brightness(1.07); }
.sx-btn--sm { height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
.sx-btn--sm svg { width: 15px; height: 15px; }
.sx-btn--lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.sx-btn--block { width: 100%; }

/* --------------------------------------------------------------- header */
.sx-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--sx-header);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--sx-border);
}
.sx-topbar {
  background: linear-gradient(96deg, var(--sx-primary), var(--sx-accent));
  color: #fff; font-size: 12.5px; font-weight: 600;
}
.sx-topbar .sx-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; padding-block: 7px; flex-wrap: wrap; }
.sx-topbar a { color: #fff; text-decoration: none; opacity: .95; }
.sx-topbar a:hover { text-decoration: underline; }

.sx-nav { display: flex; align-items: center; gap: 14px; height: 70px; }
.sx-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sx-text); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.sx-logo img { height: 38px; width: auto; display: block; }
.sx-logo-mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--sx-primary), var(--sx-accent));
  font-weight: 800; font-size: 17px;
}
.sx-menu { display: none; align-items: center; gap: 4px; margin-inline: auto; }
.sx-menu a {
  padding: 9px 13px; border-radius: 10px; text-decoration: none;
  color: var(--sx-muted); font-size: 14.5px; font-weight: 600;
  transition: color .15s ease, background-color .15s ease;
}
.sx-menu a:hover { color: var(--sx-primary); background: color-mix(in srgb, var(--sx-primary) 8%, transparent); }
.sx-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.sx-icon-btn {
  width: 40px; height: 40px; display: inline-grid; place-items: center; flex: none;
  border-radius: 11px; border: 1px solid var(--sx-border); background: var(--sx-bg-elev);
  color: var(--sx-text); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sx-icon-btn:hover { color: var(--sx-primary); border-color: color-mix(in srgb, var(--sx-primary) 40%, var(--sx-border)); }
.sx-icon-btn svg { width: 18px; height: 18px; }

.sx-lang { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; border: 1px solid var(--sx-border); background: var(--sx-bg-elev); }
.sx-lang button {
  border: 0; background: transparent; cursor: pointer; border-radius: 8px;
  padding: 5px 9px; font-size: 12.5px; font-weight: 700; color: var(--sx-muted);
  font-family: inherit; transition: background .15s ease, color .15s ease;
}
.sx-lang button.is-active { background: var(--sx-primary); color: #fff; }

.sx-hide-sm { display: none; }
.sx-theme-sun { display: none; }
html.sx-dark .sx-theme-sun { display: block; }
html.sx-dark .sx-theme-moon { display: none; }

/* ------------------------------------------------------------ mobile nav */
.sx-drawer {
  position: fixed; inset: 0; z-index: 90; display: none;
}
.sx-drawer.is-open { display: block; }
.sx-drawer__backdrop { position: absolute; inset: 0; background: rgba(6, 11, 22, .55); backdrop-filter: blur(2px); }
.sx-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(84vw, 330px);
  background: var(--sx-bg); border-left: 1px solid var(--sx-border);
  padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  animation: sx-slide .24s ease;
}
@keyframes sx-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.sx-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sx-drawer__panel a.sx-drawer__link {
  padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--sx-text);
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
}
.sx-drawer__panel a.sx-drawer__link:hover { background: var(--sx-bg-soft); border-color: var(--sx-border); }
.sx-drawer__foot { margin-top: 14px; display: grid; gap: 8px; }

/* ----------------------------------------------------------------- hero */
.sx-hero { position: relative; overflow: hidden; padding: 66px 0 78px; }
.sx-hero::before {
  content: ''; position: absolute; inset: -30% -10% auto -10%; height: 620px; pointer-events: none;
  background:
    radial-gradient(46% 46% at 18% 30%, color-mix(in srgb, var(--sx-primary) 26%, transparent) 0%, transparent 70%),
    radial-gradient(40% 40% at 82% 18%, color-mix(in srgb, var(--sx-accent) 24%, transparent) 0%, transparent 70%);
  filter: blur(10px);
}
.sx-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, var(--sx-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sx-border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 55% at 50% 20%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 55% at 50% 20%, #000 0%, transparent 100%);
}
.sx-hero > .sx-wrap { position: relative; z-index: 1; }
.sx-hero__grid { display: grid; gap: 44px; align-items: center; }
.sx-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sx-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; font-size: 13.5px; font-weight: 600; color: var(--sx-muted); }
.sx-hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.sx-hero__trust svg { width: 17px; height: 17px; color: #16a34a; }

.sx-hero__art { position: relative; }
.sx-hero__card {
  border-radius: 22px; border: 1px solid var(--sx-border); background: var(--sx-bg-elev);
  box-shadow: var(--sx-shadow-lg); overflow: hidden;
}
.sx-hero__card img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.sx-hero__card-ph { aspect-ratio: 4/3; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--sx-primary) 12%, transparent), color-mix(in srgb, var(--sx-accent) 12%, transparent)); }
.sx-hero__chip {
  position: absolute; display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-radius: 14px; background: var(--sx-bg-elev);
  border: 1px solid var(--sx-border); box-shadow: var(--sx-shadow); font-size: 13px; font-weight: 700;
}
.sx-hero__chip--a { left: -6px; bottom: 42px; }
.sx-hero__chip--b { right: -6px; top: 30px; }
.sx-hero__chip i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--sx-primary) 12%, transparent); color: var(--sx-primary); }
.sx-hero__chip svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- stats */
.sx-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sx-stat {
  border: 1px solid var(--sx-border); background: var(--sx-bg-elev); border-radius: 16px;
  padding: 20px; text-align: center;
}
.sx-stat b { display: block; font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--sx-primary); }
.sx-stat span { font-size: 13px; color: var(--sx-muted); font-weight: 600; }

/* --------------------------------------------------------------- cards */
.sx-grid { display: grid; gap: 20px; }
.sx-grid--3 { grid-template-columns: 1fr; }
.sx-grid--4 { grid-template-columns: 1fr; }

.sx-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--sx-border); border-radius: var(--sx-radius);
  background: var(--sx-bg-elev); box-shadow: var(--sx-shadow); overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sx-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sx-primary) 32%, var(--sx-border)); box-shadow: var(--sx-shadow-lg); }
.sx-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--sx-bg-soft); }
.sx-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sx-card:hover .sx-card__media img { transform: scale(1.05); }
.sx-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sx-card__desc { color: var(--sx-muted); font-size: 14px; line-height: 1.7; margin: 0; }
.sx-card__foot { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.sx-icon-tile {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--sx-primary) 11%, transparent); color: var(--sx-primary);
}
.sx-icon-tile svg { width: 21px; height: 21px; }

.sx-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--sx-accent) 14%, transparent); color: var(--sx-accent);
}
.sx-badge-off {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 5px 11px; border-radius: 999px; background: var(--sx-accent); color: #fff;
  font-size: 12px; font-weight: 800; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5);
}

/* -------------------------------------------------------------- pricing */
.sx-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sx-price b { font-size: 30px; font-weight: 800; letter-spacing: -.025em; color: var(--sx-text); }
.sx-price s { color: var(--sx-muted); font-size: 15px; }
.sx-feat { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.sx-feat li { display: flex; gap: 9px; font-size: 14px; color: var(--sx-muted); line-height: 1.6; }
.sx-feat svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: #16a34a; }

.sx-plan { border-width: 1px; }
.sx-plan--popular { border-color: var(--sx-primary); box-shadow: 0 26px 60px -28px color-mix(in srgb, var(--sx-primary) 80%, transparent); }
.sx-plan__ribbon {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: 5px 16px; border-radius: 0 0 11px 11px; font-size: 11.5px; font-weight: 800;
  background: var(--sx-primary); color: #fff; letter-spacing: .02em;
}

/* ------------------------------------------------------------ portfolio */
.sx-work { position: relative; border-radius: var(--sx-radius); overflow: hidden; border: 1px solid var(--sx-border); background: var(--sx-bg-elev); }
.sx-work img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .45s ease; }
.sx-work:hover img { transform: scale(1.06); }
.sx-work__overlay {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 18px; color: #fff;
  background: linear-gradient(to top, rgba(6, 11, 22, .92), transparent);
}
.sx-work__overlay strong { display: block; font-size: 15.5px; }
.sx-work__overlay small { opacity: .8; font-size: 12.5px; }

/* ------------------------------------------------------------------ faq */
.sx-faq { border: 1px solid var(--sx-border); border-radius: var(--sx-radius); background: var(--sx-bg-elev); overflow: hidden; }
.sx-faq details { border-bottom: 1px solid var(--sx-border); }
.sx-faq details:last-child { border-bottom: 0; }
.sx-faq summary {
  cursor: pointer; list-style: none; padding: 18px 20px; display: flex; gap: 14px;
  align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px;
}
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary svg { width: 18px; height: 18px; color: var(--sx-primary); transition: transform .2s ease; flex: none; }
.sx-faq details[open] summary svg { transform: rotate(180deg); }
.sx-faq p { margin: 0; padding: 0 20px 20px; color: var(--sx-muted); font-size: 14.5px; line-height: 1.8; }

/* -------------------------------------------------------------- contact */
.sx-contact { display: grid; gap: 22px; }
.sx-contact__box { border: 1px solid var(--sx-border); border-radius: var(--sx-radius); background: var(--sx-bg-elev); padding: 24px; }
.sx-field { display: grid; gap: 6px; margin-bottom: 14px; }
.sx-field label { font-size: 13px; font-weight: 700; }
.sx-field input, .sx-field textarea, .sx-field select {
  width: 100%; box-sizing: border-box; border-radius: 11px; padding: 11px 13px;
  border: 1px solid var(--sx-border); background: var(--sx-bg); color: var(--sx-text);
  font-family: inherit; font-size: 14.5px; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.sx-field textarea { min-height: 120px; resize: vertical; }
.sx-field input:focus, .sx-field textarea:focus, .sx-field select:focus {
  border-color: var(--sx-primary); box-shadow: 0 0 0 4px var(--sx-ring);
}
.sx-info { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed var(--sx-border); }
.sx-info:last-child { border-bottom: 0; }
.sx-info strong { display: block; font-size: 14px; }
.sx-info span { font-size: 13.5px; color: var(--sx-muted); }
.sx-info a { color: inherit; text-decoration: none; }
.sx-info a:hover { color: var(--sx-primary); }

/* ------------------------------------------------------------------ cta */
.sx-cta {
  border-radius: 26px; padding: 52px 26px; text-align: center; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(112deg, var(--sx-primary), color-mix(in srgb, var(--sx-accent) 72%, var(--sx-primary)));
}
.sx-cta::after {
  content: ''; position: absolute; inset: 0; opacity: .22;
  background: radial-gradient(38% 60% at 15% 20%, #fff 0%, transparent 60%),
              radial-gradient(30% 50% at 85% 85%, #fff 0%, transparent 60%);
}
.sx-cta > * { position: relative; z-index: 1; }
.sx-cta h2 { font-size: clamp(23px, 3.4vw, 34px); font-weight: 800; margin: 0; letter-spacing: -.02em; }
.sx-cta p { margin: 12px auto 26px; max-width: 540px; opacity: .92; line-height: 1.7; }
.sx-cta .sx-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.sx-cta .sx-btn--ghost:hover { background: rgba(255, 255, 255, .14); }
.sx-cta .sx-btn--primary { background: #fff; color: var(--sx-primary); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .7); }

/* --------------------------------------------------------------- footer */
.sx-footer { background: var(--sx-bg-soft); border-top: 1px solid var(--sx-border); margin-top: 0; color: var(--sx-muted); }
html.sx-dark .sx-footer { background: #060a12; }
.sx-footer__grid { display: grid; gap: 34px; padding: 56px 0 34px; }
.sx-footer h4 { color: var(--sx-text); font-size: 14px; font-weight: 800; margin: 0 0 14px; letter-spacing: .01em; }
.sx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sx-footer a { color: var(--sx-muted); text-decoration: none; font-size: 14px; }
.sx-footer a:hover { color: var(--sx-primary); }
.sx-footer__about p { font-size: 14px; line-height: 1.8; max-width: 340px; }
.sx-social { display: flex; gap: 9px; margin-top: 16px; }
.sx-social a {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--sx-border); background: var(--sx-bg-elev); color: var(--sx-text);
}
.sx-social a:hover { background: var(--sx-primary); color: #fff; border-color: var(--sx-primary); }
.sx-social svg { width: 17px; height: 17px; }
.sx-footer__bar {
  border-top: 1px solid var(--sx-border); padding: 18px 0; font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
}

/* ------------------------------------------------------- floating whatsapp */
.sx-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #22a05b; color: #fff; box-shadow: 0 14px 30px -12px rgba(34, 160, 91, .9);
  animation: sx-pulse 2.6s infinite;
}
.sx-fab svg { width: 25px; height: 25px; }
@keyframes sx-pulse {
  0%, 100% { box-shadow: 0 14px 30px -12px rgba(34, 160, 91, .9), 0 0 0 0 rgba(34, 160, 91, .45); }
  50% { box-shadow: 0 14px 30px -12px rgba(34, 160, 91, .9), 0 0 0 14px rgba(34, 160, 91, 0); }
}

/* ------------------------------------------------------------- reveal fx */
.sx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.sx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sx-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------- breakpoints */
@media (min-width: 640px) {
  .sx-hide-sm { display: inline-flex; }
  .sx-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sx-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .sx-stats { grid-template-columns: repeat(4, 1fr); }
  .sx-contact { grid-template-columns: 1fr; }
}
@media (min-width: 960px) {
  .sx-section { padding: 92px 0; }
  .sx-menu { display: flex; }
  .sx-burger { display: none !important; }
  .sx-hero__grid { grid-template-columns: 1.05fr .95fr; }
  .sx-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .sx-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .sx-contact { grid-template-columns: 1.1fr .9fr; gap: 30px; }
  .sx-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* =====================================================================
 * MODULE 4 — Service-website redesign (pricing cards + client area)
 * Loaded last, so it refines the Module 1 theme without replacing it.
 * ===================================================================== */

html.sx-dark {
  --sx-bg: #070b14;
  --sx-bg-soft: #0b1220;
  --sx-bg-elev: #101a2b;
  --sx-border: #1c2740;
  --sx-shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, .9);
}

/* Ambient glow behind the hero, like a modern SaaS landing page. */
.sx-hero { position: relative; overflow: hidden; }
.sx-hero::before {
  content: ""; position: absolute; inset: -30% 30% 55% -10%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sx-primary) 28%, transparent), transparent);
  filter: blur(10px); pointer-events: none; z-index: 0;
}
.sx-hero::after {
  content: ""; position: absolute; inset: 20% -15% -40% 45%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sx-accent) 22%, transparent), transparent);
  filter: blur(10px); pointer-events: none; z-index: 0;
}
.sx-hero > * { position: relative; z-index: 1; }

/* ------------------------------------------------------ pricing cards */
.sx-plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--sx-border);
  border-radius: calc(var(--sx-radius) + 4px);
  background: var(--sx-bg-elev);
  overflow: hidden; position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sx-plan:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--sx-primary) 45%, var(--sx-border));
  box-shadow: var(--sx-shadow-lg);
}
.sx-plan--popular {
  border-color: color-mix(in srgb, var(--sx-accent) 55%, var(--sx-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sx-accent) 30%, transparent), var(--sx-shadow-lg);
}
.sx-plan__ribbon {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  padding: 5px 12px; border-radius: 999px;
  background: var(--sx-accent); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}

/* pricing image on top of the card (admin controlled) */
.sx-plan__media {
  position: relative; display: block; aspect-ratio: 4 / 3; min-height: 240px;
  background: color-mix(in srgb, var(--sx-primary) 9%, var(--sx-bg-soft));
  overflow: hidden; text-decoration: none;
}
.sx-plan__media img {
  width: 100%; height: 100%; object-fit: contain; object-position: center; display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.sx-plan:hover .sx-plan__media img { transform: scale(1.05); }
.sx-plan__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 78%, color-mix(in srgb, var(--sx-bg-elev) 55%, transparent));
}
.sx-plan__media-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: color-mix(in srgb, var(--sx-primary) 70%, transparent);
}
.sx-plan .sx-card__body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; flex: 1;
}
.sx-plan__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sx-plan__cat {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sx-primary) 88%, var(--sx-text));
  text-decoration: none;
}
.sx-plan__cat:hover { text-decoration: underline; }
.sx-plan .sx-h3 { font-size: 17px; line-height: 1.35; margin: 0; }
.sx-plan .sx-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sx-plan .sx-price { margin: 2px 0 0; }
.sx-plan .sx-price b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--sx-text); }
.sx-plan .sx-price s { color: var(--sx-muted); font-size: 15px; }
.sx-plan .sx-feat { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.sx-plan .sx-feat li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--sx-muted); }
.sx-plan .sx-feat svg { flex: none; margin-top: 2px; color: var(--sx-accent); }
.sx-plan .sx-card__foot { margin-top: auto; padding-top: 14px; display: grid; gap: 8px; }
.sx-plan__demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.sx-plan__demos .sx-btn { width: 100%; }

/* ------------------------------------------------ client area / auth */
.sx-auth { display: grid; place-items: center; padding: 64px 0; }
.sx-auth__card {
  width: 100%; max-width: 460px; padding: 30px;
  border: 1px solid var(--sx-border); border-radius: calc(var(--sx-radius) + 4px);
  background: var(--sx-bg-elev); box-shadow: var(--sx-shadow-lg);
}
.sx-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 22px;
  padding: 5px; border-radius: 12px; background: var(--sx-bg-soft); border: 1px solid var(--sx-border); }
.sx-auth__tab {
  height: 38px; display: grid; place-items: center; border-radius: 9px;
  font-size: 14px; font-weight: 700; text-decoration: none; color: var(--sx-muted);
}
.sx-auth__tab.is-active { background: var(--sx-primary); color: #fff; }
.sx-auth__hint { font-size: 12.5px; color: var(--sx-muted); line-height: 1.7; margin: 0; }

.sx-dash__top { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.sx-dash__grid { display: grid; gap: 20px; margin-top: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sx-dash__grid { grid-template-columns: 1.8fr 1fr; } }

.sx-table-wrap { overflow-x: auto; margin-top: 14px; }
.sx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sx-table th {
  text-align: left; padding: 10px 12px; color: var(--sx-muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--sx-border); white-space: nowrap;
}
.sx-table td { padding: 13px 12px; border-bottom: 1px solid var(--sx-border); white-space: nowrap; }
.sx-table tr:last-child td { border-bottom: 0; }

.sx-pill {
  display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--sx-primary) 14%, transparent);
  color: var(--sx-primary);
}
.sx-pill--ok { background: color-mix(in srgb, #22c55e 16%, transparent); color: #22c55e; }
.sx-pill--warn { background: color-mix(in srgb, var(--sx-accent) 16%, transparent); color: var(--sx-accent); }

.sx-info { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--sx-border); }
.sx-info:last-of-type { border-bottom: 0; }
.sx-info div { display: grid; gap: 2px; min-width: 0; }
.sx-info strong { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--sx-muted); font-weight: 700; }
.sx-info span { font-size: 14.5px; overflow-wrap: anywhere; }
.sx-icon-tile {
  flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--sx-primary) 12%, transparent); color: var(--sx-primary);
}

/* Compact media band when the admin has not uploaded a pricing image. */
.sx-plan__media:not(:has(img)) { aspect-ratio: 5 / 1.4; min-height: 0; }

/* Pricing / service card image: show more of the original artwork on every
   breakpoint without stretching it and without touching the card width. */
@media (max-width: 900px) {
  .sx-plan__media { aspect-ratio: 16 / 10; min-height: 260px; }
}
@media (max-width: 560px) {
  .sx-plan__media { aspect-ratio: 4 / 3; min-height: 230px; }
}
.sx-plan__media:not(:has(img))::after { display: none; }


/* ===== MODULE 4 — Client area sub navigation ===== */
.sx-clientnav {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px;
  padding: 6px; border: 1px solid var(--sx-border, #e5e7eb);
  border-radius: 14px; background: #fff;
}
.sx-clientnav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: #4b5563; text-decoration: none; transition: background .15s ease, color .15s ease;
}
.sx-clientnav a:hover { background: #f3f4f6; color: #111827; }
.sx-clientnav a.is-active { background: #111827; color: #fff; }

/* ===== MODULE 5 — service checkout (theme aware) ===================== */
.sx-checkout { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1024px) { .sx-checkout { grid-template-columns: minmax(0,1fr) 360px; } }
.sx-checkout__main { display: grid; gap: 20px; }
.sx-checkout__side { position: sticky; top: 90px; }
.sx-checkout .sx-card:hover { transform: none; }
.sx-pad { padding: 22px; }
.sx-sub { margin: 6px 0 0; font-size: 14px; }
.sx-xs { font-size: 12px; }
.sx-ok { color: #10b981; }
.sx-err { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: #f43f5e; }
.sx-grid2 { display: grid; gap: 4px 16px; margin-top: 16px; }
@media (min-width: 640px) { .sx-grid2 { grid-template-columns: 1fr 1fr; } .sx-col2 { grid-column: 1 / -1; } }
.sx-checkout .sx-field textarea { min-height: 92px; }
.sx-pay { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 640px) { .sx-pay { grid-template-columns: 1fr 1fr; } }
.sx-pay__opt {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 14px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--sx-border); border-radius: 12px; background: var(--sx-bg-soft);
  transition: border-color .2s ease, background .2s ease;
}
.sx-pay__opt:has(:checked) {
  border-color: var(--sx-primary);
  background: color-mix(in srgb, var(--sx-primary) 12%, var(--sx-bg-soft));
}
.sx-pay__opt img { height: 20px; width: auto; }
.sx-sum__head { margin: 16px 0; padding: 14px; border-radius: 12px; background: var(--sx-bg-soft); }
.sx-sum__title { margin: 0; font-weight: 700; }
.sx-sum__head p { margin: 2px 0 0; }
.sx-sum { margin: 4px 0 0; display: grid; gap: 8px; font-size: 14px; }
.sx-sum > div { display: flex; justify-content: space-between; gap: 12px; }
.sx-sum dt { color: var(--sx-muted); }
.sx-sum dd { margin: 0; font-weight: 600; }
.sx-sum__total { padding-top: 10px; border-top: 1px solid var(--sx-border); font-size: 16px; }
.sx-sum__total dt { color: var(--sx-text); font-weight: 700; }
.sx-sum__payable {
  margin-top: 6px; padding: 10px 12px; border-radius: 12px;
  background: var(--sx-bg-soft); border: 1px solid var(--sx-border);
  font-size: 15px;
}
.sx-sum__payable dt { color: var(--sx-text); font-weight: 700; }
.sx-sum__payable dd { font-weight: 800; }
.sx-coupon { display: flex; gap: 8px; }
.sx-coupon input { flex: 1; }
.sx-terms { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: 12px; color: var(--sx-muted); }
.sx-terms a { color: var(--sx-primary); text-decoration: underline; }

/* ---------------------------------------------------------- floating cart */
.sx-cart-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; font-size: 14px; }
.sx-cart-fab[data-empty="1"] .sx-cart-fab__count { display: none; }
.sx-cart-fab.is-busy { opacity: .7; pointer-events: none; }

.sx-cart-fab__btn {
  position: relative; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--sx-primary); color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.22); transition: transform .15s ease;
}
.sx-cart-fab__btn:hover { transform: translateY(-2px); }
.sx-cart-fab__count {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 999px; background: var(--sx-text); color: var(--sx-bg);
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}

.sx-cart-panel {
  position: absolute; right: 0; bottom: 68px; width: min(340px, calc(100vw - 40px));
  background: var(--sx-card, var(--sx-bg)); color: var(--sx-text);
  border: 1px solid var(--sx-border); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.20); overflow: hidden;
}
.sx-cart-panel__head,
.sx-cart-panel__foot { padding: 12px 14px; border-bottom: 1px solid var(--sx-border); }
.sx-cart-panel__foot { border-bottom: 0; border-top: 1px solid var(--sx-border); }
.sx-cart-panel__head { display: flex; align-items: center; justify-content: space-between; }
.sx-cart-panel__close,
.sx-cart-remove { background: none; border: 0; cursor: pointer; color: inherit; font-size: 20px; line-height: 1; opacity: .6; }
.sx-cart-panel__close:hover, .sx-cart-remove:hover { opacity: 1; }
.sx-cart-panel__body { max-height: 46vh; overflow-y: auto; padding: 8px 14px; }
.sx-cart-panel__total { display: flex; justify-content: space-between; margin-bottom: 10px; }

.sx-cart-item {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px;
  align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--sx-border);
}
.sx-cart-item:last-child { border-bottom: 0; }
.sx-cart-item__info { display: flex; flex-direction: column; min-width: 0; }
.sx-cart-item__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-cart-item__meta { font-size: 12px; opacity: .65; }
.sx-cart-item__qty { display: inline-flex; align-items: center; gap: 6px; }
.sx-cart-item__price { font-weight: 600; white-space: nowrap; }

.sx-qty-btn {
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--sx-border); background: transparent; color: inherit; line-height: 1;
}
.sx-qty-btn:hover { background: var(--sx-bg-soft); }

/* checkout cart lines */
.sx-cart-lines { margin-top: 14px; border-top: 1px solid var(--sx-border); }
.sx-cart-empty { padding: 14px 0; }
.sx-cart-line {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px;
  align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--sx-border);
}
.sx-cart-line:last-child { border-bottom: 0; }
.sx-cart-line-main { display: flex; flex-direction: column; min-width: 0; }
.sx-cart-line-qty { display: inline-flex; align-items: center; gap: 6px; }
.sx-cart-line-qty input {
  width: 56px; padding: 4px 6px; text-align: center;
  border: 1px solid var(--sx-border); border-radius: 8px; background: transparent; color: inherit;
}
.sx-cart-line-total { font-weight: 600; white-space: nowrap; }

.sx-sum__items { list-style: none; margin: 10px 0 0; padding: 0; }
.sx-sum__items li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.sx-sum__items em { font-style: normal; }

@media (max-width: 560px) {
  .sx-cart-fab { right: 14px; bottom: 14px; }
  .sx-cart-line, .sx-cart-item { grid-template-columns: 1fr auto auto; }
  .sx-cart-line-total, .sx-cart-item__price { grid-column: 2 / 3; }
}

/* ------------------------------------------------ cart & advance payment
   Alignment polish for the checkout cart lines + the floating widget.
   (Layout only — colours, fonts and the overall design are unchanged.) */
.sx-cart-fab[data-empty="1"] { display: none !important; }

.sx-plan__advance { margin: 0; font-size: 13px; color: var(--sx-muted); }
.sx-plan__advance b { color: var(--sx-text); }

.sx-cart-line { column-gap: 14px; }
.sx-cart-line-main { gap: 2px; padding-right: 6px; }
.sx-cart-line-qty { flex: 0 0 auto; gap: 8px; }
.sx-cart-line-qty .sx-qty-btn { width: 28px; height: 28px; font-size: 15px; display: inline-grid; place-items: center; }
.sx-cart-line-qty input { width: 52px; height: 28px; }
.sx-cart-line-total { min-width: 92px; text-align: right; }
.sx-cart-line .sx-cart-remove,
.sx-cart-item .sx-cart-remove {
  width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 18px;
}
.sx-cart-line .sx-cart-remove:hover,
.sx-cart-item .sx-cart-remove:hover { background: var(--sx-bg-soft); }
.sx-cart-item__qty { gap: 8px; }

@media (max-width: 560px) {
  .sx-cart-line {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "main main remove" "qty total total";
    row-gap: 8px;
  }
  .sx-cart-line-main  { grid-area: main; }
  .sx-cart-line-qty   { grid-area: qty; justify-self: start; }
  .sx-cart-line-total { grid-area: total; grid-column: auto; justify-self: end; min-width: 0; }
  .sx-cart-line .sx-cart-remove { grid-area: remove; justify-self: end; }
}

/* ------------------------------------------- service details (single) */
.sx-svc__top { padding-top: 28px; }
.sx-svc__crumbs { font-size: 14px; margin-bottom: 14px; }
.sx-svc__crumbs a { color: inherit; text-decoration: none; }
.sx-svc__hero {
  margin: 0; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--sx-border); background: var(--sx-bg-soft);
  box-shadow: var(--sx-shadow-lg);
}
.sx-svc__hero img {
  display: block; width: 100%; height: auto; max-height: 78vh;
  object-fit: contain; object-position: center;
}
.sx-svc__hero--ph { display: grid; place-items: center; min-height: 220px; }
.sx-svc__bar {
  margin-top: 26px; padding: 24px; display: grid; gap: 18px;
  border: 1px solid var(--sx-border); border-radius: var(--sx-radius);
  background: var(--sx-bg-elev); box-shadow: var(--sx-shadow);
}
.sx-svc__title { margin: 10px 0 0; font-size: clamp(20x, 4.5vw, 24px); line-height: 1.18; text-wrap: balance; }
.sx-svc__lead { margin-top: 10px; }
.sx-svc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 16px; }
.sx-svc__delivery { font-size: 14px; color: var(--sx-muted); font-weight: 600; }
.sx-svc__bar-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sx-svc__cat { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--sx-muted); }
.sx-svc__cat a { color: inherit; text-decoration: none; }
.sx-svc__cat a:hover { text-decoration: underline; }
.sx-svc__demo { padding: 16px; margin-top: 20px; max-width: 420px; }
.sx-svc__desc-title { margin: 0 0 16px; }
.sx-svc__desc { font-size: 16px; line-height: 1.85; }

@media (min-width: 900px) {
  .sx-svc__bar { grid-template-columns: 1fr auto; align-items: center; }
  .sx-svc__bar-cta { justify-content: flex-end; }
}

/* ---------------------------------------------------------------------
 * Desktop single-service layout: gallery left, details right.
 * Below 1024px the split is a plain block flow, so the mobile and tablet
 * layouts render exactly as before.
 * ------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .sx-svc__split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .sx-svc__split .sx-svc__hero img { max-height: 60vh; }
  .sx-svc__split .sx-svc__bar {
    margin-top: 0;
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 28px;
  }
  .sx-svc__split .sx-svc__bar-cta { justify-content: flex-start; }
  .sx-svc__split .sx-svc__bar-cta .sx-btn { flex: 1 1 auto; justify-content: center; }
  .sx-svc__split-info { position: sticky; top: 96px; }
  .sx-svc__title { font-size: clamp(24px, 3vw, 30px); line-height: 1.16; }
}

/* =====================================================================
 * Pricing grid — 2 cards per row on mobile (tablet/desktop unchanged).
 * ===================================================================== */
@media (max-width: 639.98px) {
  .sx-grid--pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sx-grid--pricing > * { min-width: 0; }
  .sx-grid--pricing .sx-card__body { padding: 14px; gap: 8px; }
  .sx-grid--pricing .sx-h3 { font-size: 15px; line-height: 1.3; }
  .sx-grid--pricing .sx-card__desc { font-size: 12px; }
  .sx-grid--pricing .sx-price b { font-size: 20px; }
  .sx-grid--pricing .sx-price s,
  .sx-grid--pricing .sx-price small { font-size: 11px; }
  .sx-grid--pricing .sx-feat { font-size: 12px; }
  .sx-grid--pricing .sx-btn { height: 34px; font-size: 12px; padding: 0 10px; }
  .sx-grid--pricing .sx-plan__ribbon { font-size: 10px; padding: 3px 8px; }
}

/* checkout cart item thumbnails (layout only) */
.sx-cart-line-main { flex-direction: row; align-items: center; gap: 10px; }
.sx-cart-line-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sx-cart-line-thumb {
  width: 70px; height: 70px; flex: 0 0 70px;
  object-fit: cover; border-radius: 10px; display: block;
  border: 1px solid var(--sx-border); background: var(--sx-bg-soft);
}
.sx-cart-line-thumb--ph { background: var(--sx-bg-soft); }
@media (max-width: 560px) {
  .sx-cart-line-thumb { width: 55px; height: 55px; flex: 0 0 55px; border-radius: 8px; }
}


/* =====================================================================
 * Ratings — average rating + review count (cards, single page)
 * ===================================================================== */
.sx-stars { display: inline-flex; align-items: center; gap: 1px; }
.sx-stars svg { width: 14px; height: 14px; }
.sx-rev__summary .sx-stars svg { width: 19px; height: 19px; }
.sx-stars__i { display: inline-flex; color: color-mix(in srgb, var(--sx-muted) 45%, transparent); }
.sx-stars__i.is-on { color: #f5a524; }
.sx-stars__i.is-on svg { fill: #f5a524; }
.sx-rating {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; color: var(--sx-muted); text-decoration: none;
}
.sx-rating b { color: var(--sx-text); font-weight: 700; }
a.sx-rating:hover { color: var(--sx-text); }

/* =====================================================================
 * Product reviews (single service page)
 * ===================================================================== */
.sx-rev { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .sx-rev { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; gap: 28px; }
}
.sx-rev__summary {
  padding: 20px; border: 1px solid var(--sx-border); border-radius: var(--sx-radius);
  background: var(--sx-bg-elev); box-shadow: var(--sx-shadow); text-align: center;
}
.sx-rev__score { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.sx-rev__score small { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--sx-muted); }
.sx-rev__summary .sx-stars { margin-top: 10px; }
.sx-rev__bars { display: grid; gap: 6px; margin-top: 16px; text-align: left; }
.sx-rev__bar { display: grid; grid-template-columns: 46px 1fr 28px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sx-muted); }
.sx-rev__bar i { display: block; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--sx-muted) 22%, transparent); overflow: hidden; }
.sx-rev__bar i span { display: block; height: 100%; border-radius: 999px; background: #f5a524; }
.sx-rev__list { display: grid; gap: 12px; }
.sx-rev__item {
  padding: 16px 18px; border: 1px solid var(--sx-border); border-radius: var(--sx-radius);
  background: var(--sx-bg-elev);
}
.sx-rev__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sx-rev__who { font-weight: 700; font-size: 14.5px; }
.sx-rev__date { font-size: 12.5px; color: var(--sx-muted); }
.sx-rev__title { margin: 8px 0 0; font-size: 15px; font-weight: 700; }
.sx-rev__text { margin: 6px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--sx-muted); }
.sx-rev__form {
  margin-top: 20px; padding: 20px; border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius); background: var(--sx-bg-elev);
}
.sx-rev__form h3 { margin: 0 0 14px; font-size: 17px; font-weight: 800; }
.sx-rev__row { display: grid; gap: 12px; }
@media (min-width: 640px) { .sx-rev__row { grid-template-columns: 1fr 1fr; } }
.sx-rev__field { margin-bottom: 12px; }
.sx-rev__errors { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px;
  background: color-mix(in srgb, #e11d48 12%, transparent); color: #b3123c; }
.sx-rev__errors ul { margin: 0; padding-left: 18px; }
.sx-rev__ok { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px;
  background: color-mix(in srgb, #22a05b 14%, transparent); color: #12764a; }
/* star picker */
.sx-rev__stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.sx-rev__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sx-rev__stars label { cursor: pointer; color: color-mix(in srgb, var(--sx-muted) 45%, transparent); line-height: 1; }
.sx-rev__stars label svg { width: 24px; height: 24px; }
.sx-rev__stars label:hover, .sx-rev__stars label:hover ~ label,
.sx-rev__stars input:checked ~ label { color: #f5a524; }
.sx-rev__stars label:hover svg, .sx-rev__stars label:hover ~ label svg,
.sx-rev__stars input:checked ~ label svg { fill: #f5a524; }
.sx-rev__stars input:focus-visible + label { outline: 2px solid var(--sx-primary); outline-offset: 2px; border-radius: 4px; }

/* =====================================================================
 * Mobile bottom navigation (mobile only — desktop untouched)
 * Built defensively so it renders on every mobile browser:
 *  - solid colour fallbacks before color-mix()/backdrop-filter (older
 *    Safari, Samsung Internet, Firefox Android ignore those and would
 *    otherwise paint a fully transparent, invisible bar)
 *  - env()/constant() safe-area insets for the iPhone home indicator
 *  - very high z-index so sticky headers/FABs can never cover it
 * ===================================================================== */
.sx-bottomnav { display: none; }
@media (max-width: 1023.98px) and (pointer: coarse), (max-width: 767.98px) {
  .sx-bottomnav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0;
    width: 100%; margin: 0; z-index: 2147483000;
    /* iOS < 11.2 used constant(); modern browsers use env() */
    padding: 6px 6px calc(6px + constant(safe-area-inset-bottom));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(6px + env(safe-area-inset-left, 0px));
    padding-right: calc(6px + env(safe-area-inset-right, 0px));
    background: var(--sx-bg-elev, #ffffff); /* fallback first */
    border-top: 1px solid var(--sx-border, rgba(0, 0, 0, .1));
    box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .45);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    visibility: visible; opacity: 1; pointer-events: auto;
  }
  @supports (background: color-mix(in srgb, red 50%, transparent)) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sx-bottomnav {
      background: color-mix(in srgb, var(--sx-bg-elev) 92%, transparent);
      -webkit-backdrop-filter: saturate(1.4) blur(12px);
      backdrop-filter: saturate(1.4) blur(12px);
    }
  }
  .sx-bottomnav__item {
    display: grid; justify-items: center; align-content: center; gap: 3px;
    min-height: 48px; padding: 7px 2px;
    border-radius: 12px; text-decoration: none; color: var(--sx-muted);
    font-size: 11px; line-height: 1.1; font-weight: 650;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
  }
  .sx-bottomnav__item:active { transform: scale(.96); }
  .sx-bottomnav__icon { display: grid; place-items: center; }
  .sx-bottomnav__label { display: block; }
  .sx-bottomnav__item.is-active {
    color: var(--sx-primary);
    background: rgba(0, 0, 0, .04);
  }
  @supports (background: color-mix(in srgb, red 50%, transparent)) {
    .sx-bottomnav__item.is-active {
      background: color-mix(in srgb, var(--sx-primary) 10%, transparent);
    }
  }
  .sx-bottomnav__item.is-active .sx-bottomnav__icon { transform: translateY(-1px); }
  /* keep content and floating buttons clear of the bar (incl. safe area) */
  .sx-body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .sx-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .sx-cart-fab { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* Very short viewports (landscape phones): keep it compact but visible. */
@media (max-height: 420px) and (max-width: 1023.98px) and (pointer: coarse) {
  .sx-bottomnav__item { min-height: 40px; padding: 4px 2px; font-size: 10px; }
}

/* Printing must never include the bar. */
@media print { .sx-bottomnav { display: none !important; } }


/* =====================================================================
 * Service description — editorial card with rich-text typography.
 * Scoped to the description section only; the rest of the page is
 * untouched.
 * ===================================================================== */
.sx-desc-section { padding-block: clamp(32px, 6vw, 64px); }

.sx-desc {
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius);
  background: var(--sx-bg-elev);
  box-shadow: var(--sx-shadow);
  overflow: hidden;
}

.sx-desc__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--sx-border);
  background: color-mix(in srgb, var(--sx-primary) 6%, transparent);
}
.sx-desc__icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sx-primary) 13%, transparent);
  color: var(--sx-primary);
}
.sx-desc__headtext { min-width: 0; }
.sx-desc__title { margin: 0; font-size: clamp(18px, 3.4vw, 22px); line-height: 1.25; letter-spacing: -.01em; }
.sx-desc__sub {
  margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--sx-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sx-desc__body { padding: clamp(18px, 4vw, 32px); }

@media (min-width: 900px) {
  .sx-desc__head { padding: 22px 32px; }
  .sx-desc__body { max-width: 78ch; }
}

/* ---- rich text rendering (admin editor output) ---- */
.sx-rte {
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 1.85;
  color: var(--sx-text);
  overflow-wrap: anywhere;
}
.sx-rte > *:first-child { margin-top: 0; }
.sx-rte > *:last-child { margin-bottom: 0; }
.sx-rte p { margin: 0 0 1.05em; }
.sx-rte h1, .sx-rte h2, .sx-rte h3, .sx-rte h4, .sx-rte h5, .sx-rte h6 {
  margin: 1.7em 0 .6em; line-height: 1.3; letter-spacing: -.015em; text-wrap: balance;
}
.sx-rte h1 { font-size: 1.55em; font-weight: 800; }
.sx-rte h2 { font-size: 1.32em; font-weight: 750; }
.sx-rte h3 { font-size: 1.15em; font-weight: 700; }
.sx-rte h4, .sx-rte h5, .sx-rte h6 { font-size: 1.02em; font-weight: 700; }
.sx-rte h2 { padding-bottom: .28em; border-bottom: 1px solid var(--sx-border); }
.sx-rte ul, .sx-rte ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.sx-rte li { margin: .35em 0; padding-left: .15em; }
.sx-rte li::marker { color: var(--sx-primary); font-weight: 700; }
.sx-rte a {
  color: var(--sx-primary); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.sx-rte a:hover { text-decoration-thickness: 2px; }
.sx-rte strong, .sx-rte b { font-weight: 750; }
.sx-rte mark { background: color-mix(in srgb, var(--sx-primary) 18%, transparent); padding: 0 .2em; border-radius: 4px; }
.sx-rte blockquote {
  margin: 1.4em 0; padding: 14px 18px;
  border-left: 3px solid var(--sx-primary);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--sx-primary) 6%, transparent);
  color: var(--sx-muted); font-size: .97em;
}
.sx-rte blockquote p:last-child { margin-bottom: 0; }
.sx-rte pre {
  margin: 1.4em 0; padding: 16px 18px; border-radius: 14px;
  background: #0f172a; color: #e2e8f0; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; line-height: 1.65; white-space: pre-wrap;
}
.sx-rte code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: color-mix(in srgb, var(--sx-muted) 14%, transparent);
  padding: .12em .38em; border-radius: 6px;
}
.sx-rte pre code { background: none; padding: 0; }
.sx-rte img {
  max-width: 100%; height: auto; display: block;
  margin: 1.4em auto; border-radius: 14px; border: 1px solid var(--sx-border);
}
.sx-rte hr { border: 0; border-top: 1px solid var(--sx-border); margin: 2em 0; }
.sx-rte figure { margin: 1.4em 0; }
.sx-rte figcaption { margin-top: .5em; font-size: .85em; color: var(--sx-muted); text-align: center; }

/* tables scroll horizontally on small screens instead of breaking layout */
.sx-rte table {
  width: 100%; border-collapse: collapse; margin: 1.4em 0;
  font-size: .94em; display: block; overflow-x: auto; white-space: nowrap;
}
.sx-rte th, .sx-rte td {
  border: 1px solid var(--sx-border); padding: 10px 12px; text-align: left; vertical-align: top;
}
.sx-rte th { background: var(--sx-bg-soft); font-weight: 700; }
.sx-rte tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sx-muted) 5%, transparent); }
@media (min-width: 700px) {
  .sx-rte table { display: table; white-space: normal; }
}

/* =====================================================================
 * Service grid — compact, tighter cards (presentation only).
 * ===================================================================== */
.sx-grid--pricing .sx-card { border-radius: 16px; }
.sx-grid--pricing .sx-card__body { gap: 7px; }
.sx-grid--pricing .sx-plan__cat {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sx-primary); text-decoration: none;
}
.sx-grid--pricing .sx-h3 { letter-spacing: -.01em; }
.sx-grid--pricing .sx-card__desc {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 639.98px) {
  .sx-grid--pricing { gap: 10px; }
  .sx-grid--pricing .sx-card { border-radius: 14px; }
  .sx-grid--pricing .sx-card__body { padding: 11px 11px 12px; gap: 5px; }
  .sx-grid--pricing .sx-plan__cat { font-size: 10px; }
  .sx-grid--pricing .sx-h3 { font-size: 13.5px; line-height: 1.28; }
  .sx-grid--pricing .sx-card__desc { font-size: 11.5px; line-height: 1.5; }
  .sx-grid--pricing .sx-price { gap: 5px; align-items: baseline; }
  .sx-grid--pricing .sx-price b { font-size: 17px; }
  .sx-grid--pricing .sx-card__foot { padding-top: 9px; gap: 6px; }
  .sx-grid--pricing .sx-btn { height: 32px; font-size: 11.5px; padding: 0 9px; border-radius: 10px; }
  .sx-grid--pricing .sx-btn--sm { flex: 1 1 0; justify-content: center; }
  .sx-grid--pricing .sx-btn svg { width: 13px; height: 13px; }
}

/* =====================================================================
 * Homepage pricing grid — compact, equal-height cards (home page only).
 * Scoped to .sx-grid--pricing-home so the services page and the single
 * service page keep their existing look and demo buttons.
 * ===================================================================== */
.sx-grid--pricing-home { align-items: stretch; }
.sx-grid--pricing-home > .sx-plan { height: 100%; }

/* image band — slightly taller, full image visible, no distortion */
.sx-grid--pricing-home .sx-plan__media {
  aspect-ratio: 16 / 10;
  min-height: 0;
  max-height: 230px;
  background: var(--sx-soft, #f4f6fb);
}
.sx-grid--pricing-home .sx-plan__media img {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* tighter body, no empty space */
.sx-grid--pricing-home .sx-card__body { padding: 14px 16px; gap: 7px; }
.sx-grid--pricing-home .sx-h3 {
  font-size: 16px;
  line-height: 1.25;
  width: 100%;
  max-width: 100%;
  text-wrap: normal;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sx-grid--pricing-home .sx-price b { font-size: 22px; }
.sx-grid--pricing-home .sx-card__foot { padding-top: 12px; }

/* hide Live Demo / Admin Demo on the homepage only */
.sx-grid--pricing-home .sx-plan__demos { display: none !important; }

@media (max-width: 900px) {
  .sx-grid--pricing-home .sx-plan__media { aspect-ratio: 16 / 10; min-height: 0; max-height: 240px; }
}
@media (max-width: 639.98px) {
  .sx-grid--pricing-home .sx-plan__media { aspect-ratio: 4 / 3; min-height: 0; max-height: 190px; }
  .sx-grid--pricing-home .sx-card__body { padding: 12px 12px 14px; gap: 6px; }
  .sx-grid--pricing-home .sx-h3 { font-size: 15px; line-height: 1.22; }
}


/* =====================================================================
 * TASK 1 — Single pricing page: Order Now + Live Demo + Admin Demo must
 * sit in ONE row on mobile (equal width, equal height, no wrapping).
 * Tablet (>=768px) and desktop layouts stay exactly as before.
 * ================================================================== */
@media (max-width: 767.98px) {
  .sx-svc__bar-cta {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .sx-svc__bar-cta .sx-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    font-size: 12px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sx-svc__bar-cta .sx-btn svg { flex: none; width: 15px; height: 15px; }
}
@media (max-width: 400px) {
  .sx-svc__bar-cta { gap: 6px; }
  .sx-svc__bar-cta .sx-btn { font-size: 11px; padding: 8px 4px; gap: 4px; }
  .sx-svc__bar-cta .sx-btn svg { width: 14px; height: 14px; }
}

/* =====================================================================
 * WHATSAPP CHAT — floating button (replaces the removed AI assistant).
 * Same position/size as before, light + dark mode, fully responsive.
 * ================================================================== */
.sx-wa {
  --sx-wa-green: #25d366;
  position: fixed; right: 16px; bottom: 16px; z-index: 9997;
}
.sx-wa__fab {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 56px; min-width: 56px; padding: 0 16px 0 14px;
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--sx-wa-green); color: #fff; text-decoration: none;
  box-shadow: 0 12px 28px rgba(37, 211, 102, .38);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: sx-wa-pulse 2.8s infinite;
}
.sx-wa__fab:hover { transform: translateY(-2px); color: #fff; }
.sx-wa__label { font-size: 14px; font-weight: 700; white-space: nowrap; }
@keyframes sx-wa-pulse {
  0%   { box-shadow: 0 12px 28px rgba(37, 211, 102, .38), 0 0 0 0 rgba(37, 211, 102, .45); }
  70%  { box-shadow: 0 12px 28px rgba(37, 211, 102, .38), 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 12px 28px rgba(37, 211, 102, .38), 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 1023.98px) {
  .sx-wa { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
  .sx-wa__fab { padding: 0; width: 56px; justify-content: center; }
  .sx-wa__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-wa__fab { animation: none !important; transition: none; }
}