/* ============================================
   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; margin-right: auto; 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; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.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__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%);
}
/* 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; }
.nav__burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 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 { 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); }