/* Hallmark · shape: Project ledger · genre: modern-minimal · theme: brand · brand: Volant Software (spec 2026-10-27) · redesign: full · job: hire
 * hero: Stage · nav: edge-aligned project index · footer: colophon block · signature: the real Where is the wind Android app · imagery: the user's product screenshots
 * axes: light/sans/blue · posture: restrained · surface: absolute · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 · weakest: V, kept a shared bilingual structure and replaced the triptych with a transportation feature and Android pair */
/* Hallmark · finish-review: subagent · ship · both languages and desktop/mobile reviewed · no required fixes */
/* Hallmark · waive 49b · a real phrase, two lines at most at 320px · the Russian contact consent preserves the original privacy notice wording instead of shortening legal text */
/* Hallmark · reworded "Software that moves work forward." to "Web systems. Android apps." · 19: replace a generic opener with the company's actual product types */
/* Hallmark · reworded "Built around the task, not the technology." to "Web, Android and automation" · 54: the subject replaces the redundant Expertise eyebrow */
/* Hallmark · reworded "Products made for everyday use." to "Android projects from the archive" · 54: the heading names the actual projects without a separate eyebrow */
/* Hallmark · reworded "Practical software, carefully made." to "About Volant Software" · 54: make the company the heading rather than a redundant About eyebrow */
/* Hallmark · reworded "Have a task in mind?" to "Discuss your project" · 54: the contact action replaces the redundant Get in touch eyebrow */
/* Hallmark · dropped logo-visual-v2.png · full redesign replaces the decorative logo illustration with the supplied real project screenshots; the brand logo remains */
/* Hallmark · reworded "Android projects from the archive" to "Selected projects from the archive" · 54: name the retained web and Android projects after promoting the wind app */
/* Hallmark · reworded "Программы, которые двигают работу вперёд." to "Веб-системы. Android-продукты." · 19: replace the generic opener with the actual product types */
/* Hallmark · reworded "От задачи, а не от технологии." to "Веб, Android и автоматизация" · 54: the actual services replace the redundant eyebrow */
/* Hallmark · reworded "Продукты для ежедневных задач." to "Избранные проекты из архива" · 54: name the real project archive in the heading */
/* Hallmark · reworded "Практичные решения, сделанные внимательно." to "О Volant Software" · 54: put the company name in the heading instead of an eyebrow */
/* Hallmark · reworded "Есть задача?" to "Обсудим ваш проект" · 54: use the contact action as the heading */
@import url("./tokens.css");
@import url("./base.css");
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { font-weight: 400; }
a { text-decoration: none; }
a, button, input, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
a:active, button:active { opacity: .72; }
button, input, textarea { font-synthesis: none; }
img { flex-shrink: 0; }
.skip-link { position: fixed; top: var(--space-md); left: var(--space-md); z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); background: var(--ink); color: var(--surface); transform: translateY(-180%); }
.skip-link:focus-visible { transform: none; }
.site-header { position: relative; z-index: var(--z-sticky-nav); background: var(--surface); }
.header-inner { min-height: var(--header-height); display: flex; align-items: center; gap: var(--gap-columns); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: 22px; font-weight: 700; letter-spacing: -.045em; flex-shrink: 0; }
.brand img { width: 28px; height: 28px; }
.brand > span > span { color: var(--accent); }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: var(--gap-columns); font-size: var(--text-sm); font-weight: 600; }
.main-nav a, .language-switch { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.language-switch { min-width: 44px; justify-content: center; font-size: var(--text-sm); font-weight: 600; }
.nav-cta { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .4em; }
.hero { padding-block: var(--space-xl); }
.intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: center; min-height: calc(100svh - var(--header-height) - 2 * var(--space-xl)); }
.intro-copy { min-width: 0; }
h1 { max-width: 14ch; line-height: 1.08; }
.hero-lead { max-width: 32ch; margin-top: var(--space-lg); color: var(--muted); font-size: var(--text-lead); line-height: 1.55; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-input); background: var(--ink); color: var(--surface); font-size: var(--text-sm); font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: pointer; }
.button-secondary { background: transparent; color: var(--ink); padding-inline: 0; text-decoration: underline; text-underline-offset: .4em; }
.button:disabled { background: var(--color-disabled); color: var(--color-disabled-ink); cursor: not-allowed; opacity: .65; }
.hero-project { margin: 0; min-width: 0; }
.hero-screen { display: block; background: var(--surface-soft); border-radius: var(--radius-card); overflow: clip; }
.hero-screen img { width: 100%; height: clamp(420px, 60dvh, 560px); object-fit: contain; object-position: center; }
.hero-project figcaption { display: grid; gap: var(--space-xs); padding-top: var(--space-lg); }
.hero-project h2 { font-size: 19px; line-height: 1.35; letter-spacing: -.025em; }
.project-description { max-width: 65ch; color: var(--muted); font-size: var(--text-sm); }
.project-caption-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); color: var(--muted); font-size: var(--text-sm); }
.section { padding-block: var(--section-gap-s); }
.section-heading { margin-bottom: var(--space-2xl); }
.section-heading h2 { max-width: 22ch; }
.split-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; }
.split-heading > p { max-width: 48ch; color: var(--muted); }
.services { background: var(--surface-soft); }
.service-grid { display: grid; }
.service-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-top: 1px solid var(--line); }
.service-card:last-child { border-bottom: 1px solid var(--line); }
.service-card h3 { max-width: 24ch; }
.service-card p { max-width: 48ch; color: var(--muted); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding: 0; margin: var(--space-md) 0 0; list-style: none; color: var(--muted); font-size: var(--text-sm); }
.work { padding-block: var(--section-gap); }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.project-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; }
.project-featured .project-image img { aspect-ratio: 1597 / 752; }
.project-featured .project-content { padding-top: 0; }
.project-card { min-width: 0; }
.project-image { display: block; background: var(--surface-soft); border-radius: var(--radius-card); }
.project-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.project-content { padding-top: var(--space-lg); }
.project-content h3 { max-width: 22ch; }
.project-content > p { margin-top: var(--space-md); color: var(--muted); }
.project-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-lg); color: var(--muted); font-size: var(--text-sm); }
.about { padding-block: var(--section-gap-s); border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.about-copy { max-width: 65ch; align-self: center; }
.about-copy p + p { margin-top: var(--space-lg); color: var(--muted); }
.founding-year { display: block; margin-top: var(--space-xl); font-size: clamp(80px, 10vw, 144px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.065em; line-height: 1; }
.founding-label { display: block; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--muted); }
.text-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: var(--space-lg); font-size: var(--text-sm); font-weight: 600; text-decoration: underline; text-underline-offset: .4em; }
.contact-section { padding-block: var(--section-gap-s); background: var(--surface-soft); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.contact-copy h2 { max-width: 12ch; }
.contact-copy > p { max-width: 48ch; margin-top: var(--space-lg); color: var(--muted); }
.contact-links { display: grid; justify-items: start; gap: var(--space-xs); margin-top: var(--space-xl); }
.contact-links a { display: inline-flex; min-height: 44px; align-items: center; font-size: clamp(16px, 1.5vw, 22px); text-decoration: underline; text-underline-offset: .3em; overflow-wrap: break-word; max-width: 100%; }
.contact-copy .response-note { font-size: var(--text-sm); }
.contact-form { position: relative; display: grid; gap: var(--space-lg); align-content: start; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.form-field { display: grid; gap: var(--space-xs); }
.form-field label { font-size: var(--text-sm); font-weight: 600; }
.form-field input, .form-field textarea { width: 100%; min-width: 0; min-height: 52px; border: 1px solid var(--color-field-edge); border-radius: var(--radius-input); padding: var(--space-sm) var(--space-md); background: var(--surface); color: var(--ink); outline: 3px solid transparent; outline-offset: 3px; }
.form-field textarea { min-height: 176px; resize: vertical; }
.form-field input:focus-visible, .form-field textarea:focus-visible { outline-color: var(--color-focus); }
.form-field textarea::placeholder { color: var(--muted); opacity: 1; }
.form-field :is(input, textarea):user-invalid { border-color: var(--color-error); }
.form-field :is(input, textarea):disabled { background: var(--color-disabled); color: var(--color-disabled-ink); opacity: .65; cursor: not-allowed; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: clip; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; font-size: var(--text-sm); color: var(--muted); }
.consent input { width: 20px; height: 20px; margin: var(--space-2xs) 0 0; accent-color: var(--accent); }
.consent a { white-space: nowrap; color: var(--ink); text-decoration: underline; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.form-status { min-height: 1lh; max-width: 42ch; font-size: var(--text-sm); color: var(--muted); }
.form-status.is-error { color: var(--color-error); }
.form-status.is-success { color: var(--color-success); }
.site-footer { padding-block: var(--space-2xl); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-columns); }
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); color: var(--muted); font-size: var(--text-sm); }
.footer-meta a { min-height: 44px; display: inline-flex; align-items: center; }
.metrics-pixel { position: absolute; left: -10000px; width: 1px; height: 1px; }
@media (hover: hover) {
  a:hover { color: var(--accent-dark); }
  .button:not(.button-secondary):not(:disabled):hover { background: var(--accent-dark); color: var(--surface); }
  .hero-screen:hover, .project-image:hover { outline: 2px solid var(--accent); outline-offset: 4px; }
  .form-field :is(input, textarea):hover { background: var(--surface-soft); }
}
@media (max-width: 60rem) {
  :root { --header-height: 80px; }
  .header-inner { gap: var(--space-md); }
  .main-nav { gap: var(--space-lg); }
  .intro-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-xl); }
  h1 { max-width: 16ch; font-size: clamp(48px, 7vw, 72px); }
  .hero-screen img { height: min(60dvh, 560px); aspect-ratio: 1 / 1; object-fit: contain; }
  .split-heading { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .portfolio-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .project-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; }
  .project-content { padding-top: 0; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
}
@media (max-width: 40rem) {
  :root { --header-height: 72px; }
  .brand { font-size: 20px; }
  .brand img { width: 24px; height: 24px; }
  .main-nav a:not(.nav-cta) { display: none; }
  .main-nav { gap: 0; }
  .hero { padding-block: var(--space-lg) var(--space-xl); }
  .intro-grid { gap: var(--space-lg); }
  .hero-lead { margin-top: var(--space-md); }
  .hero-actions { align-items: stretch; gap: var(--space-xs); margin-top: var(--space-lg); }
  .hero-actions .button { width: 100%; }
  h1 { font-size: clamp(42px, 10.8vw, 64px); }
  .hero-screen { height: auto; }
  .hero-screen img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .section-heading { margin-bottom: var(--space-xl); }
  .service-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); }
  .project-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .founding-year { margin-top: var(--space-lg); }
  .form-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: var(--space-lg); }
  .footer-meta { width: 100%; justify-content: space-between; gap: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1:lang(ru) { font-size: clamp(40px, 4.2vw, 60px); max-width: 17ch; }
.consent:lang(ru) a { white-space: normal; }
@media (max-width: 60rem) { .project-featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 40rem) { .project-featured { grid-template-columns: minmax(0, 1fr); } }