/* =====================================================================
 * KOLflow · dashboard.css
 *   Shared dashboard styles — Trending orb, AI orb, ranking lists,
 *   skeleton shimmers, hero pulse, etc. Used by both / (landing live
 *   preview sections) and /app (DApp dashboard).
 *   Extracted from inline <style> blocks in app.html.
 * ===================================================================== */

/* --- Index page section spacing + FAQ + step number --- */
  .faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:24px; font-size:15.5px; font-weight:500; color:var(--text); padding:18px 0; transition:color .2s; }
  .faq summary:hover{ color:var(--accent-300); }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:'+'; font-family:'Geist Mono',monospace; font-size:22px; color:var(--text-dim); transition:transform .25s; }
  .faq[open] summary::after{ transform:rotate(45deg); color:var(--accent-400); }
  .faq{ border-bottom:1px solid var(--line); }
  .faq p{ margin:0 0 18px; color:var(--text-dim); font-size:14px; line-height:1.7; }
  .step-num{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(180deg, rgba(94,234,212,.18), rgba(94,234,212,.06)); border:1px solid rgba(94,234,212,.4); color:var(--accent-300); font-family:'Geist Mono',monospace; font-weight:600; font-size:13px; }

  /* === Index page section spacing — custom because tailwind-built.css doesn't include large pt/pb utilities or md: variants === */
  .idx-hero-subtitle{
    font-size: 17px;
    font-weight: 500;
    color: var(--accent-300);
    letter-spacing: -0.005em;
  }
  @media (min-width: 640px){ .idx-hero-subtitle{ font-size: 19px; } }
  @media (min-width: 768px){ .idx-hero-subtitle{ font-size: 21px; } }

  .idx-trending-section{ padding-top: 3rem; padding-bottom: 3rem; }
  .idx-ai-section{ padding-bottom: 3rem; }
  .idx-section-lg{ padding-top: 4rem; padding-bottom: 4rem; }
  .idx-section-cta{ padding-top: 5rem; padding-bottom: 6rem; }
  .idx-eyebrow-gap{ margin-top: 1.25rem; }
  @media (min-width: 768px){
    .idx-trending-section{ padding-top: 4.5rem; padding-bottom: 4rem; }
    .idx-ai-section{ padding-bottom: 4rem; }
    .idx-section-lg{ padding-top: 5.5rem; padding-bottom: 5.5rem; }
    .idx-section-cta{ padding-top: 7rem; padding-bottom: 8rem; }
    .idx-eyebrow-gap{ margin-top: 1.5rem; }
  }

/* --- Hero pulse + trend orb + ai orb + skeleton shimmer + ranking --- */
  /* === Refined hero typography === */
  .hero-eyebrow {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(94,234,212,.06);
    border: 1px solid rgba(94,234,212,.25);
    color: #5eead4;
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .2em;
  }
  .hero-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: #5eead4;
    box-shadow: 0 0 8px #5eead4;
    animation: heroPulse 1.6s ease-in-out infinite;
  }
  @keyframes heroPulse {
    0%, 100% { opacity:1; transform:scale(1); }
    50% { opacity:.5; transform:scale(.7); }
  }
  /* hero typography uses existing hero-grad + Tailwind classes — no custom overrides */

  /* === Homepage hero spacing — calibrated tighter than other pages === */
  .hero-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  @media (min-width: 768px) {
    .hero-section {
      padding-top: 7rem;
      padding-bottom: 6rem;
    }
  }

  /* === Hero stats — Web3 / crypto-tech feel === */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 720px;
    margin-top: 80px;
    padding-top: 32px;
    position: relative;
  }
  .hero-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(94,234,212,.15) 20%,
      rgba(94,234,212,.15) 80%,
      transparent 100%);
  }
  .hero-stats::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 28%;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(94,234,212,.9) 50%,
      transparent 100%);
    box-shadow: 0 0 12px rgba(94,234,212,.6);
    animation: heroStatsScan 4.2s cubic-bezier(.65,.05,.36,1) infinite;
    pointer-events: none;
  }
  @keyframes heroStatsScan {
    0%   { transform: translateX(-30%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(360%); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-stats::after { animation: none; opacity: .4; transform: translateX(140%); }
  }
  .hero-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
  }
  .hero-stat-num {
    font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace;
    font-size: 38px;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    font-feature-settings: 'tnum' 1, 'ss01' 1;
    color: #fff;
    background: linear-gradient(180deg, #fff 0%, #5eead4 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(94,234,212,.25);
  }
  .hero-stat-label {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: rgba(148, 163, 184, .7);
    line-height: 1.3;
  }
  @media (max-width: 640px) {
    .hero-stats {
      grid-template-columns: repeat(2, 1fr);
      gap: 32px 24px;
      margin-top: 56px;
    }
    .hero-stat-num { font-size: 32px; }
  }

  /* === Section divider — subtle === */
  .section-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    margin: 0;
  }

  /* === Trending preview module === */
  .trend-header{
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    position: relative;
  }
  .trend-header-text{ flex: 1; min-width: 0; }
  .trend-section-title{
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--text);
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 14px;
    line-height: 1;
  }
  @media (min-width: 768px){
    .trend-section-title{ font-size: 48px; }
  }
  .trend-fire{ font-size: 32px; line-height: 1; filter: drop-shadow(0 0 12px rgba(255,107,87,.5)); }
  @media (min-width: 768px){ .trend-fire{ font-size: 40px; } }
  .trend-section-sub{
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-dim);
    margin: 0 0 20px;
    max-width: 560px;
  }
  /* === Galaxy orb — premium SVG version (matches PPT slide 5) === */
  .trend-orb{
    width: 170px; height: 170px;
    flex-shrink: 0;
    position: relative;
    margin-top: -18px;
    margin-right: -12px;
    filter: drop-shadow(0 0 28px rgba(94,234,212,.25)) drop-shadow(0 0 48px rgba(139,92,246,.18));
  }
  @media (max-width: 640px){
    .trend-orb{ width: 120px; height: 120px; margin-top: -10px; margin-right: -8px; }
  }
  @media (min-width: 1024px){
    .trend-orb{ width: 220px; height: 220px; margin-top: -28px; margin-right: -24px; }
  }
  .trend-orb svg{ width: 100%; height: 100%; display: block; overflow: visible; }
  .trend-orb .ring{
    fill: none;
    stroke-width: 1;
    transform-origin: center;
  }
  .trend-orb .r1{ stroke: rgba(94,234,212,.20); animation: orbSpin 60s linear infinite; }
  .trend-orb .r2{ stroke: rgba(139,92,246,.28); animation: orbSpin 40s linear infinite reverse; }
  .trend-orb .r3{ stroke: rgba(94,234,212,.35); animation: orbSpin 28s linear infinite; }
  .trend-orb .r4{ stroke: rgba(139,92,246,.55); stroke-width: 1.5; animation: orbSpin 18s linear infinite reverse; }
  .trend-orb .scan{
    fill: none;
    stroke: url(#orbScanGrad);
    stroke-width: 2;
    stroke-linecap: round;
    transform-origin: center;
    animation: orbSpin 6s linear infinite;
  }
  .trend-orb .core{
    fill: url(#orbCoreGrad);
    filter: url(#orbCoreGlow);
    transform-origin: center;
    animation: orbCorePulse 2.6s ease-in-out infinite;
  }
  .trend-orb .particle{
    fill: rgba(94,234,212,.9);
    filter: drop-shadow(0 0 4px rgba(94,234,212,.95));
    transform-origin: center;
  }
  .trend-orb .p-orbit-a{ animation: orbSpin 9s linear infinite; }
  .trend-orb .p-orbit-b{ animation: orbSpin 14s linear infinite reverse; }
  .trend-orb .p-orbit-c{ animation: orbSpin 22s linear infinite; }
  @keyframes orbSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
  @keyframes orbCorePulse{
    0%,100%{ transform: scale(1); opacity: 1; }
    50%{ transform: scale(1.3); opacity: .75; }
  }
  .trend-card{
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    border: 1.5px solid rgba(94,234,212,.25);
    border-radius: 16px;
    padding: 16px 38px 16px 16px; /* extra right padding for corner platform logo */
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 0 0 1px rgba(94,234,212,.1), 0 8px 24px -12px rgba(94,234,212,.15);
  }
  .trend-card:hover{
    border-color: var(--accent-400);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--accent-400), 0 12px 36px -12px rgba(94,234,212,.4);
  }
  .trend-card-head{ display:flex; align-items:center; gap:10px; }
  .trend-card-avatar{
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-400), #8b5cf6);
    flex-shrink: 0; overflow:hidden;
  }
  .trend-card-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .trend-card-meta{ flex:1; min-width:0; }
  .trend-card-name{
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    display:flex; align-items:center; gap:4px;
    line-height:1.2;
  }
  .trend-card-handle{ font-size: 11.5px; color: var(--text-faint); font-family: 'Geist Mono', monospace; line-height:1.4; }
  /* .trend-card-platform-icon kept as zero-size — overridden by display:none below */
  .trend-card-platform-icon{
    width:0; height:0; opacity:0; visibility:hidden;
  }
  .trend-card-verified{
    width: 14px; height: 14px;
    flex-shrink: 0;
  }
  .trend-card-engage{
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.05);
  }
  .trend-card-engage .te{
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px;
    color: var(--text-faint);
    font-family: 'Geist Mono', monospace;
  }
  .trend-card-engage .te svg{ width: 13px; height: 13px; opacity: .7; }
  .trend-card-engage .te-share{ margin-left: auto; }
  /* Platform corner logo: top-right of every card, brand-coloured.
     SVG fill is set inline in dashboard.js — do not override with currentColor here.
     IMPORTANT — use !important because ".trend-card > anything" later in the file
     forces position:relative on every direct child of .trend-card. */
  .trend-card .trend-card-corner,
  .trend-card-corner{
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    display: block !important;
    opacity: .92;
    z-index: 3 !important;
    pointer-events: none;
    flex-shrink: 0;
    transform: none !important;
  }
  .trend-card-corner svg{
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
  /* Inline icon variant (next to author name) — hide to avoid duplication */
  .trend-card-platform-icon{ display: none !important; }
  /* #hashtag inline highlight in body text (PPT style) */
  .trend-tag-inline{
    color: #5eead4;
    font-weight: 500;
  }
  /* #hashtag chip below image */
  .trend-tag-chip{
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(94,234,212,.3);
    background: rgba(94,234,212,.06);
    color: var(--accent-300);
    font-size: 11.5px;
    font-weight: 500;
    font-family: 'Geist Mono', monospace;
  }
  .trend-card-body{
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    min-height: 100px;
  }
  .trend-card-thumb{
    margin-top: auto;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line);
    aspect-ratio: 16/9;
  }
  .trend-card-thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .trend-card-foot{
    display:flex; align-items:center; justify-content:space-between;
    font-size: 11px; color: var(--text-faint);
    font-family: 'Geist Mono', monospace;
    padding-top: 4px;
  }
  .trend-tabs-row{
    margin-bottom: 22px;
    /* Mobile: 6 tabs scroll horizontally instead of overflowing page width */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
  }
  .trend-tabs-row::-webkit-scrollbar{ display: none; }
  @media (min-width: 768px){
    .trend-tabs-row{ mask-image: none; -webkit-mask-image: none; margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
  }
  .trend-tabs{
    display:inline-flex;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
    padding-right: 8px;
  }
  .trend-tab{
    appearance:none;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--line);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-dim);
    cursor: pointer;
    transition: all .2s;
    display: inline-flex; align-items:center; gap:8px;
    font-family: inherit;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .trend-tab:hover{ color: var(--text); border-color: var(--line-strong); }
  /* PPT-style outlined teal pill when active (matches mockup) */
  .trend-tab.active{
    background: rgba(94,234,212,.05);
    color: var(--accent-300);
    border-color: var(--accent-400);
    box-shadow: 0 0 0 1px var(--accent-400), 0 0 18px -4px rgba(94,234,212,.5);
  }
  .trend-tab.active svg{ color: var(--accent-400); }
  /* Per-platform brand colours on the tab icon (idle + hover + active all keep brand colour) */
  .trend-tab[data-trend-tab="x"] svg         { color:#ffffff; fill:#ffffff; }
  .trend-tab[data-trend-tab="youtube"] svg   { color:#ff0033; fill:#ff0033; }
  .trend-tab[data-trend-tab="newsletter"] svg{ color:#ff6719; stroke:#ff6719; }
  .trend-tab[data-trend-tab="farcaster"] svg { color:#8a63d2; fill:#8a63d2; }
  .trend-tab[data-trend-tab="mirror"] svg    { color:#007cf2; fill:#007cf2; }
  .trend-tab[data-trend-tab="github"] svg    { color:#ffffff; fill:#ffffff; }
  /* Active tab keeps brand colour on icon too */
  .trend-tab.active[data-trend-tab="x"] svg         { color:#ffffff !important; fill:#ffffff !important; }
  .trend-tab.active[data-trend-tab="youtube"] svg   { color:#ff0033 !important; fill:#ff0033 !important; }
  .trend-tab.active[data-trend-tab="newsletter"] svg{ color:#ff6719 !important; stroke:#ff6719 !important; }
  .trend-tab.active[data-trend-tab="farcaster"] svg { color:#8a63d2 !important; fill:#8a63d2 !important; }
  .trend-tab.active[data-trend-tab="mirror"] svg    { color:#007cf2 !important; fill:#007cf2 !important; }
  .trend-tab.active[data-trend-tab="github"] svg    { color:#ffffff !important; fill:#ffffff !important; }
  .trend-scroll{
    display:flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .trend-scroll::-webkit-scrollbar{ height: 6px; }
  .trend-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.1); border-radius: 999px; }
  .trend-scroll > .trend-card{ scroll-snap-align: start; }
  /* === DESKTOP: 3-column grid, fits 6 cards in 2 rows === */
  @media (min-width: 768px){
    .trend-scroll{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 14px;
      row-gap: 18px;
      overflow: visible;
      scroll-snap-type: none;
      padding: 4px 0 12px;
    }
    .trend-scroll > .trend-card{
      width: auto;            /* let grid size it */
      scroll-snap-align: none;
    }
  }
  /* === Pagination dots: mobile only (desktop has static grid) === */
  .trend-dots{
    display: none;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 4px;
  }
  @media (max-width: 767px){
    .trend-dots{ display: flex; }
  }
  .trend-dots .td{
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    transition: background .2s, width .2s;
  }
  .trend-dots .td.on{
    background: var(--accent-400);
    width: 18px; border-radius: 3px;
  }
  .trend-skeleton{
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
    background-size: 400% 100%;
    animation: trendShimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
  }
  .trend-empty{
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px;
    padding: 56px 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
    border: 1px dashed var(--line);
    border-radius: 14px;
    text-align: center;
    color: var(--text-faint);
    font-size: 13.5px;
    line-height: 1.55;
    max-width: 540px;
    margin: 0 auto;
  }
  .trend-empty-icon{
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    display: grid; place-items: center;
    font-size: 18px;
    color: var(--text-dim);
  }
  .trend-empty-msg{ max-width: 380px; }
  .trend-fallback-banner{
    flex-shrink: 0;
    align-self: stretch;
    padding: 9px 14px;
    margin-right: 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(251,191,36,.10), rgba(251,191,36,.04));
    border: 1px solid rgba(251,191,36,.18);
    color: #fcd34d;
    font-size: 12px;
    line-height: 1.45;
    display: flex;
    align-items: center;
    max-width: 280px;
    font-weight: 500;
  }
  @keyframes trendShimmer{
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }
  .view-more-btn{
    display: inline-flex; align-items:center; gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line);
    color: var(--accent-300);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
  }
  .view-more-btn:hover{
    background: rgba(94,234,212,.08);
    border-color: rgba(94,234,212,.4);
    transform: translateX(2px);
  }

  /* === AI Insight preview module === */
  .ai-preview{
    background: linear-gradient(180deg, rgba(94,234,212,.04), rgba(139,92,246,.03));
    border: 1px solid rgba(94,234,212,.15);
    border-radius: 18px;
    padding: 32px 28px 36px;
    position: relative;
    overflow: hidden;
  }
  .ai-preview::before{
    content:'';
    position:absolute;
    top:-40%; right:-15%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(139,92,246,.18), transparent 60%);
    pointer-events: none;
  }
  /* High-tech AI orb — matches ai.html sci-fi aesthetic, smaller for homepage */
  .ai-orb{
    width: 64px; height: 64px;
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
  }
  /* Outer faint ring */
  .ai-orb::before{
    content:'';
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(94,234,212,.2);
    box-shadow: inset 0 0 18px rgba(94,234,212,.08);
  }
  /* Spinning arc — visible "rotor" */
  .ai-orb::after{
    content:'';
    position: absolute; inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(94,234,212,.65);
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    animation: aiOrbSpinHome 5.5s linear infinite;
    filter: drop-shadow(0 0 5px rgba(94,234,212,.55));
  }
  /* Nucleus core via inner element */
  .ai-orb-core{
    position: absolute; inset: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff 0%, rgba(94,234,212,.95) 8%, rgba(94,234,212,.55) 35%, rgba(139,92,246,.45) 60%, rgba(99,102,241,.18) 80%, transparent 100%);
    box-shadow:
      inset 0 0 14px rgba(255,255,255,.35),
      0 0 18px rgba(94,234,212,.45),
      0 0 36px rgba(139,92,246,.25);
    animation: aiOrbBreatheHome 4s ease-in-out infinite;
  }
  .ai-orb-core::after{
    content:'✦';
    position:absolute; inset:0;
    display:grid; place-items:center;
    color:#fff; font-size:14px;
    text-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 18px rgba(94,234,212,.85);
  }
  /* Two orbital particles (smaller — homepage version) */
  .ai-orb-particle{
    position:absolute; left:50%; top:50%;
    width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
    border-radius:50%;
    background:#5eead4;
    box-shadow: 0 0 6px #5eead4, 0 0 10px rgba(94,234,212,.55);
    transform-origin: 0 0;
  }
  .ai-orb-particle.p1{ animation: aiOrbitHome1 8s linear infinite; }
  .ai-orb-particle.p2{ animation: aiOrbitHome2 11s linear infinite; background:#c4b5fd; box-shadow: 0 0 6px #c4b5fd, 0 0 10px rgba(196,181,253,.55); }
  @keyframes aiOrbSpinHome{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
  @keyframes aiOrbBreatheHome{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
  @keyframes aiOrbitHome1{
    from{ transform: rotate(0deg)   translateX(32px) rotate(0deg); }
    to  { transform: rotate(360deg) translateX(32px) rotate(-360deg); }
  }
  @keyframes aiOrbitHome2{
    from{ transform: rotate(180deg) translateX(28px) rotate(-180deg); }
    to  { transform: rotate(540deg) translateX(28px) rotate(-540deg); }
  }
  @media (max-width: 640px){
    .ai-orb{ width: 52px; height: 52px; }
    .ai-orb-core{ inset: 9px; }
    .ai-orb-core::after{ font-size: 12px; }
    @keyframes aiOrbitHome1{ from{ transform: rotate(0deg) translateX(26px) rotate(0deg); } to{ transform: rotate(360deg) translateX(26px) rotate(-360deg); } }
    @keyframes aiOrbitHome2{ from{ transform: rotate(180deg) translateX(22px) rotate(-180deg); } to{ transform: rotate(540deg) translateX(22px) rotate(-540deg); } }
  }
  .ai-preview-head{
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
  }
  /* Free-text topic search — high-tech command-bar feel */
  .ai-topic-search{
    margin-top: 14px;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    transition: border-color .2s, background .2s, box-shadow .2s;
  }
  .ai-topic-search:focus-within{
    border-color: rgba(94,234,212,.4);
    background: rgba(94,234,212,.04);
    box-shadow: 0 0 0 3px rgba(94,234,212,.08), 0 0 20px -8px rgba(94,234,212,.4);
  }
  .ai-topic-search-icon{
    width: 16px; height: 16px;
    color: var(--text-faint);
    flex-shrink: 0;
  }
  .ai-topic-search:focus-within .ai-topic-search-icon{ color: var(--accent-300); }
  .ai-topic-search input{
    flex: 1;
    appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    min-width: 0;
  }
  .ai-topic-search input::placeholder{ color: var(--text-faint); }
  .ai-topic-search-kbd{
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    color: var(--text-faint);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px;
    padding: 2px 7px;
    flex-shrink: 0;
    line-height: 1.3;
  }
  .ai-preview-titlewrap{
    flex: 0 1 auto;
    min-width: 0;
    max-width: 560px;
  }
  /* On desktop, push orb to follow title rather than float at far right */
  @media (min-width: 768px){
    .ai-preview-head{ justify-content: flex-start; }
  }
  .ai-preview-title{
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    display:flex; align-items:center; gap: 10px;
    color: var(--text);
  }
  .ai-preview-spark{
    display:inline-grid; place-items:center;
    width: 32px; height:32px;
    border-radius:10px;
    background: linear-gradient(135deg, rgba(94,234,212,.2), rgba(139,92,246,.25));
    border:1px solid rgba(94,234,212,.3);
    color: var(--accent-300);
    font-size: 16px;
  }
  .ai-preview-sub{
    color: var(--text-dim); font-size: 13.5px;
    margin: 6px 0 0;
  }
  .ai-time-tabs{
    display:inline-flex; gap: 0;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 18px;
    align-self: flex-start;
  }
  .ai-time-tab{
    appearance:none; background:transparent; border:0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-dim);
    cursor: pointer;
    transition: all .2s;
    font-family: 'Geist Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .ai-time-tab.active{
    background: var(--accent-400);
    color: #050609;
    font-weight: 600;
    box-shadow: 0 4px 10px -3px rgba(94,234,212,.5);
  }
  .ai-cat-tabs{
    display:flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }
  .ai-cat-tab{
    appearance:none; background:transparent; border:0;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-dim);
    cursor: pointer;
    transition: all .2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display:inline-flex; align-items:center; gap:7px;
    font-family: inherit;
  }
  .ai-cat-tab:hover{ color: var(--text); }
  .ai-cat-tab.active{
    color: var(--accent-300);
    border-bottom-color: var(--accent-400);
  }
  .ai-cat-tab svg{ width: 14px; height: 14px; }
  .ai-list-head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 4px 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,.04);
  }
  .ai-list-head-label{
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .ai-list-head-more{
    display:inline-flex; align-items:center; gap:5px;
    font-size: 12px;
    color: var(--accent-300);
    text-decoration: none;
    transition: color .15s, transform .15s;
  }
  .ai-list-head-more:hover{ color: var(--accent-400); transform: translateX(2px); }
  .ai-rank-list{
    display: flex;
    flex-direction: column;
  }
  /* High-tech rank row: tighter packing, change% badge, mini-sparkline, mono nums */
  .ai-rank-row{
    display: grid;
    grid-template-columns: 30px 32px minmax(0, 1fr) auto 56px auto;
    align-items: center;
    gap: 14px;
    padding: 13px 10px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .18s, border-color .18s;
    position: relative;
  }
  .ai-rank-row:last-child{ border-bottom: 0; }
  .ai-rank-row:hover{
    background: linear-gradient(90deg, rgba(94,234,212,.05), transparent 90%);
    border-color: rgba(94,234,212,.12);
  }
  .ai-rank-num{
    font-family: 'Geist Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.45) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-align: left;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
  }
  .ai-rank-icon{
    width: 32px; height: 32px;
    border-radius: 50%;
    display:grid; place-items:center;
    font-size: 13px;
    flex-shrink:0;
    overflow: hidden;
    transition: box-shadow .18s;
  }
  .ai-rank-row:hover .ai-rank-icon{
    box-shadow: 0 0 14px rgba(94,234,212,.2);
  }
  .ai-rank-icon img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .ai-rank-icon.topic{ background: linear-gradient(135deg, rgba(94,234,212,.2), rgba(94,234,212,.05)); color: var(--accent-300); }
  .ai-rank-icon.token{ background: rgba(255,255,255,.04); color: #fbbf24; }
  .ai-rank-icon.project{ background: rgba(255,255,255,.04); color: #a78bfa; }
  .ai-rank-name{
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Change badge — green/red pill like ai.html */
  .ai-rank-change{
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex; align-items: center; gap: 3px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
  }
  .ai-rank-change.up   { color: #86efac; background: rgba(134,239,172,.10); }
  .ai-rank-change.down { color: #fca5a5; background: rgba(252,165,165,.10); }
  .ai-rank-change.flat { color: var(--text-faint); background: rgba(255,255,255,.04); }
  /* Mini sparkline */
  .ai-rank-spark{
    width: 56px; height: 18px;
    display: block;
    flex-shrink: 0;
  }
  .ai-rank-spark polyline{
    fill: none;
    stroke: #5eead4;
    stroke-width: 1.4;
    filter: drop-shadow(0 0 3px rgba(94,234,212,.55));
  }
  .ai-rank-row:hover .ai-rank-spark polyline{
    stroke: #6ee7d4;
    filter: drop-shadow(0 0 5px rgba(94,234,212,.85));
  }
  .ai-rank-mentions{
    font-size: 12px;
    color: var(--text-dim);
    font-family: 'Geist Mono', monospace;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
  }
  .ai-rank-mentions .num{
    color: #fff;
    font-weight: 600;
  }
  .ai-preview-foot{
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display:flex; justify-content:flex-end;
  }
  @media (max-width: 640px){
    .ai-preview{ padding: 22px 18px; }
    .ai-preview-title{ font-size: 19px; }
    .ai-cat-tab{ padding: 10px 10px; font-size: 12.5px; }
    .ai-cat-tab svg{ width:12px; height:12px; }
    /* Mobile: hide sparkline (it's only decorative) but KEEP the "▲ N new" badge.
     * Grid keeps an explicit slot for the badge so layout stays consistent. */
    .ai-rank-row{ grid-template-columns: 24px 32px minmax(0,1fr) auto auto; gap:8px; padding: 11px 4px; }
    .ai-rank-spark{ display: none; }
    .ai-rank-change{ font-size: 10.5px; padding: 2px 6px; }
    .ai-rank-change.flat{ display: none; }   /* empty/flat: collapse to save space */
    .trend-card{ width: 280px; }
  }


/* Flowing conic-gradient border on .glass cards (Trending cards / step cards / KOL cards / AI rank rows) */
.glass{ position:relative; }
.glass::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:conic-gradient(from var(--dapp-angle, 0deg),
    transparent 0deg,
    rgba(94,234,212,.55) 60deg,
    transparent 120deg,
    transparent 240deg,
    rgba(139,92,246,.55) 300deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:dapp-border-flow 7s linear infinite;
  z-index:0;
  opacity:.6;
}
.glass:nth-of-type(2n)::after{ animation-duration:8s; animation-direction:reverse; }
.glass:nth-of-type(3n)::after{ animation-duration:9s; }
.glass:hover::after{ opacity:1; }
.glass > *{ position:relative; z-index:1; }

/* Trending card flowing border (matches .glass behavior) */
.trend-card{ position:relative; }
.trend-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:conic-gradient(from var(--dapp-angle, 0deg),
    transparent 0deg, rgba(94,234,212,.5) 60deg,
    transparent 120deg, transparent 240deg,
    rgba(139,92,246,.5) 300deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:dapp-border-flow 8s linear infinite;
  opacity:.5; z-index:0;
}
.trend-card:nth-child(2n)::after{ animation-direction:reverse; animation-duration:9s; }
.trend-card:nth-child(3n)::after{ animation-duration:10s; }
.trend-card > *{ position:relative; z-index:1; }
.trend-card:hover::after{ opacity:.9; }

/* AI rank row hover with subtle flowing line */
.ai-rank-row{ position:relative; transition:background .25s; }
.ai-rank-row:hover{ background:linear-gradient(90deg, transparent, rgba(94,234,212,.04), transparent); }
.ai-rank-row::before{
  content:''; position:absolute; left:-100%; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(94,234,212,.5), transparent);
  animation:dapp-row-shine 6s ease-in-out infinite;
}
@keyframes dapp-row-shine{ to{ left:100%; } }

/* Premium upgrade for .section-eyebrow (used across pages) */
.section-eyebrow{
  position:relative; display:inline-flex !important; align-items:center; gap:9px;
  padding:6px 14px !important; border-radius:99px !important;
  background:linear-gradient(135deg, rgba(94,234,212,.12) 0%, rgba(139,92,246,.08) 100%) !important;
  border:1px solid rgba(94,234,212,.35);
  color:#fff !important;
  font-weight:600 !important;
  letter-spacing:.24em !important;
  text-shadow:0 0 8px rgba(94,234,212,.35);
  box-shadow:0 0 20px -6px rgba(94,234,212,.45);
  overflow:visible;
}
.section-eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#5eead4; box-shadow:0 0 8px #5eead4, 0 0 14px rgba(94,234,212,.5);
  animation:dapp-eyebrow-pulse 1.6s ease-in-out infinite;
  flex-shrink:0;
}
.section-eyebrow::after{
  content:''; position:absolute; inset:0; border-radius:99px; pointer-events:none;
  padding:1px;
  background:conic-gradient(from var(--dapp-angle, 0deg),
    transparent 0deg, rgba(94,234,212,.85) 60deg,
    transparent 120deg, transparent 240deg,
    rgba(139,92,246,.85) 300deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:dapp-border-flow 5s linear infinite;
}
@keyframes dapp-eyebrow-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.55; transform:scale(1.4); }
}

/* H1 / H2 text glow (matches marketing) */
.hero-grad{
  text-shadow:0 0 60px rgba(94,234,212,.16), 0 0 30px rgba(139,92,246,.08);
  animation:dapp-hero-glow 6s ease-in-out infinite;
}
@keyframes dapp-hero-glow{
  0%,100%{ text-shadow:0 0 60px rgba(94,234,212,.16), 0 0 30px rgba(139,92,246,.08); }
  50%{ text-shadow:0 0 100px rgba(94,234,212,.3), 0 0 50px rgba(139,92,246,.16); }
}

/* Trending fire icon glow + spark icon polish */
.trend-fire{
  filter:drop-shadow(0 0 6px rgba(251,146,60,.5)) drop-shadow(0 0 12px rgba(251,146,60,.3));
  animation:dapp-fire-flicker 1.5s ease-in-out infinite;
}
@keyframes dapp-fire-flicker{
  0%,100%{ transform:scale(1) rotate(-2deg); }
  50%{ transform:scale(1.1) rotate(2deg); }
}

/* Section eyebrow shine sweep */
.section-eyebrow span{ position:relative; z-index:1; }

/* AI cat tab + AI time tab — premium hover with glow */
.ai-cat-tab.active, .ai-cat-tab2.active,
.ai-time-tab.active, .ai-time-tab2.active{
  box-shadow:0 0 0 1px rgba(94,234,212,.45), 0 0 20px -6px rgba(94,234,212,.5);
}

/* Trending platform tabs — same flowing border on active */
.trend-tab.active{
  position:relative;
  box-shadow:0 0 16px -4px rgba(94,234,212,.45);
}

/* Stat numbers — subtle gradient glow */
.hero-stat-num, .stat-num, .stat-num-grad{
  text-shadow:0 0 24px rgba(94,234,212,.18);
}

/* Bottom-nav center button — DO NOT put box-shadow on .abn-center (the
   rectangular flex item). The shadow renders as a rectangle behind the
   circular FAB icon. Any FAB glow must live on .abn-icon (circular). */
.app-bottom-nav .abn-center{
  box-shadow: none;
}

/* Dot grid background on main sections (subtle, like marketing bands) */
.idx-trending-section, .idx-ai-section, .ai-hero, .app-dash-section{
  position:relative;
}
.idx-trending-section::before, .idx-ai-section::before, .ai-hero::before, .app-dash-section::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(circle, rgba(94,234,212,.06) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 20%, transparent 70%);
  opacity:.4;
}
.idx-trending-section > *, .idx-ai-section > *, .ai-hero > *, .app-dash-section > *{
  position:relative; z-index:1;
}

/* Reduce motion fallback */
@media (prefers-reduced-motion:reduce){
  .glass::after, .trend-card::after, .ai-rank-row::before,
  .section-eyebrow::after, .section-eyebrow::before,
  .hero-grad, .trend-fire{ animation:none !important; }
}


/* Bottom-nav center FAB — restrained glow (was too loud).
   Single static box-shadow (no infinite animation = saves GPU). */
.app-bottom-nav .abn-item.abn-center .abn-icon{
  box-shadow:
    0 4px 12px -3px rgba(94,234,212,.35),
    0 2px 6px -2px rgba(124,58,237,.25);
}

/* Bottom-nav top edge — animated gradient line */
.app-bottom-nav{ position:fixed; }
.app-bottom-nav::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(94,234,212,.6), rgba(139,92,246,.6), rgba(94,234,212,.6), transparent);
  animation:dapp-fab-shine 4s linear infinite;
}
@keyframes dapp-fab-shine{
  0%,100%{ opacity:.4; transform:translateX(-30%); }
  50%{ opacity:1; transform:translateX(30%); }
}

/* Active non-center tab — small glow under indicator */
.app-bottom-nav .abn-item.active:not(.abn-center) .abn-icon{
  filter:drop-shadow(0 0 6px rgba(94,234,212,.6));
}

/* === Add flowing border to AI Insight preview card + AI controls (sticky tabs bar) === */
/* NOTE: .trend-tabs intentionally excluded — vendor request, no rectangular container around platform tab strip */
.ai-preview, .ai-controls, .ai-topic-search,
.ai-cat-tabs, .ai-cat-tabs2,
.ai-time-tabs, .ai-time-tabs2,
.search-box, .mkt-prev-tabs{
  position:relative;
}
.ai-preview::after, .ai-controls::after, .ai-topic-search::after,
.search-box::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:conic-gradient(from var(--dapp-angle, 0deg),
    transparent 0deg,
    rgba(94,234,212,.55) 60deg,
    transparent 120deg,
    transparent 240deg,
    rgba(139,92,246,.55) 300deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:dapp-border-flow 8s linear infinite;
  opacity:.6; z-index:0;
}
.ai-preview > *, .ai-controls > *, .ai-topic-search > *, .search-box > *{
  position:relative; z-index:1;
}
.ai-preview::after{ animation-duration:9s; }
.ai-controls::after{ animation-duration:7s; animation-direction:reverse; }

/* Tabs container (Hot Tokens / Daily / etc.) — soft inner glow */
/* NOTE: .trend-tabs intentionally excluded — vendor request, platform tab strip stays unboxed */
.ai-cat-tabs, .ai-cat-tabs2, .ai-time-tabs, .ai-time-tabs2{
  box-shadow:0 0 0 1px rgba(94,234,212,.08) inset, 0 0 16px -8px rgba(94,234,212,.3);
}
.trend-tabs{
  box-shadow:none !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
}

/* Active tab inside container — accent glow */
.ai-cat-tab.active, .ai-cat-tab2.active{
  background:linear-gradient(135deg, rgba(94,234,212,.22), rgba(139,92,246,.16)) !important;
  text-shadow:0 0 8px rgba(94,234,212,.5);
}



/* Universal "flowing halo" class — applied to all big DApp containers */
.glass,
.trend-card,
.ai-preview,
.ai-controls,
.ai-hero,
.ai-rank-card,
.search-box,
.app-dash-section{
  position:relative !important;
  isolation:isolate;
}
.glass::after,
.trend-card::after,
.ai-preview::after,
.ai-controls::after,
.ai-rank-card::after,
.search-box::after{
  content:''; position:absolute; inset:-2px;
  border-radius:inherit; pointer-events:none;
  z-index:-1;
  background:conic-gradient(from var(--halo-angle, 0deg),
    transparent 0deg,
    rgba(94,234,212,.9) 40deg,
    transparent 100deg,
    transparent 220deg,
    rgba(139,92,246,.9) 280deg,
    transparent 340deg);
  filter:blur(5px);
  animation:halo-spin 6s linear infinite;
  opacity:.7;
}
/* Hover boosts the halo intensity */
.glass:hover::after,
.trend-card:hover::after,
.ai-rank-card:hover::after,
.ai-preview:hover::after{
  opacity:1;
  filter:blur(3px);
}
/* Staggered durations so cards don't sync */
.trend-card:nth-child(2n)::after{ animation-duration:7s; animation-direction:reverse; }
.trend-card:nth-child(3n)::after{ animation-duration:8s; }
.glass:nth-of-type(2n)::after{ animation-duration:7s; animation-direction:reverse; }
.glass:nth-of-type(3n)::after{ animation-duration:9s; }
.ai-rank-card:nth-child(2n)::after{ animation-duration:7.5s; animation-direction:reverse; }
.ai-rank-card:nth-child(3n)::after{ animation-duration:9s; }

/* Override existing .card-glow to be ALWAYS visible (not just on hover) */
.card-glow{
  opacity:.6 !important;
  animation:spin 5s linear infinite !important;
}
.glass:hover .card-glow{ opacity:1 !important; }

/* Premium upgrade for .section-eyebrow (DApp eyebrow same as marketing) */
.section-eyebrow{
  position:relative; display:inline-flex !important; align-items:center; gap:9px;
  padding:7px 15px !important; border-radius:99px !important;
  background:linear-gradient(135deg, rgba(94,234,212,.14) 0%, rgba(139,92,246,.10) 100%) !important;
  border:1px solid rgba(94,234,212,.4) !important;
  color:#fff !important;
  font-weight:600 !important;
  letter-spacing:.24em !important;
  text-shadow:0 0 8px rgba(94,234,212,.4);
  box-shadow:0 0 20px -6px rgba(94,234,212,.5);
  overflow:visible !important;
}
.section-eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:#5eead4; box-shadow:0 0 8px #5eead4, 0 0 14px rgba(94,234,212,.5);
  animation:eyebrow-pulse 1.6s ease-in-out infinite;
}
@keyframes eyebrow-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(1.4)} }

/* H1 / hero-grad text glow */
.hero-grad{
  text-shadow:0 0 60px rgba(94,234,212,.16), 0 0 30px rgba(139,92,246,.08);
  animation:hero-glow 6s ease-in-out infinite;
}
@keyframes hero-glow{
  0%,100%{ text-shadow:0 0 60px rgba(94,234,212,.16), 0 0 30px rgba(139,92,246,.08); }
  50%{ text-shadow:0 0 100px rgba(94,234,212,.3), 0 0 50px rgba(139,92,246,.16); }
}

/* Trending fire icon glow + flicker */
.trend-fire{
  filter:drop-shadow(0 0 6px rgba(251,146,60,.5)) drop-shadow(0 0 12px rgba(251,146,60,.3));
  animation:fire-flicker 1.5s ease-in-out infinite;
}
@keyframes fire-flicker{
  0%,100%{ transform:scale(1) rotate(-2deg); }
  50%{ transform:scale(1.1) rotate(2deg); }
}

/* Bottom-nav center FAB — leftover heavy halo rule removed
   (was causing a visible rectangular ghost ring behind the circular icon
   because the 0 0 0 5px ring shadow was being clipped by the nav-bar
   background). Replaced by the single static box-shadow at the top of
   the file. Do NOT re-introduce 0-spread box-shadows here. */

/* Reduce motion fallback */
@media (prefers-reduced-motion:reduce){
  .glass::after, .trend-card::after, .ai-preview::after, .ai-controls::after,
  .ai-rank-card::after, .search-box::after, .card-glow{ animation:none !important; }
  .hero-grad, .trend-fire, .section-eyebrow::before{ animation:none !important; }
}

/* ============================================================
   DApp flowing-border (matches marketing's .mkt-visual-watch::after technique)
   conic-gradient + mask-composite = 1px animated hollow border ON the perimeter
   ============================================================ */
@property --dapp-flow-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes dapp-flow-spin{ to{ --dapp-flow-angle:360deg; } }

/* Force apply to every big DApp container. !important to override anything else. */
.glass,
.trend-card,
.ai-preview,
.ai-controls,
.ai-rank-card,
.search-box,
.app-dash-section > div,
.kol-card{
  position:relative !important;
}

.glass::after,
.trend-card::after,
.ai-preview::after,
.ai-controls::after,
.ai-rank-card::after,
.search-box::after,
.kol-card::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  padding:1.5px !important;
  background:conic-gradient(from var(--dapp-flow-angle, 0deg),
    transparent 0deg,
    rgba(94,234,212,.95) 50deg,
    rgba(94,234,212,.4) 90deg,
    transparent 130deg,
    transparent 230deg,
    rgba(139,92,246,.4) 270deg,
    rgba(139,92,246,.95) 310deg,
    transparent 350deg) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  animation:dapp-flow-spin 6s linear infinite !important;
  z-index:1 !important;
}
/* Staggered durations so cards don't sync (visually richer) */
.trend-card:nth-child(2n)::after{ animation-duration:7.5s !important; animation-direction:reverse !important; }
.trend-card:nth-child(3n)::after{ animation-duration:9s !important; }
.glass:nth-of-type(2n)::after{ animation-duration:7s !important; animation-direction:reverse !important; }
.glass:nth-of-type(3n)::after{ animation-duration:9s !important; }
.kol-card:nth-of-type(2n)::after{ animation-duration:7s !important; animation-direction:reverse !important; }
.kol-card:nth-of-type(3n)::after{ animation-duration:8.5s !important; }
.ai-rank-card:nth-child(2n)::after{ animation-duration:8s !important; animation-direction:reverse !important; }

/* Ensure card content sits ABOVE the border line */
.glass > *, .trend-card > *, .ai-preview > *, .ai-controls > *,
.ai-rank-card > *, .search-box > *, .kol-card > *{
  position:relative; z-index:2;
}

/* Existing .card-glow inside .glass — make always-on hover-style for added drama */
.glass:hover::after{ animation-duration:3s !important; }
.glass:hover .card-glow{ opacity:1 !important; }

@media (prefers-reduced-motion:reduce){
  .glass::after, .trend-card::after, .ai-preview::after,
  .ai-controls::after, .ai-rank-card::after, .search-box::after,
  .kol-card::after{ animation:none !important; opacity:.5 !important; }
}

/* ============================================================
   Tab refinement — text-only active state (NO pill glow),
   spacious padding, no cramped feel
   ============================================================ */

/* Active tabs: KILL background + shadow, keep ONLY text glow */
.ai-cat-tab.active,
.ai-cat-tab2.active,
.ai-time-tab.active,
.ai-time-tab2.active,
.trend-tab.active{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border-color:transparent !important;
  color:#fff !important;
  text-shadow:
    0 0 10px rgba(94,234,212,.85),
    0 0 22px rgba(94,234,212,.5),
    0 0 38px rgba(139,92,246,.35) !important;
  font-weight:600 !important;
}
.ai-cat-tab.active svg,
.ai-cat-tab2.active svg,
.ai-time-tab.active svg,
.ai-time-tab2.active svg{
  filter:drop-shadow(0 0 6px rgba(94,234,212,.7)) drop-shadow(0 0 12px rgba(94,234,212,.4));
  color:#7df1de !important;
}
/* trend-tab.active is excluded here — each platform tab keeps its brand colour
   on activation. See per-platform [data-trend-tab="x|youtube|..."] rules above. */
.trend-tab.active svg{
  filter:drop-shadow(0 0 6px rgba(94,234,212,.5)) drop-shadow(0 0 12px rgba(94,234,212,.3));
}
/* Re-assert per-platform brand colours AFTER the premium-effects block
   so source-order cascade lets them win even at equal specificity. */
.trend-tab[data-trend-tab="x"] svg,
.trend-tab.active[data-trend-tab="x"] svg{ color:#ffffff !important; fill:#ffffff !important; }
.trend-tab[data-trend-tab="youtube"] svg,
.trend-tab.active[data-trend-tab="youtube"] svg{ color:#ff0033 !important; fill:#ff0033 !important; }
.trend-tab[data-trend-tab="newsletter"] svg,
.trend-tab.active[data-trend-tab="newsletter"] svg{ color:#ff6719 !important; stroke:#ff6719 !important; }
.trend-tab[data-trend-tab="farcaster"] svg,
.trend-tab.active[data-trend-tab="farcaster"] svg{ color:#8a63d2 !important; fill:#8a63d2 !important; }
.trend-tab[data-trend-tab="mirror"] svg,
.trend-tab.active[data-trend-tab="mirror"] svg{ color:#007cf2 !important; fill:#007cf2 !important; }
.trend-tab[data-trend-tab="github"] svg,
.trend-tab.active[data-trend-tab="github"] svg{ color:#ffffff !important; fill:#ffffff !important; }

/* Tab containers — more breathing room */
.ai-cat-tabs, .ai-cat-tabs2{
  gap:6px !important;
  padding:6px !important;
}
.ai-time-tabs, .ai-time-tabs2{
  gap:4px !important;
  padding:5px !important;
}
.trend-tabs{
  gap:6px !important;
}

/* Individual tab — slightly more horizontal padding so labels breathe */
.ai-cat-tab, .ai-cat-tab2{
  padding:9px 16px !important;
  letter-spacing:.06em !important;
}
.ai-time-tab, .ai-time-tab2{
  padding:8px 20px !important;
}
.trend-tab{
  padding:8px 16px !important;
  gap:8px !important;
}

/* Inactive tab — soft underline-style hover (NO pill bg either) */
.ai-cat-tab:not(.active):hover,
.ai-cat-tab2:not(.active):hover,
.ai-time-tab:not(.active):hover,
.ai-time-tab2:not(.active):hover{
  background:transparent !important;
  color:rgba(255,255,255,.85) !important;
}


/* =====================================================================
 * TRENDING HERO — visual-only premium upgrade (vendor request)
 *   Original copy preserved: "🔥 Trending" + two-line subtitle.
 *   Changes:
 *     - Replace emoji with custom gradient SVG flame + glow halo
 *     - Apply gradient text on "Trending" word
 *     - Refine subtitle typography (mono caps eyebrow rhythm)
 *   The earlier .trend-hero-meta / .trend-hero-title / .trend-hero-sub
 *   blocks below are kept dormant (never used in markup) so the file
 *   remains valid; we just no longer render those elements.
 * ===================================================================== */

/* === Premium visual treatment for the original markup === */
.trend-header .trend-section-title{
  display: inline-flex !important;
  align-items: center;
  gap: 18px;
  font-size: clamp(44px, 6.5vw, 76px) !important;
  font-weight: 600 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  margin: 0 0 18px !important;
}
.trend-header .trend-title-text{
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, rgba(255,255,255,.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.trend-icon-wrap{
  position: relative;
  display: inline-grid;
  place-items: center;
  width: clamp(46px, 6vw, 72px);
  height: clamp(46px, 6vw, 72px);
  flex-shrink: 0;
}
.trend-icon-glow{
  position: absolute; inset: -10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 65%, rgba(251,191,36,.55) 0%, rgba(249,115,22,.35) 25%, rgba(220,38,38,.18) 50%, transparent 70%);
  filter: blur(14px);
  animation: trendGlowPulse 2.4s ease-in-out infinite;
}
@keyframes trendGlowPulse{
  0%, 100% { opacity: .9;  transform: scale(1); }
  30%      { opacity: 1;   transform: scale(1.12); }
  60%      { opacity: .82; transform: scale(.97); }
}
.trend-icon{
  position: relative;
  width: 78%;
  height: 78%;
  filter:
    drop-shadow(0 -2px 14px rgba(251,191,36,.7))
    drop-shadow(0 2px 8px rgba(249,115,22,.55))
    drop-shadow(0 0 3px rgba(220,38,38,.6));
  transform-origin: 50% 100%;  /* flame anchored at base for natural flicker */
  animation: trendFlameFlicker 2.4s ease-in-out infinite;
}
@keyframes trendFlameFlicker{
  0%, 100% { transform: translateY(0)     scale(1, 1); }
  20%      { transform: translateY(-1px)  scale(1.04, 1.08) rotate(-2deg); }
  45%      { transform: translateY(1px)   scale(.96, .94)   rotate(1.5deg); }
  72%      { transform: translateY(-.5px) scale(1.02, 1.05) rotate(-1deg); }
}
/* Second flame layer — adds extra heat shimmer using filter-only animation
   (no extra DOM). Hue rotation simulates the flame's color flicker. */
.trend-icon-wrap{ filter: saturate(1.15); }
.trend-icon-wrap::after{
  content:'';
  position:absolute; inset: 20% 20% 0 20%;
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 100%, rgba(254,240,138,.45) 0%, rgba(249,115,22,.18) 50%, transparent 80%);
  filter: blur(6px);
  animation: trendHeatShimmer 1.6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes trendHeatShimmer{
  0%   { opacity: .55; transform: scaleY(.92); }
  100% { opacity: .9;  transform: scaleY(1.06); }
}

/* Refined subtitle — kept two lines but tighter rhythm & color */
.trend-header .trend-section-sub{
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--text-dim) !important;
  margin: 0 !important;
  max-width: 540px !important;
  font-weight: 400 !important;
}
.trend-header .trend-section-sub span:first-child{
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-300);
  margin-bottom: 6px;
}
.trend-header .trend-section-sub br + span{
  font-size: 17px;
  color: var(--text);
  font-weight: 500;
}

/* Hide the legacy fire emoji span entirely (we use the SVG icon-wrap now) */
.trend-header .trend-fire{ display: none !important; }

@media (max-width: 640px){
  .trend-header .trend-section-title{ font-size: 38px !important; gap: 12px; }
  .trend-header .trend-section-sub{ font-size: 14.5px !important; }
  .trend-header .trend-section-sub br + span{ font-size: 15px; }
}
/* =====================================================================
 * Dormant — earlier premium-hero classes kept for any future use.
 * ===================================================================== */
.trend-hero-meta{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 28px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(94,234,212,.05), rgba(255,255,255,.012));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  isolation: isolate;
}
.trend-hero-meta::before{
  content:'';
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px;
  background: linear-gradient(120deg, rgba(94,234,212,.45), rgba(139,92,246,.25), transparent 70%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.6;
}
.trend-live-pulse{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5eead4;
  font-weight: 700;
  letter-spacing: .18em;
}
.trend-live-pulse .dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 3px rgba(94,234,212,.18), 0 0 10px rgba(94,234,212,.9);
  animation: trendPulse 1.8s ease-in-out infinite;
}
@keyframes trendPulse{
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.6); opacity: .55; }
}
.trend-meta-sep{
  color: rgba(255,255,255,.18);
  font-weight: 300;
}
.trend-meta-caps{ color: var(--text-dim); font-weight: 500; }

/* Headline — gradient white-to-dim + serif italic accent */
.trend-hero-title{
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -.038em;
  margin: 0 0 18px;
  max-width: 18ch;
  background: linear-gradient(180deg, #ffffff 55%, rgba(255,255,255,.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.trend-hero-title .hero-italic{
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, #5eead4 0%, #a78bfa 60%, #f0abfc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* subtle glow */
  filter: drop-shadow(0 0 24px rgba(94,234,212,.18));
}

/* Subtitle — restrained, single line on wide viewports */
.trend-hero-sub{
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
  max-width: 580px;
  font-weight: 400;
}

/* Only hide the old emoji span — title + sub are the original markup we still use. */
.trend-header .trend-fire{ display: none !important; }

/* Mobile niceties */
@media (max-width: 640px){
  .trend-hero-meta{ font-size: 9.5px; letter-spacing: .18em; padding: 7px 10px; gap: 8px; }
  .trend-hero-meta .trend-meta-sep:nth-of-type(2),
  .trend-hero-meta .trend-meta-caps:nth-of-type(2){ display: none; } /* hide some chips on tiny screens */
  .trend-hero-title{ font-size: 38px; }
}

/* =====================================================================
 * MOBILE PERFORMANCE — FREEZE ANIMATIONS, KEEP VISUALS
 *   Strategy: every visual element STAYS rendered. We just freeze the
 *   infinite keyframe animations. A static gradient / glow / box-shadow
 *   costs nothing — the GPU paints it once and caches the layer. It's
 *   the per-frame re-rasterization of conic-gradient + mask-composite
 *   borders, drop-shadow filters and rotating SVG transforms that
 *   melts the phone.
 *
 *   Effect on desktop: zero change. Effect on mobile: same visual
 *   richness, just no movement.
 * ===================================================================== */
@media (max-width: 767px){
  /* Per-card flowing-border ::after — freeze, but keep a STATIC version
     of the gradient so cards still get the premium teal-violet halo. */
  .glass::after,
  .trend-card::after,
  .ai-preview::after,
  .ai-controls::after,
  .ai-rank-card::after,
  .search-box::after,
  .kol-card::after,
  .section-eyebrow::after,
  .ai-rank-row::before,
  .section-eyebrow::before{
    animation: none !important;
    /* Keep the gradient so cards retain the brand border — just static now */
    background: linear-gradient(135deg,
      rgba(94,234,212,.35) 0%,
      rgba(139,92,246,.18) 60%,
      transparent 100%) !important;
    opacity: .55 !important;
  }

  /* Trend orb + AI orb — keep visible but freeze the rings/particles.
     A static SVG costs ~zero GPU. Just don't rotate it.
     Also keep the orb's drop-shadow gone (it's the heaviest filter). */
  .trend-orb svg .ring,
  .trend-orb svg .scan,
  .trend-orb svg .core,
  .trend-orb svg [class*="p-orbit"],
  .trend-orb .particle,
  .ai-orb,
  .ai-orb-core,
  .ai-orb-particle{
    animation: none !important;
  }
  .trend-orb{
    filter: drop-shadow(0 0 18px rgba(94,234,212,.18)) !important; /* static, single drop-shadow only */
    transform: scale(.78) translateY(8px); /* small shift so it doesn't bump into text */
    transform-origin: top right;
  }
  .ai-orb{ filter: none !important; }

  /* Stack trend header vertically so orb sits cleanly to the side, never on top of text */
  .trend-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: relative;
  }
  .trend-orb{
    position: absolute !important;
    top: -8px;
    right: -12px;
    width: 96px; height: 96px;
    z-index: 0;
    opacity: .65;
    pointer-events: none;
  }
  .trend-header-text{ position: relative; z-index: 1; }

  /* Hero / flame / bottom-nav glow — freeze animations only.
     The static box-shadow / gradient stays so the FAB still looks premium. */
  .hero-grad,
  .trend-fire,
  .trend-icon,
  .trend-icon-glow,
  .trend-icon-wrap::after,
  .app-bottom-nav .abn-center .abn-icon,
  .app-bottom-nav::before,
  .app-bottom-nav::after,
  .section-eyebrow,
  [class*="aiDigestScan"],
  .ai-narrative-list *,
  .ai-narrative-list::after{
    animation: none !important;
  }

  /* Keep ONE subtle animation on mobile — the activity-link green dot
     in the header. It's a single element, costs nothing, signals "live". */
  .pulse-dot{ animation: pulse-dot 2s ease-in-out infinite !important; }

  /* Trend icon stays visible with a static warm halo (no flicker, no shimmer) */
  .trend-icon{
    filter: drop-shadow(0 -1px 6px rgba(251,191,36,.55)) drop-shadow(0 1px 3px rgba(249,115,22,.4)) !important;
    opacity: 1 !important;
  }
  .trend-icon-glow{
    opacity: .55 !important;
    filter: blur(8px) !important;
  }

  /* Disable backdrop-filter on per-card chrome — iOS triggers a full
     framebuffer blur for each backdrop-filter element. Static gradients
     still look just as good without the live blur. */
  .trend-card,
  .ai-rank-card,
  .ai-rank-row{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Respect user's reduced-motion preference universally (any viewport) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
 * MOBILE TAP RESPONSIVENESS (eliminates iOS 300ms double-tap delay)
 *   Every interactive element should have touch-action:manipulation so
 *   Safari doesn't wait for a possible double-tap-zoom gesture before
 *   firing the click event.
 * ===================================================================== */
button,
a,
.trend-tab,
.ai-cat-tab,
.ai-cat-tab2,
.ai-time-tab,
.ai-time-tab2,
.abn-item,
.mobile-nav-link,
.mobile-nav-toggle,
.filter-pill,
.tier-pill,
.lang-switcher-btn,
.lang-switcher-menu button,
.refresh-btn,
.btn-primary,
.btn-secondary,
.kol-card,
.trend-card{
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(94,234,212,.12);
}

/* =====================================================================
 * TRUST STRIP — "Powered by" data sources / infrastructure (above footer)
 *   Adds quiet credibility without selling anything. Logos are SVG-only
 *   so they look crisp at any DPR and don't trigger extra image fetches.
 * ===================================================================== */
.kf-trust-strip{
  /* Sits inside footer between the 4-column grid and the © row */
  padding: 28px 0 32px;
  border-top: 1px solid rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.kf-trust-label{
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.kf-trust-logos{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 28px;
  max-width: 980px;
}
.kf-trust-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.015);
  transition: border-color .2s, color .2s, background .2s;
}
.kf-trust-item:hover{
  border-color: rgba(94,234,212,.35);
  color: var(--text);
  background: rgba(94,234,212,.04);
}
.kf-trust-item svg{
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--text-faint);
}
.kf-trust-item:hover svg{ color: var(--accent-400); }
.kf-trust-disclaimer{
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-faint);
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 640px){
  .kf-trust-strip{ padding: 24px 0 32px; gap: 16px; margin-top: 48px; }
  .kf-trust-logos{ gap: 8px 12px; }
  .kf-trust-item{ font-size: 11.5px; padding: 6px 10px; gap: 6px; }
  .kf-trust-item svg{ width: 12px; height: 12px; }
  .kf-trust-disclaimer{ font-size: 11px; padding: 0 16px; }
}

/* =====================================================================
 * BOTTOM-NAV CENTER FAB (Activity) — balanced, not dominant
 *   Sized to harmonize with the sibling icons. Subtle raise + soft glow
 *   instead of a giant button that draws the eye away from content.
 * ===================================================================== */
.app-bottom-nav .abn-item.abn-center{
  margin-top: -8px; /* was -18px — gentler raise */
}
.app-bottom-nav .abn-item.abn-center .abn-icon{
  width: 44px !important;     /* was 54px — closer to other items */
  height: 44px !important;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, #5eead4 0%, #7c3aed 75%, #a855f7 100%) !important;
  color: #050609;
  border: 2.5px solid rgba(8,10,16,.95) !important;
  position: relative;
  will-change: transform;
}
.app-bottom-nav .abn-item.abn-center .abn-icon::after{
  content:'';
  position:absolute;
  inset: 2px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 130%, rgba(94,234,212,.35) 0%, transparent 55%),
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.14) 0%, transparent 50%);
  pointer-events: none;
}
.app-bottom-nav .abn-item.abn-center .abn-icon svg{
  width: 20px !important;
  height: 20px !important;
  stroke: #050609;
  stroke-width: 2.4;
  position: relative;
  z-index: 1;
}
.app-bottom-nav .abn-item.abn-center .abn-label{
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: .02em;
  margin-top: 3px;
}
/* Mobile: tap-feedback (scale-down) */
.app-bottom-nav .abn-item.abn-center:active .abn-icon{
  transform: scale(.94);
  transition: transform .12s ease;
}
@media (max-width: 767px){
  /* On mobile we already disable the FAB halo animation in the kill-switch.
     ROOT CAUSE FIX: the previous "0 0 0 5px ..." ring box-shadow was being
     clipped RECTANGULARLY by the bottom-nav's backdrop-filter stacking
     context on iOS Safari → visible ghost rectangle behind the FAB.
     Now using directional drop-shadows only (no 0-spread rings). */
  .app-bottom-nav .abn-item.abn-center .abn-icon{
    box-shadow:
      0 6px 14px -4px rgba(94,234,212,.55),
      0 3px 8px -2px rgba(124,58,237,.35) !important;
  }
}

/* =====================================================================
 * MOBILE FOOTER — COMPACT (vendor: too much vertical space)
 *   - First column (brand + intro) spans both columns on mobile so the
 *     DISCOVER + COMPANY columns sit side-by-side below it
 *   - Tighten line-height, paddings, intro paragraph max-height
 *   - Shrink trust pills to icon-only chips, single wrapping row
 *   - Shrink disclaimer + label
 * ===================================================================== */
@media (max-width: 767px){
  /* First column (brand + intro) — span full row so columns 2 & 3 sit together */
  .kf-footer-grid > div:first-child{
    grid-column: 1 / -1;
  }
  /* Compact intro paragraph */
  .kf-footer-grid > div:first-child > div:last-child{
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 32ch;
  }
  /* Column headings tighter */
  .kf-footer-grid [data-i18n*="footer.discover"],
  .kf-footer-grid [data-i18n*="footer.company"],
  .kf-footer-grid [data-i18n*="nav.forKols"]{
    margin-bottom: 8px !important;
    font-size: 10px !important;
  }
  /* Column link spacing tighter */
  .kf-footer-grid ul.space-y-2 > li{ margin-top: 4px; }
  .kf-footer-grid ul.space-y-2 > li:first-child{ margin-top: 0; }
  .kf-footer-grid ul.space-y-2 a{ font-size: 12.5px; }

  /* Trust strip — compact icon-only style on mobile */
  .kf-trust-strip{
    padding: 18px 0 22px !important;
    gap: 12px !important;
  }
  .kf-trust-label{
    font-size: 9.5px !important;
    letter-spacing: .2em !important;
  }
  .kf-trust-logos{
    gap: 6px !important;
    max-width: 100%;
    padding: 0 12px;
  }
  .kf-trust-item{
    padding: 5px 8px !important;
    font-size: 10.5px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }
  .kf-trust-item svg{ width: 11px !important; height: 11px !important; }
  .kf-trust-disclaimer{
    font-size: 10.5px !important;
    line-height: 1.45 !important;
    padding: 0 16px !important;
  }

  /* Bottom © row — tighter */
  footer > .container.border-t{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 10px !important;
  }
}

/* =====================================================================
 * MOBILE — SELECTIVE RE-ENABLE OF CHEAP ANIMATIONS
 *   Strategy: GPU only forwards composite layers for transform+opacity.
 *   Anything else (filter, box-shadow, mask, conic-gradient) forces a
 *   re-rasterization each frame and burns watts.
 *
 *   This block UNFREEZES the ones that are pure transform/opacity AND
 *   apply to <= 3 elements at once. Each kept under 4s duration so the
 *   page never looks dead, but never thrashes either.
 *
 *   Things that STAY frozen on mobile (do not re-enable):
 *     - Per-card flowing borders (.trend-card::after etc.) — conic-gradient + mask, 20+ instances
 *     - Halo spinners — drop-shadow filter animation
 *     - Bottom-nav FAB halo — animated box-shadow with spread
 *     - hero-grad text-shadow pulse
 *     - .ai-rank-row::before sweep (animates `left` = layout)
 *     - .trend-orb rings + scan + particles (8 simultaneous rotations)
 *   ====================================================================== */
@media (max-width: 767px){

  /* === 1. Trend flame flicker — single SVG, transform only ============= */
  .trend-icon{
    animation: trendFlameFlicker 3s ease-in-out infinite !important;
    /* Drop-shadow filter still removed — flicker alone is the visual */
    will-change: transform;
  }

  /* === 2. Trend icon glow halo — single element opacity pulse ========== */
  .trend-icon-glow{
    animation: trendGlowPulse 4s ease-in-out infinite !important;
    opacity: .55 !important;
    /* Keep blur static at 8px (no animated filter), only opacity moves */
    will-change: opacity;
  }

  /* === 3. AI orb glowing core — 1 element transform scale ============== */
  .ai-orb-core{
    display: block !important;  /* override kill-switch display:none */
    animation: aiOrbCorePulse 3.5s ease-in-out infinite !important;
    will-change: transform;
  }
  /* AI orb container shows again, but particles + spin stay frozen */
  .ai-orb{
    display: block !important;
    opacity: .75;
    transform: scale(.85);
    transform-origin: center right;
  }

  /* === 4. Trend orb CORE only — single SVG circle scale ============== */
  .trend-orb svg .core{
    animation: orbCorePulse 2.5s ease-in-out infinite !important;
    transform-origin: center;
    transform-box: fill-box;
    will-change: transform, opacity;
  }
  /* Outer rings + scan + orbiting particles stay frozen (too many elements) */

  /* === 5. Activity-link pulse dot in header — already on, keep explicit */
  .pulse-dot{ animation: pulse-dot 2s ease-in-out infinite !important; }

  /* === 6. Tab + button hover/active transitions ======================= */
  /* These are CSS transitions on hover/active, not infinite animations.
     Free on GPU since they only fire on user interaction. */
  .trend-tab, .ai-cat-tab, .ai-cat-tab2,
  .ai-time-tab, .ai-time-tab2,
  .abn-item, .filter-pill, .tier-pill{
    transition: color .18s, background .18s, border-color .18s, transform .12s !important;
  }
  .trend-tab:active,
  .ai-cat-tab:active, .ai-cat-tab2:active,
  .ai-time-tab:active, .ai-time-tab2:active{
    transform: scale(.97);
  }

  /* === 7. Trending card subtle lift on tap ============================ */
  .trend-card{
    transition: transform .15s ease, border-color .2s !important;
  }
  .trend-card:active{
    transform: scale(.985);
  }

  /* === 8. Bottom-nav FAB tap feedback (already added, keep explicit) === */
  .app-bottom-nav .abn-item.abn-center:active .abn-icon{
    transform: scale(.92);
    transition: transform .12s ease;
  }

  /* === 9. AI Insight rank rows — subtle hover/active lift ============== */
  .ai-rank-row{
    transition: background .18s, transform .12s !important;
  }
  .ai-rank-row:active{
    transform: translateX(2px) scale(.99);
  }
}

/* prefers-reduced-motion still overrides ALL of the above */
@media (prefers-reduced-motion: reduce){
  .trend-icon, .trend-icon-glow,
  .ai-orb-core, .trend-orb svg .core, .pulse-dot{
    animation: none !important;
  }
}

/* =====================================================================
 * PREMIUM EMPTY / LOADING STATES (replaces "⏸ pause" and "⏳ hourglass")
 *   - Radar scan visual on trending tab when no posts yet
 *   - Animated horizontal scan lines on AI Insight panel during indexing
 *   - All animations use transform / opacity only (GPU-composited)
 * ===================================================================== */

/* ---- Trending empty state ---- */
.trend-empty{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px 64px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(94,234,212,.03), rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
  min-height: 220px;
}
/* Subtle dot-grid backdrop — gives the empty state visual texture */
.trend-empty::before{
  content:'';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(94,234,212,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  opacity: .55;
  pointer-events: none;
}
.trend-empty-visual{
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.trend-radar-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(94,234,212,.35);
  opacity: 0;
  transform: scale(.3);
  animation: trendRadarPulse 2.6s ease-out infinite;
}
.trend-radar-ring.r1{ animation-delay: 0s; }
.trend-radar-ring.r2{ animation-delay: .85s; }
.trend-radar-ring.r3{ animation-delay: 1.7s; }
@keyframes trendRadarPulse{
  0%   { transform: scale(.25); opacity: 0; border-color: rgba(94,234,212,.7); }
  30%  { opacity: 1; }
  100% { transform: scale(1.6);  opacity: 0; border-color: rgba(167,139,250,.2); }
}
.trend-radar-core{
  position: relative;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #5eead4 45%, rgba(94,234,212,0) 70%);
  box-shadow: 0 0 16px rgba(94,234,212,.6), 0 0 4px rgba(94,234,212,.9);
  z-index: 2;
}
/* Sweep arc — rotating conic-gradient, GPU-composited transform only */
.trend-radar-sweep{
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(94,234,212,.3) 30deg, transparent 60deg);
  mask-image: radial-gradient(circle at center, transparent 22%, #000 26%, #000 100%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 22%, #000 26%, #000 100%);
  animation: trendRadarSweep 3.2s linear infinite;
  opacity: .75;
}
@keyframes trendRadarSweep{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.trend-empty-eyebrow{
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent-300);
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.trend-empty-msg{
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 340px;
  position: relative;
  z-index: 1;
}

/* ---- AI Insight empty state ---- */
.ai-empty{
  padding: 56px 24px 64px;
  text-align: center;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(139,92,246,.03), rgba(94,234,212,.02));
  border: 1px solid rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
.ai-empty-visual{
  position: relative;
  width: 200px;
  height: 56px;
  margin: 0 auto 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.ai-scan-line{
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    rgba(94,234,212,.85),
    rgba(167,139,250,.6),
    transparent);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: 0% 0;
  animation: aiScanShift 1.8s cubic-bezier(.65,.05,.36,1) infinite;
}
.ai-scan-line.ai-scan-line-2{
  animation-delay: .25s;
  background: linear-gradient(90deg,
    transparent,
    rgba(167,139,250,.7),
    rgba(94,234,212,.5),
    transparent);
}
.ai-scan-line.ai-scan-line-3{
  animation-delay: .5s;
  background: linear-gradient(90deg,
    transparent,
    rgba(94,234,212,.6),
    transparent);
}
@keyframes aiScanShift{
  0%   { background-position: -100% 0; opacity: .35; }
  50%  { opacity: 1; }
  100% { background-position: 200% 0;  opacity: .35; }
}
.ai-empty-eyebrow{
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent-300);
  margin-bottom: 6px;
}
.ai-empty-msg{
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 380px;
  margin: 0 auto;
}

/* Mobile: shrink visuals slightly */
@media (max-width: 640px){
  .trend-empty{ padding: 36px 18px 44px; min-height: 180px; }
  .trend-empty-visual{ width: 76px; height: 76px; margin-bottom: 14px; }
  .ai-empty{ padding: 40px 18px 48px; }
  .ai-empty-visual{ width: 160px; height: 44px; margin-bottom: 14px; }
}