html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

:root {
  --twk-navy: #0b2d45;
  --twk-blue: #115e8a;
  --twk-teal: #18a4b1;
  --twk-accent: #f4b43c;
  --twk-light: #f6f8fb;
  --twk-muted: #667085;
}

body {
  margin-bottom: 60px;
  background-color: var(--twk-light);
  color: var(--twk-navy);
  font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
}


.twk-topbar {
  background: #2f3a4c;
  color: #fff;
  padding: 0.45rem 0;
}

.twk-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
}

.twk-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.twk-brand-text {
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.twk-topbar-actions {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.twk-topbar-link {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.twk-topbar-link:hover,
.twk-topbar-link:focus {
  color: var(--twk-accent);
}

.twk-navbar {
  background: #fff;
  border-bottom: 1px solid rgba(46, 55, 70, 0.08);
}

.twk-navbar .navbar-brand {
  color: var(--twk-navy);
  font-weight: 600;
}

.twk-navbar .nav-link {
  color: var(--twk-navy);
  font-weight: 500;
}

.twk-navbar .nav-link:hover,
.twk-navbar .nav-link:focus {
  color: var(--twk-blue);
}

@media (max-width: 991.98px) {
  .twk-topbar-actions {
    gap: 1rem;
  }

  .twk-brand-text {
    display: none;
  }
}

.container {
  max-width: 1200px;
}

main {
  padding: 2rem 0 3rem;
}

.card,
.modal-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 12px 30px rgba(17, 94, 138, 0.12);
}

.btn-primary {
  background-color: var(--twk-blue);
  border-color: var(--twk-blue);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #0d4a6f;
  border-color: #0d4a6f;
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--twk-blue);
  color: var(--twk-blue);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--twk-blue);
  color: #fff;
}

.footer {
  background: #fff;
  color: var(--twk-muted);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(24, 164, 177, 0.35);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.twk-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 4rem 3rem;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), rgba(246, 248, 251, 0.8)),
    linear-gradient(120deg, rgba(17, 94, 138, 0.08), rgba(24, 164, 177, 0.08));
  box-shadow: 0 24px 60px rgba(11, 45, 69, 0.12);
}

.twk-hero__visuals {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.twk-hero__orb {
  position: absolute;
  width: 320px;
  height: 320px;
  opacity: 0.8;
  animation: twkFloat 12s ease-in-out infinite;
}

.twk-hero__orb--one {
  top: -120px;
  right: -60px;
  animation-delay: 0s;
}

.twk-hero__orb--two {
  bottom: -140px;
  left: -80px;
  animation-delay: 2s;
}

.twk-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.twk-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(17, 94, 138, 0.12);
  color: var(--twk-blue);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.twk-hero__title {
  margin-top: 1.5rem;
  font-size: clamp(2.6rem, 4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.08;
}

.twk-hero__title-gradient {
  background: linear-gradient(120deg, #ff6b6b, #f4b43c, #4cd7f6, #8c6bff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: twkGradientShift 10s ease infinite;
}

.twk-hero__subtitle {
  margin-top: 1.25rem;
  font-size: 1.1rem;
  color: var(--twk-muted);
}

.twk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.twk-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.twk-hero__stats h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.twk-hero__stats p {
  margin-bottom: 0;
  color: var(--twk-muted);
  font-size: 0.95rem;
}

@keyframes twkGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes twkFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, 20px, 0) scale(1.02);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 767.98px) {
  .twk-hero {
    padding: 3rem 1.75rem;
  }

  .twk-hero__orb {
    width: 220px;
    height: 220px;
  }
}