@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --ink-900:#04211E;
    --teal-700:#0F6E56;
    --teal-500:#1D9E75;
    --teal-100:#E1F5EE;
    --paper-50:#F4F2EC;
    --white:#FFFFFF;
    --neutral-700:#3D3D3A;
    --neutral-400:#8A8880;
    --neutral-200:#E4E2DA;

    --ink: #0B1F1E;
    --ink-soft: #3E4F4E;
    --teal: #0F5C56;
    --teal-deep: #0A3D39;
    --teal-bright: #0F5C56;
    --paper: #F4F2EC;
    --line: #DCE3E1;
    --card: #FFFFFF;
    --text: #2A3B39;
    --text-dim: #62716F;
    
    --nav-h-desktop:76px;
    --nav-h-mobile:64px;
    --container:1320px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:'Inter',sans-serif;
    background:var(--paper-50);
    color:var(--ink-900);
    overflow-x:hidden;
}


  /* Modern pill CTAs: label + trailing icon capsule, full-round corners */
  .btn-primary, .btn-ghost{
    display:inline-flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:20px;
    padding:6px 6px 6px 28px; 
    border-radius:999px; 
    font-size:15px; 
    font-weight:500;
    font-family:inherit; 
    cursor:pointer; 
    white-space:nowrap; 
    text-decoration:none;
    transition:background 200ms ease, color 200ms ease, border-color 200ms ease,
               transform 200ms ease, box-shadow 200ms ease;
  }
  .btn-primary .btn-icon, .btn-ghost .btn-icon{
    display:flex; 
    align-items:center; 
    justify-content:center; 
    flex-shrink:0;
    width:38px; 
    height:38px; 
    border-radius:50%;
    transition:background 200ms ease, color 200ms ease, transform 350ms cubic-bezier(.2,.8,.2,1);
  }
  .btn-primary .btn-icon svg, .btn-ghost .btn-icon svg{ width:16px; height:16px; display:block; }

  .btn-primary{
    background:var(--teal-500); color:var(--white); border:none;
    box-shadow:0 10px 24px rgba(29,158,117,0.28);
  }
  .btn-primary .btn-icon{ background:var(--white); color:var(--teal-700); }
  .btn-primary:hover{
    background:var(--teal-700);
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(15,110,86,0.32);
  }
  .btn-primary:hover .btn-icon{ transform:rotate(45deg); }
  .btn-primary:active{ transform:translateY(-1px); }

  /* Secondary: soft teal fill + a defined edge so it doesn't blend into
     the background — inverts to solid ink on hover for a clear response. */
  .btn-ghost{
    background:var(--teal-100); color:var(--teal-700);
    border:1.5px solid var(--teal-500);
  }
  .btn-ghost .btn-icon{ background:var(--white); color:var(--teal-700); }
  .btn-ghost:hover{
    background:var(--ink-900); color:var(--white); border-color:var(--ink-900);
    transform:translateY(-3px);
  }
  .btn-ghost:hover .btn-icon{ background:var(--white); color:var(--ink-900); transform:rotate(45deg); }
  .btn-ghost:active{ transform:translateY(-1px); }


  @media (max-width:600px){
    .btn-primary, .btn-ghost{ padding-left:24px; }
  }