/* ==========================================================================
   Service offer pages (/service-details/<key>) + ServiceVideo (.sdv)
   --------------------------------------------------------------------------
   Loaded by those pages only. Built on the site tokens (site.css §1), so it
   follows the dashboard accent and the light / dark theme. Scoped to .sd —
   the shared review gallery it reuses is only adjusted inside .sd.
   ========================================================================== */

.sd { overflow-x: clip; }
.sd *, .sd *::before, .sd *::after { box-sizing: border-box; }
.sd :is(h1, h2, h3, p, li, dd, dt, span, b) { overflow-wrap: anywhere; }
.sd .num { font-variant-numeric: tabular-nums; }
.sd [id] { scroll-margin-top: 60px; }
.sd-arrow, .sd-check { flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .sd-arrow { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Frame & type
   -------------------------------------------------------------------------- */
.sd-sec { position: relative; padding-block: clamp(2.6rem, 5vw, 4rem); }
.sd-sec--alt { background: var(--background-alt); border-block: 1px solid var(--border); }
.sd-head { display: grid; gap: .4rem; max-width: 680px; margin-block-end: clamp(1.2rem, 2.6vw, 1.8rem); }
.sd-head--center { justify-items: center; margin-inline: auto; text-align: center; }
.sd-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1rem; max-width: none; }
.sd-head--row > div { display: grid; gap: .4rem; min-width: 0; }
.sd-h2 { margin: 0; font-size: clamp(1.45rem, 2.9vw, 2.1rem); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.sd-sub { margin: 0; color: var(--text-muted); font-size: .95rem; line-height: 1.8; }
.sd-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-secondary); font-size: .88rem; font-weight: 600; white-space: nowrap; transition: color var(--t) var(--ease); }
.sd-link:hover { color: var(--primary-text, var(--primary)); }

.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  max-width: 100%;
  padding: .75rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.sd-btn[hidden] { display: none; }
.sd-btn .icon { width: 17px; height: 17px; flex: none; }
.sd-btn:hover { transform: translateY(-2px); }
.sd-btn--primary { background: linear-gradient(135deg, var(--primary-hover), var(--primary)); color: #FFFFFF; box-shadow: 0 14px 30px -16px var(--primary-glow); }
.sd-btn--primary:hover { box-shadow: var(--shadow-primary); }
.sd-btn--ghost { background: var(--glass); border-color: var(--border-strong); color: var(--text-primary); }
.sd-btn--ghost:hover { border-color: var(--primary); color: var(--primary-text, var(--primary)); background: var(--primary-soft); }

/* --------------------------------------------------------------------------
   01 Hero — heading beside the price card, summary strip underneath
   -------------------------------------------------------------------------- */
.sd-hero { padding-block-end: clamp(1.8rem, 3.6vw, 2.8rem); }
.sd-hero__glow { position: absolute; inset-inline-start: -8%; inset-block-start: -35%; width: min(62vw, 640px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--primary-glow), transparent 64%); opacity: .3; filter: blur(24px); pointer-events: none; }
.sd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas: "copy offer" "cta offer" "strip strip";
  align-items: start;
  column-gap: clamp(1.5rem, 4.5vw, 4rem);
  margin-block-start: clamp(.6rem, 1.8vw, 1.2rem);
}
.sd-hero__copy { grid-area: copy; min-width: 0; padding-block-start: clamp(.4rem, 1.6vw, 1.4rem); }
.sd-eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin-block-end: .9rem; padding: .34rem .85rem; border: 1px solid var(--primary-line); border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-size: .8rem; font-weight: 700; }
.sd-eyebrow .icon { width: 15px; height: 15px; }
.sd-hero h1 { margin: 0 0 .75rem; font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.22; letter-spacing: -.02em; text-wrap: balance; }
html[lang="ar"] .sd-hero h1 { font-size: clamp(1.75rem, 4vw, 2.85rem); line-height: 1.35; letter-spacing: 0; }
.sd-hero .lead { margin: 0; max-width: 46ch; }
.sd-hero__cta { grid-area: cta; display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: 1.5rem; }

/* Price card */
.sd-offer {
  grid-area: offer;
  position: relative;
  display: grid;
  min-width: 0;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 70% at 50% 0%, var(--primary-soft), transparent 70%),
    linear-gradient(180deg, var(--glass-2), transparent 55%),
    var(--surface);
  box-shadow: var(--shadow-lg), 0 40px 90px -60px var(--primary-glow);
  overflow: hidden;
}
.sd-offer::before { content: ''; position: absolute; inset-inline: 18%; inset-block-start: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), transparent); }
.sd-offer__line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem .2rem; }
.sd-offer__lbl { min-width: 0; color: var(--text-secondary); font-size: .92rem; font-weight: 600; line-height: 1.5; }
.sd-offer__amt { flex: none; font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.sd-offer__op { justify-self: center; display: grid; place-items: center; width: 26px; height: 26px; margin-block: -.1rem; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-2); color: var(--text-muted); font-family: var(--font-num); font-size: .95rem; font-weight: 700; line-height: 1; }
.sd-offer__op--eq { border-color: var(--primary-line); color: var(--primary); }
.sd-offer__total { display: grid; justify-items: center; gap: .15rem; margin-block-start: .35rem; padding: 1rem .5rem .9rem; border-radius: var(--r-lg); background: var(--background-alt); border: 1px solid var(--primary-line); text-align: center; }
.sd-offer__tlbl { color: var(--text-secondary); font-size: .85rem; font-weight: 700; }
.sd-offer__tamt { color: var(--primary-text, var(--primary)); font-size: clamp(2.3rem, 5vw, 3.1rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.sd-offer__tamt small { font-size: .45em; font-weight: 700; letter-spacing: 0; color: var(--text-secondary); }
.sd-offer__total--quote { gap: .5rem; }
.sd-offer__ask { display: inline-flex; align-items: center; gap: .4rem; color: var(--primary-text, var(--primary)); font-size: 1.15rem; font-weight: 700; }
.sd-offer__note { display: flex; align-items: flex-start; justify-content: center; gap: .4rem; margin: .85rem 0 0; color: var(--text-muted); font-size: .8rem; line-height: 1.6; text-align: center; }
.sd-offer__note .icon { flex: none; width: 14px; height: 14px; margin-block-start: .2rem; }

/* 02 Quick summary strip + payment */
.sd-strip { grid-area: strip; min-width: 0; margin-block-start: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .sd-strip { background: var(--surface); } }
.sd-strip__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin: 0; }
.sd-strip__facts > div { display: grid; align-content: start; gap: .3rem; min-width: 0; padding: .9rem 1.1rem; border-inline-start: 1px solid var(--border); }
.sd-strip__facts > div:first-child { border-inline-start: 0; }
.sd-strip__facts dt { display: flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .78rem; font-weight: 600; }
.sd-strip__facts dt .icon { width: 14px; height: 14px; flex: none; color: var(--primary); }
.sd-strip__facts dd { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.sd-strip__accent { color: var(--primary-text, var(--primary)); }

.sd-langs { display: inline-flex; padding: 3px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--background-alt); }
.sd-lang { padding: .32rem .85rem; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-muted); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.sd-lang[lang="en"] { font-family: var(--font-en); }
.sd-lang:hover { color: var(--text-primary); }
.sd-lang.is-on { background: var(--primary); color: #FFFFFF; }
.sd-lang:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.sd-pay { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.2rem; padding: .85rem 1.1rem; border-block-start: 1px solid var(--border); background: var(--glass); }
.sd-pay__title { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.sd-pay__title .icon { width: 14px; height: 14px; color: var(--primary); }
.sd-pay__steps { list-style: none; display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0; padding: 0; min-width: 0; }
.sd-pay__steps > li { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.sd-pay__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); border: 1px solid var(--primary-line); color: var(--primary-text, var(--primary)); font-family: var(--font-num); font-size: .74rem; font-weight: 700; }
.sd-pay__txt { display: grid; min-width: 0; line-height: 1.5; }
.sd-pay__txt b { font-size: .88rem; }
.sd-pay__txt > span { color: var(--text-muted); font-size: .8rem; }
.sd-pay__arrow { color: var(--text-faint); }

/* --------------------------------------------------------------------------
   Sticky mini nav — scrolls sideways inside itself, never the page
   -------------------------------------------------------------------------- */
.sd-nav { position: sticky; top: var(--header-h); z-index: 60; border-block-end: 1px solid var(--border); background: color-mix(in srgb, var(--background) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .sd-nav { background: var(--background); } }
.sd-nav .container { min-width: 0; }
.sd-nav__list { list-style: none; display: flex; gap: .2rem; margin: 0; padding: .4rem 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.sd-nav__list::-webkit-scrollbar { display: none; }
.sd-nav__list li { flex: none; }
.sd-nav__list a { display: block; padding: .38rem .8rem; border-radius: var(--r-pill); color: var(--text-muted); font-size: .82rem; font-weight: 600; white-space: nowrap; transition: color var(--t) var(--ease), background var(--t) var(--ease); }
.sd-nav__list a:hover { color: var(--text-primary); background: var(--glass); }
.sd-nav__list a.is-active { color: var(--primary-text, var(--primary)); background: var(--primary-soft); }

/* --------------------------------------------------------------------------
   03 Package — one spec sheet split by hairlines
   -------------------------------------------------------------------------- */
.sd-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--border); overflow: hidden; }
.sd-spec__col { min-width: 0; padding: clamp(1rem, 2.2vw, 1.4rem); background: var(--background); }
.sd-spec__title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .85rem; font-size: 1rem; font-weight: 700; }
.sd-spec__ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--primary-line); background: var(--primary-soft); color: var(--primary); }
.sd-spec__ico .icon { width: 16px; height: 16px; }
.sd-spec__col ul { list-style: none; display: grid; gap: .45rem; margin: 0; padding: 0; }
.sd-spec__col li { display: flex; align-items: flex-start; gap: .5rem; color: var(--text-secondary); font-size: .9rem; line-height: 1.65; }
.sd-spec__col li .sd-check { margin-block-start: .32rem; color: var(--primary); }

/* --------------------------------------------------------------------------
   04 What you get — an icon band
   -------------------------------------------------------------------------- */
.sd-band { background: radial-gradient(70% 90% at 50% 0%, var(--primary-soft), transparent 70%), var(--background-alt); border-block: 1px solid var(--border); }
.sd-get { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin: 0; padding: 0; }
.sd-get li { display: grid; justify-items: center; align-content: start; gap: .6rem; min-width: 0; padding: 1.1rem .7rem 1rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 70%, transparent); text-align: center; transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.sd-get li:hover { border-color: var(--primary-line); transform: translateY(-2px); }
.sd-get__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--primary-hover), var(--primary)); color: #FFFFFF; box-shadow: 0 12px 26px -14px var(--primary-glow); }
.sd-get__ico .icon { width: 20px; height: 20px; }
.sd-get__lbl { font-size: .88rem; font-weight: 700; line-height: 1.5; }

/* --------------------------------------------------------------------------
   05 Add-ons — an upgrade selector with a live estimate
   -------------------------------------------------------------------------- */
.sd-upgrade {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "head list" "total list";
  align-items: start;
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
}
.sd-upgrade__head { grid-area: head; margin: 0; }
.sd-upgrade__list { grid-area: list; list-style: none; display: grid; gap: .55rem; margin: 0; padding: 0; }
.sd-addon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .85rem; min-width: 0; padding: .8rem .95rem; border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.sd-addon.is-on { border-color: var(--primary); background: linear-gradient(120deg, var(--primary-soft), transparent 70%), var(--surface); }
.sd-addon__toggle { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--glass); color: var(--text-primary); cursor: pointer; transition: all var(--t) var(--ease); }
.sd-addon__toggle:hover { border-color: var(--primary); color: var(--primary); }
.sd-addon__toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sd-addon__toggle .icon { width: 16px; height: 16px; }
.sd-addon__tick { display: none; }
.sd-addon__tick .sd-check { width: 16px; height: 16px; stroke-width: 2.8; }
.is-on .sd-addon__toggle { border-color: var(--primary); background: var(--primary); color: #FFFFFF; }
.is-on .sd-addon__plus { display: none; }
.is-on .sd-addon__tick { display: grid; }
.sd-addon__name { font-size: .95rem; font-weight: 600; line-height: 1.5; }
.sd-addon__price { display: grid; justify-items: end; text-align: end; line-height: 1.3; }
.sd-addon__price b { color: var(--primary-text, var(--primary)); font-size: 1rem; white-space: nowrap; }
.sd-addon__price small { color: var(--text-muted); font-size: .72rem; }
.sd-qty { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--background-alt); }
.sd-qty[hidden] { display: none; }
.sd-qty button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-secondary); cursor: pointer; }
.sd-qty button:hover { color: var(--primary); }
.sd-qty button .icon { width: 14px; height: 14px; }
.sd-qty output { min-width: 1.4rem; text-align: center; font-weight: 700; font-size: .9rem; }
.sd-upgrade__total { grid-area: total; display: grid; gap: .9rem; padding: 1.1rem 1.2rem; border: 1px solid var(--primary-line); border-radius: var(--r-lg); background: linear-gradient(140deg, var(--primary-soft), transparent 70%), var(--surface); }
.sd-upgrade__total > div { display: grid; gap: .1rem; }
.sd-upgrade__tlbl { color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.sd-upgrade__tamt { color: var(--primary-text, var(--primary)); font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
.sd-upgrade__hint { color: var(--text-muted); font-size: .78rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   06 Video (.sdv)
   -------------------------------------------------------------------------- */
.sdv { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; gap: clamp(1rem, 3vw, 2.2rem); }
.sdv--solo { grid-template-columns: minmax(0, 1fr); max-width: 960px; }
.sdv__player { min-width: 0; }
.sdv__frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--border-strong); border-radius: var(--r-xl); background: #05060A; overflow: hidden; box-shadow: var(--shadow-lg); }
.sdv__frame iframe, .sdv__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.sdv__poster { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: #0B0E16; cursor: pointer; }
.sdv__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sdv__poster::after, .sdv__empty::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 6, 10, .1) 30%, rgba(5, 6, 10, .75)); pointer-events: none; }
.sdv__play { position: relative; z-index: 1; display: grid; place-items: center; width: clamp(62px, 9vw, 84px); height: clamp(62px, 9vw, 84px); border-radius: 50%; background: var(--primary); color: #FFFFFF; box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary) 22%, transparent), 0 20px 44px -16px var(--primary-glow); transition: transform var(--t) var(--ease); }
.sdv__poster:hover .sdv__play { transform: scale(1.07); }
.sdv__poster:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.sdv__play svg { margin-inline-start: 4px; }
[dir="rtl"] .sdv__play svg { margin-inline-start: 0; margin-inline-end: -4px; transform: none; }
.sdv__bar { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; color: #F3F6FB; }
.sdv__bar-title { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 700; }
.sdv__rail { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.sdv__time { flex: none; font-family: var(--font-num); font-size: .76rem; color: rgba(243, 246, 251, .7); }

/* No video yet: the same player, quietly waiting */
.sdv__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 1rem 1rem 3.4rem;
  text-align: center;
  background-color: #0B0E16;
  background-image:
    radial-gradient(60% 70% at 50% 40%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  background-position: center;
}
.sdv__empty[style] { background-size: cover; }
.sdv__play--off { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: rgba(243, 246, 251, .75); box-shadow: 0 0 0 10px rgba(255, 255, 255, .04); }
.sdv__soon { position: relative; z-index: 1; margin: 0; padding: .35rem .9rem; border-radius: var(--r-pill); background: rgba(5, 6, 10, .55); color: #F3F6FB; font-size: .88rem; font-weight: 600; }
.sdv__desc { margin: .8rem 0 0; color: var(--text-secondary); font-size: .92rem; line-height: 1.8; }

.sdv__topics { min-width: 0; padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.sdv__topics-title { margin: 0 0 .75rem; color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.sdv__topics ol { list-style: none; display: grid; gap: .1rem; margin: 0; padding: 0; }
.sdv__topics li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-block-end: 1px dashed var(--border); font-size: .92rem; font-weight: 600; }
.sdv__topics li:last-child { border-block-end: 0; }
.sdv__topics li span { flex: none; display: grid; place-items: center; min-width: 30px; height: 24px; border-radius: 7px; background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-family: var(--font-num); font-size: .72rem; font-weight: 700; }

/* --------------------------------------------------------------------------
   07 Past work
   -------------------------------------------------------------------------- */
.sd-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); }
.sd-work { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.sd-work[hidden] { display: none; }
.sd-work:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sd-work__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; border-block-end: 1px solid var(--border); }
.sd-work__desk { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--t-slow) var(--ease); }
.sd-work:hover .sd-work__desk { transform: scale(1.03); }
.sd-work__mob { position: absolute; inset-block-end: 8px; inset-inline-end: 10px; width: 21%; max-width: 84px; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border: 2px solid var(--surface); border-radius: 10px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55); background: var(--surface-2); }
.sd-work__body { display: flex; flex-direction: column; flex: 1; gap: .3rem; padding: .9rem 1rem 1rem; }
.sd-work__name { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.sd-work__desc { margin: 0; color: var(--text-muted); font-size: .84rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-work__go { display: inline-flex; align-items: center; gap: .35rem; width: fit-content; margin-block-start: auto; padding-block-start: .5rem; color: var(--text-secondary); font-size: .85rem; font-weight: 600; transition: color var(--t) var(--ease); }
.sd-work__go .icon { width: 14px; height: 14px; }
.sd-work__go:hover, .sd-work:hover .sd-work__go { color: var(--primary-text, var(--primary)); }
.sd-more { display: flex; justify-content: center; margin-block-start: 1.2rem; }

/* 08 Reviews — the shared review gallery, compacted */
.sd-reviews .rg-grid { --rg-cols: 4; }
.sd-reviews .rg-cell { min-width: 0; }

/* --------------------------------------------------------------------------
   09 CTA
   -------------------------------------------------------------------------- */
.sd-sec--cta { padding-block: clamp(2.4rem, 4.6vw, 3.4rem); }
.sd-cta { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; padding: clamp(1.4rem, 3.4vw, 2.2rem) clamp(1.3rem, 3.4vw, 2.4rem); border: 1px solid var(--primary-line); border-radius: var(--r-2xl); background: linear-gradient(120deg, var(--primary-soft), transparent 65%), var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.sd-cta__glow { position: absolute; z-index: -1; inset-inline-end: -10%; inset-block-start: -80%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--primary-glow), transparent 65%); opacity: .45; filter: blur(30px); }
.sd-cta h2 { margin: 0 0 .3rem; font-size: clamp(1.35rem, 2.8vw, 1.9rem); font-weight: 700; line-height: 1.35; }
.sd-cta p { margin: 0; color: var(--text-secondary); font-size: .96rem; line-height: 1.8; }
.sd-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .sd-get { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .sd-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdv { grid-template-columns: minmax(0, 1fr); }
  .sd-reviews .rg-grid { --rg-cols: 2; }
}

/* Tablet & phone: title → price card → summary → buttons */
@media (max-width: 900px) {
  .sd-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "offer" "strip" "cta"; }
  .sd-hero__copy { padding-block-start: 0; }
  .sd-offer { margin-block-start: 1.3rem; max-width: 520px; }
  .sd-strip { margin-block-start: 1rem; }
  .sd-hero__cta { margin-block-start: 1.1rem; }
  .sd-upgrade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "total"; }
  .sd-upgrade__total { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .sd-get { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .sd-cta { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .sd-cta__actions { justify-content: center; }

  /* Past work and reviews swipe sideways inside their own row */
  .sd-works, .sd-reviews .rg-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block-end: 4px;
  }
  .sd-works::-webkit-scrollbar, .sd-reviews .rg-grid::-webkit-scrollbar { display: none; }
  .sd-works { grid-auto-columns: 84%; }
  .sd-reviews .rg-grid { grid-auto-columns: 46%; gap: .6rem; }
  .sd-work, .sd-reviews .rg-cell { scroll-snap-align: start; }
  .sd-work:hover, .sd-get li:hover { transform: none; }
}

@media (max-width: 640px) {
  .sd-spec { grid-template-columns: minmax(0, 1fr); border-radius: var(--r-lg); }
  .sd-get { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .sd-get li { padding: .9rem .5rem .85rem; }
  .sd-get__ico { width: 40px; height: 40px; border-radius: 12px; }

  .sd-strip__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-strip__facts > div { padding: .8rem .9rem; border-inline-start: 0; border-block-start: 1px solid var(--border); }
  .sd-strip__facts > div:nth-child(-n+2) { border-block-start: 0; }
  .sd-strip__facts > div:nth-child(even) { border-inline-start: 1px solid var(--border); }
  .sd-strip__lang { grid-column: 1 / -1; border-inline-start: 0 !important; }
  .sd-strip__facts dd { font-size: .94rem; }

  .sd-pay { display: grid; gap: .7rem; padding: .85rem .9rem; }
  .sd-pay__steps { display: grid; gap: .35rem; }
  .sd-pay__arrow { justify-self: start; margin-inline-start: 6px; transform: rotate(90deg); }
  [dir="rtl"] .sd-pay__arrow .sd-arrow { transform: none; }

  .sd-addon { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "toggle name price" "toggle qty qty"; row-gap: .45rem; padding: .75rem .8rem; }
  .sd-addon__toggle { grid-area: toggle; align-self: start; }
  .sd-addon__name { grid-area: name; font-size: .92rem; }
  .sd-addon__price { grid-area: price; }
  .sd-qty { grid-area: qty; justify-self: start; }
  .sd-upgrade__total { grid-template-columns: minmax(0, 1fr); }
  .sd-upgrade__total .sd-btn { width: 100%; }

  .sdv__bar { padding: .6rem .75rem; }
  .sdv__bar-title { font-size: .8rem; }
  .sdv__empty { padding-block-end: 2.8rem; gap: .7rem; }
  .sdv__soon { font-size: .8rem; }
}

@media (max-width: 480px) {
  .sd-hero__cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sd-hero__cta .sd-btn { padding-inline: .8rem; }
  .sd-offer__tamt { font-size: 2.3rem; }
  .sd-offer__lbl { font-size: .86rem; }
  .sd-offer__amt { font-size: 1.02rem; }
  .sd-cta__actions { display: grid; }
  .sd-cta__actions .sd-btn { width: 100%; }
  .sd-reviews .rg-grid { grid-auto-columns: 62%; }
  .sd-head--row { align-items: flex-start; }
}

@media (max-width: 360px) {
  .sd-hero__cta { grid-template-columns: minmax(0, 1fr); }
  .sd-strip__facts { grid-template-columns: minmax(0, 1fr); }
  .sd-strip__facts > div, .sd-strip__facts > div:nth-child(even) { border-inline-start: 0; }
  .sd-strip__facts > div:nth-child(2) { border-block-start: 1px solid var(--border); }
  .sdv__bar-title { max-width: 100%; }
  .sdv__rail, .sdv__time { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-btn:hover, .sd-work:hover, .sd-get li:hover { transform: none; }
}