/* Base document scroller. Kept identical to the matching html rules in the
   inlined critical block in index.html. */
html {
  overflow-x: clip;
  scroll-padding-top: var(--header-height);
  direction: rtl;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* The split follows what each family carries. Vazirmatn is the body and navbar
   face, so body copy must always land and it uses swap; its metric-matched
   fallback holds the line boxes steady while the real face arrives, keeping any
   swap from shifting layout. JetBrains Mono, Kapiler and Rooyin are local to the
   hero and lockup, so they use block: those families must never be substituted,
   even at the cost of a short invisible-text period before the real face lands.
   Their preloads plus the one-year cache make that block period resolve to the
   real face on any warm load. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-Variable-subset.woff2?v=1") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Variable-subset.woff2?v=1") format("woff2-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Kapiler";
  src: url("../assets/fonts/Kapiler-subset.woff2?v=1") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: block;
}

@font-face {
  font-family: "Rooyin";
  src: url("../assets/fonts/Rooyin-regular-subset.woff2?v=1") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

/* Metric-matched fallbacks for the hero code frame. The static snippet paints
   in whatever face the chain resolves to before the webfonts land; this face
   pins that first render to Courier New's own box, scaled to the loaded face's
   advance and vertical metrics, so the webfont swap does not reflow it.
   Ratios are taken from the woff2 tables: JetBrains Mono 600/1000 against
   Courier New 1229/2048. */
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Courier New"), local("Courier");
  size-adjust: 99.98%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
  font-display: swap;
}

/* Same method, applied to the proportional Persian faces: size-adjust is the
   OS/2 sxHeight ratio against Tahoma (2048 upm, sxHeight 1117), and the vertical
   overrides are each face's own hhea over its upm. Vazirmatn 1082/2048 upm,
   hhea 2100/-1100/0; Kapiler 681/1000, hhea 884/-208/8; Rooyin 1000/2000,
   hhea 1400/-200/800. */
@font-face {
  font-family: "Vazirmatn Fallback";
  src: local("Tahoma");
  size-adjust: 96.87%;
  ascent-override: 102.54%;
  descent-override: 53.71%;
  line-gap-override: 0%;
  font-display: swap;
}

@font-face {
  font-family: "Kapiler Fallback";
  src: local("Tahoma");
  size-adjust: 124.86%;
  ascent-override: 88.4%;
  descent-override: 20.8%;
  line-gap-override: 0.8%;
  font-display: swap;
}

@font-face {
  font-family: "Rooyin Fallback";
  src: local("Tahoma");
  size-adjust: 91.67%;
  ascent-override: 70%;
  descent-override: 10%;
  line-gap-override: 40%;
  font-display: swap;
}

html, body, * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none;
}

p, li, blockquote, dd, dt, figcaption, .about-feature-text, .about-quote, .contact-essay-lead, .contact-essay-body, .contact-essay-step-text, .casebook-answer, .casebook-trigger-question, .project-row-description, .project-row-lede, .project-case-text, .why-intro-lead, .why-stat-text, .hero-desc-note, .site-footer-trust-text p, .site-footer-trust-row, .skills-toolkit-desc {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* Hero panel inset: the panel's own layout, radius, shadow, and hover rules
   live in the inlined critical block in index.html. These duplicates keep the
   tightened inset in the canonical stylesheet too, so the note, plaque, and
   the two CTAs sit closer to the panel edges while both rows keep the same
   start and end edges. The note keeps its original inset: its 10em max-width
   plus 12px horizontal padding is what wraps the label to three lines. */
.hero-description {
  padding: clamp(10px, 1.3vw, 14px);
}

.hero-desc-plaque {
  padding-inline-end: clamp(10px, 1.4vw, 14px);
  padding-inline-start: clamp(22px, 2.7vw, 30px);
}

.hero-desc-plaque::before {
  inset-inline-start: clamp(9px, 1.1vw, 12px);
}

.hero-desc-plaque::after {
  inset-inline-start: clamp(17px, 2.1vw, 23px);
}

.hero-visual {
  min-height: 18rem;
}

.projects {
  padding: 0 var(--page-gutter);
  background: var(--surface);
}

.projects-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.projects-heading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.projects-heading-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
  background: var(--surface-alt);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.projects-heading-ornament {
  --ornament-size: clamp(240px, 30vw, 380px);
  position: absolute;
  z-index: 0;
  top: 50%;
  width: var(--ornament-size);
  height: var(--ornament-size);
  pointer-events: none;
  transform: translateY(-50%);
  display: block;
}

.projects-heading-ornament--right {
  right: calc(-1 * var(--ornament-size) * 0.4);
}

.projects-heading-ornament--left {
  left: calc(-1 * var(--ornament-size) * 0.4);
}

/* Cube. The original frame box was twice the
   ornament and the cube sat centred inside it, so an ornament-sized wrapper at
   the plain negative inset keeps the identical centre; 1em equals the old
   50vmin of that box, which was exactly one ornament. */
.ornament-cube {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  font-size: var(--ornament-size);
  color: var(--accent);
  transform-style: preserve-3d;
  transition: color 0.3s;
  animation: ornament-cube-spin 1.6s infinite ease;
}

:root[data-theme="dark"] .ornament-cube {
  color: var(--accent);
}

.projects-heading-ornament--left .ornament-cube {
  color: var(--accent);
}

:root[data-theme="dark"] .projects-heading-ornament--left .ornament-cube {
  color: var(--accent);
}

.ornament-cube i {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, currentColor 12%, #0000);
  box-shadow: inset 0 0 0 0.05em currentColor;
  transform: var(--t);
  transform-origin: var(--o, 50%);
}

.ornament-cube i:nth-child(1) {
  --t: translateZ(-0.5em) rotateY(180deg);
}

.ornament-cube i:nth-child(2) {
  --t: rotateY(90deg) translate(50%);
  --o: 100% 0;
}

.ornament-cube i:nth-child(3) {
  --t: rotateY(270deg) translate(-50%);
  --o: 0;
}

.ornament-cube i:nth-child(4) {
  --t: rotateX(90deg) translateY(-50%);
  --o: top;
}

.ornament-cube i:nth-child(5) {
  --t: rotateX(-90deg) translateY(50%);
  --o: bottom;
}

.ornament-cube i:nth-child(6) {
  --t: translateZ(0.5em);
}

@keyframes ornament-cube-spin {
  0% {
    transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
  }
  50% {
    transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
  }
  to {
    transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
  }
}
@media (max-width: 640px) {
  .projects-heading-band {
    padding-top: clamp(32px, 8vw, 48px);
  }

  .projects-heading-ornament {
    --ornament-size: clamp(180px, 55vw, 280px);
  }

  .projects-heading-ornament--right {
    right: calc(-1 * var(--ornament-size) * 0.45);
  }

  .projects-heading-ornament--left {
    left: calc(-1 * var(--ornament-size) * 0.45);
  }
}

.projects-heading-cmd {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 16px);
  max-width: 100%;
  text-align: center;
}

.projects-heading-prompt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  transform: translateY(2px);
}

.projects-heading-prompt::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
  background: var(--accent-tint);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--accent-glow);
}

.projects-heading-title {
  min-width: 0;
  margin: 0;
}

.projects-heading-tag {
  margin-top: clamp(10px, 1.4vw, 16px);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.projects-inner .projects-filter {
  margin-inline: calc(50% - 50vw);
}

.projects-inner .projects-list {
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
}

.projects-inner .projects-list .project-row-link {
  width: 100%;
}

.js-filter .projects-filter {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: calc(100% + (2 * var(--page-gutter)));
  margin-inline: calc(var(--page-gutter) * -1);
  padding-block: 14px 8px;
  gap: 10px;
  border-top: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  cursor: grab;
  outline: 0;
}

.projects-filter {
  display: none;
}

.js-filter .projects-filter.is-grabbing {
  cursor: grabbing;
}

.js-filter .projects-filter::-webkit-scrollbar {
  display: none;
}

.js-filter .projects-filter-arrow {
  position: sticky;
  z-index: 3;
  flex: 0 0 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.js-filter .projects-filter-arrow--back {
  inset-inline-start: 0;
}

.js-filter .projects-filter-arrow--forward {
  inset-inline-end: 0;
}

.js-filter .projects-filter-arrow-glyph {
  position: absolute;
  top: 0;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--shadow-sm);
  color: var(--accent-strong);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s;
}

.js-filter .projects-filter-arrow--back .projects-filter-arrow-glyph {
  inset-inline-start: 4px;
  animation: filter-arrow-nudge-start 2.4s var(--ease) infinite;
}

.js-filter .projects-filter-arrow--forward .projects-filter-arrow-glyph {
  inset-inline-end: 4px;
  animation: filter-arrow-nudge-end 2.4s var(--ease) infinite;
}

.js-filter .projects-filter-arrow.is-visible .projects-filter-arrow-glyph {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s var(--ease), visibility 0s;
}

.js-filter .projects-filter-arrow-glyph svg {
  display: block;
  width: 1em;
  height: 1em;
  font-size: 0.82rem;
}

.js-filter .projects-filter-arrow--back .projects-filter-arrow-glyph svg {
  transform: scaleX(-1);
}

@keyframes filter-arrow-nudge-end {
  0%, 100% { translate: 0 0; }
  50%      { translate: -4px 0; }
}

@keyframes filter-arrow-nudge-start {
  0%, 100% { translate: 0 0; }
  50%      { translate: 4px 0; }
}

.js-filter .projects-filter .projects-filter-btn:first-of-type {
  margin-inline-start: 6px;
}

.js-filter .projects-filter-btn {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-inline-start: 19px;
  padding-inline-end: 52px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-strong));
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-raised, var(--surface-alt)) 96%, var(--accent-tint)),
      color-mix(in srgb, var(--surface-alt) 92%, var(--accent-tint)));
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  outline: 0;
  white-space: nowrap;
  transition:
    transform 0.25s var(--ease-spring),
    background 0.3s var(--ease),
    border-color 0.3s var(--ease),
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent),
    0 2px 4px color-mix(in srgb, var(--border-strong) 48%, transparent),
    0 9px 20px color-mix(in srgb, var(--accent) 9%, transparent);
}

.js-filter .projects-filter-btn::before {
  border: 1px solid color-mix(in srgb, var(--accent) 13%, transparent);
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.26s var(--ease);
  background:
    linear-gradient(var(--chip-c), var(--chip-c)) top left / 8px 1.5px no-repeat,
    linear-gradient(var(--chip-c), var(--chip-c)) top left / 1.5px 8px no-repeat,
    linear-gradient(var(--chip-c), var(--chip-c)) top right / 8px 1.5px no-repeat,
    linear-gradient(var(--chip-c), var(--chip-c)) top right / 1.5px 8px no-repeat,
    linear-gradient(var(--chip-c), var(--chip-c)) bottom left / 8px 1.5px no-repeat,
    linear-gradient(var(--chip-c), var(--chip-c)) bottom left / 1.5px 8px no-repeat,
    linear-gradient(var(--chip-c), var(--chip-c)) bottom right / 8px 1.5px no-repeat,
    linear-gradient(var(--chip-c), var(--chip-c)) bottom right / 1.5px 8px no-repeat;
}

.js-filter .projects-filter-btn:hover {
  transform: translateY(-3px) scale(1.025);
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border-strong));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-tint-strong) 52%, var(--surface-alt)),
      color-mix(in srgb, var(--surface-alt) 88%, var(--accent-tint)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 86%, transparent),
    0 4px 8px color-mix(in srgb, var(--accent) 14%, transparent),
    0 14px 28px color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--text);
}

.js-filter .projects-filter-btn:focus-visible {
  transform: translateY(-3px) scale(1.025);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-tint-strong) 48%, var(--surface-alt));
  outline: none;
  box-shadow:
    0 0 0 3px var(--surface),
    0 0 0 5px color-mix(in srgb, var(--accent) 68%, transparent),
    0 12px 26px color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
}

.js-filter .projects-filter-btn.is-active {
  border-color: color-mix(in srgb, var(--on-accent) 42%, transparent);
  background: var(--gradient);
  color: var(--on-accent);
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 42%, transparent),
    0 4px 8px color-mix(in srgb, var(--accent-strong) 22%, transparent),
    0 14px 30px color-mix(in srgb, var(--accent) 30%, transparent);
}

.js-filter .projects-filter-btn.is-active::before {
  display: none !important;
  border-color: color-mix(in srgb, var(--on-accent) 34%, transparent);
  opacity: 0.9;
}

.js-filter .projects-filter-btn.is-active:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: transparent;
  background:
    linear-gradient(135deg, var(--chip-c) 0%, color-mix(in srgb, var(--chip-c) 58%, #0a0d18) 100%);
  color: var(--on-accent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 46%, transparent),
    0 4px 0 color-mix(in srgb, var(--chip-c) 52%, #10131f),
    0 0 0 1px color-mix(in srgb, var(--chip-c) 38%, transparent),
    0 16px 32px -8px color-mix(in srgb, var(--chip-c) 68%, transparent);
}

.js-filter .projects-filter-btn {
  opacity: 1;
  transform: none;
}

.js-filter .projects-filter-btn.is-animating {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  animation: btn-pop-in 0.45s var(--ease-spring) forwards;
}

.js-filter .projects-filter-btn:nth-child(1).is-animating { animation-delay: 0.02s; }
.js-filter .projects-filter-btn:nth-child(2).is-animating { animation-delay: 0.06s; }
.js-filter .projects-filter-btn:nth-child(3).is-animating { animation-delay: 0.10s; }
.js-filter .projects-filter-btn:nth-child(4).is-animating { animation-delay: 0.14s; }
.js-filter .projects-filter-btn:nth-child(5).is-animating { animation-delay: 0.18s; }
.js-filter .projects-filter-btn:nth-child(6).is-animating { animation-delay: 0.22s; }
.js-filter .projects-filter-btn:nth-child(7).is-animating { animation-delay: 0.26s; }
.js-filter .projects-filter-btn:nth-child(8).is-animating { animation-delay: 0.30s; }

@keyframes btn-pop-in {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .js-filter .projects-filter-btn {
    padding-inline-start: 14px;
    padding-inline-end: 47px;
    border-radius: 12px;
    font-size: 0.86rem;
  }
}

.projects-modal .projects-filter {
  flex: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 24px;
  flex-wrap: nowrap;
  gap: 0.5rem;
  border-top: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  box-shadow: none;
}

.project-row.is-hidden {
  display: none;
}

.js-projects .projects-list.is-filtered {
  max-height: none;
  overflow: visible;
}

.js-projects .projects-list.is-filtered::after {
  display: none;
}

.projects-list.is-switching .project-row:not(.is-hidden) {
  animation: project-in 0.45s var(--ease) backwards;
}

@keyframes project-in {
  from { opacity: 0; transform: translateY(14px); }
}

/* --- Projects empty state: Swiss editorial spread. ------------------------ */
/* A filter that returns no rows becomes a printed page: a masthead rule, one
   confident sentence, the chosen sector set as the headline, and a single text
   action. Rules and type only. No shadow, no blur, no motion but the hover. */
.projects-empty {
  position: relative;
  display: none;
  margin-inline: 20px;
  margin-block: clamp(24px, 3vw, 36px) 6px;
  overflow: hidden;
  contain: content;
  border-block-start: 2px solid var(--text);
  border-block-end: 1px solid var(--border-strong);
  background: var(--surface);
  isolation: isolate;
}

.projects-empty.is-visible {
  display: block;
}

/* The count set as a poster numeral: ink at three percent, cropped by the page. */
.projects-empty-watermark {
  position: absolute;
  inset-block-end: -0.18em;
  inset-inline-end: -0.02em;
  z-index: 0;
  font-family: var(--font-term);
  font-size: clamp(12rem, 30vw, 24rem);
  font-weight: 700;
  line-height: 0.7;
  letter-spacing: -0.04em;
  color: var(--text);
  opacity: 0.03;
  pointer-events: none;
  user-select: none;
}

.projects-empty-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  padding: 13px clamp(20px, 3vw, 32px);
  border-block-end: 1px solid var(--border-strong);
}

.projects-empty-kicker,
.projects-empty-status {
  flex: none;
  font-family: var(--font-term);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.projects-empty-head-rule {
  flex: 1 1 auto;
  align-self: center;
  height: 0;
  border-block-start: 1px solid var(--border-strong);
}

.projects-empty-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(30px, 4.6vw, 64px) clamp(20px, 3vw, 32px) clamp(28px, 4vw, 52px);
}

.projects-empty-lead {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  min-width: 0;
}

.projects-empty-message {
  margin: 0;
  max-width: 34ch;
  color: var(--text);
  font-family: var(--font-term);
  font-size: clamp(0.72rem, 0.66rem + 0.22vw, 0.86rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.9;
  text-transform: uppercase;
  unicode-bidi: plaintext;
}

.projects-empty-category {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: clamp(2.3rem, 6vw, 4.8rem);
  font-weight: 900;
  line-height: 1.12;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.projects-empty-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding-inline-start: clamp(16px, 2.4vw, 28px);
  border-inline-start: 1px solid var(--border-strong);
}

.projects-empty-action-label {
  font-family: var(--font-term);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.projects-empty-reset {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-block-end: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
  transition:
    background-color 0.18s var(--ease),
    color 0.18s var(--ease);
}

.projects-empty-reset:hover {
  background: var(--text);
  color: var(--surface);
}

.projects-empty-reset:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.projects-empty-reset-meta {
  font-family: var(--font-term);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
}

:root[data-theme="dark"] .projects-empty-head {
  border-block-end-color: var(--border);
}

:root[data-theme="dark"] .projects-empty-action {
  border-inline-start-color: var(--border);
}

:root[data-theme="dark"] .projects-empty-watermark {
  opacity: 0.05;
}

@media (max-width: 790px) {
  .projects-empty-body {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 5vw, 30px);
  }

  .projects-empty-action {
    padding-inline-start: 0;
    padding-block-start: clamp(16px, 4vw, 22px);
    border-inline-start: 0;
    border-block-start: 1px solid var(--border-strong);
  }
}

@media (max-width: 520px) {
  .projects-empty {
    margin-inline: 12px;
  }

  .projects-empty-head {
    padding: 11px 16px;
  }

  .projects-empty-kicker,
  .projects-empty-status {
    font-size: 0.56rem;
    letter-spacing: 0.18em;
  }

  .projects-empty-body {
    padding: 22px 16px 26px;
  }

  .projects-empty-category {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .projects-empty-watermark {
    font-size: 10rem;
  }
}

.projects-list {
  list-style: none;
}

.project-row + .project-row {
  position: relative;
  margin-block-start: clamp(14px, 1.8vw, 24px);
}

.project-row + .project-row::before {
  content: "";
  position: absolute;
  inset-inline: clamp(4px, 1vw, 12px);
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--row-border) 16%,
    var(--row-border) 84%,
    transparent
  );
}

.project-row:first-child .project-row-link {
  padding-top: 0;
}

.project-row.is-first {
  margin-block-start: 0;
}

.project-row.is-first::before {
  display: none;
}

.project-row.is-first .project-row-link {
  padding-top: 0;
}

.project-row:has(+ .projects-empty) .project-row-link {
  padding-bottom: 0;
}

.project-row-link {
  display: grid;
  width: min(90vw, 100%);
  max-width: 100%;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "body";
  align-items: stretch;
  column-gap: 0;
  padding: clamp(48px, 6vw, 76px) 0;
}

.project-row {
  --row-accent: var(--accent);
  --row-accent-strong: var(--accent-strong);
  --row-accent-2: var(--accent-2);
  --row-grad: var(--gradient);
  --row-border: color-mix(in srgb, var(--row-accent) 22%, var(--border));
  --row-border-strong: color-mix(in srgb, var(--row-accent) 38%, var(--border-strong));
  --row-shadow: color-mix(in srgb, var(--row-accent) 28%, transparent);
}

.project-row--cafe {
  --row-accent: #9a5b32;
  --row-accent-strong: #70401f;
  --row-accent-2: #c8874d;
  --row-grad: linear-gradient(135deg, #9a5b32 0%, #70401f 100%);
}

.project-row-body {
  grid-area: body;
  position: relative;
  contain: layout style;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  min-width: 0;
  margin-inline: 0;
  padding: clamp(18px, 2.4vw, 32px);
  border: 1px solid color-mix(in srgb, var(--row-accent) 20%, var(--border));
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--row-accent) 16%, transparent), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--row-accent-2) 12%, transparent), transparent 62%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--row-accent) 11%, var(--surface)) 0%,
      color-mix(in srgb, var(--row-accent) 5%, var(--surface)) 48%,
      color-mix(in srgb, var(--row-accent-2) 9%, var(--surface)) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--row-accent) 14%, transparent),
    0 22px 46px -36px var(--row-shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "head         head"
    "description  side"
    "cta          side"
    "case         case";
  align-items: start;
  align-self: stretch;
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: clamp(26px, 3vw, 40px);
  justify-self: stretch;
}

.project-row-head {
  grid-area: head;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  min-width: 0;
  width: 100%;
}

.project-row-title {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 100%;
  margin-block-start: clamp(24px, 3.4vw, 44px);
  padding: clamp(20px, 3vw, 36px) clamp(14px, 3vw, 40px) clamp(24px, 3.4vw, 44px);
  transition: transform var(--dur-base) var(--ease-spring);
}

.project-row-title-no {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  z-index: -1;
  transform: translate(-50%, -54%);
  font-family: "Kapiler", "Kapiler Fallback", var(--font-mono);
  font-weight: 300;
  font-size: clamp(9rem, 26vw, 24rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--row-accent) 8%, transparent);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 76%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 76%);
  user-select: none;
  pointer-events: none;
  transition: color var(--dur-slow) var(--ease);
}

:root[data-theme="dark"] .project-row-title-no {
  color: color-mix(in srgb, var(--row-accent) 16%, transparent);
}

.project-row-title-folio {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 16px);
  width: 100%;
  margin-bottom: clamp(14px, 2vw, 22px);
}

.project-row-title-folio-type {
  color: color-mix(in srgb, var(--text) 55%, transparent);
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1.3vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.6;
}

.project-row-title-folio-gem {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border: 1px solid color-mix(in srgb, var(--row-accent) 55%, transparent);
  background: color-mix(in srgb, var(--row-accent) 25%, transparent);
  transform: rotate(45deg);
}

.project-row-title-eyebrow {
  margin: 0;
  color: var(--row-accent-strong);
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  font-weight: 700;
  line-height: 1.6;
}

.project-row-title-folio-no {
  color: color-mix(in srgb, var(--text) 45%, transparent);
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1.3vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.6;
}

.project-row-title-text {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  margin-inline: -0.1em;
  padding-inline: 0.1em;
  font-size: clamp(2.4rem, 6.2vw, 5rem);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: transparent;
  background:
    linear-gradient(90deg,
      var(--text) 22%,
      color-mix(in srgb, var(--row-accent-strong) 78%, var(--text)) 50%,
      var(--text) 78%);
  background-size: 220% 100%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .project-row-title-text {
    color: var(--text);
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
}

.project-row-title-baseline {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(120px, 16vw, 220px);
  height: 1px;
  margin-top: clamp(16px, 2.4vw, 26px);
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--row-accent) 55%, transparent) 30%,
    color-mix(in srgb, var(--row-accent-2) 55%, transparent) 70%,
    transparent);
}

.project-row-title-baseline::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--row-accent);
}

.project-row-title:hover,
.project-row-title:focus-visible {
  transform: translateY(-2px);
}

.project-row-title:hover .project-row-title-no,
.project-row-title:focus-visible .project-row-title-no {
  color: color-mix(in srgb, var(--row-accent) 28%, transparent);
}

.project-row-side {
  grid-area: side;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  align-self: stretch;
  gap: clamp(26px, 3vw, 40px);
  width: 100%;
}

.project-row-story {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 32px);
  border: 1px solid color-mix(in srgb, var(--row-accent-strong) 65%, transparent);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--row-accent) 60%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--row-accent-strong) 82%, #050505 18%) 0%, color-mix(in srgb, var(--row-accent-strong) 52%, #0a0a0a 48%) 100%);
  box-shadow:
    0 2px 6px color-mix(in srgb, var(--row-accent) 14%, transparent),
    0 14px 28px var(--row-shadow);
  overflow: visible;
}

.project-row-story::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, #ffffff 16%, transparent), transparent 48%),
    repeating-linear-gradient(135deg, color-mix(in srgb, #ffffff 11%, transparent) 0 1px, transparent 1px 22px);
  opacity: 0.6;
  pointer-events: none;
}

.project-row-lede {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding-inline-start: 16px;
  color: var(--text);
  font-size: clamp(1.06rem, 1.8vw, 1.28rem);
  font-weight: 700;
  line-height: 1.85;
}

.project-row-lede::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.22em;
  bottom: 0.22em;
  width: 3px;
  border-radius: 3px;
  background: var(--row-grad);
}

.project-row-story .project-row-lede {
  color: color-mix(in srgb, #ffffff 90%, var(--row-accent));
}

.project-row-story .project-row-lede::before {
  background: linear-gradient(180deg, color-mix(in srgb, #ffffff 80%, var(--row-accent)), color-mix(in srgb, #ffffff 28%, var(--row-accent)));
}

.project-row-description {
  color: var(--text);
  font-size: clamp(0.98rem, 0.644rem + 0.84vw, 1.4rem);
  line-height: 2.05;
  position: relative;
  z-index: 1;
  max-width: 58ch;
}

.project-description-wrapper {
  --description-rail: clamp(76px, 13vw, 138px);
  position: relative;
  display: grid;
  grid-template-columns: var(--description-rail) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  border: 1px solid var(--row-border);
  border-radius: 4px var(--radius-md) var(--radius-md) 4px;
  background: var(--surface);
  box-shadow:
    0 2px 6px color-mix(in srgb, var(--row-accent-strong) 8%, transparent),
    0 14px 28px var(--row-shadow);
}

.project-description-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: clamp(14px, 2vw, 22px) clamp(8px, 1.4vw, 16px);
  overflow: hidden;
  color: var(--row-accent-strong);
  justify-content: center;
  gap: 14px;
}

.project-description-visual::before {
  content: "";
  position: absolute;
  inset: 12px 8px;
  border: 1px solid color-mix(in srgb, var(--row-accent) 24%, transparent);
  border-radius: 3px 14px 3px 14px;
  pointer-events: none;
}

.project-description-visual::after {
  content: "";
  position: absolute;
  inset-inline-start: -8px;
  inset-block-end: -16px;
  width: min(96px, calc(100% - 8px));
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  background: var(--row-accent);
  opacity: 0.08;
  filter: blur(14px);
  pointer-events: none;
}

.project-description-visual-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(72px, calc(100% - 6px));
  aspect-ratio: 1;
  height: auto;
  color: var(--row-accent);
  filter: drop-shadow(0 8px 8px color-mix(in srgb, var(--row-accent) 18%, transparent));
  opacity: 0.85;
}

.project-description-visual-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.2;
}

.project-description-visual-code {
  position: relative;
  z-index: 1;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--row-accent) 24%, transparent);
  color: var(--row-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.project-description-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px);
  width: 100%;
}

.project-description-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(12px, 1.7vw, 18px);
  color: var(--row-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.project-description-kicker-line {
  width: 42px;
  height: 1px;
  background: var(--row-accent);
  opacity: 0.55;
}

.project-row-case {
  grid-area: case;
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  row-gap: clamp(10px, 1.4vw, 16px);
  column-gap: clamp(28px, 4vw, 56px);
  contain: layout style;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--row-border-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-row-case:hover,
.project-row-case:focus-visible {
  transform: none;
  border-color: var(--border-strong);
  box-shadow: none;
}

.project-case-caption {
  position: absolute;
  top: -10px;
  inset-inline-end: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 8px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--row-accent-strong);
}

.project-case-caption::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--row-accent);
}

.project-case-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: clamp(40px, 5vw, 64px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(14px, 2vw, 24px);
  min-width: 0;
  min-height: 124px;
  padding: clamp(22px, 2.6vw, 30px) clamp(16px, 1.8vw, 22px) clamp(20px, 2.4vw, 28px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--row-accent) 40%, #06090f);
  border-radius: 0;
  background:
    radial-gradient(130% 120% at 6% 0%, color-mix(in srgb, var(--row-accent) 32%, transparent), transparent 58%),
    radial-gradient(100% 110% at 100% 100%, color-mix(in srgb, var(--row-accent-2) 24%, transparent), transparent 62%),
    linear-gradient(158deg, #0e1626 0%, #0a101c 52%, #06090f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -22px 44px -26px color-mix(in srgb, var(--row-accent) 44%, transparent),
    0 20px 38px -28px rgba(0, 0, 0, 0.8);
  
}

.project-case-row:hover {
  border-color: color-mix(in srgb, var(--row-accent) 72%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -22px 48px -24px color-mix(in srgb, var(--row-accent) 56%, transparent),
    0 24px 46px -28px rgba(0, 0, 0, 0.9);
}

.project-case-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--row-accent-2) 68%, #ffffff);
  opacity: 0.34;
  pointer-events: none;
}

.project-case-index,
.project-case-copy {
  z-index: 1;
}

.project-case-index {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: auto;
  height: auto;
  min-height: 68px;
  padding: 3px 8px 5px 0;
  border: 0;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--row-accent-2) 66%, #ffffff);
  font-family: var(--font-mono);
  transform: none;
}

.project-case-index::after {
  content: "↘";
  color: color-mix(in srgb, var(--row-accent-2) 78%, #ffffff);
  font-size: 0.72rem;
  line-height: 1;
}

.project-case-index-kind {
  color: rgba(204, 219, 244, 0.52);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-case-index-number {
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}

.project-case-index:hover,
.project-case-index:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  background: transparent;
  color: color-mix(in srgb, var(--row-accent-2) 54%, #ffffff);
  transform: none;
}

.project-case-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding-top: 1px;
  transition: transform 0.3s var(--ease);
}

.project-case-label {
  color: #f3f7ff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.55;
}

.project-case-text {
  max-width: 42ch;
  color: rgba(207, 220, 243, 0.74);
  font-size: 0.88rem;
  line-height: 1.95;
}

.project-case-copy::after {
  content: "";
  width: 28px;
  height: 1px;
  margin-top: 4px;
  background: color-mix(in srgb, var(--row-accent-2) 72%, #ffffff);
  opacity: 0.66;
}

@media (max-width: 768px) {
  .project-case-row {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 106px;
    padding-block: 20px;
  }
}

@media (max-width: 640px) {
  .project-case-row {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    padding-block: 20px 22px;
  }

  .project-case-index {
    min-height: 0;
    padding: 0 0 8px;
    border-inline-end: 0;
    border-bottom: 1px solid var(--row-border-strong);
  }

  .project-case-copy {
    padding-top: 0;
  }

  .project-case-label,
  .project-case-text {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 400px) {
  .project-case-caption {
    inset-inline-end: 12px;
  }

  .project-case-row {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding-block: 18px 20px;
  }

  .project-case-index {
    min-height: 0;
    padding-bottom: 7px;
  }

  .project-case-label {
    font-size: 0.84rem;
  }

  .project-case-text {
    font-size: 0.82rem;
  }
}

.project-case-copy:hover,
.project-case-copy:focus-visible {
  transform: translateX(-3px);
}

.project-row-foot {
  grid-area: cta;
  z-index: 1;
  min-width: 0;
  container-type: inline-size;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 100%;
  margin-inline: 0;
  gap: clamp(8px, 3cqw, 18px);
  padding: clamp(6px, 1vw, 12px) 0;
}

.project-row-cta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.72em;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 340px;
  min-height: 3.2em;
  padding-block: 0.55em;
  padding-inline: 1.15em 0.9em;
  position: relative;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--row-accent) 30%, transparent);
  border-radius: var(--radius-pill);
  background: var(--row-grad);
  color: var(--on-accent);
  font-size: clamp(1rem, 3.4cqw, 1.18rem);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 6px 16px var(--row-shadow);
  
}

.project-row-cta::after {
  content: "";
  position: absolute;
  inset: -2px 0;
}

.project-row-cta--upcoming {
  opacity: 0.55;
}

.project-row-cta:not(.project-row-cta--telegram) {
  flex-shrink: 4;
}

.project-row-cta--telegram {
  min-width: max-content;
  border-color: color-mix(in srgb, var(--row-accent) 34%, var(--border-strong));
  background: color-mix(in srgb, var(--row-accent) 10%, var(--surface));
  color: var(--row-accent-strong);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 4px 14px color-mix(in srgb, var(--row-shadow) 55%, transparent);
}

.project-row-cta-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-row-cta-arrow {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border: 1px solid var(--on-accent-border);
  border-radius: 50%;
  background: var(--on-accent-surface);
  transition: transform 0.25s var(--ease);
}

.project-row-cta-arrow svg {
  display: block;
  width: 0.9em;
  height: 0.9em;
}

.project-row-cta-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border: 1px solid color-mix(in srgb, var(--row-accent) 26%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--row-accent) 16%, transparent);
  transition: transform 0.25s var(--ease);
}

.project-row-cta-icon {
  display: block;
  width: 1.18em;
  height: 1.18em;
}

.project-row-cta.project-row-cta--telegram:hover,
.project-row-cta.project-row-cta--telegram:focus-visible {
  border-color: color-mix(in srgb, var(--row-accent) 58%, transparent);
  background: color-mix(in srgb, var(--row-accent) 18%, var(--surface));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent),
    0 8px 22px var(--row-shadow);
}

.project-row-cta--telegram:hover .project-row-cta-badge,
.project-row-cta--telegram:focus-visible .project-row-cta-badge {
  border-color: color-mix(in srgb, var(--row-accent) 48%, transparent);
  background: color-mix(in srgb, var(--row-accent) 26%, transparent);
  transform: translateY(-2px);
}

.project-row-cta:hover,
.project-row-cta:focus-visible {
  box-shadow:
    0 8px 22px var(--row-shadow),
    0 0 8px 1px color-mix(in srgb, var(--row-accent) 12%, transparent);
}

.project-row-cta:hover .project-row-cta-arrow,
.project-row-cta:focus-visible .project-row-cta-arrow {
  animation: cta-arrow-wiggle 0.35s ease-in-out infinite;
}

@keyframes cta-arrow-wiggle {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(2px);
  }
  75% {
    transform: translateX(-2px);
  }
}

.project-row-body > [data-description-project] {
  grid-area: description;
  align-self: stretch;
  width: 100%;
}

/* ── وضعیت ساخت ────────────────────────────────────────────
   یک ریل عمودی، دو ایستگاه. هر ردیف یک «نسخه» از پروژه است
   (اختصاصی / وردپرسی) و چهار سلول، چهار مرحله‌ی ساخت را
   نشان می‌دهند: صف ساخت ← در حال ساخت ← آستانه تکمیل ← آماده.
   تنها حرکتِ بی‌وقفه، نبضِ گره‌ی «در حال ساخت» است.            */
.project-row-side .project-row-build {
  --build-pad: clamp(12px, 1.5vw, 18px);
  --build-node: 11px;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: clamp(9px, 1.1vw, 13px);
  cursor: default;
  padding: var(--build-pad);
  border: 1px solid color-mix(in srgb, var(--row-accent) 20%, var(--border));
  border-radius: var(--radius-md);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--row-accent) 7%, var(--surface)) 0%,
    color-mix(in srgb, var(--row-accent) 3%, var(--surface)) 100%
  );
  transition: border-color var(--dur-base) var(--ease);
}

.project-row-side .project-row-build .project-build-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-muted);
}

/* کلیدِ رنگِ گره‌ها — همان نشانه، بالای ریل */
.project-row-side .project-row-build .project-build-legend {
  flex: none;
  width: var(--build-node);
  height: var(--build-node);
  border: 2px solid var(--row-accent-strong);
  border-radius: var(--radius-pill);
}

.project-row-side .project-row-build .project-build-tracks {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(9px, 1.1vw, 13px);
}

/* ریلِ اتصال دو ایستگاه */
.project-row-side .project-row-build .project-build-tracks::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--build-node) / 2);
  inset-inline-start: calc(var(--build-node) / 2 - 1px);
  width: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--row-accent) 44%, transparent),
    color-mix(in srgb, var(--row-accent) 16%, transparent)
  );
}

.project-row-side .project-row-build .project-build-strand {
  display: grid;
  grid-template-columns: var(--build-node) minmax(0, 1fr);
  grid-template-areas:
    "node head"
    "node meter";
  align-items: center;
  column-gap: clamp(10px, 1.2vw, 14px);
  row-gap: 7px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.project-row-side .project-row-build .project-build-node {
  grid-area: node;
  align-self: center;
  width: var(--build-node);
  height: var(--build-node);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--row-accent) 4%, var(--surface));
}

.project-row-side .project-row-build .project-build-strand[data-build-state="queued"] .project-build-node {
  border-style: dashed;
}

.project-row-side .project-row-build .project-build-strand[data-build-state="building"] .project-build-node {
  border-color: var(--row-accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--row-accent) 24%, transparent);
}

.project-row-side .project-row-build .project-build-strand[data-build-state="nearly-complete"] .project-build-node {
  border-color: var(--row-accent);
  background: color-mix(in srgb, var(--row-accent) 42%, var(--surface));
}

.project-row-side .project-row-build .project-build-strand[data-build-state="ready"] .project-build-node {
  border-color: var(--row-accent-strong);
  background: var(--row-grad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--row-accent) 16%, transparent);
}

.project-row-side .project-row-build .project-build-head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.project-row-side .project-row-build .project-build-system {
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.project-row-side .project-row-build .project-build-state {
  flex: none;
  color: var(--row-accent-strong);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}

.project-row-side .project-row-build .project-build-strand[data-build-state="queued"] .project-build-state {
  color: var(--text-faint);
  font-weight: 600;
}

.project-row-side .project-row-build .project-build-meter {
  grid-area: meter;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.project-row-side .project-row-build .project-build-seg {
  min-width: 0;
  height: 6px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--row-accent) 14%, var(--border));
}

.project-row-side .project-row-build .project-build-seg.is-on {
  background: var(--row-grad);
}

/* مرحله‌ای که همین حالا روی آن ایستاده‌ایم */
.project-row-side .project-row-build .project-build-seg.is-current {
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--row-accent) 80%, transparent);
}

.project-row-side .project-row-build .project-build-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding-block-start: clamp(8px, 1vw, 11px);
  border-block-start: 1px solid color-mix(in srgb, var(--row-accent) 16%, var(--border));
}

.project-row-side .project-row-build .project-build-summary-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}

.project-row-side .project-row-build .project-build-summary-value {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.project-row-side .project-row-build .project-build-summary-value i {
  padding-inline: 1px;
  font-style: normal;
  opacity: 0.5;
}

.project-row-side .project-row-build .project-build-summary-value b {
  color: var(--row-accent-strong);
  font-size: 1.05rem;
  font-weight: 800;
}

.js-projects .projects-list {
  position: relative;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s var(--ease);
}

.js-projects .projects-list::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: clamp(80px, 10vw, 140px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface) 82%);
}

.js-projects .projects-list + .projects-expand {
  position: relative;
  z-index: 3;
}

.projects-expand {
  display: none;
}

.js-projects .projects-expand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-inline: auto;
  margin-top: clamp(20px, 3vw, 34px);
  padding: 6px 14px;
  border: none;
  background: none;
  color: var(--text);
  font-family: var(--font-sans);
  cursor: pointer;
}

.projects-expand-arrow {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 1.15rem;
  color: var(--accent-strong);
  animation: expand-arrow-bob 2.4s var(--ease) infinite;
  transition: color 0.25s var(--ease);
}

.projects-expand-arrow svg {
  display: block;
  width: 1em;
  height: 1em;
  transform: rotate(-90deg);
}

.projects-expand-label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.25s var(--ease);
}

.projects-expand:hover .projects-expand-arrow,
.projects-expand:focus-visible .projects-expand-arrow {
  color: var(--accent);
}

.projects-expand:hover .projects-expand-label,
.projects-expand:focus-visible .projects-expand-label {
  color: var(--accent-strong);
}

@keyframes expand-arrow-bob {
  0%,
  100% { transform: translateY(-3px); }
  50%   { transform: translateY(3px); }
}

.projects-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 40px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}

.projects-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}

.projects-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 26, 36, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@supports not (backdrop-filter: blur(1px)) {
  .projects-modal-backdrop {
    background: rgba(23, 26, 36, 0.8);
    background-color: rgba(23, 26, 36, 0.8);
  }
}

.projects-modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 1100px);
  height: min(100%, 860px);
  max-width: 100%;
  max-height: calc(100dvh - 24px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(23, 26, 36, 0.04),
    0 8px 24px rgba(23, 26, 36, 0.08),
    0 24px 56px rgba(23, 26, 36, 0.12);
  overflow: hidden;
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}

.projects-modal.is-open .projects-modal-panel {
  transform: none;
  opacity: 1;
}

.projects-modal-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

.projects-modal-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-strong);
}

.projects-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  outline: 0;
  transition: color 0.22s var(--ease),
              background 0.22s var(--ease),
              border-color 0.22s var(--ease),
              transform 0.28s var(--ease),
              box-shadow 0.22s var(--ease);
}

.projects-modal-close-icon {
  width: 14px;
  height: 14px;
  pointer-events: none;
  transition: transform 0.28s var(--ease);
}

.projects-modal-close:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--accent-tint);
  transform: scale(1.1);
}

.projects-modal-close:hover .projects-modal-close-icon {
  transform: rotate(90deg);
}

.projects-modal-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--accent-tint);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

.projects-modal-close:active {
  transform: scale(0.92);
  transition-duration: 0.1s;
}

.projects-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 2.5vw, 32px) clamp(14px, 2vw, 28px);
  direction: ltr;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-strong) transparent;
}

.projects-modal-body .projects-modal-list {
  direction: rtl;
}

.projects-modal-body::-webkit-scrollbar {
  width: 10px;
}

.projects-modal-body::-webkit-scrollbar-button {
  display: none;
}

.projects-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.projects-modal-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--radius-pill);

  background: linear-gradient(
    135deg,
    var(--modal-sb-from, rgba(59, 91, 253, 0.45)),
    var(--modal-sb-to, rgba(44, 63, 214, 0.45))
  );
  background-clip: padding-box;
  transition: background 0.08s linear;
}

.projects-modal-body::-webkit-scrollbar-thumb:hover,
.projects-modal-body::-webkit-scrollbar-thumb:active {
  background: linear-gradient(
    135deg,
    var(--modal-sb-from-hover, var(--modal-sb-from, #3b5bfd)),
    var(--modal-sb-to-hover, var(--modal-sb-to, #2c3fd6))
  );
  background-clip: padding-box;
}

.projects-modal-list {
  list-style: none;
  max-width: var(--container-max);
  margin-inline: auto;
}

.projects-modal .project-row {
  opacity: 1;
  transform: none;
  transition: none;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .project-row-link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "body";
    gap: 20px 24px;
  }

  .project-row-body {
    width: 100%;
    align-self: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head         head"
      "description  side"
      "cta          cta"
      "case         case";
    gap: clamp(28px, 4vw, 56px) clamp(20px, 2.8vw, 34px);
    align-items: start;
  }

  .project-row-side {
    gap: clamp(28px, 4vw, 56px);
  }

  .project-row-description {
    font-size: clamp(1rem, 0.42rem + 1.46vw, 1.42rem);
  }
}

@media (max-width: 640px) {
  .js-filter .projects-filter-btn {
    flex: 0 0 auto;
    font-size: 0.85rem;
  }

  .project-row-link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "body";
    align-items: start;
    gap: 12px;
    padding-block: 28px;
  }

  .project-row-title {
    width: 100%;
    margin-block-start: 22px;
    padding: 18px 8px 22px;
  }

  .project-row-title-no {
    font-size: 7.5rem;
  }

  .project-row-title-folio {
    gap: 8px;
    margin-bottom: 12px;
  }

  .project-row-title-folio-type,
  .project-row-title-folio-no {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
  }

  .project-row-title-text {
    font-size: clamp(1.9rem, 9vw, 2.8rem);
    line-height: 1.3;
  }

  .project-row-title-baseline {
    width: 96px;
    margin-top: 14px;
  }

  .project-row-body {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "side"
      "description"
      "cta"
      "case";
    column-gap: 0;
    row-gap: clamp(20px, 2.8vw, 34px);
  }

  .project-row-case {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-row-side {
    gap: clamp(20px, 2.8vw, 34px);
  }

  .project-row-description {
    font-size: clamp(0.98rem, 0.644rem + 0.84vw, 1.4rem);
  }

  .project-row-foot {
    align-items: stretch;
    gap: 10px;
    padding-top: 14px;
  }

.project-row-cta {
  margin-inline: 0;
  min-height: 44px;
  gap: 6px;
  padding-block: 8px;
  padding-inline: 12px 8px;
  font-size: 0.75rem;
}

.project-row-cta-arrow,
.project-row-cta-badge {
  width: 26px;
  height: 26px;
}

.project-row-cta-icon {
  width: 14px;
  height: 14px;
}
}

@media (max-width: 400px) {
  .projects {
    padding-inline: var(--page-gutter);
  }

  .projects-modal {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .projects-modal-bar {
    padding-inline: 14px;
  }

  .projects-modal-body {
    padding-inline: 10px;
  }

  .project-row-link {
    padding-block: 24px;
  }

  .project-case-row {
    gap: 12px;
    padding: 18px 16px;
  }

  .project-row-cta {
    gap: 5px;
    padding-inline: 10px 6px;
    font-size: 0.75rem;
  }

  .project-row-cta-arrow,
  .project-row-cta-badge {
    width: 22px;
    height: 22px;
  }

  .project-row-cta-icon {
    width: 12px;
    height: 12px;
  }

  .project-row-side .project-row-build {
    --build-node: 10px;
    padding: 10px 12px;
  }

  .project-row-side .project-row-build .project-build-system {
    font-size: 0.8rem;
  }

  .project-row-side .project-row-build .project-build-state {
    font-size: 0.82rem;
  }

  .project-row-side .project-row-build .project-build-head {
    gap: 8px;
  }

  .project-description-wrapper {
    --description-rail: 68px;
  }

  .project-description-content {
    padding: 16px;
  }

  .project-description-kicker {
    margin-bottom: 10px;
  }
}

.js-filter .projects-filter-btn { --chip-c: var(--accent); --chip-c-strong: var(--accent-strong); }
.js-filter .projects-filter-btn[data-category="همه"] { --chip-c: #3b5bfd; --chip-c-strong: #2c3fd6; }
.js-filter .projects-filter-btn[data-category="برند و معرفی"] { --chip-c: #9a5b32; --chip-c-strong: #70401f; }
.js-filter .projects-filter-btn[data-category="فروشگاهی"] { --chip-c: #8558d6; --chip-c-strong: #6031a9; }
.js-filter .projects-filter-btn[data-category="شخصی"] { --chip-c: #3978c8; --chip-c-strong: #24549d; }
.js-filter .projects-filter-btn[data-category="لندینگ پیج"] { --chip-c: #0e8f7f; --chip-c-strong: #0a6b5f; }
.js-filter .projects-filter-btn[data-category="شرکتی"] { --chip-c: #5c6bc0; --chip-c-strong: #3f4d9e; }
.js-filter .projects-filter-btn[data-category="خدماتی"] { --chip-c: #3d9a4a; --chip-c-strong: #2f7a3a; }
.js-filter .projects-filter-btn[data-category="رسانه‌ای"] { --chip-c: #d9537a; --chip-c-strong: #b43a5f; }

.js-filter .projects-filter-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  height: 46px;
  margin: 0;
  padding-inline: 15px 42px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--chip-c) 38%, var(--border-strong));
  border-radius: 13px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 86%, var(--chip-c) 7%) 0%,
      color-mix(in srgb, var(--surface-alt) 90%, var(--chip-c) 4%) 100%);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  outline: 0;
  appearance: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent),
    0 1px 2px color-mix(in srgb, var(--border-strong) 42%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--chip-c) 40%, transparent);
  transition:
    transform 0.26s var(--ease-spring),
    background 0.26s var(--ease),
    border-color 0.26s var(--ease),
    color 0.26s var(--ease),
    box-shadow 0.26s var(--ease);
}

.js-filter .projects-filter-btn-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--chip-c) 34%, var(--border-strong));
  border-radius: 8px;
  background: color-mix(in srgb, var(--chip-c) 10%, var(--surface));
  color: var(--chip-c-strong);
  transition:
    background 0.26s var(--ease),
    color 0.26s var(--ease),
    border-color 0.26s var(--ease),
    transform 0.26s var(--ease-spring);
}

.js-filter .projects-filter-btn-icon svg {
  display: block;
  width: 15px;
  height: 15px;
}

.js-filter .projects-filter-btn-count {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding-inline: 6px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--chip-c) 28%, var(--border-strong));
  border-radius: 0;
  background: color-mix(in srgb, var(--chip-c) 7%, var(--surface));
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--chip-c-strong);
  transition:
    background 0.26s var(--ease),
    color 0.26s var(--ease),
    border-color 0.26s var(--ease);
}

.js-filter .projects-filter-btn-count.is-zero {
  opacity: 0.42;
}

.js-filter .projects-filter-btn-led {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  transition: background 0.26s var(--ease), box-shadow 0.26s var(--ease);
}

.js-filter .projects-filter-btn-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.js-filter .projects-filter-btn-shine::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -80%;
  width: 46%;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent, color-mix(in srgb, #ffffff 55%, transparent), transparent);
  opacity: 0;
  transform: skewX(-18deg);
  transition: opacity 0.16s var(--ease), inset-inline-start 0.5s var(--ease-out);
}

.js-filter .projects-filter-btn::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

.js-filter .projects-filter-btn:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--chip-c) 38%, var(--border-strong));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 86%, var(--chip-c) 7%) 0%,
      color-mix(in srgb, var(--surface-alt) 90%, var(--chip-c) 4%) 100%);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent),
    0 2px 4px color-mix(in srgb, var(--border-strong) 40%, transparent),
    0 14px 26px -10px color-mix(in srgb, var(--chip-c) 55%, transparent);
}

.js-filter .projects-filter-btn:hover::before {
  display: none !important;
  opacity: 0.55;
}
.js-filter .projects-filter-btn:hover .projects-filter-btn-shine::before { inset-inline-start: 130%; opacity: 1; }
.js-filter .projects-filter-btn:hover .projects-filter-btn-icon { transform: translateY(-1px) scale(1.06); }

.js-filter .projects-filter-btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

.js-filter .projects-filter-btn:active .projects-filter-btn-shine::before { opacity: 0; }

.js-filter .projects-filter-btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--chip-c);
  color: var(--chip-c-strong);
  outline: 2px solid var(--chip-c);
  outline-offset: 2px;
}

.js-filter .projects-filter-btn:focus-visible::before {
  display: none !important;
  opacity: 0.7;
}

.js-filter .projects-filter-btn.is-active {
  transform: translateY(-2px);
  border-color: transparent;
  background:
    linear-gradient(135deg, var(--chip-c) 0%, color-mix(in srgb, var(--chip-c) 58%, #0a0d18) 100%);
  color: var(--on-accent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 34%, transparent),
    0 3px 0 color-mix(in srgb, var(--chip-c) 46%, #10131f),
    0 0 0 1px color-mix(in srgb, var(--chip-c) 30%, transparent),
    0 12px 26px -8px color-mix(in srgb, var(--chip-c) 60%, transparent);
}

.js-filter .projects-filter-btn.is-active::before {
  display: none !important;
  opacity: 1;
  background:
    linear-gradient(var(--on-accent), var(--on-accent)) top left / 8px 1.5px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) top left / 1.5px 8px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) top right / 8px 1.5px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) top right / 1.5px 8px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) bottom left / 8px 1.5px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) bottom left / 1.5px 8px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) bottom right / 8px 1.5px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) bottom right / 1.5px 8px no-repeat;
}

.js-filter .projects-filter-btn.is-active .projects-filter-btn-icon {
  border-color: transparent;
  background: var(--on-accent);
  color: var(--chip-c);
  box-shadow: 0 2px 8px color-mix(in srgb, #05060c 22%, transparent);
}

.js-filter .projects-filter-btn.is-active .projects-filter-btn-count {
  border-right-color: color-mix(in srgb, var(--chip-c) 24%, transparent);
  background: var(--on-accent);
  color: var(--chip-c);
}

.js-filter .projects-filter-btn.is-active .projects-filter-btn-count.is-zero {
  opacity: 0.72;
}

.js-filter .projects-filter-btn.is-active .projects-filter-btn-led {
  background: var(--on-accent);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--on-accent) 62%, transparent);
  animation: chip-led-pulse 1.9s ease-in-out infinite;
}

.js-filter .projects-filter-btn.is-animating {
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  animation: chip-pop-in 0.5s var(--ease-spring) forwards;
}

.js-filter .projects-filter-btn.is-active.is-animating {
  animation-name: chip-pop-active-in;
}

@keyframes chip-pop-in {
  0%   { opacity: 0; transform: translateY(12px) scale(0.94); }
  65%  { opacity: 1; transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes chip-pop-active-in {
  0%   { opacity: 0; transform: translateY(12px) scale(0.94); }
  65%  { opacity: 1; transform: translateY(-4px) scale(1.03); }
  100% { opacity: 1; transform: translateY(-2px) scale(1); }
}

@keyframes chip-led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

@media (max-width: 900px) {
  .js-filter .projects-filter {
    gap: 8px;
  }

  .js-filter .projects-filter-btn {
    height: 44px;
    gap: 8px;
    padding-inline: 13px 40px;
    font-size: 0.85rem;
  }
}

@media (max-width: 640px) {
  .js-filter .projects-filter-btn {
    height: 42px;
    gap: 7px;
    padding-block: 0;
    padding-inline: 12px 38px;
    font-size: 0.83rem;
  }

  .js-filter .projects-filter-btn-icon {
    width: 24px;
    height: 24px;
  }

  .js-filter .projects-filter-btn-icon svg {
    width: 14px;
    height: 14px;
  }
}

:root[data-theme="dark"] .js-filter .projects-filter-btn { --chip-c: #7592ff; --chip-c-strong: #a6b7ff; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="همه"] { --chip-c: #7592ff; --chip-c-strong: #a6b7ff; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="برند و معرفی"] { --chip-c: #b97a4b; --chip-c-strong: #e2ae7b; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="فروشگاهی"] { --chip-c: #9b6fe0; --chip-c-strong: #c4a6ff; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="شخصی"] { --chip-c: #5f9ae8; --chip-c-strong: #9bc7ff; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="لندینگ پیج"] { --chip-c: #2fb3a3; --chip-c-strong: #6fd6c9; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="شرکتی"] { --chip-c: #7a88dd; --chip-c-strong: #aab6ff; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="خدماتی"] { --chip-c: #55b563; --chip-c-strong: #8fdd99; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="رسانه‌ای"] { --chip-c: #e56a90; --chip-c-strong: #f39bb4; }

:root[data-theme="dark"] .js-filter .projects-filter-btn .projects-filter-btn-icon { color: #cfe0ff !important; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="برند و معرفی"] .projects-filter-btn-icon { color: #ffb36b !important; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="فروشگاهی"] .projects-filter-btn-icon { color: #e0c3ff !important; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="شخصی"] .projects-filter-btn-icon { color: #9ed0ff !important; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="لندینگ پیج"] .projects-filter-btn-icon { color: #7fe8dc !important; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="شرکتی"] .projects-filter-btn-icon { color: #c3cfff !important; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="خدماتی"] .projects-filter-btn-icon { color: #9ae6a8 !important; }
:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="رسانه‌ای"] .projects-filter-btn-icon { color: #ff9fbe !important; }

:root[data-theme="dark"] .js-filter .projects-filter-btn .projects-filter-btn-icon svg {
  stroke-width: 2;
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 7px color-mix(in srgb, var(--chip-c, currentColor) 45%, transparent));
}

:root[data-theme="dark"] .js-filter .projects-filter-btn[data-category="برند و معرفی"] .projects-filter-btn-icon svg { filter: drop-shadow(0 0 3px #ffb36b) drop-shadow(0 0 8px rgba(255, 140, 60, 0.55)); }

:root[data-theme="dark"] .js-filter .projects-filter-btn:not(.is-active) .projects-filter-btn-icon {
  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--chip-c) 45%, transparent);
}

:root[data-theme="dark"] .js-filter .projects-filter-btn:not(.is-active) .projects-filter-btn-count {
  color: #e7eeff !important;
}

:root[data-theme="dark"] .js-filter .projects-filter-btn:not(.is-active) .projects-filter-btn-count.is-zero {
  color: #b9c7e9 !important;
  opacity: 0.9;
}

:root[data-theme="dark"] .js-filter .projects-filter-btn.is-active .projects-filter-btn-count.is-zero {
  opacity: 0.8;
}
.section-hatch {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: clamp(120px, 14vw, 220px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.section-hatch::before {
  content: "";
  position: absolute;
  inset: -40px;
  background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 70%, transparent) 0 6px, transparent 6px 32px);
}

.skills {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.skills::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(59, 91, 253, 0.055) 1px, transparent 0);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 42%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 42%, transparent 100%);
  pointer-events: none;
}

.skills::after {
  content: "";
  position: absolute;
  top: -180px;
  inset-inline-start: -160px;
  width: min(520px, 100vw);
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 91, 253, 0.08), transparent 68%);
  pointer-events: none;
}

.skills-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
}

.skills-heading-slab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  background: var(--surface-alt);
  content-visibility: auto;
  contain-intrinsic-size: auto 450px;
}

.skills-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.skills-heading-band,
.contact-heading-band,
.why-heading-band {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.skills-heading-cmd,
.contact-heading-cmd,
.why-heading-cmd {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 16px);
  max-width: 100%;
  padding-inline: clamp(14px, 2vw, 28px);
  background: var(--surface-alt);
  text-align: center;
}

.skills-heading-cmd::before,
.contact-heading-cmd::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: min(72%, 320px);
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-strong), var(--accent), transparent);
  box-shadow: 0 0 14px var(--accent-glow);
  pointer-events: none;
}

.skills-heading-prompt {
  position: relative;
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.skills-heading-prompt,
.contact-heading-prompt,
.why-heading-prompt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  transform: translateY(2px);
}

.skills-heading-prompt::before,
.contact-heading-prompt::before,
.why-heading-prompt::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
  background: var(--accent-tint);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--accent-glow);
}

.skills-heading-cmd:hover .skills-heading-prompt {
  color: var(--accent);
  transform: translate(-3px, 0);
}

.skills-heading-prompt::after {
  content: "";
  position: absolute;
  inset-inline-start: 17px;
  bottom: -9px;
  width: 20px;
  height: 1px;
  background: var(--accent);
  opacity: 0.55;
  pointer-events: none;
}

.skills-heading-title,
.why-heading-title {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: clamp(2.3rem, 5.4vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
}

.skills-heading-caret,
.why-heading-caret {
  display: inline-block;
  flex: 0 0 auto;
  width: 3px;
  height: 1.05em;
  border-radius: 1px;
  background: var(--gradient-hero);
  box-shadow: 0 0 12px var(--accent-glow-strong);
  animation: cursor-blink 1.1s steps(2, start) infinite;
}

.skills-heading-tag,
.contact-heading-tag,
.why-heading-tag {
  margin-top: clamp(12px, 1.6vw, 18px);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.skills-accent {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.skills-layout {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.skills-toolkit-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1px;
  background-color: var(--border-strong);
  border: 1px solid var(--border-strong);
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.skills-toolkit-item {
  --card-accent: var(--accent);
  --card-accent-strong: var(--accent-strong);
  --card-ink-strong: var(--text);
  --body-pad: clamp(10px, 1.2vw, 13px);
  --card-top: color-mix(in srgb, var(--card-accent) 6%, var(--surface));
  --card-bottom: color-mix(in srgb, var(--card-accent) 2%, var(--surface));
  --card-glow: color-mix(in srgb, var(--card-accent) 20%, transparent);
  --card-edge: color-mix(in srgb, var(--card-accent) 24%, var(--border-strong));
  --card-inner-bg: color-mix(in srgb, var(--card-accent) 13%, var(--surface));
  --card-inner-border: color-mix(in srgb, var(--card-accent) 44%, var(--border-strong));
  --card-chip-bg: color-mix(in srgb, var(--card-accent) 12%, var(--surface));
  --card-chip-border: color-mix(in srgb, var(--card-accent) 38%, var(--border-strong));
  --card-inner-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 color-mix(in srgb, var(--card-accent) 8%, transparent),
    0 8px 18px -14px color-mix(in srgb, var(--card-accent) 38%, transparent);
  --card-chip-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(15, 23, 42, 0.06);
  --card-hover-shadow:
    0 26px 48px -30px color-mix(in srgb, var(--card-accent) 55%, transparent),
    0 10px 22px -16px rgba(15, 23, 42, 0.18);
  position: relative;
  container-type: inline-size;
  contain: layout paint;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  height: auto;
  align-self: stretch;
  overflow: hidden;
  padding: clamp(16px, 2vw, 24px);
  background-color: var(--surface);
  background-image:
    radial-gradient(120% 90% at 50% -12%, var(--card-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--card-top) 0%, var(--surface) 52%, var(--card-bottom) 100%);
}

.skills-toolkit-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgb(from var(--card-accent) r g b / 0) 18.75%, var(--card-accent) 0 31.25%, rgb(from var(--card-accent) r g b / 0) 0),
    repeating-linear-gradient(45deg, var(--card-accent) -6.25% 6.25%, var(--surface) 0 18.75%);
  background-size: 4.5em 4.5em;
  background-position: 0 0;
  opacity: 0.08;
  pointer-events: none;
}

:root[data-theme="dark"] .skills-toolkit-item::before {
  opacity: 0.06;
}

.skills-toolkit-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.6vw, 20px);
  min-width: 0;
  margin-block-end: clamp(8px, 1vw, 12px);
}

.skills-toolkit-top {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
}

.skills-toolkit-icon {
  display: block;
  flex: 0 0 auto;
  width: clamp(72px, 10vw, 110px);
  height: clamp(72px, 10vw, 110px);
  transition: transform var(--dur-base) var(--ease-spring), filter var(--dur-base) var(--ease);
}

.skills-toolkit-title {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.skills-toolkit-name {
  display: block;
  width: 100%;
  max-width: 100%;
  color: var(--card-accent-strong);
  font-family: "Kapiler", "Kapiler Fallback", var(--font-sans);
  font-size: clamp(2.6rem, 14cqw, 6.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-wrap: anywhere;
  overflow: hidden;
  text-overflow: clip;
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .skills-toolkit-name {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--card-accent-strong) 82%, #ffffff) 0%, var(--card-accent-strong) 44%, color-mix(in srgb, var(--card-accent) 72%, var(--card-accent-strong)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.skills-toolkit-item--js .skills-toolkit-name,
.skills-toolkit-item--web .skills-toolkit-name,
.skills-toolkit-item--tailwind .skills-toolkit-name,
.skills-toolkit-item--vibe .skills-toolkit-name,
.skills-toolkit-item--agent .skills-toolkit-name {
  font-size: clamp(1.8rem, 10.5cqw, 4.5rem);
}

.skills-toolkit-body {
  position: relative;
  z-index: 1;
  contain: layout style;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 0;
  margin-block-start: clamp(9px, 1.2vw, 14px);
  border-block-start: 1px solid color-mix(in srgb, var(--card-accent) 26%, var(--border));
}

.skills-toolkit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  min-width: 0;
  padding-block: var(--body-pad);
  border-block-end: 1px solid color-mix(in srgb, var(--card-accent) 13%, var(--border));
}

.skills-toolkit-category {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--card-accent-strong);
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  line-height: 1.3;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}


.skills-toolkit-tag {
  display: inline-block;
  flex: 0 0 auto;
  padding-block: 3px;
  padding-inline: 10px;
  border: 1px solid var(--card-chip-border);
  border-radius: 999px;
  background: var(--card-chip-bg);
  box-shadow: var(--card-chip-shadow);
  color: var(--card-ink-strong);
  font-family: var(--font-term);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  transition:
    color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease);
}

.skills-toolkit-desc {
  position: relative;
  isolation: isolate;
  margin-block: var(--body-pad);
  padding-block: clamp(9px, 1vw, 12px);
  padding-inline: clamp(14px, 1.7vw, 18px) clamp(13px, 1.5vw, 17px);
  border: 1px solid var(--card-inner-border);
  border-radius: calc(var(--radius-md) + 2px);
  background: var(--card-inner-bg);
  box-shadow: var(--card-inner-shadow);
  color: var(--card-ink-strong);
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: clamp(0.9rem, 0.86rem + 0.16vw, 1rem);
  font-weight: 400;
  line-height: 2.05;
  text-align: start;
  text-wrap: pretty;
  
}


.skills-toolkit-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(5px, 1.3cqw, 10px);
  max-width: 100%;
  margin: 0;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.skills-toolkit-point {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 0.9vw, 11px);
  min-width: 0;
  overflow: hidden;
  padding: clamp(8px, 0.9vw, 10px) clamp(8px, 1.3cqw, 14px);
  border: 1px solid var(--card-inner-border);
  border-radius: 999px;
  background: var(--card-inner-bg);
  box-shadow: var(--card-inner-shadow);
}




.skills-toolkit-point-label {
  position: relative;
  z-index: 1;
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 5.2em;
  color: var(--card-ink-strong);
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: clamp(0.75rem, 3.1cqw, 0.88rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-base) var(--ease);
}

.point-text-tablet,
.point-text-desktop {
  display: none;
}

@media (min-width: 681px) and (max-width: 1024px) {
  .point-text-mobile,
  .point-text-desktop {
    display: none;
  }

  .point-text-tablet {
    display: inline;
  }
}

@media (min-width: 1025px) {
  .point-text-mobile,
  .point-text-tablet {
    display: none;
  }

  .point-text-desktop {
    display: inline;
  }

  .skills-toolkit-point-label {
    font-size: 0.8rem;
  }
}





.skills-toolkit-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-block-start: clamp(11px, 1.3vw, 15px);
}

.skills-toolkit-code {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-block: 4px;
  padding-inline: 15px 9px;
  border: 1px solid var(--card-chip-border);
  border-radius: 8px;
  background: var(--card-chip-bg);
  box-shadow: var(--card-chip-shadow);
  color: var(--card-ink-strong);
  font-family: var(--font-term);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
  
}


:root:not([data-theme="dark"]) .skills-toolkit-code .code-keyword { color: #1d4ed8; }
:root:not([data-theme="dark"]) .skills-toolkit-code .code-string { color: #9a3412; }
:root:not([data-theme="dark"]) .skills-toolkit-code .code-comment { color: #2f6b34; }
:root:not([data-theme="dark"]) .skills-toolkit-code .code-type { color: #0d6e69; }

.skills-toolkit-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding-block: 4px;
  padding-inline: 10px 11px;
  border: 1px solid var(--card-chip-border);
  border-radius: 999px;
  background: var(--card-chip-bg);
  box-shadow: var(--card-chip-shadow);
  color: var(--card-accent-strong);
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.45;
  white-space: nowrap;
  
}

.skills-toolkit-status-dot {
  position: relative;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  --dot-c: var(--card-accent);
  background: var(--card-accent);
  box-shadow: none;
}

.skills-toolkit-item--html     { order: 1; --card-accent: #E44D26; --card-accent-strong: #B23A1B; }
.skills-toolkit-item--css      { order: 2; --card-accent: #1172B8; --card-accent-strong: #0E5A91; }
.skills-toolkit-item--tailwind { order: 3; --card-accent: #6366F1; --card-accent-strong: #4338CA; }
.skills-toolkit-item--js       { order: 4; --card-accent: #F59E0B; --card-accent-strong: #B45309; }
.skills-toolkit-item--react    { order: 5; --card-accent: #FF512F; --card-accent-strong: #D93820; }
.skills-toolkit-item--vibe     { order: 6; --card-accent: #00B8D9; --card-accent-strong: #087EA4; }
.skills-toolkit-item--agent    { order: 7; --card-accent: #ECA944; --card-accent-strong: #A85A13; }
.skills-toolkit-item--web      { order: 8; --card-accent: #2563EB; --card-accent-strong: #1D4ED8; }

















@media (max-width: 680px) {
  .skills-toolkit-list {
    grid-template-columns: 1fr;
  }

  .skills-toolkit-item {
    padding: clamp(20px, 4.5vw, 26px);
  }

  .skills-toolkit-head {
    gap: clamp(10px, 2vw, 14px);
  }

  .skills-toolkit-icon {
    width: clamp(42px, 8vw, 54px);
    height: clamp(42px, 8vw, 54px);
  }

  .skills-toolkit-name {
    font-size: clamp(1.5rem, 9cqw, 3rem);
  }

  .skills-toolkit-meta {
    align-items: center;
    gap: 10px;
  }

  .skills-toolkit-category {
    font-size: 0.75rem;
  }

  .skills-toolkit-tag {
    font-size: 0.75rem;
  }
}

@media (max-width: 640px) {
  .section-hatch {
    height: clamp(80px, 20vw, 120px);
  }

  .skills-heading-slab {
    padding-top: clamp(32px, 6vw, 48px);
    padding-bottom: clamp(32px, 6vw, 48px);
  }

  .skills-heading-cmd {
    padding-inline: clamp(10px, 3vw, 16px);
  }
}

.skills-heading-ornament {
  --ornament-size: clamp(180px, 22vw, 260px);
  position: absolute;
  z-index: 0;
  width: var(--ornament-size);
  height: var(--ornament-size);
  pointer-events: none;
  display: block;
}

.skills-heading-ornament--tr {
  top: 14%;
  right: calc(-1 * clamp(90px, 11vw, 130px));
}

.skills-heading-ornament--bl {
  bottom: 14%;
  left: calc(-1 * clamp(90px, 11vw, 130px));
}

/* Atom. The original frame box was 2.4x the
   ornament, so 1em keeps that same proportion: round(60% of the old box / 10.6).
   The frame paused its own loops with an IntersectionObserver toggling .p; the
   page already parks these wrappers with .is-motion-off (js/site.js), which is
   what the pause rule below reads. */
@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.ornament-atom {
  --c: #2438b8;
  position: absolute;
  inset: 0;
  margin: auto;
  font-size: round(calc(var(--ornament-size) * 2.4 * 0.6 / 10.6), 1px);
}

:root[data-theme="dark"] .ornament-atom {
  --c: #9fc0ff;
}

.ornament-atom i {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2em;
  height: 2em;
  background:
    radial-gradient(at 30% 30%, #fffa, #0000 45%),
    radial-gradient(at 70% 70%, #0004, #0000 50%),
    var(--c);
  border-radius: 2em;
  box-shadow: 0 0 0.15em -0.02em var(--c);
  animation: ornament-core-pulse 2s ease-in-out infinite alternate;
}

.ornament-atom u {
  position: absolute;
  inset: -200%;
}

.ornament-atom b {
  position: absolute;
  inset: 37.5% 0;
  border-radius: 50%;
}

.ornament-atom b + b {
  rotate: 60deg;
}

.ornament-atom b + b + b {
  rotate: 120deg;
}

.ornament-atom b::before,
.ornament-atom b::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  box-shadow: inset 0 var(--o) 0 0.02em var(--c);
  mask:
    linear-gradient(90deg, #0000, #000 22%, #000 78%, #0000),
    repeating-conic-gradient(from var(--a), #000 0 10deg, #0000 14deg 36deg);
  mask-composite: intersect;
  animation: ornament-angle-sweep 2s linear infinite;
}

.ornament-atom b::before {
  --o: 0.1em;
}

.ornament-atom b::after {
  --o: -0.1em;
}

.skills-heading-ornament.is-motion-off .ornament-atom *,
.skills-heading-ornament.is-motion-off .ornament-atom ::before,
.skills-heading-ornament.is-motion-off .ornament-atom ::after {
  animation-play-state: paused;
}

@keyframes ornament-angle-sweep {
  to {
    --a: 360deg;
  }
}

@keyframes ornament-core-pulse {
  to {
    box-shadow: 0 0 0.6em 0.05em var(--c);
  }
}

.about {
  padding: 0 var(--page-gutter) var(--section-pad);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.about-heading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: start;
}

.about-heading-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface-alt);
}

.about-heading-mesh {
  position: absolute;
  inset: -16% -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 78% at 86% 0%, color-mix(in srgb, var(--accent) 36%, transparent) 0%, transparent 68%),
    radial-gradient(42% 74% at 4% 102%, color-mix(in srgb, var(--accent-2) 32%, transparent) 0%, transparent 70%),
    radial-gradient(72% 92% at 52% 118%, color-mix(in srgb, var(--accent-strong) 20%, transparent) 0%, transparent 74%);
  animation: about-mesh-drift 22s var(--ease-in-out) infinite;
}

.about-heading-sheen {
  position: absolute;
  inset: -32% -12%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 34%,
    color-mix(in srgb, var(--accent) 24%, transparent) 47%,
    color-mix(in srgb, var(--accent-2) 17%, transparent) 55%,
    transparent 68%);
  filter: blur(42px);
  animation: about-sheen-sweep 18s var(--ease-in-out) infinite;
}

@keyframes about-mesh-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-2%, 1.4%, 0) scale(1.06);
  }
}

@keyframes about-sheen-sweep {
  0%,
  100% {
    transform: translate3d(-5%, 0, 0);
    opacity: 0.42;
  }

  50% {
    transform: translate3d(5%, 0, 0);
    opacity: 0.72;
  }
}

/* Flush cover band: no inset, no radius, no surface of its own, so the
   decoration reaches every edge and the type owns the band. */
.about-heading-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 4vw, 56px);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(46px, 5.6vw, 82px) clamp(20px, 4.4vw, 72px);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(120% 150% at 50% 46%, color-mix(in srgb, var(--surface) 58%, transparent) 0%, transparent 64%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.about-heading-panel > * {
  min-width: 0;
}

.about-heading-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.8vw, 20px);
  min-width: 0;
  text-align: start;
}

.about-heading-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
}

.about-heading-status {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 10px var(--accent-glow);
  animation: dot-halo var(--led-dur) var(--ease) infinite;
}

.about-heading-kicker {
  flex: 0 0 auto;
  color: var(--text);
  font-weight: 600;
}

.about-heading-rule {
  flex: 1 1 auto;
  min-width: 20px;
  height: 1px;
  background: linear-gradient(to left, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
  transform-origin: right center;
}

.about-heading-slug {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.about-heading .about-heading-title {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.26;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.about-heading-title .about-accent {
  position: relative;
}

.about-heading-title .about-accent::after {
  content: "";
  position: absolute;
  inset-inline: -0.05em;
  bottom: -0.04em;
  height: clamp(7px, 0.85vw, 11px);
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  clip-path: polygon(0 44%, 100% 0, 100% 56%, 0 100%);
  transform-origin: right center;
}

.about-heading-tag {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.95vw, 0.8rem);
  font-weight: 500;
  line-height: 1;
}

.about-heading-tag > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 0;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--text-muted);
  white-space: nowrap;
}

.about-heading-tag > span::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--gradient);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ── About heading spinner ─────────────────────────────────── */
.about-heading-spinner {
  position: relative;
  width: 10em;
  height: 10em;
  font-size: clamp(11.8px, 1.5vw, 20px);
}

.about-heading-spinner #m {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13.3em;
  height: 13.3em;
  font-size: 0.75em;
}

.about-heading-spinner #a,
.about-heading-spinner #b {
  position: absolute;
  inset: 0;
}

.about-heading-spinner #a > div,
.about-heading-spinner #b > div {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.15em;
  height: 13em;
  border-radius: 3.125em;
  transform: rotate(calc(var(--i) * 20deg));
}

.about-heading-spinner #a > div {
  background: color-mix(in srgb, var(--surface-alt) 88%, var(--text));
}

.about-heading-spinner #a > div::after,
.about-heading-spinner #a > div::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1.15em;
  background: color-mix(in srgb, var(--surface-alt) 88%, var(--text));
  border-radius: 3.125em;
  border: 0.0625em solid var(--border-strong);
  box-shadow:
    inset 0.3125em 0.3125em 0.9375em color-mix(in srgb, var(--text) 10%, transparent),
    inset -0.3125em -0.3125em 0.9375em color-mix(in srgb, var(--surface) 55%, transparent);
}

.about-heading-spinner #a > div::after {
  top: 0;
  height: 5em;
  mask-image: linear-gradient(black calc(100% - 3em), transparent);
}

.about-heading-spinner #a > div::before {
  bottom: 0;
  height: 4.5em;
  mask-image: linear-gradient(0deg, black calc(100% - 3em), transparent);
}

.about-heading-spinner #b > div > div {
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-alt) 92%, var(--text));
  box-shadow:
    color-mix(in srgb, var(--text) 16%, transparent) 0 -0.625em 0.625em inset,
    color-mix(in srgb, var(--text) 14%, transparent) 0 -0.9375em 0.9375em inset,
    color-mix(in srgb, var(--text) 10%, transparent) 0 -2.5em 1.25em inset,
    color-mix(in srgb, var(--text) 6%, transparent) 0 0.125em 0.0625em,
    color-mix(in srgb, var(--text) 8%, transparent) 0 0.25em 0.125em,
    color-mix(in srgb, var(--text) 8%, transparent) 0 0.5em 0.25em,
    color-mix(in srgb, var(--text) 8%, transparent) 0 1em 0.5em,
    color-mix(in srgb, var(--text) 8%, transparent) 0 2em 1em,
    0 -0.0625em 0.9375em -0.5em color-mix(in srgb, var(--text) 8%, transparent);
  animation: 3.63s x ease-in-out infinite;
  animation-delay: calc(0.2s * var(--i));
}

@keyframes x {
  50% {
    transform: translateY(12em);
  }
}
/* ── end spinner ───────────────────────────────────────────── */



@media (max-width: 640px) {
  .about-heading-spinner {
    font-size: clamp(9.2px, 2.8vw, 14px);
    justify-self: end;
  }

  .about-heading .about-heading-title {
    font-size: clamp(1.7rem, 7.4vw, 2.2rem);
  }
}

@media (max-width: 420px) {
  .about-heading-panel {
    padding-inline: clamp(12px, 4vw, 18px);
    gap: clamp(10px, 3vw, 16px);
  }

  .about-heading-spinner {
    font-size: clamp(7px, 2.2vw, 9px);
  }
}

.about-profile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 255, 0.82)),
    var(--surface);
  box-shadow: var(--shadow-md);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.about-profile > * {
  position: relative;
  z-index: 1;
}

/* The editor chrome is dark in both themes. The body below is a fixed
   #1e1e1e, so the title bar stays on #252526 instead of flipping to a light
   bar in light theme, which read as an unbalanced strip over the dark body. */
.about-profile-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: #252526;
}

.about-profile-bar-file {
  flex: 1;
  min-width: 0;
  color: #9aa3b2;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  text-align: start;
}

.about-profile-bar-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #9aa3b2;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.about-profile-state-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  --dot-c: #7592ff;
  background: #7592ff;
  animation: dot-halo var(--led-dur) var(--ease) infinite;
}

.about-profile-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1vw, 12px);
  flex: 1;
  background: #1e1e1e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-sm);
}

/* --s اندازه‌ی آدمک؛ --cx و --cy مرکز او */
.about-profile-speeder{position:absolute;inset:0;z-index:-1;overflow:hidden;container-type:inline-size;font-size:10px;color:#fff;pointer-events:none;direction:ltr;--s:4;--cx:4.105;--cy:-.41;
& *,& ::before,& ::after{position:absolute}
& u,& s,& a,& a::after,& i::before{background:currentColor}
& u{animation:k var(--d) linear var(--y) infinite}
& >u{left:100%;height:.125em;--e:-135cqw}
& b{left:calc(50% - var(--cx)*var(--s)*1em);top:calc(50% - var(--cy)*var(--s)*1em);scale:var(--s)}
& b u{left:3.75em;width:1.875em;height:.0625em}
& s{top:-1.1875em;left:3.75em;width:2.1875em;height:.3125em;border-radius:.125em .625em .0625em 0}
& i{left:0;border:solid;border-color:#0000 currentColor;border-width:.375em 6.25em .1em 0}
& i::before,& i::after{content:"";top:-1em}
& i::before{padding:.55em;border-radius:50%;right:-6.8em}
& i::after{border-right:3.4375em solid;border-bottom:1em solid #0000;right:-6.125em}
& a{padding:.375em .625em;border-radius:1.25em 1.25em 0 0;transform:rotate(-40deg);right:-7.8125em;top:-.9375em}
& a::after{content:"";padding:.375em;border-radius:0 0 0 .125em;transform:rotate(40deg);right:.25em;top:.4375em}}
@keyframes k{to{transform:translateX(var(--e));opacity:0}}

.about-profile-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(10px, 1.4vw, 16px) clamp(20px, 2.8vw, 32px) 0;
  color: color-mix(in srgb, var(--accent) 60%, #ffffff);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.about-profile-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 60%, #ffffff);
  opacity: 0.5;
}

.about-profile-title {
  padding-inline: clamp(20px, 2.8vw, 32px);
  color: color-mix(in srgb, var(--text) 12%, #ffffff);
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  font-weight: 700;
  line-height: 1.4;
}

.about-profile-title span {
  position: relative;
  display: inline-block;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-strong) 55%, #ffffff) 0%, color-mix(in srgb, var(--accent) 55%, #ffffff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.about-profile-title span::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.04em;
  left: 0;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, #ffffff) 0%, color-mix(in srgb, var(--accent-strong) 55%, #ffffff) 100%);
  box-shadow: 0 0 4px 1px rgba(59, 91, 253, 0.07), 0 2px 8px rgba(59, 91, 253, 0.25);
}

.about-profile-spec {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vw, 20px);
  margin-block-start: auto;
  overflow: hidden;
  padding: clamp(30px, 4vw, 44px) clamp(20px, 2.8vw, 32px) 19px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 2.8;
}

.about-profile-spec-line {
  white-space: pre;
}

.about-profile-spec-line--indent {
  padding-left: 1.6em;
}

.about-profile-spec .tok-keyword { color: #569cd6; }
.about-profile-spec .tok-name { color: #4ec9b0; }
.about-profile-spec .tok-punctuation { color: #d4d4d4; }
.about-profile-spec .tok-property { color: #9cdcfe; }
.about-profile-spec .tok-string { color: #ce9178; }
.about-profile-spec .tok-comment { color: #6a9955; }

.about-workflow {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12% 0%, rgba(59, 91, 253, 0.14), transparent 42%),
    linear-gradient(180deg, #161a24 0%, #0e1118 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-lg);
}

.about-workflow-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-workflow-kicker,
.about-workflow-code {
  font-family: var(--font-mono);
}

.about-workflow-kicker {
  color: #9aa4b8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.about-workflow-title {
  position: relative;
  padding-inline-start: 12px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
}

.about-workflow-title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3b5bfd, #8b5cf6);
}

.about-workflow-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 2px 16px 8px;
}

.about-workflow-list::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  inset-inline-start: 29px;
  width: 1px;
  background: linear-gradient(180deg, rgba(139, 155, 214, 0.55), rgba(212, 175, 55, 0.35));
  pointer-events: none;
}

.about-workflow-step {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
  padding: 11px 8px;
  border-radius: var(--radius-md);
  transition: background-color 0.25s var(--ease);
}

.about-workflow-step + .about-workflow-step {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.about-workflow-step:hover,
.about-workflow-step:focus-within {
  background: rgba(255, 255, 255, 0.045);
}

.about-workflow-index {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid rgba(139, 155, 214, 0.45);
  border-radius: 50%;
  background: #141926;
  color: #8b9ad6;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.about-workflow-step:hover .about-workflow-index,
.about-workflow-step:focus-within .about-workflow-index {
  color: #c6d0ff;
  border-color: #8b9ad6;
  box-shadow: 0 0 12px rgba(59, 91, 253, 0.35);
}

.about-workflow-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.about-workflow-main,
.about-workflow-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.about-workflow-label {
  min-width: 0;
  color: #eef1f8;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.7;
}

.about-workflow-code {
  flex: none;
  color: #8b9ad6;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.about-workflow-description {
  max-width: 42ch;
  color: #9aa4b8;
  font-size: 0.76rem;
  line-height: 1.7;
}

.about-workflow-status,
.about-workflow-category {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

.about-workflow-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8bd5a2;
}

.about-workflow-status-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  --dot-c: #8bd5a2;
  background: #8bd5a2;
  animation: dot-halo var(--led-dur) var(--ease) infinite;
}

.about-workflow-category {
  color: #8791a6;
  letter-spacing: 0.03em;
}

/* About feature: a printed index card. Sharp corners, no radius on the
   container, three bands that each own one job:
     1) masthead   - accent bar with the seal and label reversed out of it
     2) body       - the note, the only real content on the card
     3) meta strip - trust stamp at the start edge, sign-off at the end edge
   The grid owns the layout, so no band has to guess its own width, and
   --feature-pad is the single owner of the horizontal inset. */
.about-feature {
  --feature-pad: clamp(18px, 2.2vw, 26px);
  /* Wave ink for the paragraph band. A data-URI SVG cannot read custom
     properties, so the two inks mirror --accent's own value in each theme; the
     swap lives here so both wave layers resolve from one place, and the two
     opacities are the readability budget for the band. */
  --wave-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120'%3E%3Cpath d='M0 60C100 20 200 20 300 60S500 100 600 60S800 20 900 60S1100 100 1200 60' fill='none' stroke='%233b5bfd' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave-ambient: 0.06;
  --wave-leading: 0.1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head  head"
    "text  text"
    "stamp sign";
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  direction: rtl;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background:
    radial-gradient(110% 70% at 100% 22%, var(--accent-tint) 0%, transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-md);
}

/* Masthead. Background and text are token-swapped, so the bar reads as a
   printed header in light theme and inverts to a light bar in dark theme
   without a second hard-coded palette. The mix sits at the top of the window
   this band is allowed because of the label: it is 11px bold at 0.88 opacity
   and it sits at the card's start edge on the bare surface, so every step down
   toward 0.72 only lightens the bar and costs the label contrast. The seal is
   an opaque --bg disc and keeps its own contrast either way. */
.about-feature-head {
  grid-area: head;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--feature-pad);
  background: color-mix(in srgb, var(--accent-strong) 82%, transparent);
  color: var(--bg);
}

.about-feature-label {
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0.88;
}

/* Seal: a punched disc in the page tone with the fingerprint in the bar
   colour, so it stays legible against whatever the masthead resolves to. */
.about-feature-seal {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 28%, transparent);
}

.about-feature-seal::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed color-mix(in srgb, var(--accent-strong) 42%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.about-feature-seal-mark {
  width: 62%;
  height: 62%;
  background-color: var(--accent-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20viewBox%3D%220%200%20256%20256%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M183.98242%2C128.0094a246.6394%2C246.6394%2C0%2C0%2C1-18.53418%2C94.23926%2C8.00032%2C8.00032%2C0%2C0%2C1-14.79883-6.084%2C230.70455%2C230.70455%2C0%2C0%2C0%2C17.333-88.15527%2C8%2C8%2C0%2C1%2C1%2C16%2C0Zm-56-40a40.06442%2C40.06442%2C0%2C0%2C1%2C29.81445%2C13.333%2C8.00032%2C8.00032%2C0%2C1%2C0%2C11.92188-10.67188A56.00093%2C56.00093%2C0%2C0%2C0%2C71.98242%2C128.0094%2C136.088%2C136.088%2C0%2C0%2C1%2C55.00586%2C193.861a7.99993%2C7.99993%2C0%2C1%2C0%2C13.99219%2C7.75977A152.12935%2C152.12935%2C0%2C0%2C0%2C87.98242%2C128.0094%2C40.04583%2C40.04583%2C0%2C0%2C1%2C127.98242%2C88.0094Zm-58.665-25.59473A7.99966%2C7.99966%2C0%2C1%2C0%2C58.64746%2C50.4928a104.15766%2C104.15766%2C0%2C0%2C0-34.665%2C77.5166%2C87.28655%2C87.28655%2C0%2C0%2C1-7.97558%2C36.66308%2C7.9997%2C7.9997%2C0%2C1%2C0%2C14.541%2C6.67383%2C103.15936%2C103.15936%2C0%2C0%2C0%2C9.43457-43.33691A88.1429%2C88.1429%2C0%2C0%2C1%2C69.31738%2C62.41467Zm58.665-38.40527a103.7636%2C103.7636%2C0%2C0%2C0-34.667%2C5.91992%2C8.00025%2C8.00025%2C0%2C0%2C0%2C5.332%2C15.08594%2C88.06652%2C88.06652%2C0%2C0%2C1%2C117.335%2C82.99414%2C281.58357%2C281.58357%2C0%2C0%2C1-6.93847%2C62.22851%2C8.00013%2C8.00013%2C0%2C1%2C0%2C15.60351%2C3.541%2C297.64323%2C297.64323%2C0%2C0%2C0%2C7.335-65.76953A104.11791%2C104.11791%2C0%2C0%2C0%2C127.98242%2C24.0094Zm-14.084%2C176.72949a8.00188%2C8.00188%2C0%2C0%2C0-10.60742%2C3.93359c-1.92676%2C4.19727-4.044%2C8.38086-6.291%2C12.43555a7.99945%2C7.99945%2C0%2C1%2C0%2C13.99219%2C7.75781c2.44336-4.40625%2C4.74511-8.95507%2C6.83984-13.51953A7.999%2C7.999%2C0%2C0%2C0%2C113.89844%2C200.73889Zm14.07226-80.73047a8.00039%2C8.00039%2C0%2C0%2C0-8%2C8%2C184.6862%2C184.6862%2C0%2C0%2C1-5.79687%2C46.00586%2C8.00008%2C8.00008%2C0%2C1%2C0%2C15.49512%2C3.98828%2C200.70138%2C200.70138%2C0%2C0%2C0%2C6.30175-49.99414A8.00039%2C8.00039%2C0%2C0%2C0%2C127.9707%2C120.00842Z%22%2F%3E%20%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20viewBox%3D%220%200%20256%20256%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M183.98242%2C128.0094a246.6394%2C246.6394%2C0%2C0%2C1-18.53418%2C94.23926%2C8.00032%2C8.00032%2C0%2C0%2C1-14.79883-6.084%2C230.70455%2C230.70455%2C0%2C0%2C0%2C17.333-88.15527%2C8%2C8%2C0%2C1%2C1%2C16%2C0Zm-56-40a40.06442%2C40.06442%2C0%2C0%2C1%2C29.81445%2C13.333%2C8.00032%2C8.00032%2C0%2C1%2C0%2C11.92188-10.67188A56.00093%2C56.00093%2C0%2C0%2C0%2C71.98242%2C128.0094%2C136.088%2C136.088%2C0%2C0%2C1%2C55.00586%2C193.861a7.99993%2C7.99993%2C0%2C1%2C0%2C13.99219%2C7.75977A152.12935%2C152.12935%2C0%2C0%2C0%2C87.98242%2C128.0094%2C40.04583%2C40.04583%2C0%2C0%2C1%2C127.98242%2C88.0094Zm-58.665-25.59473A7.99966%2C7.99966%2C0%2C1%2C0%2C58.64746%2C50.4928a104.15766%2C104.15766%2C0%2C0%2C0-34.665%2C77.5166%2C87.28655%2C87.28655%2C0%2C0%2C1-7.97558%2C36.66308%2C7.9997%2C7.9997%2C0%2C1%2C0%2C14.541%2C6.67383%2C103.15936%2C103.15936%2C0%2C0%2C0%2C9.43457-43.33691A88.1429%2C88.1429%2C0%2C0%2C1%2C69.31738%2C62.41467Zm58.665-38.40527a103.7636%2C103.7636%2C0%2C0%2C0-34.667%2C5.91992%2C8.00025%2C8.00025%2C0%2C0%2C0%2C5.332%2C15.08594%2C88.06652%2C88.06652%2C0%2C0%2C1%2C117.335%2C82.99414%2C281.58357%2C281.58357%2C0%2C0%2C1-6.93847%2C62.22851%2C8.00013%2C8.00013%2C0%2C1%2C0%2C15.60351%2C3.541%2C297.64323%2C297.64323%2C0%2C0%2C0%2C7.335-65.76953A104.11791%2C104.11791%2C0%2C0%2C0%2C127.98242%2C24.0094Zm-14.084%2C176.72949a8.00188%2C8.00188%2C0%2C0%2C0-10.60742%2C3.93359c-1.92676%2C4.19727-4.044%2C8.38086-6.291%2C12.43555a7.99945%2C7.99945%2C0%2C1%2C0%2C13.99219%2C7.75781c2.44336-4.40625%2C4.74511-8.95507%2C6.83984-13.51953A7.999%2C7.999%2C0%2C0%2C0%2C113.89844%2C200.73889Zm14.07226-80.73047a8.00039%2C8.00039%2C0%2C0%2C0-8%2C8%2C184.6862%2C184.6862%2C0%2C0%2C1-5.79687%2C46.00586%2C8.00008%2C8.00008%2C0%2C1%2C0%2C15.49512%2C3.98828%2C200.70138%2C200.70138%2C0%2C0%2C0%2C6.30175-49.99414A8.00039%2C8.00039%2C0%2C0%2C0%2C127.9707%2C120.00842Z%22%2F%3E%20%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Body. The paragraph is the card's subject, so it sits at full text weight
   on its own generous measure. The band carries its own near-opaque surface
   (88% of --surface).
   The text stays above the wave layers without a wrapper. The band is a
   stacking context (position: relative + z-index: 1), so both pseudo-elements
   sit at z-index: -1 and land over the band's own surface and under the inline
   text in one move.
   A ::first-line lead was tried and rejected: in a wrapped RTL paragraph it
   cuts the opening sentence at an arbitrary point and reads as a glitch. */
.about-feature-text {
  grid-area: text;
  position: relative;
  z-index: 1;
  margin: 0;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: clamp(20px, 2.4vw, 28px) var(--feature-pad) clamp(18px, 2.2vw, 24px);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(0.88rem, 1.06vw, 1rem);
  line-height: 2.15;
  text-align: start;
  text-wrap: pretty;
  border-bottom: 1px solid var(--border);
}

/* Wave layers. Two hairlines of calm water, at different heights and speeds,
   drawn from one seamless SVG tile repeated on the x-axis. Both boxes are four
   times the band's width and offset so that no edge of their own can enter the
   band, even at the far end of a translate; the transform only slides the
   tile, so the crests drift rather than redraw. The tile is 1200x120 units of
   two full periods, whose ends meet at the same height AND the same slope, so
   the repeat is invisible. Layer one is the slower, softer swell; layer two
   rides above it, faster and a touch stronger, offset 150px so the crests of
   the two never line up. Both sit at z-index: -1, which inside the band's own
   stacking context is above the band's surface and below its text. */
.about-feature-text::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  width: 400%;
  z-index: -1;
  pointer-events: none;
  background-image: var(--wave-ink);
  background-repeat: repeat-x;
  background-size: auto 120px;
  background-position: 0 38%;
  opacity: var(--wave-ambient);
  animation: about-feature-wave-slow 34s linear infinite;
}

.about-feature-text::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -120%;
  width: 400%;
  z-index: -1;
  pointer-events: none;
  background-image: var(--wave-ink);
  background-repeat: repeat-x;
  background-size: auto 120px;
  background-position: 150px 66%;
  opacity: var(--wave-leading);
  animation: about-feature-wave-fast 22s linear infinite;
}

/* Both paths return to the value they started on, so repeat-x never jumps. */
@keyframes about-feature-wave-slow {
  0% { transform: translateX(0); }
  50% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes about-feature-wave-fast {
  0% { transform: translateX(-25%); }
  50% { transform: translateX(25%); }
  100% { transform: translateX(-25%); }
}

/* Meta strip: the stamp and the sign-off share one baseline across the row,
   so the card ends on a line instead of on two unrelated floats. */
.about-feature-verify {
  grid-area: stamp;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px var(--feature-pad);
}

.about-feature-verify-badge {
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.about-feature-verify-text {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

.about-feature-sign {
  grid-area: sign;
  align-self: center;
  margin: 0;
  padding: 14px var(--feature-pad);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* The masthead and seal invert themselves through --accent-strong / --bg, so
   dark theme only needs the two surfaces nudged. */
:root[data-theme="dark"] .about-feature {
  --wave-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120'%3E%3Cpath d='M0 60C100 20 200 20 300 60S500 100 600 60S800 20 900 60S1100 100 1200 60' fill='none' stroke='%237592ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave-ambient: 0.09;
  --wave-leading: 0.14;
  background:
    radial-gradient(110% 70% at 100% 22%, color-mix(in srgb, var(--accent-tint) 62%, transparent) 0%, transparent 62%),
    var(--surface);
}

@media (max-width: 900px) {
  .about-feature-text {
    line-height: 2;
  }
}

@media (max-width: 600px) {
  .about-feature-seal {
    width: 34px;
    height: 34px;
  }

  .about-feature-verify-badge {
    width: 24px;
    height: 24px;
  }

  .about-feature-verify-text {
    font-size: 0.72rem;
  }
}

.about-quote {
  margin: 0 auto clamp(56px, 6vw, 80px);
  max-width: 30ch;
  text-align: center;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.75;
  margin-bottom: 0;
}

.about-quote::before {
  content: "«";
  display: block;
  font-size: 2.6em;
  line-height: 0.4;
  color: var(--accent);
  opacity: 0.15;
  margin-bottom: 12px;
}

.about-quote::after {
  content: "»";
  display: block;
  font-size: 2em;
  line-height: 0.4;
  margin-top: calc(12px + 0.12em);
  color: var(--accent);
  opacity: 0.12;
}

.about-quote-quality,
.about-quote-details {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.about-quote-quality {
  isolation: isolate;
  padding: 0.08em 0.28em 0.14em;
  border-radius: 0.28em;
  background: var(--gradient-hero);
  box-shadow:
    0 0.12em 0 color-mix(in srgb, var(--accent) 22%, transparent),
    0 0.32em 0.8em color-mix(in srgb, var(--accent) 18%, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.about-quote-quality::before {
  content: "";
  position: absolute;
  inset: 0.08em -0.1em 0.12em;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 0.28em;
  background: color-mix(in srgb, var(--accent-tint) 52%, transparent);
  transform: rotate(-2deg);
}

.about-quote-details {
  padding-inline: 0.12em;
  color: var(--accent-strong);
  isolation: isolate;
}

.about-quote-details::before {
  content: "";
  position: absolute;
  inset-inline: 0.02em;
  bottom: 0.02em;
  z-index: -1;
  height: 0.42em;
  border-radius: 0.1em 0.35em 0.12em 0.25em;
  background: var(--accent-tint-strong);
  transform: rotate(-1.5deg);
}

.about-quote-details::after {
  content: "✦";
  position: absolute;
  inset-inline-end: -0.62em;
  top: -0.38em;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.42em;
  -webkit-text-fill-color: var(--accent);
  transform: rotate(12deg);
}

.about-quote-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 48px);
  width: 100%;
  max-width: 100%;
  margin: 0 auto clamp(56px, 6vw, 80px);
  margin-bottom: 0;
}

.about-quote-stage > .about-quote {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.about-quote-ornament {
  flex: 0 0 auto;
  position: relative;
  font-size: clamp(72px, 9vw, 128px);
  width: 1em;
  height: 1em;
  perspective: 2.125em;
  color: var(--accent);
  opacity: 0.55;
  filter:
    drop-shadow(0 .00625em .00625em rgba(23, 26, 36, 0.18))
    drop-shadow(0 .0375em .0875em color-mix(in srgb, var(--accent) 35%, transparent));
}

.about-quote-ornament::before,
.about-quote-ornament::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 266 297'%3E%3Cpath fill-rule='evenodd' d='M171.51 3.25C226.21 12.86 297.11 71.49 250.9 108.41C216.58 135.82 186.53 97.06 156.8 85.77C127.07 74.48 76.89 84.22 60.13 108.41C-15.98 218.28 145.28 296.67 145.28 296.67C145.28 296.67-25.45 257.24 3.4 108.41C16.31 41.81 84.73-11.99 171.51 3.25Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  animation: about-quote-ornament-spin 0.75s linear infinite;
}

.about-quote-ornament::before {
  --rx: 60deg;
}

.about-quote-ornament::after {
  --rx: 240deg;
}

@keyframes about-quote-ornament-spin {
  from {
    transform: rotateX(var(--rx)) rotateY(45deg) rotateZ(0);
  }
  to {
    transform: rotateX(var(--rx)) rotateY(45deg) rotateZ(360deg);
  }
}

@media (max-width: 720px) {
  .about-quote-ornament {
    display: none;
  }
}
.about-essay,
.about-showcase {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr);
}

.about-showcase {
  display: grid;
  align-items: stretch;
  gap: clamp(14px, 2vw, 24px);
  width: 100%;
  margin-bottom: 0;
}

.about-showcase > * {
  min-width: 0;
}

@media (max-width: 900px) {
  .about-essay {
    gap: 14px;
  }

  .about-showcase {
    gap: 14px;
  }

  .about-profile-kicker {
    padding: 22px 20px 0;
  }

  .about-profile-title {
    padding-inline: 20px;
  }

  .about-profile-spec {
    padding-inline: 20px;
  }

  .about-workflow-step {
    padding-block: 11px;
  }
}

@media (max-width: 790px) {
  .about-essay {
    grid-template-columns: 1fr;
  }

  .about-showcase {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px){
  .about-profile {
    border-radius: var(--radius-md);
  }

  .about-profile-body {
    padding: 18px 16px;
  }

  .about-workflow-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .about-workflow-step {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
    padding-block: 12px;
  }

  .about-workflow-copy {
    gap: 6px;
  }

  .about-workflow-main,
  .about-workflow-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .about-workflow-label {
    font-size: 0.84rem;
  }

  .about-workflow-code,
  .about-workflow-status,
  .about-workflow-category {
    font-size: 0.75rem;
  }

  .about-workflow-description {
    font-size: 0.75rem;
    line-height: 1.8;
  }

  .about-profile-kicker {
    padding: 18px 16px 0;
    font-size: 0.75rem;
  }

  .about-profile-title {
    padding-inline: 16px;
    font-size: clamp(1.3rem, 7vw, 1.75rem);
    line-height: 1.4;
  }

  .about-profile-spec {
    padding-inline: 16px;
    font-size: 0.7rem;
  }

  .about-quote {
    font-size: 1.45rem;
  }
}

.about-essay {
  align-items: stretch;
}

.about-showcase,
.about-essay {
  gap: 0;
  width: 100vw;
  max-width: none;
  margin-inline: calc((100% - 100vw) / 2);
  padding: 0;
}

.about-showcase .about-canvas,
.about-essay .about-profile,
.about-essay .about-workflow {
  border-radius: 0;
}

.about-canvas {
  --news-ink: #121722;
  --news-muted: #687181;
  --news-rule: rgba(18, 23, 34, 0.16);
  --news-accent: #e34f35;
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(96px, 1fr) minmax(96px, 1fr) auto;
  width: 100%;
  min-height: 360px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--news-ink);
  box-shadow: var(--shadow-md);
}

.about-canvas::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 49.9%, var(--news-rule) 49.9% 50%, transparent 50% 100%),
    linear-gradient(180deg, transparent 0 69.8%, var(--news-rule) 69.8% 70%, transparent 70% 100%),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--news-rule) 42%, transparent) 31px 32px);
  opacity: 0.52;
  pointer-events: none;
}

.about-canvas::after {
  display: block;
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  border: 1px solid color-mix(in srgb, var(--news-accent) 32%, transparent);
  pointer-events: none;
}

.about-canvas-masthead,
.about-canvas-headline,
.about-canvas-footer {
  position: relative;
  z-index: 2;
}

.about-canvas-masthead {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 18px clamp(14px, 2.4vw, 28px) 16px;
  border-bottom: 1px solid var(--news-rule);
  color: var(--news-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.about-canvas-channel {
  overflow: hidden;
  color: var(--news-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.about-canvas-live,
.about-canvas-footer-status {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 7px;
  white-space: nowrap;
}

.about-canvas-live i,
.about-canvas-footer-status i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  --dot-c: var(--news-accent);
  background: var(--news-accent);
  animation: dot-halo var(--led-dur) var(--ease) infinite;
}

.about-canvas-headline {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 20px clamp(14px, 2.4vw, 28px) 22px;
  border-bottom: 1px solid var(--news-rule);
}

.about-canvas-label,
.about-canvas-date {
  color: var(--news-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  white-space: nowrap;
}

.about-canvas-date {
  flex: 0 1 auto;
  grid-column: auto;
}

.about-canvas-ticker {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}

.about-canvas-ticker--english,
.about-canvas-ticker--persian {
  min-height: 106px;
  border-bottom: 1px solid var(--news-rule);
}

.about-canvas-ticker--english {
  direction: ltr;
}

.about-canvas-ticker--persian {
  direction: rtl;
}

.about-canvas-ticker-row {
  position: relative;
  display: block;
  direction: ltr;
  width: 100%;
  height: 100%;
  min-height: 96px;
  overflow: hidden;
  white-space: nowrap;
}

.about-canvas-ticker-row::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  z-index: 2;
  height: 1px;
  background: var(--news-rule);
  pointer-events: none;
}

.about-canvas-ticker-track {
  --ticker-gap: clamp(22px, 4vw, 56px);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  height: 100%;
  flex: 0 0 auto;
  flex-direction: row;
}

.about-canvas-ticker-content {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  height: 100%;
  flex: 0 0 auto;
  gap: clamp(22px, 4vw, 56px);
  padding-inline-end: var(--ticker-gap);
  white-space: nowrap;
}

.about-canvas-ticker-content span {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--news-ink);
  font-family: "Kapiler", "Kapiler Fallback", var(--font-mono);
  font-size: clamp(2rem, 5.2vw, 3.75rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.about-canvas-ticker-separator {
  unicode-bidi: isolate;
  color: var(--news-accent) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.45em !important;
  font-weight: 700 !important;
}

.about-canvas-ticker--persian .about-canvas-ticker-content {
  direction: rtl;
}

.about-canvas-ticker--persian .about-canvas-ticker-content span:not(.about-canvas-ticker-separator) {
  display: inline-flex;
  direction: rtl;
  unicode-bidi: isolate;
  color: var(--news-ink) !important;
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: clamp(1.85rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: 0;
}

.about-canvas-ticker--english .about-canvas-ticker-track {
  animation: about-news-scroll-english 18s linear infinite;
}

.about-canvas-ticker--persian .about-canvas-ticker-track {
  animation: about-news-scroll-persian 18s linear infinite;
}

@keyframes about-news-scroll-english {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes about-news-scroll-persian {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.about-canvas-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 14px clamp(14px, 2.4vw, 28px) 16px;
  color: var(--news-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.about-canvas-footer-copy {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.about-canvas-footer-count {
  flex: 0 0 auto;
  color: var(--news-accent);
  white-space: nowrap;
}

:root[data-theme="dark"] .about-canvas {
  --news-ink: #f2f4f8;
  --news-muted: #9ca6b7;
  --news-rule: rgba(221, 229, 243, 0.2);
  --news-accent: #ff8068;
  background: #111927;
}

:root[data-theme="dark"] .about-canvas::before {
  opacity: 0.4;
}

@media (max-width: 900px){
  .about-canvas {
    min-height: 320px;
  }

  .about-canvas-headline {
    align-items: flex-start;
    gap: 7px;
    padding-block: 16px 18px;
  }
}

@media (max-width: 790px){
  .about-canvas {
    border-radius: 0;
  }
}

@media (max-width: 520px){
  .about-canvas {
    min-height: 300px;
  }

  .about-canvas-masthead,
  .about-canvas-headline,
  .about-canvas-footer {
    padding-inline: 14px;
  }

  .about-canvas-masthead {
    gap: 8px;
  }

  .about-canvas-ticker--english,
  .about-canvas-ticker--persian {
    min-height: 88px;
  }

  .about-canvas-ticker-row {
    min-height: 88px;
    height: 88px;
  }

  .about-canvas-ticker-track {
    --ticker-gap: 22px;
  }

  .about-canvas-footer {
    gap: 10px;
  }

  .about-canvas-footer-count {
    text-align: end;
  }
}

.contact {
  padding: 0 var(--page-gutter) var(--section-pad);
}

.about-inner,
.contact-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.contact-heading {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
  background: var(--surface-alt);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  text-align: center;
}

.contact-heading-sphere {
  --ornament-size: clamp(240px, 32vw, 440px);
  position: absolute;
  z-index: 0;
  display: block;
  width: var(--ornament-size);
  height: var(--ornament-size);
  color: var(--accent);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), color 0.3s;
}

:root[data-theme="dark"] .contact-heading-sphere {
  color: var(--accent);
}

/* The stroke colour is read from these two rules by js/ornaments.js, which is
   what the iframe's own html{color} + [data-theme=dark]{color} pair did.
   150px is half of the old 300px iframe box: the offsets re-centre the smaller
   canvas so the globe keeps its exact previous position. */
.contact-heading-sphere--tr {
  top: calc(12% + 150px - var(--ornament-size) / 2);
  right: calc(150px - clamp(70px, 8vw, 100px) - var(--ornament-size) / 2);
}

.contact-heading-sphere--bl {
  bottom: calc(12% + 150px - var(--ornament-size) / 2);
  left: calc(150px - clamp(70px, 8vw, 100px) - var(--ornament-size) / 2);
}

@media (min-width: 641px) and (max-width: 900px) {
  .contact-heading-sphere {
    --ornament-size: clamp(200px, 26vw, 320px);
  }
}

@media (max-width: 640px) {
  .contact-heading-sphere {
    --ornament-size: clamp(150px, 45vw, 210px);
  }
}

@media (max-width: 900px) {
  .contact-heading-sphere--tr {
    top: calc(-1 * var(--ornament-size) * 0.35);
    right: calc(-1 * var(--ornament-size) * 0.55);
  }

  .contact-heading-sphere--bl {
    bottom: calc(-1 * var(--ornament-size) * 0.35);
    left: calc(-1 * var(--ornament-size) * 0.55);
  }
}

.contact-heading-title {
  min-width: 0;
  margin: 0;
}

:root:not([data-theme="dark"]) .contact-accent,
:root:not([data-theme="dark"]) .skills-accent {
  background: none;
  -webkit-text-fill-color: var(--accent-strong);
  color: var(--accent-strong);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 0 0 1px color-mix(in srgb, var(--accent-strong) 22%, transparent);
}

.contact-essay-main {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: clamp(18px, 2.6vw, 30px);
  min-width: 0;
  padding: clamp(12px, 1.6vw, 18px);
  overflow: hidden;
  contain: content;
  border-radius: clamp(16px, 2vw, 24px);
  background: #11151f;
  color: #fff;
  box-shadow: 0 20px 44px rgba(10, 14, 24, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.contact-essay-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 34%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 30%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 34px);
  pointer-events: none;
}

.contact-essay-console {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  contain: content;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: clamp(12px, 1.6vw, 18px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.contact-essay-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px clamp(12px, 1.6vw, 18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}

.contact-essay-bar-dots {
  display: inline-flex;
  gap: 6px;
}

.contact-essay-bar-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.contact-essay-bar-dots span:first-child { background: rgba(255, 255, 255, 0.3); }

.contact-essay-bar-file {
  color: #8d9ab4;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.contact-essay-bar-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-inline-start: auto;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #cbd5ea;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.contact-essay-bar-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 45%, transparent),
              0 0 14px 3px color-mix(in srgb, var(--accent) 20%, transparent);
  animation: contact-led-pulse var(--led-dur) var(--ease-in-out) infinite;
}

@keyframes contact-led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.contact-essay-console-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(205px, 0.7fr);
  align-items: start;
  gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(16px, 2.2vw, 26px) clamp(14px, 2vw, 24px);
  direction: rtl;
}

.contact-essay-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: none;
  padding-inline-end: 0;
  direction: rtl;
  text-align: start;
}

.contact-essay-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #8295ff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.contact-essay-kicker-rule {
  width: clamp(28px, 4vw, 46px);
  height: 1px;
  background: linear-gradient(90deg, #8295ff, transparent);
}

.contact-essay-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.7vw, 20px);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-essay-steps::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 24px;
  inset-inline-start: 17px;
  width: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, transparent), rgba(255, 255, 255, 0.06));
  pointer-events: none;
}

.contact-essay-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.3vw, 14px);
  min-width: 0;
}

.contact-essay-step-icon {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: linear-gradient(180deg, #1c2231 0%, #141926 100%);
  color: #9fb0ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform var(--dur-slow) var(--ease-spring);
}

.contact-essay-step-icon svg {
  width: 17px;
  height: 17px;
}

.contact-essay-step-copy {
  min-width: 0;
  padding-top: 2px;
}

.contact-essay-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-essay-step-index {
  color: #78859f;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.contact-essay-step-label {
  color: #eef2ff;
  font-size: clamp(0.82rem, 1vw, 0.9rem);
  font-weight: 700;
  transition: color var(--dur-base) var(--ease);
}

.contact-essay-step-text {
  display: block;
  margin-top: 5px;
  color: #98a3b8;
  font-size: clamp(0.75rem, 0.88vw, 0.78rem);
  line-height: 1.8;
  text-wrap: pretty;
}

.contact-essay-step:hover .contact-essay-step-icon {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 38%, #1c2231) 0%, #141926 100%);
  transform: translateY(-2px);
}

.contact-essay-step:hover .contact-essay-step-label { color: #fff; }

.contact-essay-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 1.8vw, 22px);
  padding: 11px clamp(14px, 2vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.03));
  color: #8492ab;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.contact-essay-foot-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.contact-essay-foot-cell::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 75%, transparent);
}

.contact-essay-foot-tail {
  margin-inline-start: auto;
  color: #6e7c96;
}

.contact-essay-lead {
  position: relative;
  width: 100%;
  max-width: none;
  margin-top: clamp(10px, 1.4vw, 16px);
  color: #e4eaf8;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  font-weight: 500;
  line-height: 2;
  text-wrap: pretty;
}

.contact-essay-body {
  position: relative;
  width: 100%;
  max-width: none;
  margin-top: clamp(12px, 1.6vw, 18px);
  padding-top: clamp(12px, 1.6vw, 16px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #a8b3c8;
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  line-height: 1.95;
  text-wrap: pretty;
}

.contact-essay-body-marker {
  display: inline-flex;
  margin-inline-end: 7px;
  vertical-align: -3px;
  color: #8295ff;
}

.contact-essay-body-marker svg {
  width: 15px;
  height: 15px;
}

.contact-essay-body-tail {
  color: #dbe2ff;
  font-weight: 700;
}

@media (min-width: 901px){
  .contact-essay-body-tail {
    white-space: nowrap;
  }
}

.contact-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: flex-start;
  margin: 0;
  background: transparent;
}

.contact-essay {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.contact-essay > .contact-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-stage > .contact-channels {
  flex: 1 0 auto;
}

.contact-channels {
  min-width: 0;
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.contact-channels-kicker {
  position: relative;
  padding-inline-start: 46px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.contact-channels-kicker::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 34px;
  height: 1px;
  background: var(--accent);
}

.contact-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 560px;
  max-height: 560px;
  margin-inline: auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
}

.contact-list li + li {
  border-top: 0;
}

.contact-link {
  position: relative;
  isolation: isolate;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  min-height: 0;
  padding: clamp(10px, 2vw, 20px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none !important;
}

.contact-link::before {
  content: none !important;
  display: none !important;
}

.contact-link-icon {
  position: absolute;
  inset-inline-end: -18%;
  inset-block-start: 50%;
  z-index: -1;
  display: block;
  width: 180%;
  height: 180%;
  max-width: none;
  min-width: 180%;
  min-height: 180%;
  opacity: 1;
  transform: translateY(-50%);
  filter: saturate(1.3);
  pointer-events: none;
  transition: filter var(--dur-fast) var(--ease);
}

.contact-list li:nth-child(4) .contact-link-icon {
  width: 210%;
  height: 210%;
  min-width: 210%;
  min-height: 210%;
}

.contact-link-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  min-width: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.contact-link-username {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-end: 14px;
  direction: ltr;
  max-width: calc(100% - 20px);
  overflow-wrap: anywhere;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--contact-channel-color, var(--accent));
  border-inline-end: 3px solid var(--contact-channel-color, var(--accent));
  box-shadow: none;
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.88rem, 1.4vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.035em;
  color: var(--text);
  opacity: 0.95;
}

.contact-link-text {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 14px;
  min-width: 0;
  max-width: calc(100% - 20px);
  padding: 6px 9px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--contact-channel-color, var(--accent));
  border-inline-start: 3px solid var(--contact-channel-color, var(--accent));
  box-shadow: none;
  direction: ltr;
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  font-size: clamp(0.78rem, 2.6vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  overflow-wrap: anywhere;
  transition: none;
}

.contact-list li:first-child .contact-link,
.contact-list li:first-child .contact-link-text,
.contact-list li:first-child .contact-link-username {
  --contact-channel-color: #229ed9;
}

.contact-list li:nth-child(2) .contact-link,
.contact-list li:nth-child(2) .contact-link-text,
.contact-list li:nth-child(2) .contact-link-username {
  --contact-channel-color: #e1306c;
}

.contact-list li:nth-child(3) .contact-link,
.contact-list li:nth-child(3) .contact-link-text,
.contact-list li:nth-child(3) .contact-link-username {
  --contact-channel-color: #4cebb4;
}

.contact-list li:nth-child(4) .contact-link,
.contact-list li:nth-child(4) .contact-link-text,
.contact-list li:nth-child(4) .contact-link-username {
  --contact-channel-color: #7c83ff;
}

.contact-list li .contact-link-text {
  color: var(--contact-channel-color, var(--text));
}

.contact-sign {
  --sign-pad-x: clamp(20px, 3vw, 32px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  align-self: center;
  height: fit-content;
  margin-top: calc(0.78rem * 1.6 + 18px);
  padding: clamp(24px, 3.5vw, 36px) var(--sign-pad-x) clamp(20px, 3vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 0%, rgba(59, 91, 253, 0.22), transparent 42%),
    linear-gradient(180deg, #161a24 0%, #0e1118 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-lg);
}

.contact-sign.reveal {
  width: 100%;
  max-width: 100%;
}

.contact-sign::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
  background-size: 18px 18px;
  pointer-events: none;
}

.contact-sign-message {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  text-align: start;
}

.contact-sign-message--start .contact-sign-text {
  position: relative;
  max-width: 32ch;
  margin: 0;
  padding: 16px 20px;
  border-radius: 4px 18px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #f5f7ff;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 600;
  line-height: 1.9;
  text-align: start;
  text-wrap: balance;
}

.contact-sign-message--start .contact-sign-text::before {
  content: ">";
  margin-inline-end: 8px;
  color: #8295ff;
  font-family: var(--font-mono);
  font-weight: 700;
}

.contact-sign-message--start .contact-sign-text::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-inline-start: 4px;
  vertical-align: text-bottom;
  background: #8295ff;
  animation: cursor-blink 1.1s steps(2, start) infinite;
}

.contact-sign-message--end {
  align-items: stretch;
  text-align: center;
}

.contact-sign-window {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: #11151f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.32);
}

.contact-sign-window-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(255, 255, 255, 0.04);
}

.about-profile-bar-dots,
.contact-sign-window-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.about-profile-bar-dots span,
.contact-sign-window-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f38ba8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.about-profile-bar-dots span:nth-child(2),
.contact-sign-window-dots span:nth-child(2) {
  background: #fab387;
}

.about-profile-bar-dots span:nth-child(3),
.contact-sign-window-dots span:nth-child(3) {
  background: #a6e3a1;
}

.contact-sign-window-url {
  flex: 1;
  min-width: 0;
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #9aa4b8;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  text-align: start;
}

.contact-sign-window .contact-sign-text {
  margin: 0;
  padding: clamp(26px, 3.5vw, 38px) clamp(22px, 3vw, 32px) clamp(18px, 2.5vw, 24px);
  color: #f5f7ff;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 600;
  line-height: 1.9;
  text-align: center;
  text-wrap: balance;
}

.contact-sign-window-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: #9aa4b8;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  direction: ltr;
}

.contact-sign-window-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  --dot-c: var(--accent);
  background: var(--accent);
  animation: dot-halo var(--led-dur) var(--ease) infinite;
}

.contact-sign-window-status-caret {
  width: 2px;
  height: 0.9em;
  background: #8295ff;
  animation: cursor-blink 1.1s steps(2, start) infinite;
}

.contact-sign-accent {
  position: relative;
  isolation: isolate;
  display: inline;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.contact-sign-accent::before {
  content: "";
  position: absolute;
  inset: -2px -4px;
  z-index: -1;
  border-radius: 6px;
  background: rgba(59, 91, 253, 0.08);
}

.contact-sign-accent::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.05em;
  left: 0;
  height: 4px;
  border-radius: 3px;
  background: var(--gradient);
  box-shadow: 0 0 4px 1px rgba(59, 91, 253, 0.07), 0 2px 8px rgba(59, 91, 253, 0.25), 0 4px 16px rgba(59, 91, 253, 0.12);
}

.contact-sign-arrows {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 16px);
  padding-block: clamp(16px, 2.5vw, 24px);
  color: var(--accent);
}

.contact-sign-arrows-track {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 91, 253, 0.7), rgba(59, 91, 253, 0.7), transparent);
  opacity: 0.55;
}

.contact-sign-arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--shadow-cta);
  animation: contact-sign-arrow-float 2.6s var(--ease-in-out) infinite;
}

.contact-sign-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes contact-sign-arrow-float {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

@media (max-width: 600px){
  .contact-list {
    width: calc(100% + (2 * var(--page-gutter)));
    max-width: none;
    margin-inline: calc(var(--page-gutter) * -1);
    gap: 0;
  }

  .contact-link-username,
  .contact-link-text {
    font-size: clamp(0.75rem, 3vw, 0.86rem);
    padding: 5px 7px;
  }

  .contact-sign {
    --sign-pad-x: 16px;
    padding: 20px 16px 18px;
    align-self: auto;
    height: auto;
    margin-top: 0;
    width: 100%;
    gap: 0;
}

  .contact-sign-message--start .contact-sign-text,
  .contact-sign-window .contact-sign-text {
    font-size: clamp(0.98rem, 4.4vw, 1.2rem);
    line-height: 1.85;
  }

  .contact-sign-message--start .contact-sign-text {
    max-width: 100%;
    padding: 14px 16px;
  }

  .contact-essay {
    grid-template-columns: 1fr;
  }

  .contact-essay-main {
    padding: 10px;
    width: calc(100% + (2 * var(--page-gutter)));
    max-width: none;
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: 10px;
    border-radius: 0;
  }

  .contact-stage {
    margin-bottom: 40px;
  }

  .contact-essay-bar {
    padding: 10px 12px;
  }

  .contact-essay-console-body {
    padding: 14px 12px;
  }

  .contact-essay-lead {
    margin-top: 10px;
    font-size: 0.88rem;
    line-height: 1.85;
  }

  .contact-essay-body {
    margin-top: 12px;
    font-size: 0.78rem;
    line-height: 1.8;
  }

  .contact-sign-arrows {
    gap: 8px;
    padding-block: 14px;
  }
}

@media (max-width: 900px){
  .contact-essay-console-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-sign {
    align-items: center;
  }

  .contact-stage {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (min-width: 601px) and (max-width: 760px){
  .contact-link {
    padding: 8px;
  }

  .contact-link-text,
  .contact-link-username {
    font-size: 0.75rem;
    padding: 4px 7px;
  }
}

.site-footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
  padding: 0 var(--page-gutter) 0;
  padding-bottom: 0;
  margin: 0;
  margin-bottom: 0;
}

.iran-time {
  --iran-sky-top: #172344;
  --iran-sky-bottom: #405fb0;
  --iran-glow: rgba(255, 217, 125, 0.62);
  --iran-accent: #9cb4ff;
  --iran-text: #f7f9ff;
  --iran-border: rgba(255, 255, 255, 0.14);
  --iran-pad: clamp(18px, 3vw, 34px);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 248px;
  margin: 0;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--iran-border);
  border-radius: 0;
  background: var(--iran-sky-top);
  color: var(--iran-text);
  box-shadow: 0 20px 44px rgba(10, 14, 24, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: background-color 0.9s var(--ease), border-color 0.9s var(--ease), box-shadow 0.9s var(--ease);
}

.iran-time::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(180deg, var(--iran-sky-top) 0%, var(--iran-sky-bottom) 100%);
  transition: background 0.9s var(--ease);
}

.iran-time-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
}

.iran-time-sky-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

/* Two independent dot tiles. Different sizes (180 / 260) and different dot
   placements mean the two fields never line up, so the repeat stays hidden. */
.iran-time-sky-stars--one {
  background-image:
    radial-gradient(circle at 6% 9%, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(circle at 17% 44%, #d7e1ff 0 1px, transparent 1.6px),
    radial-gradient(circle at 29% 21%, #ffffff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 38% 68%, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(circle at 52% 12%, #d7e1ff 0 1.2px, transparent 2px),
    radial-gradient(circle at 61% 83%, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(circle at 74% 34%, #ffffff 0 2px, transparent 2.6px),
    radial-gradient(circle at 86% 58%, #d7e1ff 0 1px, transparent 1.6px),
    radial-gradient(circle at 94% 24%, #ffffff 0 1.2px, transparent 2px);
  background-size: 180px 180px;
  background-repeat: repeat;
  animation: iran-star-twinkle 4.6s var(--ease-in-out) infinite;
}

.iran-time-sky-stars--two {
  background-image:
    radial-gradient(circle at 4% 62%, #d7e1ff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 13% 21%, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(circle at 24% 79%, #ffffff 0 1.2px, transparent 2px),
    radial-gradient(circle at 33% 41%, #d7e1ff 0 2px, transparent 2.6px),
    radial-gradient(circle at 45% 8%, #ffffff 0 1px, transparent 1.6px),
    radial-gradient(circle at 56% 57%, #ffffff 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 68% 31%, #d7e1ff 0 1px, transparent 1.6px),
    radial-gradient(circle at 79% 71%, #ffffff 0 1.2px, transparent 2px),
    radial-gradient(circle at 91% 47%, #ffffff 0 1px, transparent 1.6px);
  background-size: 260px 260px;
  background-repeat: repeat;
  animation: iran-star-twinkle 6.8s var(--ease-in-out) 1.4s infinite;
}

.iran-time-sky-sun,
.iran-time-sky-moon {
  position: absolute;
  top: 9%;
  inset-inline-end: 19%;
  width: clamp(96px, 14vw, 158px);
  aspect-ratio: 1;
  border-radius: 50%;
  transition:
    opacity 0.9s var(--ease),
    transform 1.2s var(--ease),
    background 0.9s var(--ease),
    box-shadow 0.9s var(--ease),
    filter 0.9s var(--ease);
}

.iran-time-sky-sun {
  background: #ffe3a0;
  box-shadow: 0 0 20px 4px rgba(255, 225, 157, 0.12), 0 0 44px 14px var(--iran-glow);
}

.iran-time-sky-moon {
  opacity: 0;
  transform: translateY(16px) scale(0.82);
  background: none;
  filter: drop-shadow(0 0 8px rgba(206, 220, 255, 0.42)) drop-shadow(0 0 22px rgba(140, 172, 255, 0.34));
}

.iran-time-sky-cloud {
  position: absolute;
  z-index: 1;
  width: 24%;
  height: auto;
  opacity: 0;
  transition: opacity 0.9s var(--ease), filter 0.9s var(--ease);
  animation: iran-cloud-drift 20s linear infinite;
  animation-play-state: running !important;
}

.iran-time-sky-cloud--one {
  top: 3%;
  z-index: 6;
  inset-inline-start: 0;
  --cloud-scale: 1.42;
  animation-duration: 140s;
}

.iran-time-sky-cloud--two {
  top: 13%;
  z-index: 4;
  inset-inline-start: 0;
  --cloud-scale: 0.92;
  animation-duration: 100s;
  animation-delay: -30s;
}

.iran-time-sky-cloud--three {
  top: 24%;
  z-index: 2;
  inset-inline-start: 0;
  --cloud-scale: 0.4;
  animation-duration: 70s;
  animation-delay: -74s;
}

.iran-time-sky-cloud--four {
  top: 8%;
  z-index: 5;
  inset-inline-start: 0;
  --cloud-scale: 1.18;
  animation-duration: 120s;
  animation-delay: -14s;
}

.iran-time-sky-cloud--five {
  top: 18%;
  z-index: 3;
  inset-inline-start: 0;
  --cloud-scale: 0.68;
  animation-duration: 84s;
  animation-delay: -58s;
}

.iran-time-sky-cloud--six {
  top: 29%;
  z-index: 1;
  inset-inline-start: 0;
  --cloud-scale: 0.22;
  animation-duration: 42s;
  animation-delay: -102s;
}

.iran-time[data-sky-phase="day"] .iran-time-sky-cloud {
  opacity: 1;
}

.iran-time[data-sky-phase="dawn"] .iran-time-sky-cloud--one,
.iran-time[data-sky-phase="dawn"] .iran-time-sky-cloud--three,
.iran-time[data-sky-phase="dawn"] .iran-time-sky-cloud--five,
.iran-time[data-sky-phase="sunset"] .iran-time-sky-cloud--one,
.iran-time[data-sky-phase="sunset"] .iran-time-sky-cloud--three,
.iran-time[data-sky-phase="sunset"] .iran-time-sky-cloud--five {
  opacity: 1;
}

.iran-time[data-sky-phase="night"] .iran-time-sky-cloud--two,
.iran-time[data-sky-phase="night"] .iran-time-sky-cloud--six {
  opacity: 1;
  filter: brightness(0.5) sepia(0.4) hue-rotate(178deg) saturate(1.5);
}

/* The twinkle runs on brightness, not opacity: both star layers now carry the
   phase opacity themselves (0 / 0.08 / 0.24 / 0.78), and an opacity animation
   would win over those declarations and paint stars into the daylight sky.
   brightness(0.35) matches the old 0.35 alpha of white against the night sky. */
@keyframes iran-star-twinkle {
  0%, 100% { filter: brightness(0.35); }
  50%      { filter: brightness(1); }
}

@keyframes iran-cloud-drift {
  from { transform: translateX(100%) translateY(1.2%) scale(var(--cloud-scale, 1)); }
  24%  { transform: translateX(-27%) translateY(0.2%) scale(var(--cloud-scale, 1)); }
  48%  { transform: translateX(-154%) translateY(0.8%) scale(var(--cloud-scale, 1)); }
  72%  { transform: translateX(-282%) translateY(-1.4%) scale(var(--cloud-scale, 1)); }
  to   { transform: translateX(-430%) translateY(1.2%) scale(var(--cloud-scale, 1)); }
}

@keyframes iran-horizon-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.09); }
}

.iran-time-sky-horizon {
  position: absolute;
  inset-inline-end: 7%;
  bottom: -10%;
  width: 38%;
  height: 26%;
  border-radius: 50% 50% 0 0;
  background: var(--iran-glow);
  filter: blur(22px);
  opacity: 0.46;
  transform-origin: bottom center;
  transition: background var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
  animation: iran-horizon-breathe 7.5s var(--ease-in-out) infinite;
}

.iran-time-readout {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "date clock";
  align-items: end;
  column-gap: clamp(16px, 2.4vw, 34px);
  padding: var(--iran-pad);
  direction: ltr;
  pointer-events: none;
}

.iran-time-clock-card {
  position: absolute;
  top: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  min-width: 118px;
  padding: 10px 16px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-md);
  background: rgba(22, 34, 60, 0.52);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 30px rgba(4, 8, 20, 0.28);
}

:root[data-theme="dark"] .iran-time-clock-card {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(9, 14, 30, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 30px rgba(4, 8, 20, 0.32);
}

.iran-time-clock-card .iran-time-value {
  position: relative;
  top: 0.12em;
}

.iran-time-value {
  grid-area: clock;
  justify-self: end;
  align-self: start;
  color: color-mix(in srgb, var(--iran-text) 92%, transparent);
  font-family: "Vazirmatn", "Vazirmatn Fallback", var(--font-mono);
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow:
    0 0 14px color-mix(in srgb, var(--iran-glow) 70%, transparent),
    0 0 32px color-mix(in srgb, var(--iran-accent) 45%, transparent),
    0 0 52px color-mix(in srgb, var(--iran-glow) 30%, transparent);
  pointer-events: auto;
}

.iran-time-date {
  grid-area: date;
  justify-self: start;
  align-self: end;
  color: #ffffff;
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.2;
  -webkit-text-stroke: 1px #000000;
  paint-order: stroke fill;
  pointer-events: auto;
}

.iran-time[data-sky-phase="dawn"] {
  --iran-sky-top: #3b456e;
  --iran-sky-bottom: #f29a7b;
  --iran-glow: rgba(255, 193, 113, 0.88);
  --iran-accent: #ffd08a;
  --iran-border: rgba(255, 212, 169, 0.32);
}

.iran-time[data-sky-phase="day"] {
  --iran-sky-top: #287bc1;
  --iran-sky-bottom: #8ed8e5;
  --iran-glow: rgba(255, 240, 179, 0.9);
  --iran-accent: #ffe39c;
  --iran-border: rgba(255, 255, 255, 0.3);
}

.iran-time[data-sky-phase="sunset"] {
  --iran-sky-top: #402d69;
  --iran-sky-bottom: #e87470;
  --iran-glow: rgba(255, 177, 100, 0.92);
  --iran-accent: #ffbb83;
  --iran-border: rgba(255, 197, 155, 0.3);
}

.iran-time[data-sky-phase="night"] {
  --iran-sky-top: #080d20;
  --iran-sky-bottom: #182951;
  --iran-glow: rgba(137, 164, 255, 0.4);
  --iran-accent: #a8c0ff;
  --iran-border: rgba(160, 184, 255, 0.24);
}

.iran-time[data-sky-phase="night"] .iran-time-sky-stars {
  opacity: 0.78;
}

.iran-time[data-sky-phase="dawn"] .iran-time-sky-sun,
.iran-time[data-sky-phase="sunset"] .iran-time-sky-sun {
  transform: scale(0.82);
}

.iran-time[data-sky-phase="night"] .iran-time-sky-sun {
  opacity: 0;
  transform: translateY(16px) scale(0.72);
}

.iran-time[data-sky-phase="night"] .iran-time-sky-moon {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.iran-time[data-sky-phase="day"] .iran-time-sky-stars {
  opacity: 0.08;
}

.iran-time[data-sky-phase="dawn"] .iran-time-sky-stars,
.iran-time[data-sky-phase="sunset"] .iran-time-sky-stars {
  opacity: 0.24;
}

/* Phase detail. Every layer here is a gradient on an element the sky already
   paints, and all of it sits inside .iran-time-sky at z-index -2, so the clock
   card and the date always read over it. Colours come from the phase tokens. */
.iran-time[data-sky-phase="dawn"] .iran-time-sky-horizon {
  background-image:
    linear-gradient(0deg, color-mix(in srgb, var(--iran-glow) 82%, transparent) 0%, color-mix(in srgb, var(--iran-accent) 44%, transparent) 44%, transparent 82%),
    radial-gradient(58% 90% at 50% 100%, color-mix(in srgb, var(--iran-accent) 52%, transparent) 0%, transparent 72%);
  height: 34%;
  opacity: 0.58;
}

.iran-time[data-sky-phase="day"] .iran-time-sky-sun {
  background-image:
    radial-gradient(circle at 40% 36%, rgba(255, 255, 255, 0.92) 0%, color-mix(in srgb, var(--iran-accent) 62%, transparent) 38%, transparent 66%),
    radial-gradient(circle, transparent 58%, color-mix(in srgb, #ffffff 26%, transparent) 74%, transparent 92%);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--iran-accent) 16%, transparent),
    0 0 0 14px color-mix(in srgb, var(--iran-accent) 8%, transparent),
    0 0 24px 6px rgba(255, 225, 157, 0.2),
    0 0 48px 18px var(--iran-glow);
}

.iran-time[data-sky-phase="sunset"] .iran-time-sky-horizon {
  background-image:
    linear-gradient(0deg, color-mix(in srgb, var(--iran-sky-bottom) 86%, transparent) 0%, color-mix(in srgb, var(--iran-glow) 58%, transparent) 36%, color-mix(in srgb, var(--iran-accent) 26%, transparent) 64%, transparent 88%),
    radial-gradient(64% 96% at 50% 104%, color-mix(in srgb, var(--iran-accent) 62%, transparent) 0%, transparent 70%);
  height: 42%;
  opacity: 0.68;
}

@media (max-width: 900px){
  .iran-time-readout {
    column-gap: clamp(14px, 2vw, 26px);
  }

  .iran-time-value {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
  }

  .iran-time-date {
    font-size: 0.84rem;
  }
}

@media (max-width: 640px){
  .iran-time {
    min-height: 200px;
    max-height: 200px;
  }

  /* The band is 48px shorter here, so the disc is capped by the date line
     instead of by the sky: 124px ends 24px above where the date starts. */
  .iran-time-sky-sun,
  .iran-time-sky-moon {
    width: clamp(92px, 30vw, 124px);
  }

  .iran-time-readout {
    column-gap: 12px;
  }

  .iran-time-value {
    font-size: clamp(1.6rem, 8vw, 2.1rem);
  }

  .iran-time-date {
    font-size: 0.76rem;
  }
}

.site-footer-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 30px);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.site-footer-band {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block-start: calc(-1 * clamp(20px, 3vw, 30px));
  padding-block-start: clamp(20px, 3vw, 30px);
  padding-inline: var(--page-gutter);
  background: color-mix(in srgb, var(--surface) 12%, #000000);
  color: var(--on-accent);
}

.site-footer-base {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-block: 24px;
  border-top: none;
  box-shadow:
    0 -8px 20px -8px var(--accent-glow-strong),
    0 -2px 6px -2px color-mix(in srgb, var(--accent) 60%, transparent);
}

.site-footer-code {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--on-accent);
  white-space: nowrap;
}

.site-footer-code::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-inline-start: 7px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: cursor-blink 1.1s steps(2, start) infinite;
}

.site-footer-rule {
  position: relative;
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: var(--on-accent-border);
}

.site-footer-dot {
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--on-accent);
  transform: translateY(-50%);
}

.site-footer-copyright {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  white-space: nowrap;
}


@keyframes site-footer-trust-pulse {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes site-footer-trust-lit {
  from { opacity: 0.32; scale: 0.42; }
  55% { opacity: 1; scale: 1.14; }
  to { opacity: 1; scale: 1; }
}

@keyframes site-footer-trust-lock {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes site-footer-trust-unlock {
  from { opacity: 0; }
  to { opacity: 1; }
}


.site-footer-trust {
  position: relative;
  width: 100%;
}

.site-footer-trust-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px 16px;
  border: 1px solid color-mix(in srgb, var(--on-accent) 15%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--on-accent) 13%, transparent) 0%, transparent 30%, color-mix(in srgb, var(--on-accent) 6%, transparent) 56%, transparent 74%, color-mix(in srgb, var(--on-accent) 10%, transparent) 100%),
    repeating-linear-gradient(58deg, color-mix(in srgb, var(--on-accent) 4%, transparent) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, color-mix(in srgb, var(--on-accent) 11%, transparent) 0%, transparent 20% 72%, color-mix(in srgb, var(--accent) 14%, transparent) 100%),
    color-mix(in srgb, var(--surface) 10%, #000000);
  box-shadow: var(--shadow-md), inset 0 1px 0 color-mix(in srgb, var(--on-accent) 20%, transparent);
  font-size: 1rem;
  color: color-mix(in srgb, var(--on-accent) 82%, transparent);
  timeline-scope: --site-footer-trust-unlock;
}

.site-footer-trust-copy::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 14%, transparent),
    inset 0 0 26px var(--accent-glow-strong);
  pointer-events: none;
}

.site-footer-trust-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(104deg, transparent 40%, color-mix(in srgb, var(--on-accent) 14%, transparent) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: -140% 0;
  pointer-events: none;
}

.site-footer-trust-rivets {
  position: absolute;
  inset: 9px;
  pointer-events: none;
}

.site-footer-trust-rivet {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, color-mix(in srgb, var(--on-accent) 54%, transparent) 0%, color-mix(in srgb, var(--on-accent) 14%, transparent) 64%, transparent 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-accent) 10%, transparent), inset 0 -1px 1px color-mix(in srgb, #000000 45%, transparent);
}

.site-footer-trust-rivet:nth-child(1) {
  inset-block-start: 0;
  inset-inline-start: 0;
}

.site-footer-trust-rivet:nth-child(2) {
  inset-block-start: 0;
  inset-inline-end: 0;
}

.site-footer-trust-rivet:nth-child(3) {
  inset-block-end: 0;
  inset-inline-start: 0;
}

.site-footer-trust-rivet:nth-child(4) {
  inset-block-end: 0;
  inset-inline-end: 0;
}

.site-footer-trust-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block-end: 10px;
  border-block-end: 1px solid color-mix(in srgb, var(--on-accent) 12%, transparent);
  color: color-mix(in srgb, var(--on-accent) 62%, transparent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer-trust-led {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: site-footer-trust-pulse var(--led-dur) var(--ease-in-out) infinite;
}

.site-footer-trust-status {
  position: relative;
  flex: none;
  min-width: 76px;
  color: color-mix(in srgb, var(--accent) 90%, var(--on-accent));
  font-family: var(--font-mono), var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}

.site-footer-trust-status-locked {
  display: block;
  white-space: nowrap;
  opacity: 1;
  animation: site-footer-trust-lock linear both;
  animation-timeline: --site-footer-trust-unlock;
  animation-range: entry 60% entry 100%;
}

.site-footer-trust-status-open {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: block;
  white-space: nowrap;
  opacity: 0;
  text-align: center;
  animation: site-footer-trust-unlock linear both;
  animation-timeline: --site-footer-trust-unlock;
  animation-range: entry 60% entry 100%;
}

.site-footer-trust-domain {
  color: color-mix(in srgb, var(--on-accent) 88%, transparent);
}

.site-footer-trust-chip {
  margin-inline-start: auto;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: var(--radius-pill);
  color: color-mix(in srgb, var(--accent) 90%, var(--on-accent));
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.site-footer-trust-body {
  display: grid;
  grid-template-columns: minmax(0, 196px) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  direction: ltr;
}

.site-footer-trust-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.site-footer-trust-dial-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 196px;
  height: 196px;
}

.site-footer-trust-dial-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--on-accent) 22%, transparent) 0%, transparent 56%),
    conic-gradient(from 208deg, color-mix(in srgb, var(--on-accent) 18%, transparent) 0deg, transparent 26deg 132deg, color-mix(in srgb, var(--on-accent) 13%, transparent) 200deg, transparent 268deg),
    radial-gradient(circle, color-mix(in srgb, var(--surface) 6%, #000000) 0%, color-mix(in srgb, #000000 62%, var(--surface)) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--on-accent) 18%, transparent),
    inset 0 0 0 3px color-mix(in srgb, var(--on-accent) 6%, transparent),
    inset 0 0 0 9px color-mix(in srgb, var(--on-accent) 16%, transparent),
    inset 0 0 0 18px color-mix(in srgb, #000000 34%, transparent),
    inset 0 0 0 19px color-mix(in srgb, var(--on-accent) 12%, transparent),
    inset 0 0 26px color-mix(in srgb, #000000 46%, transparent);
}



.site-footer-trust-bolts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-footer-trust-bolt {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-block-start: -5px;
  margin-inline-start: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, color-mix(in srgb, var(--on-accent) 66%, transparent) 0%, color-mix(in srgb, var(--on-accent) 20%, transparent) 62%, color-mix(in srgb, #000000 40%, transparent) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 16%, transparent), 0 0 6px color-mix(in srgb, #000000 40%, transparent);
}

.site-footer-trust-bolt:nth-child(1) {
  inset-inline-start: 50%;
  inset-block-start: 6%;
}

.site-footer-trust-bolt:nth-child(2) {
  inset-inline-start: 88%;
  inset-block-start: 28%;
}

.site-footer-trust-bolt:nth-child(3) {
  inset-inline-start: 88%;
  inset-block-start: 72%;
}

.site-footer-trust-bolt:nth-child(4) {
  inset-inline-start: 50%;
  inset-block-start: 94%;
}

.site-footer-trust-bolt:nth-child(5) {
  inset-inline-start: 12%;
  inset-block-start: 72%;
}

.site-footer-trust-bolt:nth-child(6) {
  inset-inline-start: 12%;
  inset-block-start: 28%;
}

.site-footer-trust-dial-frame a {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 138px;
  height: 138px;
  padding: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 26%, var(--on-accent) 0%, color-mix(in srgb, var(--on-accent) 86%, var(--accent)) 64%, color-mix(in srgb, var(--on-accent) 68%, var(--accent)) 100%);
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}

.site-footer-trust-dial-frame a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-footer-trust-text {
  direction: rtl;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--on-accent) 10%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 12%, #000000);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #000000 42%, transparent),
    var(--shadow-sm);
}

.site-footer-trust-kicker {
  display: block;
  color: color-mix(in srgb, var(--accent) 88%, var(--on-accent));
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.site-footer-trust-text p {
  font-size: 1rem;
  line-height: 1.75;
}

.site-footer-trust-text p:first-of-type {
  margin-block-start: 4px;
  color: var(--on-accent);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 0 18px var(--accent-glow-strong);
}

.site-footer-trust-text p:nth-of-type(2) {
  margin-block-start: 6px;
  padding-block-end: 12px;
  border-block-end: 1px solid color-mix(in srgb, var(--on-accent) 10%, transparent);
}

.site-footer-trust-list {
  margin-block-start: 10px;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.75;
}

.site-footer-trust-row {
  position: relative;
  padding-block: 8px;
  padding-inline-start: 34px;
}

.site-footer-trust-row + .site-footer-trust-row {
  border-block-start: 1px solid color-mix(in srgb, var(--on-accent) 8%, transparent);
}

.site-footer-trust-row:last-child {
  view-timeline-name: --site-footer-trust-unlock;
}

.site-footer-trust-marker {
  position: absolute;
  inset-inline-start: 6px;
  inset-block-start: 50%;
  width: 13px;
  height: 13px;
  margin-block-start: -6.5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--on-accent) 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 20%, transparent);
  opacity: 0.32;
  scale: 0.42;
  animation: site-footer-trust-lit linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

.site-footer-trust-row:nth-child(2) .site-footer-trust-marker {
  animation-range: entry 6% entry 100%;
}

.site-footer-trust-row:nth-child(3) .site-footer-trust-marker {
  animation-range: entry 12% entry 100%;
}

.site-footer-trust-row:nth-child(4) .site-footer-trust-marker {
  animation-range: entry 18% entry 100%;
}

.site-footer-trust-row:nth-child(5) .site-footer-trust-marker {
  animation-range: entry 24% entry 100%;
}

.site-footer-trust-row:nth-child(6) .site-footer-trust-marker {
  animation-range: entry 30% entry 100%;
}

.site-footer-trust-baseplate {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--on-accent) 12%, transparent);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--on-accent) 8%, transparent) 0%, transparent 62%), color-mix(in srgb, var(--surface) 8%, #000000);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-accent) 10%, transparent);
}

.site-footer-trust-baseplate::before {
  content: "";
  flex: 1;
  height: 6px;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--on-accent) 36%, transparent) 0 1.4px, transparent 1.4px);
  background-size: 26px 6px;
  background-position: 0 50%;
  background-repeat: repeat-x;
}

.site-footer-trust-plate {
  flex: none;
  color: color-mix(in srgb, var(--on-accent) 52%, transparent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

@media (max-width: 900px){
  .site-footer-trust-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 16px;
  }

  .site-footer-trust-text {
    width: 100%;
  }
}

@media (max-width: 640px){
  .site-footer {
    padding-block: 0 0;
  }

  .site-footer-inner {
    gap: 18px;
  }

  .site-footer-band {
    margin-block-start: -18px;
    padding-block-start: 18px;
  }

  .site-footer-base {
    gap: 12px;
  }

  .site-footer-code {
    font-size: 0.66rem;
  }

  .site-footer-copyright {
    font-size: 0.75rem;
  }

  .site-footer-trust-copy {
    gap: 12px;
    padding: 14px 12px 12px;
  }

  .site-footer-trust-rivets {
    display: none;
  }

  .site-footer-trust-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .site-footer-trust-status {
    min-width: 68px;
  }

  .site-footer-trust-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .site-footer-trust-dial {
    gap: 8px;
  }

  .site-footer-trust-dial-frame {
    width: 148px;
    height: 148px;
  }


  .site-footer-trust-dial-frame a {
    width: 104px;
    height: 104px;
    padding: 8px;
  }

  .site-footer-trust-text {
    padding: 13px 12px;
  }

  .site-footer-trust-row {
    padding-block: 6px;
    padding-inline-start: 28px;
  }

  .site-footer-trust-marker {
    inset-inline-start: 4px;
    width: 11px;
    height: 11px;
    margin-block-start: -5.5px;
  }

  .site-footer-trust-baseplate {
    gap: 8px;
    padding: 6px 10px;
  }
}

@media (max-width: 790px){
  .iran-time {
    box-shadow: none;
  }
}

.contact-list .contact-link:hover,
.contact-list .contact-link:focus-visible,
.contact-list .contact-link:active {
  box-shadow: none !important;
}

.contact-list .contact-link:hover .contact-link-icon,
.contact-list .contact-link:focus-visible .contact-link-icon,
.contact-list .contact-link:active .contact-link-icon {
  transform: translateY(-50%) !important;
  filter: saturate(1.4) blur(7px) drop-shadow(0 0 18px rgba(59, 91, 253, 0.45)) !important;
}

@media (max-width: 640px) {
  .contact-heading {
    padding-top: clamp(32px, 8vw, 48px);
  }
}
.why {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.why-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  background: var(--surface-alt);
  text-align: center;
}

.why-heading-accent {
  background: linear-gradient(115deg, var(--accent-strong) 0%, var(--accent) 44%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The animated server flanking the why heading. Artwork and animations are
   inlined in this document; this block only frames the host, gives it a
   transparent background, and positions it at the edges. */
.why-heading-server {
  --why-server-gap: clamp(20px, 4vw, 60px);
  --why-server-size: clamp(140px, 18vw, 220px);
  --f: #cfd6e4;
  --p: #a3aec8;
  --d: #1f2440;
  --h: #20284a;
  --g: #2f3762;
  --k: #141a2b;
  --b: #26379a;
  --B: #1c2b85;
  --s: #5b6da8;
  --t: #4a5c94;
  --w: #37426e;
  --c: #00a8e8;
  --C: #0a7fbf;
  --x: #ffffff;
  --o: #000000;
  --l: .14em;
  position: absolute;
  top: 50%;
  width: var(--why-server-size);
  height: var(--why-server-size);
  display: block;
  z-index: 0;
  pointer-events: none;
  font-size: 16px;
  transition: transform 0.3s, opacity 0.3s;
}

/* Inside the frame the drawing sat in a 95vw x 95vh box with 2.5vh auto margins
   — a centred 0.95 inset. Scaling the svg by the same 0.95 keeps that footprint,
   and 16px is the frame's default root size that --l's em values resolve
   against. Both server copies keep their own id namespace (-right / -left). */
.why-heading-server--right {
  right: var(--why-server-gap);
  transform: translateY(-50%) scale(0.95);
}

.why-heading-server--left {
  left: var(--why-server-gap);
  transform: translateY(-50%) rotate(180deg) scale(0.95);
}

.why-heading-server *,
.why-heading-server *::before,
.why-heading-server *::after {
  transition: fill 0.3s, stroke 0.3s, filter 0.3s, opacity 0.3s, transform 0.3s;
}

.why-heading-server .m {
  transform: matrix(-1, 0, 0, 1, 475, 0);
}

.why-heading-server .n,
.why-heading-server .l {
  filter: drop-shadow(0 0 var(--l) var(--c));
}

.why-heading-server .l {
  stroke: var(--c);
}

.why-heading-server .f {
  animation: why-server-bob 2s ease-in-out infinite alternate;
}

.why-heading-server .e,
.why-heading-server .v {
  animation: why-server-led 0.2s infinite alternate;
}

.why-heading-server .e {
  fill: #17e300;
  --z: #17e300b4;
}

.why-heading-server .v {
  fill: #ff5f4a;
  --z: #ff5f4a99;
}

:root[data-theme="dark"] .why-heading-server {
  --f: #1f2a42;
  --p: #2d3b58;
  --d: #232f4a;
  --h: #2f3d5c;
  --g: #3b4b72;
  --k: #161f30;
  --b: #6f88ff;
  --B: #5871e0;
  --s: #7a93d8;
  --t: #5e74aa;
  --w: #4a5c8e;
  --c: #5ce6ff;
  --C: #2fb8ee;
  --x: #a8c0ff;
  --o: #dbe6ff;
  --l: .38em;
}

@keyframes why-server-bob {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}

@keyframes why-server-led {
  to { fill: var(--z); }
}

@media (max-width: 640px) {
  .why-heading-server {
    --why-server-size: clamp(100px, 25vw, 150px);
    --why-server-gap: clamp(10px, 2vw, 20px);
  }
}
:root[data-theme="dark"] .why-heading-cmd {
  background: var(--surface);
}

:root[data-theme="dark"] .why-heading-title {
  text-shadow: none;
}

.why-intro {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-strong));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-strong));
  background:
    radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 70%),
    radial-gradient(60% 40% at 100% 100%, color-mix(in srgb, var(--accent-2) 8%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #f5f5f5 0%, #ebebeb 100%);
}

:root[data-theme="dark"] .why-intro {
  background:
    radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%),
    radial-gradient(60% 40% at 100% 100%, color-mix(in srgb, var(--accent-2) 14%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #080808 0%, #121212 100%);
}

.why-intro-inner {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(24px, 3.2vw, 44px) clamp(16px, 3vw, 40px);
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.why-intro-inner::before {
  content: "";
  position: absolute;
  inset: clamp(12px, 1.6vw, 20px);
  pointer-events: none;
  color: color-mix(in srgb, var(--accent) 46%, transparent);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size:
    22px 1.5px,
    1.5px 22px,
    22px 1.5px,
    1.5px 22px,
    22px 1.5px,
    1.5px 22px,
    22px 1.5px,
    1.5px 22px;
  background-position:
    0 0,
    0 0,
    100% 0,
    100% 0,
    0 100%,
    0 100%,
    100% 100%,
    100% 100%;
  background-repeat: no-repeat;
}

.why-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  /* The side area spans both the lead row and the separator row, so the compare
     panel's top edge meets the lead frame's and its bottom edge meets the
     separator's. */
  grid-template-areas:
    "lead side"
    "sep side"
    "stats stats";
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
}

.why-intro-side {
  --wside-base: #060911;
  --wside-surface: #0c1222;
  --wside-line: color-mix(in srgb, var(--accent) 22%, transparent);
  --wside-ink: #f2f6ff;
  --wside-ink-muted: #93a0bd;
  /* Published as a token so the interior can grow back out through the
     padding: the panel keeps its inset, the block still reaches the border. */
  --wside-pad: clamp(20px, 2.6vw, 32px);
  grid-area: side;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* The interior is a single cell: one flexible row, stretched on both axes,
     hands .d2-board the whole content box with nothing left over above or
     below it. */
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  align-content: stretch;
  min-width: 0;
  /* min-height stays 0, not 100%: the site's panel spans the lead and separator
     rows and is sized by them, so it must stay free to shrink. */
  min-height: 0;
  align-self: stretch;
  height: 100%;
  padding: var(--wside-pad);
  /* The board widens back out through the padding on both sides, so it is
     clipped here: the rows stop at the border and the corner radius stays
     clean. The interior's inset cards and hover lift stay within this clip. */
  overflow: hidden;
  border: 1px solid var(--wside-line);
  border-radius: calc(var(--radius-md) + 6px);
  color: var(--wside-ink);
  background:
    radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 58%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, var(--wside-surface) 0%, var(--wside-base) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 32px 80px -28px rgba(0, 0, 0, 0.72),
    0 16px 36px -24px color-mix(in srgb, var(--accent) 28%, transparent);
}

.why-intro-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(242, 246, 255, 0.14) 1px, transparent 0);
  background-size: 18px 18px;
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* The empty slot is a dark panel on purpose in both themes: this override
   restates the same local tokens, so light and dark resolve identically. */
:root[data-theme="dark"] .why-intro-side {
  --wside-base: #060911;
  --wside-surface: #0c1222;
  --wside-line: color-mix(in srgb, var(--accent) 22%, transparent);
  --wside-ink: #f2f6ff;
  --wside-ink-muted: #93a0bd;
}

/* --- .why-intro-side interior: the two-world compare board. -------------- */
/* The shell rule above owns the panel itself (tokens, border, radius, padding,
   background, shadow); this block draws only the interior. One axis divides two
   lanes: the with-website world at the inline start, the without-website world
   at the inline end, and four questions that span both. Every side is written
   logically, so the pair mirrors cleanly under the page's RTL direction, and no
   light-theme override is needed: the shell's dark override already restates
   the five --wside-* values, so the block stays dark in both themes. */

/* --- The board: two worlds, four questions, one axis. -------------------- */
/* Three columns: the with-website lane, the axis, the without-website lane.
   Every strip uses this one template and this one gutter, so the lanes stay
   aligned down the whole board without needing a subgrid. The axis is a real
   grid item rather than a layer draped over the panel, so it can never drift
   from the cells it divides, and the lane cells own the two tints. Both stop
   wherever a question band takes the full width, which is why the columns and
   the line read as cut at every question: that falls out of the structure
   instead of an opaque patch painted over the paint. */
.d2-board {
  /* The rows reach the panel's border: the shell's padding is pulled back here
     and handed to the cells that own text, so the tints and the rules span the
     panel edge to edge while every line of text keeps one gutter. */
  margin-inline: calc(-1 * var(--wside-pad));
  position: relative;
  z-index: 1;
  display: grid;
  /* The legend opens the board and the four groups share what is left, so a
     panel stretched by the card beside it fills with four even rows rather than
     pooling all the slack under the last one. */
  grid-template-rows: auto repeat(4, minmax(min-content, 1fr));
}

/* One lane row: a cell, the axis, the other cell. */
.d2-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr);
  column-gap: clamp(12px, 1.4vw, 18px);
  align-items: stretch;
  min-width: 0;
}

/* The axis between the two worlds. One segment per strip and the strips touch,
   so the segments read as a single line that only the question bands cut. */
.d2-axis {
  position: relative;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--accent) 55%, transparent) 0 6px,
    transparent 6px 12px
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* The shared cell: a flex line, so each lane can hug its own outer edge. */
.d2-lane,
.d2-a {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Mirror pair. The lane at the inline start hugs the start edge and owns the
   outer gutter on that side, the other lane does the same at the inline end, so
   the two stay balanced at any width and swap sides with the direction. The
   with-lane carries the tint and the ink, the without-lane the quieter warm
   ground and the muted tone: the panel's answer is legible before a word is
   read. */
.d2-lane--with,
.d2-a--with {
  justify-content: flex-start;
  text-align: start;
  padding-inline-start: var(--wside-pad);
  color: var(--wside-ink);
  background: color-mix(in srgb, var(--accent) 13%, var(--wside-surface));
}

.d2-lane--no,
.d2-a--no {
  justify-content: flex-end;
  text-align: end;
  padding-inline-end: var(--wside-pad);
  color: var(--wside-ink-muted);
  background: color-mix(in srgb, #3a0b12 22%, var(--wside-surface));
}

/* The legend: the same two lanes one step louder, and the only place the check
   and the cross are drawn. Stating the two sides once here is what lets the
   answers below stay free of a repeated lane prefix on every line. */
.d2-strip--legend {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--wside-surface)) 0%, color-mix(in srgb, var(--wside-surface) 92%, #000 8%) 100%);
  border-block-end: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.d2-strip--legend .d2-lane {
  position: relative;
  gap: clamp(8px, 1vw, 12px);
  padding-block: clamp(15px, 1.7vw, 20px);
}

.d2-lane-name {
  min-width: 0;
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.d2-strip--legend .d2-lane--with {
  background:
    radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--accent) 32%, transparent) 0%, transparent 66%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, var(--wside-surface)) 0%, color-mix(in srgb, var(--accent) 12%, var(--wside-surface)) 100%);
  color: #f8fbff;
}

.d2-strip--legend .d2-lane--no {
  background:
    radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, #ef4444 8%, transparent) 0%, transparent 66%),
    linear-gradient(225deg, color-mix(in srgb, #3a0b12 34%, var(--wside-surface)) 0%, color-mix(in srgb, #3a0b12 18%, var(--wside-surface)) 100%);
  color: #c9acb2;
}

.d2-strip--legend .d2-axis {
  z-index: 3;
  background: none;
  box-shadow: none;
}

.d2-strip--legend .d2-axis::before {
  content: "VS";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: block;
  padding: 0 4px;
  color: var(--accent);
  font-family: var(--font-term);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--accent) 70%, transparent),
    0 0 26px color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.d2-strip--legend .d2-mark {
  display: none;
}

/* A question and its two answers: the band hugs its caption and the strip takes
   the rest, so a group handed extra height grows its answers and keeps the
   caption compact. */
.d2-group {
  display: grid;
  grid-template-rows: auto minmax(min-content, 1fr);
  min-width: 0;
}

/* Question band: the premise both lanes answer, anchored to the inline start
   and spanning the board. It owns the hairline that opens its group, so that
   rule reads as belonging to the question under it, and its block padding is
   what separates one pair of answers from the next. */
.d2-q {
  position: relative;
  margin: 0;
  padding-block: clamp(14px, 1.7vw, 20px);
  padding-inline: calc(var(--wside-pad) + 8px) var(--wside-pad);
  border-block-start: 1px solid var(--wside-line);
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 8%, transparent) 50%, transparent 100%),
    color-mix(in srgb, var(--wside-surface) 88%, #000 12%);
  color: var(--wside-ink);
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: clamp(0.92rem, 0.82rem + 0.12vw, 1rem);
  font-weight: 700;
  line-height: 1.85;
  text-align: start;
  text-wrap: balance;
}

.d2-strip--legend + .d2-group .d2-q {
  border-block-start: 0;
}

.d2-q::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 0;
  width: 3px;
  height: clamp(16px, 1.8vw, 22px);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 20%, transparent) 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-50%);
}

/* Answer cells: one step below the caption. Block padding only ever acts as a
   floor, since a stretched strip centres the line in the height it is given. */
.d2-a {
  position: relative;
  margin-block: clamp(5px, 0.7vw, 8px);
  padding-block: clamp(12px, 1.4vw, 16px);
  padding-inline: clamp(14px, 1.6vw, 20px);
  border-radius: calc(var(--radius-md) + 2px);
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: clamp(0.84rem, 0.82rem + 0.1vw, 0.92rem);
  line-height: 1.75;
}

.d2-a--with {
  margin-inline-start: clamp(10px, 1.2vw, 16px);
  padding-inline: clamp(14px, 1.6vw, 20px);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-inline-end: 3px solid color-mix(in srgb, #22c55e 78%, var(--accent));
  background:
    radial-gradient(130% 160% at 100% 0%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--wside-surface)) 0%, color-mix(in srgb, var(--accent) 14%, var(--wside-surface)) 100%);
  box-shadow:
    0 14px 28px -20px color-mix(in srgb, var(--accent) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #f7fbff;
  font-weight: 700;
  text-shadow: 0 1px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}

.d2-a--no {
  margin-inline-end: clamp(10px, 1.2vw, 16px);
  padding-inline: clamp(14px, 1.6vw, 20px);
  border: 1px solid color-mix(in srgb, #ef4444 22%, var(--wside-line));
  border-inline-start: 3px solid color-mix(in srgb, #ef4444 42%, transparent);
  background:
    radial-gradient(130% 160% at 0% 0%, color-mix(in srgb, #ef4444 10%, transparent) 0%, transparent 62%),
    linear-gradient(225deg, color-mix(in srgb, #3a0b12 34%, var(--wside-surface)) 0%, color-mix(in srgb, #3a0b12 18%, var(--wside-surface)) 100%);
  box-shadow:
    0 12px 24px -20px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #c9acb2;
  font-weight: 500;
}

@media (hover: hover) {
  .d2-a {
    transition: transform 180ms var(--ease);
  }

  .d2-a--with:hover,
  .d2-a--no:hover {
    transform: translateY(-2px) scale(1.01);
  }
}

.why-intro-main {
  display: contents;
}

.why-intro-lead-frame {
  grid-area: lead;
  position: relative;
  align-self: stretch;
  /* One column: the quote takes the top of the card and the ghost pair hangs on
     the bottom edge, so the slack of a stretched card is left between the two
     instead of being split above and below a centred quote. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(14px, 1.8vw, 26px);
  /* A size container, so the card never sizes itself from its quote: the
     script that fits the type measures this card's own height, and without
     containment the quote would feed its growth back into the row. The
     stacked layout below hands the card back to its content. */
  container-type: size;
  isolation: isolate;
  padding: clamp(24px, 2.8vw, 40px);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-strong));
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1.7px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 94%, var(--accent-2)) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent),
    0 26px 56px -40px color-mix(in srgb, var(--accent) 65%, transparent),
    var(--shadow-md);
}

/* The oversized quotation mark: a watermark in the free corner, far quieter
   than the guillemets that bracket the text itself. */
.why-intro-lead-frame::before {
  content: "\00AB";
  position: absolute;
  inset-block-start: clamp(6px, 1vw, 14px);
  inset-inline-end: clamp(12px, 1.8vw, 26px);
  z-index: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: clamp(7rem, 10vw, 9.5rem);
  font-weight: 700;
  line-height: 0.8;
  opacity: 0.08;
  pointer-events: none;
}

.why-intro-lead-frame::after {
  content: "";
  position: absolute;
  inset-block-end: clamp(14px, 1.6vw, 20px);
  inset-inline-end: clamp(14px, 1.6vw, 20px);
  width: clamp(26px, 3vw, 40px);
  height: clamp(26px, 3vw, 40px);
  border-block-end: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-inline-end: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  pointer-events: none;
}

:root[data-theme="dark"] .why-intro-lead-frame {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border-strong));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 62%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1.7px) 0 0 / 22px 22px,
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 94%, var(--accent-tint)) 0%, var(--surface) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
    0 26px 60px -38px color-mix(in srgb, var(--accent) 60%, transparent),
    var(--shadow-md);
}

:root[data-theme="dark"] .why-intro-lead-frame::before {
  opacity: 0.11;
}

/* Stacked layout: the card stands alone in its row, nothing stretches it any
   more, so it goes back to hugging its quote. */
@media (max-width: 900px) {
  .why-intro-lead-frame {
    container-type: normal;
  }
}

.why-intro-lead {
  position: relative;
  /* The card's column layout is what pins the quote: it is the first child, so
     the room a stretched card leaves over is pushed below it, down to the ghost
     pair on the bottom edge. The quote only stops stretching at its own
     measure, so it stays against the card's start edge on the wide side. */
  align-self: stretch;
  max-width: min(100%, 52ch);
  margin: 0;
  color: color-mix(in srgb, var(--text) 86%, #0a1020);
  /* Where the card hugs its quote (the stacked layout) this is the whole
     story; where the card is stretched beside the compare panel, js/site.js
     measures the card and raises this size until the lines nearly fill it. */
  font-size: clamp(1.3rem, 2.5vw, 2.05rem);
  font-weight: 700;
  line-height: 1.62;
  text-wrap: pretty;
}

:root[data-theme="dark"] .why-intro-lead {
  color: color-mix(in srgb, var(--text) 94%, var(--accent));
}

/* Two-column layout only. There the card is stretched beside the compare panel
   and the fitted quote fills the room the ghost band leaves, so its box starts
   flush against the card's top padding while the gap plus the band's own clear
   space sits below it, which reads high. This is a relative offset rather than
   a top margin on purpose: it moves the painted lines down without claiming
   any of the layout height js/site.js fits the type into, so it can never
   overflow the content box or push the ghost pair off the bottom edge. The
   nudge tracks the card's gap (1.8vw) at a smaller rate, which keeps it under
   that gap at every width the two-column layout is active. */
@media (min-width: 901px) {
  .why-intro-lead {
    top: clamp(8px, 1vw, 14px);
  }
}

.why-intro-quote {
  position: absolute;
  z-index: 1;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 4em;
  font-weight: 800;
  line-height: 0.9;
  opacity: 0.26;
  text-shadow:
    0 0 16px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 40px color-mix(in srgb, var(--accent) 22%, transparent);
  pointer-events: none;
}

.why-intro-quote--open {
  inset-inline-start: -0.08em;
  top: -0.2em;
}

.why-intro-quote--open::before {
  content: "\00AB";
}

.why-intro-quote--close {
  inset-inline-end: -0.06em;
  bottom: -0.26em;
}

.why-intro-quote--close::before {
  content: "\00BB";
}

.why-intro-sep {
  grid-area: sep;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  min-width: 0;
  align-self: end;
  padding: 8px clamp(12px, 1.4vw, 16px);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: var(--shadow-sm);
}

.why-intro-sep-led {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent),
    0 0 12px 3px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: dot-halo var(--led-dur) var(--ease) infinite;
}

.why-intro-sep-label {
  flex: none;
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.why-intro-sep-line {
  flex: 1 1 auto;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 48%, transparent), transparent 82%);
}

/* --- .why-intro-ghosts: the reserved band under the quote. -------------- */
/* The container is intentionally empty of content. It keeps the band at the
   bottom edge that the quote fitting in js/site.js measures, so the quote never
   runs into that edge. Everything below is decoration: the pseudo-elements are
   absolutely positioned, so they never change the band's layout height and the
   script's measurement stays exact. */
.why-intro-ghosts {
  /* The card's last flow child, so this is the row that meets the bottom edge.
     It keeps its own layout height and never shrinks: the quote gives up the
     room instead, which is why js/site.js measures this band and fits the type
     to what is left above it. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 40px);
  min-width: 0;
  min-height: 160px;
  border-radius: clamp(10px, 1.2vw, 14px);
  background:
    linear-gradient(90deg, transparent, var(--accent)) 100% 0 / 46px 2px no-repeat,
    radial-gradient(120% 130% at 8% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 62%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 17%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 52%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 5%, var(--surface)) 100%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 13%, var(--border)),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* A floating code panel: header dots, three signal bars and a soft lift, so the
   reserved band reads as an intentional console rather than leftover space. */
.why-intro-ghosts::before {
  content: "";
  position: absolute;
  inset-block-end: 16%;
  inset-inline-start: 7%;
  z-index: 1;
  width: min(46%, 210px);
  height: 56%;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 13px 11px, color-mix(in srgb, var(--accent) 90%, #ffffff) 1.5px, transparent 2.4px),
    radial-gradient(circle at 25px 11px, color-mix(in srgb, var(--accent-2) 55%, transparent) 1.5px, transparent 2.4px),
    radial-gradient(circle at 37px 11px, color-mix(in srgb, var(--accent) 32%, transparent) 1.5px, transparent 2.4px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent) 12px 44% / 62% 3px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 42%, transparent), transparent) 12px 60% / 46% 3px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent) 12px 76% / 72% 3px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 15%, transparent) 0 22px, transparent 22px),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, var(--accent-tint)) 0%, var(--surface) 100%);
  box-shadow:
    0 18px 34px -22px color-mix(in srgb, var(--accent) 70%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: rotate(-3deg);
  pointer-events: none;
}

/* A wireframe orbit breaking the top edge of the band, with one lit node. */
.why-intro-ghosts::after {
  content: "";
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -8%;
  z-index: 0;
  width: 60%;
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 66%, color-mix(in srgb, var(--accent) 95%, #ffffff) 2.2px, color-mix(in srgb, var(--accent) 40%, transparent) 5px, transparent 6px),
    radial-gradient(closest-side, transparent 61%, color-mix(in srgb, var(--accent) 22%, transparent) 61.5% 62.6%, transparent 63%),
    radial-gradient(closest-side, transparent 81%, color-mix(in srgb, var(--accent) 14%, transparent) 81.5% 82.6%, transparent 83%);
  transform: rotate(-10deg);
  pointer-events: none;
}

:root[data-theme="dark"] .why-intro-ghosts {
  background:
    linear-gradient(90deg, transparent, var(--accent)) 100% 0 / 46px 2px no-repeat,
    radial-gradient(120% 130% at 8% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 64%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 26%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 88%, var(--accent-tint)) 0%, color-mix(in srgb, var(--surface) 94%, var(--accent)) 100%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .why-intro-ghosts::before {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:
    0 18px 42px -20px color-mix(in srgb, var(--accent) 90%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .why-intro-ghosts::after {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.why-intro-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.3vw, 18px);
  min-width: 0;
  padding: clamp(16px, 1.8vw, 22px);
  border: 1px solid color-mix(in srgb, var(--border-strong) 78%, transparent);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 97%, var(--accent-tint)) 100%);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.why-stat::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: clamp(16px, 1.8vw, 22px);
  width: clamp(28px, 3vw, 44px);
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  pointer-events: none;
}

:root[data-theme="dark"] .why-stat {
  background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.why-stat-head {
  order: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1vw, 12px);
  min-width: 0;
  direction: rtl;
}

.why-stat-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 12%, transparent);
}

.why-stat-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.why-stat-body,
.why-stat-figure {
  display: contents;
}

.why-stat-value {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  padding-bottom: clamp(4px, 0.5vw, 6px);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 30%, transparent);
  white-space: nowrap;
}

.why-stat:nth-child(1) .why-stat-value,
.why-stat:nth-child(3) .why-stat-value {
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 78%, var(--text));
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 42%, transparent);
}

.why-stat-value::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--accent) 65%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 38%, transparent);
  transform-origin: right;
  transition: transform 0.75s var(--ease-out);
}

.js-reveal .why-stat-value::after {
  transform: scaleX(0);
}

.why-stat-meter {
  order: 4;
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  margin-top: clamp(2px, 0.4vw, 4px);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 14%, var(--border));
  overflow: hidden;
}

.why-stat-meter-fill {
  display: block;
  height: 100%;
  width: var(--meter, 0%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  transform-origin: right;
  transition: transform 0.9s var(--ease-out);
}

.js-reveal .why-stat-meter-fill {
  transform: scaleX(0);
}

.why-stat:nth-child(1) .why-stat-meter-fill {
  --meter: 5%;
}

.why-stat:nth-child(2) .why-stat-meter-fill {
  --meter: 100%;
}

.why-stat:nth-child(3) .why-stat-meter-fill {
  --meter: 2%;
}

.why-stat:nth-child(4) .why-stat-meter-fill {
  --meter: 100%;
}

.why-stat-text {
  order: 3;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(0.86rem, 1vw, 0.98rem);
  font-weight: 400;
  line-height: 1.85;
  text-wrap: pretty;
  direction: rtl;
  text-align: right;
}

.js-reveal .why-stat.is-visible {
  opacity: 1;
  transform: none;
}

.js-reveal .why-stat.is-visible .why-stat-value::after {
  transform: scaleX(1);
}

.js-reveal .why-stat.is-visible .why-stat-meter-fill {
  transform: scaleX(1);
}

@media (max-width: 900px) {
  .why-intro-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "lead"
      "sep"
      "side"
      "stats";
  }

  .why-intro-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .why-intro-inner {
    padding-inline: clamp(14px, 4vw, 20px);
  }

  .why-stat {
    gap: clamp(10px, 3vw, 14px);
    padding: clamp(14px, 3.6vw, 18px);
  }
}

@media (max-width: 460px) {
  .why-stat-value {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
}

.presence {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  isolation: isolate;
  overflow: hidden;
}

.presence-inner {
  position: relative;
  display: grid;
  grid-template-columns: clamp(320px, 25vw, 360px) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 44px);
  direction: ltr;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-inline-start: clamp(16px, 3vw, 32px);
  overflow: hidden;
}

.presence-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(100%, 360px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.presence-slot {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  align-self: stretch;
  min-width: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-strong));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent) 0%, color-mix(in srgb, var(--surface-alt) 78%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent),
    var(--shadow-sm);
}

:root[data-theme="dark"] .presence-slot {
  border-left-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, transparent) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    var(--shadow-sm);
}

.presence-art__awake,
.presence-art__sleep {
  position: relative;
  isolation: isolate;
  display: none;
  align-items: center;
  justify-content: center;
}

.presence[data-state="awake"] .presence-art__awake {
  display: block;
}

.presence[data-state="asleep"] .presence-art__sleep,
.presence[data-state="resting"] .presence-art__sleep {
  display: flex;
}

@media (max-width: 790px) {
  .presence-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(16px, 5vw, 28px);
    padding-inline-start: 0;
  }
}

.presence-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) clamp(64px, 7vw, 84px);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "core meta battery"
    "panel panel panel";
  align-items: stretch;
  gap: 0;
  min-width: 0;
  width: 100%;
}

@media (max-width: 680px) {
  .presence-status {
    grid-template-columns: minmax(0, 1fr) clamp(64px, 7vw, 84px);
    grid-template-rows: auto;
    grid-template-areas:
      "core core"
      "meta battery"
      "panel panel";
  }
}

.presence-status-core {
  position: relative;
  isolation: isolate;
  contain: layout style;
  grid-area: core;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 26px);
  min-width: 0;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 62%),
    color-mix(in srgb, var(--surface) 74%, transparent);
  text-align: center;
}

.presence-status-line {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 18px);
  min-width: 0;
  max-width: 100%;
}

.presence-status-led {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  --dot-c: var(--accent);
  background: var(--dot-c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot-c) 14%, transparent);
  animation: dot-halo var(--led-dur) var(--ease) infinite;
}

.presence-status-led::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid color-mix(in srgb, var(--dot-c) 45%, transparent);
  animation: presence-led-ring 2.6s var(--ease-out) infinite;
}

@keyframes presence-led-ring {
  0% {
    opacity: 0.75;
    transform: scale(0.75);
  }

  70% {
    opacity: 0;
    transform: scale(1.3);
  }

  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

.presence-status-text {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.7rem, 3.3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  direction: rtl;
  unicode-bidi: isolate;
}

.presence[data-state="asleep"] .presence-status-text,
.presence[data-state="resting"] .presence-status-text {
  color: var(--text-muted);
}

.presence[data-state="asleep"] .presence-status-led,
.presence[data-state="resting"] .presence-status-led {
  --dot-c: var(--text-faint);
}

.presence-status-meta {
  position: relative;
  contain: layout style;
  grid-area: meta;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-inline-start: 0;
  background-color: #0c111d;
  background-image:
    radial-gradient(130% 160% at 0% 0%, rgba(117, 146, 255, 0.26) 0%, transparent 58%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 44%);
  background-size: 100% 100%, 10px 10px, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -16px 28px rgba(0, 0, 0, 0.36),
    0 16px 34px rgba(9, 13, 24, 0.28);
  overflow: hidden;
}

:root[data-theme="dark"] .presence-status-meta {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background-color: color-mix(in srgb, var(--surface) 88%, #000000);
  background-image:
    radial-gradient(130% 160% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 58%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 46%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.46);
}

.presence-status-meta::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 78%, #ffffff) 24%, color-mix(in srgb, var(--accent) 34%, transparent) 64%, transparent 100%);
  pointer-events: none;
}

.presence-status-meta::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 5px;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 9px);
  pointer-events: none;
}

.presence-status-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.8vw, 10px);
  min-width: 0;
  padding: clamp(14px, 1.9vw, 22px) clamp(8px, 1.2vw, 16px);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.09);
  text-align: center;
  transition: background-color var(--dur-base) var(--ease);
}

.presence-status-chip:first-child {
  border-inline-start: 0;
}

.presence-status-chip:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.presence-status-chip-value {
  order: 2;
  min-width: 0;
  max-width: 100%;
  color: #ffffff;
  font-family: "JetBrains Mono", "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.presence-status-chip:nth-child(2) {
  grid-column: 1 / -1;
  order: -1;
  border-inline-start: 0;
  border-block-end: 1px solid rgba(255, 255, 255, 0.09);
  padding-block: clamp(18px, 2.4vw, 28px);
}

time.presence-status-chip-value {
  color: color-mix(in srgb, var(--accent) 42%, #ffffff);
  font-family: "JetBrains Mono", "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 62%, transparent);
}

.presence-status-chip-caption {
  order: 1;
  min-width: 0;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}

.presence-status-chip--battery {
  grid-area: battery;
  justify-self: start;
  width: clamp(64px, 7vw, 84px);
  min-height: 68px;
  padding: 0;
  border: 0;
}

.presence-status-battery {
  --battery-level-color: rgba(255, 255, 255, 0.06);
  --battery-level-core: rgba(255, 255, 255, 0.2);
  --battery-glow: transparent;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  container-type: size;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
}

.presence-status-battery[data-level="1"] {
  --battery-level-color: hsl(2, 100%, 60%);
  --battery-level-core: hsl(2, 100%, 82%, 0.8);
  --battery-glow: hsl(2, 100%, 56%, 0.62);
}

.presence-status-battery[data-level="2"] {
  --battery-level-color: hsl(28, 100%, 56%);
  --battery-level-core: hsl(38, 100%, 80%, 0.8);
  --battery-glow: hsl(28, 100%, 54%, 0.62);
}

.presence-status-battery[data-level="3"] {
  --battery-level-color: hsl(64, 100%, 56%);
  --battery-level-core: hsl(72, 100%, 84%, 0.8);
  --battery-glow: hsl(64, 100%, 54%, 0.62);
}

.presence-status-battery[data-level="4"] {
  --battery-level-color: hsl(141, 96%, 50%);
  --battery-level-core: hsl(150, 100%, 82%, 0.8);
  --battery-glow: hsl(141, 96%, 48%, 0.62);
}

.presence-status-battery-body {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--battery-level-color) 48%, rgba(255, 255, 255, 0.3));
  background: rgba(3, 5, 11, 0.85);
  box-shadow:
    0 0 6px var(--battery-glow),
    0 0 14px var(--battery-glow),
    inset 0 0 6px rgba(0, 0, 0, 0.55);
  
}

.presence-status-battery-cell {
  flex: 1 1 0;
  min-height: 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6);
  
}

.presence-status-battery-bolt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  aspect-ratio: 1;
  color: #ffffff;
  filter: drop-shadow(0 0 3px rgba(4, 8, 18, 0.72));
  opacity: 0;
  transform: translate(-50%, -50%);
}

.presence-status-battery-readout {
  grid-area: 1 / 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0.24em;
  min-width: 0;
  color: #ffffff;
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: clamp(0.78rem, min(18cqh, 42cqw), 2.4rem);
  font-weight: 500;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 1px 2px rgba(4, 8, 18, 0.9),
    0 0 10px rgba(4, 8, 18, 0.7);
}

.presence-status-battery-readout > span {
  display: block;
  width: 0.82em;
  text-align: center;
  transform: translateX(0.05em);
}

.presence-status-battery-readout:empty {
  display: none;
}

.presence-status-battery[data-level="1"] .presence-status-battery-cell:first-child,
.presence-status-battery[data-level="2"] .presence-status-battery-cell:nth-child(-n + 2),
.presence-status-battery[data-level="3"] .presence-status-battery-cell:nth-child(-n + 3),
.presence-status-battery[data-level="4"] .presence-status-battery-cell {
  background: var(--battery-level-color);
  box-shadow:
    inset 0 0 4px var(--battery-level-core),
    inset 0 0 8px var(--battery-glow),
    0 0 6px var(--battery-glow);
}

.presence-status-battery[data-level="1"] .presence-status-battery-cell:first-child {
  animation: presence-battery-blink 2.6s var(--ease-in-out) infinite;
}

.presence-status-battery[data-charging="true"] .presence-status-battery-bolt {
  opacity: 1;
}

@keyframes presence-battery-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

.presence-status-progress {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(12px, 1.15vw, 15px);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  background-color: color-mix(in srgb, var(--surface-alt) 84%, var(--bg));
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-faint) 34%, transparent) 0 1px, transparent 1px 4.1667%),
    linear-gradient(180deg, color-mix(in srgb, #000000 8%, transparent) 0%, transparent 64%);
  background-size: 100% 44%, 100% 100%;
  background-position: 0 100%, 0 0;
  background-repeat: repeat-x, no-repeat;
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000000 12%, transparent);
  overflow: hidden;
}

.presence-status-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-faint) 52%, transparent) 0 1px, transparent 1px 16.6667%);
  pointer-events: none;
}

.presence-status-progress::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 3;
  width: 34%;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent-strong) 42%, transparent) 50%, transparent 100%);
  transform: translateX(-110%);
  animation: presence-progress-scan 3.6s var(--ease-in-out) infinite;
  pointer-events: none;
}

@keyframes presence-progress-scan {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(390%);
  }
}

.presence-status-progress-fill {
  position: relative;
  z-index: 1;
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 86%, transparent) 0%, color-mix(in srgb, var(--accent-2) 92%, transparent) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
  
}

.presence-status-progress-fill::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 2px;
  background: color-mix(in srgb, #ffffff 80%, var(--accent-strong));
  box-shadow:
    0 0 8px color-mix(in srgb, var(--accent) 66%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 42%, transparent);
  animation: presence-progress-edge 2.4s var(--ease-in-out) infinite;
}

@keyframes presence-progress-edge {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.presence-panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 20px);
  min-width: 0;
  padding: clamp(14px, 1.9vw, 22px);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-block-start: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent) 0%, color-mix(in srgb, var(--surface-alt) 78%, transparent) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent);
}

:root[data-theme="dark"] .presence-panel {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.presence-panel::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 24%, transparent) 56%, transparent);
}

.presence-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 1px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 16%, var(--border));
}

.presence-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(8px, 1.1vw, 14px);
  min-width: 0;
  padding: clamp(11px, 1.6vw, 20px) clamp(9px, 1.4vw, 18px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 48%),
    var(--surface);
  text-align: start;
}

:root[data-theme="dark"] .presence-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 48%),
    color-mix(in srgb, var(--surface) 72%, var(--bg));
}

.presence-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(5px, 0.7vw, 10px);
  min-width: 0;
  padding-block-end: clamp(6px, 0.8vw, 10px);
  border-block-end: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}

.presence-card-marker {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  animation: presence-card-marker-pulse 4.2s var(--ease-in-out) infinite;
}

@keyframes presence-card-marker-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.presence-card-caption {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.presence-card-caption:lang(fa) {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.presence-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 0.45vw, 6px);
  min-width: 0;
}

.presence-card-value {
  min-width: 0;
  color: var(--text);
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: clamp(0.75rem, 0.62rem + 0.55vw, 1.3rem);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.presence-card-note {
  min-width: 0;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.84rem);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.presence-daycycle {
  display: flex;
  align-items: center;
}

.presence-daycycle-rail {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: clamp(26px, 2.6vw, 30px);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 90%, transparent) 100%);
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000000 10%, transparent);
}

.presence-daycycle-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-faint) 68%, transparent) 0 1px, transparent 1px 50%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-faint) 46%, transparent) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-faint) 26%, transparent) 0 1px, transparent 1px 4.1667%);
  background-size: 100% 44%, 100% 30%, 100% 19%;
  background-position: 0 100%, 0 100%, 0 100%;
  background-repeat: repeat-x, repeat-x, repeat-x;
  pointer-events: none;
}

.presence-daycycle-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-inline-start: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-inline-end: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  pointer-events: none;
}

.presence-daycycle-night {
  position: absolute;
  inset-block: 0;
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--text-faint) 22%, transparent) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, color-mix(in srgb, var(--text-faint) 14%, transparent) 0%, color-mix(in srgb, var(--text-faint) 7%, transparent) 100%);
}

.presence-daycycle-night--a {
  inset-inline-start: 0;
  width: 29.16%;
  border-inline-end: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

.presence-daycycle-night--b {
  inset-inline-end: 0;
  width: 2.08%;
  border-inline-start: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

.presence-daycycle-scale {
  position: absolute;
  inset-block-start: 2px;
  inset-inline: 0;
  z-index: 3;
}

.presence-daycycle-hour {
  position: absolute;
  inset-block-start: 0;
  color: var(--text-muted);
  font-family: "Rooyin", "Rooyin Fallback", var(--font-sans);
  font-size: clamp(0.54rem, 0.5rem + 0.28vw, 0.66rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.presence-daycycle-hour:first-child {
  inset-inline-start: 0;
  transform: none;
}

.presence-daycycle-hour:nth-child(2) {
  inset-inline-start: 25%;
}

.presence-daycycle-hour:nth-child(3) {
  inset-inline-start: 50%;
}

.presence-daycycle-hour:nth-child(4) {
  inset-inline-start: 75%;
}

.presence-daycycle-hour:last-child {
  inset-inline-start: 100%;
  transform: translateX(-100%);
}

.presence-daycycle-marker {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--presence-daycycle-pos, 0) * 100%);
  z-index: 4;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 58%, transparent);
  transform: translateX(-50%);
  transition: inset-inline-start 0.9s var(--ease-out);
}

.presence-daycycle-marker::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  width: 9px;
  height: 9px;
  background: var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 56%, transparent);
  transform: translate(-50%, 50%) rotate(45deg);
}

@media (max-width: 640px) {
  .presence-card {
    gap: 7px;
    padding: 10px 8px;
  }

  .presence-card-head {
    gap: 5px;
    padding-block-end: 7px;
  }

  .presence-card-caption,
  .presence-card-caption:lang(fa) {
    font-size: 0.75rem;
  }
}

@media (max-width: 400px) {
  .presence-card {
    gap: 6px;
    padding: 9px 6px;
  }

  .presence-card-head {
    padding-block-end: 6px;
  }

  .presence-card-marker {
    width: 5px;
    height: 5px;
  }
}

.presence-art__awake {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}

/* Awake. The original frame's 500px viewport
   made `6vmin` exactly 30px; the cqmin form keeps the ratio if the box changes
   and the px value is the fallback. The script that assembled the masks, the
   four wave paths and both `d` keyframes is now static markup in index.html. */
.presence-awake {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10em;
  height: 10em;
  font-size: 30px;
  font-size: round(6cqmin, 1px);
  overflow: hidden;
  border-radius: 50%;
  --b: .667em;
}

.presence-awake > *,
.presence-awake__gloss::before,
.presence-awake__gloss::after {
  position: absolute;
  inset: 0;
}

.presence-awake__gloss {
  background: radial-gradient(circle at 80% 20%, #fff, #fffc 20%, #fff6 50%, transparent 70%);
}

.presence-awake__gloss::before,
.presence-awake__gloss::after {
  content: "";
  border-radius: 50%;
  animation:
    presence-awake-spin 2s linear infinite,
    presence-awake-hue 2s ease-in-out infinite;
}

.presence-awake__gloss::before {
  --b: 0;
  box-shadow: inset -.5em -.5em 1em #0ff, inset 1em 0 2em #ff0;
}

.presence-awake__gloss::after {
  z-index: -1;
  background:
    radial-gradient(circle at 80% 20%, #ffffffb3, #ffffff80 30%, transparent 70%),
    linear-gradient(120deg, red 20%, #00f 80%);
}

.presence-awake__art {
  width: 100%;
  height: 100%;
  animation: presence-awake-spin 3s cubic-bezier(0.7, 0.6, 0.3, 0.4) infinite;
}

.presence-awake__art ellipse,
.presence-awake__soft,
.presence-awake__face g + g {
  filter: blur(7px);
}

.presence-awake__wave path {
  animation: presence-awake-wave-crest 1s cubic-bezier(0.7, 0.6, 0.3, 0.4) infinite;
}

.presence-awake__wave :nth-child(2n) {
  animation-name: presence-awake-wave-trough;
  animation-direction: reverse;
}

.presence-awake__wave :nth-child(2),
.presence-awake__wave :nth-child(3) {
  animation-delay: -.5s;
}

@keyframes presence-awake-spin {
  to { transform: rotate(1turn); }
}

@keyframes presence-awake-hue {
  0%, to { filter: hue-rotate(0) blur(var(--b)); }
  20% { filter: hue-rotate(-30deg) blur(var(--b)); }
  40% { filter: hue-rotate(-60deg) blur(var(--b)); }
  60% { filter: hue-rotate(-90deg) blur(var(--b)); }
  80% { filter: hue-rotate(-45deg) blur(var(--b)); }
}

@keyframes presence-awake-wave-crest {
  0% { d: path("M5,50C10,50 15,50 20,50C25,50 30,50 95,50"); }
  50% { d: path("M5,50C25,50 30,20 50,20C70,20 75,50 95,50"); }
  to { d: path("M5,50C70,50 75,50 80,50C85,50 90,50 95,50"); }
}

@keyframes presence-awake-wave-trough {
  0% { d: path("M5,50C10,50 15,50 20,50C25,50 30,50 95,50"); }
  50% { d: path("M5,50C25,50 30,80 50,80C70,80 75,50 95,50"); }
  to { d: path("M5,50C70,50 75,50 80,50C85,50 90,50 95,50"); }
}

.presence-art__sleep {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.presence-art__awake-frame,
.presence-art__sleep-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  container-type: size;
  overflow: hidden;
  pointer-events: none;
}

/* Sleep. Its 140vmin/22 inside the original
   500px frame viewport was exactly 32px, and the script that injected the three
   <use> stars is now static markup; every gradient and filter lives in the
   hidden defs svg, with ids namespaced so they cannot clash page-wide. */
.presence-sleep-defs {
  position: absolute;
}

.presence-sleep {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5em;
  height: 5em;
  font-size: 32px;
  font-size: round(calc(140cqmin / 22), 1px);
  color: #5c3d99;
  transition: color 0.3s;
  transform: translateY(2.5em);
  filter: drop-shadow(0 0 0.5em #5c3d9933);
  --s: 1;
  --r: 1;
  --x: 1;
}

:root[data-theme="dark"] .presence-sleep {
  color: #c4b5fd;
  filter: drop-shadow(0 0 0.5em #c4b5fd47);
}

.presence-sleep svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.presence-sleep > svg:nth-child(1) {
  --s: .75;
  --r: 0;
  --x: 0;
  animation: presence-sleep-float 1s linear infinite;
}

.presence-sleep > svg:nth-child(2) {
  opacity: 0;
  animation: presence-sleep-float 1s linear infinite;
  animation-delay: .3s;
}

.presence-sleep > svg:nth-child(3) {
  opacity: 0;
  --r: -1;
  --x: -1;
  animation: presence-sleep-float 1s linear infinite;
  animation-delay: .6s;
}

@keyframes presence-sleep-float {
  0% {
    transform: scale(.5) rotate(calc(-10deg * var(--r))) translateY(-10em) translateX(calc(-5em * var(--x)));
    opacity: 0;
  }
  25% {
    transform: scale(var(--s)) rotate(calc(-5deg * var(--r))) translateY(-5em) translateX(calc(-2.5em * var(--x)));
    opacity: 1;
  }
  50% {
    transform: scale(1) rotate(0) translateY(0) translateX(calc(-1.25em * var(--x)));
    opacity: 1;
  }
  75% {
    transform: scale(.5) rotate(calc(5deg * var(--r))) translateY(2.5em) translateX(0);
    opacity: 1;
  }
  to {
    transform: scale(0) rotate(calc(10deg * var(--r))) translateY(5em) translateX(calc(1.25em * var(--x)));
    opacity: 0;
  }
}

.casebook {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--page-gutter);
  padding-block: clamp(28px, 3.6vw, 48px) clamp(40px, 5vw, 64px);
  border-top: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-strong));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-strong));
  background:
    radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 70%),
    radial-gradient(60% 40% at 100% 100%, color-mix(in srgb, var(--accent-2) 8%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, var(--surface)) 100%);
}

:root[data-theme="dark"] .casebook {
  background:
    radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%),
    radial-gradient(60% 40% at 100% 100%, color-mix(in srgb, var(--accent-2) 14%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
}

.casebook-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.casebook-heading {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto clamp(30px, 3.8vw, 52px);
  padding: 0 clamp(0px, 1vw, 12px);
  text-align: start;
}

/* Copy on the inline-start side, the axonometric stack on the other. The
   band is a mounted sheet: one border, one inset hairline, square corners,
   and a surface that steps from accent to accent-2 across the diagonal. */
.casebook-heading-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  column-gap: clamp(16px, 2.2vw, 30px);
  width: 100%;
  min-width: 0;
  padding-block: clamp(18px, 2.2vw, 28px);
  padding-inline: clamp(20px, 2.6vw, 34px);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background:
    linear-gradient(
      140deg,
      color-mix(in srgb, var(--accent) 10%, transparent) 0%,
      transparent 44%
    ),
    linear-gradient(
      320deg,
      color-mix(in srgb, var(--accent-2) 8%, transparent) 0%,
      transparent 50%
    ),
    var(--surface);
}

/* Two frame details: a hairline registered inside the border, and a tick
   register along the bottom edge with accent majors every eighth tick. */
.casebook-heading-band::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--border);
  pointer-events: none;
}

.casebook-heading-band::before {
  content: "";
  position: absolute;
  inset-inline: 8px;
  inset-block-end: 8px;
  height: 6px;
  pointer-events: none;
  background:
    repeating-linear-gradient(
        90deg,
        var(--border-strong) 0 1px,
        transparent 1px 12px
      )
      bottom left / 100% 4px no-repeat,
    repeating-linear-gradient(
        90deg,
        var(--accent) 0 2px,
        transparent 2px 96px
      )
      bottom left / 100% 6px no-repeat;
}

.casebook-heading-copy {
  min-width: 0;
  max-width: 31rem;
  justify-self: start;
}

.casebook-heading-kicker {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.3vw, 14px);
  width: fit-content;
  margin-block-end: clamp(14px, 1.6vw, 20px);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 0.78vw, 0.72rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
}

.casebook-heading-kicker::before {
  content: "";
  width: clamp(24px, 3.4vw, 40px);
  height: 2px;
  background: var(--accent);
}

.casebook-heading .casebook-heading-title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(2.15rem, 4vw, 3.35rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* The title's one colour moment: the answer half of the question. */
.casebook-heading-title-mark {
  color: var(--accent-strong);
}

.casebook-heading-sub {
  max-width: 36ch;
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  font-weight: 500;
  line-height: 1.85;
  text-wrap: pretty;
}

.casebook-heading-figure {
  width: 100%;
  min-width: 0;
}

.casebook-heading-drawing {
  display: block;
  width: 100%;
  height: auto;
}

.casebook-heading-caption {
  display: block;
  margin-block-start: 2px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: start;
}

/* One stroke weight (1.5) runs through grid, object and callouts; colour is
   what separates the layers, so the construction stays recessive. */
.casebook-heading-grid-line {
  stroke: color-mix(in srgb, var(--border-strong) 70%, transparent);
  stroke-width: 1.5;
}

.casebook-heading-axis-line,
.casebook-heading-axis-tick,
.casebook-heading-connector,
.casebook-heading-leader {
  fill: none;
  stroke: color-mix(in srgb, var(--text-muted) 62%, transparent);
  stroke-width: 1.5;
}

.casebook-heading-axis-line {
  stroke-dasharray: 4 8;
}

.casebook-heading-connector {
  stroke-dasharray: 3 7;
}

.casebook-heading-plate {
  fill: var(--surface);
  stroke: var(--text);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* The stack darkens as it descends: the loaded base carries the accent,
   the plates above give it back to the paper, and the exploded top plate
   stays plain so the parts still read as one object. */
.casebook-heading-plates .casebook-heading-plate:nth-child(1) {
  fill: color-mix(in srgb, var(--accent) 16%, var(--surface));
  stroke: color-mix(in srgb, var(--accent-strong) 72%, var(--text));
}

.casebook-heading-plates .casebook-heading-plate:nth-child(2) {
  fill: color-mix(in srgb, var(--accent) 11%, var(--surface));
  stroke: color-mix(in srgb, var(--accent-strong) 44%, var(--text));
}

.casebook-heading-plates .casebook-heading-plate:nth-child(3) {
  fill: color-mix(in srgb, var(--accent-2) 7%, var(--surface));
  stroke: color-mix(in srgb, var(--text) 84%, var(--accent-2));
}

.casebook-heading-plates .casebook-heading-plate:nth-child(4) {
  fill: var(--surface);
  stroke: var(--text);
}

.casebook-heading-label {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  direction: ltr;
}

/* A sparse accent field inside the construction diamond, so the drawing's
   ground carries the same accent as the node without another stroke. */
.casebook-heading-field-dot {
  fill: color-mix(in srgb, var(--accent) 30%, transparent);
}

.casebook-heading-dot {
  fill: var(--accent);
}

/* The only light in the drawing: the answer under the last layer. */
.casebook-heading-node {
  fill: var(--accent);
  animation: casebook-node-breathe 3.6s var(--ease-in-out) infinite;
}

@keyframes casebook-node-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@media (max-width: 820px) {
  .casebook-heading-band {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(12px, 2.4vw, 20px);
  }

  .casebook-heading-copy {
    max-width: none;
  }

  .casebook-heading-figure {
    width: 100%;
    max-width: 460px;
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .casebook-heading {
    margin-block-end: clamp(22px, 6vw, 30px);
  }

  .casebook-heading-band {
    row-gap: 10px;
    padding-block: clamp(16px, 4.4vw, 20px);
    padding-inline: clamp(16px, 4.2vw, 22px);
  }

  .casebook-heading-band::after {
    inset: 5px;
  }

  .casebook-heading-band::before {
    inset-inline: 6px;
    inset-block-end: 6px;
    height: 5px;
    background:
      repeating-linear-gradient(
          90deg,
          var(--border-strong) 0 1px,
          transparent 1px 10px
        )
        bottom left / 100% 3px no-repeat,
      repeating-linear-gradient(
          90deg,
          var(--accent) 0 2px,
          transparent 2px 60px
        )
        bottom left / 100% 5px no-repeat;
  }

  .casebook-heading .casebook-heading-title {
    font-size: clamp(1.8rem, 7.4vw, 2.2rem);
  }

  .casebook-heading-grid {
    display: none;
  }

  .casebook-heading-figure {
    max-width: 100%;
  }

  .casebook-heading-caption {
    font-size: 0.62rem;
  }

  .casebook-heading-label {
    font-size: 15px;
  }
}

.casebook-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  width: 100%;
  max-width: min(1200px, 100%);
  margin-block-start: clamp(18px, 2.4vw, 28px);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.casebook-item {
  --case-fg: #101a30;
  --case-border: rgba(26, 82, 255, 0.22);
  --case-accent: #1a52ff;
  --case-accent-strong: #0034c9;
  --case-chip-bg: rgba(26, 82, 255, 0.08);
  --case-chip-border: rgba(26, 82, 255, 0.24);
  --case-surface: #ffffff;
  --case-bg-image:
    radial-gradient(120% 90% at 0% 0%, rgba(26, 82, 255, 0.07) 0%, transparent 62%),
    linear-gradient(158deg, #ffffff 0%, #f6f8ff 58%, #eef3ff 100%);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  color: var(--case-fg);
}

.casebook-item + .casebook-item {
  position: relative;
  margin-block-start: clamp(18px, 2.4vw, 30px);
}

.casebook-item + .casebook-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: calc(-1 * clamp(18px, 2.4vw, 30px) / 2);
  height: 1px;
  background: var(--border-strong);
  pointer-events: none;
  z-index: 3;
}

.casebook-item:nth-child(odd) {
  --case-fg: #eef3ff;
  --case-border: rgba(117, 146, 255, 0.34);
  --case-accent: #7592ff;
  --case-accent-strong: #c7d2fe;
  --case-chip-bg: rgba(117, 146, 255, 0.16);
  --case-chip-border: rgba(117, 146, 255, 0.42);
  --case-surface: #0a101c;
  --case-bg-image:
    radial-gradient(120% 90% at 0% 0%, rgba(117, 146, 255, 0.22) 0%, transparent 62%),
    radial-gradient(110% 85% at 100% 100%, rgba(140, 125, 255, 0.14) 0%, transparent 60%),
    linear-gradient(158deg, #121b2f 0%, #0b1220 52%, #06090f 100%);
}

.casebook-trigger {
  position: relative;
  z-index: 1;
  display: block;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  padding: clamp(24px, 2.8vw, 38px) clamp(30px, 3.4vw, 48px);
  border: 1px solid var(--case-border);
  border-radius: var(--radius-md);
  background: var(--case-bg-image);
  color: inherit;
  font: inherit;
  text-align: center;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--case-surface) 65%, transparent);
  overflow: hidden;
  contain: content;
}

.casebook-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  color: transparent;
  font-family: var(--font-mono);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--case-accent) 42%, transparent);
  transform: translate(-50%, -50%);
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}

.casebook-trigger .casebook-mark {
  font-size: clamp(160px, 18vw, 250px);
}

.casebook-panel .casebook-mark {
  font-size: clamp(200px, 25vw, 340px);
}

.casebook-mark--left {
  left: 0;
  transform: translate(-50%, -50%) rotate(9deg);
}

.casebook-mark--center {
  transform: translate(-50%, -50%) rotate(-11deg);
}

.casebook-mark--right {
  left: 100%;
  transform: translate(-50%, -50%) rotate(14deg);
}

.casebook-trigger-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.casebook-trigger-question {
  min-width: 0;
  color: var(--case-fg);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.casebook-panel {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: fit-content;
  max-width: min(780px, 100%);
  border: 1px solid var(--case-border);
  border-radius: var(--radius-md);
  background: var(--case-bg-image);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--case-surface) 65%, transparent);
  overflow: hidden;
  contain: content;
}

.casebook-panel-inner {
  position: relative;
  contain: layout style;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(24px, 2.8vw, 38px) clamp(30px, 3.4vw, 48px);
}

.casebook-verdict {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 12px 5px;
  border: 2px solid var(--case-accent);
  border-radius: 6px;
  color: var(--case-accent-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-4deg);
  background: color-mix(in srgb, var(--case-accent) 10%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--case-accent) 32%, transparent);
}

.casebook-answer {
  margin: 0;
  color: var(--case-fg);
  font-size: clamp(1.14rem, 1.7vw, 1.32rem);
  font-weight: 400;
  line-height: 2.05;
  text-wrap: pretty;
  text-align: right;
  max-width: 100%;
  margin-inline-start: clamp(24px, 7vw, 72px);
  margin-inline-end: 0;
}

.casebook-ghost {
  position: absolute;
  right: calc(clamp(16px, 3vw, 48px) + clamp(20px, 2.6vw, 34px) - var(--page-gutter));
  bottom: 0;
  z-index: -1;
  display: block;
  color: color-mix(in srgb, var(--accent) 15%, transparent);
  font-family: "JetBrains Mono", var(--font-mono);
  font-size: clamp(110px, 13vw, 170px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.05em;
  opacity: 0.8;
  pointer-events: none;
  user-select: none;
}

:root[data-theme="dark"] .casebook-ghost {
  color: color-mix(in srgb, var(--accent) 25%, transparent);
  opacity: 0.9;
}

@media (max-width: 900px) {
  .casebook-ghost {
    right: 4px;
    bottom: 4px;
    font-size: clamp(90px, 22vw, 140px);
  }
}

@media (max-width: 640px) {
  .casebook-trigger {
    padding: 14px 14px;
  }

  .casebook-trigger-question {
    font-size: 0.96rem;
    line-height: 1.75;
  }

  .casebook-trigger .casebook-mark {
    font-size: 132px;
  }

  .casebook-panel .casebook-mark {
    font-size: 176px;
  }

  .casebook-panel-inner {
    padding: 14px 14px 18px;
  }

  .casebook-verdict {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }

  .casebook-answer {
    font-size: 0.94rem;
    line-height: 1.95;
  }
}

@media (max-width: 520px) {
  .casebook-ghost {
    right: 0;
    bottom: 0;
    font-size: clamp(80px, 26vw, 120px);
  }
}

.casebook-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 6px currentColor);
}

/* Connectors are frozen: each path renders its authored d value as one static
   solid stroke (no dash draw-in), and every node sits at its final position.
   The stroke, stroke-width, stroke-linecap, stroke-linejoin, and fill: none
   still come from the SVG attributes in the markup. */
.casebook-link-path {
  stroke-dashoffset: 0;
}

.casebook-link-node {
  fill: currentColor;
  opacity: 1;
}

:root:not([data-theme="dark"]) .casebook-link {
  color: #3b5bfd;
}

:root[data-theme="dark"] .casebook-item:nth-child(odd) .casebook-link {
  color: #ffffff;
}

:root[data-theme="dark"] .casebook-item:nth-child(even) .casebook-link {
  color: #8c7dff;
}

@media (max-width: 870px) {
  .casebook-link-path:nth-of-type(1),
  .casebook-link-path:nth-of-type(2),
  .casebook-link-path:nth-of-type(3),
  .casebook-link-node:nth-of-type(1),
  .casebook-link-node:nth-of-type(2),
  .casebook-link-node:nth-of-type(3),
  .casebook-link-node:nth-of-type(4),
  .casebook-link-node:nth-of-type(5),
  .casebook-link-node:nth-of-type(6),
  .casebook-link-node:nth-of-type(7),
  .casebook-link-node:nth-of-type(8),
  .casebook-link-node:nth-of-type(9) {
    display: none;
  }

  .casebook-trigger {
    max-width: 250px;
  }
}

/* Performance: skip rendering off-screen sections. The intrinsic size is only
   the guess used before a section has ever been rendered — the `auto` keyword
   replaces it with the measured height from then on — so these numbers set the
   first scrollbar pass, calibrated to the 1440px desktop layout. .hero and
   .skills stay out on purpose; .presence is nested inside .why and never used
   the old global rule. */
.projects {
  content-visibility: auto;
  contain-intrinsic-size: auto 1250px;
}

.why {
  content-visibility: auto;
  contain-intrinsic-size: auto 1350px;
}

.casebook {
  content-visibility: auto;
  contain-intrinsic-size: auto 2650px;
}

.about {
  content-visibility: auto;
  contain-intrinsic-size: auto 1300px;
}

.contact {
  content-visibility: auto;
  contain-intrinsic-size: auto 1420px;
}

/* Print: this page is a screen product, so nothing of it reaches paper.
   The notice is generated by CSS alone and survives with JS disabled. */
@media print {
  body > * {
    display: none !important;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    background: #ffffff !important;
    color: #000000 !important;
  }

  body::after {
    content: "این صفحه برای چاپ طراحی نشده است.\A avibe.ir";
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding-top: 42vh;
    font-family: var(--font-sans);
    font-size: 14pt;
    font-weight: 600;
    line-height: 1.8;
    text-align: center;
    white-space: pre-line;
    color: #000000;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skills-toolkit-item { transition: none; }
  .skills-toolkit-item:hover { transform: none; }
  .d2-a { transition: none; }
  .d2-a--with:hover, .d2-a--no:hover { transform: none; }
  .site-footer-trust-status-locked { animation: none; opacity: 0; }
  .site-footer-trust-status-open { animation: none; opacity: 1; }
  .site-footer-trust-marker { animation: none; opacity: 1; scale: 1; }
  .iran-time-sky-cloud { display: none; }
}