:root{
  --bg-0:#0d0d0d; --bg-1:#101010; --bg-2:#1a1a1a;
  --fg-0:#f0e6d2; --fg-1:#c8bfa9; --accent:#ffd447; --border:#333;
  --dfn-bg:#141414;
  --dfn-card:#1e1e1e;
  --dfn-radius:14px;
}

/* --- RESET & TYPO --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",Arial,sans-serif;background:var(--bg-0);
     color:var(--fg-0);line-height:1.55;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block}
a,button,select,input,textarea{font:inherit}
h1,h2,h3{font-weight:600;margin-bottom:.6em}

/* --- FADE-IN ANIMATION --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

body {
    animation: fadeIn 0.8s ease-in-out forwards;
}

.wrapper{max-width:1200px;margin:auto;padding:60px 20px; text-align: center;}
section+section{margin-top:60px}

/* --- HERO --- */
header{position:relative;padding:90px 20px 70px;text-align:center;}
header img{width:220px;margin:0 auto 30px}
header em{opacity:.8}

/* --- UNIQUE GLOW FOR HOME PAGE HEADER --- */
.home-header::before {
  content: "";
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255, 212, 71, 0.35) 0%, transparent 65%);
  filter: blur(60px);
  animation: pulse 6s ease-in-out infinite;
  border-radius: 50%;
  z-index: -1;
}

/* --- UNIQUE GLOW FOR PATROL PAGE HEADER --- */
.patrol-header::before {
  content: "";
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 212, 71, 0.45) 0%, transparent 70%);
  filter: blur(45px);
  animation: pulse 6s ease-in-out infinite;
  border-radius: 50%;
  z-index: -1;
}

@keyframes pulse{0%,100%{opacity:.35}
                 50%{opacity:.6;}}

header button{margin-top:30px;padding:14px 32px;background:var(--accent); color:#000;
  border:none;border-radius:8px;cursor:pointer;animation:breath 5s ease-in-out infinite}
@keyframes breath{0%,100%{box-shadow:0 0 0 0 rgba(255,212,71,.25)}
                  50%{box-shadow:0 0 15px 4px rgba(255,212,71,.45)}}

/* --- OTHER GENERIC STYLES --- */
h1{font-size:2.7rem} h2{font-size:2.2rem;text-align:center;margin-bottom:1em}
blockquote{margin:40px auto 0;max-width:700px;border-left:4px solid var(--accent);padding-left:18px;font-style:italic;color:var(--fg-1);text-align:center}

.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 30px;margin:25px auto 0;max-width:700px;text-align:center;list-style:none}
.principles li{background:rgba(26,26,26,.55);border:1px solid var(--border);border-radius:8px;padding:14px 16px;font-size:1rem}
.principles li::before{content:"\2714\FE0E";color:var(--accent) !important;margin-right:6px;font-weight:700}

/* --- FOOTER STYLES (RESTORED) --- */
footer{background:var(--bg-0);text-align:center;padding:32px 18px;color:#888;font-size:.9rem;overflow:hidden; position: relative;}
.footer-text { position: relative; z-index: 2; background-color: var(--bg-0); }
footer .marquee{position: relative; z-index: 1; display:inline-block;white-space:nowrap;margin-top:8px;animation:marq 12s linear infinite}
@keyframes marq{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAAAAABLbSncAAAAEklEQVR4nGP8z8AARLQYigABBgAKoQENlxf9kQAAAABJRU5ErkJggg==')repeat;opacity:.08}

.about-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:22px;}
.about-links a{font-size:1rem;padding:8px 20px;color:var(--accent-2);border:1px solid var(--border);border-radius:8px;text-decoration:none;transition:background .25s, border .25s;}
.about-links a:hover{background:var(--bg-2);border-color:var(--accent);}

.inactive-button {
    background-color: #555 !important;
    cursor: not-allowed !important;
    animation: none !important;
    box-shadow: none !important;
}

/* --- Стили, перенесённые из HTML для соответствия CSP --- */
#nonsense-hero {
    padding: 60px 0;
    text-align: center;
}
.key-principles-header {
    text-align: center;
    margin-top: 40px;
}
#nonsense-hero .hero-paragraph {
    max-width: 600px;
    margin: 12px auto 32px;
}
#search-container {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}
#token-search {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* --- НОВЫЕ СТИЛИ ДЛЯ ПОЛЯ ВВОДА С КРЕСТИКОМ --- */
.input-wrapper {
    position: relative;
    flex-grow: 1;
}

.clear-input-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: none; /* Изначально скрыт */
    font-size: 1.2em; /* Немного уменьшим размер, чтобы лучше смотрелось */
    line-height: 1;
    color: #888;
    transition: color 0.2s;
    padding: 4px; /* Добавим немного отступов, чтобы увеличить область клика */
}

.clear-input-btn:hover {
    color: #eee;
}
/* --- КОНЕЦ НОВЫХ СТИЛЕЙ --- */

#token-search input {
    flex: 1;
    width: 100%; /* Убедимся, что инпут занимает все место в обертке */
    padding: 12px 35px 12px 12px; /* Добавили отступ справа для крестика */
    border-radius: 8px;
    border: 1px solid #444;
    background: #111;
    color: #fff;
    font-size: 16px;
}

#token-search button {
    padding: 12px 18px;
    border: 1px solid #444;
    border-radius: 8px;
    background: var(--accent);
    color: #111;
    font-weight: 600;
}
#patrol-block {
    margin: 40px auto;
    max-width: 960px;
}

/* --- FADE-IN FOR PATROL BLOCK --- */
#patrol-block {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.6s ease-in-out;
}
#patrol-block.is-visible {
    visibility: visible;
    opacity: 1;
}

/* --- Стили для поисковых подсказок --- */
#search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #1e1e1e;
  border: 1px solid #333;
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
}
.search-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #2d2d2d;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-item:last-child {
  border-bottom: none;
}
.search-item:hover {
  background-color: #2a2a2a;
}
.search-item .token-info strong {
  color: var(--fg-0);
  font-weight: 600;
}
.search-item .token-info span {
  display: block;
  font-size: 0.85em;
  color: #888;
  margin-top: 2px;
}
.search-item .token-chain {
  font-size: 0.8em;
  color: #aaa;
  background-color: #333;
  padding: 2px 6px;
  border-radius: 4px;
}

@media (max-width: 700px) {
    body {
        font-size: 15px;
    }
    .wrapper {
        padding: 40px 15px;
    }
    h1 {
        font-size: 2.2rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    header {
        padding: 60px 15px 50px;
    }
    header img {
        width: 180px;
    }
    .principles {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    #token-search {
        flex-direction: column;
        align-items: stretch;
    }
    .input-wrapper {
        flex-grow: 0; /* Убираем растягивание в мобильной версии */
    }
    #token-search button {
        margin-top: 8px;
    }
}

/* --- Стили для глобального скроллбара --- */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 6px;
    border: 3px solid #1a1a1a;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #ffc72c;
}

/* --- BUTTON STYLES --- */
.header-button-link {
  display: inline-block;
  margin-top: 30px;
  padding: 14px 32px;
  background: var(--accent);
  color: #000;
  border-radius: 8px;
  text-decoration: none;
  font-family: "Segoe UI", Arial, sans-serif;
  animation: breath 5s ease-in-out infinite;
  border: none;
  cursor: pointer;
}
.header-button-link:hover {
  color: #000;
  text-decoration: none;
}

/* --- RESPONSIVE STYLE FOR THE BACK-TO-HOME LINK --- */
.back-to-home-link {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #888;
    text-decoration: none;
    font-weight: 300;
    font-size: 1rem;
    transition: color 0.2s ease-in-out;
}
.back-to-home-link:hover {
    color: #eee;
}
@media (min-width: 701px) {
    .back-to-home-link {
        top: 30px;
        left: 30px;
    }
}

/* --- SCROLL TO TOP BUTTON --- */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 42px;
    height: 42px;
    background-color: rgba(255, 212, 71, 0.15);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.2s;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scroll-to-top:hover {
    background-color: rgba(255, 212, 71, 0.4);
    transform: translateY(-2px);
}
.scroll-to-top::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --- Styles for IDK Section Grid --- */
.idk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 28px;
    max-width: 800px;
    margin: 30px auto 0;
}
.idk-grid div {
    background: rgba(26, 26, 26, .6);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px;
    text-align: center;
    font-size: .95rem;
    color: var(--fg-1);
}
.idk-grid div h4 {
    color: var(--accent);
    margin-bottom: .4em;
}
.idk-grid button {
    margin-top: 8px;
    padding: 6px 14px;
    background: var(--accent);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: .8rem;
    color: #000;
}

/* --- Token Distribution Section Styles --- */
.token-distribution {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
}

.token-distribution h3 {
    color: var(--accent);
    font-size: 1.4rem;
    margin-bottom: 15px;
    text-align: center;
}

.distribution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.distribution-card {
    background: rgba(26, 26, 26, .8);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.distribution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), rgba(255, 212, 71, 0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.distribution-card:hover::before {
    opacity: 1;
}

.distribution-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,.4);
    border-color: rgba(255,212,71,.3);
}

.distribution-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.distribution-header h4 {
    color: var(--fg-0);
    font-size: 1.1rem;
    margin: 0;
}

.allocation-percent {
    background: var(--accent);
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.wallet-info {
    margin-bottom: 12px;
}

.wallet-address {
    display: block;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    padding: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--fg-1);
    word-break: break-all;
    margin-bottom: 10px;
    line-height: 1.4;
}

.copy-btn {
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.copy-btn:hover {
    background: rgba(255, 212, 71, 0.9);
    transform: translateY(-1px);
}

.copy-btn:active {
    transform: translateY(0);
}

.distribution-desc {
    color: var(--fg-1);
    font-size: 0.9rem;
    margin: 0;
    font-style: italic;
    opacity: 0.8;
}

/* Анимации для Token Distribution */
.token-distribution {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.token-distribution.visible {
    opacity: 1;
    transform: translateY(0);
}

.distribution-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.token-distribution.visible .distribution-card {
    opacity: 1;
    transform: translateY(0);
}

.distribution-card:nth-child(1) { transition-delay: 0.2s; }
.distribution-card:nth-child(2) { transition-delay: 0.4s; }
.distribution-card:nth-child(3) { transition-delay: 0.6s; }

/* --- Styles for Surveillance Feed --- */
.feed-box {
    position: relative;
    max-width: 800px;
    margin: 0 auto 40px;
    border: 4px solid #000;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.feed-box video {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none; /* Убирает возможность взаимодействия с плеером */
}

/* Скрытие стандартных элементов управления видео */
.feed-box video::-webkit-media-controls {
    display: none !important;
}

.feed-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    font: 600 0.8rem/1 monospace;
    color: #fff;
    text-shadow: 0 0 4px #000;
}

.feed-overlay .live {
    position: absolute;
    top: 8px;
    left: 10px;
    background: #e62429;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: .7rem;
    letter-spacing: .5px;
}

.feed-overlay .stamp {
    position: absolute;
    top: 8px;
    right: 12px;
}

.feed-overlay .label {
    position: absolute;
    bottom: 8px;
    right: 12px;
}

.feed-overlay .feed-logo {
    position: absolute;
    bottom: 8px;
    left: 12px;
    width: 42px;
    height: auto;
    opacity: .9;
}

/* --- Styles for Horizontally Scrolling Cards (Recent Logs) --- */
.cards-container {
    position: relative;
    overflow: hidden;
    margin: 0 -20px; /* Расширяем контейнер для fade эффектов */
}

.cards {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding: 0 20px 20px 20px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    cursor: grab;
    user-select: none;
    scroll-behavior: auto; /* Отключаем нативный smooth scroll */
    -webkit-overflow-scrolling: auto; /* Отключаем нативный touch scroll */
    will-change: scroll-position; /* Оптимизация для анимаций */
    overscroll-behavior-x: none; /* Отключаем нативное поведение скролла */
}

.cards::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.cards:active {
    cursor: grabbing;
}

/* Улучшенная визуальная обратная связь при перетаскивании */
.cards.dragging {
    scroll-behavior: auto;
}

.cards.dragging .card {
    pointer-events: none;
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

.cards.active {
    cursor: grabbing;
}

/* Профессиональное затухание по краям */
.cards-container::before,
.cards-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 20px;
    width: 120px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.3s ease;
    transform: scaleX(1);
}

.cards-container::before {
    left: 0;
    background: linear-gradient(
        to right,
        var(--bg-0) 0%,
        var(--bg-0) 15%,
        rgba(13, 13, 13, 0.95) 25%,
        rgba(13, 13, 13, 0.8) 40%,
        rgba(13, 13, 13, 0.5) 60%,
        rgba(13, 13, 13, 0.2) 80%,
        transparent 100%
    );
}

.cards-container::after {
    right: 0;
    background: linear-gradient(
        to left,
        var(--bg-0) 0%,
        var(--bg-0) 15%,
        rgba(13, 13, 13, 0.95) 25%,
        rgba(13, 13, 13, 0.8) 40%,
        rgba(13, 13, 13, 0.5) 60%,
        rgba(13, 13, 13, 0.2) 80%,
        transparent 100%
    );
}

/* Показываем затухание только когда есть контент для скролла */
.cards-container.scrollable::before,
.cards-container.scrollable::after {
    opacity: 1;
}

/* Динамическое управление затуханием в зависимости от позиции скролла */
.cards-container.at-start::before {
    opacity: 0;
}

.cards-container.at-end::after {
    opacity: 0;
}

/* Анимация при активном скролле - уменьшенный эффект */
.cards-container.scrolling::before,
.cards-container.scrolling::after {
    transform: scaleX(1.05); /* Уменьшили с 1.1 до 1.05 */
    opacity: 0.9; /* Увеличили с 0.8 до 0.9 для менее заметного изменения */
}

/* Тонкий эффект "магнитного поля" для карточек на краях */
.cards-container.scrollable .card:first-child {
    position: relative;
}

.cards-container.scrollable .card:first-child::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to right, rgba(255, 212, 71, 0.1), transparent);
    border-radius: 10px 0 0 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cards-container.scrollable .card:last-child {
    position: relative;
}

.cards-container.scrollable .card:last-child::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to left, rgba(255, 212, 71, 0.1), transparent);
    border-radius: 0 10px 10px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cards-container.scrolling .card:first-child::before,
.cards-container.scrolling .card:last-child::after {
    opacity: 1;
}
.card {
    flex: 0 0 280px;
    background: rgba(26, 26, 26, .70);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1); /* Очень маленькая базовая тень */
    padding: 22px;
    text-align: center;
    transition: transform .25s, box-shadow .25s;
    cursor: pointer;
}
.card:hover {
    transform: translateY(-2px); /* Уменьшили подъем */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15); /* Очень маленькая тень */
}
/* Оптимизация загрузки изображений */
.card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 18px;
    background: #111;
    transition: opacity 0.3s ease;
}

.card img[loading="lazy"] {
    opacity: 0;
    animation: imageFadeIn 0.5s ease forwards;
}

@keyframes imageFadeIn {
    to {
        opacity: 1;
    }
}

/* Оптимизация для мобильных устройств */
@media (max-width: 720px) {
    .card img {
        height: 140px;
    }
    
    /* Увеличиваем область затухания на мобильных */
    .cards-container::before,
    .cards-container::after {
        width: 150px;
    }
    
    /* Оптимизация производительности для мобильных */
    .cards {
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0); /* Принудительное аппаратное ускорение */
    }
    
    .card {
        transform: translateZ(0); /* Принудительное аппаратное ускорение */
        backface-visibility: hidden; /* Улучшение производительности */
    }
}
.card h3 {
    font-size: 1.15rem;
    color: var(--accent);
    margin-bottom: 10px;
}
.card p {
    font-size: .95rem;
    color: var(--fg-1);
}

/* --- Styles for Modal Window --- */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .8);
    display: none; /* Initially hidden */
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    transition: opacity .3s;
}
.overlay.active {
    display: flex; /* Show when active */
    opacity: 1;
}
.modal-box {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
    position: relative;
    padding: 26px 26px 36px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow: auto;
}
.modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: var(--fg-0);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Footer legal links — same color as footer text */
footer .footer-links{
  margin-top:10px;
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;                 /* расстояние между элементами, включая "•" */
}

/* ссылки наследуют цвет футера и имеют аккуратное подчёркивание */
footer .footer-links a{
  color: inherit;           /* тот же цвет, что и у остального текста футера */
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  opacity: .9;
  transition: opacity .2s ease, text-decoration-color .2s ease, text-decoration-style .2s ease;
}

footer .footer-links a:hover,
footer .footer-links a:focus-visible{
  opacity: 1;
  text-decoration-style: solid;
  outline: none;
}

/* Footer: компактные ссылки без точки-разделителя */
footer .footer-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

footer .footer-copy{ margin-bottom:8px; }

footer .footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;                 /* убираем лишние зазоры, разделитель зададим линией */
}

footer .footer-links a{
  color: inherit;        /* тот же цвет, что и текст футера */
  text-decoration: none; /* чисто, без пунктиров */
  padding: 0 10px;       /* небольшой внутренний отступ слева/справа */
  opacity: .9;
  transition: opacity .2s ease, text-decoration .2s ease;
}

footer .footer-links a:hover,
footer .footer-links a:focus-visible{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

/* аккуратный разделитель: тонкая вертикальная линия перед второй и далее ссылками */
footer .footer-links a + a{
  border-left: 1px solid rgba(255,255,255,.15);
}

/* ===== Legal page (links & text) ===== */
.legal-wrap a{
  color: inherit;                /* тот же цвет, что и текст на странице */
  text-decoration: underline;
  text-decoration-style: dotted; /* деликатное подчёркивание */
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  opacity: .95;
  transition: opacity .2s ease, text-decoration-style .2s ease;
}

.legal-wrap a:hover,
.legal-wrap a:focus-visible{
  opacity: 1;
  text-decoration-style: solid;  /* при ховере/фокусе — сплошная линия */
  outline: none;
}

.legal-wrap .legal-meta{
  color: var(--fg-2, #9aa0c3);   /* приглушённый серо-голубой */
}

.legal-wrap h1, .legal-wrap h2, .legal-wrap h3{
  color: var(--fg-0, #fff);
}

/* --- FlowRiver search bar --- */
.flowbar{
  display:flex;
  justify-content:center;
  gap:0;
  max-width:980px;
  margin:24px auto 0;
  padding:0 16px;
}

.flowbar__input{
  position:relative;
  flex:1;
  max-width:720px;
}

#token-input{
  width:100%;
  height:48px;
  padding:0 44px 0 16px;           /* место под крестик */
  border:1px solid rgba(0,0,0,.08);
  border-right:0;
  border-radius:12px 0 0 12px;
  background:#fff;
  outline:none;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  font:inherit;
}

.flowbar__btn{
  height:48px;
  padding:0 20px;
  border:1px solid rgba(0,0,0,.08);
  border-left:0;
  border-radius:0 12px 12px 0;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  color: #6b7280;              /* светло-серый (slate-500) */
  -webkit-appearance: none;    /* iOS: не красить как ссылку */
  appearance: none;
}

/* крестик очистки */
.flowbar__clear{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:26px; height:26px;
  border-radius:50%;
  border:0;
  background:rgba(15,23,42,.06);
  color:#64748b;
  display:none;                   /* показываем через JS когда есть текст */
  cursor:pointer;
  line-height:26px;
  font-size:18px;
}
.flowbar__clear:hover{ background:rgba(15,23,42,.12); }

/* выпадающие подсказки */
.flowbar__sugg{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 6px);
  z-index:50;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  overflow:hidden;
  display:none;                   /* показываем через JS */
}

/* пункт подсказки (рендерится JS) */
.sugg-item{ padding:10px 12px; cursor:pointer; display:flex; align-items:center; gap:10px; }
.sugg-item:hover{ background:rgba(99,102,241,0.08); }

/* мобильная мелкая адаптация */
@media (max-width:640px){
  .flowbar{ padding:0 12px; }
  #token-input, .flowbar__btn{ height:46px; }
}

/* --- FlowRiver search bar --- */
.flowbar{
  display:flex;
  justify-content:center;
  gap:0;
  max-width:980px;
  margin:24px auto 0;
  padding:0 16px;
}

.flowbar__input{
  position:relative;
  flex:1;
  max-width:720px;
}

#token-input{
  width:100%;
  height:48px;
  padding:0 44px 0 16px;           /* место под крестик */
  border:1px solid rgba(0,0,0,.08);
  border-right:0;
  border-radius:12px 0 0 12px;
  background:#fff;
  outline:none;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  font:inherit;
}

.flowbar__btn{
  height:48px;
  padding:0 20px;
  border:1px solid rgba(0,0,0,.08);
  border-left:0;
  border-radius:0 12px 12px 0;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}

.flowbar__btn:hover{ color:#475569; }   /* слегка темнее на hover */

#flow-hud{
  color:#6b7280;               /* вместо более тёмного */
}
#flow-hud #hud-header span,
#flow-hud #hud-body div{
  color:#6b7280;
}

/* крестик очистки */
.flowbar__clear{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:26px; height:26px;
  border-radius:50%;
  border:0;
  background:rgba(15,23,42,.06);
  color:#64748b;
  display:none;                   /* показываем через JS когда есть текст */
  cursor:pointer;
  line-height:26px;
  font-size:18px;
}
.flowbar__clear:hover{ background:rgba(15,23,42,.12); }

/* выпадающие подсказки */
.flowbar__sugg{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 6px);
  z-index:50;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  overflow:hidden;
  display:none;                   /* показываем через JS */
}

/* пункт подсказки (рендерится JS) */
.sugg-item{ padding:10px 12px; cursor:pointer; display:flex; align-items:center; gap:10px; }
.sugg-item:hover{ background:rgba(99,102,241,0.08); }

@media (max-width:640px){
  .flowbar{ padding:0 12px; }
  #token-input, .flowbar__btn{ height:46px; }
}

/* --- FlowRiver search bar FIX --- */
.flowbar{
  display:flex;
  flex-wrap:nowrap;            /* не переносить кнопку */
  align-items:stretch;
}

.flowbar__input{
  flex: 1 1 720px;             /* гибкая ширина, но с верхним пределом */
  max-width:720px;
  min-width: 260px;
  position:relative;
  z-index: 2;                  /* поверх волн и т.п. */
}

.flowbar__btn{
  flex: 0 0 auto;              /* запретить схлопывание */
  min-width: 140px;            /* гарантированная видимость текста */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;                  /* поверх подсказок */
}

/* чтобы инпут не «наезжал» на кнопку на узких ширинах */
@media (max-width: 640px){
  .flowbar{
    padding: 0 12px;
  }
  .flowbar__input{
    flex-basis: auto;
    max-width: none;
  }
  #token-input, .flowbar__btn{ height:46px; }
}

/* --- FlowRiver: make suggestions over HUD on mobile & desktop --- */
.flowbar{
  position: relative;
  z-index: 200;           /* весь поиск выше HUD */
}
.flowbar__input{
  position: relative;
  z-index: 220;           /* контейнер инпута выше HUD */
}
.flowbar__sugg{
  z-index: 300;           /* сама выпадашка ещё на слой выше */
}

/* iOS input-zoom fix: держим шрифт >= 16px на мобильных */
@media (max-width: 640px){
  #token-input,
  .flowbar__btn,
  .flowbar__sugg,
  .sugg-item { font-size: 16px; }
}

/* На всякий случай: Safari авто-апскейл текста */
html { -webkit-text-size-adjust: 100%; }

/* ===== DFN Tools (cards) ===== */
.wrapper--narrow{ max-width: 1200px; margin-left:auto; margin-right:auto; }

#dfn-tools h2{ margin-bottom: 12px; }

.tool-cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
  align-items: stretch;
  justify-content: center;
  margin-top: 18px;
}

.tool-card{
  background: rgba(26,26,26,.72);
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--dfn-radius);
  padding: 22px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tool-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  border-color: rgba(255,212,71,.45);
}

.tool-card h3{
  font-size: 1.1rem;
  color: var(--fg-0);
  margin-bottom: 6px;
}
.tool-card p{
  color: var(--fg-1);
  font-size: .98rem;
  margin: 6px 0 14px;
}

.tool-cta{
  justify-self: center; 
  margin-top: 14px;  
  display:inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--accent);
  color:#000;
  text-decoration:none;
  font-weight:600;
  transition: filter .2s ease;
}
.tool-cta:hover{ filter: brightness(1.06); }

.badge-new{
  display:inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 700;
  color: #000;
  background: var(--accent);
  border-radius: 999px;
}

/* mobile */
@media (max-width: 720px){
  .tool-cards{ grid-template-columns: 1fr; gap: 16px; }
  .tool-card{ padding: 18px; }
}

/* Logosmith: Concept A (Lab/Brutal) */
.ls-shell{ display:grid; grid-template-columns: 60px 1fr; gap:16px }
@media (max-width: 980px){ .ls-shell{ grid-template-columns: 1fr } }
.ls-rail{ position:relative; display:flex; align-items:center; justify-content:center; }
.ls-rail-in{ writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:1px; font-weight:700; color:rgba(255,212,71,.9); }
.ls-rail-in{ text-shadow:0 0 18px rgba(255,212,71,.18) }
.ls-main{ position:relative }
.ls-panes{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:16px }
@media (max-width: 980px){ .ls-panes{ grid-template-columns: 1fr } }
.ls-drop{ background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 6px, rgba(0,0,0,0) 6px 12px) , #0f131a; border:2px dashed rgba(255,212,71,.35) }
.ls-drop:hover{ border-color: rgba(255,212,71,.6) }
.ls-presets--sticker label.ls-preset{ position:relative; background:linear-gradient(180deg, rgba(22,22,22,.95), rgba(22,22,22,.82)); border:1px solid rgba(255,255,255,.12); border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.28); overflow:hidden; transform:none; transition:transform .2s ease, box-shadow .2s ease }
.ls-presets--sticker label.ls-preset:nth-child(2n){ transform:none }
.ls-presets--sticker label.ls-preset:hover{ transform:scale(1.01); box-shadow:0 10px 26px rgba(0,0,0,.36) }
.ls-presets--sticker label.ls-preset::before{ content:none !important; }
.ls-presets--sticker label.ls-preset::after{ content:none !important; }
.logosmith-wrap h3{ color:#ffd447; letter-spacing:.4px; text-transform:uppercase; font-weight:700 }
.ls-dock{ position:sticky; bottom:12px; margin-top:14px }
.ls-dock-in{ display:flex; gap:8px; align-items:center; background:rgba(13,16,22,.75); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 12px; box-shadow:0 8px 22px rgba(0,0,0,.35) }

/* Logosmith: Concept 1 (Neon/Terminal) */
.neo-shell{ display:grid; grid-template-columns: 320px 1fr; gap:18px }
@media (max-width: 980px){ .neo-shell{ grid-template-columns: 1fr } }
.neo-sidebar{ position:relative; padding:14px; background:linear-gradient(180deg, rgba(10,12,18,.85), rgba(10,12,18,.7)); border:1px solid rgba(255,255,255,.06); border-radius:14px; box-shadow: 0 16px 40px rgba(0,0,0,.35) }
.neo-brand{ font: 700 14px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color:#ffd447; margin-bottom:10px; letter-spacing:.6px }
.neo-title{ font: 600 12px/1 ui-monospace,Menlo,Consolas; color:#9aa0a6; text-transform:uppercase; letter-spacing:.8px; margin:6px 0 }
.neo-block{ margin-top:10px }
.neo-commands{ position:static; display:flex; flex-direction:column; gap:8px; margin-top:14px }
.neo-btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 12px; border:1px solid rgba(255,255,255,.1); border-radius:10px; color:#e6e9ef; background:rgba(16,20,28,.6); cursor:pointer }
.neo-btn:hover{ border-color:rgba(255,212,71,.5) }
.neo-btn--primary{ background: linear-gradient(180deg, #2b6fff, #194fcb); border:none }
.neo-status{ font: 12px/1.3 ui-monospace,Menlo,Consolas; color:#9aa0a6; min-height:18px }

.neo-main{ display:grid; gap:16px }
.neo-term{ background: radial-gradient(120% 120% at 0% 0%, rgba(23,27,39,.85), rgba(13,16,22,.78)); border:1px solid rgba(255,255,255,.06); border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.35); padding:12px }
.neo-term-header{ font: 700 12px/1 ui-monospace,Menlo,Consolas; color:#ffd447; letter-spacing:.8px; text-transform:uppercase; margin-bottom:8px }
.neo-drop{ min-height:280px; border:1.5px dashed rgba(255,212,71,.4); background: repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 12px, rgba(0,0,0,0) 12px 24px), #0f131a }

/* ===== АНИМАЦИИ ПОЯВЛЕНИЯ СЕКЦИЙ ===== */

/* Базовые классы для анимаций */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Специальные анимации для карточек инструментов */
.tool-card {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.22s ease, border-color 0.22s ease;
}

.tool-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Задержка для каждой карточки */
.tool-card:nth-child(1) { transition-delay: 0.1s; }
.tool-card:nth-child(2) { transition-delay: 0.2s; }
.tool-card:nth-child(3) { transition-delay: 0.3s; }
.tool-card:nth-child(4) { transition-delay: 0.4s; }

/* Анимации для IDK секции */
.idk-grid {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.idk-grid.visible {
    opacity: 1;
    transform: translateY(0);
}

.idk-grid div {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.idk-grid.visible div {
    opacity: 1;
    transform: translateY(0);
}

/* Задержка для каждого элемента IDK grid */
.idk-grid div:nth-child(1) { transition-delay: 0.1s; }
.idk-grid div:nth-child(2) { transition-delay: 0.2s; }
.idk-grid div:nth-child(3) { transition-delay: 0.3s; }
.idk-grid div:nth-child(4) { transition-delay: 0.4s; }
.idk-grid div:nth-child(5) { transition-delay: 0.5s; }
.idk-grid div:nth-child(6) { transition-delay: 0.6s; }

/* Эффект пульсации для заголовков секций */
@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 212, 71, 0.3);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 212, 71, 0.6), 0 0 25px rgba(255, 212, 71, 0.3);
    }
}

.fade-in-section.visible h2 {
    animation: titleGlow 3s ease-in-out infinite;
}

/* Улучшенные hover эффекты для карточек */
.tool-card.visible:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0,0,0,.4), 0 0 20px rgba(255,212,71,.15);
    border-color: rgba(255,212,71,.6);
}

/* Анимация для кнопок в карточках */
.tool-cta {
    position: relative;
    overflow: hidden;
}

.tool-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.tool-cta:hover::before {
    left: 100%;
}

/* Анимация для IDK элементов при hover */
.idk-grid div:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.3);
    border-color: rgba(255,212,71,.4);
}

/* Дополнительные визуальные эффекты - свечение секций убрано */

/* Эффект параллакса для заголовков */
.fade-in-section.visible h2 {
    position: relative;
    z-index: 2;
}

/* Улучшенная анимация для badge-new */
.badge-new {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 212, 71, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 4px rgba(255, 212, 71, 0.2);
    }
}

/* Эффект появления для текста в секциях */
.fade-in-section.visible p {
    animation: textFadeIn 0.8s ease-out 0.3s both;
}

@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Улучшенные hover эффекты для карточек логов */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
    transform: translateY(-2px); /* Уменьшили подъем */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15); /* Очень маленькая тень */
    border-color: rgba(255,212,71,.3);
}

/* Анимация для feed-box */
.fade-in-section.visible .feed-box {
    animation: feedBoxAppear 1s ease-out 0.5s both;
}

@keyframes feedBoxAppear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Анимация для кнопки в заголовке */
.header-button-link {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.header-button-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.header-button-link:hover::before {
    left: 100%;
}

.header-button-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255,212,71,.4);
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 720px) {
    .fade-in-section {
        transform: translateY(20px);
    }
    
    .tool-card {
        transform: translateY(30px) scale(0.98);
    }
    
    .idk-grid div {
        transform: translateY(15px);
    }
}