:root {
  --bg: #f5fbfc;
  --surface: #ffffff;
  --surface-soft: #eef9fb;
  --line: #d8edf1;
  --brand: #0ea8c7;
  --brand-deep: #078ca9;
  --brand-soft: #dff6fa;
  --text: #25444c;
  --muted: #66828a;
  --success-soft: #eaf8f1;
  --success-line: #bfe8d2;
  --warning-soft: #fff8e8;
  --warning-line: #f2ddb0;
  --danger-soft: #fff3f2;
  --danger-line: #f0ceca;
  --shadow: 0 18px 50px rgba(36, 101, 116, .09);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 10% 0%, rgba(14,168,199,.10), transparent 30rem),
    radial-gradient(circle at 100% 15%, rgba(114,215,228,.11), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, li, span { overflow-wrap: break-word; }

.container { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(216,237,241,.88);
  backdrop-filter: blur(14px);
}
.header-inner {
  min-height: 106px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.header-logo { width: min(390px, 47vw); justify-self: center; }
.language-nav { justify-self: end; display: flex; gap: 7px; padding: 5px; border: 1px solid var(--line); background: var(--surface-soft); border-radius: 999px; }
.language-nav a { min-width: 46px; padding: 8px 11px; border-radius: 999px; text-align: center; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.language-nav a:hover, .language-nav a:focus-visible { background: #fff; color: var(--brand-deep); outline: none; }
.language-nav a.active { background: var(--brand); color: #fff; box-shadow: 0 5px 16px rgba(14,168,199,.22); }

.hero { padding: 64px 0 32px; }
.hero-card {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  background: linear-gradient(135deg, #fff 0%, #effafd 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.hero-card::after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; top: -100px; border-radius: 50%; background: rgba(14,168,199,.08); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: var(--brand-deep); font-size: 13px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 7px var(--brand-soft); }
h1 { position: relative; z-index: 1; margin: 0; max-width: 930px; font-size: clamp(30px, 5vw, 54px); line-height: 1.12; letter-spacing: -.035em; color: #23525d; }
.hero-intro { position: relative; z-index: 1; max-width: 930px; margin-top: 24px; padding: 20px 22px; background: rgba(255,255,255,.82); border-left: 4px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: #4b6c74; }
.hero-intro p { margin: 0; }
.hero-intro p + p { margin-top: 12px; }

.content { display: grid; gap: 22px; padding: 18px 0 70px; }
.section-card { padding: clamp(24px, 4vw, 38px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 12px 35px rgba(36,101,116,.055); scroll-margin-top: 130px; }
.section-card.prohibited { background: linear-gradient(135deg, #fff 0%, var(--danger-soft) 100%); border-color: var(--danger-line); }
.section-card.emergency { background: linear-gradient(135deg, #fff 0%, var(--warning-soft) 100%); border-color: var(--warning-line); }
.section-card.standard { background: linear-gradient(135deg, #fff 0%, var(--success-soft) 100%); border-color: var(--success-line); }
.section-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.section-number { flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--brand-soft); color: var(--brand-deep); font-weight: 900; font-size: 18px; }
.prohibited .section-number { background: #ffe3e0; color: #bd6259; }
.emergency .section-number { background: #ffedc7; color: #a57821; }
.standard .section-number { background: #d8f2e4; color: #398261; }
h2 { margin: 3px 0 0; font-size: clamp(21px, 3vw, 30px); line-height: 1.25; letter-spacing: -.02em; color: #2c5b65; }
.section-lead { margin: 0 0 18px; color: #526f76; }
.section-lead p { margin: 0; }
.section-lead p + p { margin-top: 12px; }
.safety-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.safety-list li { position: relative; padding: 14px 16px 14px 48px; background: rgba(245,251,252,.82); border: 1px solid #e2f1f4; border-radius: var(--radius-sm); }
.safety-list li::before { content: "✓"; position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep); font-size: 13px; font-weight: 900; }
.prohibited .safety-list li::before { content: "!"; background: #ffe3e0; color: #bd6259; }
.emergency .safety-list li::before { content: "→"; background: #ffedc7; color: #a57821; }

.checklist { margin-top: 26px; padding-top: 25px; border-top: 1px solid var(--line); }
.checklist-title { margin: 0 0 4px; font-size: 20px; color: #2c5b65; }
.checklist-subtitle { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.check-item { padding: 17px; border: 1px solid var(--line); background: rgba(255,255,255,.88); border-radius: var(--radius-sm); }
.check-item strong { display: block; margin-bottom: 6px; color: var(--brand-deep); }
.check-item span { color: #58757c; }

.quote { margin: 14px 0 22px; padding: 24px clamp(20px, 4vw, 34px); border-radius: var(--radius-md); background: #fff; border: 1px solid var(--success-line); color: #346958; font-size: clamp(18px, 2.5vw, 23px); line-height: 1.55; font-weight: 720; }
.closing { margin: 0; padding-top: 20px; border-top: 1px solid rgba(83,150,117,.20); color: #4d7165; }

.back-row { display: flex; justify-content: center; padding: 0 0 64px; }
.back-link { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border: 1px solid var(--line); background: #fff; border-radius: 999px; text-decoration: none; color: var(--brand-deep); font-weight: 800; box-shadow: 0 8px 24px rgba(36,101,116,.07); }
.back-link:hover, .back-link:focus-visible { transform: translateY(-1px); border-color: #a8dce5; outline: none; }
.footer { padding: 25px 0 34px; text-align: center; color: #789097; font-size: 13px; border-top: 1px solid var(--line); background: rgba(255,255,255,.55); }

/* Language selection */
.language-page { min-height: 100vh; display: grid; place-items: center; padding: 34px 20px; }
.language-shell { width: min(840px, 100%); text-align: center; }
.language-logo { width: min(510px, 85vw); margin: 0 auto 38px; }
.language-card { padding: clamp(30px, 6vw, 58px); background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); }
.language-card h1 { margin-inline: auto; font-size: clamp(30px, 5vw, 46px); }
.language-card p { margin: 15px auto 30px; color: var(--muted); font-size: 18px; }
.language-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.language-choice { min-height: 145px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,#fff,#f0fafc); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.language-choice > span:last-child { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.language-choice:hover, .language-choice:focus-visible { transform: translateY(-4px); border-color: #a4dce6; box-shadow: 0 15px 30px rgba(14,168,199,.12); outline: none; }
.language-code { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--brand-soft); color: var(--brand-deep); font-weight: 900; font-size: 17px; }
.language-name { color: #2c5b65; font-size: 17px; font-weight: 850; }
.language-native { color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
  .container { width: min(100% - 24px, 1120px); }
  .site-header { position: static; }
  .header-inner { min-height: auto; padding: 18px 0 15px; grid-template-columns: 1fr; gap: 13px; }
  .header-inner::before { display: none; }
  .header-logo { width: min(390px, 86vw); }
  .language-nav { justify-self: center; }
  .hero { padding: 24px 0 16px; }
  .hero-card { border-radius: 22px; }
  .section-card { border-radius: 18px; }
  .section-head { gap: 12px; }
  .section-number { width: 42px; height: 42px; border-radius: 13px; font-size: 16px; }
  .check-grid { grid-template-columns: 1fr; }
  .language-grid { grid-template-columns: 1fr; }
  .language-choice { min-height: 105px; flex-direction: row; text-align: left; justify-content: flex-start; }
  .language-choice > span:last-child { display: flex; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 430px) {
  body { line-height: 1.58; }
  .container { width: min(100% - 18px, 1120px); }
  .hero-card, .section-card { padding: 21px 18px; }
  h1 { font-size: 28px; }
  h2 { font-size: 21px; }
  .section-head { align-items: center; }
  .safety-list li { padding: 13px 13px 13px 43px; }
  .safety-list li::before { left: 12px; top: 13px; }
  .language-page { padding: 18px 12px; }
  .language-logo { margin-bottom: 22px; }
  .language-card { padding: 26px 18px; border-radius: 22px; }
  .language-card p { font-size: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  .section-card { animation: rise .45s ease both; }
  .section-card:nth-child(2) { animation-delay: .04s; }
  .section-card:nth-child(3) { animation-delay: .08s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}

/* Accordion sections */
details.section-card {
  padding: 0;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

details.section-card[open] {
  box-shadow: 0 18px 42px rgba(36,101,116,.09);
}

details.section-card > .section-head {
  margin: 0;
  padding: clamp(22px, 4vw, 34px);
  align-items: center;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color .2s ease;
}

details.section-card > .section-head::-webkit-details-marker {
  display: none;
}

details.section-card > .section-head::marker {
  content: "";
}

details.section-card > .section-head:hover,
details.section-card > .section-head:focus-visible {
  background: rgba(238,249,251,.68);
  outline: none;
}

details.section-card.prohibited > .section-head:hover,
details.section-card.prohibited > .section-head:focus-visible {
  background: rgba(255,236,233,.58);
}

details.section-card.emergency > .section-head:hover,
details.section-card.emergency > .section-head:focus-visible {
  background: rgba(255,242,215,.62);
}

details.section-card.standard > .section-head:hover,
details.section-card.standard > .section-head:focus-visible {
  background: rgba(226,247,236,.66);
}

details.section-card > .section-head h2 {
  flex: 1 1 auto;
  min-width: 0;
}

details.section-card > .section-head::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-left: auto;
  border-right: 3px solid var(--brand-deep);
  border-bottom: 3px solid var(--brand-deep);
  transform: rotate(45deg);
  transition: transform .22s ease;
}

details.section-card.prohibited > .section-head::after { border-color: #bd6259; }
details.section-card.emergency > .section-head::after { border-color: #a57821; }
details.section-card.standard > .section-head::after { border-color: #398261; }

details.section-card[open] > .section-head {
  border-bottom: 1px solid var(--line);
}

details.section-card[open] > .section-head::after {
  transform: rotate(-135deg);
}

details.section-card > .section-body {
  padding: 22px clamp(24px, 4vw, 38px) clamp(24px, 4vw, 38px);
}

details.section-card > .section-body > :first-child {
  margin-top: 0;
}

@media (max-width: 430px) {
  details.section-card > .section-head {
    padding: 18px 16px;
    gap: 10px;
  }

  details.section-card > .section-body {
    padding: 18px 16px 20px;
  }

  details.section-card > .section-head::after {
    width: 10px;
    height: 10px;
    border-width: 0 2px 2px 0;
  }
}

/* Header spacing and attention indicator patch */
.header-inner {
  min-height: 0;
  padding-top: 22px;
  padding-bottom: 22px;
}

.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo img {
  width: 100%;
  height: auto;
  max-height: 98px;
  object-fit: contain;
}

.language-page {
  padding-top: 52px;
  padding-bottom: 58px;
}

.language-logo {
  width: min(470px, 82vw);
  margin-top: 0;
  margin-bottom: 44px;
}

.eyebrow::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: #e53935;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 0 0 0 rgba(229, 57, 53, .48),
    0 4px 12px rgba(229, 57, 53, .24);
  animation: attention-pulse 1.25s ease-in-out infinite;
}

@keyframes attention-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(229, 57, 53, .48),
      0 4px 12px rgba(229, 57, 53, .24);
  }
  50% {
    transform: scale(1.08);
    box-shadow:
      0 0 0 9px rgba(229, 57, 53, 0),
      0 5px 15px rgba(229, 57, 53, .32);
  }
}

@media (max-width: 760px) {
  .header-inner {
    padding-top: 20px;
    padding-bottom: 18px;
  }

  .header-logo img {
    max-height: 90px;
  }

  .language-page {
    padding-top: 34px;
    padding-bottom: 40px;
  }

  .language-logo {
    width: min(430px, 86vw);
    margin-bottom: 32px;
  }
}

@media (max-width: 430px) {
  .header-inner {
    padding-top: 16px;
    padding-bottom: 15px;
  }

  .header-logo img {
    max-height: 82px;
  }

  .language-page {
    padding-top: 26px;
    padding-bottom: 30px;
  }

  .language-logo {
    margin-bottom: 26px;
  }

  .eyebrow::before {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow::before {
    animation: none;
  }
}