/* =========================================================
   迷途颂歌 · Aurora Glass / Editorial UI
   Inspired by modern spatial UI principles:
   material depth, immersive light, restrained color, editorial rhythm.
   ========================================================= */

:root{
  --bg:#f4f7fb;
  --bg-2:#eef3f8;
  --surface:rgba(255,255,255,.50);
  --surface-strong:rgba(255,255,255,.72);
  --surface-soft:rgba(255,255,255,.30);
  --line:rgba(255,255,255,.72);
  --line-strong:rgba(255,255,255,.92);
  --text:#162131;
  --text-2:#526176;
  --text-3:#8491a4;
  --accent:#6a9cff;
  --accent-2:#f39ab7;
  --accent-3:#b28cff;
  --accent-4:#6fe0d0;
  --shadow:0 24px 70px rgba(69,94,126,.14),0 6px 22px rgba(69,94,126,.08);
  --shadow-soft:0 14px 42px rgba(69,94,126,.10);
  --radius-lg:32px;
  --radius-md:22px;
  --radius-sm:16px;
  --blur:28px;
  --max:1180px;
  --nav-h:82px;
  --ease:cubic-bezier(.2,.75,.25,1);
}

html[data-theme="dark"]{
  --bg:#07090e;
  --bg-2:#0c1119;
  --surface:rgba(19,24,35,.54);
  --surface-strong:rgba(25,30,43,.72);
  --surface-soft:rgba(19,24,35,.34);
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.19);
  --text:#f4f7fb;
  --text-2:#c0cad8;
  --text-3:#7f8b9d;
  --accent:#8bb2ff;
  --accent-2:#ffacc9;
  --accent-3:#c19cff;
  --accent-4:#78dfd0;
  --shadow:0 28px 90px rgba(0,0,0,.40),0 6px 26px rgba(0,0,0,.25);
  --shadow-soft:0 16px 44px rgba(0,0,0,.28);
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 8% 4%, rgba(114,169,255,.20), transparent 70%),
    radial-gradient(800px 560px at 88% 18%, rgba(255,171,200,.16), transparent 70%),
    radial-gradient(900px 700px at 60% 90%, rgba(174,139,255,.13), transparent 72%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  font-family:"HarmonyOS Sans SC","HarmonyOS Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .45s ease,color .35s ease;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.45;
  background:
    radial-gradient(500px 280px at 50% -5%, rgba(255,255,255,.75), transparent 72%),
    radial-gradient(300px 220px at 20% 30%, rgba(255,255,255,.24), transparent 72%);
}

html[data-theme="dark"] body::before{opacity:.18}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit}
button{color:inherit}

.container{
  width:min(calc(100% - 40px),var(--max));
  margin:0 auto;
  position:relative;
  z-index:2;
}

.page-shell{position:relative;z-index:1}

.aurora{
  position:fixed;
  width:34vw;
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  filter:blur(60px);
  opacity:.35;
  z-index:0;
  mix-blend-mode:screen;
}
.aurora.a1{top:10vh;left:-12vw;background:#83b7ff}
.aurora.a2{top:42vh;right:-12vw;background:#f8a8c3}
.aurora.a3{bottom:-18vh;left:34vw;background:#b396ff}
html[data-theme="dark"] .aurora{opacity:.17}

.cursor-glow{
  position:fixed;
  width:420px;
  height:420px;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(134,176,255,.15),rgba(244,155,191,.09) 34%,transparent 70%);
  mix-blend-mode:screen;
}
@media (pointer:coarse){.cursor-glow{display:none}}

.glass{
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.04)),
    var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(255,255,255,.44),transparent 28%,transparent 72%,rgba(255,255,255,.12)),
    radial-gradient(180px 80px at 14% 0%,rgba(255,255,255,.22),transparent 70%);
  mix-blend-mode:screen;
  opacity:.85;
}
.glass::after{
  content:"";
  position:absolute;
  inset:1px;
  pointer-events:none;
  border-radius:calc(var(--radius-md) - 1px);
  border-top:1px solid rgba(255,255,255,.34);
  border-left:1px solid rgba(255,255,255,.12);
  opacity:.8;
}
html[data-theme="dark"] .glass{
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    var(--surface);
}
html[data-theme="dark"] .glass::before{
  background:
    linear-gradient(135deg,rgba(255,255,255,.14),transparent 32%,transparent 74%,rgba(255,255,255,.04)),
    radial-gradient(180px 80px at 14% 0%,rgba(255,255,255,.08),transparent 70%);
}

.navbar{
  position:fixed;
  inset:16px 0 auto;
  z-index:100;
  pointer-events:none;
}
.navbar .nav-inner{
  min-height:64px;
  padding:10px 12px 10px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:24px;
  pointer-events:auto;
  background:var(--surface-strong);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(30px) saturate(160%);
  -webkit-backdrop-filter:blur(30px) saturate(160%);
}
.navbar.scrolled{top:10px}
.nav-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.04rem;
  font-weight:750;
  white-space:nowrap;
  letter-spacing:.02em;
}
.logo-mark{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(114,168,255,.85),rgba(245,154,187,.82) 58%,rgba(184,144,255,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 20px rgba(105,148,235,.22);
  color:#fff;font-size:.78rem;font-weight:800;
}
.nav-spacer{flex:1}
.nav-links{
  display:flex;align-items:center;gap:4px;
  list-style:none;margin:0;padding:0;
}
.nav-links a{
  display:block;
  padding:9px 12px;
  border-radius:14px;
  color:var(--text-2);
  font-size:.89rem;
  transition:transform .25s var(--ease),background .25s ease,color .25s ease;
}
.nav-links a:hover{background:rgba(255,255,255,.20);color:var(--text);transform:translateY(-1px)}
.nav-links a.active{background:rgba(255,255,255,.32);color:var(--text);font-weight:700}
.nav-actions{display:flex;align-items:center;gap:7px}
.icon-btn,.lang-select{
  height:40px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.18);
  border-radius:13px;
  display:grid;place-items:center;
  cursor:pointer;
  transition:transform .25s var(--ease),background .25s ease,border-color .25s ease;
}
.icon-btn{width:40px}
.lang-wrap{position:relative}
.lang-select{padding:0 11px;font-size:.8rem;min-width:48px}
.icon-btn:hover,.lang-select:hover{transform:translateY(-1px);background:rgba(255,255,255,.28);border-color:var(--line-strong)}
.lang-menu{
  position:absolute;right:0;top:48px;
  min-width:140px;padding:7px;
  border-radius:16px;
  background:var(--surface-strong);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(30px);
  display:none;
}
.lang-menu.open{display:grid}
.lang-menu button{
  border:0;background:transparent;text-align:left;
  padding:10px 12px;border-radius:11px;cursor:pointer;color:var(--text-2);
}
.lang-menu button:hover{background:rgba(255,255,255,.20);color:var(--text)}
.nav-toggle{
  display:none;
  width:40px;height:40px;border:1px solid var(--line);
  background:rgba(255,255,255,.18);
  border-radius:13px;cursor:pointer;
}

main{position:relative;z-index:2}

.hero{
  min-height:100svh;
  padding:140px 0 70px;
  display:flex;
  align-items:center;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
  gap:clamp(30px,6vw,90px);
  align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.18);
  border-radius:999px;
  color:var(--text-2);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:22px;
  backdrop-filter:blur(20px);
}
.dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 14px rgba(110,154,255,.65)}
.hero h1{
  margin:0;
  font-size:clamp(3.8rem,8vw,7.8rem);
  line-height:.94;
  letter-spacing:-.07em;
  font-weight:780;
}
.hero h1 .gradient{
  background:linear-gradient(110deg,var(--accent),var(--accent-2) 50%,var(--accent-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-lead{
  max-width:650px;
  margin:25px 0 30px;
  color:var(--text-2);
  font-size:clamp(1.05rem,1.7vw,1.22rem);
  line-height:1.9;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  min-height:48px;
  padding:0 18px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:15px;border:1px solid var(--line);
  font-size:.9rem;font-weight:700;
  transition:transform .3s var(--ease),box-shadow .3s ease,background .3s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#6d9eff,#9a80ff 50%,#f19ab8);
  box-shadow:0 14px 28px rgba(117,136,234,.24),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-ghost{background:rgba(255,255,255,.16);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.26);box-shadow:var(--shadow-soft)}

.hero-visual{
  min-height:520px;
  position:relative;
}
.hero-orbit{
  position:absolute;inset:0;
  display:grid;place-items:center;
}
.hero-orbit::before,.hero-orbit::after{
  content:"";position:absolute;border-radius:50%;
  border:1px solid var(--line);
}
.hero-orbit::before{width:78%;aspect-ratio:1;transform:rotate(-9deg) scaleX(1.12)}
.hero-orbit::after{width:56%;aspect-ratio:1;transform:rotate(32deg) scaleX(1.25);border-color:rgba(131,178,255,.35)}
.hero-core{
  width:min(360px,70vw);aspect-ratio:1;
  border-radius:40%;
  padding:18px;
  transform:rotate(-7deg);
  background:linear-gradient(135deg,rgba(255,255,255,.64),rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.76);
  box-shadow:var(--shadow);
  backdrop-filter:blur(35px) saturate(160%);
  display:grid;place-items:center;
}
.hero-core img{
  width:92%;height:92%;object-fit:contain;
  transform:rotate(7deg);
  filter:drop-shadow(0 16px 26px rgba(55,84,135,.18));
}
.float-card{
  position:absolute;
  padding:15px 16px;
  border-radius:18px;
  font-size:.8rem;
  color:var(--text-2);
  box-shadow:var(--shadow-soft);
  background:var(--surface);
}
.float-card strong{display:block;color:var(--text);font-size:.9rem;margin-top:3px}
.float-a{top:8%;right:5%;transform:rotate(4deg)}
.float-b{bottom:10%;left:2%;transform:rotate(-3deg)}
.float-c{top:48%;right:-2%;transform:rotate(2deg)}
.float-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;
  background:linear-gradient(135deg,var(--accent-4),var(--accent));
}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  color:var(--text-3);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase
}

.section{padding:120px 0;position:relative}
.section.compact{padding:90px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
.section-kicker{color:var(--text-3);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.section h2{font-size:clamp(2rem,4vw,3.7rem);line-height:1.06;letter-spacing:-.045em;margin:0;font-weight:760}
.section-head p{max-width:430px;margin:0;color:var(--text-2);line-height:1.8}
.editorial-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.editorial-grid.reverse{grid-template-columns:.8fr 1.2fr}
.feature-card{min-height:360px;padding:34px;display:flex;flex-direction:column;justify-content:space-between}
.feature-card .number{font-size:.75rem;letter-spacing:.16em;color:var(--text-3)}
.feature-card h3{font-size:clamp(1.5rem,3vw,2.6rem);margin:0 0 12px;letter-spacing:-.035em;max-width:520px}
.feature-card p{margin:0;max-width:590px;color:var(--text-2);line-height:1.85}
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.mini-card{padding:26px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.mini-icon{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(112,167,255,.18),rgba(244,156,190,.18));
  border:1px solid var(--line);
  font-size:1rem;
}
.mini-card h3{margin:18px 0 7px;font-size:1rem}
.mini-card p{margin:0;color:var(--text-2);font-size:.86rem;line-height:1.7}

.marquee{
  overflow:hidden;white-space:nowrap;margin:8px 0 80px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;color:var(--text-3);font-size:clamp(2rem,6vw,6rem);font-weight:700;letter-spacing:-.06em;
  opacity:.55;
}
.marquee-track{display:inline-block;animation:marquee 28s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}

.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.quote-panel{padding:34px;min-height:360px;display:flex;flex-direction:column;justify-content:center}
.quote-panel .quote{font-size:clamp(1.35rem,2.5vw,2.1rem);line-height:1.6;letter-spacing:-.03em;margin:0 0 24px}
.quote-panel .small{color:var(--text-2);line-height:1.9;margin:0}
.fact-panel{padding:24px}
.fact-row{
  display:grid;grid-template-columns:92px 1fr;gap:16px;padding:18px 8px;
  border-bottom:1px solid var(--line);
}
.fact-row:last-child{border-bottom:0}
.fact-label{font-size:.76rem;color:var(--text-3)}
.fact-val{font-size:.92rem;color:var(--text);font-weight:600}

.manifesto{
  padding:36px;
  text-align:center;
  background:
    radial-gradient(320px 180px at 50% 0%,rgba(122,167,255,.15),transparent 70%),
    rgba(255,255,255,.11);
}
.manifesto .symbol{font-size:2.4rem;opacity:.55}
.manifesto h3{font-size:clamp(1.5rem,3vw,2.5rem);margin:12px auto 10px;max-width:780px;letter-spacing:-.04em}
.manifesto p{color:var(--text-2);margin:0;max-width:720px;margin-inline:auto}

.timeline-wrap{padding:28px}
.timeline{max-width:820px;margin:0 auto;position:relative}
.timeline::before{
  content:"";position:absolute;left:12px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(var(--accent),var(--accent-2),transparent);
}
.tl-item{position:relative;padding:8px 0 36px 48px}
.tl-item:last-child{padding-bottom:8px}
.tl-item::before{
  content:"";position:absolute;left:5px;top:15px;width:15px;height:15px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 0 6px rgba(120,155,225,.09);
}
.tl-date{font-size:.72rem;letter-spacing:.15em;color:var(--accent);font-weight:800;margin-bottom:5px}
.tl-text{font-size:1rem;line-height:1.85;color:var(--text-2)}
.tl-text strong{color:var(--text)}

.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.member{padding:20px;text-align:left;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end}
.member-photo{
  width:100%;aspect-ratio:1.08;object-fit:cover;border-radius:22px;
  margin-bottom:16px;
  border:1px solid rgba(255,255,255,.28);
  filter:saturate(.96) contrast(.98);
}
.member h3{margin:0;font-size:1rem}
.member .role{margin:5px 0 0;color:var(--accent-2);font-size:.78rem}
.member .tag{margin-top:auto;align-self:flex-start;padding-top:16px;color:var(--text-3);font-size:.72rem}
.member.placeholder{align-items:flex-start;justify-content:flex-start}
.member.placeholder .member-photo{
  display:grid;place-items:center;
  aspect-ratio:1.08;background:linear-gradient(135deg,rgba(109,160,255,.14),rgba(242,157,192,.14));
  color:var(--text-2);font-size:3rem;
}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-panel{padding:26px}
.contact-item{
  display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center;
  padding:16px 6px;border-bottom:1px solid var(--line)
}
.contact-item:last-child{border-bottom:0}
.contact-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid var(--line)}
.contact-main{font-size:.92rem;font-weight:650}
.contact-sub{font-size:.74rem;color:var(--text-3);margin-top:3px}
.gradient-link{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:750
}

.friend-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.friend-card{padding:22px;min-height:220px}
.friend-logo{height:64px;width:100%;object-fit:contain;margin:0 auto 16px}
.friend-card h3{font-size:1rem;margin:0 0 6px}
.friend-card p{font-size:.78rem;color:var(--text-3);margin:0;line-height:1.7}
.friend-card .friend-link{display:inline-flex;margin-top:14px;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid var(--line);font-size:.74rem;color:var(--text-2)}

.works-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.work-card{padding:34px;min-height:330px;display:flex;flex-direction:column;justify-content:space-between}
.work-mark{width:78px;height:78px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(111,160,255,.18),rgba(243,154,188,.18));border:1px solid var(--line);font-size:2rem}
.work-card h3{font-size:1.45rem;margin:24px 0 8px}
.work-card p{color:var(--text-2);line-height:1.85;margin:0}
.copyright{color:var(--text-3);font-size:.74rem;margin-top:28px;text-align:center}

footer{
  padding:60px 0 90px;
  position:relative;
  z-index:2;
  color:var(--text-3);
}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-top:30px;border-top:1px solid var(--line)}
.footer-brand{font-size:1.05rem;color:var(--text);font-weight:750;margin-bottom:10px}
.footer-slogan{max-width:420px;font-size:.8rem;line-height:1.7}
.f-links{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-end}
.f-links a{font-size:.78rem;color:var(--text-2)}
.f-links a:hover{color:var(--text)}

.back-top{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:46px;height:46px;border-radius:16px;border:1px solid var(--line);
  background:var(--surface-strong);backdrop-filter:blur(24px);
  cursor:pointer;box-shadow:var(--shadow-soft);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:.3s var(--ease)
}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0)}

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

.skip-note{
  margin-top:30px;text-align:center;color:var(--text-3);font-size:.72rem
}

@media (max-width:1050px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .navbar .nav-inner{padding-right:10px}
  .team-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .hero{padding-top:120px}
  .hero-grid,.about-grid,.editorial-grid,.editorial-grid.reverse,.contact-grid,.works-grid{grid-template-columns:1fr}
  .hero-visual{min-height:460px}
  .hero-core{width:min(330px,72vw)}
  .section{padding:90px 0}
  .section-head{display:block}
  .section-head p{margin-top:14px}
  .friend-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .container{width:min(calc(100% - 24px),var(--max))}
  .navbar{inset:10px 0 auto}
  .navbar .nav-inner{min-height:58px;border-radius:20px}
  .nav-toggle{display:grid;place-items:center}
  .nav-links.open{
    display:flex;position:fixed;left:12px;right:12px;top:76px;
    flex-direction:column;padding:10px;
    border:1px solid var(--line);border-radius:20px;
    background:var(--surface-strong);box-shadow:var(--shadow);
    backdrop-filter:blur(30px)
  }
  .nav-links.open a{padding:12px 14px}
  .hero-grid{gap:12px}
  .hero h1{font-size:clamp(3.2rem,18vw,5.1rem)}
  .hero-visual{min-height:390px}
  .hero-orbit::before{width:86%}.hero-orbit::after{width:64%}
  .float-c{display:none}
  .float-card{font-size:.72rem}
  .mini-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .friend-grid{grid-template-columns:1fr 1fr}
  .section{padding:78px 0}
  .feature-card{min-height:300px;padding:25px}
  .quote-panel{min-height:0;padding:26px}
  .footer-inner{display:block}
  .f-links{justify-content:flex-start;margin-top:18px}
}
@media (max-width:420px){
  .team-grid,.friend-grid{grid-template-columns:1fr}
  .nav-logo span{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important}
}

/* =========================================================
   v4 · Aurora Orbit / Light Path system
   Own visual language for Mitu Songge: spatial light, glass depth,
   blue-pink-white spectrum inspired by the brand mark, without copying
   another site's composition.
   ========================================================= */

:root{
  --brand-blue:#6fa9ff;
  --brand-blue-hi:#b7d6ff;
  --brand-pink:#ff8fc7;
  --brand-pink-hi:#ffd4e6;
  --brand-white:#ffffff;
  --brand-violet:#b99aff;
  --glass-hi:rgba(255,255,255,.58);
  --glass-lo:rgba(255,255,255,.12);
  --glass-edge:rgba(255,255,255,.78);
  --light-core:rgba(255,255,255,.9);
}
html[data-theme="dark"]{
  --glass-hi:rgba(255,255,255,.14);
  --glass-lo:rgba(255,255,255,.025);
  --glass-edge:rgba(255,255,255,.20);
  --light-core:rgba(255,255,255,.62);
}

body{
  background:
    radial-gradient(1100px 700px at 6% 5%, rgba(100,164,255,.24), transparent 65%),
    radial-gradient(1000px 760px at 92% 12%, rgba(255,123,185,.22), transparent 64%),
    radial-gradient(900px 700px at 62% 96%, rgba(183,154,255,.17), transparent 68%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
}

html[data-theme="dark"] body{
  background:
    radial-gradient(1000px 700px at 8% 6%, rgba(76,137,255,.20), transparent 64%),
    radial-gradient(920px 720px at 94% 18%, rgba(255,94,172,.15), transparent 64%),
    radial-gradient(1000px 760px at 60% 100%, rgba(135,94,255,.12), transparent 68%),
    linear-gradient(180deg,#04070e,#0a101a);
}

.lightfield-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.92;
  mix-blend-mode:screen;
}
html[data-theme="dark"] .lightfield-canvas{opacity:.72}

.aurora{width:40vw;opacity:.36;filter:blur(90px);mix-blend-mode:screen}
.aurora.a1{top:4vh;left:-14vw;background:linear-gradient(135deg,#6da8ff,#9ecbff)}
.aurora.a2{top:35vh;right:-14vw;background:linear-gradient(135deg,#ff8fca,#ffd1e5)}
.aurora.a3{bottom:-20vh;left:25vw;background:linear-gradient(135deg,#9e7cff,#d3baff)}
.aurora.a4{width:26vw;top:18vh;left:33vw;background:rgba(255,255,255,.8);filter:blur(120px);opacity:.22;animation:ambientDrift 17s ease-in-out infinite alternate}
.aurora.a5{width:22vw;bottom:8vh;right:18vw;background:linear-gradient(135deg,#7fb6ff,#ff94c9);filter:blur(110px);opacity:.19;animation:ambientDrift2 19s ease-in-out infinite alternate}
@keyframes ambientDrift{from{transform:translate3d(-4vw,0,0) scale(.92)}to{transform:translate3d(7vw,3vh,0) scale(1.08)}}
@keyframes ambientDrift2{from{transform:translate3d(3vw,0,0) scale(1)}to{transform:translate3d(-5vw,-4vh,0) scale(1.12)}}

.light-route{
  position:fixed;pointer-events:none;z-index:0;height:2px;border-radius:999px;
  transform-origin:left center;filter:blur(.3px);opacity:.65;
  background:linear-gradient(90deg,transparent,var(--brand-blue-hi),rgba(255,255,255,.95),var(--brand-pink-hi),transparent);
  box-shadow:0 0 18px rgba(130,180,255,.30),0 0 38px rgba(255,143,199,.16);
}
.route-a{width:68vw;left:-10vw;top:29vh;transform:rotate(12deg);animation:routeA 16s ease-in-out infinite alternate}
.route-b{width:50vw;right:-13vw;top:60vh;transform:rotate(-18deg);animation:routeB 19s ease-in-out infinite alternate}
.route-c{width:42vw;left:14vw;bottom:17vh;transform:rotate(-8deg);opacity:.35;animation:routeC 24s ease-in-out infinite alternate}
@keyframes routeA{from{transform:translate3d(-3vw,0,0) rotate(12deg) scaleX(.92)}to{transform:translate3d(8vw,5vh,0) rotate(6deg) scaleX(1.08)}}
@keyframes routeB{from{transform:translate3d(4vw,0,0) rotate(-18deg) scaleX(.88)}to{transform:translate3d(-8vw,-4vh,0) rotate(-12deg) scaleX(1.06)}}
@keyframes routeC{from{transform:translate3d(-2vw,0,0) rotate(-8deg)}to{transform:translate3d(5vw,-4vh,0) rotate(-4deg)}}

.glass{
  background:
    linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.045) 44%,rgba(255,255,255,.12)),
    linear-gradient(180deg,var(--glass-hi),var(--glass-lo));
  border:1px solid var(--glass-edge);
  box-shadow:
    0 24px 90px rgba(67,87,124,.13),
    0 2px 1px rgba(255,255,255,.32) inset,
    0 -1px 0 rgba(255,255,255,.16) inset;
  backdrop-filter:blur(38px) saturate(175%);
  -webkit-backdrop-filter:blur(38px) saturate(175%);
}
.glass::before{
  background:
    linear-gradient(125deg,rgba(255,255,255,.60),transparent 23%,transparent 66%,rgba(255,255,255,.08)),
    radial-gradient(220px 90px at 16% 0%,rgba(255,255,255,.27),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 50%);
  opacity:1;
}
.glass::after{
  border-top:1px solid rgba(255,255,255,.42);
  border-left:1px solid rgba(255,255,255,.16);
}
html[data-theme="dark"] .glass{
  background:
    linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.018) 50%,rgba(255,255,255,.05)),
    linear-gradient(180deg,var(--glass-hi),var(--glass-lo));
  box-shadow:
    0 28px 110px rgba(0,0,0,.40),
    0 2px 1px rgba(255,255,255,.11) inset,
    0 -1px 0 rgba(255,255,255,.05) inset;
}
html[data-theme="dark"] .glass::before{opacity:.78}

.navbar .nav-inner{
  background:
    linear-gradient(120deg,rgba(255,255,255,.34),rgba(255,255,255,.07)),
    var(--surface-strong);
  box-shadow:0 18px 60px rgba(45,63,99,.16),0 1px 0 rgba(255,255,255,.35) inset;
}
.logo-mark{
  overflow:hidden;position:relative;
  background:linear-gradient(135deg,rgba(111,169,255,.86),rgba(255,143,199,.80) 56%,rgba(185,154,255,.86));
}
.logo-mark::after{content:"";position:absolute;inset:-70% 25%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.74),transparent);animation:logoSweep 5s linear infinite}
@keyframes logoSweep{from{transform:translateX(-120%) rotate(22deg)}to{transform:translateX(160%) rotate(22deg)}}

.hero{padding-top:142px}
.hero-grid{grid-template-columns:minmax(0,.98fr) minmax(430px,1.02fr);gap:clamp(22px,4vw,72px)}
.hero-copy{position:relative;z-index:4}
.hero h1{font-size:clamp(4.5rem,9vw,9.4rem);text-shadow:0 14px 60px rgba(75,109,167,.09)}
.hero .gradient{
  background:linear-gradient(100deg,#71a8ff 0%,#d7dfff 34%,#ff9bcb 66%,#b397ff 100%);
  background-size:180% 100%;animation:gradientShift 11s ease-in-out infinite alternate;
}
@keyframes gradientShift{from{background-position:0% 50%}to{background-position:100% 50%}}
.hero-badge{box-shadow:0 12px 35px rgba(110,151,220,.12),0 0 0 1px rgba(255,255,255,.18) inset}
.hero-visual{min-height:610px;perspective:1100px}
.hero-orbit{inset:-6% -7%}
.hero-orbit::before{width:82%;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 60px rgba(118,171,255,.10);animation:orbitSpin 22s linear infinite}
.hero-orbit::after{width:58%;border-color:rgba(255,158,202,.36);box-shadow:0 0 50px rgba(255,153,201,.11);animation:orbitSpinRev 16s linear infinite}
@keyframes orbitSpin{to{transform:rotate(351deg) scaleX(1.12)}}
@keyframes orbitSpinRev{to{transform:rotate(-328deg) scaleX(1.25)}}
.hero-core{
  width:min(405px,74vw);aspect-ratio:1.06;border-radius:46%;padding:22px;transform:rotate(-5deg) translateZ(0);
  background:
    radial-gradient(circle at 36% 24%,rgba(255,255,255,.76),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.07) 48%,rgba(164,195,255,.10));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:
    0 45px 120px rgba(63,87,132,.20),
    0 0 0 10px rgba(255,255,255,.035),
    0 0 80px rgba(115,165,255,.22),
    0 0 120px rgba(255,143,199,.11),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -24px 50px rgba(130,163,227,.06);
  overflow:visible;
  animation:coreFloat 7s ease-in-out infinite;
}
@keyframes coreFloat{0%,100%{transform:rotate(-5deg) translate3d(0,0,0)}50%{transform:rotate(-2deg) translate3d(0,-12px,0)}}
.hero-core::before{
  content:"";position:absolute;inset:-10px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from 120deg,rgba(111,169,255,0),rgba(111,169,255,.55),rgba(255,255,255,.20),rgba(255,143,199,.65),rgba(185,154,255,.25),rgba(111,169,255,0));
  filter:blur(16px);opacity:.7;animation:haloRotate 13s linear infinite;
}
.hero-core::after{
  content:"";position:absolute;inset:-22px;border-radius:50%;z-index:-2;
  background:radial-gradient(circle,rgba(121,173,255,.16),rgba(255,143,199,.09) 42%,transparent 70%);
  filter:blur(20px);animation:haloPulse 4.5s ease-in-out infinite;
}
@keyframes haloRotate{to{transform:rotate(360deg)}}
@keyframes haloPulse{50%{transform:scale(1.06);opacity:.7}}
.hero-core img{width:94%;height:86%;object-fit:contain;transform:rotate(5deg) translateY(-2px);filter:drop-shadow(0 20px 32px rgba(55,84,135,.20)) saturate(1.04)}
.glass-depth{isolation:isolate}
.glass-specular{position:absolute;inset:5%;border-radius:40%;background:linear-gradient(128deg,rgba(255,255,255,.44),transparent 18%,transparent 72%,rgba(255,255,255,.10));mix-blend-mode:screen;pointer-events:none;transform:translateX(-6%) rotate(7deg)}
.core-caption{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:.58rem;letter-spacing:.20em;color:rgba(54,72,100,.55);white-space:nowrap;font-weight:700}
html[data-theme="dark"] .core-caption{color:rgba(235,243,255,.42)}

.hero-halo{position:absolute;border-radius:50%;pointer-events:none}
.halo-1{width:88%;aspect-ratio:1;background:radial-gradient(circle,transparent 49%,rgba(111,169,255,.18) 50%,transparent 51%);filter:blur(.2px);animation:haloTurn 18s linear infinite}
.halo-2{width:68%;aspect-ratio:1;background:radial-gradient(circle,transparent 48%,rgba(255,143,199,.18) 49%,transparent 50%);animation:haloTurnRev 12s linear infinite}
.halo-3{width:46%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 62%);filter:blur(15px)}
@keyframes haloTurn{to{transform:rotate(360deg)}}
@keyframes haloTurnRev{to{transform:rotate(-360deg)}}

.float-card{background:linear-gradient(145deg,rgba(255,255,255,.45),rgba(255,255,255,.08)),var(--surface);border-color:rgba(255,255,255,.66);box-shadow:0 18px 60px rgba(68,91,131,.15),inset 0 1px 0 rgba(255,255,255,.45);backdrop-filter:blur(28px) saturate(170%)}
.float-a{top:7%;right:3%;animation:floatA 5s ease-in-out infinite}
.float-b{bottom:8%;left:0;animation:floatB 6.5s ease-in-out infinite}
.float-c{top:49%;right:-1%;animation:floatC 7.2s ease-in-out infinite}
@keyframes floatA{50%{transform:rotate(4deg) translateY(-8px)}}
@keyframes floatB{50%{transform:rotate(-3deg) translateY(10px)}}
@keyframes floatC{50%{transform:rotate(2deg) translateY(-7px)}}

.section{padding:135px 0}
.section-head h2{max-width:820px}
.editorial-grid .feature-card{min-height:420px;background:linear-gradient(145deg,rgba(115,171,255,.10),rgba(255,143,199,.05)),var(--surface)}
.feature-card::before{background:linear-gradient(135deg,rgba(255,255,255,.58),transparent 20%,transparent 68%,rgba(255,143,199,.10))}
.mini-card{min-height:190px}
.mini-card:hover,.feature-card:hover,.quote-panel:hover,.fact-panel:hover,.manifesto:hover,.work-card:hover,.member:hover,.friend-card:hover,.contact-panel:hover{transform:translateY(-5px);box-shadow:0 30px 100px rgba(63,87,130,.18),0 1px 0 rgba(255,255,255,.35) inset}
.feature-card,.mini-card,.quote-panel,.fact-panel,.manifesto,.work-card,.member,.friend-card,.contact-panel{transition:transform .45s var(--ease),box-shadow .45s ease,border-color .45s ease}

.marquee{font-size:clamp(2.5rem,7vw,7rem);padding:18px 0;margin:8px 0 95px;border-color:rgba(255,255,255,.30);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.marquee-track{background:linear-gradient(90deg,#6fa9ff,#ffffff,#ff8fc7,#b99aff);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.38}

.manifesto{padding:55px 7%;background:radial-gradient(420px 220px at 50% 0%,rgba(111,169,255,.18),transparent 70%),radial-gradient(340px 220px at 70% 85%,rgba(255,143,199,.12),transparent 72%),rgba(255,255,255,.08)}
.manifesto .symbol{font-size:3.1rem;filter:drop-shadow(0 8px 22px rgba(124,160,229,.24))}

footer{padding-top:85px}

/* Mobile: preserve depth, reduce only expensive particle intensity via JS */
@media(max-width:820px){
  .hero{padding-top:126px}
  .hero-visual{min-height:530px}
  .hero-core{width:min(360px,78vw)}
  .route-a{width:95vw}.route-b{width:78vw}.route-c{width:65vw}
  .section{padding:100px 0}
}
@media(max-width:640px){
  .hero{padding-top:110px}
  .hero-visual{min-height:455px}
  .hero-core{width:min(315px,80vw)}
  .core-caption{font-size:.48rem;letter-spacing:.14em}
  .halo-1{width:100%}.halo-2{width:76%}
  .aurora{filter:blur(75px);opacity:.28}
  .route-a{top:34vh}.route-b{top:56vh}
}

@media(prefers-reduced-motion:reduce){
  .aurora,.light-route,.hero-core,.hero-orbit::before,.hero-orbit::after,.hero-core::before,.hero-core::after,.hero .gradient,.float-card,.logo-mark::after{animation:none !important}
  .lightfield-canvas{display:none}
}
.logo-mark img{width:28px;height:18px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(55,84,135,.12));position:relative;z-index:1}


/* V4 Ultimate 光场增强：保持原UI，仅增强空间感 */
.lightfield-canvas{mix-blend-mode:screen;filter:saturate(1.25) contrast(1.08);}
.aurora{animation-duration:22s !important;opacity:.42;}
.glass,.feature-card,.mini-card,.quote-panel,.fact-panel,.manifesto,.work-card,.member,.friend-card,.contact-panel{backdrop-filter:blur(42px) saturate(165%);}
.hero-core{filter:drop-shadow(0 0 45px rgba(111,169,255,.25));}
.hero-core::before{opacity:.8;animation-duration:12s;}
.hero-core::after{opacity:.65;animation-duration:16s;}
.cursor-glow{filter:blur(20px) saturate(150%);}
/* 白昼模式增强 */
body:not(.dark){--surface:rgba(255,255,255,.38);}
body:not(.dark) .glass{box-shadow:0 35px 120px rgba(120,160,220,.18),inset 0 1px 0 rgba(255,255,255,.7);}
.light-cone-enhanced{position:fixed;inset:auto;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5),rgba(111,169,255,.18),rgba(255,143,199,.08),transparent 70%);filter:blur(50px);pointer-events:none;}