/* ==========================================================================
   SITE PULSE — sections: difference, packages, upkeep, process, work, faq, cta, footer
   ========================================================================== */

/* ---------- DIFFERENCE (01 → 03) ---------- */
.diff__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.diff__card {
  position: relative; padding: 30px 26px 28px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
  display: flex; flex-direction: column; gap: 14px; min-height: 250px;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.diff__card:hover { transform: translateY(-4px); }
.diff__n {
  font-family: var(--font-en-display); font-size: 12px; font-weight: 700; letter-spacing: .16em;
  color: var(--faint);
}
.diff__title { font-size: 21px; font-weight: 700; }
.diff__body { font-size: 14.5px; color: var(--muted); line-height: 1.8; }

.diff__card[data-tone="muted"] { opacity: .85; }
.diff__card[data-tone="muted"] .diff__title { color: var(--ink-2); }
.diff__card[data-tone="pulse"] { border-color: var(--accent-line); background: var(--accent-soft); }
.diff__card[data-tone="pulse"] .diff__title { color: var(--accent); }
.diff__card[data-tone="pulse"]::after {
  content: ''; position: absolute; inset: -1px; border-radius: var(--radius);
  border: 1px solid var(--accent-line); pointer-events: none;
}
html[data-anim="4"] .diff__card[data-tone="pulse"]::after,
html[data-anim="5"] .diff__card[data-tone="pulse"]::after { animation: halo 2.8s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.diff__card[data-tone="auto"] { border-color: var(--line-strong); }
.diff__card[data-tone="auto"] .diff__title { color: var(--ink); }
.diff__mark { position: absolute; top: 22px; inset-inline-end: 22px; width: 26px; height: 26px; color: var(--accent); }
@media (max-width: 880px) { .diff__grid { grid-template-columns: 1fr; } .diff__card { min-height: 0; } }

/* ---------- PACKAGES ---------- */
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.pack {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 26px 28px;
  box-shadow: var(--shadow-card);
  transition: transform .32s var(--ease), border-color .3s, box-shadow .3s;
}
.pack:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.pack--featured {
  border-color: var(--accent-line); background: var(--accent-soft);
  box-shadow: var(--shadow-card), var(--glow);
}
html[data-theme="light"] .pack--featured { background: var(--surface-solid); }
.pack__ribbon {
  position: absolute; top: -13px; inset-inline-start: 26px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; box-shadow: var(--glow);
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-en-display);
}
.pack__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pack__name { font-size: 22px; font-weight: 700; }
.pack__en {
  font-family: var(--font-en-display); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--faint); font-weight: 600;
}
.pack__who { font-size: 14px; color: var(--muted); margin-top: 10px; min-height: 3.4em; line-height: 1.7; }
.pack__priceRow {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line);
}
.pack__price {
  font-family: var(--font-en-display); font-size: clamp(38px, 4.2vw, 50px);
  font-weight: 700; line-height: .95; letter-spacing: -.03em; color: var(--ink);
}
.pack--featured .pack__price { color: var(--accent); }
.pack__priceMeta { display: flex; flex-direction: column; gap: 2px; padding-bottom: 5px; }
.pack__priceMeta b { font-size: 12.5px; font-weight: 700; }
.pack__priceMeta small { font-size: 11.5px; color: var(--muted); }
.pack__alt {
  font-family: var(--font-en-display); font-size: 12.5px; color: var(--muted);
  margin-top: 10px; line-height: 1.5;
}
.pack__alt b { font-weight: 600; color: var(--ink-2); }
.pack__feats { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pack__feats li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.pack__feats svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 4px; }
.pack__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 24px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.pack__metaCell { background: var(--bg-2); padding: 11px 13px; }
html[data-theme="dark"] .pack__metaCell { background: rgba(255, 255, 255, .022); }
.pack__metaCell small { display: block; font-size: 10.5px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.pack__metaCell b { font-size: 14px; font-weight: 700; }
.pack__cta { margin-top: 20px; }
.pack__spacer { flex: 1; }

.packsNote {
  margin-top: 28px; display: grid; gap: 12px;
}
.noteRow {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: 13px; color: var(--muted); line-height: 1.75;
}
.noteRow svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 3px; }
.noteRow b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 1000px) { .packs { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ---------- UPKEEP + ADD-ONS ---------- */
.upkeep__grid { display: grid; grid-template-columns: 1fr 1.06fr; gap: 22px; align-items: start; }
.planCard {
  position: relative; overflow: hidden;
  border: 1px solid var(--accent-line); border-radius: var(--radius-lg);
  background: var(--accent-soft); padding: 30px 28px;
  box-shadow: var(--shadow-card);
}
html[data-theme="dark"] .planCard { background: linear-gradient(160deg, rgba(0, 255, 102, .07), rgba(0, 229, 255, .04)); }
.planCard__badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 999px; padding: 5px 11px;
  background: var(--bg-2); font-family: var(--font-en-display); margin-bottom: 18px;
}
.planCard__name { font-size: 23px; font-weight: 700; }
.planCard__price { display: flex; align-items: flex-end; gap: 10px; margin-top: 16px; }
.planCard__price b {
  font-family: var(--font-en-display); font-size: clamp(40px, 4.6vw, 54px);
  font-weight: 700; color: var(--accent); line-height: .9; letter-spacing: -.03em;
}
.planCard__price span { font-size: 14px; color: var(--muted); padding-bottom: 5px; }
.planCard__alt { font-family: var(--font-en-display); font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.planCard__who { font-size: 14px; color: var(--ink-2); margin-top: 16px; line-height: 1.78; }
.planCard__feats { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.planCard__feats li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.planCard__feats svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 4px; }
.planCard__foot {
  margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line);
  font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center;
}
.planCard__foot svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

.addons { display: grid; gap: 14px; }
.addon {
  display: flex; align-items: center; gap: 18px; padding: 19px 22px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: border-color .25s, transform .25s var(--ease);
}
.addon:hover { border-color: var(--line-strong); transform: translateX(-3px); }
html[dir="ltr"] .addon:hover { transform: translateX(3px); }
.addon__ico {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 11px; background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent);
}
.addon__ico svg { width: 20px; height: 20px; }
.addon__body { flex: 1; min-width: 0; }
.addon__name { font-size: 15.5px; font-weight: 700; }
.addon__desc { font-size: 13px; color: var(--muted); line-height: 1.62; }
.addon__price {
  font-family: var(--font-en-display); font-size: 19px; font-weight: 700; color: var(--ink);
  flex: none;
}
.addon--fast { border-color: var(--accent-line); background: var(--accent-soft); }
.addon--fast .addon__price { color: var(--accent); }
@media (max-width: 900px) {
  .upkeep__grid { grid-template-columns: 1fr; }
  .planCard__feats { grid-template-columns: 1fr; }
  .addon { flex-wrap: wrap; gap: 12px; }
}

/* ---------- PROCESS + GUARANTEES ---------- */
.process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step {
  position: relative; padding: 26px 22px 24px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); min-height: 190px;
}
.step__n {
  font-family: var(--font-en-display); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; color: var(--accent); margin-bottom: 14px; display: block;
}
.step__title { font-size: 17.5px; font-weight: 700; }
.step__body { font-size: 13.5px; color: var(--muted); margin-top: 10px; line-height: 1.75; }
.step__rail { position: absolute; inset-inline-start: 22px; top: 0; width: 30px; height: 2px; background: var(--accent); box-shadow: var(--glow); }
.step:last-child { border-color: var(--accent-line); background: var(--accent-soft); }
.arrows { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; color: var(--faint); }
.guarantees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.guar {
  display: flex; gap: 14px; padding: 22px 22px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.guar__ico { width: 34px; height: 34px; flex: none; color: var(--accent); }
.guar__txt { font-size: 14px; color: var(--ink-2); line-height: 1.75; }
.guar__txt b { color: var(--ink); }
@media (max-width: 960px) {
  .process__steps { grid-template-columns: 1fr 1fr; }
  .guarantees { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .process__steps { grid-template-columns: 1fr; } }

/* ---------- WORK / PORTFOLIO (live site tiles) ---------- */
.wstats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 22px;
}
.wstat { background: var(--bg-2); padding: 20px 22px; }
html[data-theme="dark"] .wstat { background: var(--surface-solid); }
.wstat b {
  display: block; font-family: var(--font-en-display); font-size: clamp(26px, 3vw, 36px);
  font-weight: 700; color: var(--accent); line-height: 1; letter-spacing: -.02em;
}
.wstat span { font-size: 13px; color: var(--muted); }

.wfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.wfilters button {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); border-radius: 999px; padding: 8px 15px; font-size: 13px;
  font-weight: 600; transition: border-color .2s, color .2s, background .2s;
}
.wfilters button:hover { border-color: var(--line-strong); color: var(--ink); }
.wfilters button[data-on="1"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}

.work__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.pcard {
  display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface); overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.pcard:hover { transform: translateY(-5px); border-color: var(--accent-line); box-shadow: var(--shadow-card); }

.pcard__shot {
  position: relative; display: block; overflow: hidden;
  border-bottom: 1px solid var(--line); background: #0D1220;
  aspect-ratio: 16 / 10;
}
.pcard__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block;
  transition: transform .6s var(--ease);
}
.pcard:hover .pcard__img { transform: scale(1.03); }
.pcard__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(7, 10, 17, .55));
}
.pcard__hover {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(7, 10, 17, .12), rgba(7, 10, 17, .7));
  opacity: 0; transition: opacity .28s var(--ease);
}
.pcard:hover .pcard__hover { opacity: 1; }
.pcard__hoverBtn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--accent);
  color: var(--accent-ink); font-size: 13.5px; font-weight: 700;
  padding: 10px 18px; border-radius: 999px; box-shadow: var(--glow-strong);
  transform: translateY(6px); transition: transform .28s var(--ease);
}
.pcard:hover .pcard__hoverBtn { transform: none; }

.pcard__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard__live {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  padding: 4px 10px; border-radius: 999px; font-family: var(--font-en-display);
}
.pcard__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: var(--glow); }
.pcard__cat { font-size: 12px; color: var(--faint); text-align: end; }
.pcard__name {
  font-family: var(--font-en-display); font-size: 21px; font-weight: 700; letter-spacing: -.01em;
}
.pcard__desc { font-size: 14px; color: var(--muted); line-height: 1.75; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pcard__tags span {
  font-size: 11px; color: var(--ink-2); border: 1px solid var(--line);
  background: var(--surface-2); padding: 3px 9px; border-radius: 999px;
}
.pcard__link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--accent);
}.pcard__link svg { transition: transform .22s var(--ease); }
.pcard__link:hover svg { transform: translateX(4px); }
html[dir="rtl"] .pcard__link svg { transform: scaleX(-1); }
html[dir="rtl"] .pcard__link:hover svg { transform: scaleX(-1) translateX(4px); }

/* Responsive columns. Kept in one place so no later rule can out-specify it:
   3 across on wide screens, 2 in the middle band, 1 on phones. */
@media (max-width: 860px) { .work__grid { grid-template-columns: 1fr; } .wstats { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
/* The heading column only sticks while the grid is genuinely two columns.
   On a narrow screen the grid collapses to one column, and a sticky heading
   sitting above the list would trail the user through every question. */
.faq__aside { position: static; }
@media (min-width: 901px) { .faq__aside { position: sticky; top: 106px; } }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.qa {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  overflow: hidden; transition: border-color .25s, background .25s;
}
.qa[data-open="1"] { border-color: var(--accent-line); background: var(--accent-soft); }
.qa__q {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: start;
  background: none; border: 0; padding: 19px 20px; font-size: 15.5px; font-weight: 600;
  line-height: 1.5;
}
.qa__q .idx {
  font-family: var(--font-en-display); font-size: 11px; font-weight: 700; color: var(--faint);
  flex: none; letter-spacing: .1em;
}
.qa[data-open="1"] .qa__q .idx { color: var(--accent); }
.qa__q .txt { flex: 1; }
.qa__sign {
  width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; color: var(--ink-2); transition: transform .25s var(--ease), background .25s, color .25s;
}
.qa[data-open="1"] .qa__sign { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: rotate(135deg); }
.qa__sign svg { width: 14px; height: 14px; }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.qa[data-open="1"] .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { padding: 0 20px 20px 47px; font-size: 14px; color: var(--muted); line-height: 1.85; }
html[dir="rtl"] .qa__a p { padding: 0 47px 20px 20px; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } .faq__list { max-width: none; } }

/* ---------- FINAL CTA ---------- */
.final { position: relative; overflow: hidden; }
.final__card {
  position: relative; border: 1px solid var(--accent-line); border-radius: 28px;
  background: var(--accent-soft); padding: clamp(36px, 5vw, 68px) clamp(26px, 4vw, 60px);
  text-align: center; overflow: hidden; box-shadow: var(--shadow);
}
html[data-theme="dark"] .final__card { background: linear-gradient(165deg, rgba(0, 255, 102, .08), rgba(0, 229, 255, .05) 60%, transparent); }
.final__glow {
  position: absolute; inset: auto 50% -46% auto; width: 70%; aspect-ratio: 2/1; filter: blur(60px);
  background: radial-gradient(50% 100% at 50% 50%, var(--accent-soft), transparent 70%);
  transform: translateX(50%); pointer-events: none;
}
.final h2 { font-size: clamp(30px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.025em; }
.final h2 .hl { color: var(--accent); }
.final__sub { margin: 20px auto 0; max-width: 54ch; color: var(--ink-2); font-size: clamp(15px, 1.25vw, 17.5px); }
.final__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.final__contacts {
  display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center;
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13.5px;
}
.final__contacts a { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); transition: color .2s; }
.final__contacts a:hover { color: var(--accent); }
.final__contacts svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ---------- FOOTER ---------- */
.foot { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(44px, 5vw, 68px) 28px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
.foot__blurb { font-size: 13.5px; color: var(--muted); margin-top: 16px; line-height: 1.85; max-width: 42ch; }
.foot__h { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
html[dir="rtl"] .foot__h { font-family: var(--font-ar-body); letter-spacing: .04em; font-size: 13px; }
.foot__list { display: flex; flex-direction: column; gap: 11px; }
.foot__list a, .foot__list span { font-size: 14px; color: var(--ink-2); transition: color .2s; }
.foot__list a:hover { color: var(--accent); }
.foot__list .li { display: flex; align-items: center; gap: 9px; }
.foot__list svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.foot__note { font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.foot__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--faint);
}
.foot__bar .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot__sig {
  font-family: var(--font-en-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-2);
}
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }

/* ---------- FLOATING CONTACT ---------- */
.fab {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 70;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.fab__btn {
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--accent-line);
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center;
  box-shadow: var(--glow-strong); transition: transform .24s var(--ease);
}
.fab__btn:hover { transform: scale(1.07); }
.fab__btn svg { width: 25px; height: 25px; }
.fab__btn--mail { background: var(--surface-solid); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow); }
html[data-anim="4"] .fab__btn--wa, html[data-anim="5"] .fab__btn--wa { animation: float 3.4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 620px) { .fab { inset-block-end: 14px; inset-inline-end: 14px; } .fab__btn { width: 48px; height: 48px; } }

/* ---------- LIGHT LUXE EXTRAS ---------- */
html[data-theme="light"] .nav { box-shadow: 0 1px 0 rgba(11, 15, 25, .04); }
html[data-theme="light"] .pack--featured { box-shadow: 0 22px 50px -30px rgba(5, 115, 79, .34); }
html[data-theme="light"] .hero__panel { box-shadow: 0 26px 60px -34px rgba(11, 15, 25, .32); }
html[data-theme="light"] .final__card { box-shadow: 0 30px 70px -40px rgba(11, 15, 25, .34); }

/* ---------- PRINT ---------- */
@media print {
  .nav, .fab, .ticker, #tweaks-root { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; break-inside: avoid; }
  .reveal:not(.is-in) { opacity: 1 !important; transform: none !important; }
}