/* ============================================================
   KINETIK CLUB — Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── TOKENS ── */
:root {
  --c-bg:         #FAFAF8;
  --c-surface:    #FFFFFF;
  --c-surface-2:  #F5F5F2;
  --c-border:     rgba(0,0,0,0.07);
  --c-border-md:  rgba(0,0,0,0.13);

  --c-orange:     #F26419;
  --c-orange-dk:  #D9560F;
  --c-orange-dim: rgba(242,100,25,0.09);
  --c-orange-dim2:rgba(242,100,25,0.05);

  --c-text:       #1A1A18;
  --c-muted:      #72726C;
  --c-subtle:     #CACAC2;

  --f-display: 'Bebas Neue', sans-serif;
  --f-serif:   'DM Serif Display', serif;
  --f-body:    'Inter', sans-serif;

  --sp-xs:  0.375rem;
  --sp-sm:  0.75rem;
  --sp-md:  1.25rem;
  --sp-lg:  2rem;
  --sp-xl:  3.5rem;
  --sp-2xl: 6rem;

  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  32px;
  --r-pill:999px;

  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms var(--ease);
  --t-mid:  260ms var(--ease);
  --nav-h:  68px;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--c-bg);
  color: var(--c-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--f-body); cursor: pointer; border: none; outline: none; }
input, select, textarea { font-family: var(--f-body); outline: none; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-subtle); border-radius: 3px; }

/* ── LAYOUT ── */
.container    { max-width: 1100px; margin: 0 auto; padding: 0 var(--sp-lg); }
.container--sm { max-width: 760px;  margin: 0 auto; padding: 0 var(--sp-lg); }

/* ── TYPOGRAPHY ── */
.t-display {
  font-family: var(--f-display);
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase;
}
.t-display--md {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase;
}
.t-heading {
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.15; color: var(--c-text);
}
.t-heading--sm {
  font-family: var(--f-serif);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.2; color: var(--c-text);
}
.t-body  { font-size: 1rem; line-height: 1.75; color: var(--c-muted); }
.t-small { font-size: 0.82rem; line-height: 1.6; color: var(--c-muted); }
.t-label {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted);
}
.t-orange { color: var(--c-orange); }
.t-muted  { color: var(--c-muted); }

/* ── GRID ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-md); }

/* ── SECTIONS ── */
.section    { padding: var(--sp-2xl) 0; position: relative; }
.section--sm { padding: var(--sp-xl)  0; position: relative; }

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--c-orange);
  margin-bottom: var(--sp-md);
}
.section-eyebrow::before {
  content: ''; display: block;
  width: 20px; height: 2px; background: var(--c-orange);
  border-radius: 2px;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.72rem 1.6rem;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.03em;
  border-radius: var(--r-pill);
  transition: all var(--t-mid);
  white-space: nowrap; position: relative;
}
.btn:active { transform: scale(0.97); }

.btn--orange {
  background: var(--c-orange); color: #fff;
  box-shadow: 0 2px 12px rgba(242,100,25,0.28);
}
.btn--orange:hover {
  background: var(--c-orange-dk);
  box-shadow: 0 4px 20px rgba(242,100,25,0.38);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent; color: var(--c-text);
  border: 1px solid var(--c-border-md);
}
.btn--ghost:hover { border-color: var(--c-orange); color: var(--c-orange); }

.btn--ghost-orange {
  background: transparent; color: var(--c-orange);
  border: 1px solid rgba(242,100,25,0.3);
}
.btn--ghost-orange:hover { background: var(--c-orange-dim); border-color: var(--c-orange); }

/* aliases kept for compatibility */
.btn--ghost-green { background: transparent; color: var(--c-orange); border: 1px solid rgba(242,100,25,0.3); }
.btn--ghost-green:hover { background: var(--c-orange-dim); border-color: var(--c-orange); }
.btn--green { background: var(--c-orange); color: #fff; box-shadow: 0 2px 12px rgba(242,100,25,0.28); }
.btn--green:hover { background: var(--c-orange-dk); }

.btn--lg  { padding: 0.9rem 2rem; font-size: 0.95rem; }
.btn--sm  { padding: 0.42rem 1rem; font-size: 0.78rem; }
.btn--full { width: 100%; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ── BADGES ── */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.28rem 0.7rem; border-radius: var(--r-pill);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
}
.badge--orange { background: var(--c-orange-dim); color: var(--c-orange-dk); border: 1px solid rgba(242,100,25,0.18); }
.badge--green  { background: var(--c-orange-dim); color: var(--c-orange-dk); border: 1px solid rgba(242,100,25,0.18); }
.badge--muted  { background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border); }
.badge--live::before {
  content: ''; display: block; width: 5px; height: 5px;
  border-radius: 50%; background: currentColor;
  animation: pulsedot 1.8s infinite;
}
@keyframes pulsedot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.4; transform:scale(0.75); }
}

/* ── K-PILL ── */
.kpill {
  display: inline-flex; align-items: center;
  padding: 0.22rem 0.6rem; border-radius: var(--r-pill);
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.03em;
}
.kpill--pos  { background: var(--c-orange-dim); color: var(--c-orange-dk); }
.kpill--neg  { background: var(--c-orange-dim); color: var(--c-orange-dk); }
.kpill--lock { background: var(--c-surface-2); color: var(--c-muted); }

/* ── STATUS ── */
.status {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem; border-radius: var(--r-pill);
  font-size: 0.7rem; font-weight: 700;
}
.status::before { content:''; display:block; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status--ok      { background: rgba(34,160,91,0.10);  color: #1A8A4A; }
.status--pending { background: rgba(202,138,4,0.10);  color: #B07D00; }
.status--refused { background: rgba(220,38,38,0.09);  color: #C22020; }
.status--info    { background: rgba(37,99,235,0.09);  color: #1D4ED8; }
.status--expired { background: var(--c-surface-2);    color: var(--c-muted); }

/* ── FORMS ── */
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label {
  font-size: 0.73rem; font-weight: 600;
  color: var(--c-muted); letter-spacing: 0.04em;
}
.field input, .field select, .field textarea {
  background: var(--c-surface);
  border: 1px solid var(--c-border-md);
  border-radius: var(--r-md);
  padding: 0.68rem 0.95rem;
  color: var(--c-text); font-size: 0.9rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-orange);
  box-shadow: 0 0 0 3px rgba(242,100,25,0.09);
}
.field select option { background: var(--c-surface); }
.field textarea { resize: vertical; min-height: 88px; }

/* ── UPLOAD ZONE ── */
.upload-zone {
  border: 1.5px dashed var(--c-border-md);
  border-radius: var(--r-md);
  padding: 1.5rem var(--sp-md);
  text-align: center;
  color: var(--c-muted); font-size: 0.84rem; line-height: 1.6;
  cursor: pointer; background: var(--c-surface-2);
  transition: all var(--t-mid);
}
.upload-zone:hover { border-color: var(--c-orange); color: var(--c-orange); background: var(--c-orange-dim); }
.upload-icon { font-size: 1.4rem; margin-bottom: 0.4rem; color: var(--c-subtle); }
.upload-zone:hover .upload-icon { color: var(--c-orange); }

/* ── PROGRESS ── */
.progress-track {
  height: 6px; background: var(--c-surface-2);
  border-radius: var(--r-pill); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-orange-dk), var(--c-orange));
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}

/* ── TABLES ── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: 0.6rem 1rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-muted);
  border-bottom: 1px solid var(--c-border-md);
  background: var(--c-surface-2);
}
.data-table td {
  padding: 0.85rem 1rem; font-size: 0.87rem;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle; color: var(--c-text);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:hover td { background: var(--c-surface-2); }

/* ── STEPPER ── */
.stepper {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--c-surface); border-radius: var(--r-md);
  padding: 0.45rem 0.75rem; border: 1px solid var(--c-border-md);
}
.stepper__btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-surface-2); border: 1px solid var(--c-border-md);
  color: var(--c-text); font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast); flex-shrink: 0;
}
.stepper__btn:hover { background: var(--c-orange); border-color: var(--c-orange); color: #fff; }
.stepper__val { font-size: 0.95rem; font-weight: 700; min-width: 2rem; text-align: center; }

/* ── DIVIDER ── */
.divider--orange {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,100,25,0.22), transparent);
}

/* ═══════════════════════════════
   NAV
═══════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 var(--sp-lg);
  background: rgba(250,250,248,0.94);
  backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid var(--c-border);
}
.nav__brand {
  display: flex; align-items: center; gap: 0.65rem;
  text-decoration: none; flex-shrink: 0;
}
.nav__logo { height: 32px; width: 32px; object-fit: contain; border-radius: 8px; }
.nav__wordmark { display: flex; flex-direction: column; gap: 0; }
.nav__main-title {
  font-family: var(--f-display);
  font-size: 1.05rem; letter-spacing: 0.08em;
  color: var(--c-text); line-height: 1;
}
.nav__sub {
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em;
  color: var(--c-orange); text-transform: uppercase; line-height: 1;
  margin-top: 2px;
}
.nav__links {
  display: flex; align-items: center; gap: 0.1rem;
  margin-left: auto;
}
.nav__link {
  padding: 0.42rem 0.85rem; border-radius: var(--r-sm);
  font-size: 0.84rem; font-weight: 500; color: var(--c-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover { color: var(--c-text); background: var(--c-surface-2); }
.nav__link.active { color: var(--c-orange); font-weight: 600; }
.nav__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: var(--sp-md); }
.nav__admin {
  padding: 0.38rem 0.8rem; border-radius: var(--r-sm);
  font-size: 0.73rem; font-weight: 600; color: var(--c-muted);
  background: var(--c-surface-2); border: 1px solid var(--c-border-md);
  transition: all var(--t-fast);
}
.nav__admin:hover { color: var(--c-text); border-color: var(--c-orange); }
.nav__hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; padding: 0.4rem; margin-left: var(--sp-md);
}
.nav__hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--c-text); border-radius: 2px;
  transition: all var(--t-mid);
}
.nav__mobile {
  display: none; position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--c-surface); border-bottom: 1px solid var(--c-border);
  padding: var(--sp-sm) var(--sp-lg);
  flex-direction: column; gap: 0.15rem; z-index: 499;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.nav__mobile.open { display: flex; }
.nav__mobile .nav__link { padding: 0.7rem 0.85rem; }

/* ── PAGE SYSTEM ── */
.page { display: none; }
.page.active { display: block; }
.pt-nav { padding-top: var(--nav-h); }

/* ═══════════════════════════════
   HERO
═══════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
  padding: var(--nav-h) 0 var(--sp-2xl);
  background: var(--c-bg);
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 68% 38%, rgba(242,100,25,0.055) 0%, transparent 62%),
    var(--c-bg);
}
.hero__grid-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,0,0,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.032) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 80% at center, black 0%, transparent 75%);
}
.hero__content {
  position: relative; z-index: 2;
  padding: 0 var(--sp-lg);
  max-width: 1100px; margin: 0 auto; width: 100%;
}
.hero__title {
  font-family: var(--f-display);
  font-size: clamp(4.5rem, 11vw, 10rem);
  line-height: 0.88; letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--sp-md);
  color: var(--c-text);
}
.hero__title em {
  font-style: normal;
  -webkit-text-stroke: 2px var(--c-orange);
  color: transparent;
}
.hero__sub {
  font-size: 1.05rem; color: var(--c-muted);
  max-width: 500px; line-height: 1.75;
  margin-bottom: var(--sp-xl);
}
.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero__logo-float {
  position: absolute; top: 50%; right: 7%;
  transform: translateY(-50%); z-index: 2;
}
.hero__logo-float img {
  height: 120px; border-radius: 20px;
  filter: drop-shadow(0 0 28px rgba(242,100,25,0.3));
  opacity: 0.9;
}
.hero__scroll {
  position: absolute; bottom: var(--sp-lg); right: var(--sp-lg); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  color: var(--c-subtle); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero__scroll-line {
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--c-orange), transparent);
  animation: scrollline 2.2s infinite;
}
@keyframes scrollline {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── STATS BAND ── */
.stats-band {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.stats-band__inner {
  display: grid; grid-template-columns: repeat(3,1fr);
  max-width: 780px; margin: 0 auto;
}
.stat-item {
  padding: var(--sp-lg) var(--sp-md);
  border-right: 1px solid var(--c-border);
  text-align: center;
}
.stat-item:last-child { border-right: none; }
.stat-item__num {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--c-orange); letter-spacing: 0.02em; line-height: 1;
  margin-bottom: 0.35rem;
}
.stat-item__label { font-size: 0.77rem; color: var(--c-muted); line-height: 1.45; }

/* ── HOW IT WORKS ── */
.step-list { display: flex; flex-direction: column; gap: 0.75rem; }
.step-item {
  display: flex; gap: var(--sp-md);
  padding: 1.1rem var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
}
.step-item:hover {
  border-color: rgba(242,100,25,0.25);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.step-num {
  font-family: var(--f-display);
  font-size: 1.8rem; color: var(--c-orange); line-height: 1; flex-shrink: 0;
  min-width: 2.2rem;
}
.step-title { font-weight: 600; font-size: 0.93rem; margin-bottom: 0.3rem; }
.step-desc { font-size: 0.84rem; color: var(--c-muted); line-height: 1.65; }
.step-body { padding-top: 0.25rem; }

/* ── PTS TABLE ── */
.pts-table {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--c-surface);
}
.pts-table__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 1rem; border-bottom: 1px solid var(--c-border); gap: var(--sp-sm);
  transition: background var(--t-fast);
}
.pts-table__row:last-child { border-bottom: none; }
.pts-table__row:hover { background: var(--c-surface-2); }
.pts-table__label { font-size: 0.87rem; font-weight: 500; }
.pts-table__cat   { font-size: 0.7rem; color: var(--c-muted); margin-top: 1px; }

/* ── REWARD CARDS ── */
.reward-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-lg);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
}
.reward-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.reward-card--featured {
  border-color: rgba(242,100,25,0.28);
  box-shadow: 0 4px 24px rgba(242,100,25,0.08);
}
.reward-card--featured:hover { border-color: var(--c-orange); }
.card__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at top left, var(--c-orange-dim2), transparent 65%);
}
.card__glow--green { /* same as card__glow */
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at top left, var(--c-orange-dim2), transparent 65%);
}
.reward-card__featured-tag {
  display: inline-flex;
  background: var(--c-orange-dim); color: var(--c-orange);
  border: 1px solid rgba(242,100,25,0.22);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
  padding: 0.18rem 0.55rem; border-radius: var(--r-pill);
  margin-bottom: var(--sp-sm); align-self: flex-start; text-transform: uppercase;
}
.reward-card__pts {
  font-family: var(--f-display);
  font-size: 3.2rem; line-height: 1; letter-spacing: 0.02em;
  color: var(--c-orange);
}
.reward-card__unit { font-size: 0.74rem; color: var(--c-muted); margin-bottom: var(--sp-md); }
.reward-card__name { font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; }
.reward-card__desc { font-size: 0.84rem; color: var(--c-muted); line-height: 1.65; flex: 1; }
.reward-card__cond {
  margin-top: var(--sp-md); font-size: 0.7rem; color: var(--c-subtle);
  border-top: 1px solid var(--c-border); padding-top: var(--sp-sm);
}

/* ── SOUTIEN ── */
.soutien-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); align-items: start; }
.soutien-quote {
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.45; color: var(--c-text);
  margin-bottom: var(--sp-md);
  border-left: 2.5px solid var(--c-orange); padding-left: var(--sp-md);
}
.soutien-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem 0; border-bottom: 1px solid var(--c-border); font-size: 0.87rem;
}
.soutien-detail-row:last-child { border-bottom: none; }
.soutien-detail-row__key { color: var(--c-muted); }
.soutien-detail-row__val { font-weight: 600; }
.soutien-detail-row__val.orange,
.soutien-detail-row__val.green { color: var(--c-orange); }

/* ── SIMULATOR ── */
.sim-result-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-lg);
}
.sim-result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0; border-bottom: 1px solid var(--c-border);
}
.sim-result-row:last-child { border-bottom: none; }
.sim-result-label { font-size: 0.84rem; color: var(--c-muted); }
.sim-result-val { font-weight: 700; font-size: 0.9rem; }
.sim-result-val.orange, .sim-result-val.t-orange { color: var(--c-orange); }

/* ── FAQ ── */
.faq-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-surface);
}
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-item:last-child { border-bottom: none; }
.faq-trigger {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 1.4rem; gap: 1rem; text-align: left;
  transition: background var(--t-fast);
}
.faq-trigger:hover { background: var(--c-surface-2); }
.faq-trigger span:first-child {
  font-size: 0.9rem; font-weight: 600; line-height: 1.4;
}
.faq-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-surface-2); border: 1.5px solid var(--c-border-md);
  display: grid; place-items: center;
  transition: all var(--t-mid); position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute;
  background: var(--c-muted); border-radius: 2px; transition: all var(--t-mid);
}
.faq-icon::before { width: 8px; height: 1.5px; }
.faq-icon::after  { width: 1.5px; height: 8px; }
.faq-item.open .faq-trigger { background: var(--c-orange-dim2); }
.faq-item.open .faq-icon {
  background: var(--c-orange); border-color: var(--c-orange); transform: rotate(45deg);
}
.faq-item.open .faq-icon::before,
.faq-item.open .faq-icon::after { background: #fff; }
.faq-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.34s var(--ease), padding 0.34s var(--ease);
  padding: 0 1.4rem;
  font-size: 0.875rem; color: var(--c-muted); line-height: 1.8;
}
.faq-item.open .faq-body { max-height: 400px; padding: 0 1.4rem 1.2rem; }

/* ── CTA SECTION ── */
.cta-section {
  text-align: center;
  background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 100%);
  border-top: 1px solid var(--c-border);
}

/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */
.footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: var(--sp-xl) 0 0;
}
.footer__inner {
  display: grid; grid-template-columns: 180px 1fr;
  gap: var(--sp-2xl);
  padding-bottom: var(--sp-xl);
  border-bottom: 1px solid var(--c-border);
}
.footer__brand { display: flex; flex-direction: column; gap: 0; }
.footer__brand-main {
  font-family: var(--f-display);
  font-size: 1.15rem; letter-spacing: 0.08em;
  color: var(--c-text); line-height: 1;
}
.footer__brand-sub {
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em;
  color: var(--c-orange); text-transform: uppercase; margin-top: 2px;
}
.footer__links { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-lg); }
.footer__col { display: flex; flex-direction: column; gap: 0.45rem; }
.footer__col h4 {
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-subtle); margin-bottom: 0.4rem;
}
.footer__col a { font-size: 0.83rem; color: var(--c-muted); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--c-orange); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.5rem;
  padding: var(--sp-md) 0;
  font-size: 0.72rem; color: var(--c-subtle);
}
.footer__bottom a { color: var(--c-subtle); transition: color var(--t-fast); }
.footer__bottom a:hover { color: var(--c-muted); }

/* ═══════════════════════════════
   LOGIN PAGE
═══════════════════════════════ */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + var(--sp-xl)) var(--sp-lg) var(--sp-xl);
  background: var(--c-bg);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-xl) var(--sp-lg);
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}
.login-logo {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: var(--sp-xl);
}
.login-logo img { width: 52px; height: 52px; border-radius: 13px; margin-bottom: 0.6rem; }
.login-logo__name {
  font-family: var(--f-display);
  font-size: 1.3rem; letter-spacing: 0.08em; color: var(--c-text); line-height: 1;
}
.login-logo__sub {
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em;
  color: var(--c-orange); text-transform: uppercase; margin-top: 2px;
}
.login-title {
  font-family: var(--f-serif); font-size: 1.25rem;
  text-align: center; margin-bottom: 0.35rem;
}
.login-sub {
  font-size: 0.84rem; color: var(--c-muted); text-align: center;
  margin-bottom: var(--sp-lg); line-height: 1.6;
}
.login-form { display: flex; flex-direction: column; gap: var(--sp-sm); }
.login-divider {
  display: flex; align-items: center; gap: var(--sp-sm);
  margin: var(--sp-sm) 0; color: var(--c-subtle); font-size: 0.73rem;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--c-border);
}
.login-tiandao-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 0.8rem 1.2rem; border-radius: var(--r-md);
  border: 1.5px solid rgba(242,100,25,0.28);
  background: var(--c-orange-dim);
  color: var(--c-orange); font-weight: 700; font-size: 0.88rem;
  cursor: pointer; transition: all var(--t-fast);
}
.login-tiandao-btn:hover { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }
.login-tiandao-btn img { width: 20px; height: 20px; border-radius: 5px; }
.login-notice {
  margin-top: var(--sp-lg); padding: 0.8rem 1rem;
  background: var(--c-orange-dim); border-radius: var(--r-md);
  font-size: 0.77rem; color: var(--c-muted); line-height: 1.65;
  border-left: 2px solid var(--c-orange);
}
.login-notice strong { color: var(--c-text); }

/* ═══════════════════════════════
   DASHBOARD
═══════════════════════════════ */
.dash-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: calc(var(--nav-h) + var(--sp-lg)) 0 var(--sp-lg);
}
.dash-kpoints {
  font-family: var(--f-display);
  font-size: clamp(5rem, 12vw, 8rem);
  letter-spacing: 0.02em; line-height: 0.9;
  color: var(--c-orange); margin: var(--sp-sm) 0 0.2rem;
}
.dash-body { padding: var(--sp-xl) 0; }
.dash-grid { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-lg); }

/* ── MINI CARDS ── */
.mini-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1rem 1.15rem;
}
.mini-card__label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-muted); margin-bottom: 0.35rem; }
.mini-card__val { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.04em; line-height: 1; }
.mini-card__val--green, .mini-card__val--orange { color: var(--c-orange); }

/* ── REWARD UNLOCK ── */
.reward-unlock {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md); border: 1px solid var(--c-border);
  background: var(--c-surface); transition: border-color var(--t-fast);
}
.reward-unlock.available { border-color: rgba(242,100,25,0.28); background: var(--c-orange-dim2); }
.reward-unlock.locked { opacity: 0.55; }
.reward-unlock__icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 0.7rem; font-weight: 800; font-family: var(--f-display);
}
.reward-unlock__icon--green,
.reward-unlock__icon--orange { background: var(--c-orange-dim); color: var(--c-orange); }
.reward-unlock__pts { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-orange); margin-bottom: 0.1rem; }
.reward-unlock__name { font-size: 0.88rem; font-weight: 600; margin-bottom: 0.1rem; }
.reward-unlock__note { font-size: 0.75rem; color: var(--c-muted); }

/* ── SIDEBAR CARDS ── */
.sidebar-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
}

/* ── HISTORY ── */
.history-icon--pos, .history-icon--neg {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--c-orange-dim); color: var(--c-orange);
  font-size: 0.75rem; font-weight: 700;
}

/* ─── VOUCHERS ── */
.voucher {
  display: flex; align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); overflow: hidden; gap: 0;
  transition: border-color var(--t-fast);
}
.voucher:hover { border-color: rgba(242,100,25,0.3); }
.voucher__stripe { width: 4px; background: var(--c-orange); align-self: stretch; flex-shrink: 0; }
.voucher__body { padding: 0.8rem 1rem; flex: 1; }
.voucher__val  { margin-left: auto; font-weight: 800; color: var(--c-orange); font-size: 1.1rem; flex-shrink: 0; padding-right: 1rem; }

/* ═══════════════════════════════
   SPONSOR PAGE
═══════════════════════════════ */
.sponsor-code-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-xl);
  padding: var(--sp-xl); text-align: center;
}
.sponsor-code {
  font-family: var(--f-display);
  font-size: 2.2rem; font-weight: 800; letter-spacing: 0.2em;
  color: var(--c-orange);
  background: var(--c-orange-dim); border-radius: var(--r-md);
  display: inline-block; padding: 0.5rem 1.5rem; margin: 0.5rem 0 0.75rem;
}

/* ═══════════════════════════════
   ADMIN
═══════════════════════════════ */
.admin-header {
  background: var(--c-surface); border-bottom: 1px solid var(--c-border);
  padding: calc(var(--nav-h) + var(--sp-lg)) 0 var(--sp-lg);
}
.admin-tabs { display: flex; gap: 0.35rem; margin-bottom: var(--sp-lg); flex-wrap: wrap; }
.admin-tab {
  padding: 0.42rem 1rem; border-radius: var(--r-sm);
  font-size: 0.82rem; font-weight: 600;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  color: var(--c-muted); transition: all var(--t-fast);
}
.admin-tab:hover { border-color: var(--c-border-md); color: var(--c-text); }
.admin-tab.active { background: var(--c-orange); color: #fff; border-color: var(--c-orange); box-shadow: 0 2px 10px rgba(242,100,25,0.25); }
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.client-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
  gap: var(--sp-sm); padding: 0.65rem 1rem; align-items: center; font-size: 0.86rem;
}
.client-row.header {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-muted);
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-border-md);
}
.client-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.param-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: var(--sp-sm);
}
.pending-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 1rem var(--sp-md);
  display: grid; grid-template-columns: 36px 1fr auto; gap: var(--sp-sm);
  align-items: center;
}

/* ═══════════════════════════════
   TOAST
═══════════════════════════════ */
.toast {
  position: fixed; bottom: var(--sp-lg); right: var(--sp-lg); z-index: 9999;
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--c-text); color: #fff;
  border-radius: var(--r-md); padding: 0.8rem 1.2rem;
  font-size: 0.86rem; font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t-mid), transform var(--t-mid);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast__icon { font-size: 1rem; flex-shrink: 0; }

/* ═══════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal.revealed { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.09s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.27s; }
.reveal-delay-4 { transition-delay: 0.36s; }
.reveal-hero {
  opacity: 0; transform: translateX(-18px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal-hero.revealed { opacity: 1; transform: none; }
.reveal-card {
  opacity: 0; transform: translateY(18px) scale(0.98);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal-card.revealed { opacity: 1; transform: none; }

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .soutien-grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .footer__links { grid-template-columns: repeat(2,1fr); }
  .stats-band__inner { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(2) { border-right: none; }
  .hero__logo-float { display: none; }
}
@media (max-width: 640px) {
  :root { --sp-lg: 1.5rem; --sp-xl: 2.5rem; --sp-2xl: 4rem; }
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .nav__actions .btn--sm { display: none; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer__links { grid-template-columns: 1fr; }
  .stats-band__inner { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--c-border); }
  .stat-item:last-child { border-bottom: none; }
  .client-row { grid-template-columns: 1fr auto; }
  .client-row > *:not(:first-child):not(:last-child) { display: none; }
  .param-grid { grid-template-columns: 1fr; }
  .soutien-grid { gap: var(--sp-lg); }
}

/* ── SIM ROWS ── */
.sim-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-md);
  padding: 0.75rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.sim-row__info { flex: 1; min-width: 0; }
.sim-row__name { font-size: 0.88rem; font-weight: 600; margin-bottom: 0.15rem; }
.sim-row__meta { font-size: 0.72rem; color: var(--c-muted); }