/* Readability and alignment pass. The established layout and palette stay intact. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
}
html { scrollbar-gutter: stable; }
.header { gap: var(--space-6); }
.header nav { gap: clamp(10px, 1.6vw, 24px); }
.header nav a { font-size: 13px; }
.header-controls { gap: var(--space-4); }
.languages button { font-size: 11px; width: 38px; }
.button { font-size: 12px; gap: var(--space-4); }
.compact, .header-order { font-size: 11px; padding-inline: var(--space-4); }
.eyebrow { font-size: 12px; }
.hero-description { font-size: 14px; }
.hero-actions { gap: var(--space-4); }
.selling-points { gap: 28px; }
.selling-points > span { gap: var(--space-3); }
.selling-points small { font-size: 11px; }
.service-grid { gap: var(--space-2); grid-auto-rows: 1fr; }
.service-card { padding: var(--space-4) var(--space-4) 20px; }
.service-top { gap: var(--space-3); }
.service-top h3 { font-size: 16px; max-width: 140px; }
.service-card ul { font-size: 11px; line-height: 1.5; margin-top: var(--space-3); max-width: 65%; }
.service-art { width: 100px; height: 104px; right: var(--space-2); object-fit: contain; }
.service-card:nth-child(1) .service-art { width: 100px; height: 104px; }
.service-card[data-service="3"] ul { max-width: 67%; }
.section-description { font-size: 15px; max-width: 310px; }
.extra { gap: var(--space-6); padding: var(--space-3) var(--space-4); }
.extra p { font-size: 11px; }
.filters { gap: var(--space-2); }
.filter { font-size: 11px; padding-inline: var(--space-3); }
.demo-note { font-size: 10px; line-height: 1.5; margin-top: var(--space-2); }
.reviews .section-description { font-size: 13px; }
.review-source { font-size: 10px; gap: var(--space-3); }
.review-user { font-size: 11px; }
.review-date { font-size: 9px; }
.review-text { font-size: 12px; line-height: 1.4; }
.review-grid { align-items: stretch; }
.review-content { gap: var(--space-3); }
.review-card { padding: var(--space-3); }
.review-demo { font-size: 10px; }
.payment p { font-size: 10px; }
.contact p { font-size: 11px; }
.contact > div:first-child { flex: 1; min-width: 0; }
.contact-right { flex: 0 0 230px; width: 230px; }
.contact h2 { white-space: nowrap; }
.contact .button { font-size: 10px; gap: var(--space-3); }
.contact-benefits { gap: var(--space-2); width: 100%; }
.contact-benefits > span { flex: 1; min-width: 0; }
.contact-benefits small { font-size: 9px; white-space: normal; text-align: center; }
footer { font-size: 10px; gap: var(--space-4); }
.gallery-arrow { min-height: 44px; }

/* One native dialog, fed by independent image arrays in config.js. */
#project-modal { width: min(960px, 94vw); max-width: 94vw; max-height: 94dvh; overscroll-behavior: contain; }
.lightbox-frame {
  display: grid;
  place-items: center;
  height: clamp(220px, 60dvh, 640px);
  background: #030505;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}
#modal-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
#lightbox-status { padding: var(--space-6); text-align: center; color: var(--muted); font: 13px/1.5 monospace; }
.lightbox-controls { display: flex; justify-content: center; align-items: center; gap: var(--space-6); padding: var(--space-3); border-block: 1px solid var(--border); }
.lightbox-controls button { width: 48px; height: 40px; border: 1px solid #697100; background: #080b0a; color: var(--yellow); font: 24px/1 monospace; transition: background .18s; }
.lightbox-controls button:hover { background: #242900; }
.lightbox-controls button:disabled { opacity: .3; cursor: default; }
#lightbox-counter { min-width: 70px; text-align: center; color: var(--yellow); font: 13px monospace; }
#project-modal .modal-caption { padding: var(--space-4) var(--space-6); }
#project-modal .modal-caption p { margin-block: var(--space-2); }
.lightbox-hint { font-size: 11px !important; }
.modal-close { width: 40px; height: 40px; }

@media (min-width: 1100px) {
  .service-card { min-height: 182px; }
  .service-art, .service-card:nth-child(1) .service-art { width: 120px; height: 120px; }
}
@media (min-width: 851px) and (max-width: 1100px) {
  .header { gap: var(--space-4); padding-inline: var(--space-6); }
  .header nav a { font-size: 12px; }
  .service-top h3 { font-size: 15px; max-width: 125px; }
  .service-card { min-height: 170px; }
  .portfolio .section-heading { gap: var(--space-3); }
  .portfolio .section-heading h2 { font-size: 29px; }
  .filters { gap: 6px; }
  .filters .filter { font-size: 10px; padding-inline: 10px; }
}
@media (max-width: 1000px) { .header-order { display: none; } }
@media (max-width: 850px) {
  .header nav a { font-size: 12px; }
  .header { gap: var(--space-4); }
  .service-top h3 { font-size: 17px; max-width: 145px; }
  .service-art, .service-card:nth-child(1) .service-art { width: 120px; height: 115px; }
  .contact .button { font-size: 11px; }
  .contact-right { flex-basis: 270px; width: 270px; }
  .contact p { font-size: 12px; }
  .contact-benefits small { font-size: 10px; }
}
@media (max-width: 600px) {
  .header { padding-inline: var(--space-4); }
  .header nav a { font-size: 15px; }
  .header-controls { gap: var(--space-3); }
  .languages button { width: 33px; }
  .hero-description { font-size: 13px; }
  .hero-actions { gap: var(--space-3); }
  .hero-actions .button { font-size: 11px; padding-inline: var(--space-4); }
  .selling-points { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); }
  .selling-points > span { gap: var(--space-1); flex-direction: column; align-items: flex-start; }
  .selling-points small { font: 600 11px/1.3 Rajdhani, Arial, sans-serif; overflow-wrap: anywhere; }
  .service-card { min-height: 180px; }
  .service-card ul { font-size: 12px; max-width: 65%; }
  .service-top h3 { font-size: 17px; }
  .section-description { font-size: 14px; }
  .extra { gap: var(--space-3); }
  .extra p { font-size: 11px; }
  .extra .button { font-size: 11px; }
  .filter { font-size: 11px; }
  .review-source { font-size: 10px; gap: 6px; }
  .review-content { gap: var(--space-2); }
  .review-user { font-size: 10px; overflow-wrap: anywhere; }
  .review-date { font-size: 9px; }
  .review-text { font-size: 13px; }
  .review-card { padding: 10px 9px; }
  .contact .button { font-size: 11px; }
  .contact-right { width: 100%; }
  .contact h2 { white-space: normal; }
  .contact p { font-size: 13px; }
  .payment p { font-size: 10px; }
  footer { font-size: 9px; }
  #project-modal { width: 96vw; max-width: 96vw; }
  .lightbox-frame { height: min(53dvh, 64vw); min-height: 180px; }
  #project-modal .modal-caption { padding: var(--space-4); }
  #project-modal .modal-caption h2 { font-size: 22px; }
}
@media (max-width: 360px) {
  .hero-actions .button { font-size: 10px; padding-inline: var(--space-3); }
  .hero-actions .secondary { min-width: 108px; }
  .selling-points { gap: var(--space-2); }
  .selling-points small { font-size: 11px; }
  .service-card ul { font-size: 11px; }
  .service-art, .service-card:nth-child(1) .service-art { width: 100px; height: 110px; }
  .service-top h3 { font-size: 16px; }
  .review-source { font-size: 9px; }
  .contact-benefits small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-controls button { transition: none; }
}

/* Aligned, live sans-serif wordmarks: both lines share identical text lengths. */
.brand { padding-inline: 16px; }
.brand:before, .brand:after { height: 38px; }
.brand-wordmark { display: block; width: 112px; height: auto; fill: #fff; stroke: none; }
.brand-wordmark text, .hero-wordmark text { font-family: Rajdhani, Arial, sans-serif; stroke: none; }
.brand-name { font-size: 34px; font-weight: 700; fill: #fff; }
.brand-subtitle { font-size: 14px; font-weight: 500; fill: #fff; }
.hero h1 { width: 340px; max-width: 100%; margin: 10px 0 12px; line-height: 1; }
.hero-wordmark { display: block; width: 100%; height: auto; overflow: visible; }
.hero-name { font-size: 112px; font-weight: 700; fill: #fff; }
.hero-subtitle { font-size: 46px; font-weight: 700; fill: var(--yellow); }
.hero .eyebrow { max-width: 350px; font: 500 14px/1.3 Rajdhani, Arial, sans-serif; }
.hero-description { display: flex; flex-wrap: wrap; gap: 3px 8px; max-width: 350px; min-height: 54px; font: 500 15px/1.4 Rajdhani, Arial, sans-serif; }
.hero-direction { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.hero-direction b { font-weight: 500; color: var(--yellow); }
.reviews .section-heading { justify-content: space-between; }
.review-empty { min-height: 126px; display: flex; flex-direction: column; gap: 20px; }
.review-empty > p { color: var(--muted); font: 500 14px/1.5 Rajdhani, Arial, sans-serif; margin: 0; }
.review-source span:last-child { margin-left: 0; }
.contact { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px 16px; padding: 14px 20px; align-content: center; }
.contact p { font: 500 13px/1.4 Rajdhani, Arial, sans-serif; max-width: none; }
.contact > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; }
.contact-right { display: contents; }
.contact .contact-right .button { grid-column: 2; grid-row: 1; justify-self: end; }
.contact-benefits { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 16px; width: 100%; margin-top: 4px; }
.contact-benefits > span { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.contact-benefits small { max-width: 100%; overflow-wrap: anywhere; white-space: normal; text-align: center; font: 500 12px/1.35 Rajdhani, Arial, sans-serif; }
.payment { grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 14px; align-content: center; }
.payment h2 { font-size: 18px; line-height: 1.2; }
.currencies { display: grid; grid-template-columns: repeat(3,44px); align-items: center; gap: 12px; padding: 0; }
.currencies > span { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.currency-logo { display: block; width: 44px; height: 44px; aspect-ratio: 1; object-fit: contain; }
.currencies strong { font: 700 14px/1.2 Rajdhani, Arial, sans-serif; }
@media (min-width:1100px) { .hero h1 { width: 365px; } }
@media (max-width:850px) {
  .contact { padding: 16px; }
  .payment { min-height: 120px; }
}
@media (max-width:600px) {
  .hero h1 { width: 310px; }
  .hero .eyebrow { max-width: 310px; font-size: 13px; }
  .hero-description { max-width: 310px; font-size: 14px; min-height: 54px; }
  .contact { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .contact .contact-right .button { grid-column: 1; grid-row: 2; justify-self: stretch; }
  .contact-benefits { grid-row: 3; }
  .review-empty { min-height: 126px; }
}
@media (max-width:480px) {
  .contact-benefits { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .contact-benefits > span { flex-direction: row; justify-content: flex-start; gap: 12px; }
  .contact-benefits small { text-align: left; font-size: 13px; }
}
@media (max-width:360px) {
  .hero h1 { width: 270px; }
  .hero-description { gap: 2px 6px; font-size: 13px; }
  .hero-direction { gap: 6px; }
  .hero .eyebrow { font-size: 12px; }
  .currencies { grid-template-columns: repeat(3,38px); gap: 8px; }
  .currency-logo { width: 38px; height: 38px; }
  .payment h2 { font-size: 17px; }
}

/* Explicit text rows avoid orphaned separators after wrapping. */
.hero-description { display: grid; gap: 3px; align-content: start; }
.hero-line { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px; }
.hero-line > span { white-space: nowrap; }
.hero-line > b { color: var(--yellow); font-weight: 500; }

/* Tight alpha cutouts fill the existing right-hand illustration area only. */
.service-card .service-art-cutout,
.service-card:nth-child(1) .service-art-cutout {
  width: clamp(82px, calc((100% - 34px) * .33 + 8px), 128px);
  height: calc(100% - 68px);
  right: 8px;
  bottom: 20px;
  object-fit: contain;
  object-position: right bottom;
  mask-image: none;
  transform: none;
  pointer-events: none;
}
@media (max-width:360px) { .hero-line { gap: 6px; } }

/* Small Cyrillic labels use an explicit sans-serif face and uncompressed spacing. */
.selling-points {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 20px;
  width: 460px;
  max-width: 100%;
}
.selling-points > span { min-width: 0; gap: 12px; align-items: center; }
.selling-points small {
  font: 500 11px/1.65 Arial, sans-serif;
  letter-spacing: .025em;
  font-kerning: normal;
  overflow-wrap: normal;
}
.brand-wordmark text, .hero-wordmark text { letter-spacing: .025em; }
.header nav a, .eyebrow, .contact-benefits small, .review-source,
.filter, .button { letter-spacing: .02em; }
.service-top h3 { letter-spacing: .01em; }
.section-description, .review-text, .contact p { line-height: 1.5; }
@media (max-width:600px) {
  .selling-points { gap: 12px; grid-template-columns: 1fr 1fr 1.65fr; }
  .selling-points > span { align-items: flex-start; gap: 8px; }
  .selling-points small { font-size: 10px; line-height: 1.65; letter-spacing: .01em; }
}
@media (max-width:360px) {
  .selling-points { gap: 8px; }
  .selling-points small { font-size: 9px; }
}
/* Discourage casual copying without intercepting navigation or gallery gestures. */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable]:not([contenteditable="false"]) {
  -webkit-user-select: text; user-select: text;
}
img { -webkit-user-drag: none; -webkit-touch-callout: none; }
.review-source > span:last-child { display: inline; min-width: 0; overflow-wrap: anywhere; }

.project img { object-fit: contain; background: #050707; }

.forum-filters a.filter { display:inline-flex; align-items:center; justify-content:center; }
.error-page { min-height:100dvh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:24px; padding:24px; text-align:center; }
.error-page h1 { font:700 72px/1 Rajdhani,Arial,sans-serif; }

/* Forum reviews share one card and rotate manually, without timers. */
.review-carousel { display:flex; flex-direction:column; min-width:0; }
.review-slide { flex:1; min-height:136px; }
.review-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
.review-controls button { width:40px; height:36px; padding:0; border:1px solid #697100; background:#080b0a; color:var(--yellow); font:20px/1 Arial,sans-serif; }
.review-controls button:hover { background:#242900; }
.review-counter { color:var(--muted); font:11px/1.5 monospace; }
.review-user[href]:hover, .review-date[href]:hover { color:var(--yellow); }
@media(max-width:600px) { .review-slide { min-height:160px; } }

.reviews-pagination { display:flex; align-items:center; justify-content:center; gap:24px; margin:16px 8px 0; }
.reviews-pagination button { width:44px; height:40px; border:1px solid #697100; background:#080b0a; color:var(--yellow); font:22px/1 Arial,sans-serif; }
.reviews-pagination button:hover:not(:disabled) { background:#242900; }
.reviews-pagination button:disabled { opacity:.3; }
#reviews-page-counter { min-width:48px; text-align:center; color:var(--muted); font:12px/1.5 monospace; }
.forum-filters { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(130px,1fr); overflow-x:auto; padding-bottom:4px; }

.review-text { white-space: pre-line; }