@font-face {
  font-family: "Venus Rising";
  src: url("Venus Rising Rg.otf") format("opentype");
  font-display: swap;
}

:root{
  --bg:#020202;
  --panel:#0a0a0a;
  --text:#f4f4f4;
  --muted:#cfcfcf;
  --accent:#d8a43a;
  --accent-soft:rgba(216,164,58,.18);
  --line:rgba(255,255,255,.12);
  --shadow:0 18px 42px rgba(0,0,0,.34);
  --content-max:1280px;
  --logo-settle-width:clamp(220px, 22vw, 360px);
  --hero-logo-width:min(72vw, 900px);
  --intro-duration:9s;
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 12%, rgba(216,164,58,.06), transparent 28%),
    linear-gradient(180deg, #090909 0%, #000 100%);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit}
a{color:inherit}

.app,
.app-inner{
  width:min(100%, 1920px);
  min-height:100vh;
  margin:0 auto;
  position:relative;
  padding-inline:clamp(1rem, 3vw, 3rem);
}

/* Intro overlay */
.intro-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  background:#000;
  opacity:1;
  transition:opacity .8s ease, visibility .8s ease;
}
.intro-overlay.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.intro-frame{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#000;
}
.intro-frame::before,
.intro-frame::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:10.5vh;
  background:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.72));
  z-index:20;
  pointer-events:none;
}
.intro-frame::before{top:0}
.intro-frame::after{bottom:0; transform:rotate(180deg)}
.intro-stage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.intro-logo-wrap{
  position:relative;
  width:min(72vw, 860px);
  aspect-ratio:3.2 / 1;
  opacity:0;
  transform:scale(.93);
  animation:introPresence var(--intro-duration) ease-in-out 1 forwards;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.05));
}
.intro-logo-base,
.intro-logo-color,
.intro-logo-sheen,
.intro-sweep-line,
.intro-sweep-glow,
.intro-atmo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.intro-logo-base{
  filter:grayscale(1) brightness(.96) contrast(1.1);
  opacity:.95;
  animation:monoFade var(--intro-duration) linear 1 forwards;
}
.intro-logo-color{
  opacity:0;
  filter:
    saturate(1.08)
    contrast(1.03)
    drop-shadow(0 0 12px rgba(216,164,58,.18))
    drop-shadow(0 0 18px rgba(76,134,198,.10));
  clip-path: inset(0 100% 0 0);
  animation:colorSwitch var(--intro-duration) steps(1, end) 1 forwards;
}
.intro-atmo{
  mix-blend-mode:screen;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(216,164,58,.24), transparent 22%),
    radial-gradient(circle at 52% 47%, rgba(76,134,198,.18), transparent 30%);
  filter:blur(28px);
  animation:atmoBloom var(--intro-duration) ease-in-out 1 forwards;
}
.intro-sweep-line{
  inset:auto;
  top:12%;
  bottom:12%;
  width:3px;
  left:-14%;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.92) 10%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.9) 90%,
    rgba(255,255,255,0)
  );
  box-shadow:
    0 0 12px rgba(255,255,255,.65),
    0 0 28px rgba(216,164,58,.45),
    0 0 42px rgba(76,134,198,.24);
  transform:skewX(-16deg);
  opacity:0;
  animation:sweepLine var(--intro-duration) cubic-bezier(.17,.84,.44,1) 1 forwards;
  z-index:5;
}
.intro-sweep-glow{
  inset:auto;
  top:0;
  bottom:0;
  width:34%;
  left:-34%;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.04) 24%,
    rgba(216,164,58,.16) 46%,
    rgba(255,255,255,.24) 50%,
    rgba(76,134,198,.12) 54%,
    rgba(255,255,255,.03) 74%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(12px);
  transform:skewX(-16deg);
  opacity:0;
  mix-blend-mode:screen;
  animation:sweepGlow var(--intro-duration) cubic-bezier(.17,.84,.44,1) 1 forwards;
  z-index:4;
}
.intro-logo-sheen{
  background:linear-gradient(
    110deg,
    transparent 38%,
    rgba(255,255,255,.07) 48%,
    rgba(255,255,255,.13) 50%,
    rgba(255,255,255,.05) 52%,
    transparent 62%
  );
  mix-blend-mode:screen;
  opacity:0;
  filter:blur(2px);
  animation:sheen var(--intro-duration) ease-in-out 1 forwards;
}
.intro-subtitle{
  position:absolute;
  left:50%;
  bottom:13vh;
  transform:translateX(-50%);
  width:min(84vw, 1100px);
  text-align:center;
  color:rgba(255,255,255,.70);
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  white-space:nowrap;
  z-index:10;
}
.intro-subtitle-line{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:block;
  margin:.32rem 0;
  opacity:0;
}
.intro-subtitle-line.fr{animation:subtitleFr var(--intro-duration) ease-in-out 1 forwards}
.intro-subtitle-line.en{animation:subtitleEn var(--intro-duration) ease-in-out 1 forwards}
.intro-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, transparent 48%, rgba(0,0,0,.34) 100%);
  pointer-events:none;
}

@keyframes introPresence {
  0%,100% { opacity:0; transform:scale(.93); filter:blur(8px) drop-shadow(0 0 22px rgba(255,255,255,0)); }
  9% { opacity:1; transform:scale(1); filter:blur(0) drop-shadow(0 0 22px rgba(255,255,255,.05)); }
  86% { opacity:1; transform:scale(1); filter:blur(0) drop-shadow(0 0 22px rgba(255,255,255,.05)); }
  100% { opacity:0; transform:scale(1.02); filter:blur(5px) drop-shadow(0 0 22px rgba(255,255,255,0)); }
}
@keyframes monoFade { 0%, 27.99% { opacity:.95; } 28%, 100% { opacity:0; } }
@keyframes colorSwitch {
  0%,27.99% { opacity:0; clip-path: inset(0 100% 0 0); }
  28%,100% { opacity:1; clip-path: inset(0 0 0 0); }
}
@keyframes sweepLine {
  0%,20% { left:-14%; opacity:0; }
  22% { opacity:1; }
  38% { left:106%; opacity:1; }
  42%,100% { left:106%; opacity:0; }
}
@keyframes sweepGlow {
  0%,19% { left:-36%; opacity:0; }
  22% { opacity:1; }
  40% { left:104%; opacity:1; }
  44%,100% { left:104%; opacity:0; }
}
@keyframes atmoBloom {
  0%,22% { opacity:0; }
  30% { opacity:.58; }
  43%,58% { opacity:.34; }
  66% { opacity:.16; }
  76%,100% { opacity:0; }
}
@keyframes sheen {
  0%,25% { opacity:0; transform:translateX(-28%); }
  33% { opacity:.82; transform:translateX(0%); }
  44%,100% { opacity:0; transform:translateX(20%); }
}
@keyframes subtitleFr {
  0%,46% { opacity:0; transform:translateX(-50%) translateY(8px); }
  52%,62% { opacity:1; transform:translateX(-50%) translateY(0); }
  68%,100% { opacity:0; transform:translateX(-50%) translateY(8px); }
}
@keyframes subtitleEn {
  0%,68% { opacity:0; transform:translateX(-50%) translateY(8px); }
  74%,88% { opacity:1; transform:translateX(-50%) translateY(0); }
  94%,100% { opacity:0; transform:translateX(-50%) translateY(8px); }
}

/* landing and content */
.landing-page .app{display:grid;place-items:center}
.landing-screen{width:100%;min-height:100vh;display:grid;place-items:center}
.top-shell{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100%, 1920px);
  padding:clamp(1rem, 2.3vw, 1.8rem) clamp(1rem, 3vw, 3rem);
  display:flex;
  align-items:center;
  gap:clamp(1rem, 2vw, 2rem);
  z-index:20;
  pointer-events:auto;
}
.logo-link{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.site-logo{width:var(--logo-settle-width);height:auto;filter:drop-shadow(0 0 16px rgba(255,255,255,.05))}
.top-nav{display:flex;align-items:center;gap:clamp(.65rem,1.4vw,1.2rem);margin-left:auto}
.top-nav-item{color:#fff;letter-spacing:.16em;text-transform:uppercase;font-size:clamp(.9rem,1.1vw,1.05rem)}
.language-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.8rem, 1.8vw, 1.35rem);
  flex-wrap:wrap;
  font-family:"Venus Rising", Arial, sans-serif;
  font-size:clamp(1.2rem, 3.1vw, 2.4rem);
  letter-spacing:.12em;
}
.language-link{background:none;border:none;color:white;cursor:pointer;padding:.15em .2em;transition:color .25s ease, transform .25s ease}
.language-link:hover,.language-link:focus-visible{color:var(--accent);transform:translateY(-2px);outline:none}
.language-separator{color:rgba(255,255,255,.48)}

.page-shell{padding-top:clamp(7rem,14vw,9rem);padding-bottom:clamp(2rem,5vw,4rem)}
.content-layout{
  width:min(100%, var(--content-max));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.72fr);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
}
.content-section{
  display:none;
  padding:clamp(1.25rem, 2.3vw, 2rem) clamp(1.1rem, 2.4vw, 2rem);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:1.25rem;
  box-shadow:var(--shadow);
}
.content-section.is-visible{display:block}
.content-section h1,.content-section h2{
  font-family:"Venus Rising", Arial, sans-serif;
  color:var(--accent);
  font-weight:400;
  font-style:italic;
  line-height:1.12;
  letter-spacing:.05em;
  text-wrap:balance;
}
.content-section h1{font-size:clamp(1.85rem,4.1vw,3.35rem);margin:calc(1in + .2rem) 0 1.4rem}
.content-section h2{font-size:clamp(1.15rem,2.2vw,1.7rem);margin:2rem 0 .9rem}
.content-section p,.content-section li,.contact-panel,.contact-panel a{font-size:clamp(1rem,1.18vw,1.1rem);line-height:1.72}
.content-section p{color:var(--muted);margin:0 0 1rem}
.content-section ul{margin:.4rem 0 1.25rem 1.25rem;padding:0}
.content-section li{color:var(--muted);margin:.22rem 0}
.contact-panel{
  position:sticky;
  top:calc(clamp(1rem, 2.3vw, 1.8rem) + 6.25rem);
  padding:clamp(1.25rem, 2.3vw, 1.8rem);
  background:linear-gradient(180deg, rgba(216,164,58,.10), rgba(255,255,255,.03));
  border:1px solid rgba(216,164,58,.26);
  border-radius:1.25rem;
  box-shadow:var(--shadow);
}
.contact-block{display:grid;gap:.35rem}
.contact-name{font-family:"Venus Rising", Arial, sans-serif;color:var(--accent);font-size:clamp(1.1rem,1.4vw,1.3rem);letter-spacing:.04em;margin-bottom:.35rem}
.contact-panel a{color:#fff;text-decoration:none}
.contact-panel a:hover,.contact-panel a:focus-visible{color:var(--accent);outline:none}
.nav-button{background:transparent;border:1px solid transparent;border-radius:999px;padding:.65rem 1rem;color:#fff;cursor:pointer;transition:color .2s ease, border-color .2s ease, background-color .2s ease}
.nav-button:hover,.nav-button:focus-visible{color:var(--accent);border-color:rgba(216,164,58,.4);background:rgba(216,164,58,.08);outline:none}
.nav-button.is-active{color:var(--accent);border-color:rgba(216,164,58,.4);background:rgba(216,164,58,.1)}

@media (max-width: 1024px){
  .content-layout{grid-template-columns:1fr}
  .contact-panel{position:relative;top:auto}
}
@media (max-width: 720px){
  .top-shell{
    position:sticky;
    inset:auto 0 0 0;
    left:auto;
    transform:none;
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    background:linear-gradient(180deg, rgba(8,8,8,.94), rgba(0,0,0,.96));
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .top-nav{width:100%;justify-content:center;margin-left:0;flex-wrap:wrap}
  .site-logo{width:clamp(180px,44vw,240px)}
  .page-shell{padding-top:1rem;padding-bottom:6.5rem}
  .content-section{border-radius:1rem;padding:1rem}
  .content-section h1{margin-top:calc(.7in + .2rem)}
  .language-links{flex-direction:column;gap:.65rem}
  .language-separator{display:none}
  .intro-subtitle{
    width:min(88vw, 720px);
    font-size:10px;
    letter-spacing:.18em;
    white-space:normal;
    line-height:1.6;
  }
}
@media (min-width:1600px){html{font-size:17px}}


/* landing transition */
.landing-screen{
  position:relative;
  isolation:isolate;
}
.landing-brand{
  position:relative;
  display:grid;
  place-items:center;
  gap:clamp(1rem,2vw,1.5rem);
  justify-items:center;
  transition:opacity .4s ease;
  padding-top:clamp(18rem, 34vh, 24rem);
}
.center-logo-wrap{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:30;
  pointer-events:none;
}
.center-logo{
  width:min(72vw, 860px);
  height:auto;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.05));
  transition:
    width 1.05s cubic-bezier(.22,1,.36,1),
    transform 1.05s cubic-bezier(.22,1,.36,1),
    opacity .45s ease;
}
.top-shell{
  opacity:0;
  pointer-events:none;
}
.top-shell.is-ready{
  opacity:1;
  pointer-events:auto;
}
.top-shell .top-nav{
  opacity:0;
  transform:translateX(-1rem);
  clip-path:inset(0 0 0 100%);
  transition:
    opacity .7s ease,
    transform .7s ease,
    clip-path .9s cubic-bezier(.16,1,.3,1);
}
.top-shell.nav-is-visible .top-nav{
  opacity:1;
  transform:translateX(0);
  clip-path:inset(0 0 0 0);
}
.top-shell .logo-link,
.top-shell .site-logo{
  opacity:0;
}
.top-shell.is-ready .logo-link,
.top-shell.is-ready .site-logo{
  opacity:1;
}
.landing-page.is-selecting .language-links{
  opacity:0;
  pointer-events:none;
  transform:translateY(.5rem);
}
.language-links{
  transition:opacity .35s ease, transform .35s ease;
}
.landing-page.is-selecting .center-logo{
  width:var(--logo-settle-width);
  transform:translate(calc(-50vw + 50% + clamp(1rem, 3vw, 3rem)), calc(-50vh + 50% + clamp(1rem, 2.3vw, 1.8rem)));
}
.landing-page.is-selecting .top-shell{
  opacity:1;
}
.landing-page.is-selecting .landing-brand{
  opacity:0;
}


@media (max-width: 720px){
  .landing-brand{
    padding-top:clamp(14rem, 38vh, 18rem);
  }
}


/* keep top menu persistent on language pages */
.content-page .top-shell{
  opacity:1;
  pointer-events:auto;
}
.content-page .top-shell .logo-link,
.content-page .top-shell .site-logo{
  opacity:1;
}
.content-page .top-shell .top-nav{
  opacity:1;
  transform:translateX(0);
  clip-path:inset(0 0 0 0);
  pointer-events:auto;
}
.content-page .app-inner{
  padding-top:clamp(7rem,14vw,9rem);
}
.content-page .content-layout{
  width:min(100%, var(--content-max));
  margin:0 auto;
}