/* ================================
   Global Reset & Base Styles
   ================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;   /* prevent horizontal scroll on mobile */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ================================
   Colour System — Light Maritime
   ================================
   Sourced from the IMIS GmbH logo:
     · Cobalt / royal blue  → primary brand
     · EU gold stars        → accent highlights
     · White globe lines    → surfaces & panels
     · Near-black ring text → ink / body copy
   ================================ */

:root {
  /* Page backgrounds */
  --bg:           #F4F8FC;          /* very light blue-white */
  --bg-alt:       #E8F1F9;          /* slightly deeper for alternating sections */
  --surface:      #FFFFFF;          /* cards, panels */
  --surface-mid:  #EEF5FB;          /* subtle panel variant */

  /* Ink — logo outer ring (text) */
  --ink:          #0D1E35;          /* near-black navy — primary text */
  --ink-mid:      #1E3A5C;          /* mid navy — subheadings, body paragraphs */
  --ink-light:    #2E5480;          /* lighter navy — secondary headings */

  /* Cobalt — logo body blue (primary brand) */
  --cobalt:       #1A6BB5;          /* main brand blue */
  --cobalt-deep:  #0E4D87;          /* hover / pressed */
  --cobalt-pale:  #C6DCF2;          /* very light tint, badge backgrounds */
  --cobalt-faint: #E8F2FB;          /* almost-white tint for section fills */

  /* Gold — EU star colour (accent) */
  --gold:         #E8A800;          /* EU star gold */
  --gold-pale:    #FEF3CC;          /* pale gold tint */

  /* Signal green — retained, darkened for light-bg contrast */
  --signal:       #009F6E;          /* green label / tag text */
  --signal-pale:  #D1F5E8;          /* pale green tint */
  --signal-bright:#00D48C;          /* brighter shade for dark footer only */

  /* Sky / lighter blue (globe highlight) */
  --sky:          #2FA8E8;          /* interactive link blue */
  --sky-pale:     #D6EFFC;          /* tinted bg */

  /* Muted / supporting tones */
  --muted:        #4E6E8A;          /* secondary text on light bg (AA contrast) */
  --muted-light:  #7E9BB5;          /* tertiary / placeholder */

  /* Borders */
  --border:       rgba(26, 107, 181, 0.15);
  --border-mid:   rgba(26, 107, 181, 0.28);
  --border-strong:rgba(26, 107, 181, 0.45);

  /* Fonts */
  --font-head: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

/* ================================
   Typography
   ================================ */

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

p {
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.75;
}

a {
  color: var(--cobalt);
  text-decoration: none;
}

a:hover {
  color: var(--cobalt-deep);
}

/* ================================
   Utility Classes
   ================================ */

.text-accent  { color: var(--cobalt);  }
.text-muted   { color: var(--muted);   }
.text-signal  { color: var(--signal);  }
.text-gold    { color: var(--gold);    }

/* =========================================
   Animation Base Classes
   ========================================= */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}