/* ═══════════════════════════════════════════════
   PROMO BANNER
═══════════════════════════════════════════════ */
.promo-banner {
    position: relative;
    overflow: hidden;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Cpath d='M0 75 Q75 50 150 75 Q225 100 300 75' stroke='rgba(125%2C211%2C211%2C0.16)' fill='none' stroke-width='2'/%3E%3Cpath d='M0 105 Q75 80 150 105 Q225 130 300 105' stroke='rgba(125%2C211%2C211%2C0.11)' fill='none' stroke-width='1.5'/%3E%3Cpath d='M0 45 Q75 20 150 45 Q225 70 300 45' stroke='rgba(125%2C211%2C211%2C0.11)' fill='none' stroke-width='1.5'/%3E%3Cpath d='M0 25 Q37 12 75 25 Q112 38 150 25 Q187 12 225 25 Q262 38 300 25' stroke='rgba(74%2C155%2C155%2C0.12)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 60 Q37 48 75 60 Q112 72 150 60 Q187 48 225 60 Q262 72 300 60' stroke='rgba(74%2C155%2C155%2C0.10)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 90 Q37 78 75 90 Q112 102 150 90 Q187 78 225 90 Q262 102 300 90' stroke='rgba(125%2C211%2C211%2C0.08)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 120 Q37 110 75 120 Q112 130 150 120 Q187 110 225 120 Q262 130 300 120' stroke='rgba(74%2C155%2C155%2C0.08)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 140 Q37 134 75 140 Q112 146 150 140 Q187 134 225 140 Q262 146 300 140' stroke='rgba(125%2C211%2C211%2C0.06)' fill='none' stroke-width='0.8'/%3E%3Cpath d='M0 10 Q37 5 75 10 Q112 15 150 10 Q187 5 225 10 Q262 15 300 10' stroke='rgba(125%2C211%2C211%2C0.06)' fill='none' stroke-width='0.8'/%3E%3C/svg%3E") 0 0 / 300px 150px repeat,
        radial-gradient(ellipse 80% 55% at 50% 0%, rgba(125,211,211,0.14) 0%, transparent 60%),
        radial-gradient(ellipse 45% 40% at 12% 55%, rgba(74,155,155,0.09) 0%, transparent 55%),
        linear-gradient(180deg, #1c6262 0%, #1a5f5f 35%, #175d5d 65%, #155959 100%);
    border-top: 1px solid rgba(125,211,211,0.18);
}

/* Wave-shaped section divider at the bottom */
.promo-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 42 Q360 12 720 42 Q1080 72 1440 42 L1440 80 L0 80 Z' fill='%230e3535' opacity='0.55'/%3E%3Cpath d='M0 42 Q360 12 720 42 Q1080 72 1440 42' stroke='rgba(125%2C211%2C211%2C0.48)' stroke-width='2.5' fill='none'/%3E%3Cpath d='M0 49 Q360 19 720 49 Q1080 79 1440 49' stroke='rgba(125%2C211%2C211%2C0.16)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-size: 100% 80px;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}

/* Oceanic wave lines — concentrated at the top */
.promo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='200'%3E%3Cpath d='M0 40 Q250 10 500 40 Q750 70 1000 40' stroke='rgba(125%2C211%2C211%2C0.13)' fill='none' stroke-width='2.5'/%3E%3Cpath d='M0 75 Q250 45 500 75 Q750 105 1000 75' stroke='rgba(125%2C211%2C211%2C0.08)' fill='none' stroke-width='2'/%3E%3Cpath d='M0 15 Q250 -10 500 15 Q750 40 1000 15' stroke='rgba(125%2C211%2C211%2C0.06)' fill='none' stroke-width='1.5'/%3E%3Cpath d='M0 105 Q125 90 250 105 Q375 120 500 105 Q625 90 750 105 Q875 120 1000 105' stroke='rgba(125%2C211%2C211%2C0.05)' fill='none' stroke-width='1'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='100'%3E%3Cpath d='M0 20 Q125 5 250 20 Q375 35 500 20' stroke='rgba(74%2C155%2C155%2C0.09)' fill='none' stroke-width='1.5'/%3E%3Cpath d='M0 45 Q62 33 125 45 Q188 57 250 45 Q312 33 375 45 Q438 57 500 45' stroke='rgba(74%2C155%2C155%2C0.06)' fill='none' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 1000px 200px, 500px 100px;
    background-repeat: repeat-x;
    background-position: 0 0%, 0 15%;
    pointer-events: none;
    z-index: 0;
}

.promo-banner-inner {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    margin: 0 auto;
    padding: 76px 40px;
    display: flex;
    align-items: center;
    gap: 56px;
}

.promo-banner-left {
    flex: 1;
    min-width: 0;
}

.promo-title {
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 800;
    color: #f0fffe;
    line-height: 1.15;
    margin-bottom: 12px;
    letter-spacing: -0.4px;
}
.promo-title span { color: #7dd3d3; }

.promo-sub {
    font-size: 14.5px;
    color: rgba(240,255,254,0.55);
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 400px;
}

.promo-checklist {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.promo-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(240,255,254,0.78);
    font-weight: 500;
}
.promo-checklist li i {
    font-size: 10px;
    color: #7dd3d3;
    flex-shrink: 0;
    background: rgba(74,155,155,0.20);
    border: 1px solid rgba(125,211,211,0.28);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #20b2aa 0%, #4a9b9b 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 13px 28px;
    border-radius: 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 18px rgba(32,178,170,0.30);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.promo-cta-btn:hover {
    background: linear-gradient(135deg, #26c9c0 0%, #5eb3b3 100%);
    box-shadow: 0 8px 28px rgba(32,178,170,0.45);
    transform: translateY(-2px);
}

.promo-banner-right {
    flex-shrink: 0;
    width: 420px;
}
.promo-image-card {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(125,211,211,0.22);
    box-shadow: 0 16px 48px rgba(0,0,0,0.35);
    aspect-ratio: 16 / 10;
    background: rgba(0,0,0,0.20);
}
.promo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.promo-image-card:hover .promo-image { transform: scale(1.04); }

@media (max-width: 960px) {
    .promo-banner-right { width: 320px; }
    .promo-banner-inner { padding: 44px 28px; gap: 36px; }
}
@media (max-width: 720px) {
    .promo-banner-right { display: none; }
    .promo-banner-inner { padding: 40px 24px; }
}
@media (max-width: 480px) {
    .promo-banner-inner { padding: 32px 20px; }
    .promo-title { font-size: 22px; }
}


/* ═══════════════════════════════════════════════
   LOYALTY SECTION
═══════════════════════════════════════════════ */
.loyalty-section {
    position: relative;
    overflow: hidden;
    padding: 88px 0 100px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Cpath d='M0 75 Q75 50 150 75 Q225 100 300 75' stroke='rgba(125%2C211%2C211%2C0.16)' fill='none' stroke-width='2'/%3E%3Cpath d='M0 105 Q75 80 150 105 Q225 130 300 105' stroke='rgba(125%2C211%2C211%2C0.11)' fill='none' stroke-width='1.5'/%3E%3Cpath d='M0 45 Q75 20 150 45 Q225 70 300 45' stroke='rgba(125%2C211%2C211%2C0.11)' fill='none' stroke-width='1.5'/%3E%3Cpath d='M0 25 Q37 12 75 25 Q112 38 150 25 Q187 12 225 25 Q262 38 300 25' stroke='rgba(74%2C155%2C155%2C0.12)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 60 Q37 48 75 60 Q112 72 150 60 Q187 48 225 60 Q262 72 300 60' stroke='rgba(74%2C155%2C155%2C0.10)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 90 Q37 78 75 90 Q112 102 150 90 Q187 78 225 90 Q262 102 300 90' stroke='rgba(125%2C211%2C211%2C0.08)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 120 Q37 110 75 120 Q112 130 150 120 Q187 110 225 120 Q262 130 300 120' stroke='rgba(74%2C155%2C155%2C0.08)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 140 Q37 134 75 140 Q112 146 150 140 Q187 134 225 140 Q262 146 300 140' stroke='rgba(125%2C211%2C211%2C0.06)' fill='none' stroke-width='0.8'/%3E%3Cpath d='M0 10 Q37 5 75 10 Q112 15 150 10 Q187 5 225 10 Q262 15 300 10' stroke='rgba(125%2C211%2C211%2C0.06)' fill='none' stroke-width='0.8'/%3E%3C/svg%3E") 0 0 / 300px 150px repeat,
        radial-gradient(ellipse 65% 45% at 25% 100%, rgba(74,155,155,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 55% 35% at 78% 0%, rgba(125,211,211,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 40% 25% at 50% 50%, rgba(74,155,155,0.05) 0%, transparent 70%),
        linear-gradient(180deg, #103939 0%, #0e2f2f 30%, #0c2d2d 65%, #0a2929 100%);
}

/* Wave lines + oceanic texture combined */
.loyalty-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='200'%3E%3Cpath d='M0 100 Q250 50 500 100 Q750 150 1000 100' stroke='rgba(125%2C211%2C211%2C0.11)' fill='none' stroke-width='2.5'/%3E%3Cpath d='M0 140 Q250 90 500 140 Q750 190 1000 140' stroke='rgba(125%2C211%2C211%2C0.07)' fill='none' stroke-width='2'/%3E%3Cpath d='M0 60 Q250 10 500 60 Q750 110 1000 60' stroke='rgba(125%2C211%2C211%2C0.06)' fill='none' stroke-width='1.5'/%3E%3Cpath d='M0 170 Q125 158 250 170 Q375 182 500 170 Q625 158 750 170 Q875 182 1000 170' stroke='rgba(125%2C211%2C211%2C0.04)' fill='none' stroke-width='1'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cpath d='M0 60 Q150 30 300 60 Q450 90 600 60' stroke='rgba(74%2C155%2C155%2C0.09)' fill='none' stroke-width='1.5'/%3E%3Cpath d='M0 85 Q75 70 150 85 Q225 100 300 85 Q375 70 450 85 Q525 100 600 85' stroke='rgba(74%2C155%2C155%2C0.06)' fill='none' stroke-width='1'/%3E%3Cpath d='M0 35 Q150 15 300 35 Q450 55 600 35' stroke='rgba(125%2C211%2C211%2C0.05)' fill='none' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 1000px 200px, 600px 120px;
    background-repeat: repeat-x;
    background-position: 0 30%, 0 65%;
    pointer-events: none;
    z-index: 0;
}

.loyalty-inner {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Full-width header row ── */
.loyalty-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 52px;
    flex-wrap: wrap;
}

.loyalty-heading {
    font-size: 40px;
    font-weight: 800;
    color: #f0fffe;
    line-height: 1.15;
    margin: 0 0 10px;
    letter-spacing: -0.4px;
}

.loyalty-sub {
    font-size: 18px;
    color: rgba(240,255,254,0.60);
    line-height: 1.4;
    margin: 0;
    font-weight: 400;
}

.loyalty-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 4px;
}

.loyalty-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #20b2aa 0%, #4a9b9b 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 18px rgba(32,178,170,0.30);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.loyalty-join-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(32,178,170,0.45);
    background: linear-gradient(135deg, #26c9c0 0%, #5eb3b3 100%);
}

.loyalty-note {
    font-size: 12px;
    color: rgba(240,255,254,0.32);
    margin: 0;
}
.loyalty-note a { color: #7dd3d3; text-decoration: none; }
.loyalty-note a:hover { text-decoration: underline; }

/* ── Body: CTA left + 3 cards right ── */
.loyalty-body {
    display: flex;
    align-items: center;
    gap: 56px;
    margin-bottom: 48px;
}

.loyalty-body-left {
    flex-shrink: 0;
    width: 280px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.loyalty-browse-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #20b2aa 0%, #4a9b9b 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 13px 24px;
    border-radius: 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 18px rgba(32,178,170,0.30);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.loyalty-browse-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(32,178,170,0.45);
    background: linear-gradient(135deg, #26c9c0 0%, #5eb3b3 100%);
}

.loyalty-body-right {
    flex: 1;
    min-width: 0;
}

/* ── 3-column tier grid ── */
.loyalty-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: start;
}

/* ── Base card ── */
.loyalty-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(125,211,211,0.14);
    border-radius: 16px;
    padding: 26px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.loyalty-card:hover {
    transform: translateY(-3px);
    border-color: rgba(125,211,211,0.28);
    box-shadow: 0 10px 28px rgba(0,0,0,0.20), 0 0 0 1px rgba(125,211,211,0.18);
}

/* ── Featured (Keliautojas) ── */
.loyalty-card.tier-featured {
    background: rgba(74,155,155,0.12);
    border-color: rgba(125,211,211,0.35);
    box-shadow: 0 4px 24px rgba(32,178,170,0.12);
}
.loyalty-card.tier-featured:hover {
    border-color: rgba(125,211,211,0.55);
    box-shadow: 0 12px 36px rgba(32,178,170,0.20), 0 0 0 1px rgba(125,211,211,0.40);
}

/* ── Card header: % + name side by side ── */
.tier-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(125,211,211,0.10);
}

.tier-pct {
    font-size: 48px;
    font-weight: 800;
    color: #7dd3d3;
    line-height: 1;
    letter-spacing: -1px;
    flex-shrink: 0;
}
.tier-pct span {
    font-size: 20px;
    font-weight: 700;
    vertical-align: top;
    display: inline-block;
    margin-top: 5px;
    letter-spacing: 0;
}
.loyalty-card.tier-explorer .tier-pct { color: rgba(240,255,254,0.25); }

.tier-head-info { flex: 1; min-width: 0; }
.tier-name {
    font-size: 14px;
    font-weight: 700;
    color: #f0fffe;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tier-pts {
    font-size: 11px;
    color: rgba(240,255,254,0.38);
    margin-top: 3px;
}

/* ── Icon ── */
.tier-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(74,155,155,0.14);
    border: 1px solid rgba(125,211,211,0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7dd3d3;
    font-size: 14px;
    flex-shrink: 0;
    align-self: flex-start;
}
.loyalty-card.tier-explorer .tier-icon-wrap {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
    color: rgba(240,255,254,0.25);
}

/* ── Perks ── */
.tier-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tier-perks li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(240,255,254,0.65);
    line-height: 1.4;
}
.tier-perks li i {
    font-size: 9px;
    color: rgba(125,211,211,0.55);
    margin-top: 3px;
    flex-shrink: 0;
}
.loyalty-card.tier-explorer .tier-perks li { color: rgba(240,255,254,0.32); }
.loyalty-card.tier-explorer .tier-perks li i { color: rgba(240,255,254,0.18); }

/* ── Wallet note ── */
.loyalty-wallet-note {
    padding: 14px 20px;
    background: rgba(0,0,0,0.12);
    border: 1px solid rgba(125,211,211,0.12);
    border-radius: 12px;
    font-size: 13px;
    color: rgba(240,255,254,0.42);
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.loyalty-wallet-note i {
    color: rgba(125,211,211,0.55);
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}
.loyalty-wallet-note strong {
    color: rgba(240,255,254,0.65);
    font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .loyalty-body { flex-direction: column; align-items: flex-start; gap: 24px; }
    .loyalty-body-left { width: auto; }
    .loyalty-tiers { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
    .loyalty-section { padding: 48px 0 56px; }
    .loyalty-header { flex-direction: column; }
    .loyalty-header-right { align-items: flex-start; }
    .loyalty-tiers { grid-template-columns: 1fr; }
    .loyalty-heading { font-size: 26px; }
    .loyalty-sub { font-size: 15px; }
}