@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --ink: #0f172a;
  --text: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --soft: #f8fafc;
  --blue-soft: #eef2ff;
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --cyan: #06b6d4;
  --green: #14b8a6;
  --white: #fff;
  --shadow-sm: 0 10px 30px rgba(15, 23, 42, .07);
  --shadow-lg: 0 32px 90px rgba(51, 65, 85, .15);
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
button, input, textarea, select { font: inherit; }
.container { width: min(1220px, calc(100% - 40px)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(226, 232, 240, .8); background: rgba(255,255,255,.88); backdrop-filter: blur(20px); }
.nav-wrap { min-height: 82px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; }
.brand { display: flex; align-items: center; text-decoration: none; min-width: 260px; }
.brand img { width: 118px; height: 48px; object-fit: contain; object-position: left center; }
.brand-divider { width: 1px; height: 28px; background: var(--line); margin: 0 14px; }
.brand-label { font-size: 12px; line-height: 1.25; font-weight: 700; color: var(--muted); max-width: 76px; }
nav { display: flex; justify-content: center; gap: 30px; }
nav a { position: relative; text-decoration: none; font-size: 14px; font-weight: 600; color: #475569; }
nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -9px; height: 2px; background: var(--primary); transition: right .2s ease; }
nav a:hover::after { right: 0; }
.nav-cta, .primary-button, .secondary-button, .final-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-weight: 700; border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.nav-cta { padding: 12px 17px; background: var(--ink); color: #fff; font-size: 13px; }
.nav-cta:hover, .primary-button:hover, .secondary-button:hover, .final-cta a:hover { transform: translateY(-2px); }

.hero-section { position: relative; overflow: hidden; padding: 86px 0 0; padding-bottom: 100px; background: linear-gradient(180deg, #fff 0%, #fbfdff 63%, #f8fafc 100%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-glow-one { width: 530px; height: 530px; right: -170px; top: -160px; background: radial-gradient(circle, rgba(165,243,252,.55), rgba(165,243,252,0) 68%); }
.hero-glow-two { width: 520px; height: 520px; left: -230px; bottom: -180px; background: radial-gradient(circle, rgba(199,210,254,.55), rgba(199,210,254,0) 68%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr); gap: 72px; align-items: center; }
.hero-copy { padding-bottom: 72px; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800; color: var(--primary); }
.eyebrow-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 6px rgba(6,182,212,.11); }
.hero-copy h1 { margin: 25px 0 24px; font-family: 'Manrope', sans-serif; font-size: clamp(52px, 6vw, 78px); line-height: .98; letter-spacing: -.055em; }
.hero-copy h1 span { background: linear-gradient(90deg, var(--primary), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy > p { max-width: 680px; margin: 0; font-size: 19px; line-height: 1.7; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.primary-button, .secondary-button { min-height: 54px; padding: 0 22px; }
.primary-button { background: linear-gradient(135deg, var(--primary), #6366f1); color: #fff; box-shadow: 0 18px 38px rgba(79,70,229,.23); }
.primary-button:hover { box-shadow: 0 22px 44px rgba(79,70,229,.3); }
.secondary-button { background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }
.hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.avatar-stack { display: flex; padding-left: 10px; }
.avatar-stack span { width: 38px; height: 38px; display: grid; place-items: center; margin-left: -10px; border: 3px solid #fff; border-radius: 50%; color: #fff; font-weight: 800; font-size: 13px; }
.avatar-stack span:nth-child(1) { background: var(--primary); }
.avatar-stack span:nth-child(2) { background: var(--cyan); }
.avatar-stack span:nth-child(3) { background: var(--green); }
.hero-trust p { margin: 0; color: var(--muted); font-size: 13px; }
.hero-trust strong { color: var(--ink); }

.hero-panel { position: relative; padding: 18px; border: 1px solid rgba(226,232,240,.95); border-radius: 32px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-lg); transform: rotate(1.2deg); }
.hero-panel::before { content: ''; position: absolute; inset: 24px -18px -18px 24px; z-index: -1; border-radius: 32px; background: linear-gradient(135deg, rgba(199,210,254,.52), rgba(165,243,252,.48)); }
.hero-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 2px 4px 15px; }
.hero-panel-top > div { display: grid; gap: 4px; }
.hero-panel-top span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.hero-panel-top strong { font-family: 'Manrope'; font-size: 18px; }
.hero-panel-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--blue-soft); color: var(--primary) !important; }
.hero-panel > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: 20px; background: var(--soft); }
.hero-panel-info { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 4px 14px; }
.hero-panel-info > div { display: flex; align-items: center; gap: 12px; color: var(--primary); }
.hero-panel-info > div span { display: grid; gap: 3px; color: var(--ink); text-transform: capitalize; font-size: 13px; font-weight: 700; }
.hero-panel-info small { color: var(--muted); font-weight: 500; }
.hero-panel-info > strong { min-width: 90px; text-align: right; font-size: 28px; color: var(--primary); }
.hero-panel-info > strong small { display: block; color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 12px; border-radius: 18px; background: #f8fafc; }
.countdown div { display: grid; place-items: center; padding: 10px 4px; border-radius: 12px; background: #fff; border: 1px solid #edf2f7; }
.countdown strong { font-family: 'Manrope'; font-size: 22px; }
.countdown span { margin-top: 2px; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.stats-strip { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); transform: translateY(42px); padding: 10px; border: 1px solid var(--line); border-radius: 25px; background: #fff; box-shadow: var(--shadow-lg); }
.stats-strip > div { min-height: 90px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 14px; padding: 10px 24px; border-right: 1px solid var(--line); }
.stats-strip > div:last-child { border-right: 0; }
.stat-icon { grid-row: 1/3; width: 42px; height: 42px; display: grid; place-items: center; align-self: center; border-radius: 14px; background: var(--blue-soft); color: var(--primary); }
.stats-strip strong { align-self: end; font-family: 'Manrope'; font-size: 24px; line-height: 1; }
.stats-strip > div > span:last-child { align-self: start; margin-top: 7px; font-size: 11px; color: var(--muted); }

.section { padding: 118px 0; }
.section-heading { margin-bottom: 44px; }
.section-heading h2, .concept-copy h2, .final-cta h2 { margin: 12px 0 16px; font-family: 'Manrope'; font-size: clamp(38px, 4.5vw, 58px); line-height: 1.05; letter-spacing: -.045em; }
.section-heading p, .concept-copy > p { max-width: 720px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.split-heading { display: grid; grid-template-columns: 1fr 390px; gap: 70px; align-items: end; }
.heading-note { display: flex; gap: 15px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--soft); }
.heading-note > span { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
.heading-note p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.55; }
.upcoming-section { padding-top: 132px; background: #fff; }
.upcoming-list { display: grid; gap: 30px; }
.upcoming-card { --campaign-accent: var(--primary); overflow: hidden; display: grid; grid-template-columns: minmax(360px, .84fr) minmax(0, 1.16fr); border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; box-shadow: 0 22px 70px rgba(15,23,42,.08); }
.upcoming-card.featured { border-color: color-mix(in srgb, var(--campaign-accent) 25%, #e2e8f0); box-shadow: 0 28px 80px color-mix(in srgb, var(--campaign-accent) 14%, transparent); }
.campaign-image-wrap { position: relative; min-height: 100%; padding: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--campaign-accent) 9%, #fff), #f8fafc); }
.campaign-image { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; border-radius: 24px; }
.image-topline { position: absolute; top: 32px; left: 32px; right: 32px; display: flex; justify-content: space-between; gap: 12px; }
.live-badge, .places-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgba(15,23,42,.11); font-size: 11px; font-weight: 800; }
.live-badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--campaign-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--campaign-accent) 15%, transparent); }
.places-badge { color: var(--campaign-accent); }
.campaign-content { display: grid; grid-template-columns: 76px 1fr; gap: 24px; padding: 42px 42px 36px; }
.campaign-date-block { width: 68px; height: 78px; display: grid; place-items: center; align-content: center; border-radius: 20px; background: color-mix(in srgb, var(--campaign-accent) 10%, #fff); color: var(--campaign-accent); }
.campaign-date-block strong { font-family: 'Manrope'; font-size: 30px; line-height: 1; }
.campaign-date-block span { margin-top: 3px; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.campaign-kicker { display: flex; align-items: center; gap: 8px; color: var(--campaign-accent); text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.campaign-main h3 { margin: 12px 0 12px; font-family: 'Manrope'; font-size: clamp(30px, 3vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.campaign-main > p { margin: 0; color: var(--muted); line-height: 1.65; }
.campaign-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; }
.campaign-meta span { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 12px; text-transform: capitalize; }
.campaign-meta .ui-icon { color: var(--campaign-accent); }
.streamer-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.streamer-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.streamer-section-title > span { font-weight: 800; font-size: 14px; }
.streamer-section-title small { color: var(--muted); font-size: 11px; }
.streamer-list { display: flex; flex-wrap: wrap; gap: 9px; }
.streamer-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 5px 10px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; color: var(--text); font-size: 12px; font-weight: 700; transition: border .2s ease, transform .2s ease, box-shadow .2s ease; }
.streamer-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--campaign-accent) 45%, var(--line)); box-shadow: var(--shadow-sm); }
.streamer-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--campaign-accent) 12%, #fff); color: var(--campaign-accent); font-size: 11px; font-weight: 800; }
.streamer-chip .ui-icon { color: #9146ff; }
.empty-streamers { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 14px; border-radius: 13px; background: var(--soft); color: var(--muted); font-size: 12px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--campaign-accent); animation: pulse 1.7s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--campaign-accent) 25%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }

.concept-section { overflow: hidden; background: linear-gradient(180deg, #f8fafc, #fff); }
.concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.concept-visual { position: relative; min-height: 540px; }
.concept-visual::before { content: ''; position: absolute; inset: 60px 40px 50px 60px; border-radius: 50%; background: radial-gradient(circle, rgba(199,210,254,.48), rgba(165,243,252,.18) 48%, transparent 70%); }
.concept-card { position: absolute; z-index: 2; width: 245px; padding: 20px; border: 1px solid rgba(226,232,240,.9); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-lg); }
.concept-card span { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 11px; background: var(--blue-soft); color: var(--primary); font-family: 'Manrope'; font-size: 12px; font-weight: 800; }
.concept-card strong { display: block; font-family: 'Manrope'; font-size: 16px; }
.concept-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.concept-card-a { left: 0; top: 20px; transform: rotate(-30deg); }
.concept-card-b { right: 0; top: 0px; transform: rotate(20deg); }
.concept-card-c { left: 65px; bottom: 5px; transform: rotate(2deg); }
.visual-center { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 190px; height: 190px; display: grid; place-items: center; align-content: center; border: 14px solid #fff; border-radius: 50%; background: linear-gradient(145deg, var(--primary), var(--cyan)); color: #fff; box-shadow: 0 28px 70px rgba(79,70,229,.25); }
.visual-center span { text-align: center; font-family: 'Manrope'; font-size: 20px; line-height: 1.15; }
.concept-copy > p { margin-bottom: 29px; }
.concept-points { display: grid; gap: 14px; }
.concept-points > div { display: flex; gap: 14px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.concept-points > div > span { flex: 0 0 auto; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; background: #ecfdf5; color: #0f766e; }
.concept-points p { display: grid; gap: 3px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.concept-points strong { color: var(--ink); font-size: 14px; }

.past-section { background: #fff; }
.centered-heading { display: grid; justify-items: center; text-align: center; }
.centered-heading p { margin-inline: auto; }
.past-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.past-card { --campaign-accent: var(--primary); overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.past-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.past-visual { position: relative; padding: 10px; background: color-mix(in srgb, var(--campaign-accent) 8%, #fff); }
.past-visual img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: 18px; }
.past-status { position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 999px; background: rgba(255,255,255,.93); color: #0f766e; box-shadow: 0 8px 20px rgba(15,23,42,.11); font-size: 10px; font-weight: 800; }
.past-body { padding: 23px; }
.past-association { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.past-association img, .association-mark { width: 34px; height: 34px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.association-mark { display: grid; place-items: center; background: color-mix(in srgb, var(--campaign-accent) 12%, #fff); color: var(--campaign-accent); font-weight: 800; }
.past-body h3 { margin: 17px 0 10px; font-family: 'Manrope'; font-size: 24px; line-height: 1.15; letter-spacing: -.025em; }
.past-body > p { min-height: 66px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.past-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 21px; }
.past-numbers > div { padding: 14px; border-radius: 15px; background: var(--soft); }
.past-numbers strong { display: block; font-family: 'Manrope'; font-size: 21px; color: var(--campaign-accent); }
.past-numbers span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.past-date { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-transform: capitalize; }

.final-cta { padding: 30px 0 88px; background: #fff; }
.final-cta-inner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 52px 58px; border-radius: 34px; background: linear-gradient(135deg, #312e81 0%, #4338ca 40%, #0891b2 100%); color: #fff; }
.final-cta-inner::before { content: ''; position: absolute; width: 420px; height: 420px; right: -150px; top: -230px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.03), 0 0 0 100px rgba(255,255,255,.025); }
.section-kicker.light { color: #a5f3fc; }
.final-cta h2 { max-width: 760px; margin-bottom: 10px; font-size: clamp(34px, 4vw, 50px); }
.final-cta p { max-width: 700px; margin: 0; color: rgba(255,255,255,.75); line-height: 1.6; }
.final-cta a { position: relative; z-index: 2; flex: 0 0 auto; min-height: 54px; padding: 0 22px; background: #fff; color: var(--primary-dark); }

footer { padding: 62px 0 24px; background: #0f172a; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.55fr repeat(3, 1fr); gap: 55px; }
.footer-brand img { width: 132px; height: 56px; object-fit: contain; object-position: left; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 340px; margin: 17px 0 0; color: #94a3b8; font-size: 13px; line-height: 1.65; }
.footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 11px; }
.footer-grid strong { margin-bottom: 6px; color: #e2e8f0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.footer-grid a { width: fit-content; color: #94a3b8; text-decoration: none; font-size: 13px; }
.footer-grid a:hover { color: #fff; }
.admin-link { opacity: .6; }
.footer-bottom { display: flex; justify-content: space-between; gap: 25px; margin-top: 52px; padding-top: 22px; border-top: 1px solid #253047; color: #64748b; font-size: 11px; }

.state-page { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: #f8fafc; }
.state-card { width: min(470px, 100%); padding: 40px; border: 1px solid var(--line); border-radius: 28px; background: #fff; text-align: center; box-shadow: var(--shadow-lg); }
.brand-orb { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 18px; background: linear-gradient(135deg, var(--primary), var(--cyan)); color: #fff; font-weight: 800; font-size: 22px; }
.state-card h1 { margin: 0 0 10px; font-family: 'Manrope'; font-size: 28px; }
.state-card p { color: var(--muted); }
.state-card button { min-height: 46px; padding: 0 20px; border: 0; border-radius: 13px; background: var(--ink); color: #fff; font-weight: 700; cursor: pointer; }
.loader-orbit { position: relative; width: 70px; height: 70px; animation: orbit 1.1s linear infinite; }
.loader-orbit span { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); }
.loader-orbit span:nth-child(1) { top: 0; left: 26px; }.loader-orbit span:nth-child(2) { right: 0; bottom: 8px; background: var(--cyan); }.loader-orbit span:nth-child(3) { left: 0; bottom: 8px; background: var(--green); }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 1080px) {
  .nav-wrap { grid-template-columns: auto 1fr; }.nav-wrap nav { display: none; }.nav-cta { justify-self: end; }
  .hero-grid { grid-template-columns: 1fr 430px; gap: 36px; }.hero-copy h1 { font-size: 59px; }
  .stats-strip > div { padding-inline: 14px; }
  .upcoming-card { grid-template-columns: 42% 58%; }.campaign-content { grid-template-columns: 62px 1fr; gap: 16px; padding: 32px 28px; }
  .campaign-image { min-height: 390px; }
  .concept-grid { gap: 50px; }
  .past-grid { gap: 16px; }.past-body { padding: 19px; }
}

@media (max-width: 880px) {
  .hero-section { padding-top: 60px; padding-bottom: 100px; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { padding-bottom: 0; }.hero-panel { max-width: 620px; margin: 0 auto; transform: none; }
  .stats-strip { grid-template-columns: 1fr 1fr; }.stats-strip > div:nth-child(2) { border-right: 0; }.stats-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .split-heading { grid-template-columns: 1fr; gap: 22px; }.heading-note { max-width: 500px; }
  .upcoming-card { grid-template-columns: 1fr; }.campaign-image { min-height: auto; aspect-ratio: 16/9; }.campaign-content { grid-template-columns: 70px 1fr; }
  .concept-grid { grid-template-columns: 1fr; }.concept-visual { order: 2; max-width: 620px; width: 100%; margin: 0 auto; }
  .past-grid { grid-template-columns: 1fr 1fr; }.past-body > p { min-height: auto; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }.footer-grid > div:last-child { display: none; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 24px, 1220px); }
  .site-header { position: relative; }.nav-wrap { min-height: 70px; }.brand { min-width: 0; }.brand img { width: 100px; }.brand-label,.brand-divider { display: none; }.nav-cta { padding: 10px 12px; font-size: 0; }.nav-cta .ui-icon { margin: 0; }
  .hero-section { padding-top: 44px; padding-bottom: 100px; }.hero-copy h1 { font-size: 45px; }.hero-copy > p { font-size: 16px; }.hero-actions { display: grid; }.primary-button,.secondary-button { width: 100%; }
  .hero-panel { padding: 11px; border-radius: 24px; }.hero-panel::before { display: none; }.hero-panel-top { padding-inline: 6px; }.hero-panel-info { align-items: flex-start; }.hero-panel-info > strong { font-size: 23px; }.countdown { padding: 7px; gap: 5px; }.countdown strong { font-size: 18px; }.countdown span { font-size: 7px; }
  .stats-strip { transform: translateY(26px); border-radius: 20px; }.stats-strip > div { min-height: 82px; grid-template-columns: 36px 1fr; padding: 8px 10px; column-gap: 10px; }.stat-icon { width: 36px; height: 36px; }.stats-strip strong { font-size: 19px; }.stats-strip > div > span:last-child { font-size: 9px; }
  .section { padding: 84px 0; }.upcoming-section { padding-top: 96px; }.section-heading h2,.concept-copy h2 { font-size: 38px; }.section-heading p,.concept-copy > p { font-size: 15px; }
  .upcoming-card { border-radius: 25px; }.campaign-image-wrap { padding: 10px; }.campaign-image { border-radius: 18px; }.image-topline { top: 20px; left: 20px; right: 20px; }.places-badge { max-width: 130px; text-align: center; justify-content: center; }
  .campaign-content { grid-template-columns: 1fr; padding: 25px 20px 23px; }.campaign-date-block { width: 62px; height: 68px; }.campaign-main h3 { font-size: 31px; }.campaign-meta { display: grid; }.streamer-section-title { display: grid; gap: 4px; }
  .concept-visual { min-height: 580px; }.concept-card { width: 215px; }.concept-card-a { left: 0; }.concept-card-b { right: 0; }.concept-card-c { left: 30px; }.visual-center { width: 160px; height: 160px; }
  .past-grid { grid-template-columns: 1fr; }.past-card { max-width: 500px; width: 100%; margin: 0 auto; }
  .final-cta-inner { display: grid; padding: 36px 25px; border-radius: 26px; }.final-cta a { width: 100%; }.final-cta h2 { font-size: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }.footer-brand { grid-column: 1 / -1; }.footer-grid > div:last-child { display: grid; }.footer-bottom { display: grid; }
}

@media (max-width: 410px) {
  .hero-copy h1 { font-size: 39px; }.hero-trust { align-items: flex-start; }.stats-strip { grid-template-columns: 1fr; }.stats-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }.stats-strip > div:last-child { border-bottom: 0; }
  .concept-card { width: 190px; padding: 16px; }.concept-card-b { top: 160px; }.visual-center { width: 135px; height: 135px; }.visual-center span { font-size: 16px; }
  .footer-grid { grid-template-columns: 1fr; }.footer-brand { grid-column: auto; }
}

/* V2 — formulaire d'inscription, chiffres stabilisés et footer ORIAS */
.ui-icon { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; line-height: 1; font-style: normal; font-weight: 900; flex: 0 0 auto; }
.ui-icon-users { font-size: .72em !important; }
.ui-icon-twitch { width: 20px; height: 20px; border-radius: 6px; background: #9146ff; color: #fff; font-size: 10px !important; }
.hero-grid { align-items: start; grid-template-columns: minmax(0, 1.03fr) minmax(430px, .97fr); }
.hero-copy { padding-top: 38px; }

.signup-card { position: relative; z-index: 3; width: 100%; padding: 26px; border: 1px solid rgba(226,232,240,.98); border-top: 5px solid var(--primary); border-radius: 28px; background: rgba(255,255,255,.97); box-shadow: var(--shadow-lg); scroll-margin-top: 102px; }
.signup-card h2 { margin: 7px 0 7px; font-family: 'Manrope',sans-serif; font-size: 31px; letter-spacing: -.035em; }
.form-eyebrow { display: inline-flex; align-items: center; color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.form-intro { margin: 0 0 18px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.form-loading { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 24px; border-radius: 25px; background: rgba(255,255,255,.94); color: var(--primary); font-weight: 800; }
.form-field { display: grid; gap: 7px; margin-top: 12px; }
.form-field > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); font-size: 12px; font-weight: 800; }
.form-field input, .form-field select { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid #dbe3ed; border-radius: 12px; background: #fff; color: var(--ink); outline: 0; font-size: 13px; transition: border .2s ease, box-shadow .2s ease; }
.form-field input:focus, .form-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79,70,229,.09); }
.form-field small { color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.form-field small.field-error { color: #b91c1c; font-weight: 700; }
.event-choice { margin-top: 16px; padding: 13px; border: 1px solid #dce5ff; border-radius: 15px; background: #f7f8ff; }
.event-choice select { border-color: #cbd5ff; font-weight: 700; }
.selected-event-date { display: flex; align-items: center; gap: 6px; color: var(--primary-dark) !important; font-weight: 700; text-transform: capitalize; }
.form-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.input-check-wrap { position: relative; }
.input-check-wrap input { padding-right: 40px; }
.input-check-wrap b { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 11px; }
.input-check-wrap b.valid { background: #10b981; }
.show-password { padding: 0; border: 0; background: transparent; color: var(--primary); cursor: pointer; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.avatar-picker { width: 100%; min-height: 64px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 11px; padding: 9px 11px; border: 1px dashed #cbd5e1; border-radius: 13px; background: #fafcff; color: var(--ink); text-align: left; cursor: pointer; }
.avatar-picker img, .avatar-placeholder { width: 44px; height: 44px; display: grid; place-items: center; object-fit: cover; border-radius: 50%; background: linear-gradient(135deg,#e0e7ff,#cffafe); color: var(--primary); font-size: 24px; }
.avatar-picker > span:nth-child(2) { display: grid; gap: 2px; }
.avatar-picker strong { font-size: 12px; }
.avatar-picker small { font-size: 9px; }
.avatar-picker > b { color: var(--primary); font-size: 10px; }
.platform-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.platform-row button { min-height: 36px; border: 1px solid #dbe3ed; border-radius: 10px; background: #fff; color: var(--text); cursor: pointer; font-size: 11px; font-weight: 800; }
.platform-row button.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.form-message { margin-top: 13px; padding: 10px 12px; border: 1px solid #fcd34d; border-radius: 12px; background: #fffbeb; color: #92400e; font-size: 10px; line-height: 1.5; }
.form-message.error { border-color: #fecaca; background: #fff1f2; color: #991b1b; }
.form-message a { font-weight: 800; }
.signup-submit { width: 100%; min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 15px; border: 0; border-radius: 13px; background: linear-gradient(135deg,var(--primary),#6366f1); color: #fff; box-shadow: 0 15px 30px rgba(79,70,229,.22); cursor: pointer; font-size: 13px; font-weight: 800; }
.signup-submit:disabled { opacity: .46; cursor: not-allowed; box-shadow: none; }
.terms { margin: 9px 0 0; color: #94a3b8; text-align: center; font-size: 9px; }
.terms a { color: var(--primary); }
.signup-success { min-height: 500px; display: grid; place-items: center; align-content: center; text-align: center; }
.signup-success .success-mark { width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 50%; background: #ecfdf5; color: #059669; font-size: 31px; font-weight: 900; }
.signup-success p { max-width: 390px; margin: 8px auto; color: var(--muted); line-height: 1.6; }
.signup-success > a { margin-top: 14px; padding: 13px 17px; border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 800; }
.no-open-event { min-height: 350px; display: grid; align-content: center; text-align: center; }

.stats-strip > div { min-width: 0; }
.stats-strip .stat-value { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.stats-strip .stat-label { display: block; min-width: 0; white-space: normal; line-height: 1.25; }
.past-numbers > div { min-width: 0; }
.past-numbers strong { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: clamp(17px,1.8vw,21px); letter-spacing: -.025em; }

.campaign-register-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 22px; padding: 0 18px; border: 0; border-radius: 13px; background: var(--campaign-accent); color: #fff; box-shadow: 0 13px 28px color-mix(in srgb,var(--campaign-accent) 24%,transparent); cursor: pointer; font-size: 12px; font-weight: 800; }
.campaign-register-button:hover:not(:disabled) { transform: translateY(-2px); }
.campaign-register-button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.campaign-meta .ui-icon { color: var(--campaign-accent); }

.footer-grid { grid-template-columns: 1.55fr repeat(3,1fr); }
.ifp-block { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 22px !important; margin-top: 22px; padding-top: 24px; border-top: 1px solid #253047; }
.ifp-block img { width: 100px; height: 82px; object-fit: contain; flex: 0 0 auto; border-radius: 8px; background: #fff; padding: 6px; }
.ifp-block p { max-width: 920px; margin: 0; color: #94a3b8; font-size: 11px; line-height: 1.7; }
.ifp-block strong { color: #e2e8f0; font-size: inherit; letter-spacing: normal; text-transform: none; }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr 440px; gap: 34px; }
  .hero-copy h1 { font-size: 56px; }
  .signup-card { padding: 22px; }
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 0; padding-bottom: 8px; }
  .signup-card { max-width: 650px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .nav-cta { font-size: 11px; padding-inline: 13px; }
  .hero-section { padding-top: 38px; }
  .signup-card { padding: 19px 15px; border-radius: 22px; }
  .signup-card::before { display: none; }
  .form-two-cols { grid-template-columns: 1fr; gap: 0; }
  .stats-strip .stat-value { font-size: 18px; }
  .campaign-register-button { width: 100%; }
  .ifp-block { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   STAREA LIFE — DISCORD PARTICIPATION
   VERSION CLAIRE / CARITATIVE
   Remplace TOUT l'ancien CSS Discord
============================================================ */

.discord-gateway {
    --life-purple: #6d5ce7;
    --life-purple-2: #8b72f6;
    --life-purple-3: #a58cff;

    --life-pink: #ff79ab;
    --life-pink-soft: #ffe6f0;

    --life-blue-soft: #edf1ff;
    --life-lavender: #f1eeff;

    --life-text: #17172b;
    --life-muted: #6f7085;

    position: relative !important;
    isolation: isolate;
    overflow: hidden;

    min-height: 680px;

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

    padding: 48px 38px !important;

    border-radius: 34px !important;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(141, 115, 246, .16),
            transparent 36%
        ),
        radial-gradient(
            circle at 5% 85%,
            rgba(255, 121, 171, .12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #faf9ff 45%,
            #f5f2ff 100%
        ) !important;

    border:
        1px solid rgba(109, 92, 231, .16) !important;

    box-shadow:
        0 30px 80px rgba(55, 45, 110, .10),
        0 8px 25px rgba(55, 45, 110, .05),
        inset 0 1px 0 #ffffff;

    animation:
        lifeCardBreath 4s ease-in-out infinite;
}


/* ============================================================
   FOND ANIMÉ TRÈS LÉGER
============================================================ */

.discord-gateway::before {
    content: "";

    position: absolute;

    width: 900px;
    height: 900px;

    top: -500px;
    right: -450px;

    z-index: 0;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            rgba(109, 92, 231, .10),
            rgba(255, 121, 171, .08),
            rgba(109, 92, 231, .03),
            rgba(109, 92, 231, .10)
        );

    filter: blur(10px);

    animation:
        lifeBackgroundRotate 18s linear infinite;

    pointer-events: none;
}


.discord-gateway::after {
    content: "";

    position: absolute;

    width: 150%;
    height: 100px;

    left: -60%;
    top: -150px;

    z-index: 1;

    transform: rotate(-10deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.85),
            transparent
        );

    animation:
        lifeScan 7s ease-in-out infinite;

    pointer-events: none;
}


/* ============================================================
   CONTENU
============================================================ */

.discord-content {
    position: relative;

    z-index: 10;

    width: 100%;

    text-align: center;
}


/* ============================================================
   HALOS
============================================================ */

.discord-glow {
    position: absolute;

    z-index: 0;

    border-radius: 50%;

    filter: blur(65px);

    pointer-events: none;
}


.discord-glow-1 {
    width: 330px;
    height: 330px;

    top: -130px;
    right: -100px;

    background:
        rgba(124, 100, 240, .18);

    animation:
        lifeGlowOne 6s ease-in-out infinite alternate;
}


.discord-glow-2 {
    width: 280px;
    height: 280px;

    bottom: -100px;
    left: -100px;

    background:
        rgba(255, 121, 171, .15);

    animation:
        lifeGlowTwo 7s ease-in-out infinite alternate;
}


/* ============================================================
   PETITES ÉTOILES
============================================================ */

.discord-particle {
    position: absolute;

    z-index: 3;

    color:
        rgba(109, 92, 231, .42) !important;

    font-size: 17px;

    pointer-events: none;

    text-shadow:
        0 5px 15px rgba(109, 92, 231, .18);

    animation:
        lifeParticle 4s ease-in-out infinite;
}


.discord-particle.p1 {
    top: 12%;
    left: 8%;
}


.discord-particle.p2 {
    top: 18%;
    right: 9%;

    animation-delay: .7s;
}


.discord-particle.p3 {
    bottom: 15%;
    left: 10%;

    color:
        rgba(255, 121, 171, .50) !important;

    animation-delay: 1.2s;
}


.discord-particle.p4 {
    bottom: 10%;
    right: 10%;

    animation-delay: .3s;
}


/* ============================================================
   BADGE PARTICIPATION
============================================================ */

.discord-live-badge {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 17px;

    margin-bottom: 26px;

    border-radius: 999px;

    border:
        1px solid rgba(109, 92, 231, .18);

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

    backdrop-filter:
        blur(10px);

    color:
        #6655d6 !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .15em;

    box-shadow:
        0 8px 25px rgba(78, 62, 160, .08);

    animation:
        lifeBadgeFloat 3s ease-in-out infinite;
}


.discord-live-dot {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--life-pink);

    animation:
        lifeDotPulse 1.4s ease-out infinite;
}


/* ============================================================
   ICÔNE
============================================================ */

.discord-icon-wrap {
    position: relative;

    width: 100px;
    height: 100px;

    margin:
        0 auto 28px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.discord-icon {
    position: relative;

    z-index: 5;

    width: 66px;
    height: 66px;

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

    border-radius: 22px;

    color:
        #ffffff !important;

    font-size:
        28px !important;

    background:
        linear-gradient(
            135deg,
            #7462e8,
            #927bf5
        );

    box-shadow:
        0 18px 38px rgba(109, 92, 231, .24),
        inset 0 1px 0 rgba(255,255,255,.35);

    animation:
        lifeIconFloat 2.7s ease-in-out infinite;
}


/* ============================================================
   ORBITES
============================================================ */

.discord-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.discord-orbit.orbit-1 {
    inset: 5px;

    border:
        1px solid rgba(109,92,231,.22);

    animation:
        lifeOrbit 5s linear infinite;
}


.discord-orbit.orbit-1::after {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    top: 4px;
    left: 18px;

    border-radius: 50%;

    background:
        var(--life-pink);

    box-shadow:
        0 0 0 5px rgba(255,121,171,.10);
}


.discord-orbit.orbit-2 {
    inset: -5px;

    border:
        1px dashed rgba(109,92,231,.14);

    animation:
        lifeOrbitReverse 9s linear infinite;
}


/* ============================================================
   PETIT TITRE
============================================================ */

.discord-gateway .form-eyebrow {
    display: block !important;

    margin-bottom:
        12px !important;

    color:
        #6d5ce7 !important;

    font-size:
        11px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .18em !important;

    text-transform:
        uppercase;
}


/* ============================================================
   TITRE PRINCIPAL
============================================================ */

.discord-gateway h2 {
    max-width:
        590px !important;

    margin:
        0 auto 18px !important;

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

    font-size:
        clamp(34px, 4vw, 52px) !important;

    font-weight:
        900 !important;

    line-height:
        1.03 !important;

    letter-spacing:
        -.045em !important;

    text-shadow:
        none !important;
}


.discord-gateway h2 span {
    display:
        inline-block;

    color:
        transparent !important;

    background:
        linear-gradient(
            90deg,
            #6654df,
            #8e6ff1,
            #e3689a,
            #6654df
        );

    background-size:
        250% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    animation:
        lifeTextGradient 4s linear infinite;
}


/* ============================================================
   INTRO
============================================================ */

.discord-intro {
    max-width:
        575px;

    margin:
        0 auto 30px !important;

    color:
        var(--life-muted) !important;

    font-size:
        15px !important;

    line-height:
        1.75 !important;
}


/* ============================================================
   ACCOMPAGNEMENT
============================================================ */

.discord-reason {
    position:
        relative;

    max-width:
        575px;

    margin:
        0 auto 30px !important;

    padding:
        18px !important;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    text-align:
        left;

    border:
        1px solid rgba(109,92,231,.12) !important;

    border-radius:
        18px !important;

    background:
        rgba(255,255,255,.76) !important;

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 12px 35px rgba(64, 48, 140, .07),
        inset 0 1px 0 #ffffff;

    animation:
        lifeReasonFloat 4s ease-in-out infinite;
}


.discord-reason-icon {
    width:
        50px !important;

    height:
        50px !important;

    flex:
        0 0 50px !important;

    display:
        flex;

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

    border-radius:
        15px;

    color:
        #e26093 !important;

    font-size:
        21px !important;

    background:
        var(--life-pink-soft) !important;

    animation:
        lifeHeart 1.8s ease-in-out infinite;
}


.discord-reason strong {
    display:
        block;

    margin-bottom:
        5px;

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

    font-size:
        13px !important;

    font-weight:
        850 !important;
}


.discord-reason p {
    margin:
        0 !important;

    color:
        #707084 !important;

    font-size:
        11px !important;

    line-height:
        1.6 !important;
}


/* ============================================================
   ÉTAPES
============================================================ */

.discord-steps {
    max-width:
        575px;

    margin:
        0 auto 32px;

    text-align:
        left;
}


.discord-step {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    position:
        relative;

    padding:
        7px 8px;

    border-radius:
        14px;

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


.discord-step:hover {
    transform:
        translateX(7px);

    background:
        rgba(109,92,231,.045);
}


.discord-step > span {
    width:
        43px !important;

    height:
        43px !important;

    flex:
        0 0 43px !important;

    display:
        flex;

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

    border-radius:
        13px;

    border:
        1px solid rgba(109,92,231,.17) !important;

    background:
        #f2efff !important;

    color:
        #6d5ce7 !important;

    font-size:
        11px !important;

    font-weight:
        900 !important;
}


.discord-step strong {
    display:
        block;

    margin-bottom:
        3px;

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

    font-size:
        13px !important;

    font-weight:
        850 !important;
}


.discord-step small {
    display:
        block;

    color:
        #7b7b8d !important;

    font-size:
        10px !important;
}


.discord-step-line {
    width:
        2px;

    height:
        16px;

    margin:
        2px 0 2px 29px;

    border-radius:
        10px;

    background:
        linear-gradient(
            #8d78ee,
            #d7d0fb
        );

    animation:
        lifeLinePulse 1.8s ease-in-out infinite;
}


/* ============================================================
   BOUTON DISCORD
============================================================ */

.discord-main-button {
    position:
        relative;

    overflow:
        hidden;

    display:
        block;

    max-width:
        575px;

    margin:
        0 auto;

    border:
        0 !important;

    border-radius:
        19px;

    text-decoration:
        none !important;

    background:
        linear-gradient(
            105deg,
            #6554df,
            #8068ec,
            #9a73f1,
            #6554df
        );

    background-size:
        300% auto;

    box-shadow:
        0 18px 40px rgba(91,72,200,.22);

    animation:
        lifeButtonGradient 5s linear infinite,
        lifeButtonPulse 2.2s ease-in-out infinite;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.discord-main-button::before {
    content: "";

    position:
        absolute;

    z-index:
        2;

    top:
        -60%;

    left:
        -65%;

    width:
        35%;

    height:
        220%;

    transform:
        rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.32),
            transparent
        );

    animation:
        lifeButtonShine 3.2s ease-in-out infinite;
}


.discord-main-button:hover {
    transform:
        translateY(-4px)
        scale(1.015);

    box-shadow:
        0 24px 50px rgba(91,72,200,.32);
}


.discord-button-content {
    position:
        relative;

    z-index:
        4;

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding:
        13px 19px;
}


.discord-logo-text {
    width:
        49px;

    height:
        49px;

    flex:
        0 0 49px;

    display:
        flex;

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

    border-radius:
        15px;

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

    color:
        #ffffff !important;

    font-size:
        25px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30);
}


.discord-button-content > span:nth-child(2) {
    flex:
        1;
}


.discord-button-content strong {
    display:
        block;

    color:
        #ffffff !important;

    font-size:
        14px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .04em;
}


.discord-button-content small {
    display:
        block;

    margin-top:
        4px;

    color:
        rgba(255,255,255,.78) !important;

    font-size:
        10px !important;
}


.discord-arrow {
    color:
        #ffffff !important;

    font-size:
        28px !important;

    animation:
        lifeArrow 1.1s ease-in-out infinite;
}


/* ============================================================
   TEXTE DU BAS
============================================================ */

.discord-bottom-message {
    margin-top:
        18px;

    display:
        flex;

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

    gap:
        8px;

    color:
        #858497 !important;

    font-size:
        10px !important;
}


.discord-bottom-dot {
    display:
        block;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--life-pink);

    animation:
        lifeDotPulse 1.4s ease-out infinite;
}


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes lifeCardBreath {

    0%,
    100% {
        box-shadow:
            0 30px 80px rgba(55,45,110,.09),
            0 8px 25px rgba(55,45,110,.04);
    }

    50% {
        box-shadow:
            0 35px 90px rgba(72,55,155,.14),
            0 10px 30px rgba(72,55,155,.07);
    }
}


@keyframes lifeBackgroundRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes lifeScan {

    0%,
    25% {
        top:
            -150px;
    }

    75%,
    100% {
        top:
            115%;
    }
}


@keyframes lifeGlowOne {

    from {
        transform:
            translate(0,0)
            scale(1);
    }

    to {
        transform:
            translate(-80px,70px)
            scale(1.22);
    }
}


@keyframes lifeGlowTwo {

    from {
        transform:
            translate(0,0)
            scale(.9);
    }

    to {
        transform:
            translate(90px,-65px)
            scale(1.20);
    }
}


@keyframes lifeParticle {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg)
            scale(.75);

        opacity:
            .30;
    }

    50% {
        transform:
            translateY(-20px)
            rotate(180deg)
            scale(1.20);

        opacity:
            .90;
    }
}


@keyframes lifeBadgeFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-6px);
    }
}


@keyframes lifeDotPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(255,121,171,.45);
    }

    70% {
        box-shadow:
            0 0 0 10px rgba(255,121,171,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(255,121,171,0);
    }
}


@keyframes lifeIconFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-9px)
            rotate(2deg);
    }
}


@keyframes lifeOrbit {

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes lifeOrbitReverse {

    to {
        transform:
            rotate(-360deg);
    }
}


@keyframes lifeTextGradient {

    from {
        background-position:
            0% center;
    }

    to {
        background-position:
            250% center;
    }
}


@keyframes lifeReasonFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-3px);
    }
}


@keyframes lifeHeart {

    0%,
    100% {
        transform:
            scale(1);
    }

    10% {
        transform:
            scale(1.14);
    }

    20% {
        transform:
            scale(1);
    }

    30% {
        transform:
            scale(1.10);
    }

    40% {
        transform:
            scale(1);
    }
}


@keyframes lifeLinePulse {

    0%,
    100% {
        opacity:
            .35;
    }

    50% {
        opacity:
            1;
    }
}


@keyframes lifeButtonGradient {

    from {
        background-position:
            0% center;
    }

    to {
        background-position:
            300% center;
    }
}


@keyframes lifeButtonPulse {

    0%,
    100% {
        transform:
            scale(1);

        box-shadow:
            0 18px 40px rgba(91,72,200,.20),
            0 0 0 0 rgba(109,92,231,.15);
    }

    50% {
        transform:
            scale(1.012);

        box-shadow:
            0 22px 50px rgba(91,72,200,.30),
            0 0 0 8px rgba(109,92,231,0);
    }
}


@keyframes lifeButtonShine {

    0%,
    35% {
        left:
            -65%;
    }

    70%,
    100% {
        left:
            125%;
    }
}


@keyframes lifeArrow {

    0%,
    100% {
        transform:
            translateX(0);
    }

    50% {
        transform:
            translateX(7px);
    }
}


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

@media (max-width: 700px) {

    .discord-gateway {
        min-height:
            auto;

        padding:
            38px 20px !important;

        border-radius:
            26px !important;
    }


    .discord-gateway h2 {
        font-size:
            36px !important;
    }


    .discord-intro {
        font-size:
            13px !important;
    }


    .discord-reason {
        align-items:
            flex-start;
    }


    .discord-button-content {
        min-height:
            72px;

        padding:
            12px 14px;
    }


    .discord-logo-text {
        width:
            43px;

        height:
            43px;

        flex-basis:
            43px;
    }


    .discord-button-content strong {
        font-size:
            12px !important;
    }


    .discord-button-content small {
        font-size:
            9px !important;
    }


    .discord-step {
        padding-left:
            0;

        padding-right:
            0;
    }
}