/* ============================================================
   2b. Pilot wave — dark offer card with live countdown
   ============================================================ */

.pilot { padding-top: 0; }

.pilot__card {
    position: relative;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(1.6rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(1.8rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3.2rem);
    border-radius: var(--r-panel);
    background:
        radial-gradient(circle at 15% 0%, rgba(58, 142, 229, 0.4), transparent 55%),
        linear-gradient(160deg, #142a4a 0%, #0b1220 70%);
    color: #ffffff;
    overflow: hidden;
    box-shadow:
        0 2px 8px    rgba(11, 18, 32, 0.18),
        0 30px 70px  rgba(11, 18, 32, 0.3);
}
.pilot__card::before {
    /* glass rim */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(170deg,
        rgba(255, 255, 255, 0.5)  0%,
        rgba(255, 255, 255, 0.18) 35%,
        rgba(255, 255, 255, 0.06) 60%,
        rgba(255, 255, 255, 0.16) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.pilot__glow {
    position: absolute;
    bottom: -40%;
    inset-inline-end: -10%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 122, 224, 0.35), transparent 65%);
    pointer-events: none;
}

.pilot__badge {
    display: inline-block;
    padding: 0.42rem 1.1rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #cfe3fb;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pilot__title {
    margin: 1rem 0 1.1rem;
    font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
}

.pilot__perks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.55rem 1.2rem;
}
.pilot__perks li {
    position: relative;
    padding-inline-start: 1.6rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.97rem;
    font-weight: 500;
    line-height: 1.5;
}
.pilot__perks li::before {
    content: "";
    position: absolute;
    top: 0.32em;
    inset-inline-start: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat,
        linear-gradient(135deg, var(--accent), var(--accent-soft));
}

/* --- countdown side --- */
.pilot__side {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
}

.pilot__deadline {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
    font-weight: 600;
}

.pilot__count {
    display: flex;
    gap: 0.55rem;
    /* follows document direction: Hebrew reads days→seconds right-to-left */
}
.pilot__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 64px;
    padding: 0.65rem 0.5rem 0.55rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.pilot__tile b {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}
.pilot__tile span {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.pilot__closed {
    margin: 0;
    color: #ffd9a8;
    font-size: 0.95rem;
    font-weight: 600;
}

.pilot__cta { width: 100%; max-width: 320px; }

.pilot__note {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}

@media (max-width: 860px) {
    .pilot__card { grid-template-columns: 1fr; }
    .pilot__side { align-items: stretch; }
    .pilot__count { justify-content: center; }
}
@media (max-width: 420px) {
    .pilot__tile { min-width: 56px; }
    .pilot__tile b { font-size: 1.4rem; }
}