/* =========================================
   SWAHUB - PAGES.CSS
   Page-level styling / hero variants / custom sections
========================================= */

/* ---------- Page Hero Variants ---------- */
.page-hero-startups {
    background:
      radial-gradient(circle at top left, rgba(27, 86, 253, 0.08), transparent 26%),
      linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
  }
  
  .page-hero-contributors {
    background:
      radial-gradient(circle at top right, rgba(27, 86, 253, 0.08), transparent 24%),
      linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
  }
  
  .page-hero-how {
    background:
      radial-gradient(circle at center top, rgba(27, 86, 253, 0.07), transparent 22%),
      linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
  }
  
  .page-hero-about {
    background:
      radial-gradient(circle at left center, rgba(27, 86, 253, 0.07), transparent 24%),
      linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
  }
  
  .page-hero-contact {
    background:
      radial-gradient(circle at right center, rgba(27, 86, 253, 0.07), transparent 24%),
      linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
  }
  
  /* ---------- Hero polish ---------- */
  .page-hero::before,
  .hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45)),
      url("../images/backgrounds/swahub-flow-bg.png") center / cover no-repeat;
    opacity: 0.18;
    pointer-events: none;
  }
  
  .page-hero-content,
  .hero-content,
  .page-hero-panel,
  .hero-card {
    position: relative;
    z-index: 1;
  }
  
  .page-hero-panel .hero-panel-card,
  .hero-card .hero-card-inner {
    min-height: 100%;
  }
  
  .page-hero-panel .hero-panel-card {
    border: 1px solid rgba(199, 213, 234, 0.9);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 251, 255, 0.94) 100%);
  }
  
  .hero-panel-item + .hero-panel-item,
  .flow-item + .flow-item {
    padding-top: 14px;
    border-top: 1px solid rgba(219, 229, 242, 0.65);
  }
  
  /* ---------- Home hero custom ---------- */
  .hero-section .hero-grid {
    align-items: stretch;
  }
  
  .hero-section .hero-card {
    display: flex;
  }
  
  .hero-section .hero-card-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .hero-section .hero-content h1 {
    max-width: 860px;
  }
  
  .hero-section .hero-text {
    max-width: 720px;
  }
  
  /* ---------- Section spacing adjustments ---------- */
  .problem-section .section-heading,
  .process-section .section-heading,
  .faq-preview-section .section-heading {
    margin-bottom: 42px;
  }
  
  .role-cta-section .role-cta-grid {
    align-items: stretch;
  }
  
  .role-cta-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
  }
  
  .role-cta-card::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(27, 86, 253, 0.05);
    z-index: 0;
  }
  
  .role-cta-card > * {
    position: relative;
    z-index: 1;
  }
  
  .role-cta-card .card-actions {
    margin-top: 22px;
  }
  
  .startup-card {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 249, 255, 0.98) 100%);
  }
  
  .contributor-card {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%);
  }
  
  /* ---------- Benefit / trust / info card tuning ---------- */
  .benefit-card,
  .trust-card,
  .process-card,
  .info-card {
    min-height: 100%;
  }
  
  .info-card p + ul,
  .info-card p + ol {
    margin-top: 18px;
  }
  
  .info-card ul li,
  .info-card ol li {
    padding-left: 2px;
  }
  
  .ordered-flow {
    margin-top: 18px;
  }
  
  .ordered-flow li {
    color: var(--color-text-muted);
    line-height: 1.6;
  }
  
  /* ---------- Split cards variant ---------- */
  .split-cards .large-card h3 {
    max-width: 95%;
  }
  
  .split-cards .large-card ul,
  .split-cards .large-card ol {
    margin-top: 16px;
  }
  
  /* ---------- Trust section custom look ---------- */
  .trust-section {
    background:
      linear-gradient(180deg, rgba(250, 252, 255, 0.9) 0%, rgba(244, 248, 255, 0.95) 100%);
    border-top: 1px solid rgba(199, 213, 234, 0.4);
    border-bottom: 1px solid rgba(199, 213, 234, 0.4);
  }
  
  .trust-grid .trust-card {
    border-color: rgba(199, 213, 234, 0.85);
  }
  
  /* ---------- Founder note custom ---------- */
  .founder-note-section .founder-note {
    position: relative;
    overflow: hidden;
  }
  
  .founder-note-section .founder-note::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(27, 86, 253, 0.05);
  }
  
  .founder-note-section .founder-note > * {
    position: relative;
    z-index: 1;
  }
  
  /* ---------- Contact form page custom ---------- */
  .contact-form-wrap {
    position: relative;
  }
  
  .contact-form-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(27, 86, 253, 0.02), rgba(27, 86, 253, 0));
    pointer-events: none;
  }
  
  .contact-form .form-actions {
    padding-top: 6px;
  }
  
  /* ---------- Quick actions cards ---------- */
  #quick-actions .benefit-card .text-link {
    margin-top: 16px;
  }
  
  /* ---------- Process section special line feeling ---------- */
  .process-grid {
    position: relative;
  }
  
  .process-grid::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(199, 213, 234, 0),
      rgba(199, 213, 234, 0.8),
      rgba(199, 213, 234, 0)
    );
    z-index: 0;
  }
  
  .process-card {
    position: relative;
    z-index: 1;
  }
  
  /* ---------- CTA strip / small note center ---------- */
  .small-note.center {
    text-align: center;
  }
  
  /* ---------- Footer page harmony ---------- */
  .site-footer {
    position: relative;
  }
  
  .site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0)
    );
  }
  
  /* ---------- Utility variants ---------- */
  .section-heading.left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  
  .card-center {
    text-align: center;
  }
  
  .card-center .card-actions,
  .card-center .text-link {
    justify-content: center;
  }
  
  .surface-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--color-shadow-soft);
  }
  
  /* ---------- Optional banner block if needed later ---------- */
  .statement-banner {
    padding: 28px 32px;
    border-radius: var(--radius-xl);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 255, 0.95) 100%);
    border: 1px solid rgba(199, 213, 234, 0.7);
    box-shadow: var(--color-shadow-soft);
    text-align: center;
  }
  
  .statement-banner h2 {
    color: var(--color-primary);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
  }
  
  .statement-banner p {
    margin-top: 10px;
    color: var(--color-text-muted);
    font-size: 16px;
  }
  
  /* ---------- Page-specific header spacing refinements ---------- */
  .page-hero-startups .page-hero-content h1,
  .page-hero-contributors .page-hero-content h1,
  .page-hero-how .page-hero-content h1,
  .page-hero-about .page-hero-content h1,
  .page-hero-contact .page-hero-content h1 {
    max-width: 880px;
  }
  
  /* ---------- Micro interactions ---------- */
  .info-card:hover .text-link,
  .benefit-card:hover .text-link,
  .role-cta-card:hover .text-link {
    transform: translateX(3px);
  }
  
  .hero-inline-points span:hover,
  .access-point:hover {
    border-color: var(--color-primary);
    transition: var(--transition);
  }
  
  /* ---------- Prevent over-wide text ---------- */
  .info-card p,
  .benefit-card p,
  .trust-card p,
  .process-card p,
  .role-cta-card p,
  .founder-note p {
    max-width: 62ch;
  }
  
  /* ---------- Placeholder for future page custom classes ---------- */
  .page-hero-app,
  .page-hero-community,
  .page-hero-faq {
    background:
      radial-gradient(circle at center, rgba(27, 86, 253, 0.05), transparent 28%),
      linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
  }