/* ═══════════════════════════════════════════════════════════════
   TRATOK.INFO — Responsive enhancements + search-box polish
   Loaded last so its rules win over main / refine / premium / investor.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ALL-PAGE UX POLISH — covers patterns that show up on every
   subpage (about, tokenomics, technology, faq, etc.) so the whole
   site feels consistent.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Page hero (non-homepage) — unified rhythm ─── */
.page-hero,
section.hero:not(.has-aurora) {
    text-align: center;
    padding: 64px 0 32px;
    position: relative;
}
section.hero:not(.has-aurora)::after {
    /* Subtle radial wash so subpage heros feel like heros, not just text */
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(46,205,167,0.08), transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(245,216,136,0.04), transparent 70%);
    pointer-events: none;
    z-index: -1;
}
@media (max-width: 768px) {
    .page-hero,
    section.hero:not(.has-aurora) {
        padding: 40px 0 20px;
    }
}
.page-hero h1,
section.hero h1 {
    margin-bottom: 14px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    /* Subpages don't need the giant homepage h1 */
    font-size: clamp(2rem, 5.2vw, 3.4rem);
}
section.hero:not(.has-aurora) .hero-lede {
    max-width: 680px;
    margin: 0 auto 24px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
}
section.hero:not(.has-aurora) .hero-eyebrow {
    margin-bottom: 18px;
}

/* Hero stats row — for pages with key facts (tokenomics, technology, fees) */
.hero-stats-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 22px auto 0;
    max-width: 760px;
}
.hero-stat-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    font-size: 0.84rem;
    color: rgba(255,255,255,0.7);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-stat-pill:hover {
    background: rgba(46,205,167,0.06);
    border-color: rgba(46,205,167,0.25);
}
.hero-stat-pill strong {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    color: #5DEAC9;
    font-size: 0.95rem;
}
@media (max-width: 640px) {
    .hero-stat-pill { font-size: 0.78rem; padding: 6px 12px; }
    .hero-stat-pill strong { font-size: 0.85rem; }
}

/* Bring breadcrumbs INSIDE the hero so it feels integrated */
section.hero + .container > .breadcrumbs {
    margin-top: -8px;
    margin-bottom: 8px;
    justify-content: center;
}

/* ─── Section dividers — subtle visual breaks instead of just padding ─── */
.section + .section::before,
.section-sm + .section::before,
.section + .section-sm::before {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    margin: 0 auto;
    transform: translateY(-32px);
}
@media (max-width: 768px) {
    .section + .section::before,
    .section-sm + .section::before,
    .section + .section-sm::before {
        transform: translateY(-22px);
    }
}

/* ─── Better callout / note boxes ─── */
.callout {
    display: flex;
    gap: 14px;
    padding: 18px 22px;
    background: rgba(46,205,167,0.05);
    border: 1px solid rgba(46,205,167,0.2);
    border-left: 3px solid #2ECDA7;
    border-radius: 0 12px 12px 0;
    margin: 20px 0;
}
.callout-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: #5DEAC9;
}
.callout p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
}
.callout p + p { margin-top: 8px; }

/* ─── Press card pattern (refactor of inline styles) ─── */
.press-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.press-card-source {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
}
.press-card-quote {
    border-left: 3px solid;
    padding: 14px 20px;
    background: rgba(255,255,255,0.03);
    margin: 16px 0;
    color: rgba(255,255,255,0.85);
    font-style: italic;
    border-radius: 0 12px 12px 0;
    font-size: 0.95rem;
    line-height: 1.6;
}
.press-card-quote.quote-ember { border-left-color: #E85D3A; }
.press-card-quote.quote-teal  { border-left-color: #2ECDA7; }
.press-card-quote.quote-amber { border-left-color: #F5A623; }
.press-card-quote.quote-violet{ border-left-color: #8B5CF6; }
.press-card-quote-cite {
    margin-top: 10px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    font-style: normal;
    display: block;
}
.press-card-summary {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
}

/* ─── Custom-bullet list pattern (used in many pages, was inline) ─── */
.bullet-list {
    list-style: none;
    padding: 0;
    margin: 14px 0;
    display: grid;
    gap: 8px;
}
.bullet-list li {
    position: relative;
    padding: 6px 0 6px 26px;
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
}
.bullet-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 6px;
    color: #2ECDA7;
    font-weight: 700;
}

/* ─── Container max-widths refinement ─── */
.container-narrow {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
}
.container-wide {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── Better blockquote in prose ─── */
.prose blockquote {
    background: rgba(232,93,58,0.05);
    border-left: 3px solid #E85D3A;
    padding: 18px 24px;
    border-radius: 0 12px 12px 0;
    margin: 24px 0;
}
.prose blockquote p {
    color: rgba(255,255,255,0.92);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ─── Better h2 separators in prose — gradient line under headings ─── */
.prose h2 {
    position: relative;
    padding-bottom: 14px;
    margin-top: 56px;
    margin-bottom: 18px;
    border-bottom: none !important;
}
.prose h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #2ECDA7, transparent);
}
.prose h2:first-child {
    margin-top: 0;
}

/* ─── Breadcrumbs — clean, low-key, on every subpage ─── */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
}
.breadcrumbs a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.15s ease;
}
.breadcrumbs a:hover {
    color: #5DEAC9;
}
.breadcrumbs svg {
    width: 12px;
    height: 12px;
    color: rgba(255,255,255,0.3);
}
.breadcrumbs span[aria-current] {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

/* ─── Tables — tokenomics, technology, fees, compare etc. ─── */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 24px;
    font-size: 0.92rem;
}
table th,
table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    vertical-align: top;
}
table th {
    font-family: 'Sora', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
table tr:last-child td {
    border-bottom: none;
}
table tr:hover td {
    background: rgba(255,255,255,0.025);
}
table code {
    font-size: 0.82rem;
    color: #5DEAC9;
    background: rgba(46,205,167,0.08);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Wrap tables in scrollable container on mobile so they don't break layout */
.table-wrap,
.section table {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
}
@media (max-width: 640px) {
    .section table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table th, table td { white-space: nowrap; padding: 10px 12px; font-size: 0.85rem; }
}

/* ─── FAQ accordion — used by faq.html, investors.html, etc. ─── */
.faq-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.faq-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
}
.faq-item[open] {
    background: rgba(46,205,167,0.04);
    border-color: rgba(46,205,167,0.25);
}
.faq-question {
    cursor: pointer;
    padding: 18px 22px;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #fff;
    transition: color 0.2s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover {
    color: #5DEAC9;
}
.faq-icon {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(46,205,167,0.12);
    border: 1px solid rgba(46,205,167,0.3);
    color: #5DEAC9;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.25s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), background 0.2s ease;
}
.faq-item[open] .faq-icon {
    transform: rotate(45deg);
    background: rgba(46,205,167,0.2);
}
.faq-answer {
    padding: 0 22px 20px 22px;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    font-size: 0.95rem;
}
.faq-answer p {
    margin-bottom: 12px;
}
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a {
    color: #5DEAC9;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

@media (max-width: 640px) {
    .faq-question { padding: 14px 16px; font-size: 0.95rem; gap: 12px; }
    .faq-answer { padding: 0 16px 16px 16px; font-size: 0.92rem; }
}

/* ─── Code / pre blocks — developers, technology pages ─── */
pre, code {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.85rem;
}
:not(pre) > code {
    background: rgba(46,205,167,0.1);
    color: #5DEAC9;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(46,205,167,0.18);
    font-size: 0.85em;
    word-break: break-word;
}
pre {
    background: #0A0E18;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 18px 20px;
    overflow-x: auto;
    line-height: 1.5;
    margin: 14px 0 22px;
    color: rgba(255,255,255,0.85);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    -webkit-overflow-scrolling: touch;
}
pre code {
    background: none;
    color: inherit;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    line-height: 1.6;
}
@media (max-width: 640px) {
    pre { padding: 14px 16px; font-size: 0.78rem; border-radius: 10px; }
}

/* ─── Glossary page ─── */
.gloss-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 8px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.gloss-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
}
.gloss-term {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 6px;
    color: #fff;
    flex-wrap: wrap;
}
.gloss-cat {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
}
.gloss-cat-tratok { background: rgba(245,216,136,0.15); color: #F5D888; border: 1px solid rgba(245,216,136,0.3); }
.gloss-cat-crypto { background: rgba(46,205,167,0.12); color: #5DEAC9; border: 1px solid rgba(46,205,167,0.3); }
.gloss-cat-travel { background: rgba(232,93,58,0.12); color: #FF8C6F; border: 1px solid rgba(232,93,58,0.3); }
.gloss-def {
    color: rgba(255,255,255,0.7);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* ─── Timeline (press, roadmap) ─── */
.timeline {
    position: relative;
    padding-left: 32px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, rgba(46,205,167,0.4), rgba(46,205,167,0.05));
}
.timeline-item {
    position: relative;
    padding: 0 0 28px 24px;
}
.timeline-dot {
    position: absolute;
    left: -32px;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(46,205,167,0.15);
    border: 2px solid rgba(46,205,167,0.5);
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    color: #5DEAC9;
    z-index: 2;
}
.timeline-item.current .timeline-dot {
    background: #2ECDA7;
    color: #0B0E17;
    box-shadow: 0 0 0 4px rgba(46,205,167,0.2);
}
.timeline-item.completed .timeline-dot {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.6);
}
.timeline-content {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px 18px;
}
.timeline-phase {
    font-family: 'Sora', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5DEAC9;
    margin-bottom: 8px;
}
.timeline-content h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}
.timeline-content p {
    color: rgba(255,255,255,0.72);
    margin-bottom: 8px;
}
.timeline-content ul {
    margin: 8px 0 0;
    padding-left: 18px;
    color: rgba(255,255,255,0.7);
    font-size: 0.92rem;
}
.timeline-content ul li { margin-bottom: 4px; }

/* ─── Lists across body content — cleaner bullets ─── */
.section ul:not(.footer-col ul):not(.timeline-content ul) {
    padding-left: 0;
    list-style: none;
}
.section ul:not(.footer-col ul):not(.timeline-content ul) li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
}
.section ul:not(.footer-col ul):not(.timeline-content ul) li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: rgba(46,205,167,0.7);
    border-radius: 50%;
}

/* Inline links inside body copy */
.section p a:not(.btn):not(.card-link):not(.trust-logo):not(.gloss-cat),
.faq-answer a:not(.btn) {
    color: #5DEAC9;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(46,205,167,0.4);
    text-decoration-thickness: 1px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.section p a:not(.btn):hover {
    color: #fff;
    text-decoration-color: #5DEAC9;
}

/* ─── Container max-widths — prevent text from going edge-to-edge on big monitors ─── */
.section .container > p,
.section .container > h2 + p,
.section-header p {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.container-narrow {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ─── Eyebrow chips — make them look like premium pills ─── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(46,205,167,0.1);
    border: 1px solid rgba(46,205,167,0.25);
    color: #5DEAC9;
    font-family: 'Sora', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ═══════════════════════════════════════════════════════════════
   PRESS · DISTRIBUTION + STATS GRID
   ═══════════════════════════════════════════════════════════════ */

.press-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 28px 0 36px;
}
@media (max-width: 768px) { .press-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.press-stat {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.press-stat:hover {
    background: rgba(46,205,167,0.06);
    border-color: rgba(46,205,167,0.25);
    transform: translateY(-2px);
}
.press-stat-value {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.6rem, 3.5vw, 2rem);
    font-weight: 800;
    background: linear-gradient(135deg, #F5D888, #2ECDA7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    margin-bottom: 6px;
}
.press-stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin-bottom: 2px;
}
.press-stat-sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.press-grid-heading {
    font-family: 'Sora', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.55);
    margin: 28px 0 14px;
}

.press-outlets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.press-outlet {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: #fff;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.press-outlet:hover {
    background: rgba(46,205,167,0.06);
    border-color: rgba(46,205,167,0.3);
    transform: translateY(-2px);
}
.press-outlet-name {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 6px;
    color: #fff;
}
.press-outlet-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
}
.press-outlet-meta .reach {
    color: rgba(255,255,255,0.6);
}
.press-outlet-meta .da {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.press-outlet-meta .da-high {
    background: rgba(46,205,167,0.15);
    color: #5DEAC9;
    border: 1px solid rgba(46,205,167,0.3);
}
.press-outlet-meta .da-mid {
    background: rgba(245,216,136,0.12);
    color: #F5D888;
    border: 1px solid rgba(245,216,136,0.25);
}
.press-outlet-meta .da-low {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.12);
}
.press-distribution-note {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.6;
    margin-top: 18px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid rgba(46,205,167,0.4);
    border-radius: 0 10px 10px 0;
}

/* Trust bar meta row (homepage) */
.trust-bar-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
}
.trust-bar-meta strong {
    color: rgba(255,255,255,0.9);
    font-weight: 700;
}
.trust-bar-meta .dot {
    color: rgba(255,255,255,0.25);
}
.trust-bar-meta a {
    color: #5DEAC9;
    text-decoration: none;
}
.trust-bar-meta a:hover {
    color: #fff;
}
@media (max-width: 640px) {
    .trust-bar-meta { font-size: 0.75rem; gap: 10px; }
    .trust-bar-meta .dot { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL LAYOUT POLISH — reduces compounding vertical padding,
   tightens rhythm, removes "ugly gaps" reported by users.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Section padding (was 96px top+bottom = 192 per section, 13 sections
       = ~2,500px of pure padding). Cut roughly in half. ─── */
.section { padding: 64px 0; }
.section-sm { padding: 40px 0; }
.section-lg { padding: 96px 0; }

@media (max-width: 768px) {
    .section { padding: 44px 0; }
    .section-sm { padding: 28px 0; }
    .section-lg { padding: 64px 0; }
}

/* ─── Section header — tighter bottom margin (was 56px) ─── */
.section-header {
    margin-bottom: 36px;
    max-width: 720px;
}
.section-header h2 { margin-bottom: 12px; }
.section-header .eyebrow { margin-bottom: 12px; }
@media (max-width: 768px) {
    .section-header { margin-bottom: 28px; }
}

/* ─── Hero — pull token panel closer, trim runaway top padding ─── */
.hero {
    padding: 40px 0 56px;
}
.hero h1 { margin-bottom: 18px; }
.hero-lede {
    margin-bottom: 24px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.trust-badges {
    margin: 18px auto 24px;
    max-width: 720px;
}
.hero-actions {
    margin-bottom: 28px;
}
.token-panel {
    margin-top: 36px !important;  /* was 56px */
}

@media (max-width: 768px) {
    .hero {
        padding: 32px 0 40px;
    }
    .hero h1 { margin-bottom: 14px; }
    .trust-badges { margin: 14px auto 20px; }
    .hero-actions { margin-bottom: 22px; }
    .token-panel { margin-top: 28px !important; }
}

/* ─── Trust bar — was bulky between hero and cards. ─── */
.trust-bar {
    padding: 28px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin: 0;
}
.trust-bar-label {
    margin-bottom: 14px;
}

/* ─── Quick navigation — 9 + 9 cards is HEAVY. Tighten the row gaps
       and the "Go deeper" sub-header so it doesn't double up. ─── */
.grid-3, .grid-4 { gap: 18px; }
@media (min-width: 768px) {
    .grid-3, .grid-4 { gap: 22px; }
}

.section-header.mt-lg {
    margin-top: 48px !important;
    margin-bottom: 24px;
}
@media (max-width: 768px) {
    .section-header.mt-lg {
        margin-top: 32px !important;
        margin-bottom: 18px;
    }
}

/* ─── Cards — tighter padding so 18 cards don't dominate. ─── */
.card {
    padding: 22px;
}
.card h3 {
    font-size: 1.08rem;
    margin-bottom: 8px;
}
.card p {
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 12px;
}
.card-icon {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    margin-bottom: 14px;
}
.card-link {
    font-size: 0.85rem;
}

/* ─── Floating coin in hero — was bleeding off-screen and into title.
       Reposition behind copy + dim further. ─── */
.floating-coin {
    opacity: 0.18;
    top: 40px;
    left: -40px;
    width: 200px;
    height: 200px;
}
@media (max-width: 1100px) {
    .floating-coin {
        opacity: 0.12;
        width: 160px;
        height: 160px;
        top: 20px;
        left: -60px;
    }
}

/* ─── Footer — cleaner, less padding ─── */
.site-footer {
    padding: 56px 0 24px;
}
@media (max-width: 768px) {
    .site-footer { padding: 40px 0 24px; }
}
.footer-grid {
    margin-bottom: 36px;
}
.footer-bottom {
    padding-top: 22px;
}

/* ─── CTA section — usually the last full section, give it presence
       without the giant 96px padding. ─── */
.cta-block {
    padding: 48px 32px;
}
@media (max-width: 768px) {
    .cta-block { padding: 32px 22px; }
}

/* ─── Aurora sections — they have decorative backgrounds; the pseudo-
       elements were sometimes adding extra bottom space. ─── */
.section-aurora {
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────
   0) SAFETY NET — if any animation/observer fails, content still shows.
   These rules guarantee no permanently-invisible sections.
   ───────────────────────────────────────────────────────────────── */

/* JS adds .visible to .reveal once intersected. After page load, fall
   back to fully-visible after 1s using a CSS-only animation so nothing
   ever stays at opacity 0 forever. */
@keyframes revealFallback {
    to { opacity: 1; transform: none; }
}
.reveal {
    animation: revealFallback 0s linear 1s forwards;
}
.reveal.visible {
    animation: none;
    opacity: 1;
    transform: none;
}

/* Same belt-and-suspenders for fade-up classes used in the hero. */
.fade-up {
    animation-fill-mode: forwards !important;
}

/* CARDS / STATS / FEATURE ROWS / TIMELINE / FAQ — these get JS-driven
   fadeUp animations on intersection. We FORCE them visible by default
   so any stale or failing observer never leaves them blank. The fadeUp
   keyframe still runs visually when JS triggers it (animation property
   wins during its run-time and reverts to our fallback after). */
.card,
.stat-block,
.feature-row,
.timeline-item,
.faq-item {
    opacity: 1 !important;
}
/* During the JS-set animation, allow the keyframe to control opacity */
.card[style*="animation"],
.stat-block[style*="animation"],
.feature-row[style*="animation"],
.timeline-item[style*="animation"],
.faq-item[style*="animation"] {
    opacity: initial !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal, .fade-up {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   1) SEARCH BOX — display, layering, mobile UX
   The token-panel below uses backdrop-filter which creates its own
   stacking context. We push search-box well above it and use
   isolation: isolate so the dropdown is guaranteed on top.
   ───────────────────────────────────────────────────────────────── */

.search-box {
    position: relative;
    z-index: 100;
    isolation: isolate;
    margin: 28px auto 0;
    max-width: 600px;
    width: 100%;
}

/* When dropdown is showing, lift the entire search column even higher */
.search-box:has(.search-results.active) {
    z-index: 200;
}

.search-input {
    width: 100%;
    padding: 16px 22px 16px 52px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: 0.98rem;
    outline: none;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    -webkit-appearance: none;
    appearance: none;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

.search-input:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.search-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--teal, #2ECDA7);
    box-shadow: 0 0 0 4px rgba(46, 205, 167, 0.18), 0 4px 24px rgba(0, 0, 0, 0.25);
}

.search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    z-index: 6;
}

.search-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    /* Solid dark background so any element behind is fully obscured —
       backdrop-filter alone wasn't enough behind the token-panel's
       coloured backdrop blur. */
    background: #0E1320;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    max-height: min(60vh, 480px);
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.search-results.active {
    display: block;
    animation: searchFadeIn 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes searchFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Belt-and-suspenders: ensure no parent container clips the dropdown.
   .hero / .container have `position: relative` from main.css; we keep
   that. But if any older rule sets overflow:hidden on the hero, undo it
   only on the homepage's hero container. */
.hero { overflow: visible; }

.search-result {
    display: block;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease;
}

.search-result:last-child { border-bottom: none; }

.search-result:hover,
.search-result:focus {
    background: rgba(46, 205, 167, 0.08);
    color: #fff;
    outline: none;
}

.search-result-title {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.search-result-meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

.search-empty {
    padding: 28px 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
}

/* Search box on mobile — full-width with safe-area padding */
@media (max-width: 640px) {
    .search-box {
        margin: 24px 0 0;
        padding: 0 4px;
    }
    .search-input {
        padding: 13px 18px 13px 46px;
        font-size: 0.95rem;
        border-radius: 14px;
    }
    .search-icon {
        left: 16px;
        width: 18px;
        height: 18px;
    }
    .search-results {
        left: -4px;
        right: -4px;
        border-radius: 14px;
        max-height: 55vh;
    }
    .search-result { padding: 12px 16px; }
    .search-result-title { font-size: 0.92rem; }
    .search-result-meta { font-size: 0.75rem; }
}

/* ─────────────────────────────────────────────────────────────────
   2) HERO — mobile sizing, padding, floating coin
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .hero {
        padding-top: 56px;
        padding-bottom: 24px;
    }
    .hero h1 {
        font-size: clamp(1.85rem, 8vw, 2.6rem);
        line-height: 1.12;
        letter-spacing: -0.025em;
    }
    .hero-lede {
        font-size: 1rem;
        line-height: 1.6;
        max-width: 100%;
    }
    .hero-actions {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .hero-eyebrow .eyebrow {
        font-size: 0.7rem;
    }
}

@media (max-width: 640px) {
    /* Hide the decorative floating coin on small screens — it overlaps copy */
    .floating-coin {
        display: none !important;
    }
    /* Aurora effects pared back for performance */
    .aurora-orb { opacity: 0.4; }
}

/* ─────────────────────────────────────────────────────────────────
   3) TRUST BADGES — wrap better on mobile
   ───────────────────────────────────────────────────────────────── */

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

@media (max-width: 640px) {
    .trust-badges {
        gap: 6px;
    }
    .trust-badge {
        font-size: 0.72rem;
        padding: 6px 12px;
        border-radius: 999px;
    }
    .trust-badge svg {
        width: 12px;
        height: 12px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   4) TOKEN PANEL — mobile grid, contract row, action buttons
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .token-panel {
        margin-top: 32px;
        padding: 24px 18px;
        border-radius: 18px;
    }
    .token-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .token-panel-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .token-stat {
        padding: 14px;
    }
    .token-stat-value {
        font-size: 1.4rem;
    }
    .token-contract-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .token-contract-row label {
        font-size: 0.7rem;
        letter-spacing: 0.08em;
    }
    .token-contract-addr {
        font-size: 0.72rem;
        word-break: break-all;
        line-height: 1.4;
    }
    .copy-btn {
        align-self: flex-start;
    }
    .token-panel-actions {
        flex-direction: column;
        gap: 10px;
    }
    .token-panel-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .sparkline-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .sparkline-wrap .sparkline {
        width: 100%;
        height: auto;
        max-width: 320px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   5) HEADER / NAV — declutter on mobile
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 968px) {
    .header-actions .btn-ghost.btn-sm {
        display: none; /* Whitepaper button — drawer has it instead */
    }
}

@media (max-width: 480px) {
    .header-inner {
        padding-left: 14px;
        padding-right: 14px;
    }
    .brand {
        gap: 8px;
        font-size: 0.95rem;
    }
    .brand-tag {
        display: none;
    }
    .brand-mark img {
        width: 28px;
        height: 28px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   6) CARDS — smoother lift, softer corners on mobile
   ───────────────────────────────────────────────────────────────── */

.card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.card:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

@media (max-width: 640px) {
    .card {
        padding: 22px 20px;
        border-radius: 16px;
    }
    .card h3, .card h4 {
        font-size: 1.05rem;
    }
    .card p {
        font-size: 0.92rem;
        line-height: 1.55;
    }
    .card-icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        margin-bottom: 14px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   7) BUTTONS — better tap targets
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .btn {
        min-height: 44px;
        padding: 12px 20px;
    }
    .btn-lg {
        min-height: 50px;
        padding: 14px 24px;
        font-size: 0.98rem;
    }
    .btn-sm {
        min-height: 36px;
        padding: 8px 16px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   8) FOOTER — single column on small screens, centered bottom row
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
    .footer-social {
        justify-content: center;
    }
    .footer-copy {
        font-size: 0.8rem;
    }
}

/* ─────────────────────────────────────────────────────────────────
   9) SECTIONS / TYPOGRAPHY — fluid headings, comfortable reading
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .section { padding: 56px 0; }
    .section-header { margin-bottom: 36px; }
    .section-header h2 {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
        line-height: 1.15;
    }
    .section-header p {
        font-size: 0.98rem;
    }
}

/* Body text comfort */
@media (max-width: 640px) {
    p { line-height: 1.65; }
    h1 { letter-spacing: -0.025em; }
    h2 { letter-spacing: -0.02em; }
}

/* ─────────────────────────────────────────────────────────────────
   10) TRUST BAR — stack logos cleanly on mobile
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .trust-bar {
        padding: 24px 16px;
    }
    .trust-bar-label {
        font-size: 0.7rem;
        margin-bottom: 16px;
    }
    .trust-logos {
        flex-wrap: wrap;
        gap: 16px 24px;
        justify-content: center;
    }
    .trust-logo {
        font-size: 0.85rem;
    }
}

/* ─────────────────────────────────────────────────────────────────
   11) MOBILE CTA BAR — make sure it doesn't overlap content
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* If a sticky bottom CTA exists, give last section breathing room */
    .mobile-cta-bar {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    .site-footer {
        padding-bottom: 96px; /* avoid mobile CTA overlap */
    }
}

/* ─────────────────────────────────────────────────────────────────
   12) GLOBAL POLISH — scrollbar, focus states, smooth scroll
   ───────────────────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* Better keyboard focus visibility */
:focus-visible {
    outline: 2px solid var(--teal-glow, #5DEAC9);
    outline-offset: 3px;
    border-radius: 4px;
}

a:focus-visible,
button:focus-visible {
    outline-offset: 4px;
}

/* Keep search input's pretty focus instead of generic outline */
.search-input:focus-visible {
    outline: none;
}

/* Subtle scrollbar styling */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(11, 14, 23, 0.5); }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    border: 2px solid rgba(11, 14, 23, 0.5);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* Selection */
::selection {
    background: rgba(46, 205, 167, 0.35);
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────────
   13) IMAGES — no horizontal overflow on tiny viewports
   ───────────────────────────────────────────────────────────────── */

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Container safety on really narrow viewports */
@media (max-width: 360px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   14) RTL TWEAKS for Arabic
   ───────────────────────────────────────────────────────────────── */

[dir="rtl"] .search-icon {
    left: auto;
    right: 22px;
}
[dir="rtl"] .search-input {
    padding: 16px 52px 16px 22px;
}
@media (max-width: 640px) {
    [dir="rtl"] .search-icon { right: 16px; left: auto; }
    [dir="rtl"] .search-input { padding: 13px 46px 13px 18px; }
}



li.bullet-li,
li.bullet-check,
li.bullet-cross,
li.bullet-dot,
li.bullet-dot-ember {
    position: relative;
    padding: 6px 0 6px 26px;
    margin-bottom: 4px;
    list-style: none;
}
li.bullet-li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 6px;
    color: #2ECDA7;
    font-weight: 700;
}
li.bullet-check::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 4px;
    color: #2ECDA7;
    font-weight: 700;
    font-size: 1.05rem;
}
li.bullet-cross::before {
    content: '✗';
    position: absolute;
    left: 0;
    top: 4px;
    color: #E85D3A;
    font-weight: 700;
    font-size: 1.05rem;
}
li.bullet-dot::before,
li.bullet-dot-ember::before {
    content: '•';
    position: absolute;
    left: 4px;
    top: 4px;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
}
li.bullet-dot::before { color: #2ECDA7; }
li.bullet-dot-ember::before { color: #E85D3A; }

/* ═══════════════════════════════════════════════════════════════
   ALLOCATION TABLE — token distribution breakdown
   ═══════════════════════════════════════════════════════════════ */
.alloc-table {
    display: grid;
    gap: 14px;
}
.alloc-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(80px, 200px);
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.alloc-row:hover {
    background: var(--glass-hover);
    transform: translateX(2px);
}
.alloc-pct {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    text-align: right;
    letter-spacing: -0.01em;
}
.alloc-detail {
    min-width: 0;
}
.alloc-name {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--snow);
    margin-bottom: 4px;
}
.alloc-note {
    font-size: 0.85rem;
    color: var(--ghost);
    line-height: 1.45;
}
.alloc-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.alloc-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.8s var(--ease-out);
}

@media (max-width: 600px) {
    .alloc-row {
        grid-template-columns: 60px 1fr;
        gap: 14px;
        padding: 14px;
    }
    .alloc-bar {
        grid-column: 1 / -1;
    }
    .alloc-pct {
        font-size: 1.25rem;
    }
}

/* RTL: bar fills from right, hover slides the other way */
[dir="rtl"] .alloc-row:hover { transform: translateX(-2px); }
[dir="rtl"] .alloc-pct { text-align: left; }