/* ethiuni.ai — «Հյուսվածք» դիզայն-համակարգ (2026-09-17). Աղբյուրը՝ site-src/site.css, կառուցվում է build.py-ով։
   Token-ները մեկ տեղում են։ Մուգը հիմնական ռեժիմն է; լույսը՝ [data-theme="light"] կամ prefers-color-scheme: light։ */

:root, [data-theme="dark"] {
  --bg: #0E0B14; --bg2: #171221; --card: #1A1424; --card2: #1E1830;
  --text: #F4EFE8; --muted: rgba(244,239,232,0.74); --faint: rgba(244,239,232,0.58);
  --line: rgba(244,239,232,0.13); --line-strong: rgba(244,239,232,0.26);
  --link: #E9C78F; --btn: #F4EFE8; --btn-text: #14101E;
  --gold: #E9C78F; --gold-lit: #E9C78F; --accent: #E9C78F; --apricot: #E97F2E; --red: #9E1B3C; --teal: #7FC7BF;
  --red-text: #E0607F; /* designer 09-18. սխալ-ՏԵՔՍՏԻ կարմիրը. --red-ը (#9E1B3C) մուգ ֆոնին 2.3:1 էր (AA<4.5); սա 5.7:1 --bg-ի, 5.3:1 --card-ի վրա։ Կոճակ-ֆոնը մնում է --red */
  --elev: none; --elev-lg: 0 24px 60px rgba(0,0,0,0.45);
  --media-bg: #14101E;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #FBF8F3; --bg2: #F2EBE0; --card: #FFFFFF; --card2: #F2EBE0;
  --text: #1A1410; --muted: rgba(26,20,16,0.70); --faint: rgba(26,20,16,0.62);
  --line: rgba(26,20,16,0.12); --line-strong: rgba(26,20,16,0.22);
  --link: #6B4A2E; --btn: #1A1410; --btn-text: #FBF8F3;
  --gold: #8A6A48; --accent: #8A6A48; --apricot: #A84F14; --red: #9E1B3C; --teal: #2F7F78;
  --red-text: #9E1B3C; /* լույսում --red-ը ինքն է 6.7:1 */
  --elev: 0 1px 2px rgba(26,20,16,0.04), 0 12px 32px rgba(26,20,16,0.07);
  --elev-lg: 0 2px 4px rgba(26,20,16,0.04), 0 28px 64px rgba(26,20,16,0.12);
  color-scheme: light;
}
/* ՖԻՔՍՎԱԾ ՍԽԵՄԱ — ԴԻՏԱՎՈՐՅԱԼ ՉԵՆ ՇՐՋՎՈՒՄ ռեժիմով (09-23)։
   `.hero--full`-ը և `.invite`-ը ՄԻՇՏ մուգ են, իսկ `.btn--gold`/`.btn--red`-ի
   ֆոնը միշտ նույնն է — ուստի նրանց տեքստն էլ պիտի մնա նույնը։ Այս
   տոկենները `var(--text)`/`var(--bg)` ԴԱՌՆԱԼՈՒ ՉԵՆ. դա կշրջեր կոնտրաստը
   լույս ռեժիմում (չափված՝ լույս-gold-ի վրա մուգ տեքստը 3.7:1 էր)։
   Անունը կրում է հենց այդ պայմանագիրը՝ «fixed»։ */
:root {
  --fixed-ink: #F3EDE2;      /* լույս թանաք միշտ-մուգ մակերեսին (hero) */
  --fixed-ink-hi: #F7F1E6;   /* նույնը՝ hero-ի վերնագրին, մեկ քայլ բաց */
  --fixed-ink-soft: #F4EFE8; /* նույնը՝ invite-ի մարմնին */
  --fixed-paper: #0E0B14;    /* միշտ-մուգ մակերես (hero) */
  --on-gold: #1A1410;        /* մուգ թանաք ոսկե կոճակին */
  --on-red: #FBF8F3;         /* լույս թանաք կարմիր կոճակին */
  --invite-a: #4A2C5E;       /* invite-ի շառավղային անցում, մոտ */
  --invite-b: #1E1530;       /* … և հեռու ծայրը */
}


html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Noto Sans Armenian", "Noto Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.6; text-wrap: pretty; -webkit-font-smoothing: antialiased; }
/* Թեմայի անցում. գույնը հոսում է 180ms-ով, ոչ ցատկում; reduced-motion-ում՝ անջատված (polish 09-17) */
body, .site-header, .section--tint, .card, .chat-card, .bubble, .chat-card-input, .theme-toggle, .nav-toggle, .about-photo { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
@media (prefers-reduced-motion: reduce) { body, .site-header, .section--tint, .card, .chat-card, .bubble, .chat-card-input, .theme-toggle, .nav-toggle, .about-photo, .btn { transition: none; } }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--text); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* border-radius-ը հանված է. focus-ը կլոր կոճակների ձևը չի փոխում */
img, video { max-width: 100%; display: block; }
video { background: var(--media-bg); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
.serif { font-family: "Noto Serif Armenian", "Noto Serif", serif; font-weight: 500; }
.eyebrow { font-size: 13px; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.page { width: 100%; max-width: 1440px; margin: 0 auto; background: var(--bg); display: flex; flex-direction: column; position: relative; }
.wrap { padding-left: clamp(24px, 5vw, 80px); padding-right: clamp(24px, 5vw, 80px); }

/* Կոճակներ ու հղումներ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 999px; background: var(--btn); color: var(--btn-text); font-size: 17px; font-weight: 500; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; transition: opacity 0.2s ease, transform 0.2s ease; }
.btn:hover { opacity: 0.88; transform: translateY(-1px); color: var(--btn-text); }
.btn--small { padding: 11px 20px; font-size: 15px; }
.btn--gold { background: var(--gold-lit); color: var(--on-gold); } /* միայն մուգ (invite) ֆոնի վրա. լույս-gold-ի վրա մուգ տեքստը 3.7:1 էր */
.btn--red { background: var(--red); color: var(--on-red); }
.topic { color: var(--apricot); font-size: 15px; }
.topic:hover { color: var(--text); }

/* Վերնամաս */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 15px; }
.lockup { flex: none; display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--text); }
.lockup img { width: 30px; height: 30px; }
.lockup span { font-size: 17px; letter-spacing: 0.005em; }
.site-nav { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 24px; color: var(--muted); }
.site-nav a { color: inherit; padding: 6px 0; }
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); }
.nav-lang { letter-spacing: 0.08em; font-size: 13px; color: var(--faint); padding: 6px 0; }
.nav-lang a[aria-current="true"] { color: var(--text); }
.theme-toggle { margin-left: 4px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.theme-toggle:hover { color: var(--text); }
/* Կենտրոնական տարրը /talk/-ում հղում չէ՝ ընթացիկ էջի անունն է (նավիգացիայի ներքին քարտեզ, ՎԵՐԵՎ §2) */
.nav-now { flex: none; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); cursor: pointer; padding: 0; flex: none; }
.nav-toggle .nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }

/* ---- DRAWER — ընդհանուր կմախք, երեք մակերես մեկ մեխանիզմով (K11/K12, 09-19) ----
 * Պայմանագիրը երկու attribute է. պանելը՝ [data-drawer] (+ id), կոճակը՝
 * [data-drawer-toggle="<id>"]. Կառավարիչը site.js-ում է (weave.js), ոճը՝ այստեղ
 * (weave.css) — /talk/-ն ու /workspace/-ը նույն երկու ֆայլն են բեռնում, ուստի
 * նոր artifact պետք չէ։ Քարտեզը ներքին է (repo-ի փաստաթղթերում)։
 * ≥1101px՝ պանելը inline է (header-ի nav կամ talk-ի ձախ սյուն) — drawer չկա։ */
.drawer-head { display: none; }
.drawer-close { display: none; }
@media (max-width: 1100px) { /* 1024-ում RU/EN nav-ը երկու տող էր դառնում → մենյու-կոճակ; 09-19-ից ՆՈՒՅՆ շեմը talk-ում էլ (ethi.css) */
  .site-header { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .lockup { margin-right: auto; min-width: 0; }
  .nav-toggle { display: inline-flex; }
  .site-header > .btn { padding: 9px 14px; font-size: 14px; }

  .drawer[data-drawer] {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 60;
    box-sizing: border-box; /* կայքում գլոբալ border-box չկա — առանց սրա padding+border-ը
      * պանելը 340-ից 381px էր դարձնում, ձախ եզրը մտնում էր overlay-ի տակ, և overlay-ի
      * սեղմումը լուռ չէր փակում (բռնվեց ռենդեր-ստուգմամբ, ոչ markup-ով) */
    width: min(340px, 88vw); max-width: none; height: auto; margin: 0;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
    gap: 2px; padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
    background: var(--card); border: 0; border-left: 1px solid var(--line); border-radius: 0;
    box-shadow: var(--elev-lg); overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(101%); visibility: hidden;
    transition: transform 0.24s ease, visibility 0s linear 0.24s;
  }
  .drawer[data-drawer][data-open="true"] { transform: none; visibility: visible; transition: transform 0.24s ease; }
  .drawer-overlay { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, 0.5); }
  html.drawer-locked, html.drawer-locked body { overflow: hidden; }
  /* order: -2 — /talk/-ի ձախ սյունում .chat-new-ը order: -1 է (ethi.css), ուստի
   * առանց սրա փակել-կոճակը «Նոր զրույց»-ից ՀԵՏՈ էր ընկնում (բռնվեց 390/768 ռենդերով) */
  .drawer-head { display: flex; order: -2; align-items: center; justify-content: flex-end; min-height: 44px; margin-bottom: 2px; }
  .drawer-close {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); cursor: pointer;
  }
  .drawer-close:hover { background: var(--bg2); }

  .site-nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; font-size: 17px; color: var(--text); border-bottom: 1px solid var(--line); }
  .nav-lang { padding: 16px 0 4px; font-size: 15px; letter-spacing: 0.06em; }
  .nav-lang a { display: inline-block; border: 0; padding: 11px 4px; }
  .theme-toggle { align-self: flex-start; margin: 8px 0 0; min-height: 44px; padding: 10px 18px; font-size: 14px; }
}
@media (max-width: 420px) {
  .lockup span { font-size: 16px; }
  .site-header > .btn { padding: 9px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .drawer[data-drawer] { transition: none; } }

/* Hero */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(36px, 5vw, 72px); align-items: center; padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(48px, 6vw, 88px); }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-size: clamp(30px, 3.4vw, 58px); line-height: 1.06; letter-spacing: -0.02em; max-width: 19ch; font-weight: 500; }
.hero-lead { font-size: clamp(18px, 1.7vw, 20px); line-height: 1.6; color: var(--muted); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 4px; }
.hero-hint { font-size: 15px; color: var(--faint); }
.hero-media { position: relative; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: var(--media-bg); box-shadow: var(--elev-lg); cursor: pointer; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
/* Hero — մուլտ v2 (Վահան 09-18). կայքի քարտերի ոճով, ոչ full-width; տեքստը ներքևում մեկ սյուն */
.hero--mult { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 3.6vw, 44px); padding-top: clamp(24px, 3.5vw, 44px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero-media--mult { aspect-ratio: auto; cursor: default; width: 100%; max-width: 1000px; box-shadow: 0 0 0 1px var(--line), var(--elev-lg); } /* ոչ full-width. քարտի պես, կենտրոնում. 1000px՝ 1440×900-ում h1-ը առաջին էկրանում է (1120-ով 800px-ից էր սկսվում); 1px ring՝ մուգում քարտի եզրը երևա (ստվերը մուգի վրա անտեսանելի է) */
.hero-media--mult video { display: block; height: auto; aspect-ratio: 16 / 9; } /* designer 09-18 (T4, webkit). Հարաբերակցությունը video-ի վրա, ոչ container-ի. WebKit-ը column-flex-ում container-ի aspect-ratio-ն հաշվում էր width:100%-ի SPECIFIED արժեքից (viewport 390 → 219px), ոչ used 342-ից (→192) — video-ի տակ 27px դատարկ շերտ։ Firefox/Chromium-ում արժեքը նույնն է մնում */
.hero-sound { position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid rgba(243,237,226,.28); background: rgba(14,11,20,.58); color: var(--fixed-ink); cursor: pointer; backdrop-filter: blur(6px); transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.hero-sound:hover, .hero-sound:focus-visible { background: rgba(14,11,20,.86); border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
/* S3 (09-18, v2). box-shadow-ring — outline-ը մուգ ֆոնին անտեսանելի էր դառնում; box-shadow-ը
   ֆոնից անկախ երևում է (WCAG 2.4.7/1.4.11)։ outline-ը ՉԻ հանված (transparent, ոչ none) —
   forced-colors (Windows High Contrast) ռեժիմում box-shadow-ը հեռացվում է, և transparent
   outline-ը system-ի Highlight գույնով լցվում է. none-ով այդ ռեժիմում ոչ մի ֆոկուս-նշան չէր մնում */
.hero-sound:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px var(--gold); }
@media (forced-colors: active) { .hero-sound:focus-visible { outline-color: Highlight; } }
.hero-sound-svg, .hero-play-svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-sound-svg .ico-speaker, .hero-play-svg .ico-play, .hero-play-svg .ico-pause { fill: currentColor; stroke: none; }
.hero-sound[aria-pressed="false"] .ico-wave { display: none; }
.hero-sound[aria-pressed="true"] .ico-mute { display: none; }
/* S3 (09-18). #hero-play՝ #hero-sound-ի ձախ կողքին (44px + 8px բացատ) */
#hero-play { right: 68px; }
#hero-play[aria-pressed="true"] .ico-play { display: none; }
#hero-play[aria-pressed="false"] .ico-pause { display: none; }
.hero-copy--mult { max-width: 720px; gap: 18px; align-items: center; text-align: center; } /* մեկ սյուն, կենտրոնացված՝ հոլովակի առանցքով */
.hero-copy--mult h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.018em; max-width: 30ch; } /* 22ch/48px-ով HY-ը 3 տող էր; balance-ը 2 տող է դարձնում */
.hero-copy--mult .hero-lead { max-width: 58ch; }
.hero-copy--mult .hero-actions { flex-direction: column; gap: 12px; margin-top: 8px; }
.hero-copy--mult .hero-hint { max-width: 40ch; }
@media (max-width: 720px) {
  .hero--mult { padding-top: 16px; gap: 22px; }
  .hero-media--mult { border-radius: 18px; }
  /* G13(գ) (Georgi, Vahan-approved 09-19). 40px < WCAG 2.5.8-ի 44px tap-target-ից */
  .hero-sound { right: 10px; bottom: 10px; width: 44px; height: 44px; }
  #hero-play { right: 62px; }
}
/* Hero — վիդեո-ֆոն (Վահան 09-18). Վիդեոն մուգ է երկու թեմայում էլ, ուստի տեքստի գույները ֆիքսված են՝ ոչ թեմա-token */
.hero--full { display: block; position: relative; overflow: hidden; padding: 0; min-height: clamp(560px, 86vh, 960px); background: var(--fixed-paper); color: var(--fixed-ink); isolation: isolate;
  width: 100vw; margin-left: calc(50% - 50vw); } /* .page-ի 1440px սահմանից դուրս՝ եզրից եզր (Վահան 09-18. «hero-ն ամբողջական») */
.hero--full .wrap { max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.hero--full .hero-bg { position: absolute; inset: 0; cursor: pointer; }
.hero--full .hero-bg video { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; display: block; } /* 21:9 հոլովակ, ռինգը կենտրոնում. ձախ խարիսխով cover-ը ռինգը բերում է աջ 2/3-ի, ձախը՝ տեքստի */
.hero--full .hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(14,11,20,.88) 0%, rgba(14,11,20,.62) 38%, rgba(14,11,20,.08) 70%),
              linear-gradient(180deg, rgba(14,11,20,.10) 0%, rgba(14,11,20,0) 35%, rgba(14,11,20,.55) 100%); }
.hero--full .wrap { position: relative; z-index: 1; min-height: inherit; display: flex; }
.hero--full .hero-copy { justify-content: flex-end; gap: 16px; max-width: 560px; padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(44px, 6vw, 80px); }
.hero--full h1 { font-size: clamp(24px, 2.3vw, 36px); line-height: 1.18; letter-spacing: -0.01em; max-width: 26ch; color: var(--fixed-ink-hi); }
.hero--full .hero-lead { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: rgba(243,237,226,.78); max-width: 46ch; }
.hero--full .hero-actions { margin-top: 6px; gap: 16px; }
.hero--full .hero-hint { color: rgba(243,237,226,.55); font-size: 14px; }
.hero--full .btn--gold:hover { filter: brightness(1.06); }
@media (max-width: 720px) {
  .hero--full { min-height: 0; height: calc(100vw * 16 / 9); } /* hero = հոլովակի 9:16 կադրը 1:1, ոչինչ չի կտրվում (Վահան 09-18. «նշանը ամբողջական») */
  .hero--full .hero-bg video { object-position: 50% 40%; } /* 9:16 հոլովակ (hero-m.mp4, 09-18). ռինգը վերին կեսում է, ներքևը մուգ */
  .hero--full .hero-bg::after { background: linear-gradient(180deg, rgba(14,11,20,.10) 0%, rgba(14,11,20,0) 40%, rgba(14,11,20,.45) 60%, rgba(14,11,20,.85) 100%); }
  .hero--full .wrap { min-height: 100%; height: 100%; }
  .hero--full .hero-copy { padding-top: 0; padding-bottom: 28px; max-width: none; gap: 12px; }
  .hero--full .hero-lead { font-size: 15px; line-height: 1.5; }
  .hero--full h1 { font-size: 24px; }
  .hero--full .hero-hint { display: none; } /* մոբայլում տեղը ռինգինն է */
}
@media (max-width: 720px) { /* մեկ սյան hero. մեդիան տեքստի ՎԵՐԵՎՈՒՄ է, որ նշանը առաջին էկրանում երևա (390-ում 602px-ից իջնում է 89px) */
  .hero { padding-top: 24px; gap: 28px; }
  .hero-media { order: -1; }
}

/* Բաժիններ */
.section { display: flex; flex-direction: column; gap: 40px; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.section--tint { background: var(--bg2); border-bottom: 1px solid var(--line); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 20px; }
.lead { font-size: 17px; color: var(--faint); max-width: 56ch; } /* ինքնուրույն կանոն (09-18) — 404-ի p.lead-ը .section-head-ի ներսում չէ, առանց սրա անոճ էր */
.section-head .lead { font-size: 17px; color: var(--faint); max-width: 56ch; }
.section-title { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.015em; max-width: 18ch; }
.section-head--split { justify-content: space-between; align-items: baseline; gap: 24px; } /* baseline. lead-ի առաջին տողը h2-ի առաջին տողի հետ է, ոչ վերևում «լողացող» (polish 09-17) */
.section-head--split .lead { color: var(--muted); max-width: 46ch; line-height: 1.6; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } /* 280. 1024-ում երեք Էություն-քարտը մեկ շարքում */
.cards--services { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* designer 09-21. Չորս ծառայություն = 2×2 սիմետրիկ; auto-fit-ը 1440-ում երեք սյուն էր տալիս → դատարկ անկյուն աջ-ներքև */
@media (max-width: 720px) { .cards--services { grid-template-columns: minmax(0, 1fr); } }
.card { display: flex; flex-direction: column; border-radius: 24px; background: var(--card); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--elev); transition: border-color 0.25s ease, background-color 0.18s ease, color 0.18s ease; }
.card:hover { border-color: var(--line-strong); } /* մեկ hover-ազդանշան՝ եզրագծի լուսավորում; lift-ը հանված է (մուգում առանց ստվերի անտեսանելի էր) */
.card-media { aspect-ratio: 16 / 9; background: var(--media-bg); overflow: hidden; cursor: pointer; }
.card-media video, .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media { cursor: default; } /* V1. ստատիկ նկար, hover-կլիպ չկա */
.card-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 28px 30px 32px; }
.card-body h3 { font-size: clamp(23px, 1.4vw + 14px, 28px); line-height: 1.15; letter-spacing: -0.01em; }
.card-body p { font-size: 16px; line-height: 1.6; color: var(--muted); }
.card-body .topic { margin-top: auto; padding-top: 12px; }
/* Քարտի ԵՐԿՐՈՐԴ ելքը (→ /ognum/<slug>/) — designer-ի ձևը, 09-22. Սպասում է
   build.py-ի markup-ին (`.topic`-ը փաթաթվում է .card-actions-ով + .card-more
   հղում)։ Ոսկին ու ծիրանագույնը ԶԲԱՂՎԱԾ ԴԵՐԵՐ են (գործողություն / «Սկսել այս
   թեմայով»), ուստի երկրորդ ելքը --faint տեքստ-հղում է, ոչ երկրորդ կոճակ —
   այլապես քարտը երկու հավասար կանչ կունենա ու առաջինը կթուլանա։ */
.card-body .card-actions { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.card-body .card-actions .topic { margin-top: 0; padding-top: 0; }
.card-more { font-size: 15px; color: var(--faint); }
.card-more:hover { color: var(--text); }

/* Ինչպես ենք աշխատում + զրույց */
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); /* designer 09-18 (T4). 390-ում content-ը 342px է, 360px-ի minmax-ը 18px overflow էր տալիս — քայլերի նկարը viewport-ից կտրվում էր */ gap: clamp(40px, 5vw, 72px); align-items: start; padding-top: clamp(48px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 96px); }
.how-col { display: flex; flex-direction: column; gap: 32px; }
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); align-items: start; }
.step-media { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--media-bg); }
.step-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) { .step { grid-template-columns: minmax(0, 1fr); } .step-media, .step > :last-child { grid-column: 1; } } /* designer 09-18 (T4). տեքստի div-ը auto-placement-ով 48px սյունն էր ընկնում՝ բառ-առ-տող (երեք browser-ում) */
.step:last-of-type { border-bottom: 1px solid var(--line); }
.step h3 { font-size: 20px; font-weight: 500; margin-bottom: 8px; line-height: 1.35; }
.step p { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 60ch; }
.how-note { font-size: 15px; line-height: 1.6; color: var(--faint); padding-top: 20px; max-width: 60ch; }

.chat-card { display: flex; flex-direction: column; width: 100%; max-width: 500px; justify-self: end; position: sticky; top: 96px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--elev-lg); overflow: hidden; }
.chat-card-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.chat-card-head img { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, var(--bg2) 55%, transparent 72%); }
.chat-card-head b { display: block; font-size: 16px; font-weight: 500; }
.chat-card-head small { font-size: 13px; color: var(--faint); }
.chat-card-log { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.bubble { max-width: 85%; padding: 13px 17px; border-radius: 18px 18px 18px 4px; background: var(--bg2); font-size: 15px; line-height: 1.55; }
.bubble--me { align-self: flex-end; border-radius: 18px 18px 4px 18px; background: var(--btn); color: var(--btn-text); }
.chat-card-input { display: flex; align-items: center; gap: 12px; margin: 0 24px 20px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; }
.chat-card-input span { flex: 1; font-size: 15px; color: var(--faint); }
.chat-card-foot { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; padding: 16px 24px; border-top: 1px solid var(--line); font-size: 14px; }
.chat-card-foot .faint { color: var(--faint); }

/* Մեր մասին */
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(32px, 4vw, 64px); padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); align-items: start; border-top: 1px solid var(--line); } /* նույն ուղղահայաց ռիթմը, ինչ .section-ը (72→86 1440-ում) */
.about-head { display: flex; flex-direction: column; gap: 20px; }
.about-head h2 { font-size: clamp(24px, 2.3vw, 28px); line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; }
.about-body { display: flex; flex-direction: column; gap: 18px; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 62ch; }
.about-photo { position: relative; aspect-ratio: 3 / 2; border-radius: 20px; border: 1px solid var(--line); background: radial-gradient(ellipse at 30% 25%, var(--card2), var(--bg2) 70%); display: flex; align-items: flex-end; padding: 16px; font-size: 12px; letter-spacing: 0.06em; color: var(--faint); overflow: hidden; }
/* V1. about-photo-ն իրական նկար է (մեր մասին-ի սեղանը), տեղապահ-նշանը հանված */
.about-photo { padding: 0; }
.about-photo > img:not(.about-photo-mark) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Հրավեր */
.invite { position: relative; margin-left: clamp(24px, 5vw, 80px); margin-right: clamp(24px, 5vw, 80px); padding: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 64px); border-radius: 32px; background: radial-gradient(ellipse at 18% 18%, var(--invite-a), var(--invite-b) 62%); color: var(--fixed-ink-soft); display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: center; overflow: hidden; }
.invite-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.invite-copy { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 58ch; }
.invite h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.015em; font-weight: 500; }
.invite p { font-size: 17px; line-height: 1.6; color: rgba(244,239,232,0.86); }
.invite .btn { position: relative; }

/* Footer */
.site-footer { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; padding-top: clamp(36px, 4vw, 56px); padding-bottom: 48px; font-size: 14px; color: var(--faint); }
.site-footer .lockup { flex: 1 1 240px; min-width: 0; }
.site-footer .lockup span { min-width: 0; font-size: 14px; font-weight: 400; }
.site-footer .lockup img { width: 22px; height: 22px; flex: none; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer nav a { color: var(--faint); }
.site-footer nav a:hover { color: var(--text); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--btn); color: var(--btn-text); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; z-index: 30; }

/* Իրավական էջեր (privacy/404) — dev/gen_legal.py-ի կառուցած կմախքը, նույն
   token-ներով ինչ build.py-ի render()-ը; .legal-* դասերը էջի բովանդակությունն
   են (id-ները՝ §-համարներ, պահված), ոչ build.py-ից եկած markup։ */
.legal-wrap { max-width: 860px; margin: 0 auto; } /* 760→860 (09-18) — .wrap-ի padding-ով սյունը 72ch (.legal-text-ի max-width) փաստացի հասնում է, ոչ կրճատվում */
.legal-wrap .section--hero { padding-top: clamp(40px, 5vw, 72px); padding-bottom: 4px; gap: 10px; }
.legal-title { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -0.015em; margin: 4px 0 0; }
.legal-updated { font-size: 14px; color: var(--faint); }
.legal-wrap .section--last { padding-bottom: clamp(48px, 6vw, 88px); gap: 20px; }
.legal-section { display: flex; flex-direction: column; gap: 10px; max-width: 72ch; padding: 28px 30px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); }
.legal-section .eyebrow { color: var(--faint); } /* §-համարը՝ բաժին-կոդ, ոչ ոսկեգույն շեշտ (այն eyebrow-ի ընդհանուր օգտագործումն է վերնագրի համար) */
.legal-heading { font-size: 20px; line-height: 1.3; }
.legal-text { font-size: 16px; line-height: 1.65; color: var(--muted); }
.legal-text .em { color: var(--text); font-weight: 500; }
.legal-flag { font-size: 14px; line-height: 1.5; color: var(--gold); }

/* 404 */
.legal-404 { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 52ch; margin: 0 auto; padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(56px, 9vw, 120px); text-align: center; }
.legal-404-eti { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, var(--bg2) 55%, transparent 72%); }
.legal-404 h1 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -0.01em; }
.legal-404-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }
.legal-404-home { display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text); font-size: 17px; font-weight: 500; }
.legal-404-home:hover { border-color: var(--gold); color: var(--gold); }

/* Ներքին էջեր (/ognum/<slug>/) — dev/gen_ognum.py-ի կմախքը, 2026-09-22 (designer).
   ԱՌԱՆՁԻՆ ՈՍՊՆՅԱԿ, ոչ .legal-*-ի պարտք. իրավական էջը ՍԿԱՆԱՎՈՐՎՈՒՄ է (§-ներ,
   քարտեր, կարճ պարբերություն), սա ԿԱՐԴԱՑՎՈՒՄ է սկզբից վերջ։ Ուստի՝ չափված սյուն,
   h1»h2 աստիճան, պարբերությունների ՄՈՏ ռիթմ բաժինների ՀԵՌՈՒ ռիթմի դիմաց։
   Ամեն կանոն .ognum-wrap-ի տակ է — գլոբալ .section/.section-title-ը չի դիպչվում։ */
.ognum-wrap { max-width: 900px; margin: 0 auto; }
/* Մեկ hairline վեցի փոխարեն. կրկնվող եզրագիծը բաժինը ՍՏՈՐԱԳՐՈՒՄ էր որպես կետ
   պայմանագրում։ Բաժանումը հիմա սպիտակ տարածքն է, ոչ գիծը։ */
.ognum-wrap .section { gap: 18px; padding-top: clamp(36px, 4vw, 60px); padding-bottom: clamp(36px, 4vw, 60px); border-top: 0; }
.ognum-wrap .section--hero { padding-top: clamp(40px, 5vw, 72px); padding-bottom: 8px; gap: 10px; }
.ognum-h1 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.02em; max-width: 19ch; margin: 6px 0 0; }
/* h2-ը ԵՆԹԱԿԱ է h1-ին։ Առաջ երկուսն էլ clamp(30,3.2vw,40) էին — էջը վեց հավասար
   վերնագիր ուներ ու զրո գագաթ։ Պիտակը class-ով ՉԻ ընդլայնվում. test.sh:1680-ը
   `<h2 class="section-title">`-ը ԲԱՅԹ-ԱՌ-ԲԱՅԹ է կարդում, ուստի ոճը ժառանգական է։ */
.ognum-wrap .section-title { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.25; letter-spacing: -0.005em; max-width: 26ch; margin-bottom: 2px; }
.ognum-wrap .section-title::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: 14px; border-radius: 2px; background: var(--gold); }
/* 72ch, ոչ 66. `ch`-ը «0»-ի լայնքն է, իսկ հայերենը ՆՈՒՅՆ թվի վրա ավելի լայն է —
   66ch-ը ռենդերում ~60 նիշ էր տալիս (չափված, ոչ ենթադրված); 72-ը ~66 է։ */
/* `p:not([class])` — ՄԱՐՄԻՆ-տեքստն է, ոչ ամեն <p>. 09-22-ին ՉԱՓՎԱԾ. `.ognum-wrap p`-ի
   տակ (0,1,1) ընկնում էր նաև `<p class="eyebrow">`-ը (0,1,0) ու `<p class="lead">`-ը,
   և eyebrow-ը ռենդերվում էր 17px/--muted/2.04px letter-spacing՝ համակարգի
   13px/--gold/1.56px-ի փոխարեն (/ognum/ բոլոր 12 էջում, ոչ միայն start-ում)։
   Ոսկին eyebrow-ի ԴԵՐՆ Է պալիտրայում — այստեղ այն լուռ կորել էր։ */
.ognum-wrap p:not([class]) { font-size: 17px; line-height: 1.72; color: var(--muted); max-width: 72ch; }
/* 500, ոչ 600. fonts.css-ում կա ՄԻԱՅՆ 400 և 500 (տեղական woff2, CDN չկա) — 600-ը
   լուռ իջնում է 500-ի, ուստի հայտարարությունը համապատասխանում է իրականությանը,
   ոչ մտադրությանը։ Նույն ձևը, ինչ .legal-text .em-ը։ Շեշտը ԾԱՆՐՈՒԹՅԱՄԲ ու
   գույն-ուժով է բարձրանում --muted-ի վրա, ոչ գույն-ԴԵՐՈՎ (ոսկին գործողությանն է)։ */
.ognum-wrap strong { color: var(--text); font-weight: 500; }
.ognum-wrap ul, .ognum-wrap ol { margin: 0; padding-left: 1.35em; max-width: 72ch; font-size: 17px; line-height: 1.72; color: var(--muted); }
/* flex-ով ՉԻ արվում. flex-item-ը կորցնում է display:list-item — մարկերը անհետանում է։ */
.ognum-wrap li + li { margin-top: 14px; }
.ognum-wrap li::marker { color: var(--faint); }

/* «Էություն» — ամփոփումն է, ոչ վեցերորդ պարբերությունը. քարտը այդ տարբերությունն է։
   Token-ները նույնն են, ինչ .legal-section-ինը — նոր մակերես չի ծնվում։ */
/* `ch`-ը ՏԱՐՐԻ ՍԵՓԱԿԱՆ font-size-ով է լուծվում։ Քարտը font-size չէր հայտարարում
   (ժառանգում էր body-ի 16px), ուստի իր 72ch-ը 658.9px էր, տեքստ-սյան 72ch-ը (17px)՝
   700.1px — ՆՈՒՅՆ token-ը, ԵՐԿՈՒ չափ, և աջ եզրերը 21px տարբերվում էին (չափված
   1440/1200/900-ում, /ognum/-ի չորս էջում էլ)։ 17px + border-box = քարտի ԱՐՏԱՔԻՆ եզրը
   ճիշտ նստում է տեքստ-սյան վրա (1059/1059 · 789/789 · 366/366)։ Ներսի p-ի 62ch-ը
   հանված է. այն քարտի աջում 56px մեռյալ գոտի էր թողնում (ձախ 30 / աջ 86)։ */
.ognum-card { max-width: 72ch; box-sizing: border-box; font-size: 17px; padding: 6px 30px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); }
/* `.ognum-wrap`-ով խարսխված. առանց դրա `p:not([class])`-ը (0,2,1) գերակա է
   `.ognum-card p`-ին (0,1,1), և `max-width: none`-ը կլիներ ԻՆԵՐՏ հայտարարություն։ */
.ognum-wrap .ognum-card p { max-width: none; padding: 20px 0; }
.ognum-card p + p { border-top: 1px solid var(--line); } /* երեք փուլը՝ երեք տող, ոչ երեք բլոկ */

/* Փակող բլոկ — մեկ գործողության տող, ոչ ուղղահայաց սանդուղք */
.ognum-wrap .section--last { gap: 20px; padding-top: clamp(32px, 4vw, 52px); padding-bottom: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.ognum-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.ognum-back { font-size: 15px; color: var(--faint); }
.ognum-back:hover { color: var(--text); }
/* 390-ում քարտի 30px-անոց կողքերը .wrap-ի 24px-ի վրա ավելանում էին — «Էություն»-ի
   տողը 30 նիշ էր դառնում, մնացած էջի ~40-ի դիմաց (չափված ռենդերով, ոչ ենթադրված)։ */
@media (max-width: 560px) {
  .ognum-card { padding-left: 18px; padding-right: 18px; border-radius: 22px; }
  .ognum-wrap .ognum-card p { padding: 16px 0; } /* նույն (0,2,1) խարիսխը — media-կանոնը ՄԱՍՆԱՎՈՐՈՒԹՅԱՄԲ չի հաղթում, միայն կարգով */
}

/* 09-22. «ԱԲ-ի»-ն browser-ը կոտրում է ԳԾԻԿԻ վրա (900/760px)։ Ուղղումը
   ռենդերի շերտում է, ոչ բովանդակության — U+2011 աղբյուրում կկոտրեր
   որոնումն ու parser-ը։ Փաթաթումը dev/gen_ognum.py-ի ներտող()-ում է։ */
.nb { white-space: nowrap; }

/* ── /ognum/<slug>/ ՀՐԱՊԱՐԱԿԱՅԻՆ ՊՐՈՅԵԿՑԻԱ (landing) ──────────────────────
   Վահան, 09-22. «landing page-ի նման ձևակերպված բարձր կարդացվելիությամբ և
   համապատասխան կառուցվածքներով ու դիզայնով»։ Նոր մակերես ՉԻ ծնվում — ամեն
   արժեք առկա token է; նորը ՌԻԹՄՆ է ու հիերարխիան, ոչ պալիտրան։
   Ամեն կանոն `.ognum-landing`-ի տակ է, ուստի ներքին ռեժիմի չորս էջը
   (landing-ֆայլ չունեցողները) բայթ առ բայթ անփոփոխ է մնում։ */
.ognum-landing .section--hero { padding-bottom: clamp(24px, 3vw, 36px); gap: 16px; }
/* Ենթատողը ԶՈՒՅԳ Է, ոչ պարբերություն. էջի բուն պնդումը ԱՆՑՈՒՄՆ է
   («գալիս եք» → «հեռանում եք»), և երկու տողը հենց այն ցույց է տալիս։
   Երկրորդ տողը լրիվ --text է. կշիռը ելքին է, ոչ մուտքին։ */
.landing-sub { margin: 4px 0 0; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.38; max-width: 32ch; }
.landing-sub span { display: block; color: var(--muted); }
.landing-sub span + span { color: var(--text); }
/* 68ch, ոչ 52. Նոտան ՄԵԿ շունչ է — 52-ը 1440/900/760-ում վերջին երկու բառը
   («Կլոր Սեղանին։») գցում էր առանձին տող՝ ՈՐԲ, ուղիղ գլխավոր կոճակի տակ,
   և ՆՈՒՅՆ որբը կրկնվում էր փակող բլոկում։ 390-ում այսպես էլ փաթաթվում է։ */
.landing-note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--faint); max-width: 68ch; text-wrap: balance; }
/* 09-22, ՉԱՓՎԱԾ ու ՄԵՐԺՎԱԾ. `text-wrap: pretty`-ն այստեղ ԻՆԵՐՏ է։
   68ch-ը հայերենի համար էր ընտրված, ու երեք լեզվի ռենդերը ցույց տվեց
   կարճ վերջին տողեր en/ru-ում (ru `.landing-note` → «в Ереване.»;
   en `ul + p` → «of you.»)։ Դեկլարատիվ ուղղումը փորձարկվեց՝
   `CSS.supports('text-wrap','pretty')` = true, computed = `pretty`,
   Chromium 148 — և 24 համակցությունից ՈՉ ՄԵԿՈՒՄ տող չշարժվեց։ Պատճառը.
   Chrome-ը որբ է համարում ՄԵԿ-բառանոց վերջին տողը, իսկ սրանք երկբառ են։
   Կանոնը հանված է դիտավորյալ — իներտ կանոնը պարտք է, ոչ պաշտպանություն։
   Մնացած ուղին ch-արժեքի լեզու-ճյուղն է, որը մերժվում է ձևով։

   09-22 (landing ×12, designer). `text-wrap: balance`-ը ԱՅՍՏԵՂ ԳՈՐԾՈՒՄ Է —
   ի տարբերություն `pretty`-ի, որը որբ է համարում միայն ՄԵԿ-բառանոց վերջին
   տողը։ `balance`-ը հավասարեցնում է տողերի լայնությունը, ուստի բռնում է
   հենց այն երկբառ որբերը, որոնցից `pretty`-ն անցնում էր (ru «в Ереване.»
   1440/900/760-ում՝ վերջին տողը էջի լայնության 13%-ը; en «in Yerevan.»
   390-ում՝ 22%)։ ՉԱՓՎԱԾ 12 էջ × 4 լայնություն = 48 համակցություն.
   որբ (վերջին տող <35%) 20 → 0, իսկ ՏՈՂ-ՀԱՇԻՎԸ ու բարձրությունը 48/48-ում
   ԱՆՓՈՓՈԽ են (միայն ռագն է շարժվում, ոչ դասավորությունը) — ուստի ոչ մի
   քույր-էջ չի տեղաշարժվում։ Chrome-ի balance-ի 4-տողանոց առաստաղը բավարար
   է. ամենախիտ դեպքը 390-ում 4 տող է։ Ոչ լեզու-ճյուղ, ոչ նոր token։ */
.ognum-landing .ognum-actions { margin-top: 4px; }

.ognum-landing .landing-block { gap: 14px; }
/* Մարմին-տեքստը landing-ում ավելի կարճ տող ունի, քան ներքին ռեժիմում.
   սկանավորվում է, ոչ ընթերցվում շարունակաբար։ */
.ognum-landing .landing-block p:not([class]) { max-width: 62ch; }
.ognum-landing .landing-block ul, .ognum-landing .landing-block ol { max-width: 62ch; }
/* «Ո՞ւմ համար չէ» — ցուցակից ՀԵՏՈ եկող պարբերությունը սահմանն է, ոչ կետ։
   Ձևը ասում է դա (մանր, faint, 18px բացվածք), ոչ պիտակ։ Տարրը h2-ի հետ
   ՀԱՎԱՍԱՐԵՑՎԱԾ է (x=0), ոչ ներս քաշված — չափված 09-22, և մեկնաբանությունը
   ուղղված է հենց այդ չափումից, ոչ մտադրությունից։ */
.ognum-landing .landing-block ul + p:not([class]) { margin-top: 18px; font-size: 15px; color: var(--faint); }

/* Հինգ քայլը ԻՐՈՔ հաջորդականություն է, ուստի համարը կառուցվածք է, ոչ զարդ։
   Grid, ոչ ::marker — մեծ թիվը պիտի իր սյունը ունենա, և տեքստը չպիտի
   փաթաթվի թվի տակ։ */
.landing-steps ol { list-style: none; padding-left: 0; counter-reset: քայլ; }
.landing-steps li { display: grid; grid-template-columns: clamp(38px, 4.4vw, 56px) minmax(0, 1fr); gap: 0 16px; align-items: baseline; counter-increment: քայլ; }
.landing-steps li::before { content: counter(քայլ); font-size: clamp(27px, 3.2vw, 38px); line-height: 1.05; font-weight: 400; color: var(--gold); font-variant-numeric: tabular-nums; }
.landing-steps li + li { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }

/* Միակ «խոսող» բլոկը. ամբողջ էջի համարձակությունը այստեղ է ծախսվում,
   մնացածը լռում է։ Տեքստը --text է, ոչ --muted — սա պնդում է, ոչ նկարագրություն։ */
.landing-table { padding-top: clamp(30px, 3.4vw, 46px) !important; }
.ognum-landing .landing-table p:not([class]) { max-width: 60ch; box-sizing: border-box; font-size: 18px; line-height: 1.75; color: var(--text); background: var(--card2); border-radius: 28px; padding: clamp(22px, 3vw, 32px); }

/* Երեք ազնիվ տող՝ երեք ԻՐԱՐԻՑ ԱՆԿԱԽ փաստ։ Բաժանիչը հենց այդ անկախությունն է;
   մարկերը կասեր «ցուցակ», մինչ սրանք վիճակի հայտարարություններ են։ */
.landing-now ul { list-style: none; padding-left: 0; }
.landing-now li + li { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.landing-now li { padding-bottom: 16px; }
.landing-now li:last-child { padding-bottom: 0; }

@media (max-width: 560px) {
  .landing-sub { max-width: none; }
  .ognum-landing .ognum-actions { display: block; }
  /* box-sizing ՊԱՐՏԱԴԻՐ. կայքում գլոբալ border-box ՉԿԱ (site.css:92-ի նույն դասը),
     ուստի `width:100%` + 28px×2 padding-ը կոճակը 56px լայնացնում էր .wrap-ից —
     չափված՝ 390-ի էջը scrollWidth 422 էր, քույր-էջը՝ ճիշտ 390։ */
  .ognum-landing .ognum-actions .btn { display: flex; width: 100%; box-sizing: border-box; }
  .ognum-landing .ognum-actions .ognum-back { display: inline-block; margin-top: 14px; }
  .ognum-landing .landing-table p:not([class]) { padding: 20px; border-radius: 22px; }
}

/* ── ognum-ի պատկեր-սլոտները (09-22) ─────────────────────────────────────
   Պատկերը ՄՏՆՈՒՄ Է ԱՌԿԱՅՈՒԹՅԱՄԲ. կանոնները գրվել են դատարկ սլոտի վրա,
   և 09-22-ին սլոտը ԼՑՎԵՑ — 16 ֆայլ, 48 `<img>` 12 էջում, չափված։
   `:has()`-ը ՊՐՈԳՐԵՍԻՎ է. չաջակցվելու դեպքում պատկերը պարզապես մնում է
   տեքստից վեր (block), ոչ թե դասավորությունը կոտրվում է։ */
.landing-pic { display: block; width: 100%; height: auto; border-radius: 18px; margin: 0 0 12px; }
.landing-pic-wide { display: block; width: 100%; height: auto; border-radius: 28px; margin: 0 0 18px; }
/* Լայն պատկերն ու իր տակի քարտը ՄԵԿ տուփ են, ոչ երկու։ Քարտը
   `max-width: 60ch`-ով է (18px մարմին-տեքստ → չափված 618px), պատկերը՝
   առանց առաստաղի, ուստի 900-ում այն 810px էր, 1440-ում՝ 900px՝ քարտի
   618-ի կողքին. աջ եզրը 66–292px դուրս էր ցցվում։ Նույն թիվը՝ նույն
   գրելաձևով (font-size-ը միայն `ch`-ը խարսխելու համար է, տեքստ չկա)։ */
.ognum-landing .landing-table .landing-pic-wide { font-size: 18px; max-width: 60ch; }
/* Միջին գոտին (561–760) ՄԻՆՉ ԱՅՍ բուժում չուներ. պատկերը ցուցակի ամբողջ
   լայնությամբ էր՝ 603px 760-ում, և «Ի՞նչ եք տանում»-ը դառնում էր 2.39–2.55
   էկրան ԲՈԼՈՐ 12 էջում — երկու-էկրանի կանոնի խախտում, չափված։ Տրամաբանությունը
   ձևից է. ≤560 պատկերը մոբայլ-ֆիգուր է (ամբողջ լայնք), ≥761՝ 220px ուղեկից
   սյուն; միջինում այն չպիտի աճի երկուսից էլ մեծ։ Breakpoint-ը ՉԻ իջեցվում.
   561-ում երկու-սյուն grid-ի տեքստ-սյունը ~25ch կդառնար, և ամեն li կանցներ
   220px-ից՝ կորցնելով հենց նոր վաստակած 220/220/220 միատեսակությունը։
   Սահմանը 760 է, ոչ 561–760. առաջին տարբերակը 561-ից էր սկսում, և չափումը
   ցույց տվեց, որ հենց ՆՐԱ ՏԱԿ՝ 560-ում, բլոկը 2.05–2.24 էկրան է (480-ում՝
   2.00) — կանոնը կկոտրվեր հենց այնտեղ, ուր բուժումը վերջանում էր, գումարած
   89px թռիչք 560→561-ում։ Մեկ առաստաղ ամբողջ ոչ-grid գոտու վրա. 390-ում
   պատկերը 319px է, ուստի այնտեղ սա ոչինչ չի փոխում (no-op, չափված)։ */
@media (max-width: 760px) {
  .landing-pic { max-width: 360px; }
}
@media (min-width: 761px) and (max-width: 999px) {
  /* Միջին գոտի. պատկերը ուղեկից սյուն է, ոչ քարտ — երեք-սյուն շարքը այստեղ
     ամեն քարտ ~210px կդարձներ, և 800×800 պատկերը կլիներ դեկոր, ոչ բովանդակություն։ */
  .landing-takeaways li:has(.landing-pic) { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 22px; align-items: start; }
  .landing-takeaways li:has(.landing-pic) .landing-pic { margin-bottom: 0; }
  /* Ներսքաշումը ՄԱՐԿԵՐՈՎ Է ՎԱՍՏԱԿՎՈՒՄ։ `display:grid`-ը li-ից խլում է
     list-item-ը, ուստի ≥761-ում համարը ԸՆԴՀԱՆՐԱՊԵՍ չի գծվում, մինչ
     `padding-left: 22.95px`-ը մնում է — չափված. պատկերի ձախ եզրը 430,
     մինչ h2-ը, `landing-steps`-ը և `landing-now`-ը 407-ում են։ Նույն
     `:has()`-ը, ինչ grid-ը՝ երկուսը միասին են ընկնում ու միասին կանգնում։ */
  .landing-takeaways ol:has(.landing-pic) { list-style: none; padding-left: 0; }
}
@media (max-width: 560px) {
  .landing-pic { border-radius: 14px; }
  .landing-pic-wide { border-radius: 22px; }
  /* 09-22. Մարմին-տեքստի 17→18px-ը «Ի՞նչ եք տանում»-ը 390-ում հասցրեց
     2.02 էկրանի ԵՐԿՈՒ էջում (mijavayr · ability) — Վահանի երկու-էկրանի
     կանոնի խախտում, չափված, ոչ ենթադրված։ Պատկերը լրիվ լայնք էր (318px);
     280-ը երեք կետի վրա ~114px է հանում (0.14 էկրան) և պահում է պատկերը
     գերիշխող, ոչ դեկոր։ Ուղղումը ՉԱՓՈՒՄԻՑ է, ոչ ճաշակից։ */
  .ognum-landing .landing-takeaways .landing-pic { max-width: 280px; }
}

/* ── LANDING-Ի ԿՈՄՊՈԶԻՑԻԱ (09-22) ────────────────────────────────────────
   Վահան, բառացի. «պատկերները առանձին առանձին լավն են։ հիմա խնդրում եմ
   կարգի բերեք էջերի տեսքերը բարձր մակարդակով»։

   ԱՐՄԱՏԱՅԻՆ ՊԱՏՃԱՌԸ ՄԵԿՆ ԷՐ՝ ԺԱՌԱՆԳՎԱԾ ԼԱՅՆՔ։ `.ognum-wrap`-ը 900px է,
   տեքստը՝ 62ch. ՆԵՐՔԻՆ Էության էջի համար դա ճիշտ էր (հոդված է, կարդացվում
   է շարունակաբար), բայց ռեժիմը փոխվեց հրապարակայինի, և լայնքը լուռ մնաց։
   Չափված 1440-ում. բովանդակությունը ~520px, երկու կողմում ~450px դատարկ —
   էջը կարդացվում էր որպես ՓԱՍՏԱԹՈՒՂԹ։ Նույն ձևը, ինչ օրվա ցանկ-դեպքերը.
   կանոնը ճիշտ էր ՄԵԿ համատեքստում և ժառանգվեց մյուսին առանց վերանայման։

   ՀԱՄԱԿԱՐԳԸ ԵՐԿՈՒ ԼԱՅՆՔ Է, ոչ մեկ. ՊԱՏԿԵՐԱՅԻՆ բլոկը շնչում է բեմով
   (մինչև 1120), ՏԵՔՍՏԱՅԻՆԸ մնում է ընթերցելի չափում (68ch)։ Այսինքն
   լայնքը ԴԵՐԻՑ է, ոչ էջից — նույն սկզբունքը, ինչ բլոկի ձևը։ */
.ognum-wrap.ognum-landing { max-width: 1120px; }

/* Տեքստը ԱՃՈՒՄ Է 17→18px, չափը՝ 62→68ch. landing-ը սկանավորվում է ու
   կարդացվում հեռվից, ոչ փաստաթղթի պես մոտիկից։ */
.ognum-landing .landing-block p:not([class]),
.ognum-landing .landing-block ul,
.ognum-landing .landing-block ol { font-size: 18px; line-height: 1.75; max-width: 68ch; }

/* h2-ը ԲԼՈԿԻ ՍԿԻԶԲՆ Է. 21–27px-ը hero-ի clamp(32,4.4vw,54)-ի կողքին չէր
   զգացվում որպես նոր շունչ — բլոկները ձուլվում էին մեկ հոսքի։ Ոսկե գծիկ-
   մոտիվը պահվում է ու հաստանում։ h1-ը ՉԻ մեծանում — հիերարխիան պահվում է։ */
.ognum-landing .section-title { font-size: clamp(24px, 2.6vw, 34px); max-width: 24ch; }
.ognum-landing .section-title::before { width: 34px; height: 3px; margin-bottom: 18px; background: var(--door, var(--gold)); }

/* ՌԻԹՄԸ ԲԼՈԿԻ ՏԵՍԱԿԻՑ Է, ոչ հավասար։ Պատկերային բլոկները (տանելիք, սեղան)
   ավելի շատ օդ են ուզում իրենց շուրջը, տեքստայինները՝ պակաս; հավասար
   տարածքը ռիթմ չէ, այլ ռիթմի բացակայություն։ */
.ognum-landing .landing-block { padding-top: clamp(30px, 3.4vw, 52px); padding-bottom: clamp(30px, 3.4vw, 52px); }
.ognum-landing .landing-takeaways,
.ognum-landing .landing-table { padding-top: clamp(44px, 5.2vw, 84px); padding-bottom: clamp(44px, 5.2vw, 84px); }

/* ԵՐԵՔ ԱՐԴՅՈՒՆՔԸ՝ ՄԵԿ ՇԱՐՔՈՒՄ ≥1000px։ Պատկերները ծնվել են հենց այս
   շարքի համար — 220px ուղեկից սյունում նրանք դեկոր են, ոչ բովանդակություն։
   ՖՈՆ ՈՒ ՍՏՎԵՐ ՉԿԱ դիտավորյալ. «երեք հավասար կլոր քարտ ստվերով» ամենա-
   ճանաչելի կաղապար-տեսքն է, և այստեղ պատկերն ինքն է մակերեսը։ Միակ
   «խոսող» մակերեսը մնում է Կլոր Սեղան բլոկը — համարձակությունը մեկ տեղում։ */
@media (min-width: 1000px) {
  .ognum-landing .landing-takeaways ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 34px; list-style: none; padding-left: 0; max-width: none; }
  .ognum-landing .landing-takeaways li { display: block; margin-top: 0; }
  .ognum-landing .landing-takeaways .landing-pic { margin: 0 0 18px; max-width: none; }
  .ognum-landing .landing-takeaways li > span { display: block; }
}

/* ԿԼՈՐ ՍԵՂԱՆ ԲԼՈԿԸ՝ ՄԵԿ ՄԱՐՄԻՆ, ոչ «նկար և տակը քարտ»։ Պատկերը վերևի
   երկու անկյունն է, պարբերությունը՝ ներքևի երկուսը, մեկ մակերես ընդհանուր։
   Բեմը 960px է — տեքստային բլոկներից լայն (որ ԿԱՆԳ զգացվի), բայց ոչ
   ամբողջ 1120, որ տողը չդառնա անընթեռնելի երկար։ */
/* ՄԵԿ ՄԱՐՄԻՆԸ ՄԵԿ ՉԷՐ — ՉԱՓՎԱԾ 168/168 ՎԻՃԱԿՈՒՄ, առանց բացառության։
   `.ognum-landing .landing-block { gap: 14px }`-ը flex-բացվածք է, ոչ margin,
   ուստի ներքևի `margin: 0`-ն այն ՉԻ ՀԱՆՈՒՄ. պատկերի հարթ ներքևի եզրի ու քարտի
   հարթ վերևի եզրի միջև մնում էր 14px ԷՋ-ՖՈՆ (tmp/scan/seghan-dark-1440.png) —
   երկու սուր եզր, որ ո՛չ միացած են, ո՛չ բաժանված. ամենավատ երրորդ վիճակը։
   Բացվածքը զրոյանում է ՀՈՍՔՈՒՄ, իսկ h2→պատկեր շունչը վերադառնում է բացահայտ՝
   2px (`.section-title`-ի սեփական margin) + 14px (հին gap) = 16px, որ ռիթմը
   չշեղվի ոչ մի կետում։ */
.ognum-landing .landing-table { gap: 0; }
.ognum-landing .landing-table .section-title { margin-bottom: 16px; }
.ognum-landing .landing-table .landing-pic-wide { max-width: 960px; width: 100%; margin: 0; border-radius: 28px 28px 0 0; }
.ognum-landing .landing-table p:not([class]) { max-width: 960px; margin: 0; border-radius: 0 0 28px 28px; padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px); background: var(--card2); }
.ognum-landing .landing-table p:not([class]) > span.inner { display: block; max-width: 62ch; }

/* ԴՌԱՆ ԱՌՈԳԱՆՈՒԹՅՈՒՆԸ ՄԻԱՅՆ ՈՉ-ՏԵՔՍՏԱՅԻՆ տարրերի վրա է՝ վերնագրի գծիկ
   և քայլի համար։ Տեքստի գույնը ՉԻ դիպչվում. AA-ն չափված ու մաքուր է
   (36 դեր × 12 էջ × 2 ռեժիմ), և պալիտրայի փոփոխությունը հեշտ է կոտրի այն։
   Չորս դուռ = չորս ճանաչելի նրբերանգ նույն պալիտրայից, ոչ նոր գույն։ */
.ognum-landing[data-door="start"] { --door: var(--gold); }
.ognum-landing[data-door="mijavayr"] { --door: var(--teal); }
.ognum-landing[data-door="idea"] { --door: var(--apricot); }
.ognum-landing[data-door="ability"] { --door: var(--red-text); }
.ognum-landing .landing-steps li::before { color: var(--door, var(--gold)); }


/* ── ԱՋ ԵԶՐԸ ՀԱՎԱՔՎՈՒՄ Է. ԵՐԿՈՒ ԲԵՄ, ՈՉ ՉՈՐՍ (09-22) ──────────────────────
   Չափված 1440-ում. էջը ուներ ՄԵԿ ձախ եզր (160px, անթերի ինը գոտում) և
   ՎԵՑ աջ՝ 747 · 618 · 860 · 884 · 1120 · 1280։ Առաջին երկուսը ԴԻՏԱՎՈՐՅԱԼ
   կարճ են (h1 19ch, ենթատող 32ch)։ Մնացած չորսից 884-ը և 860-ը 24px-ով
   էին տարբեր՝ ոչ ռիթմ, ոչ հավասարեցում — պարզապես `ul`-ի padding-ը `ch`-ի
   ներսում։ Երբ ամեն բլոկ մեկ ձախ եզրից է սկսվում, աչքը ԱՋ եզրով է կարդում
   կոմպոզիցիան, և չորս տարբեր աջ եզր նշանակում է՝ կաղապար չկա։
   Այսուհետ ԵՐԿՈՒՍՆ ԵՆ. ՏԵՔՍՏ = 860, ՊԱՏԿԵՐ = 1120։ Ընթեռնելիությունը չի
   տուժում — սեղանի տեքստն իր `span.inner`-ի 62ch-ում է։ */
@media (min-width: 1000px) {
  .ognum-landing .landing-block ul,
  .ognum-landing .landing-block ol,
  .ognum-landing .landing-block p:not([class]) { max-width: 700px; }
  .ognum-landing .landing-takeaways ol { max-width: none; }
  .ognum-landing .landing-table .landing-pic-wide,
  .ognum-landing .landing-table p:not([class]) { max-width: none; }
}

/* ── HERO-Ն ԵՐԿՈՒ ՄԱՍ Է ≥1000px (09-22) ──────────────────────────────────
   Չափված. կոմպոզիցիան ավելացավ hero-ից ՆԵՐՔԵՎ, իսկ hero-ն ինքը մնաց
   900px-անոց հոդվածի ժառանգություն 1120-անոց շրջանակում — բովանդակությունը
   587px = բեմի 52%, աջ 48%-ը դատարկ, և առաջին պատկերը 1.10–1.37 էկրան
   ներքև։ Այսինքն ԱՌԱՋԻՆ ԷԿՐԱՆԸ — միակը, որ երաշխավորված տեսնում են —
   դեռ փաստաթուղթ էր։
   ՊԱՏԿԵՐ ՉԻ ԱՎԵԼԱՆՈՒՄ (որոշումը մնում է. hero-ի ուժը զույգ տողի անցումն է)։
   Փոխվում է ԴԱՍԱՎՈՐՈՒԹՅՈՒՆԸ՝ խոսքը ձախ, գործողությունը աջ — երկու զանգված
   մեկի փոխարեն, նույն տարրերով, զրո նոր բան։ */
@media (min-width: 1000px) {
  /* ԵՐԿՈՒ ԳՈՏԻ, ՈՉ ՄԵԿ։ Առաջին տարբերակում կոճակն ու իր ենթատողը ՆՈՒՅՆ
     `action` գոտում էին՝ երկուսն էլ `align-self: end`, և չափումը ցույց տվեց
     ՀԱՄԸՆԿՆՈՒՄ 336–395px (ենթատողը գծվում էր կոճակի վրա)։ `margin-top`-ով
     «հրելը» դասավորություն չէ — grid-ում դիրքը գոտով է որոշվում, ոչ լուսանցքով։ */
  .ognum-landing .section--hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); grid-template-areas: "eyebrow eyebrow" "title action" "sub note"; column-gap: 56px; align-items: start; }
  .ognum-landing .section--hero .eyebrow { grid-area: eyebrow; }
  .ognum-landing .section--hero .ognum-h1 { grid-area: title; }
  .ognum-landing .section--hero .landing-sub { grid-area: sub; }
  .ognum-landing .section--hero .ognum-actions { grid-area: action; align-self: end; margin-top: 0; }
  .ognum-landing .section--hero .landing-note { grid-area: note; align-self: start; margin-top: 16px; }
}


/* ── HERO-Ի ՖՈՆԱՅԻՆ ՊԱՏԿԵՐԸ — ԴՌԱՆ ԻՆՔՆՈՒԹՅՈՒՆԸ (09-22) ──────────────────
   Վահան, բառացի. «ինչով կարող ենք օգնելու բոլոր էջերում պետք է ավելացնենք
   hero նկար background-ում»։ Եվ դա ՄԻԱԺԱՄԱՆԱԿ նրա «այլ լուծում մտածենք»-ի
   պատասխանն է դռան ինքնության հարցին. չափված էր, որ `--door` նրբերանգը
   ներկում է էջի 0.03–0.13%-ը և չի ընթերցվում — դուռը հիշվում է
   ԼՈՒՍԱՆԿԱՐՈՎ, ոչ 3px գծիկով։
   Կանոնները այսօր ԶՐՈ տարրի վրա են ազդում (ֆայլ չկա → markup չկա); սա
   դիտավորյալ է, որ չորս պատկերը կարողանան գալ մեկ-մեկ։ */
/* RADIUS ՉԿԱ, ԴԻՏԱՎՈՐՅԱԼ (09-22)։ Նախ `0 0 28px 28px` էր, և կլորացված
   անկյունը ծնում էր 1px կոր գիծ ստորին-ձախում՝ պատկերի ու վարագույրի
   հակաալիասինգի եզրերը կատարելապես չեն համընկնում, ուստի մուգ կադրը
   թափանցում էր կրեմի տակից (չափված՝ (210,200,195) ընդդեմ (251,248,243),
   կրկնվում ՉՈՐՍ դռանն էլ)։ Երրորդ radius ավելացնելը (img · ::before ·
   բաժին) ՄԵՂՄԱՑՆՈՒՄ Է ախտանիշը, ոչ պատճառը — մնում է նույն AA-անհամընկնումը,
   պարզապես ավելի նուրբ։ Կլորացումը ԻՄ զարդն էր, ոչ պահանջ։ Հանելը փակում է
   ամբողջ դասը. հարթ եզրին AA չկա։ Կադրը եզրից եզր է, ինչպես լուսանկար։ */
.section--hero-bg { position: relative; isolation: isolate; overflow: hidden; }
.landing-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: -2; }
/* ՎԱՐԱԳՈՒՅՐԸ ՊԱՐՏԱԴԻՐ Է, ոչ ճաշակ։ Տեքստը պատկերի վրա է, և AA-ն չի կարող
   կախված լինել այն բանից, թե կադրի ձախ անկյունը պատահաբար որքան մուգ է։
   Գրադիենտը անթափանց է ՁԱԽՈՒՄ (ուր h1-ն ու զույգ տողն են) և զրո՝ աջում,
   ուստի չափված կոնտրաստը մնում է ՆՈՒՅՆԸ, ինչ առանց պատկերի։ Երկու ռեժիմում
   էլ `--bg`-ից է — ոչ սև, ոչ սպիտակ, այլ էջի սեփական ֆոնը։ */
.section--hero-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--bg) 0%, var(--bg) 58%, transparent 92%); }
/* 09-22. ԱՅՍ ԿԱՆՈՆԸ ՍՊԱՆՈՒՄ ԷՐ ՀԵՆՑ ԱՅՆ, ԻՆՉԻ ՀԱՄԱՐ ԳՐՎԵԼ ԷՐ։ `> *`-ը
   ներառում էր նաև `<img>`-ը, նույն մասնավորությամբ (0,1,0) և ՀԵՏՈ, ուստի
   պատկերի `position: absolute`-ը դառնում էր `relative` — նկարը ընկնում էր
   ՀՈՍՔԻ ՄԵՋ, տեքստի տակ, և վարագույրը ծածկում էր այն ամբողջությամբ։
   Չափված՝ `getComputedStyle().position` = relative, box 704×293 (ոչ 1120×681)։
   Եվ ՈՒՇԱԴԻՐ. իմ կոնտրաստ-չափումը ԿԱՆԱՉ ԷՐ ՀԵՆՑ ԱՅՍ ՍԽԱԼԻ ՊԱՏՃԱՌՈՎ —
   պատկերը թաքնված էր, ուստի h1-ը նստում էր մաքուր `--bg`-ի վրա։ Կանաչ
   ասերտ սխալ պատճառով. բռնեց ուրիշի ռենդեր-չափումը, ոչ իմ թիվը։ */
.section--hero-bg > :not(.landing-hero-bg) { position: relative; }
@media (max-width: 999px) {
  /* Նեղ էկրանին վարագույրը ուղղահայաց է — այլապես ձախ 42%-ը 390px-ում ողջ
     էջն է, և նկարը ոչ մի տեղ չի երևում։ */
  /* 09-22, ՉԱՓՎԱԾ. 390-ում տեքստը զբաղեցնում է բաժնի գրեթե ողջ բարձրությունը,
     ուստի «վարագույրը կրճատել, որ նկարը երևա» ուղին ԿՈՏՐՈՒՄ Է AA-ն — h1-ի
     վերջին տողը ընկնում է կադրի վրա (չափված dark 3.74, սահմանին)։
     Ուղղությունը հակառակն է. տեքստը մնում է լրիվ պաշտպանված, իսկ նկարը
     ստանում է ՍԵՓԱԿԱՆ շերտ բովանդակության ՏԱԿ՝ padding-ով։ Այդպես
     բջջայինում կադրը երևում է որպես ժապավեն, ոչ որպես տեքստի աղմուկ։ */
  /* ԽԱՐՍԽՎԱԾ `.ognum-landing`-ով. առանց դրա (0,1,0)-ն ընկնում է
     `.ognum-landing .section--hero`-ի (0,2,0)-ի տակ, և 190px-ը լուռ
     դառնում է 24px — չափված։ Ժապավենը «կար», բայց 24px բարձրությամբ։ */
  /* 09-22, ԵՐՐՈՐԴ ՎԵՐԱՆԱՅՈՒՄ — ՌԵՆԴԵՐԻՑ, ոչ հաշվարկից։ Վերևի երկու
     մեկնաբանությունը պահված են որպես ՀԵՏՔ, բայց իրենց կանոնները հանված։
     Բջջայինում պատկերը ՏԵՔՍՏԻ ԵՏԵՎՈՒՄ էր, և մեկ գրադիենտը պիտի
     միաժամանակ ՊԱՇՏՊԱՆԵՐ տեքստը ու ԲԱՑԵՐ կադրը։ Չափված արդյունքը.
     լրիվ պարզ էր ՄԻԱՅՆ կադրի ստորին եզրը, ուստի դեմքերը (որ կադրի վերին
     կեսում են) մնում էին վարագույրի տակ։ Ես դա ԵՐԿՈՒ անգամ «ուղղեցի»
     object-position-ով — երկու անգամ էլ ՍԽԱԼ ՇԵՐՏՈՒՄ. կադրումը մեղավոր
     չէր, ՇԵՐՏԱՎՈՐՈՒՄՆ էր։
     ՈՒՍՏԻ ՆԵՂ ԷԿՐԱՆԻՆ ՇԵՐՏԱՎՈՐՈՒՄ ՉԿԱ. պատկերը դուրս է գալիս հոսքից ու
     դառնում ԱՌԱՆՁԻՆ ժապավեն ՏԵՔՍՏԻՑ ՆԵՐՔԵՎ։ Վարագույր պետք չէ, քանի որ
     համընկնում չկա — կոնտրաստի ռիսկը ԱՆՀԵՏԱՆՈՒՄ է, ոչ կառավարվում։ */
  .ognum-landing .section--hero-bg { display: flex; flex-direction: column; }
  .section--hero-bg::before { content: none; }
}


/* ── HERO + ՖՈՆ = ՄԵԿ ՍՅՈՒՆ ՁԱԽՈՒՄ (09-22, ՉԱՓՈՒՄԻՑ) ─────────────────────
   Երկսյուն hero-ը ծնվել էր, որովհետև աջ 48%-ը ԴԱՏԱՐԿ էր։ Երբ կադրը եկավ,
   այդ պատճառը ԱՆՀԵՏԱՑԱՎ — աջը լցնում է տեսարանը։ Իսկ CTA-սյունը մնալով
   աջում ընկավ ՀԵՆՑ ԿԱԴՐԻ ՎՐԱ. չափված՝ «կոճակի-տակ» տողը լույսում 1.61
   (1440) · 1.36 (1000) — AA-ի կոպիտ խախտում, որ իմ չափիչը ՉԷՐ ՏԵՍՆՈՒՄ,
   որովհետև նմուշ-ցանկը կրում էր միայն h1/զույգ/eyebrow։ Ցանկը չորրորդ
   անգամ դուրս թողեց նոր միավորը; այժմ ածանցվում է hero-ի ՆԵՐՍԻՑ։
   ՈՒՍՏԻ ԿԱԴՐ ՈՒՆԵՑՈՂ hero-ը ՄԵԿ ՍՅՈՒՆ Է. ամբողջ խոսքը ձախում, վարագույրի
   անթափանց գոտում; կադրը աջում՝ ազատ։ Կադր չունեցողը մնում է երկսյուն։ */
@media (min-width: 1000px) {
  .ognum-landing .section--hero-bg { display: block; }
  .ognum-landing .section--hero-bg .ognum-actions { margin-top: 26px; }
  .ognum-landing .section--hero-bg .landing-note { margin-top: 14px; max-width: 46ch; }
  .ognum-landing .section--hero-bg > :not(.landing-hero-bg) { max-width: 54%; }
}
/* ԱՆԹԱՓԱՆՑ ԿԱՆԳԱՌԸ ԿԱՊՎՈՒՄ Է ԺԱՊԱՎԵՆԻՆ, ՈՉ ՏՈԿՈՍԻՆ։ 62%-ը 416px-անոց
   բաժնում 258px է, մինչ բովանդակության հատակը 392px — «190px ժապավենը»
   փաստացի 24px էր, և «կոճակի-տակ»-ը ընկնում էր fade-ի վրա։ `calc`-ը
   կապում է կանգառը ՀԵՆՑ այն թվին, որ ժապավենը սահմանում է — ուստի
   բովանդակության աճը այլևս չի կարող լուռ ուտել պաշտպանությունը։ */
@media (max-width: 999px) {
  /* ԺԱՊԱՎԵՆԸ ՀՈՍՔԻ ՄԵՋ Է, ոչ ետևում. `order`-ը այն տանում է տեքստից հետո
     (markup-ում պատկերը առաջինն է, որովհետև desktop-ում ֆոն է)։ 216px-ը
     չափված է. կադրը 2.4:1 է, 342px լայնքով ամբողջ տեսարանը 143px կլիներ —
     շատ ցածր դեմքի համար; 216-ը կտրում է հորիզոնականը 100%-ով (կերպարը
     չորս կադրում էլ աջ 70–80%-ում է՝ ձախը դիտավորյալ դատարկ է տեքստի
     համար), և ուղղահայացը մնում է ամբողջական։ */
  .ognum-landing .section--hero-bg .landing-hero-bg {
    position: static; order: 99; width: 100%; height: 216px;
    object-position: 100% 50%; border-radius: 18px; margin-top: 8px;
  }
}

/* ԱՆԿՅԱՆ 1px ԱՐՏԱՀՈՍՔԸ. բաժինը ունի `0 0 28px 28px` + overflow:hidden,
   իսկ պատկերն ու վարագույրը՝ radius 0 — ուստի կլորացված անկյան
   հակաալիասինգի եզրին մուգ կադրը ցույց էր տալիս 1px կոր գիծ կրեմի տակ
   (չափված՝ կրկնվում է ՉՈՐՍ դռանն էլ, x≈160–185, y≈510–545)։
   `inherit`-ը կապում է երեքը ՄԵԿ արժեքի — հաջորդ radius-փոփոխությունը
   այլևս չի կարող դրանք իրարից բաժանել։ */