/* /css/main-website/sections.css
   ========================================================================== 
   GFC – Main Website Sections
   --------------------------------------------------------------------------
   Optimized for the reduced landing-page structure:
   - Mission
   - Model + verification layers
   - Current status
   - Long-term token model
   - Roadmap
   - Verification + contact
   ========================================================================== */

/* 1. SECTION FOUNDATION --------------------------------------------------- */
.home {
  --gfc-section-bg: var(--sec-bg, #070b14);
  --gfc-section-bg-alt: var(--sec-bg-soft, #0b111f);
  --gfc-section-surface: var(--sec-surface, rgba(255, 255, 255, 0.045));
  --gfc-section-surface-soft: var(--sec-surface-soft, rgba(255, 255, 255, 0.025));
  --gfc-section-border: var(--sec-border, rgba(255, 255, 255, 0.12));
  --gfc-section-text: var(--sec-ink, var(--text, #f5f7fb));
  --gfc-section-muted: var(--sec-muted, var(--muted, #a9b2c3));
  --gfc-section-accent: var(--sec-accent, var(--accent, #5cc8ff));
  --gfc-section-radius: var(--sec-radius, 16px);
  --gfc-section-radius-lg: var(--sec-radius-lg, 20px);
  --gfc-section-shadow: var(--sec-shadow, 0 18px 46px rgba(0, 0, 0, 0.22));
}


.home .section:not(.hero) {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--gfc-section-text);
}

.home .section:not(.hero).alt {
  background:
    radial-gradient(760px 280px at 85% 0%, rgba(92, 200, 255, 0.055), transparent 68%),
    var(--gfc-section-bg-alt);
}

.home .section:not(.hero).highlight {
  background:
    radial-gradient(840px 320px at 14% 0%, rgba(98, 230, 167, 0.055), transparent 68%),
    var(--gfc-section-bg);
}

.home .section:not(.hero) > .container {
  position: relative;
  z-index: 1;
}

/* 2. TYPOGRAPHY ----------------------------------------------------------- */
.home .section:not(.hero) p {
  max-inline-size: 78ch;
}

.home .section:not(.hero) h2 {
  max-inline-size: 25ch;
  margin-block-end: 1rem;
  text-wrap: balance;
}

.home .section:not(.hero) h3 {
  margin-block-end: 0.5rem;
  text-wrap: balance;
}

.home .section:not(.hero) .eyebrow {
  margin-block-end: 0.625rem;
}

.home .section-intro {
  max-inline-size: 82ch;
  margin-block-end: 0;
  color: var(--gfc-section-muted);
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.7;
}

.home .section:not(.hero) .muted {
  color: var(--gfc-section-muted);
}

.home .section:not(.hero) .small {
  font-size: 0.92rem;
  line-height: 1.62;
}

.home .section:not(.hero) strong {
  color: var(--gfc-section-text);
}

.home .tagline {
  max-inline-size: 78ch;
  margin-block-start: 1.45rem;
}

/* 3. CORE LAYOUT ---------------------------------------------------------- */
.home .two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.home .two-col > * {
  min-inline-size: 0;
}

.home .section-actions,
.home .section:not(.hero) .cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-block-start: 1.35rem;
}

.home .section-actions .btn,
.home .section:not(.hero) .cta-row .btn {
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 46px;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 4. CARDS --------------------------------------------------------------- */
.home .section:not(.hero) .card,
.home .info,
.home .tile,
.home .model-pair {
  border: 1px solid var(--gfc-section-border);
  border-radius: var(--gfc-section-radius);
  background:
    linear-gradient(180deg, var(--gfc-section-surface), var(--gfc-section-surface-soft));
  box-shadow: var(--gfc-section-shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.home .section:not(.hero) .card {
  padding: clamp(1.2rem, 2.5vw, 1.65rem);
}

.home .section:not(.hero) .card h3 {
  color: var(--gfc-section-text);
}

/* 5. MISSION / LISTS ----------------------------------------------------- */
.home .checklist,
.home .compact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home .checklist {
  display: grid;
  gap: 0.75rem;
}

.home .checklist li {
  position: relative;
  min-inline-size: 0;
  padding-inline-start: 1.75rem;
  color: var(--gfc-section-muted);
  line-height: 1.55;
}

.home .checklist li::before {
  content: "✓";
  position: absolute;
  inset-block-start: 0.02em;
  inset-inline-start: 0;
  display: grid;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(92, 200, 255, 0.11);
  color: var(--gfc-section-accent);
  font-size: 0.8rem;
  font-weight: 900;
}

.home .compact {
  display: grid;
  gap: 0.65rem;
}

.home .compact li {
  padding-block-end: 0.65rem;
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--gfc-section-muted);
  line-height: 1.5;
}

.home .compact li:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

/* 6. MODEL + ROADMAP GRIDS ----------------------------------------------- */
.home .info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-block-start: 1.4rem;
}

.home .info {
  position: relative;
  min-inline-size: 0;
  padding: 1.15rem;
}

.home .info::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 1.15rem;
  inline-size: 2.5rem;
  block-size: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gfc-section-accent), rgba(98, 230, 167, 0.8));
}

.home .info h3 {
  margin-block-start: 0.35rem;
  color: var(--gfc-section-accent);
}

.home .info p {
  margin-block-end: 0;
  color: var(--gfc-section-muted);
  line-height: 1.58;
}

/* 7. MODEL PAIRS + TOKEN MODEL TILES ------------------------------------- */
.home #model .model-pairs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-block-start: 1.15rem;
}

.home #model .model-pair {
  min-inline-size: 0;
  overflow: hidden;
}

.home #model .model-core,
.home #model .model-evidence {
  min-inline-size: 0;
  padding: 1.15rem;
}

.home #model .model-core h3,
.home #model .model-evidence h3 {
  margin: 0 0 0.5rem;
  color: var(--gfc-section-accent);
  line-height: 1.25;
}

.home #model .model-core p,
.home #model .model-evidence p {
  margin: 0;
  color: var(--gfc-section-muted);
  line-height: 1.58;
}

.home #model .model-evidence {
  border-block-start: 1px solid var(--gfc-section-border);
  background: linear-gradient(180deg, rgba(92, 200, 255, 0.055), rgba(92, 200, 255, 0.018));
}

.home #model .model-evidence h3 {
  font-size: 1.02rem;
}

.home .tokenomics-grid {
  display: grid;
  gap: 1rem;
  margin: 1.4rem 0;
}

/* Four token-model principles: 4 → 2 → 1 instead of an uneven 3 + 1 layout. */
.home #tokenomics .tokenomics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home .tile {
  position: relative;
  min-inline-size: 0;
  padding: 1.15rem;
  overflow: hidden;
}

.home .tile::after {
  content: "";
  position: absolute;
  inset: auto -2rem -3rem auto;
  inline-size: 7rem;
  block-size: 7rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(92, 200, 255, 0.09), transparent 68%);
  pointer-events: none;
}

.home .tile h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 0.45rem;
  color: var(--gfc-section-accent);
  font-size: 1.08rem;
  line-height: 1.25;
}

.home .tile p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--gfc-section-muted);
  line-height: 1.55;
}

/* 8. STATUS --------------------------------------------------------------- */
.home #status {
  background:
    radial-gradient(780px 300px at 15% 0%, rgba(255, 189, 66, 0.055), transparent 70%),
    var(--gfc-section-bg);
}

.home #status .card {
  border-color: rgba(255, 189, 66, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 189, 66, 0.07), rgba(255, 255, 255, 0.025));
}

.home #status .compact strong {
  color: var(--gfc-section-text);
}

/* 9. ROADMAP -------------------------------------------------------------- */
.home #roadmap .badge {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.6rem;
  margin-inline-start: 0.35rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(92, 200, 255, 0.34);
  border-radius: 999px;
  background: rgba(92, 200, 255, 0.1);
  color: var(--gfc-section-accent);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
  vertical-align: 0.12em;
}

/* 10. CONTACT ------------------------------------------------------------- */
.home #contact,
.home #kontakt {
  background:
    radial-gradient(820px 320px at 82% 0%, rgba(98, 230, 167, 0.055), transparent 70%),
    var(--gfc-section-bg-alt);
}

.home #contact a[href^="mailto:"],
.home #kontakt a[href^="mailto:"] {
  color: var(--gfc-section-accent);
  font-weight: 750;
  text-underline-offset: 0.18em;
}

.home .form {
  display: grid;
  gap: 0.7rem;
  padding: clamp(1.2rem, 2.8vw, 1.65rem);
  border: 1px solid var(--gfc-section-border);
  border-radius: var(--gfc-section-radius-lg);
  background:
    linear-gradient(180deg, var(--gfc-section-surface), var(--gfc-section-surface-soft));
  box-shadow: var(--gfc-section-shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.home .form label {
  color: var(--gfc-section-text);
  font-size: 0.9rem;
  font-weight: 750;
}

.home .form input,
.home .form textarea,
.home .form select {
  inline-size: 100%;
  min-inline-size: 0;
  border-color: var(--gfc-section-border);
  background: rgba(0, 0, 0, 0.12);
  color: var(--gfc-section-text);
}

.home .form input::placeholder,
.home .form textarea::placeholder {
  color: var(--gfc-section-muted);
  opacity: 0.7;
}

.home .form textarea {
  min-block-size: 9rem;
  resize: vertical;
}

.home .form input:hover,
.home .form textarea:hover,
.home .form select:hover {
  border-color: rgba(92, 200, 255, 0.32);
}

.home .form input:focus,
.home .form textarea:focus,
.home .form select:focus {
  border-color: var(--gfc-section-accent);
}

.home .form .input-error,
.home .form [aria-invalid="true"] {
  border-color: rgba(255, 112, 112, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 112, 112, 0.11);
}

.home .form button[type="submit"] {
  justify-self: start;
  margin-block-start: 0.35rem;
}

.home [data-form-status] {
  min-block-size: 1.45em;
}

.home [data-form-status][data-status="error"] {
  color: #ffaaaa;
}

.home [data-form-status][data-status="success"] {
  color: #9df0c9;
}

.home [data-form-status][data-status="info"] {
  color: var(--gfc-section-accent);
}

/* 11. HOVER --------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .home .info,
  .home .tile,
  .home .model-pair {
    transition:
      transform 160ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease,
      background-color 180ms ease;
  }

  .home .info:hover,
  .home .tile:hover,
  .home .model-pair:hover {
    border-color: rgba(92, 200, 255, 0.28);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
  }
}

/* 12. TABLET -------------------------------------------------------------- */
@media (max-width: 1180px) {
  .home #tokenomics .tokenomics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .home .two-col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .home .info-grid,
  .home #model .model-pairs {
    grid-template-columns: 1fr;
  }

  .home .section-actions,
  .home .section:not(.hero) .cta-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home .section-actions .btn,
  .home .section:not(.hero) .cta-row .btn {
    inline-size: 100%;
  }

  .home .form button[type="submit"] {
    justify-self: stretch;
    inline-size: 100%;
  }
}

/* 13. MOBILE -------------------------------------------------------------- */
@media (max-width: 680px) {
  .home .section:not(.hero) {
    padding-block: 46px;
  }

  .home #tokenomics .tokenomics-grid {
    grid-template-columns: 1fr;
  }

  .home .section:not(.hero) .card,
  .home .info,
  .home .tile,
  .home .model-pair,
  .home .form {
    border-radius: 14px;
  }

  .home .compact li {
    padding-block-end: 0.6rem;
  }
}

/* Slightly tighter vertical rhythm on small phones without changing
   horizontal spacing, container widths or component density. */
@media (max-width: 430px) {
  .home .section:not(.hero) {
    padding-block: 40px;
  }
}

/* 14. LIGHT COLOR SCHEME -------------------------------------------------- */
@media (prefers-color-scheme: light) {
  .home {
    --gfc-section-bg: var(--sec-bg, #ffffff);
    --gfc-section-bg-alt: var(--sec-bg-soft, #f4f7fa);
    --gfc-section-surface: rgba(255, 255, 255, 0.92);
    --gfc-section-surface-soft: rgba(248, 250, 252, 0.9);
    --gfc-section-border: rgba(14, 24, 42, 0.12);
    --gfc-section-text: var(--text, #111827);
    --gfc-section-muted: var(--muted, #5f6b7d);
    --gfc-section-accent: var(--accent, #087aaa);
    --gfc-section-shadow: 0 18px 42px rgba(14, 24, 42, 0.08);
  }

  .home .compact li {
    border-block-end-color: rgba(14, 24, 42, 0.08);
  }

  .home .form input,
  .home .form textarea,
  .home .form select {
    background: rgba(14, 24, 42, 0.025);
  }

  .home [data-form-status][data-status="error"] {
    color: #a12626;
  }

  .home [data-form-status][data-status="success"] {
    color: #146b47;
  }

  .home .section:not(.hero) .btn-primary {
    border-color: rgba(7, 17, 31, 0.12);
    background: linear-gradient(180deg, #0ea5e9, #74d7ff);
    color: #07111f;
    box-shadow: 0 10px 24px rgba(14, 165, 233, 0.2);
  }

  .home .section:not(.hero) .btn-primary:hover {
    color: #07111f;
  }
}

/* 15. ACCESSIBILITY / OUTPUT MODES --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home .info,
  .home .tile,
  .home .model-pair {
    transition: none;
  }

  .home .info:hover,
  .home .tile:hover,
  .home .model-pair:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .home .section:not(.hero),
  .home .section:not(.hero).alt,
  .home .section:not(.hero).highlight,
  .home #status,
  .home #contact,
  .home #kontakt {
    background: Canvas;
    color: CanvasText;
  }

  .home .section:not(.hero) .card,
  .home .info,
  .home .tile,
  .home .model-pair,
  .home .form {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .home .checklist li::before,
  .home #roadmap .badge {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .home .form input,
  .home .form textarea,
  .home .form select {
    border: 1px solid FieldText;
    background: Field;
    color: FieldText;
  }
}

@media print {
  .home .section:not(.hero),
  .home .section:not(.hero).alt,
  .home .section:not(.hero).highlight,
  .home #status,
  .home #contact,
  .home #kontakt {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .home .section:not(.hero) .card,
  .home .info,
  .home .tile,
  .home .model-pair,
  .home .form {
    break-inside: avoid;
    border: 1px solid #000000 !important;
    background: none !important;
    color: #000000 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .home .section-intro,
  .home .section:not(.hero) .muted,
  .home .checklist li,
  .home .compact li,
  .home .info p,
  .home .tile p,
  .home .model-core p,
  .home .model-evidence p {
    color: #000000 !important;
  }

  .home .section-actions,
  .home .form {
    display: none !important;
  }
}