/* מסך הפתיחה של הפורטל, בשפה העיצובית של liorsstudio.com:
   רקע עם זוהר סגול, כרטיסים מעוגלים, לוגו בריבוע לבן, Rubik. הצבעים נלקחו מהאתר ומצבעי האפליקציה.
   כל המשתנים עם קידומת lp- כדי לא להתנגש בעיצוב של האפליקציה בתוך הפורטל. */

:root {
  --lp-bg: #fdfcff;
  --lp-surface: #ffffff;
  --lp-text: #2a2438;
  --lp-muted: #6e6884;
  --lp-primary: #7a62c4;
  --lp-on-primary: #ffffff;
  --lp-border: #ece8f5;

  /* צבעי CourierFinance */
  --lp-g1: #1D4ED8;
  --lp-g2: #2563EB;
  --lp-glow: rgba(96, 165, 250, 0.7);
  --lp-glow2: rgba(22, 163, 74, 0.45);
  --lp-btn: #DBEAFE;
  --lp-btn-ink: #1D4ED8;
  --lp-income: #16A34A;
  --lp-expense: #DC2626;
  --lp-purple: #5B3FE4;
  --lp-error: #fecaca;
  --lp-blob-a: rgba(122, 98, 196, 0.28);
  --lp-blob-b: rgba(37, 99, 235, 0.22);
  --lp-blob-c: rgba(22, 163, 74, 0.16);

  --lp-google-blue: #4285F4;
  --lp-google-green: #34A853;
  --lp-google-yellow: #FBBC05;
  --lp-google-red: #EA4335;
}

html[data-theme="dark"] {
  --lp-bg: #16121f;
  --lp-surface: #1e1a29;
  --lp-text: #efebf7;
  --lp-muted: #b1a9c6;
  --lp-primary: #b8a4ea;
  --lp-on-primary: #1c1430;
  --lp-border: #302a40;
  --lp-blob-a: rgba(184, 164, 234, 0.2);
  --lp-blob-b: rgba(37, 99, 235, 0.28);
  --lp-blob-c: rgba(22, 163, 74, 0.18);
}

.lp {
  position: relative; overflow: hidden; min-height: 100vh; display: flex;
  background: var(--lp-bg); color: var(--lp-text); line-height: 1.65;
}

/* ─── רקע חי: שלושה כתמי צבע שנעים לאט ─── */
.lp-blobs i { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.lp-blobs .b1 { width: 520px; height: 520px; background: var(--lp-blob-a); top: -160px; inset-inline-end: -120px; animation: lp-drift-a 18s ease-in-out infinite alternate; }
.lp-blobs .b2 { width: 460px; height: 460px; background: var(--lp-blob-b); bottom: -180px; inset-inline-start: -120px; animation: lp-drift-b 22s ease-in-out infinite alternate; }
.lp-blobs .b3 { width: 320px; height: 320px; background: var(--lp-blob-c); top: 40%; inset-inline-start: 38%; animation: lp-drift-a 26s ease-in-out infinite alternate-reverse; }
@keyframes lp-drift-a { to { transform: translate(-70px, 90px) scale(1.15); } }
@keyframes lp-drift-b { to { transform: translate(80px, -70px) scale(1.1); } }

.lp-theme {
  position: absolute; z-index: 2; top: 16px; inset-inline-end: 16px;
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  border: 1px solid var(--lp-border); border-radius: 999px; background: var(--lp-surface); color: var(--lp-muted);
}
.lp-theme:hover { color: var(--lp-primary); border-color: var(--lp-primary); }

.lp-stage {
  position: relative; z-index: 1; width: 100%; max-width: 1020px; margin: auto; padding: 56px 20px 28px;
  display: flex; flex-direction: column; align-items: center;
}
.lp-hero { width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 40px; }
.lp-hero-single { grid-template-columns: minmax(0, 420px); justify-content: center; }

/* ─── צד הטקסט ─── */
.lp-copy > * { animation: lp-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.lp-copy > :nth-child(2) { animation-delay: 0.08s; }
.lp-copy > :nth-child(3) { animation-delay: 0.16s; }
.lp-copy > :nth-child(4) { animation-delay: 0.24s; }
.lp-copy > :nth-child(5), .lp-copy > :nth-child(6) { animation-delay: 0.32s; }
.lp-copy > :nth-child(7) { animation-delay: 0.4s; }
@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* כותרת האפליקציה: בדסקטופ לוגו ושם בשורה אחת (ב), בטלפון בטור ממורכז (א) */
.lp-brand-row { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 24px; text-align: start; }
.lp-logo-sm { width: 64px; height: 64px; padding: 4px; border-radius: 18px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); display: inline-flex; flex: none; }
.lp-logo-sm img { width: 100%; height: 100%; border-radius: 14px; object-fit: contain; }
.lp-brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.lp-brand-text b { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.lp-brand-text a { margin-top: 3px; font-size: 14px; color: var(--lp-muted); text-decoration: none; }
.lp-brand-text a:hover { color: var(--lp-primary); text-decoration: underline; }

.lp-copy h1 { margin: 0 0 16px; font-size: clamp(36px, 6vw, 56px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.lp-grad {
  background: linear-gradient(100deg, var(--lp-g2), var(--lp-income));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.lp-lead { margin: 0 0 26px; max-width: 46ch; font-size: 18px; color: var(--lp-muted); }

.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px;
  padding: 10px 22px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 500;
  background: var(--lp-btn); color: var(--lp-btn-ink); cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease;
}
.lp-btn:hover { filter: brightness(1.05); }
.lp-btn:active { transform: scale(0.99); }
.lp-btn-main {
  position: relative; overflow: hidden; min-height: 54px; padding: 12px 30px; font-size: 18px; font-weight: 600;
  background: linear-gradient(225deg, var(--lp-g1), var(--lp-g2)); color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--lp-g2) 45%, transparent);
}
/* הבהוב אור שעובר על הכפתור */
.lp-btn-main::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px; inset-inline-start: -80px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); animation: lp-shine 3.6s ease-in-out 1.2s infinite;
}
@keyframes lp-shine { 0% { inset-inline-start: -80px; } 40%, 100% { inset-inline-start: calc(100% + 40px); } }
.lp-btn-main svg { background: #fff; border-radius: 50%; padding: 3px; width: 26px; height: 26px; }
.g-blue { fill: var(--lp-google-blue); }
.g-green { fill: var(--lp-google-green); }
.g-yellow { fill: var(--lp-google-yellow); }
.g-red { fill: var(--lp-google-red); }
.lp-error { margin: 14px 0 0; padding: 8px 14px; border-radius: 10px; background: color-mix(in srgb, var(--lp-expense) 14%, transparent); color: var(--lp-expense); font-size: 15px; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.d-green { background: var(--lp-income); }
.d-red { background: var(--lp-expense); }
.d-blue { background: var(--lp-g2); }
.d-purple { background: var(--lp-purple); }
.lp-hint { margin: 18px 0 0; max-width: 46ch; font-size: 14px; color: var(--lp-muted); }

/* ─── תצוגה מקדימה מונפשת ─── */
.lp-demo { position: relative; padding: 28px 20px; animation: lp-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
.lp-mock {
  position: relative; max-width: 340px; margin: 0 auto; padding: 18px; border-radius: 22px;
  background: var(--lp-surface); border: 1px solid var(--lp-border);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--lp-g2) 25%, transparent), 0 2px 8px rgba(0, 0, 0, 0.06);
  transform: rotate(-3deg); animation: lp-float 6s ease-in-out infinite;
}
@keyframes lp-float { 50% { transform: rotate(-3deg) translateY(-10px); } }
.lp-mock-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lp-mock-logo { width: 32px; height: 32px; padding: 2px; border-radius: 10px; background: #fff; border: 1px solid var(--lp-border); display: inline-flex; }
.lp-mock-logo img { width: 100%; height: 100%; border-radius: 8px; object-fit: contain; }
.lp-mock-head b { font-size: 16px; }
.lp-mock-head em { margin-inline-start: auto; font-style: normal; font-size: 11px; color: var(--lp-muted); border: 1px dashed var(--lp-border); border-radius: 999px; padding: 1px 8px; }
.lp-mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.lp-mock-stats div { padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--lp-primary) 7%, transparent); }
.lp-mock-stats small { display: block; font-size: 11px; color: var(--lp-muted); }
.lp-mock-stats b { font-size: 18px; }
.c-inc { color: var(--lp-income); }
.c-exp { color: var(--lp-expense); }
.c-pri { color: var(--lp-g2); }

.lp-mock-bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-bottom: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--lp-border); }
.lp-mock-bars i {
  flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; transform-origin: bottom;
  background: linear-gradient(180deg, var(--lp-income), color-mix(in srgb, var(--lp-income) 55%, var(--lp-g2)));
  animation: lp-grow 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.5s + var(--i) * 0.09s);
}
.lp-mock-bars i:nth-child(3n) { background: linear-gradient(180deg, var(--lp-g2), color-mix(in srgb, var(--lp-g2) 60%, var(--lp-purple))); }
@keyframes lp-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.lp-mock-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.lp-mock-row span:nth-child(2) { flex: 1; }
.lp-mock-dot { width: 10px; height: 10px; border-radius: 4px; }

/* בועות צפות סביב התצוגה */
.lp-pill {
  position: absolute; z-index: 2; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--lp-surface); border: 1px solid var(--lp-border); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  animation: lp-bob 5s ease-in-out infinite;
}
.lp-pill.p1 { top: 6px; inset-inline-start: 0; color: var(--lp-income); animation-delay: 0s; }
.lp-pill.p2 { top: 46%; inset-inline-end: -6px; color: var(--lp-expense); animation-delay: 1.2s; }
.lp-pill.p3 { bottom: 4px; inset-inline-start: 14px; color: var(--lp-g2); animation-delay: 2.4s; }
@keyframes lp-bob { 50% { transform: translateY(-9px); } }

/* ─── קישורים ─── */
.lp-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 36px; font-size: 14px; }
.lp-links a { color: var(--lp-muted); text-decoration: none; }
.lp-links a:hover { color: var(--lp-primary); text-decoration: underline; }

/* ─── כרטיס "לא נמצא חשבון" ─── */
.lp-card {
  position: relative; overflow: hidden; width: 100%; color: #fff; text-align: center;
  border-radius: 20px; padding: 32px 26px 28px; display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(circle at 0% 0%, var(--lp-glow) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, var(--lp-glow2) 0, transparent 50%),
    linear-gradient(225deg, var(--lp-g1), var(--lp-g2));
  box-shadow: 0 18px 44px color-mix(in srgb, var(--lp-g2) 35%, transparent);
  animation: lp-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.lp-logo { width: 84px; height: 84px; padding: 6px; border-radius: 22px; display: inline-flex; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); margin-bottom: 16px; }
.lp-logo img { width: 100%; height: 100%; border-radius: 16px; object-fit: contain; display: block; }
.lp-card h2 { margin: 0; font-size: 26px; font-weight: 700; }
.lp-card p { margin: 14px 0 22px; max-width: 34ch; line-height: 1.7; color: rgba(255, 255, 255, 0.92); }
.lp-card .lp-btn { width: 100%; }

.lp button:focus-visible, .lp a:focus-visible { outline: 3px solid var(--lp-primary); outline-offset: 3px; border-radius: 8px; }
.lp-btn-main:focus-visible { border-radius: 999px; }

/* ─── טלפון: טור אחד, התצוגה מתחת ─── */
@media (max-width: 820px) {
  .lp-stage { padding-top: 64px; }
  .lp-hero { grid-template-columns: 1fr; gap: 20px; }
  .lp-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .lp-brand-row { flex-direction: column; gap: 8px; text-align: center; }
  .lp-logo-sm { width: 72px; height: 72px; border-radius: 20px; }
  .lp-logo-sm img { border-radius: 16px; }
  .lp-brand-text { align-items: center; }
  .lp-brand-text b { font-size: 24px; }
  .lp-demo { padding: 24px 6px 8px; }
  .lp-btn-main { width: 100%; max-width: 360px; }
}

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