/* Subify home v11 — hero copy, chrome sheen, entry points, platform logos.
   Only layout / responsive typography is defined here. No existing animation is modified. */

/* ===== Chrome sheen (hero subtitle only) — values exactly as specified =====
   --ink must be a concrete colour: on this element `color` is transparent, so `currentColor` would resolve to transparent. */
:root { --ink: #e0dbe3; --ink-2: #FF4FD8; --ink-3: #4FF8FF; }
html[data-theme="light"] { --ink: #66616c; }

.fx-chrome {
  /* responsive typography: Persian needs its own face, no letter-spacing (it breaks Arabic-script joining) */
  font: 600 clamp(15px, 2.1vw, 20px)/2 SubifyYekan, IRANYekanX, Vazirmatn, "JetBrains Mono", monospace;
  letter-spacing: 0;
  background: linear-gradient(
    105deg,
    rgba(224, 219, 227, .4) 0 38%,
    var(--ink) 47%,
    #fff 50%,
    var(--ink) 53%,
    rgba(224, 219, 227, .4) 62% 100%
  ) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fx-chrome 2.8s ease-in-out infinite;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
html[data-theme="light"] .fx-chrome {
  background-image: linear-gradient(105deg, rgba(102, 97, 108, .4) 0 38%, var(--ink) 47%, #fff 50%, var(--ink) 53%, rgba(102, 97, 108, .4) 62% 100%);
}
@supports (background: color-mix(in srgb, red 40%, transparent)) {
  .fx-chrome {
    background-image: linear-gradient(105deg,
      color-mix(in srgb, var(--ink) 40%, transparent) 0 38%, var(--ink) 47%, #fff 50%, var(--ink) 53%,
      color-mix(in srgb, var(--ink) 40%, transparent) 62% 100%);
  }
  html[data-theme="light"] .fx-chrome {
    background-image: linear-gradient(105deg,
      color-mix(in srgb, var(--ink) 40%, transparent) 0 38%, var(--ink) 47%, #fff 50%, var(--ink) 53%,
      color-mix(in srgb, var(--ink) 40%, transparent) 62% 100%);
  }
}
@keyframes fx-chrome {
  0% { background-position: 130% 0; }
  60%, 100% { background-position: -130% 0; }
}

/* ===== Hero spacing & hierarchy ===== */
.reference-home .ref-hero { padding: 44px 0 70px; }
.reference-home .ref-hero-title { font-size: clamp(34px, 4.5vw, 54px); margin: 26px 0 18px; line-height: 1.18; text-wrap: balance; }
.reference-home .ref-hero-sub { max-width: 640px; margin: 0 auto 26px; font-size: inherit; line-height: inherit; text-wrap: pretty; }
.reference-home .ref-cta-row { gap: 12px; }
.reference-home .ref-cta-row .ref-btn { min-height: 52px; }
.v11-entry {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
  margin: 16px auto 0; max-width: 620px; font: 400 13.5px/1.9 var(--font-ui, Vazirmatn, sans-serif); color: var(--muted, #8b93a3);
}
.v11-url { color: var(--violet2, #9a86ff); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.v11-url:hover { color: #fff; }
html[data-theme="light"] .v11-url:hover { color: #1b1230; }
.v11-sep { opacity: .5; }
.reference-home .home-capabilities { margin-top: 22px; }
.reference-home .ref-browsers { margin-top: 18px; }

@media (max-width: 760px) {
  .reference-home .ref-hero { padding: 30px 0 52px; }
  .reference-home .ref-hero-title { font-size: clamp(28px, 8vw, 38px); margin: 22px 0 14px; line-height: 1.25; }
  .reference-home .ref-hero-sub { margin-bottom: 20px; padding: 0 4px; }
  .reference-home .ref-cta-row { width: 100%; }
  .reference-home .ref-cta-row .ref-btn { width: 100%; justify-content: center; min-height: 54px; }
  .v11-sep { display: none; }
  .v11-entry { flex-direction: column; gap: 2px; }
}


/* ===== Hero title size (beats the older !important rules; the word-rotate animation itself is untouched) ===== */
html .reference-home .ref-hero .ref-hero-title.subify-wordrotate-hero {
  font-size: clamp(34px, 4.4vw, 52px) !important;
  line-height: 1.3 !important;
  letter-spacing: -.03em !important;
  max-width: 900px !important;
  width: 100% !important;
  white-space: normal !important;
  text-wrap: balance;
}
@media (max-width: 760px) {
  html .reference-home .ref-hero .ref-hero-title.subify-wordrotate-hero {
    font-size: clamp(26px, 7.4vw, 34px) !important;
    line-height: 1.38 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ===== Light theme legibility (same angle / size / timing / animation; only the colour stops adapt) ===== */
html[data-theme="light"] { --ink: #2a2433; }
html[data-theme="light"] .fx-chrome,
html[data-theme="light"] .fx-chrome[class] {
  background-image: linear-gradient(105deg, rgba(42, 36, 51, .78) 0 38%, #2a2433 47%, #7c5cff 50%, #2a2433 53%, rgba(42, 36, 51, .78) 62% 100%) !important;
  opacity: 1 !important; text-shadow: none !important; filter: none !important;
}
html[data-theme="light"] .reference-home .ref-cta-row .v11-webapp { background: #16101f; color: #fff; border-color: #16101f; box-shadow: 0 14px 34px rgba(22, 16, 31, .28); }
html[data-theme="light"] .reference-home .ref-cta-row .ref-btn-secondary { background: #fff; color: #1b1230; border: 1px solid rgba(27, 18, 48, .22); }
html[data-theme="light"] .reference-home .ref-cta-row .ref-btn-secondary .cta-label { color: #1b1230; }
html[data-theme="light"] .v11-entry { color: #5c5668; }
html[data-theme="light"] .v11-url { color: #5b3df0; }