:root{
    --sectionPadding: clamp(48px, 6vw, 96px);
    --sectionGap: clamp(72px, 9vw, 140px);
    --ink:#eef2ff;
    --brand-a:#0ea5e9; --brand-b:#6366f1; --brand-c:#9333ea;
}

/* ----- Page & layout (sticky footer) ----- */
html, body { height: 100%; margin: 0; }
body{
    min-height: 100dvh;
    display: flex;
    flex-direction: column;

    font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
    color:var(--ink);
    background:linear-gradient(135deg,var(--brand-a),var(--brand-b),var(--brand-c));
    background-size:300% 300%;
    animation:gradientShift 20s ease infinite;
    overflow-x:hidden;
}
.site-main{ flex:1 0 auto; }  /* everything above footer */
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion: reduce){
    body{animation:none}
    .blob,.floating-blob,.services-blob path{animation:none!important}
}

.section-gap{margin-block-end:var(--sectionGap)}
.container-xxl{max-width:1320px}

/* Blobs */
.blob{position:fixed;border-radius:50%;filter:blur(80px);opacity:.45;z-index:0;pointer-events:none;animation:float 14s ease-in-out infinite}
.blob1{width:520px;height:520px;top:-120px;left:-120px;background:rgba(255,255,255,.25)}
.blob2{width:640px;height:640px;right:-180px;bottom:-180px;background:rgba(0,0,0,.2);animation-delay:4s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-36px) scale(1.05)}}

/* Utilities */
.glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(14px)}
.text-muted{color:#d4dcff!important;opacity:.75}
.z-1{position:relative;z-index:1}

#discover-events .de-heading .de-title{font-weight:800}
#discover-events .de-filter.card{border-radius:18px}
#discover-events .tab-content{display:block}

.hero{position:relative;z-index:1;padding:var(--sectionPadding) 0}
.hero-feature{position:relative;overflow:hidden;border-radius:24px}
.hero-feature .floating-blob{position:absolute;right:-60px;bottom:-80px;opacity:.35}
.hero .btn-light{color:#111}

#steps-1893 .cs-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:992px){#steps-1893 .cs-container{grid-template-columns:1fr}}
#steps-1893 .cs-card-group{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#steps-1893 .cs-item{display:flex;gap:14px;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2)}
#steps-1893 .cs-number{font-weight:900;font-size:2.2rem;opacity:.85}

#categories-rail .cs-title{font-weight:800}
.svg-attractors{display:flex;gap:1rem;justify-content:center;flex-wrap:nowrap;overflow-x:auto;list-style:none;padding:.5rem 0;margin:0;scrollbar-width:none}
.svg-attractors::-webkit-scrollbar{display:none}
.svg-attractors .cs-item{flex:0 0 clamp(140px,16vw,180px);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:16px;transition:transform .2s ease, box-shadow .2s ease; text-align:center}
.svg-attractors .cs-item:focus-within{outline:2px solid rgba(255,255,255,.5)}
.svg-attractors .cs-item:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.25)}
.svg-attractors .svg-tile{padding:1rem}
.svg-attractors svg{width:100%;height:auto;max-width:100px;margin:0 auto;display:block}
.svg-attractors .cs-h3{font-weight:700;font-size:.95rem;margin-top:.5rem;color:#fff}
.services-blob{position:absolute;left:0;right:0;z-index:0}

/* Cards */
.section-gap h2{text-align:center;font-weight:800}
.card{border-radius:16px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.15)}

/* Tighten only the first hero section gap on the homepage */
.site-main > section.hero.section-gap {
    margin-block-end: clamp(0px, 4vw, 40px) !important;
}

.hero {
    padding-bottom: clamp(0px, 2vw, 20px) !important;
}

/* Reduce top padding on next section */
.section-upcoming,
.section-popular,
section + section {
    padding-top: clamp(0px, 2vw, 20px) !important;
}


.footer{
    width:100%;
    margin-top:0;           /* remove big gap above */
    padding:0;              /* inner blocks handle spacing */
    border-radius:0;        /* no “card” look */
    position:relative; z-index:1;
    color:#e7e9ff;
    background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6));
    border-top:1px solid rgba(255,255,255,.18);
}
.footer-wave{display:block;width:100%;height:70px}
.footer .content{padding:40px 0}
.footer h6{font-weight:800}
.footer a{color:#e7e9ff;text-decoration:none;opacity:.9}
.footer a:hover{opacity:1;text-decoration:underline}
.footer .social a{display:inline-flex;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);margin-right:8px}
.footer .social a:hover{transform:translateY(-2px)}
.footer .newsletter .form-control{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff}
.footer .newsletter .form-control::placeholder{color:#e7e9ff;opacity:.7}
.footer .bottom{padding:16px 0;border-top:1px solid rgba(255,255,255,.18);font-size:.9rem;opacity:.9}
.footer .container-xxl { max-width: 1320px; margin: 0 auto; padding: 0 1rem; }

.site-main > section:last-of-type { margin-block-end: 32px; }


/* Tighter homepage layout — reduce vertical gaps between all sections */
:root {
    --sectionGap: clamp(24px, 4vw, 64px) !important;
}

/* Further tighten specific parts */
.hero {
    padding-bottom: clamp(0px, 2vw, 20px) !important;
}

.section-popular,
.section-categories,
.section-events {
    margin-block-start: 0 !important;
    margin-block-end: clamp(12px, 3vw, 32px) !important;
    padding-top: clamp(12px, 2vw, 28px) !important;
    padding-bottom: clamp(12px, 2vw, 28px) !important;
}

/* =========================
   LIGHT THEME — ALWAYS ON
   (Place at the very end)
   ========================= */
html {
    color-scheme: light; /* hint browsers (forms, scrollbars, etc.) */
}

:root {
    /* Light text & spacing tokens */
    --ink: #eef3ff; /* near-black for good contrast on light bg */
    --sectionGap: clamp(24px, 4vw, 64px) !important;

    /* Brand accents unchanged (used for chips, buttons, links, etc.) */
    --brand-a: #0ea5e9;
    --brand-b: #6366f1;
    --brand-c: #9333ea;
}

/* Page + layout */
body {
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,0.10), transparent 60%),
        radial-gradient(1000px 500px at 110% 10%, rgba(99,102,241,0.10), transparent 60%),
        radial-gradient(1000px 700px at 50% 120%, rgba(147,51,234,0.08), transparent 60%),
        #ffffff;                                  /* base: white */
    background-size: auto;                      /* stop dark sweep */
    animation: none !important;                 /* kill gradientShift */
    overflow-x: hidden;
}

/* Decorative blobs: make them subtle & light */
.blob {
    filter: blur(60px);
    opacity: .25;
}
.blob1 { background: rgba(99,102,241,.18); }  /* brand-b tint */
.blob2 { background: rgba(14,165,233,.16); }  /* brand-a tint */

/* Utilities on light */
.glass {
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(17,24,39,.08);
    backdrop-filter: blur(10px);
}
.text-muted { color: #6b7280 !important; opacity: 1; }

/* Cards on light */
.card {
    background: #ffffff;
    border: 1px solid rgba(17,24,39,.08);
    box-shadow: 0 6px 16px rgba(17,24,39,.06);
}
.card:hover {
    box-shadow: 0 12px 28px rgba(17,24,39,.10);
    transform: translateY(-4px);
}

/* Hero & sections: tighten spacing already declared */
.hero { padding-bottom: clamp(0px, 2vw, 20px) !important; }
.section-popular,
.section-categories,
.section-events {
    margin-block-start: 0 !important;
    margin-block-end: clamp(12px, 3vw, 32px) !important;
    padding-top: clamp(12px, 2vw, 28px) !important;
    padding-bottom: clamp(12px, 2vw, 28px) !important;
}

/* SVG tiles rail */
.svg-attractors .cs-item {
    background: #ffffff;
    border: 1px solid rgba(17,24,39,.08);
}

/* Footer — switch to light, no dark overlay */
.footer {
    color: #374151;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0)),
        #f8fafc; /* light gray */
    border-top: 1px solid rgba(17,24,39,.08);
}
.footer-wave { display: none; } /* remove dark wave if present */
.footer .content { padding: 28px 0; }
.footer h6 { color: #111827; }
.footer a {
    color: #1f2937;
    opacity: 1;
    text-decoration: none;
}
.footer a:hover { text-decoration: underline; }
.footer .social a {
    background: #ffffff;
    border: 1px solid rgba(17,24,39,.10);
}
.footer .newsletter .form-control {
    background: #ffffff;
    border: 1px solid rgba(17,24,39,.12);
    color: #111827;
}
.footer .newsletter .form-control::placeholder { color: #6b7280; }
.footer .bottom {
    border-top: 1px solid rgba(17,24,39,.08);
    color: #6b7280;
}

/* Buttons/links that were designed for dark bg */
.hero .btn-light { color: #111827; }

/* Tabs/filters */
#discover-events .de-filter.card { border-radius: 18px; background: #ffffff; }

/* Force light even if user prefers dark */
@media (prefers-color-scheme: dark) {
    body {
        color: var(--ink);
        background:
            radial-gradient(1200px 600px at 10% -10%, rgba(5, 174, 251, 0.1), transparent 60%),
            radial-gradient(1000px 500px at 110% 10%, rgba(99,102,241,0.10), transparent 60%),
            radial-gradient(1000px 700px at 50% 120%, rgba(147,51,234,0.08), transparent 60%),
            #ffffff !important;
        animation: none !important;
    }
}