/* ── Fonts ────────────────────────────────────────────────────────── */
@font-face {
  font-family: Roboto;
  src: url("/fonts/Roboto-Light.ttf");
  font-weight: 100;
}
@font-face {
  font-family: Roboto;
  src: url("/fonts/Roboto-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: Roboto;
  src: url("/fonts/Roboto-Bold.ttf");
  font-weight: 800;
}

/* ── Base ─────────────────────────────────────────────────────────── */
html {
  background-color: #1a1a1d;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #bdc2d5;
  font-family: 'Roboto', sans-serif;
  background: radial-gradient(circle at top left, #2a2a2e 0%, #1a1a1d 35%);
}

h1 { margin: 0; font-size: 42px; text-shadow: #6888DF 0 0 100px; }
h2 { margin: 0; }
p  { margin: 0; font-size: 14px; margin-top: 10px; padding: 0 10px; }
a  { color: #bdc2d5; text-decoration: none; }

/* ── Shared borders / cards ───────────────────────────────────────── */
.newborder1 {
  box-shadow: #6888DF 0 0 100px -20px, inset #6888DF11 0 0 100px 0 !important;
  border: 2px solid #6888DF !important;
}
.newbordergray {
  box-shadow: #3d4357 0 0 100px -20px, inset #3d435711 0 0 100px 0 !important;
  border: 2px solid #3d4357 !important;
}
.singlemodule {
  margin: 10px;
  border-radius: 20px;
  padding: 20px;
  border: 2px solid var(--secondary-background-color);
  background-color: #25293488;
  position: relative;
}
.button {
  border-radius: 15px;
  font-weight: 900;
  padding: 10px 20px;
  background: #25293488;
  box-shadow: #6888DF 0 0 100px 0px, inset #6888DF11 0 0 100px 0 !important;
  display: inline-block;
}
.button > div > p { margin: 0; }

#story, #links {
  scroll-margin-top: 150px;
}

/* ── Header ───────────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: solid 1px #2F3443;
  position: fixed;
  width: calc(100% - 40px);
  z-index: 1;
  backdrop-filter: blur(5px);
}
header > div { display: flex; gap: 30px; }

/* ── Main container ───────────────────────────────────────────────── */
main {
  max-width: 1000px;
  margin: auto;
  width: 90%;
  padding-top: 80px;
}

/* ── Section label (ESPERIENZA / AUTOREVOLEZZA / …) ─────────────── */
.section-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: #6888DF;
  margin: 0 0 8px 10px;
  padding: 0;
  font-weight: 800;
}

/* ── Scroll-appear animations ────────────────────────────────────── */
.hidden {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  filter: blur(1px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.8s ease-out;
}
.hidden:nth-child(2) { transition-delay: 100ms; }
.hidden:nth-child(3) { transition-delay: 200ms; }
.hidden:nth-child(4) { transition-delay: 300ms; }
.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ── Icon filter (same as info.css) ──────────────────────────────── */
h2 > img {
  width: 20px;
  height: 19px;
  margin-right: 10px;
  filter: brightness(0) saturate(100%) invert(84%) sepia(14%) saturate(265%) hue-rotate(190deg) brightness(93%) contrast(88%);
}

/* ════════════════════════════════════════════════════════════════════
   FOUNDER HERO
   ════════════════════════════════════════════════════════════════════ */
#founder-hero {
  display: flex;
  align-items: center;
  gap: 50px;
  min-height: 500px;
  padding: 60px 0;
}

#founder-avatar {
  flex-shrink: 0;
}

#avatar-placeholder {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #25293488;
  border: 3px solid #6888DF;
  box-shadow: #6888DF 0 0 60px -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 800;
  color: #6888DF;
  user-select: none;
}

/* swap avatar-placeholder for a real photo when ready:
   #avatar-placeholder { background-image: url('/images/founder.webp'); background-size: cover; } */

#founder-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#founder-label {
  font-size: 11px;
  letter-spacing: 3px;
  color: #6888DF;
  font-weight: 800;
  margin: 0;
  padding: 0;
}

#founder-intro > h1 { font-size: 48px; }

#founder-tagline {
  max-width: 520px;
  font-size: 15px;
  color: #9aa0b8;
  padding: 0;
}

#founder-cta-links {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}

#founder-cta-links .button > div > p {
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════════
   E-E-A-T BENTO GRID
   ════════════════════════════════════════════════════════════════════ */
#eeat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  margin-bottom: 40px;
}

/* storia: left column spanning both rows */
#story {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

/* numbers: right column, top row */
#numbers {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

/* links: right column, bottom row */
#links {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* Story body */
.story-body > p {
  padding: 0;
  line-height: 1.7;
  font-size: 14px;
  color: #9aa0b8;
}
.eeat-divider {
  border: 1px solid #2F3443;
  margin: 24px 0;
}

/* Stats grid (2×2) */
#stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.stat-card {
  background: #1e2230;
  border-radius: 14px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid #2F3443;
}
.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: #6888DF;
  text-shadow: #6888DF 0 0 40px;
}
.stat-label {
  font-size: 12px;
  color: #6c7289;
  text-align: center;
}

/* Links list */
#links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #1e2230;
  transition: background 0.2s ease;
  position: relative;
}
.link-card:hover { background: #252a3a; }
.link-card > img:first-child {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(84%) sepia(14%) saturate(265%) hue-rotate(190deg) brightness(93%) contrast(88%);
}
.link-card > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.link-card strong { font-size: 14px; color: #bdc2d5; }
.link-card span   { font-size: 12px; color: #6c7289; }
.arrow-small {
  width: 16px;
  height: 16px;
  position: static;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   COMMUNITY-DRIVEN SECTION
   ════════════════════════════════════════════════════════════════════ */
#community {
  margin-bottom: 40px;
  scroll-margin-top: 100px;
}

#community > h2 {
  font-size: 30px;
  margin-top: 6px;
}

#community-sub {
  max-width: 620px;
  font-size: 15px;
  color: #9aa0b8;
  margin-top: 10px;
  padding: 0;
}

#community-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 20px;
}

.community-card {
  /* height constrained to look like bentocards */
  min-height: 140px;
}

.community-card > h2 {
  font-size: 16px;
  margin-bottom: 4px;
}

.community-discord-btn {
  margin-top: 20px;
  margin-left: 10px;
}
.community-discord-btn .button > div > p,
.community-discord-btn > div > p {
  display: flex;
  align-items: center;
  gap: 8px;
}
.community-discord-btn > div > p > img,
.community-discord-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%) invert(84%) sepia(14%) saturate(265%) hue-rotate(190deg) brightness(93%) contrast(88%);
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════════
   CTA
   ════════════════════════════════════════════════════════════════════ */
#cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 500px;
}
#cta > h1 { max-width: 700px; }

/* ── Footer ───────────────────────────────────────────────────────── */
footer {
  border-top: solid 1px #2F3443;
  text-align: center;
  margin-bottom: 10px;
  margin-top: 200px;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  #nav { display: none; }

  #founder-hero {
    flex-direction: column;
    text-align: center;
    gap: 30px;
    min-height: unset;
  }
  #founder-cta-links { justify-content: center; }

  #eeat-grid {
    grid-template-columns: 1fr;
  }
  #story   { grid-column: 1 / 2; grid-row: auto; }
  #numbers { grid-column: 1 / 2; grid-row: auto; }
  #links   { grid-column: 1 / 2; grid-row: auto; }

  #community-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 550px) {
  #stats-grid { grid-template-columns: 1fr 1fr; }

  #community-cards {
    grid-template-columns: 1fr;
  }

  #founder-intro > h1 { font-size: 34px; }

  #pricing > div { display: block; }
}