/* ============================================
  Bitligence Design System - Updated
  Modern fluid, mobile-first, accessible CSS
=============================================== */

:root {
    font-size: 62.5%;
  
    /* Colors */
    --color-body-bg: #F4F6F9;
    --color-section-bg: #FAFAFA;
    --color-section-bg-grey: #d2d2d2;
    /*
    --color-primary: #004D40;
    --color-accent-purple: #522276;
    --color-accent-yellow: #DDA72E;
    --color-accent-coral: #D95F4E;

      --color-primary: #305C45;
          --color-primary: #65C5B9;
*/
  
    --color-primary: #004D40;
   /* --color-accent-purple: #5E3B68;*/
    --color-accent-purple: #5A2C6C;
    
    --color-accent-yellow: #C9A23F;
    --color-accent-coral: #D95F4E;
    --color-accent-green: #F5F9F5;
    --color-muted-light-purple: #C8B7D2;
    
    /*#F2FAF9;*/

        /* Typography 
            --color-body: #4D5466;
        */

        --color-body: #3A3C41; 
   

    --color-heading: #1E1F26;

    --color-subhead: #3A3C41;
    --color-on-dark: #F4F6F9;
   
   
   --color-dark-heading: #1F2933;
    --color-muted: #6B6B6B;
  
    /* Fonts */
    --font-display: 'DM Serif Display', serif;
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-meta: 'Epilogue', sans-serif;
    --font-manrope: 'Manrope', sans-serif;
    --font-heading: var(--font-meta);
  }
  html {
    scroll-behavior: smooth;
  }
  
  /* Base Styles */
  body {
    font-family: var(--font-sans);
    font-size: clamp(1.6rem, 1.5vw, 1.8rem);
    color: var(--color-body);
    background-color: var(--color-body-bg);
    margin: 0;
    line-height: 1.6;
    font-weight: 300;
  }
  
  :where(h1, h2, h3) {
    font-family: var(--font-heading);
    margin:0;
    /*margin-block-end: 1rem;*/
  }
  
  h1 {
    font-size: clamp(2.4rem, 5vw + 1rem, 3.6rem);
    font-weight: 500;
    color: var(--color-heading);
  }
  
  h2 {
    font-size: clamp(2rem, 3.5vw + 1rem, 3.2rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-heading);
  }
  
  h3 {
    font-size: clamp(1.8rem, 2vw, 2.2rem);
    font-weight: 500;
    color: var(--color-subhead);
  }
  p {
    margin-block-end: 1rem;
    font-size: clamp(1.6rem, 1.5vw, 1.9rem);
    line-height: 1.6;
    font-weight: 300;
  }
  .hero-heading {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 6rem); 
    font-weight: 400;

    margin-block-end: 1rem;
    line-height: 6.8rem;
  }
  .big-heading {
    
    color: var(--color-heading);
    margin-block-end: 1rem;
  }
  

  
  small,
  label {
    font-size: 1.4rem;
    color: var(--color-muted);
  }
  
  a {
    color: var(--color-accent-purple);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  a:hover,
  a:focus-visible {
    color: var(--color-accent-coral);
    outline: none;
  }
  
  .btn {
    font-family: var(--font-manrope);
    font-size: 1.7rem;
    font-weight: 400;
    padding: 1.8rem 2.2rem;
    cursor: pointer;
    border: none;
    border-radius: 0rem;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
  }
  
  .btn:focus-visible {
    outline: 0.2rem solid var(--color-accent-coral);
    outline-offset: 0.2rem;
  }
  
  .btn:active {
    transform: scale(0.98);
  }
  
  /* Primary Button */
  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-on-dark);
  }
  
  .btn-primary:hover {
    background-color: var(--color-accent-purple);
  }
  
  /* Secondary Button */
  .btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 0.1rem solid var(--color-primary);
  }
  
  .btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-on-dark);
  }
  
  /* CTA Button */
  .btn-cta {
    background-color: var(--color-accent-purple);
    color: var(--color-on-dark);
    border: 0.1rem solid #FAFAFA;
    border-radius: 0;
    padding: 1rem 2rem;
  }
  
  .btn-cta:hover {
    background-color: var(--color-accent-coral);
  }
  
  /* Utility Classes

  .bg-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, #244035 100%);
    color: var(--color-on-dark);
  } */
   .extra-margin {
    margin-block-end: 2rem;
    margin-block-start: 6rem;
   }
   
  .bg-primary {
    background:var(--color-primary);

    /* background:
      radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, transparent 70%),
      linear-gradient(135deg, var(--color-primary) 0%, #244035 100%);
    */
    color: var(--color-on-dark);
  }
  
  

  
  .bg-section {
    background-color: var(--color-section-bg);
    border-radius: 5rem;
  }
  
  .bg-grey {
    background-color: var(--color-section-bg-grey);
  }
  
  .bg-mint {
    background: linear-gradient(135deg, #F4F6F9 0%, #EBFEF7 100%);
  }
  
  .bg-soft {
    background: linear-gradient(135deg, #FFFFFF 0%, #F4F6F9 100%);
  }
  
  .text-center {
    text-align: center;
  }
  .content-left p {
    text-align: left; /* override for paragraphs only */
    margin: 0 auto 1rem; /* ensure text block stays centered overall */
    max-width: 100rem; /* optional: limit width for better readability */
  }
  
  .text-center-content-left {
    text-align: center; /* center the overall block */
  }
  
  .text-center-content-left > * {
    text-align: left; /* individual children left-aligned */
    margin-inline: auto; /* center children within block */
  }

  
  .text-muted {
    color: var(--color-muted);
  }
  
  .container {

    max-width: 128rem;
    margin-inline: auto;

    padding-inline: clamp(2rem, 4vw, 4rem); /* auto-adjusts for small and large screens */
    padding-block: 2rem;

  }

  .primary-overlay {
    max-width: 100%;
    background-color: var(--color-accent-green);
  }
  .header-bg {
    max-width: 100%;
    background-color: var(--color-primary);
  }
  .padding-block-class {
    padding-block: clamp(2rem, 10vh, 4rem); /* or adjust as needed for more/less spacing */
  }

  /* Lists */
  ul,
  ol {
    margin-block-end: 1rem;
    margin-inline-start: 2rem;
  }
  
  li {
    margin-block: 0.5rem;
  }
  
  /* Form Elements */
  input[type="text"],
  textarea,
  select {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    padding: 0.8rem;
    border: 0.1rem solid #ccc;
    border-radius: 0.4rem;
    width: 100%;
    box-sizing: border-box;
    margin-block-end: 1rem;
  }
  
  input[type="radio"],
  input[type="checkbox"] {
    margin-inline-end: 0.5rem;
  }
  
  /* Color Palette Demo */
  .palette {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .color-swatch {
    flex: 1 1 15rem;
    height: 10rem;
    color: #1E1F26;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    border-radius: 0.4rem;
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1);
  }
  

  .jumbo-btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-primary);
    background-color: transparent;
    border: 0.2rem solid var(--color-primary);
    border-radius: 0.4rem;
    padding: 1.2rem 3rem;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
  }
  
  .jumbo-btn:hover,
  .jumbo-btn:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-on-dark);
    outline: none;
  }
  
  .jumbo-btn:active {
    transform: scale(0.98);
  }

  .jumbo-btn-filled {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 300;
    color: var(--color-on-dark);
    background-color: var(--color-accent-purple);
    border: 0.2rem solid var(--color-on-dark);
    border-radius: 0rem;
    padding: 1.2rem 3rem;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
  }
  
  .jumbo-btn-filled:hover,
  .jumbo-btn-filled:focus-visible {
    background-color: var(--color-accent-coral);
    border-color: var(--color-accent-coral);
    color: var(--color-on-dark);
    outline: none;
  }
  
  .jumbo-btn-filled:active {
    transform: scale(0.98);
  }
  
  .highlighter {
    /* Heading styles */
    h2 {
      font-family: var(--font-display); /* serif for emotional impact */
      font-size: clamp(3.2rem, 4vw, 3.8rem);
   
      margin-bottom: 1.6rem;
    }
  
    /* Body text styles */
    p {
  
      /*font-size: clamp(1.8rem, 1.5vw, 2.2rem);  comfortable B2B size */
      line-height: 1.6; /* spacious, readable */
      font-weight: 300;
      margin-bottom: 1rem;
      color: var(--color-body);
    }
  
    /* Emphasis for keywords within p if desired */
    p span.emphasis {
      color: var(--color-accent-purple);
      font-weight: 500;
    }
  
    /* Button spacing for visual separation */
    button {
      margin-top: 1.5rem;
    }
  }
  


  :root {
    --color-accent-purple: #5A2C6C;
    --color-button-text: #fff;
    --font-heading: 'Epilogue', sans-serif;
    --fs-cta-button: 2.25rem; /* Increased size for CTA */
    --fw-semibold: 300;
    --fw-bold: 400;
  }
  
  .cta-inline {
    display: flex;
    flex-wrap: wrap;
    max-width: 740px;
    margin: 0 auto;

    border: 2px solid var(--color-accent-purple);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.1);
  }
  
  .cta-input {
    flex: 1 1 0%;
    padding: 1.5rem 1.5rem;
    border: none;
    font-size: var(--fs-cta-button); /* Using variable */
    font-weight: var(--fw-semibold);  /* Using variable */
    font-family: var(--font-heading); /* Using variable */
    color: #333;
    background: #fff;
    outline: none;
  }
  
  .cta-button {
    flex: 0 0 auto;
    padding: 1.5rem 2rem;
    background-color: var(--color-accent-purple);
    color: var(--color-button-text);
    font-size: var(--fs-cta-button); /* Using variable */
    font-weight: var(--fw-bold);     /* Using variable */
    font-family: var(--font-heading); /* Using variable */
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  }
  
  .cta-button:hover {
    background-color: #4a2159;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
  }
  
  @media (max-width: 780px) {
    .cta-inline {
      flex-direction: column;
      gap: 0.75rem;
      border: none;
      box-shadow: none;
      overflow: visible;
    }
  
    .cta-input,
    .cta-button {

      border-radius: 0.75rem;
    }
  
    .cta-input {
      border: 1px solid var(--color-accent-purple);
    }
  
    .cta-button {
      box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
    }
  }