/* =====================================================================
   LOYALTY.CSS — Club Liberty · страница «Liberty Card» (loyalty)
   Только стили этой страницы: hero, виртуальная карта, шапки секций,
   шаги, перки, таблица тиров, блок вступления с формой, FAQ и брейкпоинты.
   Подключается ПОСЛЕ base.css.
   ===================================================================== */


/* ==== BLOCK: HERO — start ====
   Первый экран: текст слева, интерактивная карта справа. */
.lhero{position:relative; overflow:hidden}
.lhero .fb{position:absolute; inset:0; z-index:0; background:
  radial-gradient(90% 90% at 88% 12%, rgba(230,169,72,.22), transparent 55%),
  radial-gradient(80% 90% at 0% 100%, rgba(226,59,46,.22), transparent 55%), #110b09}
.lhero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr;
  gap:50px; align-items:center; padding-top:70px; padding-bottom:74px}
.crumbs{font-size:13px; color:var(--muted-2); margin-bottom:16px; font-family:var(--disp);
  letter-spacing:.1em; text-transform:uppercase}
.crumbs a:hover{color:var(--ink)}
.crumbs a{position:relative; z-index:3; color:var(--gold); transition:.15s}  /* crumbs-clickable */
.lhero h1{font-family:var(--disp); text-transform:uppercase; font-weight:700;
  font-size:clamp(40px,6vw,82px); line-height:.9; letter-spacing:.01em}
.lhero h1 em{font-style:normal; color:transparent; -webkit-text-stroke:1.5px var(--gold)}
.lhero p{margin-top:18px; color:var(--muted); max-width:46ch; font-size:17px}
.lhero .cta{margin-top:28px; display:flex; gap:14px; flex-wrap:wrap}
.lhero .micro{margin-top:18px; font-size:13px; color:var(--muted-2)}
/* ==== BLOCK: HERO — end ==== */


/* ==== BLOCK: VIRTUAL CARD — start ====
   3D-карта с балансом и кэшбэком; поля обновляются из loyalty.js при вводе. */
.cardwrap{perspective:1400px; display:flex; justify-content:center}
.vcard{position:relative; width:100%; max-width:430px; aspect-ratio:1.586/1; border-radius:20px;
  padding:28px 30px; color:#f6efe8; overflow:hidden; transform:rotateY(-12deg) rotateX(6deg);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  background:
    radial-gradient(120% 140% at 85% -10%, rgba(226,59,46,.55), transparent 55%),
    radial-gradient(120% 130% at 0% 120%, rgba(230,169,72,.32), transparent 50%),
    linear-gradient(135deg,#231712,#0c0a09 70%);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex; flex-direction:column; justify-content:space-between}
.cardwrap:hover .vcard{transform:rotateY(-6deg) rotateX(3deg) translateY(-4px)}
.vcard::after{content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 48%, transparent 60%);
  pointer-events:none}
.vcard .vc-top{display:flex; justify-content:space-between; align-items:flex-start}
.vc-brand{font-family:var(--disp); text-transform:uppercase; font-weight:700; font-size:24px;
  letter-spacing:.1em; display:flex; align-items:center; gap:9px}
.vc-brand svg{width:26px; height:26px}
.vc-tier{font-family:var(--disp); text-transform:uppercase; letter-spacing:.2em; font-size:11px;
  color:var(--gold); border:1px solid rgba(230,169,72,.5); border-radius:999px; padding:5px 12px}
.vc-chip{width:42px; height:31px; border-radius:6px; margin:2px 0;
  background:linear-gradient(135deg,#f0c277,#b07d2e); position:relative; opacity:.95}
.vc-chip::before,.vc-chip::after{content:""; position:absolute; inset:6px 8px;
  border:1px solid rgba(0,0,0,.25); border-radius:3px}
.vc-mid{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:6px}
.vc-balance .l{font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted)}
.vc-balance .v{font-family:var(--disp); font-weight:700; font-size:26px; line-height:1; color:var(--gold-soft); white-space:nowrap}
.vc-cashback{text-align:right}
.vc-cashback .v{font-family:var(--disp); font-weight:700; font-size:26px; line-height:1; white-space:nowrap}
.vc-cashback .l{font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted)}
.vc-bot{display:flex; justify-content:space-between; align-items:flex-end; gap:14px}
.vc-name{font-family:var(--disp); text-transform:uppercase; letter-spacing:.06em; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vc-name small{display:block; font-size:9px; letter-spacing:.2em; color:var(--muted-2); margin-bottom:3px}
.vc-num{font-family:var(--disp); letter-spacing:.18em; font-size:14px; color:var(--muted)}
/* ==== BLOCK: VIRTUAL CARD — end ==== */


/* ==== BLOCK: SECTION SHELL — start ==== */
section{position:relative}
.sec{padding:84px 0}
.sec-head{margin-bottom:42px; text-align:center}
.sec-head .eyebrow{display:block; margin-bottom:14px}
.sec-head h2{font-family:var(--disp); text-transform:uppercase; font-weight:700;
  font-size:clamp(30px,4.4vw,52px); line-height:.96}
/* ==== BLOCK: SECTION SHELL — end ==== */


/* ==== BLOCK: STEPS — start ====
   Нумерованные шаги «как это работает». */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.step{padding:28px 24px; border:1px solid var(--line-2); border-radius:14px; background:var(--bg-2)}
.step .no{font-family:var(--disp); font-size:46px; font-weight:700; color:transparent;
  -webkit-text-stroke:1.5px rgba(230,169,72,.55); line-height:1; margin-bottom:14px}
.step h4{font-family:var(--disp); text-transform:uppercase; letter-spacing:.04em; font-size:18px; margin-bottom:8px}
.step p{color:var(--muted); font-size:14px}
/* ==== BLOCK: STEPS — end ==== */


/* ==== BLOCK: PERKS — start ====
   Карточки преимуществ карты лояльности. */
.perks{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.perk{padding:32px 28px; border:1px solid var(--line-2); border-radius:14px; background:var(--bg-2);
  transition:.2s; display:flex; flex-direction:column}
.perk:hover{border-color:var(--line); transform:translateY(-3px)}
/* Кликабельная карточка-ссылка (Карта сеньорит → установка). */
.perk--link{cursor:pointer; text-decoration:none; color:inherit}
.perk--link:hover{border-color:var(--gold); transform:translateY(-3px)}
.perk--link p{color:var(--gold)}
.perk .ic{font-size:28px; margin-bottom:16px}
.perk h3{font-family:var(--disp); text-transform:uppercase; font-weight:600; font-size:21px; margin-bottom:9px; line-height:1.05}
.perk p{color:var(--muted); font-size:14.5px}
.perk .big{font-family:var(--disp); color:var(--gold); font-weight:700; font-size:40px; line-height:1; margin-bottom:8px}
/* ==== BLOCK: PERKS — end ==== */


/* ==== BLOCK: TIERS — start ====
   Таблица уровней пополнения с бонусами; .best — выделенный тир. */
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px}
.tier{position:relative; border:1px solid var(--line-2); border-radius:14px; background:var(--bg-2);
  padding:26px 22px; text-align:center; transition:.2s}
.tier:hover{transform:translateY(-3px); border-color:rgba(230,169,72,.4)}
.tier.best{border-color:var(--gold); background:linear-gradient(180deg,rgba(230,169,72,.10),var(--bg-2))}
.tier .pay{font-size:14px; color:var(--muted); margin-bottom:6px}
.tier .pay b{color:var(--ink); font-size:22px; font-family:var(--disp); font-weight:700}
.tier .plus{font-family:var(--disp); font-weight:700; font-size:34px; line-height:1; color:var(--gold); margin:8px 0 2px}
.tier .bonus-l{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-2)}
.tier .badge{position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#1a1206; font-family:var(--disp); text-transform:uppercase;
  letter-spacing:.1em; font-size:11px; font-weight:700; padding:4px 12px; border-radius:999px; white-space:nowrap}
.tier .badge{max-width:calc(100% - 10px)}
/* На узком экране плашка шире карточки и вылезает за край экрана —
   поджимаем её, а не полагаемся на подрезку страницы браузером. */
@media (max-width:760px){
  .tier .badge{font-size:10px; letter-spacing:.06em; padding:4px 9px}
}
.tier .total{font-size:13px; color:var(--muted); margin-top:10px; padding-top:10px;
  border-top:1px solid var(--line-2)}
.tier .total b{color:var(--gold-soft)}
@media (max-width:760px){.tiers{grid-template-columns:repeat(2,1fr)}}
/* ==== BLOCK: TIERS — end ==== */


/* ==== BLOCK: JOIN FORM — start ====
   Блок вступления: список преимуществ слева, карточка-форма выпуска справа. */
.join{position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--line-2);
  background:linear-gradient(120deg,#1a0d0a,#0c0a09 60%)}
.join::before{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 120% at 100% 0%, rgba(230,169,72,.28), transparent 55%),
    radial-gradient(60% 100% at 0% 100%, rgba(226,59,46,.2), transparent 55%)}
.join-in{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:44px;
  padding:50px 50px; align-items:center}
.join-in h2{font-family:var(--disp); text-transform:uppercase; font-weight:700; font-size:clamp(28px,3.6vw,46px); line-height:.96}
.join-in p{color:var(--muted); margin-top:12px; font-size:15px; max-width:40ch}
.join-in ul{list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:10px}
.join-in li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--muted)}
.join-in li::before{content:"\2605"; color:var(--gold); font-size:12px; margin-top:3px}
.jcard{background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:26px 24px}
.field{margin-bottom:16px}
.field>label{display:block; font-family:var(--disp); text-transform:uppercase; letter-spacing:.14em;
  font-size:11.5px; color:var(--muted-2); margin-bottom:8px}
.inp{width:100%; padding:14px 15px; background:var(--bg-3); border:1px solid var(--line-2);
  border-radius:8px; color:var(--ink); font-family:var(--body); font-size:15px; transition:.15s}
.inp:focus{outline:none; border-color:var(--red)}
.jcard .btn{width:100%; justify-content:center; padding:16px; margin-top:4px}
.reassure{margin-top:12px; font-size:12px; color:var(--muted-2); text-align:center}
.wallet-note{margin-top:16px; font-size:13px; color:var(--muted); line-height:1.5}
.ok{text-align:center}
.ok .check{width:64px; height:64px; border-radius:50%; background:rgba(94,200,120,.14);
  border:1px solid rgba(94,200,120,.4); color:#74d68a; display:flex; align-items:center; justify-content:center;
  font-size:30px; margin:2px auto 14px}
.ok h3{font-family:var(--disp); text-transform:uppercase; font-size:24px; margin-bottom:8px}
.ok p{color:var(--muted); font-size:14px}
/* ==== BLOCK: JOIN FORM — end ==== */


/* ==== BLOCK: FAQ — start ====
   Аккордеон вопросов и ответов на нативных <details>. */
.faq{max-width:820px; margin:0 auto}
.qa{border-bottom:1px solid var(--line-2)}
.qa summary{list-style:none; cursor:pointer; padding:22px 4px; display:flex; justify-content:space-between;
  align-items:center; gap:16px; font-family:var(--disp); text-transform:uppercase; letter-spacing:.02em; font-size:18px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pl{color:var(--gold); font-size:24px; transition:.2s; flex:none}
.qa[open] summary .pl{transform:rotate(45deg)}
.qa p{padding:0 4px 22px; color:var(--muted); font-size:15px; max-width:68ch}
/* ==== BLOCK: FAQ — end ==== */


/* ==== BLOCK: RESPONSIVE (loyalty) — start ==== */
@media (max-width:980px){
  .lhero-in{grid-template-columns:1fr; gap:40px}
  .cardwrap{order:-1}
  .vcard{transform:none}
  .cardwrap:hover .vcard{transform:translateY(-4px)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .perks{grid-template-columns:1fr}
  .join-in{grid-template-columns:1fr; gap:28px; padding:40px 30px}
}
@media (max-width:760px){
  .nav{height:64px}
  .sec{padding:58px 0}
}
/* ==== BLOCK: RESPONSIVE (loyalty) — end ==== */