/* صفحه‌ی اصلی — تبدیل‌شده از src/app/_home/Home.module.css نسخه‌ی p6c (پیشوند h-).
   :global(...) حذف شده چون در CSS معمولی همه‌چیز سراسری است. */

/* ==========================================================================
   Home page
   --------------------------------------------------------------------------
   A narrow column of cards separated by a single gutter, not a screen height.
   Sections sit close together so the page reads as one continuous document.

   Boxes are used where a box does work — grouping the entry points, framing
   a photo, holding a pull-quote. The statistics row deliberately has none:
   four numbers in four boxes is four frames around nothing.
   ========================================================================== */

html { scroll-behavior: smooth; }

.h-page {
  --bg: #08080a;
  --card: #131317;
  --card-2: #1a1a1e;
  --line: rgba(255, 255, 255, .08);
  --fg: #f4f4f6;
  --fg-2: #a8a8b0;
  --fg-3: #6c6c76;
  --accent: #a855c9;

  --gutter: 14px;
  --radius: 26px;
  /* Clearance from the window on all four sides of the opening card. */
  --edge: 50px;
  /* Shared by the sticky bar and the opening card so their edges agree. */
  --wide: min(1400px, calc(100vw - var(--edge) * 2));

  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  direction: rtl;
  /* The dot canvas is fixed at z-index 0 behind everything here. */
  position: relative;
  isolation: isolate;
}

.h-frame {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  /* Extra top padding: the hero fills its own viewport, and the first
     section shouldn't butt straight against it. */
  padding: 0 16px 60px;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

/* ---------- pointer light ---------------------------------------------
   Two layers on every GlowCard: a soft pool of light under the pointer, and
   a lit rim on the edge facing it. Both scale with --lit, which the component
   drops to 0 on pointer-out so an untouched page stays still.

   Painted with pseudo-elements rather than box-shadow so the light can be
   clipped to the card's own radius and never bleeds onto its neighbours. */

.h-glow {
  --mx: 50%;
  --my: 50%;
  --lit: 0;
  --ang: 0deg;
  position: relative;
  isolation: isolate;
}

.h-glow::before,
.h-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--lit);
  transition: opacity .35s ease;
}

/* The pool of light under the pointer. */
.h-glow::before {
  background: radial-gradient(
    240px circle at var(--mx) var(--my),
    rgba(255, 255, 255, .13),
    transparent 62%
  );
  z-index: 1;
}

/* The lit rim: a gradient border whose bright end follows the pointer. */
.h-glow::after {
  padding: 1px;
  background: linear-gradient(
    var(--ang),
    rgba(255, 255, 255, .5),
    rgba(255, 255, 255, .06) 42%,
    transparent 70%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
}

.h-glow > * { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .h-glow::before, .h-glow::after { transition: none; }
}

/* ---------- sticky bar --------------------------------------------------
   Follows the page down. Once the hero is behind it the four entry points
   slide in beside the nav, so they are reachable from anywhere on the page
   without repeating them in every section. */

.h-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 10px 0;
  transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
.h-barStuck {
  background: rgba(8, 8, 10, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

.h-barInner {
  width: var(--wide);
  margin: 0 auto;
  display: grid;
  /* Equal side columns, so the nav lands in the true centre of the bar
     whatever the mark and the sign-in button happen to measure. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  /* No side padding: the mark and the sign-in sit exactly on the card's
     edges, not inset from them. */
  padding: 0;
}
.h-barInner > :first-child { justify-self: start; }
.h-barInner > :last-child { justify-self: end; }

.h-brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--fg); text-decoration: none; flex-shrink: 0;
}
.h-brand svg { width: 26px; height: auto; }
.h-brandName { font-size: 17px; font-weight: 700; letter-spacing: .02em; }

/* Centred between the mark and the sign-in, whatever their widths.
   One dark frame around the whole set rather than a box per link: the links
   are one group, and outlining each of them would say the opposite. */
.h-nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 6px;
}
.h-navLink {
  font-size: 13px; color: var(--fg-2); text-decoration: none;
  padding: 7px 12px; border-radius: 10px;
  transition: color .16s ease, background .16s ease;
}
.h-navLink:hover { color: var(--fg); background: rgba(255,255,255,.05); }

.h-navCta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  padding: 9px 18px; border-radius: 20px;
  background: var(--fg); color: #0b0b0d;
  white-space: nowrap; flex-shrink: 0;
}
.h-navCta svg { width: 15px; height: 15px; }

/* Collapsed by default; the grid rows animate open when the bar sticks. */
.h-barCtas {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.22,1,.36,1);
}
.h-barStuck .h-barCtas { grid-template-rows: 1fr; }
.h-barCtas > * { overflow: hidden; }

.h-barCtas {
  width: var(--wide);
  margin: 0 auto;
  gap: 8px;
  grid-auto-flow: column;
  grid-template-rows: 0fr;
}
.h-barStuck .h-barCtas {
  width: var(--wide);
  margin: 0 auto;
  padding: 10px 0 2px;
}
.h-barCta {
  display: block;
  text-align: center;
  font-size: 12.5px;
  padding: 9px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--fg-2);
  text-decoration: none;
  opacity: 0;
  transition: opacity .3s ease .06s, color .16s ease,
              background .16s ease, border-color .16s ease;
}
.h-barStuck .h-barCta { opacity: 1; }
/* Deepens on hover rather than switching colour, so the row reads as one
   family of buttons with one of them under the pointer. */
.h-barCta:hover {
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--fg);
}

/* ---------- hero ------------------------------------------------------- */

/* Holds the card's space in the page. During the opening the card itself is
   lifted out of the flow, and without this the page under it would jump. */
.h-heroSlot {
  /* Breaks out of the reading column to the shared wide measure. */
  width: var(--wide);
  max-width: none;
  margin-inline: calc(50% - var(--wide) / 2);
  /* Fills the window less the clearance: the topbar sits above it, so its
     height comes out of the total too. */
  min-height: calc(100vh - var(--edge) - 96px);
  display: flex;
}

.h-hero {
  width: 100%;
  position: relative;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 3.4vw, 38px);
}
/* One slot for either a video or a still, so the markup doesn't branch on
   which the admin uploaded. */
.h-heroMedia {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
/* Keeps the slogan readable over any footage, however bright. */
.h-heroVeil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,13,.45), rgba(11,11,13,.3) 40%, rgba(11,11,13,.88));
}
.h-heroGlow {
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 8%, rgba(168,85,201,.18), transparent 62%);
  pointer-events: none;
}

.h-heroCenter {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 0;
}

/* Resolves out of blur once the splash clears. */
.h-headline {
  font-size: clamp(30px, 5.4vw, 62px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0;
  filter: blur(16px);
  opacity: 0;
  transform: translateY(10px);
  transition: filter 1.1s ease, opacity 1.1s ease, transform 1.1s ease;
}
.h-headlineIn { filter: blur(0); opacity: 1; transform: none; }

.h-headlineSub {
  font-size: clamp(12.5px, 1.3vw, 15px);
  color: var(--fg-2);
  line-height: 2;
  max-width: 480px;
  margin: 18px 0 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .9s ease .25s, transform .9s ease .25s;
}
.h-headlineSubIn { opacity: 1; transform: none; }

/* The entry points, nested inside the hero frame. The count is set by the
   deck rather than fixed at four: a visitor without access to the model
   section gets three, and they should fill the row. (p7) */
.h-ctaRow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cta-count, 4), minmax(0, 1fr));
  gap: 10px;
}
.h-ctaCard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 18px;
  /* Frosted rather than flat: the hero image sits directly behind these, and
     a busy photo swallows the labels without something between them. The
     blur is slight — enough to quiet the background, not enough to hide it. */
  background: rgba(20, 20, 24, .38);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  border: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  min-height: 92px;
  justify-content: flex-end;
  overflow: hidden;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

/* Purple wash under the pointer, deep enough to read as a state change and
   shallow enough that the label stays the brightest thing on the card. */
.h-ctaCard:hover {
  background: color-mix(in srgb, var(--accent) 30%, rgba(20, 20, 24, .5));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  transform: translateY(-2px);
}
.h-ctaLabel { font-size: 15px; font-weight: 700; }
.h-ctaSub { font-size: 11.5px; color: var(--fg-3); }
.h-ctaArrow {
  position: absolute; top: 14px; inset-inline-start: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); color: var(--fg-2);
}
.h-ctaArrow svg { width: 14px; height: 14px; }

/* ---------- stats: no boxes ------------------------------------------- */

.h-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 34px 10px 30px;
  text-align: center;
}
.h-statNum {
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.h-statLabel { font-size: 12px; color: var(--fg-3); margin-top: 9px; line-height: 1.6; }

/* ---------- about ------------------------------------------------------ */

.h-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 60px);
  align-items: start;
  padding: 16px 10px 34px;
}
.h-bigHeading {
  font-size: clamp(26px, 4.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin: 0;
}
.h-midHeading {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
}
.h-splitBody { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.h-para { font-size: 13.5px; line-height: 2.05; color: var(--fg-2); margin: 0; }

.h-solidBtn {
  margin-top: 6px;
  padding: 11px 22px;
  border-radius: 12px;
  background: var(--fg);
  color: #0b0b0d;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- team mosaic ------------------------------------------------ */

.h-mosaic {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--gutter);
  align-items: stretch;
}
.h-photoCard {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  min-height: 340px;
  display: flex;
  align-items: flex-end;
}
.h-photoImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-photoEmpty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-2); color: var(--fg-3);
  font-size: 13px; text-align: center; padding: 20px;
}
.h-photoCaption {
  position: relative;
  padding: 24px;
  width: 100%;
  background: linear-gradient(180deg, transparent, rgba(11,11,13,.9) 62%);
}
.h-photoTitle { font-size: clamp(22px, 3.2vw, 34px); font-weight: 700; margin: 10px 0 0; letter-spacing: -.02em; }

.h-mosaicSide { display: flex; flex-direction: column; gap: var(--gutter); }
.h-sideCard {
  flex: 1;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.h-sideText { font-size: 13px; line-height: 2; color: var(--fg-2); margin: 0; }

.h-tag {
  display: inline-block;
  font-size: 11px;
  padding: 5px 13px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  color: var(--fg-2);
  align-self: flex-start;
}

/* ---------- brands ----------------------------------------------------- */

.h-brands { padding: 34px 0 10px; }
.h-brandsHead { padding: 0 10px 20px; }

.h-marquee {
  overflow: hidden;
  /* The page is right-to-left, which flips the flex axis and sends the strip
     away from its starting edge — the tail runs out and the strip empties.
     The track runs left-to-right on its own so the translation and the layout
     agree. */
  direction: ltr;
  /* Fades at both ends so tiles enter and leave instead of being cut off. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.h-marqueeTrack {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.h-marquee:hover .h-marqueeTrack { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  /* Half, because the list is rendered twice. */
  to { transform: translateX(-50%); }
}

.h-brandTile {
  width: 168px;
  height: 92px;
  flex-shrink: 0;
  /* Spacing lives here, not in a flex gap: a gap would add one extra space at
     the seam and the loop would jump every cycle. */
  margin-inline-end: 10px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.h-brandLogo { max-width: 100%; height: auto; object-fit: contain; opacity: .82; }
.h-brandName2 { font-size: 13px; color: var(--fg-3); text-align: center; }

/* ---------- footer ----------------------------------------------------- */

.h-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 34px 10px 0;
  border-top: 1px solid var(--line);
  margin-top: 20px;
}
.h-footNav { display: flex; gap: 4px; flex-wrap: wrap; }
.h-copy { font-size: 12px; color: var(--fg-3); }

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 900px) {
  .h-page { --edge: 20px; }
  .h-barInner { grid-template-columns: 1fr auto; }
  .h-ctaRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-nav { display: none; }
  .h-barStuck .h-barCtas { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .h-split { grid-template-columns: 1fr; gap: 20px; }
  .h-mosaic { grid-template-columns: 1fr; }
  .h-photoCard { min-height: 280px; }
}

@media (max-width: 620px) {
  .h-page { --edge: 12px; }
  .h-frame { padding: 14px 12px 44px; }
  .h-nav { display: none; }
  .h-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; padding: 28px 6px 24px; }
  /* Nearly full height on a phone too, so the card reads as the screen rather
     than as a panel sitting in the top half of it. Measured in svh — the
     small viewport never changes as the browser's own bars slide away, so the
     card doesn't resize under the reader mid-scroll — and held clear of the
     bar above it, the gutter below it, and the home indicator on phones that
     have one. */
  .h-heroSlot { min-height: calc(100vh - var(--edge) - 104px); }
  .h-heroSlot {
    min-height: calc(100svh - var(--edge) - 104px - env(safe-area-inset-bottom, 0px));
  }
  .h-hero { padding: 22px 18px 18px; }
  .h-heroCenter { padding: 20px 0 18px; }

  /* One per line rather than two by two. Four squat tiles left a gap between
     the slogan and the row that read as a mistake; a single column carries
     the eye down from the words to the ways in. */
  .h-ctaRow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .h-ctaCard { min-height: 62px; padding: 12px 15px; gap: 2px; }

  .h-brandTile { width: 132px; height: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-headline, .h-headlineSub { transition: none; filter: none; opacity: 1; transform: none; }
  .h-marqueeTrack { animation: none; }
}

/* Optional per-button image, set from the admin panel. Dimmed with a gradient
   so the label stays legible over any photo — a card that only works with a
   dark image would put that constraint on whoever uploads it. */
.h-ctaBg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-size: cover;
  background-position: center;
  z-index: -1;
}
.h-ctaBg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(11,11,13,.45), rgba(11,11,13,.86));
}
.h-ctaCard:hover .h-ctaBg { transform: scale(1.03); }
.h-ctaBg { transition: transform .4s ease; }

@media (prefers-reduced-motion: reduce) {
  .h-ctaBg, .h-ctaCard { transition: none; }
  .h-ctaCard:hover { transform: none; }
  .h-ctaCard:hover .h-ctaBg { transform: none; }
}


/* ==========================================================================
   Opening sequence
   --------------------------------------------------------------------------
   The mark plays over the hero's own footage at full window, then the card
   folds down onto the space the slot is holding for it and the four entry
   points open from the right.

   Everything here hangs off one attribute on <html>, set by a blocking script
   before the first paint and removed once the card has landed. Gating it that
   way — rather than on React state — means the page is never painted in its
   settled form first, and a visitor who has already seen it, or who asks for
   less motion, gets no opening at all and none of these rules ever apply.
   ========================================================================== */

/* Keeps the scrollbar's track reserved at all times.

   Without it, locking the scroll for the opening takes the scrollbar away,
   the window gets that much wider, and the whole page shifts sideways twice:
   once when the opening starts, once when it ends — which lands right on the
   frame the card is settling into. */
html { scrollbar-gutter: stable; }

/* Nothing below the card is reachable while it covers the window. */
html[data-intro='on'] body { overflow: hidden; }

html[data-intro='on'] .h-hero {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  border-radius: 0;
  border-color: transparent;
}

/* Added for the fold itself, so the jump to fixed positioning at the start
   is instant and only the journey back is animated. */
.h-heroFolding {
  /* The card's own box changes on every frame of the fold. Containment keeps
     that work inside it instead of letting the browser re-run layout for the
     whole document sixty times a second. */
  contain: layout paint;
  transition:
    top var(--fold) cubic-bezier(.65, 0, .2, 1),
    left var(--fold) cubic-bezier(.65, 0, .2, 1),
    width var(--fold) cubic-bezier(.65, 0, .2, 1),
    height var(--fold) cubic-bezier(.65, 0, .2, 1),
    border-radius var(--fold) cubic-bezier(.65, 0, .2, 1),
    border-color var(--fold) ease;
}

/* Two effects that cost more than they are worth on a box that is moving:
   a live blur of whatever sits behind each card, and the pointer light on
   every card in the page. Both come back the moment the card lands, and
   nobody is pointing at anything mid-fold anyway. */
.h-heroFolding .h-ctaCard {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-intro='on'] .h-glow::before,
html[data-intro='on'] .h-glow::after {
  display: none;
}

/* Quiets the footage under the mark, then lifts as the card folds. Inert
   outside the opening, so the hero keeps its usual contrast. */
.h-introDim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
html[data-intro='on'] .h-introDim { opacity: .5; }
/* Lifts on the same cue as the fold, so the picture brightens as the card
   finds its place. */
html[data-intro='on'] .h-heroFolding .h-introDim { opacity: 0; }

/* The mark. White on black in the file — screen blending drops the black,
   so what shows through is the hero's own footage. */
.h-logoLayer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .55s ease, transform .55s ease;
}
html[data-intro='on'] .h-logoLayer { display: block; }
.h-logoLayer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.h-logoOut {
  opacity: 0;
  transform: scale(1.06);
}

/* The bar arrives with the card rather than sitting over the mark. */
html[data-intro='on'] .h-bar {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .7s ease, transform .7s ease;
}
html[data-intro='on'] .h-bar.h-barIn {
  opacity: 1;
  transform: none;
}

/* The entry points open from the right, the direction the row reads from.
   A clip rather than a scale, so the labels never stretch. */
html[data-intro='on'] .h-ctaCard {
  clip-path: inset(0 0 0 100% round 18px);
  opacity: 0;
  transform: translateY(10px);
}
html[data-intro='on'] .h-ctaCard.h-ctaIn {
  clip-path: inset(0 0 0 0 round 18px);
  opacity: 1;
  transform: none;
  transition:
    clip-path .62s cubic-bezier(.22, 1, .3, 1) var(--d),
    opacity .3s ease var(--d),
    transform .5s cubic-bezier(.22, 1, .3, 1) var(--d),
    background .2s ease,
    border-color .2s ease;
}

/* ---------- DotField.module.css (پیشوند df-) ---------- */
/* Fixed to the viewport rather than the document: the grid stays put while
   the page scrolls over it. */
.df-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}