/* ==========================================================================
   Easy Smart Solutions — public site
   Light, service-provider layout: a navy utility bar with the contact details,
   a white header, rounded cards on white and pale-blue bands. The brand cyan
   from the company mark carries the accents; a deeper blue carries the buttons
   and links so white text on them stays readable.
   The management area keeps its own look in site.css + admin.css.
   ========================================================================== */

:root {
    --navy: #0B1D3A;
    --navy-2: #13294D;
    --brand: #00AFC8;
    --primary: #0072B5;
    --primary-dark: #005A8F;
    --primary-soft: #E6F3FA;
    --cyan-soft: #E3F7FA;

    --ground: #FFFFFF;
    --soft: #F3F7FB;
    --surface: #FFFFFF;
    --line: #E1E8F0;
    --line-strong: #C5D1DE;
    --text: #0F1B2D;
    --dim: #4F5E73;
    --faint: #7B889B;
    --on-primary: #FFFFFF;
    --neutral: #6B7789;
    --neutral-dark: #56627A;
    --on-neutral: #FFFFFF;
    --cyan-ink: #007C8E;
    --frame: #0B1D3A;
    --hero-top: #F2F8FD;
    --header-bg: rgba(255, 255, 255, .94);

    --ok: #1F7A50;
    --ok-soft: #E7F5EE;
    --warn: #9A5B00;
    --warn-soft: #FFF3DC;
    --bad: #B42318;
    --bad-soft: #FDECEA;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 8px 24px rgba(15, 27, 45, .06);
    --shadow-lg: 0 2px 4px rgba(15, 27, 45, .04), 0 24px 48px rgba(15, 27, 45, .12);

    --maxw: 1200px;
    --sans: "Inter", "Noto Sans Armenian", system-ui, -apple-system, "Segoe UI", sans-serif;
    --disp: "Manrope", "Noto Sans Armenian", "Inter", system-ui, sans-serif;
}

/* Dark palette: when the system asks for dark and the visitor has not picked light,
   or when they pick dark with the toggle. The same key is stored as in the management
   area, so one choice carries across both. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --navy: #060C18;
        --navy-2: #0D1A31;
        --primary: #3AA9E0;
        --primary-dark: #62BDEA;
        --primary-soft: rgba(58, 169, 224, .14);
        --cyan-soft: rgba(0, 175, 200, .14);
        --ground: #0B1322;
        --soft: #0F1A2D;
        --surface: #132139;
        --line: #22324D;
        --line-strong: #34486A;
        --text: #E8EEF7;
        --dim: #A5B3C8;
        --faint: #7F8DA3;
        --on-primary: #04121E;
        --neutral: #34466A;
        --neutral-dark: #41557D;
        --on-neutral: #E8EEF7;
        --cyan-ink: #3FD0E3;
        --frame: #2B3D5C;
        --hero-top: #0E1A2F;
        --header-bg: rgba(11, 19, 34, .9);
        --ok: #5FCF96;
        --ok-soft: rgba(95, 207, 150, .14);
        --warn: #F2B85B;
        --warn-soft: rgba(242, 184, 91, .14);
        --bad: #F59A8D;
        --bad-soft: rgba(245, 154, 141, .13);
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px rgba(0, 0, 0, .45);
    }
}

:root[data-theme="dark"] {
    --navy: #060C18;
    --navy-2: #0D1A31;
    --primary: #3AA9E0;
    --primary-dark: #62BDEA;
    --primary-soft: rgba(58, 169, 224, .14);
    --cyan-soft: rgba(0, 175, 200, .14);
    --ground: #0B1322;
    --soft: #0F1A2D;
    --surface: #132139;
    --line: #22324D;
    --line-strong: #34486A;
    --text: #E8EEF7;
    --dim: #A5B3C8;
    --faint: #7F8DA3;
    --on-primary: #04121E;
    --neutral: #34466A;
    --neutral-dark: #41557D;
    --on-neutral: #E8EEF7;
    --cyan-ink: #3FD0E3;
    --frame: #2B3D5C;
    --hero-top: #0E1A2F;
    --header-bg: rgba(11, 19, 34, .9);
    --ok: #5FCF96;
    --ok-soft: rgba(95, 207, 150, .14);
    --warn: #F2B85B;
    --warn-soft: rgba(242, 184, 91, .14);
    --bad: #F59A8D;
    --bad-soft: rgba(245, 154, 141, .13);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px rgba(0, 0, 0, .45);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; border-radius: 6px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    background: var(--primary);
    color: var(--on-primary);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.skip-link:focus { left: 16px; }

h1, h2, h3 { font-family: var(--disp); color: var(--text); text-wrap: balance; }

h1 {
    font-weight: 800;
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.1;
    letter-spacing: -.025em;
    margin: 18px 0 0;
}

/* Armenian and Russian run a third longer than English; a smaller headline keeps
   the hero at four or five lines instead of seven. */
:lang(hy) h1, :lang(ru) h1 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.15; }
:lang(hy) h2, :lang(ru) h2 { font-size: clamp(26px, 2.8vw, 36px); }

h2 {
    font-weight: 800;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 14px 0 0;
}

h3 { font-weight: 700; font-size: 19px; line-height: 1.3; margin: 0; }

.lead { margin: 16px 0 0; font-size: 17px; color: var(--dim); max-width: 64ch; }

/* ---------------------------------------------------------------- buttons -- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--primary);
    background: var(--primary);
    color: var(--on-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 114, 181, .22); }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 14px; }
/* Header account buttons: compact, the size service-provider sites use up there. */
.btn-xs { padding: 7px 13px; font-size: 14px; font-weight: 500; border-radius: 6px; border-width: 1px; gap: 6px; }
.btn-xs:hover { transform: none; box-shadow: none; }
.btn-neutral { background: var(--neutral); border-color: var(--neutral); color: var(--on-neutral); }
.btn-neutral:hover { background: var(--neutral-dark); border-color: var(--neutral-dark); }
.btn-outline { background: var(--surface); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.btn-outline:hover { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); box-shadow: none; }
.btn-light { background: #fff; color: var(--navy); border-color: #fff; }
.btn-light:hover { background: var(--cyan-soft); color: var(--navy); border-color: var(--cyan-soft); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }

/* ------------------------------------------------------------ utility bar -- */
.utility { background: var(--navy); color: #C9D4E5; font-size: 13.5px; }
.utility-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; }
.utility-contacts { display: flex; align-items: center; gap: 24px; min-width: 0; }
.utility-contacts a,
.utility-contacts > span { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; white-space: nowrap; }
.utility-contacts a:hover { color: #fff; }
.utility-contacts svg { color: var(--brand); flex: 0 0 auto; }


/* ----------------------------------------------------------------- header -- */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
/* The top bar and header run wider than the page content, so the Armenian menu (the longest)
   fits on one row on an ordinary laptop screen. */
.utility .wrap, .header .wrap { max-width: 1360px; }

.header-in { display: flex; align-items: center; gap: 18px; height: 74px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); min-width: 0; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font-family: var(--disp); font-weight: 800; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-dom { font-size: 12px; color: var(--faint); font-weight: 500; }
.logo { width: 40px; height: 40px; flex: 0 0 auto; display: block; object-fit: contain; }
.mark {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--primary);
    color: var(--on-primary);
    font-family: var(--disp);
    font-size: 13px;
    font-weight: 800;
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a:not(.btn) {
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 10px;
    white-space: nowrap;
    border-radius: 8px;
    transition: background .15s, color .15s;
}
.nav a:not(.btn):hover { color: var(--primary); background: var(--primary-soft); }
.nav-auth { display: flex; align-items: center; gap: 8px; margin-left: 10px; }

/* Language dropdown. A <details> element, so it opens without script; site.js only adds
   closing it on an outside click or Escape. */
.lang-menu { position: relative; flex: 0 0 auto; }
.lang-menu summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, color .15s;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover { border-color: var(--primary); color: var(--primary); }
.lang-menu summary svg { color: var(--dim); flex: 0 0 auto; }
.lang-menu summary:hover svg { color: var(--primary); }
.lang-chevron { transition: transform .15s; }
.lang-menu[open] .lang-chevron { transform: rotate(180deg); }

.lang-list {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    min-width: 180px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}
.lang-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 14.5px;
}
.lang-list a:hover { background: var(--soft); }
.lang-list a.is-current { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.lang-code {
    min-width: 36px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--faint);
}
.lang-list a.is-current .lang-code { color: inherit; }

/* Signed-in account menu: the person's initials, opening their account and sign-out. */
.drop { position: relative; flex: 0 0 auto; }
.drop summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px 2px 2px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    color: var(--dim);
    transition: background .15s;
}
.drop summary::-webkit-details-marker { display: none; }
.drop summary:hover { background: var(--soft); }
.drop-chevron { transition: transform .15s; }
.drop[open] .drop-chevron { transform: rotate(180deg); }

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--brand), var(--primary));
    color: #FFFFFF;
    font-family: var(--disp);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
}
.avatar-lg { width: 44px; height: 44px; font-size: 16px; }

.drop-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 60;
    min-width: 250px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}
.account-id { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.account-id-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.account-id-text strong { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-id-text small { font-size: 13px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-panel form { margin: 0; }

.drop-item {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: 14.5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.drop-item svg { color: var(--faint); flex: 0 0 auto; }
.drop-item:hover { background: var(--soft); }
.drop-item-danger:hover { background: var(--bad-soft); color: var(--bad); }
.drop-item-danger:hover svg { color: var(--bad); }

.theme-btn {
    appearance: none;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--dim);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.theme-btn:hover { color: var(--primary); border-color: var(--primary); }
/* Shows the theme you would switch to: a moon while light, a sun while dark. */
.theme-sun { display: none; }
:root[data-theme="dark"] .theme-sun { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-sun { display: block; }
    :root:not([data-theme="light"]) .theme-moon { display: none; }
}

.menu-btn {
    display: none;
    appearance: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    padding: 0 11px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.menu-btn span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------- hero -- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 88px;
    background:
        radial-gradient(900px 480px at 88% 10%, var(--cyan-soft), transparent 70%),
        linear-gradient(180deg, var(--hero-top) 0%, var(--ground) 100%);
}
.hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(0, 175, 200, .18); }

.hero-sub { margin: 20px 0 0; font-size: 18px; color: var(--dim); max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.ticks { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.ticks li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--text); }
.tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); flex: 0 0 auto; }

/* The drawn scene. Sizes are in % of the art box so it scales as one piece. */
.hero-art { position: relative; min-height: 440px; }
.art-glow {
    position: absolute;
    inset: 8% 4% 4% 10%;
    border-radius: 40px;
    background: linear-gradient(135deg, var(--brand), var(--primary));
    opacity: .12;
    transform: rotate(-4deg);
}

.art-window {
    position: absolute;
    top: 6%;
    left: 4%;
    width: 82%;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--line);
}
.art-bar { display: flex; gap: 6px; padding: 11px 14px; background: var(--soft); border-bottom: 1px solid var(--line); }
.art-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D5DEE9; }
.art-bar i:first-child { background: #FF8A7A; }
.art-bar i:nth-child(2) { background: #FFC75A; }
.art-bar i:nth-child(3) { background: #5CD08E; }
.art-body { display: grid; grid-template-columns: 22% 1fr; min-height: 250px; }
.art-side { background: var(--navy); padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.art-side b { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.art-side b:first-child { background: var(--brand); width: 70%; }
.art-main { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.art-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.art-kpis span { height: 38px; border-radius: 8px; background: var(--primary-soft); }
.art-kpis span:nth-child(2) { background: var(--cyan-soft); }
.art-chart { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.art-chart span { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--brand), var(--primary)); opacity: .85; }
.art-rows { display: flex; flex-direction: column; gap: 8px; }
.art-rows b { height: 8px; border-radius: 4px; background: var(--line); }
.art-rows b:nth-child(2) { width: 80%; }
.art-rows b:nth-child(3) { width: 60%; }

.art-phone {
    position: absolute;
    right: 2%;
    bottom: 2%;
    width: 30%;
    aspect-ratio: 9 / 18;
    border-radius: 26px;
    background: var(--surface);
    border: 6px solid var(--frame);
    box-shadow: var(--shadow-lg);
    padding: 22px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: float 6s ease-in-out infinite;
}
.art-notch { position: absolute; top: 6px; left: 50%; width: 34%; height: 8px; border-radius: 6px; background: var(--frame); transform: translateX(-50%); }
.art-card { height: 30%; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--primary)); }
.art-lines { display: flex; flex-direction: column; gap: 7px; }
.art-lines b { height: 7px; border-radius: 4px; background: var(--line); }
.art-lines b:nth-child(2) { width: 75%; }
.art-lines b:nth-child(3) { width: 55%; }
.art-btn { margin-top: auto; height: 22px; border-radius: 8px; background: var(--primary); }

.art-plates { list-style: none; margin: 0; padding: 0; }
.art-plate {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 250px;
    padding: 11px 14px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    animation: float 7s ease-in-out infinite;
}
.art-plate:nth-child(1) { top: 0; right: 0; animation-delay: -1s; }
.art-plate:nth-child(2) { top: 44%; left: -4%; animation-delay: -3s; }
.art-plate:nth-child(3) { bottom: -2%; left: 14%; animation-delay: -5s; }
.art-plate strong { display: block; font-family: var(--disp); font-size: 14.5px; font-weight: 800; color: var(--text); line-height: 1.2; }
.art-plate small { display: block; font-size: 12px; color: var(--faint); line-height: 1.35; margin-top: 2px; }
.art-plate-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: 0 0 auto; }
.art-plate:nth-child(2) .art-plate-ico { background: var(--ok-soft); color: var(--ok); }
.art-plate:nth-child(3) .art-plate-ico { background: var(--cyan-soft); color: var(--cyan-ink); }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* --------------------------------------------------------------- sections -- */
.section { padding: 96px 0; }
.section-soft { background: var(--soft); }
.section-head { text-align: center; max-width: 780px; margin: 0 auto 48px; }
.section-head .lead { margin-left: auto; margin-right: auto; }

.cards { display: grid; gap: 22px; }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card h3 + p { margin: 10px 0 0; }
.card p { font-size: 15px; color: var(--dim); line-height: 1.62; }

.icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--cyan-soft), var(--primary-soft));
    color: var(--primary);
    margin-bottom: 20px;
    flex: 0 0 auto;
}
.icon-badge-sm { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px; }

.service { display: flex; flex-direction: column; }
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: auto 0 0; padding: 18px 0 0; }
.chip {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dim);
    background: var(--soft);
    border: 1px solid var(--line);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.chip-brand { color: var(--primary-dark); background: var(--primary-soft); border-color: transparent; }

/* --------------------------------------------------------------- products -- */
/* Shared by the product cards on the home page and each product's own page. */
.product-name { display: flex; align-items: center; gap: 16px; }
.product-name .icon-badge { margin: 0; width: 64px; height: 64px; border-radius: 16px; }
.product-tagline { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--primary-dark); }

.product-art {
    position: relative;
    padding: 28px;
    border-radius: 18px;
    background:
        radial-gradient(420px 260px at 90% 10%, rgba(0, 175, 200, .28), transparent 70%),
        linear-gradient(135deg, var(--cyan-soft), var(--primary-soft));
}
.pos { border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.pos-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--frame); }
.pos-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.pos-bar span { margin-left: 8px; font-family: var(--disp); font-size: 12px; font-weight: 800; color: #FFFFFF; letter-spacing: .03em; }
.pos-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; padding: 16px; }
.pos-items { display: flex; flex-direction: column; gap: 10px; padding-right: 14px; border-right: 1px dashed var(--line); }
.pos-items b { display: block; height: 22px; width: var(--w); border-radius: 6px; background: var(--soft); border: 1px solid var(--line); }
.pos-side { display: flex; flex-direction: column; gap: 10px; }
.pos-total { padding: 10px; border-radius: 8px; background: var(--primary-soft); display: flex; flex-direction: column; gap: 6px; }
.pos-total small { display: block; height: 6px; width: 45%; border-radius: 3px; background: var(--primary); opacity: .35; }
.pos-total strong { display: block; height: 14px; width: 75%; border-radius: 4px; background: var(--primary); }
.pos-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pos-keys span { height: 20px; border-radius: 5px; background: var(--soft); border: 1px solid var(--line); }
.pos-pay { height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--brand), var(--primary)); }


/* The "feed" drawing: category tabs, an alert strip, then posts. */
.feed-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.feed-tabs { display: flex; gap: 6px; }
.feed-tabs span { height: 18px; width: 58px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.feed-tabs span.is-on { background: var(--primary); border-color: var(--primary); }
.feed-alert { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background: var(--warn-soft); }
.feed-alert i { width: 18px; height: 18px; border-radius: 50%; background: var(--warn); flex: 0 0 auto; }
.feed-alert b { display: block; height: 8px; width: 70%; border-radius: 4px; background: var(--warn); opacity: .45; }
.feed-post { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.feed-post i { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--cyan-soft), var(--primary-soft)); flex: 0 0 auto; }
.feed-post span { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.feed-post b { display: block; height: 8px; width: 80%; border-radius: 4px; background: var(--line-strong); }
.feed-post small { display: block; height: 6px; width: 45%; border-radius: 3px; background: var(--line); }
.feed-post:nth-child(4) b { width: 65%; }
.feed-post:nth-child(5) b { width: 72%; }

/* On a pale band the numbered circles need a ring of the same pale colour. */
.section-soft .step-n { box-shadow: 0 0 0 8px var(--soft), 0 10px 24px rgba(0, 114, 181, .28); }

/* ------------------------------------------------------------------ about -- */
.about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.about-copy .btn { margin-top: 28px; }
.why { padding: 24px; }
.why h3 { font-size: 17px; }

/* ------------------------------------------------------------------ steps -- */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    position: relative;
}
/* The line the numbers sit on. */
.steps::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px);
}
.step { position: relative; text-align: center; padding: 0 8px; }
.step-n {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: var(--on-primary);
    font-family: var(--disp);
    font-weight: 800;
    font-size: 17px;
    box-shadow: 0 0 0 8px var(--ground), 0 10px 24px rgba(0, 114, 181, .28);
    position: relative;
}
.step h3 { font-size: 18px; }
.step p { margin: 8px 0 0; font-size: 14.5px; color: var(--dim); }

/* ---------------------------------------------------------------- projects -- */
.project { display: flex; flex-direction: column; }
.project:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.project-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.project-top .chips { padding: 0; margin: 0; }
.project-year { font-family: var(--disp); font-weight: 700; font-size: 14px; color: var(--faint); }

/* --------------------------------------------------------------- cta band -- */
.cta-band {
    background:
        radial-gradient(600px 300px at 90% 0%, rgba(0, 175, 200, .35), transparent 70%),
        linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 55%, #0B4F7A 100%);
    color: #fff;
    padding: 64px 0;
}
.cta-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta-band h2 { color: #fff; margin: 0; font-size: clamp(24px, 2.8vw, 34px); max-width: 30ch; }
.cta-band p { margin: 12px 0 0; color: #B9C7DB; font-size: 15px; }
.cta-band .btn { flex: 0 0 auto; }

/* ---------------------------------------------------------------- contact -- */
.contact { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-item { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.contact-item .icon-badge { margin: 0; }
.contact-k { display: block; font-size: 13px; color: var(--faint); font-weight: 500; }
.contact-v { display: block; font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; word-break: break-word; }
a.contact-v:hover { color: var(--primary); }

.form { display: grid; gap: 18px; padding: 32px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 600; color: var(--text); }
.field input,
.field select,
.field textarea {
    font-family: var(--sans);
    font-size: 15px;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
    outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field .input-validation-error { border-color: var(--bad); }
.field-error { font-size: 13px; color: var(--bad); }
.field-error:empty { display: none; }

.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-note { font-size: 13px; color: var(--faint); line-height: 1.5; max-width: 42ch; margin: 0; }

.alert { margin: 0 0 24px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; }
.alert-ok { background: var(--ok-soft); color: var(--ok); }
.alert-bad { background: var(--bad-soft); color: var(--bad); }
.form .alert { margin: 0; }
.alert ul { margin: 0; padding-left: 18px; }
.validation-summary-valid { display: none; }

/* Off-screen rather than display:none — a bot reading the DOM still finds it. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.error-card { max-width: 720px; margin: 0 auto; text-align: center; padding: 48px 32px; }
.error-card h1 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); }
.error-card .lead { margin: 16px auto 28px; }
.error-card code { color: var(--dim); }

.btn-block { width: 100%; }
.field-hint { font-size: 13px; color: var(--faint); }
.form-plain { display: grid; gap: 18px; margin-top: 28px; }

.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--dim); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }

/* ------------------------------------------------------------ client area -- */
.auth {
    padding: 72px 0 96px;
    background:
        radial-gradient(700px 380px at 85% 0%, var(--cyan-soft), transparent 70%),
        linear-gradient(180deg, var(--hero-top) 0%, var(--ground) 100%);
}
.auth-in { display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 480px; padding: 40px; }
.auth-card h1 { margin: 0; font-size: clamp(26px, 3vw, 32px); }
.auth-card .lead { font-size: 15.5px; margin-top: 10px; }
.auth-card .alert { margin: 24px 0 0; }
/* Sign-in with Google / Facebook. Google's button stays white with the colour mark, as its
   branding rules ask; Facebook's is its own blue. */
.social { display: grid; gap: 10px; margin-top: 26px; }
.social form { margin: 0; }
.btn-social {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.btn-social:hover { border-color: var(--line-strong); background: var(--soft); }
.btn-social-google { background: #FFFFFF; color: #1F1F1F; border-color: #DADCE0; }
.btn-social-google:hover { background: #F8F9FA; border-color: #C6C9CE; }
.btn-social-facebook { background: #1877F2; border-color: #1877F2; color: #FFFFFF; }
.btn-social-facebook:hover { background: #166FE5; border-color: #166FE5; }

.divider { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; color: var(--faint); font-size: 13.5px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.divider + .form-plain { margin-top: 18px; }

.auth-switch { margin: 24px 0 0; text-align: center; font-size: 15px; color: var(--dim); }
.auth-switch a { font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* Client portal: a menu on the left, the page on the right. */
.portal { padding: 40px 0 96px; background: var(--soft); min-height: 60vh; }
.portal-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }

.portal-nav {
    position: sticky;
    top: 96px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px;
}
.portal-nav-toggle { display: none; }
.portal-nav > summary::-webkit-details-marker,
.portal-group > summary::-webkit-details-marker { display: none; }

.portal-group + .portal-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.portal-group > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 10px 8px;
    border-radius: 8px;
    color: var(--faint);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}
.portal-group > summary:hover { color: var(--text); }
.portal-group[open] > summary .drop-chevron { transform: rotate(180deg); }
.portal-group ul { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 2px; }
.portal-group a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.portal-group a svg { color: var(--faint); flex: 0 0 auto; }
.portal-group a:hover { background: var(--soft); }
.portal-group a.is-current { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.portal-group a.is-current svg { color: var(--primary); }

.portal-main > * + * { margin-top: 20px; }
.portal-main .alert { margin-bottom: 0; }
.portal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.portal-head h1 { margin: 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; }
.portal-head .lead { margin-top: 6px; font-size: 15.5px; }
.portal-head .btn { flex: 0 0 auto; }
.card-title { margin: 0; font-size: 18px; }
.portal-main .form { gap: 18px; }

/* "New": pick a new product or an addition to an existing one. */
.choice { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--text); }
.choice-card { position: relative; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-body {
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.choice-body .icon-badge { margin: 0; }
.choice-body strong { display: block; font-size: 15px; color: var(--text); }
.choice-body small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--dim); }
.choice-card:hover .choice-body { border-color: var(--line-strong); }
.choice-card input:checked + .choice-body { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--primary-soft); }
.choice-card input:focus-visible + .choice-body { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }

.existing-only { display: none; }
.request-form:has(#kind-existing:checked) .existing-only { display: grid; }

.request-kind { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--primary-dark); }

.connected-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.connected-list li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.connected .form-note { margin-top: 10px; }
.field input[readonly] { background: var(--soft); color: var(--dim); cursor: default; }


.requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.request { padding: 22px 24px; }
.request-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.request-type { font-family: var(--disp); font-weight: 700; font-size: 16px; }
.request-msg {
    margin: 10px 0 0;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.request-date { display: block; margin-top: 12px; font-size: 13px; color: var(--faint); }

.status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-new { background: var(--primary-soft); color: var(--primary); }
.status-progress { background: var(--warn-soft); color: var(--warn); }
.status-done { background: var(--ok-soft); color: var(--ok); }

.empty { display: flex; align-items: center; gap: 16px; }
.empty .icon-badge { margin: 0; }
.empty p { margin: 0; }

/* ----------------------------------------------------------------- footer -- */
.footer { background: var(--navy); color: #B9C7DB; padding: 64px 0 0; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.brand-inverse { color: #fff; }
.brand-inverse .brand-dom { color: #8FA0BA; }
.footer-brand p { margin: 18px 0 0; max-width: 38ch; line-height: 1.65; }
.footer-title { color: #fff; font-size: 15px; font-weight: 700; margin: 6px 0 16px; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-list a { color: #B9C7DB; text-decoration: none; }
.footer-list a:hover { color: #fff; }
.footer-contacts li { display: flex; align-items: center; gap: 10px; }
.footer-contacts svg { color: var(--brand); flex: 0 0 auto; }
.footer-bottom { margin-top: 48px; padding-top: 22px; padding-bottom: 26px; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-bottom p { margin: 0; font-size: 13px; color: #8FA0BA; }

/* ----------------------------------------------------------------- motion -- */
/* Starts visible and settles, so the page reads correctly even at the first frame. */
@keyframes rise {
    from { opacity: .55; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
.rise { animation: rise .55s cubic-bezier(.2, .7, .3, 1) both; }
.rise-2 { animation-delay: .07s; }
.rise-3 { animation-delay: .14s; }
.rise-4 { animation-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 1100px) {
    .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* The header folds into a menu button whenever its items do not fit on one row. How wide
   that is depends on the language — Armenian labels need about 150px more than English — so
   a small script right after the header in _Layout measures and sets .is-compact. */
.header.is-compact .menu-btn { display: flex; }
.header.is-compact .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 20px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.header.is-compact .nav.is-open { display: flex; }
.header.is-compact .nav a:not(.btn) { padding: 12px; }
.header.is-compact .nav-auth { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.header.is-compact .nav-auth .btn { flex: 1 1 0; }
.header.is-compact .lang-menu { margin-left: auto; }
.header.is-compact .menu-btn { margin-left: 0; }
.header.is-compact .brand { flex: 0 1 auto; }

@media (max-width: 960px) {
    .hero { padding: 48px 0 64px; }
    .hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hero-art { min-height: 400px; max-width: 560px; width: 100%; margin: 0 auto; }
    .about { grid-template-columns: 1fr; gap: 36px; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
    .steps::before { display: none; }
    .contact { grid-template-columns: 1fr; }
    .cta-in { flex-direction: column; align-items: flex-start; }
    .utility-hours { display: none !important; }
}

@media (max-width: 640px) {
    .wrap { padding: 0 16px; }
    .section { padding: 64px 0; }
    .section-head { margin-bottom: 32px; }
    .cards-4, .cards-2 { grid-template-columns: 1fr; }
    .row2 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .form { padding: 22px; }
    .card { padding: 22px; }
    .auth { padding: 40px 0 64px; }
    .auth-card { padding: 26px 22px; }
    .header-in { gap: 8px; }
    .lang-menu summary { padding: 0 8px; gap: 4px; }
    .lang-menu summary > svg:first-child { display: none; }
    .lang-menu summary, .theme-btn, .menu-btn { height: 38px; }
    .theme-btn, .menu-btn { width: 38px; }
    .drop summary { padding: 0; }
    .drop summary .drop-chevron { display: none; }
    .drop summary .avatar { width: 36px; height: 36px; font-size: 13px; }
    .drop-panel { right: -52px; }
    .menu-btn { padding: 0 10px; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }

    .header-in { height: 64px; }
    .brand-name { font-size: 16px; }
    .brand-dom { display: none; }
    .logo, .mark { width: 34px; height: 34px; }

    /* Phone number stays; the email moves to the footer and contact section. */
    .utility-contacts a[href^="mailto"] { display: none; }

    .hero-art { min-height: 330px; }
    .art-plate { max-width: 200px; padding: 9px 11px; }
    .art-plate small { display: none; }
    .art-plate:nth-child(2) { left: 0; }
    .hero-cta .btn { flex: 1 1 auto; }
}

/* Narrow phones: the name goes onto two lines rather than being cut to "Easy Smart Sol…". */
@media (max-width: 420px) {
    .brand-name { white-space: normal; font-size: 14.5px; line-height: 1.15; }
    /* "բիզնես‑տրամաբանության" is one unbreakable word; it has to fit a 343px column. */
    :lang(hy) h1, :lang(ru) h1 { font-size: 26px; }
}

h1, h2, h3 { overflow-wrap: break-word; }

/* Client portal on tablets and phones: the menu folds into one button above the page
   (site.js starts it folded at this width), and the two choice cards stack. */
@media (max-width: 900px) {
    .portal { padding: 20px 0 64px; }
    .portal-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .portal-nav { position: static; padding: 0; }
    .portal-nav-toggle {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 16px;
        font-weight: 600;
        cursor: pointer;
        user-select: none;
    }
    .portal-nav[open] > .portal-nav-toggle { border-bottom: 1px solid var(--line); }
    .portal-nav[open] > .portal-nav-toggle .drop-chevron { transform: rotate(180deg); }
    .portal-menu { padding: 8px; }
}

@media (max-width: 640px) {
    .choice { grid-template-columns: 1fr; }
    .portal-head .btn { width: 100%; }
}



/* ======================================================== products first -- */
/* The home page opens on the company's products: one small card each — a drawn screen, the
   name, one line, and two links (its page here, its own site). Compact on purpose: products
   will be added, and none should take the page over. Four to a row on a wide screen, two on a
   tablet, one on a phone. */
.showcase {
    position: relative;
    overflow: hidden;
    padding: 56px 0 80px;
    background:
        radial-gradient(900px 480px at 88% 0%, var(--cyan-soft), transparent 70%),
        radial-gradient(700px 420px at 0% 100%, var(--primary-soft), transparent 70%),
        linear-gradient(180deg, var(--hero-top) 0%, var(--ground) 100%);
}
.showcase-head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.showcase-head .hero-sub { margin-left: auto; margin-right: auto; }

/* Fixed-width cards that wrap and sit centred: two products do not stretch across the page, and
   a row that is not full stays in the middle. */
.ptiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }

.ptile { display: flex; flex-direction: column; flex: 0 1 268px; min-width: 0; padding: 0; overflow: hidden; border-radius: 14px; }
.ptile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }

/* The drawing sits in the product's coloured panel, flush with the card's top edge. One height
   for every drawing, so the names below line up across the row; the window runs off the
   panel's bottom edge. It is drawn at full size and scaled down, so it keeps its proportions. */
.ptile-art { display: block; height: 128px; overflow: hidden; border-radius: 0; padding: 18px 20px 0; text-decoration: none; }
.ptile-art .pos {
    width: 166%;
    transform: scale(.6);
    transform-origin: top left;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    transition: transform .25s;
}
.ptile:hover .ptile-art .pos { transform: scale(.6) translateY(-6px); }

.ptile-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px; }
.ptile-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ptile-head .chip { margin-left: auto; flex: 0 0 auto; font-size: 11.5px; padding: 2px 8px; }
.icon-badge-xs { width: 34px; height: 34px; border-radius: 9px; margin: 0; }
/* .card in front: the Armenian and Russian h2 size (:lang(hy) h2) must not win here. */
.card .ptile-title { font-size: 17px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptile-title a { color: var(--text); text-decoration: none; }
.ptile-title a:hover { color: var(--primary); }
.card .ptile-desc {
    margin: 10px 0 14px;
    font-size: 14px;
    line-height: 1.5;
    /* Two lines here; the whole text is on the product's page. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.chip a { color: inherit; text-decoration: none; }
.chip a:hover { color: var(--primary); }

/* Two small links on one row under a hairline: its page here, and its own site. */
.ptile-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.ptile-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.ptile-link svg { transition: transform .15s; }
.ptile-link:hover { color: var(--primary-dark); }
.ptile-link:hover svg { transform: translateX(2px); }
/* The product's own site: an icon button, named by its aria-label and tooltip. */
.ptile-out {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--line);
    color: var(--dim);
    text-decoration: none;
    flex: 0 0 auto;
}
.ptile-out:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }

/* Who makes them comes second: the same scene as before, on the plain ground, with its
   headline one level down (the page's h1 is the products). */
.hero-company {
    padding: 96px 0;
    background: radial-gradient(800px 460px at 100% 50%, var(--cyan-soft), transparent 70%), var(--ground);
    border-top: 1px solid var(--line);
}
.hero-title { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.12; letter-spacing: -.025em; margin: 18px 0 0; }
:lang(hy) .hero-title, :lang(ru) .hero-title { font-size: clamp(27px, 3vw, 38px); line-height: 1.16; }

/* ---------------------------------------------------------- product page -- */
.pd-hero {
    padding: 36px 0 88px;
    background:
        radial-gradient(900px 480px at 88% 10%, var(--cyan-soft), transparent 70%),
        linear-gradient(180deg, var(--hero-top) 0%, var(--ground) 100%);
}
.crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 34px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dim);
    text-decoration: none;
}
.crumb:hover { color: var(--primary); }
.crumb-arrow { display: inline-flex; transform: rotate(180deg); }

.pd-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pd-title { font-size: clamp(34px, 4.4vw, 52px); margin: 0; line-height: 1.08; }
.pd-desc { margin: 24px 0 0; font-size: 18px; color: var(--dim); max-width: 58ch; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 30px; }
.pd-copy .chips { margin: 0; padding: 22px 0 0; }
.pd-art { padding: 34px; border-radius: 22px; }

.pd-features { list-style: none; margin: 0; padding: 0; }
.pd-feature { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; font-size: 16px; font-weight: 500; line-height: 1.5; }
.pd-feature .tick { margin-top: 2px; }

.pd-other { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--text); }
.pd-other .icon-badge { margin: 0; }
.pd-other:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.pd-other-text { display: flex; flex-direction: column; min-width: 0; }
.pd-other-text strong { font-family: var(--disp); font-size: 18px; font-weight: 800; }
.pd-other-text small { font-size: 14px; color: var(--dim); }
.pd-other-go { margin-left: auto; color: var(--primary); display: inline-flex; }

@media (max-width: 960px) {
    .showcase { padding: 44px 0 72px; }
    .hero-company { padding: 64px 0; }
    .pd-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 640px) {
    .showcase-head { margin-bottom: 32px; }
    .ptile { flex-basis: 100%; }
    .product-name .icon-badge { width: 52px; height: 52px; }
    .pd-hero { padding: 24px 0 64px; }
    .pd-art { padding: 18px; }
}

/* Services: two to a row, the icon beside the text rather than above it, so each card is wide
   and short instead of a narrow column (and long chips such as the Armenian ones fit). */
.services .service { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 22px; align-content: start; }
.services .service .icon-badge { grid-row: 1 / span 3; margin: 0; }
.services .service h3, .services .service p, .services .service .chips { grid-column: 2; }
.services .service .chips { margin: 0; padding-top: 16px; }
.chips .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
    .services .service { grid-template-columns: minmax(0, 1fr); }
    .services .service .icon-badge { grid-row: auto; margin-bottom: 16px; }
    .services .service h3, .services .service p, .services .service .chips { grid-column: 1; }
}

/* A product's own logo, in place of the icon badge, at the badge's sizes. */
.product-logo { display: block; flex: 0 0 auto; object-fit: contain; }
.product-logo-xs { width: 34px; height: 34px; border-radius: 9px; }
.product-logo-sm { width: 46px; height: 46px; border-radius: 12px; }
.product-logo-md { width: 64px; height: 64px; border-radius: 16px; }
@media (max-width: 640px) {
    .product-logo-md { width: 52px; height: 52px; }
}