/* ============================================================
   OCEAN SAFETY ALLIANCE — Design System  (DARK / PREMIUM)
   Headlines: Archivo · Body: Public Sans
   Deep ocean-black base + luminous safety amber + steel teal
   ============================================================ */

:root {
  /* Type */
  --font-head: "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Surfaces — deep ocean black scale */
  --bg:       #05121A;   /* page base */
  --bg-2:     #081C26;   /* alt band */
  --panel:    #0C2330;   /* card */
  --panel-2:  #0F2C3B;   /* elevated / feature card */
  --panel-hi: #133546;   /* hover */

  /* Ink */
  --head:     #F4FAFB;
  --ink:      #D6E3E7;
  --muted:    #93AAB3;
  --faint:    #61808B;

  /* Lines (light on dark) */
  --line:        rgba(176,205,213,0.12);
  --line-strong: rgba(176,205,213,0.24);

  /* Luminous safety amber */
  --accent:      #F2913B;
  --accent-2:    #FFB05A;
  --accent-deep: #D2761F;
  --accent-soft: rgba(242,145,59,0.14);
  --accent-line: rgba(242,145,59,0.38);

  /* Steel blue (secondary accent — matched to logo "Safety Alliance" #4C8DA5, lifted for dark-bg legibility) */
  --steel:     #5AA0BC;
  --steel-soft: rgba(76,141,165,0.16);

  /* Geometry */
  --radius:    6px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-md: 0 18px 44px rgba(0,0,0,0.45);
  --shadow-lg: 0 40px 90px rgba(0,0,0,0.6);
  --glow-accent: 0 14px 40px rgba(242,145,59,0.28);

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 80% at 82% -8%, rgba(28,86,107,0.40), transparent 55%),
    radial-gradient(90% 70% at -5% 105%, rgba(17,60,78,0.42), transparent 55%);
  background-attachment: fixed;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--head);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: #1a0f04; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); position: relative; z-index: 1; }
.section { padding-block: clamp(72px, 9.5vw, 136px); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 88px); }
.band { background: linear-gradient(180deg, rgba(8,28,38,0) 0%, rgba(8,28,38,0.6) 50%, rgba(8,28,38,0) 100%); }

/* hairline divider between sections */
.section + .section { border-top: 1px solid var(--line); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1.5px;
  background: linear-gradient(90deg, var(--accent), transparent);
  display: inline-block;
}
.eyebrow--light { color: var(--accent-2); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { display: none; }

.h-section { font-size: clamp(32px, 4.4vw, 54px); }
.lede { font-size: clamp(18px, 2vw, 22px); color: var(--muted); line-height: 1.58; }

/* gradient accent text */
.amber {
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  padding: 15px 28px; border-radius: var(--radius); border: 1.5px solid transparent;
  cursor: pointer; line-height: 1; text-align: center;
  transition: transform .18s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--accent {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #1c0f03; box-shadow: var(--glow-accent);
}
.btn--accent:hover { box-shadow: 0 18px 52px rgba(242,145,59,0.42); transform: translateY(-2px); }
.btn--navy { background: var(--panel-2); color: var(--head); border-color: var(--line-strong); }
.btn--navy:hover { background: var(--panel-hi); }
.btn--ghost { background: rgba(255,255,255,0.02); border-color: var(--line-strong); color: var(--head); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }
.btn--ghost-light { background: transparent; border-color: var(--line-strong); color: var(--head); }
.btn--ghost-light:hover { border-color: var(--accent); color: var(--accent-2); }
.btn--lg { padding: 18px 34px; font-size: 17px; }
.btn--block { width: 100%; }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Check list ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.checklist li { position: relative; padding-left: 32px; line-height: 1.5; color: var(--ink); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent-soft); border: 1.5px solid var(--accent-line);
}
.checklist li::after {
  content: ""; position: absolute; left: 6.5px; top: 6.5px;
  width: 5px; height: 9px; border: solid var(--accent-2); border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.checklist--light li { color: var(--ink); }

/* ---------- Image placeholder (dark) ---------- */
.ph {
  position: relative;
  background-color: #0a2029;
  background-image: repeating-linear-gradient(-45deg, transparent 0 11px, rgba(176,205,213,0.05) 11px 22px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; align-items: flex-end; overflow: hidden; min-height: 200px;
}
.ph--navy { background-color: #08191f; }
.ph__tag {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--faint); background: rgba(5,18,26,0.7); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 9px; margin: 14px; backdrop-filter: blur(4px);
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}