/* site.css — the whole of hetoimos.com, «яскравий» (2026-09-25; it was varianty/yaskravyi/site.css, the ad
   landing Ihor chose for the whole site). Pastel, glossy, Instagram-native. Unbounded for display, Manrope
   for text. A drifting gradient field behind frosted-glass cards; glossy 3D icons (generated, on white,
   blended with multiply) float around the Direct chat. Soft, not brutal.
   Every page is stamped by tools/build-het.mjs; the rules for its shell (footer, inner-page hero, the
   legal documents, the conversation path) are at the end of this file. */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/unbounded-cyrl-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/manrope-cyrl-latin.woff2') format('woff2'); }

:root {
  --bg: #FBF8FF; --ink: #1C1533; --ink-2: #5E5775; --ink-3: #6F6788; /* ink-3 was #9790AB: 2.90:1 on --bg for 11–12 px text, AA wants 4.5 (5.03 now) */
  --violet: #6D4AFF; --violet-2: #5733F0; --pink: #FF6FAE; --peach: #FFB08A; --lime: #D8FF6B; --mint: #9BF0CF; --lilac: #CDBDFF;
  --grad: linear-gradient(120deg, #6D4AFF 0%, #B04CFF 45%, #FF6FAE 100%);
  --glass: rgba(255,255,255,.66); --glass-b: rgba(255,255,255,.9);
  --sh: 0 30px 60px -30px rgba(90,60,200,.35); --sh-s: 0 16px 34px -20px rgba(90,60,200,.35);
  --r: 28px; --max: 76rem; --g: clamp(1rem, 5vw, 3rem);
  --display: Unbounded, "Arial Black", sans-serif; --text: Manrope, system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* scroll-padding-top: the header is sticky (.top, bottom edge at 76 px on a phone), so every in-page jump — «to the
   form», the menu's #can/#work/#price/#faq, an offer section — stops 6rem below the top instead of sliding its
   first lines under the header (review, 2026-09-25: the focused first field and the «Ви обрали…» note were hidden). */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 17px/1.6 var(--text); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.025em; }
h1 { font-size: clamp(2.2rem, 7.4vw, 4.9rem); line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 5vw, 3.2rem); line-height: 1.08; }
h3 { font-size: 1.1rem; line-height: 1.25; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }
section { padding: clamp(4rem, 10vw, 7.5rem) 0; position: relative; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-b); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-weight: 800; font-size: .85rem; box-shadow: var(--sh-s); }
.tag i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--grad); }
.head { max-width: 48rem; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.head.c { margin-left: auto; margin-right: auto; text-align: center; }
.head h2 { margin-top: 1.1rem; }
.head p { margin-top: 1rem; color: var(--ink-2); font-size: 1.1rem; }

/* the field */
.field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.field i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: drift 22s ease-in-out infinite alternate; }
.field i:nth-child(1) { width: 46vmax; height: 46vmax; left: -12vmax; top: -10vmax; background: var(--lilac); }
.field i:nth-child(2) { width: 38vmax; height: 38vmax; right: -10vmax; top: 10vh; background: #FFC9DE; animation-delay: -6s; }
.field i:nth-child(3) { width: 34vmax; height: 34vmax; left: 20vw; bottom: -14vmax; background: var(--mint); animation-delay: -12s; opacity: .4; }
.field i:nth-child(4) { width: 26vmax; height: 26vmax; right: 12vw; bottom: 8vh; background: #FFE3B0; animation-delay: -3s; opacity: .45; }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.12); } }
@keyframes bob { 50% { transform: translateY(-14px) rotate(3deg); } }

[data-reveal].pre { opacity: 0; transform: translateY(34px) scale(.98); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
[data-reveal].in:nth-child(2) { transition-delay: .08s; } [data-reveal].in:nth-child(3) { transition-delay: .16s; } [data-reveal].in:nth-child(4) { transition-delay: .24s; } [data-reveal].in:nth-child(5) { transition-delay: .32s; } [data-reveal].in:nth-child(6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .field i, .ico { animation: none !important; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 56px; padding: 1rem 1.7rem; border: 0; border-radius: 999px; background: var(--grad); color: #fff; font: 800 1rem/1.1 var(--text); text-decoration: none; cursor: pointer; box-shadow: 0 18px 36px -16px rgba(140,70,255,.7); transition: transform .25s, box-shadow .25s, filter .25s; background-size: 140% 100%; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 24px 44px -18px rgba(140,70,255,.8); filter: saturate(1.15); }
.btn:disabled { opacity: .6; transform: none; }
.btn-glass { background: var(--glass); color: var(--ink); border: 1px solid var(--glass-b); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--sh-s); }
.btn-wide { width: 100%; }

/* header */
.top { position: sticky; top: .8rem; z-index: 40; }
.top .wrap { display: flex; align-items: center; gap: 1rem; }
.top .inner { display: flex; align-items: center; gap: 1rem; width: 100%; padding: .55rem .55rem .55rem 1.1rem; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid var(--glass-b); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--sh-s); }
.logo { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font: 700 1rem/1 var(--display); text-decoration: none; }
.logo svg { width: 1.4rem; fill: var(--violet); }
.nav { display: none; gap: 1.6rem; margin-left: auto; font-weight: 800; font-size: .92rem; }
.nav a { text-decoration: none; color: var(--ink-2); }
.nav a:hover { color: var(--violet); }
.top .btn { margin-left: auto; min-height: 44px; padding: .6rem 1.1rem; font-size: .9rem; }
@media (min-width: 980px) { .nav { display: flex; } .top .btn { margin-left: 0; } }

/* hero */
.hero { padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(3rem, 8vw, 6rem); }
.hero .wrap { text-align: center; }
.hero h1 { max-width: 16ch; margin: 1.3rem auto 0; }
.hero h1 a { text-decoration: none; }
.hero .exp { margin: .6rem auto 0; font-weight: 800; line-height: 1.3; font-size: clamp(1rem, 2.6vw, 1.2rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .exp + .lead { margin-top: .7rem; }
.hero .lead { margin: 1.3rem auto 0; max-width: 36rem; font-size: clamp(1.05rem, 2.5vw, 1.25rem); color: var(--ink-2); }
.acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 2rem; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.4rem; }
.chips span { font-weight: 800; font-size: .86rem; padding: .45rem .9rem; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid var(--glass-b); }
.chips span::before { content: "✓ "; color: var(--violet); }

.scene { position: relative; max-width: 60rem; margin: clamp(2.8rem, 7vw, 4.5rem) auto 0; display: grid; gap: 1.2rem; align-items: center; }
@media (min-width: 700px) { .scene { grid-template-columns: 1fr auto 1fr; } }
.glass { background: var(--glass); border: 1px solid var(--glass-b); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: var(--r); box-shadow: var(--sh); }
.chat { padding: 1.1rem; display: grid; gap: .55rem; text-align: left; }
.chat .who { display: flex; align-items: center; gap: .6rem; padding-bottom: .75rem; margin-bottom: .2rem; border-bottom: 1px solid rgba(28,21,51,.08); font-weight: 800; font-size: .9rem; }
.chat .who i { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: conic-gradient(from 200deg, #FFB08A, #FF6FAE, #6D4AFF, #FFB08A); padding: 2px; }
.chat .who i::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 2px solid #fff; }
.chat .who em { margin-left: auto; font-style: normal; font-size: .75rem; color: #fff; background: #D42A78; border-radius: 999px; padding: .15rem .5rem; } /* white on --pink was 2.58:1; this pink is 4.77 */
.b { justify-self: start; max-width: 88%; padding: .55rem .9rem; border-radius: 20px 20px 20px 6px; background: rgba(28,21,51,.06); font-size: .93rem; font-weight: 700; }
.b.me { justify-self: end; border-radius: 20px 20px 6px 20px; background: var(--grad); color: #fff; }
.b.late { justify-self: end; background: none; padding: 0 .4rem; font-size: .78rem; font-weight: 600; color: var(--ink-3); }
.to { display: none; }
@media (min-width: 700px) { .to { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--lime); box-shadow: var(--sh-s); } .to::after { content: ""; width: .8rem; height: .8rem; border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); transform: rotate(45deg); margin-left: -.3rem; } }
.card { overflow: hidden; text-align: left; }
.card .pic { aspect-ratio: 5/4; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, #fff 0%, #F0E9FF 60%, #E4DAFF 100%); }
.card .pic img { width: 62%; mix-blend-mode: multiply; }
.card .body { padding: 1rem 1.1rem 1.15rem; display: grid; gap: .55rem; }
.card .name { font-weight: 800; }
.card .row { display: flex; justify-content: space-between; align-items: center; }
.card .cost { font: 700 1.25rem/1 var(--display); }
.card .ex { font-size: .72rem; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.sizes { display: flex; gap: .35rem; }
.sizes span { flex: 1; text-align: center; font-weight: 800; font-size: .82rem; padding: .4rem 0; border-radius: 10px; background: rgba(28,21,51,.06); }
.sizes span.on { background: var(--ink); color: #fff; }
.card .add { text-align: center; font-weight: 800; font-size: .9rem; padding: .7rem; border-radius: 14px; background: var(--lime); }
.ico { position: absolute; z-index: 2; width: clamp(80px, 12vw, 150px); mix-blend-mode: multiply; animation: bob 6s ease-in-out infinite; pointer-events: none; }
.ico.i1 { left: -4%; top: -14%; }
.ico.i2 { right: -3%; top: -18%; animation-delay: -1.5s; }
.ico.i3 { left: 2%; bottom: -16%; animation-delay: -3s; }
.ico.i4 { right: 1%; bottom: -14%; animation-delay: -4.5s; }
/* i2 sits on the product picture's top-right, just under the chat: at top 38 % it covered «відповідь через 3 години»,
   the chat's punch line, at every phone width (review, 2026-09-25). The chat is 367–390 px tall at 360–699 px, so a
   fixed 26rem lands inside the picture at all of them. */
@media (max-width: 699px) { .ico { width: 70px; } .ico.i1 { left: -2%; top: -6%; } .ico.i2 { right: -2%; top: 26rem; } .ico.i3, .ico.i4 { display: none; } }

/* marquee */
.tick { overflow: hidden; padding: 1.1rem 0; background: var(--ink); color: #fff; transform: rotate(-1.5deg); margin: 1rem -2vw; }
.tick ul { display: flex; gap: 2.2rem; margin: 0; padding: 0; list-style: none; width: max-content; animation: run 32s linear infinite; font: 700 1.05rem/1 var(--display); }
.tick li::after { content: "✦"; margin-left: 2.2rem; color: var(--lime); }
@keyframes run { to { transform: translateX(-50%); } }

/* bento */
.bento { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .bento { grid-template-columns: repeat(3, 1fr); } .bento .wide { grid-column: span 2; } }
.bento article { padding: 1.6rem; position: relative; overflow: hidden; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; }
.bento article img { position: absolute; right: -4%; top: -6%; width: 46%; max-width: 190px; mix-blend-mode: multiply; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.bento article:hover img { transform: translateY(-8px) rotate(-4deg); }
.bento h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.bento p { color: var(--ink-2); max-width: 22rem; }
.bento .wide { background: linear-gradient(135deg, rgba(109,74,255,.92), rgba(255,111,174,.9)); color: #fff; border: 0; }
.bento .wide p { color: rgba(255,255,255,.88); }
.bento .wide img { mix-blend-mode: normal; } /* y-phone.webp has a transparent background (it had a white one, which drew a white box on this card); multiply would tint its screen */
.bento .n { font: 700 .8rem/1 var(--display); color: var(--violet); margin-bottom: auto; }
.bento .wide .n { color: var(--lime); }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: s; padding: 1.6rem; }
.steps li::before { content: "0" counter(s); display: block; font: 700 2.6rem/1 var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 1rem; }
.steps h3 { margin-bottom: .5rem; }
.steps p { color: var(--ink-2); font-size: .97rem; }

/* works */
.works-sec { overflow: hidden; }
.works { list-style: none; margin: 0 calc(-1 * var(--g)); padding: 1rem var(--g) 2rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 230px); gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); } /* without scroll-padding, mandatory snap pulled the first card flush to x=0 */
@media (min-width: 1160px) { .works { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; margin: 0; padding: 1rem 0 0; } .work:nth-child(even) { transform: translateY(2.2rem); } }
.work { scroll-snap-align: start; text-align: center; }
.work .scr { aspect-ratio: 1/2; border-radius: 32px; padding: 6px; background: var(--grad); box-shadow: var(--sh); }
.work .scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 27px; }
.work h3 { margin-top: 1rem; font-size: .98rem; }
.work p { margin-top: .2rem; font-size: .88rem; color: var(--ink-2); }
.work-go { display: inline-flex; align-items: center; min-height: 44px; margin-top: .1rem; font-weight: 800; color: var(--violet); text-decoration: none; font-size: .9rem; } /* 44 px: the tap floor (was 23 px tall) */
.work-go:hover { text-decoration: underline; }

/* niches */
.niches { display: grid; gap: 1rem; }
@media (min-width: 860px) { .niches { grid-template-columns: repeat(3, 1fr); } }
.niche { padding: 1.4rem; display: grid; gap: .8rem; align-content: start; }
.niche .q { justify-self: start; padding: .55rem .9rem; border-radius: 20px 20px 20px 6px; background: rgba(28,21,51,.06); font-weight: 800; font-size: .93rem; }
.niche .a { justify-self: end; max-width: 92%; padding: .7rem .95rem; border-radius: 20px 20px 6px 20px; background: var(--grad); color: #fff; font-size: .93rem; font-weight: 600; }
.niche h3 { font-size: 1rem; color: var(--violet); }

/* price */
.tiers { display: grid; gap: 1.3rem; }
@media (min-width: 900px) { .tiers { grid-template-columns: 1fr 1fr; } }
.tier { padding: clamp(1.6rem, 4vw, 2.4rem); display: flex; flex-direction: column; gap: 1.1rem; position: relative; }
.tier.hot { background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; border: 2.5px solid transparent; }
.tier .badge { align-self: flex-start; padding: .35rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 800; background: var(--lime); }
.tier h3 { font-size: 1.45rem; }
.price { font: 700 clamp(2.4rem, 7vw, 3.3rem)/1 var(--display); letter-spacing: -.04em; }
.price small { font-size: .5em; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tier li { padding-left: 1.9rem; position: relative; font-weight: 600; color: var(--ink-2); }
.tier li::before { content: "✓"; position: absolute; left: 0; top: .05em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--grad); color: #fff; font-size: .75rem; display: grid; place-items: center; font-weight: 800; }
.tier .when { font-weight: 800; font-size: .92rem; }
.tier .btn { margin-top: auto; }
.more { margin-top: 1.6rem; color: var(--ink-2); max-width: 48rem; }

/* faq */
.faq { display: grid; gap: .8rem; max-width: 52rem; margin: 0 auto; }
.faq details { padding: 0 1.4rem; border-radius: 22px; }
.faq summary { list-style: none; cursor: pointer; padding: 1.2rem 0; font: 700 1rem/1.35 var(--display); display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; flex: 0 0 auto; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--grad); color: #fff; font-size: 1.1rem; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.3rem; color: var(--ink-2); }

/* cta */
.cta-box { position: relative; border-radius: 40px; background: linear-gradient(125deg, #6D4AFF 0%, #A34DFF 40%, #FF6FAE 80%, #FFB08A 100%); color: #fff; padding: clamp(2rem, 6vw, 4.5rem); display: grid; gap: 2rem; align-items: center; overflow: hidden; box-shadow: var(--sh); }
@media (min-width: 980px) { .cta-box { grid-template-columns: 1.1fr .9fr; } }
.cta-box::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 65%); }
.cta-box > * { position: relative; }
.cta-box h2 { font-size: clamp(1.9rem, 5.4vw, 3.4rem); }
.cta-box .lead { margin-top: 1rem; font-size: 1.1rem; color: rgba(255,255,255,.9); }
.cta-box .alt { margin-top: 1.4rem; color: rgba(255,255,255,.9); }
.cta-box .alt a { font-weight: 800; color: #fff; }
.form { padding: clamp(1.3rem, 3.5vw, 1.9rem); display: grid; gap: .95rem; color: var(--ink); background: rgba(255,255,255,.92); }
.form label { display: block; font: 700 .8rem/1 var(--display); margin-bottom: .45rem; }
.form input[type=text] { width: 100%; min-height: 56px; padding: .85rem 1.1rem; border: 1.5px solid rgba(28,21,51,.1); border-radius: 18px; background: #fff; font: 600 16px/1.3 var(--text); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.form input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 5px rgba(109,74,255,.15); }
.lead-hp { display: none !important; }
.lead-note { font-size: .88rem; font-weight: 600; color: var(--ink-2); text-align: center; }
.lead-note[data-state=bad] { color: #C0183D; }
.lead-plan-note { font-weight: 800; color: var(--violet); }
.lead-done { background: #fff; color: var(--ink); border-radius: var(--r); padding: 1.8rem; }
.lead-done h3 { margin-bottom: .5rem; }

a[href^="tel:"] { white-space: nowrap; }

.dock { position: fixed; left: .8rem; right: .8rem; bottom: .8rem; z-index: 50; transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.dock.on { transform: none; }
@media (min-width: 980px) { .dock { display: none; } }
/* the tilted ticker and the floating icons must never widen the page */
html, body { overflow-x: clip; }
/* icons sit in their own corner, above the text, never over it */
.bento article { padding-top: 7.5rem; min-height: 0; }
.bento article img { right: 1rem; top: 1rem; width: 30%; max-width: 120px; }
.bento .n { position: absolute; left: 1.6rem; top: 1.6rem; margin: 0; }
.bento .wide { padding-top: 1.6rem; padding-right: 42%; min-height: 250px; justify-content: flex-end; }
.bento .wide img { top: auto; bottom: -18%; right: 4%; width: 34%; max-width: 170px; }
.bento .wide .n { position: static; margin-bottom: auto; }
/* PERFORMANCE — measured 2026-09-23: backdrop-filter on ~30 cards over an animated, blurred field made
   the page miss frames (the preview could not paint a frame inside 5 s). The field is now composited once
   (will-change) and the cards are plain translucent white; only the small header keeps real glass. */
.field i { will-change: transform; }
.glass, .tag, .chips span, .btn-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass { background: rgba(255,255,255,.8); }
.tag, .btn-glass { background: rgba(255,255,255,.85); }
/* the field's softness comes from the gradient itself, not from filter: blur(70px) on four 40-vmax
   layers — that filter alone held the page at ~39 fps while scrolling (headless, 2026-09-23). */
.field i { filter: none; opacity: .75; }
.field i:nth-child(1) { background: radial-gradient(circle, var(--lilac) 0%, rgba(205,189,255,0) 68%); }
.field i:nth-child(2) { background: radial-gradient(circle, #FFC9DE 0%, rgba(255,201,222,0) 68%); }
.field i:nth-child(3) { background: radial-gradient(circle, var(--mint) 0%, rgba(155,240,207,0) 68%); opacity: .6; }
.field i:nth-child(4) { background: radial-gradient(circle, #FFE3B0 0%, rgba(255,227,176,0) 68%); opacity: .7; }

/* ⚠ lead.js HIDES the form with the [hidden] attribute once the enquiry is stored. Any author `display`
   (.form / .lead-form are display:grid) beats the UA rule, so without this the sent form stayed on screen,
   filled in, with «Надсилаємо…» under it forever — measured 2026-09-24 on the live ad landing. */
[hidden] { display: none !important; }

/* ══ THE SITE SHELL (2026-09-25) — what the one-page landing did not need ═════════════════════════ */

/* ── the conversation path: under the first-screen button and beside the form ─────────────────────
   Two real links (t.me, tel:), which src/clicks.js counts as a Meta `Contact`. In the hero they sit
   INSIDE .acts, so on a phone the order is: main button · talk · «Подивитись роботи» (order below); on a
   wide screen both buttons share line one and the talk row is line two. 44 px is the tap floor. */
.talk { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.acts > .talk { flex-basis: 100%; order: 3; margin-top: -.1rem; }
@media (max-width: 699px) { .acts > .talk { order: 1; } .acts > .btn-glass { order: 2; } }
.talk a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .4rem 1rem .4rem .4rem; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid var(--glass-b); box-shadow: var(--sh-s); color: var(--ink); font-weight: 800; font-size: .92rem; line-height: 1.25; text-decoration: none; text-align: left; white-space: normal; transition: transform .25s; }
.talk a:hover { transform: translateY(-2px); }
.talk i { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--grad); }
.talk svg { width: 1rem; height: 1rem; fill: #fff; }
.talk b { white-space: nowrap; font-weight: 800; }
.talk.on-grad { justify-content: flex-start; margin-top: .8rem; }
.talk.on-grad a { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; box-shadow: none; }
.talk.on-grad i { background: #fff; }
.talk.on-grad svg { fill: var(--violet); }
.cta-box .alt.mail { margin-top: 1rem; }

/* ── the works: what each one IS, so the two shops read as shops at a glance ───────────────────── */
.work .kind { display: inline-block; margin-top: 1rem; padding: .28rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 800; line-height: 1.2; background: rgba(255,255,255,.85); border: 1px solid var(--glass-b); color: var(--ink-2); }
.work .kind.shop { background: var(--lime); border-color: transparent; color: var(--ink); }
.work .kind + h3 { margin-top: .55rem; }

/* ── an inner page's first screen: a heading and one action, not the landing's scene ───────────── */
.page-hero { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.page-hero h1 { font-size: clamp(2rem, 6vw, 3.8rem); }

/* ── rows of terms (/rekomendacii/) ───────────────────────────────────────────────────────────── */
.rows { display: grid; gap: 1rem; }
@media (min-width: 760px) { .rows { grid-template-columns: 1fr 1fr; } }
.rows > div { padding: 1.5rem; }
.rows h3 { margin-bottom: .5rem; }
.rows p { color: var(--ink-2); }
.more a { color: var(--violet-2); font-weight: 700; }

/* ── the legal documents (/oferta/, /pryvatnist/) ──────────────────────────────────────────────────
   The only long-prose pages, and the only ones where the reader looks for ONE clause: a measured column,
   headings that can be linked to, a table of contents that is a real list of anchors. Scoped under .doc.
   The text is carried from src/legal.js, never retyped. */
.doc-sec { padding-top: 0; }
.doc { max-width: 52rem; margin: 0 auto; padding: clamp(1.3rem, 4vw, 2.6rem); }
.doc h2 { margin: 2.4rem 0 .8rem; font-size: clamp(1.1rem, 2.4vw, 1.35rem); } /* the header clearance is html's scroll-padding-top */
.doc h3 { margin: 1.6rem 0 .5rem; font-size: 1rem; color: var(--ink-2); }
.doc p, .doc li { color: var(--ink-2); line-height: 1.7; }
.doc p { margin-top: .7rem; }
.doc ul { margin: .7rem 0 0 1.1rem; padding: 0; display: grid; gap: .4rem; }
.doc a { color: var(--violet-2); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc strong { color: var(--ink); }
.doc code { font-size: .9em; overflow-wrap: anywhere; }
.doc-toc { display: grid; gap: .1rem .45rem; padding: 1rem 1.2rem; border-radius: 18px; background: rgba(109,74,255,.06); }
@media (min-width: 700px) { .doc-toc { grid-template-columns: 1fr 1fr; column-gap: 1.6rem; } }
.doc-toc a { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; font-size: .92rem; font-weight: 700; }
.doc-note { margin-top: 1rem; }
.doc-scroll { margin-top: 1rem; overflow-x: auto; }
.doc-table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.doc-table th, .doc-table td { border: 1px solid rgba(28,21,51,.1); padding: .55rem .7rem; text-align: left; vertical-align: top; color: var(--ink-2); }
.doc-table th { color: var(--ink-3); font-weight: 800; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
/* a four-column table does not fit a phone column (min-content 472 px): stack it, each cell labelled */
@media (max-width: 699px) {
  .doc-scroll { overflow-x: visible; }
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td { display: block; }
  .doc-table tr:first-child { display: none; }
  .doc-table tr { border: 1px solid rgba(28,21,51,.1); border-top: 0; padding: .65rem .85rem; }
  .doc-table tr:nth-child(2) { border-top: 1px solid rgba(28,21,51,.1); }
  .doc-table td { border: 0; padding: .18rem 0; }
  .doc-table td::before { content: attr(data-th); display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
}

/* ── the footer: every page, the three public contacts, the legal line ────────────────────────────
   Bottom padding clears the phone dock. */
.foot { padding: 3rem 0 7rem; font-size: .92rem; color: var(--ink-2); }
.foot .wrap { display: grid; gap: 1.4rem; }
.foot-top { display: grid; gap: 1rem; padding-top: 2rem; border-top: 1px solid rgba(28,21,51,.08); }
@media (min-width: 860px) { .foot-top { grid-template-columns: auto 1fr; align-items: center; } .foot-nav { justify-content: flex-end; } }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 1.3rem; }
.foot-nav a, .foot-contacts a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--ink-2); }
.foot-nav a:hover, .foot-contacts a:hover { color: var(--violet); }
.foot-nav a[aria-current] { color: var(--violet); }
.foot-contacts { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.foot-contacts a { color: var(--ink); }
.foot-fine { font-size: .85rem; }

/* ══ THE INNER PAGES (2026-09-25, stage 2) — the landing's components, arranged for one topic each ══ */

/* three tiers (/tsiny/: the site tiers, then the support tiers) and one (/mozhemo/) */
@media (min-width: 1080px) { .tiers.three { grid-template-columns: repeat(3, 1fr); } }
.tiers.one { max-width: 32rem; margin: clamp(2rem, 5vw, 3rem) auto 0; }
@media (min-width: 900px) { .tiers.one { grid-template-columns: 1fr; } }
.tier-sub { margin-bottom: -.4rem; font-weight: 700; font-size: .95rem; color: var(--ink-2); }
/* a support price is NOT .price: tools/test-wayforpay.mjs reads every <p class="price"> on /tsiny/ as a site tier */
.care-price { font: 700 clamp(1.9rem, 5.5vw, 2.4rem)/1 var(--display); letter-spacing: -.04em; }
.care-price small { font-size: .45em; letter-spacing: 0; }

/* cards of equal weight: /pro/ (why), /mozhemo/ (what else), /tsiny/ (guarantees), /rekomendacii/ (terms) */
@media (min-width: 1080px) { .rows.three { grid-template-columns: repeat(3, 1fr); } }
.rows > div { display: flex; flex-direction: column; }
.rows .n { display: block; margin-bottom: .9rem; font: 700 .8rem/1 var(--display); color: var(--violet); }
.rows .go { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin-top: auto; padding-top: .5rem; font-weight: 800; color: var(--violet); text-decoration: none; }
.rows .go:hover { text-decoration: underline; }
.steps + .tiers { margin-top: clamp(2rem, 5vw, 3rem); }

/* /pytannia/: the answers in three groups, each with a heading a reader can scan for */
.faq-group { margin: 1.8rem 0 .2rem; font-size: clamp(1.1rem, 3vw, 1.35rem); }
.faq-group:first-child { margin-top: 0; }

/* /roboty/: each work as a card — the phone screen beside what it is, what it does and where it lives.
   The home page's .works is a swipe row; here the six stand in a grid, so nothing hides off-screen. */
.works.works-full { grid-auto-flow: row; grid-template-columns: 1fr; gap: 1rem; overflow: visible; margin: 0; padding: 0; }
@media (min-width: 760px) { .works.works-full { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1160px) { .works.works-full { grid-template-columns: repeat(3, 1fr); } .works-full .work:nth-child(even) { transform: none; } }
.works-full .work { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1rem; text-align: left; border-radius: var(--r); background: rgba(255,255,255,.8); border: 1px solid var(--glass-b); box-shadow: var(--sh); }
.works-full .work .scr { padding: 4px; border-radius: 24px; box-shadow: none; }
.works-full .work .scr img { border-radius: 20px; }
.works-full .work .kind { margin-top: 0; }
.works-full .work p { font-size: .93rem; }
.works-full .work-go { margin-top: .6rem; overflow-wrap: anywhere; }
/* four screens of one shop: a swipe row on a phone, one centred row on a wide screen */
@media (min-width: 1160px) { .works.four { grid-template-columns: repeat(4, minmax(0, 220px)); justify-content: center; gap: 2rem; } }
.works-full .work .kind:not(.shop) { background: rgba(109,74,255,.08); border-color: transparent; }
/* three price cards share a row from 1080 px, where the landing's 3.3rem price wrapped «від 45 / 000 ₴»
   (measured at 1440, 2026-09-25): a smaller figure there, and a price never breaks */
.tier .price, .care-price { white-space: nowrap; }
@media (min-width: 1080px) { .tiers.three .price { font-size: clamp(2rem, 2.4vw, 2.3rem); } .tiers.three .care-price { font-size: 1.8rem; } }
@media (min-width: 1160px) { .works.four .work:nth-child(even) { transform: none; } }

/* ── the phone menu (below 980 px, where .nav is hidden) ──────────────────────────────────────────
   A <details>: it opens with no script. The panel hangs under the header pill, full width. */
.top .inner { position: relative; }
.menu { flex: 0 0 auto; }
.menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; background: rgba(28,21,51,.06); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary i, .menu summary i::before, .menu summary i::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s, opacity .25s; }
.menu summary i { position: relative; }
.menu summary i::before, .menu summary i::after { content: ""; position: absolute; left: 0; }
.menu summary i::before { top: -6px; } .menu summary i::after { top: 6px; }
.menu[open] summary i { background: transparent; }
.menu[open] summary i::before { transform: translateY(6px) rotate(45deg); }
.menu[open] summary i::after { transform: translateY(-6px) rotate(-45deg); }
.menu nav { position: absolute; left: 0; right: 0; top: calc(100% + .5rem); display: grid; padding: .5rem; border-radius: 24px; background: rgba(255,255,255,.97); border: 1px solid var(--glass-b); box-shadow: var(--sh); }
.menu nav a { display: flex; align-items: center; min-height: 48px; padding: 0 1rem; border-radius: 16px; font-weight: 800; text-decoration: none; color: var(--ink); }
.menu nav a[aria-current] { color: var(--violet); background: rgba(109,74,255,.07); }
/* logo + button + menu in a 360 px header: the button keeps one line (it wrapped to «Хочу / демо») */
.top .btn { white-space: nowrap; }
@media (max-width: 979px) { .top .inner { gap: .5rem; padding-left: .9rem; } .top .btn { padding-inline: .95rem; } }
@media (max-width: 359px) { .top .inner { gap: .35rem; padding-left: .7rem; padding-right: .4rem; } .top .logo { font-size: .86rem; gap: .35rem; } .top .btn { font-size: .82rem; padding-inline: .7rem; } }
@media (min-width: 980px) { .menu { display: none; } }

/* ── a short phone: everything the ad promised on the first screen ─────────────────────────────────
   Measured 2026-09-25 (review): on 360x640 — a 360x800 Android inside the Facebook in-app browser — the
   «Подзвонити … (Наталія)» link ended at 646–792 px for 8 of the 9 ad headlines, and the longest put the
   main button itself under the fold. Below 760 px of height the hero is tighter and the heading smaller;
   a long ad headline (src/site.js marks it .long) smaller still. Tall phones keep the landing's sizes. */
@media (max-width: 699px) and (max-height: 760px) {
  .hero { padding-top: 1.1rem; }
  .hero h1 { margin-top: .85rem; font-size: clamp(1.85rem, 8.8vw, 2.2rem); }
  .hero h1.long { font-size: clamp(1.55rem, 7.2vw, 1.8rem); }
  .hero .exp { margin-top: .35rem; font-size: .95rem; }
  .hero .exp + .lead { margin-top: .45rem; }
  .hero .lead { margin-top: .8rem; font-size: 1rem; line-height: 1.5; }
  .acts { margin-top: 1.1rem; gap: .55rem; }
  .talk a { padding-block: .25rem; }
  .talk i { width: 1.75rem; height: 1.75rem; }
}