/* ============================================================
   Lebanon Wallet — Design System
   Black & gold, matching the store sign and logo.
   Class names are shared by every page; keep them stable.
   ============================================================ */

:root {
    --gold:         #f5c518;
    --gold-light:   #ffe27a;
    --gold-dim:     #d4a017;
    --gold-dark:    #a07810;
    --gold-glow:    rgba(245, 197, 24, 0.16);
    --gold-border:  rgba(245, 197, 24, 0.28);
    --gold-grad:    linear-gradient(135deg, #ffe58a 0%, #f5c518 38%, #d9a514 72%, #b9860c 100%);

    --bg:           #0a0a0c;
    --bg-secondary: #111114;
    --bg-card:      #141418;
    --bg-card-hover:#1a1a1f;
    --bg-muted:     #1f1f25;
    --surface:      linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.015) 100%);

    --border:        rgba(255, 255, 255, 0.075);
    --border-strong: rgba(255, 255, 255, 0.12);
    --border-hover:  rgba(245, 197, 24, 0.34);
    --border-active: rgba(245, 197, 24, 0.60);

    --text:       #f4f2ec;
    --text-muted: rgba(244, 242, 236, 0.56);
    --text-dim:   rgba(244, 242, 236, 0.32);
    --text-gold:  #f5c518;

    --radius-sm: 10px;
    --radius:    14px;
    --radius-lg: 18px;
    --radius-xl: 26px;

    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.02);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
    background-color: var(--bg);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--text);
    text-rendering: optimizeLegibility;
}
::selection { background: rgba(245,197,24,.85); color: #000; }

/* Ambient page lighting + fine grain, sits behind everything */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(900px 520px at 12% -6%, rgba(245,197,24,.085), transparent 60%),
        radial-gradient(700px 500px at 100% 18%, rgba(245,197,24,.045), transparent 60%),
        radial-gradient(800px 600px at 50% 110%, rgba(245,197,24,.04), transparent 60%),
        var(--bg);
}
body::after {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #26262c; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.font-display { letter-spacing: -0.025em; }

/* ─── Text treatments ────────────────────────────────────────── */
.text-gold-gradient,
.text-gradient {
    background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--gold);
}
.text-balance { text-wrap: balance; }

/* ─── Navigation ─────────────────────────────────────────────── */
.site-nav {
    position: sticky; top: 0; z-index: 50;
    transition: background-color .3s, border-color .3s, backdrop-filter .3s;
    border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled {
    background: rgba(10,10,12,.78);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-bottom-color: var(--border);
}
.nav-pill {
    display: flex; align-items: center; gap: .125rem;
    padding: .3rem; border-radius: 9999px;
    background: rgba(255,255,255,.035); border: 1px solid var(--border);
}
.nav-link {
    font-size: .8125rem; font-weight: 500; color: var(--text-muted);
    padding: .5rem 1rem; border-radius: 9999px; transition: color .2s, background-color .2s;
    text-decoration: none; position: relative; white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-link.active { color: #000; background: var(--gold); font-weight: 600; }

.nav-btn-ghost {
    display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; font-weight: 500;
    color: var(--text-muted); border: 1px solid var(--border-strong); padding: .55rem .95rem;
    border-radius: 9999px; transition: all .2s; text-decoration: none; white-space: nowrap;
}
.nav-btn-ghost:hover { color: #4ade80; border-color: rgba(74,222,128,.35); background: rgba(74,222,128,.06); }

.nav-btn-gold {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 700;
    color: #000; background: var(--gold-grad); padding: .55rem 1.15rem; border-radius: 9999px;
    transition: transform .2s, box-shadow .2s; text-decoration: none; white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(255,229,138,.4) inset, 0 6px 20px -6px rgba(245,197,24,.55);
}
.nav-btn-gold:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,229,138,.6) inset, 0 10px 28px -6px rgba(245,197,24,.7); }

.open-dot { position: relative; width: 7px; height: 7px; border-radius: 9999px; background: #22c55e; display: inline-block; }
.open-dot::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; background: rgba(34,197,94,.35); animation: ping 1.8s var(--ease-out) infinite; }
.open-dot.is-closed { background: #f87171; }
.open-dot.is-closed::after { display: none; }
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }

/* ─── Hero ─────────────────────────────────────────────────── */
.hero-bg { background: transparent; position: relative; }
.hero-grid { position: relative; }
.hero-grid::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.hero-grid > * { position: relative; z-index: 1; }

.hero-location-badge {
    display: inline-flex; align-items: center; gap: .6rem; font-size: .6875rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
    background: rgba(255,255,255,.035); border: 1px solid var(--border-strong);
    padding: .45rem 1rem .45rem .8rem; border-radius: 9999px;
    backdrop-filter: blur(8px);
}

.hero-photo {
    position: relative; border-radius: var(--radius-xl); overflow: hidden;
    border: 1px solid var(--border-strong); box-shadow: 0 40px 120px -30px rgba(245,197,24,.25), var(--shadow-lg);
    aspect-ratio: 4 / 5;
}
.hero-photo img, .hero-photo video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.75) 100%); pointer-events: none; }

.float-chip {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: .65rem;
    padding: .6rem .9rem .6rem .6rem; border-radius: 16px;
    background: rgba(18,18,22,.78); border: 1px solid var(--border-strong);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -10px rgba(0,0,0,.7);
    animation: floaty 6s ease-in-out infinite;
}
.float-chip img { width: 30px; height: 30px; object-fit: contain; }
.float-chip .chip-title { font-size: .8125rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.float-chip .chip-sub   { font-size: .6875rem; color: var(--text-dim); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ─── Logo marquee ─────────────────────────────────────────── */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: .75rem; width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
    display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1rem .55rem .6rem;
    border-radius: 9999px; background: rgba(255,255,255,.03); border: 1px solid var(--border);
    font-size: .8125rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
}
.marquee-item img { width: 22px; height: 22px; object-fit: contain; }

/* ─── Hero Scrolling Cards (legacy, still supported) ───────── */
.hero-cards-area { display:flex; gap:12px; overflow:hidden; height:520px; position:relative; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%); }
.hero-cards-col { display:flex; flex-direction:column; gap:10px; flex:1; }
.hero-cards-col-1 { animation: heroScrollUp 24s linear infinite; }
.hero-cards-col-2 { animation: heroScrollDown 20s linear infinite; }
.hero-cards-col-1:hover, .hero-cards-col-2:hover { animation-play-state: paused; }
@keyframes heroScrollUp   { from { transform:translateY(0); } to { transform:translateY(-50%); } }
@keyframes heroScrollDown { from { transform:translateY(-50%); } to { transform:translateY(0); } }
.hero-preview-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:border-color .25s; flex-shrink:0; }
.hero-preview-card:hover { border-color:var(--border-hover); }
.hero-preview-visual { height:110px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.hero-preview-body { padding:12px 14px 14px; }
.hero-preview-badge { display:inline-block; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-dim); background:rgba(255,255,255,.05); padding:3px 8px; border-radius:9999px; margin-bottom:7px; }
.hero-preview-title { font-size:13px; font-weight:700; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; line-height:1.3; }
.hero-preview-desc { font-size:11px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ─── Section Labels ──────────────────────────────────────── */
.section-label, .section-badge {
    display: inline-flex; align-items: center; gap: .55rem; font-size: .6875rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
    background: rgba(245,197,24,.06); border: 1px solid rgba(245,197,24,.18);
    padding: .4rem .9rem; border-radius: 9999px; margin-bottom: 1.25rem; width: fit-content;
}
.section-label::before, .section-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 9999px; background: var(--gold);
    box-shadow: 0 0 10px rgba(245,197,24,.8);
}
.text-center .section-label, .text-center .section-badge, .section-label.mx-auto { margin-left: auto; margin-right: auto; }

.section-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.section-sub   { color: var(--text-muted); font-size: 1.0625rem; line-height: 1.7; }

/* ─── Cards (with cursor spotlight) ───────────────────────── */
.sh-card, .card, .game-card {
    position: relative; isolation: isolate;
    background: var(--surface), var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    transition: border-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.sh-card { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.sh-card::before, .card::before, .game-card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(245,197,24,.10), transparent 45%);
    opacity: 0; transition: opacity .35s;
}
.sh-card:hover, .game-card:hover {
    border-color: var(--border-hover); transform: translateY(-4px);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(245,197,24,.06), 0 20px 50px -25px rgba(245,197,24,.35);
}
.card:hover { border-color: var(--border-hover); }
.sh-card:hover::before, .card:hover::before, .game-card:hover::before { opacity: 1; }

.sh-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.sh-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.sh-card-icon {
    width: 3rem; height: 3rem; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: rgba(255,255,255,.05); border: 1px solid var(--border-strong); font-size: 1.375rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.sh-badge {
    font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
    background: rgba(255,255,255,.04); border: 1px solid var(--border); padding: 4px 10px; border-radius: 9999px;
    white-space: nowrap; margin-top: .25rem;
}
.sh-card-title { font-size: 1.0625rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; transition: color .2s; line-height: 1.35; letter-spacing: -0.01em; }
.sh-card:hover .sh-card-title { color: var(--gold); }
.sh-card-desc { font-size: .8125rem; color: var(--text-muted); line-height: 1.65; flex: 1; }
.sh-card-footer { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.sh-card-action { font-size: .8125rem; font-weight: 600; color: var(--gold); display: flex; align-items: center; gap: .3rem; transition: gap .25s var(--ease-out); }
.sh-card:hover .sh-card-action { gap: .6rem; }

.card-glow { box-shadow: 0 0 40px rgba(245,197,24,.08); }

/* ─── Buttons ─────────────────────────────────────────── */
.btn-gold {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--gold-grad); color: #0a0a0a; font-weight: 700; border-radius: 9999px;
    padding: .8rem 1.6rem; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    gap: .55rem; text-decoration: none; font-size: .9rem; letter-spacing: .005em;
    box-shadow: 0 0 0 1px rgba(255,229,138,.45) inset, 0 10px 30px -10px rgba(245,197,24,.7);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn-gold::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg); transition: left .7s var(--ease-out);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,229,138,.7) inset, 0 16px 40px -10px rgba(245,197,24,.85); }
.btn-gold:hover::after { left: 120%; }
.btn-gold:active { transform: translateY(0); }
.btn-gold:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-outline-gold {
    background: rgba(255,255,255,.03); color: var(--text); font-weight: 600; border-radius: 9999px;
    padding: .8rem 1.6rem; border: 1px solid var(--border-strong); cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; gap: .55rem; text-decoration: none; font-size: .9rem;
    backdrop-filter: blur(8px); transition: all .25s var(--ease-out);
}
.btn-outline-gold:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); transform: translateY(-2px); }

.btn-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-weight: 700; font-size: .9rem;
    color: #04210f; background: linear-gradient(135deg, #5af08f, #22c55e 60%, #16a34a); border-radius: 9999px;
    padding: .8rem 1.6rem; text-decoration: none; transition: transform .25s var(--ease-out), box-shadow .25s;
    box-shadow: 0 0 0 1px rgba(134,239,172,.45) inset, 0 10px 30px -10px rgba(34,197,94,.7);
}
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(134,239,172,.7) inset, 0 16px 40px -10px rgba(34,197,94,.85); }

/* ─── Service icon ─────────────────────────────────────── */
.service-icon-wrap { width:3rem; height:3rem; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:1.375rem; transition:all .25s; }

/* ─── Category tabs ─────────────────────────────────── */
.seg {
    display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; border-radius: 9999px;
    background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
.seg-btn {
    font-size: .8125rem; font-weight: 600; color: var(--text-muted); padding: .55rem 1.1rem; border-radius: 9999px;
    transition: all .25s var(--ease-out); cursor: pointer; background: transparent; border: 0;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active { color: #000; background: var(--gold); box-shadow: 0 6px 18px -6px rgba(245,197,24,.6); }
.seg-btn .seg-count { opacity: .55; font-weight: 500; margin-left: .3rem; }

/* ─── Game Cards ─────────────────────────────────────── */
.game-card { overflow: hidden; cursor: pointer; }
.game-card.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 12px 40px -10px rgba(245,197,24,.35); }

/* ─── Package Cards ─────────────────────────────────────── */
.package-card { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; cursor:pointer; transition:all .2s; text-align:center; }
.package-card:hover { border-color:var(--border-hover); background:rgba(245,197,24,.04); transform: translateY(-2px); }
.package-card.selected { border-color:var(--gold); background:rgba(245,197,24,.08); box-shadow:0 0 0 1px var(--gold), 0 10px 30px -12px rgba(245,197,24,.5); }
.package-card.popular-badge::before { content:'Popular'; display:block; background:var(--gold-grad); color:#000; font-size:.625rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:.2rem .6rem; border-radius:9999px; margin-bottom:.5rem; width:fit-content; margin-left:auto; margin-right:auto; }

/* ─── Rate Cards ─────────────────────────────────────── */
.rate-card { background:var(--surface), var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; transition:all .25s; }
.rate-card:hover { border-color:var(--border-hover); }

/* ─── Forms ─────────────────────────────────────────── */
.form-input {
    width: 100%; background: rgba(255,255,255,.035); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: .8rem 1rem; color: var(--text); font-size: .9rem; transition: border-color .2s, background-color .2s, box-shadow .2s; outline: none;
}
.form-input:hover { border-color: rgba(255,255,255,.2); }
.form-input:focus { border-color: var(--gold); background: rgba(245,197,24,.035); box-shadow: 0 0 0 4px rgba(245,197,24,.1); }
.form-input::placeholder { color: var(--text-dim); }
.form-input option { background: #141418; color: var(--text); }
.form-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--text-muted); margin-bottom: .5rem; }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23f5c518' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position:right .85rem center; background-repeat:no-repeat; background-size:1.25em; padding-right:2.5rem; }

/* ─── Admin ─────────────────────────────────────────── */
.admin-sidebar { width:260px; background:var(--bg-secondary); border-right:1px solid var(--border); min-height:100vh; position:fixed; top:0; left:0; z-index:40; transition:transform .3s; }
.admin-nav-link { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-radius:var(--radius-sm); color:var(--text-muted); font-size:.875rem; font-weight:500; transition:all .2s; margin-bottom:.125rem; text-decoration:none; }
.admin-nav-link:hover { color:white; background:rgba(255,255,255,.05); }
.admin-nav-link.active { color:var(--gold); background:rgba(245,197,24,.08); border:1px solid rgba(245,197,24,.14); }

/* ─── Badges ─────────────────────────────────────────── */
.badge-pending    { background:rgba(234,179,8,.10);  color:#eab308; border:1px solid rgba(234,179,8,.20); }
.badge-processing { background:rgba(59,130,246,.10); color:#60a5fa; border:1px solid rgba(59,130,246,.20); }
.badge-completed  { background:rgba(34,197,94,.10);  color:#4ade80; border:1px solid rgba(34,197,94,.20); }
.badge-rejected   { background:rgba(239,68,68,.10);  color:#f87171; border:1px solid rgba(239,68,68,.20); }
.badge { display:inline-flex; align-items:center; padding:.25rem .625rem; border-radius:9999px; font-size:.75rem; font-weight:600; }

/* ─── Steps ─────────────────────────────────────────── */
.step-num {
    width: 3.25rem; height: 3.25rem; border-radius: 9999px; display: grid; place-items: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; color: #000;
    background: var(--gold-grad); box-shadow: 0 0 0 6px rgba(245,197,24,.08), 0 10px 30px -8px rgba(245,197,24,.6);
}
.steps-line { position: absolute; top: 1.625rem; left: 16%; right: 16%; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,197,24,.45), transparent); }

/* ─── FAQ ─────────────────────────────────────────── */
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface), var(--bg-card); transition: border-color .25s, background-color .25s; }
.faq-item + .faq-item { margin-top: .75rem; }
.faq-item[open] { border-color: rgba(245,197,24,.28); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-weight: 600; font-size: 1rem; color: var(--text); transition: color .2s; }
.faq-item summary:hover h3 { color: var(--gold); }
.faq-icon { width: 1.9rem; height: 1.9rem; border-radius: 9999px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--border-strong); color: var(--text-muted); transition: transform .3s var(--ease-out), background-color .3s, color .3s; }
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--gold); color: #000; border-color: var(--gold); }
.faq-body { padding: 0 1.35rem 1.25rem; color: var(--text-muted); font-size: .925rem; line-height: 1.75; }

/* ─── Gallery ─────────────────────────────────────── */
.gallery-tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-card); }
.gallery-tile img, .gallery-tile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.gallery-tile:hover img, .gallery-tile:hover video { transform: scale(1.05); }
.gallery-tile .gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem; background: linear-gradient(to top, rgba(0,0,0,.75), transparent); font-size: .8125rem; font-weight: 600; color: rgba(255,255,255,.88); pointer-events: none; }

/* ─── Glow panel (CTA / banners) ─────────────────── */
.glow-panel {
    position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl);
    background: radial-gradient(120% 140% at 50% 0%, rgba(245,197,24,.16) 0%, rgba(245,197,24,.03) 40%, transparent 70%), linear-gradient(180deg, #151410, #0d0d0f);
    border: 1px solid rgba(245,197,24,.22);
    box-shadow: 0 40px 120px -40px rgba(245,197,24,.3), inset 0 1px 0 rgba(255,229,138,.12);
}
.glow-panel::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%); mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
}

/* ─── Stats ─────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface), rgba(20,20,24,.6); backdrop-filter: blur(8px); }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-cell { padding: 1.6rem 1.25rem; text-align: center; border-color: var(--border); }
.stat-cell + .stat-cell { border-left: 1px solid var(--border); }
@media (max-width: 767px) { .stat-cell:nth-child(3) { border-left: 0; } .stat-cell:nth-child(n+3) { border-top: 1px solid var(--border); } }
.stat-num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; }
.stat-label { color: var(--text-dim); font-size: .6875rem; margin-top: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* ─── Animations ─────────────────────────────────────── */
@keyframes fadeInUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pulse-gold { 0%,100% { box-shadow:0 0 0 0 rgba(245,197,24,.3); } 50% { box-shadow:0 0 0 8px rgba(245,197,24,0); } }
@keyframes shimmer { 0% { background-position:-200% center; } 100% { background-position:200% center; } }

.animate-fade-in-up { animation: fadeInUp .8s var(--ease-out) both; }
.animate-fade-in { animation: fadeIn .6s ease both; }
.animate-delay-100 { animation-delay: .10s; }
.animate-delay-200 { animation-delay: .20s; }
.animate-delay-300 { animation-delay: .30s; }
.animate-delay-400 { animation-delay: .40s; }

/* Scroll reveal: content is visible without JS; JS adds .js to <html> to enable it */
.js [data-animate] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js [data-animate].is-visible { opacity: 1; transform: none; }

.skeleton { background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 75%); background-size:200% auto; animation:shimmer 1.5s linear infinite; border-radius:var(--radius-sm); }

.divider-gold { height: 1px; max-width: 80rem; margin: 0 auto; background: linear-gradient(90deg, transparent, rgba(245,197,24,.18), transparent); }

/* ─── Toasts ─────────────────────────────────────────── */
#toast-container { position:fixed; bottom:5.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.75rem; }
.toast { min-width:280px; max-width:380px; padding:.875rem 1.125rem; border-radius:var(--radius); font-size:.875rem; font-weight:500; backdrop-filter:blur(12px); animation:fadeInUp .3s ease both; display:flex; align-items:flex-start; gap:.75rem; cursor:pointer; }
.toast-success { background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.25); color:#4ade80; }
.toast-error   { background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.25); color:#f87171; }
.toast-info    { background:rgba(245,197,24,.08); border:1px solid rgba(245,197,24,.25); color:var(--gold); }

/* ─── Tables ─────────────────────────────────────────── */
.table-wrapper { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
.data-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.data-table th { background:rgba(255,255,255,.02); color:var(--text-dim); font-weight:600; font-size:.6875rem; text-transform:uppercase; letter-spacing:.09em; padding:.75rem 1rem; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:.875rem 1rem; border-bottom:1px solid rgba(255,255,255,.04); color:rgba(255,255,255,.72); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover td { background:rgba(255,255,255,.015); }

/* ─── Floating WhatsApp ─────────────────────────────── */
.wa-fab {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; width: 56px; height: 56px; border-radius: 9999px;
    display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #4ade80, #16a34a);
    box-shadow: 0 14px 34px -8px rgba(34,197,94,.65), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .3s var(--ease-out);
}
.wa-fab::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(74,222,128,.6); animation: ping 2.4s var(--ease-out) infinite; }
.wa-fab:hover { transform: scale(1.08); }
.wa-fab .wa-tip { position: absolute; right: 68px; background: #141418; color: #fff; font-size: .75rem; font-weight: 600; padding: .45rem .8rem; border-radius: 10px; white-space: nowrap; border: 1px solid var(--border-strong); opacity: 0; transform: translateX(6px); transition: all .25s var(--ease-out); pointer-events: none; }
.wa-fab:hover .wa-tip { opacity: 1; transform: none; }

/* ─── Footer map (Leaflet) ───────────────────────────── */
#lw-map { background:#141418; }
.lw-pin { display:flex;align-items:center;justify-content:center; }
.leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.35); }
.leaflet-control-zoom { border: 0 !important; }
.leaflet-control-zoom a { background:#141418 !important; color:#f5c518 !important; border-color:rgba(245,197,24,0.2) !important; }
.leaflet-control-zoom a:hover { background:#f5c518 !important; color:#000 !important; }
.leaflet-control-attribution { background:rgba(0,0,0,0.7) !important; color:rgba(255,255,255,0.3) !important; font-size:9px !important; }
.leaflet-control-attribution a { color:rgba(245,197,24,0.5) !important; }
.lw-popup .leaflet-popup-content-wrapper { background:#111114;border:1px solid rgba(245,197,24,0.25);border-radius:14px;color:#fff;box-shadow:0 20px 40px rgba(0,0,0,0.8); }
.lw-popup .leaflet-popup-tip { background:#111114; }
.lw-popup .leaflet-popup-content { margin:12px 16px;font-size:13px;line-height:1.6; }

/* ─── Mobile ─────────────────────────────────────────── */
@media (max-width:640px) {
    .hero-cta-group { flex-direction:column; width:100%; }
    .hero-cta-group a, .hero-cta-group button { width:100%; justify-content:center; }
    .hero-cards-area { height:360px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js [data-animate] { opacity: 1; transform: none; }
}

@media print { nav,footer,#toast-container,.fixed,.wa-fab { display:none !important; } body { background:white; color:black; } body::before, body::after { display:none; } }