/* ==========================================================================
   FutureAI2026 — Component layer (built on tokens)
   ========================================================================== */
body{ background:var(--fa-bg); color:var(--fa-text); font-family:var(--fa-font-sans);
  background-image:radial-gradient(circle at 12% 0%,rgba(79,125,255,.08),transparent 42%),
                   radial-gradient(circle at 92% 6%,rgba(22,224,196,.06),transparent 42%);
  background-attachment:fixed;
}
a{ text-decoration:none }
:where(.wp-block-button__link){ box-shadow:var(--fa-glow) }

/* ---- Site header ---- */
.fa-header{ display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,4vw,32px); background:color-mix(in srgb, var(--fa-surface) 88%, transparent);
  border-bottom:1px solid var(--fa-border); position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px) }
.fa-logo{ display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;color:var(--fa-text) }
.fa-logo .mark{ width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;font-family:var(--fa-font-mono);
  background:linear-gradient(120deg,var(--fa-primary),var(--fa-violet),var(--fa-accent)) }
.fa-logo b{ color:var(--fa-accent);font-weight:700 }
.fa-nav{ display:flex;gap:clamp(12px,2vw,28px);align-items:center;flex-wrap:wrap }
.fa-nav a{ color:var(--fa-text-muted);font-size:15px }
.fa-nav a:hover,.fa-nav a[aria-current]{ color:var(--fa-text) }
.fa-actions{ display:flex;align-items:center;gap:10px }
.fa-lang{ font-family:var(--fa-font-mono);font-size:12px;border:1px solid var(--fa-border-strong);border-radius:999px;padding:6px 12px;color:var(--fa-text-muted);background:transparent;cursor:pointer }
.fa-langs{ display:inline-flex;border:1px solid var(--fa-border-strong);border-radius:999px;overflow:hidden;font-family:var(--fa-font-mono) }
.fa-langlink{ padding:6px 12px;font-size:12px;color:var(--fa-text-muted);text-decoration:none;line-height:1 }
.fa-langlink.is-current{ background:var(--fa-primary);color:#fff }
.fa-langlink:not(.is-current):hover{ color:var(--fa-text);background:var(--fa-surface-2) }
.fa-theme-toggle{ width:36px;height:36px;border-radius:10px;border:1px solid var(--fa-border-strong);background:transparent;color:var(--fa-text-muted);cursor:pointer;display:grid;place-items:center;font-size:16px }
.fa-theme-toggle:hover{ color:var(--fa-text);border-color:var(--fa-primary) }

/* ---- Hero ---- */
.fa-hero{ position:relative;overflow:hidden;border:1px solid var(--fa-border);border-radius:24px;
  background:var(--fa-surface);padding:clamp(32px,6vw,64px) clamp(20px,5vw,56px);margin-block:24px }
.fa-hero::after{ content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;
  background:linear-gradient(120deg,var(--fa-primary),var(--fa-violet),var(--fa-accent)) }
.fa-hero > *{ position:relative;z-index:1 }
.fa-hero .eyebrow{ display:inline-flex;align-items:center;gap:8px;font-family:var(--fa-font-mono);font-size:12px;color:var(--fa-accent);
  border:1px solid var(--fa-border-strong);border-radius:999px;padding:6px 14px }
.fa-hero h1{ font-size:clamp(2.1rem,5vw,3.25rem);line-height:1.18;margin:20px 0 0;font-weight:700;letter-spacing:-.5px }
.fa-hero h1 .grad{ background:linear-gradient(120deg,var(--fa-primary),var(--fa-violet),var(--fa-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent }
.fa-hero p{ font-size:clamp(1rem,2.2vw,1.15rem);color:var(--fa-text-muted);max-width:620px;margin:16px 0 28px }

/* ---- Buttons (extend core) ---- */
.fa-btn{ font-weight:600;font-size:15px;border-radius:12px;padding:11px 22px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s }
.fa-btn-primary{ background:var(--fa-primary);color:#fff;box-shadow:var(--fa-glow) }
.fa-btn-primary:hover{ background:var(--fa-primary-hover);color:#fff }
.fa-btn-secondary{ background:transparent;color:var(--fa-text);border-color:var(--fa-border-strong) }
.fa-btn-secondary:hover{ border-color:var(--fa-primary) }

/* ---- Section headers ---- */
.fa-section{ margin-block:clamp(40px,7vw,72px) }
.fa-section-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px }
.fa-section-head h2{ font-size:clamp(1.5rem,3.5vw,1.9rem);font-weight:600;margin:0 }
.fa-section-head a{ color:var(--fa-primary);font-size:14px;font-weight:600;white-space:nowrap }

/* ---- Cards ---- */
.fa-grid{ display:grid;gap:16px }
.fa-grid.cols-3{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) }
.fa-card{ background:var(--fa-surface);border:1px solid var(--fa-border);border-radius:16px;overflow:hidden;transition:.2s;height:100% }
.fa-card:hover{ border-color:var(--fa-border-strong);box-shadow:var(--fa-shadow-2);transform:translateY(-2px) }
.fa-card .thumb{ aspect-ratio:16/9;background:linear-gradient(135deg,var(--fa-surface-2),var(--fa-border));position:relative;overflow:hidden }
.fa-card .thumb img{ width:100%;height:100%;object-fit:cover }
.fa-card .body{ padding:20px }
.fa-card .body h3{ font-size:1.1rem;font-weight:600;margin:8px 0;line-height:1.4;color:var(--fa-text) }
.fa-card .body h3 a{ color:inherit }
.fa-card .excerpt{ color:var(--fa-text-muted);font-size:.9rem;margin:0 }
.fa-card .meta{ display:flex;gap:14px;color:var(--fa-text-faint);font-size:12px;font-family:var(--fa-font-mono);margin-top:14px }

/* ---- Badges ---- */
.fa-badge{ font-family:var(--fa-font-mono);font-size:11px;font-weight:500;padding:4px 10px;border-radius:999px;display:inline-flex;gap:5px;align-items:center }
.fa-badge-cat{ background:var(--fa-surface-2);color:var(--fa-text-muted);border:1px solid var(--fa-border) }
.fa-badge-free{ background:rgba(34,197,94,.14);color:#4ADE80;border:1px solid rgba(34,197,94,.3) }
.fa-badge-paid{ background:rgba(245,166,35,.14);color:#F5B94D;border:1px solid rgba(245,166,35,.3) }
.fa-badge-feat{ background:linear-gradient(120deg,var(--fa-primary),var(--fa-violet));color:#fff }

/* ---- Search / filter ---- */
.fa-search{ position:relative;max-width:560px;margin-inline:auto }
.fa-search input{ width:100%;background:var(--fa-surface-2);border:1px solid var(--fa-border-strong);border-radius:12px;
  padding:13px 44px 13px 16px;color:var(--fa-text);font-family:var(--fa-font-sans);font-size:15px }
.fa-search input:focus{ outline:none;border-color:var(--fa-primary);box-shadow:0 0 0 3px rgba(79,125,255,.25) }
.fa-chips{ display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px }
.fa-chip{ padding:7px 16px;border-radius:999px;border:1px solid var(--fa-border-strong);background:transparent;color:var(--fa-text-muted);font-size:13px;cursor:pointer }
.fa-chip[aria-pressed="true"]{ background:var(--fa-primary);color:#fff;border-color:var(--fa-primary) }

/* ---- Article reading ---- */
.fa-article{ max-width:760px;margin-inline:auto }
.fa-article :where(p,li){ font-size:1.05rem;line-height:1.9 }
.fa-article img{ border-radius:12px }

/* ---- Footer ---- */
.fa-footer{ border-top:1px solid var(--fa-border);background:var(--fa-surface);margin-top:64px;padding:48px clamp(16px,4vw,32px) 32px }
.fa-footer .cols{ display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;max-width:1120px;margin-inline:auto }
.fa-footer h4{ font-size:14px;color:var(--fa-text);margin:0 0 12px }
.fa-footer a{ display:block;color:var(--fa-text-muted);font-size:14px;padding:4px 0 }
.fa-footer a:hover{ color:var(--fa-primary) }
.fa-footer .bottom{ max-width:1120px;margin:32px auto 0;padding-top:20px;border-top:1px solid var(--fa-border);
  color:var(--fa-text-faint);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px }
@media (max-width:720px){ .fa-footer .cols{ grid-template-columns:1fr 1fr } }
@media (max-width:460px){ .fa-footer .cols{ grid-template-columns:1fr } }

/* ==========================================================================
   Block integration (map core query/post blocks onto the card system)
   ========================================================================== */
.wp-block-post-template.fa-grid{ display:grid;gap:16px;margin:0;padding:0;list-style:none }
.wp-block-post-template.fa-grid.cols-3{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) }
.wp-block-post-template.fa-grid > li{ margin:0 }
.fa-card .wp-block-post-featured-image{ margin:0;aspect-ratio:16/9;overflow:hidden }
.fa-card .wp-block-post-featured-image img{ width:100%;height:100%;object-fit:cover }
.fa-card .body{ padding:20px;display:flex;flex-direction:column;gap:10px }
.fa-card .body .wp-block-post-title{ font-size:1.1rem;font-weight:600;line-height:1.4;margin:0 }
.fa-card .body .wp-block-post-title a{ color:var(--fa-text) }
.fa-card .body .wp-block-post-title a:hover{ color:var(--fa-primary) }
.fa-card .body .wp-block-post-excerpt{ margin:0 }
.fa-card .body .wp-block-post-excerpt p{ color:var(--fa-text-muted);font-size:.9rem;margin:0 }
.fa-card .body .wp-block-post-excerpt__more-text{ display:none }
.fa-card .body .meta{ color:var(--fa-text-faint);font-size:12px;font-family:var(--fa-font-mono);margin-top:4px }
.fa-card .body .wp-block-post-terms{ font-family:var(--fa-font-mono);font-size:11px }
.fa-card .body .wp-block-post-terms a{ background:var(--fa-surface-2);color:var(--fa-text-muted);border:1px solid var(--fa-border);border-radius:999px;padding:3px 10px;text-decoration:none }

/* single */
.fa-single-head{ max-width:760px;margin:24px auto 0 }
.fa-single-head .wp-block-post-title{ font-size:clamp(1.8rem,4.5vw,2.6rem);line-height:1.25;margin:12px 0 }
.fa-single-head .meta{ display:flex;gap:16px;color:var(--fa-text-faint);font-family:var(--fa-font-mono);font-size:13px;flex-wrap:wrap }
.fa-page-title{ font-size:clamp(1.6rem,4vw,2.2rem);text-align:center;margin:32px 0 8px }
.fa-page-sub{ text-align:center;color:var(--fa-text-muted);margin-bottom:8px }

/* ==========================================================================
   "Portal to the future" — hero experience (precise, minimal, alive, fast)
   ========================================================================== */
.fa-hero-portal{ position:relative;overflow:hidden }
/* subtle intelligence grid (CSS only, no particles) */
.fa-hero-grid{ position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--fa-border) 1px,transparent 1px),linear-gradient(90deg,var(--fa-border) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse 80% 70% at 70% 0%,#000 0%,transparent 70%) }
.fa-hero-portal > *{ position:relative;z-index:1 }
.fa-hero-main .eyebrow{ display:inline-flex;align-items:center;gap:8px }
.fa-hero-portal h1{ font-size:clamp(2.2rem,5.5vw,3.4rem);letter-spacing:-.6px }
.fa-hero-cta{ display:flex;gap:12px;flex-wrap:wrap;margin-top:26px }

/* live pulse dot */
.fa-pulse{ width:8px;height:8px;border-radius:50%;background:var(--fa-accent);display:inline-block;position:relative;flex:none }
.fa-pulse::after{ content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--fa-accent);opacity:.6;animation:fa-ping 2s ease-out infinite }
@keyframes fa-ping{ 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(1.8);opacity:0} }

/* live intelligence strip */
.fa-live{ margin-top:32px;border:1px solid var(--fa-border);border-radius:16px;background:color-mix(in srgb,var(--fa-surface) 70%,transparent);
  padding:16px 20px;backdrop-filter:blur(4px) }
.fa-live-head{ display:flex;align-items:center;gap:8px;font-family:var(--fa-font-mono);font-size:12px;color:var(--fa-text-muted);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:14px }
.fa-live-updated{ color:var(--fa-text-faint);text-transform:none;letter-spacing:0 }
.fa-live-tiles{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px }
.fa-stat{ display:flex;flex-direction:column;gap:2px }
.fa-stat-num{ font-size:clamp(1.6rem,4vw,2.2rem);font-weight:700;font-family:var(--fa-font-mono);
  background:linear-gradient(120deg,var(--fa-primary),var(--fa-accent));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1 }
.fa-stat-lbl{ font-size:12px;color:var(--fa-text-muted) }

/* trending strip */
.fa-trending{ margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap }
.fa-trending-lbl{ font-family:var(--fa-font-mono);font-size:11px;color:var(--fa-text-faint);text-transform:uppercase;letter-spacing:1px }
.fa-trending-list{ display:flex;gap:8px;flex-wrap:wrap }
.fa-trend{ display:inline-flex;align-items:center;gap:8px;border:1px solid var(--fa-border-strong);border-radius:999px;
  padding:6px 14px;font-size:13px;color:var(--fa-text);transition:.15s }
.fa-trend:hover{ border-color:var(--fa-primary);transform:translateY(-1px) }
.fa-trend-rate{ font-family:var(--fa-font-mono);font-size:12px;color:var(--fa-warning) }

/* reveal-on-scroll */
[data-reveal]{ opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease }
[data-reveal].is-in{ opacity:1;transform:none }

@media (max-width:560px){ .fa-live-tiles{ grid-template-columns:repeat(3,1fr);gap:10px } .fa-stat-num{ font-size:1.5rem } }

@media (prefers-reduced-motion: reduce){
  .fa-pulse::after{ animation:none }
  [data-reveal]{ opacity:1;transform:none;transition:none }
  .fa-trend{ transition:none }
}

/* ==========================================================================
   Portal language applied across page types
   ========================================================================== */
/* shared breadcrumb (theme) */
.fa-breadcrumb{ display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-family:var(--fa-font-mono);font-size:12px;color:var(--fa-text-faint);margin:20px 0 4px }
.fa-breadcrumb a{ color:var(--fa-text-muted) } .fa-breadcrumb a:hover{ color:var(--fa-primary) }

/* portal header (categories / search / 404) */
.fa-portal-head{ position:relative;overflow:hidden;border:1px solid var(--fa-border);border-radius:24px;background:var(--fa-surface);
  padding:clamp(28px,5vw,48px) clamp(20px,4vw,40px);margin:16px 0 28px }
.fa-eyebrow-label{ display:inline-flex;align-items:center;gap:8px;font-family:var(--fa-font-mono);font-size:12px;color:var(--fa-accent);
  border:1px solid var(--fa-border-strong);border-radius:999px;padding:6px 14px;position:relative;z-index:1 }
.fa-portal-head h1{ position:relative;z-index:1;font-size:clamp(1.7rem,4.5vw,2.6rem);margin:16px 0 0;line-height:1.2 }
.fa-portal-desc{ position:relative;z-index:1;color:var(--fa-text-muted);margin-top:10px;max-width:640px }
.fa-portal-count{ position:relative;z-index:1;margin-top:14px;font-family:var(--fa-font-mono);font-size:13px;color:var(--fa-text-faint) }

/* intelligence metadata bar (single post) */
.fa-meta-bar{ display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:14px 0;padding:12px 0;border-block:1px solid var(--fa-border) }
.fa-meta-item{ font-family:var(--fa-font-mono);font-size:12px;color:var(--fa-text-muted) }

/* explore-tools aside on articles */
.fa-related-tools{ margin:40px 0;padding:24px;border:1px solid var(--fa-border);border-radius:16px;background:var(--fa-surface) }

/* category portal tiles */
.fa-cat-portals{ display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px }
.fa-cat-portal{ display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--fa-border);
  border-radius:14px;background:var(--fa-surface);padding:16px 18px;transition:.18s;color:var(--fa-text) }
.fa-cat-portal:hover{ border-color:var(--fa-primary);transform:translateY(-2px);box-shadow:var(--fa-shadow-2) }
.fa-cat-name{ font-weight:600;font-size:.95rem } .fa-cat-count{ font-family:var(--fa-font-mono);font-size:12px;color:var(--fa-text-faint) }

/* 404 */
.fa-404{ text-align:center }
.fa-404-code{ position:relative;z-index:1;font-family:var(--fa-font-mono);font-size:clamp(56px,12vw,96px);font-weight:700;line-height:1;
  background:linear-gradient(120deg,var(--fa-primary),var(--fa-violet),var(--fa-accent));-webkit-background-clip:text;background-clip:text;color:transparent }
.fa-404 .fa-hero-cta{ justify-content:center }
.fa-empty{ text-align:center;color:var(--fa-text-muted);padding:48px 0 }
.fa-empty a{ color:var(--fa-primary) }
.fa-search-head .fa-search{ max-width:520px }

/* responsive nav — mobile: scrollable strip below logo/actions (no JS) */
@media (max-width:860px){
  .fa-header{ flex-wrap:wrap;gap:10px }
  .fa-nav{ order:3;width:100%;overflow-x:auto;white-space:nowrap;gap:18px;padding-top:10px;
    border-top:1px solid var(--fa-border);-webkit-overflow-scrolling:touch;scrollbar-width:none }
  .fa-nav::-webkit-scrollbar{ display:none }
}