/* =========================================================
   Shahin Accounting — Stylesheet
   Brand: Navy #0e2b4a  |  Gold #c19f5b  |  Gold-dark #7a5a24
   ========================================================= */

/* Skip navigation link — WCAG 2.4.1 Bypass Blocks */
.skip-link {
  position: absolute;
  top: -100%;
  right: 50%;
  transform: translateX(50%);
  z-index: 9999;
  background: #0e2b4a;
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 0 0 12px 12px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #8a6d3b;
  outline-offset: 2px;
}

@font-face {
  font-family: 'Peyda';
  src: url('../font/Peyda/Peyda-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peyda';
  src: url('../font/Peyda/Peyda-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peyda';
  src: url('../font/Peyda/Peyda-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peyda';
  src: url('../font/Peyda/Peyda-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peyda';
  src: url('../font/Peyda/Peyda-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peyda';
  src: url('../font/Peyda/Peyda-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peyda';
  src: url('../font/Peyda/Peyda-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peyda';
  src: url('../font/Peyda/Peyda-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peyda';
  src: url('../font/Peyda/Peyda-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #0e2b4a;
  --gold: #c19f5b;
  --gold-dark: #7a5a24;
  --ink:  #1f2937;
  --muted:#6b7280;
  --line: #e5e7eb;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --header: rgba(255, 255, 255, 0.95);
  --font: 'Peyda', system-ui, -apple-system, sans-serif;
}

html.dark {
  color-scheme: dark;
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --line: #1f334a;
  --bg: #0b1522;
  --surface: #122033;
  --surface-2: #162636;
  --header: rgba(11, 21, 34, 0.95);
  --gold-dark: #c9a85d;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Layout guard (root level): the same guarantee `overflow-x: clip` on body
   gives — but at the root. Absolutely-positioned elements whose containing
   block is the INITIAL containing block (i.e. no positioned ancestor) would
   otherwise escape body's clip and create a huge horizontal scrollable area
   on <html>. In RTL documents that area opens to the LEFT, so mobile users
   could pan the whole page sideways and the fixed floating header appeared
   to stick out of the screen edge. Real case: the comment-form honeypot
   (left:-99999px) on single-article pages. `clip` — unlike `hidden` — does
   NOT create a scroll container, so the sticky/fixed site header keeps
   working. Unsupported browsers ignore it and keep the old behaviour. */
html { overflow-x: clip; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  direction: rtl;
  margin: 0;
  transition: background-color .25s ease, color .25s ease;
  /* Layout guard: nothing inside the page can push the document wider
     than the viewport (the classic "theme breaks on mobile" symptom).
     `clip` — unlike `hidden` — does NOT create a scroll container, so
     position:sticky (site header) keeps working. Unsupported browsers
     simply ignore it and keep the old behaviour. */
  overflow-x: clip;
}

.font-peyda,
.font-dana,
.font-shabnam { font-family: var(--font); }
.nums { font-feature-settings: "tnum" on, "lnum" on; }

/* =========================================================
   LAYOUT
   ========================================================= */
#app { min-height: 60vh; }

/* =========================================================
   GLOBAL — 15px rounding, form fields, etc.
   ========================================================= */
input[type="text"], input[type="tel"], input[type="email"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select {
  border-radius: 15px !important;
}
details { border-radius: 15px; overflow: hidden; }
.r-15, .btn-square { border-radius: 15px !important; }
.aspect-\[4\/3\], .aspect-\[16\/9\] { border-radius: 15px; overflow: hidden; }

/* Nav underline */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  right: 0; bottom: -6px;
  height: 1px; width: 0;
  background: var(--gold);
  transition: width .3s ease;
}
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--gold-dark); }
.nav-link.active::after { width: 100%; }

/* Reveal on scroll */
@keyframes fadeUp {
  from { transform: translateY(12px); }
  to   { transform: translateY(0); }
}
.reveal { animation: fadeUp .7s ease both; }

/* FAQ — compact home accordion */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.home-faq__inner {
  padding: 1.35rem 1.25rem 1.5rem;
}
.home-faq__head {
  margin-bottom: 0.85rem;
}
.home-faq__title {
  margin: 0.35rem 0 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
}
.home-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.home-faq__item {
  border-radius: 12px;
  overflow: hidden;
}
.home-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.home-faq__summary span {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
}
.home-faq__icon {
  width: 1rem;
  height: 1rem;
  color: var(--gold);
  flex-shrink: 0;
  display: block;
  transition: transform .25s ease;
}
.home-faq__item[open] .home-faq__icon {
  transform: rotate(180deg);
}
.home-faq__answer {
  padding: 0.55rem 0.9rem 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  line-height: 1.7;
  color: #64748b;
}
html.dark .home-faq__item {
  background: var(--surface);
  border-color: var(--line);
}
html.dark .home-faq__summary span {
  color: #e8eef5;
}
html.dark .home-faq__answer {
  color: rgba(226, 232, 240, 0.72);
  border-color: var(--line);
}
html.dark .home-faq__title {
  color: #e8eef5 !important;
}
@media (min-width: 1024px) {
  .home-faq__inner {
    padding: 1.75rem 2rem 1.85rem;
  }
  .home-faq__title {
    font-size: 1.5rem;
  }
  .home-faq__head {
    margin-bottom: 1rem;
  }
  .home-faq__summary {
    min-height: 2.9rem;
    padding: 0.7rem 1rem;
  }
  .home-faq__summary span {
    font-size: 0.875rem;
  }
  .home-faq__answer {
    font-size: 0.8125rem;
    padding: 0.65rem 1rem 0.85rem;
  }
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 15px; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
::selection { background: var(--navy); color: #fff; }

/* Article prose */
.prose h2 {
  color: var(--navy);
  font-weight: 700;
  scroll-margin-top: 5.5rem;
}
html.dark .prose h2 { color: #e8eef5; }

/* Post body text — light weight (300) with airy Persian line-height */
.article-content {
  font-weight: 300;
  line-height: 1.9;
  /* Long unbreakable strings (URLs, codes) wrap instead of pushing the
     content column wider than the viewport on phones. */
  overflow-wrap: break-word;
}
.article-content strong,
.article-content b { font-weight: 600; }

/* Headings inside post content — slightly larger, structured spacing */
.article-content h1 {
  font-size: 1.75rem;
  line-height: 1.45;
  font-weight: 800;
  color: var(--navy);
  margin: 2.2rem 0 1rem;
  scroll-margin-top: 5.5rem;
}
.article-content h2 {
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 2rem 0 0.9rem;
}
.article-content h3 {
  font-size: 1.25rem;
  line-height: 1.55;
  font-weight: 700;
  color: var(--navy);
  margin: 1.7rem 0 0.75rem;
  scroll-margin-top: 5.5rem;
}
.article-content h4 {
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--navy);
  margin: 1.5rem 0 0.65rem;
  scroll-margin-top: 5.5rem;
}
html.dark .article-content h1,
html.dark .article-content h3,
html.dark .article-content h4 { color: #e8eef5; }

/* Structural spacing — restore readable rhythm stripped by preflight */
.article-content p { margin: 0 0 1.1rem; }
.article-content ul,
.article-content ol { margin: 0 0 1.1rem; padding-right: 1.4rem; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin: 0 0 0.45rem; }
.article-content li > ul,
.article-content li > ol { margin: 0.45rem 0 0; }
.article-content blockquote { margin: 1.4rem 0; }
.article-content figure { margin: 1.5rem 0; }
.article-content img { border-radius: 15px; }
.article-content hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--line); }

/* =========================================================
   ARTICLE TABLES — RESPONSIVE SYSTEM (mobile-first UX)
   ---------------------------------------------------------
   PHP (Shahin_Hesab_Public::make_tables_responsive) wraps
   every content table as:
     .sh-table-wrap            — framed card (border + radius)
       .sh-table-scroll        — overflow-x region, keyboard focusable
         table
   The scroller owns the overflow, so a wide table can never
   stretch the page and break the theme on phones again.
   ========================================================= */

/* Safety net: a table that somehow skipped the PHP wrapper becomes
   its own scroll region instead of breaking the layout. */
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
}
.article-content > table,
.article-content > p > table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Frame around the scroller */
.sh-table-wrap {
  position: relative;
  margin: 1.6rem 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 15px;
}

/* The actual scroll region. tabindex="0" + role="region" come from the
   PHP wrapper — keyboard users can arrow-key scroll it (WCAG 2.1.1). */
.sh-table-scroll {
  --sh-hint: rgba(15, 23, 42, 0.12); /* edge-hint shadow colour */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;    /* don't chain-scroll the page */
  border-radius: inherit;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  background-color: var(--surface);
  /* Pure-CSS scroll hints (RTL-aware): the opaque covers ride with the
     content (`local`), the soft shadows stay fixed (`scroll`) — so a
     shadow only shows on a side that still hides more columns. */
  background-image:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left,  var(--surface) 30%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 100% 50%, var(--sh-hint), transparent),
    radial-gradient(farthest-side at 0% 50%,   var(--sh-hint), transparent);
  background-position: right center, left center, right center, left center;
  background-size: 2.25rem 100%, 2.25rem 100%, 0.8rem 100%, 0.8rem 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
html.dark .sh-table-scroll { --sh-hint: rgba(2, 8, 20, 0.55); }
.sh-table-scroll:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.sh-table-scroll::-webkit-scrollbar { height: 8px; }
.sh-table-scroll::-webkit-scrollbar-track { background: transparent; }
.sh-table-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
html.dark .sh-table-scroll::-webkit-scrollbar-thumb { background: #33455e; }

/* Table inside the scroller — inner lines only; the frame owns the
   outer border. `separate` (not `collapse`) so borders stay attached
   to their cells — required for the sticky first column on mobile. */
.sh-table-scroll table {
  display: table;
  width: 100%;
  min-width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95em;
}
.sh-table-scroll th,
.sh-table-scroll td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0.85rem;
  text-align: right;
  vertical-align: top;
  /* Let absurdly long words shrink the column instead of widening
     the table (`anywhere` also reduces min-content width). */
  overflow-wrap: anywhere;
  word-break: normal;
}
/* Column separators: the boundary to the NEXT column (visually the
   left edge in RTL) — one line per boundary, none on the outer edge. */
.sh-table-scroll th:not(:last-child),
.sh-table-scroll td:not(:last-child) {
  border-left: 1px solid var(--line);
}
.sh-table-scroll tr:last-child th,
.sh-table-scroll tr:last-child td { border-bottom: 0; }

.sh-table-scroll th {
  font-weight: 600;
  background: var(--surface-2, #f8fafc);
  color: var(--ink);
}
.sh-table-scroll thead th {
  font-weight: 700;
  border-bottom: 2px solid var(--line);
}

/* Zebra rows — solid colour so the mobile pinned column can reuse it */
.sh-table-scroll tbody tr:nth-child(even) { background: var(--surface-2, #f8fafc); }

@media (hover: hover) and (pointer: fine) {
  .sh-table-scroll tbody tr { transition: background-color .15s ease; }
  .sh-table-scroll tbody tr:hover { background: rgba(193, 159, 91, 0.08); }
}

/* Caption (classic editor <caption>) and Gutenberg figcaption */
.sh-table-scroll caption {
  caption-side: bottom;
  padding: 0.6rem 0.85rem 0.7rem;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
}
.article-content .wp-block-table figcaption {
  font-size: 0.8rem;
  color: var(--muted);
  padding-top: 0.55rem;
  text-align: right;
}

/* Gutenberg alignment utilities — block library CSS is dequeued, so
   without these, per-cell alignment set in the editor would be lost. */
.article-content .has-text-align-center { text-align: center; }
.article-content .has-text-align-right  { text-align: right; }
.article-content .has-text-align-left   { text-align: left; }
.article-content .has-text-align-justify { text-align: justify; }

/* ---------- Phones (<640px): compact + pinned first column ---------- */
@media (max-width: 639px) {
  .sh-table-scroll th,
  .sh-table-scroll td {
    padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
  }
  .sh-table-scroll thead th {
    font-size: 0.8125rem;
    white-space: nowrap;   /* keep header labels scannable while scrolling */
  }
  /* Floor width so columns never get crushed to unreadable slivers —
     the table overflows into the scroller instead. */
  .sh-table-scroll td { min-width: 5.5rem; }

  /* Pin the first column (row headers) at the scroll-start edge while
     the remaining columns slide underneath. RTL start edge = right,
     expressed with the logical property so it flips with dir. */
  .sh-table-scroll th:first-child,
  .sh-table-scroll td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--surface);           /* opaque: hides passing cells */
    box-shadow: -1px 0 0 0 var(--line);   /* boundary line on the leading edge */
  }
  .sh-table-scroll thead th:first-child,
  .sh-table-scroll th:first-child {
    background: var(--surface-2, #f8fafc);
  }
  .sh-table-scroll tbody tr:nth-child(even) th:first-child,
  .sh-table-scroll tbody tr:nth-child(even) td:first-child {
    background: var(--surface-2, #f8fafc); /* keep the zebra on the pinned cell */
  }
  /* Soft depth shadow only when the table actually overflows
     (class toggled by app.js — absent on tables that fit). */
  .sh-table-scroll.is-scrollable th:first-child,
  .sh-table-scroll.is-scrollable td:first-child {
    box-shadow: -1px 0 0 0 var(--line), -10px 0 12px -10px rgba(15, 23, 42, 0.35);
  }
}
html.dark .sh-table-scroll.is-scrollable th:first-child,
html.dark .sh-table-scroll.is-scrollable td:first-child {
  box-shadow: -1px 0 0 0 var(--line), -10px 0 12px -10px rgba(0, 0, 0, 0.6);
}

.prose blockquote {
  border-right: 4px solid var(--gold);
  padding-right: 1rem;
  color: #475569;
  font-style: normal;
}
html.dark .prose blockquote { color: #94a3b8; }
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
html.dark .prose a { color: var(--gold); }

/* Article TOC */
.article-toc .toc-list {
  list-style: none;
  counter-reset: toc;
  margin: 0;
}
.article-toc .toc-list li {
  counter-increment: toc;
  position: relative;
  padding-right: 1.75rem;
}
.article-toc .toc-list li::before {
  content: counter(toc);
  position: absolute;
  right: 0;
  top: 0.1rem;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  font-feature-settings: "tnum" on;
}
.article-toc .toc-link {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: #475569;
  text-decoration: none;
  transition: color .2s ease;
}
html.dark .article-toc .toc-link { color: #94a3b8; }
.article-toc .toc-link:hover,
.article-toc .toc-link.active {
  color: var(--navy);
  font-weight: 700;
}
html.dark .article-toc .toc-link:hover,
html.dark .article-toc .toc-link.active {
  color: var(--gold);
}
.article-toc.collapsed .toc-list { display: none; }
.article-toc.collapsed .toc-chevron { transform: rotate(180deg); }
@media (min-width: 640px) {
  .article-toc.collapsed .toc-list { display: block; }
  .article-toc .toc-chevron { display: none; }
}

/* Article rating */
.rating-stars-display .fill-star {
  color: var(--gold);
  fill: var(--gold);
}
.rating-stars-display .fill-star.half {
  opacity: .45;
}
.rating-input .rating-star {
  color: #cbd5e1;
  background: transparent;
  border: 0;
  padding: 2px;
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
  line-height: 0;
}
.rating-input .rating-star:hover,
.rating-input .rating-star.is-hover,
.rating-input .rating-star.is-active {
  color: var(--gold);
  transform: translateY(-1px);
}
.rating-input .rating-star.is-active svg,
.rating-input .rating-star.is-hover svg {
  fill: currentColor;
}
.rating-input.is-locked .rating-star {
  cursor: default;
  pointer-events: none;
}
#ratingMsg.is-success {
  color: #10b981;
  font-weight: 700;
}
#ratingMsg.is-error {
  color: #ef4444;
}
.rating-input .rating-star.is-active {
  transform: translateY(-1px) scale(1.08);
}

/* =========================================================
   ARTICLE COMMENTS
   ========================================================= */
.article-comments {
  /* When the user clicks a "leave a comment" anchor, scroll-margin-top
     keeps the section header below the floating mobile header instead
     of hiding it underneath. */
  scroll-margin-top: 110px;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.article-comments__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.article-comments__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
}
.article-comments__count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 0.35rem 0.75rem;
}
.article-comments__list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.comment-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 1rem 1.1rem;
}
.comment-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}
.comment-card__avatar {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--navy);
  color: var(--gold);
  font-size: 0.875rem;
  font-weight: 700;
}
.comment-card__who { min-width: 0; }
.comment-card__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comment-card__date {
  display: block;
  font-size: 0.6875rem;
  color: #94a3b8;
  margin-top: 0.1rem;
}
.comment-card__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.75;
  color: #475569;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.comment-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 1.75rem 1.25rem;
  border: 1px dashed var(--line);
  border-radius: 15px;
  background: var(--surface-2, #f8fafc);
}
.comment-empty__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 15px;
  background: var(--navy);
  color: var(--gold);
}
.comment-empty__badge i,
.comment-empty__badge svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}
.comment-empty__text {
  margin: 0;
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--muted);
}

/* Kill leftover WP comment chrome if a theme injects it */
#respond,
.comment-respond,
.comment-reply-title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.comment-form {
  /* Contain the honeypot field (position:absolute; left:-99999px) INSIDE the
     form. Without a positioned ancestor the honeypot resolves against the
     initial containing block, escapes body's `overflow-x: clip` and expands
     the document's horizontal scrollable area by ~100k px (RTL opens it to
     the left). Mobile visitors could then pan the whole single-article page
     sideways — the fixed floating header ended up sticking out of the
     screen edge. With `position: relative` here the honeypot is clipped by
     body's guard and the page can no longer pan horizontally. */
  position: relative;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.15rem 1.2rem 1.25rem;
  /* Reserve space at the bottom on mobile so the floating call & WhatsApp
     buttons (which are position:fixed at bottom:1rem, height:3.25rem) never
     overlap the submit button when the form scrolls into the viewport
     bottom. Without this, on small phones the user taps "ارسال نظر" and
     actually hits the WhatsApp icon. */
  scroll-margin-bottom: 6rem;
  scroll-margin-top: 110px;
}
/* When the form is submitting, dim the fields and prevent further edits. */
.comment-form.is-submitting {
  pointer-events: none;
  opacity: 0.92;
}
.comment-form__head {
  margin-bottom: 0.95rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.comment-form__title {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
}
.comment-form__subtitle {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--muted);
}
.comment-form__msg {
  display: none;
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.7;
  border: 1px solid transparent;
}
.comment-form__msg.is-success {
  color: #047857;
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.30);
}
.comment-form__msg.is-error {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.30);
}
.comment-form__fields {
  display: grid;
  gap: 0.85rem;
}
.comment-form .comment-field {
  min-width: 0;
}
.comment-form .comment-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
}
.comment-form .comment-field__opt {
  font-weight: 600;
  color: #64748b;
}
.comment-form .comment-field__req {
  color: #dc2626;
  font-weight: 700;
  margin-right: 0.15rem;
}
/* Honeypot: hidden from real users, visible to bots. */
.comment-form .comment-field--hp {
  position: absolute !important;
  left: -99999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.comment-form .comment-field--hp input {
  /* Keep it focusable by keyboard tabbing navigation BUT visually hidden,
     so screen readers and keyboard users can still skip it via tabindex="-1"
     set on the markup. */
  width: 1px;
  height: 1px;
}
.comment-form .comment-field input[type="text"],
.comment-form .comment-field input[type="email"],
.comment-form .comment-field textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 2.85rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.8125rem;
  background: #fff;
  color: var(--ink, #1f2937);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.comment-form .comment-field textarea {
  min-height: 7.5rem;
  resize: vertical;
  line-height: 1.75;
}
.comment-form .comment-field input::placeholder,
.comment-form .comment-field textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}
.comment-form .comment-field input:focus,
.comment-form .comment-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(193, 159, 91, 0.18);
}
/* Highlight invalid fields with a clear red border + ring (set by JS). */
.comment-form .comment-field input.is-invalid,
.comment-form .comment-field textarea.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16) !important;
}
.comment-form .comment-field__counter {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.6875rem;
  color: #94a3b8;
  text-align: left;
}
.comment-form .comment-field__counter.is-near-limit {
  color: #d97706;
}

.comment-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 3rem;
  margin-top: 1rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 13px;
  background: var(--gold);
  color: var(--navy);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease, transform .15s ease, opacity .2s ease;
  /* iOS: make sure the whole button is tappable, not just the text. */
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.comment-form__submit-icon,
.comment-form__submit-text {
  display: inline-flex;
  align-items: center;
}
.comment-form__submit i,
.comment-form__submit svg {
  width: 1rem;
  height: 1rem;
  display: block;
  flex-shrink: 0;
}
/* Loading spinner shown while the AJAX request is in flight. */
.comment-form__submit .comment-form__spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: commentFormSpin 0.7s linear infinite;
}
.comment-form.is-submitting .comment-form__submit .comment-form__spinner {
  display: inline-block;
}
.comment-form.is-submitting .comment-form__submit .comment-form__submit-icon {
  display: none;
}
@keyframes commentFormSpin {
  to { transform: rotate(360deg); }
}
.comment-form__submit:hover {
  background: var(--navy);
  color: #fff;
}
.comment-form__submit:active { transform: scale(0.985); }
.comment-form__submit:disabled,
.comment-form.is-submitting .comment-form__submit {
  opacity: 0.85;
  cursor: wait;
}
.comment-form__submit:disabled:hover {
  background: var(--gold);
  color: var(--navy);
}

html.dark .article-comments { border-top-color: var(--line); }
html.dark .article-comments__title { color: #e8eef5; }
html.dark .article-comments__count,
html.dark .comment-card,
html.dark .comment-form,
html.dark .comment-empty {
  background: var(--surface);
  border-color: var(--line);
  color: #e8eef5;
}
html.dark .comment-card__name,
html.dark .comment-form__title,
html.dark .comment-form .comment-field label,
html.dark .comment-card__body,
html.dark .comment-form__subtitle,
html.dark .comment-empty__text {
  color: #94a3b8;
}
html.dark .comment-form .comment-field input[type="text"],
html.dark .comment-form .comment-field input[type="email"],
html.dark .comment-form .comment-field textarea {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line);
  color: #e8eef5;
}

@media (min-width: 640px) {
  .article-comments__title { font-size: 1.35rem; }
  .comment-card { padding: 1.15rem 1.25rem; }
  .comment-form { padding: 1.4rem 1.55rem 1.55rem; }
  .comment-form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .comment-form .comment-field--full {
    grid-column: 1 / -1;
  }
  .comment-form__submit {
    width: auto;
    min-width: 11.5rem;
    border-radius: 15px;
  }
}

/* =========================================================
   ARTICLE COMMENTS — MOBILE-SPECIFIC OVERRIDES
   --------------------------------------------------------
   The block below targets phones (<= 639px) and fixes the
   most common mobile bugs in comment forms:

   1. iOS Safari auto-zoom: any input with font-size < 16px
      triggers a 1.125x zoom on focus, which breaks the layout
      and confuses users. We bump inputs to 16px on phones.

   2. Tap targets: the submit button is increased to 52px
      tall (Apple HIG recommends 44pt minimum) and made
      full-width so it is impossible to miss with a thumb.

   3. Textarea height: increased min-height so users can see
      more of what they typed without internal scrolling.

   4. Padding: form gets slightly more inner padding so
      fields are not flush against the screen edge.

   5. Keyboard "send" hint: handled via enterkeyhint="send"
      attribute on the textarea — when the user presses Enter
      on the soft keyboard, the form submits.
   ========================================================= */
@media (max-width: 639px) {
  .comment-form {
    padding: 1.1rem 1rem 1.3rem;
    /* Bigger bottom padding so the fixed .fab-call / .fab-wa buttons
       (height 3.25rem + bottom 1rem) never overlap the submit button
       when the form is the last visible content. */
    padding-bottom: max(1.3rem, calc(3.25rem + 1.5rem));
  }
  .comment-form .comment-field input[type="text"],
  .comment-form .comment-field input[type="email"],
  .comment-form .comment-field textarea {
    /* 16px is the iOS Safari threshold — at this size the soft
       keyboard no longer auto-zooms the page on focus. */
    font-size: 16px;
    min-height: 3rem;
    padding: 0.85rem 0.95rem;
    line-height: 1.6;
  }
  .comment-form .comment-field textarea {
    min-height: 9rem;
    /* Mobile keyboards already cover half the screen; let users see
       their text without forcing a scroll inside the textarea. */
    max-height: 60vh;
  }
  .comment-form .comment-field label {
    font-size: 0.8125rem;
  }
  .comment-form__title {
    font-size: 1.15rem;
  }
  .comment-form__msg {
    font-size: 0.8125rem;
    padding: 0.85rem 1rem;
  }
  .comment-form__submit {
    min-height: 3.25rem;
    font-size: 0.95rem;
    /* Full-width on mobile — easier to tap with one hand. */
    width: 100%;
    /* Sticky-position the submit button at the bottom of the viewport
       ONLY while the form is focused, so the user can always reach it
       without scrolling past the keyboard. We achieve this with
       position: sticky; bottom: 0; — the form's own bottom padding
       reserves space for it. The button only "sticks" while the form
       is in the viewport, so it does not float over other content. */
    position: sticky;
    bottom: 0.5rem;
    z-index: 5;
  }
}

/* Mobile menu */
#mobileMenu { display: none; }
#mobileMenu.open { display: block; }

/* Floating header — mobile */
@media (max-width: 1023px) {
  .site-header {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    margin: 0 !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
  }
  html.dark .site-header {
    background: rgba(14, 43, 74, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none;
  }
  /* After scroll: solid enough to read on page content */
  .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(14, 43, 74, 0.1) !important;
    box-shadow: 0 8px 24px rgba(14, 43, 74, 0.12);
  }
  html.dark .site-header.is-scrolled {
    background: rgba(11, 21, 34, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  .site-header #mobileMenu {
    border-radius: 0 0 15px 15px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96) !important;
  }
  html.dark .site-header #mobileMenu {
    background: rgba(18, 32, 51, 0.96) !important;
    border-color: var(--line) !important;
  }
  html.dark .site-header [data-theme-toggle],
  html.dark .site-header [data-search-open],
  html.dark .site-header #menuBtn {
    color: #e8eef5 !important;
  }
  /* Tighter horizontal spacing for header actions on mobile */
  .site-header .max-w-7xl > .flex.items-center.gap-2 {
    gap: 0.2rem !important;
  }
  .site-header [data-search-open],
  .site-header [data-theme-toggle],
  .site-header #menuBtn {
    padding: 0.35rem !important;
  }
  .site-header a.lg\:hidden {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    min-height: 32px !important;
  }
  .site-header + #app {
    padding-top: calc(4rem + 20px);
  }
  /* First hero (home / inner pages) sits under floating header */
  .site-header + #app > .home-hero:first-child,
  .site-header + #app > .page-hero:first-child {
    margin-top: calc(-4rem - 20px);
  }
  .site-header + #app > .home-hero:first-child .home-hero__frame {
    padding-top: calc(4rem + 2.25rem);
  }
  .site-header + #app > .page-hero:first-child .page-hero__inner {
    padding-top: calc(4rem + 2.75rem) !important;
  }
}

/* =========================================================
   HOME — shared widgets (one source, responsive layout)
   ========================================================= */
.safe-bottom {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  .m-sticky-bar { display: none !important; }
}

/* Floating call button */
.fab-call {
  position: fixed;
  z-index: 45;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #c19f5b;
  color: #0e2b4a;
  box-shadow: 0 10px 28px rgba(14, 43, 74, 0.28);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  animation: fabPulse 2.8s ease-in-out infinite;
}
.fab-call:hover {
  background: #0e2b4a;
  color: #c19f5b;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 32px rgba(14, 43, 74, 0.35);
  animation: none;
}
.fab-call:active { transform: scale(.96); }
.fab-call svg { width: 1.35rem; height: 1.35rem; }
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(14, 43, 74, 0.28); }
  50% { box-shadow: 0 10px 28px rgba(193, 159, 91, 0.55), 0 0 0 10px rgba(193, 159, 91, 0.12); }
}
html.dark .fab-call {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Floating WhatsApp button (stacked above .fab-call) */
.fab-wa {
  position: fixed;
  z-index: 45;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(calc(1rem + 3.25rem + 0.6rem), calc(env(safe-area-inset-bottom) + 3.25rem + 0.6rem));
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(14, 43, 74, 0.28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  animation: fabPulseWa 2.8s ease-in-out infinite;
}
.fab-wa:hover {
  filter: brightness(1.06);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.45);
  animation: none;
}
.fab-wa:active { transform: scale(.96); }
.fab-wa svg { width: 1.5rem; height: 1.5rem; }
@keyframes fabPulseWa {
  0%, 100% { box-shadow: 0 10px 28px rgba(14, 43, 74, 0.28); }
  50% { box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55), 0 0 0 10px rgba(37, 211, 102, 0.14); }
}
html.dark .fab-wa {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* =========================================================
   SEARCH MODAL
   ========================================================= */
body.search-open { overflow: hidden; }
.search-modal[hidden] { display: none !important; }
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  padding: 12vh 1rem 1.5rem;
}
.search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 43, 74, 0.45);
  backdrop-filter: blur(4px);
}
.search-modal__panel {
  position: relative;
  z-index: 1;
  width: min(36rem, 100%);
  max-height: min(72vh, 34rem);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(14, 43, 74, 0.22);
  overflow: hidden;
}
.search-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1rem 0.55rem;
}
.search-modal__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy, #0e2b4a);
}
.search-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  color: var(--navy, #0e2b4a);
  transition: background .2s ease;
}
.search-modal__close:hover { background: #f1f5f9; }
.search-modal__field {
  position: relative;
  margin: 0 1rem 0.65rem;
}
.search-modal__icon {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: #94a3b8;
  pointer-events: none;
}
.search-modal__field input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
  padding: 0.75rem 2.6rem 0.75rem 0.95rem;
  font-size: 0.95rem;
  color: var(--navy, #0e2b4a);
  outline: none;
}
.search-modal__field input:focus {
  border-color: var(--gold, #c19f5b);
  background: #fff;
}
.search-modal__status {
  padding: 0 1.1rem 0.55rem;
  font-size: 0.75rem;
  color: #64748b;
}
.search-modal__results {
  overflow: auto;
  padding: 0 0.65rem 0.75rem;
  display: grid;
  gap: 0.35rem;
}
.search-modal__item {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid transparent;
  color: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.search-modal__item:hover,
.search-modal__item.is-active,
.search-modal__item:focus {
  background: #f8fafc;
  border-color: rgba(193, 159, 91, 0.35);
  outline: none;
}
.search-modal__type {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold, #c19f5b);
}
.search-modal__item-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy, #0e2b4a);
  line-height: 1.45;
}
.search-modal__item-excerpt {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.55;
}
.search-modal mark {
  background: rgba(193, 159, 91, 0.28);
  color: inherit;
  border-radius: 3px;
  padding: 0 0.1em;
}

html.dark .search-modal__backdrop { background: rgba(0, 0, 0, 0.55); }
html.dark .search-modal__panel {
  background: #122033;
  border-color: var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
html.dark .search-modal__title,
html.dark .search-modal__close,
html.dark .search-modal__item-title,
html.dark .search-modal__field input { color: #e8eef5; }
html.dark .search-modal__close:hover { background: rgba(255,255,255,0.06); }
html.dark .search-modal__field input {
  background: rgba(255,255,255,0.04);
  border-color: var(--line);
}
html.dark .search-modal__field input:focus { background: rgba(255,255,255,0.06); }
html.dark .search-modal__item:hover,
html.dark .search-modal__item.is-active,
html.dark .search-modal__item:focus {
  background: rgba(255,255,255,0.05);
}
html.dark .site-header [data-search-open] { color: #e8eef5 !important; }

@media (max-width: 1023px) {
  .search-modal { padding: 18vh 0.75rem 1rem; }
}

/* =========================================================
   PAGE HERO — brand banner (light / dark, no photo overlay)
   ========================================================= */
.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(193, 159, 91, 0.12), transparent 42%),
    radial-gradient(circle at 88% 100%, rgba(14, 43, 74, 0.06), transparent 40%),
    var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.page-hero .page-hero__inner {
  position: relative;
  z-index: 1;
}
.page-hero .text-\[\#c19f5b\],
.page-hero span.uppercase {
  color: var(--gold) !important;
}
.page-hero h1 {
  color: var(--navy) !important;
}
.page-hero p {
  color: var(--muted) !important;
}
.page-hero a:not([class*="bg-"]) {
  color: var(--muted);
}
.page-hero a:not([class*="bg-"]):hover {
  color: var(--gold);
}

html.dark .page-hero {
  background:
    radial-gradient(circle at 12% 0%, rgba(193, 159, 91, 0.14), transparent 42%),
    radial-gradient(circle at 88% 100%, rgba(193, 159, 91, 0.05), transparent 40%),
    linear-gradient(160deg, #0e2b4a 0%, #122033 55%, #0b1522 100%);
  border-bottom-color: var(--line);
}
html.dark .page-hero h1 {
  color: #e8eef5 !important;
}
html.dark .page-hero p {
  color: rgba(226, 232, 240, 0.72) !important;
}
html.dark .page-hero a:not([class*="bg-"]) {
  color: rgba(226, 232, 240, 0.7);
}

/* =========================================================
   HOME HERO — asymmetric composition (responsive)
   ========================================================= */
.home-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(193, 159, 91, 0.14), transparent 55%),
    linear-gradient(135deg, #f7f5f1 0%, #eef2f6 48%, #e8edf3 100%);
}
.home-hero__frame {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.75rem 2rem 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2.75rem;
  align-items: center;
  min-height: min(52vh, 30rem);
}
.home-hero__brand {
  margin: 0 0 0.85rem;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.home-hero__eyebrow {
  margin: 0 0 1.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.home-hero__title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.85rem, 3.1vw, 2.85rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
}
.home-hero__lead {
  margin: 0 0 2rem;
  max-width: 32rem;
  font-size: 1.05rem;
  line-height: 2;
  color: var(--muted);
}
.home-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.home-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 15px;
  font-size: 0.875rem;
  font-weight: 700;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.home-hero__btn:hover { transform: translateY(-1px); }
.home-hero__btn--primary {
  background: var(--gold);
  color: var(--navy);
  border: 2px solid var(--gold);
}
.home-hero__btn--primary:hover {
  background: var(--navy);
  color: var(--gold);
  border-color: var(--navy);
}
.home-hero__btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 2px solid rgba(14, 43, 74, 0.22);
}
.home-hero__btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.home-hero__visual {
  position: relative;
  min-height: 20rem;
  display: flex;
  align-items: stretch;
}
.home-hero__glow {
  position: absolute;
  inset: 12% 8% auto auto;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 159, 91, 0.35), transparent 70%);
  filter: blur(18px);
  animation: homeHeroGlow 6.5s ease-in-out infinite;
}
.home-hero__media {
  position: relative;
  flex: 1;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(14, 43, 74, 0.22);
  animation: homeHeroPanel 900ms ease both;
  background: #0e2b4a;
}
.home-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  max-height: 26rem;
  object-fit: cover;
  object-position: center;
}
.home-hero__media-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 43, 74, 0.15) 0%, rgba(14, 43, 74, 0.35) 45%, rgba(14, 43, 74, 0.88) 100%);
  pointer-events: none;
}
.home-hero__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem 2.1rem 2.2rem;
}
.home-hero__year {
  font-size: clamp(3.2rem, 5.5vw, 4.8rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.95);
  font-feature-settings: "tnum" on, "lnum" on;
}
.home-hero__vline {
  display: block;
  width: 3.5rem;
  height: 2px;
  margin: 1.1rem 0 0.9rem;
  background: var(--gold);
}
.home-hero__meta-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.home-hero__meta-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  max-width: 16rem;
}

@keyframes homeHeroGlow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .85; }
  50% { transform: translate(-8%, 6%) scale(1.08); opacity: 1; }
}
@keyframes homeHeroPanel {
  from { transform: translateY(18px) scale(.98); }
  to { transform: translateY(0) scale(1); }
}
@keyframes homeHeroSheen {
  0%, 100% { transform: translateX(12%); opacity: .35; }
  50% { transform: translateX(-18%); opacity: .7; }
}

html.dark .home-hero {
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(193, 159, 91, 0.16), transparent 55%),
    linear-gradient(135deg, #0b1522 0%, #122033 50%, #0e2b4a 100%);
  border-bottom-color: var(--line);
}
html.dark .home-hero__brand,
html.dark .home-hero__title { color: #e8eef5; }
html.dark .home-hero__lead { color: rgba(226, 232, 240, 0.7); }
html.dark .home-hero__btn--ghost {
  color: #e8eef5;
  border-color: rgba(255, 255, 255, 0.28);
}
html.dark .home-hero__btn--ghost:hover {
  color: var(--gold);
  border-color: var(--gold);
}
html.dark .home-hero__media {
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1023px) {
  .home-hero {
    background:
      radial-gradient(circle at 12% 0%, rgba(193, 159, 91, 0.12), transparent 42%),
      radial-gradient(circle at 88% 100%, rgba(14, 43, 74, 0.06), transparent 40%),
      var(--surface-2);
  }
  html.dark .home-hero {
    background:
      radial-gradient(circle at 12% 0%, rgba(193, 159, 91, 0.14), transparent 42%),
      radial-gradient(circle at 88% 100%, rgba(193, 159, 91, 0.05), transparent 40%),
      linear-gradient(160deg, #0e2b4a 0%, #122033 55%, #0b1522 100%);
  }
  .home-hero__frame {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    min-height: 0;
    padding: 1.25rem 1.25rem 1.5rem;
  }
  .home-hero__brand {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
  }
  .home-hero__eyebrow {
    margin-bottom: 0.85rem;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
  }
  .home-hero__title {
    font-size: 1.85rem;
    margin-bottom: 0.75rem;
  }
  .home-hero__lead {
    font-size: 0.875rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
  }
  .home-hero__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .home-hero__btn {
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 0.65rem;
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.35;
  }
  .home-hero__btn .w-4 { width: 0.875rem; height: 0.875rem; }

  /* Compact hero image for mobile */
  .home-hero__visual {
    order: -1;
    min-height: 0;
    max-width: 100%;
  }
  .home-hero__glow {
    inset: 8% 10% auto auto;
    width: 48%;
    height: 48%;
    filter: blur(12px);
    animation: none;
  }
  .home-hero__media {
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(14, 43, 74, 0.18);
    animation: none;
  }
  .home-hero__img {
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    object-position: center 28%;
  }
  .home-hero__caption {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    padding: 0.75rem 0.9rem;
  }
  .home-hero__year {
    font-size: 1.35rem;
    line-height: 1;
  }
  .home-hero__vline {
    width: 1.5rem;
    height: 2px;
    margin: 0;
  }
  .home-hero__meta-label {
    font-size: 0.62rem;
    margin: 0;
  }
  .home-hero__meta-text {
    flex: 1 1 100%;
    font-size: 0.72rem;
    line-height: 1.45;
    max-width: none;
    color: rgba(255, 255, 255, 0.72);
  }
}

/* =========================================================
   HOME STATS — shared metrics (stack / strip)
   ========================================================= */
.home-stats {
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}
.home-stats__frame {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 1.5rem;
}
.home-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.home-stats__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 1rem 0.75rem;
  text-align: center;
  border: 1px solid rgba(14, 43, 74, 0.08);
  border-radius: 15px;
  background: #f8fafc;
  transition: background .2s ease;
}
.home-stats__item:hover {
  background: rgba(255, 255, 255, 0.95);
}
.home-stats__value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.home-stats__value--navy { color: var(--navy); }
.home-stats__value--gold { color: var(--gold-dark); }
.home-stats__label {
  margin: 0;
  font-size: 0.65rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 9rem;
}

html.dark .home-stats {
  background: #101c2b;
}
html.dark .home-stats__item {
  background: rgba(18, 32, 51, 0.75);
  border-color: var(--line);
}
html.dark .home-stats__item:hover {
  background: rgba(22, 38, 54, 0.95);
}
html.dark .home-stats__value--navy { color: #e8eef5; }

@media (min-width: 1024px) {
  .home-stats__frame {
    padding: 3.25rem 1.25rem;
  }
  .home-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid rgba(14, 43, 74, 0.08);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.55);
  }
  html.dark .home-stats__grid {
    background: rgba(18, 32, 51, 0.75);
    border-color: var(--line);
  }
  .home-stats__item {
    gap: 0.7rem;
    padding: 2rem 1.25rem;
    border: 0;
    border-left: 1px solid rgba(14, 43, 74, 0.08);
    border-radius: 0;
    background: transparent;
  }
  html.dark .home-stats__item {
    background: transparent;
    border-left-color: var(--line);
  }
  .home-stats__item:last-child { border-left: 0; }
  .home-stats__value {
    font-size: clamp(2rem, 2.8vw, 2.6rem);
  }
  .home-stats__label {
    font-size: 0.82rem;
    line-height: 1.7;
    max-width: 10.5rem;
  }
}

/* Topics */
.home-topics__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #e5e7eb;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  overflow: hidden;
}
.home-topics__item {
  background: #fff;
  padding: 1rem;
  transition: background .25s ease;
}
.home-topics__item:hover { background: #f8fafc; }
html.dark .home-topics__grid { background: var(--line); border-color: var(--line); }
html.dark .home-topics__item { background: var(--surface); }
html.dark .home-topics__item:hover { background: rgba(255,255,255,0.03); }
@media (min-width: 1024px) {
  .home-topics__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-topics__item { padding: 1.75rem; }
}

/* Courses rail / grid */
.home-courses__head,
.home-blog__head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.home-courses__all,
.home-blog__all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-dark);
}
html.dark .home-courses__all,
html.dark .home-blog__all {
  color: #e8eef5;
}
html.dark .home-courses__all:hover,
html.dark .home-blog__all:hover {
  color: var(--gold);
}
@media (min-width: 1024px) {
  .home-courses__head,
  .home-blog__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
  }
  .home-courses__all,
  .home-blog__all {
    color: var(--navy);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
  }
  .home-courses__all:hover,
  .home-blog__all:hover { color: var(--gold-dark); }
  html.dark .home-courses__all,
  html.dark .home-blog__all {
    color: #e8eef5;
  }
  html.dark .home-courses__all:hover,
  html.dark .home-blog__all:hover {
    color: var(--gold);
  }
}
.home-courses__rail {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.home-courses__rail::-webkit-scrollbar { display: none; }
.home-course-card {
  flex: 0 0 78%;
  max-width: 280px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 1.25rem;
}
.home-course-card--featured { border: 2px solid var(--gold); }
.home-course-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.home-course-card__tag {
  font-size: 10px;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--navy);
}
.home-course-card__tag--navy { background: var(--navy); color: #fff; border-radius: 10px; }
.home-course-card__tag--gold { background: var(--gold); color: var(--navy); }
.home-course-card__meta {
  font-size: 10px;
  color: #64748b;
}
.home-course-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.5rem;
  line-height: 1.45;
}
.home-course-card__desc {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 1rem;
}
.home-course-card__list {
  display: none;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  gap: 0.65rem;
}
.home-course-card__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #475569;
}
.home-course-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.home-course-card__price {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
}
.home-course-card__cta {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--navy);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
}
@media (min-width: 1024px) {
  .home-courses__rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }
  .home-course-card {
    flex: none;
    max-width: none;
    padding: 1.75rem;
    border-width: 2px;
    border-color: var(--gold);
  }
  .home-course-card__top {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .home-course-card__meta { font-size: 0.75rem; color: #64748b; order: -1; }
  .home-course-card__title { font-size: 1.25rem; margin-bottom: 1rem; }
  .home-course-card__desc { display: none; }
  .home-course-card__list { display: grid; }
  .home-course-card__foot { display: block; }
  .home-course-card__price { display: none; }
  .home-course-card__cta {
    display: block;
    text-align: center;
    padding: 0.75rem;
    border-radius: 15px;
    font-size: 0.875rem;
  }
  .home-course-card__cta:hover {
    background: var(--gold);
    color: var(--navy);
  }
}
html.dark .home-course-card { background: var(--surface); }
html.dark .home-course-card__title,
html.dark .home-course-card__price { color: #e8eef5; }

/* Path */
.home-path__intro {
  margin-bottom: 1.25rem;
}
@media (min-width: 1024px) {
  .home-path__intro {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 3rem;
  }
}
.home-path__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.home-path__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 1rem;
}
.home-path__num {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--navy);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}
.home-path__title {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
}
.home-path__text {
  margin: 0;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .home-path__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .home-path__item {
    flex-direction: column;
    padding: 1.75rem;
  }
  .home-path__num {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--gold);
    font-size: 3rem;
    justify-content: flex-start;
    margin-bottom: 1rem;
    border-radius: 0;
  }
  .home-path__title { font-size: 1rem; margin-bottom: 0.75rem; }
  .home-path__text { font-size: 0.875rem; line-height: 1.75; color: #475569; }
}
html.dark .home-path__item { background: rgba(255,255,255,0.03); }
html.dark .home-path__title { color: #e8eef5; }

/* Formats */
.home-formats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.home-formats__item {
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 1rem;
  background: #fff;
}
html.dark .home-formats__item { background: var(--surface); }
@media (min-width: 1024px) {
  .home-formats__grid { gap: 1.25rem; max-width: 40rem; }
  .home-formats__item { padding: 1.5rem; }
}

/* Why */
.home-why__grid {
  display: grid;
  gap: 0.75rem;
}
.home-why__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 1.25rem;
}
.home-why__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 15px;
  margin-bottom: 0.85rem;
}
html.dark .home-why__item { background: var(--surface); }
@media (min-width: 1024px) {
  .home-why__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #f1f5f9;
    border: 1px solid #f1f5f9;
    border-radius: 15px;
    overflow: hidden;
  }
  .home-why__item {
    border: 0;
    border-radius: 0;
    padding: 2rem;
  }
}

/* =========================================================
   Home gallery — bento grid + lightbox (RTL aware)
   Images managed from the admin «گالری تصاویر» page.
   ========================================================= */
.home-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.home-gallery__item {
  margin: 0;
  height: 100%;
}
.home-gallery__item--featured {
  grid-column: span 2;
}

/* The clickable tile */
.home-gallery__btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: zoom-in;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.home-gallery__btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.home-gallery__btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.home-gallery__item--featured .home-gallery__btn img {
  aspect-ratio: 16 / 10;
}
.home-gallery__btn:hover img,
.home-gallery__btn:focus-visible img {
  transform: scale(1.06);
}

/* Bottom scrim + caption */
.home-gallery__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(14, 43, 74, 0.82) 0%,
    rgba(14, 43, 74, 0.32) 38%,
    rgba(14, 43, 74, 0) 68%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.home-gallery__item--featured .home-gallery__scrim { opacity: 1; }
.home-gallery__btn:hover .home-gallery__scrim,
.home-gallery__btn:focus-visible .home-gallery__scrim { opacity: 1; }

.home-gallery__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0.9rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.home-gallery__item--featured .home-gallery__caption { opacity: 1; transform: translateY(0); }
.home-gallery__btn:hover .home-gallery__caption,
.home-gallery__btn:focus-visible .home-gallery__caption { opacity: 1; transform: translateY(0); }
.home-gallery__caption-bar {
  width: 3px;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--gold);
  flex-shrink: 0;
}
.home-gallery__caption-text {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.7;
  text-shadow: 0 1px 8px rgba(14, 43, 74, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zoom badge */
.home-gallery__zoom {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s ease, transform .3s ease, background .3s ease, color .3s ease;
  pointer-events: none;
}
.home-gallery__zoom svg { width: 1.05rem; height: 1.05rem; }
.home-gallery__btn:hover .home-gallery__zoom,
.home-gallery__btn:focus-visible .home-gallery__zoom { opacity: 1; transform: scale(1); }
.home-gallery__btn:hover .home-gallery__zoom { background: var(--gold); border-color: var(--gold); color: #0e2b4a; }

/* Touch devices: no hover — keep captions/zoom visible */
@media (hover: none) {
  .home-gallery__scrim,
  .home-gallery__caption { opacity: 1; transform: translateY(0); }
  .home-gallery__zoom { opacity: 1; transform: scale(1); }
}

@media (min-width: 640px) {
  .home-gallery__grid { gap: 0.75rem; }
  .home-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-gallery__item--featured {
    grid-column: span 2;
    grid-row: span 2;
  }
  .home-gallery__item--featured .home-gallery__btn img { aspect-ratio: auto; }
  .home-gallery__caption-text { font-size: 0.85rem; }
}
@media (min-width: 1024px) {
  .home-gallery__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .home-gallery__caption { padding: 1rem 1.15rem; }
}

/* ---------------------------------------------------------
   Lightbox
   --------------------------------------------------------- */
body.gallery-open { overflow: hidden; }
.home-lightbox { position: fixed; inset: 0; z-index: 90; }
.home-lightbox[hidden] { display: none !important; }
.home-lightbox:not([hidden]) { animation: lightboxIn .28s ease both; }
@keyframes lightboxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.home-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 17, 28, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.home-lightbox__stage {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 4.25rem 1.25rem 3.75rem;
}
.home-lightbox__figure {
  margin: 0;
  max-width: min(88vw, 72rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.home-lightbox__img {
  max-width: 100%;
  max-height: min(78vh, 44rem);
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: scale(0.965);
  transition: opacity .3s ease, transform .3s ease;
}
.home-lightbox__img.is-loaded { opacity: 1; transform: scale(1); }
.home-lightbox__caption {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #f1f5f9;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
}
.home-lightbox__caption.is-empty { display: none; }

/* Round glass control buttons (close + arrows) */
.home-lightbox__close,
.home-lightbox__nav {
  position: absolute;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.home-lightbox__close svg,
.home-lightbox__nav svg { width: 1.35rem; height: 1.35rem; }
.home-lightbox__close:hover,
.home-lightbox__nav:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #0e2b4a;
  transform: scale(1.06);
}
.home-lightbox__close:focus-visible,
.home-lightbox__nav:focus-visible {
  outline: 3px solid rgba(193, 159, 91, 0.65);
  outline-offset: 2px;
}
.home-lightbox__close { top: 1.1rem; inset-inline-end: 1.1rem; }
.home-lightbox__nav { top: 50%; transform: translateY(-50%); }
.home-lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
/* RTL: «بعدی» moves toward the left, «قبلی» toward the right. */
.home-lightbox__nav--next { inset-inline-end: clamp(0.75rem, 3vw, 2rem); }
.home-lightbox__nav--prev { inset-inline-start: clamp(0.75rem, 3vw, 2rem); }

.home-lightbox__counter {
  position: absolute;
  bottom: 1.2rem;
  inset-inline: 0;
  text-align: center;
  color: rgba(226, 232, 240, 0.75);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.home-lightbox__data { display: none; }

@media (max-width: 639px) {
  .home-lightbox__stage { padding: 3.75rem 0.75rem 3.25rem; }
  .home-lightbox__close,
  .home-lightbox__nav { width: 2.5rem; height: 2.5rem; }
  .home-lightbox__caption { font-size: 0.78rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .home-gallery__btn img,
  .home-gallery__scrim,
  .home-gallery__caption,
  .home-gallery__zoom,
  .home-lightbox__img,
  .home-lightbox__close,
  .home-lightbox__nav,
  .home-lightbox:not([hidden]) {
    transition: none !important;
    animation: none !important;
  }
}

/* Blog grid — mobile-first
   1 column on phones → 2 on tablets → 3 on desktop. */
.home-blog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .home-blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  /* Desktop: always 3 columns, even on small laptop windows. */
  .home-blog__grid { grid-template-columns: repeat(3, 1fr); }
}
.home-blog__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  transition: border-color .25s ease;
}
.home-blog__card:hover { border-color: var(--gold); }
.home-blog__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-blog__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem;
}
.home-blog__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #475569;
  margin-bottom: 0.75rem;
}
.home-blog__title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--navy);
}
.home-blog__title a:hover { color: var(--gold); }
.home-blog__excerpt {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.75;
}
.home-blog__more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gold-dark);
}
html.dark .home-blog__card { background: var(--surface); }
html.dark .home-blog__title { color: #e8eef5; }

/* Consult */
.home-consult__layout {
  display: grid;
  gap: 1.5rem;
}
.home-consult__form {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 1.25rem;
}
.home-consult__field {
  margin-bottom: 1rem;
}
.home-consult__field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.home-consult__field input,
.home-consult__field select,
.home-consult__field textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 15px;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
}
.home-consult__field input:focus,
.home-consult__field select:focus,
.home-consult__field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.home-consult__field--note { display: none; }
.home-consult__submit {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--gold);
  color: var(--navy);
  border-radius: 15px;
  font-size: 0.875rem;
  font-weight: 700;
}
.home-consult__aside {
  display: grid;
  gap: 0.85rem;
}
.home-consult__info {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 1.25rem;
}
.home-consult__info h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}
.home-consult__info p {
  margin: 0;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.75;
}
.home-consult__cta-box {
  background: var(--navy);
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
  color: #fff;
}
.home-consult__cta-box h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.home-consult__cta-box p {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.75;
}
.home-consult__cta-box a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gold);
  color: var(--navy);
  padding: 0.75rem 1.5rem;
  border-radius: 15px;
  font-size: 0.875rem;
  font-weight: 700;
}
html.dark .home-consult__form,
html.dark .home-consult__info { background: rgba(255,255,255,0.03); }
html.dark .home-consult__field label,
html.dark .home-consult__info h3 { color: #e8eef5; }
html.dark .home-consult__field input,
html.dark .home-consult__field select,
html.dark .home-consult__field textarea {
  background: var(--surface);
  border-color: var(--line);
  color: #e8eef5;
}
@media (min-width: 1024px) {
  .home-consult__layout {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2.5rem;
  }
  .home-consult__form { padding: 2rem; }
  .home-consult__field--note { display: block; }
  .home-consult__field input,
  .home-consult__field select,
  .home-consult__field textarea { border-radius: 0; }
}

/* =========================================================
   COURSES PAGE — mobile-first widgets
   ========================================================= */
.courses-hero .courses-hero__inner {
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
}
.courses-hero__eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold) !important;
}
.courses-hero__title {
  margin: 0.55rem 0 0.45rem;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--navy) !important;
}
.courses-hero__desc {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--muted) !important;
}

.courses-catalog__wrap {
  padding: 1rem 1.25rem 1.75rem;
}
.courses-catalog__toolbar {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 0 1rem;
  padding-bottom: 0.15rem;
}
.courses-catalog__toolbar::-webkit-scrollbar { display: none; }
.courses-filter {
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface, #fff);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.courses-filter.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
html.dark .courses-filter {
  background: var(--surface);
  border-color: var(--line);
  color: rgba(226, 232, 240, 0.75);
}
html.dark .courses-filter.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.courses-catalog__grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.course-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, opacity .2s ease;
}
.course-card.is-hidden {
  display: none;
}
.course-card--featured {
  border-color: rgba(193, 159, 91, 0.55);
  box-shadow: 0 8px 22px rgba(14, 43, 74, 0.06);
}
.course-card--accent {
  border-color: rgba(193, 159, 91, 0.35);
}
.course-card__head {
  padding: 0.9rem 1rem;
}
.course-card__head--navy {
  background: var(--navy);
  color: #fff;
}
.course-card__head--gold {
  background: var(--gold);
  color: var(--navy);
}
.course-card__badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.course-card__badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
}
.course-card__badge--gold {
  background: var(--gold);
  color: var(--navy);
}
.course-card__badge--navy {
  background: var(--navy);
  color: #fff;
}
.course-card__num {
  font-size: 0.62rem;
  opacity: 0.72;
  font-weight: 600;
}
.course-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
}
.course-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.9rem 1rem 1rem;
}
.course-card__note {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  background: rgba(193, 159, 91, 0.1);
  border: 1px solid rgba(193, 159, 91, 0.22);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  line-height: 1.4;
}
.course-card__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.course-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #475569;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.65rem;
}
.course-card__meta li i,
.course-card__meta li svg {
  color: var(--gold);
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  display: block;
}
.course-card__meta li span {
  min-width: 0;
}

.course-card__syllabus {
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 0.65rem;
}
.course-card__syllabus summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.course-card__syllabus summary::-webkit-details-marker { display: none; }
.course-card__syllabus summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.course-card__syllabus[open] summary::after {
  transform: rotate(135deg);
}
.course-card__syllabus ul {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.course-card__syllabus li {
  position: relative;
  padding-right: 0.8rem;
  font-size: 0.72rem;
  line-height: 1.55;
  color: #64748b;
}
.course-card__syllabus li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0.55em;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--gold);
}

.course-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.85rem;
  width: 100%;
  background: var(--navy);
  color: #fff;
  border-radius: 13px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.course-card__cta i,
.course-card__cta svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
.course-card__cta:active {
  transform: scale(0.985);
}
.course-card__cta:hover {
  background: var(--gold);
  color: var(--navy);
}

.courses-cta__inner {
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.courses-cta__title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.4;
}
.courses-cta__desc {
  margin: 0 auto 1rem;
  max-width: 28rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--muted);
}
.courses-cta__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  max-width: 20rem;
  margin: 0 auto;
}
.courses-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.courses-cta__btn i,
.courses-cta__btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
  flex-shrink: 0;
}
.courses-cta__btn--primary {
  background: var(--gold);
  color: var(--navy);
  border: 2px solid var(--gold);
}
.courses-cta__btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 2px solid rgba(14, 43, 74, 0.18);
}

html.dark .course-card {
  background: var(--surface);
  border-color: var(--line);
}
html.dark .course-card--featured {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
html.dark .course-card__meta li {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: rgba(226, 232, 240, 0.75);
}
html.dark .course-card__syllabus summary,
html.dark .courses-cta__title { color: #e8eef5; }
html.dark .courses-cta__btn--ghost {
  color: #e8eef5;
  border-color: rgba(255, 255, 255, 0.25);
}

@media (min-width: 480px) {
  .courses-cta__actions {
    grid-template-columns: 1fr 1fr;
    max-width: 24rem;
  }
}

@media (min-width: 768px) {
  .courses-hero .courses-hero__inner {
    padding: 2.5rem 2rem 2.25rem;
  }
  .courses-hero__title { font-size: 1.85rem; }
  .courses-hero__desc { font-size: 0.9rem; }
  .courses-catalog__wrap { padding: 1.5rem 2rem 2.5rem; }
  .courses-catalog__toolbar {
    overflow: visible;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
  }
  .courses-catalog__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
    align-items: start;
  }
  .course-card__syllabus {
    /* keep collapsible on tablet for scanability */
  }
}

@media (min-width: 1024px) {
  .courses-hero .courses-hero__inner {
    padding: 3.5rem 2rem 3rem;
  }
  .courses-hero__title { font-size: 2.25rem; }
  .courses-catalog__wrap { padding: 2rem 2rem 3.5rem; }
  .courses-catalog__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
  }
  .course-card:hover { border-color: var(--gold); }
  .course-card__head { padding: 1.15rem 1.25rem; }
  .course-card__title { font-size: 1.2rem; }
  .course-card__body {
    gap: 0.9rem;
    padding: 1.15rem 1.25rem 1.25rem;
  }
  .course-card__meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .course-card__meta li {
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    font-size: 0.8rem;
  }
  .course-card__syllabus {
    border-top: 0;
    padding-top: 0;
  }
  .course-card__syllabus summary {
    pointer-events: none;
    min-height: 0;
    margin-bottom: 0.35rem;
  }
  .course-card__syllabus summary::after { display: none; }
  .course-card__syllabus ul { margin-top: 0; }
  .course-card__syllabus li { font-size: 0.78rem; line-height: 1.65; }
  .course-card__cta {
    min-height: 3rem;
    border-radius: 15px;
    font-size: 0.875rem;
  }
  .courses-cta__inner { padding: 3rem 2rem; }
  .courses-cta__title { font-size: 1.75rem; margin-bottom: 0.75rem; }
  .courses-cta__desc { font-size: 0.9rem; margin-bottom: 1.35rem; }
  .courses-cta__actions {
    display: inline-flex;
    max-width: none;
    gap: 0.75rem;
  }
  .courses-cta__btn {
    min-width: 11rem;
    font-size: 0.875rem;
    padding: 0.85rem 1.4rem;
  }
}

/* =========================================================
   BLOG ARCHIVE — mobile-first widgets
   ========================================================= */
.blog-hero .blog-hero__inner {
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
}
.blog-hero__eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold) !important;
}
.blog-hero__title {
  margin: 0.55rem 0 0.45rem;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--navy) !important;
}
.blog-hero__desc {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--muted) !important;
}

.blog-archive__wrap {
  padding: 1rem 1.25rem 1.75rem;
}
.blog-archive__toolbar {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 0 1rem;
  padding-bottom: 0.15rem;
}
.blog-archive__toolbar::-webkit-scrollbar { display: none; }
.blog-filter {
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface, #fff);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.blog-filter.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
html.dark .blog-filter {
  background: var(--surface);
  border-color: var(--line);
  color: rgba(226, 232, 240, 0.75);
}
html.dark .blog-filter.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.blog-archive__grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.blog-card {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.blog-card.is-hidden { display: none; }
.blog-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.blog-card__media--navy { background: var(--navy); }
.blog-card__media--gold { background: var(--gold); }
.blog-card__media--slate { background: #1e293b; }
.blog-card__media i,
.blog-card__media svg {
  width: 1.65rem;
  height: 1.65rem;
  color: #c19f5b;
  display: block;
}
.blog-card__media--gold i,
.blog-card__media--gold svg { color: var(--navy); }
.blog-card__cat {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  left: 0.4rem;
  font-size: 0.55rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  padding: 0.2rem 0.3rem;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
}
.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem 0.85rem;
  min-width: 0;
}
.blog-card__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.blog-card__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.62rem;
  line-height: 1.3;
  color: #475569;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.5rem;
}
.blog-card__meta li i,
.blog-card__meta li svg {
  width: 0.7rem;
  height: 0.7rem;
  color: var(--gold);
  display: block;
  flex-shrink: 0;
}
.blog-card__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--navy);
}
.blog-card__title a {
  color: inherit;
  text-decoration: none;
}
.blog-card__title a:hover { color: var(--gold); }
.blog-card__excerpt {
  display: none;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--muted);
}
.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-dark);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.blog-card__more i,
.blog-card__more svg {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
}

.blog-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1.25rem;
}
.blog-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface, #fff);
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.blog-pager__btn i,
.blog-pager__btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
.blog-pager__btn.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.blog-pager__btn:hover:not(.is-active) {
  border-color: var(--gold);
  color: var(--gold);
}

.blog-newsletter {
  background: #f8fafc;
}
.blog-newsletter__wrap {
  padding: 1.25rem 1.25rem 1.5rem;
}
.blog-newsletter__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem;
}
.blog-newsletter__icon {
  width: 2.85rem;
  height: 2.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  border-radius: 12px;
  flex-shrink: 0;
}
.blog-newsletter__icon i,
.blog-newsletter__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gold);
  display: block;
}
.blog-newsletter__title {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
}
.blog-newsletter__desc {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--muted);
}
.blog-newsletter__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
}
.blog-newsletter__input {
  min-width: 0;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  font-size: 0.8125rem;
  background: var(--surface, #fff);
  color: inherit;
  outline: none;
  transition: border-color .2s ease;
}
.blog-newsletter__input:focus { border-color: var(--gold); }
.blog-newsletter__submit {
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 12px;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease;
}
.blog-newsletter__submit:hover {
  background: var(--navy);
  color: #fff;
}

html.dark .blog-card,
html.dark .blog-newsletter__card,
html.dark .blog-pager__btn {
  background: var(--surface);
  border-color: var(--line);
}
html.dark .blog-card__title,
html.dark .blog-newsletter__title { color: #e8eef5; }
html.dark .blog-card__meta li {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: rgba(226, 232, 240, 0.7);
}
html.dark .blog-newsletter { background: rgba(15, 23, 42, 0.35); }
html.dark .blog-newsletter__input {
  background: var(--surface);
  border-color: var(--line);
  color: #e8eef5;
}
html.dark .blog-pager__btn.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

@media (min-width: 480px) {
  .blog-card {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }
  .blog-card__title { font-size: 0.95rem; }
  .blog-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-newsletter__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .blog-newsletter__form {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .blog-hero .blog-hero__inner {
    padding: 2.5rem 2rem 2.25rem;
  }
  .blog-hero__title { font-size: 1.85rem; }
  .blog-hero__desc { font-size: 0.9rem; }
  .blog-archive__wrap { padding: 1.5rem 2rem 2.5rem; }
  .blog-archive__toolbar {
    overflow: visible;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.25rem;
  }
  .blog-archive__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }
  .blog-card {
    display: flex;
    flex-direction: column;
  }
  .blog-card__media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .blog-card__media i,
  .blog-card__media svg {
    width: 2.5rem;
    height: 2.5rem;
  }
  .blog-card__cat {
    top: 0.75rem;
    right: 0.75rem;
    left: auto;
    font-size: 0.62rem;
    padding: 0.28rem 0.55rem;
  }
  .blog-card__body {
    flex: 1;
    gap: 0.55rem;
    padding: 1rem 1.1rem 1.1rem;
  }
  .blog-card__meta li { font-size: 0.68rem; padding: 0.35rem 0.6rem; }
  .blog-card__title { font-size: 1.05rem; line-height: 1.5; }
  .blog-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    flex: 1;
  }
  .blog-card__more { font-size: 0.8rem; }
  .blog-pager { margin-top: 1.75rem; gap: 0.45rem; }
  .blog-pager__btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 14px;
  }
  .blog-newsletter__wrap { padding: 1.75rem 2rem 2rem; }
  .blog-newsletter__card {
    grid-template-columns: auto minmax(0, 1fr) minmax(14rem, 18rem);
    gap: 1rem;
    padding: 1.25rem 1.35rem;
  }
  .blog-newsletter__form {
    grid-column: auto;
    align-self: center;
  }
  .blog-newsletter__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 14px;
  }
  .blog-newsletter__icon i,
  .blog-newsletter__icon svg {
    width: 1.6rem;
    height: 1.6rem;
  }
  .blog-newsletter__title { font-size: 1.1rem; }
  .blog-newsletter__desc { font-size: 0.8125rem; }
}

@media (min-width: 1024px) {
  .blog-hero .blog-hero__inner {
    padding: 3.5rem 2rem 3rem;
  }
  .blog-hero__title { font-size: 2.25rem; }
  .blog-archive__wrap { padding: 2rem 2rem 3.5rem; }
  .blog-archive__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.35rem;
  }
  .blog-card:hover { border-color: var(--gold); }
  .blog-card__body { padding: 1.15rem 1.25rem 1.25rem; }
  .blog-card__title { font-size: 1.1rem; }
  .blog-newsletter__wrap { padding: 2.5rem 2rem 3rem; }
  .blog-newsletter__card { padding: 1.5rem 1.75rem; }
}

/* =========================================================
   CONTACT PAGE — mobile-first widgets
   ========================================================= */
.contact-hero .contact-hero__inner {
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
}
.contact-hero__eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold) !important;
}
.contact-hero__title {
  margin: 0.55rem 0 0.45rem;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--navy) !important;
}
.contact-hero__desc {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--muted) !important;
}

.contact-page__wrap {
  padding: 1rem 1.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
.contact-quick__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 4.25rem;
  padding: 0.65rem 0.4rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface, #fff);
  color: var(--navy);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.contact-quick__btn i,
.contact-quick__btn svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--gold);
  display: block;
}
.contact-quick__btn--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.contact-quick__btn--primary i,
.contact-quick__btn--primary svg { color: var(--gold); }
.contact-quick__btn:active { transform: scale(0.98); }

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-channel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.8rem 0.9rem;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: #f8fafc;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.contact-channel:active {
  transform: scale(0.985);
  border-color: rgba(193, 159, 91, 0.45);
}
.contact-channel--static { cursor: default; }
.contact-channel__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  background: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-channel__icon i,
.contact-channel__icon svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--gold);
  display: block;
}
.contact-channel__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.contact-channel__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
}
.contact-channel__value {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
  word-break: break-word;
}
.contact-channel__hint {
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1.35;
}

.contact-layout {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.contact-form {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem;
}
.contact-form__head {
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.contact-form__title {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
}
.contact-form__subtitle {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--muted);
}
.contact-form__fields {
  display: grid;
  gap: 0.75rem;
}
.contact-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
}
.contact-field__opt {
  font-weight: 600;
  color: #64748b;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  min-height: 2.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font-size: 0.8125rem;
  background: var(--surface, #fff);
  color: inherit;
  outline: none;
  transition: border-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.contact-field textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.7;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--gold);
}
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 3rem;
  margin-top: 0.95rem;
  border: 0;
  border-radius: 13px;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.contact-form__submit i,
.contact-form__submit svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
.contact-form__submit:active { transform: scale(0.985); }
.contact-form__submit:hover {
  background: var(--navy);
  color: #fff;
}

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact-office {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem;
}
.contact-office__title {
  margin: 0 0 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
}
.contact-office__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.contact-office__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.contact-office__list li > i,
.contact-office__list li > svg {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  color: var(--gold);
  flex-shrink: 0;
  display: block;
}
.contact-office__list strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--navy);
}
.contact-office__list p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.7;
  color: #64748b;
}
.contact-office__sub {
  margin-top: 0.15rem !important;
  font-size: 0.7rem !important;
  color: #94a3b8 !important;
}

.contact-map {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
  border-radius: 16px;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
}
.contact-map__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
}
.contact-map__pin {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 1rem;
}
.contact-map__icon {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  border-radius: 13px;
}
.contact-map__icon i,
.contact-map__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--navy);
  display: block;
}
.contact-map__label {
  font-size: 0.8rem;
  font-weight: 700;
}
.contact-map__place {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
}

html.dark .contact-quick__btn,
html.dark .contact-form,
html.dark .contact-office {
  background: var(--surface);
  border-color: var(--line);
  color: #e8eef5;
}
html.dark .contact-quick__btn:not(.contact-quick__btn--primary) { color: #e8eef5; }
html.dark .contact-channel {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}
html.dark .contact-channel__value,
html.dark .contact-form__title,
html.dark .contact-office__title,
html.dark .contact-field label,
html.dark .contact-office__list strong {
  color: #e8eef5;
}
html.dark .contact-field input,
html.dark .contact-field select,
html.dark .contact-field textarea {
  background: var(--surface);
  border-color: var(--line);
  color: #e8eef5;
}

@media (min-width: 640px) {
  .contact-channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
  .contact-form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-field--full { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .contact-hero .contact-hero__inner {
    padding: 2.5rem 2rem 2.25rem;
  }
  .contact-hero__title { font-size: 1.85rem; }
  .contact-hero__desc { font-size: 0.9rem; }
  .contact-page__wrap {
    padding: 1.5rem 2rem 2.5rem;
    gap: 1.25rem;
  }
  .contact-quick {
    max-width: 28rem;
    margin: 0 auto;
    gap: 0.65rem;
  }
  .contact-quick__btn {
    min-height: 4.5rem;
    font-size: 0.75rem;
  }
  .contact-form,
  .contact-office {
    padding: 1.25rem 1.35rem;
  }
  .contact-map { min-height: 14rem; }
}

@media (min-width: 1024px) {
  .contact-hero .contact-hero__inner {
    padding: 3.5rem 2rem 3rem;
  }
  .contact-hero__title { font-size: 2.25rem; }
  .contact-page__wrap {
    padding: 2rem 2rem 3.5rem;
    gap: 1.5rem;
  }
  .contact-quick {
    display: none;
  }
  .contact-channels {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  .contact-channel {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 1.15rem 1.1rem;
    background: #f8fafc;
  }
  .contact-channel:hover {
    border-color: var(--gold);
    background: #fff;
  }
  .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1.5rem;
    align-items: start;
  }
  .contact-form {
    order: 2;
    padding: 1.5rem 1.6rem;
  }
  .contact-aside {
    order: 1;
    gap: 1rem;
  }
  .contact-form__title { font-size: 1.2rem; }
  .contact-form__subtitle { font-size: 0.8125rem; }
  .contact-office { padding: 1.35rem 1.45rem; }
  .contact-office__title { font-size: 1.1rem; }
  .contact-map { min-height: 16rem; aspect-ratio: 4 / 3; }
  .contact-form__submit {
    min-height: 3.15rem;
    border-radius: 15px;
    font-size: 0.9rem;
  }
}

/* =========================================================
   SOFTWARE PAGE — mobile-first widgets
   ========================================================= */
.software-hero .software-hero__inner {
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
}
.software-hero__eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold) !important;
}
.software-hero__title {
  margin: 0.55rem 0 0.45rem;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--navy) !important;
}
.software-hero__desc {
  margin: 0 auto;
  max-width: 36rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--muted) !important;
}

.software-section__wrap {
  padding: 1.15rem 1.25rem 1.75rem;
}
.software-section__head {
  margin-bottom: 0.95rem;
}
.software-section__head--center {
  text-align: center;
}
.software-section__eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.software-section__title {
  margin: 0.45rem 0 0;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--navy);
}

.software-products__grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.software-product {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 0.95rem;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--surface, #fff);
  transition: border-color .2s ease, background .2s ease;
}
.software-product--accent {
  border-color: rgba(193, 159, 91, 0.45);
  background: rgba(193, 159, 91, 0.06);
}
.software-product__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.software-product__icon i,
.software-product__icon svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--gold);
  display: block;
}
.software-product__title {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
}
.software-product__desc {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--muted);
}

.software-steps {
  background: #f8fafc;
}
.software-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  counter-reset: none;
}
.software-step {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.85rem 0.9rem;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--surface, #fff);
}
.software-step__num {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 2.35rem;
  min-width: 1.4rem;
}
.software-step__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  background: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.software-step__icon i,
.software-step__icon svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--gold);
  display: block;
}
.software-step__title {
  margin: 0.15rem 0 0.25rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
}
.software-step__desc {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--muted);
}

.software-features__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}
.software-feature {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.85rem;
  padding: 0.65rem 0.8rem;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: #f8fafc;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
}
.software-feature i,
.software-feature svg {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0.2rem;
  box-sizing: content-box;
  border-radius: 8px;
  background: var(--gold);
  color: var(--navy);
  flex-shrink: 0;
  display: block;
}

.software-cta {
  background: var(--navy);
}
.software-cta__inner {
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.software-cta__title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
}
.software-cta__desc {
  margin: 0 auto 1rem;
  max-width: 28rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
}
.software-cta__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  max-width: 20rem;
  margin: 0 auto;
}
.software-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.software-cta__btn i,
.software-cta__btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
  flex-shrink: 0;
}
.software-cta__btn--primary {
  background: var(--gold);
  color: var(--navy);
  border: 2px solid var(--gold);
}
.software-cta__btn--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.28);
}
.software-cta__btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

html.dark .software-product,
html.dark .software-step,
html.dark .software-feature {
  background: var(--surface);
  border-color: var(--line);
}
html.dark .software-product--accent {
  background: rgba(193, 159, 91, 0.08);
}
html.dark .software-product__icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}
html.dark .software-section__title,
html.dark .software-product__title,
html.dark .software-step__title,
html.dark .software-feature {
  color: #e8eef5;
}
html.dark .software-steps {
  background: rgba(15, 23, 42, 0.35);
}

@media (min-width: 480px) {
  .software-features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .software-cta__actions {
    grid-template-columns: 1fr 1fr;
    max-width: 24rem;
  }
}

@media (min-width: 768px) {
  .software-hero .software-hero__inner {
    padding: 2.5rem 2rem 2.25rem;
  }
  .software-hero__title { font-size: 1.85rem; }
  .software-hero__desc { font-size: 0.9rem; }
  .software-section__wrap { padding: 1.75rem 2rem 2.5rem; }
  .software-section__title { font-size: 1.65rem; }
  .software-section__head { margin-bottom: 1.25rem; }
  .software-products__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .software-product {
    padding: 1.1rem 1.15rem;
  }
  .software-product__icon {
    width: 2.85rem;
    height: 2.85rem;
  }
  .software-product__title { font-size: 1rem; }
  .software-product__desc { font-size: 0.78rem; }
  .software-steps__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    max-width: 52rem;
    margin: 0 auto;
  }
  .software-step {
    padding: 1.05rem 1.1rem;
  }
  .software-step__title { font-size: 1rem; }
  .software-step__desc { font-size: 0.78rem; }
  .software-features__grid { gap: 0.65rem; }
  .software-feature {
    min-height: 3.1rem;
    font-size: 0.85rem;
    padding: 0.75rem 0.95rem;
  }
  .software-cta__inner { padding: 2.5rem 2rem; }
  .software-cta__title { font-size: 1.65rem; }
}

@media (min-width: 1024px) {
  .software-hero .software-hero__inner {
    padding: 3.5rem 2rem 3rem;
  }
  .software-hero__title { font-size: 2.25rem; }
  .software-section__wrap { padding: 2.5rem 2rem 3.5rem; }
  .software-section__title { font-size: 1.85rem; }
  .software-products__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  .software-product {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 1.5rem 1.15rem;
    border-width: 2px;
  }
  .software-product:hover { border-color: var(--gold); }
  .software-product__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    margin-bottom: 0.25rem;
  }
  .software-product__icon i,
  .software-product__icon svg {
    width: 1.45rem;
    height: 1.45rem;
  }
  .software-product__title { font-size: 1.05rem; margin-bottom: 0.35rem; }
  .software-product__desc { font-size: 0.8rem; }
  .software-steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 1rem;
  }
  .software-step {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1.25rem 1.2rem;
  }
  .software-step__num {
    position: absolute;
    top: 1rem;
    left: 1rem;
    line-height: 1;
  }
  .software-features__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .software-cta__inner { padding: 3.25rem 2rem; }
  .software-cta__title { font-size: 1.85rem; margin-bottom: 0.75rem; }
  .software-cta__desc { font-size: 0.9rem; margin-bottom: 1.35rem; }
  .software-cta__actions {
    display: inline-flex;
    max-width: none;
    gap: 0.75rem;
  }
  .software-cta__btn {
    min-width: 11rem;
    font-size: 0.875rem;
    padding: 0.85rem 1.4rem;
  }
}

/* =========================================================
   SERVICES — mobile rows + desktop bento
   ========================================================= */
.services-bento {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.services-bento__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title num"
    "icon desc  num";
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  align-items: center;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 15px;
  padding: 0.85rem 0.95rem;
  transition: border-color .25s ease, background .25s ease;
  min-height: 0;
}
.services-bento__top {
  display: contents;
}
.services-bento__icon {
  grid-area: icon;
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f8fafc;
  align-self: center;
}
.services-bento__num {
  grid-area: num;
  font-size: 1.05rem;
  font-weight: 700;
  color: #cbd5e1;
  line-height: 1;
  align-self: start;
  padding-top: 0.15rem;
}
.services-bento__item > h3 {
  grid-area: title;
  margin: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
}
.services-bento__item > p.text-xs {
  grid-area: desc;
  margin: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.services-bento__item > p.text-sm {
  display: none !important;
}
.services-bento__item > h3 + p.text-sm {
  grid-area: desc;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.5 !important;
}
.services-bento__item--accent {
  background: var(--navy);
  border-color: var(--navy);
}
.services-bento__item--accent > h3 { color: #fff !important; }
.services-bento__icon--dark { background: rgba(255,255,255,0.08); }
.services-bento__num--light { color: rgba(255,255,255,0.28); }

@media (min-width: 640px) and (max-width: 1023px) {
  .services-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .services-bento__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1.1rem 1.15rem;
  }
  .services-bento__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
  }
  .services-bento__icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  .services-bento__num { font-size: 1.35rem; color: #e2e8f0; }
  .services-bento__item > h3 {
    font-size: 1rem !important;
    margin-bottom: 0.35rem !important;
  }
  .services-bento__item > p.text-xs {
    display: block;
    -webkit-line-clamp: unset;
  }
  .services-bento__item:nth-child(1),
  .services-bento__item:nth-child(7) {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .services-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(11.5rem, auto);
    gap: 1rem;
  }
  .services-bento__item {
    display: block;
    padding: 1.35rem 1.4rem;
    min-height: 100%;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .services-bento__item:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(14, 43, 74, 0.08);
  }
  .services-bento__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  .services-bento__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 15px;
  }
  .services-bento__num {
    font-size: 1.75rem;
    color: #f1f5f9;
  }
  .services-bento__item > h3 {
    font-size: inherit !important;
    margin-bottom: 0.5rem !important;
    line-height: inherit !important;
  }
  .services-bento__item > p.text-xs {
    display: block;
    -webkit-line-clamp: unset;
    margin-bottom: 0.5rem !important;
    font-size: 0.75rem !important;
    line-height: 1.6 !important;
  }
  .services-bento__item > p.text-sm {
    display: block !important;
  }
  .services-bento__item--accent:hover {
    border-color: var(--gold);
    box-shadow: 0 12px 32px rgba(14, 43, 74, 0.35);
  }
  .services-bento__item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; padding: 1.75rem; }
  .services-bento__item:nth-child(2) { grid-column: 3; grid-row: 1; }
  .services-bento__item:nth-child(3) { grid-column: 4; grid-row: 1; }
  .services-bento__item:nth-child(4) { grid-column: 3; grid-row: 2; }
  .services-bento__item:nth-child(5) { grid-column: 4; grid-row: 2; }
  .services-bento__item:nth-child(6) { grid-column: 1 / span 2; grid-row: 3; }
  .services-bento__item:nth-child(7) { grid-column: 3 / span 2; grid-row: 3; }
  .services-bento__item:nth-child(8) { grid-column: 1 / span 2; grid-row: 4; }
  .services-bento__item:nth-child(9) { grid-column: 3 / span 2; grid-row: 4; }
}

html.dark .services-bento__item {
  border-color: var(--line);
  background: var(--surface);
}
html.dark .services-bento__icon { background: var(--surface-2); }
html.dark .services-bento__num { color: #1f334a; }
html.dark .services-bento__item--accent {
  background: #0e2b4a;
  border-color: #1a3a5c;
}
@media (max-width: 639px) {
  html.dark .services-bento__num { color: #334155; }
  html.dark .services-bento__num--light { color: rgba(255, 255, 255, 0.28); }
}

/* =========================================================
   DARK MODE — surface / text overrides for Tailwind utilities
   ========================================================= */
html.dark .bg-white { background-color: var(--surface) !important; }
html.dark .bg-white\/95 { background-color: var(--header) !important; }
html.dark .bg-slate-50,
html.dark .bg-gray-50 { background-color: var(--surface-2) !important; }
html.dark .bg-slate-100,
html.dark .bg-gray-100 { background-color: #1a2d42 !important; }

html.dark .text-slate-800,
html.dark .text-slate-900,
html.dark .text-gray-800,
html.dark .text-gray-900 { color: #e2e8f0 !important; }
html.dark .text-slate-700,
html.dark .text-gray-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600,
html.dark .text-gray-600 { color: #94a3b8 !important; }
html.dark .text-slate-500,
html.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-slate-400,
html.dark .text-gray-400 { color: #64748b !important; }

html.dark .border-gray-50,
html.dark .border-gray-100,
html.dark .border-slate-100 { border-color: var(--line) !important; }
html.dark .border-gray-200,
html.dark .border-slate-200 { border-color: #243b55 !important; }

/* Navy used as ink on light surfaces → light text in dark mode */
html.dark .text-\[\#0e2b4a\] { color: #e8eef5 !important; }

/* Keep navy text on gold CTAs / chips */
html.dark .bg-\[\#c19f5b\],
html.dark .bg-\[\#c19f5b\] .text-\[\#0e2b4a\],
html.dark .bg-\[\#c19f5b\].text-\[\#0e2b4a\] { color: #0e2b4a !important; }
html.dark .hover\:bg-\[\#c19f5b\]:hover { color: #0e2b4a !important; }

html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) !important; }
html.dark .shadow,
html.dark .shadow-md { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; }
html.dark .shadow-lg { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important; }

html.dark input[type="text"],
html.dark input[type="tel"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="number"],
html.dark textarea,
html.dark select {
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }

html.dark details { background-color: var(--surface); border-color: var(--line); }

/* =========================================================
   ABOUT — milestones timeline
   ========================================================= */
.about-timeline {
  --rail: 0.7rem;
  --dot: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 0.85rem;
}
.about-timeline::before {
  content: "";
  position: absolute;
  top: 1.15rem;
  bottom: 1.15rem;
  right: var(--rail);
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--line, #e5e7eb) 8%,
    var(--line, #e5e7eb) 92%,
    transparent
  );
}
.about-timeline__item {
  position: relative;
  padding-right: 2.1rem;
}
.about-timeline__dot {
  position: absolute;
  top: 1.35rem;
  right: calc(var(--rail) - (var(--dot) / 2) + 0.5px);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--gold, #c19f5b);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(193, 159, 91, 0.35);
  z-index: 1;
}
.about-timeline__card {
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 15px;
  padding: 1rem 1.1rem 1.1rem;
}
.about-timeline__year {
  display: inline-block;
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold, #c19f5b);
}
.about-timeline__title {
  margin: 0 0 0.4rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navy, #0e2b4a);
  line-height: 1.45;
}
.about-timeline__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: #64748b;
}

html.dark .about-timeline__card {
  background: var(--surface);
  border-color: var(--line);
}
html.dark .about-timeline__dot {
  border-color: var(--surface);
}
html.dark .about-timeline__title { color: #e8eef5; }

@media (min-width: 768px) {
  .about-timeline {
    gap: 1rem;
  }
  .about-timeline__card {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    grid-template-areas:
      "year title"
      "year text";
    column-gap: 1rem;
    row-gap: 0.3rem;
    align-items: start;
    padding: 1.15rem 1.25rem;
  }
  .about-timeline__year {
    grid-area: year;
    margin: 0;
    font-size: 1.25rem;
    padding-top: 0.15rem;
  }
  .about-timeline__title {
    grid-area: title;
    font-size: 1.05rem;
    margin: 0;
  }
  .about-timeline__text {
    grid-area: text;
    font-size: 0.875rem;
  }
}

/* =========================================================
   ABOUT — milestones timeline END
   ========================================================= */

/* Theme toggle icons */
.theme-icon-sun { display: none !important; }
html.dark .theme-icon-moon { display: none !important; }
html.dark .theme-icon-sun { display: inline-block !important; }

/* Header brand logos */
.site-logo__img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.site-logo__img--dark { display: none !important; }
html.dark .site-logo__img--light { display: none !important; }
html.dark .site-logo__img--dark { display: block !important; }
html.dark .site-logo .text-\[\#0e2b4a\] { color: #e8eef5 !important; }
/* Hide the English subtitle in the header on mobile — it's too wide there */
.site-logo__sub { display: none; }
@media (min-width: 1024px) {
  .site-logo__sub { display: block; }
}
/* Ultra-narrow phones (≤374px, e.g. 320px iPhone SE): the brand text makes
   the fixed floating header wider than the viewport, so the menu button
   pokes past the screen edge. Keep only the logo mark below 375px — the
   brand name is fully visible again from 375px upwards. */
@media (max-width: 374px) {
  .site-logo .flex.flex-col { display: none; }
}

[data-theme-toggle] {
  border: 1px solid transparent;
  line-height: 0;
}

/* Desktop header CTA — spinning border ring */
@media (min-width: 1024px) {
  .header-cta-spin {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    padding: 2px;
    border-radius: 15px;
    overflow: hidden;
    background: transparent;
    text-decoration: none;
    isolation: isolate;
  }
  .header-cta-spin__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(
      from 0deg,
      #c19f5b 0deg,
      transparent 70deg,
      #c19f5b 140deg,
      transparent 210deg,
      #e8d5a3 280deg,
      transparent 330deg,
      #c19f5b 360deg
    );
    animation: headerCtaSpin 2.4s linear infinite;
    z-index: 0;
    pointer-events: none;
  }
  .header-cta-spin__inner {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.6rem;
    padding: 0.55rem 1.25rem;
    border-radius: 13px;
    background: #0e2b4a;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background .25s ease, color .25s ease;
  }
  .header-cta-spin:hover .header-cta-spin__inner {
    background: #c19f5b;
    color: #0e2b4a;
  }
  .header-cta-spin:hover .header-cta-spin__ring {
    animation-duration: 1.6s;
  }
}
@keyframes headerCtaSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
html.dark [data-theme-toggle] {
  color: #e8eef5 !important;
}
[data-theme-toggle]:hover {
  background: var(--surface-2);
  border-color: var(--line);
}

/* =========================================================
   ACCESSIBILITY: Visible Focus Indicators — WCAG 2.4.7
   Replace suppressed outlines with visible box-shadow rings
   on :focus-visible for keyboard users only.
   ========================================================= */

/* Comment form inputs */
.comment-form .comment-field input:focus-visible,
.comment-form .comment-field textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(14, 43, 74, 0.18);
}

/* Search modal input */
.search-modal__field input:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(14, 43, 74, 0.18);
}

/* Search modal item */
.search-modal__item:focus-visible {
  outline: none;
  background: #f8fafc;
  border-color: rgba(193, 159, 91, 0.35);
  box-shadow: 0 0 0 3px rgba(14, 43, 74, 0.18);
}

/* Home consultation form fields */
.home-consult__field input:focus-visible,
.home-consult__field select:focus-visible,
.home-consult__field textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(14, 43, 74, 0.18);
}

/* Blog newsletter input */
.blog-newsletter__input:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(14, 43, 74, 0.18);
}

/* Contact form fields */
.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(14, 43, 74, 0.18);
}

/* General interactive elements focus-visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(14, 43, 74, 0.4);
  outline-offset: 2px;
}

/* Restore outline:none for specific elements that have custom focus styles */
.comment-form .comment-field input:focus,
.comment-form .comment-field textarea:focus,
.search-modal__field input:focus,
.search-modal__item:focus,
.home-consult__field input:focus,
.home-consult__field select:focus,
.home-consult__field textarea:focus,
.blog-newsletter__input:focus,
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
}

/* Dark mode: override darkened gold text back to lighter gold for contrast on dark bg */
html.dark .text-\[\#8a6d3b\] {
  color: var(--gold-dark, #c9a85d) !important;
}

/* Anchor offset: course cards are deep-linked from the homepage
   (e.g. /courses/#course-1); the sticky header would otherwise cover the
   top of the targeted card when jumping to the anchor. */
.course-card[id] {
  scroll-margin-top: 5.5rem;
}