html {
  scroll-behavior: smooth;
}
body {
  font-family: Georgia, "Times New Roman", serif;
}
.sans {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade.in {
  opacity: 1;
  transform: translateY(0);
}
.image-mask {
  clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%);
}
:root {
  --primary: #38c0ff;
  --primary-hover: #38c0ff;
  --primary-dark: #1a5a79;
  --secondary: #0e3548;
  --page: #f2f2f2;
  --surface: #ffffff;
  --surface-soft: #f2f2f2;
  --dark: #1f1f1f;
  --dark-soft: #252525;
  --dark-card: #303030;
  --text: #1f1f1f;
  --text-muted: #808080;
  --text-light: #ffffff;
  --text-light-muted: #9bbccc;
  --border: #9bbccc;
  --border-dark: #124157;
  --primary-line: rgba(42, 143, 189, 0.28);
  --primary-glow: 0 14px 38px rgba(56, 192, 255, 0.18);
}
a[href*="159.203.16.214"],
a[href^="#"].border,
button {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--dark) !important;
  box-shadow: var(--primary-glow);
}
a[href*="159.203.16.214"]:hover,
a[href^="#"].border:hover,
button:hover {
  background: var(--primary-hover) !important;
}
.login-cta,
.register-cta {
  display: inline-flex !important;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 22px !important;
  border: 1px solid var(--primary) !important;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-decoration: none !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease,
    background 0.22s ease, color 0.22s ease;
}
.login-cta {
  background: var(--surface) !important;
  color: var(--text) !important;
}
.register-cta {
  background: var(--primary) !important;
  color: var(--secondary) !important;
  box-shadow: var(--primary-glow);
}
.login-cta:hover,
.register-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(56, 192, 255, 0.24);
}
footer a,
footer a[href*="159.203.16.214"] {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  text-decoration: none !important;
}
footer a:hover,
footer a[href*="159.203.16.214"]:hover {
  background: transparent !important;
  color: var(--primary) !important;
}
header,
aside,
footer,
.border,
.border-y,
.border-t,
.border-b,
.border-r,
.border-l-4 {
  border-color: var(--border) !important;
}
article,
details,
.fade.bg-white,
.fade.bg-paper,
article.bg-paper {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--primary-glow);
}
.bg-surface-soft\/45,
.bg-surface-soft article,
article.bg-surface-soft {
  background: var(--surface-soft) !important;
  color: var(--text) !important;
}
section.bg-white {
  background: var(--surface) !important;
}
section.bg-surface-soft article,
.bg-surface-soft article,
article.bg-surface-soft {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.bg-surface-soft,
footer .bg-surface-soft,
section.bg-surface-soft {
  background: var(--surface) !important;
  color: var(--text) !important;
}
.bg-white,
.bg-paper,
header.bg-paper\/90,
aside.bg-paper\/90,
#menuPanel.bg-paper {
  background: var(--surface) !important;
}
.text-white {
  color: var(--text) !important;
}
.text-white\/65,
.text-white\/70 {
  color: var(--text-muted) !important;
}
.text-coal\/55,
.text-coal\/60,
.text-coal\/65,
.text-coal\/70,
.text-coal\/75 {
  color: var(--text-muted) !important;
}
.text-gold,
strong,
h3,
summary:hover,
nav a:hover,
footer h3 {
  color: var(--primary) !important;
}
img {
  border-color: var(--primary) !important;
}
main img {
  border: 2px solid var(--primary-line);
  box-shadow: var(--primary-glow);
}
footer img {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.faq-list {
  display: grid;
  gap: 14px;
  border: 0 !important;
}
#faq details {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: 0 10px 28px rgba(56, 192, 255, 0.1);
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
    transform 0.25s ease;
}
#faq details:hover {
  border-color: var(--primary) !important;
  transform: translateY(-2px);
}
#faq details[open] {
  border-color: var(--primary) !important;
  box-shadow: 0 18px 44px rgba(56, 192, 255, 0.16);
}
#faq summary {
  position: relative;
  display: flex;
  min-height: 76px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  color: var(--text);
  list-style: none;
}
#faq summary::-webkit-details-marker {
  display: none;
}
#faq summary::after {
  content: "+";
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: var(--secondary);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 22px;
  line-height: 1;
  transition: transform 0.28s ease, background 0.28s ease;
}
#faq details[open] summary::after {
  transform: rotate(45deg);
  background: var(--primary-hover);
}
#faq details p {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 26px;
  color: var(--text-muted) !important;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.28s ease,
    padding 0.35s ease;
}
#faq details[open] p {
  max-height: 220px;
  padding: 0 26px 24px;
  opacity: 1;
}
.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
#menuButton.is-open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#menuButton.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
#menuButton.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.mobile-actions {
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
}
.mobile-action-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--text) !important;
  text-decoration: none !important;
}
.mobile-action-login {
  border: 1px solid var(--border);
  background: var(--surface) !important;
}
.mobile-action-register {
  border: 1px solid var(--primary);
  background: var(--primary) !important;
  box-shadow: var(--primary-glow);
}
.scroll-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary-dark);
  border-radius: 999px;
  background: var(--primary);
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  box-shadow: var(--primary-glow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease,
    background 0.25s ease;
}
.scroll-top:hover {
  background: var(--primary-hover);
  transform: translateY(10px);
}
.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top.is-visible:hover {
  transform: translateY(-2px);
}
.hero-title {
  color: var(--text) !important;
  text-shadow: none;
}
.hero-kicker,
.hero-subtitle {
  color: var(--primary) !important;
  text-shadow: none;
}
.hero-image {
  border: 0 !important;
  box-shadow: none !important;
}
.primary-nav,
.primary-nav a {
  color: #fff !important;
}
.secondary-header-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
a.header-login-outline,
.header-login-outline {
  background: transparent !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}
a.header-login-outline:hover,
.header-login-outline:hover {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: var(--primary-glow) !important;
}
a.header-register-filled,
.header-register-filled {
  color: #fff !important;
}

/* PDF content presentation: responsive long-form sections, tables and imagery. */
.pdf-section p + p {
  margin-top: 1rem;
}
.pdf-section strong {
  font-weight: 800;
  color: #0f172a;
}
.pdf-section table {
  font-variant-numeric: tabular-nums;
}

/* PDF content presentation: responsive long-form sections, tables and imagery. */
.pdf-section p + p {
  margin-top: 1rem;
}
.pdf-section strong {
  font-weight: 800;
  color: #0f172a;
}
.pdf-section table {
  font-variant-numeric: tabular-nums;
}

header nav a,
header nav button {
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* Dark theme colors adapted from target.html. Layout and component structure are unchanged. */
:root {
  --primary: #38c0ff !important;
  --primary-hover: #38c0ff !important;
  --primary-dark: #1a5a79 !important;
  --secondary: #0e3548 !important;
  --page: #1f1f1f !important;
  --surface: #252525 !important;
  --surface-soft: #303030 !important;
  --dark: #1f1f1f !important;
  --dark-soft: #252525 !important;
  --dark-card: #303030 !important;
  --text: #ffffff !important;
  --text-muted: #9bbccc !important;
  --text-light: #ffffff !important;
  --text-light-muted: #9bbccc !important;
  --border: #124157 !important;
  --border-dark: #0e3548 !important;
  --primary-line: rgba(56, 192, 255, 0.22) !important;
  --primary-glow: 0 14px 38px rgba(56, 192, 255, 0.14) !important;
}
html,
body {
  background: var(--page) !important;
  color: var(--text) !important;
}
body.bg-page,
main,
section.bg-slate-50 {
  background: var(--page) !important;
}
header,
.glass {
  background: rgba(31, 31, 31, 0.94) !important;
}
nav.bg-brand,
.primary-nav {
  background: var(--primary) !important;
}
#mobileMenu,
#menuPanel,
aside {
  background: var(--surface) !important;
}
.bg-white,
section.bg-white,
article.bg-white,
div.bg-white,
footer.bg-white,
.bg-paper,
.fade.bg-paper,
article.bg-paper,
header.bg-paper\/90,
aside.bg-paper\/90,
#menuPanel.bg-paper {
  background: var(--surface) !important;
}
.bg-slate-50,
.bg-slate-100,
.bg-mist,
.bg-surface-soft,
section.bg-surface-soft,
div.bg-surface-soft,
article.bg-surface-soft,
.bg-surface-soft\/45 {
  background: var(--surface-soft) !important;
}
.bg-white\/10,
.rounded-3xl.bg-white\/10 {
  background: rgba(255, 255, 255, 0.05) !important;
}
.text-slate-950,
.text-slate-900,
.text-slate-800,
.text-coal,
.text-white,
h1,
h2 {
  color: var(--text) !important;
}
.text-slate-700,
.text-slate-600,
.text-slate-500,
.text-slate-400,
.text-slate-300,
.text-coal\/55,
.text-coal\/60,
.text-coal\/65,
.text-coal\/70,
.text-coal\/75,
.text-white\/65,
.text-white\/70,
.text-amber-100,
.text-amber-100\/80 {
  color: var(--text-muted) !important;
}
.pdf-section strong {
  color: var(--primary-hover) !important;
}
.border-slate-100,
.border-slate-200,
.border-slate-300,
.border-white\/10,
.border-white\/15,
.border-white\/20,
.border-brand\/20,
.border-brand\/30,
.border-brand\/40,
.border,
.border-t,
.border-b,
.border-y,
.border-r,
.border-l-4 {
  border-color: var(--border) !important;
}
thead,
thead.bg-slate-100 {
  background: var(--secondary) !important;
}
tbody tr {
  border-color: var(--border) !important;
}
.hero-title {
  color: var(--text) !important;
}
.mobile-actions {
  background: rgba(31, 31, 31, 0.97) !important;
  border-color: var(--border) !important;
}
.mobile-action-login,
.login-cta {
  background: var(--surface) !important;
  color: var(--text) !important;
}
.header-login-outline {
  color: var(--primary-hover) !important;
}
footer,
footer .bg-surface-soft {
  background: #1f1f1f !important;
  color: var(--text) !important;
}

/* Desktop navigation items: primary W88 blue */
.secondary-header-primary .primary-nav a {
  background: var(--primary) !important;
  color: #fff !important;
}
.secondary-header-primary .primary-nav a:hover {
  color: #000 !important;
}
@media (max-width: 639px) {
  .header-login-outline,
  .header-register-filled {
    display: none !important;
  }
}