/* ===== VARIABLES ===== */
:root {
  --primary:       #4A6B8A;
  --primary-dark:  #3A5570;
  --secondary:     #3D6430;
  --accent:        #6FA3C4;
  --bg:            #F7F3EC;
  --bg-dark:       #1E2A38;
  --text:          #2C2C2C;
  --text-light:    #6B7280;
  --border:        #D8D3C8;
  --white:         #FFFFFF;
  --font-serif:    'Playfair Display', Georgia, serif;
  --font-sans:     'Inter', 'Helvetica Neue', sans-serif;
  --radius:        8px;
  --shadow:        0 4px 24px rgba(30, 42, 56, 0.08);
  --transition:    0.3s ease;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--text); background: var(--white); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3 { font-family: var(--font-serif); line-height: 1.2; }

/* ===== LAYOUT ===== */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; scroll-margin-top: 80px; }
#home { scroll-margin-top: 0; }
.section__title {
  font-size: 2.25rem;
  color: var(--primary);
  margin-bottom: 48px;
  text-align: center;
}
.section__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--secondary);
  margin: 16px auto 0;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  padding: 14px 36px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  letter-spacing: 0.02em;
}
.btn--primary {
  background: var(--primary);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 107, 138, 0.3);
}

/* ===== NAV ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: var(--transition);
}
.nav.scrolled {
  background: var(--white);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  padding: 12px 0;
}
.nav__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav__logo img { height: 65px; }
.nav__links {
  display: flex;
  gap: 36px;
  margin-left: auto;
}
.nav__links a {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text);
  letter-spacing: 0.03em;
  transition: var(--transition);
}
.nav__links a:hover { color: var(--primary); }
.nav__lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 100px;
  background: rgba(44,44,44,0.05);
  margin-left: 16px;
  transition: var(--transition);
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--text-light);
  padding: 5px 11px 5px 7px;
  letter-spacing: 0.04em;
  transition: var(--transition);
}
.lang-btn.active { color: var(--primary); background: var(--white); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.lang-btn:hover:not(.active) { color: var(--primary); }
.lang-flag {
  width: 17px; height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}

/* Nav readable over the dark hero (top of page, before the solid scrolled state) */
.nav:not(.scrolled) .nav__logo img { filter: brightness(0) invert(1); }
.nav:not(.scrolled) .nav__hamburger span { background: #fff; }
.nav:not(.scrolled) .nav__lang { background: rgba(255,255,255,0.16); }
.nav:not(.scrolled) .lang-btn { color: rgba(255,255,255,0.8); }
.nav:not(.scrolled) .lang-btn.active { color: var(--primary); background: #fff; }
.nav:not(.scrolled) .lang-btn:hover:not(.active) { color: #fff; }
@media (min-width: 769px) {
  .nav:not(.scrolled) .nav__links a { color: #fff; }
  .nav:not(.scrolled) .nav__links a:hover { color: rgba(255,255,255,0.72); }
  .nav:not(.scrolled) .nav__investor-login { color: #fff; border-color: rgba(255,255,255,0.45); }
}
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: var(--transition);
  border-radius: 2px;
}

/* ===== HERO ===== */
.hero {
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #1E2A38 url('../assets/douro-hero-poster.jpg') center/cover no-repeat;
  padding: 110px 24px 130px;
  position: relative;
  overflow: hidden;
}
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(22,32,48,0.56) 0%, rgba(22,32,48,0.40) 45%, rgba(22,32,48,0.66) 100%);
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 100px; z-index: 2;
  background: var(--white);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.hero__container { position: relative; z-index: 3; }
/* poster attribute shows the static image immediately on every device; the
   browser swaps to the video automatically once it has buffered enough to
   play smoothly. Hidden only for reduced-motion or explicit Data Saver mode
   (added via JS below, since neither is reliably a pure-CSS check). */
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero.hero--no-video .hero__video { display: none; }
.hero__logo {
  height: 150px;
  margin: 0 auto 28px;
  filter: brightness(0) invert(1) drop-shadow(0 8px 24px rgba(0,0,0,0.35));
}
.hero__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  color: #fff;
  margin-bottom: 20px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.005em;
  line-height: 1.3;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero__subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.85;
  text-shadow: 0 1px 14px rgba(0,0,0,0.3);
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

.hero-cta {
  background: var(--white);
  text-align: center;
  padding: 16px 24px 24px;
}
/* No transform here on purpose: pulling the button up toward hero's own bottom
   edge looked good in isolated testing but a real browser's own chrome
   (address bar, tabs, bookmarks) eats into the visible viewport before the
   page even starts, so a margin that looked safe in a clean test window
   wasn't safe in practice — the button rendered below the real fold. Keeping
   the button in plain normal flow, just below the curve, means it's always fully
   visible regardless of browser chrome, zoom, or scroll state — reliability
   over the extra visual flourish. */

/* Scroll-reveal (added via JS; absent → content just shows) */
.reveal-target { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.reveal-target.is-revealed { opacity: 1; transform: none; }
.criteria__card:nth-child(2).reveal-target { transition-delay: 0.1s; }
.criteria__card:nth-child(3).reveal-target { transition-delay: 0.2s; }
.approach__item:nth-child(2).reveal-target { transition-delay: 0.1s; }
.approach__item:nth-child(3).reveal-target { transition-delay: 0.2s; }
.team__card:nth-child(2).reveal-target { transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) { .reveal-target { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ===== ABOUT ===== */
.about { background: var(--white); }
.about__text {
  font-size: 1.1rem;
  color: var(--text);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.85;
}

/* ===== CRITERIA ===== */
.criteria { background: var(--bg); }
.criteria__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.criteria__card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px 28px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--primary);
  transition: var(--transition);
}
.criteria__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(30, 42, 56, 0.14);
}
.criteria__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: var(--transition);
}
.criteria__card:hover .criteria__icon { background: var(--primary); color: var(--white); }
.criteria__icon svg { width: 24px; height: 24px; }
.criteria__card h3 {
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 22px;
  font-family: var(--font-serif);
  letter-spacing: 0.01em;
  text-align: center;
}
.criteria__card ul { display: flex; flex-direction: column; gap: 10px; }
.criteria__card li {
  font-size: 0.9rem;
  color: var(--text);
  padding-left: 18px;
  position: relative;
  line-height: 1.55;
}
.criteria__card li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--secondary);
  font-weight: 700;
}

/* ===== APPROACH ===== */
.approach { background: var(--white); }
.approach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.approach__item { text-align: center; }
.approach__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.approach__icon svg { width: 27px; height: 27px; }
.approach__item h3 {
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 12px;
  font-family: var(--font-serif);
  letter-spacing: 0.01em;
}
.approach__item p {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.7;
}

/* ===== TEAM ===== */
.team { background: var(--white); }
.team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 820px;
  margin: 0 auto 56px;
}
.team__card {
  text-align: center;
  padding: 44px 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.team__card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.team__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 24px;
  background: var(--white);
  border: 3px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.team__photo img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.team__initials {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.team__card h3 {
  font-size: 1.3rem;
  color: var(--bg-dark);
  margin-bottom: 14px;
}
.team__bio {
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.75;
  margin-bottom: 20px;
}
.team__linkedin {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.team__linkedin:hover { color: var(--secondary); }
.team__footnote {
  text-align: center;
  font-size: 1rem;
  color: var(--text-light);
  font-style: italic;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.8;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ===== CONTACT ===== */
.contact { background: var(--bg); }
.contact__subtitle {
  text-align: center;
  color: var(--text-light);
  margin-bottom: 56px;
  font-size: 1.05rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.contact__wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  max-width: 900px;
  margin: 0 auto;
}
.contact__form { display: flex; flex-direction: column; gap: 20px; }
.form__group { display: flex; flex-direction: column; gap: 7px; }
.form__group label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.form__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-light);
}
.form__group input,
.form__group textarea {
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--white);
  transition: var(--transition);
  resize: vertical;
}
.form__group input:focus,
.form__group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74, 107, 138, 0.12);
}
.form__message {
  display: none;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
}
.form__message--success {
  background: #EBF5EB;
  color: var(--secondary);
  border: 1px solid #C3E0C3;
}
.form__message--error {
  background: #FBE9E9;
  color: #B33A3A;
  border: 1px solid #F0C0C0;
}
.contact__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  align-self: start;
}
.contact__info-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.contact__info a {
  font-size: 0.88rem;
  color: var(--primary);
  font-weight: 500;
  transition: var(--transition);
  word-break: break-all;
}
.contact__info a:hover { color: var(--secondary); }
.contact__info-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.nav__links--investor { display: none; }

/* ===== FOOTER ===== */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 56px 24px 40px;
}
.footer__logo { height: 64px; margin: 0 auto 20px; }
.footer__tagline {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--primary);
  font-style: italic;
  margin-bottom: 28px;
}
.footer__copy {
  font-size: 0.78rem;
  color: var(--text-light);
}
.footer__investor-login {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--text-light);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 14px;
  transition: var(--transition);
}
.footer__investor-login:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.nav__investor-login {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 14px;
  transition: var(--transition);
  white-space: nowrap;
}
.nav__investor-login:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* ===== COOKIE BANNER ===== */
.cookie-banner {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--bg-dark);
  color: var(--white);
  padding: 18px 24px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.cookie-banner__text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  flex: 1;
  min-width: 200px;
}
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-btn {
  padding: 9px 22px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition);
}
.cookie-btn--accept {
  background: var(--primary);
  color: var(--white);
}
.cookie-btn--accept:hover { background: var(--accent); }
.cookie-btn--decline {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.3);
}
.cookie-btn--decline:hover { color: var(--white); border-color: var(--white); }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .criteria__grid { grid-template-columns: 1fr; }
  .approach__grid { grid-template-columns: 1fr; gap: 32px; }
  .contact__wrapper { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .section__title { font-size: 1.75rem; margin-bottom: 36px; }

  .nav__hamburger { display: flex; }
  .nav__container { position: relative; }
  .nav__lang {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0;
  }
  .nav__investor-login { display: none; }
  .nav__links--investor { display: block; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    gap: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    margin-left: 0;
  }
  .nav__links.open { display: flex; }
  .nav__links a {
    padding: 14px 24px;
    font-size: 0.95rem;
  }

  .hero__logo { height: 130px; }
  .hero { padding: 120px 24px 80px; min-height: 100vh; }
  .hero-cta { padding: 32px 24px 0; }

  .team__grid { grid-template-columns: 1fr; max-width: 420px; }
}