/* ══════════════════════════════════════════════════════════════
   虾球球 · 云天筑梦 — 官网 v2
   方向 C：冷光 / DARK SIGNAL
   冷调深色底 + 青色信号光 + 玻璃拟态卡 + 辉光描边
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── color tokens ── */
  --bg:#070B12;
  --bg2:#0A101B;
  --ink:#E9EFF6;
  --mut:#9AA9BD;          /* 次级文字：对 --bg 对比度 ≈ 6.4:1 */
  --line:rgba(233,239,246,.12);
  --acc:#5FD7FF;          /* 青色信号光 · 游戏孵化线 */
  --acc-dim:rgba(95,215,255,.45);
  --acc2:#A78BFA;         /* 柔紫信号光 · 人才孵化线（对 --bg 对比度 ≈ 7.3:1） */
  --acc2-dim:rgba(167,139,250,.45);
  --glass:rgba(233,239,246,.05);
  --on-acc:#06222B;       /* 压在 acc 上的深色文字 */

  /* ── type / space / motion tokens ── */
  --sans:"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --r:3px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.22s;

  /* ════════════════════════════════════════════════════════════
     换代表作改这里：哪款游戏火了当门面，就把下面这一张图换掉。
     压字暗角与渐变在 .hero-shade 里，与图片完全解耦——
     换任何一张图，文字一侧的对比度都保持 ≥ 4.5:1。
     ════════════════════════════════════════════════════════════ */
  --hero-art:url("img/qimen-keyart.webp");
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
section{padding:96px 0 104px;border-top:1px solid var(--line)}
section.alt{background:var(--bg2)}

/* ── a11y ── */
.skip{
  position:absolute;left:16px;top:-48px;z-index:100;
  background:var(--acc);color:var(--on-acc);font-weight:700;font-size:13px;
  padding:10px 18px;border-radius:var(--r);
  transition:top var(--dur) var(--ease);
}
.skip:focus{top:12px}
:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:3px;
  border-radius:2px;
}

/* ── nav (glass) ── */
nav{
  position:sticky;top:0;z-index:10;
  background:rgba(7,11,18,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
nav .row{display:flex;align-items:center;justify-content:space-between;height:60px;gap:20px}
.brand{font-size:15px;font-weight:700;letter-spacing:.04em;flex:none}
.brand small{color:var(--mut);font-weight:400;font-size:11px;letter-spacing:.18em;margin-left:8px}
.navlinks{display:flex;gap:24px;font-size:13px;color:var(--mut)}
.navlinks a{transition:color var(--dur) var(--ease)}
.navlinks a:hover{color:var(--acc)}
.navtools{display:flex;align-items:center;gap:14px;flex:none}
.navcta{
  font-size:12.5px;font-weight:600;letter-spacing:.06em;
  border:1px solid var(--acc-dim);color:var(--acc);
  padding:8px 18px;border-radius:var(--r);white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.navcta:hover{background:var(--acc);color:var(--on-acc)}
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.mbtn{display:none;cursor:pointer;padding:10px}
.bars{display:flex;flex-direction:column;gap:5px;width:20px}
.bars i{height:2px;background:var(--ink);border-radius:1px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}

/* ── shared type ── */
h2{font-size:40px;font-weight:650;line-height:1.3;letter-spacing:.02em}
h2 .en{display:inline;font-size:14px;font-weight:400;color:var(--mut);letter-spacing:.22em;margin-left:14px}
h3{font-size:17px;font-weight:650;line-height:1.5;letter-spacing:.02em}
.lede{font-size:16.5px;max-width:44em;color:#C4D0DE;margin-top:16px}
.eyebrow{
  font-size:11.5px;letter-spacing:.32em;color:var(--acc);
  display:flex;align-items:center;gap:12px;font-weight:600;
}
.live{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);flex:none}
.kick{
  display:flex;align-items:center;gap:16px;margin-bottom:28px;
  font-size:12px;letter-spacing:.3em;color:var(--mut);
}
.kick .no{
  font-size:14px;font-weight:700;color:var(--acc);letter-spacing:.1em;
  border:1px solid var(--acc-dim);padding:3px 10px;border-radius:var(--r);
}
.sec-note{font-size:12.5px;color:var(--mut);letter-spacing:.04em;margin-top:28px}
.tail-line{
  margin-top:48px;font-size:18px;font-weight:650;letter-spacing:.02em;
  color:var(--ink);
}
.tail-line::before{
  content:"";display:block;width:44px;height:2px;background:var(--acc);
  box-shadow:0 0 12px var(--acc-dim);margin-bottom:18px;
}

/* ── 业务线归属标记：眉题内信号点（青=游戏孵化 / 紫=人才孵化）── */
.ldot{width:7px;height:7px;border-radius:50%;flex:none}
.line-g .ldot{background:var(--acc);box-shadow:0 0 10px var(--acc)}
.line-t .ldot{background:var(--acc2);box-shadow:0 0 10px var(--acc2)}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;letter-spacing:.04em;
  padding:14px 28px;border-radius:var(--r);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn.p{background:var(--acc);color:var(--on-acc);box-shadow:0 0 24px rgba(95,215,255,.35)}
.btn.p:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(95,215,255,.5)}
.btn.s{border:1px solid var(--line);color:var(--ink);background:var(--glass)}
.btn.s:hover{border-color:var(--acc);color:var(--acc)}
.cta{display:flex;gap:14px;margin:36px 0 40px;flex-wrap:wrap}

/* ── glass card ── */
.card,.lu,.layer,.cred,.member,.qf{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.card:hover,.lu:hover,.layer:hover,.cred:hover,.qf:hover{
  border-color:var(--acc-dim);
  transform:translateY(-3px);
  box-shadow:0 0 40px rgba(95,215,255,.08),0 18px 40px rgba(0,0,0,.4);
}
.card{padding:26px 24px}
.card h3{margin-bottom:10px}
.card p{font-size:14.5px;color:#C4D0DE}
.cnum{
  font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--acc);
  margin-bottom:14px;font-variant-numeric:tabular-nums;
}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.cards3.stats{margin-top:18px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}

/* ── glow figure ── */
.glowfig{position:relative}
.glowfig img{
  width:100%;
  border:1px solid rgba(95,215,255,.28);border-radius:var(--r);
  box-shadow:0 0 60px rgba(95,215,255,.12),0 24px 60px rgba(0,0,0,.5);
}
.glowfig figcaption{
  font-size:12.5px;letter-spacing:.06em;color:var(--mut);
  display:flex;align-items:center;gap:10px;margin-top:14px;
}
.glowfig figcaption::before{content:"";width:22px;height:1px;background:var(--acc);flex:none}

/* ── tags ── */
.tags{display:flex;gap:10px;flex-wrap:wrap}
.tags span{
  font-size:12px;letter-spacing:.05em;color:var(--mut);
  background:var(--glass);border:1px solid var(--line);
  padding:6px 14px;border-radius:999px;
}
.tags .hot{color:var(--acc);border-color:var(--acc-dim)}

/* ══════════ HERO · 满版代表作压场 ══════════ */
.hero{
  position:relative;overflow:hidden;
  background:var(--bg2);
}
.hero-art{
  position:absolute;inset:0;
  background-image:var(--hero-art);
  background-size:cover;
  background-position:72% 42%;
}
/* 压字层：独立于图片。左重右轻暗角 + 底部融入页面底色，
   文字全部落在左侧深色区，任何代表作图都保对比度。 */
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(7,11,18,.97) 20%,
      rgba(7,11,18,.93) 46%,
      rgba(7,11,18,.62) 70%,
      rgba(7,11,18,.45) 100%),
    linear-gradient(0deg,var(--bg) 0%,transparent 24%);
}
.hero .wrap{position:relative;padding-top:150px;padding-bottom:130px}
.hero h1{
  font-size:64px;line-height:1.26;font-weight:650;letter-spacing:.03em;
  margin:28px 0 26px;
}
.hero h1 .nb{color:var(--acc);text-shadow:0 0 28px rgba(95,215,255,.45)}
.hero .lede{font-size:17px;max-width:34em}
.signals{
  display:flex;gap:28px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.06em;color:var(--mut);
}
.signals span{display:flex;align-items:center;gap:9px}
.signals span::before{content:"";width:5px;height:5px;background:var(--acc);flex:none}

/* hero 入场：仅透明度与位移，reduced-motion 时整体关闭 */
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow,.hero h1,.hero .lede,.hero .cta,.hero .signals{
    animation:rise .9s var(--ease) both;
  }
  .hero h1{animation-delay:.08s}
  .hero .lede{animation-delay:.16s}
  .hero .cta{animation-delay:.24s}
  .hero .signals{animation-delay:.32s}
  @keyframes rise{
    from{opacity:0;transform:translateY(22px)}
    to{opacity:1;transform:none}
  }
}

/* ══════════ pillars · 两条线总览（全页架构地图，比普通卡重一档）══════════ */
.pillars-line{
  font-size:24px;font-weight:650;letter-spacing:.02em;color:var(--ink);
}
.pillars-line::before{
  content:"";display:block;width:44px;height:2px;background:var(--acc);
  box-shadow:0 0 12px var(--acc-dim);margin-bottom:18px;
}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.pillar{
  display:block;padding:38px 34px 34px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.pillar.g{border-color:var(--acc-dim);box-shadow:0 0 60px rgba(95,215,255,.1),0 20px 50px rgba(0,0,0,.35)}
.pillar.t{border-color:var(--acc2-dim);box-shadow:0 0 60px rgba(167,139,250,.08),0 20px 50px rgba(0,0,0,.35)}
.pillar:hover{transform:translateY(-3px)}
.pillar.g:hover{box-shadow:0 0 80px rgba(95,215,255,.16),0 24px 60px rgba(0,0,0,.45)}
.pillar.t:hover{box-shadow:0 0 80px rgba(167,139,250,.14),0 24px 60px rgba(0,0,0,.45)}
.pl-name{font-size:26px;font-weight:650;letter-spacing:.03em;display:flex;align-items:center;gap:12px}
.pl-name::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.pillar.g .pl-name::before{background:var(--acc);box-shadow:0 0 12px var(--acc)}
.pillar.t .pl-name::before{background:var(--acc2);box-shadow:0 0 12px var(--acc2)}
.pillar p{font-size:15px;color:#C4D0DE;margin-top:14px;max-width:30em}
.pl-go{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:13.5px;font-weight:650;letter-spacing:.06em}
.pillar.g .pl-go{color:var(--acc)}
.pillar.t .pl-go{color:var(--acc2)}

/* ══════════ 01 qimen ══════════ */
.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;margin-bottom:44px;flex-wrap:wrap;
}
.sec-line{font-size:19px;margin-top:12px;color:var(--acc);font-weight:650;letter-spacing:.04em}
.sec-cta{flex:none}
.pitch{
  display:grid;grid-template-columns:1fr 1fr;gap:44px;
  max-width:1040px;margin-bottom:52px;font-size:16px;color:#C4D0DE;
}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:56px}
.qf{padding:24px 22px}
.qfv{
  font-size:40px;font-weight:650;line-height:1.15;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--ink),var(--acc));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.qfv .pl{font-size:26px}
.qfk{font-size:12.5px;color:var(--mut);margin-top:8px;letter-spacing:.03em}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.shots .wide{grid-column:1/-1}

/* ══════════ 02 imprint ══════════ */
.ip-wrap{
  display:grid;grid-template-columns:1.25fr 1fr;gap:48px;
  align-items:center;margin-top:48px;
}
.ip-body h3{font-size:22px;margin-bottom:14px}
.ip-body p{font-size:15.5px;color:#C4D0DE}
.ip-body p.ip-note{
  margin-top:22px;font-size:12px;letter-spacing:.08em;color:var(--mut);
  border-left:2px solid var(--acc-dim);padding-left:12px;
}

/* ══════════ 03 lineup ══════════ */
.lineup{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
.lu{padding:28px 26px}
.lu h3{font-size:19px;margin-bottom:8px}
.lu-hook{
  font-size:14.5px;font-weight:650;color:var(--acc);
  letter-spacing:.02em;margin-bottom:12px;
}
.lu p{font-size:14.5px;color:#C4D0DE}
.lu .tags{margin-top:18px}

/* ══════════ 04 how · 能力层 ══════════ */
.layers{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:18px}
.layer{padding:22px 20px}
.ln{
  font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--acc);
  margin-bottom:12px;
}
.layer h3{font-size:15.5px;margin-bottom:8px}
.layer p{font-size:13.5px;color:#C4D0DE}

/* ══════════ 05 edu ══════════ */
.steps .cnum{font-variant-numeric:tabular-nums}
.edu-why{
  display:grid;grid-template-columns:1.5fr 1fr;gap:48px;
  margin-top:56px;padding-top:48px;border-top:1px solid var(--line);
  align-items:start;
}
.ew-t h3{font-size:22px;margin-bottom:14px}
.ew-t p{font-size:15.5px;color:#C4D0DE}
.ew-t .tail-line{margin-top:28px;font-size:16px}
.ew-side{display:flex;flex-direction:column;gap:14px}
.ews{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;
}
.ewk{font-size:11.5px;letter-spacing:.2em;color:var(--mut);margin-bottom:6px}
.ewv{font-size:16px;font-weight:650;color:var(--ink)}

/* ══════════ 07 team ══════════ */
.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.cred{overflow:hidden}
.cred:not(.wide){padding-bottom:24px}
.cred:not(.wide) h3,.cred:not(.wide) p,.cred:not(.wide) .ck{padding:0 22px}
.cred-em{margin-bottom:18px}
.cred-em img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  border-bottom:1px solid var(--line);
}
.ck{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--acc);
  margin-bottom:8px;
}
.cred h3{margin-bottom:8px}
.cred p{font-size:14px;color:#C4D0DE}
.cred.wide{
  padding:28px 26px;
  display:flex;flex-direction:column;justify-content:center;
  border-color:var(--acc-dim);
  box-shadow:0 0 40px rgba(95,215,255,.08) inset;
}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.member{padding:24px 24px}
.pair{font-size:18px;font-weight:700;letter-spacing:.02em;display:flex;align-items:baseline;gap:8px}
.pair .x{color:var(--mut);font-weight:400;font-size:14px}
.pair .agent{color:var(--acc)}
.role{font-size:13.5px;color:#C4D0DE;margin-top:10px}

/* ══════════ 08 contact ══════════ */
.contact-card{
  max-width:760px;margin:0 auto;text-align:center;
  background:var(--glass);border:1px solid var(--acc-dim);border-radius:var(--r);
  padding:64px 48px;
  box-shadow:0 0 80px rgba(95,215,255,.1),0 24px 60px rgba(0,0,0,.4);
}
.contact-card .kick{justify-content:center}
.contact-card .cta{justify-content:center;margin-bottom:0}

/* ── footer ── */
footer{
  border-top:1px solid var(--line);
  padding:26px 0;font-size:12px;letter-spacing:.08em;color:var(--mut);
}
footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a:hover{color:var(--acc)}

/* ── 滚动入场（渐进增强：不支持的浏览器直接显示，无 JS）── */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .card,.lu,.layer,.cred,.member,.qf,.glowfig,.ews,.pillar{
      animation:fade-up .7s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
    @keyframes fade-up{
      from{opacity:0;transform:translateY(26px)}
      to{opacity:1;transform:none}
    }
  }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ══════════ 响应式 ══════════ */
@media (max-width:1080px){
  .cards4{grid-template-columns:1fr 1fr}
  .layers{grid-template-columns:repeat(3,1fr)}
  .creds{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  section{padding:72px 0 80px}
  h2{font-size:30px}
  .hero h1{font-size:42px}
  .hero .wrap{padding-top:104px;padding-bottom:96px}
  .pitch{grid-template-columns:1fr;gap:20px}
  .pillars{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .cards3{grid-template-columns:1fr}
  .ip-wrap{grid-template-columns:1fr;gap:32px}
  .edu-why{grid-template-columns:1fr;gap:32px}
  .team{grid-template-columns:1fr}

  /* 移动端导航：checkbox 展开，纯 CSS 无 JS */
  .mbtn{display:block}
  .navlinks{
    position:absolute;top:60px;left:0;right:0;
    flex-direction:column;gap:0;
    background:rgba(7,11,18,.96);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:8px 28px 16px;
    display:none;
  }
  .navlinks a{padding:13px 0;border-top:1px solid var(--line);font-size:14px}
  .navtoggle:checked ~ .navlinks{display:flex}
  .navtoggle:checked ~ .navtools .bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle:checked ~ .navtools .bars i:nth-child(2){opacity:0}
  .navtoggle:checked ~ .navtools .bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .pillars-line{font-size:20px}
  .pl-name{font-size:22px}
  .hero h1{font-size:34px}
  .hero .lede{font-size:15.5px}
  .shots{grid-template-columns:1fr}
  .cards4{grid-template-columns:1fr}
  .layers{grid-template-columns:1fr}
  .creds{grid-template-columns:1fr}
  .lineup{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr;gap:12px}
  .qfv{font-size:32px}
  .contact-card{padding:44px 24px}
  .btn{padding:13px 20px;font-size:13.5px}
  .brand small{display:none}
  .sec-head{flex-direction:column;align-items:flex-start;gap:20px}
}

/* ── edu 增强块（2026-08-02）── */
.edu-quote{margin:64px 0 8px;padding:34px 38px;border-left:2px solid var(--acc2);background:var(--glass);border-radius:0 14px 14px 0}
.edu-quote .eq-main{font-size:24px;font-weight:700;color:var(--ink);margin:0 0 10px;line-height:1.5}
.edu-quote .eq-sub{color:var(--mut);margin:0;line-height:1.9}
.mini-h{margin:64px 0 -22px;font-size:20px;color:var(--ink)}
@media (max-width:640px){
  .edu-quote{padding:24px 22px}
  .edu-quote .eq-main{font-size:20px}
}

/* ── lineup 卡图 + how 飞轮图 + edu 双图（2026-08-02 图文扩容）── */
.lu-art{margin:-28px -26px 18px;border-radius:14px 14px 0 0;overflow:hidden}
.lu-art img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.how-art{margin:56px 0 8px}
.edu-figs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
@media (max-width:760px){.edu-figs{grid-template-columns:1fr}}