/* Lab site — premium dark, elevated. Living knowledge-graph hero, gradient-border
   cards, refined motion. Methods stay off-site. Robust: content never gets stuck. */

:root{
  --bg:#090a0c; --bg-2:#0d0e11; --card-bg:#121317; --card-2:#15161b;
  --ink:#edecea; --ink-2:#b4b3ae; --muted:#807f79; --faint:#55544e;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --accent:#5ccfba; --accent-2:#8ee7d6; --accent-deep:#1f9c87; --accent-soft:rgba(92,207,186,.14);
  --shell:1080px; --ease:cubic-bezier(.22,.62,.25,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:"Inter",system-ui,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
.display{font-family:"Fraunces",Georgia,serif; font-weight:400; letter-spacing:-.015em;}
.shell{max-width:var(--shell); margin:0 auto; padding:0 30px; position:relative; z-index:2;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent-soft); color:#fff;}

/* background glow */
.bg-glow{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(680px 460px at 78% 8%, rgba(92,207,186,.10), transparent 70%),
    radial-gradient(560px 420px at 12% 28%, rgba(40,120,150,.08), transparent 70%);}

/* buttons */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:9px; border-radius:11px; cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:500; padding:13px 22px; border:1px solid transparent; transition:.24s var(--ease); white-space:nowrap;}
.btn.sm{padding:9px 16px; font-size:.88rem; border-radius:9px;}
.btn-accent{background:var(--accent); color:#05221d; border-color:var(--accent);}
.btn-accent::after{content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg);}
.btn-accent:hover::after{animation:shine .85s var(--ease);}
@keyframes shine{to{left:150%;}}
.btn-accent:hover{background:var(--accent-2); border-color:var(--accent-2); transform:translateY(-1px);}
.btn-line{background:rgba(255,255,255,.03); border-color:var(--line-2); color:var(--ink);}
.btn-line:hover{border-color:rgba(255,255,255,.42);}
.btn .arr{transition:transform .24s var(--ease);} .btn:hover .arr{transform:translateX(3px);}

.logo-mark{width:25px; height:25px; flex:none; display:block; filter:drop-shadow(0 0 10px rgba(92,207,186,.35));}
.brand .logo-mark{transition:transform .3s var(--ease);} .brand:hover .logo-mark{transform:rotate(-4deg) scale(1.05);}

/* nav */
.nav{position:sticky; top:0; z-index:40; background:rgba(9,10,12,.72); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:.25s;}
.nav.scrolled{border-color:var(--line); background:rgba(9,10,12,.92);}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:70px;}
.brand{display:inline-flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-weight:500; font-size:1.24rem; letter-spacing:-.01em; color:#fff;}
.nav-links{display:flex; gap:30px;}
.nav-links a{position:relative; font-size:.93rem; color:var(--muted); transition:.18s;}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-7px; height:1.5px; background:var(--accent); border-radius:2px; transition:right .26s var(--ease);}
.nav-links a:hover{color:var(--ink);} .nav-links a:hover::after{right:0;}
@media(max-width:760px){ .nav-links{display:none;} .nav .btn{display:none;} }

/* bilingual: hide the inactive language (default = English) */
html:not(.lang-fr) [data-fr]{display:none !important;}
html.lang-fr [data-en]{display:none !important;}
.nav-right{display:flex; align-items:center; gap:14px;}
.lang{display:inline-flex; gap:2px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:9px; padding:3px;}
.lang button{border:0; background:none; cursor:pointer; font:inherit; font-size:.8rem; color:var(--muted); padding:5px 10px; border-radius:6px; transition:.18s;}
.lang button.on{color:#05221d; background:var(--accent);}
@media(max-width:760px){ .nav-right .btn{display:none;} }

/* hero — centered, with a living neural "mind" behind the text */
.hero{position:relative; overflow:hidden; padding:150px 0 130px;}
.mind{position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; opacity:.85;}
.mind-veil{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 58% 56% at 50% 46%, rgba(9,10,12,.86) 0%, rgba(9,10,12,.45) 46%, transparent 76%);}
.hero-center{text-align:center;}
.hero-center .hero-in{max-width:920px; margin:0 auto;}
.hero-in{position:relative; z-index:2;}
.kicker{display:inline-block; font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:24px;}
.hero h1{font-family:"Fraunces",serif; font-weight:400; font-size:clamp(2.8rem,6.8vw,5rem); line-height:1.04; letter-spacing:-.025em; color:#fff;}
.hero h1 .ln{display:inline;} .hero h1 .em{font-style:italic; color:var(--accent-2);}
.hero h1 .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em;}
.hero h1 .wi{display:inline-block;}
.hero-center .lede{margin:30px auto 0; font-size:1.2rem; color:var(--ink-2); max-width:60ch; line-height:1.64;}
.hero-center .row{margin-top:40px; display:flex; gap:13px; flex-wrap:wrap; justify-content:center;}

/* sections */
.sect{padding:112px 0; border-top:1px solid var(--line);}
.sect.alt{background:var(--bg-2);}
.head{max-width:680px; margin-bottom:50px;}
.head .display{font-size:clamp(2rem,4.2vw,3rem); line-height:1.08; margin-top:8px; color:#fff;}
.sub{margin-top:16px; color:var(--muted); font-size:1.06rem;}

/* what we do */
.do-grid{display:grid; grid-template-columns:.9fr 1fr; gap:48px; align-items:start;}
.do-lead .display{font-size:clamp(1.9rem,3.8vw,2.7rem); line-height:1.1; margin-top:8px; color:#fff; max-width:18ch;}
.do-body p{color:var(--ink-2); font-size:1.12rem; line-height:1.64; margin-bottom:18px;}
.do-body p:last-child{margin-bottom:0;}
.values{margin-top:60px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:820px){ .do-grid{grid-template-columns:1fr; gap:24px;} .values{grid-template-columns:1fr;} }

/* card system — gradient border + cursor glow */
.card{position:relative; border-radius:16px; padding:1px; overflow:hidden;
  background:linear-gradient(180deg,var(--line-2),transparent 70%); transition:.3s var(--ease);}
.card .card-in{position:relative; z-index:1; height:100%; border-radius:15px; background:var(--card-bg); border:1px solid rgba(255,255,255,.03);}
.card-glow{position:absolute; inset:-1px; z-index:0; opacity:0; transition:opacity .35s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), var(--accent-soft), transparent 46%);}
.card:hover{transform:translateY(-4px);} .card:hover .card-glow{opacity:1;}
.val .card-in{padding:30px 28px;}
.val h3{font-family:"Fraunces",serif; font-weight:500; font-size:1.3rem; color:#fff; margin-bottom:10px;}
.val p{color:var(--muted); font-size:.99rem; line-height:1.6;}

/* work */
.work{display:grid; grid-template-columns:1.3fr 1fr; gap:18px;}
.proj .card-in{padding:36px 34px;}
.proj-top{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.proj .tag{font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);}
.proj .status{display:inline-flex; align-items:center; gap:7px; font-size:.78rem; color:var(--muted); border:1px solid var(--line-2); border-radius:30px; padding:4px 12px;}
.proj .sdot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:blink 2.4s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.proj h3{font-size:1.9rem; letter-spacing:-.02em; margin:20px 0 10px; color:#fff;}
.proj p{color:var(--ink-2); font-size:1.04rem; line-height:1.62;}
.proj-more{background:none; padding:0;}
.proj-more .card-in{padding:36px 32px; background:transparent; border:1px dashed var(--line-2); display:flex; flex-direction:column; justify-content:center;}
.proj-more .more-k{font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:12px;}
.proj-more p{color:var(--muted);}
.proj-more:hover{transform:none;}
@media(max-width:760px){ .work{grid-template-columns:1fr;} }

/* lab / about */
.lab-grid{display:grid; grid-template-columns:.85fr 1fr; gap:48px; align-items:start;}
.lab-grid .display{font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1.1; margin-top:8px; color:#fff;}
.lab-body{font-size:1.16rem; color:var(--ink-2); line-height:1.64;}
.founder{margin-top:28px; display:flex; align-items:center; gap:14px;}
.founder .av{width:46px; height:46px; border-radius:50%; background:var(--accent); color:#05221d; display:grid; place-items:center; font-family:"Fraunces",serif; font-size:1.1rem; box-shadow:0 0 20px rgba(92,207,186,.35);}
.founder .who{font-weight:600; color:#fff;} .founder .role{font-size:.9rem; color:var(--muted);}
@media(max-width:760px){ .lab-grid{grid-template-columns:1fr; gap:24px;} }

/* contact */
.contact{position:relative; padding:120px 0; text-align:center; border-top:1px solid var(--line); overflow:hidden;}
.contact::before{content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(620px 280px at 50% 0%, rgba(92,207,186,.10), transparent 70%);}
.contact .display{font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.06; color:#fff;}
.contact .sub{max-width:46ch; margin:16px auto 0;}
.cform{margin:34px auto 0; max-width:540px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.cform input{flex:1 1 180px; background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:11px; color:#fff; font:inherit; font-size:1rem; padding:13px 15px; transition:.18s;}
.cform input::placeholder{color:var(--faint);}
.cform input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.cmsg{margin-top:14px; font-family:"JetBrains Mono",monospace; font-size:.84rem; color:var(--accent-2);}
.or{margin-top:22px; font-size:.94rem; color:var(--muted);}
.or a{color:var(--accent-2); border-bottom:1px solid var(--accent-soft); padding-bottom:1px;}

/* footer */
.ft{border-top:1px solid var(--line); padding:44px 0 56px;}
.ft-in{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.wm{display:inline-flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-weight:500; font-size:1.3rem; color:#fff;}
.ft-meta{display:flex; flex-direction:column; gap:6px; text-align:right; font-size:.86rem; color:var(--muted);}
@media(max-width:680px){ .ft-in{flex-direction:column; align-items:flex-start;} .ft-meta{text-align:left;} }

/* reveal — visible by default; hidden only while pending, never stuck */
.reveal{transition:opacity .7s var(--ease), transform .7s var(--ease);}
html.anim-on .reveal:not(.in){opacity:0; transform:translateY(20px);}
.reveal.in{opacity:1; transform:none;}
html.anim-on .rise{opacity:0; transform:translateY(16px); animation:rise .8s var(--ease) forwards; animation-delay:var(--d,0s);}
@keyframes rise{to{opacity:1; transform:none;}}

@media(prefers-reduced-motion:reduce){
  .reveal,.rise{opacity:1 !important; transform:none !important; animation:none !important;}
  .graph *{animation:none !important; stroke-dashoffset:0 !important; opacity:.9 !important;}
  .btn-accent::after,.sdot{animation:none !important;}
}