/* EvNet.az — "info" pages on the ev- kit (2026-10-28):
 *   /privacy /terms /cookies  — long legal texts: sticky auto-contents, reading meter, key-point callouts
 *   /contact                  — contact hub with an envelope + phone scene and a polished form
 *   /404                      — a house whose door swings, a key that wobbles, on a blueprint
 *   /bina-az-alternativi      — comparison page with animated cards
 *
 * Sits on top of evnet-ui.css (tokens, hero, cards, buttons ...). Everything is
 * scoped under .inf-* so nothing leaks to other pages. Animations are
 * transform/opacity only and stop under prefers-reduced-motion (the kit's
 * global rule plus the explicit block at the end of this file).
 */

/* ── Shared bits ──────────────────────────────────────────────────────── */

.inf-page { --inf-head: 65px; }
.inf-page .ev-hero { padding-top: clamp(96px, 11vw, 124px); }
.inf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes inf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes inf-pop { 0% { transform: scale(.92); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes inf-spin { to { transform: rotate(360deg); } }
@keyframes inf-twinkle { 0%, 100% { opacity: .25; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* svg animation helpers (each animated svg group rotates/moves around its own box) */
.inf-spin, .inf-orbit, .inf-keep, .inf-wobble, .inf-twinkle, .inf-shackle, .inf-stamp, .inf-sheet, .inf-keyhole { transform-box: fill-box; transform-origin: center; }
.inf-spin { animation: inf-spin 90s linear infinite; }
.inf-twinkle { animation: inf-twinkle 3.6s var(--ev-e-in-out) infinite; }
.inf-twinkle--b { animation-delay: 1.6s; }
.inf-fade { opacity: 0; animation: inf-fade .7s var(--ev-e-out) .5s forwards; }
.ev-draw.is-in .inf-fade { animation-play-state: running; }
.inf-scene svg { filter: drop-shadow(0 18px 24px rgba(11, 61, 57, .10)); }

/* ── Legal pages ──────────────────────────────────────────────────────── */

.inf-hero .ev-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.inf-hero-copy { display: grid; justify-items: start; }
.inf-hero .ev-h1 { margin: 22px 0 16px; font-size: clamp(2rem, 1rem + 3.4vw, 3.5rem); }
.inf-hero .ev-h1 [data-inf-t] { display: inline; }
.inf-hero .ev-h1[data-lang="ru"] { font-size: clamp(1.55rem, .9rem + 2.5vw, 2.7rem); }
.inf-hero .ev-h1[data-lang="ru"] .ev-mark { white-space: normal; }
.inf-stampline { margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inf-hero .ev-badge { font-size: .8rem; padding: 7px 13px; }
/* the site's "online now" figure, small, in the compact hero */
.inf-live { padding: 6px 13px 6px 10px; gap: 8px; font-size: .8rem; box-shadow: inset 0 0 0 1px var(--ev-line); }
.inf-live b { font-size: .88rem; min-width: 0; }
.inf-tabs { margin-top: 2px; }
.inf-scene { max-width: 440px; }

/* animated key parts of the scenes */
.inf-orbit { animation: inf-spin 46s linear infinite; transform-origin: 220px 172px; transform-box: view-box; }
.inf-keep { animation: inf-spin 46s linear infinite reverse; }
.inf-scanline { animation: inf-scan 5.2s var(--ev-e-in-out) 1.4s infinite; }
@keyframes inf-scan { 0% { transform: translateY(-40px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(260px); opacity: 0; } }
.inf-shackle { animation: inf-shackle 7s var(--ev-e-in-out) 2.4s infinite; transform-origin: 50% 100%; }
@keyframes inf-shackle { 0%, 40% { transform: translateY(0); } 48%, 62% { transform: translateY(-9px) rotate(-9deg); } 70% { transform: translateY(1.5px); } 76%, 100% { transform: translateY(0); } }
.inf-keyhole { animation: inf-pulse 7s var(--ev-e-in-out) 2.4s infinite; }
@keyframes inf-pulse { 0%, 66% { transform: scale(1); } 72% { transform: scale(1.35); } 80%, 100% { transform: scale(1); } }
.inf-stamp { animation: inf-stamp 7s var(--ev-e-out) 1.6s infinite; opacity: 0; }
@keyframes inf-stamp { 0%, 6% { opacity: 0; transform: scale(1.9) rotate(-18deg); } 14% { opacity: 1; transform: scale(.92) rotate(-8deg); } 18% { transform: scale(1.04) rotate(-8deg); } 22%, 88% { opacity: 1; transform: scale(1) rotate(-8deg); } 96%, 100% { opacity: 0; transform: scale(1) rotate(-8deg); } }
.inf-sign { stroke-dasharray: 220; stroke-dashoffset: 220; animation: inf-sign 7s var(--ev-e-in-out) 1.6s infinite; }
@keyframes inf-sign { 0% { stroke-dashoffset: 220; opacity: 1; } 24%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.inf-sheet { animation: inf-sheet-in .9s var(--ev-e-spring) .1s both; }
@keyframes inf-sheet-in { from { opacity: 0; transform: translateY(14px) rotate(-3deg); } to { opacity: 1; transform: none; } }
.inf-wobble { animation: inf-wobble 6s var(--ev-e-in-out) infinite; }
@keyframes inf-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } }
.inf-crumb { animation: inf-crumb 4.4s var(--ev-e-out) infinite; opacity: 0; }
.inf-crumb--b { animation-delay: .8s; } .inf-crumb--c { animation-delay: 1.6s; } .inf-crumb--d { animation-delay: 2.4s; } .inf-crumb--e { animation-delay: 3.2s; }
@keyframes inf-crumb { 0% { opacity: 0; transform: translate(0, -6px); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, 86px); } }
.inf-chips circle { transform-box: fill-box; transform-origin: center; }

/* body: article + contents */
.inf-body { padding-top: clamp(40px, 5vw, 64px); }
.inf-legal .lang-content:not(.active) { display: none; }
.inf-legal .lang-content.active { animation: inf-fade .5s var(--ev-e-out); }
.inf-legal .ev-article { grid-template-columns: minmax(0, 70ch) 260px; justify-content: center; }
.inf-legal .ev-prose { max-width: none; }
.inf-legal .ev-prose h2 { display: flex; align-items: center; gap: 14px; margin-top: 2.9em; font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); }
.inf-legal .ev-prose h2::before { content: ""; position: absolute; left: 0; right: 0; top: -1.45em; border-top: 1px dashed var(--ev-line); }
.inf-legal .ev-prose .inf-meta + h2 { margin-top: .6em; }
.inf-legal .ev-prose .inf-meta + h2::before { display: none; }
.inf-hico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--ev-mist); box-shadow: inset 0 0 0 1px var(--ev-line); color: var(--ev-lagoon); transition: transform .5s var(--ev-e-spring), background .3s, box-shadow .3s; }
.inf-hico svg { width: 24px; height: 24px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ev-prose h2:hover .inf-hico { transform: rotate(-7deg) scale(1.1); background: #dff6f2; box-shadow: inset 0 0 0 1px var(--ev-tif); }
.inf-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 1.7em; padding: 11px 15px; border-radius: 12px; background: var(--ev-mist); box-shadow: inset 0 0 0 1px var(--ev-line); color: var(--ev-tif-text); font: 500 .8rem/1.4 var(--ev-f-mono); letter-spacing: .02em; }
.inf-meta svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ev-prose .ev-check { padding-left: 0; }
.ev-prose .ev-check > li { margin: 0; }
.inf-legal .ev-prose p { margin-bottom: 1em; }
.inf-legal .ev-callout p { margin: 0; }
.inf-legal .ev-callout { margin: 1.3em 0; }
.inf-legal .ev-callout > div { min-width: 0; }

/* key phrase: an amber highlighter pen draws under it when it scrolls into view */
mark.inf-hl { color: var(--ev-ink); font-weight: 600; padding: 0 .12em; margin: 0 -.12em; background: linear-gradient(transparent 55%, rgba(255, 190, 26, .5) 55%, rgba(255, 190, 26, .5) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; transition: background-size .9s var(--ev-e-out) .25s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.inf-hl.is-in { background-size: 100% 100%; }
.inf-key { color: var(--ev-ink); font-weight: 600; }
.inf-key::marker { color: var(--ev-amber); }

/* plain lists: tiffany squares that pop in */
.ev-prose ul.inf-list { list-style: none; padding-left: 0; display: grid; gap: 10px; }
.ev-prose ul.inf-list > li { position: relative; margin: 0; padding: 12px 14px 12px 40px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--ev-line); transition: box-shadow .3s, transform .35s var(--ev-e-out), background .3s; }
.ev-prose ul.inf-list > li::before { content: ""; position: absolute; left: 15px; top: 1.2em; width: 9px; height: 9px; border-radius: 3px; background: var(--ev-tif-2); transform: rotate(45deg); transition: transform .4s var(--ev-e-spring), background .3s; }
.ev-prose ul.inf-list > li:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1px var(--ev-tif); background: var(--ev-mist); }
.ev-prose ul.inf-list > li:hover::before { transform: rotate(225deg) scale(1.25); background: var(--ev-amber); }
/* numbered rules (terms: listing rules) */
.ev-prose ul.inf-rules { list-style: none; padding-left: 0; display: grid; gap: 10px; counter-reset: rule; }
.ev-prose ul.inf-rules > li { position: relative; margin: 0; padding: 14px 16px 14px 62px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--ev-line); counter-increment: rule; transition: box-shadow .3s, transform .35s var(--ev-e-out); }
.ev-prose ul.inf-rules > li::before { content: counter(rule, decimal-leading-zero); position: absolute; left: 14px; top: 13px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--ev-mist-2); color: var(--ev-tif-text); font: 600 .78rem/1 var(--ev-f-mono); transition: background .3s, color .3s, transform .4s var(--ev-e-spring); }
.ev-prose ul.inf-rules > li:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1px var(--ev-tif); }
.ev-prose ul.inf-rules > li:hover::before { background: var(--ev-lagoon); color: var(--ev-tif); transform: rotate(-6deg) scale(1.06); }
.ev-prose ul.inf-rules > li.inf-key { box-shadow: inset 0 0 0 1.5px var(--ev-amber); background: var(--ev-amber-soft); }
.ev-prose ul.inf-rules > li.inf-key::before { background: var(--ev-amber); color: var(--ev-lagoon); }
/* browser links as chips */
.ev-prose ul.inf-links { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ev-prose ul.inf-links > li { margin: 0; }
.ev-prose ul.inf-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ev-line); color: var(--ev-ink); font-weight: 600; text-decoration: none; transition: transform .3s var(--ev-e-spring), box-shadow .25s, background .25s; }
.ev-prose ul.inf-links a::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--ev-tif-text); border-right: 2px solid var(--ev-tif-text); transform: rotate(45deg); transition: transform .3s var(--ev-e-spring); }
.ev-prose ul.inf-links a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--ev-tif-2); background: var(--ev-mist); }
.ev-prose ul.inf-links a:hover::after { transform: translateX(3px) rotate(45deg); }
.ev-prose li strong { color: var(--ev-ink); }

/* cookie table: filterable, turns into cards on phones */
.inf-ck-filter { margin: 18px 0 14px; }
.inf-ck-filter .ev-chip b { font: 600 .72rem/1 var(--ev-f-mono); padding: 3px 6px; border-radius: 6px; background: rgba(10, 22, 40, .07); }
.inf-ck-filter .ev-chip[aria-pressed="true"] b { background: rgba(255, 255, 255, .16); }
.inf-table { margin: 0 0 1.4em; border-radius: var(--ev-r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--ev-line); overflow: hidden; }
.inf-table table { margin: 0; width: 100%; border-collapse: collapse; font-size: .94rem; }
.inf-table th { background: var(--ev-mist); border-bottom: 1px solid var(--ev-line); padding: 12px 16px; }
.inf-table td { padding: 15px 16px; border-bottom: 1px solid var(--ev-line); vertical-align: middle; line-height: 1.45; }
.inf-table tr:last-child td { border-bottom: 0; }
.inf-table tbody tr { transition: background .25s; }
.inf-table tbody tr:hover { background: var(--ev-mist); }
.inf-table tbody tr.is-off { display: none; }
.inf-table tbody tr.is-in-row { animation: inf-fade .45s var(--ev-e-out); }
.inf-table .ck-name { font: 600 .86rem/1.3 var(--ev-f-mono); color: var(--ev-lagoon); white-space: nowrap; }
.inf-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font: 600 .74rem/1 var(--ev-f-mono); letter-spacing: .03em; white-space: nowrap; }
.inf-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.inf-pill--essential { background: #e3f6ec; color: #17704a; }
.inf-pill--functional { background: var(--ev-mist-2); color: var(--ev-tif-text); }
.inf-pill--analytics { background: var(--ev-amber-soft); color: #7a5600; }

/* related documents */
.inf-related .ev-card { padding: 22px 24px; }
.inf-related .ev-card .ev-ico { margin-bottom: 14px; }
.inf-related .ev-h3 { margin: 0; }

/* ── legal: tablet and phone ──────────────────────────────────────────── */

@media (max-width: 1020px) {
  .inf-hero .ev-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .inf-scene { max-width: 300px; justify-self: start; margin-top: 4px; }
  .inf-legal .ev-article { grid-template-columns: minmax(0, 1fr); }
  .inf-legal .ev-article > .ev-toc { order: -1; position: sticky; top: var(--inf-head); z-index: 30; margin: 0 calc(var(--ev-gut) * -1) 18px; padding: 10px var(--ev-gut) 0; border-radius: 0; background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--ev-line), 0 10px 18px -14px rgba(10, 22, 40, .25); }
  .inf-legal .ev-toc .ev-mono { display: none; }
  .inf-legal .ev-toc ol { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 9px; scroll-behavior: smooth; }
  .inf-legal .ev-toc ol::-webkit-scrollbar { display: none; }
  .inf-legal .ev-toc li { flex: none; }
  .inf-legal .ev-toc a { white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--ev-mist); box-shadow: inset 0 0 0 1px var(--ev-line); font-size: .86rem; }
  .inf-legal .ev-toc a::before { display: none; }
  .inf-legal .ev-toc a.is-active { background: var(--ev-lagoon); color: #fff; box-shadow: none; }
  .inf-legal .ev-toc-meter { margin: 0 calc(var(--ev-gut) * -1); border-radius: 0; height: 3px; }
  .inf-legal .ev-prose h2 { scroll-margin-top: 132px; }
}
@media (max-width: 760px) {
  .inf-hero .ev-h1 { font-size: clamp(1.7rem, 1.2rem + 3.4vw, 2.2rem); }
  .inf-hero .ev-h1[data-lang="ru"] { font-size: clamp(1.4rem, .9rem + 2.6vw, 1.75rem); }
  .inf-scene { max-width: 240px; }
  .inf-hico { width: 40px; height: 40px; border-radius: 12px; }
  .inf-legal .ev-prose h2 { gap: 12px; margin-top: 2.5em; }
  .inf-table { background: none; box-shadow: none; overflow: visible; }
  .inf-table table, .inf-table tbody, .inf-table tr, .inf-table td { display: block; width: 100%; }
  .inf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .inf-table tbody { display: grid; gap: 12px; }
  .inf-table tbody tr { padding: 14px 16px; border-radius: var(--ev-r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--ev-line); }
  .inf-table tbody tr.is-off { display: none; }
  .inf-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border: 0; text-align: right; }
  .inf-table td::before { content: attr(data-label); flex: none; color: var(--ev-ink-3); font: 500 .68rem/1.4 var(--ev-f-mono); letter-spacing: .06em; text-transform: uppercase; text-align: left; }
  .inf-table td.ck-name { display: block; padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px dashed var(--ev-line); text-align: left; font-size: .98rem; }
  .inf-table td.ck-name::before { display: none; }
}

/* ── Contact ──────────────────────────────────────────────────────────── */

.inf-chero .ev-hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
.inf-chero-copy { display: grid; justify-items: start; min-width: 0; }
.inf-chero .ev-h1 { margin: 20px 0 14px; }
/* the translated title carries an inline tiffany that is too pale on white: restyle the word */
.inf-chero .ev-h1 span { color: var(--ev-tif-text) !important; background: linear-gradient(transparent 64%, rgba(255, 190, 26, .5) 64%, rgba(255, 190, 26, .5) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; animation: inf-hl 1s var(--ev-e-out) 1s forwards; }
@keyframes inf-hl { to { background-size: 100% 100%; } }
.inf-rise { animation: inf-rise .9s var(--ev-e-out) .1s both; }
@keyframes inf-rise { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
.inf-chero .ev-lead { margin-bottom: 24px; }

.inf-call { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 540px; margin: 0 0 14px; padding: 14px 14px 14px 14px; border-radius: 22px; background: #fff; box-shadow: var(--ev-shadow-2), 0 0 0 1px var(--ev-line); color: inherit; text-decoration: none; transition: transform .45s var(--ev-e-out), box-shadow .45s var(--ev-e-out); }
.inf-call:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--ev-tif), var(--ev-shadow-2); }
.inf-call-ico { position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: var(--ev-lagoon); color: var(--ev-tif); transition: transform .5s var(--ev-e-spring); }
.inf-call:hover .inf-call-ico { transform: rotate(-8deg) scale(1.06); }
.inf-call-ico svg { width: 28px; height: 28px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inf-call-ico .inf-ring { opacity: 0; transform-box: fill-box; transform-origin: 0% 100%; animation: inf-wave 2.6s var(--ev-e-out) infinite; }
.inf-call-ico .inf-ring--b { animation-delay: .3s; }
.inf-call-txt { display: grid; gap: 5px; min-width: 0; flex: 1; }
.inf-call-txt small { font: 500 .7rem/1.2 var(--ev-f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ev-tif-text); }
.inf-call-txt b { font: 700 clamp(1.1rem, .95rem + .9vw, 1.5rem)/1.15 var(--ev-f-display); letter-spacing: -.03em; color: var(--ev-ink); white-space: nowrap; }
.inf-call-go { flex: none; pointer-events: none; }
.inf-call:hover .inf-call-go { background: #8fe0d8; }
.inf-call:hover .inf-call-go .ev-arrow { transform: translateX(4px); }
.inf-hero-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* scene */
.inf-scene--contact { max-width: 500px; }
.inf-phone { transform-box: fill-box; transform-origin: 50% 90%; animation: inf-phone-shake 8s var(--ev-e-in-out) 1.8s infinite; }
@keyframes inf-phone-shake { 0%, 100% { transform: rotate(0); } 3% { transform: rotate(-3deg); } 6% { transform: rotate(3deg); } 9% { transform: rotate(-2deg); } 12% { transform: rotate(0); } }
.inf-rings .inf-ring { opacity: 0; animation: inf-wave 2.6s var(--ev-e-out) 1.8s infinite; }
.inf-rings .inf-ring--b { animation-delay: 2.05s; } .inf-rings .inf-ring--c { animation-delay: 2.3s; }
@keyframes inf-wave { 0% { opacity: 0; transform: translateX(-6px); } 25% { opacity: 1; } 70%, 100% { opacity: 0; transform: translateX(7px); } }
.inf-ping { transform-box: fill-box; transform-origin: center; animation: inf-ping 2.2s var(--ev-e-out) 1.8s infinite; }
@keyframes inf-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.inf-accept { transform-box: fill-box; transform-origin: center; animation: inf-accept 2.2s var(--ev-e-in-out) 1.8s infinite; }
@keyframes inf-accept { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.inf-dot { transform-box: fill-box; transform-origin: center; animation: inf-dotjump 1.3s var(--ev-e-in-out) 1.8s infinite; }
.inf-dot--b { animation-delay: 2.0s; } .inf-dot--c { animation-delay: 2.2s; }
@keyframes inf-dotjump { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.inf-flap { transform-box: fill-box; transform-origin: 50% 0; animation: inf-flap 8s var(--ev-e-in-out) 1.8s infinite; }
@keyframes inf-flap { 0%, 10% { transform: scaleY(1); } 22%, 76% { transform: scaleY(-1); } 88%, 100% { transform: scaleY(1); } }
.inf-letter { animation: inf-letter 8s var(--ev-e-in-out) 1.8s infinite; }
@keyframes inf-letter { 0%, 24% { transform: translateY(0); } 42%, 70% { transform: translateY(-122px); } 84%, 100% { transform: translateY(0); } }
.inf-sent { transform-box: fill-box; transform-origin: center; opacity: 0; animation: inf-sent 8s var(--ev-e-out) 1.8s infinite; }
@keyframes inf-sent { 0%, 38% { opacity: 0; transform: scale(0); } 46% { opacity: 1; transform: scale(1.18); } 52%, 78% { opacity: 1; transform: scale(1); } 86%, 100% { opacity: 0; transform: scale(.6); } }
.inf-plane { opacity: 0; animation: inf-plane 8s linear 1.8s infinite; }
@keyframes inf-plane { 0% { opacity: 0; transform: translate(176px, 146px) rotate(-30deg) scale(.6); } 4% { opacity: 1; } 10% { transform: translate(236px, 90px) rotate(-14deg) scale(1); } 18% { opacity: 1; transform: translate(316px, 112px) rotate(24deg) scale(.9); } 22%, 100% { opacity: 0; transform: translate(330px, 150px) rotate(40deg) scale(.3); } }
.inf-chero:has(.inf-call:hover) .inf-phone { animation-duration: 1.2s; animation-delay: 0s; }
.inf-chero:has(.inf-call:hover) .inf-rings .inf-ring { animation-duration: 1.1s; animation-delay: 0s; }
.inf-chero:has(.inf-call:hover) .inf-rings .inf-ring--b { animation-delay: .15s; } .inf-chero:has(.inf-call:hover) .inf-rings .inf-ring--c { animation-delay: .3s; }

/* hub */
.inf-hub-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.inf-channels .ev-sec-head { margin-bottom: 26px; }
.inf-channels .ev-sec-head .ev-h2 { margin-top: 0; }
.inf-chan-list { display: grid; gap: 14px; }
.inf-chan { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; }
.inf-chan .ev-ico { margin: 0; }
.inf-chan-txt { min-width: 0; flex: 1; }
.inf-lbl { margin-bottom: 5px; font: 500 .7rem/1.3 var(--ev-f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ev-ink-3); }
.inf-val { font-weight: 600; color: var(--ev-ink); line-height: 1.5; }
.inf-chan .inf-val a { color: var(--ev-tif-text); }
.inf-chan--phone .inf-lbl { color: var(--ev-tif); }
.inf-tel { display: block; margin: 2px 0 4px; font: 700 clamp(1.12rem, .9rem + 1.2vw, 1.75rem)/1.2 var(--ev-f-display); letter-spacing: -.03em; color: #fff; text-decoration: none; white-space: nowrap; transition: color .25s; }
.inf-tel:hover { color: var(--ev-tif); }
.inf-chan-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.inf-chan--phone .ev-copy { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(129, 216, 208, .4); }
.inf-chan--phone .ev-copy:hover { box-shadow: inset 0 0 0 1.5px var(--ev-tif); }
.inf-chan--fact { padding: 16px 18px; align-items: center; background: #fff; box-shadow: 0 0 0 1px var(--ev-line); }
.inf-form-card:has(#cx-form[style*="none"]) .cx-topics { display: none; }
.inf-chan--fact .inf-val { font-size: .96rem; }
.inf-chan--phone { box-shadow: 0 18px 40px -18px rgba(11, 61, 57, .6); }
.inf-chan--phone .ev-ico svg path { stroke: var(--ev-tif); }

/* form */
.inf-form-card { padding: clamp(22px, 3.2vw, 38px); }
.inf-form-head { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.inf-form-head .ev-ico { margin: 0; }
.cx-form-title { font: 700 1.25rem/1.2 var(--ev-f-display); letter-spacing: -.02em; color: var(--ev-ink); }
.cx-form-sub { margin-top: 4px; font-size: .92rem; line-height: 1.45; color: var(--ev-ink-3); }
.cx-topics { margin-bottom: 22px; }
.cx-topic { font-size: .86rem; }
.cx-topic.active { animation: inf-pop .4s var(--ev-e-spring); }
.cx-frow { margin: 0; }
.cx-fg { margin: 0; }
.inf-contact .ev-field label.cx-lbl { position: static; display: block; margin: 0 0 7px; transform: none; pointer-events: auto; font: 500 .72rem/1.2 var(--ev-f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ev-ink-2); }
.inf-contact .ev-field:focus-within label.cx-lbl { color: var(--ev-tif-text); }
.inf-contact .ev-field .cx-fi { padding: 13px 44px 13px 16px; min-height: 50px; }
.inf-contact .ev-field textarea.cx-fi { min-height: 150px; padding-top: 14px; }
.inf-contact .cx-fi::placeholder { color: #8b98a5; }
.inf-inp { position: relative; }
.inf-inp .ev-ok { top: 14px; right: 14px; }
.cx-chars { margin-top: 7px; text-align: right; font: 500 .72rem/1 var(--ev-f-mono); color: var(--ev-ink-3); }
.cx-chars.warn { color: #a45a00; }
.cx-submit { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ev-tif); color: var(--ev-lagoon); font: 700 1.02rem/1 var(--ev-f-body); cursor: pointer; box-shadow: 0 6px 18px -6px rgba(91, 189, 183, .7); transition: transform .3s var(--ev-e-out), box-shadow .3s, background .3s; }
.cx-submit:hover { background: #8fe0d8; transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(91, 189, 183, .85); }
.cx-submit:active { transform: scale(.98); }
.cx-submit:disabled { opacity: .7; cursor: progress; transform: none; }
.cx-error { display: none; padding: 14px 16px; border-radius: 14px; background: #fff3f3; box-shadow: inset 0 0 0 1.5px #f1b8b8; color: #8e2424; font-size: .92rem; line-height: 1.55; }
.cx-error a.cx-mail-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 16px; border-radius: 999px; background: #8e2424; color: #fff; font-weight: 700; font-size: .88rem; text-decoration: none; transition: transform .3s var(--ev-e-spring); }
.cx-error a.cx-mail-btn:hover { transform: translateY(-2px); }
.cx-success { display: none; padding: 26px 0 10px; text-align: center; }
.cx-success-ico { width: 104px; height: 104px; margin: 0 auto 14px; }
.cx-success-ico svg { width: 100%; height: 100%; overflow: visible; stroke: var(--ev-tif-2); stroke-width: 3.5; }
.cx-success-ico .s-ring { stroke-dasharray: 240; stroke-dashoffset: 240; animation: ev-draw .8s var(--ev-e-in-out) forwards; }
.cx-success-ico .s-check { stroke: var(--ev-ok); stroke-width: 6; stroke-dasharray: 64; stroke-dashoffset: 64; animation: ev-draw .5s var(--ev-e-out) .6s forwards; }
.cx-success-ico .s-spark { stroke: var(--ev-amber); stroke-width: 4; opacity: 0; transform-box: view-box; transform-origin: 48px 48px; animation: inf-spark 1.1s var(--ev-e-out) .9s forwards; }
@keyframes inf-spark { 0% { opacity: 0; transform: scale(.55); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
.cx-success-head { margin-bottom: 8px; font: 700 1.35rem/1.2 var(--ev-f-display); letter-spacing: -.02em; color: var(--ev-ink); }
.cx-success-body { color: var(--ev-ink-2); line-height: 1.6; }
.cx-success-body strong { color: var(--ev-tif-text); }
.inf-trust .ev-card--dark .ev-h3 { color: #fff; }
.inf-faq-cta { margin-top: 22px; }
.inf-faq .ev-sec-head { margin-bottom: 0; }

@media (max-width: 1020px) {
  .inf-chero .ev-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .inf-scene--contact { max-width: 380px; justify-self: start; }
  .inf-hub-grid { grid-template-columns: minmax(0, 1fr); }
  .inf-faq .ev-sec-head { margin-bottom: 8px; }
}
@media (max-width: 560px) {
  .inf-call { gap: 14px; padding: 12px; }
  .inf-call-go { display: none; }
  .inf-call-ico { width: 52px; height: 52px; }
  .inf-call-txt b { font-size: 1.2rem; }
  .inf-scene--contact { max-width: 320px; }
  .inf-chan { padding: 18px; gap: 14px; }
}

/* ── Standalone top bar (404, bina-az-alternativi) ────────────────────── */

.inf-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: var(--ev-wrap); margin: 0 auto; padding: 18px var(--ev-gut); }
.inf-bar--abs { position: absolute; left: 0; right: 0; top: 0; }
.inf-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ev-lagoon); text-decoration: none; font: 800 1.2rem/1 var(--ev-f-display); letter-spacing: -.03em; }
.inf-logo b { color: var(--ev-tif-2); font-weight: 800; }
.inf-logo-mark { width: 34px; height: 34px; color: var(--ev-tif-text); transition: transform .45s var(--ev-e-spring); }
.inf-logo:hover .inf-logo-mark { transform: rotate(-7deg) scale(1.1); }
.inf-bar .ev-live { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
  .inf-bar .ev-live { padding: 6px 12px 6px 10px; gap: 8px; font-size: .8rem; }
  .inf-bar .ev-live b { min-width: 0; font-size: .92rem; }
  .inf-logo { font-size: 1.1rem; }
}

/* ── 404: the lost-key house ──────────────────────────────────────────── */

.inf-404 { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff 0%, var(--ev-mist) 100%); }
.inf-404 > * { position: relative; z-index: 1; }
.inf-404 > .inf-bar { z-index: 5; }
.inf-404-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--ev-gut) 56px; }
.inf-404-scene { position: relative; width: min(100%, 720px); margin-bottom: 4px; }
.inf-404-scene svg { position: relative; z-index: 1; filter: drop-shadow(0 18px 22px rgba(11, 61, 57, .1)); }
.inf-404-num { position: absolute; z-index: 0; left: 50%; top: -1%; display: block; font: 800 clamp(7.5rem, 31vw, 19.5rem)/1 var(--ev-f-display); letter-spacing: -.05em; color: #d5f5f2; -webkit-text-stroke: 2px #b6e6e0; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; user-select: none; transform: translate(calc(-50% + var(--px, 0) * -16px), calc(var(--py, 0) * -9px)); transition: transform .35s var(--ev-e-out); }
.inf-404-title { margin: 6px 0 12px; font: 700 clamp(1.7rem, 1.1rem + 2.4vw, 2.6rem)/1.1 var(--ev-f-display); letter-spacing: -.035em; color: var(--ev-ink); text-wrap: balance; }
.inf-404-sub { max-width: 30em; margin-bottom: 26px; color: var(--ev-ink-2); font-size: 1.06rem; line-height: 1.6; }
.inf-404-acts { justify-content: center; }
.inf-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.inf-404-links .ev-chip { padding: 10px 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ev-line); }
.inf-404-links .ev-chip svg { width: 17px; height: 17px; color: var(--ev-tif-text); transition: transform .35s var(--ev-e-spring); }
.inf-404-links .ev-chip:hover svg { transform: rotate(-10deg) scale(1.15); }
.inf-404-alt { margin-top: 24px; font: 500 .78rem/1.4 var(--ev-f-mono); letter-spacing: .04em; color: var(--ev-ink-3); }
.inf-404-alt i { margin: 0 10px; font-style: normal; }

.inf-door { transform-box: view-box; transform-origin: 262px 253px; animation: inf-door 7s var(--ev-e-in-out) 1.8s infinite; }
@keyframes inf-door { 0%, 16% { transform: scaleX(1) skewY(0); } 28% { transform: scaleX(.16) skewY(-7deg); } 33% { transform: scaleX(.26) skewY(-6deg); } 38%, 56% { transform: scaleX(.18) skewY(-7deg); } 68% { transform: scaleX(1.03) skewY(1.5deg); } 74%, 100% { transform: scaleX(1) skewY(0); } }
@keyframes inf-door-open { from { transform: scaleX(1) skewY(0); } to { transform: scaleX(.18) skewY(-7deg); } }
.inf-light { opacity: 0; animation: inf-light 7s ease-in-out 1.8s infinite; }
@keyframes inf-light { 0%, 22% { opacity: 0; } 32%, 56% { opacity: 1; } 68%, 100% { opacity: 0; } }
.inf-404-scene:hover .inf-door { animation: inf-door-open .6s var(--ev-e-out) forwards; }
.inf-404-scene:hover .inf-light { animation: none; opacity: 1; }
.inf-key-in { transform-box: fill-box; transform-origin: 17% 49%; animation: inf-key 4.6s var(--ev-e-in-out) 2.2s infinite; }
@keyframes inf-key { 0%, 52%, 100% { transform: rotate(0); } 56% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } 64% { transform: rotate(-5deg); } 68% { transform: rotate(3deg); } 72% { transform: rotate(0); } }
.inf-key:hover .inf-key-in { animation: inf-jingle .5s ease-in-out infinite; }
@keyframes inf-jingle { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.inf-puff { opacity: 0; transform-box: fill-box; transform-origin: center; animation: inf-puff 3.6s ease-out infinite; }
.inf-puff--b { animation-delay: 1.2s; } .inf-puff--c { animation-delay: 2.4s; }
@keyframes inf-puff { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(16px, -48px) scale(2.3); } }
.inf-win { animation: inf-flick 4.4s ease-in-out infinite; }
.inf-win--b { animation-delay: 1.5s; }
@keyframes inf-flick { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.inf-float--b { animation-delay: -2s; } .inf-float--c { animation-delay: -3.4s; }

@media (max-width: 560px) {
  .inf-404-main { padding-bottom: 36px; }
  .inf-404-num { top: 2%; }
  .inf-bar { padding-top: 14px; padding-bottom: 14px; }
}

/* ── bina-az-alternativi: comparison scene + animated cards ───────────── */

.inf-bhero .ev-hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
.inf-bhero { padding-top: clamp(104px, 11vw, 132px); }
.inf-bhero-copy { min-width: 0; }
.inf-nb { white-space: nowrap; }
.inf-bhero .ev-h1 { font-size: clamp(2rem, 1rem + 3.2vw, 3.25rem); }
.inf-bhero .ev-lead { max-width: 34em; }
.inf-scene--bina { max-width: 540px; }
.inf-ghost { transform-box: fill-box; transform-origin: center; animation: inf-breathe 7s var(--ev-e-in-out) infinite; }
.inf-ghost--2 { animation-delay: -2.3s; } .inf-ghost--3 { animation-delay: -4.6s; }
@keyframes inf-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.inf-front { transform-box: fill-box; transform-origin: 50% 60%; animation: inf-front 10s var(--ev-e-in-out) 2s infinite; }
@keyframes inf-front { 0%, 76% { transform: scale(1); } 84%, 96% { transform: scale(1.04); } 100% { transform: scale(1); } }
.inf-sweep { animation: inf-sweep 10s var(--ev-e-in-out) 2s infinite; }
@keyframes inf-sweep { 0%, 74% { transform: translateX(0); } 94%, 100% { transform: translateX(440px); } }
.inf-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: inf-pin 3.6s var(--ev-e-out) 2s infinite; }
@keyframes inf-pin { 0% { transform: translateY(-26px); opacity: 0; } 14% { transform: translateY(0); opacity: 1; } 22% { transform: translateY(-5px); } 30%, 100% { transform: translateY(0); opacity: 1; } }
.inf-pinring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: inf-pinring 3.6s var(--ev-e-out) 2s infinite; }
@keyframes inf-pinring { 0%, 14% { opacity: 0; transform: scale(.4); } 24% { opacity: .9; } 70%, 100% { opacity: 0; transform: scale(2.2); } }
.inf-tick { transform-box: fill-box; transform-origin: center; animation: inf-tick 10s var(--ev-e-out) 2s infinite; }
.inf-tick--2 { animation-delay: 2.25s; } .inf-tick--3 { animation-delay: 2.5s; }
@keyframes inf-tick { 0%, 4% { transform: scale(1); } 8% { transform: scale(1.35); } 12%, 100% { transform: scale(1); } }
.inf-lens { opacity: 0; animation: inf-lens 10s var(--ev-e-in-out) 2s infinite; }
@keyframes inf-lens {
  0% { opacity: 0; transform: translate(70px, 220px) scale(.9); }
  6% { opacity: 1; }
  14%, 24% { transform: translate(104px, 176px) scale(1); }
  36%, 44% { transform: translate(262px, 92px) scale(1); }
  56%, 66% { transform: translate(422px, 168px) scale(1); }
  82%, 94% { opacity: 1; transform: translate(300px, 290px) scale(1.12); }
  100% { opacity: 0; transform: translate(300px, 300px) scale(1); }
}
.inf-found { transform-box: fill-box; transform-origin: center; opacity: 0; animation: inf-found 10s var(--ev-e-out) 2s infinite; }
@keyframes inf-found { 0%, 80% { opacity: 0; transform: scale(0) rotate(-30deg); } 86% { opacity: 1; transform: scale(1.2) rotate(0); } 90%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }

.inf-why { display: flex; flex-direction: column; padding: 0 0 22px; }
.inf-why .ev-h3, .inf-why p { padding: 0 22px; }
.inf-why .ev-h3 { margin-top: 4px; }
.inf-mini { display: grid; place-items: center; margin: 0 0 18px; padding: 14px 10px 8px; background: linear-gradient(180deg, var(--ev-mist) 0%, #fff 100%); box-shadow: inset 0 -1px 0 var(--ev-line); }
.inf-mini svg { width: 100%; max-width: 220px; height: auto; overflow: visible; }
.inf-m-pop { transform-box: fill-box; transform-origin: 50% 100%; animation: inf-m-pop 3.6s var(--ev-e-out) infinite; }
.inf-m-pop--b { animation-delay: .25s; } .inf-m-pop--c { animation-delay: .5s; }
@keyframes inf-m-pop { 0% { transform: scale(.4, .2); opacity: 0; } 12% { transform: scale(1.06); opacity: 1; } 20%, 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.inf-m-speed { animation: inf-m-speed 1.8s var(--ev-e-out) infinite; }
@keyframes inf-m-speed { 0% { transform: translateX(-14px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(14px); opacity: 0; } }
.inf-m-stamp { transform-box: fill-box; transform-origin: center; animation: inf-m-stamp 4s var(--ev-e-out) infinite; }
@keyframes inf-m-stamp { 0%, 10% { opacity: 0; transform: scale(2) rotate(-24deg); } 22% { opacity: 1; transform: scale(.9) rotate(-6deg); } 28%, 86% { opacity: 1; transform: scale(1) rotate(0); } 96%, 100% { opacity: 0; transform: scale(1); } }
.inf-m-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: inf-m-pin 3.4s var(--ev-e-out) infinite; }
@keyframes inf-m-pin { 0% { transform: translateY(-30px); opacity: 0; } 16% { transform: translateY(0); opacity: 1; } 24% { transform: translateY(-6px); } 34%, 100% { transform: translateY(0); opacity: 1; } }
.inf-m-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: inf-pinring 3.4s var(--ev-e-out) infinite; }
.inf-m-row { transform-box: fill-box; transform-origin: 50% 100%; animation: inf-m-row 3.4s var(--ev-e-out) infinite; }
.inf-m-row--b { animation-delay: .22s; } .inf-m-row--c { animation-delay: .44s; }
@keyframes inf-m-row { 0% { transform: translateY(14px); opacity: 0; } 18%, 86% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.inf-why:hover .inf-mini { background: linear-gradient(180deg, #dff6f2 0%, #fff 100%); }
.ev-close .inf-ghost-dark { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(129, 216, 208, .45); }
.ev-close .inf-ghost-dark:hover { box-shadow: inset 0 0 0 1.5px var(--ev-tif); }

@media (max-width: 1020px) {
  .inf-bhero .ev-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .inf-scene--bina { max-width: 420px; justify-self: start; }
}
@media (max-width: 560px) {
  .inf-scene--bina { max-width: 340px; }
  .inf-ghost-dark { width: 100%; }
}

/* ── Reduced motion: stop every loop, show every end state ────────────── */

@media (prefers-reduced-motion: reduce) {
  .inf-spin, .inf-orbit, .inf-keep, .inf-shackle, .inf-keyhole, .inf-wobble, .inf-twinkle, .inf-crumb, .inf-sheet,
  .inf-phone, .inf-rings .inf-ring, .inf-ping, .inf-accept, .inf-dot, .inf-plane, .inf-call-ico .inf-ring,
  .inf-key-in, .inf-puff, .inf-win, .inf-ghost, .inf-front, .inf-sweep, .inf-pin, .inf-pinring, .inf-tick, .inf-lens,
  .inf-m-pop, .inf-m-speed, .inf-m-stamp, .inf-m-pin, .inf-m-ring, .inf-m-row, .inf-rise, .cx-topic.active { animation: none !important; }
  /* end states */
  .inf-stamp { animation: none !important; opacity: 1; transform: rotate(-8deg); }
  .inf-sign { animation: none !important; stroke-dashoffset: 0; }
  .inf-fade { animation: none !important; opacity: 1; }
  .inf-scanline, .inf-lens, .inf-pinring, .inf-m-ring, .inf-puff, .inf-crumb, .inf-plane, .inf-rings .inf-ring, .inf-call-ico .inf-ring { opacity: 0; animation: none !important; }
  .inf-flap { animation: none !important; transform: scaleY(-1); }
  .inf-letter { animation: none !important; transform: translateY(-70px); }
  .inf-sent { animation: none !important; opacity: 1; }
  .inf-door { animation: none !important; transform: scaleX(.2) skewY(-7deg); }
  .inf-light { animation: none !important; opacity: 1; }
  .inf-found { animation: none !important; opacity: 0; }
  .inf-chero .ev-h1 span { animation: none !important; background-size: 100% 100%; }
  mark.inf-hl { background-size: 100% 100%; transition: none; }
  .inf-404-num { transition: none; }
}