:root {
    --rp-red: #D42027;
    --rp-red-dark: #B01B21;
    --mt-red: #991111;
    --dark: #1A1A1A;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --white: #FFFFFF;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #1A1A1A 0%, #2D1015 50%, #1A1A1A 100%);
    min-height: 100vh;
    color: var(--gray-800);
    -webkit-font-smoothing: antialiased;
}

.page-wrapper {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header { text-align: center; padding: 24px 0 16px; }

/* Both marks are the owner's originals: dark-page contrast comes from a
   light chip under them, never from recolouring the logos. */
.logos {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 12px 18px;
    width: fit-content; margin: 0 auto;
}

.logo { display: block; width: auto; }

.mt-logo { height: 30px; }
.rp-logo { height: 17px; }
.logo-divider { color: var(--gray-300); font-size: 20px; line-height: 1; }

/* Header logos cascade in left-to-right — once, on page load */
.logos > * { animation: logoIn 0.5s ease both; }
.logos .mt-logo { animation-delay: 0.05s; }
.logos .logo-divider { animation-delay: 0.18s; }
.logos .rp-logo { animation-delay: 0.31s; }
@keyframes logoIn {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .logos > * { animation: none; } }

.card {
    position: relative;
    background-color: var(--white);
    border-radius: var(--radius);
    padding: 32px 24px;
    box-shadow: var(--shadow-lg);
    margin-bottom: 20px;
    overflow: hidden;
}

/* Tiled «МТ» watermark, on its own layer so it can be FADED at the card
   edges. Two separate cuts used to leave a stray half-glyph (read as an
   extra «Т»): the tile itself clipping a text run, and — the one that
   actually shows on screen — the CARD edge slicing whatever tile lands
   there, since the card is never an exact multiple of 150px. The tile now
   keeps every glyph fully inside it, and this mask fades the outer 40px to
   transparent so an edge-sliced glyph is already invisible. No mask
   support => plain watermark, never a broken layout. */
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIj48ZyB0cmFuc2Zvcm09InJvdGF0ZSgtMjAgNzUgNzUpIiBmb250LWZhbWlseT0iSW50ZXIsQXJpYWwsc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjgwMCIgZmlsbD0iIzk5MTExMSIgZmlsbC1vcGFjaXR5PSIwLjAzIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj48dGV4dCB4PSI0NSIgeT0iNTIiPtCc0KI8L3RleHQ+PHRleHQgeD0iMTA1IiB5PSIxMTIiPtCc0KI8L3RleHQ+PC9nPjwvc3ZnPg==");
    -webkit-mask-image:
        linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-composite: intersect;
}

/* Content sits above the watermark layer. */
.card > * { position: relative; z-index: 1; }

.card-icon { font-size: 48px; text-align: center; margin-bottom: 12px; }

.brand-intro {
    --brand-enter: 500ms;
    --brand-exit: 300ms;
    --brand-out: cubic-bezier(0, 0, 0.2, 1);
    --brand-in: cubic-bezier(0.4, 0, 1, 1);
    --brand-swap: 8s;
    --brand-ready: calc(var(--brand-swap) + var(--brand-exit));
    --brand-beat: 2.8s;
    --brand-spark-fall: 3.6s;
    display: grid;
    place-items: center;
    height: 144px;
    margin: -8px 0 16px;
    text-align: center;
    isolation: isolate;
}
.brand-intro-copy {
    grid-area: 1 / 1;
    width: 100%;
    animation: brandCopyOut var(--brand-exit) var(--brand-in) var(--brand-swap) forwards;
}
.brand-intro-copy > * { display: block; }
.brand-readable {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.brand-word { display: inline-block; white-space: nowrap; }
.brand-letter {
    display: inline-block;
    animation: brandLetterIn var(--brand-enter) var(--brand-out) var(--letter-delay) both;
}
.brand-intro-eyebrow {
    color: var(--gray-600);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.brand-intro-name {
    color: #ac224b;
    font-size: clamp(24px, 6vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    margin: 6px 0 10px;
}
.brand-intro-tagline {
    max-width: 300px;
    margin: 0 auto;
    color: var(--gray-700);
    font-size: 14px;
    line-height: 1.5;
    text-wrap: balance;
}
.brand-intro-mark {
    grid-area: 1 / 1;
    position: relative;
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    opacity: 0;
    animation: brandMarkIn 0s var(--brand-ready) forwards;
}
.brand-intro-mark img {
    display: block;
    animation: brandHeartbeat var(--brand-beat) ease-in-out var(--brand-ready) infinite;
}
.card:focus-within .brand-intro-mark img { animation-play-state: paused; }
.brand-intro-sparks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.brand-intro-sparks span {
    position: absolute;
    top: 0;
    color: #e5b439;
    font-size: 24px;
    line-height: 1;
    --spark-drift: 18px;
    opacity: 0;
    animation: brandSpark var(--brand-spark-fall) linear var(--spark-delay) both;
}
.brand-intro-sparks span:nth-child(even) { --spark-drift: -18px; }
.brand-intro-sparks span:nth-child(12n + 1) { left: 4%; font-size: 30px; }
.brand-intro-sparks span:nth-child(12n + 2) { left: 92%; }
.brand-intro-sparks span:nth-child(12n + 3) { left: 15%; font-size: 22px; }
.brand-intro-sparks span:nth-child(12n + 4) { left: 80%; font-size: 32px; }
.brand-intro-sparks span:nth-child(12n + 5) { left: 28%; font-size: 24px; }
.brand-intro-sparks span:nth-child(12n + 6) { left: 66%; }
.brand-intro-sparks span:nth-child(12n + 7) { left: 9%; font-size: 26px; }
.brand-intro-sparks span:nth-child(12n + 8) { left: 87%; font-size: 22px; }
.brand-intro-sparks span:nth-child(12n + 9) { left: 40%; font-size: 18px; }
.brand-intro-sparks span:nth-child(12n + 10) { left: 55%; font-size: 22px; }
.brand-intro-sparks span:nth-child(12n + 11) { left: 20%; font-size: 28px; }
.brand-intro-sparks span:nth-child(12n + 12) { left: 74%; font-size: 24px; }
@keyframes brandLetterIn {
    from { opacity: 0; transform: translate(-28px, var(--letter-rise)) rotate(-6deg); }
    to { opacity: 1; transform: translate(0, 0) rotate(0); }
}
@keyframes brandCopyOut {
    to { opacity: 0; transform: translateY(-6px) scale(0.97); }
}
@keyframes brandMarkIn {
    to { opacity: 1; }
}
@keyframes brandHeartbeat {
    0%, 34%, 100% { transform: scale(1); }
    9% { transform: scale(1.035); }
    17% { transform: scale(1); }
    25% { transform: scale(1.018); }
}
@keyframes brandSpark {
    0% { opacity: 0; transform: translate3d(0, -20px, 0) rotate(-20deg); }
    12%, 72% { opacity: 0.75; }
    100% { opacity: 0; transform: translate3d(var(--spark-drift), 144px, 0) rotate(55deg); }
}
@media (prefers-reduced-motion: reduce) {
    .brand-intro { height: auto; min-height: 144px; gap: 12px; }
    .brand-intro-copy, .brand-letter, .brand-intro-mark, .brand-intro-mark img { animation: none; }
    .brand-intro-copy, .brand-intro-mark { grid-area: auto; opacity: 1; }
    .brand-intro-mark { width: 48px; height: 48px; }
    .brand-intro-mark img { width: 48px; height: 48px; }
    .brand-intro-sparks { display: none; animation: none; }
}

/* The fuel drop gently bobs — a little life, like a drop about to fall */
.card-icon img { animation: fuelBob 2.6s ease-in-out infinite; will-change: transform; }
@keyframes fuelBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .card-icon img { animation: none; }
}

.card-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    color: var(--dark);
}

.card-subtitle {
    text-align: center;
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.bonus-form { display: flex; flex-direction: column; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
}

.form-input {
    padding: 12px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
}

.form-input:focus { border-color: var(--rp-red); }

[data-placeholder-demo]::placeholder { color: var(--gray-400); opacity: 1; }
[data-placeholder-demo]:focus::placeholder { color: transparent; }

.form-help { font-size: 12px; color: var(--gray-400); }


.phone-row { display: flex; gap: 8px; }

.phone-code-select {
    width: 90px;
    padding: 12px 8px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--white);
    outline: none;
    flex-shrink: 0;
}

.phone-code-select:focus { border-color: var(--rp-red); }
.phone-number-input { flex: 1; }

.otp-input {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 8px;
    padding: 16px;
}

.otp-countdown {
    margin: 18px 0; padding: 12px 14px; border-radius: var(--radius-sm);
    background: #fff5f5; color: var(--gray-600); font-size: 14px; text-align: center;
}
.otp-countdown strong { color: var(--rp-red); font-variant-numeric: tabular-nums; }
.otp-countdown.is-expired { color: #991B1B; background: #FEE2E2; }
.otp-resend-form { margin-top: 16px; }
.resend-countdown { color: var(--gray-600); font-size: 13px; text-align: center; }
.resend-countdown strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn:disabled, .form-input:disabled { opacity: 0.5; cursor: not-allowed; }

.btn {
    padding: 14px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
    text-decoration: none;
}

.btn-primary {
    background: var(--rp-red);
    color: var(--white);
}

.btn-primary:hover { background: var(--rp-red-dark); }

.recovery-help {
    display: block; width: 100%; min-height: 44px; margin-top: 6px;
    border: 0; background: none; color: var(--gray-600);
    font: inherit; font-size: 13px; text-decoration: underline;
    text-underline-offset: 3px; cursor: pointer;
}
.recovery-help:hover { color: var(--rp-red); }
.recovery-dialog {
    width: calc(100% - 32px); max-width: 440px;
    max-height: calc(100dvh - 32px); margin: auto; padding: 32px 24px 24px;
    border: 0; border-radius: var(--radius); background: var(--white); color: var(--dark);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.25); overscroll-behavior: contain;
}
.recovery-dialog::backdrop { background: rgba(24, 13, 16, 0.65); }
body:has(.recovery-dialog[open]) { overflow: hidden; }
.recovery-dialog h2 { padding-right: 24px; font-size: 22px; line-height: 1.3; }
.recovery-close {
    position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
    border: 0; border-radius: 50%; background: none; color: var(--gray-600);
    font: inherit; font-size: 26px; cursor: pointer;
}
.recovery-close:hover { background: var(--gray-50); }
.recovery-help:focus-visible, .recovery-dialog button:focus-visible {
    outline: 2px solid var(--rp-red); outline-offset: 3px;
}
.recovery-steps { margin: 22px 0; padding-left: 22px; font-size: 14px; line-height: 1.6; }
.recovery-steps li + li { margin-top: 12px; }
.recovery-steps li::marker { color: var(--rp-red); font-weight: 700; }
.recovery-note {
    margin-bottom: 22px; padding: 12px 14px; border-radius: var(--radius-sm);
    background: var(--gray-50); color: var(--gray-600); font-size: 13px; line-height: 1.5;
}
.recovery-dialog .btn { width: 100%; }

.messages { margin-bottom: 16px; }

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 8px;
}

.alert-error {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.card-footer-text {
    text-align: center;
    font-size: 13px;
    color: var(--gray-400);
    margin-top: 16px;
}

.card-footer-text a { color: var(--rp-red); text-decoration: none; }

.steps {
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
}

.steps-title {
    text-align: center;
    color: var(--white);
    font-size: 18px;
    margin-bottom: 20px;
}

.steps-grid { display: flex; flex-direction: column; gap: 16px; }

.step { display: flex; align-items: flex-start; gap: 14px; }

.step-number {
    width: 36px; height: 36px;
    background: var(--rp-red);
    color: var(--white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}

.step-body { flex: 1; padding-top: 6px; }
.step-text { color: rgba(255, 255, 255, 0.9); font-size: 14px; font-weight: 500; }

.step-help { margin-top: 6px; }
.step-help summary {
    display: inline-flex; align-items: center; gap: 6px;
    color: #ff9ea1; font-size: 12.5px; font-weight: 500; cursor: pointer;
    list-style: none;
}
.step-help summary::-webkit-details-marker { display: none; }
.step-help summary::before {
    content: "?"; display: inline-grid; place-items: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--rp-red); color: #fff; font-size: 10px; font-weight: 700;
}
.step-help[open] summary { margin-bottom: 8px; }
.step-help p, .step-help ul {
    color: rgba(255, 255, 255, 0.72); font-size: 12.5px; line-height: 1.6;
}
.step-help ul { padding-left: 18px; margin: 0; }
.step-help li { margin: 3px 0; }
.step-help b { color: rgba(255, 255, 255, 0.95); }
.step-help .app-buttons { margin-top: 10px; }

.guide-shots { display: flex; gap: 10px; margin: 12px 0; }
.guide-shots figure { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.guide-shot { display: flex; align-items: flex-start; width: 100%; padding: 0; border: 0; border-radius: 8px; background: none; cursor: zoom-in; }
.guide-shot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.guide-shots img {
    width: 100%; height: auto; display: block; border-radius: 8px;
    aspect-ratio: 591 / 1164; object-fit: cover; object-position: top;
    border: 1px solid rgba(255, 255, 255, 0.15); cursor: zoom-in;
    transition: transform 0.12s;
}
.guide-shots img:hover { transform: translateY(-1px); }
.guide-shots figcaption {
    margin-top: 0; padding-top: 7px; text-align: center;
    font-size: 11px; color: rgba(255, 255, 255, 0.7);
}
.step-help .guide-zoom-hint { font-size: 11px; text-align: center; }

/* Lightbox for enlarging the guide screenshots */
.lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.85); padding: 24px; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img {
    max-width: 100%; max-height: 100%;
    border-radius: 12px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
    position: absolute; top: 16px; right: 20px;
    color: #fff; font-size: 34px; line-height: 1; font-weight: 300;
    background: none; border: none; cursor: pointer;
}

.success-message { display: grid; }
.success-message .card-subtitle { margin-bottom: 0; }
.success-message > div {
    grid-area: 1 / 1;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.success-message > [aria-hidden="true"] {
    visibility: hidden; opacity: 0; transform: translateY(6px);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .success-message > div { transition: none; transform: none; }
}

.promo-display {
    text-align: center;
    margin: 24px 0;
    padding: 20px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 2px dashed var(--rp-red);
}

.promo-code {
    font-size: 28px;
    font-weight: 800;
    color: var(--rp-red);
    letter-spacing: 2px;
    word-break: break-all;
}

.bonus-details { margin-top: 20px; }

.bonus-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 14px;
}

.detail-label { color: var(--gray-600); }
.detail-value { font-weight: 600; color: var(--dark); }

.save-hint {
    text-align: center;
    color: var(--gray-400);
    font-size: 13px;
    margin-top: 20px;
}

.btn-copy {
    margin-top: 14px;
    width: 100%;
    background: var(--dark);
    color: var(--white);
    font-size: 14px;
    padding: 11px 16px;
}

.btn-copy:hover { background: #000; }
.btn-copy.copied { background: #16A34A; }

.app-links { margin-top: 22px; text-align: center; }

.app-links-title {
    font-size: 13px;
    color: var(--gray-600);
    margin-bottom: 12px;
}

.app-buttons { display: flex; gap: 10px; }

.app-btn {
    flex: 1;
    padding: 12px 10px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--dark);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

.app-btn:hover { border-color: var(--dark); background: var(--gray-50); }

.thanks {
    text-align: center;
    color: var(--dark);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--gray-100);
}

.mt-brand { color: var(--mt-red); font-weight: 700; }

.confetti-canvas {
    position: fixed; inset: 0; z-index: 999; pointer-events: none;
}

/* Cinematic reveal: МТ spins up, then a flash-bang reveals the bonus + confetti */
.reveal {
    position: fixed; inset: 0; z-index: 1001;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1A1A1A 0%, #2D1015 50%, #1A1A1A 100%);
    transition: opacity 0.42s ease, transform 0.42s ease, background 0.18s ease;
    /* Safety net: if JS never runs, the overlay must not trap the bonus behind
       it. Must stay comfortably LONGER than the scripted reveal (2.1s wind-up
       + 0.45s flash) or it would cut the animation short by itself. */
    animation: revealFail 0.5s ease 4s forwards;
}
@keyframes revealFail { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.reveal-mt { width: 96px; height: 96px; will-change: transform; }
.reveal.bang {
    opacity: 0; transform: scale(1.55); background: #fff;
    pointer-events: none;
}

.footer {
    text-align: center;
    padding: 24px 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    margin-top: auto;
}

.footer-credit { margin-top: 12px; font-size: 9.5px; color: rgba(255, 255, 255, 0.16); letter-spacing: 0.3px; }
.footer-credit b { color: rgba(255, 255, 255, 0.33); font-weight: 600; }

/* Footer language switch — unobtrusive, keeps the design clean */
.lang-switch { display: flex; gap: 4px; justify-content: center; margin-bottom: 10px; }
.lang-switch a {
    padding: 4px 11px; border-radius: 20px; font-size: 12px; text-decoration: none;
    color: rgba(255, 255, 255, 0.5); transition: color 0.15s, background 0.15s;
}
.lang-switch a:hover { color: rgba(255, 255, 255, 0.85); }
.lang-switch a.active { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* Language picker modal on first visit */
.lang-modal {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(26, 16, 21, 0.92); padding: 24px;
}
.lang-modal-box {
    background: var(--white); border-radius: var(--radius); padding: 32px 24px;
    width: 100%; max-width: 360px; text-align: center; box-shadow: var(--shadow-lg);
}
.lang-modal-logo { display: block; width: 56px; height: 56px; margin: 0 auto 8px; }
.lang-modal-title { font-size: 13px; color: var(--gray-600); margin-bottom: 20px; }
.lang-modal-options { display: flex; flex-direction: column; gap: 10px; }
.lang-modal-btn {
    display: block; padding: 14px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--gray-200); color: var(--dark); text-decoration: none;
    font-weight: 600; font-size: 16px; transition: border-color 0.15s, background 0.15s;
}
.lang-modal-btn:hover { border-color: var(--rp-red); background: var(--gray-50); }