/* ===================================================================
   CRIPTOFIN - style.css
   Design moderno, sfondo bianco, mobile-first, sopra Bootstrap 5
=================================================================== */
:root{
  --cf-primary:#0b2545;      /* blu profondo */
  --cf-accent:#f7931a;       /* arancio bitcoin */
  --cf-accent2:#16c784;      /* verde crypto */
  --cf-danger:#ea3943;
  --cf-ink:#1a1d29;
  --cf-muted:#6b7280;
  --cf-line:#e9edf3;
  --cf-bg-soft:#f7f9fc;
  --cf-radius:14px;
}

*{ scroll-behavior:smooth; }
body{
  background:#ffffff;
  color:var(--cf-ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:var(--cf-primary); }
a:hover{ color:var(--cf-accent); }
h1,h2,h3,h4,h5{ font-weight:700; color:var(--cf-ink); letter-spacing:-.01em; }

/* ---------- Topbar ---------- */
.cf-topbar{ background:var(--cf-primary); color:#cdd7e6; font-size:.82rem; }
.cf-topbar a{ color:#cdd7e6; }
.cf-topbar a:hover{ color:#fff; }

/* ---------- Navbar ---------- */
.navbar-brand{ font-weight:800; font-size:1.5rem; color:var(--cf-primary)!important; letter-spacing:-.02em; }
.navbar-brand span{ color:var(--cf-accent); }
.cf-nav{ background:#fff; border-bottom:1px solid var(--cf-line); }
.cf-nav .nav-link{ font-weight:600; color:var(--cf-ink); padding:.65rem .9rem!important; font-size:.95rem; }
.cf-nav .nav-link:hover, .cf-nav .nav-link.active{ color:var(--cf-accent); }
.dropdown-menu{ border:1px solid var(--cf-line); border-radius:12px; box-shadow:0 12px 30px rgba(11,37,69,.10); padding:.4rem; }
.dropdown-item{ border-radius:8px; font-size:.9rem; padding:.45rem .7rem; }
.dropdown-item:hover{ background:var(--cf-bg-soft); color:var(--cf-accent); }

/* ---------- Ticker ---------- */
.cf-ticker{ background:var(--cf-bg-soft); border-bottom:1px solid var(--cf-line); overflow:hidden; white-space:nowrap; }
.cf-ticker .track{ display:inline-block; padding:.5rem 0; animation:cf-scroll 40s linear infinite; }
.cf-ticker .coin{ display:inline-block; margin:0 1.1rem; font-size:.85rem; font-weight:600; }
.cf-ticker .up{ color:var(--cf-accent2); }
.cf-ticker .down{ color:var(--cf-danger); }
@keyframes cf-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Badge categoria ---------- */
.cf-badge{
  display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:.25rem .6rem; border-radius:999px;
  background:rgba(247,147,26,.12); color:var(--cf-accent);
}
.cf-badge.eco{ background:rgba(11,37,69,.10); color:var(--cf-primary); }
.cf-badge.reg{ background:rgba(234,57,67,.10); color:var(--cf-danger); }
.cf-badge.guide{ background:rgba(22,199,132,.12); color:var(--cf-accent2); }

/* ---------- Card articolo ---------- */
.cf-card{
  background:#fff; border:1px solid var(--cf-line); border-radius:var(--cf-radius);
  overflow:hidden; height:100%; transition:transform .18s ease, box-shadow .18s ease;
}
.cf-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(11,37,69,.10); }
.cf-card .thumb{ aspect-ratio:16/9; width:100%; object-fit:cover; background:var(--cf-bg-soft); }
.cf-card .body{ padding:1rem 1.05rem 1.15rem; }
.cf-card .title{ font-size:1.02rem; line-height:1.35; margin:.5rem 0 .35rem; }
.cf-card .title a{ color:var(--cf-ink); }
.cf-card .title a:hover{ color:var(--cf-accent); }
.cf-card .meta{ font-size:.78rem; color:var(--cf-muted); }
.cf-card .excerpt{ font-size:.88rem; color:var(--cf-muted); }

/* ---------- Hero ---------- */
.cf-hero{ border-radius:18px; overflow:hidden; position:relative; min-height:340px;
  display:flex; align-items:flex-end; background:var(--cf-primary); color:#fff; }
.cf-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.cf-hero .inner{ position:relative; padding:1.6rem; z-index:2;
  background:linear-gradient(transparent, rgba(11,37,69,.85)); width:100%; }
.cf-hero h2{ color:#fff; font-size:1.7rem; }
.cf-hero .meta{ color:#cdd7e6; font-size:.82rem; }

/* ---------- Sezioni ---------- */
.cf-section-title{ display:flex; align-items:center; gap:.6rem; margin:2rem 0 1rem; }
.cf-section-title h3{ font-size:1.25rem; margin:0; }
.cf-section-title::before{ content:""; width:6px; height:22px; background:var(--cf-accent); border-radius:3px; }
.cf-section-title .more{ margin-left:auto; font-size:.85rem; font-weight:600; }

/* ---------- Sidebar ---------- */
.cf-widget{ background:var(--cf-bg-soft); border:1px solid var(--cf-line); border-radius:var(--cf-radius); padding:1.1rem; margin-bottom:1.4rem; }
.cf-widget h5{ font-size:1rem; margin-bottom:.9rem; }
.cf-mini{ display:flex; gap:.7rem; padding:.55rem 0; border-bottom:1px dashed var(--cf-line); }
.cf-mini:last-child{ border-bottom:none; }
.cf-mini .num{ font-weight:800; color:var(--cf-accent); }
.cf-mini a{ color:var(--cf-ink); font-size:.88rem; font-weight:600; line-height:1.3; }
.cf-mini a:hover{ color:var(--cf-accent); }

/* ---------- Article body ---------- */
.cf-article-body{ font-size:1.06rem; line-height:1.8; color:#25272e; }
.cf-article-body p{ margin-bottom:1.15rem; }
.cf-article-body h2,.cf-article-body h3{ margin:1.8rem 0 .8rem; }
.cf-article-body img{ max-width:100%; border-radius:12px; margin:1rem 0; }
.cf-article-body blockquote{ border-left:4px solid var(--cf-accent); background:var(--cf-bg-soft);
  padding:.8rem 1.1rem; border-radius:0 10px 10px 0; color:#3a3d47; }

/* ---------- Directory ---------- */
.cf-dir-card{ border:1px solid var(--cf-line); border-radius:var(--cf-radius); padding:1.1rem; height:100%; background:#fff; transition:box-shadow .18s; }
.cf-dir-card:hover{ box-shadow:0 12px 28px rgba(11,37,69,.09); }
.cf-dir-logo{ width:48px; height:48px; border-radius:12px; object-fit:contain; background:var(--cf-bg-soft); border:1px solid var(--cf-line); }
.cf-kv{ display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px dashed var(--cf-line); font-size:.9rem; }
.cf-kv:last-child{ border-bottom:none; }
.cf-kv .k{ color:var(--cf-muted); }
.cf-kv .v{ font-weight:600; text-align:right; }

/* ---------- Tools ---------- */
.cf-tool-card{ border:1px solid var(--cf-line); border-radius:var(--cf-radius); padding:1.4rem; background:#fff; height:100%; transition:.18s; }
.cf-tool-card:hover{ border-color:var(--cf-accent); box-shadow:0 12px 28px rgba(247,147,26,.12); }
.cf-tool-ico{ width:46px; height:46px; border-radius:12px; background:rgba(247,147,26,.12);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:.7rem; }
.cf-result{ background:var(--cf-primary); color:#fff; border-radius:12px; padding:1.1rem 1.3rem; }
.cf-result .big{ font-size:1.9rem; font-weight:800; }

/* ---------- Buttons ---------- */
.btn-cf{ background:var(--cf-accent); border-color:var(--cf-accent); color:#fff; font-weight:700; border-radius:10px; }
.btn-cf:hover{ background:#e07f00; border-color:#e07f00; color:#fff; }
.btn-cf-outline{ border:1px solid var(--cf-line); color:var(--cf-ink); font-weight:600; border-radius:10px; background:#fff; }
.btn-cf-outline:hover{ border-color:var(--cf-accent); color:var(--cf-accent); }

/* ---------- Newsletter ---------- */
.cf-newsletter{ background:linear-gradient(135deg,var(--cf-primary),#123a63); color:#fff; border-radius:18px; padding:2rem; }
.cf-newsletter h3{ color:#fff; }
.cf-newsletter .form-control{ border-radius:10px; border:none; }

/* ---------- Footer ---------- */
.cf-footer{ background:var(--cf-primary); color:#aeb9cc; padding:2.6rem 0 1.4rem; margin-top:3rem; font-size:.9rem; }
.cf-footer h6{ color:#fff; text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; margin-bottom:1rem; }
.cf-footer a{ color:#aeb9cc; display:block; padding:.2rem 0; }
.cf-footer a:hover{ color:var(--cf-accent); }
.cf-footer .bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:1.6rem; padding-top:1.2rem; color:#7f8ba3; }

/* ---------- Utility ---------- */
.text-muted-cf{ color:var(--cf-muted)!important; }
.chip{ display:inline-block; background:var(--cf-bg-soft); border:1px solid var(--cf-line);
  border-radius:999px; padding:.3rem .8rem; font-size:.82rem; font-weight:600; margin:.15rem; color:var(--cf-ink); }
.chip:hover{ border-color:var(--cf-accent); color:var(--cf-accent); }
.chip.active{ background:var(--cf-accent); color:#fff; border-color:var(--cf-accent); }

@media (max-width:768px){
  .cf-hero{ min-height:260px; }
  .cf-hero h2{ font-size:1.3rem; }
  body{ font-size:15px; }
}

/* ---------- Schede directory (azienda / criptovaluta / exchange) ---------- */
.cf-scheda-head{
  position:relative; overflow:hidden; border-radius:18px; padding:1.6rem;
  background:linear-gradient(135deg, var(--cf-primary), #123a63); color:#fff; margin-bottom:1.2rem;
}
.cf-scheda-head::after{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  background:var(--cf-accent); opacity:.18; border-radius:50%;
}
.cf-scheda-head .logo{
  width:76px; height:76px; border-radius:16px; object-fit:contain;
  background:#fff; border:1px solid rgba(255,255,255,.35); padding:6px; flex:0 0 auto;
}
.cf-scheda-head h1{ color:#fff; font-size:1.9rem; margin:0; line-height:1.15; }
.cf-scheda-head .sub{ color:#cdd7e6; font-size:.9rem; }
.cf-scheda-head .chip{ background:rgba(255,255,255,.16); color:#fff; border:0; }
.cf-scheda-head .rating{ color:var(--cf-accent); font-size:1.15rem; letter-spacing:1px; }

/* Tessere dati rapide */
.cf-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin-bottom:1.4rem; }
.cf-stat{
  background:#fff; border:1px solid var(--cf-line); border-radius:var(--cf-radius);
  padding:.85rem 1rem;
}
.cf-stat .k{ display:block; color:var(--cf-muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; }
.cf-stat .v{ font-weight:700; font-size:1.05rem; word-break:break-word; }
.cf-stat .v.pos{ color:var(--cf-accent2); }

@media (max-width:575px){
  .cf-scheda-head{ padding:1.15rem; }
  .cf-scheda-head h1{ font-size:1.45rem; }
  .cf-scheda-head .logo{ width:58px; height:58px; }
}