:root{
    --brand:#0f4761;
    --brand-dark:#073a47;
    --bg:#f5f5f5;
    --text:#333;
    --muted:#777;
    --callout:#fff3cd;
}
*{box-sizing:border-box}
body {
    font-family: Arial, sans-serif;
    background-color: var(--bg);
    margin: 0;
    padding: 0;
    color: var(--text);
}
header {
    background-color: var(--brand);
    color: white;
    padding: 24px 20px 18px;
    text-align: center;
    position: relative;
}
header h1 {
    margin: 0 0 6px 0;
    font-size: 2.5em;
    line-height: 1.1;
}
header p {
    margin: 0;
    opacity: 0.9;
}
.language-switcher {
    position: absolute;
    top: 20px;
    right: 20px;
    display:flex;
    gap:8px;
}
.language-switcher a {
    background-color: var(--brand-dark);
    color: white;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 0.95em;
    border-radius: 6px;
}
.language-switcher a:hover {
    background-color: var(--brand);
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 0 20px 40px;
}
h2 {
    color: var(--brand);
    font-size: 1.9em;
    margin-top: 42px;
    position: relative;
    padding-left: 32px;
}
h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
}
h3 {
    color: var(--brand);
    font-size: 1.4em;
    margin-top: 22px;
}
p {
    font-size: 1.08em;
    line-height: 1.65;
    margin-bottom: 18px;
}
ul {
    padding-left: 20px;
    margin: 12px 0 24px;
}
ul li { 
    margin: 8px 0; 
    line-height: 1.5;
}
a {
    color: var(--brand);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.btn {
    background-color: var(--brand);
    color: white;
    padding: 15px 30px;
    border: none;
    cursor: pointer;
    font-size: 1.05em;
    margin-top: 12px;
    display: inline-block;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.25s;
}
.btn:hover {
    background-color: var(--brand-dark);
    transform: translateY(-2px);
}

/* Image grid */
.image-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 26px;
}
.image-container img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.25s;
    background:#fff;
    cursor: zoom-in;
}
.image-container img:hover {
    transform: scale(1.03);
}

/* === LIGHTBOX С ПОДПИСЯМИ === */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.95);
    justify-content: center;
    align-items: center;
    padding: 20px;
    cursor: zoom-out;
    flex-direction: column;
    gap: 20px;
}
.lightbox.active {
    display: flex;
}
.lightbox img {
    max-width: 90%;
    max-height: 75vh;
    border-radius: 12px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.7);
    animation: zoomIn 0.3s ease-out;
}
@keyframes zoomIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.lightbox .caption {
    color: #ff0;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    max-width: 90%;
    padding: 0 20px;
    line-height: 1.5;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.lightbox .close {
    position: absolute;
    top: 25px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.lightbox .close:hover {
    opacity: 1;
}

/* Badge / callout about shape vs principle */
.principle-callout{
    background:#fff;
    border-left:6px solid var(--brand);
    border-radius:10px;
    padding:18px 18px 16px 18px;
    margin: 16px 0 8px;
    box-shadow:0 2px 10px rgba(15,71,97,0.08);
}
.principle-callout strong{color:var(--brand)}

/* Film analogy */
.film-analogy {
    background: linear-gradient(135deg, #e6f7ff, #f8faff);
    padding: 28px;
    border-radius: 12px;
    margin: 40px 0 20px;
    border-left: 6px solid var(--brand);
    box-shadow: 0 4px 15px rgba(15, 71, 97, 0.08);
}
.film-analogy h3 {
    margin-top: 0;
    color: var(--brand);
    font-size: 1.55em;
}
.film-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 1.02em;
    overflow:hidden;
    border-radius:8px;
}
.film-table th, .film-table td {
    padding: 12px 12px;
    text-align: left;
    border-bottom: 1px solid #d3e7f1;
}
.film-table th {
    background-color: var(--brand);
    color: white;
    width: 40%;
}
.film-table td {
    background-color: #f9fdff;
}
.highlight {
    background-color: var(--callout) !important;
    font-weight: bold;
}

/* Roadmap table */
.roadmap-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 1.05em;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15,71,97,0.1);
}
.roadmap-table th {
    background-color: var(--brand);
    color: white;
    padding: 16px;
    text-align: left;
}
.roadmap-table td {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
}
.roadmap-table tr:last-child td {
    border-bottom: none;
}
.roadmap-table tr:nth-child(even) td {
    background-color: #f9fdff;
}

@media (max-width: 768px) {
    header { padding: 20px 16px; }
    header h1 { font-size: 2.1em; }
    .image-container { grid-template-columns: 1fr 1fr; }
    .film-table { font-size: 0.95em; }
    .language-switcher { top:14px; right:14px; }
    .btn{ width:100%; text-align:center; }
    .lightbox .close { top: 15px; right: 20px; font-size: 32px; }
    .lightbox .caption { font-size: 1.1em; }
    .roadmap-table { font-size: 0.95em; }
    .roadmap-table th, .roadmap-table td { padding: 12px 10px; }
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: #ccc;
    background: #000;
    border-top: 1px solid #222;
    margin-top: 50px;
}
footer a {
    color: #00b3ff;
    text-decoration: none;
    transition: color 0.3s ease;
}
footer a:hover {
    color: #66d9ff;
    text-decoration: underline;
}
footer small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #aaa;
}

/* — будущий блок для чекбокса/активации оферты (заполним позже)
.consent-box { ... }
*/

/* =========================================================
   НИЖЕ — НОВЫЕ СКОПИРОВАННЫЕ СТИЛИ, ЖЁСТКО СКОПЛЕНЫЕ,
   ЧТОБЫ НЕ ПЕРЕКРЫВАТЬ СУЩЕСТВУЮЩИЕ КОМПОНЕНТЫ
   ========================================================= */

/* A11y helper (локальный, не влияет на верстку) */
.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* Wallet reveal (только в пределах .wallet-reveal) */
.wallet-reveal { margin: 24px 0 12px; }
.wallet-reveal .wallet-panel { margin-top: 14px; }
.wallet-reveal .wallet-caption { margin: 0 0 8px; color: var(--text); }
.wallet-reveal .wallet-box {
  display: flex; gap: 10px; align-items: center;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.wallet-reveal .wallet-address { user-select: all; font-size: 0.95em; word-break: break-all; }
.wallet-reveal .wallet-tip { display:block; margin-top:6px; color:#666; }

/* Локальная вариация кнопки, чтобы не лезть в .btn глобально */
.btn-secondary { background: #555 !important; }
.btn-secondary:hover { background: #444 !important; }

/* OFFER MODAL — строго по ID, чтобы не задеть любые другие классы "modal" */
#offer-modal[aria-hidden="true"][hidden] { display: none; }
#offer-modal {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
}
#offer-modal .modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.55);
  backdrop-filter: blur(1px);
}
#offer-modal .modal-dialog {
  position: relative; z-index: 1; max-width: 560px; width: calc(100% - 32px);
  background: #fff; color: var(--text); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 20px 20px 16px;
  animation: offerModalIn .18s ease-out;
}
#offer-modal .modal-close {
  position: absolute; right: 10px; top: 8px; font-size: 24px; line-height: 1;
  border: none; background: transparent; color: #666; cursor: pointer;
}
#offer-modal .modal-close:hover { color: #000; }
#offer-modal .modal-actions { display: flex; gap: 10px; margin-top: 14px; }

@keyframes offerModalIn {
  from { transform: translateY(6px); opacity: .7; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 480px){
  .wallet-reveal .wallet-box { flex-direction: column; align-items: stretch; }
  #offer-modal .modal-dialog { padding: 16px 14px 12px; }
}

/* ======= КЛИК ПО КНОПКЕ: ФИКС ПЕРЕКРЫТИЙ ======= */

/* Псевдоэлемент у h2 — гарантируем нулевые размеры */
h2::before { width: 0; height: 0; }

/* Скрытые оверлеи не должны ловить события */
.lightbox:not(.active) { display: none !important; pointer-events: none !important; }
#offer-modal[hidden],
#offer-modal[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
}

/* На всякий случай — фон модалки ловит клики только когда модалка показана */
#offer-modal .modal-backdrop { pointer-events: auto; }

/* Поднимаем блок с кнопкой над всем остальным контентом */
.wallet-reveal { position: relative; z-index: 2; }
#btn-open-offer-modal { position: relative; z-index: 3; }

/* Локальная кнопка «вторичная» (не влияет на глобальные .btn) */
.btn-secondary { background: #555 !important; }
.btn-secondary:hover { background: #444 !important; }

/* === Click insurance for wallet button & modal === */
.lightbox:not(.active) { display:none !important; pointer-events:none !important; }

#offer-modal[hidden],
#offer-modal[aria-hidden="true"] {
  display:none !important;
  pointer-events:none !important;
}

/* гарантируем, что кнопка и панель реально получают клики */
.wallet-reveal, 
#btn-open-offer-modal,
#offer-modal,
#offer-modal * {
  pointer-events:auto !important;
}

.wallet-reveal { position:relative; z-index:2; }
#btn-open-offer-modal { position:relative; z-index:3; }

/* если вдруг какой-то псевдоэлемент мог лечь поверх */
h2::before { width:0; height:0; }

/* фон модалки ловит клики только когда видим */
#offer-modal .modal-backdrop { pointer-events:auto; }

/* === Click insurance for wallet button & modal === */
.lightbox:not(.active) { display:none !important; pointer-events:none !important; }

#offer-modal[hidden],
#offer-modal[aria-hidden="true"] {
  display:none !important;
  pointer-events:none !important;
}

/* гарантируем, что кнопка и панель реально получают клики */
.wallet-reveal, 
#btn-open-offer-modal,
#offer-modal,
#offer-modal * {
  pointer-events:auto !important;
}

.wallet-reveal { position:relative; z-index:2; }
#btn-open-offer-modal { position:relative; z-index:3; }

/* если вдруг какой-то псевдоэлемент мог лечь поверх */
h2::before { width:0; height:0; }

/* фон модалки ловит клики только когда видим */
#offer-modal .modal-backdrop { pointer-events:auto; }