/* =============================================================
   Cehdar Conference 2027 — Gold / Green / Black / White Theme
   ============================================================= */

:root {
    --c-gold: #D4AF37;
    --c-gold-light: #F2D779;
    --c-gold-dark: #A9861D;
    --c-green: #0F5132;
    --c-green-light: #1E7A4E;
    --c-green-dark: #093B24;
    --c-black: #111111;
    --c-white: #FFFFFF;
    --c-gray-50: #F7F7F5;
    --c-gray-100: #EFEEE8;
    --c-gray-200: #DCDAD1;
    --c-gray-500: #6C6A5E;
    --c-gray-700: #3B392F;
    --shadow-sm: 0 2px 6px rgba(17,17,17,.08);
    --shadow-md: 0 8px 24px rgba(17,17,17,.12);
    --radius: 10px;
    --font-body: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Playfair Display", "Georgia", serif;
}

/* --- Base --- */
html, body {
    font-family: var(--font-body);
    color: var(--c-black);
    background: var(--c-white);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv02","cv03","cv04","cv11";
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--c-black);
    letter-spacing: -0.015em;
    line-height: 1.15;
}
h4, h5, h6 { font-family: var(--font-body); font-weight: 700; color: var(--c-black); }
p, li, label, input, select, textarea, button, a { font-family: var(--font-body); }

.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: .5rem;
    margin-bottom: 2rem;
}
.section-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 60px; height: 4px;
    background: var(--c-gold);
    border-radius: 2px;
}

/* --- Top bar (contact strip) --- */
.top-bar {
    background: var(--c-black);
    color: var(--c-white);
    font-size: .85rem;
    padding: .4rem 0;
}
.top-bar a { color: var(--c-gold-light); text-decoration: none; }
.top-bar a:hover { color: var(--c-gold); }

/* --- Navbar --- */
.site-navbar {
    background: var(--c-white);
    border-bottom: 3px solid var(--c-gold);
    box-shadow: var(--shadow-sm);
}
.site-navbar .navbar-brand {
    font-weight: 800;
    color: var(--c-green);
    display: flex; align-items: center; gap: .6rem;
}
.site-navbar .navbar-brand .brand-mark {
    display: inline-block;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-green) 0%, var(--c-gold) 100%);
    color: var(--c-white);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900;
}
.site-navbar .nav-link {
    color: var(--c-black) !important;
    font-weight: 600;
    padding: .75rem 1rem !important;
    position: relative;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active { color: var(--c-green) !important; }
.site-navbar .nav-link.active::after {
    content: "";
    position: absolute; left: 1rem; right: 1rem; bottom: .35rem;
    height: 3px; background: var(--c-gold); border-radius: 2px;
}

.lang-switcher .dropdown-toggle {
    background: var(--c-gold);
    color: var(--c-black);
    border: none;
    font-weight: 700;
}
.lang-switcher .dropdown-toggle:hover { background: var(--c-gold-dark); color: var(--c-white); }

/* --- Buttons --- */
.btn-gold {
    background: var(--c-gold);
    color: var(--c-black);
    border: none;
    font-weight: 700;
    padding: .7rem 1.6rem;
    border-radius: var(--radius);
    transition: transform .15s ease, background .15s ease;
}
.btn-gold:hover { background: var(--c-gold-dark); color: var(--c-white); transform: translateY(-1px); }

.btn-green {
    background: var(--c-green);
    color: var(--c-white);
    border: none;
    font-weight: 700;
    padding: .7rem 1.6rem;
    border-radius: var(--radius);
}
.btn-green:hover { background: var(--c-green-dark); color: var(--c-white); }

.btn-outline-gold {
    background: transparent;
    color: var(--c-white);
    border: 2px solid var(--c-gold);
    font-weight: 700;
    padding: .6rem 1.5rem;
    border-radius: var(--radius);
}
.btn-outline-gold:hover { background: var(--c-gold); color: var(--c-black); }

/* --- Hero --- */
.hero {
    position: relative;
    background:
        linear-gradient(135deg, rgba(15,81,50,.92) 0%, rgba(17,17,17,.85) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='%23D4AF37' fill-opacity='0.05'/></svg>");
    color: var(--c-white);
    padding: 6rem 0 5rem;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
    background: radial-gradient(circle at right, rgba(212,175,55,.25), transparent 70%);
    pointer-events: none;
}
.hero h1 {
    color: var(--c-white);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: 1.2rem;
}
.hero .hero-tag {
    display: inline-block;
    background: rgba(212,175,55,.18);
    border: 1px solid var(--c-gold);
    color: var(--c-gold-light);
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .05em;
    margin-bottom: 1.4rem;
}
.hero p.lead {
    color: rgba(255,255,255,.9);
    font-size: 1.15rem;
    max-width: 640px;
    margin-bottom: 2rem;
}
.hero-meta {
    display: flex; gap: 2rem; flex-wrap: wrap;
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255,255,255,.15);
}
.hero-meta .meta {
    display: flex; align-items: center; gap: .6rem;
    color: var(--c-white);
    font-weight: 500;
}
.hero-meta .meta i,
.hero-meta .meta .icon {
    color: var(--c-gold);
    font-size: 1.4rem;
}

/* --- Section utility --- */
.section {
    padding: 5rem 0;
}
.section-alt { background: var(--c-gray-50); }
.section-dark {
    background: var(--c-black);
    color: var(--c-white);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--c-white); }
.section-dark .section-title::after { background: var(--c-gold); }

/* --- Cards --- */
.card-elevated {
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
    height: 100%;
}
.card-elevated:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-gold);
}
.card-elevated .card-body { padding: 1.5rem; }

.speaker-card img,
.speaker-card .avatar {
    width: 110px; height: 110px;
    border-radius: 50%;
    border: 4px solid var(--c-gold);
    object-fit: cover;
    margin-bottom: 1rem;
    background: var(--c-green);
    color: var(--c-white);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 800;
}

/* --- Key dates timeline --- */
.timeline {
    position: relative;
    padding-left: 2rem;
    border-left: 3px solid var(--c-gold);
}
.timeline-item { position: relative; margin-bottom: 2rem; }
.timeline-item::before {
    content: "";
    position: absolute; left: -2.6rem; top: .25rem;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--c-gold);
    border: 3px solid var(--c-white);
    box-shadow: 0 0 0 2px var(--c-gold);
}
.timeline-item.highlight::before { background: var(--c-green); box-shadow: 0 0 0 2px var(--c-green); }
.timeline-date {
    font-weight: 700;
    color: var(--c-green);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .85rem;
}

/* --- Sponsors --- */
.sponsor-tile {
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    transition: border-color .2s;
}
.sponsor-tile:hover { border-color: var(--c-gold); }
.sponsor-tile img {
    max-height: 70px; max-width: 100%;
    object-fit: contain;
    filter: grayscale(20%);
    transition: filter .2s;
}
.sponsor-tile:hover img { filter: grayscale(0%); }
.sponsor-tier {
    display: inline-block;
    background: var(--c-gold);
    color: var(--c-black);
    font-size: .7rem;
    font-weight: 800;
    padding: .15rem .6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .6rem;
}

/* --- Document preview cards --- */
.doc-card {
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
    height: 100%;
    display: flex; flex-direction: column;
}
.doc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.doc-preview {
    background: var(--c-gray-100);
    padding: 2rem;
    text-align: center;
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 3px solid var(--c-gold);
}
.doc-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.doc-preview .doc-icon {
    font-size: 4rem; color: var(--c-green);
}
.doc-card .card-body { padding: 1.25rem; flex-grow: 1; display: flex; flex-direction: column; }
.doc-card .btn-row { margin-top: auto; display: flex; gap: .5rem; }

/* --- Payment method cards --- */
.pay-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.pay-method {
    background: var(--c-white);
    border: 2px solid var(--c-gray-200);
    border-radius: var(--radius);
    padding: 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    font-weight: 700;
}
.pay-method:hover { border-color: var(--c-gold); }
.pay-method.selected {
    border-color: var(--c-green);
    background: linear-gradient(135deg, rgba(15,81,50,.06), rgba(212,175,55,.06));
    color: var(--c-green);
}
.pay-method .pay-logo { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* --- Footer --- */
.site-footer {
    background: var(--c-black);
    color: var(--c-gray-200);
    padding: 3.5rem 0 1.5rem;
    margin-top: 4rem;
}
.site-footer h5 { color: var(--c-gold); font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.site-footer a { color: var(--c-gray-200); text-decoration: none; display: block; padding: .25rem 0; }
.site-footer a:hover { color: var(--c-gold); }
.site-footer .footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.1);
    text-align: center;
    color: var(--c-gray-500);
    font-size: .85rem;
}
.site-footer .footer-bottom .accent { color: var(--c-gold); }

/* --- Utility --- */
.text-gold { color: var(--c-gold) !important; }
.text-green { color: var(--c-green) !important; }
.bg-gold { background: var(--c-gold) !important; }
.bg-green { background: var(--c-green) !important; }
.divider-gold { height: 4px; width: 60px; background: var(--c-gold); border-radius: 2px; margin: 1rem 0; }

/* --- Modal preview --- */
.doc-modal img { max-height: 80vh; }

/* =============================================================
   PREMIUM UTILITY LAYER
   Used by Registrations page & other detailed forms.
   ============================================================= */

:root {
    --primary: var(--c-green);
    --primary-light: var(--c-green-light);
    --primary-dark: var(--c-green-dark);
    --accent: var(--c-gold);
    --accent-light: var(--c-gold-light);
    --accent-dark: var(--c-gold-dark);
    --neutral-50: #FAFAF8;
    --neutral-100: #F3F2EC;
    --neutral-200: #E5E3D8;
    --neutral-300: #CFCCBE;
    --neutral-500: #7A7869;
    --neutral-700: #3B392F;
    --neutral-900: #111111;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --shadow-lg: 0 20px 40px -20px rgba(17,17,17,.25), 0 8px 16px -8px rgba(17,17,17,.15);
    --shadow-xl: 0 30px 60px -30px rgba(17,17,17,.35);
}

/* --- Container --- */
.container-premium {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Section wrappers --- */
.section-premium {
    padding: 4rem 0;
    background: var(--neutral-50);
}
.section-hero {
    position: relative;
    padding: 5rem 0 4rem;
    color: #fff;
    text-align: center;
    overflow: hidden;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.section-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(212,175,55,.35), transparent 60%),
                radial-gradient(circle at 80% 80%, rgba(255,255,255,.15), transparent 55%);
    pointer-events: none;
}
.section-hero-content { position: relative; z-index: 1; }
.section-hero h1 { color:#fff; font-size: clamp(1.8rem, 3vw + 1rem, 3rem); }
.section-hero .lead { color: rgba(255,255,255,.9); }

/* --- Premium cards --- */
.card-premium {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--neutral-200);
    transition: transform .35s ease, box-shadow .35s ease;
}
.card-premium:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.card-premium.p-5 { padding: 3rem; }
.card-premium.p-4 { padding: 2rem; }

/* --- Premium form elements --- */
.label-premium {
    display: flex; align-items: center; gap: .4rem;
    font-weight: 600;
    color: var(--neutral-700);
    font-size: .9rem;
    margin-bottom: .5rem;
    letter-spacing: .01em;
}
.label-premium i { color: var(--accent); font-size: 1rem; }

.input-premium,
.select-premium,
.textarea-premium {
    width: 100%;
    padding: .85rem 1rem;
    font-size: 1rem;
    color: var(--neutral-900);
    background: #fff;
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-md);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    font-family: inherit;
}
.input-premium::placeholder,
.textarea-premium::placeholder { color: var(--neutral-500); }

.input-premium:hover,
.select-premium:hover,
.textarea-premium:hover { border-color: var(--neutral-300); }

.input-premium:focus,
.select-premium:focus,
.textarea-premium:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(212,175,55,.18);
}

.select-premium {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 18px;
    padding-right: 2.75rem;
}

.textarea-premium { resize: vertical; min-height: 120px; }

/* --- Radio / ticket chips --- */
.chip-option {
    display: inline-flex; align-items: center; gap: .5rem;
    cursor: pointer;
    padding: .75rem 1.25rem;
    border: 2px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    background: #fff;
    transition: all .2s ease;
    font-weight: 600;
}
.chip-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip-option input { accent-color: var(--accent); }
.chip-option.is-active,
.chip-option:has(input:checked) {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(212,175,55,.12), rgba(15,81,50,.06));
    color: var(--primary-dark);
}

/* --- Icons --- */
.icon-lg { font-size: 1.5rem; vertical-align: middle; }
.icon-primary { color: var(--primary); }
.icon-accent { color: var(--accent); }

/* --- Buttons (premium variants) --- */
.btn-premium {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .95rem 1.75rem;
    font-weight: 700;
    font-size: 1rem;
    border-radius: var(--radius-md);
    border: none;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    box-shadow: 0 10px 20px -12px rgba(15,81,50,.6);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    cursor: pointer;
}
.btn-premium:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 28px -14px rgba(15,81,50,.7); color:#fff; }
.btn-premium-accent {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color: var(--neutral-900);
    box-shadow: 0 10px 20px -12px rgba(212,175,55,.7);
}
.btn-premium-accent:hover { color: var(--neutral-900); }

.btn-outline-gold {
    border: 2px solid var(--c-gold);
    color: var(--c-gold-dark);
    background: transparent;
    font-weight: 700;
    padding: .65rem 1.4rem;
    border-radius: var(--radius);
    transition: all .2s ease;
}
.btn-outline-gold:hover { background: var(--c-gold); color: var(--c-black); }

/* --- Animations --- */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideInUp { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform: translateY(0); } }
@keyframes slideInDown { from { opacity:0; transform: translateY(-24px); } to { opacity:1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity:0; transform: translateX(-24px); } to { opacity:1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity:0; transform: translateX(24px); } to { opacity:1; transform: translateX(0); } }
@keyframes zoomIn { from { opacity:0; transform: scale(.95); } to { opacity:1; transform: scale(1); } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.animate-fade-in     { animation: fadeIn .7s ease both; }
.animate-slide-in-up { animation: slideInUp .7s ease both; }
.animate-slide-in-down { animation: slideInDown .7s ease both; }
.animate-slide-in-left { animation: slideInLeft .7s ease both; }
.animate-slide-in-right { animation: slideInRight .7s ease both; }
.animate-zoom-in     { animation: zoomIn .5s ease both; }
.animate-float       { animation: floatY 4s ease-in-out infinite; }

.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }
.delay-500 { animation-delay: .5s; }

/* --- Sponsor tier chip / small helpers --- */
.sponsor-tier {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--c-gold);
    color: var(--c-black);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* --- Responsive: Registration grid collapses on tablets --- */
@media (max-width: 992px) {
    .registration-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
    .card-premium.p-5 { padding: 1.5rem; }
    .card-premium.p-4 { padding: 1.25rem; }
    .section-hero { padding: 3.5rem 0 2.5rem; }
    .row-2col { grid-template-columns: 1fr !important; }
}

/* =============================================================
   LANGUAGE SWITCHER (custom dropdown, JS-only, no Bootstrap)
   ============================================================= */
.lang-switcher-wrap { position: relative; display: inline-block; }
.lang-current {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--c-gold);
    color: var(--c-black);
    border: none;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .85rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: background .2s ease, transform .2s ease;
}
.lang-current:hover { background: var(--c-gold-dark); color: #fff; transform: translateY(-1px); }
.lang-flag { font-size: 1.1rem; line-height: 1; }
.lang-menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    min-width: 190px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .2s ease;
    z-index: 1200;
}
.lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .75rem;
    border-radius: 8px;
    color: var(--c-black);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: background .15s ease;
}
.lang-item:hover { background: var(--c-gray-100); color: var(--c-black); }
.lang-item.active { background: linear-gradient(135deg, rgba(212,175,55,.15), rgba(15,81,50,.08)); color: var(--c-green-dark); }
.lang-item .ms-auto { margin-left: auto; color: var(--c-green); }

/* =============================================================
   INVITATION POPUP (badge + modal)
   ============================================================= */
.invite-badge {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 1050;
    display: inline-flex; align-items: center; gap: .5rem;
    background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
    color: var(--c-black);
    border: none;
    padding: .85rem 1.3rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .95rem;
    box-shadow: 0 12px 30px rgba(212,175,55,.45), 0 4px 10px rgba(0,0,0,.2);
    cursor: pointer;
    animation: floatY 3s ease-in-out infinite;
    transition: transform .25s ease, box-shadow .25s ease;
}
.invite-badge:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 40px rgba(212,175,55,.6); }
.invite-badge i { font-size: 1.3rem; }
.invite-badge.minimized .invite-badge-text { display: none; }
.invite-badge.minimized { padding: .85rem; }

/* pulsing ring */
.invite-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 3px solid var(--c-gold);
    animation: invitePulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes invitePulse {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* modal */
.invite-modal {
    position: fixed; inset: 0;
    z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    padding: 1rem;
}
.invite-modal.open { opacity: 1; visibility: visible; }
.invite-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 10, 10, .78);
    backdrop-filter: blur(6px);
}
.invite-card {
    position: relative;
    background: #fff;
    max-width: 560px; width: 100%;
    border-radius: 24px;
    padding: 3rem 2.25rem 2rem;
    text-align: center;
    box-shadow: 0 40px 80px rgba(0,0,0,.5);
    border-top: 6px solid var(--c-gold);
    transform: scale(.85) translateY(20px);
    opacity: 0;
    transition: transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .35s ease;
}
.invite-modal.open .invite-card { transform: scale(1) translateY(0); opacity: 1; }
.invite-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--c-gray-100);
    border: none;
    cursor: pointer;
    color: var(--c-gray-700);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.invite-close:hover { background: var(--c-black); color: #fff; }

.invite-seal {
    width: 84px; height: 84px;
    margin: -3.5rem auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
    color: var(--c-black);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    box-shadow: 0 10px 30px rgba(212,175,55,.5);
    animation: floatY 3s ease-in-out infinite;
}
.invite-eyebrow {
    color: var(--c-gold-dark);
    font-weight: 800;
    letter-spacing: .18em;
    font-size: .75rem;
    margin-bottom: .5rem;
}
.invite-header h2 {
    font-size: 2rem;
    background: linear-gradient(135deg, var(--c-green) 0%, var(--c-gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: .5rem;
}
.invite-header p { color: var(--c-gray-700); margin-bottom: 1.5rem; }

.invite-docs { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.invite-doc {
    display: flex; align-items: center; gap: .8rem;
    padding: .75rem 1rem;
    background: var(--c-gray-50);
    border: 1px solid var(--c-gray-200);
    border-radius: 12px;
    text-align: left;
    text-decoration: none;
    color: var(--c-black);
    transition: all .2s ease;
}
.invite-doc:hover { background: #fff; border-color: var(--c-gold); transform: translateX(3px); color: var(--c-black); }
.invite-doc-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--c-green) 0%, var(--c-green-light) 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.invite-doc-title { font-weight: 700; }
.invite-doc-sub { font-size: .8rem; color: var(--c-gray-500); }

.invite-actions {
    display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
}

/* =============================================================
   SPONSORS PAGE
   ============================================================= */
.hero-tag {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(212,175,55,.15);
    color: var(--c-gold);
    border: 1px solid rgba(212,175,55,.4);
    padding: .35rem .8rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .1em;
    margin-bottom: 1rem;
}

.sponsor-tier-block { margin-bottom: 3rem; }
.sponsor-tier-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.sponsor-tier-header .divider-gold { margin: 0; flex: 1; height: 2px; }

.sponsor-tier {
    display: inline-block;
    padding: .3rem .9rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
}
.tier-platinum { background: linear-gradient(135deg, #b6b6b6, #6b6b6b); }
.tier-gold     { background: linear-gradient(135deg, var(--c-gold), var(--c-gold-dark)); color: var(--c-black); }
.tier-silver   { background: linear-gradient(135deg, #cfd3d6, #8892a0); color: var(--c-black); }
.tier-bronze   { background: linear-gradient(135deg, #d59a72, #8a4f2b); }

.sponsor-grid { display: grid; gap: 1.25rem; }
.tier-grid-platinum { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tier-grid-gold     { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tier-grid-silver   { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tier-grid-bronze   { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.sponsor-tile-premium {
    background: #fff;
    border: 1px solid var(--c-gray-200);
    border-radius: 16px;
    padding: 2rem 1.25rem;
    text-align: center;
    text-decoration: none;
    color: var(--c-black);
    transition: all .3s ease;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 160px;
}
.sponsor-tile-premium:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,.1);
    border-color: var(--c-gold);
    color: var(--c-black);
}
.sponsor-tile-premium img { max-width: 100%; max-height: 90px; object-fit: contain; margin-bottom: .75rem; filter: grayscale(30%); transition: filter .3s ease; }
.sponsor-tile-premium:hover img { filter: grayscale(0%); }
.sponsor-placeholder {
    font-size: 2.5rem;
    color: var(--c-gray-500);
    margin-bottom: .5rem;
}
.sponsor-name { font-weight: 700; font-size: .95rem; }

.empty-sponsors {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.empty-sponsors i { font-size: 4rem; color: var(--c-gold); margin-bottom: 1rem; }

/* Become a sponsor CTA card */
.sponsor-cta {
    position: relative;
    margin-top: 4rem;
    background: linear-gradient(135deg, var(--c-black) 0%, #1a1a1a 60%, var(--c-green-dark) 100%);
    border-radius: 24px;
    padding: 3rem;
    overflow: hidden;
    color: #fff;
}
.sponsor-cta-glow {
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(212,175,55,.35), transparent 60%);
    pointer-events: none;
}
.sponsor-cta-inner {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
}
.sponsor-cta-icon {
    font-size: 5rem;
    color: var(--c-gold);
    animation: floatY 3s ease-in-out infinite;
}
.sponsor-cta-body h2 { color: #fff; font-size: 2rem; margin-bottom: .5rem; }
.sponsor-cta-body p { color: rgba(255,255,255,.85); margin-bottom: 1.5rem; }
.sponsor-cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sponsor-cta-actions .btn-outline-gold { color: var(--c-gold); border-color: var(--c-gold); }
.sponsor-cta-actions .btn-outline-gold:hover { background: var(--c-gold); color: var(--c-black); }
.sponsor-tiers-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    font-size: .85rem;
    color: rgba(255,255,255,.85);
}
.sponsor-tiers-preview > div { display: flex; align-items: center; gap: .5rem; }

@media (max-width: 768px) {
    .sponsor-cta { padding: 2rem 1.25rem; }
    .sponsor-cta-inner { grid-template-columns: 1fr; text-align: center; }
    .sponsor-cta-icon { font-size: 3.5rem; }
    .invite-badge { bottom: 16px; right: 16px; padding: .7rem; }
    .invite-badge .invite-badge-text { display: none; }
    .invite-card { padding: 2.25rem 1.25rem 1.5rem; }
    .invite-header h2 { font-size: 1.5rem; }
}

/* Sponsors "Become" page */
.perk-list { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.perk-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; color: var(--c-gray-700); }
.perk-list i { font-size: 1.15rem; }
.tier-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem;
    margin-top: 1rem;
}
.tier-price {
    background: var(--c-gray-50);
    border: 1px solid var(--c-gray-200);
    border-radius: 12px;
    padding: .75rem;
    text-align: center;
    display: flex; flex-direction: column; gap: .3rem;
}
.tier-price strong { font-size: 1rem; color: var(--c-black); }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.form-grid-2 .span-2 { grid-column: 1 / -1; }
.tier-chips { display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 640px) {
    .form-grid-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Adinkra / Sankofa — Ghanaian symbol accents
   Palette: gold #C9A227 on deep green heroes; used as subtle motifs.
   ========================================================================== */

/* Hero variant with woven Adinkra background */
.adinkra-hero {
    padding: 5rem 0 4rem;
    background: linear-gradient(135deg, #0b3d2e 0%, #14563f 55%, #0b3d2e 100%);
    color: #fff;
    isolation: isolate;
}
.adinkra-hero .adinkra-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .10;
    pointer-events: none;
    /* Repeating Sankofa + Gye Nyame silhouettes, gold on green */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23C9A227' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M25 40c10 0 18 7 18 17s-8 17-18 17-18-7-18-17'/><path d='M7 57l-4-4M7 57l4-4'/><path d='M18 60c3 4 9 5 13 2'/><circle cx='100' cy='95' r='16'/><path d='M100 79v32M84 95h32M88 83l24 24M112 83l-24 24'/></g></svg>");
    background-size: 260px 260px;
    background-repeat: repeat;
}
.adinkra-hero > * { position: relative; z-index: 2; }

/* Subtle divider with a small central symbol between two rule lines */
.adinkra-divider {
    flex: 1;
    height: 24px;
    display: inline-block;
    background:
        linear-gradient(to right, transparent 0, rgba(201,162,39,.55) 40%, rgba(201,162,39,.55) 60%, transparent 100%) center/100% 1px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3'/></svg>") center/24px 24px no-repeat;
}

/* Sidebar card highlighting a symbol */
.adinkra-side {
    border: 1px solid rgba(201,162,39,.35);
    background: linear-gradient(180deg, #fffdf5 0%, #fff 100%);
    border-radius: 14px;
}
.adinkra-symbol { color: #C9A227; line-height: 0; }

/* Circular avatar decoration */
.sc-adinkra {
    position: absolute;
    inset: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    color: rgba(201,162,39,.55);
    pointer-events: none;
}

/* Inline motif accent — floating symbol at top-right of a section */
.adinkra-accent {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 110px;
    height: 110px;
    opacity: .42;
    color: #C9A227;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.25));
}
.adinkra-accent svg { width: 100%; height: 100%; stroke-width: 2.4; display: block; }
.adinkra-accent-lg { width: 160px; height: 160px; opacity: .38; }
.adinkra-accent-tl { top: 1.25rem; right: auto; left: 1.5rem; width: 84px; height: 84px; opacity: .28; }

/* Ensure the accent stays absolutely positioned & sized even when it is a
   direct child of .section-hero (whose ".section-hero > *" rule would
   otherwise force position:relative and drop the inline span's dimensions). */
.hero > .adinkra-accent,
.section-hero > .adinkra-accent {
    position: absolute;
    display: block;
    z-index: 1;
}

/* Sizing for adinkra symbols used inside the Conference History page and
   other content contexts where the partial is not wrapped in .adinkra-accent. */
.adinkra-symbol { width: 52px; height: 52px; }
.adinkra-symbol svg { width: 100%; height: 100%; display: block; }
.edition-adinkra {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 44px;
    height: 44px;
    opacity: .35;
    color: #C9A227;
    pointer-events: none;
}
.edition-adinkra svg { width: 100%; height: 100%; display: block; }
.edition-card { position: relative; }

/* Subtle repeating adinkra background applied to standard heroes so the
   symbols show up on Home, About, Contact, Program, Speakers etc. even
   without the fully-branded .adinkra-hero variant. */
.hero,
.section-hero {
    position: relative;
    isolation: isolate;
}
.hero::before,
.section-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .08;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23C9A227' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M30 45c10 0 18 7 18 17s-8 17-18 17-18-7-18-17'/><path d='M12 62l-4-4M12 62l4-4'/><path d='M23 65c3 4 9 5 13 2'/><circle cx='130' cy='120' r='16'/><path d='M130 104v32M114 120h32'/><circle cx='95' cy='40' r='4'/><circle cx='95' cy='40' r='11'/><circle cx='95' cy='40' r='18'/></g></svg>");
    background-size: 300px 300px;
    background-repeat: repeat;
}
.hero > *,
.section-hero > * { position: relative; z-index: 2; }

/* Symbol strip: a full-width thin band used above sections */
.adinkra-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1.25rem;
    color: #C9A227;
}
.adinkra-strip::before,
.adinkra-strip::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(201,162,39,.5), transparent);
}
.adinkra-strip .adinkra-strip-symbol {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
