/* ── LIVAO shared design system v2 ─────────────────────────
   Tokens + components shared across livao.ch sub-pages
   (science, join, team, invest, impressum). The landing
   page (index.html) carries its own inline styles on top
   of these tokens. ───────────────────────────────────────── */

/* ── TOKENS ─────────────────────────────────── */
:root{
  --teal:#0BA890;--teal2:#079A84;--teal3:#04705E;--teal4:#16D6B6;
  --teal-g:rgba(11,168,144,.12);--teal-g2:rgba(11,168,144,.22);
  --dark:#050E0C;--dark2:#091815;--dark3:#0F221E;
  --surf:#132420;--surf2:#1A302C;--surf3:#223C38;
  --border:rgba(11,168,144,.15);--border2:rgba(255,255,255,.07);
  --text:#DFF0EC;--text2:#C4DDD7;--muted:#7AABA7;--muted2:#9FC4BF;--dim:#3A6360;
  --red:#E05C5C;--amber:#D4943A;--green:#3DBD72;--gold:#C99A2A;--violet:#9B8CFF;
  --font-d:'Fraunces',Georgia,serif;
  --font-s:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-m:'JetBrains Mono',monospace;
  --shadow:0 24px 60px rgba(0,0,0,.4);
  --radius:18px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{background:var(--dark);color:var(--text);font-family:var(--font-s);font-size:16px;line-height:1.65;overflow-x:hidden;}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-thumb{background:var(--teal3);border-radius:3px;}
::selection{background:var(--teal-g2);color:#fff;}
a{color:inherit;}
img{max-width:100%;display:block;}

/* ── STICKY NAV ─────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:999;
  display:flex;align-items:center;height:60px;padding:0 5%;
  background:rgba(5,14,12,.82);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border2);
}
.nav-logo{font-family:var(--font-d);font-size:21px;color:var(--text);text-decoration:none;font-weight:300;letter-spacing:.5px;display:flex;align-items:center;gap:9px;}
.nav-logo span{color:var(--teal);}
.nav-mark{width:26px;height:26px;flex:none;}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:26px;}
.nav-links a{font-size:13.5px;color:var(--muted);text-decoration:none;transition:color .2s;}
.nav-links a:hover{color:var(--text);}
.nav-back{margin-left:auto;font-size:13px;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:6px;}
.nav-back:hover{color:var(--teal);}
.nav-cta{background:var(--teal);color:#fff;padding:9px 20px;border-radius:100px;font-size:13px;font-weight:700;text-decoration:none;transition:all .2s;white-space:nowrap;}
.nav-cta:hover{background:var(--teal2);transform:translateY(-1px);box-shadow:0 8px 22px rgba(11,168,144,.32);}

/* ── SECTIONS / TYPE ─────────────────────────── */
section{padding:92px 5%;position:relative;}
.container{max-width:1080px;margin:0 auto;}
.container-narrow{max-width:760px;margin:0 auto;}
.eyebrow{display:inline-block;font-family:var(--font-m);font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal);margin-bottom:16px;}
h1{font-family:var(--font-d);font-weight:300;font-size:clamp(38px,5.4vw,64px);line-height:1.06;letter-spacing:-1.2px;}
h2{font-family:var(--font-d);font-weight:300;font-size:clamp(27px,3.6vw,42px);line-height:1.14;letter-spacing:-.5px;}
h3{font-family:var(--font-d);font-weight:300;font-size:21px;line-height:1.3;}
.italic{font-style:italic;}.teal{color:var(--teal);}
p.lead{font-size:17.5px;color:var(--muted2);line-height:1.75;font-weight:300;max-width:640px;}
p.body-text{font-size:14.5px;color:var(--muted);line-height:1.85;max-width:680px;}
.divider{height:1px;background:var(--border2);}
.glow{height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.32;}
ul.plain{list-style:none;}
ul.check li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--muted2);line-height:1.65;margin-bottom:11px;}
ul.check li::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0;}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted2);background:var(--surf);border:1px solid var(--border);padding:7px 13px;border-radius:100px;}

/* ── ANIMATIONS ──────────────────────────────── */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.fade-in.visible{opacity:1;transform:translateY(0);}
.delay-1{transition-delay:.08s;}.delay-2{transition-delay:.16s;}.delay-3{transition-delay:.24s;}.delay-4{transition-delay:.32s;}.delay-5{transition-delay:.4s;}

/* ── CARDS ───────────────────────────────────── */
.card{background:var(--surf);border:1px solid var(--border2);border-radius:var(--radius);padding:26px;transition:border-color .25s,transform .25s;}
.card:hover{border-color:var(--border);}
.card-accent{background:linear-gradient(160deg,var(--surf),var(--dark2));border:1px solid var(--border);border-radius:var(--radius);padding:26px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.stat-card{background:var(--surf);border:1px solid var(--border2);border-radius:14px;padding:20px;text-align:center;}
.stat-num{font-family:var(--font-d);font-size:30px;color:var(--teal);font-weight:300;line-height:1;}
.stat-label{font-family:var(--font-m);font-size:9px;color:var(--muted);letter-spacing:1.5px;margin-top:7px;text-transform:uppercase;}
.bar-row{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.bar-label{flex:0 0 230px;font-size:13px;color:var(--text2);}
.bar-track{flex:1;height:8px;background:var(--surf3);border-radius:4px;overflow:hidden;}
.bar-fill{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--teal3),var(--teal));}
.bar-pct{flex:0 0 60px;text-align:right;font-family:var(--font-m);font-size:12px;color:var(--teal);}

/* ── FORMS ───────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;}
.form-grid .full{grid-column:1/-1;}
.field label{display:block;font-family:var(--font-m);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;
  background:rgba(255,255,255,.06);border:1.5px solid var(--border2);
  border-radius:12px;color:var(--text);font-family:var(--font-s);font-size:14px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-g);}
.field input::placeholder,.field textarea::placeholder{color:var(--dim);}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%237AABA7' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}
.field select option{background:var(--surf2);color:var(--text);}
.submit-btn{
  background:var(--teal);color:#fff;padding:15px 36px;
  border-radius:100px;border:none;font-size:15px;font-weight:700;
  cursor:pointer;transition:all .2s;font-family:var(--font-s);
}
.submit-btn:hover{background:var(--teal2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(11,168,144,.3);}
.submit-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none;}
.form-note{font-size:11px;color:var(--dim);font-family:var(--font-m);margin-top:12px;}

/* ── SUCCESS STATE ───────────────────────────── */
.success-msg{
  background:rgba(11,168,144,.1);border:1px solid var(--border);
  border-radius:14px;padding:22px 24px;text-align:center;
  display:none;margin-top:20px;
}
.success-msg.show{display:block;animation:popIn .4s ease;}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.success-msg h3{color:var(--teal);margin-bottom:6px;}
.success-msg p{font-size:13px;color:var(--muted);}

/* ── FOOTER ──────────────────────────────────── */
footer{padding:44px 5% 40px;border-top:1px solid var(--border2);}
.footer-inner{max-width:1080px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:28px;}
.footer-logo{font-family:var(--font-d);font-size:18px;color:var(--text2);font-weight:300;margin-bottom:8px;}
.footer-tag{font-size:12.5px;color:var(--dim);max-width:280px;line-height:1.6;}
.footer-col h5{font-family:var(--font-m);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.footer-col a{display:block;font-size:13px;color:var(--muted2);text-decoration:none;margin-bottom:10px;transition:color .2s;}
.footer-col a:hover{color:var(--teal);}
.footer-bottom{max-width:1080px;margin:30px auto 0;padding-top:22px;border-top:1px solid var(--border2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--dim);font-family:var(--font-m);}

/* ── SUB-PAGE HERO ───────────────────────────── */
.subhero{padding:142px 5% 56px;position:relative;overflow:hidden;}
.subhero-orb{position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(11,168,144,.09),transparent 68%);right:-160px;top:-120px;pointer-events:none;}

/* ── PILL TABS / CHIPS ───────────────────────── */
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;border:1.5px solid var(--border2);background:var(--surf);color:var(--muted2);font-size:13.5px;font-weight:500;cursor:pointer;transition:all .2s;user-select:none;}
.chip:hover{border-color:var(--teal3);color:var(--text);}
.chip.on{background:var(--teal-g2);border-color:var(--teal);color:var(--text);}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--dim);transition:background .2s;}
.chip.on .dot{background:var(--teal4);box-shadow:0 0 8px var(--teal4);}

/* ── ROLE / TEAM CARDS ───────────────────────── */
.role{display:flex;align-items:center;gap:18px;padding:22px 24px;background:var(--surf);border:1px solid var(--border2);border-radius:16px;margin-bottom:14px;transition:border-color .2s,transform .2s;text-decoration:none;}
.role:hover{border-color:var(--teal);transform:translateX(4px);}
.role-ic{width:46px;height:46px;border-radius:12px;background:var(--teal-g2);display:flex;align-items:center;justify-content:center;font-size:22px;flex:none;}
.role-body{flex:1;}
.role-body h4{font-size:16px;color:var(--text);font-weight:600;margin-bottom:3px;}
.role-body p{font-size:13px;color:var(--muted);}
.role-meta{font-family:var(--font-m);font-size:10px;color:var(--teal);letter-spacing:1px;text-transform:uppercase;white-space:nowrap;}
.person{text-align:center;}
.person-av{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(150deg,var(--teal3),var(--surf3));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:30px;color:var(--text);border:1px solid var(--border);}
.person h4{font-size:16px;color:var(--text);margin-bottom:2px;}
.person .role-name{font-family:var(--font-m);font-size:10.5px;color:var(--teal);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;}
.person p{font-size:13px;color:var(--muted);line-height:1.6;}

/* ── RESPONSIVE ──────────────────────────────── */
@media(max-width:900px){
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
  .bar-label{flex:0 0 150px;font-size:12px;}
  .nav-links{gap:16px;}
}
@media(max-width:600px){
  section{padding:64px 6%;}
  .nav-links a:not(.nav-cta){display:none;}
  .footer-inner{flex-direction:column;gap:24px;}
}