/* ============================================
   PELICAD - Shared Stylesheet v2
   ============================================ */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- Colors ---- */
  --blue:         #142434;
  --mint:         #AEF7B7;
  --green-light:  #eaf3ee;
  --green-mid:    #d0e8d9;
  --sand:         #FFB545;
  --mineral:      #344A33;
  --text:         #142434;
  --text-mid:     #111111;
  --text-light:   #666666;
  --bg:           #ffffff;
  --bg-off:       #f6f5f7;
  --bg-dark:      #142434;
  --border:       #e5e8e3;

  /* ---- Sizing & Spacing ---- */
  --radius:       6px;
  --radius-lg:    12px;
  --nav-h:        68px;
  --max:          1160px;

  /* ---- Effects ---- */
  --shadow:       0 4px 24px rgba(0,0,0,.2);
  --shadow-lg:    0 8px 48px rgba(0,0,0,.16);
  --shadow-xl:    0 16px 64px rgba(0,0,0,.22);
  --ease:         cubic-bezier(.4,0,.2,1);

  /* ---- Typography ---- */
  --font:         'Archivo', sans-serif;
}

html { scroll-behavior: smooth; background: #eee; }
body {
  font-family: var(--font); color: var(--text); background: var(--bg);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  max-width: 1440px; margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(200,200,200,.2), -12px 0 48px rgba(200,200,200,.2), 12px 0 48px rgba(200,200,200,.2);
}

img { max-width: 100%; height: auto; display: block;}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ---- Layout ---- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section--sm { padding: 64px 0; }
.section--off { background: var(--bg-off); }

/* ---- Typography ---- */
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 130%; letter-spacing: -.025em; }
h2 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
h3 { font-size: 1.1rem; font-weight: 500; line-height: 1.3; }
p { color: var(--text-mid); white-space: pre-line; }
.label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-light); margin-bottom: 12px; display: block;
}
.lead { font-size: 1.05rem; line-height: 1.75; max-width: 520px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: .92rem; font-weight: 600;
  padding: 6px 24px; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; transition: all .22s var(--ease);
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
}
.btn:hover::after { opacity: 1; }
.btn--primary { background: var(--blue); color: var(--mint); }
.btn--primary:hover { background: var(--mint); color: var(--blue); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59,124,90,.35); }
.btn--outline { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn--outline:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.btn--white { background: #fff; color: var(--text); }
.btn--white:hover { background: #f0f0f0; transform: translateY(-2px); }
.btn--ghost { color: var(--text-mid); font-weight: 500; padding: 13px 20px; }
.btn--ghost:hover { color: var(--text); }

/* ---- Navigation ---- */
.nav {
  position: fixed; top: 0; z-index: 200;
  left: max(0px, calc((100% - 1440px) / 2));
  right: max(0px, calc((100% - 1440px) / 2));
  height: var(--nav-h);
  backdrop-filter: blur(16px); border-bottom: 1px solid var(--border);
  transition: box-shadow .3s var(--ease), border-color .3s;
}
.nav.scrolled { box-shadow: 0 2px 20px rgba(200,200,200,.2); border-color: transparent; }
.nav__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center; gap: 16px;
}
.nav__logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } /* No filter needed for blue logo on light background */
.nav__logo picture { display: flex; align-items: center; }
.nav__logo img { height: 58px; transition: opacity .2s; }
.nav__logo:hover img { opacity: .75; }

/* Campaign CTA next to the logo (EXPO REAL 2026). margin-right:auto moved here from
   .nav__logo so the button sits right beside the logo instead of being pushed to the
   far right with the rest of the nav. */
.nav__campaign {
  display: inline-flex; align-items: center; gap: 8px; margin-right: auto; flex: 0 0 auto;
  background: var(--blue); color: #fff; font-size: .82rem; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid rgba(174,247,183,.55);
  animation: nav-campaign-glow 2.6s ease-in-out infinite;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.nav__campaign:hover {
  animation-play-state: paused; transform: translateY(-1px);
  box-shadow: 0 0 0 1.5px var(--mint), 0 0 30px rgba(174,247,183,.6);
}
.nav__campaign-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none;
  animation: nav-campaign-dot 2.6s ease-in-out infinite;
}
@keyframes nav-campaign-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(174,247,183,.28), 0 0 14px rgba(174,247,183,.22); }
  50% { box-shadow: 0 0 0 1px rgba(174,247,183,.55), 0 0 26px rgba(174,247,183,.48); }
}
@keyframes nav-campaign-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(174,247,183,.7); opacity: .85; }
  50% { box-shadow: 0 0 7px 2px rgba(174,247,183,.9); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__campaign, .nav__campaign-dot { animation: none; }
}
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__dropdown { position: relative; display: inline-flex; align-items: center; }
.nav__links .nav__link {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: .875rem; font-weight: 500; color: var(--text-mid);
  padding: 8px 10px; border-radius: 6px;
  transition: color .18s, background .18s;
  position: relative;
}
.nav__dropdown-toggle {
  border: 0;
  background: transparent;
  cursor: default;
  font-family: inherit;
}
.nav__links .nav__link::after {
  content: ''; position: absolute; bottom: 4px; left: 10px; right: 10px;
  height: 2px; background: var(--blue); border-radius: 2px;
  transform: scaleX(0); transition: transform .2s var(--ease);
}
.nav__links .nav__link:hover { color: var(--text); }
.nav__links .nav__link:hover::after { transform: scaleX(1); }
.nav__links .nav__link.active { color: var(--text); }
.nav__links .nav__link.active::after { transform: scaleX(1); }
/* divider before "How it works" */
.nav__links .nav__link--divided { margin-left: 6px; }
.nav__links .nav__link--divided::before {
  content: ''; display: block; width: 1px; height: 16px;
  background: var(--border); position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
}
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 44px rgba(20,36,52,.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}
.nav__dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav__dropdown:hover .nav__dropdown-toggle,
.nav__dropdown:focus-within .nav__dropdown-toggle {
  color: var(--blue);
}
.nav__dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--text);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.nav__dropdown-link:hover,
.nav__dropdown-link:focus-visible {
  color: var(--blue);
  background: var(--green-light);
  outline: 0;
}
/* inline icons inside nav links */
.nav-icon { flex-shrink: 0; opacity: .55; transition: opacity .18s, transform .18s; }
.nav__link:hover .nav-icon { opacity: 1; }
.nav__link:hover .nav-icon--down { transform: translateY(2px); }
.nav__link:hover .nav-icon--ext  { transform: translate(1px, -1px); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
/* flex-direction is required, not optional: responsive.css flips this to `display: flex`
   at mobile widths, and a row flex container lays the three bars out side by side as one
   long horizontal line instead of a hamburger. The .open X animation below also assumes
   the bars are stacked. */
.nav__burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
/* Spacing comes from the parent's `gap`, not per-span margins. In the old block layout the
   5px margins of adjacent bars collapsed into one, putting bar centres 7px apart, which is
   the distance the .open transforms below translate by. Flex does not collapse margins, so
   keeping them here would space the bars 12px apart and the X would not meet in the middle. */
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 0; border-radius: 2px; transition: .25s var(--ease); }
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Lang Pill ---- */
.lang-pill { display: inline-flex; border-radius: 6px; border: 1px solid var(--border); overflow: hidden; }
.lang-pill a { padding: 5px 10px; font-size: .78rem; font-weight: 600; color: var(--text-light); background: #f0edf3; transition: background .15s, color .15s; }
.lang-pill a.active { background: #fff; color: var(--text); }
.lang-pill a:hover:not(.active) { background: #e8e4ec; color: var(--text); }

/* ---- Structural Refinements ---- */
:root {
  --surface: #ffffff;
  --surface-muted: #f6f5f7;
  --surface-soft: #edf5f0;
  --text-inverse: #ffffff;
  --line-soft: rgba(20, 36, 52, .09);
  --shadow-card: 0 10px 40px rgba(20, 36, 52, .07);
  --shadow-card-hover: 0 16px 52px rgba(20, 36, 52, .11);
  --overlay-blue-strong: rgba(20, 36, 52, .9);
  --overlay-blue-mid: rgba(20, 36, 52, .66);
  --space-section: 96px;
  --space-section-sm: 64px;
}

body { background: var(--surface); }
p { white-space: normal; }
.section { padding: var(--space-section) 0; }
.section--sm { padding: var(--space-section-sm) 0; }
.section--off { background: var(--surface-muted); }
.sec-head { max-width: 640px; }

.btn {
  min-height: 40px;
  border-radius: var(--radius);
}

.btn--outline-inverse {
  border-color: rgba(255,255,255,.58);
  color: var(--text-inverse);
  background: transparent;
}

.btn--outline-inverse:hover {
  border-color: var(--mint);
  background: rgba(255,255,255,.1);
  color: var(--mint);
}

.nav { background: rgba(255,255,255,.92); }
.nav__links .nav__link.active,
.nav__links .nav__link:hover,
.nav__dropdown.active .nav__dropdown-toggle { color: var(--blue); }
.nav__links .nav__link.active { background: var(--green-light); }
.nav__links .nav__link.active::after { transform: scaleX(0); }
.nav__mobile a.active { color: var(--blue); background: var(--green-light); }
.lang-pill a { background: var(--surface-muted); }