/* ==========================================================================
   ThaiGovAgency — PUBLIC SITE extras
   --------------------------------------------------------------------------
   The gradient header, cards, tables, buttons, forms, badges, alerts, pagers
   and grids all come from theme.css, the shared design system loaded first.
   What is left here is only what a marketing page needs and the panels do
   not: the hero, the jackpot card, the countdown, game cards and the footer.
   ========================================================================== */

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------- header contents ---------------------------- */
/* .t-head is the shared gradient bar; below is only what sits inside it. */
.t-head .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15.5px; color: #fff; }
.t-head .brand:hover { text-decoration: none; }
.brand .mark {
    width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .22); color: #fff; font-size: 13px; font-weight: 800;
    flex: 0 0 auto;
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; flex: 1; }
.nav a {
    padding: 7px 11px; border-radius: 8px; color: rgba(255, 255, 255, .88);
    font-size: 12.5px; font-weight: 600; transition: .15s;
}
.nav a:hover, .nav a.active { color: #fff; background: rgba(255, 255, 255, .18); text-decoration: none; }
/* The public nav has no icons, so the brand accent is what marks the current page:
   a coral wash plus an underline, matching the sidebar tones inside the panels. */
.nav a.active { background: rgba(255, 107, 74, .18); box-shadow: inset 0 -2px 0 #ff6b4a; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
/* the buttons inside the gradient header need to read on it */
.t-head .btn-ghost { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.t-head .btn-ghost:hover { background: rgba(255, 255, 255, .24); color: #fff; }

/* A deeper bar than the panels get. public.css is loaded only on the public site,
   so this cannot reach the member or admin shells. Height is left alone because the
   mobile nav panel is positioned off --t-head-h. */
.t-head {
    background: linear-gradient(100deg, #0d1226 0%, #151d38 52%, #241a3a 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 26px rgba(9, 14, 30, .26);
}

/* ---------------------------- nav dropdown ------------------------------- */
.nav-drop { position: relative; }
/* The dropdown's title is a toggle, so it reads bold like every other toggle. */
.nav-drop > a { font-weight: 700; }
.nav-drop > a .caret { font-size: 9px; margin-left: 5px; opacity: .8; display: inline-block; transition: .15s; }
.nav-drop.open > a .caret { transform: rotate(180deg); }

.nav-drop-menu {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
    min-width: 216px; padding: 8px;
    background: var(--t-surface); border: 1px solid var(--t-line);
    border-radius: var(--t-radius); box-shadow: var(--t-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s;
}
/* Closed until CLICKED. A hover-only menu is unreachable on a touch screen and awkward
   by keyboard, so the open state is the one and only trigger. */
.nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-drop-menu a {
    display: block; padding: 9px 12px; border-radius: 8px;
    font-size: 13.5px; font-weight: 600; color: var(--t-muted);
}
.nav-drop-menu a:hover { background: var(--t-blue-card); color: var(--t-text); text-decoration: none; }

/* -------------------------------- hero ----------------------------------- */
/* A dark, cinematic panel. The public site is the one place the brand gets to
   perform, so the hero carries the drama and the content below stays readable. */
.hero {
    position: relative; overflow: hidden; border-bottom: 0;
    background:
        radial-gradient(880px 420px at 84% -14%, rgba(224, 122, 95, .30), transparent 62%),
        radial-gradient(680px 380px at 4% 112%, rgba(59, 109, 245, .24), transparent 64%),
        linear-gradient(152deg, #0c1124 0%, #131a30 56%, #1b1431 100%);
}
.hero .inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: 44px; padding: 68px 0 74px; align-items: center; }
.hero h1 { color: #fff; font-size: 43px; line-height: 1.05; margin: 18px 0 14px; letter-spacing: -1.4px; }
.hero h1 .hl { color: #ff6b4a; }
.hero p.lead { font-size: 15px; line-height: 1.65; color: #b6bfd6; margin: 0 0 26px; max-width: 500px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 15px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.1px;
    text-transform: uppercase;
    background: rgba(255, 107, 74, .12); color: #ff9d84; border: 1px solid rgba(255, 107, 74, .32);
}
.eyebrow::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ff6b4a;
    box-shadow: 0 0 0 0 rgba(255, 107, 74, .65); animation: p-pulse 2s infinite;
}
@keyframes p-pulse {
    70%  { box-shadow: 0 0 0 9px rgba(255, 107, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 74, 0); }
}

.jackpot-card {
    position: relative;
    background: linear-gradient(165deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px; padding: 24px; color: #eef1f8;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
    backdrop-filter: blur(10px);
}
.jackpot-card .label { font-size: 10.5px; letter-spacing: 2px; color: #939ec0; font-weight: 700; text-transform: uppercase; }
.jackpot-card .amount {
    font-size: 38px; font-weight: 800; margin: 9px 0 5px; letter-spacing: -1.5px; color: #fff;
    font-variant-numeric: tabular-nums;
}
.jackpot-card .meta { color: #9aa5c2; font-size: 12px; }

.countdown { display: flex; gap: 7px; margin-top: 18px; }
.countdown .unit {
    flex: 1; text-align: center; padding: 11px 6px; border-radius: 11px;
    background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .10);
}
.countdown .unit b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.countdown .unit span { font-size: 9px; letter-spacing: 1.3px; color: #8e99b8; text-transform: uppercase; }

/* ------------------------------- sections -------------------------------- */
.section { padding: 58px 0; }
.section-alt {
    background: linear-gradient(180deg, #f7f8fc 0%, #f1f3f9 100%);
    border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line);
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.section-head h2 { font-size: 26px; margin: 0 0 7px; letter-spacing: -.9px; }
.section-head p { margin: 0; color: var(--t-muted); font-size: 14px; max-width: 58ch; }

/* the small label that sits above a section heading */
.section-tag {
    display: inline-block; margin-bottom: 12px;
    font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--t-red);
}

/* -------------------------------- cards ---------------------------------- */
/* Bigger radius, a two-layer shadow and a lift on hover. Only the public layer
   sees this file, so the member and admin panels keep their flatter cards. */
.card {
    border-radius: 14px; padding: 18px;
    box-shadow: 0 1px 2px rgba(9, 14, 30, .04), 0 16px 34px rgba(9, 14, 30, .06);
    transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(9, 14, 30, .05), 0 24px 50px rgba(9, 14, 30, .12); }
.card h3 { margin: 0 0 7px; font-size: 16.5px; letter-spacing: -.3px; }
.card p { color: var(--t-muted); font-size: 13px; margin: 0 0 14px; line-height: 1.6; }
.card .price { font-size: 22px; font-weight: 800; color: var(--t-red); letter-spacing: -.6px; }
.card .price small { font-size: 12px; color: var(--t-muted); font-weight: 600; }

.game-card { display: flex; flex-direction: column; }
.game-card .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.game-card .icon {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(150deg, #1b2440, #2b3355); color: #fff;
    font-weight: 800; font-size: 14px; letter-spacing: .5px;
}
.game-card h3 { font-size: 17px; margin-bottom: 4px; }
.game-card .stats {
    display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 18px 0; padding-top: 16px;
    border-top: 1px solid var(--t-line);
}
.game-card .stats div span {
    display: block; font-size: 10.5px; color: var(--t-muted);
    text-transform: uppercase; letter-spacing: .8px; margin-bottom: 2px;
}
.game-card .stats div b { font-size: 15px; letter-spacing: -.3px; }
.game-card .stats .jackpot b { color: var(--t-red); }

/* Time left before betting closes, shown on every open game card and schedule row. */
.card-count {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 2px 0 12px; padding-top: 12px; border-top: 1px solid var(--t-line);
    font-size: 12px; color: var(--t-muted); font-weight: 600;
}
.card-count b, .cd {
    color: var(--t-red); font-weight: 800;
    font-variant-numeric: tabular-nums; letter-spacing: .4px;
}
.cd { margin-right: 8px; }

/* ------------------------------ stat strip ------------------------------- */
/* One dark band with dividers, rather than four identical floating cards. */
.stat-strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(120deg, #0e1428 0%, #161e38 60%, #211636 100%);
    border-radius: 16px; overflow: hidden; margin-bottom: 54px;
    box-shadow: 0 24px 54px rgba(9, 14, 30, .20);
}
.stat-strip .cell { padding: 22px 18px; text-align: center; border-left: 1px solid rgba(255, 255, 255, .08); }
.stat-strip .cell:first-child { border-left: 0; }
.stat-strip .v { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.stat-strip .k { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8e99b8; margin-top: 5px; }

/* -------------------------------- steps ---------------------------------- */
.step .n {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--t-blue-card); color: #14507f; font-weight: 800; font-size: 15px; margin-bottom: 14px;
}
.step h3 { font-size: 16.5px; }

/* ------------------------------- motion ---------------------------------- */
/* Scoped to the hero and the stat strip so content-heavy pages stay still. */
@keyframes p-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero .inner > * { animation: p-rise .55s cubic-bezier(.22, .61, .36, 1) both; }
.hero .inner > *:nth-child(2) { animation-delay: .09s; }
.stat-strip { animation: p-rise .5s .05s cubic-bezier(.22, .61, .36, 1) both; }

@media (prefers-reduced-motion: reduce) {
    .hero .inner > *, .stat-strip { animation: none; }
    .card { transition: none; }
    .card:hover { transform: none; }
    .eyebrow::before { animation: none; }
}

/* ------------------------------- number chip ----------------------------- */
.num-ball {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    background: var(--t-red); color: #fff; font-weight: 800; font-size: 15px;
}
.num-ball.sm { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
.num-ball.teal { background: var(--t-teal); color: #fff; }

/* ------------------------------- auth card ------------------------------- */
.auth-card {
    position: relative; overflow: hidden;
    max-width: 470px; margin: 64px auto; background: var(--t-surface);
    border: 1px solid var(--t-line); border-radius: 18px; padding: 36px;
    box-shadow: 0 1px 2px rgba(9, 14, 30, .04), 0 22px 48px rgba(9, 14, 30, .10);
}
/* the same brand edge the hero carries, for continuity between pages */
.auth-card::before {
    content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px;
    background: linear-gradient(90deg, #0d1226 0%, #2b3355 55%, #ff6b4a 100%);
}
.auth-card h2 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.8px; }
.auth-card .sub { color: var(--t-muted); font-size: 14.5px; margin-bottom: 26px; }

.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 12.5px; font-weight: 700; color: #4a5262; margin-bottom: 6px; }
.form-control {
    width: 100%; padding: 11px 14px; border-radius: 10px;
    border: 1px solid #d7dce6; font-size: 14.5px; font-family: inherit; background: #fff;
}
.form-control:focus { outline: none; border-color: var(--t-red); box-shadow: 0 0 0 3px rgba(211, 47, 47, .12); }
.form-hint { font-size: 13px; color: var(--t-muted); }

/* --------------------------- inner page header --------------------------- */
/* Every public page that is not the home page opens on this band, so the site
   reads as one thing rather than a landing page plus assorted forms. */
.page-hero {
    background:
        radial-gradient(760px 300px at 88% -20%, rgba(224, 122, 95, .26), transparent 64%),
        linear-gradient(150deg, #0d1226 0%, #151d38 58%, #1e1636 100%);
    padding: 42px 0 44px;
}
.page-hero .crumb { color: #8e99b8; font-size: 12px; letter-spacing: .3px; }
.page-hero h1 { color: #fff; font-size: 30px; letter-spacing: -1px; margin: 9px 0 7px; line-height: 1.15; }
.page-hero p { color: #b6bfd6; margin: 0; max-width: 62ch; font-size: 14.5px; line-height: 1.65; }
.page-hero .btn-ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); color: #fff; }
.page-hero .btn-ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* ------------------------------ long copy -------------------------------- */
/* Content pages are raw HTML written in the admin panel, so the measure and the
   rhythm have to come from here. */
.prose { max-width: 74ch; font-size: 14px; line-height: 1.8; }
.prose h2 { font-size: 20px; margin: 28px 0 9px; letter-spacing: -.6px; }
.prose h3 { font-size: 16px; margin: 22px 0 7px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--t-red); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.prose img { max-width: 100%; height: auto; border-radius: 12px; }
/* The page body is raw HTML written in the admin panel. A wide table gets its own
   horizontal scroll rather than pushing the whole page sideways, and long unbroken
   strings wrap instead of overflowing the column. */
.page-content { max-width: 100%; overflow-wrap: anywhere; }
.prose > table { display: block; width: 100%; overflow-x: auto; }

/* ------------------------------- footer ---------------------------------- */
.site-footer { background: var(--t-surface); border-top: 1px solid var(--t-line); padding: 38px 0 20px; margin-top: 30px; }
.site-footer .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15.5px; color: var(--t-text); }
.site-footer .brand .mark { background: var(--t-red); color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 26px; }
.footer-grid .f-brand { margin-bottom: 12px; }
.site-footer h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--t-muted); margin: 0 0 13px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer a { color: var(--t-muted); font-size: 13px; }
.site-footer a:hover { color: var(--t-red); }
.footer-bottom {
    border-top: 1px solid var(--t-line); margin-top: 34px; padding-top: 20px;
    display: flex; justify-content: space-between; gap: 16px;
    color: var(--t-muted); font-size: 13px; flex-wrap: wrap;
}
.responsible { font-size: 12px; color: var(--t-muted); }

/* per-market result numbers, e.g. the Thai National breakdown */
.market-numbers { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; }
.market-numbers .mk { font-size: 12px; color: var(--t-muted); white-space: nowrap; }
.market-numbers .mk b {
    color: var(--t-text); font-weight: 700; letter-spacing: .5px; margin-left: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------- weekly result grid -------------------------- */
/* One column per drawing day, Monday to Saturday. The range control picks the week. */
.result-range {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 20px; padding: 14px 16px;
    background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius);
}
.result-range label { font-size: 12.5px; font-weight: 700; color: var(--t-muted); margin: 0; }
.result-range .form-control { width: auto; min-width: 158px; }
.result-range .to { color: var(--t-muted); font-size: 13px; }
.result-range .spacer { flex: 1; }

.result-week td { vertical-align: top; }
.result-week .nowrap { white-space: nowrap; }
.result-week .day-result { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.result-week .day-meta { font-size: 11px; }
.result-week th { text-align: center; }
.result-week th:first-child { text-align: left; }

.result-note { font-size: 12.5px; margin-top: 14px; }

/* --------------------------- mobile navigation --------------------------- */
/* Below 980px the primary nav used to be display:none, which hid Home, About,
   Results, Contact and Sign Up from every phone and tablet. It is a
   panel under the header instead. The Results dropdown opens on tap, because a
   touch device has no hover to open it and there was no JS driving it either. */
.f-burger { display: none; }
.nav-scrim { display: none; }

@media (max-width: 980px) {
    .hero .inner { grid-template-columns: 1fr; padding: 46px 0 52px; }
    .hero h1 { font-size: 30px; letter-spacing: -.8px; }
    .hero p.lead { font-size: 14.5px; }
    .section { padding: 46px 0; }
    .section-head h2 { font-size: 22px; }
    .stat-strip { grid-template-columns: 1fr 1fr; margin-bottom: 44px; }
    .stat-strip .cell:nth-child(odd) { border-left: 0; }
    .stat-strip .cell:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
    .footer-grid { grid-template-columns: 1fr 1fr; }

    .t-head .f-burger {
        display: grid; place-items: center; gap: 4px;
        width: 44px; height: 44px; margin-left: 4px; padding: 0;
        background: none; border: 0; border-radius: 8px; cursor: pointer;
    }
    .t-head .f-burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }
    .t-head .f-burger:hover { background: rgba(255, 255, 255, .14); }

    .nav {
        position: fixed; top: var(--t-head-h); right: 0; left: 0; z-index: 96;
        display: block; margin: 0;
        padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
        background: var(--t-side); overflow-y: auto;
        max-height: calc(100vh - var(--t-head-h));
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity .2s, transform .2s, visibility .2s;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .34);
    }
    .t-shell.nav-open .nav { opacity: 1; visibility: visible; transform: none; }

    .nav a { padding: 12px 14px; font-size: 15px; }
    .nav a:hover, .nav a.active { background: rgba(255, 255, 255, .14); }

    /* Inside the panel the dropdown is inline, not an overlay. */
    .nav-drop { position: static; }
    .nav-drop-menu {
        position: static; min-width: 0; padding: 2px 0 6px 10px; margin: 0;
        background: rgba(0, 0, 0, .2); border: 0; box-shadow: none;
        opacity: 1; visibility: visible; transform: none; display: none;
    }
    .nav-drop.open .nav-drop-menu { display: block; }
    .nav-drop-menu a { color: var(--t-side-txt); }

    .nav-scrim {
        display: block; position: fixed; top: var(--t-head-h); right: 0; bottom: 0; left: 0;
        z-index: 95; background: rgba(15, 20, 30, .48);
        opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    .t-shell.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
    body.nav-open { overflow: hidden; }

    /* Targets a thumb can actually hit. */
    .nav a, .nav-drop-menu a { min-height: 46px; display: flex; align-items: center; }
    .t-head .btn-sm { min-height: 40px; }
}

@media (max-width: 620px) {
    .footer-grid { grid-template-columns: 1fr; }
    .section { padding: 38px 0; }
    .hero h1 { font-size: 26px; }
    .container { padding: 0 16px; }
    .t-head .brand { font-size: 14.5px; }
    .stat-strip { grid-template-columns: 1fr; }
    .stat-strip .cell { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
    .stat-strip .cell:first-child { border-top: 0; }
    .jackpot-card { padding: 18px; }
    .jackpot-card .amount { font-size: 31px; }
    .countdown .unit b { font-size: 19px; }
    .result-range .spacer { display: none; }
}

/* ==========================================================================
   PUBLIC RESKIN — teal + orange, hexagon texture
   --------------------------------------------------------------------------
   The public site is re-skinned to the reference: a dark teal header and hero
   with a hexagon texture, orange actions and accents, a teal contact band, a
   white newsletter band and a teal footer. Every rule here is scoped to
   public.css, which the member and admin panels never load, so their navy +
   red look is untouched. --t-red is deliberately NOT overridden: it is also
   the error / danger colour.
   ========================================================================== */

:root {
    --glo-teal:     #0e5b63;
    --glo-teal-2:   #0b4149;
    --glo-teal-3:   #12707a;
    --glo-orange:   #f5822c;
    --glo-orange-2: #e26f18;

    --t-head-grad: linear-gradient(100deg, #0b4149 0%, #0e5b63 55%, #12707a 100%);
    --t-side:      #0e5b63;
    --t-side-2:    #0b4149;
    --t-side-txt:  #b9d6d8;
    --t-blue:      #0e7c86;
    --t-teal:      #0e7c86;
    --t-blue-card: #e2f2f2;
    --t-blue-line: #cbe6e6;
    --t-blue-head: #cdecea;
    --t-cta-grad:       linear-gradient(100deg, #f5822c 0%, #e2661a 100%);
    --t-cta-grad-hover: linear-gradient(100deg, #e26f18 0%, #c9570f 100%);
    --t-cta-shadow:     0 8px 20px rgba(226, 111, 24, .30);
    --t-ring:           0 0 0 3px rgba(245, 130, 44, .28);
}

/* Orange where the reference uses it. */
.btn-primary, .btn-gold { background: var(--glo-orange); }
.btn-primary:hover, .btn-gold:hover { background: var(--glo-orange-2); color: #fff; }
.section-tag { color: var(--glo-orange); }
.card .price { color: var(--glo-orange); }
.num-ball { background: var(--glo-orange); }
.game-card .stats .jackpot b,
.t-draw-timer, .card-count b, .cd { color: var(--glo-orange); }
.data th { color: var(--glo-teal-2); background: var(--t-blue-head); }
.step .n { color: var(--glo-teal-2); }
.card a { color: var(--glo-teal); }

/* ---------------------------- hexagon texture ---------------------------- */
.hero, .page-hero, .t-head, .contact-band { position: relative; }
.hero::after, .page-hero::after, .t-head::after, .contact-band::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"><path d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z" fill="%23ffffff"/></svg>');
    background-size: 34px 60px; opacity: .05;
}
.hero > *, .page-hero > *, .t-head > *, .contact-band > * { position: relative; z-index: 1; }

/* ------------------------------ dark panels ------------------------------ */
.hero {
    background:
        radial-gradient(880px 420px at 84% -14%, rgba(245, 130, 44, .24), transparent 62%),
        radial-gradient(680px 380px at 4% 112%, rgba(18, 112, 122, .34), transparent 64%),
        linear-gradient(152deg, #0b4149 0%, #0e5b63 56%, #12707a 100%);
}
.hero h1 .hl { color: #ffb27a; }
.eyebrow { background: rgba(245, 130, 44, .14); color: #ffc08a; border-color: rgba(245, 130, 44, .34); }
.eyebrow::before { background: var(--glo-orange); box-shadow: 0 0 0 0 rgba(245, 130, 44, .65); }
@keyframes p-pulse {
    70%  { box-shadow: 0 0 0 9px rgba(245, 130, 44, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 130, 44, 0); }
}
.hero .btn-ghost, .page-hero .btn-ghost {
    background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .30); color: #fff;
}
.hero .btn-ghost:hover, .page-hero .btn-ghost:hover { background: rgba(255, 255, 255, .20); color: #fff; }
.page-hero {
    background:
        radial-gradient(760px 300px at 88% -20%, rgba(245, 130, 44, .20), transparent 64%),
        linear-gradient(150deg, #0b4149 0%, #0e5b63 58%, #12707a 100%);
}
.stat-strip { background: linear-gradient(120deg, #0b4149 0%, #0e5b63 60%, #12707a 100%); }
.game-card .icon { background: linear-gradient(150deg, #0b4149, #12707a); }

/* --------------------------- header brand lockup ------------------------- */
.t-head .brand { display: flex; align-items: center; gap: 10px; }
.t-head .brand .mark {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
    display: grid; place-items: center; background: var(--glo-orange); color: #fff;
    font-weight: 800; font-size: 14px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b { font-size: 14.5px; font-weight: 800; letter-spacing: .2px; color: #fff; }
.brand-text small { font-size: 8.5px; letter-spacing: 1.3px; text-transform: uppercase; color: #9fc3c6; font-weight: 700; }

.nav a.active { background: rgba(245, 130, 44, .20); box-shadow: inset 0 -2px 0 var(--glo-orange); }
.btn-exit svg { margin-right: 2px; }

/* ------------------------------ breadcrumb pill -------------------------- */
.page-hero .crumb {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); color: #e4f0f0;
}
.page-hero .crumb::before { content: 'Home'; color: #ffb27a; }
.page-hero .crumb::after { content: '\203A'; color: #8fb3b6; }

/* -------------------------------- footer --------------------------------- */
.site-footer { background: var(--glo-teal-2); border-top: 0; padding: 0; margin-top: 0; color: #cfe0e1; }

.newsletter-band { background: #fff; padding: 46px 0; border-top: 1px solid var(--t-line); }
.newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.newsletter-copy .section-tag { margin-bottom: 8px; }
.newsletter-copy h2 { font-size: 25px; margin: 0 0 8px; letter-spacing: -.7px; }
.newsletter-copy p { margin: 0; color: var(--t-muted); font-size: 13.5px; max-width: 52ch; line-height: 1.6; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input[type="email"] {
    flex: 1 1 220px; min-width: 0; padding: 12px 15px; border-radius: 10px;
    border: 1px solid #d7dce6; font-size: 14px; font-family: inherit; background: #fff; color: var(--t-text);
}
.newsletter-form input[type="email"]:focus { outline: none; border-color: var(--glo-orange); box-shadow: var(--t-ring); }
.newsletter-form .btn { flex: 0 0 auto; padding: 12px 24px; font-size: 13px; }

.contact-band { background: var(--glo-teal); padding: 32px 0; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.contact-grid .cico {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .10); color: #ffb27a; margin-bottom: 11px;
}
.contact-grid h3 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; color: #9fc3c6; }
.contact-grid p, .contact-grid a { margin: 0; font-size: 13.5px; color: #e4f0f0; line-height: 1.55; display: block; }
.contact-grid a:hover { color: #fff; text-decoration: none; }

.site-footer .container { padding-top: 46px; }
.site-footer .footer-grid { margin-bottom: 0; }
.site-footer h3 { color: #8fb3b6; }
.site-footer a { color: #cfe0e1; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; }
.site-footer .brand .mark { background: var(--glo-orange); }
.site-footer .brand-text small { color: #8fb3b6; }
.site-footer .muted { color: #a9c6c8 !important; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 34px; padding: 20px 0 34px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    color: #a9c6c8; font-size: 13px;
}
.footer-social { display: flex; gap: 8px; }
.footer-social a {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .10); color: #e4f0f0;
}
.footer-social a:hover { background: var(--glo-orange); color: #fff; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: #cfe0e1; font-size: 13px; }
.footer-links a:hover { color: #fff; text-decoration: none; }

@media (max-width: 980px) {
    .newsletter-inner { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .contact-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   PREMIUM PASS — refined heritage (deep ink-teal, champagne gold, fine rules)
   --------------------------------------------------------------------------
   Layered after the earlier reskin, so these rules win by source order. Scoped
   to public.css, which only the public site loads: the member and admin panels
   keep their navy + red system untouched.
   Direction: the accent moves from saturated orange to a restrained champagne
   gold, the base deepens to an ink-teal, spacing and type become fluid, and
   depth is carried by hairlines and soft shadows rather than heavy gradients.
   ========================================================================== */

:root {
    --glo-ink:       #062226;
    --glo-teal:      #0a474e;
    --glo-teal-2:    #07383e;
    --glo-teal-3:    #0d5b63;
    --glo-gold:      #d2a44e;
    --glo-gold-2:    #b98a34;
    --glo-gold-ink:  #7a5a13;
    --glo-gold-soft: #f6ecd6;
    --glo-cream:     #f7f4ee;
    --glo-cream-2:   #efe9dd;
    --glo-hair:      rgba(210, 164, 78, .34);

    /* Secondary text is one step darker than the shared --t-muted: the old value sat
       just under the 4.5:1 contrast floor on white and cream, which reads thin and,
       on a marketing surface, unrefined. Public-only; the panels keep their value. */
    --t-muted:       #5a6472;

    --t-head-grad: linear-gradient(100deg, #062226 0%, #0a474e 58%, #0d5b63 100%);
    --t-side:      #0a474e;
    --t-side-2:    #07383e;
    --t-side-txt:  #b9d6d8;
    --t-blue:      #0d6971;
    --t-teal:      #0d6971;
    --t-blue-card: #e6f2f1;
    --t-blue-line: #cfe6e4;
    --t-blue-head: #d6ebe8;
    --t-cta-grad:       linear-gradient(100deg, #d2a44e 0%, #b98a34 100%);
    --t-cta-grad-hover: linear-gradient(100deg, #c2943c 0%, #a3772a 100%);
    --t-cta-shadow:     0 10px 26px rgba(160, 118, 40, .28);
    --t-ring:           0 0 0 3px rgba(210, 164, 78, .30);
}

/* ------------------------------ fluid frame ------------------------------ */
.container { max-width: 1280px; padding-left: clamp(16px, 4vw, 28px); padding-right: clamp(16px, 4vw, 28px); }

/* -------------------------------- header --------------------------------- */
/* A translucent ink bar with a gold hairline: the page scrolls underneath it,
   which reads far more considered than an opaque slab. */
.t-head {
    background: rgba(6, 34, 38, .82);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--glo-hair);
    box-shadow: 0 12px 34px rgba(3, 18, 20, .30);
}
.hero::after, .page-hero::after, .t-head::after, .contact-band::after { opacity: .035; }

.t-head .brand .mark,
.site-footer .brand .mark {
    background: linear-gradient(160deg, #dcb05c 0%, #b98a34 100%);
    color: #2a1e05; border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.brand-text b { letter-spacing: .2px; }
.brand-text small { color: #9fc3c6; }

/* Nav: quiet by default, the current page marked by a gold rule, not a pill. */
.nav a {
    position: relative; color: rgba(233, 241, 241, .82); font-weight: 600;
    border-radius: 9px; transition: color .16s ease, background .16s ease;
}
.nav a:hover { background: rgba(210, 164, 78, .10); color: #fff; }
.nav a.active { background: transparent; box-shadow: none; color: #fff; }
.nav a.active::after {
    content: ''; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px;
    border-radius: 2px; background: var(--glo-gold);
}

.t-head .btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(210, 164, 78, .34); color: #f3e6cd; }
.t-head .btn-ghost:hover { background: rgba(210, 164, 78, .16); color: #fff; }

/* Dropdown panel: a crisp floating card with a gold-warm hover. */
.nav-drop-menu {
    border-radius: 14px; border: 1px solid rgba(6, 34, 38, .10); padding: 8px;
    box-shadow: 0 28px 64px rgba(6, 34, 38, .22), 0 2px 6px rgba(6, 34, 38, .08);
}
.nav-drop-menu a { color: #46505c; border-radius: 9px; }
.nav-drop-menu a:hover { background: var(--glo-gold-soft); color: #4a3708; }

/* -------------------------------- buttons -------------------------------- */
.btn-primary, .btn-gold {
    background: linear-gradient(180deg, #dcb05c 0%, #c9962f 100%);
    color: #2a1e05;
    box-shadow: 0 10px 24px rgba(160, 118, 40, .24), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-primary:hover, .btn-gold:hover {
    background: linear-gradient(180deg, #c9962f 0%, #b0812a 100%);
    color: #211703;
}
.btn-gold:focus-visible, .btn-primary:focus-visible { outline: 2px solid var(--glo-gold); outline-offset: 3px; }

/* --------------------------------- hero ---------------------------------- */
.hero {
    background:
        radial-gradient(920px 470px at 82% -12%, rgba(210, 164, 78, .20), transparent 60%),
        radial-gradient(760px 420px at 2% 108%, rgba(13, 91, 99, .40), transparent 62%),
        linear-gradient(158deg, #062226 0%, #0a474e 56%, #0d5b63 100%);
}
.hero .inner {
    grid-template-columns: 1.12fr .88fr;
    gap: clamp(32px, 5vw, 72px);
    padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px);
}
.hero h1 {
    font-size: clamp(34px, 5.2vw, 62px); line-height: 1.02; letter-spacing: -2px;
    font-weight: 800; margin: 20px 0 16px;
}
.hero h1 .hl { color: var(--glo-gold); }
.hero p.lead { font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.7; color: #b8c9cb; max-width: 54ch; }
.hero .btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(210, 164, 78, .34); color: #f3e6cd; }
.hero .btn-ghost:hover { background: rgba(210, 164, 78, .16); color: #fff; }

.eyebrow {
    background: rgba(210, 164, 78, .12); color: #e9c98a;
    border: 1px solid rgba(210, 164, 78, .36); letter-spacing: 1.4px;
}
.eyebrow::before { background: var(--glo-gold); box-shadow: 0 0 0 0 rgba(210, 164, 78, .65); }
@keyframes p-pulse {
    70%  { box-shadow: 0 0 0 9px rgba(210, 164, 78, 0); }
    100% { box-shadow: 0 0 0 0 rgba(210, 164, 78, 0); }
}

.jackpot-card {
    background: linear-gradient(168deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035));
    border: 1px solid rgba(210, 164, 78, .28);
    border-radius: 22px; padding: clamp(20px, 2.6vw, 30px);
    box-shadow: 0 30px 80px rgba(2, 14, 16, .50), inset 0 1px 0 rgba(255, 255, 255, .10);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.jackpot-card .label { color: #9fb9bb; letter-spacing: 2.4px; }
.jackpot-card .amount { color: #fff; font-size: clamp(32px, 4vw, 46px); letter-spacing: -2px; }
.jackpot-card .meta { color: #a9c2c4; }
.countdown .unit { background: rgba(2, 14, 16, .34); border: 1px solid rgba(210, 164, 78, .20); border-radius: 12px; }
.countdown .unit b { color: var(--glo-gold); }
.countdown .unit span { color: #9fb9bb; }

/* ------------------------- sections & surfaces --------------------------- */
.section { padding: clamp(40px, 5.5vw, 78px) 0; }
.section-alt {
    background: linear-gradient(180deg, var(--glo-cream) 0%, var(--glo-cream-2) 100%);
    border-top: 1px solid rgba(6, 34, 38, .08);
    border-bottom: 1px solid rgba(6, 34, 38, .08);
}
.section-head { margin-bottom: clamp(20px, 3vw, 34px); }
.section-head h2 { font-size: clamp(23px, 3vw, 36px); letter-spacing: -1.1px; font-weight: 800; }
.section-head p { font-size: clamp(13.5px, 1.1vw, 15px); }
.section-tag { color: var(--glo-gold-ink); letter-spacing: 2px; }

/* Cards: crisper edge, softer lift, a gold edge on hover. */
.card {
    border-radius: 16px; border: 1px solid rgba(6, 34, 38, .07);
    box-shadow: 0 1px 2px rgba(6, 34, 38, .04), 0 18px 40px rgba(6, 34, 38, .06);
    transition: transform .24s cubic-bezier(.22, .61, .36, 1), box-shadow .24s, border-color .24s;
}
.card:hover {
    transform: translateY(-4px);
    border-color: rgba(210, 164, 78, .38);
    box-shadow: 0 2px 4px rgba(6, 34, 38, .05), 0 28px 60px rgba(6, 34, 38, .12);
}
.card h3 { font-size: 17px; letter-spacing: -.3px; }
.card .price, .game-card .stats .jackpot b, .card-count b, .cd, .t-draw-timer { color: var(--glo-gold-ink); }
.game-card .icon { background: linear-gradient(150deg, #062226, #0d5b63); border-radius: 13px; }

.stat-strip {
    background: linear-gradient(120deg, #062226 0%, #0a474e 60%, #0d5b63 100%);
    border: 1px solid rgba(210, 164, 78, .18); border-radius: 18px;
    box-shadow: 0 26px 60px rgba(6, 34, 38, .24);
}
.stat-strip .v { color: #fff; letter-spacing: -1.2px; }
.stat-strip .k { color: #9fb9bb; letter-spacing: 1.5px; }

.num-ball { background: var(--glo-ink); color: var(--glo-gold); }
.num-ball.teal { background: var(--glo-teal); color: #e9f3f3; }

/* ------------------------------- page hero ------------------------------- */
.page-hero {
    background:
        radial-gradient(760px 320px at 88% -18%, rgba(210, 164, 78, .18), transparent 64%),
        linear-gradient(150deg, #062226 0%, #0a474e 58%, #0d5b63 100%);
    padding: clamp(34px, 5vw, 58px) 0;
}
.page-hero h1 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -1.2px; }
.page-hero .crumb {
    background: rgba(210, 164, 78, .10); border: 1px solid rgba(210, 164, 78, .26);
    color: #e9c98a;
}
.page-hero .crumb::before { color: #e9c98a; }
.page-hero .btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(210, 164, 78, .32); color: #f3e6cd; }
.page-hero .btn-ghost:hover { background: rgba(210, 164, 78, .16); color: #fff; }

/* -------------------------------- footer --------------------------------- */
.site-footer { background: var(--glo-ink); color: #c9dcde; }

.newsletter-band {
    background: var(--glo-cream);
    border-top: 1px solid rgba(6, 34, 38, .08);
    padding: clamp(36px, 5vw, 64px) 0;
}
.newsletter-copy h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -1px; }
.newsletter-form input[type="email"] {
    border-radius: 12px; border: 1px solid rgba(6, 34, 38, .16); background: #fff;
}
.newsletter-form input[type="email"]:focus { border-color: var(--glo-gold); box-shadow: var(--t-ring); }

.contact-band {
    background: linear-gradient(100deg, #07383e 0%, #0a474e 60%, #0d5b63 100%);
    border-top: 1px solid rgba(210, 164, 78, .14);
    padding: clamp(28px, 4vw, 44px) 0;
}
.contact-grid .cico { background: rgba(210, 164, 78, .14); color: var(--glo-gold); border-radius: 12px; }

.site-footer h3 { color: #8fb3b6; letter-spacing: 1.2px; }
.site-footer a:hover { color: var(--glo-gold); }
.footer-bottom { border-top: 1px solid rgba(210, 164, 78, .18); }
.footer-social a:hover { background: var(--glo-gold); color: #2a1e05; }

/* Long unbroken tokens (Thai copy, email addresses, a long tagline) must wrap rather
   than widen the page. minmax(0, …) lets the columns shrink below their content's
   min-content; the targeted `anywhere` below lets the text inside them break. */
.footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.footer-grid > div { min-width: 0; }
.site-footer .brand { max-width: 100%; }
.site-footer .brand img { height: 30px; width: auto; max-width: 100%; }
.brand-text { min-width: 0; }
.footer-grid p, .footer-grid li, .footer-grid a,
.contact-grid p, .contact-grid a,
.newsletter-copy p, .newsletter-copy h2,
.site-footer .brand-text small { overflow-wrap: anywhere; }

/* ------------------------------ auth / forms ----------------------------- */
.auth-card {
    border-radius: 20px; border: 1px solid rgba(6, 34, 38, .08);
    box-shadow: 0 1px 2px rgba(6, 34, 38, .04), 0 26px 60px rgba(6, 34, 38, .10);
}
.auth-card::before { background: linear-gradient(90deg, #062226 0%, #0a474e 55%, #d2a44e 100%); }
.auth-card h2 { font-size: clamp(22px, 2.4vw, 27px); letter-spacing: -.8px; }
.form-control:focus { border-color: var(--glo-gold); box-shadow: var(--t-ring); }

/* ------------------------------ responsive ------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .card { transition: none; }
    .card:hover { transform: none; }
}

/* Touch: the panel nav inherits the ink base; give its rows the gold active mark. */
@media (max-width: 980px) {
    .t-head { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--t-head-grad); }
    .nav a.active::after { left: 14px; right: 14px; bottom: 6px; }
    .nav-drop-menu { border-radius: 12px; }

    /* The hero must collapse to one column -- this rule has to come after the
       two-column base above, or the field stays split and overflows the screen. */
    .hero .inner { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .hero h1 { letter-spacing: -1.2px; }
    .section-tag { letter-spacing: 1.5px; }
    .jackpot-card .amount { font-size: clamp(28px, 9vw, 34px); }
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   PUBLIC COMPONENTS — the classes the public templates emit but nothing styled
   --------------------------------------------------------------------------
   .hero-trust, .way / .way-mult / .way-hint, .feature / .fico and
   .responsible-strip are written by the home template, yet no rule anywhere
   declared them, so they rendered as bare text between the styled cards. They
   are declared here, in the premium palette above (ink-teal + champagne gold).
   Everything is scoped to public.css, so the member and admin panels, which
   never load this file, keep their own system untouched.
   ========================================================================== */

/* ------------------------------ hero trust ------------------------------- */
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; }
.hero-trust span {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12.5px; font-weight: 600; color: #b8c9cb; letter-spacing: .2px;
}
.hero-trust span svg { color: var(--glo-gold); flex: 0 0 auto; }

/* ---------------------------- ways to play ------------------------------- */
.way .way-mult {
    display: inline-block; margin-bottom: 8px;
    font-size: 22px; font-weight: 800; letter-spacing: -.8px; color: var(--glo-gold-ink);
    font-variant-numeric: tabular-nums;
}
.way .way-hint {
    margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--t-line);
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--t-muted);
}

/* ----------------------------- feature cards ----------------------------- */
.feature .fico {
    width: 46px; height: 46px; border-radius: 13px; margin-bottom: 15px;
    display: grid; place-items: center;
    background: linear-gradient(150deg, #062226, #0d5b63); color: var(--glo-gold);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* ------------------------- responsible play band ------------------------- */
.responsible-strip {
    display: flex; align-items: center; justify-content: space-between;
    gap: 22px 30px; flex-wrap: wrap;
    padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.8vw, 30px);
    margin-bottom: 36px;
    background: var(--t-surface);
    border: 1px solid rgba(6, 34, 38, .08);
    border-left: 4px solid var(--glo-gold);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(6, 34, 38, .04), 0 16px 34px rgba(6, 34, 38, .05);
}
.responsible-strip h3 { margin: 0 0 7px; font-size: clamp(16px, 2vw, 19px); letter-spacing: -.4px; }
.responsible-strip p { margin: 0; color: var(--t-muted); font-size: 13.5px; line-height: 1.65; max-width: 68ch; }
.responsible-strip .btn { flex: 0 0 auto; }

/* ==========================================================================
   MOBILE HARDENING — the public header and the new blocks on small screens
   ========================================================================== */

/* The header carries the brand, up to two account buttons and the burger. On a
   phone those cannot all fit on one line, which pushed the bar wider than the
   screen; the brand is allowed to shrink and truncate and the controls tighten. */
.t-head .brand { min-width: 0; }
.brand-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 620px) {
    .t-head { gap: 8px; }
    .brand-text small { display: none; }
    .brand-text b { font-size: 13.5px; }
    .t-head .brand .mark { width: 26px; height: 26px; }
    .t-head .nav-actions .btn-sm { padding-left: 11px; padding-right: 11px; }

    .hero-trust { gap: 9px 18px; }

    /* Heading and its action stack instead of squeezing onto one line. */
    .section-head { gap: 14px; }
    .section-head > .btn { width: 100%; text-align: center; }

    .responsible-strip { flex-direction: column; align-items: flex-start; }
    .responsible-strip .btn { width: 100%; text-align: center; }
}

/* The very narrow phones: keep the primary Login and the burger, drop the
   secondary Sign-up button (registration stays reachable from the nav panel). */
@media (max-width: 480px) {
    .t-head .nav-actions .btn-ghost { display: none; }
}

/* ==========================================================================
   PUBLIC HEADER — premium pass
   --------------------------------------------------------------------------
   The bar is translucent and settles to a denser ink once the page scrolls, the
   uploaded logo (a JPG, so it carries its own background) sits on a clean white
   plate instead of reading as a stray light rectangle against the dark bar, and
   the burger folds into an X while the mobile panel is open.
   ========================================================================== */

.t-head { transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease; }
.t-head.is-stuck {
    background: rgba(4, 26, 29, .95);
    border-bottom-color: rgba(210, 164, 78, .50);
    box-shadow: 0 16px 42px rgba(2, 14, 16, .44);
}

/* The logo plate. A transparent PNG needs nothing; a JPG would otherwise show its
   own square background, so it is given a deliberate rounded white chip. */
.t-head .brand img,
.site-footer .brand img {
    height: 30px; width: auto; padding: 3px 7px;
    background: #fff; border-radius: 9px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .20);
}

.t-head .nav-actions .btn { border-radius: 10px; }

/* Burger: the three bars fold into an X while the panel is open. */
@media (max-width: 980px) {
    .t-head .f-burger span { transition: transform .22s ease, opacity .16s ease; }
    .t-shell.nav-open .t-head .f-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .t-shell.nav-open .t-head .f-burger span:nth-child(2) { opacity: 0; }
    .t-shell.nav-open .t-head .f-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ==========================================================================
   PUBLIC HEADER + DRAWER NAV — design pass
   --------------------------------------------------------------------------
   Desktop: quiet nav links that warm to gold with the current page pinned by a
   gold rule, and a hairline separating the links from the account actions.
   Mobile: the nav becomes a proper sheet — a "Menu" label, full-width rows with a
   gold left indicator on the current page, and the Results group as an accordion
   with an indented guide instead of a floating dropdown.
   ========================================================================== */

.nav-title { display: none; }

/* ------------------------------- desktop --------------------------------- */
@media (min-width: 981px) {
    .nav a { letter-spacing: .2px; }

    /* A gold rule that draws in from the left on hover, and stays for the current page. */
    .nav a::after {
        content: ''; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px;
        border-radius: 2px; background: var(--glo-gold);
        transform: scaleX(0); transform-origin: left center; transition: transform .18s ease;
    }
    .nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

    /* Hairline between the primary links and the account actions. */
    .t-head .nav-actions { position: relative; padding-left: 14px; }
    .t-head .nav-actions::before {
        content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
        width: 1px; height: 22px; background: rgba(210, 164, 78, .28);
    }
}

/* ---------------------------- mobile sheet ------------------------------- */
@media (max-width: 980px) {
    .nav {
        padding: 6px 14px calc(18px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, #07383e 0%, #062226 100%);
        border-bottom: 1px solid rgba(210, 164, 78, .28);
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }
    .nav-title {
        display: block; padding: 12px 12px 8px;
        font-size: 10.5px; font-weight: 800; letter-spacing: 2.2px;
        text-transform: uppercase; color: #8fb3b6;
    }

    .nav a {
        padding: 13px 14px 13px 16px; border-radius: 10px;
        font-size: 15px; font-weight: 600; color: #dfecec;
        border-left: 3px solid transparent;
    }
    .nav a:hover { background: rgba(210, 164, 78, .10); color: #fff; }
    .nav a.active {
        background: rgba(210, 164, 78, .14); color: #fff;
        border-left-color: var(--glo-gold);
    }
    /* The desktop gold underline has no place inside the sheet. */
    .nav a.active::after { display: none; }

    /* Results group rendered as an accordion. */
    .nav-drop > a { justify-content: space-between; }
    .nav-drop > a .caret { margin-left: auto; }
    .nav-drop-menu {
        margin: 2px 0 6px; padding: 4px 0 4px 14px; border-radius: 0;
        border-left: 1px solid rgba(210, 164, 78, .28);
        background: transparent; box-shadow: none;
    }
    .nav-drop-menu a { padding: 10px 12px; font-size: 14px; min-height: 44px; color: #b9d6d8; }
    .nav-drop-menu a:hover { background: rgba(210, 164, 78, .10); color: #fff; }
}

/* ==========================================================================
   PUBLIC HEADER — centred logo
   --------------------------------------------------------------------------
   The brand is centred in the bar (absolutely, so it is exactly centred however
   wide the nav or the actions get), the nav sits to its left and the account
   actions to its right. On mobile the actions move into the drawer, so the bar
   keeps only the centred logo and the burger.
   ========================================================================== */

/* The nav hugs its content, so its (empty) box never sits over the centred brand. */
.t-head .nav { flex: 0 1 auto; margin-left: 0; }

.t-head .brand {
    position: absolute; left: 50%; top: 50%; z-index: 2;
    transform: translate(-50%, -50%);
    margin: 0; max-width: calc(100% - 180px);
}

/* Drawer account actions — hidden on desktop. */
.nav-account { display: none; }

@media (max-width: 980px) {
    /* The bar keeps the centred logo and the burger; the menu and the account actions
       live in the drawer. */
    .t-head .nav-actions { display: none; }

    .nav-account {
        display: grid; gap: 10px;
        margin-top: 14px; padding-top: 16px;
        border-top: 1px solid rgba(210, 164, 78, .28);
    }
    .nav-account .btn { width: 100%; justify-content: center; }
}

@media (max-width: 620px) {
    /* Logo only, so the centred mark is never squeezed by the name and tagline. */
    .brand-text { display: none; }
}

/* ==========================================================================
   PUBLIC DRAWER — full width on mobile
   --------------------------------------------------------------------------
   `.t-head > *` (the hexagon-texture rule further up) sets `position: relative`
   on every direct header child at the SAME specificity as the mobile
   `.nav { position: fixed }`, and it is declared later -- so it was winning and
   the "drawer" stayed a ~140px box laid out inside the bar instead of a sheet.
   This rule wins on specificity, so the panel anchors under the header at full
   width.
   ========================================================================== */
@media (max-width: 980px) {
    .t-head .nav {
        position: fixed; top: var(--t-head-h); left: 0; right: 0; bottom: auto;
        width: auto; margin: 0; z-index: 96;
    }
}

/* ==========================================================================
   PUBLIC POLISH — hero, section headings, cards, buttons
   --------------------------------------------------------------------------
   The final pass of the premium restyle: the hero trust items become chips, a
   short gold rule leads each section label, cards carry a soft gold top edge on
   hover, and the buttons get a tactile press. Same palette, applied consistently.
   ========================================================================== */

/* Hero trust items: bordered chips rather than a bare row of text. */
.hero-trust span {
    padding: 8px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .2px; color: #dfe9ea;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(210, 164, 78, .28);
}

/* Section label: a short gold rule leads it. */
.section-tag { display: inline-flex; align-items: center; gap: 9px; }
.section-tag::before {
    content: ''; width: 16px; height: 2px; border-radius: 2px; background: var(--glo-gold);
}

/* Cards: a soft gold top edge fades in on hover, over the existing lift. */
.card { position: relative; }
.card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    border-radius: 16px 16px 0 0; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--glo-gold), transparent);
    transition: opacity .24s ease;
}
.card:hover::before { opacity: 1; }

/* A tactile press on every button. */
.btn:active, .btn-primary:active, .btn-gold:active, .btn-ghost:active { transform: translateY(1px); }