/* License OPL-1 — Abrak
   Owner-requested polish on the home and pricing pages.

   These pages belong to abrak_site. Its server copy carries other sessions'
   uncommitted work, so the fixes live here, loaded right after site.css, and
   each rule names the abrak_site class it restyles. Colours are tokens only;
   motion is transform/opacity only and switched off under reduced motion, so
   none of it costs a layout or a paint of the page around it.

   abrak_site classes restyled here:
     .ab-hero-actions (sibling only)   .ab-trust-row / .ab-trust-logo
     .ab-bundle-card.is-featured       .ab-dep-grid / .ab-dep-card / .ab-dep-flag
     .ab-cta-band                      .ab-solution-card (new cards only) */

/* ── home hero: the profit leak calculator ─────────────────────────────── */

.ab-hero-leak {
  display: inline-flex; align-items: center; gap: .75rem;
  margin-top: 1rem; padding: .55rem 1rem .55rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, var(--ab-border));
  box-shadow: 0 10px 28px -20px var(--color-danger);
  color: var(--ab-ink); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ab-hero-leak:hover {
  transform: translateY(-2px);
  border-color: var(--color-danger);
  box-shadow: 0 16px 34px -20px var(--color-danger);
}
.ab-hero-leak-gauge {
  flex: none; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: color-mix(in srgb, var(--color-danger) 9%, var(--color-surface));
}
.ab-hero-leak-gauge svg { width: 1.9rem; height: auto; overflow: visible; }
.ab-hero-leak-arc, .ab-hero-leak-red { fill: none; stroke-width: 4; stroke-linecap: round; }
.ab-hero-leak-arc { stroke: var(--ab-primary); opacity: .22; }
.ab-hero-leak-red { stroke: var(--color-danger); }
.ab-hero-leak-needle { stroke: var(--ab-ink); stroke-width: 2.4; stroke-linecap: round; }
.ab-hero-leak-gauge circle { fill: var(--ab-ink); }
.ab-hero-leak-needle {
  transform-origin: 24px 28px;
  animation: ab-polish-needle 4.5s ease-in-out infinite;
}
@keyframes ab-polish-needle {
  0%, 100% { transform: rotate(-62deg); }
  55%      { transform: rotate(40deg); }
}
.ab-hero-leak-text { display: flex; flex-direction: column; line-height: 1.55; text-align: start; }
.ab-hero-leak-text b { font-size: .92rem; }
.ab-hero-leak-text small { font-size: .74rem; color: var(--ab-muted); }
.ab-hero-leak-go { color: var(--color-danger); font-weight: 700; transition: transform .18s ease; }
.ab-hero-leak:hover .ab-hero-leak-go { transform: translateX(-4px); }

/* ── home: "یکپارچه و سازگار با" was a grey, flat line ─────────────────── */

.ab-trust-logos { gap: .6rem; }
.ab-trust-logo {
  filter: none; opacity: 1;
  padding: .4rem .85rem .4rem .5rem;
  border: 1px solid var(--ab-border); border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--ab-ink);
  box-shadow: 0 1px 2px rgba(31, 36, 48, .04);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation: ab-polish-rise .5s ease-out both;
}
.ab-trust-logo:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ab-primary) 45%, var(--ab-border));
  box-shadow: 0 12px 26px -18px var(--ab-primary);
}
.ab-trust-logo:nth-child(2) { animation-delay: .05s; }
.ab-trust-logo:nth-child(3) { animation-delay: .1s; }
.ab-trust-logo:nth-child(4) { animation-delay: .15s; }
.ab-trust-logo:nth-child(5) { animation-delay: .2s; }
.ab-trust-logo:nth-child(6) { animation-delay: .25s; }
.ab-trust-logo:nth-child(7) { animation-delay: .3s; }
.ab-trust-logo:nth-child(8) { animation-delay: .35s; }
@keyframes ab-polish-rise {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ab-trust-label {
  background: linear-gradient(90deg, var(--ab-primary), var(--color-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── home: the added trade cards ───────────────────────────────────────── */

/* Last in the grid even though abrak_dev_services appends its own card after
   ours: "all trades" is the way out of the list, so it closes it. */
.ab-polish-trade-all {
  order: 1;
  background: linear-gradient(135deg, var(--color-brand-soft), var(--color-surface));
  border-color: color-mix(in srgb, var(--ab-primary) 35%, var(--ab-border));
}
.ab-polish-trade-all .ab-solution-title { color: var(--ab-primary); }

/* ── pricing: the complete package leads, and its discount is loud ─────── */

.ab-bundle-picker .ab-bundle-card.is-featured { order: -1; }
.ab-bundle-picker .ab-bundle-card.is-featured .ab-badge-success {
  background: var(--color-danger);
  font-size: .82rem; padding: .3rem .75rem;
  box-shadow: 0 6px 16px -8px var(--color-danger);
  animation: ab-polish-pulse 2.6s ease-in-out infinite;
}
@keyframes ab-polish-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* ── pricing: support and services cards ───────────────────────────────── */

/* The flag sat at top:-.7rem on a card with overflow:hidden, so its top half
   was cut off. It now sits inside the card, above the title. */
.ab-dep-flag {
  position: static; align-self: flex-start;
  margin: 0 0 .7rem;
}
/* "یک سطح": cards in a row share one height and their buttons one baseline. */
.ab-dep-grid { align-items: stretch; }
.ab-dep-card > .ab-btn:last-child { margin-top: auto; }
.ab-dep-card .ab-dep-feats { margin-bottom: 1rem; }

/* ── CTA bands: a slow, barely-there drift ─────────────────────────────── */

/* One pseudo-element, moved with transform only, so it composites on the GPU
   and never repaints the band. Twenty-plus seconds a cycle: it should read as
   light moving, not as an animation. */
.ab-cta-band { isolation: isolate; }
.ab-cta-band::after {
  content: ""; position: absolute; inset: -60% -20%; z-index: -1;
  background:
    radial-gradient(closest-side at 28% 42%, rgba(255, 255, 255, .13), transparent 70%),
    radial-gradient(closest-side at 72% 58%, rgba(56, 189, 248, .18), transparent 70%);
  pointer-events: none; will-change: transform;
  animation: ab-polish-drift 24s ease-in-out infinite alternate;
}
@keyframes ab-polish-drift {
  from { transform: translate3d(-7%, -5%, 0) rotate(0deg); }
  to   { transform: translate3d(7%, 5%, 0) rotate(10deg); }
}

@media (max-width: 47.9375rem) {
  .ab-hero-leak { display: flex; border-radius: var(--ab-radius); }
}

@media (prefers-reduced-motion: reduce) {
  .ab-hero-leak-needle, .ab-trust-logo, .ab-cta-band::after,
  .ab-bundle-picker .ab-bundle-card.is-featured .ab-badge-success { animation: none; }
  .ab-hero-leak, .ab-trust-logo { transition: none; }
}

/* ── /nazar ───────────────────────────────────────────────────────────────── */

.ab-nazar { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); background: linear-gradient(180deg, var(--c-royal-50, #eef3ff), var(--color-surface, #fff)); }
.ab-nazar-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.ab-nazar h1 { font-weight: 900; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.45; margin: 0 0 1rem; }
.ab-nazar-copy p { line-height: 2; color: var(--color-text-muted, #475467); }
.ab-nazar-copy ul { line-height: 2.1; padding-inline-start: 1.2rem; }
.ab-nazar-card { position: relative; padding: 1.6rem; border-radius: 22px; background: var(--color-surface, #fff); box-shadow: 0 1px 0 var(--color-border, #e3e8f0), 0 30px 60px -44px rgba(15, 33, 94, .5); }
.ab-nazar-card form { display: grid; gap: 1rem; }
.ab-nazar-card label { display: grid; gap: .35rem; font-weight: 700; font-size: .9rem; }
.ab-nazar-card label small { font-weight: 400; color: var(--color-text-subtle, #667085); }
.ab-nazar-card input[type="text"], .ab-nazar-card textarea {
  font: inherit; font-weight: 400; padding: .75rem .9rem; border-radius: 12px;
  border: 1.5px solid var(--color-border, #e3e8f0); background: var(--c-mist-100, #f4f7fb);
}
.ab-nazar-card input:focus, .ab-nazar-card textarea:focus { outline: none; border-color: var(--c-royal-600, #2a54c6); background: #fff; }
.ab-nazar-card .ab-nazar-consent { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; line-height: 1.8; }
.ab-nazar-consent input { margin-top: .4rem; accent-color: var(--c-royal-600, #2a54c6); }
.ab-nazar-card .ab-nazar-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ab-nazar-errors { padding: .8rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--color-danger, #c0392f) 9%, #fff); color: var(--color-danger, #c0392f); font-weight: 700; }
.ab-nazar-errors p { margin: 0; }
@media (max-width: 61.9375rem) { .ab-nazar-grid { grid-template-columns: minmax(0, 1fr); } }

/* /about: the stat cards rise 2.5rem into the hero, but every .ab-section
   clips its overflow, which cut off their top edge and with it each card's
   label ("اپلیکیشن یکپارچه", "نسخه‌ی اودوو", …), leaving bare values. */
.ab-about-stats-wrap { overflow: visible; }

/* The enterprise strip (/about, /pricing, /odoo-farsi) turns into a column
   under 780px, where the flex-basis its body and points were given as a
   width (20rem, 16rem) became a height: 320px and 256px of empty card. */
@media (max-width: 780px) {
  .ab-ent-strip-body, .ab-ent-strip-points { flex: 0 0 auto; width: 100%; }
}