body {
  margin: 0;
  background: #F7F8F5;
  color: #15211C;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: #2F6F5B;
  text-decoration: none;
}

a:hover {
  color: #245A49;
}

.al *,.al *::before,.al *::after {
  box-sizing: border-box;
}

.al :focus-visible {
  outline: 3px solid #7CC4A2;
  outline-offset: 3px;
  border-radius: 8px;
}

.al-link {
  color: #46544C;
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease;
}

.al-link:hover {
  color: #15211C;
}

.al-btn {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.al-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(21, 33, 28, .16);
}

.al-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.al-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(21, 33, 28, .08);
  border-color: #CBE0D3;
}

.al-rise {
  animation: al-rise .8s cubic-bezier(.2, .7, .2, 1) both;
}

.al-navlinks {
  display: flex;
}

@media (max-width: 900px) {
  .al-navlinks {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .al-sm-hide {
    display: none !important;
  }
  header {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  header > div {
    gap: 8px !important;
  }
  header a.al-btn {
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
  header .al-link {
    font-size: 13.5px !important;
    white-space: nowrap !important;
  }
}
}

/* Animations */
@keyframes al-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes al-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 111, 91, .45); }
  50% { box-shadow: 0 0 0 7px rgba(47, 111, 91, 0); }
}

@keyframes al-blink {
  50% { opacity: .2; }
}

@keyframes al-ping {
  0% { transform: scale(.5); opacity: .9; }
  70%, 100% { transform: scale(2.3); opacity: 0; }
}

@keyframes al-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-3px, -5px); }
}

@keyframes al-grow {
  0% { transform: scaleX(0); opacity: 1; }
  25%, 85% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes al-fill {
  0% { transform: scaleX(0); }
  70%, 90% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: .25; }
}

@keyframes al-pop {
  0%, 6% { transform: scale(.7); opacity: 0; }
  14%, 86% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes al-stamp {
  0%, 30% { opacity: 0; transform: rotate(-8deg) scale(1.7); }
  40%, 88% { opacity: 1; transform: rotate(-8deg) scale(1); }
  100% { opacity: 0; transform: rotate(-8deg) scale(1); }
}

@keyframes al-scan {
  0% { transform: translateY(0); opacity: 0; }
  8%, 92% { opacity: 1; }
  100% { transform: translateY(var(--scan, 160px)); opacity: 0; }
}

@keyframes al-dash {
  0% { stroke-dashoffset: 100; opacity: 1; }
  38%, 88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes al-xa {
  0%, 40% { opacity: 1; }
  50%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes al-xb {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes al-strike {
  0%, 40% { transform: scaleX(0); }
  50%, 90% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

@keyframes al-travel {
  0% { left: 0; opacity: 0; }
  8%, 92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes al-ok {
  0% { transform: translate(-50%, -14px); opacity: 0; }
  3% { opacity: 1; }
  11.5%, 17% { transform: translate(-50%, 44px); }
  25.5% { transform: translate(-50%, 156px); opacity: 1; }
  28.5%, 100% { transform: translate(-50%, 168px); opacity: 0; }
}

@keyframes al-block {
  0% { transform: translate(-50%, -14px); opacity: 0; }
  3% { opacity: 1; }
  11.5% { transform: translate(-50%, 58px); }
  13% { transform: translate(calc(-50% - 7px), 56px); }
  14.5% { transform: translate(calc(-50% + 7px), 58px); }
  16% { transform: translate(calc(-50% - 4px), 57px); }
  17.5%, 25% { transform: translate(-50%, 58px); opacity: 1; }
  29%, 100% { transform: translate(-50%, 34px); opacity: 0; }
}

@keyframes al-tint {
  0%, 11% { opacity: 0; }
  12.5%, 25% { opacity: 1; }
  29%, 100% { opacity: 0; }
}

@keyframes al-swap-out {
  0%, 13% { opacity: 1; }
  15.5%, 97% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes al-swap-in {
  0%, 13% { opacity: 0; }
  15.5%, 97% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes al-door {
  0%, 10% { opacity: 0; }
  12.5%, 24% { opacity: 1; }
  28%, 100% { opacity: 0; }
}

@keyframes al-hit {
  0%, 23% { opacity: 0; }
  25.5%, 33% { opacity: 1; }
  38%, 100% { opacity: 0; }
}

@keyframes al-hitb {
  0%, 11% { opacity: 0; }
  13%, 25% { opacity: 1; }
  30%, 100% { opacity: 0; }
}

@keyframes al-flash {
  0%, 10.5% { opacity: 0; transform: translateY(4px); }
  12.5%, 26% { opacity: 1; transform: none; }
  29%, 100% { opacity: 0; transform: none; }
}

@keyframes al-r1 {
  0%, 25% { opacity: 0; transform: translateY(6px); }
  27.5%, 95% { opacity: 1; transform: none; }
  98.5%, 100% { opacity: 0; }
}

@keyframes al-r2 {
  0%, 39% { opacity: 0; transform: translateY(6px); }
  41.5%, 95% { opacity: 1; transform: none; }
  98.5%, 100% { opacity: 0; }
}

@keyframes al-r3 {
  0%, 75% { opacity: 0; transform: translateY(6px); }
  77.5%, 95% { opacity: 1; transform: none; }
  98.5%, 100% { opacity: 0; }
}

@keyframes al-r4 {
  0%, 81% { opacity: 0; transform: translateY(6px); }
  83.5%, 95% { opacity: 1; transform: none; }
  98.5%, 100% { opacity: 0; }
}

@keyframes al-click {
  0%, 2.4%, 25%, 27.4%, 50%, 52.4%, 100% { transform: scale(1); }
  1.2%, 26.2%, 51.2% { transform: scale(.8); }
}

@keyframes al-ripple {
  0% { transform: scale(.4); opacity: .85; }
  6%, 100% { transform: scale(2.4); opacity: 0; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .al-reveal {
      animation: al-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .al [data-anim] { animation: none !important; }
  .al-btn, .al-card, .al-link { transition: none !important; }
}

.al[data-motion="off"] [data-anim] {
  animation: none !important;
}

/* Mode Switching (Everyone vs Engineers) */
.al.al-mode-plain .al-mode-tech {
  display: none !important;
}

.al.al-mode-tech .al-mode-plain {
  display: none !important;
}

.al.al-mode-plain .al-mode-btn-plain {
  background: #15211C !important;
  color: #FFFFFF !important;
}

.al.al-mode-plain .al-mode-btn-tech {
  background: transparent !important;
  color: #46544C !important;
}

.al.al-mode-tech .al-mode-btn-plain {
  background: transparent !important;
  color: #46544C !important;
}

.al.al-mode-tech .al-mode-btn-tech {
  background: #15211C !important;
  color: #FFFFFF !important;
}

/* Code Tabs Switching */
.al[data-tab="cli"] .al-code-panel:not([data-panel="cli"]) {
  display: none !important;
}

.al[data-tab="cfg"] .al-code-panel:not([data-panel="cfg"]) {
  display: none !important;
}

.al[data-tab="ci"] .al-code-panel:not([data-panel="ci"]) {
  display: none !important;
}

.al[data-tab="cli"] [data-tab-target="cli"] {
  background: #1E3A2E !important;
  color: #E7F2EC !important;
}

.al[data-tab="cli"] [data-tab-target]:not([data-tab-target="cli"]) {
  background: transparent !important;
  color: #8FB3A0 !important;
}

.al[data-tab="cfg"] [data-tab-target="cfg"] {
  background: #1E3A2E !important;
  color: #E7F2EC !important;
}

.al[data-tab="cfg"] [data-tab-target]:not([data-tab-target="cfg"]) {
  background: transparent !important;
  color: #8FB3A0 !important;
}

.al[data-tab="ci"] [data-tab-target="ci"] {
  background: #1E3A2E !important;
  color: #E7F2EC !important;
}

.al[data-tab="ci"] [data-tab-target]:not([data-tab-target="ci"]) {
  background: transparent !important;
  color: #8FB3A0 !important;
}

/* FAQ Accordion */
.al-faq-body[hidden] {
  display: none !important;
}

.al-faq-item.is-open .al-faq-icon {
  background: #2F6F5B !important;
  color: #FFFFFF !important;
  transform: rotate(180deg) !important;
}

.al-faq-item:not(.is-open) .al-faq-icon {
  background: #F1F4F0 !important;
  color: #2F6F5B !important;
  transform: rotate(0deg) !important;
}

/* 8-state interactive feedback */
.al button:active,
.al a.al-btn:active {
  transform: scale(0.97) !important;
}

/* Accessibility helper */
.al-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}