/* =========================================================
   Reset (replaces the Tailwind preflight used by the original build)
   ========================================================= */

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  font-family: var(--font-fa, system-ui, sans-serif);
}

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: transparent;
}

button,
[type="button"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer;
}

:disabled {
  cursor: default;
}

/* =========================================================
   Fonts — Vazirmatn (Persian) + Montserrat (Latin), variable
   Unicode-range split: Persian glyphs load Vazirmatn, Latin
   glyphs load Montserrat — from one font stack. The wght axis
   covers every weight used on the site (400–800).
   ========================================================= */

@font-face {
  font-family: "Vazirmatn";
  src:
    url("../fonts/Vazirmatn-VariableFont_wght.ttf") format("truetype-variations"),
    url("../fonts/Vazirmatn-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Persian / Arabic script, Persian digits, ZWNJ-ZWJ */
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

@font-face {
  font-family: "Montserrat";
  src:
    url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
    url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Latin script, digits, punctuation (em-dash, quotes, ©, …) */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   sasangraphic — design system
   ========================================================= */

:root {
  --ink: #1a1361;
  --blue: #0070e6;
  --paper: #f7f7f7;
  --charcoal: #363435;
  --violet: #400bff;

  /* theme accents (replaces the old amber/yellow accent) */
  --accent-night: #a5f5fe;
  --accent-day: #1195e9;

  --font-fa: "Vazirmatn", "Montserrat", system-ui, sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 1.1s;

  --nav-h: 78px;
}

html[data-theme="night"] {
  --accent: var(--accent-night);
  --accent-soft: rgba(165, 245, 254, 0.16);
  --accent-glow: rgba(165, 245, 254, 0.34);
  --on-accent: #06202b;

  --bg-1: #120c47;
  --bg-2: var(--charcoal);
  --bg-grad: linear-gradient(160deg, var(--bg-1) 0%, var(--ink) 45%, var(--charcoal) 100%);
  --text: var(--paper);
  --text-muted: rgba(247, 247, 247, 0.66);
  --text-faint: rgba(247, 247, 247, 0.4);
  --surface: rgba(247, 247, 247, 0.055);
  --surface-strong: rgba(247, 247, 247, 0.09);
  --border: rgba(247, 247, 247, 0.14);
  --border-strong: rgba(247, 247, 247, 0.24);
  --glow-blue: rgba(0, 112, 230, 0.55);
  --glow-violet: rgba(64, 11, 255, 0.55);
  --nav-bg: rgba(20, 15, 66, 0.42);
  --nav-bg-scrolled: rgba(18, 13, 60, 0.68);
  --shadow-ambient: 0 30px 80px rgba(0, 0, 0, 0.45);
  --input-bg: rgba(247, 247, 247, 0.06);
  --logo-filter: invert(1) brightness(1.35);
  --lightbox-backdrop: rgba(10, 7, 38, 0.78);
  --lightbox-img-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

html[data-theme="day"] {
  --accent: var(--accent-day);
  --accent-soft: rgba(17, 149, 233, 0.12);
  --accent-glow: rgba(17, 149, 233, 0.28);
  --on-accent: #ffffff;

  --bg-1: #eef1fb;
  --bg-2: #ffffff;
  --bg-grad: linear-gradient(160deg, #ffffff 0%, #eef1fb 55%, #e7ecfb 100%);
  --text: var(--charcoal);
  --text-muted: rgba(54, 52, 53, 0.68);
  --text-faint: rgba(54, 52, 53, 0.45);
  --surface: rgba(26, 19, 97, 0.045);
  --surface-strong: rgba(26, 19, 97, 0.07);
  --border: rgba(26, 19, 97, 0.12);
  --border-strong: rgba(26, 19, 97, 0.22);
  --glow-blue: rgba(0, 112, 230, 0.35);
  --glow-violet: rgba(64, 11, 255, 0.3);
  --nav-bg: rgba(255, 255, 255, 0.5);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.72);
  --shadow-ambient: 0 30px 70px rgba(26, 19, 97, 0.14);
  --input-bg: rgba(26, 19, 97, 0.04);
  --logo-filter: none;
  --lightbox-backdrop: rgba(240, 243, 252, 0.86);
  --lightbox-img-shadow: 0 34px 80px rgba(26, 19, 97, 0.22);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
ul {
  list-style: none;
}
input,
textarea {
  font: inherit;
  color: inherit;
}

body {
  font-family: var(--font-fa);
  font-weight: 400;
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.75;
  overflow-x: hidden;
  transition:
    background var(--dur-slow) var(--ease),
    color var(--dur-med) var(--ease);
  min-height: 100vh;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 10px;
}

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

/* ===================== BUTTONS ===================== */
.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(
    135deg,
    var(--accent),
    color-mix(in oklab, var(--accent) 62%, var(--violet))
  );
  color: var(--on-accent);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  overflow: hidden;
  box-shadow:
    0 10px 26px -10px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    filter var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.cta-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease);
}
.cta-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 20px 44px -12px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.cta-btn:hover::after {
  transform: translateX(120%);
}
.cta-btn:active {
  transform: translateY(-1px) scale(0.99);
}
.cta-btn.large {
  padding: 1.05rem 2.1rem;
  font-size: 1.05rem;
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--surface);
  backdrop-filter: blur(12px);
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast),
    background var(--dur-fast),
    box-shadow var(--dur-fast);
}
.ghost-btn:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--surface-strong);
  box-shadow: 0 14px 34px -18px var(--accent-glow);
}

/* ===================== NAV ===================== */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: var(--nav-h);
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(135%);
  border-bottom: 1px solid transparent;
  transition:
    background var(--dur-med) var(--ease),
    backdrop-filter var(--dur-med) var(--ease),
    box-shadow var(--dur-med) var(--ease),
    border-color var(--dur-med),
    height var(--dur-med) var(--ease);
}
.nav.scrolled {
  height: calc(var(--nav-h) - 10px);
  background: var(--nav-bg-scrolled);
  backdrop-filter: blur(26px) saturate(170%);
  border-bottom: 1px solid var(--border);
  box-shadow:
    0 12px 40px -22px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.nav-inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  order: 0;
}
.nav-logo img {
  height: 22px;
  width: auto;
  filter: var(--logo-filter);
  transition: transform var(--dur-fast) var(--ease);
}
.nav-logo:hover img {
  transform: translateY(-2px) scale(1.03);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.1rem;
}
.nav-links a {
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
  padding: 0.3rem 0;
  transition: color var(--dur-fast);
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: 0;
  width: 0%;
  height: 2px;
  background: var(--accent);
  transition: width var(--dur-fast) var(--ease);
  border-radius: 2px;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  justify-self: start;
}

.theme-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--dur-fast),
    transform var(--dur-fast),
    box-shadow var(--dur-fast);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px var(--accent-glow);
}
.theme-toggle svg {
  width: 19px;
  height: 19px;
  color: var(--text);
}
.blob-2,
.blob-3 {
  mix-blend-mode: screen;
}
html[data-theme="day"] .blob-2,
html[data-theme="day"] .blob-3 {
  mix-blend-mode: normal;
}
html[data-theme="night"] .icon-sun {
  display: none;
}
html[data-theme="day"] .icon-moon {
  display: none;
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  flex-shrink: 0;
}
.burger span {
  position: absolute;
  right: 12px;
  left: 12px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition:
    transform var(--dur-fast) var(--ease),
    opacity var(--dur-fast);
}
.burger span:nth-child(1) {
  top: 15px;
}
.burger span:nth-child(2) {
  top: 20px;
}
.burger span:nth-child(3) {
  top: 25px;
}
.burger.open span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.burger.open span:nth-child(2) {
  opacity: 0;
}
.burger.open span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: var(--nav-bg-scrolled);
  backdrop-filter: blur(26px) saturate(160%);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-med) var(--ease),
    transform var(--dur-med) var(--ease);
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-menu a {
  font-size: 1.4rem;
  font-weight: 600;
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(circle at 30% 45%, #000, transparent 72%);
  opacity: 0.5;
  pointer-events: none;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  position: relative;
  z-index: 2;
}
.hero-content {
  padding-block: 3rem;
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.3rem;
  direction: rtl;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.hero h1 {
  font-size: clamp(2.5rem, 3vw + 2rem, 4.4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: 1.4rem;
  direction: ltr;
  text-align: right;
}
.hero h1 .brand {
  font-weight: 700;
}
.hero h1 .brand .accent {
  color: var(--accent);
}
.hero h1 .line2 {
  display: block;
  font-size: 0.46em;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 0.6em;
  direction: rtl;
  font-family: var(--font-fa);
}

.hero-sub {
  font-size: 1.06rem;
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: 2.1rem;
  text-align: justify;
  text-align-last: right;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.8rem;
}

.hero-stats {
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap;
}
.stat .stat-num {
  display: block;
  font-size: 1.9rem;
  color: var(--text);
  /* LTR island: keeps the stat in typed visual order — sign on the LEFT,
     Persian digits on the RIGHT — so it reads correctly in RTL flow
     («۷+», «۵۶+», «۸۴٪» instead of the sign jumping to the right). */
  direction: ltr;
  /* Align the digits with the right edge of the RTL label below
     (direction:ltr would otherwise resolve `start` to the left edge). */
  text-align: right;
}
.stat span {
  font-size: 0.85rem;
  color: var(--text-faint);
}

.hero-fade > * {
  opacity: 0;
  transform: translateY(26px);
  animation: hero-in 0.9s var(--ease) forwards;
}
.hero-fade > *:nth-child(1) {
  animation-delay: 0.05s;
}
.hero-fade > *:nth-child(2) {
  animation-delay: 0.15s;
}
.hero-fade > *:nth-child(3) {
  animation-delay: 0.25s;
}
.hero-fade > *:nth-child(4) {
  animation-delay: 0.35s;
}
.hero-fade > *:nth-child(5) {
  animation-delay: 0.45s;
}
@keyframes hero-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- HERO VISUAL (gradient blob + 3D icons + hidden logo) ---------- */
.hero-visual {
  position: relative;
  height: min(600px, 62vh);
  display: grid;
  place-items: center;
  perspective: 1400px;
  --prox: 0;
  --mx: 0;
  --my: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(54px);
  will-change: transform;
  pointer-events: none;
}
.blob-1 {
  width: 68%;
  aspect-ratio: 1/0.9;
  background: radial-gradient(circle at 35% 35%, var(--accent), transparent 68%);
  opacity: 0.5;
  animation: blob-drift-1 22s ease-in-out infinite alternate;
  opacity: 0.62;
}
.blob-2 {
  width: 58%;
  aspect-ratio: 1/1;
  background: radial-gradient(circle at 60% 40%, var(--violet), transparent 66%);
  opacity: 0.45;
  animation: blob-drift-2 27s ease-in-out infinite alternate;
}
.blob-3 {
  width: 52%;
  aspect-ratio: 1/1.1;
  background: radial-gradient(circle at 50% 60%, var(--blue), transparent 65%);
  opacity: 0.4;
  animation: blob-drift-3 19s ease-in-out infinite alternate;
}
@keyframes blob-drift-1 {
  0% {
    transform: translate3d(-6%, -8%, 0) scale(1) rotate(0deg);
  }
  100% {
    transform: translate3d(6%, 6%, 0) scale(1.12) rotate(14deg);
  }
}
@keyframes blob-drift-2 {
  0% {
    transform: translate3d(8%, 6%, 0) scale(1.06) rotate(0deg);
  }
  100% {
    transform: translate3d(-7%, -6%, 0) scale(0.94) rotate(-16deg);
  }
}
@keyframes blob-drift-3 {
  0% {
    transform: translate3d(3%, 10%, 0) scale(0.96);
  }
  100% {
    transform: translate3d(-5%, -9%, 0) scale(1.1);
  }
}

.hero-ring {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 80px -40px var(--accent-glow);
  animation: ring-spin 44s linear infinite;
  pointer-events: none;
}
.hero-ring::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px 4px var(--accent-glow);
}
@keyframes ring-spin {
  to {
    transform: rotate(360deg);
  }
}

.hero-stack {
  position: relative;
  width: min(520px, 92%);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 10px), 0);
  transition: transform 0.5s var(--ease);
  will-change: transform;
}

.hero-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  transform: translate3d(-50%, -50%, -90px) scale(calc(0.9 + var(--prox) * 0.12));
  opacity: calc(0.04 + var(--prox) * 0.96);
  filter: var(--logo-filter) drop-shadow(0 0 26px var(--accent-glow));
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease);
  pointer-events: none;
}
.hero-logo-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74%;
  aspect-ratio: 1/0.5;
  transform: translate3d(-50%, -50%, -110px) scale(calc(0.9 + var(--prox) * 0.2));
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 68%);
  filter: blur(34px);
  opacity: calc(var(--prox) * 0.75);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  pointer-events: none;
}

.hero-icons {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate3d(calc(var(--mx) * 14px), calc(var(--my) * 14px), 60px)
    scale(calc(1 - var(--prox) * 0.015));
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.42));
  opacity: calc(1 - var(--prox));
  transition:
    transform 0.6s var(--ease),
    opacity 0.35s var(--ease);
  animation: icons-float 11s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}
@keyframes icons-float {
  0% {
    translate: 0 -8px;
  }
  100% {
    translate: 0 10px;
  }
}

.hero-hint {
  position: absolute;
  bottom: 2%;
  inset-inline-start: 50%;
  transform: translateX(50%);
  font-size: 0.78rem;
  color: var(--text-faint);
  font-weight: 500;
  opacity: calc(1 - var(--prox));
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
  white-space: nowrap;
}

.scroll-cue {
  position: absolute;
  bottom: 26px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 26px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  z-index: 3;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  animation: cue 2s var(--ease) infinite;
}
@keyframes cue {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(16px);
    opacity: 0;
  }
}

/* ===================== SECTIONS ===================== */
.section {
  position: relative;
  padding: clamp(2.75rem, 4.5vw, 4rem) 0;
}
.section-head {
  max-width: 640px;
  margin-bottom: 3.2rem;
}
.section-head .eyebrow {
  margin-bottom: 1rem;
}
.section-head h2 {
  font-size: clamp(1.9rem, 2vw + 1.3rem, 2.9rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 1rem;
}
.section-head h3 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 1rem;
}
.section-head p {
  color: var(--text-muted);
  font-size: 1.02rem;
  max-width: 56ch;
}

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-med) var(--ease),
    transform var(--dur-med) var(--ease);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(2) {
  transition-delay: 0.08s;
}
.reveal-stagger.is-visible > *:nth-child(3) {
  transition-delay: 0.16s;
}
.reveal-stagger.is-visible > *:nth-child(4) {
  transition-delay: 0.24s;
}
.reveal-stagger.is-visible > *:nth-child(5) {
  transition-delay: 0.32s;
}
.reveal-stagger.is-visible > *:nth-child(6) {
  transition-delay: 0.4s;
}

.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px) saturate(140%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
}

/* ===================== ABOUT ===================== */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  grid-template-rows: auto auto;
  gap: 3rem;
  align-items: stretch;
}
.about-visual {
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  padding: 2px;
  background: linear-gradient(150deg, var(--accent), var(--violet));
}
.about-visual-inner {
  height: 100%;
  width: 100%;
  border-radius: calc(var(--radius-lg) - 2px);
  background: var(--bg-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.about-visual-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.about-visual-inner::before {
  content: "";
  position: absolute;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle, var(--accent-glow), transparent 60%);
  filter: blur(30px);
  top: -30%;
  inset-inline-start: -30%;
  animation: float-y 9s ease-in-out infinite;
}
.about-visual-inner::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-22px);
  }
}

.about-text p {
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  font-size: 1.02rem;
}
.about-text h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.about-text .about-p {
  text-align: justify;
  text-align-last: right;
}

/* ---------- about: skill bars ---------- */
.skill-bars {
  display: grid;
  gap: 1.1rem;
  align-self: center;
}
.skill-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  direction: ltr; /* skill titles on the left, percentages on the right (page is RTL) */
  margin-bottom: 0.45rem;
}
.skill-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.skill-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}
.skill-track {
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.skill-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(to left, var(--accent), var(--violet));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-slow) var(--ease);
}
.skill:nth-child(2) .skill-fill {
  transition-delay: 0.18s;
}
.skill:nth-child(3) .skill-fill {
  transition-delay: 0.36s;
}
.skill-bars.is-visible .skill-fill {
  transform: scaleX(var(--fill, 0));
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-self: center;
}
.fact {
  padding: 1.1rem 1rem;
  border-radius: var(--radius-md);
  text-align: center;
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast);
}
.fact:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.fact .fact-num {
  display: block;
  font-size: 1.5rem;
  color: var(--accent);
  direction: ltr;
}
.fact span {
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* ===================== SERVICES ===================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.service-card {
  position: relative;
  padding: 2.1rem 1.8rem;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    340px circle at var(--sx, 50%) var(--sy, 50%),
    var(--accent-soft),
    transparent 70%
  );
  transition: opacity var(--dur-fast);
  pointer-events: none;
}
.service-card:hover::before {
  opacity: 1;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow:
    0 26px 54px -24px var(--accent-glow),
    var(--shadow-ambient);
}
.service-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--accent-soft), rgba(64, 11, 255, 0.16));
  border: 1px solid var(--border);
  margin-bottom: 1.4rem;
  transition: transform var(--dur-fast) var(--ease);
}
.service-card:hover .service-icon {
  transform: translateY(-3px) rotate(-4deg);
}
.service-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent);
}
.service-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.service-card p {
  color: var(--text-muted);
  font-size: 0.94rem;
}

/* ===================== WORKS ===================== */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
/* sliding pager: pages translate horizontally inside the clipped viewport */
.works-viewport {
  --works-slide-gap: 1.4rem; /* keep in sync with .works-grid gap */
  overflow: hidden;
  touch-action: pan-y; /* vertical scrolling stays native; horizontal = swipe */
  /* bleed so the cards' hover lift/shadows are not clipped at the edges */
  padding: 10px 6px 44px;
  margin: -10px -6px -44px;
}
.works-track {
  display: flex;
  gap: var(--works-slide-gap);
  transition: transform var(--dur-med) var(--ease);
  will-change: transform;
}
.works-page {
  flex: 0 0 100%;
  min-width: 100%;
}
.work-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast),
    border-color var(--dur-fast);
}
.work-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 30px 60px -26px var(--accent-glow);
}
.work-visual {
  height: 210px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.work-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(247, 247, 247, 0.1), transparent 60%);
  transition: opacity var(--dur-fast);
}
.work-visual span {
  font-size: 2.4rem;
  font-weight: 700;
  color: rgba(247, 247, 247, 0.85);
  z-index: 1;
  direction: ltr;
  transition: transform var(--dur-med) var(--ease);
}
.work-card:hover .work-visual span {
  transform: scale(1.14) translateY(-4px);
}
.wv-1 {
  background: linear-gradient(135deg, var(--ink), var(--blue));
}
.wv-2 {
  background: linear-gradient(135deg, var(--violet), var(--ink));
}
.wv-3 {
  background: linear-gradient(135deg, var(--blue), var(--charcoal));
}
.wv-4 {
  background: linear-gradient(135deg, var(--charcoal), var(--violet));
}
.wv-5 {
  background: linear-gradient(135deg, var(--ink), var(--violet));
}
.wv-6 {
  background: linear-gradient(135deg, var(--blue), var(--violet));
}

/* featured work image + zoom trigger */
.work-zoom {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.work-zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease);
}
.work-zoom:hover img,
.work-zoom:focus-visible img {
  transform: scale(1.06);
}
.work-zoom-icon {
  position: absolute;
  bottom: 0.9rem;
  inset-inline-start: 0.9rem;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 7, 38, 0.55);
  border: 1px solid var(--border);
  color: var(--paper);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.work-zoom-icon svg {
  width: 18px;
  height: 18px;
}
.work-zoom:hover .work-zoom-icon,
.work-zoom:focus-visible .work-zoom-icon {
  opacity: 1;
  transform: translateY(0);
}

/* lightbox (expanded project view) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: var(--lightbox-backdrop);
  backdrop-filter: blur(12px) saturate(130%);
  animation: lightbox-fade var(--dur-fast) var(--ease);
}
.lightbox-frame {
  margin: 0;
  max-width: min(94vw, 1000px);
  animation: lightbox-zoom var(--dur-med) var(--ease);
}
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius-md);
  box-shadow: var(--lightbox-img-shadow);
}
.lightbox-cap {
  margin-top: 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* zoomable lightbox image (portfolio item 01) */
.lightbox-img.zoomable {
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
  will-change: transform;
}
.lightbox-img.zoomable.is-zoomed {
  cursor: grab;
}
.lightbox-img.zoomable.is-dragging {
  cursor: grabbing;
}
.lightbox-cap {
  transition: opacity var(--dur-fast) var(--ease);
}
.lightbox-img.is-zoomed ~ .lightbox-cap {
  opacity: 0;
}
.lightbox-zoom-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  opacity: 0.75;
}
.lightbox-zoom-controls {
  position: absolute;
  top: clamp(0.9rem, 3vw, 1.6rem);
  inset-inline-start: clamp(0.9rem, 3vw, 1.6rem);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  backdrop-filter: blur(12px);
  animation: lightbox-fade var(--dur-fast) var(--ease);
}
.lightbox-zoom-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color var(--dur-fast),
    border-color var(--dur-fast);
}
.lightbox-zoom-btn svg {
  width: 18px;
  height: 18px;
}
.lightbox-zoom-btn:hover:not(:disabled),
.lightbox-zoom-btn:focus-visible:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}
.lightbox-zoom-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.lightbox-zoom-level {
  min-width: 3.4rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* day-theme tuning for the lightbox window:
   light designs need a hairline frame and crisper glass controls to stay readable */
html[data-theme="day"] .lightbox-img {
  border: 1px solid var(--border);
}
html[data-theme="day"] .lightbox-close,
html[data-theme="day"] .lightbox-zoom-controls,
html[data-theme="day"] .lightbox-nav {
  background: rgba(255, 255, 255, 0.74);
}
.lightbox-close {
  position: absolute;
  top: clamp(0.9rem, 3vw, 1.6rem);
  inset-inline-end: clamp(0.9rem, 3vw, 1.6rem);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast),
    color var(--dur-fast);
}
.lightbox-close svg {
  width: 20px;
  height: 20px;
}
.lightbox-close:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: rotate(90deg);
}
/* multi-image lightbox gallery (e.g. website banners) */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  animation: lightbox-fade var(--dur-fast) var(--ease);
  transition:
    color var(--dur-fast),
    border-color var(--dur-fast),
    opacity var(--dur-fast);
}
.lightbox-nav svg {
  width: 22px;
  height: 22px;
}
.lightbox-nav:hover:not(:disabled),
.lightbox-nav:focus-visible:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}
.lightbox-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.lightbox-nav-prev {
  inset-inline-end: clamp(0.6rem, 2.5vw, 1.6rem);
}
.lightbox-nav-next {
  inset-inline-start: clamp(0.6rem, 2.5vw, 1.6rem);
}
.lightbox-count {
  margin-inline-start: 0.55rem;
  font-size: 0.8rem;
  opacity: 0.75;
}
@media (max-width: 600px) {
  .lightbox-nav {
    width: 38px;
    height: 38px;
  }
}

@keyframes lightbox-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes lightbox-zoom {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.work-body {
  padding: 1.4rem 1.5rem 1.7rem;
}
.work-cat {
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: block;
  direction: ltr;
  text-align: right;
}
.work-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.work-body p {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.works-head {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem 2rem;
  flex-wrap: wrap;
}
.works-head-main {
  max-width: 640px;
}
.works-head-side {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
  flex-wrap: wrap;
}
.works-nav {
  display: flex;
  gap: 0.55rem;
}
.works-nav-btn {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast),
    color var(--dur-fast);
}
.works-nav-btn svg {
  width: 20px;
  height: 20px;
}
.works-nav-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--surface-strong);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -18px var(--accent-glow);
}
.works-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ===================== CONTACT ===================== */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.contact-card {
  padding: 2.6rem;
}
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.6rem;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  transition:
    border-color var(--dur-fast),
    transform var(--dur-fast),
    box-shadow var(--dur-fast);
}
.contact-item:hover {
  border-color: var(--accent);
  transform: translateX(4px);
  box-shadow: 0 16px 34px -24px var(--accent-glow);
}
.contact-item .ic {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--accent-soft), rgba(64, 11, 255, 0.18));
}
.contact-item .ic svg {
  width: 20px;
  height: 20px;
  stroke: var(--text);
}
.contact-item .meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.contact-item .meta b {
  font-size: 0.95rem;
  font-weight: 700;
}
.contact-item .meta span {
  font-size: 0.85rem;
  color: var(--text-muted);
  direction: ltr;
  text-align: right;
}

.form-group {
  margin-bottom: 1.1rem;
}
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-faint);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.form-group input[type="tel"] {
  direction: ltr;
  text-align: right;
}
textarea {
  resize: vertical;
  min-height: 110px;
}
.form-note {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: 0.9rem;
}
.form-note.success {
  color: var(--accent);
  font-weight: 600;
}

/* ===================== FOOTER ===================== */
footer {
  padding: 2.6rem 0 2.2rem;
  border-top: 1px solid var(--border);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-inner p {
  color: var(--text-faint);
  font-size: 0.85rem;
}
.footer-social {
  display: flex;
  gap: 0.8rem;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--dur-fast),
    transform var(--dur-fast);
}
.footer-social a:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.footer-social svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
  .hero .container {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    order: -1;
    height: 320px;
    margin-top: 1.5rem;
  }
  .hero-content {
    padding-block: 1.5rem 3rem;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-visual {
    max-width: 340px;
    margin-inline: auto;
    aspect-ratio: 1/1.05;
  }
  .services-grid,
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .works-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .works-head-side {
    width: 100%;
    justify-content: space-between;
  }
  .contact-wrap {
    grid-template-columns: 1fr;
  }
  .nav-links {
    display: none;
  }
  .nav-inner {
    grid-template-columns: auto 1fr auto;
  }
  .burger {
    display: block;
  }
  .nav-actions .cta-btn {
    display: none;
  }
  .scroll-cue {
    display: none;
  }
}
@media (max-width: 600px) {
  .services-grid,
  .works-grid {
    grid-template-columns: 1fr;
  }
  .hero-stats {
    gap: 1.4rem;
  }
  .contact-card {
    padding: 1.7rem;
  }
  .hero-visual {
    height: 270px;
  }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-fade > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-stack,
  .hero-icons {
    transform: none !important;
  }
  .hero-logo {
    opacity: 0.45 !important;
  }
}

/* theme-tuned gradient intensity */
html[data-theme="day"] .blob-1 {
  opacity: 0.55;
}
html[data-theme="day"] .blob-2 {
  opacity: 0.3;
}
html[data-theme="day"] .blob-3 {
  opacity: 0.28;
}
html[data-theme="night"] .blob-2 {
  opacity: 0.5;
}
html[data-theme="night"] .blob-3 {
  opacity: 0.45;
}

/* ===================== ABOUT SECTION ADJUSTMENT (blocksy-child) =====================
   Tighten the bottom spacing of the About section so the gap between it and
   the Services section stays in step with the spacing rhythm used across the
   other sections of the page. */
#about.section {
  padding-bottom: clamp(1.75rem, 2.5vw, 2.25rem);
}

/* =========================================================
   Account — Login / Register (CS-Login integration)
   Guest: trigger button in the nav + mobile menu opens the
   login modal (rendered by the CS-Login shortcode). Logged-in:
   avatar/icon + display name linking to the My Account page.
   All colors/typography reuse the design tokens above.
   ========================================================= */

/* ----- header account button ----- */
.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 42px;
  padding: 0 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    border-color var(--dur-fast),
    transform var(--dur-fast),
    box-shadow var(--dur-fast),
    background var(--dur-fast);
}
.account-btn:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px var(--accent-glow);
}
.account-btn--trigger svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.account-btn--user {
  /* RTL: tighter padding around the avatar (inline-start) */
  padding-inline: 0.65rem 1.05rem;
}
.account-avatar {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-strong);
  flex-shrink: 0;
}
.account-avatar svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 6px;
  color: var(--text-muted);
}
.account-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.account-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- header cart button (icon + live item-count badge) -----
   Same 42px circular button language as .theme-toggle, so it sits
   flush in .nav-actions on every breakpoint. The badge shows the
   Persian-formatted item count (rendered by PHP and refreshed live
   through WooCommerce's AJAX add-to-cart fragments) and is hidden
   while the cart is empty. */
.sg-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  transition:
    border-color var(--dur-fast),
    transform var(--dur-fast),
    box-shadow var(--dur-fast);
}
.sg-cart-btn:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px var(--accent-glow);
}
.sg-cart-btn svg {
  width: 19px;
  height: 19px;
  color: var(--accent);
}
.sg-cart-count {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px; /* RTL: visually top-left of the icon */
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -4px var(--accent-glow);
  pointer-events: none;
}
.sg-cart-count[hidden] {
  display: none;
}
/* inline badge variant (mobile-menu cart link) */
.sg-cart-count--inline {
  position: static;
  inset: auto;
}

/* mobile menu account item (matches .mobile-menu a) */
.mobile-menu .mobile-account-btn {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.mobile-menu .mobile-account-btn:hover {
  color: var(--accent);
}

/* mobile menu cart link (matches .mobile-menu a + the account button) */
.mobile-menu .mobile-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.mobile-menu .mobile-cart-link svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

/* ----- Login / Register modal ----- */
.sg-modal {
  position: fixed;
  inset: 0;
  z-index: 400; /* above nav (100), mobile menu (99), lightbox (300) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.sg-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--lightbox-backdrop);
  backdrop-filter: blur(10px);
}
.sg-modal-panel {
  position: relative;
  width: min(440px, 100%);
  max-height: min(86svh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in oklab, var(--bg-2) 92%, transparent);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-ambient);
  padding: 2rem;
  scrollbar-width: thin;
}
.sg-modal-head h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}
.sg-modal-head p {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.sg-modal-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px; /* RTL: visually top-left, opposite the reading start */
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition:
    border-color var(--dur-fast),
    transform var(--dur-fast),
    box-shadow var(--dur-fast);
}
.sg-modal-close:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px var(--accent-glow);
}
.sg-modal-close svg {
  width: 16px;
  height: 16px;
}

/* body scroll lock while the modal is open */
body.sg-modal-open {
  overflow: hidden;
}

/* ----- CS-Login form → design tokens (inside the modal) -----
   The shortcode ships its own palette (--ez-*). Overriding those
   variables under .sg-modal maps the whole form to the site's
   night/day tokens with zero duplicated CSS and no !important. */
.sg-modal-body .ez-login-form {
  --ez-card: transparent; /* the modal panel is the card */
  --ez-bg: transparent;
  --ez-text: var(--text);
  --ez-muted: var(--text-muted);
  --ez-border: var(--border);
  --ez-soft: var(--surface);
  --ez-primary: var(--accent);
  --ez-primary-h: var(--accent);
  --ez-primary-fg: var(--on-accent);
  --ez-ring: var(--accent-soft);
  --ez-radius: var(--radius-sm);
  --ez-shadow: none;
  --ez-input-bg: var(--input-bg);
  --ez-input-bd: var(--border);
  --ez-input-focus-bd: var(--accent);
  --ez-input-hover-bd: var(--accent);
  --ez-placeholder-fg: var(--text-faint);
  --ez-label-fg: var(--text);
  --ez-phone-flag-bg: var(--surface);
  --ez-phone-flag-bd: var(--border);
  --ez-method-bg: var(--surface);
  --ez-method-active-bg: var(--surface-strong);
  --ez-method-fg: var(--text-muted);
  --ez-method-hover-fg: var(--text);
  --ez-method-active-fg: var(--text);
  --ez-google-tab-active-fg: var(--accent);
  --ez-ghost-bg: var(--surface);
  --ez-ghost-fg: var(--text);
  --ez-ghost-bd: var(--border);
  --ez-ghost-hover-bg: var(--surface-strong);
  --ez-badge-fg: var(--text);
  --ez-timer-fg: var(--text-muted);
  --ez-timer-bg: var(--surface);
  --ez-register-bg: var(--surface);
  --ez-register-bd: var(--border);

  background: transparent; /* root uses background: var(--ez-card) */
  border: none;
  box-shadow: none;
  max-width: none;
}
.sg-modal-body .ez-login-form::before {
  display: none; /* remove the plugin's gradient top bar inside the modal */
}
/* feedback messages: theme-aware light/dark palettes */
html[data-theme="night"] .sg-modal-body .ez-login-form {
  --ez-info-fg: #baf7d0;
  --ez-info-bg: rgba(22, 163, 74, 0.14);
  --ez-info-bd: rgba(22, 163, 74, 0.28);
  --ez-error-fg: #fecaca;
  --ez-error-bg: rgba(220, 38, 38, 0.16);
  --ez-error-bd: rgba(220, 38, 38, 0.3);
  --ez-badge-bg: rgba(0, 145, 109, 0.16);
  --ez-badge-bd: rgba(0, 145, 109, 0.3);
}
html[data-theme="day"] .sg-modal-body .ez-login-form {
  --ez-info-fg: #065f46;
  --ez-error-fg: #991b1b;
}

@media (max-width: 600px) {
  /* icon-only account buttons in the nav (match .theme-toggle) */
  .account-btn--user .account-name {
    display: none;
  }
  .account-btn--user {
    padding-inline: 0.55rem;
  }
  .account-btn--trigger span {
    display: none;
  }
  .account-btn--trigger {
    width: 42px;
    padding: 0;
  }
  /* tighter action gap so the logo + the four icon buttons stay on one line */
  .nav-actions {
    gap: 0.55rem;
  }
  .sg-modal-panel {
    padding: 1.5rem;
  }
}