/* ==========================================================================
   Ποδαρικό — Αρχική σελίδα (επισκέπτες). «Το κατώφλι»: μία ιστορία σε σκηνές.
   Mobile-first · light/dark από τα tokens του styles.css · prefers-reduced-motion.
   Όλα τα classes ξεκινούν με lp- για να μη συγκρούονται με το υπόλοιπο site.
   ========================================================================== */

.lp { overflow-x: clip; }
/* τα grid παιδιά δεν «φουσκώνουν» από nowrap περιεχόμενο (π.χ. οριζόντια κύλιση παραδειγμάτων) */
.lp-hero__grid > *, .lp-rev > *, .lp-how > *, .lp-priv > *, .lp-calc > *, .lp-calc__in > * { min-width: 0; }
.lp .container { position: relative; }
body.lp-page .footer { margin-top: 0; border-top: 1px solid color-mix(in srgb, #fff 10%, transparent); }

/* ---- ρόλος: ό,τι αφορά μόνο τη μία πλευρά ---- */
body[data-role="own"] .only-seek, body:not([data-role="own"]) .only-own { display: none !important; }

/* ---- ρυθμός σκηνών ---- */
.lp-sec { padding: 64px 0; position: relative; }
@media (min-width: 900px) { .lp-sec { padding: 104px 0; } }
.lp-sec--sunk { background: var(--bg-sunk); }
.lp-sec--deep { background: var(--bg-deep); color: #F3EADD; }
.lp-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
@media (min-width: 900px) { .lp-head { margin-bottom: 52px; } }
.lp-head--left { margin-left: 0; text-align: left; }
.lp-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-3); margin-bottom: 14px; }
.lp-kicker b { font-family: var(--font-display); font-size: .9rem; letter-spacing: .02em; color: var(--brand); }
.lp-kicker::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.lp-sec--deep .lp-kicker { color: var(--gold-2); }
.lp-sec--deep .lp-kicker b { color: #F3EADD; }
.lp h2 { font-size: clamp(1.85rem, 4.4vw, 3.05rem); line-height: 1.06; letter-spacing: -.03em; }
.lp-sec--deep h2 { color: #FBF4EA; }
.lp-sec--deep h2 em { color: var(--gold-2); }
.lp-lead { font-size: 1.08rem; line-height: 1.65; color: var(--ink-2); margin: 14px auto 0; max-width: 60ch; }
.lp-head--left .lp-lead { margin-left: 0; }
.lp-sec--deep .lp-lead { color: rgba(243, 234, 221, .78); }

/* ---- εμφάνιση με το scroll ---- */
.lp-in { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.lp-in.is-in { opacity: 1; transform: none; }
.lp-in[data-d="1"] { transition-delay: .08s; } .lp-in[data-d="2"] { transition-delay: .16s; } .lp-in[data-d="3"] { transition-delay: .24s; }

/* ==========================================================================
   01 · ΚΑΤΩΦΛΙ (hero)
   ========================================================================== */
.lp-hero { position: relative; padding: 22px 0 44px; isolation: isolate; }
@media (min-width: 900px) { .lp-hero { padding: 54px 0 88px; } }
.lp-hero::before { content: ''; position: absolute; inset: -80px 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 420px at 88% 8%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(640px 380px at 0% 30%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%); }
.lp-hero__grid { display: grid; gap: 34px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .lp-hero__grid { grid-template-columns: 1.04fr .96fr; gap: 60px; } }

.lp-where { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--ink-3); margin-bottom: 16px; }
.lp-where i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); animation: lp-ping 2.2s ease-out infinite; }
@keyframes lp-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }

/* διακόπτης ρόλου */
.lp-role { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); margin-bottom: 22px; width: 100%; max-width: 380px; }
.lp-role button { position: relative; z-index: 1; border: 0; background: none; padding: 11px 14px; border-radius: 999px; font: 700 .95rem/1 var(--font-display); color: var(--ink-2); cursor: pointer; transition: color .25s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.lp-role button svg { width: 17px; height: 17px; flex: none; }
.lp-role button[aria-pressed="true"] { color: var(--on-brand); }
.lp-role__thumb { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: linear-gradient(180deg, var(--brand-fill-2), var(--brand-fill)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 16px -6px color-mix(in srgb, var(--brand-fill) 70%, transparent); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
body[data-role="own"] .lp-role__thumb { transform: translateX(100%); background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
body[data-role="own"] .lp-role button[aria-pressed="true"] { color: var(--on-gold); }

.lp-h1 { font-size: clamp(2.35rem, 7.4vw, 4.35rem); line-height: 1.01; letter-spacing: -.04em; margin: 0; font-weight: 800; }
.lp-h1 em { color: var(--brand); }
.lp-h1 .lp-u { position: relative; white-space: nowrap; }
.lp-h1 .lp-u::after { content: ''; position: absolute; left: 2%; right: 2%; bottom: .02em; height: .1em; border-radius: 99px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transform-origin: left; transform: scaleX(0); animation: lp-under 1s .5s cubic-bezier(.2, .8, .2, 1) forwards; opacity: .75; z-index: -1; }
@keyframes lp-under { to { transform: scaleX(1); } }
.lp-sub { font-size: 1.1rem; line-height: 1.6; color: var(--ink-2); margin: 16px 0 0; max-width: 40ch; }
.lp-sub strong { color: var(--ink); }

/* δύο ζωντανοί αριθμοί */
.lp-hook { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 22px 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--bg-elev) 80%, transparent); backdrop-filter: blur(6px); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .2s ease, box-shadow .2s ease; }
.lp-hook.is-pending { visibility: hidden; }
.lp-hook:hover { text-decoration: none; border-color: var(--gold-2); box-shadow: var(--shadow); }
.lp-hook__cell { padding: 14px 16px; }
.lp-hook__cell + .lp-hook__cell { border-left: 1px solid var(--line); }
.lp-hook__n { display: block; font: 800 clamp(1.6rem, 5vw, 2.1rem)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--brand); }
.lp-hook__cell--gold .lp-hook__n { color: var(--gold-3); }
.lp-hook__l { display: block; font-size: .8rem; line-height: 1.35; color: var(--ink-2); margin-top: 6px; }
.lp-hook__cta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .82rem; font-weight: 700; color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
.lp-hook__cta span:last-child { transition: transform .2s ease; }
.lp-hook:hover .lp-hook__cta span:last-child { transform: translateX(4px); }

/* έξυπνο κουτί */
.smart { margin-top: 18px; }
.smart__box { position: relative; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 8px 8px; box-shadow: var(--shadow); transition: border-color .15s ease, box-shadow .15s ease; }
.smart__box:focus-within { border-color: var(--gold); box-shadow: var(--shadow), var(--glow-gold); }
.smart__input { width: 100%; border: 0; background: transparent; resize: none; font-size: 1.02rem; line-height: 1.5; padding: 10px 10px 4px; min-height: 64px; color: var(--ink); position: relative; z-index: 1; font-family: var(--font-body); }
.smart__input:focus { outline: none; }
.smart__ghost { position: absolute; left: 18px; top: 18px; right: 18px; font-size: 1.02rem; line-height: 1.5; color: var(--ink-3); pointer-events: none; white-space: pre-wrap; z-index: 0; }
.smart__ghost i { display: inline-block; width: 2px; height: 1.1em; background: var(--brand); vertical-align: -.2em; margin-left: 1px; animation: lp-blink 1s steps(2, start) infinite; }
.smart__ghost.hidden { display: none; }
@keyframes lp-blink { to { visibility: hidden; } }
.smart__row { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 4px 4px 2px; }
.smart__examples { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 18px; }
.smart__examples::-webkit-scrollbar { display: none; }
.smart__examples .chip { font-size: .78rem; padding: 6px 11px; cursor: pointer; white-space: nowrap; flex: none; }
.smart__go { flex: none; width: 42px; height: 42px; border-radius: 12px; border: 0; display: grid; place-items: center; cursor: pointer; background: linear-gradient(180deg, var(--brand-fill-2), var(--brand-fill)); color: var(--on-brand); box-shadow: var(--shadow-sm); transition: transform .15s ease; }
.smart__go:hover { transform: translateY(-1px); }
.smart__go svg { width: 18px; height: 18px; }
body[data-role="own"] .smart__go { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--on-gold); }
.smart__result { margin-top: 12px; padding: 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--gold-soft) 60%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); display: grid; gap: 12px; animation: fade .2s ease; }
.smart__actions { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .smart__actions { grid-template-columns: 1fr 1fr; } }
.smart__actions .btn { white-space: normal; text-align: center; }
.smart__actions .btn--suggest { box-shadow: var(--glow-gold); }
.lp-ticks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; padding: 0; list-style: none; font-size: .84rem; color: var(--ink-2); font-weight: 500; }
.lp-ticks li { display: inline-flex; align-items: center; gap: 6px; }
.lp-ticks li::before { content: ''; width: 15px; height: 15px; flex: none; border-radius: 50%; background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.7 11 12 5.4' fill='none' stroke='%234F6F3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }

/* σκηνή ταιριάσματος (δεξιά στο hero) — κάθετη σύνθεση σε ΚΑΘΕ οθόνη: αναζήτηση → σφραγίδα → σπίτι.
   Τίποτα απόλυτα τοποθετημένο πάνω σε άλλο· σταθερά ύψη ώστε να μην «χοροπηδάει» όταν αλλάζει το παράδειγμα. */
.lp-stage { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); border: 1px solid var(--line); background:
    radial-gradient(420px 280px at 50% 50%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 72%),
    linear-gradient(180deg, var(--bg-elev), color-mix(in srgb, var(--bg-sunk) 55%, var(--bg-elev)));
  box-shadow: var(--shadow-lg); padding: 18px 16px 14px; overflow: hidden; }
@media (min-width: 980px) { .lp-stage { padding: 24px 26px 16px; } }
.lp-stage__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lp-stage__dots { display: flex; gap: 5px; }
.lp-stage__dots i { width: 18px; height: 3px; border-radius: 3px; background: var(--line-strong); overflow: hidden; position: relative; }
.lp-stage__dots i.on::after { content: ''; position: absolute; inset: 0; background: var(--brand); }
@keyframes lp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.lp-mcard { position: relative; z-index: 1; width: 100%; min-height: 124px; padding: 14px 16px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; opacity: 0; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
.lp-mcard--seek { transform: translateX(-24px); }
.lp-mcard--home { transform: translateX(24px); }
@media (min-width: 560px) { .lp-mcard { width: 86%; } .lp-mcard--home { align-self: flex-end; } }
.lp-stage.s1 .lp-mcard { opacity: 1; transform: none; }
.lp-mcard__tag { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.lp-mcard--home .lp-mcard__tag { color: var(--gold-3); }
.lp-mcard__tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lp-mcard__t { font: 700 1.02rem/1.3 var(--font-display); margin: 6px 0 2px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-mcard__m { font-size: .8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-mcard__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 10px; }
.lp-mcard__chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.lp-mcard__chips span { font-size: .68rem; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: var(--bg-sunk); color: var(--ink-2); white-space: nowrap; }
.lp-mcard__p { font: 800 1.15rem/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; flex: none; }

/* μέση: σφραγίδα + λόγοι, ενωμένα με διακεκομμένη γραμμή */
.lp-stage__mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; }
.lp-stage__mid::before { content: ''; position: absolute; left: 50%; top: -6px; bottom: -6px; border-left: 2px dashed color-mix(in srgb, var(--gold) 60%, transparent); transform: translateX(-1px); opacity: 0; transition: opacity .4s ease; }
.lp-stage.s2 .lp-stage__mid::before { opacity: 1; }
.lp-seal { position: relative; z-index: 1; width: 96px; height: 96px; flex: none; border-radius: 50%; background: var(--bg-elev); box-shadow: var(--shadow-lg), 0 0 0 7px color-mix(in srgb, var(--gold) 14%, transparent); display: grid; place-items: center; transform: scale(.4); opacity: 0; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1), opacity .3s ease; }
.lp-stage.s3 .lp-seal { transform: scale(1); opacity: 1; }
.lp-seal svg { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); transform: rotate(-90deg); }
.lp-seal circle { fill: none; stroke-width: 6; }
.lp-seal .bg { stroke: var(--bg-sunk); }
.lp-seal .fg { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 251; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1) .15s; }
.lp-seal__in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; }
.lp-seal b { font: 800 1.4rem/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.lp-seal small { display: block; margin-top: 4px; font-size: .64rem; font-weight: 700; color: var(--ink-3); }
.lp-reasons { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 26px; max-width: 100%; }
.lp-reasons span { font-size: .72rem; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.lp-stage.s4 .lp-reasons span { opacity: 1; transform: none; }
.lp-stage.s4 .lp-reasons span:nth-child(2) { transition-delay: .12s; } .lp-stage.s4 .lp-reasons span:nth-child(3) { transition-delay: .24s; }
.lp-stage.out .lp-mcard, .lp-stage.out .lp-seal, .lp-stage.out .lp-reasons span { opacity: 0; transition-duration: .35s; }
.lp-stage__cap { text-align: center; font-size: .72rem; color: var(--ink-3); margin-top: 12px; }
@media (max-width: 420px) { .lp-mcard { padding: 12px 13px; min-height: 118px; } .lp-mcard__t { font-size: .96rem; } .lp-seal { width: 88px; height: 88px; } .lp-seal b { font-size: 1.25rem; } }

/* ==========================================================================
   02 · ΤΩΡΑ ΨΑΧΝΟΥΝ (ροή)
   ========================================================================== */
.lp-ticker { display: flex; align-items: stretch; border-block: 1px solid var(--line); background: var(--bg-elev); }
.lp-ticker__lbl { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); border-right: 1px solid var(--line); background: var(--bg-elev); position: relative; z-index: 1; }
.lp-ticker__lbl i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: lp-ping-b 2s ease-out infinite; }
@keyframes lp-ping-b { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
.lp-ticker__vp { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lp-ticker__track { display: flex; width: max-content; gap: 10px; padding: 12px 10px; animation: lp-marquee var(--lp-dur, 80s) linear infinite; }
.lp-ticker:hover .lp-ticker__track, .lp-ticker:focus-within .lp-ticker__track { animation-play-state: paused; }
@keyframes lp-marquee { to { transform: translateX(-50%); } }
.lp-tk { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: .82rem; white-space: nowrap; text-decoration: none; }
.lp-tk:hover { border-color: var(--gold-2); text-decoration: none; }
.lp-tk b { font-weight: 700; }
.lp-tk em { font-style: normal; color: var(--ink-3); }
.lp-tk i { font-style: normal; font-weight: 800; color: var(--brand); font-family: var(--font-display); }
@media (max-width: 560px) { .lp-ticker__lbl span { display: none; } .lp-ticker__lbl { padding: 0 12px; } }

/* ==========================================================================
   03 · ΤΟ ΑΝΤΙΣΤΡΟΦΟ (διακόπτης + διάγραμμα)
   ========================================================================== */
.lp-rev { display: grid; gap: 30px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lp-rev { grid-template-columns: .95fr 1.05fr; gap: 64px; } }
.lp-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line-strong); margin: 22px 0 18px; position: relative; }
.lp-switch button { position: relative; z-index: 1; border: 0; background: none; padding: 9px 16px; border-radius: 999px; font: 700 .88rem/1 var(--font-display); color: var(--ink-2); cursor: pointer; transition: color .25s ease; }
.lp-switch button[aria-pressed="true"] { color: var(--on-brand); }
.lp-switch__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: var(--ink-3); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), width .45s ease, background .3s ease; }
.lp-rev.is-new .lp-switch__thumb { background: var(--brand-fill); }
.lp-rev__txt { display: grid; }
.lp-rev__txt > div { grid-area: 1 / 1; transition: opacity .4s ease, transform .4s ease; }
.lp-rev__txt .lp-old { opacity: 1; }
.lp-rev__txt .lp-new { opacity: 0; transform: translateY(8px); pointer-events: none; }
.lp-rev.is-new .lp-rev__txt .lp-old { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.lp-rev.is-new .lp-rev__txt .lp-new { opacity: 1; transform: none; pointer-events: auto; }
.lp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.lp-list li { position: relative; padding-left: 30px; line-height: 1.55; color: var(--ink-2); }
.lp-list li::before { content: ''; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; }
.lp-list--x li::before { background: var(--danger-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m5 5 6 6m0-6-6 6' stroke='%23A63A2E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.lp-list--v li::before { background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.7 11 12 5.4' fill='none' stroke='%234F6F3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.lp-list strong { color: var(--ink); }

.lp-orbit { position: relative; aspect-ratio: 1 / 1; max-width: 460px; width: 100%; margin: 0 auto; }
.lp-orbit svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lp-orbit .ring { fill: none; stroke: var(--line-strong); stroke-dasharray: 3 7; }
.lp-orbit .ray { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 7; transition: stroke .5s ease; animation: lp-flow 1.4s linear infinite; }
.lp-orbit .ray { stroke: var(--ink-3); }
.lp-rev.is-new .lp-orbit .ray { stroke: var(--brand); animation-direction: reverse; }
.lp-orbit .sat rect { fill: var(--bg-elev); stroke: var(--line-strong); transition: fill .5s ease, stroke .5s ease; }
.lp-orbit .sat text { font: 700 15px var(--font-body); fill: var(--ink-3); transition: opacity .4s ease; }
.lp-orbit .sat .t-new { opacity: 0; fill: var(--brand); }
.lp-rev.is-new .lp-orbit .sat rect { fill: var(--brand-soft); stroke: var(--brand-soft-2); }
.lp-rev.is-new .lp-orbit .sat .t-old { opacity: 0; }
.lp-rev.is-new .lp-orbit .sat .t-new { opacity: 1; }
.lp-orbit .sat .x { stroke: var(--danger); stroke-width: 2; stroke-linecap: round; transition: opacity .4s ease; }
.lp-rev.is-new .lp-orbit .sat .x { opacity: 0; }
.lp-orbit .me circle { transition: fill .5s ease; }
.lp-orbit .me .c1 { fill: var(--ink); }
.lp-rev.is-new .lp-orbit .me .c1 { fill: var(--brand-fill); }
.lp-orbit .me text { font: 800 17px var(--font-display); fill: var(--bg-elev); }
.lp-orbit .halo { fill: color-mix(in srgb, var(--brand) 10%, transparent); opacity: 0; transition: opacity .6s ease; transform-origin: 230px 230px; }
.lp-rev.is-new .lp-orbit .halo { opacity: 1; animation: lp-breathe 3s ease-in-out infinite; }
@keyframes lp-breathe { 50% { transform: scale(1.12); } }
.lp-orbit__cap { text-align: center; font-size: .86rem; color: var(--ink-3); margin-top: 6px; min-height: 1.4em; }

/* ==========================================================================
   04 · ΠΩΣ ΔΟΥΛΕΥΕΙ (βήματα + κινητό)
   ========================================================================== */
.lp-how { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .lp-how { grid-template-columns: 1fr 1fr; gap: 64px; } }
.lp-steps { display: grid; gap: 10px; }
.lp-step { text-align: left; width: 100%; border: 1px solid var(--line); background: var(--bg-elev); border-radius: var(--radius); padding: 16px 18px; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; color: inherit; font: inherit; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.lp-step:hover { border-color: var(--line-strong); }
.lp-step[aria-selected="true"] { border-color: var(--brand-soft-2); box-shadow: var(--shadow); background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 50%, var(--bg-elev)), var(--bg-elev)); }
.lp-step__n { grid-row: span 2; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font: 800 .95rem/1 var(--font-display); background: var(--bg-sunk); color: var(--ink-2); transition: background .2s ease, color .2s ease; }
.lp-step[aria-selected="true"] .lp-step__n { background: var(--brand-fill); color: var(--on-brand); }
.lp-step__t { font: 700 1.05rem/1.3 var(--font-display); color: var(--ink); align-self: center; }
.lp-step__d { font-size: .9rem; line-height: 1.55; color: var(--ink-2); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s ease, opacity .35s ease; }
.lp-step[aria-selected="true"] .lp-step__d { max-height: 140px; opacity: 1; }
.lp-step__bar { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: var(--line); margin-top: 10px; overflow: hidden; display: none; }
.lp-step[aria-selected="true"] .lp-step__bar { display: block; }
.lp-step__bar i { display: block; height: 100%; background: var(--brand); transform-origin: left; transform: scaleX(0); }
.lp-how.is-playing .lp-step[aria-selected="true"] .lp-step__bar i { animation: lp-fill 5.2s linear forwards; }

.lp-phone { position: relative; width: min(100%, 330px); aspect-ratio: 9 / 16.6; margin: 0 auto; border-radius: 38px; padding: 12px; background: linear-gradient(160deg, #3A2A2E, #1A1113); box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255, 255, 255, .08); }
@media (max-width: 899px) { .lp-phone { width: min(80%, 300px); aspect-ratio: 9 / 14; border-radius: 34px; } .lp-screen { padding-top: 46px; gap: 9px; } }
.lp-phone::before { content: ''; position: absolute; top: 20px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #120B0C; z-index: 3; }
.lp-screen-wrap { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: var(--bg); }
.lp-screen { position: absolute; inset: 0; padding: 50px 14px 16px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateX(14px); transition: opacity .45s ease, transform .45s ease; }
.lp-screen.on { opacity: 1; transform: none; }
.lp-scr-group { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.lp-scr-h { font: 800 .95rem/1.2 var(--font-display); color: var(--ink); }
.lp-scr-s { font-size: .72rem; color: var(--ink-3); margin-top: -6px; }
.lp-scr-box { border: 1px solid var(--gold-2); border-radius: 14px; background: var(--bg-elev); padding: 10px 11px; font-size: .8rem; line-height: 1.45; color: var(--ink); min-height: 72px; box-shadow: var(--glow-gold); }
.lp-scr-box i { display: inline-block; width: 2px; height: 1em; background: var(--brand); vertical-align: -.15em; animation: lp-blink 1s steps(2, start) infinite; }
.lp-scr-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lp-scr-chips span { font-size: .68rem; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: var(--bg-sunk); color: var(--ink-2); opacity: 0; transform: scale(.85); transition: opacity .3s ease, transform .3s ease; }
.lp-scr-chips span.on { opacity: 1; transform: none; }
.lp-scr-chips span.k { background: var(--brand-fill); color: var(--on-brand); }
.lp-scr-chips span.g { background: var(--gold-soft); color: var(--gold-ink); }
.lp-scr-btn { margin-top: auto; text-align: center; padding: 11px; border-radius: 12px; font: 700 .82rem/1 var(--font-display); background: linear-gradient(180deg, var(--brand-fill-2), var(--brand-fill)); color: var(--on-brand); }
.lp-scr-card { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); padding: 11px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.lp-scr-ring { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--brand) calc(var(--p, 0) * 1%), var(--bg-sunk) 0); position: relative; }
.lp-scr-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg-elev); }
.lp-scr-ring b { position: relative; font: 800 .86rem/1 var(--font-display); color: var(--ink); }
.lp-scr-why { display: grid; gap: 6px; }
.lp-scr-why div { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--ink-2); opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; }
.lp-scr-why div.on { opacity: 1; transform: none; }
.lp-scr-why div::before { content: '✓'; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: .6rem; font-weight: 800; background: var(--ok-soft); color: var(--ok); flex: none; }
.lp-scr-why div.soft::before { content: '≈'; background: var(--gold-soft); color: var(--gold-3); }
.lp-bub { max-width: 84%; padding: 8px 11px; border-radius: 14px; font-size: .76rem; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.lp-bub.on { opacity: 1; transform: none; }
.lp-bub--in { background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; }
.lp-bub--out { align-self: flex-end; background: var(--brand-fill); color: var(--on-brand); border-bottom-right-radius: 4px; }
.lp-bub mark { background: rgba(0, 0, 0, .18); color: inherit; padding: 1px 5px; border-radius: 5px; font-size: .68rem; font-weight: 700; }
.lp-bub--in mark { background: var(--bg-sunk); color: var(--ink-3); }
.lp-sys { align-self: center; font-size: .66rem; font-weight: 600; text-align: center; padding: 6px 10px; border-radius: 10px; background: var(--gold-soft); color: var(--gold-ink); max-width: 92%; opacity: 0; transition: opacity .4s ease; }
.lp-sys.on { opacity: 1; }

/* ==========================================================================
   05 · ΥΠΟΛΟΓΙΣΤΗΣ ΖΗΤΗΣΗΣ
   ========================================================================== */
.lp-calc { display: grid; grid-template-columns: 1fr; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--bg-elev); box-shadow: var(--shadow-lg); overflow: hidden; }
@media (min-width: 900px) { .lp-calc { grid-template-columns: 1.05fr .95fr; } }
.lp-calc__in { padding: 22px 18px; display: grid; gap: 18px; }
@media (min-width: 900px) { .lp-calc__in { padding: 34px; } }
.lp-f__l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
.lp-f__l output { font: 800 1rem/1 var(--font-display); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.lp-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-seg button { border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-2); border-radius: 999px; padding: 9px 14px; font: 600 .88rem/1 var(--font-body); cursor: pointer; transition: all .15s ease; }
.lp-seg button:hover { border-color: var(--gold); }
.lp-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lp-select { width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--line-strong); background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%238A2432' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center/14px no-repeat; color: var(--ink); border-radius: 12px; padding: 12px 40px 12px 14px; font: 600 1rem/1.2 var(--font-body); }
.lp-select:focus { outline: none; border-color: var(--gold); box-shadow: var(--glow-gold); }
.lp-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand) var(--v, 50%), var(--line) var(--v, 50%)); outline: none; }
.lp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-elev); border: 3px solid var(--brand); box-shadow: var(--shadow); cursor: grab; }
.lp-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-elev); border: 3px solid var(--brand); box-shadow: var(--shadow); cursor: grab; }
.lp-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--glow-gold); }
.lp-calc__out { padding: 24px 18px 22px; background:
    radial-gradient(420px 260px at 80% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 55%, var(--bg-elev)), var(--bg-elev));
  border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) { .lp-calc__out { padding: 34px; border-top: 0; border-left: 1px solid var(--line); } }
.lp-big { font: 800 clamp(3.4rem, 12vw, 5.4rem)/.9 var(--font-display); letter-spacing: -.05em; color: var(--brand); font-variant-numeric: tabular-nums; }
.lp-big.is-few { font-size: clamp(2rem, 7vw, 2.6rem); letter-spacing: -.03em; line-height: 1.05; }
.lp-calc__txt { font-size: 1rem; line-height: 1.55; color: var(--ink-2); margin: 0; }
.lp-calc__txt strong { color: var(--ink); }
.lp-bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: 4px; }
.lp-bars div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.lp-bars i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--brand) 55%, var(--bg-sunk)); transition: height .45s cubic-bezier(.2, .8, .2, 1); min-height: 3px; }
.lp-bars div.on i { background: linear-gradient(180deg, var(--gold-2), var(--gold)); }
.lp-bars small { font-size: .62rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-bars b { font-size: .64rem; font-weight: 700; color: var(--ink-2); }
.lp-calc__cap { font-size: .75rem; color: var(--ink-3); margin: 0; }
.lp-calc__out .btn { margin-top: auto; white-space: normal; text-align: center; }

/* ==========================================================================
   06 · ΙΔΙΩΤΙΚΟΤΗΤΑ (ζωντανή απόκρυψη)
   ========================================================================== */
.lp-priv { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .lp-priv { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } }
.lp-try { border-radius: var(--radius-lg); border: 1px solid rgba(243, 234, 221, .14); background: rgba(255, 255, 255, .04); padding: 18px; }
.lp-try label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 8px; }
.lp-try textarea { width: 100%; border: 1px solid rgba(243, 234, 221, .2); background: rgba(0, 0, 0, .18); color: #FBF4EA; border-radius: 14px; padding: 12px 14px; font: 400 1rem/1.5 var(--font-body); resize: none; min-height: 76px; }
.lp-try textarea:focus { outline: none; border-color: var(--gold-2); }
@media (max-width: 559px) { .lp-try textarea { min-height: 100px; } .lp-try { padding: 14px; } }
.lp-try__arrow { text-align: center; color: rgba(243, 234, 221, .45); font-size: .76rem; margin: 10px 0; letter-spacing: .06em; }
.lp-try__out { background: #FBF4EA; color: #2A1E22; border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: .98rem; line-height: 1.5; min-height: 48px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6); word-break: break-word; }
.lp-try__out mark { background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: .82rem; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.lp-try__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 26px; }
.lp-try__flags span { font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(216, 186, 110, .16); color: var(--gold-2); }
.lp-promises { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .lp-promises { grid-template-columns: 1fr 1fr; } }
.lp-pr { padding: 16px; border-radius: var(--radius); background: rgba(255, 255, 255, .04); border: 1px solid rgba(243, 234, 221, .12); }
@media (max-width: 559px) {
  .lp-pr { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 13px 14px; }
  .lp-pr__ic { grid-row: span 2; margin: 0; }
  .lp-pr h3 { margin: 0; align-self: end; }
}
.lp-pr__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(216, 186, 110, .14); color: var(--gold-2); margin-bottom: 10px; }
.lp-pr__ic svg { width: 18px; height: 18px; }
.lp-pr h3 { font-size: 1rem; color: #FBF4EA; margin: 0 0 4px; }
.lp-pr p { margin: 0; font-size: .86rem; line-height: 1.5; color: rgba(243, 234, 221, .7); }

/* ==========================================================================
   07 · ΤΙΜΕΣ
   ========================================================================== */
.lp-prices { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lp-prices { grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } }
@media (max-width: 899px) {
  .lp-prices { grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px var(--gutter) 14px; margin: -12px calc(-1 * var(--gutter)) 0; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .lp-prices::-webkit-scrollbar { display: none; }
  .lp-price { scroll-snap-align: center; }
}
.lp-price { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--radius-lg); background: var(--bg-elev); border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.lp-price.is-you { border-color: var(--gold-2); box-shadow: var(--shadow-lg); }
@media (min-width: 900px) { .lp-price.is-you { transform: translateY(-8px); } }
.lp-price__you { position: absolute; top: -11px; left: 22px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--on-gold); opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.lp-price.is-you .lp-price__you { opacity: 1; transform: none; }
.lp-price__who { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lp-price__name { font: 800 1.3rem/1.1 var(--font-display); color: var(--ink); }
.lp-price__amt { font: 800 2.4rem/1 var(--font-display); letter-spacing: -.04em; color: var(--brand); }
.lp-price__amt small { font: 600 .9rem/1 var(--font-body); letter-spacing: 0; color: var(--ink-3); margin-left: 4px; }
.lp-price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .9rem; color: var(--ink-2); }
.lp-price li { padding-left: 22px; position: relative; line-height: 1.45; }
.lp-price li::before { content: ''; position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 50%; background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.7 11 12 5.4' fill='none' stroke='%234F6F3E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; }
.lp-price .btn { margin-top: auto; }
.lp-dots { display: none; justify-content: center; gap: 6px; margin-top: 4px; }
@media (max-width: 899px) { .lp-dots { display: flex; } }
.lp-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background .2s ease, width .2s ease; }
.lp-dots i.on { background: var(--brand); width: 20px; border-radius: 4px; }
.lp-money { max-width: 720px; margin: 26px auto 0; text-align: center; font-size: .92rem; line-height: 1.65; color: var(--ink-2); }
.lp-money strong { color: var(--ink); }

/* ==========================================================================
   08 · ΕΡΩΤΗΣΕΙΣ
   ========================================================================== */
.lp-faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; font: 700 1.04rem/1.35 var(--font-display); color: var(--ink); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: ''; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-elev) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%238A2432' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat; transition: transform .25s ease; }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq p { margin: 0 0 18px; color: var(--ink-2); line-height: 1.65; max-width: 64ch; }

/* ==========================================================================
   09 · ΔΥΟ ΠΟΡΤΕΣ
   ========================================================================== */
.lp-doors { display: grid; gap: 14px; grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; }
@media (min-width: 700px) { .lp-doors { grid-template-columns: 1fr 1fr; gap: 22px; } }
.lp-door { position: relative; display: block; min-height: 190px; border-radius: 22px 22px 8px 8px; overflow: hidden; perspective: 1100px; text-decoration: none; color: #FBF4EA; background:
    radial-gradient(260px 200px at 50% 70%, rgba(237, 176, 53, .55), transparent 70%),
    linear-gradient(180deg, #F2C66A, #B9832B); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .12); }
@media (min-width: 700px) { .lp-door { min-height: 300px; } }
.lp-door:hover { text-decoration: none; }
.lp-door__panel { position: absolute; inset: 0; transform-origin: left center; transition: transform .9s cubic-bezier(.2, .8, .2, 1); background:
    linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 12%),
    linear-gradient(180deg, #7A1F2C, #561520); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.lp-door--gold .lp-door__panel { background: linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 12%), linear-gradient(180deg, #3D2B30, #24181B); }
.lp-door__panel::before, .lp-door__panel::after { content: ''; position: absolute; left: 22px; right: 22px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; }
.lp-door__panel::before { top: 22px; height: 30%; }
.lp-door__panel::after { top: calc(30% + 34px); bottom: 118px; }
@media (max-width: 699px) { .lp-door__panel::before, .lp-door__panel::after { display: none; } }
.lp-door__knob { position: absolute; right: 18px; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FBE3A6, #B48E3E); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.lp-door__k { position: relative; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.lp-door__t { position: relative; font: 800 clamp(1.45rem, 3.4vw, 1.9rem)/1.1 var(--font-display); letter-spacing: -.02em; margin: 6px 0 4px; color: #FBF4EA; }
.lp-door__d { position: relative; font-size: .88rem; color: rgba(243, 234, 221, .75); }
.lp-door__go { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 700 .9rem/1 var(--font-display); color: #FBF4EA; }
.lp-door__go span { transition: transform .25s ease; }
.lp-door:hover .lp-door__panel, .lp-door:focus-visible .lp-door__panel { transform: rotateY(-24deg); }
.lp-door:hover .lp-door__go span { transform: translateX(4px); }
.lp-door.is-ajar .lp-door__panel { animation: lp-ajar 1.6s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lp-ajar { 40% { transform: rotateY(-16deg); } 100% { transform: none; } }
.lp-mat { text-align: center; margin-top: 26px; font-size: .84rem; color: rgba(243, 234, 221, .6); }
.lp-mat { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.lp-mat img { width: 28px; height: 28px; }

/* ==========================================================================
   Οδηγός σκηνών (desktop) & πρόοδος (κινητό)
   ========================================================================== */
.lp-rail { display: none; }
@media (min-width: 1360px) {
  .lp-rail { display: flex; flex-direction: column; gap: 14px; position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 40; opacity: 0; transition: opacity .3s ease; }
  .lp-rail.show { opacity: 1; }
  .lp-rail a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-3); font-size: .75rem; font-weight: 700; letter-spacing: .06em; }
  .lp-rail a i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: all .25s ease; flex: none; }
  .lp-rail a span { opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; white-space: nowrap; }
  .lp-rail:hover a span, .lp-rail a.on span { opacity: 1; transform: none; }
  .lp-rail a.on { color: var(--brand); }
  .lp-rail a.on i { background: var(--brand); border-color: var(--brand); transform: scale(1.35); }
}
.lp-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 600; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--brand), var(--gold)); pointer-events: none; }
@media (min-width: 1360px) { .lp-progress { display: none; } }

/* ---- λιγότερη κίνηση ---- */
@media (prefers-reduced-motion: reduce) {
  .lp-in { opacity: 1; transform: none; transition: none; }
  .lp-ticker__track { animation: none; }
  .lp-ticker__vp { overflow-x: auto; scrollbar-width: none; }
  .lp-tk[aria-hidden="true"] { display: none; }
  .lp-orbit .ray, .lp-orbit .halo, .lp-where i, .lp-ticker__lbl i, .lp-h1 .lp-u::after { animation: none !important; }
  .lp-h1 .lp-u::after { transform: none; }
  .lp-door.is-ajar .lp-door__panel { animation: none; }
  .lp-mcard, .lp-seal, .lp-reasons span, .lp-screen, .lp-door__panel { transition: none !important; }
}

/* Matching stories: a single clock drives the controls and the content. */
.lp-stage { padding:22px; border-radius:24px; background:linear-gradient(145deg,var(--bg-elev),var(--bg)); box-shadow:0 16px 40px -24px #39232060; }
.lp-stage__top { display:flex; justify-content:space-between; align-items:center; gap:10px; min-width:0; margin-bottom:12px; letter-spacing:.1em; font-size:.68rem; color:var(--ink-2); }
.lp-stage__top > span:first-child { min-width:0; max-width:calc(100% - 76px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lp-stage__position { flex:none; font-variant-numeric:tabular-nums; font-size:.68rem; color:var(--ink-3); letter-spacing:.08em; white-space:nowrap; }
.lp-stage__controls { display:flex; align-items:center; gap:10px; min-width:0; width:100%; min-height:28px; margin:0 0 16px; overflow:hidden; }
.lp-stage__dots { display:flex; flex:1 1 auto; min-width:0; gap:8px; overflow:hidden; }
.lp-stage__dots button { flex:1 1 0; min-width:0; position:relative; height:24px; border:0; padding:0; background:transparent; cursor:pointer; overflow:hidden; }
.lp-stage__dots button::before, .lp-stage__dots button i { position:absolute; top:50%; left:3px; right:3px; width:auto; height:3px; border-radius:3px; }
.lp-stage__dots button::before { content:''; background:var(--line-strong); transform:translateY(-50%); }
.lp-stage__dots button i { background:linear-gradient(90deg,var(--brand),var(--gold)); transform:translateY(-50%) scaleX(var(--progress,0)); transform-origin:left; }
.lp-stage__dots button[aria-pressed="true"]::before { background:var(--brand-soft-2); }
.lp-stage__dots button[aria-pressed="true"] i { min-width:2px; }
.lp-stage__pause { display:grid; place-items:center; width:32px; height:32px; flex:none; border:1px solid var(--line-strong); border-radius:50%; background:var(--bg-elev); color:var(--ink-2); cursor:pointer; font:700 .85rem/1 var(--font-body); }
.lp-stage__pause:hover { border-color:var(--brand); color:var(--brand); }
.lp-stage button:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.lp-stage .lp-mcard { width:100%; align-self:auto; min-height:132px; padding:16px; border-radius:16px; box-shadow:0 6px 18px -14px #39232050; transition:none; }
.lp-stage .lp-mcard__tag { font-size:.63rem; letter-spacing:.09em; }
.lp-stage .lp-mcard__t { white-space:normal; overflow:visible; font-size:1rem; line-height:1.4; min-height:2.8em; margin-top:7px; }
.lp-stage .lp-mcard__m { white-space:normal; overflow:visible; font-size:.75rem; line-height:1.5; min-height:2.8em; }
.lp-stage .lp-mcard__p { font-size:1.06rem; }
.lp-stage .lp-mcard__row { align-items:center; padding-top:8px; }
.lp-stage__mid { padding:17px 0; gap:12px; }
.lp-stage__mid::before { border-left:1px solid var(--line-strong); opacity:.7; }
.lp-stage .lp-seal { width:82px; height:82px; box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 9%,var(--bg)); transition:none; }
.lp-stage .lp-seal b { font-size:1.2rem; font-variant-numeric:tabular-nums; }
.lp-stage .lp-seal .fg { transition:stroke-dashoffset .45s ease; stroke-width:5; }
.lp-stage .lp-reasons { gap:5px; min-height:28px; }
.lp-stage .lp-reasons span { padding:5px 8px; font-size:.64rem; border:0; transition:none; }
.lp-stage__cap { font-size:.65rem; margin-top:14px; line-height:1.5; }

/* Comparison: symmetric nodes, anchored status marks, directional arrows. */
.lp-diagram { border:1px solid var(--line); border-radius:24px; padding:20px 12px 18px; background:linear-gradient(145deg,var(--bg-elev),var(--bg)); box-shadow:0 12px 36px -28px #39232060; }
.lp-diagram__label { text-align:center; font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px; }
.lp-orbit { max-width:440px; }
.lp-orbit svg { overflow:hidden; }
.lp-orbit .ring { stroke-dasharray:2 8; opacity:.7; }
.lp-orbit .ray { stroke-dasharray:none; stroke-width:1.5; animation:none; opacity:.45; }
.lp-orbit .flow-arrow { fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lp-orbit .flow-in { opacity:0; }
.lp-rev.is-new .lp-orbit .flow-in { opacity:1; stroke:var(--brand); }
.lp-rev.is-new .lp-orbit .flow-out { opacity:0; }
.lp-orbit .sat text { font-size:16px; fill:var(--ink-2); }
.lp-orbit .sat .sat-status { font-size:13px; font-weight:500; fill:var(--ink-3); }
.lp-orbit .sat .t-new text { fill:var(--brand); }
.lp-orbit .sat-unavailable circle { fill:var(--danger-soft); stroke:var(--bg-elev); stroke-width:3; }
.lp-orbit .sat-unavailable path { stroke:var(--danger); stroke-width:1.8; stroke-linecap:round; }
.lp-orbit .sat rect { stroke-width:1; }
.lp-orbit .halo, .lp-rev.is-new .lp-orbit .halo { animation:none; }
.lp-orbit .me text { fill:var(--bg-elev); }
.lp-rev.is-new .lp-orbit .me text { fill:var(--on-brand); }
.lp-orbit__cap { display:table; margin:0 auto; padding:8px 16px; border-radius:99px; background:var(--bg-sunk); color:var(--ink-2); font-weight:600; font-size:.77rem; }
.lp-rev.is-new .lp-orbit__cap { background:var(--brand-soft); color:var(--brand); }
.lp-switch { margin:18px 0; width:min(100%,340px); }
.lp-switch button { flex:1; min-height:40px; padding:8px 10px; font-size:.81rem; }
.lp-switch__thumb { transition:transform .25s ease,width .25s ease,background .25s ease; }
.lp-rev__txt { min-height:172px; }
.lp-rev__txt .lp-new { visibility:hidden; }
.lp-rev.is-new .lp-rev__txt .lp-old { visibility:hidden; }
.lp-rev.is-new .lp-rev__txt .lp-new { visibility:visible; }
.lp-list { gap:12px; }
.lp-list li { padding-left:30px; font-size:.94rem; }
@media(max-width:599px) {
  .lp-stage { padding:18px 15px; border-radius:22px; }
  .lp-stage__controls { gap:8px; }
  .lp-stage__dots { gap:5px; }
  .lp-stage .lp-mcard { padding:14px; min-height:140px; }
  .lp-stage .lp-mcard__t { font-size:.94rem; }
  .lp-stage .lp-mcard__m { font-size:.73rem; }
  .lp-stage .lp-mcard__p { font-size:1rem; }
  .lp-stage .lp-reasons span { padding:5px 7px; font-size:.62rem; }
  .lp-diagram { padding:18px 7px; border-radius:22px; }
  .lp-rev { gap:20px; }
}
@media(max-width:359px) {
  .lp-stage .lp-mcard__row { flex-wrap:wrap; gap:8px; }
  .lp-stage .lp-mcard__p { margin-left:auto; }
  .lp-stage .lp-reasons { min-height:52px; align-content:center; }
}
@media(prefers-reduced-motion:reduce) {
  .lp-stage .lp-seal .fg, .lp-switch__thumb, .lp-orbit * { transition:none; }
}

