/* ==========================================================
   Singham Weekly Lottery — Site Stylesheet
   Theme: Gold Crest — fixed backdrop, floating glass cards

   CACHE-BUSTING: every page links this file (and menu.js /
   live-status.js / live-stream.js) as e.g. "/main.css?v=1". After
   editing any of those files and re-uploading to Hostinger, bump
   the "?v=1" to "?v=2" (etc.) in all four HTML/PHP pages — otherwise
   visitors' browsers (and Hostinger's own cache) may keep serving
   the old cached copy instead of your update.
   ========================================================== */

:root {
    --navy: #0b0f22;
    --navy-2: #141b3a;
    --navy-3: #1e2750;
    --gold: #e0a83e;
    --gold-light: #f4cd76;
    --gold-deep: #a97a26;
    --bg: #faf5ea;
    --surface: #ffffff;
    --ink: #1b1e2d;
    --ink-soft: #5d5f70;
    --border: #ece2cc;
    --live: #1c9d63;
    --live-bg: #e6f7ee;
    --unavailable: #999faf;
    --unavailable-bg: #f1f1f5;
    --checking: #b3811f;
    --checking-bg: #fbf0d9;
    --shadow: 0 12px 32px rgba(11, 15, 34, 0.12);
    --shadow-sm: 0 4px 16px rgba(11, 15, 34, 0.10);
    --radius: 20px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Sticky-footer layout: on short pages (few results, little text)
   this stretches to fill the remaining viewport height so the
   footer sits at the bottom of the screen instead of floating
   mid-page with empty background below it. On tall pages it just
   grows normally and the page scrolls as usual. */
body > main {
    flex: 1 0 auto;
}

/* results.html only — its content (date picker + two result blocks)
   is naturally short, so on tall phone screens it was barely taller
   than one viewport. This gives it real scroll room instead of
   feeling cramped. Scoped to this one page on purpose. */
main.results-page {
    min-height: 85vh;
}

body.nav-open {
    overflow: hidden;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

h1, h2, h3, .display {
    font-family: 'Oswald', 'Segoe UI', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ================= FIXED BACKDROP ================= */
/* position:fixed keeps this layer pinned to the viewport while the
   foreground scrolls over it — the core of the depth illusion. The
   photo (public_html/images/bg-casino.jpg — gold casino chips,
   pre-blurred and color-graded once at the file level so there's no
   runtime blur cost on mobile GPUs) sits under a warm cream wash that
   keeps the overall page reading light rather than dark. The two glow
   blobs drift on their own independent CSS animation on top, and
   menu.js nudges the whole layer a few px on scroll/mouse-move for
   parallax. To swap the photo later, just replace bg-casino.jpg (or
   change the url() below) — nothing else needs to change. */
.bg-fixed {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(250, 245, 234, 0.5), rgba(250, 245, 234, 0.66)),
        url("/images/bg-casino.jpg") center / cover no-repeat;
    will-change: transform;
    transition: transform 0.2s linear;
}

.bg-fixed::before,
.bg-fixed::after {
    content: "";
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(70px);
    will-change: transform;
}

.bg-fixed::before {
    top: -22%;
    left: -14%;
    background: radial-gradient(circle, rgba(224, 168, 62, 0.5), transparent 70%);
    animation: blob-drift-a 26s ease-in-out infinite;
}

.bg-fixed::after {
    bottom: -26%;
    right: -16%;
    background: radial-gradient(circle, rgba(224, 168, 62, 0.38), transparent 70%);
    animation: blob-drift-b 32s ease-in-out infinite;
}

@keyframes blob-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(7%, 9%) scale(1.18); }
}

@keyframes blob-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-9%, -7%) scale(1.12); }
}

/* ================= HEADER ================= */
.header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(11, 15, 34, 0.92), rgba(20, 27, 58, 0.92));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 4px 20px rgba(11, 15, 34, 0.3);
}

.logo {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: var(--navy);
    padding: 3px;
    box-shadow: 0 0 0 3px rgba(224, 168, 62, 0.18);
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.title {
    flex: 1;
    text-align: center;
    font-family: 'Oswald', 'Segoe UI', Arial, sans-serif;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.title .subtitle {
    display: block;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: var(--gold-light);
    margin-top: 4px;
    text-transform: uppercase;
}

/* ================= MENU BUTTON ================= */
.menu-container {
    position: relative;
    z-index: 1200;
    flex-shrink: 0;
}

.menu-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(224, 168, 62, 0.4);
    color: var(--gold-light);
    padding: 9px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: background 0.15s ease, transform 0.15s ease;
}

.menu-btn:hover {
    background: rgba(224, 168, 62, 0.16);
}

.menu-btn:active {
    transform: scale(0.94);
}

/* ================= SLIDE-IN NAV PANEL ================= */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 34, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 1100;
}

.nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.dropdown {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(80vw, 300px);
    background: var(--surface);
    box-shadow: -12px 0 34px rgba(11, 15, 34, 0.28);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1150;
    display: flex;
    flex-direction: column;
    padding-top: 90px;
}

.dropdown.is-open {
    transform: translateX(0);
}

.dropdown a {
    display: block;
    padding: 16px 26px;
    text-decoration: none;
    color: var(--ink);
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.dropdown a:hover {
    background: #fbf3e0;
    color: var(--gold-deep);
    padding-left: 32px;
}

/* ================= TICKER STRIP ================= */
.ticker-strip {
    width: 100%;
    background: rgba(20, 27, 58, 0.85);
    border-top: 1px solid rgba(224, 168, 62, 0.35);
    border-bottom: 1px solid rgba(224, 168, 62, 0.35);
    height: 38px;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.ticker-strip__track {
    display: inline-flex;
    white-space: nowrap;
    animation: ticker-scroll 22s linear infinite;
    padding-left: 100%;
    color: var(--gold-light);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* ================= HERO ================= */
/* Each section is its own small semi-transparent card floating
   directly on the fixed backdrop — no full-page wrapper sheet — so
   the background stays visible in the gaps as you scroll past. */
.hero {
    text-align: center;
    max-width: 640px;
    margin: 28px auto 0;
    padding: 40px 24px 30px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(224, 168, 62, 0.3);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

/* Shared premium accent: a slim gold trim along the top edge of every
   card (hero, page-hero, article, contact-card, result-block) — a
   small branded touch rather than darkening the whole surface. */
.hero::before,
.page-hero::before,
.article::before,
.contact-card::before,
.result-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
}

.hero__badge {
    width: 108px;
    height: 108px;
    margin: 0 auto 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__badge::before,
.hero__badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    opacity: 0.5;
}

.hero__badge::before {
    inset: -10px;
    animation: badge-spin 14s linear infinite;
    border-style: dashed;
}

.hero__badge::after {
    inset: -20px;
    opacity: 0.25;
    animation: badge-pulse 2.6s ease-in-out infinite;
}

.hero__badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--surface), var(--shadow);
}

@keyframes badge-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); opacity: 0.25; }
    50% { transform: scale(1.08); opacity: 0.05; }
}

@media (prefers-reduced-motion: reduce) {
    .ticker-strip__track,
    .hero__badge::before,
    .hero__badge::after,
    .bg-fixed::before,
    .bg-fixed::after {
        animation: none;
    }

    .bg-fixed {
        transition: none;
    }
}

.page-hero {
    text-align: center;
    max-width: 560px;
    margin: 28px auto 0;
    padding: 30px 24px 26px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(224, 168, 62, 0.3);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.page-hero h1,
.page-hero h2,
.hero h1 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 25px;
    font-weight: 700;
}

.page-hero p,
.hero p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 13.5px;
}

.draw-date {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
    border: 1px solid rgba(224, 168, 62, 0.4);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    padding: 10px 22px;
    border-radius: 999px;
    letter-spacing: 0.3px;
    box-shadow: var(--shadow-sm);
}

.content {
    padding: 24px 20px 8px;
    text-align: center;
}

/* ================= RESULT BLOCKS ================= */
.results-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto;
    padding: 26px 20px 34px;
}

.result-block {
    display: flex;
    align-items: center;
    gap: 17px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(224, 168, 62, 0.3);
    border-radius: 22px;
    padding: 22px 22px 20px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease, background 0.2s ease;
}

.result-block:hover {
    box-shadow: 0 20px 40px rgba(11, 15, 34, 0.2);
    background: rgba(255, 255, 255, 0.76);
}

.result-block__icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
    box-shadow: inset 0 0 0 1px rgba(224, 168, 62, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.result-block__info {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.result-block__title {
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.result-block__time {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-top: 2px;
}

.result-block__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ---- live-stream button ---- */
.live-btn {
    appearance: none;
    border: 1px solid rgba(214, 51, 60, 0.35);
    border-radius: 999px;
    padding: 10px 14px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    background: rgba(214, 51, 60, 0.12);
    color: #c22a33;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.live-btn__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d6333c;
    animation: pulse-dot 1.4s ease-in-out infinite;
}

.live-btn:hover {
    background: rgba(214, 51, 60, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(214, 51, 60, 0.25);
}

.live-btn:active {
    transform: translateY(0);
}

/* ---- live-stream modal ---- */
.live-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 8, 18, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 2000;
}

.live-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.live-modal {
    background: var(--navy-2);
    border: 1px solid rgba(224, 168, 62, 0.35);
    border-radius: 18px;
    width: min(720px, 100%);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.94);
    transition: transform 0.25s ease;
}

.live-modal-backdrop.is-open .live-modal {
    transform: scale(1);
}

.live-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    color: var(--gold-light);
    font-family: 'Oswald', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
}

.live-modal__close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}

.live-modal__body {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.live-modal__body iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.live-modal__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-light);
    text-align: center;
    padding: 24px;
    font-size: 14px;
    line-height: 1.6;
}

/* ---- right-side action button (the live/disabled toggle) ---- */
.result-action {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 15px 25px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.result-action__dot,
.result-action__label {
    position: relative;
    z-index: 2;
}

.result-action__label {
    text-align: left;
}

.result-action__sub {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    opacity: 0.85;
    margin-top: 1px;
}

/* shine sweep — plays across the live button on hover */
.result-action::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    transform: translateX(-120%);
}

.result-action.is-live:hover::after {
    transform: translateX(120%);
    transition: transform 0.7s ease;
}

.result-action__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.result-action:disabled {
    cursor: not-allowed;
}

.result-action.is-checking {
    background: rgba(251, 240, 217, 0.75);
    color: var(--checking);
}

.result-action.is-checking .result-action__dot {
    animation: pulse-dot 1.1s ease-in-out infinite;
}

.result-action.is-live {
    background: rgba(28, 157, 99, 0.86);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(28, 157, 99, 0.35);
}

.result-action.is-live .result-action__dot {
    background: #ffffff;
    animation: pulse-dot 1.6s ease-in-out infinite;
}

.result-action.is-live:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 28px rgba(28, 157, 99, 0.45);
}

.result-action.is-live:active {
    transform: translateY(-1px) scale(0.98);
}

.result-action.is-unavailable {
    background: rgba(241, 241, 245, 0.75);
    color: var(--unavailable);
}

.result-action.is-unavailable .result-action__dot {
    animation: none;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.75); }
}

/* ================= OLD RESULTS DATE PICKER ================= */
.date-picker {
    text-align: center;
    margin: 6px 0 8px;
}

.date-picker input[type="date"] {
    padding: 11px 16px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
}

/* ================= SCROLL REVEAL ================= */
/* Tilts up into place (perspective + rotateX) rather than a flat
   fade, so scrolling past each section reads as a 3D entrance.

   Important: the resting state is a faint, blurred PEEK (0.16
   opacity) rather than fully invisible. This is deliberate — a fully
   invisible section still occupies its normal layout space, so a
   short scroll past the result cards used to land on plain empty
   background with no clue that text existed just below. This way,
   the instant any sliver of the section scrolls into view the user
   sees a soft "something is here" hint (pure CSS, so it works the
   instant it's on screen with zero dependency on JS/observer timing)
   and it then sharpens into full focus once menu.js's IntersectionObserver
   fires (see the rootMargin comment in menu.js). */
.reveal {
    opacity: 0.16;
    filter: blur(3px);
    transform: perspective(800px) translateY(26px) rotateX(6deg);
    transform-origin: bottom center;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: perspective(800px) translateY(0) rotateX(0deg);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }
}

/* ================= ARTICLE / SEO TEXT ================= */
.article {
    max-width: 820px;
    margin: 10px auto 40px;
    padding: 36px 28px 32px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(224, 168, 62, 0.28);
    box-shadow: var(--shadow-sm);
    line-height: 1.8;
    color: var(--ink-soft);
    font-size: 15px;
    position: relative;
    overflow: hidden;
}

.article h2 {
    color: var(--navy);
    font-size: 19px;
    margin-top: 34px;
    letter-spacing: 0.3px;
}

.article h3 {
    color: var(--navy);
    font-size: 14.5px;
    margin-top: 18px;
    margin-bottom: 4px;
}

.article .article__lead {
    color: var(--navy);
    text-align: center;
    font-size: 21px;
    margin-top: 0;
}

.article .article__lead::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin: 12px auto 0;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
    border-radius: 2px;
}

/* ================= SCHEMES PAGE ================= */
.schemes-card {
    max-width: 700px;
    margin: 22px auto;
    padding: 30px 26px 26px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(224, 168, 62, 0.3);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.schemes-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold-deep));
}

.schemes-card__title {
    margin: 0 0 18px;
    text-align: center;
    color: var(--navy);
    font-size: 19px;
}

.schemes-table-wrap {
    overflow-x: auto;
}

.schemes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.schemes-table th {
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
    color: #ffffff;
    padding: 10px 14px;
    text-align: left;
    font-family: 'Oswald', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 12px;
    white-space: nowrap;
}

.schemes-table th:first-child {
    border-radius: 8px 0 0 0;
}

.schemes-table th:last-child {
    border-radius: 0 8px 0 0;
}

.schemes-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
}

.schemes-table tbody tr:nth-child(even) {
    background: rgba(224, 168, 62, 0.07);
}

.schemes-table tbody tr:last-child td {
    border-bottom: none;
}

.schemes-download {
    text-align: center;
    margin-top: 16px;
    margin-bottom: 40px;
}

.schemes-download a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 10px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.schemes-download a:hover {
    background: var(--navy-2);
    transform: translateY(-2px);
}

/* ================= CONTACT PAGE ================= */
.contact-card {
    max-width: 460px;
    margin: 26px auto 40px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(224, 168, 62, 0.3);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 32px 30px 28px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.contact-card p {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    color: var(--ink);
    margin: 14px 0;
}

.contact-card .contact-icon {
    font-size: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
    box-shadow: inset 0 0 0 1px rgba(224, 168, 62, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ================= FOOTER ================= */
.site-footer {
    position: relative;
    z-index: 1;
    padding: 34px 10px 26px;
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
    text-align: center;
}

.site-footer__stars {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 10px;
    margin-bottom: 14px;
    opacity: 0.8;
}

.site-footer__links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.site-footer__links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    opacity: 0.9;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.site-footer__links a:hover {
    opacity: 1;
    color: var(--gold-light);
}

.site-footer__note {
    color: rgba(244, 205, 118, 0.85);
    font-size: 12px;
}

/* ================= BACK-TO-TOP BUTTON ================= */
.back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold-light);
    border: 1px solid var(--gold);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 500;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 600px) {
    .header {
        padding: 10px 14px;
    }

    .logo {
        width: 46px;
        height: 46px;
    }

    .title {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .title .subtitle {
        font-size: 9px;
        letter-spacing: 1.8px;
    }

    .menu-btn {
        font-size: 20px;
        padding: 10px 14px;
    }

    .hero__badge {
        width: 88px;
        height: 88px;
    }

    .page-hero h1,
    .page-hero h2,
    .hero h1 {
        font-size: 21px;
    }

    /* lighter blur on the "framing" cards on mobile GPUs keeps
       scrolling smooth — several simultaneous blurred layers is
       the classic cause of scroll jank on weaker phones */
    .hero,
    .page-hero,
    .article {
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
    }

    /* the smaller nested cards drop their own blur entirely on
       mobile and fall back to a plain frosted color instead */
    .result-block,
    .contact-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.8);
    }

    .bg-fixed::before,
    .bg-fixed::after {
        filter: blur(40px);
    }

    .result-block {
        padding: 18px 18px;
        gap: 13px;
    }

    .result-block__title {
        font-size: 17.5px;
    }

    .result-block__time {
        font-size: 14.5px;
    }

    /* only one button in .result-block__actions now (live-btn is
       disabled) so it comfortably stays on the same row, on the
       right — no more forcing it to wrap onto its own line */
    .result-action {
        padding: 14px 20px;
        font-size: 15px;
    }

    .result-action__sub {
        font-size: 11px;
    }

    .results-grid {
        padding: 22px 16px 6px;
        gap: 12px;
    }

    .contact-card {
        padding: 24px 22px;
    }

    .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
    }
}