:root {
  --bg: #0b1630;
  --bg-soft: #102247;
  --panel: rgba(255, 255, 255, 0.08);
  --panel-solid: #122857;
  --text: #f5f7ff;
  --muted: #c9d3f5;
  --gold: #ffd36e;
  --blue: #74a4ff;
  --french: linear-gradient(135deg, #173e7a, #295ca8 55%, #142f5d);
  --sing: linear-gradient(135deg, #5d215d, #973757 55%, #f38a4d);
  --hero: radial-gradient(circle at top, rgba(116, 164, 255, 0.18), transparent 36%),
          radial-gradient(circle at 80% 15%, rgba(255, 211, 110, 0.12), transparent 20%),
          linear-gradient(180deg, #091225, #102247 42%, #0b1630);
  --radius: 22px;
  --shadow: 0 18px 40px rgba(4, 10, 24, 0.35);
  --border: 1px solid rgba(255, 255, 255, 0.12);
  --container: min(1180px, calc(100% - 32px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
code {
  background: rgba(255,255,255,0.12);
  padding: .15rem .4rem;
  border-radius: .4rem;
}
.container { width: var(--container); margin: 0 auto; }
.section { padding: 88px 0; }
.center { text-align: center; }
.eyebrow {
  display: inline-block;
  color: var(--gold);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-heading h2,
.hero h1,
.app-copy h2 {
  line-height: 1.08;
  margin: 0 0 18px;
}
.section-heading h2 { font-size: clamp(2rem, 3vw, 3rem); }
.section-heading p,
.hero p,
.app-copy p,
.values-grid p,
.app-summary p,
.contact-card p,
figcaption,
.site-footer p {
  color: var(--muted);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(9, 18, 37, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: var(--border);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand strong {
  display: block;
  font-size: 1.08rem;
}
.brand small {
  color: var(--muted);
}
.brand-mark {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #1e4ca2, #8c4ba7, #ec8a54);
  color: white;
  font-weight: 800;
  box-shadow: var(--shadow);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-nav a {
  color: var(--muted);
  font-weight: 600;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.text-link:hover,
.text-link:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--text); }
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
  border-radius: 20px;
}

.hero {
  background: var(--hero);
  padding: 84px 0 72px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .95fr;
  gap: 36px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.9rem);
}
.hero p {
  font-size: 1.12rem;
  max-width: 64ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 22px;
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero-points li {
  padding: 10px 14px;
  background: rgba(255,255,255,0.08);
  border: var(--border);
  border-radius: 999px;
  color: var(--muted);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.btn:hover,
.btn:focus-visible { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, #f9cf6d, #ff9e55);
  color: #13264f;
}
.btn-secondary {
  border: var(--border);
  background: rgba(255,255,255,0.06);
}
.hero-showcase {
  display: grid;
  gap: 18px;
}
.showcase-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  background: rgba(255,255,255,0.07);
  border: var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.showcase-card h2 { margin: 0 0 8px; font-size: 1.3rem; }
.showcase-card p { margin: 0; }
.icon-shot {
  width: 92px;
  border-radius: 24px;
}
.mini-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.mini-stack img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 18px;
}
.accent-sing {
  background: linear-gradient(135deg, rgba(121, 46, 110, .55), rgba(227, 118, 76, .25));
}

.app-grid,
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.app-summary,
.values-grid article,
.contact-card,
.gallery-card,
.app-banner-card,
.feature-list article {
  background: rgba(255,255,255,0.06);
  border: var(--border);
  box-shadow: var(--shadow);
}
.app-summary {
  padding: 28px;
  border-radius: var(--radius);
}
.summary-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.summary-top img,
.summary-visual {
  width: 78px;
  height: 78px;
  border-radius: 22px;
}
.summary-visual {
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 2rem;
  background: linear-gradient(135deg, #652d78, #f38a4d);
}
.app-summary h3 { margin: 0 0 6px; font-size: 1.45rem; }
.app-summary ul {
  padding-left: 1.15rem;
  margin: 16px 0 0;
  color: var(--muted);
}
.app-summary li + li { margin-top: 8px; }
.text-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--gold);
  font-weight: 700;
}
.app-summary-french { background: rgba(35, 89, 168, 0.18); }
.app-summary-sing { background: rgba(140, 54, 106, 0.16); }

.app-section { position: relative; overflow: clip; }
.french-theme { background: linear-gradient(180deg, rgba(28,61,112,.35), rgba(11,22,48,0)); }
.sing-theme { background: linear-gradient(180deg, rgba(124,42,82,.28), rgba(11,22,48,0)); }
.app-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  margin-bottom: 34px;
}
.app-layout.reverse { grid-template-columns: 1fr 1fr; }
.app-copy p { margin-top: 0; }
.app-banner-card {
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
}
.app-banner-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.feature-list article {
  border-radius: 20px;
  padding: 20px;
}
.feature-list h3,
.values-grid h3 { margin: 0 0 8px; }

.gallery-grid {
  display: grid;
  gap: 18px;
}
.gallery-french {
  grid-template-columns: 1.15fr .85fr .85fr;
  grid-template-areas:
    "large small1 small2"
    "wide wide wide";
}
.gallery-sing {
  grid-template-columns: repeat(4, 1fr);
}
.gallery-card {
  border-radius: 24px;
  overflow: hidden;
}
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-card figcaption {
  padding: 16px 18px 18px;
  font-size: .98rem;
}
.gallery-card.large { grid-area: large; }
.gallery-card.wide { grid-area: wide; }
.gallery-card.clickable { cursor: zoom-in; }
.gallery-card.poster img { object-fit: contain; background: rgba(255,255,255,.04); }

.section-values { background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }
.values-grid article {
  border-radius: 22px;
  padding: 24px;
}
.contact-card {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: center;
  padding: 30px;
  border-radius: 28px;
}
.contact-actions {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.contact-note { margin: 0; font-size: .95rem; }
.site-footer {
  border-top: var(--border);
  padding: 26px 0 40px;
}
.footer-wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.lightbox {
  width: min(92vw, 1100px);
  border: 0;
  padding: 0;
  background: #050b16;
  color: white;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0,0,0,.6);
}
.lightbox::backdrop { background: rgba(5, 11, 22, .8); }
.lightbox img {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  background: #050b16;
}
.lightbox-caption {
  margin: 0;
  padding: 12px 18px 18px;
  color: var(--muted);
}
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.14);
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .hero-grid,
  .app-layout,
  .contact-card,
  .gallery-sing,
  .feature-list,
  .app-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }
  .gallery-french {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "large large"
      "small1 small2"
      "wide wide";
  }
  .contact-actions { justify-items: start; }
}

@media (max-width: 780px) {
  .section { padding: 72px 0; }
  .nav-toggle { display: inline-block; }
  .site-nav {
    position: absolute;
    inset: 78px 16px auto 16px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    border-radius: 20px;
    background: rgba(9, 18, 37, .96);
    border: var(--border);
    box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .hero { padding-top: 68px; }
  .hero h1 { font-size: 2.45rem; }
  .showcase-card { grid-template-columns: 1fr; }
  .contact-card { padding: 24px; }
  .footer-wrap { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .hero-points { display: grid; grid-template-columns: 1fr; }
  .gallery-french,
  .gallery-sing {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .gallery-card.large,
  .gallery-card.wide { grid-area: auto; }
  .summary-top { align-items: flex-start; }
}


.contact-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(255,255,255,0.10);
  border: var(--border);
  color: var(--text);
}