/* ============================================================
   HouseWise - marketing site (root). RTL Hebrew, premium UI.
   Brand: "royal" indigo→violet, mirrors the app palette
   (oldsite/assets/css/style.css :root + mobile palettes.dart).
   ============================================================ */

:root {
    --primary:       #4338ca;
    --primary-light: #6366f1;
    --primary-dark:  #3730a3;
    --secondary:     #7c3aed;
    --success:       #10b981;
    --danger:        #ef4444;
    --warning:       #f59e0b;
    --info:          #06b6d4;

    --ink:        #111827;
    --ink-soft:   #434c5e;
    --ink-faint:  #8b93a8;
    /* deeper indigo-tinted canvas (was #f6f7fb) - the user wanted the
       light areas noticeably less white, with the aurora visible */
    --bg:         #dfe3f3;
    /* slightly translucent cards so the aurora tints through - glassy,
       futuristic, but text stays on a near-white surface */
    --card:       rgba(255, 255, 255, .88);
    --line:       #d4d9ec;

    --hero-bg1:   #0c0a1d;
    --hero-bg2:   #181238;
    --hero-ink:   #eef0ff;

    --radius-sm:  10px;
    --radius-md:  16px;
    --radius-lg:  22px;
    --radius-xl:  30px;

    --shadow-sm:  0 2px 10px rgba(17, 24, 39, .07);
    --shadow-md:  0 10px 30px rgba(17, 24, 39, .10);
    --shadow-lg:  0 24px 60px rgba(17, 24, 39, .16);
    --glow:       0 0 42px rgba(124, 58, 237, .45);
    /* small palette-tracking glow for icon tiles / mini cards - mirrors the
       app's "vibrant glow" hero language (v3.07.968); palettes override it */
    --glow-accent: 0 9px 24px -7px rgba(124, 58, 237, .48);

    --grad-brand: linear-gradient(135deg, #6366f1, #7c3aed);
    --grad-text:  linear-gradient(115deg, #a5b4fc, #c4b5fd 45%, #f0abfc);

    /* ambient/aurora hues - palettes override these */
    --amb1: rgba(99, 102, 241, .40);
    --amb2: rgba(168, 85, 247, .34);
    --amb3: rgba(6, 182, 212, .26);
    --aur1: rgba(99, 102, 241, .22);
    --aur2: rgba(168, 85, 247, .14);
    --aur3: rgba(6, 182, 212, .16);
    --aur4: rgba(124, 58, 237, .20);
    --dot:  rgba(67, 56, 202, .16);

    --font: 'Heebo', 'Segoe UI', sans-serif;
    --max-w: 1180px;
}

/* ---------- site palettes (the "ערכות צבע" chips switch these) ---------- */
[data-palette="sea"] {
    --primary: #0f766e; --primary-light: #14b8a6; --primary-dark: #115e59;
    --secondary: #10b981;
    --grad-brand: linear-gradient(135deg, #14b8a6, #10b981);
    --bg: #d9e9e4;
    --amb1: rgba(20, 184, 166, .40); --amb2: rgba(16, 185, 129, .32); --amb3: rgba(6, 182, 212, .26);
    --aur1: rgba(20, 184, 166, .22); --aur2: rgba(16, 185, 129, .14); --aur3: rgba(6, 182, 212, .16); --aur4: rgba(13, 148, 136, .20);
    --dot: rgba(15, 118, 110, .16);
    --glow: 0 0 42px rgba(16, 185, 129, .40);
    --glow-accent: 0 9px 24px -7px rgba(16, 185, 129, .46);
}
[data-palette="rose"] {
    --primary: #be185d; --primary-light: #ec4899; --primary-dark: #9d174d;
    --secondary: #a855f7;
    --grad-brand: linear-gradient(135deg, #ec4899, #a855f7);
    --bg: #ecdde8;
    --amb1: rgba(236, 72, 153, .36); --amb2: rgba(168, 85, 247, .30); --amb3: rgba(244, 114, 182, .24);
    --aur1: rgba(236, 72, 153, .20); --aur2: rgba(168, 85, 247, .14); --aur3: rgba(244, 114, 182, .14); --aur4: rgba(190, 24, 93, .18);
    --dot: rgba(190, 24, 93, .15);
    --glow: 0 0 42px rgba(236, 72, 153, .40);
    --glow-accent: 0 9px 24px -7px rgba(236, 72, 153, .46);
}
[data-palette="sand"] {
    --primary: #b45309; --primary-light: #f59e0b; --primary-dark: #92400e;
    --secondary: #f97316;
    --grad-brand: linear-gradient(135deg, #f59e0b, #f97316);
    --bg: #ece3d2;
    --amb1: rgba(245, 158, 11, .34); --amb2: rgba(249, 115, 22, .28); --amb3: rgba(251, 191, 36, .24);
    --aur1: rgba(245, 158, 11, .20); --aur2: rgba(249, 115, 22, .13); --aur3: rgba(251, 191, 36, .15); --aur4: rgba(180, 83, 9, .18);
    --dot: rgba(180, 83, 9, .15);
    --glow: 0 0 42px rgba(245, 158, 11, .40);
    --glow-accent: 0 9px 24px -7px rgba(245, 158, 11, .46);
}

/* ---------- dark theme (nav 🌙 toggle) ---------- */
[data-theme="dark"] {
    --ink:       #e9ebfb;
    --ink-soft:  #b6bcd9;
    --ink-faint: #7d84a6;
    --bg:        #0d1024;
    --card:      rgba(25, 30, 56, .90);
    --line:      rgba(148, 163, 216, .16);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
    --dot:       rgba(148, 163, 253, .09);
}
[data-theme="dark"][data-palette="sea"]  { --bg: #0a1620; }
[data-theme="dark"][data-palette="rose"] { --bg: #190d1c; }
[data-theme="dark"][data-palette="sand"] { --bg: #171107; }
[data-theme="dark"] .btn-light {
    background: var(--card); color: var(--ink); border-color: var(--line);
}
[data-theme="dark"] .theme-half.light { background: #262c52; color: #cdd2f5; border-color: #3a4178; }
[data-theme="dark"] .cat-chip { background: var(--card); color: var(--ink-soft); }
[data-theme="dark"] .compare th { background: rgba(99, 102, 241, .20); }
[data-theme="dark"] .palette-chip.sel { border-color: #fff; }
[data-theme="dark"] .flow-node .fi { filter: brightness(1.15); }

/* ---------- global scrollbars (app-themed gradient bar) ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, .45) transparent;
}
*::-webkit-scrollbar        { width: 8px; height: 8px; }
*::-webkit-scrollbar-track  { background: rgba(99, 102, 241, .05); border-radius: 999px; }
*::-webkit-scrollbar-thumb  {
    background: linear-gradient(135deg, rgba(99, 102, 241, .5), rgba(168, 85, 247, .5));
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, .85), rgba(168, 85, 247, .85));
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); overflow-x: hidden; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    /* bg lives on <html> so the fixed .ambient backdrop (z-index:-1)
       stays visible behind the content instead of being painted over */
    background: transparent;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ---------- ambient animated backdrop (light areas) ----------
   Slow-drifting brand-colored blobs + a faint dot lattice behind all
   light content. position:fixed so it floats while scrolling; sits
   under everything (z-index:-1), dark bands simply cover it. */
.ambient {
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(var(--dot) 1.3px, transparent 1.3px);
    background-size: 30px 30px;
    overflow: hidden;
}
/* futuristic aurora sheet - a huge soft conic gradient slowly rotating
   behind everything. Visible on phones too (vmax sizing). */
.ambient::before {
    content: '';
    position: absolute;
    width: 160vmax; height: 160vmax;
    top: 50%; inset-inline-start: 50%;
    margin-top: -80vmax; margin-inline-start: -80vmax;
    background: conic-gradient(
        from 0deg,
        var(--aur1), var(--aur2), var(--aur3), var(--aur4), var(--aur1)
    );
    filter: blur(46px);
    animation: auroraSpin 70s linear infinite;
}
/* drifting light beam that sweeps across slowly */
.ambient::after {
    content: '';
    position: absolute; inset: -20%;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 255, 255, .34) 46%,
        rgba(165, 180, 252, .26) 52%,
        transparent 68%);
    animation: beamSweep 16s ease-in-out infinite alternate;
}
@keyframes auroraSpin { to { transform: rotate(360deg); } }
@keyframes beamSweep {
    from { transform: translateX(-16%) skewX(-4deg); }
    to   { transform: translateX(16%)  skewX(4deg); }
}
.ambient i {
    position: absolute; display: block; border-radius: 50%;
    filter: blur(56px); opacity: .75; will-change: transform;
}
.ambient i:nth-child(1) {
    width: 64vmax; height: 64vmax; top: -18%; inset-inline-start: -16%;
    background: radial-gradient(circle, var(--amb1), transparent 70%);
    animation: drift1 26s ease-in-out infinite alternate;
}
.ambient i:nth-child(2) {
    width: 54vmax; height: 54vmax; top: 36%; inset-inline-end: -18%;
    background: radial-gradient(circle, var(--amb2), transparent 70%);
    animation: drift2 32s ease-in-out infinite alternate;
}
.ambient i:nth-child(3) {
    width: 48vmax; height: 48vmax; bottom: -16%; inset-inline-start: 22%;
    background: radial-gradient(circle, var(--amb3), transparent 70%);
    animation: drift3 38s ease-in-out infinite alternate;
}
@keyframes drift1 { from { transform: translate(0, 0) scale(1); }      to { transform: translate(9vmin, 7vmin) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.1); }    to { transform: translate(-11vmin, -6vmin) scale(.92); } }
@keyframes drift3 { from { transform: translate(0, 0) rotate(0); }     to { transform: translate(7vmin, -8vmin) scale(1.18); } }

img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; min-width: 0; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .4em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.18rem; }
p  { margin: 0 0 .8em; }

.section { padding: 56px 0; }
.section.tight { padding-top: 10px; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 34px; }
.section-head .kicker, .kicker {
    display: inline-flex; align-items: center; gap: 8px;
    flex-wrap: wrap; justify-content: center; max-width: 100%;
    background: rgba(99, 102, 241, .13);
    border: 1px solid rgba(99, 102, 241, .22);
    color: var(--primary-dark);
    font-weight: 800; font-size: 1.02rem;
    padding: 7px 20px; border-radius: 999px;
    margin-bottom: 14px;
}
/* dark mode: the indigo-on-dark kickers were near-invisible */
[data-theme="dark"] .section-head .kicker, [data-theme="dark"] .kicker {
    background: rgba(129, 140, 248, .18);
    border-color: rgba(165, 180, 252, .38);
    color: #c7d2fe;
}
.section-head p { color: var(--ink-soft); font-size: 1.08rem; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--font); font-weight: 700; font-size: 1rem;
    line-height: 1.4;
    padding: 13px 28px; border-radius: 999px;
    border: 0; cursor: pointer;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s, background .22s;
    will-change: transform;
}
.btn-primary {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 10px 26px rgba(99, 102, 241, .42);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 34px rgba(99, 102, 241, .55); }
.btn-ghost {
    background: rgba(255, 255, 255, .08);
    color: var(--hero-ink);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.btn-light {
    background: #fff; color: var(--primary-dark);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---------- nav ---------- */
.nav {
    position: fixed; inset-inline: 0; top: 0; z-index: 50;
    transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav-inner {
    display: flex; align-items: center; gap: 26px;
    height: 72px;
}
.nav.scrolled {
    background: rgba(12, 10, 29, .82);
    backdrop-filter: blur(14px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, .25);
}
.nav.on-light.scrolled {
    background: rgba(255, 255, 255, .85);
    box-shadow: var(--shadow-sm);
}
.nav-logo {
    display: flex; align-items: center; gap: 11px;
    font-size: 1.3rem; font-weight: 800; color: var(--hero-ink);
}
.nav.on-light .nav-logo, .nav.on-light .nav-links a { color: var(--ink); }
.nav-logo img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.nav-links {
    display: flex; align-items: center; gap: 26px;
    margin-inline-start: auto;
}
.nav-links a {
    color: rgba(238, 240, 255, .85);
    font-weight: 600;
    position: relative;
    padding: 4px 0;
}
.nav-links a::after {
    content: ''; position: absolute; inset-inline: 0; bottom: -3px;
    height: 2.5px; border-radius: 2px;
    background: var(--grad-brand);
    transform: scaleX(0); transform-origin: center;
    transition: transform .25s;
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
/* must out-specify `.nav-links a { padding:4px 0 }` above, which was
   overriding the CTA's padding to near-zero and clipping its text */
.nav-links a.nav-cta { padding: 12px 26px; font-size: .95rem; line-height: 1.6; }
/* theme toggle + a11y - tight cluster beside the burger (nav gap is
   26px; negative margins pull them to ~6px apart) */
.nav-theme { margin-inline-start: -14px; }
/* the a11y button is wrapped in .a11y-wrap (the dropdown anchor), so the
   clustering margin goes on the WRAPPER (the flex item), not the button */
.a11y-wrap { margin-inline-start: -20px; }
.a11y-nav-btn { margin-inline-start: 0; }
.nav-burger { margin-inline-start: -16px; }
.nav-theme {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    color: var(--hero-ink);
    font-size: 1.05rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s, background .25s;
    flex: 0 0 auto;
}
.nav-theme:hover { transform: rotate(20deg) scale(1.08); background: rgba(255, 255, 255, .16); }

.nav-burger {
    display: none;
    background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-burger span {
    display: block; width: 24px; height: 2.5px; border-radius: 2px;
    background: var(--hero-ink); margin: 5px 0;
    transition: transform .25s, opacity .25s;
}
.nav.on-light .nav-burger span { background: var(--ink); }
.nav.open .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
    position: relative;
    background:
        radial-gradient(900px 500px at 82% -10%, rgba(124, 58, 237, .35), transparent 60%),
        radial-gradient(700px 460px at 8% 110%, rgba(99, 102, 241, .28), transparent 60%),
        linear-gradient(160deg, var(--hero-bg1), var(--hero-bg2) 65%, #221347);
    color: var(--hero-ink);
    overflow: hidden;
    padding: 128px 0 84px;
}
.hero::before, .hero::after {
    content: ''; position: absolute; border-radius: 50%;
    filter: blur(70px); opacity: .5; pointer-events: none;
    animation: float 11s ease-in-out infinite alternate;
}
.hero::before {
    width: 420px; height: 420px; top: -120px; inset-inline-start: -90px;
    background: radial-gradient(circle, rgba(99, 102, 241, .55), transparent 70%);
}
.hero::after {
    width: 380px; height: 380px; bottom: -130px; inset-inline-end: -70px;
    background: radial-gradient(circle, rgba(192, 132, 252, .5), transparent 70%);
    animation-delay: -5s;
}
@keyframes float {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(34px) scale(1.08); }
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 56px; align-items: center;
    position: relative; z-index: 1;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 9px;
    flex-wrap: wrap; justify-content: center;
    max-width: 100%;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #d6dbff;
    border-radius: 999px;
    padding: 7px 18px;
    font-size: .92rem; font-weight: 600;
    backdrop-filter: blur(6px);
    margin-bottom: 22px;
    animation: pulseSoft 2.6s ease-in-out infinite;
}
@keyframes pulseSoft {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .45); }
    50%      { box-shadow: 0 0 0 9px rgba(124, 58, 237, 0); }
}
.hero h1 .grad {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub {
    color: #c4c9ec;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    max-width: 540px;
    margin-bottom: 24px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
/* trust strip - one glass panel, icon tiles + labels, NOT buttons */
.hero-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 620px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    padding: 16px 8px;
}
.trust-chip {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: #cfd4f7;
    font-size: .8rem; font-weight: 600;
    text-align: center;
    padding: 2px 10px;
    border-inline-end: 1px solid rgba(255, 255, 255, .10);
    min-width: 0;
}
.trust-chip:last-child { border-inline-end: 0; }
.trust-chip .ti {
    width: 38px; height: 38px;
    border-radius: 13px;
    background: var(--grad-brand);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 7px 18px rgba(99, 102, 241, .45);
    animation: tiFloat 4.5s ease-in-out infinite;
}
.trust-chip:nth-child(2) .ti { animation-delay: -1.1s; }
.trust-chip:nth-child(3) .ti { animation-delay: -2.2s; }
.trust-chip:nth-child(4) .ti { animation-delay: -3.3s; }
@keyframes tiFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.trust-chip svg { width: 19px; height: 19px; }
@media (max-width: 700px) {
    .hero-trust { grid-template-columns: repeat(2, 1fr); gap: 16px 0; max-width: 100%; }
    .trust-chip:nth-child(2) { border-inline-end: 0; }
}

/* ---------- phone mockup ---------- */
.hero-visual { display: flex; justify-content: center; min-width: 0; }
.phone {
    width: 305px; max-width: 86vw;
    background: #0b0f1d;
    border-radius: 44px;
    padding: 13px;
    box-shadow: var(--shadow-lg), var(--glow);
    border: 1px solid rgba(255, 255, 255, .12);
    transform: rotate(-4deg);
    animation: phoneIn 1s cubic-bezier(.2, .8, .3, 1) both .25s, hover 7s ease-in-out 1.4s infinite alternate;
}
@keyframes phoneIn {
    from { opacity: 0; transform: rotate(-4deg) translateY(46px) scale(.94); }
    to   { opacity: 1; transform: rotate(-4deg) translateY(0) scale(1); }
}
@keyframes hover {
    from { transform: rotate(-4deg) translateY(0); }
    to   { transform: rotate(-3deg) translateY(-14px); }
}
.phone-screen {
    background: linear-gradient(165deg, #11162b, #181f3a);
    border-radius: 33px;
    overflow: hidden;
    direction: rtl;
}
.phone-notch {
    width: 110px; height: 24px;
    background: #0b0f1d;
    border-radius: 0 0 16px 16px;
    margin: 0 auto;
}
.ps-pad { padding: 14px 16px 18px; }
.ps-greet { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ps-greet b { color: #eef0ff; font-size: .95rem; }
.ps-greet span { font-size: .7rem; color: #8b91bd; }
.ps-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--grad-brand);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .75rem; font-weight: 800;
}
.ps-balance {
    background: var(--grad-brand);
    border-radius: 18px;
    padding: 14px 16px;
    color: #fff;
    box-shadow: 0 10px 24px rgba(99, 102, 241, .45);
    margin-bottom: 12px;
}
.ps-balance small { opacity: .85; font-size: .68rem; display: block; }
.ps-balance .amount { font-size: 1.45rem; font-weight: 800; direction: ltr; text-align: right; }
.ps-balance .delta {
    display: inline-block; margin-top: 5px;
    background: rgba(255, 255, 255, .2);
    font-size: .64rem; padding: 2px 9px; border-radius: 999px;
}
.ps-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ps-stat {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 13px;
    padding: 8px 11px;
}
.ps-stat small { color: #8b91bd; font-size: .62rem; display: block; }
.ps-stat b { color: #eef0ff; font-size: .85rem; direction: ltr; display: inline-block; }
.ps-list { display: grid; gap: 7px; margin-bottom: 14px; }
.ps-row {
    display: flex; align-items: center; gap: 9px;
    background: rgba(255, 255, 255, .045);
    border-radius: 12px;
    padding: 7px 10px;
}
.ps-row .dot {
    width: 26px; height: 26px; border-radius: 9px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.ps-row .meta { flex: 1; min-width: 0; }
.ps-row .meta b { display: block; color: #dfe2ff; font-size: .72rem; }
.ps-row .meta span { color: #8b91bd; font-size: .6rem; }
.ps-row .sum { color: #fca5a5; font-size: .72rem; font-weight: 700; direction: ltr; }
.ps-row .sum.plus { color: #6ee7b7; }
.ps-nav {
    display: flex; justify-content: space-around; align-items: center;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    padding: 8px 12px;
    backdrop-filter: blur(8px);
}
.ps-nav span { font-size: .85rem; opacity: .55; }
.ps-nav .ps-fab {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--grad-brand);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.05rem; font-weight: 800;
    box-shadow: 0 6px 16px rgba(99, 102, 241, .55);
    opacity: 1;
}

/* ---------- feature cards ---------- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 22px;
}
.feature-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s, border-color .25s;
    position: relative;
    overflow: hidden;
    min-width: 0;
}
.feature-card::before {
    content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px;
    background: var(--grad-brand);
    transform: scaleX(0); transform-origin: right;
    transition: transform .3s;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(99, 102, 241, .35); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon {
    width: 52px; height: 52px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(99, 102, 241, .12);
    color: var(--primary);
    margin-bottom: 16px;
    box-shadow: var(--glow-accent);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s;
}
.feature-card:hover .feature-icon { transform: translateY(-2px) scale(1.06); }
.feature-icon svg { width: 26px; height: 26px; }
.feature-card p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* ---------- steps ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    counter-reset: step;
}
.step {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    box-shadow: var(--shadow-sm);
    position: relative;
    min-width: 0;
}
.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute; top: -20px; inset-inline-start: 24px;
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--grad-brand);
    color: #fff; font-weight: 800; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(99, 102, 241, .4);
}
.step h3 { margin-top: 10px; }
.step p { color: var(--ink-soft); margin: 0; font-size: .96rem; }

/* ---------- example showcase ---------- */
.showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 24px;
}
.show-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s;
    min-width: 0;
    display: flex; flex-direction: column;
}
.show-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.show-screen {
    background: linear-gradient(160deg, #141a33, #1c2447);
    padding: 22px 20px;
    direction: rtl;
    min-height: 215px;
}
.show-body { padding: 20px 22px 24px; }
.show-body h3 { margin-bottom: 6px; }
.show-body p { color: var(--ink-soft); font-size: .94rem; margin: 0; }

/* mini widgets inside showcase screens */
.w-title { color: #aab1e3; font-size: .72rem; margin-bottom: 10px; font-weight: 600; }
.w-bars { display: grid; gap: 9px; }
.w-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.w-bar small { color: #cdd2f5; font-size: .68rem; }
.w-bar .track { background: rgba(255, 255, 255, .08); border-radius: 999px; height: 9px; overflow: hidden; }
.w-bar .fill {
    height: 100%; border-radius: 999px;
    background: var(--grad-brand);
    width: 0;
    transition: width 1.1s cubic-bezier(.25, .8, .3, 1);
}
.w-bar .fill.ok   { background: linear-gradient(90deg, #10b981, #34d399); }
.w-bar .fill.warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.w-bar .fill.bad  { background: linear-gradient(90deg, #ef4444, #f87171); }
.w-bar b { color: #e7eaff; font-size: .66rem; direction: ltr; text-align: left; }

.w-receipt {
    background: rgba(255, 255, 255, .05);
    border: 1px dashed rgba(255, 255, 255, .25);
    border-radius: 14px;
    padding: 13px 14px;
    margin-bottom: 11px;
}
.w-receipt .scanline {
    height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #a78bfa, transparent);
    animation: scan 2.2s ease-in-out infinite;
    margin-bottom: 10px;
}
@keyframes scan { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(88px); opacity: 1; } }
.w-receipt .r-line { display: flex; justify-content: space-between; font-size: .68rem; color: #cdd2f5; padding: 2.5px 0; }
.w-receipt .r-line b { color: #fff; direction: ltr; }
.w-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(16, 185, 129, .18);
    border: 1px solid rgba(16, 185, 129, .4);
    color: #6ee7b7;
    font-size: .68rem; font-weight: 700;
    border-radius: 999px; padding: 4px 12px;
}

.w-score { display: flex; align-items: center; gap: 16px; margin-bottom: 13px; }
.w-ring {
    width: 74px; height: 74px; border-radius: 50%; flex: 0 0 auto;
    background: conic-gradient(#34d399 0 312deg, rgba(255, 255, 255, .1) 312deg 360deg);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.w-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #1a2145; }
.w-ring b { position: relative; color: #fff; font-size: 1.15rem; }
.w-insight { color: #cdd2f5; font-size: .7rem; line-height: 1.55; }
.w-insight b { color: #fff; }

/* ---------- live app demo (pure-CSS 9s loop) ----------
   Scene: a receipt gets AI-scanned → a success toast pops → the new
   expense row slides into the list → the monthly balance counts down.
   Everything loops with synchronized keyframe delays - no JS. */
.demo-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
}
.demo-phone {
    width: 305px; max-width: 86vw;
    margin: 0 auto;
    background: #0b0f1d;
    border-radius: 44px;
    padding: 13px;
    box-shadow: var(--shadow-lg), var(--glow);
    border: 1px solid rgba(255, 255, 255, .12);
}
.demo-phone .phone-screen { position: relative; }

/* 3 rotating scenes inside the demo phone: each visible a third of a
   21s cycle (inner anims are 7s = 3 loops, so they stay in phase). */
.demo-stage { position: relative; min-height: 354px; }
.demo-scene {
    position: absolute; inset: 0;
    opacity: 0;
    animation: sceneCycle 21s ease-in-out infinite;
}
.demo-scene.s2 { animation-delay: -14s; }
.demo-scene.s3 { animation-delay: -7s; }
@keyframes sceneCycle {
    0%, 2%      { opacity: 0; transform: translateX(-14px); }
    4%, 30%     { opacity: 1; transform: translateX(0); }
    33%, 100%   { opacity: 0; transform: translateX(14px); }
}
.demo-scene .scene-tag {
    display: inline-block;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #aab1e3;
    font-size: .64rem; font-weight: 700;
    border-radius: 999px;
    padding: 3px 11px;
    margin-bottom: 9px;
}
.demo-save-prog .track {
    background: rgba(255, 255, 255, .09);
    border-radius: 999px; height: 9px; overflow: hidden; margin-top: 6px;
}
.demo-save-prog .fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #34d399);
    animation: saveFill 7s ease-in-out infinite;
}
@keyframes saveFill { 0%, 12% { width: 12%; } 55%, 100% { width: 68%; } }
.demo-report .fill { animation: repFill 7s ease-in-out infinite; }
@keyframes repFill { 0%, 8% { width: 6%; } 50%, 100% { width: var(--w, 60%); } }
.demo-scan {
    position: relative;
    background: rgba(255, 255, 255, .05);
    border: 1px dashed rgba(255, 255, 255, .25);
    border-radius: 14px;
    padding: 11px 13px;
    margin-bottom: 10px;
    overflow: hidden;
    animation: demoScanCard 7s ease-in-out infinite;
}
.demo-scan .scanline {
    height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #a78bfa, transparent);
    animation: demoScanline 7s ease-in-out infinite;
    margin-bottom: 8px;
}
@keyframes demoScanline {
    0%, 4%   { transform: translateY(0); opacity: 0; }
    8%       { opacity: 1; }
    24%      { transform: translateY(34px); opacity: 1; }
    30%, 100%{ transform: translateY(0); opacity: 0; }
}
@keyframes demoScanCard {
    0%, 2%   { opacity: 0; transform: translateY(-8px); }
    6%, 26%  { opacity: 1; transform: translateY(0); }
    32%, 100%{ opacity: .35; transform: translateY(0); }
}
.demo-toast {
    position: absolute;
    top: 38px; inset-inline: 18px;
    background: rgba(16, 185, 129, .95);
    color: #fff;
    border-radius: 12px;
    padding: 8px 13px;
    font-size: .72rem; font-weight: 700;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
    opacity: 0;
    animation: demoToast 7s ease-in-out infinite;
    z-index: 3;
}
@keyframes demoToast {
    0%, 26%  { opacity: 0; transform: translateY(-14px); }
    31%, 46% { opacity: 1; transform: translateY(0); }
    52%, 100%{ opacity: 0; transform: translateY(-14px); }
}
.demo-newrow {
    opacity: 0;
    animation: demoNewRow 7s cubic-bezier(.2, .8, .3, 1) infinite;
}
@keyframes demoNewRow {
    0%, 30%  { opacity: 0; transform: translateX(40px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -7px; }
    38%, 92% { opacity: 1; transform: translateX(0); max-height: 60px; padding-top: 7px; padding-bottom: 7px; margin-bottom: 0; }
    98%, 100%{ opacity: 0; transform: translateX(40px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -7px; }
}
.demo-balance { position: relative; }
.demo-balance .amount { position: relative; height: 1.85rem; overflow: hidden; }
.demo-balance .amount b {
    position: absolute; inset-inline-end: 0; top: 0;
    font-weight: 800;
}
.demo-balance .amount b:first-child { animation: demoAmtOld 7s ease-in-out infinite; }
.demo-balance .amount b:last-child  { animation: demoAmtNew 7s ease-in-out infinite; }
@keyframes demoAmtOld {
    0%, 34%  { opacity: 1; transform: translateY(0); }
    40%, 96% { opacity: 0; transform: translateY(-110%); }
    100%     { opacity: 1; transform: translateY(0); }
}
@keyframes demoAmtNew {
    0%, 34%  { opacity: 0; transform: translateY(110%); }
    40%, 96% { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(110%); }
}
.demo-cap { color: var(--ink-soft); }
.demo-steps { display: grid; gap: 12px; margin-top: 18px; }
.demo-step {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 13px 15px;
    box-shadow: var(--shadow-sm);
}
.demo-step .ds-ico {
    width: 38px; height: 38px; flex: 0 0 auto;
    border-radius: 11px;
    background: rgba(99, 102, 241, .12);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
}
.demo-step b { display: block; font-size: .95rem; }
.demo-step span { color: var(--ink-soft); font-size: .85rem; }

/* ---------- personalization section ---------- */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 22px;
}
.palette-mini { display: flex; gap: 10px; margin-top: 14px; }
.palette-chip {
    flex: 1; height: 56px; border-radius: 13px;
    border: 2px solid transparent;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 5px;
    font-size: .64rem; font-weight: 700; color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    transition: transform .2s;
}
.palette-chip:hover { transform: translateY(-3px); }
.palette-chip:active { transform: scale(.95); }
.palette-chip.sel { border-color: var(--ink); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.palette-chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.theme-toggle-mock {
    display: flex; gap: 10px; margin-top: 14px;
}
.theme-half {
    flex: 1; border-radius: 13px; padding: 11px 12px;
    font-size: .68rem; font-weight: 700;
    border: 1.5px solid var(--line);
    font-family: var(--font);
    cursor: pointer;
    text-align: start;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
    /* instant tap on mobile (no 300ms delay), no grey flash */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.theme-half:active { transform: scale(.97); }
.theme-half:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.theme-half.sel { border-color: var(--primary-light); box-shadow: 0 0 0 2px rgba(99,102,241,.35); }
.theme-half.sel::after {
    content: '✓'; position: absolute; top: 7px; inset-inline-end: 9px;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--grad-brand); color: #fff;
    font-size: .6rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.theme-half.dark { background: #11162b; color: #cdd2f5; border-color: #2a3055; }
.theme-half.light { background: #fff; color: #374151; }
.theme-half .bar { height: 7px; border-radius: 99px; margin-top: 7px; background: var(--grad-brand); opacity: .85; }
.theme-half.light .bar:last-child, .theme-half.dark .bar:last-child { opacity: .3; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cat-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 999px; padding: 5px 13px;
    font-size: .78rem; font-weight: 700;
    border: 1.5px solid var(--line);
    background: #fff; color: var(--ink-soft);
    transition: transform .2s, border-color .2s;
}
.cat-chip:hover { transform: translateY(-2px); border-color: rgba(99, 102, 241, .5); }

/* ---------- notifications section ---------- */
.notif-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.notif-stack { display: grid; gap: 13px; }
.notif-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    display: flex; gap: 12px; align-items: flex-start;
    transition: transform .25s, box-shadow .25s;
}
.notif-card:hover { transform: translateX(-5px); box-shadow: var(--shadow-md); }
.notif-card .n-icon {
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    background: rgba(99, 102, 241, .12);
}
.notif-card b { display: block; font-size: .92rem; }
.notif-card span { color: var(--ink-soft); font-size: .82rem; }
.notif-card small { color: var(--ink-faint); font-size: .7rem; margin-inline-start: auto; flex: 0 0 auto; }

/* ---------- download band ---------- */
.download-band {
    background:
        radial-gradient(640px 380px at 88% -20%, rgba(99, 102, 241, .35), transparent 60%),
        radial-gradient(520px 320px at 5% 115%, rgba(168, 85, 247, .3), transparent 60%),
        linear-gradient(150deg, #141031, #1e1546);
    border-radius: var(--radius-xl);
    color: var(--hero-ink);
    padding: 56px clamp(24px, 6vw, 70px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: center;
    overflow: hidden;
}
.dl-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.dl-icon {
    width: 84px; height: 84px; flex: 0 0 auto;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .14);
    background: #fff;
}
.dl-icon img { width: 100%; height: 100%; object-fit: cover; }
.dl-head h2 { margin: 0; color: #fff; }
.dl-head .dl-sub { color: #b9bee8; font-size: 1.02rem; }
.download-band > div > p { color: #c4c9ec; max-width: 520px; }
.store-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.store-badge {
    display: inline-flex; align-items: center; gap: 12px;
    background: #000;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 14px;
    padding: 10px 20px;
    color: #fff;
    min-width: 175px;
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.store-badge:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(255, 255, 255, .75);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.store-badge svg { width: 30px; height: 30px; flex: 0 0 auto; }
.store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.store-badge .sb-text small { font-size: .68rem; opacity: .8; font-weight: 500; }
.store-badge .sb-text b { font-size: 1.08rem; font-weight: 700; }
.store-badge.web {
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(6px);
}
.dl-qr-hint {
    margin-top: 18px;
    color: #9aa0d0;
    font-size: .86rem;
}
.dl-phone-art { font-size: 7rem; line-height: 1; filter: drop-shadow(0 16px 36px rgba(124, 58, 237, .5)); }

/* ---------- footer contact row ---------- */
.footer-contact {
    display: flex; flex-wrap: wrap; gap: 22px;
    padding-bottom: 20px; margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer-contact a { color: #b9bee4; font-weight: 600; }
.footer-contact a:hover { color: #fff; }

/* ---------- security band (home teaser) ---------- */
.security-band {
    background:
        radial-gradient(700px 420px at 12% -20%, rgba(124, 58, 237, .3), transparent 60%),
        linear-gradient(150deg, #0c0a1d, #1b1340);
    color: var(--hero-ink);
    border-radius: var(--radius-xl);
    padding: 60px clamp(24px, 6vw, 70px);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 44px; align-items: center;
    overflow: hidden;
    position: relative;
}
.security-band h2 { color: #fff; }
.security-band p { color: #c4c9ec; }
.sec-points { display: grid; gap: 14px; margin: 22px 0 28px; padding: 0; list-style: none; }
.sec-points li { display: flex; gap: 12px; align-items: flex-start; color: #d6dbff; font-size: .98rem; }
.sec-points svg { width: 21px; height: 21px; flex: 0 0 auto; margin-top: 3px; color: #34d399; }
.shield-wrap { display: flex; justify-content: center; }
.shield {
    width: 190px; height: 215px;
    position: relative;
    filter: drop-shadow(0 18px 45px rgba(124, 58, 237, .55));
    animation: shieldPulse 3.2s ease-in-out infinite;
}
@keyframes shieldPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

/* ---------- security page ---------- */
.page-hero {
    background:
        radial-gradient(800px 420px at 85% -20%, rgba(124, 58, 237, .35), transparent 60%),
        linear-gradient(155deg, var(--hero-bg1), var(--hero-bg2));
    color: var(--hero-ink);
    padding: 122px 0 56px;
    text-align: center;
}
.page-hero p { color: #c4c9ec; max-width: 680px; margin: 0 auto; font-size: 1.1rem; }
.page-hero .kicker {
    display: inline-block;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #d6dbff;
    border-radius: 999px; padding: 6px 18px;
    font-weight: 700; font-size: .9rem;
    margin-bottom: 16px;
}

.sec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 22px;
}
.sec-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s;
    min-width: 0;
}
.sec-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.sec-card .feature-icon { background: rgba(16, 185, 129, .12); color: #0d9f6e; }
.sec-card.violet .feature-icon { background: rgba(124, 58, 237, .12); color: var(--secondary); }
.sec-card.blue   .feature-icon { background: rgba(6, 182, 212, .12);  color: #0891b2; }
.sec-card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.sec-card .tech {
    display: inline-block;
    direction: ltr;
    background: rgba(99, 102, 241, .08);
    border: 1px solid rgba(99, 102, 241, .22);
    color: var(--primary-dark);
    font-size: .78rem; font-weight: 700;
    border-radius: 8px;
    padding: 3px 10px;
    margin-top: 13px;
    font-family: 'Consolas', monospace;
}

.zero-banner {
    background: var(--grad-brand);
    border-radius: var(--radius-xl);
    color: #fff;
    text-align: center;
    padding: 54px clamp(22px, 5vw, 60px);
    box-shadow: 0 22px 55px rgba(99, 102, 241, .4);
    position: relative; overflow: hidden;
}
.zero-banner::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(420px 220px at 80% 0%, rgba(255, 255, 255, .22), transparent 60%);
    pointer-events: none;
}
.zero-banner h2 { color: #fff; position: relative; }
.zero-banner p { color: rgba(255, 255, 255, .92); max-width: 700px; margin: 0 auto; font-size: 1.08rem; position: relative; }

.flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 16px;
    margin-top: 36px;
}
.flow-node {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 20px 18px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    min-width: 0;
}
.flow-node .fi { font-size: 1.7rem; margin-bottom: 8px; }
.flow-node b { display: block; margin-bottom: 5px; }
.flow-node span { color: var(--ink-soft); font-size: .85rem; }
.flow-node em {
    display: block; margin-top: 9px;
    font-style: normal; font-size: .74rem; font-weight: 700;
    color: var(--success);
}
.flow-node em.lock { color: var(--secondary); }

.compare { overflow-x: auto; }
.compare table {
    width: 100%;
    border-collapse: separate; border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-width: 560px;
}
.compare th {
    background: linear-gradient(135deg, rgba(99, 102, 241, .1), rgba(124, 58, 237, .1));
    padding: 15px 18px;
    text-align: right;
    font-size: .95rem;
}
.compare td {
    padding: 13px 18px;
    border-top: 1px solid var(--line);
    font-size: .93rem;
    color: var(--ink-soft);
}
.compare td:first-child { font-weight: 700; color: var(--ink); }
.yes { color: var(--success); font-weight: 800; }
.no  { color: var(--danger);  font-weight: 800; }

/* ---------- FAQ-ish detail rows (features page) ---------- */
.detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 18px 0;
}
.detail:nth-child(even) .detail-visual { order: -1; }
.detail h3 { font-size: 1.45rem; }
.detail h3 .num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 11px;
    background: var(--grad-brand); color: #fff;
    font-size: 1rem; margin-inline-end: 11px;
    vertical-align: middle;
    box-shadow: 0 6px 16px rgba(99, 102, 241, .35);
}
.detail p { color: var(--ink-soft); }

/* styled list markers - gradient rounded tile with a check, replaces
   the plain disc bullet on every content list */
.detail ul, ul.detail-list {
    color: var(--ink-soft);
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
    display: grid; gap: 9px;
}
.detail ul li, ul.detail-list li {
    position: relative;
    padding-inline-start: 32px;
    min-width: 0;
}
.detail ul li::before, ul.detail-list li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    top: .12em;
    width: 21px; height: 21px;
    border-radius: 7px;
    background: var(--grad-brand);
    color: #fff;
    font-size: .72rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(99, 102, 241, .35);
}
.detail-visual {
    background: linear-gradient(160deg, #141a33, #1d2548);
    border-radius: var(--radius-xl);
    padding: 28px 26px;
    box-shadow: var(--shadow-md);
    direction: rtl;
    min-width: 0;
}

/* ---------- CTA ---------- */
.cta-final {
    text-align: center;
    background:
        radial-gradient(640px 360px at 50% -30%, rgba(124, 58, 237, .4), transparent 65%),
        linear-gradient(160deg, #0c0a1d, #1c1242);
    color: var(--hero-ink);
    border-radius: var(--radius-xl);
    padding: 48px clamp(24px, 6vw, 80px);
}
.cta-final h2 { color: #fff; }
.cta-final p { color: #c4c9ec; max-width: 600px; margin: 0 auto 24px; }

/* ---------- footer ---------- */
.footer {
    background: #0c0a1d;
    color: #9aa0c7;
    padding: 38px 0 26px;
    margin-top: 36px;
    font-size: .92rem;
}
.footer-grid {
    display: flex; flex-wrap: wrap; gap: 26px;
    align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: 24px; margin-bottom: 22px;
}
.footer .nav-logo { font-size: 1.1rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { color: #b9bee4; font-weight: 600; }
.footer-links a:hover { color: #fff; }
.footer-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.footer-meta .ver { direction: ltr; font-family: 'Consolas', monospace; font-size: .8rem; color: #6f76a8; }
.footer-copy { display: inline-block; }
body.hw-edit-mode .footer-copy { min-width: 40px; min-height: 18px; }
.footer-credit {
    text-align: center;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #8a90bd; font-size: .84rem; font-weight: 600;
}
.footer-credit a { color: #b9bee4; }
.cm-toggle { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.cm-toggle input { width: 17px; height: 17px; accent-color: var(--primary); }
.am-lbl { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }

/* ---------- legal doc content ---------- */
.page-hero.compact { padding: 112px 0 34px; }
.page-hero.compact h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.legal-doc {
    line-height: 1.75; color: var(--ink-soft);
    font-size: .95rem;
    overflow-wrap: break-word;
}
.legal-doc h1 { font-size: 1.35rem; }
.legal-doc h2 { font-size: 1.18rem; }
.legal-doc h3 { font-size: 1.02rem; }
.legal-doc h1, .legal-doc h2, .legal-doc h3 {
    color: var(--ink); margin: 1.4em 0 .45em;
    padding-inline-start: 12px;
    border-inline-start: 4px solid var(--primary-light);
    border-radius: 2px;
}
.legal-doc > h1:first-child, .legal-doc > h2:first-child, .legal-doc > h3:first-child { margin-top: 0; }
.legal-doc ul, .legal-doc ol { padding-inline-start: 22px; }
.legal-doc a { font-weight: 600; overflow-wrap: anywhere; word-break: break-all; }
.legal-doc img { border-radius: var(--radius-sm); }
.legal-switch { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.legal-switch a {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 9px 22px;
    font-weight: 700; font-size: .92rem;
    color: var(--ink-soft);
    box-shadow: var(--shadow-sm);
    transition: transform .22s, border-color .22s, color .22s;
}
.legal-switch a:hover { transform: translateY(-2px); border-color: var(--primary-light); color: var(--primary); }

/* ---------- footer legal chips ---------- */
.footer-legal { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-legal a {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .05);
    border-radius: 999px;
    padding: 4px 13px;
    font-size: .76rem; font-weight: 600;
    color: #c7cbed;
    transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.footer-legal a:hover {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}
@media (max-width: 480px) {
    /* all 3 legal chips must fit ONE row on a phone */
    .footer-legal { flex-wrap: nowrap; gap: 6px; width: 100%; }
    .footer-legal a {
        flex: 1 1 0; min-width: 0;
        justify-content: center;
        padding: 4px 6px;
        font-size: .66rem;
        white-space: nowrap;
    }
}

/* ---------- accessibility widget (button lives in the NAV, beside
   the theme toggle - a fixed floating button vanished under the
   grayscale body-filter, which turns position:fixed into absolute) */
.a11y-nav-btn { font-size: 1rem; }
.a11y-nav-btn svg { width: 21px; height: 21px; display: block; }
/* clear "open" state - filled gradient, white glyph */
.a11y-nav-btn.a11y-open {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(99, 102, 241, .5);
    transform: scale(1.05);
}
/* relative wrapper around the a11y button - the dropdown anchors to it */
.a11y-wrap { position: relative; display: inline-flex; }
.a11y-panel {
    /* ABSOLUTE dropdown anchored to the button wrapper - always directly
       under the button, no JS coordinate math (the old fixed+JS approach
       kept landing on the wrong side in RTL). The button sits at the
       physical-left end of the RTL nav, so anchor the panel's LEFT to the
       button and let it grow rightward (into the viewport). */
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: auto;
    z-index: 80;
    width: 300px; max-width: calc(100vw - 24px);
    max-height: min(82vh, 640px);
    overflow-y: auto;
    background: var(--card);
    backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 18px;
    transform-origin: top left;
    opacity: 0; transform: translateY(-14px) scale(.96);
    pointer-events: none;
    transition: opacity .25s cubic-bezier(.2, .8, .3, 1), transform .25s cubic-bezier(.2, .8, .3, 1);
}
.a11y-panel.open { opacity: 1; transform: none; pointer-events: auto; }
/* phones: the button is near the screen's left edge - pin the dropdown
   to the viewport edges so it's never cut off and stays fully readable */
@media (max-width: 640px) {
    .a11y-panel {
        position: fixed;
        top: 66px; left: 10px; right: 10px;
        width: auto; max-width: none;
    }
}

/* ---------- scroll-to-top (transparent glass, appears on scroll) ---------- */
.to-top {
    position: fixed;
    bottom: 22px; left: 22px;
    z-index: 60;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgba(99, 102, 241, .45);
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    color: var(--primary);
    font-size: 1.15rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(14px);
    pointer-events: none;
    transition: opacity .3s, transform .3s, background .3s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--grad-brand); color: #fff; border-color: transparent; }
[data-theme="dark"] .to-top { background: rgba(20, 25, 50, .4); color: #a5b4fc; }
.a11y-panel h4 {
    margin: 0 0 13px;
    display: flex; align-items: center; gap: 8px;
    color: var(--ink); font-size: 1rem;
}
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.a11y-opt {
    border: 1.5px solid var(--line);
    background: transparent;
    border-radius: 13px;
    padding: 11px 8px;
    font-family: var(--font); font-size: .8rem; font-weight: 700;
    color: var(--ink-soft);
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.a11y-opt:hover { transform: translateY(-2px); border-color: var(--primary-light); }
.a11y-opt.on {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(99, 102, 241, .4);
}
.a11y-opt .ic { font-size: 1.15rem; }
.a11y-reset {
    width: 100%; margin-top: 11px;
    border: 1.5px dashed var(--line);
    background: transparent;
    border-radius: 12px;
    padding: 9px;
    font-family: var(--font); font-size: .82rem; font-weight: 700;
    color: var(--ink-faint);
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.a11y-reset:hover { color: var(--danger); border-color: var(--danger); }
.a11y-statement {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; margin-top: 9px;
    background: var(--grad-brand); color: #fff;
    border-radius: 12px; padding: 11px;
    font-weight: 800; font-size: .85rem;
    box-shadow: 0 6px 16px rgba(99, 102, 241, .35);
    transition: transform .2s, box-shadow .2s;
}
.a11y-statement:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(99, 102, 241, .5); }

/* a11y effect classes (on <html>) */
html.a11y-fs1 { font-size: 112.5%; }
html.a11y-fs2 { font-size: 125%; }
html.a11y-links a { text-decoration: underline !important; }
html.a11y-gray body { filter: grayscale(1); }
html.a11y-contrast {
    --ink: #000; --ink-soft: #111827; --ink-faint: #374151;
    --bg: #fff; --card: #fff; --line: #6b7280;
}
html.a11y-contrast[data-theme="dark"] {
    --ink: #fff; --ink-soft: #f3f4f6; --ink-faint: #d1d5db;
    --bg: #000; --card: #0a0a0a; --line: #9ca3af;
}
html.a11y-contrast .ambient { display: none; }
html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after {
    animation: none !important;
    transition: none !important;
}
html.a11y-noanim .reveal { opacity: 1; transform: none; }
html.a11y-font body, html.a11y-font body * { font-family: Arial, 'Segoe UI', sans-serif !important; letter-spacing: .015em; }
html.a11y-heads h1, html.a11y-heads h2, html.a11y-heads h3, html.a11y-heads h4 {
    background: rgba(250, 204, 21, .35) !important;
    outline: 2px solid rgba(202, 138, 4, .6);
    border-radius: 4px;
    padding: 2px 8px;
}
html.a11y-cursor, html.a11y-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'><path d='M5 2l14 12-6 1 3.5 6-2.6 1.4L10.5 16 6 20z' fill='black' stroke='white' stroke-width='1.4'/></svg>") 4 2, auto !important;
}

/* ============================================================
   Admin live-edit mode (lock button, login modal, pencils, panel)
   ============================================================ */
.admin-lock {
    margin-inline-start: auto;
    width: 30px; height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: #8b91bd;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: .5;
    transition: opacity .25s, color .25s, transform .25s, background .25s;
    flex: 0 0 auto;
}
.admin-lock:hover { opacity: 1; color: #fff; background: var(--grad-brand); border-color: transparent; transform: translateY(-2px); }
.admin-lock svg { width: 16px; height: 16px; }
.footer-meta { position: relative; }

/* modal (login + field editor) */
.admin-modal-ov {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(8, 6, 22, .62);
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; transition: opacity .25s;
}
.admin-modal-ov.open { opacity: 1; }
.admin-modal {
    width: 380px; max-width: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 26px 24px;
    text-align: center;
    position: relative;
    transform: translateY(16px) scale(.96);
    transition: transform .28s cubic-bezier(.2, .8, .3, 1);
    backdrop-filter: blur(20px);
}
.admin-modal-ov.open .admin-modal { transform: none; }
.am-x {
    position: absolute; top: 12px; inset-inline-end: 14px;
    background: none; border: 0; color: var(--ink-faint);
    font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.am-x:hover { color: var(--danger); }
.am-emblem {
    width: 58px; height: 58px; margin: 0 auto 12px;
    border-radius: 17px;
    background: var(--grad-brand);
    display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 10px 26px rgba(99, 102, 241, .5);
}
.am-emblem svg { width: 30px; height: 30px; }
.admin-modal h3 { margin: 0 0 4px; color: var(--ink); }
.am-sub { color: var(--ink-soft); font-size: .9rem; margin: 0 0 16px; }
.am-err {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #dc2626;
    border-radius: 11px; padding: 9px 12px;
    font-size: .85rem; font-weight: 600;
    margin-bottom: 13px;
}
.am-form { display: grid; gap: 12px; text-align: start; }
.am-form label { display: grid; gap: 5px; font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.am-form input, .fe-input {
    font-family: var(--font); font-size: .95rem;
    padding: 11px 13px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    color: var(--ink);
    width: 100%; box-sizing: border-box;
}
.am-form input:focus, .fe-input:focus { outline: 0; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.am-go { width: 100%; margin-top: 4px; }
.am-console { display: inline-block; margin-top: 15px; font-size: .85rem; font-weight: 700; color: var(--primary); }

/* field editor modal */
.fe-modal { width: 520px; max-width: 100%; text-align: start; position: relative; display: flex; flex-direction: column; }
.fe-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fe-modal-head h3 { margin: 0; text-align: start; }
.fe-modal .am-x { position: static; }
.fe-field-host { flex: 1; min-height: 0; display: flex; }
.fe-input { width: 100%; box-sizing: border-box; margin-bottom: 14px; resize: vertical; }
textarea.fe-input { min-height: 90px; }
.fe-actions { display: flex; gap: 10px; justify-content: flex-start; }

/* rich WYSIWYG editor */
.fe-rich { display: flex; flex-direction: column; width: 100%; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: var(--bg); }
.fe-toolbar { display: flex; flex-wrap: wrap; gap: 3px; padding: 7px; background: var(--card); border-bottom: 1px solid var(--line); }
.fe-tb {
    min-width: 32px; height: 30px; padding: 0 7px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg); color: var(--ink);
    font-size: .82rem; font-weight: 800; cursor: pointer;
    font-family: var(--font);
    transition: background .15s, border-color .15s;
}
.fe-tb:hover { background: var(--grad-brand); color: #fff; border-color: transparent; }
.fe-area {
    flex: 1; min-height: 170px; max-height: 50vh; overflow-y: auto;
    padding: 13px 15px; line-height: 1.6; color: var(--ink);
    outline: 0; font-size: .95rem;
}
.fe-area:focus { box-shadow: inset 0 0 0 2px rgba(99,102,241,.25); }
.fe-area img { max-width: 100%; border-radius: 10px; margin: 6px 0; }
.fe-area h2, .fe-area h3 { margin: .5em 0 .3em; }

/* RTL-correct resize handle (bottom-start corner = left in RTL) */
.fe-resize {
    position: absolute; bottom: 4px; inset-inline-start: 4px;
    width: 18px; height: 18px; cursor: nesw-resize;
    background:
        linear-gradient(135deg, transparent 50%, var(--ink-faint) 50%, var(--ink-faint) 60%, transparent 60%,
        transparent 72%, var(--ink-faint) 72%, var(--ink-faint) 82%, transparent 82%);
    opacity: .6; border-radius: 3px;
}
.fe-resize:hover { opacity: 1; }

/* menu manager rows */
/* The modal is a flex column capped to the viewport: only the .mm-scroll
   region (rows + "add") scrolls, while the head and the action bar stay
   pinned - so the big save/cancel buttons can never ride up over the
   "➕ פריט חדש" button regardless of how many items or how short the screen. */
.mm-modal { max-height: 88vh; }
.mm-scroll { flex: 1 1 auto; min-height: 80px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.mm-list { display: grid; gap: 8px; }
.mm-add { margin-top: 10px; padding: 9px 16px; font-size: .85rem; }
.mm-modal .fe-actions {
    flex: 0 0 auto; margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--line);
}
.mm-modal .fe-actions .btn { padding: 9px 18px; font-size: .85rem; }
.mm-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg); border: 1.5px solid var(--line);
    border-radius: 11px; padding: 8px 10px;
}
.mm-row.drag { opacity: .6; border-style: dashed; border-color: var(--primary); box-shadow: var(--shadow-lg); }
/* touch-action:none keeps a finger-drag on the grip from scrolling the
   list instead of reordering. */
.mm-grip { cursor: grab; color: var(--ink-faint); font-size: 1.15rem; flex: 0 0 auto;
    touch-action: none; user-select: none; padding: 2px 2px; line-height: 1; }
.mm-grip:active { cursor: grabbing; }
.mm-label, .mm-href {
    font-family: var(--font); font-size: .85rem;
    border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
    background: var(--card); color: var(--ink); min-width: 0;
}
.mm-label { flex: 1.2; } .mm-href { flex: 1; }
.mm-del { background: none; border: 0; cursor: pointer; font-size: 1rem; flex: 0 0 auto; opacity: .7; }
.mm-del:hover { opacity: 1; }

@media (max-width: 600px) {
    .fe-modal { width: 100%; height: auto; }
    .fe-resize { display: none; }
    .mm-modal { max-height: 90vh; }
    /* one tidy item per card on phones: grip + delete share the top line,
       the two inputs go full-width below - comfortable touch targets. */
    .mm-row { flex-wrap: wrap; gap: 7px 8px; }
    .mm-grip { order: 1; font-size: 1.3rem; padding: 4px; }
    .mm-del  { order: 2; margin-inline-start: auto; font-size: 1.15rem; }
    .mm-label { order: 3; flex: 1 1 100%; padding: 9px 10px; }
    .mm-href  { order: 4; flex: 1 1 100%; padding: 9px 10px; }
}

/* pencils on editable items */
body.hw-edit-mode [data-edit],
body.hw-edit-mode [data-edit-id] {
    outline: 2px dashed rgba(99, 102, 241, .55); outline-offset: 4px; border-radius: 6px;
    /* cards/sections use overflow:hidden which would CLIP the pencil -
       force it visible while editing so the pencil is never hidden */
    overflow: visible !important;
}
.hw-pencil {
    position: absolute; top: 6px; inset-inline-start: 6px;
    z-index: 45;
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid #fff;
    background: var(--grad-brand);
    cursor: pointer; font-size: .8rem; line-height: 1;
    box-shadow: 0 5px 14px rgba(99, 102, 241, .55);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s;
}
.hw-pencil:hover { transform: scale(1.18); }

/* media library modal */
.ml-modal { width: 560px; max-width: 100%; text-align: start; }
.ml-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ml-hint { color: var(--ink-soft); font-size: .85rem; }
.ml-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px; max-height: 52vh; overflow-y: auto; padding: 2px;
}
.ml-loading, .ml-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-faint); padding: 26px 0; }
.ml-cell {
    border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden;
    background: var(--bg); cursor: pointer; padding: 0; aspect-ratio: 1;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ml-cell:hover { transform: translateY(-2px); border-color: var(--primary-light); box-shadow: var(--shadow-md); }
.ml-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) {
    .ml-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}

/* toolbar popover (link / color) - replaces native prompt() */
.fe-pop {
    position: fixed; z-index: 130;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
    padding: 13px;
    width: 248px; max-width: calc(100vw - 16px);
}
.fe-pop-title { font-size: .82rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 9px; }
.fe-pop-row { display: flex; gap: 7px; align-items: center; }
.fe-pop-input {
    flex: 1; min-width: 0; font-family: var(--font); font-size: .9rem;
    border: 1.5px solid var(--line); border-radius: 9px; padding: 8px 10px;
    background: var(--bg); color: var(--ink);
}
.fe-pop-input:focus { outline: 0; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.fe-pop-color { width: 38px; height: 38px; border: 0; border-radius: 9px; background: none; cursor: pointer; padding: 0; flex: 0 0 auto; }
.fe-pop-ok {
    flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 9px;
    background: var(--grad-brand); color: #fff; font-size: 1rem; font-weight: 900; cursor: pointer;
}
.fe-sw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.fe-sw {
    width: 100%; aspect-ratio: 1; border-radius: 8px; cursor: pointer;
    border: 1.5px solid rgba(0, 0, 0, .12);
    transition: transform .15s;
}
.fe-sw:hover { transform: scale(1.15); }
.fe-pop-lbl { display: block; font-size: .76rem; font-weight: 700; color: var(--ink-soft); margin: 9px 0 4px; }
.fe-pop .fe-pop-input { width: 100%; box-sizing: border-box; }
.fe-pop-check { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-top: 11px; cursor: pointer; }
.fe-pop-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.fe-pop-actions { display: flex; gap: 8px; margin-top: 12px; }
.fe-pop-ok-wide { width: auto; flex: 1; padding: 0 14px; height: 38px; }
.fe-pop-rm {
    flex: 0 0 auto; height: 38px; padding: 0 14px; border-radius: 9px; cursor: pointer;
    border: 1.5px solid rgba(239,68,68,.4); background: rgba(239,68,68,.1); color: var(--danger);
    font-family: var(--font); font-weight: 700; font-size: .82rem;
}
.fe-pop-rm:hover { background: var(--danger); color: #fff; border-color: transparent; }

/* draggable tool panel */
.hw-edit-panel {
    position: fixed; top: 90px; inset-inline-start: 18px;
    z-index: 110;
    width: 300px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    overflow: hidden;
    /* RTL panel: keep the box in its own direction so the native resize
       grip lands at the bottom-LEFT (inline-end) corner - the inner corner
       away from the screen's right edge, which is the natural place to grab
       in Hebrew. The panel is pinned to the right via inset-inline-start
       (=right under RTL), so growing it pushes the left edge inward toward
       the grip. (The old direction:ltr put the grip at the pinned right
       edge, so resizing fought the anchor and felt broken.) */
    direction: rtl;
    resize: both;
    min-width: 240px; min-height: 90px; max-width: 92vw; max-height: 86vh;
    /* flex column so the body fills (and scrolls only when needed) the
       panel's height - dragging the resize grip taller stretches the whole
       menu instead of leaving a fixed-height body with an inner scrollbar. */
    display: flex; flex-direction: column;
}
.hep-head { flex: 0 0 auto; }
.hep-head {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--grad-brand);
    color: #fff; font-weight: 800;
    padding: 11px 15px;
    cursor: move;
    user-select: none;
}
.hep-min { background: rgba(255,255,255,.2); border: 0; color: #fff; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.hw-edit-panel.mini .hep-body { display: none; }
.hw-edit-panel.mini { resize: none; height: auto !important; }
.hep-body { padding: 15px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.hep-who { font-size: .85rem; color: var(--ink-soft); margin-bottom: 8px; }
.hep-hint { font-size: .8rem; color: var(--ink-faint); margin: 0 0 12px; line-height: 1.5; }
.hep-fields { display: grid; gap: 7px; margin-bottom: 13px; }
.hep-field {
    text-align: start; font-family: var(--font); font-size: .82rem; font-weight: 700;
    border: 1.5px solid var(--line); background: transparent; color: var(--ink-soft);
    border-radius: 10px; padding: 9px 12px; cursor: pointer;
    transition: border-color .2s, color .2s, transform .2s;
}
.hep-field:hover { border-color: var(--primary-light); color: var(--primary); transform: translateX(-3px); }
.hep-btn { display: block; width: 100%; text-align: center; box-sizing: border-box;
    font-family: var(--font); font-size: .85rem; font-weight: 800; cursor: pointer;
    border-radius: 11px; padding: 11px; margin-top: 8px; border: 0; }
.hep-console { background: rgba(99, 102, 241, .12); color: var(--primary); }
.hep-console:hover { background: rgba(99, 102, 241, .22); }
.hep-logout { background: rgba(239, 68, 68, .12); color: var(--danger); border: 1.5px solid rgba(239,68,68,.3); }
.hep-logout:hover { background: var(--danger); color: #fff; border-color: transparent; }

/* toast */
.hw-toast {
    position: fixed; bottom: 26px; inset-inline: 0; margin: 0 auto;
    width: max-content; max-width: 90vw; z-index: 130;
    background: #111827; color: #fff;
    padding: 11px 22px; border-radius: 999px;
    font-weight: 700; font-size: .9rem;
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(14px);
    transition: opacity .3s, transform .3s;
}
.hw-toast.show { opacity: 1; transform: none; }
.hw-toast.ok { background: linear-gradient(135deg, #10b981, #059669); }

@media (max-width: 600px) {
    /* expanded = bottom sheet; capped height so it never covers the page */
    .hw-edit-panel { inset-inline: 10px; width: auto; top: auto; bottom: 10px; resize: none; max-height: 70vh; }
    .hw-edit-panel .hep-body { max-height: 56vh; }
    /* minimised = small bar pinned to the TOP (was stuck at the bottom).
       inset-inline-start (=right under RTL) keeps it in the top-right. */
    .hw-edit-panel.mini { top: 78px; bottom: auto; inset-inline-start: 10px; inset-inline-end: auto; width: auto; }
}

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.25, .8, .3, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-sub { margin-inline: auto; }
    .hero-actions, .hero-trust { justify-content: center; }
    .security-band { grid-template-columns: 1fr; text-align: center; }
    .sec-points li { text-align: right; }
    .detail, .detail:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
    .detail:nth-child(even) .detail-visual { order: 0; }
    .download-band { grid-template-columns: 1fr; text-align: center; }
    .notif-wrap { grid-template-columns: 1fr; }
    .demo-wrap { grid-template-columns: 1fr; }
    .dl-head { flex-direction: column; }
    .download-band > div > p { margin-inline: auto; }
    .store-badges { justify-content: center; }
    .dl-phone-art { display: none; }
}
@media (max-width: 820px) {
    .nav-links {
        position: fixed; top: 72px; inset-inline: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        /* glass, but solid enough to stay readable over the animated
           backdrop (user: "קצת פחות שקוף") */
        background: rgba(15, 12, 38, .84);
        backdrop-filter: blur(26px) saturate(1.3);
        -webkit-backdrop-filter: blur(26px) saturate(1.3);
        padding: 10px 24px 22px;
        transform: translateY(-130%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 0 24px 40px rgba(0, 0, 0, .35);
    }
    .nav.on-light .nav-links { background: rgba(255, 255, 255, .98); }
    .nav.open .nav-links { transform: translateY(0); }
    .nav-links a { padding: 13px 4px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
    .nav.on-light .nav-links a { border-color: var(--line); }
    .nav-links a::after { display: none; }
    .nav-cta { margin-top: 14px; }
    .nav-burger { display: block; }
    .nav-theme { margin-inline-start: auto; width: 38px; height: 38px; }
    .section { padding: 44px 0; }
    .hero { padding: 108px 0 64px; }
}

/* ── App screenshots showcase grid (v3.07.950) ─────────────────── */
/* Responsive wrap grid - NO horizontal rail (the old rail was clipped on
   mobile + had no touch scroll). Tiles flow into columns and stack on phones,
   so every screenshot is fully visible and the page scrolls normally. */
.app-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
    justify-content: center;
    align-items: start;
}
.app-shot {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transition: transform .35s ease, box-shadow .35s ease;
}
.app-shot:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary); }
.app-shot img { display: block; width: 100%; height: auto; }
.app-cap {
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink-soft);
    padding: 9px 8px 11px;
}
@media (max-width: 620px) {
    .app-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .app-shot { transition: none; }
    .app-shot:hover { transform: none; }
}