/*
Theme Name: 5 Elements Nodes
Theme URI: https://5elementsnodes.com
Author: 5 Elements Nodes
Author URI: https://5elementsnodes.com
Description: Tema ufficiale 5 Elements Nodes — landing per servizi di validazione PoS. Dark mode, gradiente brand sky→purple, tipografia Montserrat/Inter. Compatibile con WordPress 6.x e PHP 7.4+.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fiveen
Tags: dark, one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, blog, portfolio
*/

:root {
  --bg-0: #0B0B0B; --bg-1: #111111; --bg-2: #161616; --bg-3: #1F1F1F;
  --fg-1: #FFFFFF; --fg-2: #F5F5F5; --fg-3: #A8A8A8; --fg-4: #6B6B6B;
  --border-1: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.16);
  --brand-sky: #6FB6E8; --brand-blue: #4A78D2; --brand-indigo: #4A4FB7;
  --brand-purple: #6A4FB0; --brand-violet: #5E4598;
  --accent: #6A4FB0; --accent-hi: #8366C8;
  --gradient-brand: linear-gradient(135deg, #6FB6E8 0%, #4A78D2 35%, #4A4FB7 65%, #6A4FB0 100%);
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--fg-2); }
body { font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--brand-purple); color: #fff; }

h1,h2,h3,h4 { font-family: var(--font-display); color: var(--fg-1); margin: 0 0 0.5em; text-transform: uppercase; }
h1 { font-weight: 800; font-size: clamp(44px, 7.5vw, 96px); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-weight: 600; font-size: 28px; }
h4 { font-weight: 600; font-size: 22px; letter-spacing: -0.005em; }
p  { margin: 0 0 1em; }

.kicker {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--brand-sky);
  margin-bottom: 14px; display: block;
}
.kicker .slash-l { color: var(--brand-sky); }
.kicker .slash-r { color: var(--brand-purple); }
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ─── NAV ────────────────────────────────────────────── */
.fen-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 240ms, border-color 240ms;
}
.fen-nav.scrolled {
  background: rgba(11,11,11,0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--border-1);
}
.fen-nav__logo {
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 240ms, transform 240ms, visibility 240ms;
}
.fen-nav.past-hero .fen-nav__logo { opacity: 1; visibility: visible; transform: translateY(0); }
.fen-nav__logo img { height: 38px; }

/* ─── BUTTONS ──────────────────────────────────────────── */
.fen-btn {
  display: inline-block; cursor: pointer; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 13px 26px; transition: all 200ms;
  border: none;
}
.fen-btn--outline {
  background: transparent; color: var(--fg-1);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.fen-btn--outline:hover { border-color: var(--brand-sky); color: var(--brand-sky); }
.fen-btn--primary {
  background: var(--gradient-brand); color: var(--fg-1); padding: 14px 28px;
}
.fen-btn--primary:hover { filter: brightness(1.1); }

/* ─── HERO ─────────────────────────────────────────────── */
.fen-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 120px 48px 80px; overflow: hidden; text-align: center;
}
.fen-hero__glow {
  position: absolute; top: 50%; left: 50%;
  width: 900px; height: 900px; transform: translate(-50%, -40%);
  background: radial-gradient(circle, rgba(106,79,176,0.35) 0%, rgba(74,120,210,0.18) 30%, transparent 60%);
  filter: blur(40px); pointer-events: none;
}
.fen-hero__inner { max-width: 1100px; position: relative; z-index: 2; }
.fen-hero__logo { margin-top: 56px; height: 90px; opacity: 0.95; display: inline-block; }
.fen-scroll-hint {
  margin-top: 48px; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-3);
}
.fen-scroll-hint svg { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ─── SECTIONS ─────────────────────────────────────────── */
.fen-section { padding: 96px 48px; border-top: 1px solid var(--border-1); }
.fen-section--noborder { border-top: none; }
.fen-section__inner { max-width: 1280px; margin: 0 auto; }
.fen-section__head { text-align: center; margin-bottom: 56px; }
.fen-section__head p { color: var(--fg-3); max-width: 640px; margin: 16px auto 0; }

/* ─── INTRO ────────────────────────────────────────────── */
.fen-intro__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; max-width: 1100px; margin: 0 auto; }
.fen-intro__head h2 { font-size: 36px; }
.fen-intro__body p:first-child { font-size: 18px; color: var(--fg-2); }
.fen-intro__body p:last-child  { font-size: 18px; color: var(--fg-3); }

/* ─── FEATURE GRID ─────────────────────────────────────── */
.fen-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.fen-feature {
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 8px;
  padding: 32px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color 240ms, transform 240ms;
}
.fen-feature:hover { border-color: rgba(111,182,232,0.4); transform: translateY(-2px); }
.fen-feature h3 { font-size: 22px; }
.fen-feature p { color: var(--fg-3); font-size: 15px; margin: 0; }

/* ─── NETWORK GRID ─────────────────────────────────────── */
.fen-networks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.fen-network {
  background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 8px;
  padding: 28px 20px; display: flex; flex-direction: column; align-items: center;
  gap: 16px; min-height: 180px; justify-content: space-between;
  transition: border-color 240ms, transform 240ms;
}
.fen-network:hover { border-color: var(--border-2); transform: translateY(-2px); }
.fen-network__name {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: 0.05em; color: var(--fg-1);
}
.fen-pill {
  font-family: var(--font-display); font-weight: 600; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.fen-pill--active   { color: var(--brand-sky);  background: rgba(111,182,232,0.12); border: 1px solid rgba(111,182,232,0.4); }
.fen-pill--complete { color: var(--fg-4);       background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.fen-network__cta {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-1);
  border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 2px;
}
.fen-network__cta:hover { color: var(--brand-sky); border-color: var(--brand-sky); }

/* ─── FAQ ──────────────────────────────────────────────── */
.fen-faq { max-width: 1000px; margin: 0 auto; }
.fen-faq__item { border-bottom: 1px solid var(--border-1); }
.fen-faq__q {
  width: 100%; background: transparent; border: none; cursor: pointer;
  padding: 24px 0; display: flex; align-items: center; gap: 24px; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--fg-1);
}
.fen-faq__q[aria-expanded="true"] { color: var(--brand-sky); }
.fen-faq__q .toggle {
  font-weight: 700; font-size: 22px; color: var(--brand-sky); width: 22px; text-align: center;
}
.fen-faq__a {
  max-height: 0; overflow: hidden; transition: max-height 320ms ease-out, padding 240ms ease-out;
}
.fen-faq__a p { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--fg-3); max-width: 760px; margin: 0; }
.fen-faq__item.open .fen-faq__a { max-height: 400px; padding-bottom: 24px; }

/* ─── CONTACT ──────────────────────────────────────────── */
.fen-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 1100px; margin: 0 auto; }
.fen-form { display: flex; flex-direction: column; gap: 16px; }
.fen-field {
  background: var(--bg-0); border: 1px solid var(--border-2); border-radius: 4px;
  padding: 14px 16px; font-family: var(--font-body); font-size: 15px; color: var(--fg-1);
  width: 100%; outline: none; transition: border-color 200ms;
}
.fen-field:focus { border-color: var(--brand-sky); }
.fen-form__label {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px;
}

/* ─── FOOTER ───────────────────────────────────────────── */
.fen-footer {
  padding: 64px 48px 32px; border-top: 1px solid var(--border-1);
  text-align: center;
}
.fen-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.fen-footer__logo { height: 48px; }
.fen-socials { display: flex; gap: 12px; }
.fen-social {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-1); transition: border-color 200ms, color 200ms;
}
.fen-social:hover { border-color: var(--brand-sky); color: var(--brand-sky); }
.fen-copyright { font-size: 12px; color: var(--fg-4); margin: 0; }

/* ─── WP BLOG / PAGE FALLBACK ──────────────────────────── */
.fen-content { max-width: 760px; margin: 0 auto; padding: 160px 24px 96px; }
.fen-content h1, .fen-content h2 { text-transform: none; letter-spacing: -0.01em; }
.fen-content a { color: var(--brand-sky); border-bottom: 1px solid rgba(111,182,232,0.4); }
.fen-content blockquote {
  border-left: 3px solid var(--brand-purple); padding: 8px 24px;
  margin: 24px 0; color: var(--fg-3); font-style: italic;
}
.fen-meta { color: var(--fg-3); font-size: 13px; margin-bottom: 24px; }
.fen-pagination { margin-top: 48px; display: flex; gap: 16px; justify-content: center; }
.fen-pagination .page-numbers {
  padding: 8px 14px; border: 1px solid var(--border-1); border-radius: 4px;
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.1em;
}
.fen-pagination .current { background: var(--brand-purple); border-color: var(--brand-purple); }

/* ─── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 880px) {
  .fen-nav { padding: 14px 20px; }
  .fen-section { padding: 64px 20px; }
  .fen-hero { padding: 100px 20px 60px; }
  .fen-intro__grid, .fen-contact__grid { grid-template-columns: 1fr; gap: 32px; }
  h2 { font-size: 32px; }
}