/* ==========================================================================
   Trembita — enhancement layer (design + motion polish)
   Loaded AFTER each page's own <style>. Page-agnostic rules first, then
   home-page rules scoped to body.tx-home. Transforms/opacity only for motion.
   Never styles .nebo-pill / .nebo-radar (Nebo Pro buttons stay as-is).
   ========================================================================== */

:root {
    --tx-brand-1: #1f7d4f;
    --tx-brand-2: #2EBA7F;
    --tx-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tx-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    /* AA contrast for small "tertiary" copy on white / #f5f5f7 (was #86868b ≈ 3.6:1) */
    --text-tertiary: #6a6a6f;
}

/* ---------- Global: anchors, selection, focus ---------- */
html { scroll-padding-top: 72px; }
::selection { background: rgba(46, 186, 127, 0.28); }

:where(a, button, select, summary, input, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--tx-brand-2);
    outline-offset: 3px;
    border-radius: 8px;
}
:where(a, button, select, summary):focus:not(:focus-visible) { outline: none; }

/* ---------- Reading progress bar ---------- */
.tx-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2000;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--tx-brand-1), var(--tx-brand-2) 60%, #8fe6bd);
    box-shadow: 0 0 10px rgba(46, 186, 127, 0.45);
}
[dir="rtl"] .tx-progress { transform-origin: 100% 50%; }

/* ---------- Glass nav that compacts on scroll ---------- */
nav.apple-nav, nav.nav {
    transition: background-color .35s, border-color .35s, box-shadow .45s var(--tx-ease), height .35s var(--tx-ease);
}
nav.apple-nav.tx-scrolled, nav.nav.tx-scrolled {
    -webkit-backdrop-filter: saturate(190%) blur(24px);
    backdrop-filter: saturate(190%) blur(24px);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.22);
}
nav.apple-nav.tx-scrolled { height: 44px; }
nav.apple-nav .brand img { transition: transform .5s var(--tx-spring); }
nav.apple-nav .brand:hover img { transform: rotate(-8deg) scale(1.06); }
nav.apple-nav .brand:hover { text-decoration: none; }
/* narrow phones: brand + Nebo pill + language + theme don't fit — keep only the logo
   (accessible name stays via the img alt "Trembita") */
@media (max-width: 440px) {
    nav.apple-nav .brand { font-size: 0; gap: 0; flex: none; }
    nav.apple-nav .nav-inner { padding: 0 14px; gap: 8px; }
}
/* scroll-spy: current section link */
nav.apple-nav .links a[aria-current="location"] { opacity: 1; }
nav.apple-nav .links a[aria-current="location"]::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Secondary pages: gentle reveal (only class-gated by JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .tx-io .tx-fade:not(.tx-seen) { opacity: 0; transform: translateY(24px); }
    .tx-io .tx-fade { transition: opacity .8s var(--tx-ease), transform .8s var(--tx-ease); }
}

/* ==========================================================================
   HOME PAGE
   ========================================================================== */

/* Theme tokens for Liquid-Glass-like cards */
.tx-home {
    --tx-card-bg: linear-gradient(180deg, #f8f8fa 0%, #f1f2f4 100%);
    --tx-card-bg-on-grey: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.80) 100%);
    --tx-card-ring: rgba(0, 0, 0, 0.06);
    --tx-card-hi: rgba(255, 255, 255, 0.95);
    --tx-card-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 14px 34px -16px rgba(0,0,0,0.16);
    --tx-card-shadow-hover: 0 2px 6px rgba(0,0,0,0.05), 0 30px 60px -24px rgba(0,0,0,0.25);
    --tx-spot: rgba(46, 186, 127, 0.13);
}
:root[data-theme="dark"] .tx-home {
    --tx-card-bg: linear-gradient(180deg, #1b1b1e 0%, #121214 100%);
    --tx-card-bg-on-grey: linear-gradient(180deg, #1f1f22 0%, #151517 100%);
    --tx-card-ring: rgba(255, 255, 255, 0.08);
    --tx-card-hi: rgba(255, 255, 255, 0.07);
    --tx-card-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 18px 40px -20px rgba(0,0,0,0.8);
    --tx-card-shadow-hover: 0 2px 8px rgba(0,0,0,0.5), 0 34px 70px -28px rgba(0,0,0,0.9);
    --tx-spot: rgba(46, 186, 127, 0.16);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tx-home {
        --tx-card-bg: linear-gradient(180deg, #1b1b1e 0%, #121214 100%);
        --tx-card-bg-on-grey: linear-gradient(180deg, #1f1f22 0%, #151517 100%);
        --tx-card-ring: rgba(255, 255, 255, 0.08);
        --tx-card-hi: rgba(255, 255, 255, 0.07);
        --tx-card-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 18px 40px -20px rgba(0,0,0,0.8);
        --tx-card-shadow-hover: 0 2px 8px rgba(0,0,0,0.5), 0 34px 70px -28px rgba(0,0,0,0.9);
        --tx-spot: rgba(46, 186, 127, 0.16);
    }
}

/* ---------- Hero: animated aurora mesh ---------- */
.tx-home .hero-inner { position: relative; z-index: 1; }
.tx-home .hero h1 .line { display: block; }   /* lets transforms apply to both lines (no visual change) */
.tx-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
.tx-aurora i {
    position: absolute;
    width: 70vmax; height: 70vmax;
    border-radius: 50%;
    will-change: transform;
    animation: txDrift 24s ease-in-out infinite alternate;
}
.tx-aurora i:nth-child(1) {
    left: -22vmax; top: -30vmax;
    background: radial-gradient(closest-side, rgba(46, 186, 127, 0.42), rgba(46, 186, 127, 0) 72%);
}
.tx-aurora i:nth-child(2) {
    right: -26vmax; top: -12vmax;
    background: radial-gradient(closest-side, rgba(31, 125, 79, 0.55), rgba(31, 125, 79, 0) 70%);
    animation-duration: 30s; animation-delay: -8s;
}
.tx-aurora i:nth-child(3) {
    left: 18vmax; bottom: -44vmax;
    background: radial-gradient(closest-side, rgba(160, 235, 200, 0.16), rgba(160, 235, 200, 0) 70%);
    animation-duration: 36s; animation-delay: -14s;
}
@keyframes txDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
    100% { transform: translate3d(-4vmax, 7vmax, 0) scale(0.94); }
}
/* soft vignette + fine light line at the top of the hero */
.tx-aurora::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 70% at 50% 0%, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
}

/* hero logo: glass rim + depth (GSAP adds subtle pointer parallax on desktop) */
.tx-home .hero-logo {
    box-shadow:
        0 22px 60px -10px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.10),
        0 0 80px -10px rgba(46, 186, 127, 0.45);
}

/* ---------- CTA: shimmer + magnetic (translate is set by JS) ---------- */
.tx-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: translate .5s var(--tx-spring), transform .35s var(--tx-ease), box-shadow .35s var(--tx-ease) !important;
}
.tx-cta::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 60%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(46, 186, 127, 0) 20%, rgba(46, 186, 127, 0.28) 50%, rgba(46, 186, 127, 0) 80%, transparent 100%);
    transform: translateX(-120%);
    animation: txShimmer 5.5s var(--tx-ease) 1.8s infinite;
}
@keyframes txShimmer {
    0%        { transform: translateX(-120%); }
    28%, 100% { transform: translateX(260%); }
}
.tx-cta:hover {
    text-decoration: none !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 40px -6px rgba(46, 186, 127, 0.65) !important;
}
.tx-cta:active { transform: scale(0.97); }
.tx-cta svg { transition: transform .45s var(--tx-spring); }
.tx-cta:hover svg { transform: translateY(-1px) scale(1.06); }

/* ---------- Scroll cue ---------- */
.tx-home .scroll-cue { z-index: 1; cursor: pointer; transition: color .3s; }
.tx-home .scroll-cue:hover { color: rgba(255, 255, 255, 0.95); }
.tx-home .scroll-cue::before {
    content: "";
    width: 20px; height: 30px;
    border-radius: 11px;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    background: radial-gradient(circle at 50% 8px, rgba(255,255,255,0.9) 0 2px, transparent 2.5px);
    animation: txWheel 2.2s var(--tx-ease) infinite;
    order: -1;
}
.tx-home .scroll-cue::after { height: 18px; }
@keyframes txWheel {
    0%   { background-position: 50% 0; }
    60%  { background-position: 50% 9px; }
    100% { background-position: 50% 0; }
}

/* ---------- Showcase callouts: smooth cross-fade (was an instant swap) ---------- */
.tx-home .showcase-callout {
    transition: opacity .7s var(--tx-ease), transform .8s var(--tx-ease);
}
.tx-home .showcase-callout:not(.active) { transform: translateY(18px); }
html:not(.js) .tx-home .showcase-callout { transform: none; }
.tx-home .showcase-image-wrap { transition: transform .9s var(--tx-ease); }

/* ---------- Section rhythm & dividers ---------- */
.tx-home section.s:not(.s-grey):not(.s-dark):not(#features) { position: relative; }
.tx-home section.s:not(.s-grey):not(.s-dark):not(#features)::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: min(560px, 72%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(46, 186, 127, 0.38), transparent);
    pointer-events: none;
}
.tx-home section.s-dark { overflow: hidden; }
.tx-home section.s-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 55% at 50% 20%, rgba(46, 186, 127, 0.14), transparent 70%);
    pointer-events: none;
}
.tx-home section.s-dark > .container-narrow { position: relative; }
.tx-home .eyebrow { letter-spacing: 0.1em; }

/* ---------- Liquid-Glass cards ---------- */
.tx-home .feature-grid { gap: 14px; }
@media (min-width: 900px) { .tx-home .feature-grid { gap: 20px; } }

.tx-home .feature-card {
    border-radius: 28px;
    box-shadow: inset 0 1px 0 var(--tx-card-hi), 0 0 0 1px var(--tx-card-ring), var(--tx-card-shadow);
    transition: background-color .3s, transform .6s var(--tx-ease), box-shadow .6s var(--tx-ease);
}
@media (max-width: 480px) { .tx-home .feature-card { border-radius: 24px; min-height: 0; } }
.tx-home .feature-card:not(.green):not(.dark) { background: var(--tx-card-bg); }
.tx-home .s-grey .feature-card:not(.green):not(.dark) { background: var(--tx-card-bg-on-grey); }
.tx-home .feature-card.green {
    background:
        radial-gradient(80% 90% at 85% 0%, rgba(46, 186, 127, 0.35), transparent 60%),
        linear-gradient(160deg, var(--emerald-1), var(--emerald-2));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(255,255,255,0.06), 0 24px 60px -24px rgba(13, 63, 39, 0.7);
}
.tx-home .feature-card > * { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
    .tx-home .feature-card:hover {
        transform: translateY(-6px);
        box-shadow: inset 0 1px 0 var(--tx-card-hi), 0 0 0 1px var(--tx-card-ring), var(--tx-card-shadow-hover);
    }
    .tx-home .feature-card.green:hover {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 1px rgba(255,255,255,0.08), 0 34px 70px -24px rgba(13, 63, 39, 0.8);
    }
    /* pointer-follow spotlight (--mx/--my set by JS) */
    .tx-home .feature-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity .45s var(--tx-ease);
        background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 30%), var(--tx-spot), transparent 62%);
    }
    .tx-home .feature-card.green::after,
    .tx-home .feature-card.dark::after {
        background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.10), transparent 62%);
    }
    .tx-home .feature-card:hover::after { opacity: 1; }
}

/* ---------- Module rows: soft hover plate ---------- */
.tx-home .module-row { position: relative; }
.tx-home .module-row::before {
    content: "";
    position: absolute;
    inset: 0 -16px;
    border-radius: 16px;
    background: rgba(46, 186, 127, 0.06);
    opacity: 0;
    transform: scale(0.985);
    transition: opacity .35s var(--tx-ease), transform .45s var(--tx-ease);
    pointer-events: none;
}
.tx-home .module-row > * { position: relative; }
.tx-home .module-name { transition: color .3s; }
@media (hover: hover) {
    .tx-home .module-row:hover::before { opacity: 1; transform: none; }
    .tx-home .module-row:hover .module-name { color: var(--tx-brand-1); }
    :root[data-theme="dark"] .tx-home .module-row:hover .module-name { color: #5fd6a0; }
}
@media (hover: hover) and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tx-home .module-row:hover .module-name { color: #5fd6a0; }
}

/* ---------- FAQ: smooth open ---------- */
.tx-home details.faq summary { border-radius: 10px; }
.tx-home details.faq[open] .answer { animation: txFadeDown .5s var(--tx-ease); }
@keyframes txFadeDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Contact rows & compliance chips ---------- */
.tx-home .contact-row { transition: background-color .3s; border-radius: 12px; }
.tx-home .compliance-item { transition: color .3s; }
.tx-home .compliance-item:hover { color: var(--text); }

/* ---------- Web-cabinet phone: gentle depth ---------- */
.tx-home #web img[src*="web-cabinet"] { transition: transform .8s var(--tx-ease); }
@media (hover: hover) { .tx-home #web .reveal:hover img[src*="web-cabinet"] { transform: translateY(-4px); } }

/* ---------- Contrast fixes ---------- */
/* footer disclaimer was white-on-light in light theme (inline style) */
.tx-home .tx-disclaimer {
    color: var(--text-secondary) !important;
    border-top-color: var(--hairline) !important;
}
/* green eyebrow (inline #1f7d4f) on dark card in dark theme */
:root[data-theme="dark"] .tx-home #roadmap .feature-eyebrow[style] { color: #5fd6a0 !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tx-home #roadmap .feature-eyebrow[style] { color: #5fd6a0 !important; }
}

/* ---------- Off-screen: pause decorative CSS animations ---------- */
.tx-off .tx-aurora i,
.tx-off .scroll-cue::before,
.tx-off .scroll-cue::after,
.tx-off .showcase-glow,
.tx-cta.tx-off::after { animation-play-state: paused !important; }

/* ---------- Reduced motion: drop non-essential motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .tx-aurora i,
    .tx-cta::after,
    .tx-home .scroll-cue::before,
    .tx-home details.faq[open] .answer { animation: none !important; }
    .tx-cta::after { display: none; }
    .tx-home .showcase-callout:not(.active) { transform: none; }
    .tx-home .feature-card:hover { transform: none !important; }
    .tx-home .showcase-image-wrap { transform: none !important; }
}

/* ---------- Print ---------- */
@media print {
    .tx-progress, .tx-aurora { display: none !important; }
}

/* === Homepage: feature visual «зони термінів» (wide card) === */
.feature-card.wide{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.feature-card.wide{grid-template-columns:1.05fr .95fr}}
.tx-zones{position:relative;display:grid;gap:14px;padding:22px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 60px -24px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
:root[data-theme="light"] .tx-zones{background:linear-gradient(160deg,#ffffff,#f3f6f4);border-color:rgba(0,0,0,.06);box-shadow:inset 0 1px 0 #fff,0 24px 60px -28px rgba(20,60,40,.35)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .tx-zones{background:linear-gradient(160deg,#ffffff,#f3f6f4);border-color:rgba(0,0,0,.06);box-shadow:inset 0 1px 0 #fff,0 24px 60px -28px rgba(20,60,40,.35)}}
.tx-scan{position:relative;height:86px;border-radius:16px;overflow:hidden;
  background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 6px,currentColor 6px 8px,transparent 8px 13px,currentColor 13px 17px,transparent 17px 20px);
  color:rgba(255,255,255,.82);margin:0 6px 6px;opacity:.9}
:root[data-theme="light"] .tx-scan{color:#1d1d1f}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .tx-scan{color:#1d1d1f}}
.tx-scan i{position:absolute;left:-10%;right:-10%;top:0;height:3px;background:#ff453a;box-shadow:0 0 18px 4px rgba(255,69,58,.65);animation:txScan 2.6s ease-in-out infinite}
.tx-scan b{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(46,186,127,.18),transparent);opacity:0;animation:txFlash 2.6s ease-in-out infinite}
@keyframes txScan{0%,100%{transform:translateY(4px)}50%{transform:translateY(80px)}}
@keyframes txFlash{0%,40%,100%{opacity:0}50%{opacity:1}}
.tx-batch{display:grid;grid-template-columns:44px 1fr 14px;gap:14px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.05)}
:root[data-theme="light"] .tx-batch{background:rgba(0,0,0,.035)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .tx-batch{background:rgba(0,0,0,.035)}}
.tx-pack{width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.tx-bar{height:10px;border-radius:99px;background:rgba(127,127,127,.18);overflow:hidden}
.tx-bar em{display:block;height:100%;border-radius:inherit;transform-origin:left center}
.tx-dot{width:14px;height:14px;border-radius:50%}
.tx-batch.g em{width:88%;background:linear-gradient(90deg,#2EBA7F,#5fdb9f)}.tx-batch.g .tx-dot{background:#30d158;box-shadow:0 0 12px rgba(48,209,88,.7)}
.tx-batch.y em{width:46%;background:linear-gradient(90deg,#f5b400,#ffd75e)}.tx-batch.y .tx-dot{background:#ffcc00;box-shadow:0 0 12px rgba(255,204,0,.7)}
.tx-batch.r em{width:14%;background:linear-gradient(90deg,#ff3b30,#ff7a6e)}.tx-batch.r .tx-dot{background:#ff3b30;box-shadow:0 0 12px rgba(255,59,48,.75);animation:txPulse 1.4s ease-in-out infinite}
@keyframes txPulse{50%{transform:scale(1.35);opacity:.65}}
.js .feature-card.wide:not(.tx-in) .tx-bar em{transform:scaleX(0)}
.feature-card.wide .tx-bar em{transition:transform 1.4s cubic-bezier(.2,.8,.2,1) .25s}
.feature-card.wide .tx-batch.y .tx-bar em{transition-delay:.4s}.feature-card.wide .tx-batch.r .tx-bar em{transition-delay:.55s}
.tx-off .tx-scan i,.tx-off .tx-scan b,.tx-off .tx-dot{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.tx-scan i,.tx-scan b,.tx-dot{animation:none}.tx-bar em{transition:none;transform:none!important}}
.tx-static .tx-bar em,html:not(.js) .tx-bar em{transform:none!important}
:root[data-theme="light"] .tx-pack{background:linear-gradient(145deg,#dfe9e3,#c9d8cf);box-shadow:inset 0 1px 0 #fff}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .tx-pack{background:linear-gradient(145deg,#dfe9e3,#c9d8cf);box-shadow:inset 0 1px 0 #fff}}