:root {
  --aio-gold: #d4af37;
  --aio-gold-light: #f2d57e;
  --aio-dark: #03121f;
  --aio-dark-2: #082135;
  --aio-teal: #0089a6;
  --aio-white: #f9fafb;
  --aio-muted: rgba(249, 250, 251, .78);
  --aio-surface: rgba(3, 18, 31, .82);
  --aio-surface-soft: rgba(255, 255, 255, .05);
  --aio-border: rgba(212, 175, 55, .25);
  --aio-danger: #dc3545;
  --aio-success: #198754;
  --aio-warning: #ffc107;
  --aio-info: #0dcaf0;
  --aio-radius-sm: 10px;
  --aio-radius-md: 16px;
  --aio-radius-lg: 24px;
  --aio-shadow: 0 22px 50px rgba(0, 0, 0, .34);
  --aio-content: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--aio-white);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  background:
    radial-gradient(circle at top, rgba(0, 137, 166, .24), transparent 28%),
    radial-gradient(circle at bottom right, rgba(212, 175, 55, .14), transparent 26%),
    linear-gradient(180deg, var(--aio-dark-2) 0%, #04111c 45%, #02070d 100%);
}
img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(3, 18, 31, .93);
  border-bottom: 1px solid var(--aio-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  backdrop-filter: blur(12px);
}
.site-header-inner, .site-footer-inner, .page-shell {
  width: min(var(--aio-content), calc(100% - 32px));
  margin-inline: auto;
}
.site-header-inner {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0;
}
.logo-link { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.site-logo { width: auto; height: 62px; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.brand-stack { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title { color: var(--aio-gold-light); font-size: 1.08rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.brand-tagline { color: var(--aio-muted); font-size: .79rem; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  color: var(--aio-white);
  background: rgba(255,255,255,.05);
  cursor: pointer;
}
.nav-toggle-lines, .nav-toggle-lines::before, .nav-toggle-lines::after {
  width: 20px; height: 2px; display: block; margin: auto; background: currentColor; content: ""; transition: .2s ease;
}
.nav-toggle-lines::before { transform: translateY(-6px); }
.nav-toggle-lines::after { transform: translateY(4px); }
.main-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.site-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: var(--aio-white);
  background: rgba(255,255,255,.03);
  text-decoration: none;
  font-size: .79rem;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
  transition: .18s ease;
}
.site-nav-link:hover, .site-nav-link:focus-visible { color: var(--aio-dark); border-color: transparent; background: linear-gradient(90deg, var(--aio-gold), var(--aio-teal)); transform: translateY(-1px); }
.store-nav-link { color: var(--aio-dark) !important; background: var(--aio-gold); border-color: transparent; border-radius: 10px; }
.store-nav-link:hover { background: #e6c04b; }

.site-main { flex: 1 0 auto; padding: 28px 0 56px; }
.page-shell { position: relative; }
.site-footer { flex-shrink: 0; border-top: 1px solid var(--aio-border); background: rgba(3,18,31,.94); }
.site-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 20px 0 24px; color: rgba(249,250,251,.85); font-size: .9rem; }
.site-footer a { color: var(--aio-gold-light); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-contact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.footer-separator { opacity: .65; }

.hero-panel, .page-card { border: 1px solid var(--aio-border); border-radius: var(--aio-radius-lg); background: var(--aio-surface); box-shadow: var(--aio-shadow); }
.hero-panel { display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; margin-bottom: 28px; }
.hero-copy { padding: 52px 48px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 8px 14px; border: 1px solid rgba(212,175,55,.28); border-radius: 999px; color: var(--aio-gold-light); background: rgba(212,175,55,.13); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero-title { margin: 0 0 14px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: .98; }
.hero-title span { color: var(--aio-gold-light); }
.hero-subtitle { max-width: 620px; margin: 0 0 26px; color: rgba(249,250,251,.88); font-size: 1.04rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-visual { display: flex; align-items: center; justify-content: center; padding: 28px; background: radial-gradient(circle at top, rgba(242,213,126,.45), transparent 38%), linear-gradient(145deg, rgba(212,175,55,.22), rgba(0,137,166,.22)); }
.hero-logo-wrap { width: min(100%, 420px); padding: 18px; border-radius: 28px; background: linear-gradient(135deg, var(--aio-gold), var(--aio-gold-light)); box-shadow: 0 20px 50px rgba(0,0,0,.26); }
.hero-logo { width: 100%; display: block; border-radius: 18px; }

.page-card { padding: 28px; margin-bottom: 24px; }
.page-heading { margin: 0 0 10px; font-size: 2rem; }
.page-subtitle, .section-subtitle { color: var(--aio-muted); line-height: 1.65; }
.section-heading { margin: 0 0 16px; font-size: 1.6rem; }
.section-subtitle { max-width: 760px; margin: 0 0 22px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.service-card { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; color: #08131c; background: rgba(255,255,255,.97); border-radius: 20px; box-shadow: 0 16px 32px rgba(0,0,0,.22); }
.service-card h3 { margin: 0 0 10px; font-size: 1.15rem; line-height: 1.25; }
.service-card p { margin: 0 0 18px; color: #425466; font-size: .94rem; line-height: 1.65; }
.service-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }

.pill-button, .btn-primary, .btn-aio, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 18px; border-radius: 999px; text-decoration: none; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; transition: .18s ease; cursor: pointer;
}
.pill-button, .btn-primary, .btn-aio { border: 0; color: var(--aio-dark); background: linear-gradient(135deg, var(--aio-gold), var(--aio-teal)); box-shadow: 0 12px 24px rgba(0,0,0,.22); }
.pill-button:hover, .btn-primary:hover, .btn-aio:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-secondary { color: var(--aio-white); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); }
.btn-secondary:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }

.messages { list-style: none; padding: 0; margin: 0 0 18px; }
.messages li { padding: 12px 14px; margin-bottom: 10px; border: 1px solid rgba(212,175,55,.25); border-radius: 14px; background: rgba(212,175,55,.12); }
.portal-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 14px; }
.portal-table th, .portal-table td { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.10); text-align: left; vertical-align: top; }

.aio-form label { display: block; margin: 0 0 7px; font-weight: 700; }
.aio-form input, .aio-form select, .aio-form textarea { width: 100%; min-height: 46px; margin: 0 0 16px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: var(--aio-white); background: rgba(255,255,255,.06); }
.aio-form textarea { min-height: 120px; resize: vertical; }
.aio-form input:focus, .aio-form select:focus, .aio-form textarea:focus { outline: 3px solid rgba(0,137,166,.25); border-color: var(--aio-teal); }

@media (max-width: 900px) {
  .site-header-inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-grid; place-items: center; margin-left: auto; }
  .main-nav { width: 100%; display: none; align-items: stretch; justify-content: flex-start; padding: 4px 0 8px; }
  .main-nav.is-open { display: grid; grid-template-columns: 1fr 1fr; }
  .site-nav-link { border-radius: 10px; }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-copy { padding: 34px 24px 20px; }
  .hero-visual { padding: 0 24px 28px; }
}
@media (max-width: 560px) {
  .site-header-inner, .site-footer-inner, .page-shell { width: min(var(--aio-content), calc(100% - 20px)); }
  .site-logo { height: 52px; }
  .brand-title { font-size: .95rem; }
  .brand-tagline { font-size: .72rem; }
  .main-nav.is-open { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.25rem; }
  .page-card { padding: 22px 16px; }
  .service-card { padding: 18px; }
  .site-footer-inner { flex-direction: column; }
}