/* ============================================================
   ORBIT — Optimization Research Base for Intelligent Technologies
   Stylesheet · dark futuristic academic theme
   ============================================================ */

:root{
  --bg-0:#05070d;
  --bg-1:#0a0f1c;
  --bg-2:#101729;
  --bg-3:#162041;
  --line:rgba(120,160,255,0.12);
  --line-strong:rgba(120,160,255,0.28);
  --text:#e7ecf5;
  --text-dim:#9aa6c2;
  --text-mute:#6b7894;
  --accent-1:#22d3ee;   /* cyan */
  --accent-2:#7c3aed;   /* violet */
  --accent-3:#f472b6;   /* pink */
  --accent-4:#34d399;   /* mint */
  --accent-5:#facc15;   /* amber */
  --grad-1:linear-gradient(135deg,#22d3ee 0%,#7c3aed 60%,#f472b6 100%);
  --grad-2:linear-gradient(135deg,#22d3ee 0%,#3b82f6 100%);
  --grad-3:linear-gradient(135deg,#7c3aed 0%,#f472b6 100%);
  --grad-soft:linear-gradient(135deg,rgba(34,211,238,.10),rgba(124,58,237,.10));
  --radius:18px;
  --radius-sm:10px;
  --shadow-1:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04) inset;
  --shadow-glow:0 0 40px rgba(34,211,238,.25), 0 0 80px rgba(124,58,237,.18);
  --maxw:1180px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-0);color:var(--text);}
html{scroll-behavior:smooth}
body{
  font-family:'Inter','Noto Sans JP',-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  font-weight:400;
  line-height:1.7;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(1000px 600px at -10% 10%, rgba(34,211,238,.16), transparent 60%),
    linear-gradient(180deg,#05070d 0%,#070b15 30%,#05070d 100%);
  min-height:100vh;
}

a{color:var(--accent-1);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:#fff;text-shadow:0 0 12px rgba(34,211,238,.6)}

img{max-width:100%;display:block}

/* ---------- Background canvas ---------- */
#bg-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-1;opacity:.55;pointer-events:none;
}

/* ---------- Top navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
  background:linear-gradient(180deg,rgba(5,7,13,.72) 0%,rgba(5,7,13,.35) 70%,transparent 100%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.nav.scrolled{
  border-bottom-color:var(--line);
  background:rgba(5,7,13,.85);
}
.nav-brand{
  display:flex;align-items:center;gap:12px;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:700;letter-spacing:.22em;font-size:18px;
}
.nav-brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--grad-1);
  box-shadow:0 0 14px rgba(34,211,238,.85);
  animation:pulse 2.4s var(--ease) infinite;
}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  color:var(--text-dim);font-size:14px;font-weight:500;
  padding:8px 14px;border-radius:999px;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.05);text-shadow:none}
.lang-switch{
  display:flex;border:1px solid var(--line-strong);border-radius:999px;
  overflow:hidden;margin-left:14px;background:rgba(10,15,28,.6);
}
.lang-switch a{
  padding:7px 14px;font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--text-dim);text-transform:uppercase;
}
.lang-switch a.active{
  background:var(--grad-1);color:#0a0f1c;
}
.lang-switch a:hover:not(.active){color:#fff;background:rgba(255,255,255,.05)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:140px 24px 80px;text-align:center;
}
.hero-inner{position:relative;z-index:2;max-width:980px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--text-dim);
  padding:8px 16px;border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(10,15,28,.5);backdrop-filter:blur(6px);
  margin-bottom:30px;
}
.hero-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent-4);box-shadow:0 0 10px var(--accent-4);
  animation:pulse 2s infinite;
}
.hero-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(72px,14vw,200px);
  font-weight:700;line-height:.95;
  letter-spacing:-.04em;
  background:linear-gradient(180deg,#ffffff 0%,#c7d2fe 50%,#7c3aed 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:0 0 18px;
  filter:drop-shadow(0 4px 24px rgba(124,58,237,.35));
}
.hero-subtitle{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(16px,2vw,22px);
  font-weight:500;
  color:var(--text);
  letter-spacing:.04em;
  margin:0 0 10px;
}
.hero-subtitle .accent{
  background:var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-tagline{
  font-size:clamp(14px,1.5vw,17px);
  color:var(--text-dim);
  max-width:680px;margin:24px auto 40px;
  line-height:1.8;
}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:999px;
  font-weight:600;font-size:14px;letter-spacing:.04em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.btn-primary{
  background:var(--grad-1);color:#0a0f1c;
  box-shadow:0 10px 30px rgba(124,58,237,.4);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(124,58,237,.55);color:#0a0f1c}
.btn-ghost{
  background:rgba(255,255,255,.04);color:var(--text);
  border-color:var(--line-strong);
}
.btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px);color:#fff}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* Orbit ring decorations */
.orbit-rings{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(90vw,860px);aspect-ratio:1;
  pointer-events:none;z-index:1;opacity:.55;
}
.orbit-rings .ring{
  position:absolute;inset:0;border:1px solid rgba(124,58,237,.22);border-radius:50%;
  animation:spin 60s linear infinite;
}
.orbit-rings .ring:nth-child(2){inset:8%;border-color:rgba(34,211,238,.20);animation-duration:90s;animation-direction:reverse}
.orbit-rings .ring:nth-child(3){inset:18%;border-color:rgba(244,114,182,.18);animation-duration:120s}
.orbit-rings .ring::before{
  content:"";position:absolute;top:-4px;left:50%;
  width:8px;height:8px;border-radius:50%;background:var(--accent-1);
  box-shadow:0 0 14px var(--accent-1);
}
.orbit-rings .ring:nth-child(2)::before{background:var(--accent-2);box-shadow:0 0 14px var(--accent-2)}
.orbit-rings .ring:nth-child(3)::before{background:var(--accent-3);box-shadow:0 0 14px var(--accent-3)}

.scroll-hint{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-mute);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-hint .line{
  width:1px;height:38px;background:linear-gradient(180deg,var(--accent-1),transparent);
  animation:scrollLine 2s var(--ease) infinite;
}

/* ---------- Section base ---------- */
section{position:relative;padding:120px 24px}
.container{max-width:var(--maxw);margin:0 auto}
.section-head{margin-bottom:60px;text-align:center}
.section-eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent-1);font-weight:600;
  display:inline-block;margin-bottom:14px;
}
.section-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(34px,5vw,56px);
  font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 18px;
  background:linear-gradient(180deg,#fff 0%,#a5b4fc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-lead{
  max-width:780px;margin:0 auto;color:var(--text-dim);
  font-size:clamp(15px,1.5vw,17px);line-height:1.85;
}

/* ---------- Mission cards ---------- */
.mission-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.mcard{
  position:relative;
  padding:30px 26px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(16,23,41,.85),rgba(10,15,28,.65));
  border:1px solid var(--line);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
  overflow:hidden;
}
.mcard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--grad-soft);opacity:0;transition:opacity .35s var(--ease);
}
.mcard:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow-1)}
.mcard:hover::before{opacity:1}
.mcard > *{position:relative;z-index:1}
.mcard .icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  background:var(--grad-2);box-shadow:0 8px 20px rgba(59,130,246,.35);
  color:#0a0f1c;
}
.mcard.violet .icon{background:var(--grad-3);box-shadow:0 8px 20px rgba(124,58,237,.35)}
.mcard.mint .icon{background:linear-gradient(135deg,#34d399,#22d3ee);box-shadow:0 8px 20px rgba(52,211,153,.35)}
.mcard h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:18px;margin:0 0 10px;letter-spacing:.01em;color:#fff;
}
.mcard p{margin:0;color:var(--text-dim);font-size:14.5px;line-height:1.75}

/* ---------- Framework (challenge → approach → outcome) ---------- */
.framework{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:stretch;gap:18px;
  margin-top:30px;
}
.fw-col{
  display:flex;flex-direction:column;gap:14px;
}
.fw-col h4{
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-mute);margin:0 0 4px;text-align:center;
}
.fw-card{
  flex:1;padding:20px;border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:rgba(16,23,41,.75);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.fw-card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.fw-card.warn{border-color:rgba(244,114,182,.25);background:linear-gradient(180deg,rgba(244,114,182,.06),rgba(16,23,41,.6))}
.fw-card.approach{border-color:rgba(124,58,237,.32);background:linear-gradient(180deg,rgba(124,58,237,.08),rgba(16,23,41,.6))}
.fw-card.outcome{border-color:rgba(52,211,153,.28);background:linear-gradient(180deg,rgba(52,211,153,.06),rgba(16,23,41,.6))}
.fw-card .title{display:flex;align-items:center;gap:10px;font-weight:600;color:#fff;margin-bottom:8px;font-size:15px}
.fw-card .title svg{flex-shrink:0}
.fw-card p{margin:0;color:var(--text-dim);font-size:13.5px;line-height:1.7}
.fw-arrow{
  align-self:center;color:var(--accent-1);
  font-size:24px;opacity:.7;
}

/* ---------- OES highlight ---------- */
.oes{
  position:relative;
  padding:60px 40px;border-radius:24px;
  background:
    radial-gradient(600px 280px at 20% 0%,rgba(34,211,238,.22),transparent 60%),
    radial-gradient(500px 240px at 100% 100%,rgba(124,58,237,.22),transparent 60%),
    linear-gradient(180deg,rgba(16,23,41,.95),rgba(10,15,28,.85));
  border:1px solid var(--line-strong);
  display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;
  overflow:hidden;
}
.oes::before{
  content:"OES";position:absolute;right:-30px;bottom:-60px;
  font-family:'Space Grotesk',sans-serif;font-size:280px;font-weight:700;
  background:linear-gradient(180deg,rgba(124,58,237,.15),rgba(34,211,238,.04));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.04em;pointer-events:none;
}
.oes h3{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,3vw,38px);
  margin:0 0 18px;color:#fff;letter-spacing:-.01em;
}
.oes h3 .accent{
  background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.oes p{color:var(--text-dim);margin:0 0 14px;font-size:15px;line-height:1.85}
.oes-metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.oes-metric{
  padding:18px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
}
.oes-metric .label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);margin-bottom:6px}
.oes-metric .value{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#fff}
/* gauge visualization */
.gauge{
  position:relative;width:100%;aspect-ratio:1.4/1;max-width:420px;margin:0 auto;
}
.gauge svg{width:100%;height:100%}
.gauge .needle{transform-origin:50% 92%;animation:needleSweep 4s var(--ease) infinite alternate}
.gauge .label{
  position:absolute;left:0;right:0;bottom:6%;text-align:center;
  font-family:'Space Grotesk',sans-serif;
}
.gauge .label .big{font-size:28px;color:#fff;font-weight:700}
.gauge .label .sub{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-mute)}

/* ---------- Members ---------- */
.members{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;
}
.member{
  position:relative;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(16,23,41,.85),rgba(10,15,28,.65));
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.member:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow-1)}
.member-photo{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(135deg,#1a2342,#0a0f1c);
}
.member-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform .6s var(--ease),filter .6s var(--ease);
  filter:saturate(.9) contrast(1.05);
}
.member:hover .member-photo img{transform:scale(1.06);filter:saturate(1.1) contrast(1.05)}
.member-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(5,7,13,.85) 100%);
  pointer-events:none;
}
.member-body{padding:22px 22px 26px}
.member-role{
  display:inline-block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-1);font-weight:600;margin-bottom:8px;
}
.member-name{
  font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;
  color:#fff;margin:0 0 4px;
}
.member-title-en{font-size:12.5px;color:var(--text-mute);margin:0 0 12px;letter-spacing:.04em}
.member-desc{font-size:13.5px;color:var(--text-dim);line-height:1.75;margin:0 0 16px}
.member-tags{display:flex;flex-wrap:wrap;gap:6px}
.member-tag{
  font-size:10.5px;padding:4px 10px;border-radius:999px;
  background:rgba(34,211,238,.10);color:var(--accent-1);
  border:1px solid rgba(34,211,238,.25);letter-spacing:.05em;
}
.member-tag.v{background:rgba(124,58,237,.10);color:#c4b5fd;border-color:rgba(124,58,237,.3)}
.member-tag.p{background:rgba(244,114,182,.10);color:#f9a8d4;border-color:rgba(244,114,182,.3)}
.member-tag.m{background:rgba(52,211,153,.10);color:#6ee7b7;border-color:rgba(52,211,153,.3)}

/* ---------- Publications ---------- */
.pub-block{
  margin-top:50px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(16,23,41,.7),rgba(10,15,28,.55));
  border:1px solid var(--line);
  overflow:hidden;
}
.pub-row{
  border-bottom:1px solid var(--line);
}
.pub-row:last-child{border-bottom:none}
.pub-summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;cursor:pointer;
  transition:background .25s var(--ease);
  list-style:none;
}
.pub-summary::-webkit-details-marker{display:none}
.pub-row[open] .pub-summary,
.pub-summary:hover{background:rgba(255,255,255,.03)}
.pub-summary .who{
  display:flex;align-items:center;gap:14px;
}
.pub-summary .who .dot{
  width:8px;height:8px;border-radius:50%;background:var(--grad-1);
  box-shadow:0 0 10px rgba(34,211,238,.6);
}
.pub-summary .who .name{font-family:'Space Grotesk',sans-serif;font-weight:600;color:#fff;font-size:16px}
.pub-summary .who .role{font-size:12px;color:var(--text-mute);letter-spacing:.05em}
.pub-summary .chev{color:var(--text-mute);transition:transform .25s var(--ease)}
.pub-row[open] .pub-summary .chev{transform:rotate(180deg)}
.pub-list{
  padding:6px 26px 24px;margin:0;
}
.pub-list li{
  padding:14px 0;border-top:1px dashed var(--line);
  color:var(--text-dim);font-size:13.5px;line-height:1.75;
  list-style:none;
}
.pub-list li:first-child{border-top:none}
.pub-list li .ptitle{color:#fff;font-weight:500}
.pub-list li .pmeta{color:var(--text-mute);font-style:italic;font-size:12.5px}

/* ---------- Concept image section ---------- */
.figure-block{
  margin-top:30px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:rgba(10,15,28,.45);
  padding:16px;
}
.figure-block img{
  width:100%;border-radius:calc(var(--radius) - 6px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.figure-caption{
  font-size:12.5px;color:var(--text-mute);margin-top:14px;
  text-align:center;letter-spacing:.04em;
}

/* ---------- Footer ---------- */
.footer{
  padding:60px 24px 40px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(5,7,13,.8));
  text-align:center;
}
.footer .brand{
  font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.22em;font-size:18px;
  background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:6px;
}
.footer p{margin:6px 0;color:var(--text-mute);font-size:13px}
.footer .sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase}

/* ---------- Animations ---------- */
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.4);opacity:.6}
}
@keyframes scrollLine{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@keyframes needleSweep{
  0%{transform:rotate(-60deg)}
  100%{transform:rotate(60deg)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .oes{grid-template-columns:1fr;padding:40px 26px;gap:30px}
  .oes::before{font-size:180px;right:-10px;bottom:-30px}
  .framework{grid-template-columns:1fr;gap:14px}
  .fw-arrow{transform:rotate(90deg);padding:6px 0}
}
@media (max-width:720px){
  .nav{padding:12px 18px}
  .nav-links{gap:0}
  .nav-links a{padding:6px 10px;font-size:13px}
  .nav-links a.hide-sm{display:none}
  section{padding:80px 18px}
  .hero{padding:130px 18px 60px}
  .hero-eyebrow{font-size:10px;padding:6px 12px;letter-spacing:.22em}
  .oes-metrics{grid-template-columns:1fr}
}