/* style.css — IAppsSigner marketing site. Flat surfaces, hairline strokes, one cobalt accent.
   No gradients, no glow, no pastel washes, no emoji. Plain CSS, no build step.
   Spacing rhythm: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 (tokens.css --sp-* + the layout
   values below). One gutter (--gutter) for header, hero, sections and footer. */

:root {
    --gutter: 24px;
    --section-y: 96px;
    --header-h: 68px;
    --control-h: 40px;          /* 44px on coarse pointers, see the media query below */
}
@media (max-width: 760px) {
    :root { --gutter: 16px; --section-y: 64px; }
}
@media (pointer: coarse) {
    :root { --control-h: 44px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--sp-lg)); }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, figcaption span, li { text-wrap: pretty; }   /* no single-word last lines where supported */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-chip);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Layout ---------- */
.wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
section { padding: var(--section-y) 0; }
.section-head {
    max-width: 640px;
    margin: 0 0 48px;
}
@media (max-width: 760px) {
    .section-head { margin-bottom: var(--sp-xxxl); }
}
.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: var(--sp-md);
}
h2.h-section {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
@media (max-width: 640px) {
    h2.h-section { font-size: 26px; line-height: 1.2; }
}
.section-sub {
    margin-top: var(--sp-md);
    color: var(--ink-secondary);
    font-size: 17px;
    line-height: 1.55;
    max-width: 58ch;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    height: 52px;
    padding: 0 var(--sp-xxl);
    border-radius: var(--r-control);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    border: var(--hairline) solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn-secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--stroke); }
.btn-secondary:hover { border-color: var(--stroke-strong); }
.btn-block { width: 100%; }
.btn-sm { height: var(--control-h); padding: 0 var(--sp-lg); font-size: 14px; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: var(--hairline) solid var(--stroke);
}
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-lg);
    height: var(--header-h);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
    letter-spacing: -0.01em;
    flex: none;
}
.brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 22.5%;   /* the app icon's superellipse, matched by radius */
    flex: none;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--sp-xxl);
}
.nav-links a {
    font-size: 15px;
    line-height: var(--control-h);
    color: var(--ink-secondary);
    transition: color 0.15s ease;
    white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: var(--sp-md); flex: none; }

.icon-btn {
    width: var(--control-h);
    height: var(--control-h);
    border-radius: var(--r-control);
    background: var(--surface-raised);
    border: var(--hairline) solid var(--stroke);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: border-color 0.15s ease;
}
.icon-btn:hover { border-color: var(--stroke-strong); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .icon-sun { display: none; }
:root[data-theme="dark"] .icon-btn .icon-moon { display: none; }
:root[data-theme="dark"] .icon-btn .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .icon-btn .icon-moon { display: none; }
    :root:not([data-theme="light"]) .icon-btn .icon-sun { display: block; }
}

.lang-switch {
    display: flex;
    height: var(--control-h);
    border: var(--hairline) solid var(--stroke);
    border-radius: var(--r-control);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.lang-switch a {
    padding: 0 12px;
    display: flex;
    align-items: center;
    color: var(--ink-secondary);
    transition: color 0.15s ease;
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="page"] {
    background: var(--surface-raised);
    color: var(--accent-text);
}
.lang-switch a:focus-visible { outline-offset: -2px; border-radius: 0; }

/* Header budget: brand 140 + nav ~600 + actions ~150 + gaps. The nav tightens first, then it goes;
   the only call to action lives in the hero and the pricing cards. */
@media (max-width: 1100px) {
    .nav-links { gap: var(--sp-lg); }
}
@media (max-width: 960px) {
    .nav-links { display: none; }
}
@media (max-width: 560px) {
    .header-actions { gap: var(--sp-sm); }
}

/* ---------- Hero ---------- */
.hero {
    padding: 64px 0 48px;
    overflow: clip;
}
@media (max-width: 960px) { .hero { padding: 48px 0 24px; } }
.hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 48px;
    align-items: center;
}
/* A hero with only copy (the 404 page): one column at every width. */
.hero.hero-solo .wrap { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) {
    .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xxxl); }
}
.hero-copy h1 {
    font-size: clamp(44px, 3.75vw, 56px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.06;
}
@media (max-width: 960px) { .hero-copy h1 { font-size: 40px; } }
@media (max-width: 480px) { .hero-copy h1 { font-size: 32px; line-height: 1.1; } }
.hero-copy p.lead {
    margin-top: var(--sp-xxl);
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-secondary);
    max-width: 46ch;
}
@media (max-width: 480px) { .hero-copy p.lead { font-size: 17px; margin-top: var(--sp-lg); } }
.hero-actions {
    margin-top: var(--sp-xxxl);
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .hero-actions { margin-top: var(--sp-xxl); }
    .hero-actions .btn { width: 100%; }
}

/* ---------- 3D phone mockup (CSS only) ----------
   The screenshot is a full simulator frame (status bar + Dynamic Island included), 750×1631,
   so the bezel geometry is derived from the image, not the other way round:
   screen content box 258×563 → island 80×23 at 15px from the top of the device, centred. */
.phone-stage {
    perspective: 1400px;
    display: flex;
    justify-content: center;
    padding: 24px 0;
}
.phone {
    --rx: 6deg;
    --ry: -14deg;
    position: relative;
    width: 272px;
    height: 577px;
    border-radius: 44px;
    background: var(--ink);
    border: 6px solid var(--ink);
    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 0.2s ease-out;
    will-change: transform;
}
:root[data-theme="dark"] .phone { background: #F2F2F0; border-color: #F2F2F0; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .phone { background: #F2F2F0; border-color: #F2F2F0; }
}
.phone-screen {
    position: absolute;
    inset: 0;
    border-radius: 38px;
    overflow: hidden;
    background: #F6F5F1;          /* the screenshot's own paper, theme-independent */
    border: 1px solid var(--stroke);
}
.phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.phone-notch {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 23px;
    border-radius: 12px;
    background: #000;             /* the Dynamic Island is black on every iPhone finish */
    z-index: 2;
}
.phone-card {
    position: absolute;
    background: var(--surface);
    border: var(--hairline) solid var(--stroke);
    border-radius: var(--r-card);
    padding: var(--sp-md) var(--sp-lg);
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    transform: translateZ(60px);
    font-size: 13px;
    line-height: 1.3;
}
/* Both cards sit over the empty paper of the Sources screenshot: below the source card
   (ends ≈189px from the top of the device) and above the tab bar (starts ≈395px). */
.phone-card.card-a { top: 224px; left: -64px; }
.phone-card.card-b { top: 320px; right: -56px; }
.phone-card .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success); flex: none;
}
.phone-card b { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em; display: block; }
.phone-card span { color: var(--ink-secondary); font-size: 12px; display: block; }

@media (max-width: 960px) {
    .phone-stage { padding: var(--sp-lg) 0 var(--sp-sm); }
    .phone { width: 220px; height: 462px; border-radius: 36px; }
    .phone-screen { border-radius: 30px; }
    .phone-notch { top: 13px; width: 64px; height: 18px; border-radius: 9px; }
    .phone-card { display: none; }
}

/* ---------- Feature grid ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-lg);
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
.feature-card {
    background: var(--surface);
    border: var(--hairline) solid var(--stroke);
    border-radius: var(--r-card);
    padding: var(--sp-xxl);
    display: flex;
    flex-direction: column;
}
.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-chip);
    background: var(--surface-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-lg);
}
.feature-icon svg { width: 20px; height: 20px; stroke: var(--accent-text); }
.feature-card h3 { font-size: 17px; font-weight: 600; line-height: 1.3; margin-bottom: var(--sp-sm); }
.feature-card p { color: var(--ink-secondary); font-size: 15px; line-height: 1.55; max-width: 40ch; }

/* ---------- How it works ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-lg);
}
@media (max-width: 960px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-xxl) var(--sp-lg); } }
@media (max-width: 600px) { .steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); } }
.step {
    position: relative;
    padding-top: var(--sp-xxl);
    border-top: 2px solid var(--stroke);
}
.step-num {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 16px;
    color: var(--accent-text);
    font-weight: 600;
    margin-bottom: var(--sp-md);
}
.step h3 { font-size: 16px; font-weight: 600; line-height: 1.3; margin-bottom: var(--sp-xs); }
.step p { font-size: 14px; color: var(--ink-secondary); line-height: 1.5; max-width: 34ch; }

/* ---------- Screenshots ----------
   A plain gallery, no pinning: three frames side by side on wide screens; on narrow ones a
   native horizontal track with mandatory snap points, bleeding to the viewport edges with the
   page gutter kept as inner padding. Scrollbar hidden, scrolling stays native (touch, wheel,
   keyboard). Dots below the track mirror the snapped frame and scroll to it on tap. */
.gallery {
    max-width: 960px;
    margin: 0 auto;
}
.gallery-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-lg);
}
.gallery-item {
    border-radius: var(--r-card);
    overflow: hidden;
    border: var(--hairline) solid var(--stroke);
    background: var(--surface);
}
.gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 1631;
    background: var(--surface-raised);
}
.gallery-cap {
    padding: var(--sp-lg);
    border-top: var(--hairline) solid var(--stroke);
}
.gallery-cap b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.gallery-cap span { font-size: 13px; line-height: 1.45; color: var(--ink-secondary); display: block; }
.gallery-toggle {
    margin-top: var(--sp-xxl);
    display: flex;
    gap: var(--sp-sm);
}
.gallery-toggle .btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.gallery-toggle .btn[aria-pressed="false"] { background: var(--surface-raised); color: var(--ink); border-color: var(--stroke); }
.gallery-toggle .btn[aria-pressed="false"]:hover { border-color: var(--stroke-strong); }
.gallery-dots { display: none; }

@media (max-width: 860px) {
    .gallery { max-width: none; }
    .gallery-track {
        display: flex;
        gap: var(--sp-md);
        margin: 0 calc(-1 * var(--gutter));
        padding: 0 var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .gallery-track::-webkit-scrollbar { display: none; }
    .gallery-item {
        flex: 0 0 min(300px, calc(100% - 48px));
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    @media (max-width: 480px) {
        .gallery-item { flex-basis: min(256px, calc(100% - 64px)); }
    }
    .gallery-dots {
        display: flex;
        justify-content: center;
        margin-top: var(--sp-md);
    }
    .gallery-dot {
        width: 32px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .gallery-dot::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--stroke-strong);
        transition: background-color 0.2s ease, transform 0.2s ease;
    }
    .gallery-dot[aria-current="true"]::before { background: var(--accent); transform: scale(1.34); }
    .gallery-dot:focus-visible { outline-offset: -4px; }
}

/* ---------- Pricing ---------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-lg);
    align-items: stretch;
}
.price-card {
    background: var(--surface);
    border: var(--hairline) solid var(--stroke);
    border-radius: var(--r-card);
    padding: var(--sp-xxl);
    display: flex;
    flex-direction: column;
}
.price-card.featured { border-color: var(--accent); border-width: 2px; padding: calc(var(--sp-xxl) - 1px); }
.price-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-text);
    background: var(--surface-raised);
    border-radius: var(--r-chip);
    padding: 0 var(--sp-sm);
    margin-bottom: var(--sp-lg);
}
.price-card h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.price-value {
    margin-top: var(--sp-sm);
    font-family: var(--font-mono);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.price-value small { font-size: 14px; letter-spacing: 0; color: var(--ink-secondary); font-weight: 500; }
.price-list {
    margin: var(--sp-xxl) 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    flex: 1;
}
.price-list li {
    font-size: 14px;
    line-height: 20px;
    color: var(--ink-secondary);
    display: flex;
    gap: var(--sp-sm);
    align-items: flex-start;
}
.price-list svg { width: 16px; height: 16px; flex: none; margin-top: 2px; stroke: var(--success); }
.pricing-foot {
    margin-top: var(--sp-xxl);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-secondary);
    max-width: 64ch;
}

/* Tablet (681–1020px): one card per row, laid out sideways — tag/title/price/button on the
   left, the six-item list on the right — so the row uses the whole width instead of leaving
   half the screen empty. Three columns need ≥1021px: below that a 260–300px card cannot hold
   the full-width «Написать администратору» button (nowrap) without clipping it. Below 681px
   the list column would wrap its longest items, so the phone layout (≤680px) is the stacked
   card again, centred. */
@media (max-width: 1020px) {
    .pricing-grid { grid-template-columns: minmax(0, 1fr); }
    .price-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas: "tag list" "title list" "price list" "cta list";
        column-gap: var(--sp-xxxl);
        align-items: start;
    }
    .price-tag { grid-area: tag; justify-self: start; }
    .price-card h3 { grid-area: title; }
    .price-value { grid-area: price; }
    .price-list { grid-area: list; margin: 0; }
    .price-card .btn { grid-area: cta; align-self: end; margin-top: var(--sp-xxl); }
}
@media (max-width: 680px) {
    .pricing-grid { max-width: 420px; margin-inline: auto; }
    .price-card { display: flex; flex-direction: column; }
    .price-list { margin: var(--sp-xxl) 0; }
    .price-card .btn { margin-top: 0; }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; }
.faq-item {
    border-bottom: var(--hairline) solid var(--stroke);
}
.faq-item:first-child { border-top: var(--hairline) solid var(--stroke); }
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-lg);
    padding: var(--sp-lg) 0;
    min-height: 56px;
    text-align: left;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    transition: color 0.15s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--accent-text); }
.faq-q:focus-visible { outline-offset: 0; }
.faq-q .plus {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-raised);
    border: var(--hairline) solid var(--stroke);
    position: relative;
}
.faq-q .plus::before, .faq-q .plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--ink-secondary);
    transition: transform 0.2s ease;
}
.faq-q .plus::before { width: 10px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-q .plus::after { width: 1.5px; height: 10px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-q .plus::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a {
    overflow: hidden;
    color: var(--ink-secondary);
    font-size: 15px;
    line-height: 1.6;
    max-width: 62ch;
}
.faq-a > p { padding: 0 0 var(--sp-xxl); }
.faq-a a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Footer ---------- */
/* One quiet row: brand, two links, copyright. The four items need ≈770px to sit on one line,
   so below 768px the row stacks and centres (otherwise the © wrapped alone under the brand). */
.site-footer {
    border-top: var(--hairline) solid var(--stroke);
    padding: var(--sp-xxxl) 0;
}
.footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-lg) var(--sp-xxxl);
    flex-wrap: wrap;
}
.footer-brand { display: inline-flex; }
.footer-links { display: flex; align-items: center; gap: var(--sp-xxl); flex-wrap: wrap; }
.footer-links a, .footer-copy {
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-secondary);
    white-space: nowrap;
}
.footer-links a { transition: color 0.15s ease; }
.footer-links a:hover { color: var(--accent-text); }
@media (pointer: coarse) {
    .footer-links a { padding: 12px 0; }
}
@media (max-width: 768px) {
    .footer-row { flex-direction: column; justify-content: center; gap: var(--sp-md); text-align: center; }
    .footer-links { flex-direction: column; gap: 0; }
    .footer-links a { padding: 10px 0; }
}

/* ---------- Scroll reveal ----------
   Motion only, never opacity: the text must stay at full contrast for anyone whose browser
   never fires the observer (or a static crawler / audit). */
.reveal {
    transform: translateY(24px);
    transition: transform 0.6s ease;
}
.reveal.is-visible {
    transform: translateY(0);
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal {
            transform: none;
            transition: none;
            animation: reveal-in linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }
    }
}
@keyframes reveal-in {
    from { transform: translateY(28px); }
    to { transform: translateY(0); }
}

/* ---------- Misc ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: var(--on-accent);
    padding: 10px 16px;
    border-radius: var(--r-control);
    z-index: 100;
    font-weight: 600;
}
.skip-link:focus { left: var(--sp-lg); top: var(--sp-lg); }