/**
 * CoinFUT — main.css
 *
 * Design system + layout for the entire theme. Loaded after style.css.
 * Token names are kept stable so Customizer can override via <style id="cf-design-tokens">.
 */

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */
:root {
        --cf-charcoal: #0E1116;
        --cf-navy: #1B2230;
        --cf-accent: #19E682;

        --cf-white: #FFFFFF;
        --cf-gray-50: #F6F8FA;
        --cf-gray-100: #EEF1F4;
        --cf-gray-200: #DCE1E6;
        --cf-gray-300: #B6BECC;
        --cf-gray-400: #94A3B8;
        --cf-gray-500: #64748B;
        --cf-gray-600: #475569;
        --cf-gray-700: #334155;
        --cf-gray-800: #1E293B;

        --cf-radius: 14px;
        --cf-radius-sm: 8px;
        --cf-radius-lg: 22px;
        --cf-radius-pill: 999px;

        --cf-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
        --cf-shadow:    0 8px 28px rgba(15, 23, 42, 0.08);
        --cf-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.16);
        --cf-shadow-accent: 0 8px 30px rgba(25, 230, 130, 0.24);

        --cf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --cf-font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

        --cf-max-w: 1200px;

        --cf-header-h: 72px;
        --cf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
        --cf-dur: 200ms;

        --cf-success: #19E682;
        --cf-warning: #F0B400;
        --cf-error:   #E2435A;
}

/* ---------------------------------------------------------------------------
   Reset (re-add more aggressively than the one in style.css)
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
        margin: 0;
        font-family: var(--cf-font);
        font-size: 16px;
        line-height: 1.6;
        color: var(--cf-charcoal);
        background: var(--cf-white);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: "cv05", "ss01", "kern";
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--cf-charcoal); }
img, svg { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* ---------------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------------- */
.cf-container {
        width: 100%;
        max-width: var(--cf-max-w);
        margin: 0 auto;
        padding: 0 24px;
}
@media (max-width: 768px) {
        .cf-container { padding: 0 20px; }
}
@media (max-width: 414px) {
        .cf-container { padding: 0 16px; }
}

.cf-skip-link {
        position: absolute;
        left: 0;
        top: 0;
        background: var(--cf-charcoal);
        color: var(--cf-white) !important;
        padding: 10px 18px;
        z-index: 100;
        transform: translateY(-120%);
        transition: transform 0.2s var(--cf-ease);
        font-weight: 600;
        font-size: 14px;
        border-radius: 0 0 8px 0;
}
.cf-skip-link:focus {
        transform: translateY(0);
}

.cf-page-header {
        background: linear-gradient(180deg, var(--cf-gray-50), var(--cf-white));
        padding: 56px 0 32px;
        border-bottom: 1px solid var(--cf-gray-100);
}
.cf-page-header-hero {
        background: linear-gradient(180deg, #0E1116, #1B2230);
        color: var(--cf-white);
        padding: 88px 0 56px;
        border-bottom: 1px solid var(--cf-gray-800);
}
.cf-page-header-hero .cf-breadcrumbs a,
.cf-page-header-hero .cf-breadcrumbs { color: rgba(255,255,255,0.65); }
.cf-page-header-hero .cf-breadcrumbs .cf-crumb-sep { color: rgba(255,255,255,0.3); }
.cf-page-title {
        font-size: clamp(28px, 4vw, 42px);
        font-weight: 700;
        letter-spacing: -0.02em;
        margin: 12px 0 0;
}
.cf-page-subtitle {
        font-size: 17px;
        color: rgba(255, 255, 255, 0.75);
        margin: 14px 0 0;
        max-width: 640px;
        line-height: 1.55;
}
.cf-page-header-hero .cf-page-title { color: #fff; }

.cf-main {
        min-height: 60vh;
        padding: 56px 0 80px;
}

/* ---------------------------------------------------------------------------
   Notice bar (under header)
   --------------------------------------------------------------------------- */
.cf-notice-bar {
        background: var(--cf-charcoal);
        color: var(--cf-white);
        text-align: center;
        font-size: 13px;
        padding: 8px 16px;
        font-weight: 500;
        letter-spacing: 0.01em;
}
@media (max-width: 768px) {
        .cf-notice-bar { font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.cf-site-header {
        position: sticky;
        top: 0;
        z-index: 80;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        border-bottom: 1px solid var(--cf-gray-100);
        transition: box-shadow var(--cf-dur) var(--cf-ease), background var(--cf-dur) var(--cf-ease);
}
.cf-site-header-compact {
        box-shadow: var(--cf-shadow-sm);
}
.cf-header-inner {
        display: flex;
        align-items: center;
        gap: 32px;
        height: var(--cf-header-h);
        padding: 0 24px;
        max-width: var(--cf-max-w);
        margin: 0 auto;
}
.cf-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
}
.cf-mobile-toggle {
        display: none;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: var(--cf-gray-100);
        color: var(--cf-charcoal);
        align-items: center;
        justify-content: center;
}
.cf-mobile-toggle .cf-icon-close { display: none; }
.cf-mobile-toggle.is-active .cf-icon-menu { display: none; }
.cf-mobile-toggle.is-active .cf-icon-close { display: inline-block; }

.cf-logo {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        font-size: 21px;
        letter-spacing: -0.02em;
        color: var(--cf-charcoal);
}
.cf-logo:hover { color: var(--cf-charcoal); }
.cf-logo-mark { display: inline-flex; color: var(--cf-charcoal); }
.cf-logo-text { color: var(--cf-charcoal); }
.cf-logo img { max-height: 36px; width: auto; }

.cf-primary-nav { flex: 1; }
.cf-primary-menu,
.cf-mobile-menu-list {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
}
.cf-primary-menu > li {
        position: relative;
}
.cf-primary-menu .cf-menu-link {
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        font-weight: 500;
        font-size: 14px;
        color: var(--cf-gray-700);
        border-radius: var(--cf-radius-sm);
        transition: color var(--cf-dur) var(--cf-ease), background var(--cf-dur) var(--cf-ease);
}
.cf-primary-menu .cf-menu-link:hover,
.cf-primary-menu .menu-item.is-active > .cf-menu-link,
.cf-primary-menu .menu-item.current-menu-item > .cf-menu-link {
        color: var(--cf-charcoal);
        background: var(--cf-gray-100);
}

.cf-sub-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        min-width: 220px;
        background: var(--cf-white);
        border-radius: var(--cf-radius);
        box-shadow: var(--cf-shadow);
        padding: 8px;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity var(--cf-dur) var(--cf-ease), transform var(--cf-dur) var(--cf-ease);
        pointer-events: none;
        display: block !important;
}
.cf-sub-menu.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
}
.cf-sub-menu li { width: 100%; }
.cf-sub-menu .cf-menu-link {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
}

.cf-menu-toggle {
        background: transparent;
        border: 0;
        padding: 4px;
        color: var(--cf-gray-500);
        display: inline-flex;
        align-items: center;
        margin-left: -4px;
}
.cf-menu-toggle .cf-icon-chevron { transition: transform var(--cf-dur) var(--cf-ease); }
.cf-menu-toggle[aria-expanded="true"] .cf-icon-chevron { transform: rotate(180deg); }

.cf-header-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
}
.cf-account-link,
.cf-cart-link {
        width: 40px;
        height: 40px;
        border-radius: var(--cf-radius-sm);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: var(--cf-charcoal);
        position: relative;
        transition: background var(--cf-dur) var(--cf-ease), color var(--cf-dur) var(--cf-ease);
}
.cf-account-link:hover,
.cf-cart-link:hover {
        background: var(--cf-gray-100);
        color: var(--cf-charcoal);
}
.cf-cart-count {
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 18px;
        height: 18px;
        border-radius: var(--cf-radius-pill);
        background: var(--cf-accent);
        color: var(--cf-charcoal);
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        line-height: 1;
}
.cf-header-cta { margin-left: 8px; }

/* Mobile menu */
.cf-mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        visibility: hidden;
        pointer-events: none;
}
.cf-mobile-menu.is-open { visibility: visible; pointer-events: auto; }
.cf-mobile-menu-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: min(360px, 88%);
        height: 100%;
        background: var(--cf-white);
        padding: 80px 20px 24px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 280ms var(--cf-ease);
        box-shadow: var(--cf-shadow-lg);
}
.cf-mobile-menu.is-open .cf-mobile-menu-inner { transform: translateX(0); }
.cf-mobile-menu-list {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
}
.cf-mobile-menu-list li { width: 100%; }
.cf-mobile-menu .cf-menu-link {
        width: 100%;
        padding: 14px 16px;
        font-size: 16px;
        font-weight: 500;
        border-radius: var(--cf-radius-sm);
        color: var(--cf-charcoal);
}
.cf-mobile-menu .cf-menu-link:hover { background: var(--cf-gray-100); }
.cf-mobile-menu .cf-sub-menu {
        position: static;
        box-shadow: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 280ms var(--cf-ease);
        padding: 0 16px;
}
.cf-mobile-menu .cf-sub-menu.is-open { max-height: 600px; }
.cf-mobile-menu .cf-menu-toggle { display: none; }
.cf-mobile-menu-actions { margin-top: 24px; }
.cf-mobile-menu-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(14, 17, 22, 0.55);
        opacity: 0;
        transition: opacity 280ms var(--cf-ease);
}
.cf-mobile-menu.is-open .cf-mobile-menu-backdrop { opacity: 1; }

body.cf-mobile-open { overflow: hidden; }

@media (max-width: 900px) {
        .cf-primary-nav { display: none; }
        .cf-mobile-toggle { display: inline-flex; }
        .cf-header-inner { gap: 16px; }
        .cf-header-cta { display: none; }
        .cf-header-right { margin-left: auto; }
}
@media (max-width: 414px) {
        .cf-header-inner { padding: 0 16px; height: 64px; }
        :root { --cf-header-h: 64px; }
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.cf-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 22px;
        font-weight: 600;
        font-size: 14.5px;
        line-height: 1;
        border-radius: var(--cf-radius-pill);
        transition: background var(--cf-dur) var(--cf-ease), color var(--cf-dur) var(--cf-ease), box-shadow var(--cf-dur) var(--cf-ease), transform 120ms var(--cf-ease);
        border: 1.5px solid transparent;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
}
.cf-btn > span { line-height: 1; }
.cf-btn-primary {
        background: var(--cf-accent);
        color: var(--cf-charcoal);
        box-shadow: var(--cf-shadow-accent);
}
.cf-btn-primary:hover { background: #1BF390; color: var(--cf-charcoal); transform: translateY(-1px); box-shadow: 0 12px 32px rgba(25,230,130,0.32); }
.cf-btn-primary:active { transform: translateY(0); }
.cf-btn-secondary {
        background: transparent;
        color: var(--cf-charcoal);
        border-color: var(--cf-gray-200);
}
.cf-btn-secondary:hover { background: var(--cf-gray-100); border-color: var(--cf-gray-300); }
.cf-btn-ghost {
        background: transparent;
        color: var(--cf-white);
        border-color: rgba(255,255,255,0.25);
}
.cf-btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--cf-white); border-color: rgba(255,255,255,0.4); }
.cf-btn-disabled {
        background: var(--cf-gray-200);
        color: var(--cf-gray-500);
        cursor: not-allowed;
        opacity: 0.8;
}
.cf-btn-lg { padding: 16px 28px; font-size: 16px; }
.cf-btn-sm { padding: 9px 16px; font-size: 13px; }
.cf-btn-block { width: 100%; }

.cf-btn.is-loading {
        pointer-events: none;
        color: transparent !important;
        position: relative;
}
.cf-btn.is-loading::after {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid currentColor;
        border-top-color: transparent;
        animation: cf-spin 0.7s linear infinite;
        color: var(--cf-charcoal);
}
.cf-btn-primary.is-loading::after { color: var(--cf-charcoal); }
@keyframes cf-spin { to { transform: rotate(360deg); } }

.cf-btn.is-added::before { content: ''; }

/* ---------------------------------------------------------------------------
   Hero section
   --------------------------------------------------------------------------- */
.cf-hero {
        background: linear-gradient(180deg, #0E1116 0%, #1B2230 100%);
        color: var(--cf-white);
        padding: 64px 0 88px;
        overflow: hidden;
        position: relative;
}
.cf-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(900px 400px at 80% 0%, rgba(25, 230, 130, 0.12), transparent 60%);
        pointer-events: none;
}
.cf-hero-inner {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 60px;
        align-items: center;
        position: relative;
}
.cf-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.7);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin: 0 0 20px;
}
.cf-hero-eyebrow-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--cf-accent);
        box-shadow: 0 0 0 4px rgba(25, 230, 130, 0.18);
}
.cf-hero-title {
        font-size: clamp(36px, 5vw, 60px);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.05;
        margin: 0 0 20px;
}
.cf-hero-subtitle {
        font-size: clamp(17px, 1.5vw, 20px);
        color: rgba(255, 255, 255, 0.78);
        margin: 0 0 32px;
        max-width: 560px;
        line-height: 1.55;
}
.cf-hero-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 36px;
}
.cf-hero-mini {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
}
.cf-hero-mini li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13.5px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.78);
}
.cf-hero-mini .cf-icon { color: var(--cf-accent); }

.cf-hero-visual {
        position: relative;
        min-height: 360px;
        display: grid;
        place-items: center;
}
.cf-hero-glow {
        position: absolute;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(25, 230, 130, 0.32), transparent 70%);
        filter: blur(2px);
        transform: translateY(var(--cf-hero-y, 0));
        transition: transform 200ms var(--cf-ease);
}
.cf-hero-coins { position: relative; width: 100%; height: 100%; }
.cf-hero-coin {
        position: absolute;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.3));
        transform: translateY(var(--cf-hero-y, 0));
        transition: transform 200ms var(--cf-ease);
}
.cf-hero-coin-1 { top: 0; left: 12%; transform: translateY(0) rotate(-8deg); }
.cf-hero-coin-1 .cf-coin-icon { width: 200px; height: 200px; }
.cf-hero-coin-2 { bottom: 0; right: 8%; }
.cf-hero-coin-2 .cf-coin-icon { width: 220px; height: 220px; }
.cf-hero-coin-3 { top: 30%; right: 30%; }
.cf-hero-coin-3 .cf-coin-icon { width: 160px; height: 160px; }
.cf-hero-pattern {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0.6;
}

@media (max-width: 900px) {
        .cf-hero { padding: 40px 0 56px; }
        .cf-hero-inner { grid-template-columns: 1fr; gap: 40px; }
        .cf-hero-visual { min-height: 280px; order: -1; }
        .cf-hero-coin-1 .cf-coin-icon { width: 150px; height: 150px; }
        .cf-hero-coin-2 .cf-coin-icon { width: 160px; height: 160px; }
        .cf-hero-coin-3 .cf-coin-icon { width: 110px; height: 110px; }
}
@media (max-width: 560px) {
        .cf-hero-mini { flex-direction: column; gap: 8px; }
}

/* ---------------------------------------------------------------------------
   Trust section
   --------------------------------------------------------------------------- */
.cf-trust {
        padding: 56px 0;
        background: var(--cf-white);
}
.cf-trust-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
}
.cf-trust-card {
        background: var(--cf-gray-50);
        border: 1px solid var(--cf-gray-100);
        border-radius: var(--cf-radius);
        padding: 28px 24px;
        transition: border-color var(--cf-dur) var(--cf-ease), transform var(--cf-dur) var(--cf-ease), box-shadow var(--cf-dur) var(--cf-ease);
}
.cf-trust-card:hover {
        border-color: var(--cf-gray-200);
        transform: translateY(-2px);
        box-shadow: var(--cf-shadow);
}
.cf-trust-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--cf-charcoal);
        color: var(--cf-accent);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
}
.cf-trust-title { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.cf-trust-desc { font-size: 14px; color: var(--cf-gray-500); line-height: 1.55; }
@media (max-width: 900px) {
        .cf-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
        .cf-trust-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Section header
   --------------------------------------------------------------------------- */
.cf-section-header {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 36px;
}
.cf-section-header-center { margin-left: auto; margin-right: auto; }
.cf-section-eyebrow {
        display: inline-block;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--cf-accent);
        margin-bottom: 12px;
}
.cf-section-title {
        font-size: clamp(26px, 3vw, 36px);
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-bottom: 14px;
}
.cf-section-subtitle {
        font-size: 16px;
        color: var(--cf-gray-500);
        line-height: 1.55;
}
.cf-section-actions {
        display: flex;
        justify-content: center;
        margin-top: 32px;
}

/* ---------------------------------------------------------------------------
   Coins grid
   --------------------------------------------------------------------------- */
.cf-coins {
        padding: 72px 0;
        background: linear-gradient(180deg, var(--cf-white), var(--cf-gray-50));
}
.cf-coins-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
}
.cf-coin-card,
.cf-product-card .cf-product-body + * { /* placeholder, replaced below */
}

.cf-coin-card {
        background: var(--cf-white);
        border: 1px solid var(--cf-gray-100);
        border-radius: var(--cf-radius);
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        transition: border-color var(--cf-dur) var(--cf-ease), transform var(--cf-dur) var(--cf-ease), box-shadow var(--cf-dur) var(--cf-ease);
        position: relative;
}
.cf-coin-card:hover {
        border-color: var(--cf-gray-200);
        transform: translateY(-3px);
        box-shadow: var(--cf-shadow);
}
.cf-coin-card-popular {
        border-color: var(--cf-accent);
        background: linear-gradient(180deg, #fff, #F4FFFB);
        box-shadow: 0 12px 32px rgba(25, 230, 130, 0.12);
}
.cf-coin-card-badge {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--cf-accent);
        color: var(--cf-charcoal);
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 5px 12px;
        border-radius: var(--cf-radius-pill);
        white-space: nowrap;
        box-shadow: var(--cf-shadow-accent);
}
.cf-coin-card-media,
.cf-product-media {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--cf-gray-50);
        border-radius: var(--cf-radius);
        padding: 20px;
        aspect-ratio: 1;
        overflow: hidden;
}
.cf-coin-card-popular .cf-coin-card-media {
        background: radial-gradient(circle at 50% 40%, rgba(25, 230, 130, 0.12), transparent 60%);
}
.cf-coin-card-title,
.cf-product-title {
        font-size: 17.5px;
        font-weight: 700;
        letter-spacing: -0.01em;
}
.cf-coin-card-short,
.cf-product-short {
        font-size: 13.5px;
        color: var(--cf-gray-500);
        line-height: 1.5;
        min-height: 1.5em;
        flex: 1;
}
.cf-coin-card-price-row,
.cf-product-price-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        font-size: 18px;
        font-weight: 700;
        color: var(--cf-charcoal);
}
.cf-coin-card-sale {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: var(--cf-radius-pill);
        background: rgba(25, 230, 130, 0.16);
        color: var(--cf-charcoal);
}

@media (max-width: 1100px) {
        .cf-coins-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
        .cf-coins-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 414px) {
        .cf-coins-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   How it works
   --------------------------------------------------------------------------- */
.cf-how {
        padding: 72px 0;
        background: var(--cf-white);
}
.cf-how-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        counter-reset: howstep;
}
.cf-how-step {
        background: var(--cf-gray-50);
        border-radius: var(--cf-radius);
        padding: 28px 22px;
        position: relative;
        border: 1px solid var(--cf-gray-100);
        transition: transform var(--cf-dur) var(--cf-ease), border-color var(--cf-dur) var(--cf-ease);
}
.cf-how-step:hover { transform: translateY(-3px); border-color: var(--cf-gray-200); }
.cf-how-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--cf-charcoal);
        color: var(--cf-accent);
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 14px;
}
.cf-how-title { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.cf-how-desc { font-size: 13.5px; color: var(--cf-gray-500); line-height: 1.55; }

.cf-how-list-vertical { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.cf-how-step-vertical { padding: 28px 32px; display: flex; align-items: flex-start; gap: 24px; }
.cf-how-step-vertical .cf-how-num { flex: 0 0 auto; }
.cf-how-step-vertical .cf-how-step-body { padding-top: 4px; }
.cf-how-step-vertical .cf-how-title { font-size: 18px; }
.cf-how-step-vertical .cf-how-desc { font-size: 14.5px; }

@media (max-width: 1100px) { .cf-how-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
        .cf-how-list { grid-template-columns: 1fr; }
        .cf-how-step-vertical { padding: 22px 18px; flex-direction: column; gap: 14px; }
}

/* ---------------------------------------------------------------------------
   CTA section
   --------------------------------------------------------------------------- */
.cf-cta {
        background: var(--cf-charcoal);
        color: var(--cf-white);
        padding: 64px 0;
        position: relative;
        overflow: hidden;
}
.cf-cta::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(700px 280px at 80% 50%, rgba(25, 230, 130, 0.14), transparent 60%);
        pointer-events: none;
}
.cf-cta-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 32px;
        flex-wrap: wrap;
        position: relative;
}
.cf-cta-title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.cf-cta-text { color: rgba(255, 255, 255, 0.75); margin-top: 8px; }
.cf-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   FAQ section
   --------------------------------------------------------------------------- */
.cf-faq-preview {
        padding: 72px 0;
        background: linear-gradient(180deg, var(--cf-gray-50), var(--cf-white));
}
.cf-faq-preview-inner { max-width: 920px; margin: 0 auto; }
.cf-faq-preview-grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 36px;
        margin-top: 36px;
}
.cf-accordion-item {
        border-bottom: 1px solid var(--cf-gray-200);
}
.cf-accordion-trigger {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 4px;
        font-size: 16px;
        font-weight: 600;
        color: var(--cf-charcoal);
        text-align: left;
        gap: 16px;
}
.cf-accordion-trigger:hover { color: var(--cf-charcoal); }
.cf-accordion-trigger .cf-icon-chevron {
        color: var(--cf-gray-400);
        transition: transform var(--cf-dur) var(--cf-ease);
}
.cf-accordion-trigger[aria-expanded="true"] .cf-icon-chevron { transform: rotate(180deg); color: var(--cf-accent); }
.cf-accordion-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height 300ms var(--cf-ease);
}
.cf-accordion-panel.is-open { max-height: 600px; }
.cf-accordion-panel[hidden] { display: none; }
.cf-accordion-panel.is-open[hidden] { display: block; }
.cf-accordion-panel-inner {
        padding: 0 4px 18px;
        font-size: 14.5px;
        color: var(--cf-gray-500);
        line-height: 1.6;
}
.cf-faq-preview-side {
        background: var(--cf-charcoal);
        color: var(--cf-white);
        border-radius: var(--cf-radius);
        padding: 28px 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: fit-content;
}
.cf-faq-preview-side-title { color: var(--cf-white); font-size: 18px; font-weight: 700; }
.cf-faq-preview-side-text { color: rgba(255, 255, 255, 0.75); font-size: 14px; margin-bottom: 8px; }
.cf-faq-preview-side .cf-btn-secondary {
        background: rgba(255, 255, 255, 0.06);
        color: var(--cf-white);
        border-color: rgba(255, 255, 255, 0.18);
}
.cf-faq-preview-side .cf-btn-secondary:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 768px) {
        .cf-faq-preview-grid { grid-template-columns: 1fr; }
}

/* FAQ page template */
.cf-faq-grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 36px;
}
.cf-faq-page-section { padding: 16px 0; }
.cf-faq-side {
        background: var(--cf-charcoal);
        color: var(--cf-white);
        padding: 28px 24px;
        border-radius: var(--cf-radius);
        height: fit-content;
}
.cf-faq-side-title { color: var(--cf-white); font-size: 18px; }
.cf-faq-side-text { color: rgba(255, 255, 255, 0.75); font-size: 14px; margin-bottom: 16px; }
.cf-faq-side .cf-btn { margin-bottom: 8px; }
.cf-faq-side .cf-btn-secondary {
        background: rgba(255, 255, 255, 0.06);
        color: var(--cf-white);
        border-color: rgba(255, 255, 255, 0.18);
}
@media (max-width: 768px) {
        .cf-faq-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Support page
   --------------------------------------------------------------------------- */
.cf-support-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 36px;
}
.cf-support-form {
        background: var(--cf-white);
        border: 1px solid var(--cf-gray-100);
        border-radius: var(--cf-radius);
        padding: 32px 28px;
        box-shadow: var(--cf-shadow-sm);
}
.cf-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.cf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-field label { font-size: 13px; font-weight: 600; color: var(--cf-gray-700); }
.cf-input,
.cf-field input,
.cf-field textarea {
        width: 100%;
        padding: 12px 14px;
        border: 1.5px solid var(--cf-gray-200);
        border-radius: var(--cf-radius-sm);
        font-size: 14.5px;
        background: var(--cf-white);
        transition: border-color var(--cf-dur) var(--cf-ease), box-shadow var(--cf-dur) var(--cf-ease);
}
.cf-field input:focus,
.cf-field textarea:focus,
.cf-input:focus {
        border-color: var(--cf-accent);
        outline: none;
        box-shadow: 0 0 0 4px rgba(25, 230, 130, 0.16);
}
.cf-field textarea { resize: vertical; min-height: 120px; }
.cf-form-footnote {
        font-size: 12px;
        color: var(--cf-gray-500);
        line-height: 1.55;
        margin-top: 4px;
}
.cf-hp {
        position: absolute !important;
        left: -9999px !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        white-space: nowrap !important;
}
.cf-notice {
        padding: 14px 18px;
        border-radius: var(--cf-radius-sm);
        font-size: 14px;
        margin-bottom: 16px;
        border: 1px solid var(--cf-gray-200);
}
.cf-notice-success { background: rgba(25, 230, 130, 0.08); border-color: rgba(25, 230, 130, 0.32); color: var(--cf-charcoal); }
.cf-notice-error { background: rgba(226, 67, 90, 0.08); border-color: rgba(226, 67, 90, 0.32); color: var(--cf-charcoal); }
.cf-support-side {
        display: flex;
        flex-direction: column;
        gap: 16px;
}
.cf-support-list {
        display: flex;
        flex-direction: column;
        gap: 18px;
        background: var(--cf-gray-50);
        border: 1px solid var(--cf-gray-100);
        border-radius: var(--cf-radius);
        padding: 24px 22px;
}
.cf-support-list li {
        display: flex;
        gap: 14px;
        align-items: flex-start;
}
.cf-support-list-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--cf-charcoal);
        color: var(--cf-accent);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
}
.cf-support-list-body { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--cf-gray-600); }
.cf-support-list-body strong { font-size: 14px; color: var(--cf-charcoal); }
.cf-support-faq-link {
        background: var(--cf-charcoal);
        color: var(--cf-white);
        border-radius: var(--cf-radius);
        padding: 24px 22px;
        display: flex;
        flex-direction: column;
        gap: 8px;
}
.cf-support-faq-link .cf-section-title-sm { color: var(--cf-white); font-size: 16px; }
.cf-support-faq-link .cf-support-text { color: rgba(255, 255, 255, 0.75); font-size: 13.5px; margin-bottom: 12px; }
.cf-support-faq-link .cf-btn-secondary {
        background: rgba(255, 255, 255, 0.06);
        color: var(--cf-white);
        border-color: rgba(255, 255, 255, 0.18);
}
@media (max-width: 768px) {
        .cf-support-grid { grid-template-columns: 1fr; }
        .cf-form-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Legal pages
   --------------------------------------------------------------------------- */
.cf-legal-content { max-width: 820px; margin: 0 auto; }
.cf-legal-prose h2 {
        font-size: 22px;
        font-weight: 700;
        margin: 32px 0 12px;
        letter-spacing: -0.01em;
}
.cf-legal-prose p {
        font-size: 15px;
        line-height: 1.7;
        color: var(--cf-gray-700);
        margin-bottom: 16px;
}
.cf-legal-prose a { color: var(--cf-charcoal); text-decoration: underline; }
.cf-legal-notice {
        background: rgba(25, 230, 130, 0.08);
        border: 1px solid rgba(25, 230, 130, 0.32);
        padding: 14px 18px;
        border-radius: var(--cf-radius-sm);
        font-size: 13.5px;
        margin-bottom: 24px;
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.cf-site-footer {
        background: linear-gradient(180deg, #1B2230, #0E1116);
        color: rgba(255, 255, 255, 0.7);
        padding-top: 64px;
}
.cf-footer-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 40px;
        padding-bottom: 48px;
}
.cf-footer-brand .cf-logo,
.cf-footer-brand .cf-logo-mark,
.cf-footer-brand .cf-logo-text { color: var(--cf-white); }
.cf-footer-desc {
        font-size: 14px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.65);
        margin-top: 16px;
        max-width: 380px;
}
.cf-footer-socials {
        display: flex;
        gap: 8px;
        margin-top: 20px;
}
.cf-footer-socials a {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        color: var(--cf-white);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background var(--cf-dur) var(--cf-ease), color var(--cf-dur) var(--cf-ease), transform var(--cf-dur) var(--cf-ease);
}
.cf-footer-socials a:hover {
        background: var(--cf-accent);
        color: var(--cf-charcoal);
        transform: translateY(-2px);
}
.cf-footer-title {
        color: var(--cf-white);
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 14px;
        letter-spacing: 0.02em;
}
.cf-footer-menu li { margin-bottom: 8px; }
.cf-footer-menu a {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        transition: color var(--cf-dur) var(--cf-ease);
}
.cf-footer-menu a:hover { color: var(--cf-accent); }
.cf-footer-contact a {
        color: var(--cf-white);
        font-weight: 600;
        font-size: 15px;
}
.cf-footer-contact a:hover { color: var(--cf-accent); }
.cf-footer-meta {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.55);
        margin-top: 8px;
        line-height: 1.55;
}
.cf-footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 20px 0;
}
.cf-footer-bottom-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
}
.cf-copyright { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.cf-copyright strong { color: var(--cf-white); }
.cf-disclaimer {
        font-size: 12.5px;
        color: rgba(255, 255, 255, 0.5);
        line-height: 1.55;
        max-width: 720px;
}
@media (max-width: 900px) {
        .cf-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
        .cf-footer-bottom-inner { justify-content: center; text-align: center; flex-direction: column; }
}
@media (max-width: 480px) {
        .cf-footer-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   404 page
   --------------------------------------------------------------------------- */
.cf-404 { text-align: center; padding: 60px 0; max-width: 720px; margin: 0 auto; }
.cf-404-coin { display: inline-flex; margin-bottom: 24px; }
.cf-404-title { font-size: clamp(36px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; }
.cf-404-text { color: var(--cf-gray-500); margin-top: 16px; }
.cf-404-actions { display: flex; justify-content: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.cf-404-help { margin-top: 24px; }
.cf-404-help a { color: var(--cf-charcoal); text-decoration: underline; font-weight: 600; }

/* ---------------------------------------------------------------------------
   Generic helpers
   --------------------------------------------------------------------------- */
.cf-empty { color: var(--cf-gray-500); text-align: center; padding: 24px 0; font-size: 14px; }
.cf-page-content { max-width: 820px; margin: 0 auto; }
.cf-page-content > * + * { margin-top: 16px; }
.cf-page-content > h1 + *,
.cf-page-content > h2 + * { margin-top: 12px; }

.cf-breadcrumbs {
        font-size: 13px;
        color: var(--cf-gray-500);
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
}
.cf-breadcrumbs a { color: var(--cf-gray-600); transition: color var(--cf-dur) var(--cf-ease); }
.cf-breadcrumbs a:hover { color: var(--cf-charcoal); }
.cf-crumb-sep { color: var(--cf-gray-300); }

.cf-pagination ul { display: flex; gap: 6px; justify-content: center; padding: 24px 0 8px; flex-wrap: wrap; }
.cf-pagination li { list-style: none; }
.cf-pagination a,
.cf-pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        border: 1.5px solid var(--cf-gray-200);
        border-radius: var(--cf-radius-sm);
        font-size: 14px;
        font-weight: 600;
        color: var(--cf-charcoal);
        transition: background var(--cf-dur) var(--cf-ease), border-color var(--cf-dur) var(--cf-ease);
}
.cf-pagination a:hover { background: var(--cf-gray-100); }
.cf-pagination .current { background: var(--cf-charcoal); border-color: var(--cf-charcoal); color: var(--cf-white); }

.cf-post-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
}
.cf-post {
        background: var(--cf-white);
        border: 1px solid var(--cf-gray-100);
        border-radius: var(--cf-radius);
        padding: 24px;
        display: flex;
        gap: 16px;
        transition: border-color var(--cf-dur) var(--cf-ease), box-shadow var(--cf-dur) var(--cf-ease), transform var(--cf-dur) var(--cf-ease);
}
.cf-post:hover { border-color: var(--cf-gray-200); box-shadow: var(--cf-shadow); transform: translateY(-2px); }
.cf-post-thumb { width: 88px; height: 88px; border-radius: var(--cf-radius-sm); overflow: hidden; flex: 0 0 auto; background: var(--cf-gray-100); }
.cf-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cf-post-title { font-size: 17px; margin-bottom: 4px; }
.cf-post-title a:hover { color: var(--cf-charcoal); }
.cf-post-meta { font-size: 12.5px; color: var(--cf-gray-400); margin-bottom: 10px; }
.cf-post-excerpt { font-size: 13.5px; color: var(--cf-gray-500); margin-bottom: 12px; line-height: 1.55; }
.cf-read-more { font-size: 13px; font-weight: 600; color: var(--cf-charcoal); text-decoration: underline; }
@media (max-width: 600px) {
        .cf-post-list { grid-template-columns: 1fr; }
}

/* Article / single post */
.cf-article-container { max-width: 760px; margin: 0 auto; }
.cf-article-header { margin-bottom: 24px; }
.cf-article-title { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; }
.cf-article-meta { font-size: 13.5px; color: var(--cf-gray-500); margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.cf-meta-sep { color: var(--cf-gray-300); }
.cf-article-thumb { border-radius: var(--cf-radius); overflow: hidden; margin-bottom: 28px; }
.cf-article-content { font-size: 16px; line-height: 1.75; color: var(--cf-gray-700); }
.cf-article-content > * + * { margin-top: 16px; }
.cf-article-content h2 { font-size: 24px; margin: 28px 0 12px; }
.cf-article-content h3 { font-size: 19px; margin: 24px 0 8px; }
.cf-article-content a { color: var(--cf-charcoal); text-decoration: underline; }
.cf-article-content img { border-radius: var(--cf-radius-sm); margin: 16px 0; }

.cf-search-form {
        display: flex;
        gap: 8px;
        max-width: 480px;
}
.cf-search-input { flex: 1; }

.cf-search-term { color: var(--cf-accent); }

.cf-404 { display: flex; flex-direction: column; align-items: center; }

.cf-section-reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--cf-ease), transform 600ms var(--cf-ease); }
.cf-section-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
        .cf-section-reveal { opacity: 1; transform: none; }
}

/* WordPress core widgets in footer sidebar */
.cf-widget { margin-bottom: 18px; }
.cf-widget-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--cf-white); }
.cf-widget a { color: rgba(255, 255, 255, 0.7); }
.cf-widget a:hover { color: var(--cf-accent); }
.cf-widget ul { list-style: none; padding: 0; }
.cf-widget ul li { margin-bottom: 6px; font-size: 14px; }

/* Screen reader / accessibility helpers */
.screen-reader-text {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        word-wrap: normal !important;
}
.screen-reader-text:focus {
        background-color: var(--cf-white);
        clip: auto !important;
        clip-path: none;
        color: var(--cf-charcoal);
        display: block;
        font-size: 14px;
        font-weight: bold;
        height: auto;
        left: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000;
}