:root{
   --purple:#5a1b7a;
   --teal:#1aa1a8;

   /* Soft tints derived from brand colours */
   --bg-teal:rgba(26,161,168,.08);
   --bg-purple:rgba(90,27,122,.06);

   /* Header band (complimentary soft tint) */
   --header-bg:#ecfbfb;
   --header-border:rgba(26,161,168,.18);

   --text:#111827;
   --muted:#6b7280;

   --header-h: 86px; /* adjust after you eyeball it */
}

   html, body{
      min-height: 100%;
   }

   html{
      background:
         linear-gradient(
            180deg,
            rgba(26,161,168,.10) 0%,
            rgba(90,27,122,.08) 100%
         );
      background-attachment: fixed;
   }
/*
   body{
      background: transparent;
   }
*/
body{
   font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
   color:var(--text);
   padding-top: var(--header-h);

   /* Soft page wash using brand colours */
   background:
      transparent,
      linear-gradient(
         180deg,
         var(--bg-teal) 0%,
         var(--bg-purple) 100%
      );
   background-attachment: fixed;
}

a{
   color:var(--teal);
}

a:hover{
   color:var(--purple);
}

.brand-mark{
   height:50px;
   width:auto;
}

/* Header */
.site-header{
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1040;
   background:
      radial-gradient(
         1100px 520px at 8% 25%,
         rgba(26,161,168,.22),
         transparent 62%
      ),
      radial-gradient(
         1100px 520px at 92% 0%,
         rgba(90,27,122,.18),
         transparent 58%
      ),
      rgba(236,251,251,.95); /* slightly stronger base than before */

   border-bottom: 1.5px solid rgba(26,161,168,.28);
   box-shadow: 0 6px 14px rgba(0,0,0,.04);
}

/* Hero */
.hero{
   padding:4.25rem 0 3.25rem;
   background:transparent; /* lets the body wash show through */
}

/* Pills / badges */
.badge-soft{
   background:rgba(26,161,168,.15);
   color:var(--teal);
   padding:.4rem .8rem;
   border-radius:999px;
   font-weight:600;
   display:inline-block;
}

/* Cards */
.card-soft{
   background:rgba(255,255,255,.94);
   border-radius:18px;
   border:1px solid rgba(0,0,0,.06);
   box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.section{
   padding:3rem 0;
}

.section-title{
   font-weight:800;
   margin-bottom:1.1rem;
   letter-spacing:-.01em;
}

/* Buttons */
.btn-brand{
   background:linear-gradient(135deg,var(--purple),var(--teal));
   border:none;
}

.btn-brand:hover{
   opacity:.95;
}

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

/* Footer base */
.footer{
   padding:2rem 0;
   border-top:1px solid #eee;
}

/* Desktop spacing polish */
@media (min-width: 992px){
   .section{
      padding:4rem 0;
   }
}

/* Desktop/default: footer sits in normal document flow */
.site-footer{
   position: static;
   width: 100%;
}

/* Mobile: fix footer to bottom of viewport */
@media (max-width: 991.98px){
   .site-footer{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1030;

      /* Match header language */
      background:
         radial-gradient(600px 220px at 20% 0%, rgba(26,161,168,.18), transparent 60%),
         radial-gradient(600px 220px at 80% 100%, rgba(90,27,122,.14), transparent 55%),
         var(--header-bg);

      padding: 0.65rem 0;
      border-top: 1px solid var(--header-border);
      backdrop-filter: blur(4px);
   }

   body{
      padding-bottom: 3.4rem;
   }
}

/* ---- Form readability improvements ---- */
.form-control,
.form-select,
textarea.form-control{
   background-color: rgba(255,255,255,.98);
   border: 1.5px solid rgba(17,24,39,.25); /* slightly darker, more defined */
   border-radius: 0.5rem;
   padding: 0.75rem 0.85rem;
   font-size: 1rem;
   transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder{
   color: #9aa0a6;
   opacity: 1;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus{
   border-color: rgba(26,161,168,.75);
   box-shadow: 0 0 0 0.2rem rgba(26,161,168,.20);
   outline: none;
}

.form-control:disabled,
.form-control[readonly]{
   background-color: #f5f6f8;
   opacity: 1;
}

label{
   font-weight: 500;
   color: #333;
   margin-bottom: 0.35rem;
}

/* Optional form wrapper (use by adding class="form-wrap" around the form block) */
.form-wrap{
   background: rgba(255,255,255,.92);
   border-radius: 0.75rem;
   padding: 1.5rem;
   border: 1px solid rgba(0,0,0,.06);
   box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

   .welcome{
      min-height: 100vh;
      padding: 3rem 0;
   }

   .welcome-logo{
      width: min(360px, 82vw);
      height: auto;
      display: block;
      margin: 0 auto;
   }

      /* Mobile: show nav items as 4 equal-width buttons */
   @media (max-width: 991.98px){
      .nav-tabs-compact{
         width: 100%;
         display: flex;
         flex-direction: row;
         gap: .35rem;
         margin-top: .5rem;
      }

      .nav-tabs-compact .nav-item{
         flex: 1 1 0;
      }

      .nav-tabs-compact .nav-link{
         text-align: center;
         padding: .55rem .4rem;
         border-radius: .65rem;
         background: rgba(255,255,255,.75);
         border: 1px solid rgba(0,0,0,.10);
         font-weight: 600;
         line-height: 1.1;
      }

      .nav-tabs-compact .nav-link.active,
      .nav-tabs-compact .nav-link[aria-current="page"]{
         background: rgba(26,161,168,.12);
         border-color: rgba(26,161,168,.35);
         color: var(--teal);
      }
   }

   /* --- Scroll caret indicators --- */

.scroll-caret{
   position: fixed;
   right: 0.75rem;
   font-size: 1.4rem;
   line-height: 1;
   color: rgba(26,161,168,.45); /* soft teal */
   pointer-events: none;
   opacity: 0;
   transition: opacity .25s ease;
   z-index: 1020;
}

.scroll-caret--up{
   top: calc(var(--header-h) + 0.5rem);
}

.scroll-caret--down{
   bottom: 4.2rem; /* above mobile footer */
}

/* Slightly stronger on mobile */
@media (max-width: 991.98px){
   .scroll-caret{
      font-size: 1.6rem;
      color: rgba(26,161,168,.55);
   }
}