/* ==========================================================================
   Sito pubblico — homepage, novità, footer (modulo Contenuti)
   Solo variabili del tema: funziona con chiaro/scuro e con i temi dell'admin.
   ========================================================================== */

/* ---------------------------------------------------------------- Hero */
.hp-hero { position: relative; overflow: hidden; padding: 5.5rem 0 4.5rem; isolation: isolate; }
.hp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); }
.hp-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .28; z-index: -1; pointer-events: none; }
.hp-blob-1 { width: 520px; height: 520px; background: var(--primary); top: -180px; right: -120px; animation: hpFloat 18s ease-in-out infinite; }
.hp-blob-2 { width: 420px; height: 420px; background: var(--accent); bottom: -200px; left: -140px; opacity: .2; animation: hpFloat 22s ease-in-out infinite reverse; }
.hp-blob-3 { width: 300px; height: 300px; background: var(--info); top: 35%; left: 42%; opacity: .14; animation: hpFloat 26s ease-in-out infinite; }
[data-theme="dark"] .hp-blob { opacity: .22; }
@keyframes hpFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -24px) scale(1.06); } 66% { transform: translate(-22px, 18px) scale(.96); } }

.hp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.hp-title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; margin-bottom: 1.25rem;
  background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--text) 70%, var(--primary)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hp-subtitle { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--text-muted); max-width: 580px; line-height: 1.65; margin-bottom: 2rem; }
.hp-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hp-note { display: flex; align-items: center; gap: .45rem; margin: 1.5rem 0 0; color: var(--text-soft); font-size: .86rem; }
.hp-note .icon { color: var(--success); }
.hp-btn-glass { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--border); }
.hp-hero-visual { position: relative; }
.hp-hero-img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }

@media (prefers-reduced-motion: no-preference) {
  .hp-hero-text { animation: hpUp .8s cubic-bezier(.2, .8, .2, 1) both; }
  .hp-hero-visual { animation: hpUp .9s .15s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes hpUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Mock dell'app */
.hp-mock { position: relative; perspective: 1600px; padding: 1.5rem 0; }
.hp-mock-window { position: relative; border-radius: calc(var(--radius-lg) + 2px); overflow: hidden;
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent); box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
  transform: rotateY(-8deg) rotateX(4deg); transform-origin: left center; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.hp-mock:hover .hp-mock-window { transform: rotateY(-3deg) rotateX(2deg); }
.hp-mock-bar { display: flex; align-items: center; gap: .4rem; padding: .65rem .9rem; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.hp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); opacity: .8; }
.hp-dot:nth-child(2) { background: var(--warning); }
.hp-dot:nth-child(3) { background: var(--success); }
.hp-mock-url { margin-left: .8rem; flex: 1; max-width: 260px; display: flex; align-items: center; gap: .3rem; font-size: .7rem; color: var(--text-soft); background: var(--surface-3); border-radius: 99px; padding: .22rem .7rem; overflow: hidden; white-space: nowrap; }
.hp-mock-body { display: grid; grid-template-columns: 56px 1fr; min-height: 340px; }
.hp-mock-side { background: var(--sidebar-bg); padding: .8rem .55rem; display: flex; flex-direction: column; gap: .55rem; align-items: center; }
.hp-mock-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
.hp-mock-nav { width: 30px; height: 8px; border-radius: 99px; background: var(--sidebar-text); opacity: .25; }
.hp-mock-nav.active { background: var(--primary); opacity: 1; }
.hp-mock-cals { margin-top: auto; display: grid; gap: .45rem; }
.hp-mock-cals i { display: block; width: 12px; height: 12px; border-radius: 4px; background: var(--tone); }
.hp-mock-main { padding: .85rem; min-width: 0; }
.hp-mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; font-size: .9rem; gap: .5rem; }
.hp-mock-pills { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-3); border-radius: 8px; font-size: .62rem; color: var(--text-muted); }
.hp-mock-pills span { padding: .2rem .45rem; border-radius: 6px; }
.hp-mock-pills .on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }
.hp-mock-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(6, 38px); gap: 4px;
  background-image: linear-gradient(var(--border) 1px, transparent 1px); background-size: 100% 42px; background-position: 0 40px; }
.hp-mock-day { text-align: center; font-size: .62rem; color: var(--text-soft); padding-bottom: .3rem; line-height: 1.2; }
.hp-mock-day b { display: block; font-size: .85rem; color: var(--text); }
.hp-mock-day.today b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: var(--primary-contrast); margin: 1px auto 0; }
.hp-mock-ev { --tone: var(--primary); border-radius: 7px; padding: .3rem .4rem; font-size: .6rem; font-weight: 600; line-height: 1.2; overflow: hidden;
  background: color-mix(in srgb, var(--tone) 18%, var(--surface)); color: color-mix(in srgb, var(--tone) 60%, var(--text)); border-left: 3px solid var(--tone); }
@media (prefers-reduced-motion: no-preference) {
  .hp-mock-ev { animation: hpPop .5s calc(.5s + var(--d, 0) * .07s) cubic-bezier(.2, .9, .3, 1.3) both; }
}
@keyframes hpPop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.tone-primary { --tone: var(--primary); } .tone-accent { --tone: var(--accent); } .tone-success { --tone: var(--success); }
.tone-warning { --tone: var(--warning); } .tone-danger { --tone: var(--danger); } .tone-info { --tone: var(--info); }

.hp-float { position: absolute; display: flex; align-items: center; gap: .65rem; padding: .7rem .95rem; border-radius: 14px; font-size: .8rem; line-height: 1.3;
  background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--border-strong) 60%, transparent); box-shadow: var(--shadow-lg); max-width: 250px; }
.hp-float strong { display: block; font-size: .82rem; }
.hp-float small { color: var(--text-muted); }
.hp-float-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--info-soft); color: var(--info); }
.hp-float-icon.mail { background: var(--primary-soft); color: var(--primary); }
.hp-float-icon.ok { background: var(--success-soft); color: var(--success); }
.hp-float-1 { top: 0; right: -10px; }
.hp-float-2 { bottom: 4px; left: -28px; }
.hp-float-3 { bottom: 70px; right: -24px; }
@media (prefers-reduced-motion: no-preference) {
  .hp-float-1 { animation: hpUp .7s .9s both, hpBob 6s 1.6s ease-in-out infinite; }
  .hp-float-2 { animation: hpUp .7s 1.15s both, hpBob 7s 1.9s ease-in-out infinite reverse; }
  .hp-float-3 { animation: hpUp .7s 1.4s both, hpBob 8s 2.1s ease-in-out infinite; }
}
@keyframes hpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------------------------------------------------------------- Funzionalità */
.hp-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.hp-feature { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem 1.4rem; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); overflow: hidden; }
.hp-feature::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--hero-gradient); opacity: 0; transition: opacity var(--transition); }
.hp-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.hp-feature:hover::before { opacity: 1; }
.hp-feature h3 { font-size: 1.04rem; margin: 1rem 0 .45rem; }
.hp-feature p { color: var(--text-muted); font-size: .92rem; margin: 0; line-height: 1.6; }
.hp-feature-icon, .hp-highlight-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--tone-soft); color: var(--tone); }
.hp-tone-0 { --tone: var(--primary); --tone-soft: var(--primary-soft); }
.hp-tone-1 { --tone: var(--info); --tone-soft: var(--info-soft); }
.hp-tone-2 { --tone: var(--success); --tone-soft: var(--success-soft); }
.hp-tone-3 { --tone: var(--accent); --tone-soft: color-mix(in srgb, var(--accent) 14%, transparent); }
.hp-tone-4 { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.hp-tone-5 { --tone: var(--danger); --tone-soft: var(--danger-soft); }

/* ---------------------------------------------------------------- Come funziona */
.hp-steps { background: linear-gradient(180deg, transparent, var(--surface-2) 20%, var(--surface-2) 80%, transparent); }
.hp-step-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; counter-reset: step; position: relative; }
.hp-step { position: relative; text-align: center; padding: 0 1rem; }
.hp-step-num { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; font-size: 1.35rem; font-weight: 800; color: #fff; background: var(--hero-gradient); box-shadow: 0 12px 28px -12px var(--primary); margin-bottom: 1rem; position: relative; z-index: 1; }
.hp-step h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.hp-step p { color: var(--text-muted); margin: 0 auto; max-width: 320px; font-size: .94rem; }
@media (min-width: 900px) {
  .hp-step:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: calc(50% + 40px); right: calc(-50% + 40px); border-top: 2px dashed var(--border-strong); }
}

/* ---------------------------------------------------------------- Punti di forza */
.hp-highlight-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.hp-highlight { display: flex; align-items: center; gap: .85rem; padding: 1.3rem 1.25rem; background: var(--surface); }
.hp-highlight-icon { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; }
.hp-highlight strong { display: block; font-size: .95rem; }
.hp-highlight small { display: block; color: var(--text-muted); font-size: .82rem; }

/* ---------------------------------------------------------------- FAQ */
.hp-faq-list { display: grid; gap: .75rem; }
.hp-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); }
.hp-faq-item[open] { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: var(--shadow-sm); }
.hp-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; font-weight: 650; font-size: 1rem; border-radius: var(--radius); }
.hp-faq-item summary::-webkit-details-marker { display: none; }
.hp-faq-item summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hp-faq-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-muted); flex-shrink: 0; transition: transform var(--transition), background var(--transition), color var(--transition); }
.hp-faq-item[open] .hp-faq-icon { transform: rotate(45deg); background: var(--primary-soft); color: var(--primary); }
.hp-faq-body { padding: 0 1.25rem 1.15rem; color: var(--text-muted); line-height: 1.7; }
@media (prefers-reduced-motion: no-preference) {
  .hp-faq-item[open] .hp-faq-body { animation: hpUp .3s ease-out; }
}

/* ---------------------------------------------------------------- CTA finale */
.hp-cta { position: relative; overflow: hidden; text-align: center; color: #fff; background: var(--hero-gradient); border-radius: calc(var(--radius-lg) + 8px); padding: 4rem 2rem; box-shadow: var(--shadow-lg); isolation: isolate; }
.hp-cta h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -.02em; margin-bottom: .6rem; }
.hp-cta p { color: rgba(255, 255, 255, .86); font-size: 1.08rem; max-width: 560px; margin: 0 auto 2rem; }
.hp-cta-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 300px at 15% 0%, rgba(255, 255, 255, .22), transparent 60%), radial-gradient(500px 260px at 90% 110%, rgba(255, 255, 255, .16), transparent 60%); }
.hp-btn-white { background: #fff; color: #111827; border-color: #fff; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); }
.hp-btn-white:hover { background: rgba(255, 255, 255, .92); color: #111827; border-color: #fff; }
.hp-btn-glass-dark { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hp-btn-glass-dark:hover { background: rgba(255, 255, 255, .24); color: #fff; border-color: rgba(255, 255, 255, .5); }

/* ---------------------------------------------------------------- Rivelazione allo scroll (progressive enhancement, senza JS) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hp-reveal:not(.hp-hero-text):not(.hp-hero-visual) { animation: hpReveal linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  }
}
@keyframes hpReveal { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Responsive homepage */
@media (max-width: 1100px) {
  .hp-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-highlight-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hp-hero { padding: 3.5rem 0 3rem; }
  .hp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hp-hero-text { text-align: center; }
  .hp-subtitle { margin-left: auto; margin-right: auto; }
  .hp-actions { justify-content: center; }
  .hp-note { justify-content: center; }
  .hp-mock-window { transform: none; }
  .hp-float-2 { left: 0; } .hp-float-3 { right: 0; } .hp-float-1 { right: 0; }
}
@media (max-width: 600px) {
  .hp-feature-grid, .hp-highlight-strip { grid-template-columns: minmax(0, 1fr); }
  .hp-float-3 { display: none; }
  .hp-float { font-size: .72rem; padding: .55rem .7rem; }
  .hp-mock-body { grid-template-columns: 40px 1fr; min-height: 280px; }
  .hp-mock-grid { grid-template-rows: auto repeat(6, 30px); background-size: 100% 34px; }
  .hp-mock-ev { font-size: 0; }
  .hp-cta { padding: 3rem 1.25rem; }
}

/* ==========================================================================
   Novità (elenco e dettaglio)
   ========================================================================== */
.news-toolbar { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.5rem; }
.news-search { position: relative; flex: 1; max-width: 420px; min-width: 220px; }
.news-search .icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--text-soft); pointer-events: none; }
.news-search input { padding-left: 2.4rem; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; }
.news-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  color: var(--text); text-decoration: none !important; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); position: relative; }
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); color: var(--text); }
.news-card-cover { aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; position: relative; }
.news-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.news-card:hover .news-card-cover img { transform: scale(1.04); }
.news-card-cover.placeholder { display: grid; place-items: center; background: var(--hero-gradient); color: rgba(255, 255, 255, .9); }
.news-card-cover.placeholder::after { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 80% 0%, rgba(255, 255, 255, .25), transparent 60%); }
.news-card-body { padding: 1.15rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.news-card-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .78rem; color: var(--text-soft); }
.news-card h3 { font-size: 1.08rem; margin: 0; line-height: 1.35; }
.news-card p { color: var(--text-muted); font-size: .9rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card-more { margin-top: auto; padding-top: .5rem; font-size: .85rem; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: .3rem; }
.news-card.unread { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.news-card.pinned::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--hero-gradient); z-index: 1; }
.news-badges { position: absolute; top: .75rem; left: .75rem; display: flex; gap: .35rem; z-index: 2; }
.news-badges .badge { box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.badge-solid { background: var(--primary); color: var(--primary-contrast); }
.badge-glass { background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); }

.news-article { max-width: 780px; margin: 0 auto; }
.news-article-head { margin-bottom: 1.75rem; }
.news-article-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.025em; line-height: 1.15; margin: .75rem 0 .75rem; }
.news-article-lead { font-size: 1.15rem; color: var(--text-muted); line-height: 1.6; }
.news-article-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--text-soft); font-size: .86rem; }
.news-article-cover { border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 2rem; box-shadow: var(--shadow); border: 1px solid var(--border); }
.news-article-cover img { width: 100%; display: block; }
.news-article .prose { font-size: 1.04rem; }
.news-article-foot { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.news-public-wrap { padding: 3rem 0 1rem; }
.news-public-wrap .page-head { text-align: center; margin-bottom: 2.25rem; }
.news-public-wrap .page-head h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -.025em; }
.news-public-wrap .page-head p { color: var(--text-muted); font-size: 1.05rem; }

/* Contenuti ricchi (prose): elementi prodotti dall'editor */
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose figure { margin: 1.5rem 0; }
.prose figcaption { font-size: .85rem; color: var(--text-muted); text-align: center; margin-top: .5rem; }
.prose pre { white-space: pre-wrap; }
.prose mark { background: var(--warning-soft); color: inherit; padding: 0 .15em; border-radius: 3px; }
.prose hr { margin: 2rem 0; }
.prose .table-wrap, .prose table { overflow-x: auto; }
.prose .lead { font-size: 1.15em; color: var(--text-muted); }
.prose .callout { padding: 1rem 1.25rem; background: var(--primary-soft); border-radius: var(--radius); }
.prose img.align-center, .prose .align-center { display: block; margin-left: auto; margin-right: auto; }
.prose img.align-left { float: left; margin: .25rem 1.25rem 1rem 0; max-width: 50%; }
.prose img.align-right { float: right; margin: .25rem 0 1rem 1.25rem; max-width: 50%; }
.prose img.img-full { width: 100%; }

/* ==========================================================================
   Footer pubblico
   ========================================================================== */
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; inset: -1px 0 auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 60%, transparent), transparent); }
.sf-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 2.25rem 2rem; }
.sf-about p { margin: .9rem 0 1.1rem; max-width: 340px; line-height: 1.6; }
.sf-col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text); margin-bottom: .9rem; }
.sf-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.sf-socials { display: flex; flex-wrap: wrap; gap: .45rem; }
.sf-socials a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-3); color: var(--text-muted); transition: background var(--transition), color var(--transition), transform var(--transition); }
.sf-socials a:hover { background: var(--primary); color: var(--primary-contrast); transform: translateY(-2px); text-decoration: none; }
.sf-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; font-size: .82rem; }
.sf-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.sf-legal button { background: none; border: 0; padding: 0; font: inherit; color: var(--text-muted); cursor: pointer; }
.sf-legal button:hover { color: var(--primary); }
.sf-company { width: 100%; color: var(--text-soft); font-size: .78rem; line-height: 1.6; }
@media (max-width: 720px) {
  .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-about { grid-column: 1 / -1; }
}