:root {
    --navy: #071a35;
    --blue: #1760b5;
    --purple: #7356d8;
    --text: #27364a;
    --muted: #68778b;
    --light: #f4f7fb;
    --border: #e0e7f0;
    --max-width: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); line-height: 1.7; }
a { color: inherit; text-decoration: none; }
.container { width: min(90%, var(--max-width)); margin: auto; }

/* Navigation */
.navbar { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--border); }
.nav-container { min-height: 76px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 12px; color: var(--navy); }
.logo-icon { width: 143px; height: 43px; border-radius: 10px; display: grid; place-items: center; color: white; font-weight: 800; background: linear-gradient(135deg,var(--blue),var(--purple)); }
.logo strong, .logo small { display: block; }
.logo small { color: var(--muted); font-size: .68rem; }
.nav-links { display: flex; gap: 25px; list-style: none; align-items: center; }
.nav-links a { font-size: .9rem; font-weight: 600; color: #455267; }
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.menu-button { display: none; border: 0; background: none; font-size: 1.6rem; cursor: pointer; }

/* Hero */
.hero { min-height: 650px; display: flex; align-items: center; color: white; background: radial-gradient(circle at 78% 30%,rgba(49,143,255,.25),transparent 25%), linear-gradient(125deg,#05152b,#123d75); }
.hero-content { padding: 80px 0; }
.conference-tag { display: inline-block; padding: 7px 15px; border: 1px solid rgba(255,255,255,.3); border-radius: 50px; background: rgba(255,255,255,.08); margin-bottom: 25px; }
.hero h1 { font-size: clamp(2.8rem,6vw,5rem); line-height: 1.04; letter-spacing: -.04em; }
.hero h1 span { color: #72cbff; }
.hero-subtitle { font-size: 1.3rem; color: #d0deee; margin: 25px 0; }
.hero-info { display: flex; gap: 30px; flex-wrap: wrap; margin: 28px 0 35px; font-weight: 600; }
.button { display: inline-block; padding: 12px 23px; border-radius: 7px; font-weight: 700; }
.button-primary { background: white; color: var(--navy); }

/* Page headers and sections */
.page-header { padding: 85px 0; color: white; background: linear-gradient(125deg,#06172e,#0a376c); }
.page-header small { color: #76c9fa; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.page-header h1 { font-size: clamp(2.5rem,5vw,4rem); line-height: 1.1; margin: 10px 0; }
.page-header p { color: #c8d7e7; max-width: 700px; }
.section { padding: 85px 0; }
.section-light { background: var(--light); }
.section-title { max-width: 800px; margin-bottom: 45px; }
.section-title.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-label { color: var(--blue); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 800; }
.section-title h2 { color: var(--navy); font-size: clamp(2rem,4vw,2.8rem); line-height: 1.2; margin: 7px 0 13px; }

/* Home */
.about-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; }
.about-grid p, .content p { color: #536175; margin-bottom: 18px; }
.info-box { background: var(--navy); color: white; border-radius: 12px; padding: 32px; }
.info-box h3 { margin-bottom: 20px; }
.info-row { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.info-row:last-child { border: 0; }
.info-row small { display: block; color: #94aac5; text-transform: uppercase; font-size: .7rem; }


/* =========================================================
   PEOPLE CARDS
========================================================= */

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Complete card */
.card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    overflow: hidden;
}

/* Image occupies the complete upper part of the card */
/* Photo area */
.card-image {
    width: 100%;
    height: 300px;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    background: white;
}

/* Show complete photo — no face cropping */
.card-image img,
.organiser-photo {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    display: block;
}

/* Center name and affiliation */
.card-content {
    padding: 16px 15px 20px;
    text-align: center;
}

.card-content h3 {
    color: var(--navy);
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 5px;
}

.affiliation {
    color: var(--blue);
    font-size: .8rem;
    font-weight: 600;
    margin: 0;
}

/* Program */
.schedule { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; max-width: 950px; }
.schedule-row { display: grid; grid-template-columns: 160px 1fr; border-bottom: 1px solid var(--border); }
.schedule-row:last-child { border: 0; }
.schedule-time { background: #f6f9fc; padding: 23px; color: var(--blue); font-weight: 800; }
.schedule-event { padding: 23px 28px; }
.schedule-event p { color: var(--muted); }

/* Call for papers */
.content { max-width: 900px; }
.content h2 { margin: 35px 0 12px; }
.content h2:first-child { margin-top: 0; }
.content ul { padding-left: 22px; margin: 15px 0 25px; }
.date-table { margin: 35px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.date-row { display: flex; justify-content: space-between; padding: 17px 22px; border-bottom: 1px solid var(--border); }
.date-row:last-child { border: 0; }

/* Venue and contact */
.venue-grid, .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.venue-image { min-height: 380px; background: #e5ebf3; border-radius: 12px; display: grid; place-items: center; color: #8493a7; }
.contact-card { padding: 30px; border: 1px solid var(--border); border-radius: 12px; }
.contact-card a { color: var(--blue); }

/* Footer */
footer { background: #051327; color: #9bacc0; padding: 40px 0; }
.footer-content { display: flex; justify-content: space-between; gap: 25px; }
footer strong { color: white; }
.footer-links { display: flex; gap: 20px; }

/* Responsive */
@media (max-width: 900px) {
    .about-grid, .venue-grid, .contact-grid { grid-template-columns: 1fr; }
    .card-grid { grid-template-columns: repeat(2,1fr); }
    .nav-links { display: none; position: absolute; top: 76px; left: 0; width: 100%; background: white; flex-direction: column; padding: 25px; }
    .nav-links.open { display: flex; }
    .menu-button { display: block; }
}

@media (max-width: 600px) {
    .card-grid { grid-template-columns: 1fr; }
    .schedule-row { grid-template-columns: 1fr; }
    .footer-content { flex-direction: column; }
}

.eoi-button {
  display: inline-block;
  margin: 18px 0 24px;
  padding: 16px 28px;
  background: linear-gradient(135deg, #1760b5, #7356d8);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(23, 96, 181, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eoi-button:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 9px 24px rgba(23, 96, 181, 0.32);
}

.eoi-button:focus-visible {
  outline: 3px solid #1760b5;
  outline-offset: 4px;
}