:root{--violet:#6d28d9;--violet2:#8b5cf6;--violet3:#ede9fe;--ink:#171424;--muted:#6b6678;--bg:#faf9ff;--card:#fff;--border:#e9e5f2;--danger:#b42318;--success:#067647;--shadow:0 16px 45px rgba(65,37,110,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 32px));margin:auto}.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:21px}.logo-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--violet),var(--violet2));display:grid;place-items:center;color:white;font-weight:900}.logo img{height:42px;width:auto}.nav-links{display:flex;align-items:center;gap:24px;color:#514b5f}.nav-links a:hover{color:var(--violet)}.nav-actions{display:flex;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer;transition:.2s;background:var(--violet);color:#fff}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(109,40,217,.22)}.btn.secondary{background:white;color:var(--violet);border:1px solid #d8cef0}.btn.soft{background:var(--violet3);color:var(--violet)}.btn.danger{background:var(--danger)}.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:white;font-size:22px}.mobile-menu{display:none}.hero{padding:80px 0 56px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.18),transparent 68%);right:-180px;top:-210px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:var(--violet3);color:var(--violet);font-weight:800;font-size:13px}.hero h1{font-size:clamp(42px,6vw,72px);line-height:1.02;letter-spacing:-2.5px;margin:20px 0}.hero h1 span{color:var(--violet)}.hero p{font-size:18px;line-height:1.7;color:var(--muted);max-width:650px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.hero-card{background:linear-gradient(145deg,#fff,#f2ecff);border:1px solid #e0d6f5;border-radius:28px;padding:22px;box-shadow:var(--shadow);animation:float 5s ease-in-out infinite}.hero-placeholder{aspect-ratio:4/3;border-radius:20px;background:linear-gradient(135deg,#6d28d9,#a78bfa);display:grid;place-items:center;color:white;text-align:center;padding:30px}.hero-placeholder b{font-size:34px}.section{padding:64px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}.section h2{font-size:34px;margin:0}.section-head p{color:var(--muted);margin:8px 0 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.event-card{background:white;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 8px 30px rgba(44,30,72,.05);transition:.2s}.event-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.event-media{aspect-ratio:16/10;background:#eee;overflow:hidden}.event-media img{width:100%;height:100%;object-fit:cover}.placeholder-media{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#6d28d9;font-weight:900}.event-body{padding:18px}.event-body h3{margin:0 0 8px;font-size:20px}.meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:13px}.badge{display:inline-flex;padding:6px 9px;border-radius:999px;background:#f2edff;color:var(--violet);font-size:12px;font-weight:800}.price{font-size:18px;font-weight:900;margin:14px 0}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.panel{background:white;border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:0 8px 26px rgba(50,31,86,.04)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{margin-bottom:16px}.field label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;min-height:48px;border:1px solid #d9d3e4;border-radius:12px;padding:12px 13px;font-size:16px;background:white}.field textarea{min-height:110px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(109,40,217,.1)}.notice{padding:13px 15px;border-radius:12px;background:#f4f3ff;color:#4a3671;margin-bottom:16px}.notice.error{background:#fff1f0;color:#a6251a}.notice.success{background:#ecfdf3;color:#067647}.footer{margin-top:60px;background:#171424;color:#d7d1e0;padding:46px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.footer h4{color:white}.footer a{display:block;margin:9px 0;color:#cbc4d7}.footer-bottom{border-top:1px solid #302a3c;margin-top:30px;padding-top:20px;color:#948d9f;font-size:13px}.empty{padding:42px;text-align:center;background:white;border:1px dashed #d6cee6;border-radius:18px;color:var(--muted)}.details-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}.nominee-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.nominee-card{background:white;border:1px solid var(--border);border-radius:18px;overflow:hidden}.nominee-card .event-media{aspect-ratio:1/1}.nominee-card .event-body{padding:14px}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stat{padding:16px;border:1px solid var(--border);border-radius:15px;background:#fff}.stat b{display:block;font-size:25px;color:var(--violet)}@keyframes float{50%{transform:translateY(-8px)}}@media(max-width:900px){.nav-links,.nav-actions{display:none}.menu-btn{display:block}.mobile-menu.open{display:block;position:absolute;top:72px;left:0;right:0;background:white;border-bottom:1px solid var(--border);padding:16px}.mobile-menu a{display:block;padding:13px;border-radius:10px}.hero{padding-top:48px}.hero-grid,.details-grid,.split{grid-template-columns:1fr}.hero-card{max-width:620px}.cards{grid-template-columns:repeat(2,1fr)}.nominee-grid{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.container{width:min(100% - 22px,1180px)}.nav{height:64px}.mobile-menu.open{top:64px}.hero{padding:36px 0}.hero h1{font-size:42px;letter-spacing:-1.4px}.hero p{font-size:16px}.hero-actions .btn{width:100%}.section{padding:44px 0}.section h2{font-size:28px}.section-head{align-items:flex-start;flex-direction:column}.cards,.nominee-grid,.footer-grid,.form-grid,.stat-row{grid-template-columns:1fr}.panel{padding:18px}.event-card{border-radius:16px}.footer{text-align:left}.btn{min-height:46px}.logo{font-size:18px}}



/* =========================================================
   FOOTER
========================================================= */

.footer {
    position: relative;
    margin-top: 30px;
    padding: 64px 0 26px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at top right,
            rgba(124, 58, 237, .18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #120f1c,
            #191326
        );
    color: #d8d1e2;
}

.footer::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -120px;
    bottom: -150px;
    border-radius: 50%;
    background: rgba(109, 40, 217, .10);
}

.footer .container {
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.6fr)
        repeat(3, minmax(150px, .8fr));
    gap: 42px;
}

/* =========================================================
   VOTERA MOBILE MENU BUTTON FIX
========================================================= */

.menu-btn {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #ddd4ef;
    border-radius: 13px;
    background: #ffffff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(76, 29, 149, .06);
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.menu-btn:hover {
    background: #f8f5ff;
    border-color: #cdbdf1;
}

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

.menu-btn span {
    display: block;
    width: 22px;
    height: 2.5px;
    border-radius: 999px;

    /* IMPORTANT */
    background: #6d28d9 !important;

    transition:
        transform .25s ease,
        opacity .25s ease,
        background .2s ease;
}


/* Show hamburger on tablet/mobile */
@media (max-width: 900px) {

    .nav-links,
    .nav-actions {
        display: none;
    }

    .menu-btn {
        display: flex !important;
    }

}


/* Slightly smaller on phones */
@media (max-width: 600px) {

    .menu-btn {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .menu-btn span {
        width: 21px;
        height: 2.5px;
        background: #6d28d9 !important;
    }

}

/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand {
    max-width: 390px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.footer-logo img {
    width: auto;
    height: 54px;
    max-width: 200px;
    object-fit: contain;
}

.footer-logo .logo-mark {
    width: 44px;
    height: 44px;
}

.footer-logo-text {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.footer-logo-text strong {
    color: var(--violet-400);
}

.footer-description {
    max-width: 350px;
    margin: 0;
    color: #aca4b8;
    font-size: 14px;
    line-height: 1.75;
}

.footer-tagline {
    display: inline-flex;
    margin-top: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(167, 139, 250, .20);
    border-radius: 999px;
    background: rgba(124, 58, 237, .10);
    color: #cdbdff;
    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column h4 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
}

.footer-column > a {
    display: block;
    width: fit-content;
    margin: 10px 0;
    color: #bdb5c8;
    font-size: 14px;
    line-height: 1.5;
    transition:
        color .18s ease,
        transform .18s ease;
}

.footer-column > a:hover {
    color: #fff;
    transform: translateX(3px);
}


/* =========================================================
   FOOTER CONTACT
========================================================= */

.footer-contact-link {
    margin-bottom: 16px !important;
}

.footer-contact-label {
    display: block;
    margin-bottom: 2px;
    color: #837a91;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.footer-contact-link strong {
    display: block;
    max-width: 220px;
    color: #d8d1e2;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.footer-contact-link:hover strong {
    color: #fff;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 46px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    color: #847c90;
    font-size: 12px;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom-links a {
    color: #92899e;
    transition: color .18s ease;
}

.footer-bottom-links a:hover {
    color: #fff;
}


/* =========================================================
   FOOTER TABLET
========================================================= */

@media (max-width: 960px) {

    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .footer-brand {
        max-width: none;
    }

}


/* =========================================================
   FOOTER MOBILE
========================================================= */

@media (max-width: 600px) {

    .footer {
        padding: 48px 0 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-brand {
        padding-bottom: 6px;
    }

    .footer-logo img {
        height: 48px;
    }

    .footer-column h4 {
        margin-bottom: 13px;
    }

    .footer-column > a {
        margin: 9px 0;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        margin-top: 34px;
    }

    .footer-bottom-links {
        gap: 14px;
    }

}


/* =========================================================
   PUBLIC PAGE HERO
========================================================= */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 82px 0 72px;
    background:
        radial-gradient(
            circle at top right,
            rgba(139, 92, 246, .20),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f8f5ff
        );
}

.page-hero .container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.page-hero h1 {
    margin: 18px 0;
    font-size: clamp(42px, 6vw, 68px);
    line-height: 1.02;
    letter-spacing: -2.4px;
}

.page-hero h1 span {
    color: var(--violet-700);
}

.page-hero p {
    max-width: 720px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}


/* =========================================================
   ABOUT
========================================================= */

.about-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, .9fr);
    gap: 36px;
    align-items: stretch;
}

.about-copy {
    padding: 10px 0;
}

.about-copy h2 {
    margin: 0 0 18px;
    font-size: 40px;
}

.about-copy p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

.about-highlight {
    position: relative;
    overflow: hidden;
    padding: 36px;
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            var(--violet-900),
            var(--violet-600)
        );
    color: white;
    box-shadow: var(--shadow-lg);
}

.about-highlight::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -100px;
    right: -100px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.about-highlight span {
    position: relative;
    z-index: 2;
    display: inline-flex;
    margin-bottom: 20px;
    color: #e8ddff;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.about-highlight h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 15px;
    font-size: 30px;
    line-height: 1.15;
}

.about-highlight p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255,255,255,.82);
    line-height: 1.7;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-grid {
    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(380px, 1.1fr);
    gap: 34px;
    align-items: start;
}

.contact-info h2,
.contact-form-card h2 {
    margin: 0 0 12px;
    font-size: 36px;
}

.contact-methods {
    display: grid;
    gap: 12px;
    margin-top: 28px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: white;
    box-shadow: var(--shadow-sm);
    transition:
        transform .2s ease,
        border-color .2s ease;
}

.contact-card:hover {
    transform: translateY(-2px);
    border-color: #cdb8ff;
}

.contact-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--violet-100);
    color: var(--violet-700);
    font-weight: 900;
}

.contact-card small {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
}

.contact-card strong {
    font-size: 15px;
}

.contact-note {
    margin-top: 24px;
    padding: 22px;
    border-radius: 18px;
    background: var(--violet-50);
}

.contact-note strong {
    color: var(--violet-700);
}

.contact-note p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.6;
}

.contact-form-card {
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: white;
    box-shadow: var(--shadow);
}

.contact-form {
    margin-top: 22px;
}

.contact-submit {
    width: 100%;
}


/* =========================================================
   RESPONSIVE ABOUT / CONTACT
========================================================= */

@media (max-width: 900px) {

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .about-highlight {
        max-width: 650px;
    }

}


@media (max-width: 640px) {

    .page-hero {
        padding: 52px 0 48px;
    }

    .page-hero h1 {
        font-size: 39px;
        letter-spacing: -1.4px;
    }

    .page-hero p {
        font-size: 16px;
    }

    .about-copy h2,
    .contact-info h2,
    .contact-form-card h2 {
        font-size: 30px;
    }

    .about-highlight,
    .contact-form-card {
        padding: 22px;
        border-radius: 20px;
    }

    .about-highlight h3 {
        font-size: 25px;
    }

}

.vote-hidden-card {
    max-width: 720px;
    margin: 20px auto;
    padding: 42px 28px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8f5ff
        );
    box-shadow: var(--shadow-sm);
}

.vote-hidden-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: var(--violet-100);
    font-size: 26px;
}

.vote-hidden-card h3 {
    margin: 0 0 10px;
    font-size: 25px;
}

.vote-hidden-card p {
    max-width: 540px;
    margin: 0 auto;
    color: var(--muted);
    line-height: 1.65;
}

.vote-hidden-card span {
    display: block;
    margin-top: 16px;
    color: var(--violet-700);
    font-size: 13px;
    font-weight: 700;
}
/* =========================================================
   VOTERA HOME PAGE POLISH
========================================================= */

.hero {
    padding: 72px 0 48px;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    align-items: center;
    gap: 56px;
}

.hero-content {
    max-width: 720px;
}

.hero-content h1 {
    margin: 14px 0 18px;
    font-size: clamp(42px, 6vw, 72px);
    line-height: .98;
    letter-spacing: -2px;
}

.hero-content h1 span {
    color: var(--primary, #7c3aed);
}

.hero-content > p {
    max-width: 640px;
    font-size: 18px;
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.hero-trust > div {
    padding: 14px 16px;
    border: 1px solid #e8e2f4;
    border-radius: 16px;
    background: #fff;
}

.hero-trust strong,
.hero-trust span {
    display: block;
}

.hero-trust strong {
    font-size: 14px;
    margin-bottom: 4px;
}

.hero-trust span {
    color: #6b6676;
    font-size: 12px;
    line-height: 1.4;
}

.hero-visual {
    display: flex;
    justify-content: center;
}

.hero-image-wrap {
    width: 100%;
    max-width: 500px;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border-radius: 32px;
    background:
        radial-gradient(circle at top right, rgba(124,58,237,.24), transparent 38%),
        linear-gradient(145deg, #ffffff, #f4efff);
    border: 1px solid #e6dcff;
    box-shadow: 0 24px 60px rgba(76, 29, 149, .12);
}

.hero-main-image {
    width: 100%;
    height: 100%;
    max-height: 380px;
    object-fit: contain;
    display: block;
}


/* =========================================================
   VALUE STRIP
========================================================= */

.value-strip {
    padding: 20px 0 54px;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.value-item {
    min-width: 0;
    padding: 22px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ece7f4;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .04);
}

.value-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 18px;
    background: #efe8ff;
    color: #6d28d9;
    font-weight: 800;
    font-size: 13px;
}

.value-item h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.value-item p {
    margin: 0;
    color: #6b6676;
    line-height: 1.55;
    font-size: 14px;
}


/* =========================================================
   SECTIONS
========================================================= */

.section {
    padding: 76px 0;
}

.section-soft {
    background: #faf8ff;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 30px;
}

.section-head > div {
    max-width: 720px;
}

.section-head.centered {
    justify-content: center;
    text-align: center;
}

.section-head.centered > div {
    max-width: 780px;
}

.section-kicker {
    display: inline-block;
    margin-bottom: 9px;
    color: #7c3aed;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.section-head h2 {
    margin: 0 0 10px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    letter-spacing: -1px;
}

.section-head p {
    margin: 0;
    color: #6b6676;
    line-height: 1.65;
}


/* =========================================================
   EVENT CARDS
========================================================= */

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.event-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #ece7f4;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(17, 24, 39, .09);
}

.event-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eee9f8;
}

.event-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.placeholder-media {
    width: 100%;
    height: 100%;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
    font-weight: 700;
    background:
        linear-gradient(135deg, #f4efff, #ece4ff);
}

.event-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.event-body h3 {
    margin: 12px 0 10px;
    font-size: 21px;
    line-height: 1.25;
}

.event-body p {
    line-height: 1.55;
}

.event-body .btn {
    margin-top: auto;
    align-self: flex-start;
}

.event-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.event-code {
    color: #8b8494;
    font-size: 12px;
}

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
    color: #76707f;
    font-size: 13px;
}


/* =========================================================
   WHY CHOOSE VOTERA
========================================================= */

.why-section {
    background: #fff;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.why-card {
    padding: 26px;
    border: 1px solid #ece7f4;
    border-radius: 20px;
    background: #fbf9ff;
    transition: transform .2s ease, border-color .2s ease;
}

.why-card:hover {
    transform: translateY(-3px);
    border-color: #cdb8ff;
}

.why-number {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 14px;
    background: #7c3aed;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
}

.why-card h3 {
    margin: 0 0 10px;
    font-size: 19px;
}

.why-card p {
    margin: 0;
    color: #6b6676;
    line-height: 1.6;
    font-size: 14px;
}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials-section {
    background: #faf8ff;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 34px;
}

.testimonial-card {
    position: relative;
    padding: 28px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #ece7f4;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .04);
}

.quote-mark {
    font-size: 52px;
    line-height: .8;
    color: #7c3aed;
    font-family: Georgia, serif;
    margin-bottom: 14px;
}

.testimonial-card > p {
    margin: 0 0 24px;
    color: #4c4655;
    line-height: 1.7;
}

.testimonial-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-avatar {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-weight: 800;
}

.testimonial-person strong,
.testimonial-person span {
    display: block;
}

.testimonial-person span {
    margin-top: 2px;
    color: #8a8393;
    font-size: 12px;
}


/* =========================================================
   ORGANIZER CTA
========================================================= */

.organizer-cta {
    padding: 72px 0;
}

.organizer-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    padding: 44px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 30%),
        linear-gradient(135deg, #5b21b6, #7c3aed);
    color: #fff;
}

.organizer-cta-inner > div:first-child {
    max-width: 680px;
}

.organizer-cta h2 {
    margin: 8px 0 12px;
    font-size: clamp(30px, 4vw, 44px);
}

.organizer-cta p {
    margin: 0;
    color: rgba(255,255,255,.82);
    line-height: 1.65;
}

.organizer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.section-kicker.light {
    color: #e9ddff;
}

.btn.white {
    background: #fff;
    color: #5b21b6;
}

.btn.outline-white {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.6);
}


/* =========================================================
   EMPTY STATES
========================================================= */

.empty {
    grid-column: 1 / -1;
    padding: 38px;
    text-align: center;
    border-radius: 20px;
    border: 1px dashed #d8caef;
    background: #fbf9ff;
}

.empty h3 {
    margin: 0 0 8px;
}

.empty p {
    margin: 0;
    color: #7d7587;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .hero-content {
        max-width: none;
    }

    .hero-visual {
        justify-content: flex-start;
    }

    .hero-image-wrap {
        max-width: 620px;
    }

    .value-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .why-grid,
    .testimonial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .organizer-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .hero {
        padding: 42px 0 30px;
    }

    .hero-grid {
        gap: 26px;
    }

    .hero-content h1 {
        font-size: 40px;
        line-height: 1.02;
        letter-spacing: -1.3px;
    }

    .hero-content > p {
        font-size: 16px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-trust {
        grid-template-columns: 1fr;
    }

    .hero-image-wrap {
        min-height: 260px;
        padding: 18px;
        border-radius: 22px;
    }

    .value-strip {
        padding-bottom: 34px;
    }

    .value-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .value-item {
        padding: 18px;
    }

    .section {
        padding: 54px 0;
    }

    .section-head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 24px;
    }

    .section-head h2 {
        font-size: 30px;
    }

    .section-head .btn {
        width: 100%;
        justify-content: center;
    }

    .cards,
    .why-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .event-card {
        border-radius: 18px;
    }

    .event-body {
        padding: 18px;
    }

    .why-card,
    .testimonial-card {
        padding: 21px;
    }

    .organizer-cta {
        padding: 54px 0;
    }

    .organizer-cta-inner {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .organizer-cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .organizer-cta-actions .btn {
        width: 100%;
        justify-content: center;
    }

}








/* =========================================================
   VOTERA PUBLIC THEME SYSTEM
   LIGHT + DARK + RESPONSIVE
========================================================= */


/* =========================================================
   SHARED DESIGN TOKENS
========================================================= */

:root {

    --violet-50: #faf8ff;
    --violet-100: #f1ebff;
    --violet-200: #e3d7ff;
    --violet-300: #cdb8ff;
    --violet-400: #a78bfa;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;
    --violet-700: #6d28d9;
    --violet-800: #5b21b6;
    --violet-900: #3b167e;

    --primary: #6d28d9;

    --page-bg: #faf9ff;
    --surface: #ffffff;
    --surface-soft: #faf8ff;
    --surface-raised: #ffffff;

    --text-primary: #171424;
    --text-secondary: #6b6678;
    --text-soft: #8b8494;

    --line: #e9e5f2;
    --line-strong: #d8cef0;

    --header-bg: rgba(255,255,255,.94);

    --input-bg: #ffffff;
    --input-text: #171424;

    --card-shadow:
        0 16px 45px
        rgba(65,37,110,.09);

    --card-shadow-soft:
        0 8px 26px
        rgba(50,31,86,.04);

    --overlay-bg:
        rgba(18,15,28,.48);

    --success-bg: #ecfdf3;
    --success-text: #067647;

    --warning-bg: #fffaeb;
    --warning-text: #b54708;

    --danger-bg: #fff1f0;
    --danger-text: #b42318;

}


/* =========================================================
   DARK DESIGN TOKENS
========================================================= */

html[data-theme="dark"] {

    --page-bg: #0f0d14;

    --surface: #17131f;

    --surface-soft: #1d1827;

    --surface-raised: #211b2c;

    --text-primary: #f5f1fb;

    --text-secondary: #b7afc2;

    --text-soft: #92899e;

    --line: #30283d;

    --line-strong: #493b5f;

    --header-bg:
        rgba(15,13,20,.94);

    --input-bg: #1b1624;

    --input-text: #f5f1fb;

    --card-shadow:
        0 18px 46px
        rgba(0,0,0,.30);

    --card-shadow-soft:
        0 8px 26px
        rgba(0,0,0,.22);

    --overlay-bg:
        rgba(0,0,0,.70);

    --success-bg: #092e22;

    --success-text: #6ce9a6;

    --warning-bg: #352307;

    --warning-text: #fec84b;

    --danger-bg: #3b1515;

    --danger-text: #fda29b;

}


/* =========================================================
   BASE PAGE
========================================================= */

html {

    background:
        var(--page-bg);

}


body {

    background:
        var(--page-bg);

    color:
        var(--text-primary);

    transition:
        background-color .22s ease,
        color .22s ease;

}


body.public-menu-open {

    overflow: hidden;

}


main {

    min-height:
        55vh;

}


h1,
h2,
h3,
h4,
h5,
h6,
strong {

    color:
        var(--text-primary);

}


p,
.muted {

    color:
        var(--text-secondary);

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    background:
        var(--header-bg);

    border-color:
        var(--line);

    transition:
        background-color .22s ease,
        border-color .22s ease;

}


.nav {

    min-width: 0;

}


.logo {

    flex: 0 0 auto;

    min-width: 0;

}


.logo-text {

    color:
        var(--text-primary);

}


.logo-text strong {

    color:
        var(--violet-600);

}


.nav-links {

    min-width: 0;

    gap: 20px;

    color:
        var(--text-secondary);

}


.nav-links a {

    position: relative;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 700;

    transition:
        color .18s ease;

}


.nav-links a:hover {

    color:
        var(--violet-500);

}


/* =========================================================
   THEME BUTTON
========================================================= */

.theme-toggle {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 7px;

    min-height:
        44px;

    padding:
        9px 12px;

    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    background:
        var(--surface);

    color:
        var(--text-primary);

    cursor:
        pointer;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;

}


.theme-toggle:hover {

    border-color:
        var(--violet-400);

    transform:
        translateY(-1px);

}


.theme-toggle-icon {

    width:
        18px;

    height:
        18px;

    display:
        none;

}


.theme-toggle-icon svg {

    width:
        100%;

    height:
        100%;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


html[data-theme="light"]
.theme-sun {

    display:
        block;

}


html[data-theme="dark"]
.theme-moon {

    display:
        block;

}


.theme-toggle-label {

    font-size:
        11px;

    font-weight:
        800;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease;

}


.btn.secondary {

    background:
        var(--surface);

    color:
        var(--violet-600);

    border-color:
        var(--line-strong);

}


html[data-theme="dark"]
.btn.secondary {

    color:
        #d9c6ff;

}


.btn.soft {

    background:
        var(--violet-100);

    color:
        var(--violet-700);

}


html[data-theme="dark"]
.btn.soft {

    background:
        rgba(124,58,237,.18);

    color:
        #cbb7ff;

}


/* =========================================================
   MOBILE HAMBURGER
========================================================= */

.menu-btn {

    background:
        var(--surface);

    border-color:
        var(--line);

}


.menu-btn span {

    background:
        var(--violet-600) !important;

}


html[data-theme="dark"]
.menu-btn span {

    background:
        #bba2ff !important;

}


.menu-btn.active
span:nth-child(1) {

    transform:
        translateY(7.5px)
        rotate(45deg);

}


.menu-btn.active
span:nth-child(2) {

    opacity: 0;

}


.menu-btn.active
span:nth-child(3) {

    transform:
        translateY(-7.5px)
        rotate(-45deg);

}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {

    background:
        var(--surface);

    color:
        var(--text-primary);

    border-bottom:
        1px solid
        var(--line);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.12);

}


.mobile-menu-inner {

    padding-top:
        14px;

    padding-bottom:
        calc(
            18px
            + env(safe-area-inset-bottom)
        );

}


.mobile-menu-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        3px 4px
        13px;

    border-bottom:
        1px solid
        var(--line);

}


.mobile-menu-top > span {

    color:
        var(--text-soft);

    font-size:
        10px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

}


.mobile-menu-close {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        var(--line);

    border-radius:
        10px;

    background:
        var(--surface-soft);

    color:
        var(--text-primary);

    cursor:
        pointer;

    font-size:
        22px;

}


.mobile-nav-links {

    display:
        grid;

    gap:
        3px;

    padding:
        10px 0;

}


.mobile-nav-links a {

    display:
        flex;

    align-items:
        center;

    min-height:
        46px;

    padding:
        11px 12px;

    border-radius:
        10px;

    color:
        var(--text-primary);

    font-size:
        13px;

    font-weight:
        700;

}


.mobile-nav-links a:hover {

    background:
        var(--surface-soft);

    color:
        var(--violet-500);

}


.mobile-theme-toggle {

    width: 100%;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin:
        5px 0 12px;

    padding:
        12px;

    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    background:
        var(--surface-soft);

    color:
        var(--text-primary);

    text-align:
        left;

    cursor: pointer;

}


.mobile-theme-icon {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        10px;

    background:
        rgba(124,58,237,.12);

    color:
        var(--violet-500);

}


.mobile-theme-icon svg {

    width:
        18px;

    height:
        18px;

    stroke-width:
        1.8;

}


.mobile-theme-toggle strong,
.mobile-theme-toggle small {

    display:
        block;

}


.mobile-theme-toggle strong {

    font-size:
        12px;

}


.mobile-theme-toggle small {

    margin-top:
        2px;

    color:
        var(--text-secondary);

    font-size:
        9px;

}


.mobile-login {

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    border-radius:
        11px !important;

    background:
        var(--violet-700);

    color:
        white !important;

    font-weight:
        800;

}


/* =========================================================
   GENERAL CARDS / PANELS
========================================================= */

.panel,
.card,
.event-card,
.nominee-card,
.stat,
.value-item,
.why-card,
.testimonial-card,
.contact-card,
.contact-form-card,
.vote-hidden-card,
.empty {

    background:
        var(--surface);

    color:
        var(--text-primary);

    border-color:
        var(--line);

    box-shadow:
        var(--card-shadow-soft);

}


.panel,
.card,
.event-card,
.nominee-card,
.stat,
.value-item,
.why-card,
.testimonial-card,
.contact-card,
.contact-form-card {

    transition:
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .18s ease,
        box-shadow .18s ease;

}


/* =========================================================
   SOFT SECTIONS
========================================================= */

.section-soft,
.testimonials-section {

    background:
        var(--surface-soft);

}


.why-section {

    background:
        var(--page-bg);

}


/* =========================================================
   HERO
========================================================= */

.hero {

    background:
        var(--page-bg);

}


.hero h1 {

    color:
        var(--text-primary);

}


.hero h1 span {

    color:
        var(--violet-600);

}


.hero p {

    color:
        var(--text-secondary);

}


.hero-trust > div {

    background:
        var(--surface);

    border-color:
        var(--line);

}


.hero-trust strong {

    color:
        var(--text-primary);

}


.hero-trust span {

    color:
        var(--text-secondary);

}


.hero-image-wrap,
.hero-card {

    background:
        linear-gradient(
            145deg,
            var(--surface),
            var(--surface-soft)
        );

    border-color:
        var(--line);

    box-shadow:
        var(--card-shadow);

}


/* =========================================================
   PUBLIC PAGE HERO
========================================================= */

.page-hero {

    background:
        radial-gradient(
            circle at top right,
            rgba(139,92,246,.16),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            var(--page-bg),
            var(--surface-soft)
        );

}


.page-hero h1 {

    color:
        var(--text-primary);

}


.page-hero p {

    color:
        var(--text-secondary);

}


/* =========================================================
   EVENT / TICKET CARDS
========================================================= */

.event-card {

    background:
        var(--surface);

    border-color:
        var(--line);

}


.event-card:hover {

    box-shadow:
        var(--card-shadow);

}


.event-media {

    background:
        var(--surface-soft);

}


.placeholder-media {

    background:
        linear-gradient(
            135deg,
            var(--surface-soft),
            rgba(124,58,237,.14)
        );

    color:
        var(--violet-500);

}


.event-body h3 {

    color:
        var(--text-primary);

}


.event-body p,
.meta,
.event-code {

    color:
        var(--text-secondary);

}


/* =========================================================
   BADGES
========================================================= */

.badge {

    background:
        rgba(124,58,237,.12);

    color:
        var(--violet-600);

}


html[data-theme="dark"]
.badge {

    background:
        rgba(167,139,250,.14);

    color:
        #cbb7ff;

}


/* =========================================================
   FORMS
========================================================= */

.field label {

    color:
        var(--text-primary);

}


.field input,
.field select,
.field textarea,
input,
select,
textarea {

    background:
        var(--input-bg);

    color:
        var(--input-text);

    border-color:
        var(--line-strong);

}


.field input::placeholder,
.field textarea::placeholder,
input::placeholder,
textarea::placeholder {

    color:
        var(--text-soft);

}


.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
select:focus,
textarea:focus {

    border-color:
        var(--violet-500);

    box-shadow:
        0 0 0 4px
        rgba(124,58,237,.12);

}


select option {

    background:
        var(--surface);

    color:
        var(--text-primary);

}


/* Autofill */

html[data-theme="dark"]
input:-webkit-autofill,
html[data-theme="dark"]
input:-webkit-autofill:hover,
html[data-theme="dark"]
input:-webkit-autofill:focus {

    -webkit-text-fill-color:
        var(--text-primary);

    -webkit-box-shadow:
        0 0 0 1000px
        var(--input-bg)
        inset;

}


/* =========================================================
   NOTICES
========================================================= */

.notice {

    background:
        rgba(124,58,237,.12);

    color:
        var(--text-primary);

}


.notice.success {

    background:
        var(--success-bg);

    color:
        var(--success-text);

}


.notice.error {

    background:
        var(--danger-bg);

    color:
        var(--danger-text);

}


/* =========================================================
   STATS
========================================================= */

.stat {

    background:
        var(--surface);

    border-color:
        var(--line);

}


.stat span {

    color:
        var(--text-secondary);

}


.stat b {

    color:
        var(--violet-500);

}


/* =========================================================
   HOME VALUE CARDS
========================================================= */

.value-item {

    background:
        var(--surface);

    border-color:
        var(--line);

}


.value-item h3 {

    color:
        var(--text-primary);

}


.value-item p {

    color:
        var(--text-secondary);

}


.value-icon {

    background:
        rgba(124,58,237,.12);

    color:
        var(--violet-500);

}


/* =========================================================
   WHY CHOOSE
========================================================= */

.why-card {

    background:
        var(--surface);

    border-color:
        var(--line);

}


.why-card h3 {

    color:
        var(--text-primary);

}


.why-card p {

    color:
        var(--text-secondary);

}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonial-card {

    background:
        var(--surface);

    border-color:
        var(--line);

}


.testimonial-card > p {

    color:
        var(--text-secondary);

}


.testimonial-person strong {

    color:
        var(--text-primary);

}


.testimonial-person span {

    color:
        var(--text-secondary);

}


/* =========================================================
   CONTACT / ABOUT
========================================================= */

.about-copy h2,
.contact-info h2,
.contact-form-card h2 {

    color:
        var(--text-primary);

}


.about-copy p,
.contact-note p {

    color:
        var(--text-secondary);

}


.contact-card {

    background:
        var(--surface);

    border-color:
        var(--line);

}


.contact-card strong {

    color:
        var(--text-primary);

}


.contact-note {

    background:
        rgba(124,58,237,.08);

}


.contact-form-card {

    background:
        var(--surface);

    border-color:
        var(--line);

}


/* =========================================================
   EMPTY STATES
========================================================= */

.empty,
.vote-hidden-card {

    background:
        var(--surface);

    border-color:
        var(--line);

    color:
        var(--text-secondary);

}


/* =========================================================
   TABLES - IMPORTANT FOR NOMINEE / VERIFY / TRACK
========================================================= */

table {

    background:
        var(--surface);

    color:
        var(--text-primary);

}


thead,
th {

    background:
        var(--surface-soft);

    color:
        var(--text-primary);

}


td,
th {

    border-color:
        var(--line) !important;

}


tbody tr {

    background:
        var(--surface);

}


tbody tr:hover {

    background:
        var(--surface-soft);

}


/* =========================================================
   VOTE / CHECKOUT PAGE GENERIC OVERRIDES
========================================================= */

.vote-total-box,
.quick-votes button,
.payment-note,
.ticket-total-box,
.ticket-summary,
.checkout-summary,
.checkout-card {

    border-color:
        var(--line) !important;

}


.quick-votes button {

    background:
        var(--surface) !important;

    color:
        var(--violet-500) !important;

}


.quick-votes button:hover {

    background:
        var(--surface-soft) !important;

}


.quick-votes button.active {

    background:
        var(--violet-700) !important;

    color:
        #fff !important;

}


/* =========================================================
   VOTE TRACKING
========================================================= */

.vote-track-page {

    background:
        var(--page-bg);

}


.vote-track-search-card,
.vote-track-result-card,
.vote-track-empty {

    background:
        var(--surface) !important;

    border-color:
        var(--line) !important;

    color:
        var(--text-primary);

}


.vote-track-head h1,
.vote-track-result-head h2,
.vote-track-event h3,
.vote-track-empty h2 {

    color:
        var(--text-primary) !important;

}


.vote-track-head p,
.vote-track-result-head p,
.vote-track-event p {

    color:
        var(--text-secondary) !important;

}


.vote-track-field label {

    color:
        var(--text-primary) !important;

}


.vote-track-field input {

    background:
        var(--input-bg) !important;

    color:
        var(--input-text) !important;

    border-color:
        var(--line-strong) !important;

}


.vote-track-divider span {

    background:
        var(--surface) !important;

}


.vote-track-stats > div {

    background:
        var(--surface-soft) !important;

    border-color:
        var(--line) !important;

}


.vote-track-stats strong {

    color:
        var(--text-primary) !important;

}


.vote-track-reference {

    background:
        var(--surface-soft) !important;

    border-color:
        var(--line) !important;

}


.vote-track-reference strong {

    color:
        var(--text-primary) !important;

}


/* =========================================================
   VOTE HIDDEN / NOMINEE AREA
========================================================= */

.vote-hidden-card {

    background:
        linear-gradient(
            145deg,
            var(--surface),
            var(--surface-soft)
        );

}


.vote-hidden-card h3 {

    color:
        var(--text-primary);

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    background:
        radial-gradient(
            circle at top right,
            rgba(124,58,237,.18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #100d17,
            #191326
        );

}


/* Footer intentionally stays dark in both themes. */

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer strong {

    color:
        #ffffff;

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

button,
a,
input,
select,
textarea {

    -webkit-tap-highlight-color:
        transparent;

}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

    outline:
        3px solid
        rgba(139,92,246,.40);

    outline-offset:
        2px;

}


/* =========================================================
   DARK MODE - HARD CODED LEGACY SAFETY OVERRIDES
========================================================= */

html[data-theme="dark"]
.section-head h2,

html[data-theme="dark"]
.event-body h3,

html[data-theme="dark"]
.value-item h3,

html[data-theme="dark"]
.why-card h3,

html[data-theme="dark"]
.contact-card strong,

html[data-theme="dark"]
.price {

    color:
        var(--text-primary);

}


html[data-theme="dark"]
.section-head p,

html[data-theme="dark"]
.event-body p,

html[data-theme="dark"]
.value-item p,

html[data-theme="dark"]
.why-card p,

html[data-theme="dark"]
.meta {

    color:
        var(--text-secondary);

}


/* =========================================================
   DESKTOP RESPONSIVE NAV
========================================================= */

@media
(max-width:1180px) {

    .nav-links {

        gap:
            13px;

    }


    .nav-links a {

        font-size:
            11px;

    }


    .theme-toggle-label {

        display:
            none;

    }

}


/* =========================================================
   MOBILE / TABLET HEADER
========================================================= */

@media
(max-width:1100px) {

    .nav-links,
    .nav-actions {

        display:
            none;

    }


    .menu-btn {

        display:
            flex !important;

    }


    .mobile-menu.open {

        display:
            block;

        position:
            fixed;

        top:
            72px;

        left: 0;

        right: 0;

        bottom: 0;

        overflow-y:
            auto;

        overscroll-behavior:
            contain;

        background:
            var(--surface);

        z-index:
            99;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media
(max-width:600px) {

    .container {

        width:
            min(
                calc(100% - 24px),
                1180px
            );

    }


    .nav {

        height:
            64px;

        gap:
            10px;

    }


    .logo img {

        max-width:
            160px;

        height:
            38px;

    }


    .mobile-menu.open {

        top:
            64px;

    }


    .menu-btn {

        width:
            42px;

        height:
            42px;

        flex:
            0 0 42px;

    }


    .hero h1,
    .hero-content h1 {

        font-size:
            clamp(
                36px,
                11vw,
                42px
            );

        letter-spacing:
            -1.3px;

    }


    .page-hero h1 {

        font-size:
            clamp(
                34px,
                10vw,
                40px
            );

    }


    .section {

        padding:
            48px 0;

    }


    .panel {

        padding:
            17px;

    }


    .cards,
    .nominee-grid,
    .footer-grid,
    .form-grid,
    .stat-row,
    .value-grid,
    .why-grid,
    .testimonial-grid {

        grid-template-columns:
            1fr;

    }


    .details-grid,
    .split,
    .about-grid,
    .contact-grid {

        grid-template-columns:
            1fr;

    }


    .event-body .btn {

        width:
            100%;

    }


    .event-card {

        width:
            100%;

    }


    .section-head {

        width:
            100%;

    }


    .section-head .btn {

        width:
            100%;

    }


    table {

        max-width:
            none;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media
(prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}



/* =========================================================
   VOTERA HOMEPAGE CAMPAIGN SLIDER
========================================================= */

.campaign-slider-section {
    padding: 26px 0 12px;
    background: var(--bg);
}


/* =========================================================
   SLIDER
========================================================= */

.campaign-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--card);
    box-shadow: var(--shadow);
}


/* =========================================================
   TRACK
========================================================= */

.campaign-slider-track {
    position: relative;
    width: 100%;
}


/* =========================================================
   SLIDES
========================================================= */

.campaign-slide {
    display: none;
    position: relative;
    width: 100%;
    aspect-ratio: 851 / 315;
    overflow: hidden;
    background: var(--card);
}


.campaign-slide.active {
    display: block;
    animation: voteraSlideFade .45s ease;
}


.campaign-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}


@keyframes voteraSlideFade {

    from {
        opacity: .35;
        transform: scale(1.01);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


/* =========================================================
   PLACEHOLDER
========================================================= */

.campaign-slide-placeholder {
    width: 100%;
    height: 100%;
    min-height: 280px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(255,255,255,.16),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #581c87,
            #7e22ce,
            #c026d3
        );

    color: white;
}


.campaign-slide-placeholder span {
    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: .12em;

    opacity: .8;
}


.campaign-slide-placeholder strong {
    font-size: clamp(
        30px,
        5vw,
        54px
    );

    line-height: 1;
}


.campaign-slide-placeholder small {
    margin-top: 12px;

    color: rgba(255,255,255,.74);

    font-size: 12px;
}


/* =========================================================
   ARROWS
========================================================= */

.campaign-slider-arrow {
    position: absolute;
    top: 50%;

    z-index: 5;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    transform: translateY(-50%);

    border:
        1px solid
        rgba(255,255,255,.45);

    border-radius: 50%;

    background:
        rgba(15,10,24,.55);

    backdrop-filter: blur(8px);

    color: white;

    cursor: pointer;

    font-size: 28px;
    line-height: 1;

    transition:
        transform .18s ease,
        background .18s ease;
}


.campaign-slider-arrow:hover {
    background:
        rgba(109,40,217,.88);
}


.campaign-slider-arrow:active {
    transform:
        translateY(-50%)
        scale(.94);
}


.campaign-slider-prev {
    left: 16px;
}


.campaign-slider-next {
    right: 16px;
}

/* =========================================================
   VOTERA PUBLIC MOBILE MENU
   FINAL AUTHORITATIVE VERSION
========================================================= */

body.mobile-menu-open {
    overflow: hidden;
}


/* Desktop default */
.mobile-menu {
    display: none;
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 900px) {

    /*
    |--------------------------------------------------------------------------
    | HIDE DESKTOP NAV
    |--------------------------------------------------------------------------
    */

    .nav-links,
    .nav-actions {
        display: none !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HAMBURGER
    |--------------------------------------------------------------------------
    */

    .menu-btn {
        position: relative;
        z-index: 10001;

        display: flex !important;

        width: 44px;
        height: 44px;

        flex: 0 0 44px;

        align-items: center;
        justify-content: center;
        flex-direction: column;

        gap: 5px;

        padding: 0;

        border:
            1px solid
            var(--border);

        border-radius: 12px;

        background:
            var(--surface, var(--card));

        color:
            var(--violet);

        cursor: pointer;
    }


    .menu-btn span {
        display: block;

        width: 21px;
        height: 2px;

        border-radius: 999px;

        background:
            var(--violet) !important;

        transition:
            transform .22s ease,
            opacity .22s ease;
    }


    .menu-btn.active span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .menu-btn.active span:nth-child(2) {
        opacity: 0;
    }


    .menu-btn.active span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /*
    |--------------------------------------------------------------------------
    | OVERLAY
    |--------------------------------------------------------------------------
    */

    .mobile-menu {
        display: block !important;

        position: fixed !important;

        inset: 0 !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 100dvh !important;

        padding: 0 !important;

        background:
            rgba(10, 8, 16, .55) !important;

        border: 0 !important;

        visibility: hidden;
        opacity: 0;

        pointer-events: none;

        z-index: 9999;

        transition:
            opacity .22s ease,
            visibility .22s ease;
    }


    .mobile-menu.open {
        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DRAWER
    |--------------------------------------------------------------------------
    */

    .mobile-menu-inner {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        left: auto !important;

        width:
            min(
                88vw,
                380px
            ) !important;

        max-width: 380px;

        height: 100dvh;

        margin: 0 !important;

        padding:
            18px
            18px
            calc(
                28px
                + env(safe-area-inset-bottom)
            ) !important;

        overflow-y: auto;

        background:
            var(--surface, var(--card)) !important;

        color:
            var(--ink) !important;

        border-left:
            1px solid
            var(--border);

        box-shadow:
            -15px 0 45px
            rgba(0, 0, 0, .18);

        transform:
            translateX(100%);

        transition:
            transform .25s ease;

        -webkit-overflow-scrolling:
            touch;
    }


    .mobile-menu.open
    .mobile-menu-inner {
        transform:
            translateX(0) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DRAWER HEADER
    |--------------------------------------------------------------------------
    */

    .mobile-menu-top {
        display: flex !important;

        align-items: center;
        justify-content: space-between;

        gap: 12px;

        min-height: 58px;

        margin-bottom: 8px;
        padding-bottom: 14px;

        border-bottom:
            1px solid
            var(--border);
    }


    .mobile-menu-top > span {
        color:
            var(--muted);

        font-size: 11px;
        font-weight: 800;

        text-transform: uppercase;
        letter-spacing: .08em;
    }


    .mobile-menu-close {
        display: grid !important;

        width: 40px;
        height: 40px;

        place-items: center;

        padding: 0;

        border:
            1px solid
            var(--border);

        border-radius: 11px;

        background:
            var(--bg);

        color:
            var(--violet);

        cursor: pointer;

        font-size: 25px;
        line-height: 1;
    }


    /*
    |--------------------------------------------------------------------------
    | LINKS
    |--------------------------------------------------------------------------
    */

    .mobile-nav-links {
        display: grid !important;

        width: 100%;

        gap: 4px;
    }


    .mobile-nav-links a {
        display: flex !important;

        width: 100%;

        min-height: 46px;

        align-items: center;

        padding:
            11px
            13px !important;

        margin: 0 !important;

        border-radius: 10px;

        color:
            var(--ink) !important;

        background:
            transparent !important;

        font-size: 14px;
        font-weight: 700;

        opacity: 1 !important;
        visibility: visible !important;
    }


    .mobile-nav-links a:hover,
    .mobile-nav-links a:focus {
        color:
            var(--violet) !important;

        background:
            var(--violet3) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | THEME CONTROL
    |--------------------------------------------------------------------------
    */

    .mobile-theme-toggle {
        display: flex !important;

        width: 100%;

        align-items: center;

        gap: 11px;

        margin-top: 18px;

        padding: 12px;

        border:
            1px solid
            var(--border);

        border-radius: 11px;

        background:
            var(--bg);

        color:
            var(--ink);

        cursor: pointer;

        text-align: left;
    }


    .mobile-theme-icon {
        display: grid;

        width: 38px;
        height: 38px;

        place-items: center;

        flex: 0 0 38px;

        border-radius: 10px;

        color:
            var(--violet);

        background:
            var(--violet3);
    }


    .mobile-theme-icon svg {
        width: 18px;
        height: 18px;

        stroke-width: 2;
    }


    .mobile-theme-toggle strong,
    .mobile-theme-toggle small {
        display: block;
    }


    .mobile-theme-toggle strong {
        color:
            var(--ink);

        font-size: 12px;
    }


    .mobile-theme-toggle small {
        margin-top: 2px;

        color:
            var(--muted);

        font-size: 10px;
    }


    /*
    |--------------------------------------------------------------------------
    | LOGIN
    |--------------------------------------------------------------------------
    */

    .mobile-login {
        display: flex !important;

        width: 100%;

        min-height: 46px;

        align-items: center;
        justify-content: center;

        margin-top: 10px !important;

        padding:
            11px 14px !important;

        border-radius: 10px;

        background:
            var(--violet) !important;

        color:
            #ffffff !important;

        font-size: 13px;
        font-weight: 800;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 480px) {

    .mobile-menu-inner {
        width: 92vw !important;

        padding:
            15px
            14px
            calc(
                24px
                + env(safe-area-inset-bottom)
            ) !important;
    }

}

/* =========================================================
   VOTERA DARK MODE
   FINAL CONTRAST / VISIBILITY FIX
========================================================= */

html[data-theme="dark"] {

    --page-bg: #0f0d14;

    --surface: #17131f;

    --surface-soft: #201a2a;

    --surface-raised: #251e31;

    --text-primary: #f8f6fb;

    --text-secondary: #c6bfce;

    --text-soft: #a79eaf;

    --line: #3a3147;

    --line-strong: #574667;

    --input-bg: #1d1726;

    --input-text: #f8f6fb;

    --header-bg:
        rgba(
            15,
            13,
            20,
            .96
        );

}


/* =========================================================
   BASE
========================================================= */

html[data-theme="dark"],
html[data-theme="dark"] body {

    background:
        var(--page-bg) !important;

    color:
        var(--text-primary) !important;

}


html[data-theme="dark"] main {

    color:
        var(--text-primary);

}


html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong {

    color:
        var(--text-primary);

}


html[data-theme="dark"] p,
html[data-theme="dark"] .muted {

    color:
        var(--text-secondary);

}


/* =========================================================
   HEADER
========================================================= */

html[data-theme="dark"]
.site-header {

    background:
        var(--header-bg) !important;

    border-color:
        var(--line) !important;

}


html[data-theme="dark"]
.nav-links {

    color:
        var(--text-secondary) !important;

}


html[data-theme="dark"]
.nav-links a {

    color:
        var(--text-secondary) !important;

}


html[data-theme="dark"]
.nav-links a:hover {

    color:
        #cdb8ff !important;

}


/* =========================================================
   MOBILE DRAWER
========================================================= */

@media (max-width: 900px) {

    html[data-theme="dark"]
    .mobile-menu {

        background:
            rgba(
                0,
                0,
                0,
                .72
            ) !important;

    }


    html[data-theme="dark"]
    .mobile-menu-inner {

        background:
            #17131f !important;

        color:
            #f8f6fb !important;

        border-color:
            #3a3147 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | NAVIGATION HEADING
    |--------------------------------------------------------------------------
    */

    html[data-theme="dark"]
    .mobile-menu-top {

        border-color:
            #3a3147 !important;

    }


    html[data-theme="dark"]
    .mobile-menu-top > span {

        color:
            #bcb3c7 !important;

    }


    /*
    |--------------------------------------------------------------------------
    | LINKS
    |--------------------------------------------------------------------------
    */

    html[data-theme="dark"]
    .mobile-nav-links {

        color:
            #f8f6fb !important;

    }


    html[data-theme="dark"]
    .mobile-nav-links a,
    html[data-theme="dark"]
    .mobile-menu
    .mobile-nav-links a {

        color:
            #f8f6fb !important;

        background:
            transparent !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

    }


    html[data-theme="dark"]
    .mobile-nav-links a:hover,
    html[data-theme="dark"]
    .mobile-nav-links a:focus,
    html[data-theme="dark"]
    .mobile-nav-links a:active {

        background:
            #241c31 !important;

        color:
            #cdb8ff !important;

    }


    /*
    |--------------------------------------------------------------------------
    | CLOSE BUTTON
    |--------------------------------------------------------------------------
    */

    html[data-theme="dark"]
    .mobile-menu-close {

        background:
            #201a2a !important;

        border-color:
            #574667 !important;

        color:
            #cdb8ff !important;

        box-shadow:
            none !important;

    }


    /*
    |--------------------------------------------------------------------------
    | APPEARANCE CONTROL
    |--------------------------------------------------------------------------
    */

    html[data-theme="dark"]
    .mobile-theme-toggle {

        background:
            #211a2b !important;

        border-color:
            #453750 !important;

        color:
            #f8f6fb !important;

    }


    html[data-theme="dark"]
    .mobile-theme-toggle strong {

        color:
            #f8f6fb !important;

    }


    html[data-theme="dark"]
    .mobile-theme-toggle small {

        color:
            #b9b0c3 !important;

    }


    html[data-theme="dark"]
    .mobile-theme-icon {

        background:
            rgba(
                124,
                58,
                237,
                .20
            ) !important;

        color:
            #bfa8ff !important;

    }


    /*
    |--------------------------------------------------------------------------
    | LOGIN
    |--------------------------------------------------------------------------
    */

    html[data-theme="dark"]
    .mobile-login {

        background:
            linear-gradient(
                135deg,
                #6d28d9,
                #7c3aed
            ) !important;

        color:
            #ffffff !important;

        border:
            1px solid
            #8b5cf6 !important;

    }

}


/* =========================================================
   CARDS / PANELS
========================================================= */

html[data-theme="dark"]
.panel,

html[data-theme="dark"]
.card,

html[data-theme="dark"]
.event-card,

html[data-theme="dark"]
.nominee-card,

html[data-theme="dark"]
.stat,

html[data-theme="dark"]
.value-item,

html[data-theme="dark"]
.why-card,

html[data-theme="dark"]
.testimonial-card,

html[data-theme="dark"]
.contact-card,

html[data-theme="dark"]
.contact-form-card,

html[data-theme="dark"]
.vote-hidden-card,

html[data-theme="dark"]
.empty {

    background:
        var(--surface) !important;

    color:
        var(--text-primary) !important;

    border-color:
        var(--line) !important;

}


/* =========================================================
   CARD TEXT
========================================================= */

html[data-theme="dark"]
.event-card h3,

html[data-theme="dark"]
.value-item h3,

html[data-theme="dark"]
.why-card h3,

html[data-theme="dark"]
.testimonial-card strong,

html[data-theme="dark"]
.panel h2,

html[data-theme="dark"]
.panel h3 {

    color:
        var(--text-primary) !important;

}


html[data-theme="dark"]
.event-body p,

html[data-theme="dark"]
.value-item p,

html[data-theme="dark"]
.why-card p,

html[data-theme="dark"]
.testimonial-card p,

html[data-theme="dark"]
.meta,

html[data-theme="dark"]
.event-code {

    color:
        var(--text-secondary) !important;

}


/* =========================================================
   SOFT SECTIONS
========================================================= */

html[data-theme="dark"]
.section-soft,

html[data-theme="dark"]
.testimonials-section {

    background:
        #141119 !important;

}


html[data-theme="dark"]
.why-section {

    background:
        var(--page-bg) !important;

}


/* =========================================================
   INPUTS
========================================================= */

html[data-theme="dark"]
.field input,

html[data-theme="dark"]
.field select,

html[data-theme="dark"]
.field textarea {

    background:
        var(--input-bg) !important;

    color:
        var(--input-text) !important;

    border-color:
        var(--line-strong) !important;

}


html[data-theme="dark"]
.field input::placeholder,

html[data-theme="dark"]
.field textarea::placeholder {

    color:
        #8f8599 !important;

}


html[data-theme="dark"]
.field label {

    color:
        var(--text-primary) !important;

}


/* =========================================================
   SECONDARY / SOFT BUTTONS
========================================================= */

html[data-theme="dark"]
.btn.secondary {

    background:
        #211a2b !important;

    color:
        #d5c4ff !important;

    border-color:
        #514063 !important;

}


html[data-theme="dark"]
.btn.soft {

    background:
        rgba(
            124,
            58,
            237,
            .18
        ) !important;

    color:
        #d3c1ff !important;

}


/* =========================================================
   BADGES
========================================================= */

html[data-theme="dark"]
.badge,

html[data-theme="dark"]
.eyebrow {

    background:
        rgba(
            124,
            58,
            237,
            .18
        ) !important;

    color:
        #d2beff !important;

}


/* =========================================================
   EMPTY STATES
========================================================= */

html[data-theme="dark"]
.empty {

    background:
        #17131f !important;

    border-color:
        #443650 !important;

}


html[data-theme="dark"]
.empty p {

    color:
        var(--text-secondary) !important;

}


/* =========================================================
   HERO TRUST CARDS
========================================================= */

html[data-theme="dark"]
.hero-trust > div {

    background:
        var(--surface) !important;

    border-color:
        var(--line) !important;

}


html[data-theme="dark"]
.hero-trust strong {

    color:
        var(--text-primary) !important;

}


html[data-theme="dark"]
.hero-trust span {

    color:
        var(--text-secondary) !important;

}


/* =========================================================
   HERO IMAGE WRAPPER
========================================================= */

html[data-theme="dark"]
.hero-image-wrap {

    background:
        radial-gradient(
            circle at top right,
            rgba(124,58,237,.18),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #191420,
            #21192c
        ) !important;

    border-color:
        var(--line) !important;

}


/* =========================================================
   PAGE HERO
========================================================= */

html[data-theme="dark"]
.page-hero {

    background:
        radial-gradient(
            circle at top right,
            rgba(124,58,237,.14),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #0f0d14,
            #15111c
        ) !important;

}


html[data-theme="dark"]
.page-hero h1 {

    color:
        var(--text-primary) !important;

}


html[data-theme="dark"]
.page-hero p {

    color:
        var(--text-secondary) !important;

}

/* =========================================================
   VOTERA FINAL MOBILE VIEWPORT / HORIZONTAL OVERFLOW FIX
   KEEP THIS AT THE VERY BOTTOM OF app.css
========================================================= */

/*
|--------------------------------------------------------------------------
| GLOBAL VIEWPORT SAFETY
|--------------------------------------------------------------------------
*/

html,
body {

    width: 100%;
    max-width: 100%;

    margin: 0;

    overflow-x: hidden !important;
}


html {

    -webkit-text-size-adjust: 100%;
}


body {

    position: relative;

    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| EVERYTHING MUST RESPECT ITS PARENT WIDTH
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after {

    box-sizing: border-box;

    max-width: 100%;
}


img,
video,
iframe,
svg,
canvas {

    max-width: 100%;
}


/*
|--------------------------------------------------------------------------
| MAIN PAGE AREAS
|--------------------------------------------------------------------------
*/

.site-header,
main,
.footer,
.section,
.hero,
.value-strip,
.campaign-slider-section {

    width: 100%;

    max-width: 100%;

    overflow-x: clip;
}


/*
|--------------------------------------------------------------------------
| STANDARD CONTAINER
|--------------------------------------------------------------------------
*/

.container {

    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    max-width: 1180px;

    margin-left: auto;
    margin-right: auto;

    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| FLEX / GRID ITEMS
| Prevent text and child elements forcing page wider
|--------------------------------------------------------------------------
*/

.nav,
.hero-grid,
.details-grid,
.split,
.cards,
.nominee-grid,
.value-grid,
.why-grid,
.testimonial-grid,
.footer-grid,
.form-grid,
.stat-row {

    min-width: 0;
}


.nav > *,
.hero-grid > *,
.details-grid > *,
.split > *,
.cards > *,
.nominee-grid > *,
.value-grid > *,
.why-grid > *,
.testimonial-grid > *,
.footer-grid > *,
.form-grid > *,
.stat-row > * {

    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| LONG TEXT / REFERENCES / EMAIL / CODES
|--------------------------------------------------------------------------
*/

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
strong,
a,
small,
label {

    overflow-wrap: break-word;
}


.event-code,
.footer-contact-link strong {

    overflow-wrap: anywhere;
}


/* =========================================================
   CAMPAIGN SLIDER
========================================================= */

.campaign-slider-section {

    overflow: hidden;
}


.campaign-slider {

    width: 100%;

    max-width: 100%;

    overflow: hidden;
}


.campaign-slider-track {

    width: 100%;

    max-width: 100%;

    overflow: hidden;
}


.campaign-slide {

    width: 100%;

    max-width: 100%;

    overflow: hidden;
}


.campaign-slide img {

    width: 100%;

    max-width: 100%;

    object-fit: cover;
}


/* =========================================================
   MOBILE MENU OVERLAY
========================================================= */

@media (max-width: 1100px) {

    /*
    |--------------------------------------------------------------------------
    | OVERLAY MUST NEVER AFFECT DOCUMENT WIDTH
    |--------------------------------------------------------------------------
    */

    .mobile-menu {

        position: fixed !important;

        inset: 0 !important;

        width: 100% !important;

        max-width: 100% !important;

        height: 100dvh !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /*
    |--------------------------------------------------------------------------
    | DRAWER
    |--------------------------------------------------------------------------
    */

    .mobile-menu-inner {

        position: absolute !important;

        top: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        left: auto !important;

        width:
            min(
                88%,
                380px
            ) !important;

        max-width:
            calc(100% - 28px) !important;

        min-width: 0 !important;

        height: 100dvh !important;

        margin: 0 !important;

        overflow-x: hidden !important;

        overflow-y: auto !important;

        box-sizing: border-box !important;

        transform:
            translate3d(
                100%,
                0,
                0
            );

        will-change:
            transform;
    }


    .mobile-menu.open
    .mobile-menu-inner {

        transform:
            translate3d(
                0,
                0,
                0
            ) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | MENU CONTENT
    |--------------------------------------------------------------------------
    */

    .mobile-nav-links,
    .mobile-nav-links a,
    .mobile-theme-toggle,
    .mobile-login {

        width: 100%;

        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }

}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 600px) {

    .container {

        width:
            calc(
                100% - 24px
            ) !important;

        max-width:
            calc(
                100% - 24px
            ) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | IMPORTANT:
    | REMOVE THE OLD 92vw DRAWER BEHAVIOUR
    |--------------------------------------------------------------------------
    */

    .mobile-menu-inner {

        width:
            min(
                88%,
                360px
            ) !important;

        max-width:
            calc(
                100% - 18px
            ) !important;
    }


    /*
    |--------------------------------------------------------------------------
    | HERO
    |--------------------------------------------------------------------------
    */

    .hero,
    .hero-grid,
    .hero-content,
    .hero-visual,
    .hero-image-wrap {

        width: 100%;

        max-width: 100%;

        min-width: 0;
    }


    .hero-content h1 {

        max-width: 100%;

        overflow-wrap: normal;

        word-break: normal;
    }


    /*
    |--------------------------------------------------------------------------
    | BUTTONS
    |--------------------------------------------------------------------------
    */

    .hero-actions,
    .hero-actions .btn {

        width: 100%;

        max-width: 100%;
    }


    /*
    |--------------------------------------------------------------------------
    | CARDS
    |--------------------------------------------------------------------------
    */

    .event-card,
    .panel,
    .value-item,
    .why-card,
    .testimonial-card {

        width: 100%;

        max-width: 100%;

        min-width: 0;
    }


    /*
    |--------------------------------------------------------------------------
    | SLIDER
    |--------------------------------------------------------------------------
    */

    .campaign-slider {

        border-radius: 18px;
    }


    .campaign-slide {

        width: 100%;

        max-width: 100%;

        aspect-ratio:
            851 / 315;
    }


    .campaign-slide img {

        width: 100%;

        height: 100%;

        max-width: 100%;

        object-fit: cover;
    }


    /*
    |--------------------------------------------------------------------------
    | SLIDER ARROWS
    |--------------------------------------------------------------------------
    */

    .campaign-slider-arrow {

        width: 38px;

        height: 38px;

        font-size: 23px;
    }


    .campaign-slider-prev {

        left: 8px;
    }


    .campaign-slider-next {

        right: 8px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .container {

        width:
            calc(
                100% - 18px
            ) !important;

        max-width:
            calc(
                100% - 18px
            ) !important;
    }


    .mobile-menu-inner {

        width:
            calc(
                100% - 16px
            ) !important;

        max-width:
            calc(
                100% - 16px
            ) !important;
    }

}

/* =========================================================
   VOTERA FOOTER - CLIENT APPROVED STRUCTURE
========================================================= */

.votera-footer {

    position: relative;

    overflow: hidden;

    margin-top: 60px;

    padding:
        68px 0
        24px;

    background:
        radial-gradient(
            circle at top center,
            rgba(124,58,237,.15),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #110d18,
            #191222
        );

    color:
        #cfc7d7;

}


/* =========================================================
   BRAND
========================================================= */

.votera-footer-brand {

    max-width: 580px;

    margin:
        0 auto
        48px;

    text-align: center;

}


.votera-footer-logo {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

}


.votera-footer-logo img {

    width: auto;

    max-width:
        220px;

    max-height:
        78px;

    object-fit:
        contain;

}


.votera-footer-summary {

    max-width:
        520px;

    margin:
        17px auto
        0;

    color:
        #a9a0b3;

    font-size:
        14px;

    line-height:
        1.65;

}


/* =========================================================
   GRID
========================================================= */

.votera-footer-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        38px;

    max-width:
        1080px;

    margin:
        0 auto;

    text-align:
        center;

}


/* =========================================================
   COLUMNS
========================================================= */

.votera-footer-column {

    min-width: 0;

}


.votera-footer-column h4 {

    margin:
        0 0
        18px;

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        800;

}


.votera-footer-column > a {

    display:
        block;

    width:
        fit-content;

    max-width:
        100%;

    margin:
        10px auto;

    color:
        #bcb3c6;

    font-size:
        13px;

    line-height:
        1.5;

    transition:
        color .18s ease;

}


.votera-footer-column > a:hover {

    color:
        #c9b2ff;

}


/* =========================================================
   CONTACT
========================================================= */

.votera-footer-contact {

    overflow-wrap:
        anywhere;

}


.votera-footer-contact.email {

    color:
        #d8c8ff !important;

}


/* =========================================================
   OFFICE
========================================================= */

.votera-office-address {

    margin: 0;

    color:
        #b0a7ba;

    font-size:
        13px;

    line-height:
        1.75;

}


/* =========================================================
   SOCIAL
========================================================= */

.votera-social-column > p {

    max-width:
        250px;

    margin:
        0 auto
        18px;

    color:
        #aaa1b4;

    font-size:
        13px;

    line-height:
        1.6;

}


.votera-social-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

}


.votera-social-links a {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 44px;

    margin: 0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius:
        13px;

    background:
        rgba(
            255,
            255,
            255,
            .055
        );

    color:
        #d8c8ff;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;

}


.votera-social-links a:hover {

    transform:
        translateY(
            -2px
        );

    background:
        #6d28d9;

    border-color:
        #8b5cf6;

    color:
        #ffffff;

}


.votera-social-links svg {

    width:
        20px;

    height:
        20px;

    fill:
        currentColor;

    stroke:
        currentColor;

    stroke-width:
        1.7;

}


.votera-social-links
.social-dot {

    fill:
        currentColor;

    stroke:
        none;

}


/* =========================================================
   BOTTOM
========================================================= */

.votera-footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;

    max-width:
        1080px;

    margin:
        48px auto
        0;

    padding-top:
        21px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    text-align:
        center;

}


.votera-footer-bottom p {

    margin: 0;

    color:
        #817888;

    font-size:
        11px;

}


.votera-footer-bottom-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

}


.votera-footer-bottom-links a {

    color:
        #968d9e;

    font-size:
        11px;

}


.votera-footer-bottom-links a:hover {

    color:
        #ffffff;

}


/* =========================================================
   DARK / LIGHT THEME SAFETY
========================================================= */

html[data-theme="light"]
.votera-footer,
html[data-theme="dark"]
.votera-footer {

    background:
        radial-gradient(
            circle at top center,
            rgba(124,58,237,.15),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #110d18,
            #191222
        ) !important;

    color:
        #cfc7d7 !important;

}


html[data-theme="light"]
.votera-footer h4,
html[data-theme="dark"]
.votera-footer h4 {

    color:
        #ffffff !important;

}


html[data-theme="light"]
.votera-footer p,
html[data-theme="dark"]
.votera-footer p {

    color:
        #aaa1b4;

}


/* =========================================================
   TABLET
========================================================= */

@media
(max-width:900px) {

    .votera-footer-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            38px 24px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media
(max-width:600px) {

    .votera-footer {

        margin-top:
            38px;

        padding:
            50px 0
            22px;

    }


    .votera-footer-brand {

        margin-bottom:
            36px;

    }


    .votera-footer-logo img {

        max-width:
            180px;

        max-height:
            66px;

    }


    .votera-footer-summary {

        padding:
            0 8px;

        font-size:
            13px;

    }


    .votera-footer-grid {

        grid-template-columns:
            1fr;

        gap:
            34px;

    }


    .votera-footer-column {

        text-align:
            center;

    }


    .votera-footer-column h4 {

        margin-bottom:
            14px;

        font-size:
            14px;

    }


    .votera-footer-column > a {

        margin:
            9px auto;

    }


    .votera-footer-bottom {

        flex-direction:
            column;

        gap:
            12px;

        margin-top:
            38px;

    }

}

/* =========================================================
   ABOUT PAGE - VOTERA
========================================================= */

.votera-about-intro {

    align-items: center;

}


.votera-about-highlight {

    min-height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/* =========================================================
   MISSION / VISION
========================================================= */

.mission-vision-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 22px;

}


.mission-vision-card {

    padding: 34px;

    border:
        1px solid
        var(--border);

    border-radius:
        24px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);

}


.mission-vision-card h2 {

    margin:
        6px 0
        16px;

    font-size:
        clamp(
            27px,
            3.4vw,
            38px
        );

    line-height:
        1.12;

}


.mission-vision-card p {

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.75;

}


.vision-card {

    background:
        linear-gradient(
            145deg,
            var(--card),
            color-mix(
                in srgb,
                var(--violet) 5%,
                var(--card)
            )
        );

}


/* =========================================================
   SERVICE OFFERINGS
========================================================= */

.service-offer-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 20px;

}


.service-offer-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 28px;

    border:
        1px solid
        var(--border);

    border-radius:
        22px;

    background:
        var(--card);

    box-shadow:
        0 10px 30px
        rgba(17,24,39,.04);

}


.service-offer-icon {

    width: 50px;

    height: 50px;

    display: grid;

    place-items: center;

    margin-bottom: 21px;

    border-radius: 14px;

    background:
        var(--violet3);

    color:
        var(--violet);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .05em;

}


.service-offer-card h3 {

    margin:
        0 0 12px;

    font-size: 21px;

}


.service-offer-card > p {

    margin:
        0 0 17px;

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.7;

}


.service-offer-list {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin:
        5px 0
        18px;

}


.service-offer-list span {

    padding:
        7px 10px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        var(--violet3);

    color:
        var(--violet);

    font-size:
        10px;

    font-weight:
        700;

}


.service-offer-note {

    margin-top:
        auto !important;

}


.service-text-link {

    display: inline-flex;

    width: fit-content;

    margin-top: auto;

    color:
        var(--violet);

    font-size:
        13px;

    font-weight:
        800;

}


/* =========================================================
   CORE VALUES
========================================================= */

.core-values-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap: 16px;

}


.core-value-card {

    min-width: 0;

    padding: 23px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    background:
        var(--card);

    transition:
        transform .18s ease,
        border-color .18s ease;

}


.core-value-card:hover {

    transform:
        translateY(-3px);

    border-color:
        #c8b2f7;

}


.core-value-card > span {

    display: inline-flex;

    margin-bottom: 18px;

    color:
        var(--violet);

    font-size:
        12px;

    font-weight:
        900;

}


.core-value-card h3 {

    margin:
        0 0 9px;

    font-size:
        18px;

}


.core-value-card p {

    margin: 0;

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.65;

}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.mission-vision-card,

html[data-theme="dark"]
.service-offer-card,

html[data-theme="dark"]
.core-value-card {

    background:
        var(--surface) !important;

    color:
        var(--text-primary);

    border-color:
        var(--line) !important;

}


html[data-theme="dark"]
.service-offer-list span {

    background:
        rgba(124,58,237,.16);

    border-color:
        #49395b;

    color:
        #cdb8ff;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .service-offer-grid {

        grid-template-columns:
            1fr;

    }


    .core-values-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    .mission-vision-grid {

        grid-template-columns:
            1fr;

    }


    .mission-vision-card {

        padding: 24px 20px;

        border-radius: 20px;

    }


    .mission-vision-card h2 {

        font-size: 28px;

    }


    .service-offer-card {

        padding: 22px 19px;

        border-radius: 19px;

    }


    .core-values-grid {

        grid-template-columns:
            1fr;

    }


    .core-value-card {

        padding: 20px;

    }

}