/* ============================================
   Fish Finder Value Guide — Design System
   Single source of truth for all UI styling
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  /* Primary Palette — deepened for WCAG AA contrast on white */
  --color-primary: #0077B6;
  --color-primary-dark: #005F8F;
  --color-primary-darker: #004A6E;
  --color-primary-light: #48B8E0;
  --color-primary-rgba: rgba(0, 119, 182, 0.10);

  /* Dark palette — matched to logo charcoal #231F20 */
  --color-dark: #231F20;
  --color-dark-light: #3A3637;
  --color-dark-lighter: #5D5A5B;

  /* Accent — warm contrast against blue palette */
  --color-accent: #F59E0B;
  --color-accent-dark: #D97706;
  --color-accent-light: #FCD34D;
  --color-accent-text: #1A1A1A;

  /* Semantic */
  --color-success: #1A7A32;
  --color-success-dark: #145F27;
  --color-success-light: #E6F9EC;
  --color-error: #C62828;
  --color-error-rgba: rgba(198, 40, 40, 0.1);
  --color-error-bg: #FFF5F5;
  --color-error-border: #FECACA;
  --color-warning-bg: #FFF8E1;
  --color-warning-border: #FFD54F;
  --color-warning-text: #6D5200;
  --color-info-bg: #E8F4FD;
  --color-info-border: #90CAF9;
  --color-info-text: #004A6E;

  /* Neutrals */
  --color-neutral-bg: #F5F7FA;
  --color-white: #FFFFFF;
  --color-border: #E0E4E8;
  --color-disabled: #C5C9CE;

  /* Text */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4A4A4A;
  --color-text-inverse: #FFFFFF;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-size-h1: 44px;
  --font-size-h2: 34px;
  --font-size-h3: 24px;
  --font-size-body: 20px;
  --font-size-label: 18px;
  --font-size-small: 16px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-heading: 1.3;
  --line-height-body: 1.6;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* --- Base Reset & Typography --- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--color-primary-rgba); color: var(--color-dark); }

h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-heading); color: var(--color-text-primary); margin-top: 0; }
h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); margin-bottom: var(--space-lg); }
h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-md); }
h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-md); }
h4 { font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-md); }
p { margin-bottom: 0.75rem; }

a { color: var(--color-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* --- Layout --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }
.container-sm { max-width: 600px; margin: 0 auto; padding: 0 var(--space-lg); }
.container-md { max-width: 800px; margin: 0 auto; padding: 0 var(--space-lg); }

.page-content { padding-top: 80px; padding-bottom: var(--space-2xl); }

/* --- Navigation --- */
.nav {
  background: linear-gradient(180deg, #0a1e30 0%, #112a40 100%);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,174,239,0.08);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-logo img { height: 44px; width: auto; }
.nav-logo .logo-mobile { display: none; }
.nav-logo:hover { opacity: 0.9; }

.nav-links { display: flex; align-items: center; gap: var(--space-lg); }
.nav-links a {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: #b0b5bc;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color var(--transition-fast);
  padding: 6px 0;
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--color-primary); transform: scaleX(0);
  transition: transform var(--transition-base);
}
.nav-links a:hover { color: var(--color-white); text-decoration: none; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.nav-cart { color: var(--color-primary-light); font-weight: var(--font-weight-bold); }
.nav-links a.nav-cart:hover { color: var(--color-white); }
.nav-links a.nav-cart::after { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #d1d5db;
  font-size: 20px;
  cursor: pointer;
  padding: var(--space-sm);
}
.nav-toggle:hover { color: var(--color-white); }

.nav-mobile {
  display: none;
  background: linear-gradient(180deg, #112a40 0%, #0d2236 100%);
  padding: var(--space-sm) var(--space-lg) var(--space-md);
  border-top: 1px solid rgba(0,174,239,0.06);
}
.nav-mobile.open { display: flex; flex-direction: column; gap: var(--space-sm); }
.nav-mobile a {
  display: block;
  padding: var(--space-sm) 0;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  color: #d1d5db;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-mobile a:hover { color: var(--color-white); text-decoration: none; }
.nav-mobile a.nav-cart { color: var(--color-primary-light); }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-logo .logo-desktop { display: none; }
  .nav-logo .logo-mobile { display: block; height: 36px; }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-sans);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-primary { background-color: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background-color: var(--color-primary-dark); color: var(--color-white); box-shadow: 0 4px 14px rgba(0, 174, 239, 0.35); }
.btn-primary:disabled, .btn-primary.loading { background-color: var(--color-disabled); cursor: not-allowed; transform: none; box-shadow: none; }

.btn-dark { background-color: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background-color: var(--color-dark-light); color: var(--color-white); }

.btn-success { background-color: var(--color-success); color: var(--color-white); }
.btn-success:hover { background-color: var(--color-success-dark); color: var(--color-white); }

.btn-secondary { background-color: transparent; color: var(--color-primary); border: 1px solid var(--color-border); }
.btn-secondary:hover { background-color: var(--color-neutral-bg); color: var(--color-primary); }

.btn-outline { background-color: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-outline:hover { background-color: var(--color-primary); color: var(--color-white); }

.btn-small { padding: 6px 12px; font-size: var(--font-size-small); }
.btn-block { width: 100%; }

/* --- Cards --- */
.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-md); }

.card-info {
  background-color: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.card-info h3, .card-info h4 { color: var(--color-info-text); margin-top: 0; }

.card-warning {
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--color-warning-text);
}

.card-success {
  background-color: var(--color-success-light);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--color-success-dark);
}

/* --- Forms --- */
.form-group {
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
  display: block;
}

.form-input,
.form-select,
.form-textarea {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body);
  font-family: var(--font-sans);
  background-color: var(--color-white);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  width: 100%;
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--color-dark-lighter);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236C757D' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  cursor: pointer;
  line-height: 1.4;
  height: auto;
  min-height: 46px;
}
.form-select:disabled {
  background-color: var(--color-neutral-bg);
  color: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: 0.7;
}
.form-select option {
  padding: 8px 12px;
  background-color: var(--color-white);
  color: var(--color-text-primary);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-rgba);
}

.form-input.valid { border-color: var(--color-success); }
.form-input.invalid, .form-input.error { border-color: var(--color-error); }
.form-input.invalid:focus, .form-input.error:focus { box-shadow: 0 0 0 3px var(--color-error-rgba); }

.form-error { font-size: var(--font-size-small); color: var(--color-error); margin-top: var(--space-xs); }
.form-helper { font-size: var(--font-size-small); color: var(--color-text-secondary); margin-top: var(--space-xs); }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

.form-radio {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-neutral-bg);
  cursor: pointer;
  transition: border-color 0.2s;
  margin-bottom: var(--space-md);
}
.form-radio:hover { border-color: var(--color-primary); background-color: var(--color-white); }
.form-radio input[type="radio"] { width: 18px; height: 18px; margin-top: 2px; margin-right: 12px; cursor: pointer; flex-shrink: 0; }

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--space-md);
}
.form-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; cursor: pointer; flex-shrink: 0; }
.form-checkbox label { cursor: pointer; font-size: var(--font-size-body); color: var(--color-text-primary); line-height: var(--line-height-body); }

.form-error-summary {
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.form-error-summary h4 { color: var(--color-error); margin-top: 0; margin-bottom: var(--space-sm); }

/* --- Error Box --- */
.error-box {
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-sm);
  padding: 12px var(--space-md);
  margin-bottom: var(--space-md);
  color: var(--color-error);
  font-size: var(--font-size-body);
}

/* --- Progress Indicator --- */
.progress-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2xl);
}

.progress-step { display: flex; align-items: center; gap: 12px; }

.progress-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  background-color: var(--color-neutral-bg);
  border: 2px solid var(--color-border);
  color: var(--color-text-secondary);
  transition: all 0.3s;
}
.progress-circle.active { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.progress-circle.completed { background-color: var(--color-success); color: var(--color-white); border-color: var(--color-success); }

.progress-label { font-size: var(--font-size-label); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); white-space: nowrap; }
.progress-label.active { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

.progress-connector { width: 40px; height: 2px; background-color: var(--color-border); margin: 0 var(--space-xs); }
.progress-connector.active { background-color: var(--color-primary); }
.progress-connector.completed { background-color: var(--color-success); }

/* --- Tables --- */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
}
.table thead { background-color: var(--color-neutral-bg); border-bottom: 2px solid var(--color-border); }
.table th {
  padding: 12px var(--space-md);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-label);
  color: var(--color-text-primary);
}
.table td {
  padding: 12px var(--space-md);
  font-size: var(--font-size-label);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}
.table tbody tr:nth-child(even) { background-color: var(--color-neutral-bg); }
.table .numeric { text-align: right; }

/* --- Tabs --- */
.tabs { display: flex; border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-xl); gap: var(--space-lg); }
.tab-btn {
  background: none; border: none;
  padding: 12px 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.tab-btn:hover { color: var(--color-primary); }
.tab-btn.active { color: var(--color-primary); }
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background-color: var(--color-primary);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* --- Accordion --- */
.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-sm);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.accordion-item:hover { border-color: var(--color-primary-light); }
.accordion-item.expanded { border-color: var(--color-primary); border-left: 3px solid var(--color-primary); box-shadow: 0 2px 8px rgba(0, 174, 239, 0.1); }
.accordion-btn {
  width: 100%;
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  transition: background-color 0.2s;
}
.accordion-btn:hover { background-color: var(--color-neutral-bg); }
.accordion-btn .accordion-icon { transition: transform 0.3s; color: var(--color-primary); }
.accordion-item.expanded .accordion-btn .accordion-icon { transform: rotate(180deg); }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
  padding: 0 var(--space-lg);
  color: var(--color-text-primary);
  line-height: var(--line-height-body);
  font-size: var(--font-size-body);
}
.accordion-item.expanded .accordion-body {
  max-height: 500px;
  padding: 0 var(--space-lg) var(--space-lg);
}

/* --- Spinner --- */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Utility Classes --- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-secondary { color: var(--color-text-secondary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-small { font-size: var(--font-size-small); }
.text-label { font-size: var(--font-size-label); }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.hidden { display: none; }

.section-alt { background-color: var(--color-neutral-bg); }

.wave-divider { display: block; width: 100%; line-height: 0; }
.wave-divider svg { display: block; width: 100%; height: auto; }

/* --- Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp 0.4s ease both; }
.animate-in:nth-child(2) { animation-delay: 0.08s; }
.animate-in:nth-child(3) { animation-delay: 0.16s; }
.animate-in:nth-child(4) { animation-delay: 0.24s; }

/* --- Footer --- */
.site-footer {
  margin-top: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 100%, rgba(0,60,100,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 0%, rgba(0,174,239,0.06) 0%, transparent 50%),
    linear-gradient(180deg, #0d2840 0%, #0a1e30 100%);
  padding: var(--space-2xl) 0 0;
  color: #d1d5db;
  font-size: var(--font-size-label);
}
.site-footer a { color: #d1d5db; }
.site-footer a:hover { color: var(--color-primary-light); text-decoration: none; }
.site-footer h5 { font-size: var(--font-size-label); font-weight: var(--font-weight-bold); color: var(--color-white); margin-bottom: var(--space-md); text-transform: uppercase; letter-spacing: 0.5px; }
.site-footer address { font-style: normal; line-height: var(--line-height-body); }
.site-footer .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.site-footer .footer-contact-details { display: flex; flex-direction: column; gap: var(--space-xs); }
.site-footer .footer-contact-details i { width: 16px; text-align: center; margin-right: var(--space-xs); color: #9ca3af; }
.site-footer .footer-steps { padding-left: var(--space-lg); margin: 0 0 var(--space-md); }
.site-footer .footer-steps li { margin-bottom: var(--space-sm); }
.site-footer .footer-steps li::marker { color: var(--color-primary-light); font-weight: var(--font-weight-bold); }
.site-footer .footer-cta { border-color: #d1d5db; color: #d1d5db; }
.site-footer .footer-cta:hover { background-color: var(--color-white); color: #111827; border-color: var(--color-white); }
.site-footer .footer-bottom {
  margin-top: var(--space-xl);
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(0,174,239,0.1);
  font-size: var(--font-size-small);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-footer .footer-legal { display: flex; gap: var(--space-md); }
.site-footer .footer-legal a { color: #9ca3af; }
.site-footer .footer-legal a:hover { color: var(--color-primary-light); }
.site-footer .link-list { list-style: none; padding: 0; margin: 0; }
.site-footer .link-list li { margin-bottom: var(--space-sm); }

.link-list-lg { font-size: var(--font-size-body); line-height: 2; }

/* --- Scroll Reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* --- Toast Notifications --- */
.toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 1000;
  color: white; padding: 12px 16px; border-radius: var(--radius-md);
  max-width: 300px; word-wrap: break-word;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
  box-shadow: var(--shadow-lg);
}
.toast-success { background: var(--color-success); }
.toast-error { background: var(--color-error); animation: toastIn 0.3s ease, toastOut 0.3s ease 4.7s forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }

/* --- Ajax Loader --- */
#ajax-loader {
  position: fixed; top: 20px; right: 20px; z-index: 1000;
  background: var(--color-primary); color: white; padding: 10px 16px;
  border-radius: var(--radius-md); display: flex; align-items: center; gap: var(--space-sm);
  box-shadow: var(--shadow-lg); animation: toastIn 0.2s ease;
}

/* --- Scrollup --- */
.scrollup {
  position: fixed;
  width: 44px; height: 44px;
  bottom: 16px; right: 16px;
  background: linear-gradient(135deg, #132d47, #0a1e30);
  border: 1px solid rgba(0,174,239,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-light);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: all 0.2s;
}
.scrollup:hover { background: linear-gradient(135deg, #1a3d5c, #132d47); text-decoration: none; color: var(--color-white); box-shadow: 0 4px 20px rgba(0,174,239,0.2); }
.scrollup i { margin: 0; color: inherit; }

/* --- Page Hero --- */
.page-hero {
  background:
    radial-gradient(ellipse 100% 80% at 80% 20%, rgba(0,174,239,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 100% at 10% 80%, rgba(0,60,100,0.2) 0%, transparent 50%),
    linear-gradient(180deg, #0a1e30 0%, #132d47 50%, #0d2840 100%);
  padding: var(--space-xl) var(--space-lg);
  margin-top: 64px;
  margin-bottom: var(--space-lg);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(6,15,25,0.4) 100%);
}
.page-hero h1 { color: var(--color-white); margin: 0; position: relative; z-index: 1; text-shadow: 0 2px 16px rgba(0,0,0,0.25); }
.page-hero h1 span { color: var(--color-primary-light); }
.page-hero p { color: rgba(255,255,255,0.8); margin: var(--space-sm) 0 0; position: relative; z-index: 1; text-shadow: 0 1px 6px rgba(0,0,0,0.15); }

/* --- Accent Button --- */
.btn-accent { background-color: var(--color-accent); color: var(--color-accent-text); font-weight: var(--font-weight-bold); }
.btn-accent:hover { background-color: var(--color-accent-dark); color: var(--color-accent-text); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35); }

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 36px;
    --font-size-h2: 28px;
    --font-size-h3: 22px;
  }
  .btn { width: 100%; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .site-footer .footer-grid { grid-template-columns: 1fr; }
  .site-footer .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
  .progress-connector { display: none; }
  .progress-indicator { flex-wrap: wrap; gap: var(--space-md); }
}